> 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/livelist.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-page-moduleId입력"></div>

<!--모듈 초기화 코드-->
<script>
  lico.launcher({
    name: 'ShoppingLiveBroadcastListPage',
    module: {
      resourcePath:
        'https://im.pstatic.net/live-commerce/products/broadcast-page/latest/real/',
      js: 'index.js',
      css: 'bundle.css',
    },
    moduleConfig: {
      moduleId: 'moduleId입력',
      externalServiceId: 'externalServiceId입력',
      display: {
          standby: {
            onClickBridge: (e, cardInfo) => {
              console.log('click 예고', cardInfo.broadcastId)
            },
            onClickLive: (e, cardInfo) => {
              console.log('click 라이브', cardInfo.broadcastId)
            },
          },
          onair: {
            onClickItem: (e, cardInfo) => {
              console.log('click 라이브', cardInfo.broadcastId)
            },
          },
          replay: {
            onClickItem: (e, cardInfo) => {
              console.log('click 다시보기', cardInfo.broadcastId)
            },
          },
          shortclip: {
            onClickItem: (e, cardInfo) => {
              console.log('click 숏클립', cardInfo.broadcastId)
            },
          },
        },
      target: document.getElementById('broadcast-page-moduleId입력'),
    },
    onLoad: function (instance) {
      // 모듈 로딩 후 처리부분 입니다.
    },
    onError: function () {
      // 모듈 로딩 실패 처리부분 입니다.
    },
  })
</script>
```

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

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

<table><thead><tr><th width="181">handler</th><th>이벤트 조건</th></tr></thead><tbody><tr><td>onClickLive</td><td>방송전 상태이지만 예고페이지가 설정되지 않은 경우 이벤트 전달. <code>broadcastId</code>를 받아 랜딩페이지 URL 등으로 설정할 수 있습니다.</td></tr><tr><td>onClickBridge</td><td>방송전 상태이고 예고페이지가 설정된 경우 이벤트 전달. <code>broadcastId</code>를 받아 랜딩페이지 URL 등으로 설정할 수 있습니다.</td></tr><tr><td>onair.onClickItem</td><td>방송중 상태의 방송카드 클릭시 호출. <code>broadcastId</code>를 받아 랜딩페이지 URL 등으로 설정할 수 있습니다.</td></tr><tr><td>replay.onClickItem</td><td>다시보기 상태의 방송카드 클릭시 호출. <code>broadcastId</code>를 받아 랜딩페이지 URL 등으로 설정할 수 있습니다.</td></tr><tr><td>shortclip.onClickItem</td><td>숏클립 카드 클릭시 호출. <code>broadcastId</code>를 받아 랜딩페이지 URL 등으로 설정할 수 있습니다.</td></tr></tbody></table>

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