@kinxcdn/commerce-player 1.1.3 → 1.1.5
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.internal.md +202 -0
- package/README.md +1 -107
- package/dist/commerce-player.min.js +6 -6
- package/dist/esm/index.js +3 -3
- package/package.json +1 -1
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
# midibus commerce 플레이어 컴포넌트
|
|
2
|
+
|
|
3
|
+
미디버스 커머스 플레이어
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```shell
|
|
8
|
+
npm i @kinxcdn/commerce-player
|
|
9
|
+
|
|
10
|
+
# 또는
|
|
11
|
+
|
|
12
|
+
yarn add @kinxcdn/commerce-player
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## 배포
|
|
16
|
+
|
|
17
|
+
```shell
|
|
18
|
+
yarn rollup
|
|
19
|
+
npm publish
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### 코드 패키징
|
|
23
|
+
|
|
24
|
+
```shell
|
|
25
|
+
npm pack
|
|
26
|
+
# kinxcdn-commerce-player-v1.0.0.tgz
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
생성된 패키징 파일을 테스트 프로젝트에 위치시켜 `npm install ./kinxcdn-commerce-player-v1.0.0.tgz` 명령어로 설치할 수 있다.
|
|
30
|
+
|
|
31
|
+
## Usage
|
|
32
|
+
|
|
33
|
+
### WidgetPlayer
|
|
34
|
+
|
|
35
|
+
#### Props
|
|
36
|
+
|
|
37
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
38
|
+
|-----------------|----------|----------------------|---------------------------------|
|
|
39
|
+
| `collectionId` | `string` | — | 불러올 미디어 컬렉션의 고유 ID |
|
|
40
|
+
| `isPreview` | `string` | `false` | 프리뷰 모드 렌더링 여부 (`true`/`false`) |
|
|
41
|
+
| `iconForm` | `string` | `INSTA` \| `YOUTUBE` | 아이콘 형태 |
|
|
42
|
+
| `iconShape` | `string` | `MANY` \| `ONE` | 아이콘 레이아웃 |
|
|
43
|
+
| `iconSize` | `string` | `120` | 아이콘 크기(px) |
|
|
44
|
+
| `borderLine` | `string` | `ALWAYS` | 아이콘 테두리 유무 |
|
|
45
|
+
| `exposeTitle` | `string` | `true` | 컬렉션 제목 노출 여부 (`true`/`false`) |
|
|
46
|
+
| `player` | `string` | `POPUP` \| `INLINE` | 위젯 플레이어 유형 |
|
|
47
|
+
| `rounded` | `string` | `true` | 아이콘 모서리 둥글기 여부 (`true`/`false`) |
|
|
48
|
+
| `titlePosition` | `string` | `BOTTOM` \| `TOP` | 제목 위치 (`BOTTOM`/`TOP`) |
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
#### 사용 예시
|
|
54
|
+
|
|
55
|
+
- React
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import WidgetPlayer from '@kinxcdn/commerce-player';
|
|
59
|
+
|
|
60
|
+
<WidgetPlayer
|
|
61
|
+
collectionId="abc123"
|
|
62
|
+
iconForm="YOUTUBE"
|
|
63
|
+
iconShape="MANY"
|
|
64
|
+
iconSize={80}
|
|
65
|
+
borderLine="ALWAYS"
|
|
66
|
+
exposeTitle={true}
|
|
67
|
+
player="POPUP"
|
|
68
|
+
rounded={false}
|
|
69
|
+
titlePosition="inner"
|
|
70
|
+
/>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
- JS
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<!DOCTYPE html>
|
|
77
|
+
<html lang="en">
|
|
78
|
+
<head>
|
|
79
|
+
<meta charset="UTF-8" />
|
|
80
|
+
<meta
|
|
81
|
+
name="viewport"
|
|
82
|
+
content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"
|
|
83
|
+
/>
|
|
84
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
85
|
+
<title>WidgetPlayer 예제</title>
|
|
86
|
+
<!-- CDN에서 commerce-player 로더 불러오기 -->
|
|
87
|
+
<script src="https://unpkg.com/@kinxcdn/commerce-player/dist/commerce-player.min.js"></script>
|
|
88
|
+
</head>
|
|
89
|
+
<body>
|
|
90
|
+
<div style="height: 600px; width: 100%;">
|
|
91
|
+
<!-- 최소 설정: collectionId만 -->
|
|
92
|
+
<mc-widget-player
|
|
93
|
+
collectionId="6j7d3T4OG"
|
|
94
|
+
></mc-widget-player>
|
|
95
|
+
|
|
96
|
+
<!-- 모든 옵션 설정 예시 -->
|
|
97
|
+
<mc-widget-player
|
|
98
|
+
collectionId="6j7d3T4OG"
|
|
99
|
+
isPreview="true"
|
|
100
|
+
iconForm="YOUTUBE"
|
|
101
|
+
iconShape="ONE"
|
|
102
|
+
iconSize="80"
|
|
103
|
+
borderLine="NIGHT"
|
|
104
|
+
exposeTitle="false"
|
|
105
|
+
player="INLINE"
|
|
106
|
+
rounded="false"
|
|
107
|
+
titlePosition="TOP"
|
|
108
|
+
></mc-widget-player>
|
|
109
|
+
</div>
|
|
110
|
+
</body>
|
|
111
|
+
</html>
|
|
112
|
+
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
[//]: # ()
|
|
116
|
+
[//]: # ()
|
|
117
|
+
[//]: # ()
|
|
118
|
+
[//]: # (### ViewPlayer)
|
|
119
|
+
|
|
120
|
+
[//]: # ()
|
|
121
|
+
[//]: # (| Prop | 타입 | 설명 | 필수 여부 |)
|
|
122
|
+
|
|
123
|
+
[//]: # (| ---------------- | ---------------- | -------------------------------------------------- | --------- |)
|
|
124
|
+
|
|
125
|
+
[//]: # (| `shortform` | `Shortform` | 쇼핑 플레이어에 사용될 숏폼 정보 | 예 |)
|
|
126
|
+
|
|
127
|
+
[//]: # ()
|
|
128
|
+
[//]: # ()
|
|
129
|
+
[//]: # (### ShoppingPlayer)
|
|
130
|
+
|
|
131
|
+
[//]: # ()
|
|
132
|
+
[//]: # (ShoppingPlayerProps는 두 가지 형태의 props를 받을 수 있습니다. 아래는 각각의 형태에 대한 설명입니다.)
|
|
133
|
+
|
|
134
|
+
[//]: # ()
|
|
135
|
+
[//]: # (#### CollectionProps)
|
|
136
|
+
|
|
137
|
+
[//]: # ()
|
|
138
|
+
[//]: # (| Prop | 타입 | 설명 | 필수 여부 |)
|
|
139
|
+
|
|
140
|
+
[//]: # (| ------------ | ------------ | ---------------------------------------- | --------- |)
|
|
141
|
+
|
|
142
|
+
[//]: # (| `collection` | `Collection` | 쇼핑 플레이어에 사용될 컬렉션 정보 | 예 |)
|
|
143
|
+
|
|
144
|
+
[//]: # (| `isMobile` | `boolean` | 모바일 환경 여부를 나타내는 플래그 (모바일이면 true) | 아니요 |)
|
|
145
|
+
|
|
146
|
+
[//]: # ()
|
|
147
|
+
[//]: # (#### ShortFormPlayerProps)
|
|
148
|
+
|
|
149
|
+
[//]: # ()
|
|
150
|
+
[//]: # (| Prop | 타입 | 설명 | 필수 여부 |)
|
|
151
|
+
|
|
152
|
+
[//]: # (| ---------------- | --------------- |----------------------------------| --------- |)
|
|
153
|
+
|
|
154
|
+
[//]: # (| `shortform` | `Shortform` | 쇼핑 플레이어에 사용될 숏폼 정보 | 예 |)
|
|
155
|
+
|
|
156
|
+
[//]: # (| `isMobile` | `boolean` | 모바일 환경 여부를 나타내는 플래그 (모바일이면 true) | 아니요 |)
|
|
157
|
+
|
|
158
|
+
[//]: # ()
|
|
159
|
+
[//]: # (### PreviewPlayerProps)
|
|
160
|
+
|
|
161
|
+
[//]: # ()
|
|
162
|
+
[//]: # (| Prop | 타입 | 설명 | 필수 여부 |)
|
|
163
|
+
|
|
164
|
+
[//]: # (|-----------------|------------------|--------------------------------------------------|-----------|)
|
|
165
|
+
|
|
166
|
+
[//]: # (| `file` | `string` | 재생할 미디어 파일의 URL 또는 경로 | 예 |)
|
|
167
|
+
|
|
168
|
+
[//]: # (| `duration` | `number` | 미디어의 재생 길이 (초 단위) | 예 |)
|
|
169
|
+
|
|
170
|
+
[//]: # (| `productsInfo` | `Product[]` | 제품 정보 배열 (선택 사항) | 아니요 |)
|
|
171
|
+
|
|
172
|
+
[//]: # (| `logo` | `Logo` | 로고 정보 (선택 사항) | 아니요 |)
|
|
173
|
+
|
|
174
|
+
[//]: # (| `brand` | `Brand` | 브랜드 정보 (선택 사항) | 아니요 |)
|
|
175
|
+
|
|
176
|
+
[//]: # (| `playerSettings`| `PlayerSettings` | 플레이어 동작 및 UI 설정을 위한 구성 옵션 | 예 |)
|
|
177
|
+
|
|
178
|
+
[//]: # (| `title` | `string` | 플레이어 제목 (선택 사항) | 아니요 |)
|
|
179
|
+
|
|
180
|
+
[//]: # ()
|
|
181
|
+
[//]: # (### PlayerSettings 인터페이스)
|
|
182
|
+
|
|
183
|
+
[//]: # ()
|
|
184
|
+
[//]: # (| 옵션 | 타입 | 설명 | 기본값 |)
|
|
185
|
+
|
|
186
|
+
[//]: # (| --------------- | --------- |---------------------------------| ------ |)
|
|
187
|
+
|
|
188
|
+
[//]: # (| `hideProducts` | `boolean` | 플레이어 UI에서 제품(또는 관련 요소)을 표시할지 여부 | - |)
|
|
189
|
+
|
|
190
|
+
[//]: # (| `platformUi` | `boolean` | 플랫폼 별 UI 스타일 적용 여부 | - |)
|
|
191
|
+
|
|
192
|
+
[//]: # (| `autopass` | `boolean` | 컬렉션 자동으로 패스할지 여부 | - |)
|
|
193
|
+
|
|
194
|
+
[//]: # (| `controlbar` | `boolean` | 재생, 일시정지, 볼륨 조절 등 컨트롤바 표시 여부 | - |)
|
|
195
|
+
|
|
196
|
+
[//]: # (| `autoplay` | `boolean` | 페이지 로드 후 자동 재생 여부 | - |)
|
|
197
|
+
|
|
198
|
+
[//]: # (| `replay` | `boolean` | 미디어 재생 완료 후 자동 반복 여부 | - |)
|
|
199
|
+
|
|
200
|
+
[//]: # (| `comment` | `boolean` | 플레이어 내 댓글 기능 활성화 여부 | - |)
|
|
201
|
+
|
|
202
|
+
[//]: # ()
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# midibus commerce 플레이어 컴포넌트
|
|
2
2
|
|
|
3
|
-
미디버스 커머스 플레이어
|
|
3
|
+
React 기반 미디버스 커머스 플레이어 컴포넌트입니다.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -11,23 +11,6 @@ npm i @kinxcdn/commerce-player
|
|
|
11
11
|
|
|
12
12
|
yarn add @kinxcdn/commerce-player
|
|
13
13
|
```
|
|
14
|
-
|
|
15
|
-
## 배포
|
|
16
|
-
|
|
17
|
-
```shell
|
|
18
|
-
yarn rollup
|
|
19
|
-
npm publish
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
### 코드 패키징
|
|
23
|
-
|
|
24
|
-
```shell
|
|
25
|
-
npm pack
|
|
26
|
-
# kinxcdn-commerce-player-v1.0.0.tgz
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
생성된 패키징 파일을 테스트 프로젝트에 위치시켜 `npm install ./kinxcdn-commerce-player-v1.0.0.tgz` 명령어로 설치할 수 있다.
|
|
30
|
-
|
|
31
14
|
## Usage
|
|
32
15
|
|
|
33
16
|
### WidgetPlayer
|
|
@@ -111,92 +94,3 @@ import WidgetPlayer from '@kinxcdn/commerce-player';
|
|
|
111
94
|
</html>
|
|
112
95
|
|
|
113
96
|
```
|
|
114
|
-
|
|
115
|
-
[//]: # ()
|
|
116
|
-
[//]: # ()
|
|
117
|
-
[//]: # ()
|
|
118
|
-
[//]: # (### ViewPlayer)
|
|
119
|
-
|
|
120
|
-
[//]: # ()
|
|
121
|
-
[//]: # (| Prop | 타입 | 설명 | 필수 여부 |)
|
|
122
|
-
|
|
123
|
-
[//]: # (| ---------------- | ---------------- | -------------------------------------------------- | --------- |)
|
|
124
|
-
|
|
125
|
-
[//]: # (| `shortform` | `Shortform` | 쇼핑 플레이어에 사용될 숏폼 정보 | 예 |)
|
|
126
|
-
|
|
127
|
-
[//]: # ()
|
|
128
|
-
[//]: # ()
|
|
129
|
-
[//]: # (### ShoppingPlayer)
|
|
130
|
-
|
|
131
|
-
[//]: # ()
|
|
132
|
-
[//]: # (ShoppingPlayerProps는 두 가지 형태의 props를 받을 수 있습니다. 아래는 각각의 형태에 대한 설명입니다.)
|
|
133
|
-
|
|
134
|
-
[//]: # ()
|
|
135
|
-
[//]: # (#### CollectionProps)
|
|
136
|
-
|
|
137
|
-
[//]: # ()
|
|
138
|
-
[//]: # (| Prop | 타입 | 설명 | 필수 여부 |)
|
|
139
|
-
|
|
140
|
-
[//]: # (| ------------ | ------------ | ---------------------------------------- | --------- |)
|
|
141
|
-
|
|
142
|
-
[//]: # (| `collection` | `Collection` | 쇼핑 플레이어에 사용될 컬렉션 정보 | 예 |)
|
|
143
|
-
|
|
144
|
-
[//]: # (| `isMobile` | `boolean` | 모바일 환경 여부를 나타내는 플래그 (모바일이면 true) | 아니요 |)
|
|
145
|
-
|
|
146
|
-
[//]: # ()
|
|
147
|
-
[//]: # (#### ShortFormPlayerProps)
|
|
148
|
-
|
|
149
|
-
[//]: # ()
|
|
150
|
-
[//]: # (| Prop | 타입 | 설명 | 필수 여부 |)
|
|
151
|
-
|
|
152
|
-
[//]: # (| ---------------- | --------------- |----------------------------------| --------- |)
|
|
153
|
-
|
|
154
|
-
[//]: # (| `shortform` | `Shortform` | 쇼핑 플레이어에 사용될 숏폼 정보 | 예 |)
|
|
155
|
-
|
|
156
|
-
[//]: # (| `isMobile` | `boolean` | 모바일 환경 여부를 나타내는 플래그 (모바일이면 true) | 아니요 |)
|
|
157
|
-
|
|
158
|
-
[//]: # ()
|
|
159
|
-
[//]: # (### PreviewPlayerProps)
|
|
160
|
-
|
|
161
|
-
[//]: # ()
|
|
162
|
-
[//]: # (| Prop | 타입 | 설명 | 필수 여부 |)
|
|
163
|
-
|
|
164
|
-
[//]: # (|-----------------|------------------|--------------------------------------------------|-----------|)
|
|
165
|
-
|
|
166
|
-
[//]: # (| `file` | `string` | 재생할 미디어 파일의 URL 또는 경로 | 예 |)
|
|
167
|
-
|
|
168
|
-
[//]: # (| `duration` | `number` | 미디어의 재생 길이 (초 단위) | 예 |)
|
|
169
|
-
|
|
170
|
-
[//]: # (| `productsInfo` | `Product[]` | 제품 정보 배열 (선택 사항) | 아니요 |)
|
|
171
|
-
|
|
172
|
-
[//]: # (| `logo` | `Logo` | 로고 정보 (선택 사항) | 아니요 |)
|
|
173
|
-
|
|
174
|
-
[//]: # (| `brand` | `Brand` | 브랜드 정보 (선택 사항) | 아니요 |)
|
|
175
|
-
|
|
176
|
-
[//]: # (| `playerSettings`| `PlayerSettings` | 플레이어 동작 및 UI 설정을 위한 구성 옵션 | 예 |)
|
|
177
|
-
|
|
178
|
-
[//]: # (| `title` | `string` | 플레이어 제목 (선택 사항) | 아니요 |)
|
|
179
|
-
|
|
180
|
-
[//]: # ()
|
|
181
|
-
[//]: # (### PlayerSettings 인터페이스)
|
|
182
|
-
|
|
183
|
-
[//]: # ()
|
|
184
|
-
[//]: # (| 옵션 | 타입 | 설명 | 기본값 |)
|
|
185
|
-
|
|
186
|
-
[//]: # (| --------------- | --------- |---------------------------------| ------ |)
|
|
187
|
-
|
|
188
|
-
[//]: # (| `hideProducts` | `boolean` | 플레이어 UI에서 제품(또는 관련 요소)을 표시할지 여부 | - |)
|
|
189
|
-
|
|
190
|
-
[//]: # (| `platformUi` | `boolean` | 플랫폼 별 UI 스타일 적용 여부 | - |)
|
|
191
|
-
|
|
192
|
-
[//]: # (| `autopass` | `boolean` | 컬렉션 자동으로 패스할지 여부 | - |)
|
|
193
|
-
|
|
194
|
-
[//]: # (| `controlbar` | `boolean` | 재생, 일시정지, 볼륨 조절 등 컨트롤바 표시 여부 | - |)
|
|
195
|
-
|
|
196
|
-
[//]: # (| `autoplay` | `boolean` | 페이지 로드 후 자동 재생 여부 | - |)
|
|
197
|
-
|
|
198
|
-
[//]: # (| `replay` | `boolean` | 미디어 재생 완료 후 자동 반복 여부 | - |)
|
|
199
|
-
|
|
200
|
-
[//]: # (| `comment` | `boolean` | 플레이어 내 댓글 기능 활성화 여부 | - |)
|
|
201
|
-
|
|
202
|
-
[//]: # ()
|