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

# 예고 페이지 모듈

라이브에 등록한 예고페이지를 노출하는 **풀페이지형**모듈입니다.

{% hint style="warning" %}
broadcastId를 주입하지 않는 경우 동작하지 않습니다. URL 파라미터 등을 통해서, 특정 방송에 대한 ID를 주입받아서 설정할 수 있도록 구현해주세요.
{% endhint %}

![](https://g-selected.pstatic.net/MjAyMjExMTBfMjg2/MDAxNjY4MDg5MTg2NjM3.tmpHe2ViQTVxJOqru0DYfv29f7WrPt7N4fS5Y7s9k44g.nCr7JCa3eCL6h8zGLhmA9HS5XcudRHypXv0L9zzf0mcg.PNG/live_up1.png)

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

아래 코드 블럭을 클릭하여 복사할 수 있습니다.

```html
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>

<!-- 모듈 초기화 영역 -->
<div id="bridge-page"></div>

<script>
  // 예고 페이지 초기화 코드
  lico.launcher({
    name: 'ShoppingLiveBridgePage',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/bridge-page/latest/real/', //개발환경에서는 beta로 설정
      entry: 'index.js'
    },
    moduleConfig: {
      broadcastId: '721960', // 노출할 방송id 주입
      externalServiceId: 'yourservice', // externalServiceId 주입
      header: {
        useFeature: true,
        title: {
          text: '라이브 예고',
          onClick: () => {
            // 백버튼 클릭시 동작 정의
            if (window.history.length > 1) {
              window.history.back() 
            } else {
              window.close() 
            }
          },
        },
        backButton: {
          useFeature: true,
        },
      }, // 헤더 영역 사용 유무
      products: {
        useFeature: true, // 상품 영역 사용 유무
      },
      broadcasts: { // 라이브 진입 버튼 및 지난 라이브 다시보기 카드클릭시 동작 설정
        onClickLive: function (broadcastInfo) {
          window.location.href = '/viewer.html?broadcastId=' + broadcastInfo.id
        },
        onClickReplay: function (broadcastInfo) {
          // 다시보기 페이지 따로 있으면 연결
          window.location.href = '/viewer.html?broadcastId=' + broadcastInfo.id + 'status=replay'
        },
      },
      shortclips: {
        useFeature : true, // 연관 숏클립 노출 여부
        onClickShortclip: function (broadcastInfo) {
          // 숏클립 카드 클릭시 동작 설정
          window.location.href = '/shortsviewer.html?broadcastId=' + broadcastInfo.id
        },
      },
      style: {
        maxWidth: "1280px" // 영역 최대 너비
      },
      target: document.getElementById('bridge-page'),
    },
    onLoad: function(instance) {
      console.log('created instance', instance)
      window.bridgePageModule = instance
    },
    onError: function() {
      console.log('error')
    },
  })
</script>
```

### 노출할 방송 ID 설정 <a href="#broadcastid" id="broadcastid"></a>

방송 고유 식별 번호인 `broadcastId`를 주입해야만 해당 방송에 설정된 예고페이지를 노출할 수 있습니다.

A, B 모듈의 `onClickBridge` 핸들러를 통해 넘겨받은 `broadcastId`를 다음과 같이 설정합니다.

```javascript
    moduleConfig:{
      broadcastId: '703708',
      externalServiceId: 'yourservice',
    }
```

***

### 헤더 영역 설정

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

**코드 예시**

```javascript
      header: {
        useFeature: true,
        title: '라이브 예고',
        backButton: {
          useFeature: true,
          onClick: () => {
            window.history.back()
          },
        },
      },
```

**01 헤더 노출 여부**

예고페이지 모듈에서 헤더를 노출할지 여부를 `header.useFeature` 에 설정합니다.

| true                                                                                                                                                                                 | false                                                                                                                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](https://g-selected.pstatic.net/MjAyMjExMTBfMTgy/MDAxNjY4MDg5MjY0OTE0.slEJR6KAirmFJ_hyoaYiRONxd9eNi7Twp3ldKZSQU9gg.jnAXEo2zca9Evs3oyFU30GhrpJEgusdelKFbdxpFrysg.PNG/live_up1.png) | ![](https://g-selected.pstatic.net/MjAyMjExMTBfMjE0/MDAxNjY4MDg5Mjk4NDM4.EcIE2M0eglKEjO7IAjDaTgXurmJJGCru-QezYgSoiC4g.SOzy8wECGxB0buKZpEzIvHOPvSNTyXJ-jqNe2UZ89JYg.PNG/live_up1.png) |

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

헤더 내 좌측 백버튼 노출 여부를 `header.backButton.useFeature`에 정의합니다.

| true                                                                                                                                                                                 | false                                                                                                                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](https://g-selected.pstatic.net/MjAyMjExMTBfMTgy/MDAxNjY4MDg5MjY0OTE0.slEJR6KAirmFJ_hyoaYiRONxd9eNi7Twp3ldKZSQU9gg.jnAXEo2zca9Evs3oyFU30GhrpJEgusdelKFbdxpFrysg.PNG/live_up1.png) | ![](https://g-selected.pstatic.net/MjAyMjExMTBfNjcg/MDAxNjY4MDg5MjgyNjg0.AhWC0GrcXtbVnoIuR_flvfLx3AEH4Oj4NTuV8id2W3Qg.xHymJMLcPKHMiMz1M2DBim8BnUpfkBy0jLvpRGi0ZLog.PNG/live_up1.png) |

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

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

***

### 상품 영역 노출 여부 <a href="#undefined" id="undefined"></a>

예고페이지 모듈에서는 해당 라이브에 첨부한 상품목록을 노출할 수 있습니다. 이 때 노출되는 상품은 라이브 설정에 따라 네이버 스마트스토어 상품 혹은 연결한 자사몰 상품이 노출됩니다.

**코드 예시**

```javascript
      products: {
        useFeature: true, // 상품 영역 사용 유무
      },
```

**설정값 정의**

예고페이지에 쇼핑라이브에서 설정한 상품을 노출할지 설정할 수 있습니다. 스마트스토어 상품 노출 등의 이유로 노출을 희망하지 않는 경우 `false`로 설정해주세요.

| true                                                                                                                                                                                 | false                                                                                                                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](https://g-selected.pstatic.net/MjAyMjExMTBfMTI4/MDAxNjY4MDg5MzIzNzI1.KSd0Vfml983jDPtn0UfSJQacOWv2oKgpHAe8DtIwinsg.wPO3ovDT_kQA-ZZXXzU4dfsLXfd63Pvhl2gqEefnS3kg.PNG/live_up1.png) | ![](https://g-selected.pstatic.net/MjAyMjExMTBfMjMw/MDAxNjY4MDg5MzM3NzQ1.Doznwec6h8QeG8i1OCj5sxXFHK-cT3O6gT7SbYhxI68g.PaqNsAJxzjDHwCTvs--5UK_WtMduLyniKfQjqUfs7K8g.PNG/live_up1.png) |

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

예고 페이지에서 발생하는 클랙 액션에 대한 핸들러를 제공합니다. 라이브 혹은 다시보기 방송으로 랜딩하는 경우의 동작을 설정할 수 있습니다.&#x20;

{% hint style="info" %}
웹뷰어를 [iframe 임베딩](/livesolution/viewer/web/iframe.md) 혹은 [JS모듈](/livesolution/viewer/web/javascript.md)을 통해 서드파티 페이지 내에 적용하셨거나, 별도 앱스킴을 통해 네이티브 뷰어 SDK를 호출해야하는 경우 설정합니다. 핸들러를 제거하는 경우 디폴트로 네이버 [웹랜딩 뷰어](/livesolution/viewer/web/landing.md)로 연결합니다.
{% endhint %}

**코드 예시**

```javascript
      broadcasts: {
        onClickLive: function (broadcastInfo) {
          window.location.href = '/viewer.html?broadcastId=' + broadcastInfo.id
        },
        onClickReplay: function (broadcastInfo) {
          // 다시보기 페이지 따로 있으면 연결
          window.location.href = '/viewer.html?broadcastId=' + broadcastInfo.id + 'status=replay'
        },
      },
      shortclips: {
        useFeature : true, // 연관 숏클립 노출 여부
        onClickShortclip: function (broadcastInfo) {
          // 숏클립 카드 클릭시 동작 설정
          window.location.href = '/shortsviewer.html?broadcastId=' + broadcastInfo.id
        },
      },
```

**이벤트 정의**

<table><thead><tr><th width="191">handler</th><th>이벤트 조건</th></tr></thead><tbody><tr><td>broadcasts.onClickLive</td><td>방송진입 버튼 클릭시 호출. <code>broadcastId</code>를 받아 랜딩페이지 URL 등으로 설정할 수 있습니다.</td></tr><tr><td>broadcasts.onClickReplay</td><td>방송 다시보기 버튼 클릭시 이벤트 전달. <code>broadcastId</code>를 받아 랜딩페이지 URL 등으로 설정할 수 있습니다.</td></tr><tr><td>shortclips.onClickShortclip</td><td>연관 숏클립 보기 내 카드 클릭시 이벤트 전달. <code>broadcastId</code>를 받아 랜딩페이지 URL 등으로 설정할 수 있습니다.</td></tr></tbody></table>

커스텀을 희망하지 않는 경우, 핸들러를 제거하면 네이버에서 제공하는 페이지로 랜딩합니다.

***

### 모듈 스타일 설정 <a href="#style-2" id="style-2"></a>

moduleConfig 하위의 `style`에서 모듈의 max-width값을 설정할 수 있습니다.&#x20;

**코드 예시**

```javascript
	style: {
		maxWidth: "1280px", // 해당 값이 default (가이드 제공)
	},
```

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

| param    | default              | desc                     |
| -------- | -------------------- | ------------------------ |
| maxWidth | `max-width: 1280px;` | 모듈 전체의 max-width를 설정합니다. |

&#x20;