@kinxcdn/commerce-player 1.0.18 → 1.0.19
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.
- package/README.md +83 -4
- package/dist/commerce-player.min.js +3 -4
- package/dist/esm/index.js +3 -3
- package/dist/index.d.ts +5 -0
- package/package.json +1 -1
- package/dist/commerce-player.min.js.map +0 -1
package/README.md
CHANGED
|
@@ -12,11 +12,90 @@ npm i @kinxcdn/commerce-player
|
|
|
12
12
|
yarn add @kinxcdn/commerce-player
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
[//]: # ()
|
|
16
|
-
[//]: # (## Props 설명)
|
|
17
15
|
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
## Usage
|
|
17
|
+
|
|
18
|
+
### WidgetPlayer
|
|
19
|
+
|
|
20
|
+
#### Props
|
|
21
|
+
|
|
22
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
23
|
+
|-----------------|----------|----------------------|---------------------------------|
|
|
24
|
+
| `collectionId` | `string` | — | 불러올 미디어 컬렉션의 고유 ID |
|
|
25
|
+
| `isPreview` | `string` | `false` | 프리뷰 모드 렌더링 여부 (`true`/`false`) |
|
|
26
|
+
| `iconForm` | `string` | `INSTA` \| `YOUTUBE` | 아이콘 형태 |
|
|
27
|
+
| `iconShape` | `string` | `MANY` \| `ONE` | 아이콘 레이아웃 |
|
|
28
|
+
| `iconSize` | `string` | `120` | 아이콘 크기(px) |
|
|
29
|
+
| `borderLine` | `string` | `ALWAYS` | 아이콘 테두리 유무 |
|
|
30
|
+
| `exposeTitle` | `string` | `true` | 컬렉션 제목 노출 여부 (`true`/`false`) |
|
|
31
|
+
| `player` | `string` | `POPUP` \| `INLINE` | 위젯 플레이어 유형 |
|
|
32
|
+
| `rounded` | `string` | `true` | 아이콘 모서리 둥글기 여부 (`true`/`false`) |
|
|
33
|
+
| `titlePosition` | `string` | `BOTTOM` \| `TOP` | 제목 위치 (`BOTTOM`/`TOP`) |
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
#### 사용 예시
|
|
39
|
+
|
|
40
|
+
- React
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import WidgetPlayer from '@kinxcdn/commerce-player';
|
|
44
|
+
|
|
45
|
+
<WidgetPlayer
|
|
46
|
+
collectionId="abc123"
|
|
47
|
+
iconForm="YOUTUBE"
|
|
48
|
+
iconShape="MANY"
|
|
49
|
+
iconSize={80}
|
|
50
|
+
borderLine="ALWAYS"
|
|
51
|
+
exposeTitle={true}
|
|
52
|
+
player="POPUP"
|
|
53
|
+
rounded={false}
|
|
54
|
+
titlePosition="inner"
|
|
55
|
+
/>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
- JS
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<!DOCTYPE html>
|
|
62
|
+
<html lang="en">
|
|
63
|
+
<head>
|
|
64
|
+
<meta charset="UTF-8" />
|
|
65
|
+
<meta
|
|
66
|
+
name="viewport"
|
|
67
|
+
content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"
|
|
68
|
+
/>
|
|
69
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
70
|
+
<title>WidgetPlayer 예제</title>
|
|
71
|
+
<!-- CDN에서 commerce-player 로더 불러오기 -->
|
|
72
|
+
<script src="https://unpkg.com/@kinxcdn/commerce-player/dist/commerce-player.min.js"></script>
|
|
73
|
+
</head>
|
|
74
|
+
<body>
|
|
75
|
+
<div style="height: 600px; width: 100%;">
|
|
76
|
+
<!-- 최소 설정: collectionId만 -->
|
|
77
|
+
<mc-widget-player
|
|
78
|
+
collectionId="6j7d3T4OG"
|
|
79
|
+
></mc-widget-player>
|
|
80
|
+
|
|
81
|
+
<!-- 모든 옵션 설정 예시 -->
|
|
82
|
+
<mc-widget-player
|
|
83
|
+
collectionId="6j7d3T4OG"
|
|
84
|
+
isPreview="true"
|
|
85
|
+
iconForm="YOUTUBE"
|
|
86
|
+
iconShape="ONE"
|
|
87
|
+
iconSize="80"
|
|
88
|
+
borderLine="NIGHT"
|
|
89
|
+
exposeTitle="false"
|
|
90
|
+
player="INLINE"
|
|
91
|
+
rounded="false"
|
|
92
|
+
titlePosition="TOP"
|
|
93
|
+
></mc-widget-player>
|
|
94
|
+
</div>
|
|
95
|
+
</body>
|
|
96
|
+
</html>
|
|
97
|
+
|
|
98
|
+
```
|
|
20
99
|
|
|
21
100
|
[//]: # ()
|
|
22
101
|
[//]: # ()
|