> 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/livelist.md).

# 전체 목록 모듈

전체 방송목록 모듈은 **풀페이지형** 모듈로 `externalServiceId`에 대해 동시송출로 설정된 모든 방송을 노출합니다.

크게 온에어 방송 / 예고방송 / 다시보기 방송을 노출하는 영역으로 구분하여 노출되며, 각 상태에 해당하는 노출방송이 없는 경우 영역이 미노출됩니다.

![](https://g-selected.pstatic.net/MjAyMjExMTBfMTY0/MDAxNjY4MDg4OTE4MzI0.PYgl6J2SufUSD3rTRWL_EGT6LT3FakOrP4JR-MfafJUg.HP03FAZ0DHVjJogfrAFBGQYfmvMGtk0xlzXlfC-GwtQg.PNG/live_up1.png)

### 샘플코드 <a href="#id-1" id="id-1"></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-page"></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: {
      externalServiceId: 'yourservice',
      header: {
        useFeature: true,
        title: {
          text: '전체 라이브',
        },
        backButton: {
          useFeature: true,
          onClick: () => {
            // 백버튼 클릭시 동작을 정의합니다.
            if (window.history.length > 1) {
              window.history.back()
            } else {
              window.close()
            }
          },
        },
      },
      documentTitle: {
        title: {
          text: '전체 페이지',
          style: {
            fontColor: '#1E1E23',
            fontSize: '19px',
            fontFamily: 'Noto Sans KR',
            fontWeight: '700',
            align: 'left',
          },
        },
        subtitle: {
          text: '전체 라이브 리스트입니다.', // 서브타이틀명 입력 
          style: {
            fontSize: "13px",
            fontFamily: "", // 서브 타이틀명 스타일 (정렬은 전체 타이틀과 동일)
          },
        },
      },
      style: {
        mobileMargin: {
          left: '20px',
          right: '20px', // 해당 값이 default 
        },
        pcMargin: {
          left: '40px',
          right: '40px', // 해당 값이 default 
        },
        maxWidth: '1280px', // 해당 값이 default (가이드 제공)
      },
      display: {
        standby: {
          title: {
            text: '예고 페이지',
            style: {
              fontColor: '#1E1E23',
              fontSize: '17px',
              fontFamily: 'Noto Sans KR',
              fontWeight: '700', // '700' '800' 가능 
              align: 'left', // 'left' 'center' 가능 
            },
          },
          layout: 'list', // 'list' 'grid' 가능
          onClickBridge: (e, cardInfo) => {
            console.log('click bridge', cardInfo.broadcastId)
            window.location.href = '/livebridge.html?broadcastId=' + cardInfo.broadcastId
          }, // 커스텀 없이 네이버 페이지 랜딩하는 경우 핸들러 제거
          onClickLive: (e, cardInfo) => {
            console.log('click bridge', cardInfo.broadcastId)
            window.location.href = '/viewer.html?broadcastId=' + cardInfo.broadcastId
          }, // 커스텀 없이 네이버 페이지 랜딩하는 경우 핸들러 제거
        },
        onair: {
          title: {
            text: '지금 라이브 중',
            style: {
              fontColor: '#1E1E23',
              fontSize: '17px',
              fontFamily: 'Noto Sans KR',
              fontWeight: '700', // '700' '800' 가능 
              align: 'left', // 'left' 'center' 가능 
            },
          },
          layout: 'highlight', // 'list' 'grid' 'highlight' 가능
          onClickItem: (e, cardInfo) => {
            console.log('click live', cardInfo.broadcastId)
            window.location.href = '/viewer.html?broadcastId=' + cardInfo.broadcastId
          },
        },
        replay: {
          defaultSort: 'LATEST', // 'LATEST', 'VIEW_COUNT', 'SALE_AMOUNT' 가능 
          sortTypes: ['LATEST', 'VIEW_COUNT', 'SALE_AMOUNT'], // 'LATEST'는 없어도 기본적으로 들어감 
          title: {
            text: '다시보기',
            style: {
              fontColor: '#1E1E23',
              fontSize: '17px',
              fontFamily: 'Noto Sans KR',
              fontWeight: '700', // '700' '800' 가능 
              align: 'left', // 'left' 'center' 가능 
            },
          },
          layout: 'grid', // 'list' 'grid' 가능
          onClickItem: (e, cardInfo) => {
            console.log('click replay', cardInfo.broadcastId)
            window.location.href = '/viewer.html?broadcastId=' + cardInfo.broadcastId + '&status=replay'
          },
        },
        shortclip: { // 숏클립 영역 설정 
          useFeature : true, // 숏클립 영역 노출 여부
          title: {
            text: '숏클립 모아보기', // 숏클립 영역 타이틀명
            style: {
              fontColor: "#1E1E23",
              fontSize: "17px",
              fontFamily: "",
              fontWeight: "700" // 숏클립 영역 스타일 
            },
          },
          onClickItem: (e, cardInfo) => { // 숏클립 클릭시 동작 설정
            console.log('click shortclip', cardInfo.broadcastId)
            window.location.href = '/shortsviewer.html?shortclipId=' + cardInfo.broadcastId
          },
          layout: 'grid', // 숏클립 영역 레이아웃 설정 (list, grid)
        },
      },
      target: document.getElementById('broadcast-list-page'),
      debug: false,
    },
    onLoad: function(instance) {
      console.log('created instance', instance)
      window.liveListPage = instance
    },
    onError: function() {
      console.log('error')
    },
  })
</script>
```

### 1. 헤더 영역 설정

백버튼 및 타이틀을 제공하기위한 상단 헤더 영역을 제어합니다.

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

```javascript
      header: {
        useFeature: true,
        title: {
          text: '전체 라이브',
        },
        backButton: {
          useFeature: true,
          onClick: () => {
            // 백버튼 클릭시 동작을 정의합니다.
            if (window.history.length > 1) {
              window.history.back()
            } else {
              window.location.href='/index.html'
            }
          },
        },
      },
```

#### **1.1 헤더노출여부 `useFeature`**

| true                                                                                                                                                                                 | false                                                                                                                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](https://g-selected.pstatic.net/MjAyMjExMTBfMTUw/MDAxNjY4MDg5MDE4NDQ5.C1HkTJlSQBqTeeFSbgh3RudxropsYHzsci4aCihO3nUg.GUNfptiTJrYDslPCu6kPMDSZu6MlLACnKEtM2eOrNo0g.PNG/live_up1.png) | ![](https://g-selected.pstatic.net/MjAyMjExMTBfMjMx/MDAxNjY4MDg5MDM0ODM2.HEsj61YBGIBqYjRcHngnkcb01K00ifHSWWFqHmaWIMsg.ZfzOzc9JXaNl4ALvZ1t-iizU30BTOjtmjNgOzRghmysg.PNG/live_up1.png) |

#### **1.2 헤더 타이틀 설정**&#x20;

헤더 영역에 노출할 타이틀 텍스트를 `title.text` 에 설정합니다.

#### **1.3 백버튼 노출여부**&#x20;

헤더 내 좌측 백버튼 노출 여부를 `backButton.useFeature` 에서정의합니다. 단, PC에서는 본 값과 무관하게 항상 백버튼이 노출되지 않습니다.

| true                                                                                                                                                                                 | false                                                                                                                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](https://g-selected.pstatic.net/MjAyMjExMTBfMTUw/MDAxNjY4MDg5MDE4NDQ5.C1HkTJlSQBqTeeFSbgh3RudxropsYHzsci4aCihO3nUg.GUNfptiTJrYDslPCu6kPMDSZu6MlLACnKEtM2eOrNo0g.PNG/live_up1.png) | ![](https://g-selected.pstatic.net/MjAyMjExMTBfNzkg/MDAxNjY4MDg5MDY1NTAy.-BB_CVEqPQKhqPtSlwRH9DEbNyspECehQu1osvFi66Yg.G21JyTsSyPq_9gCDMvCpxczOXC70ODHCsI0CN4e0vuog.PNG/live_up1.png) |

#### 1.4 백버튼 클릭시 동작 설정

`backButton.onClick` 핸들러는 헤더의 백버튼 클릭시 호출합니다. 클릭시 필요한 동작을 정의합니다. 정의하지 않는 경우 디폴트로 `history.back()`혹은 히스토리가 없는 경우 `window.close()` 로 동작합니다.

***

### 2. 상단 타이틀 설정 <a href="#documenttitle" id="documenttitle"></a>

헤더영역 아래 타이틀 영역에 노출될 텍스트 및 스타일을 moduleConfig 하위의 `documentTitle` 에서 정의합니다.

**코드 예시**

```javascript
      documentTitle: {
        title: {
          text: '전체 페이지',
          style: {
            fontColor: '#1E1E23',
            fontSize: '19px',
            fontFamily: 'Noto Sans KR',
            fontWeight: '700',
            align: 'left',
          },
        },
        subtitle: {
          text: '전체 라이브 리스트입니다.', // 서브타이틀명 입력 
          style: {
            fontSize: "13px",
            fontFamily: "", // 서브 타이틀명 스타일 (정렬은 전체 타이틀과 동일)
          },
        },
      },
```

**2.1 타이틀 설정**&#x20;

노출할 타이틀 텍스트를 `title.text` 에 설정합니다.

**2.2 서브타이틀 설정**&#x20;

노출할 텍스트를 `subtitle.text` 에 설정합니다.

#### 2.3 폰트 스타일 설정

타이틀 및 서브타이틀 텍스트에 적용할 스타일을 `title.style`와 `subtitle.style`에 각각 정의합니다. 아래 디폴트값 외에도 css style로 정의된 값은 적용가능하며, 스타일을 설정하지 않는 경우 전체 제거하시면 디폴트 스타일로 적용됩니다.

<table><thead><tr><th width="157.33333333333331">param</th><th width="107">default</th><th>desc</th></tr></thead><tbody><tr><td>fontColor</td><td>“1E1E23”</td><td>타이틀 폰트 색상, hex, rgb 등 모두 사용가능</td></tr><tr><td>fontSize</td><td>“19px”</td><td>타이틀 폰트 사이즈 (값 정의 없는 경우, 디폴트는 모바일 19px, PC 22px)</td></tr><tr><td>fontFamily</td><td>-</td><td>최상위 폰트 설정</td></tr><tr><td>fontWeight</td><td>“700”</td><td>폰트 두께 설정, “700”, “800” 등 사용가능</td></tr><tr><td>align</td><td>“left”</td><td>타이틀 정렬, "center"사용가능</td></tr></tbody></table>

### **3. 모듈 스타일 설정**

**코드 예시**

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

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

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

### 4. 방송상태별 영역 설정 <a href="#display" id="display"></a>

전체 목록 모듈은 방송 상태에 따라 방송중 (onair), 방송예고 (standby), 다시보기(replay)의 세 영역으로 나누어 노출합니다. 개별 영역에 대한 타이틀 및 스타일, 레이아웃 타입을 `moduleConfig` 하위의  `display`에서 정의합니다.

```javascript
      display: {
        standby: {
          title: {
            text: '예고 페이지',
            style: {
              fontColor: '#002DFF',
              fontSize: '17px',
              fontFamily: 'Noto Sans KR',
              fontWeight: '700', // '700' '800' 가능 
              align: 'left', // 'left' 'center' 가능 
            },
          },
          layout: 'list', 
          onClickBridge: (e, cardInfo) => {
            console.log('click bridge', cardInfo.broadcastId)
            window.location.href = '/livebridge.html?broadcastId=' + cardInfo.broadcastId
          },
          onClickLive: (e, cardInfo) => {
            console.log('click bridge', cardInfo.broadcastId)
            window.location.href = '/viewer.html?broadcastId=' + cardInfo.broadcastId
          },
```

**4.1 타이틀 설정**&#x20;

노출할 타이틀 텍스트를 개별 `display.standby`, `display.onair`, `display.replay` 하위의 `title.text` 에 설정합니다.

#### 4.2 폰트 스타일 설정

개별 타이틀 텍스트에 적용할 스타일을 `title.style`에 각각 정의합니다. 아래 디폴트값 외에도 css style로 정의된 값은 적용가능하며, 스타일을 설정하지 않는 경우 전체 제거하시면 디폴트 스타일로 적용됩니다.

<table><thead><tr><th width="159.33333333333331">param</th><th width="104">default</th><th>desc</th></tr></thead><tbody><tr><td>fontColor</td><td>“Black”</td><td>타이틀 폰트 색상, hex, rgb 등 모두 사용가능</td></tr><tr><td>fontSize</td><td>“17px”</td><td>타이틀 폰트 사이즈</td></tr><tr><td>fontFamily</td><td>-</td><td>최상위 폰트 설정</td></tr><tr><td>fontWeight</td><td>“bold”</td><td>폰트 두께 설정, “700”, “800” 등 사용가능</td></tr><tr><td>align</td><td>“left”</td><td>타이틀 정렬, "center"사용가능</td></tr></tbody></table>

#### **4.3 레이아웃 설정**

설정값별 노출은 [방송목록모듈의 레이아웃 설정](/livesolution/guide-for-sellers/old-displaymodule/modules/list.md#layout)과 동일하며, 영역별로 다음과 같이 적용가능합니다.

<table><thead><tr><th width="154.33333333333331">영역</th><th width="143">default</th><th>desc</th></tr></thead><tbody><tr><td>onair</td><td>“highlight”</td><td>“highlight”, “list”, “grid” 사용가능</td></tr><tr><td>standby</td><td>“list”</td><td>“list”, “grid” 사용가능</td></tr><tr><td>replay</td><td>“grid”</td><td>“list”, “grid” 사용가능</td></tr><tr><td>shortclip</td><td>"grid"</td><td>“list”, “grid” 사용가능</td></tr></tbody></table>

**4.4 예고 이벤트 핸들러**\
`standby` 영역에 대해 다음 핸들러가 제공됩니다. 별도 커스텀 희망하지 않는 경우 핸들러를 제거해주세요. 핸들러를 제거하는 경우 네이버에서 제공하는 기본 페이지로 새창 랜딩됩니다.&#x20;

라이브의 경우, 디폴트 페이지는 [웹뷰어>웹 랜딩](/livesolution/viewer/web/landing.md) 문서를 참고해주세요.

<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></tbody></table>

```javascript
display: {
  standby: {
    onClickBridge: (e, cardInfo) => {
      console.log('click bridge', cardInfo.broadcastId)
      window.location.href = '/livebridge.html?broadcastId=' + cardInfo.broadcastId
    },
    onClickLive: (e, cardInfo) => {
      console.log('click bridge', cardInfo.broadcastId)
      window.location.href = '/viewer.html?broadcastId=' + cardInfo.broadcastId
    },
  }
}
```

#### 4.5 이외 공통 이벤트 핸들러

<table><thead><tr><th width="215">handler</th><th>이벤트 조건</th></tr></thead><tbody><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>

```javascript
display: {
  onair: {
    onClickItem: (e, cardInfo) => {
      console.log('click bridge', cardInfo.broadcastId)
      window.location.href = '/viewer.html?broadcastId=' + cardInfo.broadcastId
    },
  },
  replay: {
    onClickItem: (e, cardInfo) => {
      console.log('click bridge', cardInfo.broadcastId)
      window.location.href = '/viewer.html?broadcastId=' + cardInfo.broadcastId
    },
  },
  shortclip: {
    onClickItem: (e, cardInfo) => {
      console.log('click shortclip', cardInfo.broadcastId)
      window.location.href = '/shortsviewer.html?shortclipId=' + cardInfo.broadcastId
    },
  },
}
```