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

# 메이크샵 심화 연동

본 문서는 메이크샵 호스팅 서비스를 이용하는 자사몰에서 모듈의 전체기능을 적용하는 방법을 가이드합니다. 심화연동을 통해 적용하는 경우, 단순 노출 뿐만 아니라 자사몰 페이지간의 심리스한 탐색 및 예고페이지까지 제공해볼 수 있습니다.

HTML에 대한 이해가 없는 경우 다소 어려울 수 있으며, 적용이 어려우신 경우 [간단 연동](/livesolution/guide-for-sellers/old-displaymodule/simple/makeshop.md)을 참고하여 적용하실 수 있습니다.

### &#x20;    <mark style="color:blue;">적용 순서</mark>

1. 본 문서의 [코드 블록](#undefined-1)을 클릭하여 복사해주세요.

<figure><img src="/files/Enk14cGpsucFUoCU8KBi" alt=""><figcaption></figcaption></figure>

2. 메이크샵 개별디자인 > 디자인스킨 관리 > 디자인 편집하기에서 필요한 영역에 붙여넣어주세요.

<figure><img src="/files/pVnbV3uXW370GoKjZOSd" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/nd3F1lvjWed9UuoDxGKK" alt=""><figcaption></figcaption></figure>

3. 코드 내 네이버로부터 전달 받으신 외부연동용 서비스 ID `externalServiceId`를 입력해주세요.

<figure><img src="/files/03yqlFyzGrBX9JtqDqHR" alt=""><figcaption></figcaption></figure>

4. 자사몰 스타일과 라이브 모듈의 스타일을 맞추고 싶으신 경우, [모듈 커스텀 설정](/livesolution/guide-for-sellers/old-displaymodule/customize.md) 가이드 문서를 참고하여 영역 좌우 간격, 폰트 크기 등을 조절해주세요.

5. 편집 사항을 저장하여 자사몰에 적용된 내용을 확인합니다.

<figure><img src="/files/k7jO0c1wnBFPproS14px" alt=""><figcaption></figcaption></figure>

### &#x20;    <mark style="color:blue;">모듈 별 코드 블록 복사</mark>

아래 탭에서 모듈 별 코드를 복사해주세요.

* **A모듈** 방송 목록 모듈
  * **A1** 라이브 방송 목록 모듈
  * **A2** 숏클립 방송 목록 모듈
* **B모듈** 전체 목록 모듈
* **C모듈** 예고 모듈&#x20;

{% hint style="warning" %}
해당 **A, B, C 모듈 코드를 자사몰 내 전부 적용**해주셔야 자사몰 내 라이브 모듈이 **정상 동작**합니다.
{% endhint %}

{% tabs %}
{% tab title="A1 모듈 코드" %}

### 라이브 방송 목록 모듈

다음 코드 블록을 복사하신 후, 라이브 목록을 노출하고자 하는 영역에 붙여넣어주세요. (예. 자사몰 메인 페이지 내 원하는 영역)숏클립 목록 모듈

{% code overflow="wrap" %}

```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/',
      js: 'index.js',
      css: 'bundle.css'
    },
    moduleConfig: {
      externalServiceId: '', // 전달 받은 ID를 입력해주세요.
      layout: {
        layoutType: 'carousel', // 방송 리스트 레이아웃 설정 (carousel, list, grid, highlight)
      },
      title: {
        useFeature: true, // 타이틀 영역 노출 여부 (true/false)
        text: '라이브 리스트', // 타이틀명 입력
        style: {
          fontWeight: "700",
          fontColor: "#1E1E23",
          align: "left",
          fontFamily: "",
          fontSize: "19px",
          paddingTop: "0px",
          paddingBottom: "13px" // 타이틀 스타일 
        }
      },
      broadcasts: {
        displayType: 'ALL', // 노출할 방송 데이터 설정 (ALL: 전체, ONAIR: 온에어+예고만, REPLAY: 다시보기만)
        onClickBridge: function(e, cardInfo) {
          console.log('click bridge', cardInfo.broadcastId)
          window.location.href = '/shop/page.html?id=1152&broadcastId=' + cardInfo.broadcastId
        }, // C 모듈을 적용하지 않으신다면, 이 부분을 삭제해주세요.
        onClickMore: function(e) {
          window.location.href = '/shop/page.html?id=1151'
        } // B 모듈을 적용하지 않으신다면, 이 부분을 삭제해주세요.
      },
      moreButton: {
        useFeature: true, // 더보기 버튼 노출 여부 (true/false)
        label: '전체 목록 보기', // 더보기 버튼명 입력 
        onClick: function(e) {
          window.location.href = '/shop/page.html?id=1151'
        } // B 모듈을 적용하지 않으신다면, 이 부분을 삭제해주세요.
      },
      style: {
        mobileMargin: {
          left: "20px",
          right: "20px",
          top: "30px",
          bottom: "32px" // 모바일 상하좌우 여백
        },
        pcMargin: {
          left: "40px",
          right: "40px",
          top: "30px",
          bottom: "32px" // pc 상하좌우 여백
        },
        maxWidth: "1280px", // 영역 최대 너비
      },
      target: document.getElementById('broadcast-list'),
    },
    onLoad(instance) {
      console.log('created instance', instance)
      window.liveList = instance
    },
    onError() {
      console.log('error')
    },
  })
</script>

```

{% endcode %}
{% endtab %}

{% tab title="A2 모듈 코드" %}

### 숏클립 목록 모듈

다음 코드 블록을 복사하신 후, 숏클립 목록을 노출할 영역에 붙여넣어주세요. (예. 자사몰 메인 페이지 내 원하는 영역)

```javascript
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>
<!-- 모듈 초기화 영역 -->
<div id='shortclip-list'></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: {
      externalServiceId: '', // 전달 받은 ID를 입력해주세요.
      layout: {
        layoutType: 'carousel', // 방송 리스트 레이아웃 설정 (carousel, list, grid, highlight)
      },
      title: {
        useFeature: true, // 타이틀 영역 노출 여부 (true/false)
        text: '숏클립 리스트', // 타이틀명 입력
        style: {
          fontWeight: "700",
          fontColor: "#1E1E23",
          align: "left",
          fontFamily: "",
          fontSize: "19px",
          paddingTop: "0px",
          paddingBottom: "13px" // 타이틀 스타일 
        }
      },
      broadcasts: {
        displayType: 'SHORTCLIP',
        onClickMore: function(e) {
          window.location.href = '/shop/page.html?id=1151'
        } // B 모듈을 적용하지 않으신다면, 이 부분을 삭제해주세요.
      },
      moreButton: {
        useFeature: true, // 더보기 버튼 노출 여부 (true/false)
        label: '전체 목록 보기', // 더보기 버튼명 입력 
        onClick: function(e) {
          window.location.href = '/shop/page.html?id=1151'
        } // B 모듈을 적용하지 않으신다면, 이 부분을 삭제해주세요.
      },
      style: {
        mobileMargin: {
          left: "20px",
          right: "20px",
          top: "30px",
          bottom: "32px" // 모바일 상하좌우 여백
        },
        pcMargin: {
          left: "40px",
          right: "40px",
          top: "30px",
          bottom: "32px" // pc 상하좌우 여백
        },
        maxWidth: "1280px", // 영역 최대 너비
      },
      target: document.getElementById('shortclip-list'),
    },
    onLoad(instance) {
      console.log('created instance', instance)
      window.liveList = instance
    },
    onError() {
      console.log('error')
    },
  })
</script>
s
```

{% endtab %}

{% tab title="B모듈 코드" %}

### 전체 목록 모듈

자사몰 페이지 내에 `/livelist.html` 을 생성한 후 해당 페이지에 아래 코드를 붙여넣어주세요. `/livelist.html` 을 생성하는 방법은 하단 카페24 디자인 편집창 가이드를 참고해주세요.

{% code overflow="wrap" %}

```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: '', // 전달 받은 ID를 입력해주세요.
      header: {
        useFeature: true, // 헤더 노출 여부 (true/false)
        title: {
          text: '전체 라이브', // 헤더명 입력
        },
        backButton: {
          useFeature: true, // 백버튼 노출 여부 (true/false)
        },
      },
      documentTitle: { // 상단 타이틀 영역 설정
        title: {
          text: '전체 라이브 리스트', // 전체 타이틀명 입력 
          style: {
            fontColor: "black",
            fontSize: "19px",
            fontFamily: "",
            fontWeight: "bold",
            align: "left", // 전체 타이틀 스타일 
          },
        },
        subtitle: {
          text: '전체 라이브 리스트입니다.', // 서브타이틀명 입력 
          style: {
            fontSize: "13px",
            fontFamily: "", // 서브 타이틀명 스타일 (정렬은 전체 타이틀과 동일)
          },
        },
      },
      style: { // 모듈 전체 영역 설정 
        mobileMargin: {
          left: '20px',
          right: '20px', // 모바일 좌우 여백
        },
        pcMargin: {
          left: '40px',
          right: '40px', // pc 좌우 여백
        },
        maxWidth: '1280px', // 영역 최대 너비
      },
      display: {
        standby: { // 예고 영역 설정 
          title: {
            text: '라이브 예고', // 예고 영역 타이틀명
            style: {
              fontColor: "#1E1E23",
              fontSize: "17px",
              fontFamily: "",
              fontWeight: "700" // 예고 영역 스타일 
            },
          },
          layout: 'list', // 예고 영역 레이아웃 (list, grid)
          onClickBridge: (e, cardInfo) => {
            window.location.href = '/shop/page.html?id=1152&broadcastId=' + cardInfo.broadcastId
          }, // C 모듈을 사용하지 않는 경우 이 영역을 삭제해주세요.
        },
        onair: { // 온에어 영역 설정 
          title: {
            text: '지금 라이브 중', // 온에어 영역 타이틀명 
            style: {
              fontColor: "#1E1E23",
              fontSize: "17px",
              fontFamily: "",
              fontWeight: "700" // 온에어 영역 스타일
            },
          },
          layout: 'highlight', // 온에어 영역 레이아웃 설정 (list, grid, highlight)
        },
        replay: { // 다시보기 영역 설정 
          sortTypes: ['LATEST', 'SALE_AMOUNT'], // 다시보기 필터 설정. 'LATEST'는 미포함하여도 화면에 항상 노출됨 (최우선 노출)
          title: {
            text: '지난 라이브 다시보기', // 다시보기 영역 타이틀명
            style: {
              fontColor: "#1E1E23",
              fontSize: "17px",
              fontFamily: "",
              fontWeight: "700" // 다시보기 영역 스타일 
            },
          },
          layout: 'list', // 다시보기 영역 레이아웃 설정 (list, grid)
        },
        shortclip: { // 숏클립 영역 설정 
          useFeature : true, // 숏클립 영역 노출 여부
          title: {
            text: '숏클립 모아보기', // 숏클립 영역 타이틀명
            style: {
              fontColor: "#1E1E23",
              fontSize: "17px",
              fontFamily: "",
              fontWeight: "700" // 숏클립 영역 스타일 
            },
          },
          layout: 'grid', // 숏클립 영역 레이아웃 설정 (list, grid)
        },
      },
      target: document.getElementById('broadcast-list-page'),
    },
    onLoad: function(instance) {
      console.log('created instance', instance)
      window.liveListPage = instance
    },
    onError: function() {
      console.log('error')
    },
  })
</script>

```

{% endcode %}
{% endtab %}

{% tab title="C모듈 코드" %}

### 예고페이지 모듈

자사몰 페이지 내에 `/livebridge.html` 을 생성한 후 해당 페이지에 아래 코드를 붙여넣어주세요. `/livebridge.html` 을 생성하는 방법은 하단 카페24 디자인 편집창 가이드를 참고해주세요.

{% code overflow="wrap" %}

```html
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>
<script>
  var params = new URLSearchParams(location.search);
</script>

<div id="bridge-page"></div>

<script>
  // 예고 페이지 초기화 코드
  lico.launcher({
    name: 'ShoppingLiveBridgePage',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/bridge-page/latest/real/',
      entry: 'index.js'
    },
    moduleConfig: {
      broadcastId: params.get('broadcastId'),
      externalServiceId: '', // 전달받은 ID를 입력해주세요
      header: {
        useFeature: true, // 헤더 영역 노출 여부 (true/false)
        title: {
          text: '라이브 예고', // 헤더 타이틀명
        },
        backButton: {
          useFeature: true, // 백버튼 노출 여부 (true/false)
        },
      },
      products: {
        useFeature: true, // 상품 영역 사용 유무 (true/false)
      },
      style: {
        maxWidth: "1280px" // 영역 최대 너비
      },
      target: document.getElementById('bridge-page'),
      debug: true,
    },
    onLoad: function(instance) {
      console.log('created instance', instance)
      window.bridgePageModule = instance
    },
    onError: function() {
      console.log('error')
    },
  })
</script>

```

{% endcode %}
{% endtab %}
{% endtabs %}

### &#x20;   <mark style="color:blue;">방송 목록 모듈 적용 가이드</mark>

<mark style="color:blue;">**`Step 1`**</mark>**&#x20; 디자인 편집 화면 진입**

개별디자인 > 디자인스킨 관리 > 디자인 편집하기로 진입합니다.

<figure><img src="/files/PdTtbW0Tr8Id8DKsOV7L" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**`Step 2`**</mark>**&#x20; 코드 붙여넣기**

1. 중앙 디자인 > 메인 영역 내 원하는 위치에 모듈 코드를 복사+붙여넣기합니다.&#x20;
2. 복사한 모듈 코드를 붙여넣기한 후, 가이드에 따라 `externalServiceId`에 발급받은 서비스ID를 입력합니다.

<figure><img src="/files/sMt4OuDoXiKdlwHRzZK1" alt=""><figcaption></figcaption></figure>

### &#x20;    <mark style="color:blue;">전체 목록 및 예고 모듈 적용 가이드</mark>

<mark style="color:blue;">**`Step 1`**</mark>**&#x20; 디자인 편집 화면 진입**

개별디자인 > 디자인스킨 관리 > 디자인 편집하기로 진입합니다.

<figure><img src="/files/PdTtbW0Tr8Id8DKsOV7L" alt=""><figcaption></figcaption></figure>

![](/files/hYFREetHgUkAmLwAFGFP)

1. 좌측 메뉴의 \[+페이지 추가]를 클릭합니다.&#x20;
2. 페이지 추가하기 팝업 내 “화면선택”에서 “개별 페이지”를 선택합니다.&#x20;

{% hint style="danger" %}
페이지 생성시 반드시 지정된 디자인 번호를 입력해주세요.
{% endhint %}

{% tabs %}
{% tab title="전체 목록 모듈" %}
페이지 추가하기 팝업 화면에서 디자인 번호를 <mark style="color:red;">`1151`</mark>로 설정하여 생성합니다.&#x20;

<figure><img src="/files/BloLmlOMzGyRB4eKrkc8" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="예고페이지 모듈" %}
페이지 추가하기 팝업 화면에서 디자인 번호를 <mark style="color:red;">`1152`</mark>로 설정하여 생성합니다.&#x20;

<figure><img src="/files/8uowFJ6Bwe26iSESEiwQ" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

<mark style="color:blue;">**`Step 3`**</mark>**&#x20; 코드 붙여넣기**

1. 좌측 메뉴 중앙디자인>개별페이지 내에서 앞서 생성한 페이지를 선택합니다.&#x20;
2. 제공드린 전체목록모듈 페이지를 복사+붙여넣기해주세요.&#x20;
3. 복사한 모듈 코드를 붙여넣기한 후, 가이드에 따라 코드 내 `externalServiceId`에 발급받은 서비스ID를 입력합니다

<figure><img src="/files/HPx5DXswyC3xlj6OSukw" alt=""><figcaption></figcaption></figure>