UGC 설치

숏폼 UGC (User-Generaged Content) 설치 방법을 안내합니다.

숏폼 UGC 리스트 설정 및 적용

setShortformUgcList(containerId, config) 함수를 호출하여, 특정 컨테이너에 숏폼 UGC 리스트 페이지를 동적으로 로드할 수 있습니다. 이 함수는 UGC 리스트를 비동기적으로 불러오고, 지정된 컨테이너에 렌더링합니다.

아래와 같이 containerId와 config를 명시하여 숏폼 리스트를 구성할 수 있습니다.

const config:TShortsUGCListConfig = {
  userId: 'test.shoplive@shoplive.cloud',
  userName: 'shoplive',
};

window.cloud.shoplive.setShortformUgcList('ugc-list-container', config);

필수 설정(TShortsUGCListConfig)

export interface TShortsUGCListConfig {
  userId: string;  // query parameter 유저 ID
  userName: string; // query parameter 유저 이름 
  profileImage?: string; // query parameter 프로필 이미지
  onCustomSaveCompleted?: (payload: TShortsUGCEditConfig) => void; // 상세 페이지 저장 완료 시 실행할 수 있는 사용자 정의 함수
  onCustomDeleteCompleted?: (payload: TShortsUGCEditConfig) => void; // 상세 페이지 삭제 완료 시 실행할 수 있는 사용자 정의 함수
  onCustomCloseEdit?: (payload: TShortsUGCEditConfig) => void; // 상세 페이지가 닫힐 때 실행할 수 있는 사용자 정의 함수
}

물음표(?)로 표시된 property는 optional입니다.

• Optional property는 값을 설정하지 않으면 기본값으로 처리되고 관련된 특정 기능만 동작하지 않습니다. 전체적인 동작에 영향을 미치지 않습니다.

• 나머지는 Required property로 반드시 값을 설정해야 합니다. 값이 없으면 기능이 동작하지 않을 수 있습니다.

사용 예시 - 숏폼 UGC 리스트 로드

아래와 같은 방식으로 특정 페이지에 숏폼 UGC 리스트를 로드할 수 있습니다:

//shortform_ugc.html

{...}
<div id="my-page-view" />
<script>
window.cloud.shoplive.setShortformUgcList('my-page-view', {
  userId: 'USER_ID',
  userName: 'USER_NAME',
  onCustomSaveCompleted: (payload) => {
    console.log('저장 완료:', payload);
  },
  onCustomDeleteCompleted: (payload) => {
    console.log('삭제 완료:', payload);
  },
  onCustomCloseEdit: (payload) => {
    console.log('수정 종료:', payload);
  },
});
</script>

위의 코드는 아래와 같이 작동합니다.

• HTML 요소 선택:

  • <div id="my-page-view" />는 숏폼 UGC 리스트를 표시할 위치를 나타냅니다. 이 요소가 숏폼 콘텐츠가 렌더링될 대상이 됩니다.

• setShortformUgcList 함수 호출:

  • <script> 태그 내부에서 cloud.shoplive.setShortformUgcList 함수가 호출됩니다.

  • 첫 번째 인자로는 대상 요소의 ID인 'my-page-view'가 전달되어, 숏폼 리스트가 표시될 위치를 지정합니다.

  • 두 번째 인자는 사용자 ID, 이름, 저장, 삭제, 편집 종료 시 호출될 콜백 함수가 포함된 설정 객체입니다.

• 콜백 함수 동작:

  • 저장 완료 (onCustomSaveCompleted): 사용자가 숏폼을 저장할 때 이 함수가 호출됩니다. payload 매개변수를 통해 전달된 데이터로 저장된 정보가 화면에 업데이트됩니다.

  • 삭제 완료 (onCustomDeleteCompleted): 사용자가 숏폼을 삭제할 때 실행되며, 삭제 완료 시 실행할 수 있는 사용자 정의 함수입니다.

  • 편집 창 종료 (onCustomCloseEdit): 사용자가 편집 창을 닫을 때 호출되며, 창이 닫힐 때 실행할 수 있는 사용자 정의 함수입니다.

• 최종 화면 업데이트:

  • 각 콜백 함수가 호출될 때 console.log(payload);가 실행되어 최신 데이터가 콘솔에 출력됩니다. 각 저장, 삭제, 또는 편집 종료 시점의 상태를 확인할 수 있습니다.

    
    

    최신 숏폼 UGC 리스트는 my-page-view 요소에 즉시 반영되어 사용자에게 업데이트된 상태를 보여줍니다.

    각 콜백 함수가 호출될 때마다 console.log(payload);가 실행되어 최신 데이터가 콘솔에 출력됩니다. 각 저장, 삭제, 또는 편집 종료 시점의 상태를 확인할 수 있습니다.

    화면에서는 my-page-view 요소에 최신 숏폼 UGC 리스트가 반영되어 사용자에게 즉각적인 업데이트가 표시됩니다.

숏폼 UGC 상세 페이지 설정 및 호출

showShortformUgcEdit(config) 함수를 호출하여, 숏폼 UGC를 수정 및 생성할 수 있는 페이지를 로드할 수 있습니다. config 객체를 사용해 필요한 설정을 전달하고, 특정 이벤트(저장, 삭제, 닫기)가 완료되면 해당 시점에 정의된 사용자 정의 함수를 실행할 수 있습니다.

아래와 같은 방식으로 window.cloud.shoplive.showShortformUgcEdit(config)를 호출할 수 있습니다.

const config = {
  userId: 'USER_ID',
  userName: 'USER_NAME',
  profileImage: 'https://example.com/profile.jpg',
  shortsId: '123456789',
  skus: ['sku1', 'sku2'],
  tags: ['tag1', 'tag2'],
  onCustomSaveCompleted: (payload) => {
    console.log('저장 완료:', payload);
  },
  onCustomDeleteCompleted: (payload) => {
    console.log('삭제 완료:', payload);
  },
  onCustomCloseEdit: (payload) => {
    console.log('수정 종료:', payload);
  },
};

window.cloud.shoplive.showShortformUgcEdit(config);

필수 설정(TShortsUGCEditConfig)

export interface TShortsUGCEditConfig {
  userId: string; // query parameter 유저 ID
  userName: string; // query parameter 유저 이름 
  shortsId?: string; // 생성시 만들어진 숏폼 고유 ID
  tags?: string[]; // 태그 목록
  skus?: string[]; // 상품 고유 ID 목록
  brandIdentifier?: string; // 브랜드 식별자
  profileImage?: string; // query parameter 프로필 이미지
  onCustomSaveCompleted?: (payload: TShortsUGCEditConfig) => void; // 저장 완료 시 실행할 수 있는 사용자 정의 함수
  onCustomDeleteCompleted?: (payload: TShortsUGCEditConfig) => void; // 삭제 완료 시 실행할 수 있는 사용자 정의 함수
  onCustomCloseEdit?: (payload: TShortsUGCEditConfig) => void; // 상세 페이지가 닫힐 때 실행할 수 있는 사용자 정의 함수
}

물음표(?)로 표시된 property는 optional입니다.

• Optional property는 값을 설정하지 않으면 기본값으로 처리되고 관련된 특정 기능만 동작하지 않습니다. 전체적인 동작에 영향을 미치지 않습니다.

• 나머지는 Required property로 반드시 값을 설정해야 합니다. 값이 없으면 기능이 동작하지 않을 수 있습니다.