UGC 설치

인쇄

기사 요약

이 요약이 도움이 되었나요?

의견을 보내 주셔서 감사합니다.

개요

이 문서는 숏폼 UGC 기능을 플랫폼에 통합하는 방법을 설명합니다. 특정 컨테이너에 동적으로 UGC 리스트를 로드하고, 콘텐츠 생성 및 편집을 관리할 수 있습니다.

UGC 에디터 호출

showShortformUgcEdit(config) 함수를 사용하여 숏폼 UGC 편집 페이지를 호출할 수 있습니다.

문법

window.cloud.shoplive.showShortformUgcEdit(config);

설정 객체 (TShortsUGCEditConfig)

속성	타입	필수여부	설명
`userId`	`string`	필수	사용자 ID (쿼리 파라미터)
`userName`	`string`	필수	사용자 이름 (쿼리 파라미터)
`shortsId`	`string`	선택	숏폼 콘텐츠의 고유 ID 해당 값을 넣으면, 생성된 UGC 숏폼을 수정하는 에디터가 나옵니다. 마이페이지에서 특정 숏폼을 선택할 때 사용합니다.
`tags`	`string[]`	선택	콘텐츠에 연관된 태그 목록
`skus`	`string[]`	선택	콘텐츠와 연관된 상품 SKU 목록
`brandIdentifier`	`string`	선택	브랜드 식별자
`profileImage`	`string`	선택	사용자 프로필 이미지 URL
`onCustomSaveCompleted`	`(payload: TShortsUGCEditConfig) => void`	선택	저장 완료 후 실행될 콜백 함수
`onCustomDeleteCompleted`	`(payload: TShortsUGCEditConfig) => void`	선택	삭제 완료 후 실행될 콜백 함수
`onCustomCloseEdit`	`(payload: TShortsUGCEditConfig) => void`	선택	편집 페이지가 닫힐 때 실행될 콜백 함수

사용 예시

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);

UGC 마이페이지 로드

마이페이지를 호출하는 함수입니다.

setShortformUgcList(containerId, config) 함수를 사용하면, 특정 컨테이너 UGC 리스트를 동적으로 렌더링할 수 있습니다.

UGC 마이페이지 호출 문법

window.cloud.shoplive.setShortformUgcList(containerId, config);

파라미터

파라미터	타입	설명
`containerId`	`string`	UGC 리스트를 렌더링할 HTML 요소의 ID
`config`	`TShortsUGCListConfig`	사용자 정보 및 콜백 함수를 포함한 설정 객체

설정 객체 (TShortsUGCListConfig)

속성	타입	필수여부	설명
`userId`	`string`	필수	사용자 ID (쿼리 파라미터)
`userName`	`string`	필수	사용자 이름 (쿼리 파라미터)
`profileImage`	`string`	선택	사용자 프로필 이미지 URL
`onCustomSaveCompleted`	`(payload: TShortsUGCEditConfig) => void`	선택	UGC 저장 완료 후 실행될 콜백 함수
`onCustomDeleteCompleted`	`(payload: TShortsUGCEditConfig) => void`	선택	UGC 삭제 완료 후 실행될 콜백 함수
`onCustomCloseEdit`	`(payload: TShortsUGCEditConfig) => void`	선택	UGC 편집 페이지가 닫힐 때 실행될 콜백 함수

기본 사용 예시

const config = {
  userId: 'USER_ID',
  userName: 'USER_NAME',
};

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

확장 예시

<div id="ugc-list-container"></div>
<script>
window.cloud.shoplive.setShortformUgcList('ugc-list-container', {
  userId: 'USER_ID',
  userName: 'USER_NAME',
  onCustomSaveCompleted: (payload) => console.log('저장 완료:', payload),
  onCustomDeleteCompleted: (payload) => console.log('삭제 완료:', payload),
  onCustomCloseEdit: (payload) => console.log('편집 종료:', payload),
});
</script>

참고 사항

선택 속성: 설정하지 않으면 기본값으로 처리되며, 관련된 특정 기능만 비활성화됩니다.
필수 속성: userId 및 userName이 없으면 기능이 정상적으로 동작하지 않습니다.
렌더링 업데이트: 편집 페이지에서 변경된 내용은 containerId가 지정된 요소에 즉시 반영됩니다.

What's Next

스타일 가이드

개요
UGC 에디터 호출
UGC 마이페이지 로드
참고 사항