@kinxcdn/commerce-player NPM

midibus commerce 플레이어 컴포넌트

미디버스 커머스 플레이어

Installation

npm i @kinxcdn/commerce-player

# 또는

yarn add @kinxcdn/commerce-player

Usage

WidgetPlayer

Props

Prop	타입	기본값	설명
`collectionId`	`string`	—	불러올 미디어 컬렉션의 고유 ID
`isPreview`	`string`	`false`	프리뷰 모드 렌더링 여부 (`true`/`false`)
`iconForm`	`string`	`INSTA` \| `YOUTUBE`	아이콘 형태
`iconShape`	`string`	`MANY` \| `ONE`	아이콘 레이아웃
`iconSize`	`string`	`120`	아이콘 크기(px)
`borderLine`	`string`	`ALWAYS`	아이콘 테두리 유무
`exposeTitle`	`string`	`true`	컬렉션 제목 노출 여부 (`true`/`false`)
`player`	`string`	`POPUP` \| `INLINE`	위젯 플레이어 유형
`rounded`	`string`	`true`	아이콘 모서리 둥글기 여부 (`true`/`false`)
`titlePosition`	`string`	`BOTTOM` \| `TOP`	제목 위치 (`BOTTOM`/`TOP`)

사용 예시

React

import WidgetPlayer from '@kinxcdn/commerce-player';

<WidgetPlayer
  collectionId="abc123"
  iconForm="YOUTUBE"
  iconShape="MANY"
  iconSize={80}
  borderLine="ALWAYS"
  exposeTitle={true}
  player="POPUP"
  rounded={false}
  titlePosition="inner"
/>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>WidgetPlayer 예제</title>
    <!-- CDN에서 commerce-player 로더 불러오기 -->
    <script src="https://unpkg.com/@kinxcdn/commerce-player/dist/commerce-player.min.js"></script>
  </head>
  <body>
    <div style="height: 600px; width: 100%;">
      <!-- 최소 설정: collectionId만 -->
      <mc-widget-player
        collectionId="6j7d3T4OG"
      ></mc-widget-player>

      <!-- 모든 옵션 설정 예시 -->
      <mc-widget-player
        collectionId="6j7d3T4OG"
        isPreview="true"
        iconForm="YOUTUBE"
        iconShape="ONE"
        iconSize="80"
        borderLine="NIGHT"
        exposeTitle="false"
        player="INLINE"
        rounded="false"
        titlePosition="TOP"
      ></mc-widget-player>
    </div>
  </body>
</html>