> For the complete documentation index, see [llms.txt](https://nsl-solution.gitbook.io/livesolution/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nsl-solution.gitbook.io/livesolution/module-developers/broadcastlist.md).

# 방송 목록 모듈

아래 제공하는 샘플코드를 복사하신 후, 필요한 설정에 따라 변경하여 적용합니다. \
샘플코드 내 `moduleId입력`으로 표기된 영역에 적용하고자 하는 [moduleId를 확인](/livesolution/module-developers.md#moduleid)해 주입해주세요.\
샘플코드 내 `externalServiceId`입력 으로 표기된 영역에 [솔루션 연동 ID를 확인](/livesolution/module-developers.md#externalserviceid)해 주입해주세요.

예시) `externalServiceId`와 `moduleId`는 아래와 같이 입력합니다.

<pre><code><strong>&#x3C;!--모듈 초기화 영역-->
</strong>&#x3C;div id="broadcast-list-286">&#x3C;/div>

    moduleConfig: {
      moduleId: '286',
      externalServiceId: 'jasamall',
</code></pre>

### 샘플코드 <a href="#undefined" id="undefined"></a>

{% hint style="warning" %}
`externalServiceId`와 `moduleId`를 주입하지 않는 경우 동작하지 않습니다.&#x20;
{% endhint %}

```html
<!--모듈 로딩 런처-->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/latest/index.js"></script>

<!--모듈 초기화 영역-->
<div id="broadcast-list-moduleId입력"></div>

<!--모듈 초기화 코드-->
<script>
  lico.launcher({
    name: 'ShoppingLiveBroadcastList',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/broadcast-list/latest/real/',
      js: 'index.js',
      css: 'bundle.css',
    },
    moduleConfig: {
      moduleId: 'moduleId입력',
      externalServiceId: 'externalServiceId입력',
      broadcasts: {
          onClickLive: (e, cardInfo) => {
            console.log('click 라이브', cardInfo.broadcastId)
          },
          onClickReplay: (e, cardInfo) => {
            console.log('click 다시보기', cardInfo.broadcastId)
          },
          onClickBridge: (e, cardInfo) => {
            console.log('click 예고', cardInfo.broadcastId)
          },
          onClickShortclip: (e, cardInfo) => {
            console.log('click 숏클립', cardInfo.broadcastId)
          },
          onClickMore: (e) => {
            console.log('click 캐로샐 더보기')
          },
        },
        moreButton: {
          onClick(e) {
            console.log('click 전체 목록 보기')
          },
        },
      target: document.getElementById('broadcast-list-moduleId입력'),
    },
    onLoad: function (instance) {
      // 모듈 로딩 후 처리부분 입니다.
    },
    onError: function () {
      // 모듈 로딩 실패 처리부분 입니다.
    },
  })
</script>
```

### 이벤트 핸들러 <a href="#undefined" id="undefined"></a>

#### **이벤트 정의**

<table><thead><tr><th width="179">handler</th><th>이벤트 조건</th></tr></thead><tbody><tr><td>onClickLive</td><td>방송중 상태의 방송카드를 클릭하거나, 방송전 상태이지만 예고페이지가 설정되지 않은 경우 이벤트 전달. <code>broadcastId</code>를 받아 랜딩페이지 URL 등으로 설정할 수 있습니다.</td></tr><tr><td>onClickReplay</td><td>방송종료 상태의 방송카드를 클릭시 이벤트 전달. <code>broadcastId</code>를 받아 랜딩페이지 URL 등으로 설정할 수 있습니다.</td></tr><tr><td>onClickBridge</td><td>방송전 상태이고 예고페이지가 설정된 경우 이벤트 전달. <code>broadcastId</code>를 받아 랜딩페이지 URL 등으로 설정할 수 있습니다.</td></tr><tr><td>onClickShortclip</td><td>숏클립 카드 클릭시 호출. <code>broadcastId</code>를 받아 랜딩페이지 URL 등으로 설정할 수 있습니다.</td></tr><tr><td>onClickMore</td><td>캐로셀 타입 <code>layout: carousel</code> 인 경우, 최대 개수인 20개 초과시 카드 마지막에 노출되는 더보기 버튼 클릭시 이벤트 전달.</td></tr></tbody></table>

핸들러를 제거하는 경우, 디폴트로 각 이벤트에 해당하는 쇼핑라이브 페이지로 이동합니다. (뷰어/예고페이지)\
커스텀을 희망하지 않는 이벤트에 대해서는 핸들러를 완전히 제거해주세요.