> 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/guide-for-sellers/old-displaymodule/modules/list.md).

# 방송 목록 모듈

방송 목록 모듈은 **블럭형 모듈**으로 웹페이지 내 원하는 특정 영역에 삽입하여 적용할 수 있습니다.

레이아웃 타입에 따라 제한된 숫자의 방송이 노출되며, 방송 상태 노출 옵션과 조합하여 다양한 니즈의 컴포넌트를 구성할 수 있습니다.

![](https://g-selected.pstatic.net/MjAyMjExMTBfMTYy/MDAxNjY4MDg4NjM5Nzc0.Ygx37-rgPf0rYNC_34jKaSDiLLTUjgPygE4lJXjiViEg.jkQ2G4UPRQHdtVObqes4FLn2eKEZ97Yxit6b__9GgLAg.PNG/live_up1.png)

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

다음 샘플코드를 복사하신 후, 필요한 설정에 따라 변경하여 적용합니다.&#x20;

```html
<!-- 모듈 로딩 런처 -->
    <script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>
    
    ...
<!-- 모듈 초기화 영역 -->
    <div id='broadcast-list'></div>
    ...
<!-- 모듈 초기화 코드 -->
    <script>
    lico.launcher({
      name: 'ShoppingLiveBroadcastList',
      module: {
        resourcePath: 'https://im.pstatic.net/live-commerce/products/broadcast-list/latest/real/', //개발환경에서는 beta로 설정
        js: 'index.js',
        css: 'bundle.css'
      },
      moduleConfig: {
        externalServiceId: 'yourservice',
        layout: {
          layoutType: 'carousel', // carousel(default), list, grid, highlight
        },
        title: {
          useFeature: true,
          text: '샘플몰 라이브', // 없을 경우 기본값 으로
          style: {
            fontWeight: "bold", // bold(default), extrabold, regular 등 
            fontColor: "#1E1E23", // rgb, hex 등으로 적용 가능
            align: "left", // left(default), center
            fontFamily: "", 
            fontSize: "19px", // 모듈 로드 시 mw pc 나눠 적용함. mw: 19px / pc: 22px (default)
            paddingTop: "0px", // '0px'(default)
            paddingBottom: "13px" // 13px(default) 타이틀 하단 마진 설정값, 상단은 영역 top margin으로 처리함 
          }
        },
        broadcasts: {
          displayType: 'ALL', // ALL(default), ONAIR, REPLAY, SHORTCLIP
          onClickLive: function (e, cardInfo) {
            console.log('click live', cardInfo.broadcastId)
            window.location.href = '/viewer.html?broadcastId=' + cardInfo.broadcastId
          },
          onClickReplay: function (e, cardInfo) {
            console.log('click replay', cardInfo.broadcastId)
            // replay 페이지로 연결 or 상태로 분기(cardInfo.status)
            window.location.href = '/viewer.html?broadcastId=' + cardInfo.broadcastId + 'status=replay'
          },
          onClickBridge: function (e, cardInfo) {
            console.log('click bridge', cardInfo.broadcastId)
            window.location.href = '/livebridge.html?broadcastId=' + cardInfo.broadcastId
          },
          onClickShortclip: function (e, cardInfo) {
            console.log('click shortclip', cardInfo.broadcastId)
            window.location.href = '/shortclip.html?shortclipId=' + cardInfo.broadcastId
          },
          onClickMore: function (e) {
            window.location.href = '/livelist.html'
          }
        },
        moreButton: {
          useFeature: true,
          label : '라이브 더보기', //버튼 레이블 설정
          onClick: function(e) {
            window.location.href = '/livelist.html'
          }
        },
        style: {
          mobileMargin: {
            left: "20px",
            right: "20px", // 해당 값이 default (가이드 제공)
            top: "30px",
            bottom: "32px" // 해당 값이 default (가이드 제공)
          },
          pcMargin: {
            left: "40px",
            right: "40px", // 해당 값이 default (가이드 제공)
            top: "30px",
            bottom: "32px" // 해당 값이 default (가이드 제공)
          },
          maxWidth: "1280px", // 해당 값이 default (가이드 제공)
        },
        target: document.getElementById('broadcast-list'),
      },
      onLoad(instance) {
        console.log('created instance', instance)
        window.liveList = instance
      },
      onError() {
        console.log('error')
      },
    })
    </script>
```

***

### 1. 레이아웃 옵션  <a href="#layout" id="layout"></a>

`moduleConfig` 하위의 `layout` 의 layoutType에서 모듈 내 방송목록이 노출될 레이아웃 타입을 정의합니다.

#### **예시코드**

```javascript
layout: {
        layoutType: 'highlight', // carousel(default), list, grid, highlight
},
```

#### **설정값 정의**

다음과 같이 방송 카드를 노출할 레이아웃 형식을 정의합니다.

| carousel (default)                                                                                                                                                                   | highlight                                                                                                                                                                            | list                                                                                                                                                                                 | grid                                                                                                                                                                                 |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](https://g-selected.pstatic.net/MjAyMjExMTBfMjI3/MDAxNjY4MDg4NzY5NDkz.M2c58HaP2GwlIZVzjrityUOD2UnihlMZ1O__rFnOFw4g.VkdozMswUfZtDXCzUOxq1ilZ49LgIzJGuJEBN7kdT1gg.PNG/live_up1.png) | ![](https://g-selected.pstatic.net/MjAyMjExMTBfMTc4/MDAxNjY4MDg4Nzg3Nzkz.PCGEKdndlY7PL5aV14BbHMVOKoxS2DxNQY7O0YvvfHwg.F-5urwbUZt1tBrjKUR2-Amyn_3HjyD7KqIyA-XeFvfMg.PNG/live_up1.png) | ![](https://g-selected.pstatic.net/MjAyMjExMTBfMjE5/MDAxNjY4MDg4ODExODg5.OMDIvXfjZ-RnA00O4HdJy8OmUedwbAmoaiM1dQvIC4Mg.oFJvedg7KQ-DpYX_oHocBPKaMCBzaqzrPsoKSh_-p28g.PNG/live_up1.png) | ![](https://g-selected.pstatic.net/MjAyMjExMTBfMjg5/MDAxNjY4MDg4ODM3MDM0.Q6XP2NqsJQRlYTeHTgdMtTGD-Kf5dk6wOzsP50i4loAg.hC9L9NimdXZ4aLuZ1p08H0BxT2WRoOpymuAN6ZqbozEg.PNG/live_up1.png) |

***

### 2. 방송 상태 노출 옵션 <a href="#broadcasts.displaytype" id="broadcasts.displaytype"></a>

해당 모듈의 목록에서 노출될 방송의 상태를 moduleConfig 하위의 `broadcasts.displayType` 에서 정의합니다.

#### **예시코드**

```javascript
broadcasts: {
	displayType: 'ALL', // ALL(default), ONAIR, REPLAY
}
```

#### **설정값 정의**

<table><thead><tr><th width="141">value</th><th width="85.33333333333331">default</th><th>desc</th></tr></thead><tbody><tr><td>ALL</td><td>✓</td><td>연동된 <code>externalServiceId</code>에 동시송출로 설정된 모든 방송 노출</td></tr><tr><td>ONAIR</td><td>-</td><td>동시송출 설정된 방송 중 <code>방송중</code>, <code>방송대기중</code> 상태의 방송 노출</td></tr><tr><td>REPLAY</td><td>-</td><td>동시송출 설정된 방송 중 <code>방송종료</code> 상태의 방송만 노출 (다시보기)</td></tr><tr><td>SHORTCLIP</td><td>-</td><td>동시송출 설정된 모든 숏클립 노출</td></tr></tbody></table>

***

### 3. 방송 클릭 이벤트 핸들러 <a href="#undefined" id="undefined"></a>

모듈 내 방송 카드 클릭시&#x20;

#### **예시코드**

```javascript
broadcasts: {
	onClickLive: function (e, cardInfo) {
		console.log('click live', cardInfo.broadcastId)
		window.location.href = '/viewer.html?broadcastId=' + cardInfo.broadcastId
	},
	onClickReplay: function (e, cardInfo) {
		console.log('click replay', cardInfo.broadcastId)
		window.location.href = '/viewer.html?broadcastId=' + cardInfo.broadcastId + '&status=replay'
	},
	onClickBridge: function (e, cardInfo) {
		console.log('click bridge', cardInfo.broadcastId)
		window.location.href = '/livebridge.html?broadcastId=' + cardInfo.broadcastId
	},
        onClickShortclip: function (e, cardInfo) {
            	console.log('click shortclip', cardInfo.broadcastId)
            	window.location.href = '/shortclip.html?shortclipId=' + cardInfo.broadcastId
          },
	onClickMore: function (e) {
		window.location.href = '/livelist.html'
	}
}
```

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

<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>

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

***

### 4. 더보기 버튼 설정 <a href="#morebutton" id="morebutton"></a>

모듈 내 더보기 버튼 노출 및 클릭시 동작을 moduleConfig 하위의 `moreButton`에서 정의합니다.

**예시코드**

```javascript
moreButton: {
  useFeature: true,
  label: '전체 라이브 보러가기',
  onClick: function(e) {
    window.location.href = '/livelist.html'
  }
}
```

#### 4.1 노출 여부 설정

하단 버튼의 노출 여부를 `useFeature`에 정의합니다.

| true                                                                                                                                                                                 | false                                                                                                                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](https://g-selected.pstatic.net/MjAyMjExMTBfMjI3/MDAxNjY4MDg4NzY5NDkz.M2c58HaP2GwlIZVzjrityUOD2UnihlMZ1O__rFnOFw4g.VkdozMswUfZtDXCzUOxq1ilZ49LgIzJGuJEBN7kdT1gg.PNG/live_up1.png) | ![](https://g-selected.pstatic.net/MjAyMjExMTBfNjQg/MDAxNjY4MDg4ODc5ODk5.6d9YrgVjahA5y7xobNar-18t7pSEVYx6c7LezOct1EYg.ys487_RJynte8V6_h2B6aTJtqbrbCRN8_3K1Nr1SeVQg.PNG/live_up1.png) |

#### 4.2 버튼 레이블 설정

하단 버튼에 노출할 레이블 텍스트를 `moreButton.label`에 설정합니다.

#### 4.3 버튼 클릭시 핸들러

클릭시 상세페이지 랜딩 등의 동작을 `moreButton.onClick` 정의합니다. 모듈 하단 버튼 클릭시 호출합니다.&#x20;

### 5. 스타일 설정 <a href="#style" id="style"></a>

moduleConfig 하위의 `style`에서 모듈의 마진을 설정할 수 있습니다. pc와 모바일을 별도로 설정할 수 있습니다.

**코드 예시**

```javascript
      style: {
          mobileMargin: {
            left: "20px",
            right: "20px", // 해당 값이 default (가이드 제공)
            top: "30px",
            bottom: "32px" // 해당 값이 default (가이드 제공)
          },
          pcMargin: {
            left: "40px",
            right: "40px", // 해당 값이 default (가이드 제공)
            top: "30px",
            bottom: "32px" // 해당 값이 default (가이드 제공)
          },
          maxWidth: "1280px", // 해당 값이 default (가이드 제공)
        },
```

**설정값 정의**\
모듈 전체 영역에 대한 `padding`과 `max-width`값을 지정합니다.

<table><thead><tr><th width="167.33333333333331">param</th><th width="274">default</th><th>desc</th></tr></thead><tbody><tr><td>pcMargin</td><td><code>padding: 30px 20px 32px;</code></td><td>pc인 경우 렌더 시점에 인라인으로 스타일을 추가합니다. (변경시 반응형 동작하지 않음) 상하좌우 패딩값을 개별 지정할 수 있습니다.</td></tr><tr><td>mobileMargin</td><td><code>padding: 30px 40px 32px;</code></td><td>모바일인 경우 렌더 시점에 인라인으로 스타일을 추가합니다. 상하좌우 패딩값을 개별 지정할 수 있습니다.</td></tr><tr><td>maxWidth</td><td><code>max-width: 1280px;</code></td><td>모듈 전체의 max-width를 설정합니다.</td></tr></tbody></table>

### &#x20;<a href="#b." id="b."></a>