> 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/customize/livelist.md).
# 전체 목록 모듈
본 가이드는 B. 전체 목록 모듈에 적용되는 커스터마이징 가이드입니다.
{% hint style="info" %}
**B. 전체 목록 모듈이란?**\
쇼핑라이브 동시/단독 송출 라이브 방송을 방송 상태(온에어/예고/다시보기)별 전체 리스팅 해주는 페이지형 모듈
{% endhint %}
## 1. 레이아웃 설정
방송 상태별 영역(온에어/예고/다시보기 영역)의 각 영역을 화면에서 어떻게 보여줄 것인지에 대한 레이아웃 옵션을 설정할 수 있습니다.
{% hint style="info" %}
* 강조(highlight) 레이아웃은 온에어 영역에서만 적용 가능합니다.
* PC/모바일은 레이아웃 타입이 다르게 보일 수 있습니다.
* 노출 조건에 맞는 라이브 방송이 1개인 경우 일괄 리스트(list) 레이아웃으로 자동 노출됩니다.
* 노출 조건에 맞는 라이브 방송이 없는 경우 빈 화면으로 노출됩니다.
{% endhint %}
**레이아웃 타입**
각 설정값에 따라 다음과 같이 목록이 노출됩니다. 희망하시는 값을 아래 코드의 `layoutType`에 작성해주세요.
| highlight | list | grid |
| -------------------------------- | -------------------------------- | -------------------------------- |
|  |  |  |
**설정 방법**
B. 전체 목록 모듈 코드 내 `moduleconfig` 내 `display layout` 값을 변경해주세요.\
온에어/예고/다시보기 영역 별 `display layout` 을 설정 가능합니다.
{% hint style="info" %}
따옴표(' ') 안의 값만 영어로 작성해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
{% code overflow="wrap" %}
```javascript
display: {
standby: { // 예고 영역 설정
layout: 'list', // 예고 영역 레이아웃 (list, grid)
```
{% endcode %}
display: {
onair: { // 온에어 영역 설정
layout: 'highlight', // 온에어 영역 레이아웃 설정 (list, grid, highlight)
},
```javascript
display: {
replay: { // 다시보기 영역 설정
layout: 'list', // 다시보기 영역 레이아웃 설정 (list, grid)
},
```
## 2. 헤더 설정
### 2.1 헤더 노출 여부
전체 라이브 목록의 헤더 노출 여부를 설정할 수 있습니다.
| TRUE (노출함) | FALSE (노출하지 않음) |
| -------------------------------- | -------------------------------- |
|  |  |
#### **설정 방법**
B. 전체 목록 모듈 코드 내 `moduleconfig` 내 `header.useFeature` 값을 변경해주세요.
{% hint style="warning" %}
콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
{% code overflow="wrap" %}
```javascript
moduleConfig: {
header: {
useFeature: true, // 헤더 노출 여부 (true/false)
```
{% endcode %}
### 2.2 헤더 타이틀
전체 라이브 목록의 헤더 타이틀을 변경할 수 있습니다.
#### **설정 방법**
B. 전체 목록 모듈 코드 내 `moduleConfig` 하위의 `header.text` 값을 변경해주세요.
### 2.3. 백버튼 노출 여부
전체 라이브 목록의 백버튼 노출 여부를 설정할 수 있습니다.
| TRUE (노출함) | FALSE (노출하지 않음) |
| -------------------------------- | -------------------------------- |
|  |  |
{% hint style="info" %}
본 값과 무관하게 PC에서는 항상 노출되지 않습니다.
{% endhint %}
**설정 방법**
B. 전체 목록 모듈 코드 내 `moduleConfig` 내 `backButton.useFeature` 값을 변경해주세요.
{% code overflow="wrap" %}
```javascript
backButton: {
useFeature: true, // 백버튼 노출 여부 (true/false)
},
```
{% endcode %}
## 3. 페이지 상단 타이틀 영역
### 3.1 전체 타이틀명 입력
전체 라이브 목록의 타이틀명을 변경할 수 있습니다.
**설정 방법**
B. 전체 목록 모듈 코드 내 `moduleConfig` 내 `documentTitle.title.text` 값을 변경해주세요.
title.text 값 입력
title.text 행 전체 삭제
documentTitle: {
title : {
text : '혜택으로 가득한 샘플몰 라이브',
...
documentTitle: {
title: {
...
설정한 값으로 상단 타이틀 노출됨
"서비스명 + 라이브"로 디폴트 노출
### 3.2 타이틀 스타일
#### 01 폰트 색상
전체 라이브 목록의 상단 타이틀 폰트 컬러를 변경할 수 있습니다.
{% hint style="info" %}
HTML 스타일에 맞는 폰트 컬러를 입력하면 적용됩니다.
* 컬러명 입력 시 : 'black', 'gray'
* hex 입력 시 : '#000000', '#808080'
* rgb 입력 시 : 'rgb(0, 0, 0)', 'rgb(128, 128, 128)'
{% endhint %}
**설정 방법**
B. 전체 목록 모듈 코드 내 `moduleconfig` 내 `documentTitle.title.style.fontColor` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안의 값만 수정해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
* 타이틀 폰트 컬러 'black' 적용 시 \
```javascript
documentTitle: { // 상단 타이틀 영역 설정
title: {
text: '전체 라이브 리스트', // 전체 타이틀명 입력
style: {
fontColor: "black",
```
#### 02 폰트 사이즈
전체 라이브 목록의 상단 타이틀 폰트 크기를 변경할 수 있습니다.
{% hint style="info" %}
폰트 크기는 px 값으로 넣을 수 있습니다.
{% endhint %}
**설정 방법**
B. 전체 목록 모듈 코드 내 `moduleconfig` 내 `documentTitle title style fontSize` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안에 숫자+px로 작성해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
```javascript
documentTitle: { // 상단 타이틀 영역 설정
title: {
text: '전체 라이브 리스트', // 전체 타이틀명 입력
style: {
fontColor: "black",
fontSize: "19px",
```
#### 03 폰트 종류
전체 라이브 목록의 상단 타이틀 폰트 종류를 변경할 수 있습니다.
{% hint style="info" %}
가이드 처럼 ' ' 빈 값 입력 시, 디폴트로 세팅된 폰트가 자동 적용됩니다.
*-apple-system, BlinkMacSystemFont, ‘Helvetica Neue’, Helvetica, ‘Apple SD Gothic Neo’, Arial, ‘Malgun Gothic’, ‘맑은 고딕’, Dotum, ‘돋움’, sans-serif*
{% endhint %}
**설정 방법**
B. 전체 목록 모듈 코드 내 `moduleconfig` 내 `documentTitle title style fontFamily` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안의 값만 수정해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
```javascript
documentTitle: { // 상단 타이틀 영역 설정
title: {
text: '전체 라이브 리스트', // 전체 타이틀명 입력
style: {
fontColor: "black",
fontSize: "19px",
fontFamily: "",
```
#### 04 폰트 굵기
전체 라이브 목록의 상단 타이틀 폰트 굵기를 변경할 수 있습니다.
{% hint style="info" %}
HTML 스타일에 맞는 폰트 굵기를 입력하면 적용됩니다.
* 숫자 입력 시 : 100, 200, 300, 400, 500, 600, 700, 800, 900
* 글자 입력 시 : 'normal', 'bold', 'lighter', 'bolder'
{% endhint %}
**설정 방법**
B. 전체 목록 모듈 코드 내 `moduleconfig` 내 `documentTitle title style fontWeight` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안의 값만 수정해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
* 타이틀 폰트 굵기 bold 적용 시
```javascript
documentTitle: { // 상단 타이틀 영역 설정
title: {
text: '전체 라이브 리스트', // 전체 타이틀명 입력
style: {
fontColor: "black",
fontSize: "19px",
fontFamily: "",
fontWeight: "bold",
```
* 타이틀 폰트 굵기 normal 적용 시
```javascript
documentTitle: { // 상단 타이틀 영역 설정
title: {
text: '전체 라이브 리스트', // 전체 타이틀명 입력
style: {
fontColor: "black",
fontSize: "19px",
fontFamily: "",
fontWeight: "normal",
```
#### 04 글자 정렬
전체 라이브 목록의 상단 타이틀 폰트 정렬을 변경할 수 있습니다.
{% hint style="info" %}
HTML 스타일에 맞는 폰트 정렬값을 입력하면 적용됩니다.
* 'LEFT' (왼쪽 정렬), 'RIGHT' (오른쪽 정렬), 'CENTER' (가운데 정렬)
{% endhint %}
* 타이틀 폰트 정렬 'LEFT' 적용 시\
* 타이틀 폰트 정렬 'CENTER' 적용 시 \
**설정 방법**
B. 전체 목록 모듈 코드 내 `moduleconfig` 내 `documentTitle title style align` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안의 값만 수정해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
```javascript
documentTitle: { // 상단 타이틀 영역 설정
title: {
text: '전체 라이브 리스트', // 전체 타이틀명 입력
style: {
fontColor: "black",
fontSize: "19px",
fontFamily: "",
fontWeight: "bold",
align: "left", // 전체 타이틀 스타일
},
```
### 3.3 서브타이틀명 입력
전체 라이브 목록의 서브 타이틀명을 변경할 수 있습니다.
**설정 방법**
B. 전체 목록 모듈 코드 내 `moduleconfig` 내 `subtitle text` 값을 변경해주세요.
* 타이틀명 변경하는 경우\
{% code overflow="wrap" %}
```javascript
subtitle: {
text: '라이브 한정으로 터지는 혜택 놓치지 마세요', // 서브타이틀명 입력
```
{% endcode %}
* 타이틀명 삭제 시 "샘플몰 + 의 전체 라이브입니다."로 디폴트 타이틀명으로 노출 \
### 3.4 서브타이틀 스타일
#### 01 폰트 사이즈
전체 라이브 목록의 서브 타이틀 폰트 크기를 변경할 수 있습니다.
{% hint style="info" %}
폰트 크기는 px 값으로 넣을 수 있습니다.
{% endhint %}
**설정 방법**
B. 전체 목록 모듈 코드 내 `moduleconfig` 내 `subtitle style fontSize` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안에 숫자+px로 작성해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
```javascript
subtitle: {
text: '전체 라이브 리스트입니다.', // 서브타이틀명 입력
style: {
fontSize: "13px",
```
#### 02 서브타이틀 폰트 종류
전체 라이브 목록의 서브 타이틀 폰트 종류를 변경할 수 있습니다.
{% hint style="info" %}
가이드 처럼 ' ' 빈 값 입력 시, 디폴트로 세팅된 폰트가 자동 적용됩니다.
-apple-system, BlinkMacSystemFont, ‘Helvetica Neue’, Helvetica, ‘Apple SD Gothic Neo’, Arial, ‘Malgun Gothic’, ‘맑은 고딕’, Dotum, ‘돋움’, sans-serif
{% endhint %}
**설정 방법**
B. 전체 목록 모듈 코드 내 `moduleconfig` 내 `subtitle style fontFamily` 값을 변경해주세요.
```javascript
subtitle: {
text: '전체 라이브 리스트입니다.', // 서브타이틀명 입력
style: {
fontSize: "13px",
fontFamily: "", // 서브 타이틀명 스타일 (정렬은 전체 타이틀과 동일)
},
```
## 4. 전체 스타일 설정
### 4.1 영역 좌우 여백
전체 라이브 목록 영역의 좌우 여백을 변경할 수 있습니다.
{% hint style="info" %}
여백의 크기는 px 값으로 넣을 수 있습니다.
{% endhint %}
* 좌우 여백
**설정 방법**
B. 전체 목록 모듈 코드 내 `moduleconfig` 내 `style mobileMargin, pcMargin` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안에 숫자+px로 작성해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
```javascript
style: { // 모듈 전체 영역 설정
mobileMargin: {
left: '20px',
right: '20px', // 모바일 좌우 여백
},
pcMargin: {
left: '40px',
right: '40px', // pc 좌우 여백
},
```
### 4.2 영역 최대 너비
전체 라이브 목록 영역의 최대 너비값을 설정할 수 있습니다.\
해당 너비를 설정하는 이유는 자사몰 헤더의 너비와 맞추어야, 라이브 모듈 영역이 자사몰 스타일과 자연스럽게 어울릴 수 있기 때문입니다. 최대 너비를 설정하면, 라이브 모듈의 너비가 maxWidth로 설정한 값보다 커지는 것을 방지합니다.
{% hint style="info" %}
* 최대 너비는 px 값으로 넣을 수 있습니다.
* 자사몰 헤더/영역의 너비가 정해져있는 경우, 라이브 모듈의 최대 너비도 동일하게 설정하여 자사몰 헤더 너비와 라이브 모듈의 사이즈를 맞출 수 있습니다.
{% endhint %}
**설정 방법**
B. 전체 목록 모듈 코드 내 `moduleconfig` 내 `maxWidth` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안에 숫자+px로 작성해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
{% code overflow="wrap" %}
```javascript
maxWidth: '1280px', // 영역 최대 너비
},
```
{% endcode %}
## 5. 다시보기 방송 정렬 필터
전체 라이브 목록 내 다시보기 영역의 방송 정렬 기준을 선택할 수 있습니다.
{% hint style="info" %}
* `최신순(latest)`는 고정값으로, 별도 필터를 설정하지 않아도 다시보기 영역의 방송은 자동 최신순 기준 정렬됩니다.
* `sortTypes`에 입력되는 값들이 화면에서 필터 드롭다운 버튼에 노출됩니다.
* `sortTypes`는 최대 3개까지 설정 가능합니다. (`LATEST`, `SALE_AMOUNT`, `VIEW_COUNT`)
* 단, `최신순(latest)`는 항상 최우선 값으로 상단에 노출됩니다.
{% endhint %}
* `sortTypes`가 여러개 설정되는 경우 (최대 3개)\
{% code overflow="wrap" %}
```javascript
replay: { // 다시보기 영역 설정
sortTypes: ['LATEST', 'SALE_AMOUNT', 'VIEW_COUNT'], // 다시보기 필터 설정. 'LATEST'는 미포함하여도 화면에 항상 노출됨 (최우선 노출)
```
{% endcode %}
* `sortTypes`가 최신순(latest)만 설정된 경우 \
{% code overflow="wrap" %}
```javascript
replay: { // 다시보기 영역 설정
sortTypes: ['LATEST'], // 다시보기 필터 설정. 'LATEST'는 미포함하여도 화면에 항상 노출됨 (최우선 노출)
```
{% endcode %}