@kinxcdn/commerce-player 1.6.5 → 1.6.6-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.internal.md +82 -122
  2. package/README.md +50 -45
  3. package/dist/commerce-player.min.js +4 -4
  4. package/dist/esm/index.js +4 -4
  5. package/package.json +1 -1
package/README.internal.md CHANGED
@@ -15,7 +15,7 @@ yarn add @kinxcdn/commerce-player
15
15
  ## 배포
16
16
 
17
17
  ```shell
18
- yarn rollup
18
+ yarn rollup
19
19
  npm publish
20
20
  ```
21
21
 
@@ -23,7 +23,7 @@ npm publish
23
23
 
24
24
  사전 테스트용 알파 버전을 퍼블리시할 때는 `alpha` 태그를 사용합니다.
25
25
 
26
- 1) 버전 프리릴리즈 증가(또는 직접 지정)
26
+ 1. 버전 프리릴리즈 증가(또는 직접 지정)
27
27
 
28
28
  ```bash
29
29
  # 현재 버전을 기준으로 alpha 프리릴리즈 증가
@@ -33,14 +33,14 @@ npm version prerelease --preid=alpha
33
33
  npm version 1.6.0-alpha.3
34
34
  ```
35
35
 
36
- 2) 빌드 후 `alpha` 태그로 퍼블리시
36
+ 2. 빌드 후 `alpha` 태그로 퍼블리시
37
37
 
38
38
  ```bash
39
39
  yarn rollup
40
40
  npm publish --tag alpha
41
41
  ```
42
42
 
43
- 3) 설치/검증 방법
43
+ 3. 설치/검증 방법
44
44
 
45
45
  ```bash
46
46
  npm i @kinxcdn/commerce-player@alpha
@@ -70,14 +70,15 @@ tailwind를 사용해 개발했으나 클라이언트 사이트 내 tailwind를
70
70
  - React (ESM)
71
71
 
72
72
  ```ts
73
- import { configure } from '@kinxcdn/commerce-player';
73
+ import { configure } from "@kinxcdn/commerce-player";
74
74
 
75
75
  configure({
76
76
  endpoints: {
77
- API_BASE_URL: 'https://mcommerce-back.midibus.dev-kinxcdn.com:8001',
78
- STATISTICS_BASE_URL: 'https://9j9iple286.execute-api.ap-northeast-2.amazonaws.com/dev',
79
- PLAYER_BACK_BASE_URL: 'https://back-playdata.midibus.im',
80
- PLAYER_BASE_URL: 'https://mcommerce-play.midibus.dev-kinxcdn.com',
77
+ API_BASE_URL: "https://mcommerce-back.midibus.dev-kinxcdn.com:8001",
78
+ STATISTICS_BASE_URL:
79
+ "https://9j9iple286.execute-api.ap-northeast-2.amazonaws.com/dev",
80
+ PLAYER_BACK_BASE_URL: "https://back-playdata.midibus.im",
81
+ PLAYER_BASE_URL: "https://mcommerce-play.midibus.dev-kinxcdn.com",
81
82
  },
82
83
  });
83
84
 
@@ -91,10 +92,11 @@ UMD 번들에서는 전역 키를 통해 엔드포인트를 주입합니다. 컴
91
92
  ```html
92
93
  <script>
93
94
  window.__KINXCDN_COMMERCE_PLAYER_ENDPOINTS__ = {
94
- API_BASE_URL: 'https://mcommerce-back.midibus.dev-kinxcdn.com:8001',
95
- STATISTICS_BASE_URL: 'https://9j9iple286.execute-api.ap-northeast-2.amazonaws.com/dev',
96
- PLAYER_BACK_BASE_URL: 'https://back-playdata.midibus.im',
97
- PLAYER_BASE_URL: 'https://mcommerce-play.midibus.dev-kinxcdn.com',
95
+ API_BASE_URL: "https://mcommerce-back.midibus.dev-kinxcdn.com:8001",
96
+ STATISTICS_BASE_URL:
97
+ "https://9j9iple286.execute-api.ap-northeast-2.amazonaws.com/dev",
98
+ PLAYER_BACK_BASE_URL: "https://back-playdata.midibus.im",
99
+ PLAYER_BASE_URL: "https://mcommerce-play.midibus.dev-kinxcdn.com",
98
100
  };
99
101
  </script>
100
102
  <script src="https://unpkg.com/@kinxcdn/commerce-player/dist/commerce-player.min.js"></script>
@@ -108,19 +110,18 @@ UMD 번들에서는 전역 키를 통해 엔드포인트를 주입합니다. 컴
108
110
 
109
111
  #### Props
110
112
 
111
- | Prop | 타입 | 기본값 | 설명 |
112
- |-----------------|----------|----------------------|---------------------------------|
113
- | `collectionId` | `string` | — | 불러올 미디어 컬렉션의 고유 ID |
114
- | `isPreview` | `string` | `false` | 프리뷰 모드 렌더링 여부 (`true`/`false`) |
115
- | `iconForm` | `string` | `INSTA` \| `YOUTUBE` | 아이콘 형태 |
116
- | `iconShape` | `string` | `MANY` \| `ONE` | 아이콘 레이아웃 |
117
- | `iconSize` | `string` | `120` | 아이콘 크기(px) |
118
- | `borderLine` | `string` | `ALWAYS` | 아이콘 테두리 유무 |
119
- | `exposeTitle` | `string` | `true` | 컬렉션 제목 노출 여부 (`true`/`false`) |
120
- | `player` | `string` | `POPUP` \| `INLINE` | 위젯 플레이어 유형 |
113
+ | Prop | 타입 | 기본값 | 설명 |
114
+ | --------------- | -------- | -------------------- | ------------------------------------------ |
115
+ | `collectionId` | `string` | — | 불러올 미디어 컬렉션의 고유 ID |
116
+ | `isPreview` | `string` | `false` | 프리뷰 모드 렌더링 여부 (`true`/`false`) |
117
+ | `iconForm` | `string` | `INSTA` \| `YOUTUBE` | 아이콘 형태 |
118
+ | `iconShape` | `string` | `MANY` \| `ONE` | 아이콘 레이아웃 |
119
+ | `iconSize` | `string` | `120` | 아이콘 크기(px) |
120
+ | `borderLine` | `string` | `ALWAYS` | 아이콘 테두리 유무 |
121
+ | `exposeTitle` | `string` | `true` | 컬렉션 제목 노출 여부 (`true`/`false`) |
122
+ | `player` | `string` | `POPUP` \| `INLINE` | 위젯 플레이어 유형 |
121
123
  | `rounded` | `string` | `true` | 아이콘 모서리 둥글기 여부 (`true`/`false`) |
122
- | `titlePosition` | `string` | `BOTTOM` \| `TOP` | 제목 위치 (`BOTTOM`/`TOP`) |
123
-
124
+ | `titlePosition` | `string` | `BOTTOM` \| `TOP` | 제목 위치 (`BOTTOM`/`TOP`) |
124
125
 
125
126
  ---
126
127
 
@@ -129,7 +130,7 @@ UMD 번들에서는 전역 키를 통해 엔드포인트를 주입합니다. 컴
129
130
  - React
130
131
 
131
132
  ```tsx
132
- import WidgetPlayer from '@kinxcdn/commerce-player';
133
+ import WidgetPlayer from "@kinxcdn/commerce-player";
133
134
 
134
135
  <WidgetPlayer
135
136
  collectionId="abc123"
@@ -141,13 +142,13 @@ import WidgetPlayer from '@kinxcdn/commerce-player';
141
142
  player="POPUP"
142
143
  rounded={false}
143
144
  titlePosition="inner"
144
- />
145
+ />;
145
146
  ```
146
147
 
147
148
  - JS
148
149
 
149
150
  ```html
150
- <!DOCTYPE html>
151
+ <!doctype html>
151
152
  <html lang="en">
152
153
  <head>
153
154
  <meta charset="UTF-8" />
@@ -163,9 +164,7 @@ import WidgetPlayer from '@kinxcdn/commerce-player';
163
164
  <body>
164
165
  <div style="height: 600px; width: 100%;">
165
166
  <!-- 최소 설정: collectionId만 -->
166
- <mc-widget-player
167
- collectionId="6j7d3T4OG"
168
- ></mc-widget-player>
167
+ <mc-widget-player collectionId="6j7d3T4OG"></mc-widget-player>
169
168
 
170
169
  <!-- 모든 옵션 설정 예시 -->
171
170
  <mc-widget-player
@@ -183,96 +182,57 @@ import WidgetPlayer from '@kinxcdn/commerce-player';
183
182
  </div>
184
183
  </body>
185
184
  </html>
186
-
187
185
  ```
188
186
 
189
-
190
-
191
- [//]: # ()
192
- [//]: # ()
193
- [//]: # ()
194
- [//]: # (### ViewPlayer)
195
-
196
- [//]: # ()
197
- [//]: # (| Prop | 타입 | 설명 | 필수 여부 |)
198
-
199
- [//]: # (| ---------------- | ---------------- | -------------------------------------------------- | --------- |)
200
-
201
- [//]: # (| `shortform` | `Shortform` | 쇼핑 플레이어에 사용될 숏폼 정보 | 예 |)
202
-
203
- [//]: # ()
204
- [//]: # ()
205
- [//]: # (### ShoppingPlayer)
206
-
207
- [//]: # ()
208
- [//]: # (ShoppingPlayerProps는 두 가지 형태의 props를 받을 수 있습니다. 아래는 각각의 형태에 대한 설명입니다.)
209
-
210
- [//]: # ()
211
- [//]: # (#### CollectionProps)
212
-
213
- [//]: # ()
214
- [//]: # (| Prop | 타입 | 설명 | 필수 여부 |)
215
-
216
- [//]: # (| ------------ | ------------ | ---------------------------------------- | --------- |)
217
-
218
- [//]: # (| `collection` | `Collection` | 쇼핑 플레이어에 사용될 컬렉션 정보 | 예 |)
219
-
220
- [//]: # (| `isMobile` | `boolean` | 모바일 환경 여부를 나타내는 플래그 &#40;모바일이면 true&#41; | 아니요 |)
221
-
222
- [//]: # ()
223
- [//]: # (#### ShortFormPlayerProps)
224
-
225
- [//]: # ()
226
- [//]: # (| Prop | 타입 | 설명 | 필수 여부 |)
227
-
228
- [//]: # (| ---------------- | --------------- |----------------------------------| --------- |)
229
-
230
- [//]: # (| `shortform` | `Shortform` | 쇼핑 플레이어에 사용될 숏폼 정보 | 예 |)
231
-
232
- [//]: # (| `isMobile` | `boolean` | 모바일 환경 여부를 나타내는 플래그 &#40;모바일이면 true&#41; | 아니요 |)
233
-
234
- [//]: # ()
235
- [//]: # (### PreviewPlayerProps)
236
-
237
- [//]: # ()
238
- [//]: # (| Prop | 타입 | 설명 | 필수 여부 |)
239
-
240
- [//]: # (|-----------------|------------------|--------------------------------------------------|-----------|)
241
-
242
- [//]: # (| `file` | `string` | 재생할 미디어 파일의 URL 또는 경로 | 예 |)
243
-
244
- [//]: # (| `duration` | `number` | 미디어의 재생 길이 &#40;초 단위&#41; | 예 |)
245
-
246
- [//]: # (| `productsInfo` | `Product[]` | 제품 정보 배열 &#40;선택 사항&#41; | 아니요 |)
247
-
248
- [//]: # (| `logo` | `Logo` | 로고 정보 &#40;선택 사항&#41; | 아니요 |)
249
-
250
- [//]: # (| `brand` | `Brand` | 브랜드 정보 &#40;선택 사항&#41; | 아니요 |)
251
-
252
- [//]: # (| `playerSettings`| `PlayerSettings` | 플레이어 동작 및 UI 설정을 위한 구성 옵션 | 예 |)
253
-
254
- [//]: # (| `title` | `string` | 플레이어 제목 &#40;선택 사항&#41; | 아니요 |)
255
-
256
- [//]: # ()
257
- [//]: # (### PlayerSettings 인터페이스)
258
-
259
- [//]: # ()
260
- [//]: # (| 옵션 | 타입 | 설명 | 기본값 |)
261
-
262
- [//]: # (| --------------- | --------- |---------------------------------| ------ |)
263
-
264
- [//]: # (| `hideProducts` | `boolean` | 플레이어 UI에서 제품&#40;또는 관련 요소&#41;을 표시할지 여부 | - |)
265
-
266
- [//]: # (| `platformUi` | `boolean` | 플랫폼 별 UI 스타일 적용 여부 | - |)
267
-
268
- [//]: # (| `autopass` | `boolean` | 컬렉션 자동으로 패스할지 여부 | - |)
269
-
270
- [//]: # (| `controlbar` | `boolean` | 재생, 일시정지, 볼륨 조절 등 컨트롤바 표시 여부 | - |)
271
-
272
- [//]: # (| `autoplay` | `boolean` | 페이지 로드 후 자동 재생 여부 | - |)
273
-
274
- [//]: # (| `replay` | `boolean` | 미디어 재생 완료 후 자동 반복 여부 | - |)
275
-
276
- [//]: # (| `comment` | `boolean` | 플레이어 내 댓글 기능 활성화 여부 | - |)
277
-
278
- [//]: # ()
187
+ [//]: #
188
+ [//]: #
189
+ [//]: #
190
+ [//]: # "### ViewPlayer"
191
+ [//]: #
192
+ [//]: # "| Prop | 타입 | 설명 | 필수 여부 |"
193
+ [//]: # "| ---------------- | ---------------- | -------------------------------------------------- | --------- |"
194
+ [//]: # "| `shortform` | `Shortform` | 쇼핑 플레이어에 사용될 숏폼 정보 | 예 |"
195
+ [//]: #
196
+ [//]: #
197
+ [//]: # "### ShoppingPlayer"
198
+ [//]: #
199
+ [//]: # "ShoppingPlayerProps는 두 가지 형태의 props를 받을 수 있습니다. 아래는 각각의 형태에 대한 설명입니다."
200
+ [//]: #
201
+ [//]: # "#### CollectionProps"
202
+ [//]: #
203
+ [//]: # "| Prop | 타입 | 설명 | 필수 여부 |"
204
+ [//]: # "| ------------ | ------------ | ---------------------------------------- | --------- |"
205
+ [//]: # "| `collection` | `Collection` | 쇼핑 플레이어에 사용될 컬렉션 정보 | 예 |"
206
+ [//]: # "| `isMobile` | `boolean` | 모바일 환경 여부를 나타내는 플래그 (모바일이면 true) | 아니요 |"
207
+ [//]: #
208
+ [//]: # "#### ShortFormPlayerProps"
209
+ [//]: #
210
+ [//]: # "| Prop | 타입 | 설명 | 필수 여부 |"
211
+ [//]: # "| ---------------- | --------------- |----------------------------------| --------- |"
212
+ [//]: # "| `shortform` | `Shortform` | 쇼핑 플레이어에 사용될 숏폼 정보 | 예 |"
213
+ [//]: # "| `isMobile` | `boolean` | 모바일 환경 여부를 나타내는 플래그 (모바일이면 true) | 아니요 |"
214
+ [//]: #
215
+ [//]: # "### PreviewPlayerProps"
216
+ [//]: #
217
+ [//]: # "| Prop | 타입 | 설명 | 필수 여부 |"
218
+ [//]: # "|-----------------|------------------|--------------------------------------------------|-----------|"
219
+ [//]: # "| `file` | `string` | 재생할 미디어 파일의 URL 또는 경로 | 예 |"
220
+ [//]: # "| `duration` | `number` | 미디어의 재생 길이 (초 단위) | 예 |"
221
+ [//]: # "| `productsInfo` | `Product[]` | 제품 정보 배열 (선택 사항) | 아니요 |"
222
+ [//]: # "| `logo` | `Logo` | 로고 정보 (선택 사항) | 아니요 |"
223
+ [//]: # "| `brand` | `Brand` | 브랜드 정보 (선택 사항) | 아니요 |"
224
+ [//]: # "| `playerSettings`| `PlayerSettings` | 플레이어 동작 및 UI 설정을 위한 구성 옵션 | 예 |"
225
+ [//]: # "| `title` | `string` | 플레이어 제목 (선택 사항) | 아니요 |"
226
+ [//]: #
227
+ [//]: # "### PlayerSettings 인터페이스"
228
+ [//]: #
229
+ [//]: # "| 옵션 | 타입 | 설명 | 기본값 |"
230
+ [//]: # "| --------------- | --------- |---------------------------------| ------ |"
231
+ [//]: # "| `hideProducts` | `boolean` | 플레이어 UI에서 제품(또는 관련 요소)을 표시할지 여부 | - |"
232
+ [//]: # "| `platformUi` | `boolean` | 플랫폼 별 UI 스타일 적용 여부 | - |"
233
+ [//]: # "| `autopass` | `boolean` | 컬렉션 자동으로 패스할지 여부 | - |"
234
+ [//]: # "| `controlbar` | `boolean` | 재생, 일시정지, 볼륨 조절 등 컨트롤바 표시 여부 | - |"
235
+ [//]: # "| `autoplay` | `boolean` | 페이지 로드 후 자동 재생 여부 | - |"
236
+ [//]: # "| `replay` | `boolean` | 미디어 재생 완료 후 자동 반복 여부 | - |"
237
+ [//]: # "| `comment` | `boolean` | 플레이어 내 댓글 기능 활성화 여부 | - |"
238
+ [//]: #
package/README.md CHANGED
@@ -11,26 +11,26 @@ npm i @kinxcdn/commerce-player
11
11
 
12
12
  yarn add @kinxcdn/commerce-player
13
13
  ```
14
+
14
15
  ## Usage
15
16
 
16
17
  ### WidgetPlayer
17
18
 
18
19
  #### Props
19
20
 
20
- | Prop | 타입 | 기본값 | 설명 |
21
- |-----------------|----------|----------------------|---------------------------------|
22
- | `collectionId` | `string` | — | 불러올 미디어 컬렉션의 고유 ID |
23
- | `isPreview` | `string` | `false` | 프리뷰 모드 렌더링 여부 (`true`/`false`) |
24
- | `iconForm` | `string` | `INSTA` \| `YOUTUBE` | 아이콘 형태 |
25
- | `iconShape` | `string` | `MANY` \| `ONE` | 아이콘 레이아웃 |
26
- | `iconSize` | `string` | `120` | 아이콘 크기(px) |
27
- | `borderLine` | `string` | `ALWAYS` | 아이콘 테두리 유무 |
28
- | `exposeTitle` | `string` | `true` | 컬렉션 제목 노출 여부 (`true`/`false`) |
29
- | `player` | `string` | `POPUP` \| `INLINE` | 위젯 플레이어 유형 |
30
- | `rounded` | `string` | `true` | 아이콘 모서리 둥글기 여부 (`true`/`false`) |
31
- | `titlePosition` | `string` | `BOTTOM` \| `TOP` | 제목 위치 (`BOTTOM`/`TOP`) |
32
- | `hoverPlay` | `boolean` | `false`| 유튜브형 재생 아이콘 사용 시 마우스 오버 재생 기능 활성화 여부 |
33
-
21
+ | Prop | 타입 | 기본값 | 설명 |
22
+ | --------------- | --------- | -------------------- | -------------------------------------------------------------- |
23
+ | `collectionId` | `string` | — | 불러올 미디어 컬렉션의 고유 ID |
24
+ | `isPreview` | `string` | `false` | 프리뷰 모드 렌더링 여부 (`true`/`false`) |
25
+ | `iconForm` | `string` | `INSTA` \| `YOUTUBE` | 아이콘 형태 |
26
+ | `iconShape` | `string` | `MANY` \| `ONE` | 아이콘 레이아웃 |
27
+ | `iconSize` | `string` | `120` | 아이콘 크기(px) |
28
+ | `borderLine` | `string` | `ALWAYS` | 아이콘 테두리 유무 |
29
+ | `exposeTitle` | `string` | `true` | 컬렉션 제목 노출 여부 (`true`/`false`) |
30
+ | `player` | `string` | `POPUP` \| `INLINE` | 위젯 플레이어 유형 |
31
+ | `rounded` | `string` | `true` | 아이콘 모서리 둥글기 여부 (`true`/`false`) |
32
+ | `titlePosition` | `string` | `BOTTOM` \| `TOP` | 제목 위치 (`BOTTOM`/`TOP`) |
33
+ | `hoverPlay` | `boolean` | `false` | 유튜브형 재생 아이콘 사용 시 마우스 오버 재생 기능 활성화 여부 |
34
34
 
35
35
  ---
36
36
 
@@ -39,7 +39,7 @@ yarn add @kinxcdn/commerce-player
39
39
  - React
40
40
 
41
41
  ```tsx
42
- import WidgetPlayer from '@kinxcdn/commerce-player';
42
+ import WidgetPlayer from "@kinxcdn/commerce-player";
43
43
 
44
44
  <WidgetPlayer
45
45
  collectionId="abc123"
@@ -51,30 +51,29 @@ import WidgetPlayer from '@kinxcdn/commerce-player';
51
51
  player="POPUP"
52
52
  rounded={false}
53
53
  titlePosition="inner"
54
- />
54
+ />;
55
55
  ```
56
56
 
57
-
58
57
  ### LiveWidget
59
58
 
60
59
  #### Props
61
60
 
62
- | Prop | 타입 | 기본값 | 설명 |
63
- |-----------------------|--------------------------------------|------|-----|
64
- | `userId` | `string` | — | 라이브 목록을 불러올 미디버스 사용자 ID |
65
- | `liveType` | `"upcoming"` \| `"past"` | — | 예정 라이브/지난 라이브 구분 값 |
66
- | `widgetType` | `"ONE"` \| `"MULTIPLE"` | — | 카드 표시 형태 (단일/여러개) |
67
- | `videoAlign` | `"left"` \| `"right"` \| `"only"` | — | 썸네일/버튼 정렬 및 표시 방식 |
68
- | `aspectRatio` | `"9/16"` \| `"1/1"` | — | 썸네일 비율 |
69
- | `playback` | `"autoplay"` \| `"hover"` | — | 재생 동작 모드 |
70
- | `title` | `string` | — | 리스트 타이틀 문구 |
71
- | `titleFontSize` | `number` | — | 타이틀 폰트 크기(px) |
72
- | `isPreview` | `boolean` | `false` | 프리뷰 모드 렌더링 여부 |
73
- | `includeRepresentative` | `boolean` | — | 대표 라이브 포함 여부 |
74
- | `theme` | `{ backgroundColor?, textColor? }` | — | 컴포넌트 색상 테마 |
75
- | `layout` | `{ paddingTop?, paddingBottom?, paddingLeft?, paddingRight? }` | — | 바깥 패딩 설정 |
76
- | `card` | `{ layout?, visibleCount?, gap?, sliderPerView?, gridColumns?, width?, borderRadius? }` | — | 카드/슬라이더 레이아웃 설정 |
77
- | `sorting` (past 전용) | `"latest"` \| `"views"` \| `"likes"` | — | 지난 라이브 정렬 기준 |
61
+ | Prop | 타입 | 기본값 | 설명 |
62
+ | ----------------------- | --------------------------------------------------------------------------------------- | ------- | --------------------------------------- |
63
+ | `userId` | `string` | — | 라이브 목록을 불러올 미디버스 사용자 ID |
64
+ | `liveType` | `"upcoming"` \| `"past"` | — | 예정 라이브/지난 라이브 구분 값 |
65
+ | `widgetType` | `"ONE"` \| `"MULTIPLE"` | — | 카드 표시 형태 (단일/여러개) |
66
+ | `videoAlign` | `"left"` \| `"right"` \| `"only"` | — | 썸네일/버튼 정렬 및 표시 방식 |
67
+ | `aspectRatio` | `"9/16"` \| `"1/1"` | — | 썸네일 비율 |
68
+ | `playback` | `"autoplay"` \| `"hover"` | — | 재생 동작 모드 |
69
+ | `title` | `string` | — | 리스트 타이틀 문구 |
70
+ | `titleFontSize` | `number` | — | 타이틀 폰트 크기(px) |
71
+ | `isPreview` | `boolean` | `false` | 프리뷰 모드 렌더링 여부 |
72
+ | `includeRepresentative` | `boolean` | — | 대표 라이브 포함 여부 |
73
+ | `theme` | `{ backgroundColor?, textColor? }` | — | 컴포넌트 색상 테마 |
74
+ | `layout` | `{ paddingTop?, paddingBottom?, paddingLeft?, paddingRight? }` | — | 바깥 패딩 설정 |
75
+ | `card` | `{ layout?, visibleCount?, gap?, sliderPerView?, gridColumns?, width?, borderRadius? }` | — | 카드/슬라이더 레이아웃 설정 |
76
+ | `sorting` (past 전용) | `"latest"` \| `"views"` \| `"likes"` | — | 지난 라이브 정렬 기준 |
78
77
 
79
78
  ---
80
79
 
@@ -83,7 +82,7 @@ import WidgetPlayer from '@kinxcdn/commerce-player';
83
82
  - React
84
83
 
85
84
  ```tsx
86
- import { LiveWidget } from '@kinxcdn/commerce-player';
85
+ import { LiveWidget } from "@kinxcdn/commerce-player";
87
86
 
88
87
  <LiveWidget
89
88
  userId="3"
@@ -92,20 +91,29 @@ import { LiveWidget } from '@kinxcdn/commerce-player';
92
91
  title="예정된 라이브"
93
92
  aspectRatio="1/1"
94
93
  includeRepresentative={true}
95
- theme={{ backgroundColor: '#fff', textColor: '#111' }}
94
+ theme={{ backgroundColor: "#fff", textColor: "#111" }}
96
95
  layout={{ paddingTop: 16, paddingBottom: 16 }}
97
- card={{ layout: 'scroll', visibleCount: 8, gridColumns: 2, gap: 12, borderRadius: 12 }}
98
- />
96
+ card={{
97
+ layout: "scroll",
98
+ visibleCount: 8,
99
+ gridColumns: 2,
100
+ gap: 12,
101
+ borderRadius: 12,
102
+ }}
103
+ />;
99
104
  ```
100
105
 
101
106
  - JS (Web Component)
102
107
 
103
108
  ```html
104
- <!DOCTYPE html>
109
+ <!doctype html>
105
110
  <html lang="en">
106
111
  <head>
107
112
  <meta charset="UTF-8" />
108
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
113
+ <meta
114
+ name="viewport"
115
+ content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"
116
+ />
109
117
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
110
118
  <title>LiveWidget 예제</title>
111
119
  <!-- CDN에서 commerce-player 로더 불러오기 -->
@@ -126,13 +134,13 @@ import { LiveWidget } from '@kinxcdn/commerce-player';
126
134
  ></mc-live-widget>
127
135
  </div>
128
136
  </body>
129
- </html>
137
+ </html>
130
138
  ```
131
139
 
132
140
  - JS
133
141
 
134
142
  ```html
135
- <!DOCTYPE html>
143
+ <!doctype html>
136
144
  <html lang="en">
137
145
  <head>
138
146
  <meta charset="UTF-8" />
@@ -148,9 +156,7 @@ import { LiveWidget } from '@kinxcdn/commerce-player';
148
156
  <body>
149
157
  <div style="height: 600px; width: 100%;">
150
158
  <!-- 최소 설정: collectionId만 -->
151
- <mc-widget-player
152
- collectionId="6j7d3T4OG"
153
- ></mc-widget-player>
159
+ <mc-widget-player collectionId="6j7d3T4OG"></mc-widget-player>
154
160
 
155
161
  <!-- 모든 옵션 설정 예시 -->
156
162
  <mc-widget-player
@@ -168,5 +174,4 @@ import { LiveWidget } from '@kinxcdn/commerce-player';
168
174
  </div>
169
175
  </body>
170
176
  </html>
171
-
172
177
  ```