> 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/list.md).
# 방송 목록 모듈
본 가이드는 A. 방송 목록 모듈에 적용되는 커스텀 설정 가이드입니다.
### 1. 레이아웃 옵션
라이브 방송 목록을 화면에 어떻게 보여줄 것인지에 대한 레이아웃 옵션을 설정할 수 있습니다.
{% hint style="info" %}
* PC/모바일은 레이아웃 타입이 다르게 보일 수 있습니다.
* 노출 조건에 맞는 라이브 방송이 1개인 경우 일괄 리스트(list) 레이아웃으로 자동 노출됩니다.
* 노출 조건에 맞는 라이브 방송이 없는 경우 빈 화면으로 노출됩니다.
{% endhint %}
#### **설정 방법**
A. 방송 목록 모듈 코드 내 `moduleConfig` 하위의 `layoutType` 값을 변경해주세요.
{% code overflow="wrap" %}
```javascript
moduleConfig: {
layout: {
layoutType: 'carousel', // 방송 리스트 레이아웃 설정 (carousel, list, grid, highlight)
},
```
{% endcode %}
{% hint style="warning" %}
따옴표(' ') 안의 값만 영문로 작성해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
#### **레이아웃 타입**
각 설정값에 따라 다음과 같이 목록이 노출됩니다. 희망하시는 값을 위 코드의 `layoutType`에 작성해주세요.
| carousel (default) | highlight | list | grid |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|  |  |  |  |
### 2. 방송 상태 노출 옵션
라이브 방송 목록에서 어떤 방송 상태의 라이브 방송들만 가지고 올 것인지 선택할 수 있습니다.
{% hint style="info" %}
레이아웃 옵션 설정에 따라 노출되는 라이브 방송의 개수가 달라질 수 있습니다.
{% endhint %}
**방송 데이터 타입**
각 설정값에 따라 다음과 같이 목록이 노출됩니다. 희망하시는 값을 위 코드의 `layoutType`에 작성해주세요.
| ALL (default) | ONAIR | REPLAY |
| --------------------------------------------------------- | ----------------------------------- | -------------------------------- |
| 자사몰 동시송출 설정된 모든 방송을 노출합니다. | 동시송출 설정 방송 중 `온에어`, `예고` 방송만 노출합니다. | 동시송출 설정 방송 중 `다시보기` 방송만 노출합니다. |
|
|  |  |
#### **설정 방법**
A. 방송 목록 모듈 코드 내 `moduleconfig` 내 `broadcasts.displayType` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안의 값만 영어로 작성해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
{% code overflow="wrap" %}
```javascript
broadcasts: {
displayType: 'ALL' // 노출할 방송 데이터 설정 (ALL: 전체, ONAIR: 온에어+예고만, REPLAY: 다시보기만)
},
```
{% endcode %}
### 3. 타이틀 노출 여부
라이브 방송 목록의 상단 타이틀을 보여줄 것인지, 보여주지 않을 것인지 선택할 수 있습니다.
* 노출함 (true)\
* 노출하지 않음 (false)\
**설정 방법**
A. 방송 목록 모듈 코드 내 `moduleconfig` 내 `title useFeature` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안의 값만 영어로 작성해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
{% code overflow="wrap" %}
```javascript
title: {
useFeature: true, // 타이틀 영역 노출 여부 (true/false)
```
{% endcode %}
### 4. 타이틀명 입력
라이브 방송 목록의 상단 타이틀 이름을 변경할 수 있습니다.
**설정 방법**
A. 방송 목록 모듈 코드 내 `moduleconfig` 내 `title text` 값을 변경해주세요.
* 타이틀명 변경하는 경우
{% code overflow="wrap" %}
```javascript
title: {
useFeature: true, // 타이틀 영역 노출 여부 (true/false)
text: '샘플몰 라이브', // 타이틀명 입력
```
{% endcode %}
* 타이틀명 빈 값 입력하는 경우
```javascript
title: {
useFeature: true, // 타이틀 영역 노출 여부 (true/false)
text: '', // 타이틀명 입력
```
### 5. 타이틀 폰트 굵기
라이브 방송 목록의 상단 타이틀 폰트 굵기를 변경할 수 있습니다.
{% hint style="info" %}
CSS 스타일에 맞는 폰트 두께를 설정할 수 있습니다..
* 숫자 입력 시 : 100, 200, 300, 400, 500, 600, 700, 800, 900
* 글자 입력 시 : 'normal', 'bold', 'lighter', 'bolder'
{% endhint %}
**설정 방법**
A. 방송 목록 모듈 코드 내 `moduleconfig` 내 `title style fontWeight` 값을 변경해주세요.
{% hint style="warning" %}
따옴표(' ') 안의 값만 수정해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
* 타이틀 폰트 굵기 bold 적용 시
```javascript
title: {
useFeature: true, // 타이틀 영역 노출 여부 (true/false)
text: '라이브 리스트', // 타이틀명 입력
style: {
fontWeight: "bold",
```
* 타이틀 폰트 굵기 normal 적용 시
```javascript
title: {
useFeature: true, // 타이틀 영역 노출 여부 (true/false)
text: '라이브 리스트', // 타이틀명 입력
style: {
fontWeight: "normal",
```
### 6. 타이틀 폰트 컬러
라이브 방송 목록의 상단 타이틀 폰트 컬러를 변경할 수 있습니다.
{% hint style="info" %}
HTML 스타일에 맞는 폰트 컬러를 입력하면 적용됩니다.
* 컬러명 입력 시 : 'black', 'gray'
* hex 입력 시 : '#000000', '#808080'
* rgb 입력 시 : 'rgb(0, 0, 0)', 'rgb(128, 128, 128)'
{% endhint %}
**설정 방법**
A. 방송 목록 모듈 코드 내 `moduleconfig` 내 `title style fontColor` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안의 값만 수정해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
* 타이틀 폰트 컬러 'black' 적용 시
```javascript
title: {
useFeature: true, // 타이틀 영역 노출 여부 (true/false)
text: '라이브 리스트', // 타이틀명 입력
style: {
fontWeight: "bold",
fontColor: "black",
```
### 7. 타이틀 폰트 정렬
라이브 방송 목록의 상단 타이틀 폰트 정렬을 변경할 수 있습니다.
{% hint style="info" %}
HTML 스타일에 맞는 폰트 정렬값을 입력하면 적용됩니다.
* 'LEFT' (왼쪽 정렬), 'RIGHT' (오른쪽 정렬), 'CENTER' (가운데 정렬)
{% endhint %}
* 타이틀 폰트 정렬 'LEFT' 적용 시\
* 타이틀 폰트 정렬 'CENTER' 적용 시 \
**설정 방법**
A. 방송 목록 모듈 코드 내 `moduleconfig` 내 `title style align` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안의 값만 수정해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
```javascript
title: {
style: {
fontWeight: "bold",
fontColor: "black",
align: "left",
```
### 8. 타이틀 폰트 종류
라이브 방송 목록의 상단 타이틀 폰트 종류를 설정할 수 있습니다.
{% hint style="info" %}
가이드 처럼 ' ' 빈 값 입력 시, 디폴트로 세팅된 폰트가 자동 적용됩니다.
-apple-system, BlinkMacSystemFont, ‘Helvetica Neue’, Helvetica, ‘Apple SD Gothic Neo’, Arial, ‘Malgun Gothic’, ‘맑은 고딕’, Dotum, ‘돋움’, sans-serif
{% endhint %}
**설정 방법**
A. 방송 목록 모듈 코드 내 `moduleconfig` 내 `title style fontFamily` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안의 값만 수정해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
```javascript
title: {
style: {
fontWeight: "bold",
fontColor: "black",
align: "left",
fontFamily: "",
```
### 9. 타이틀 폰트 크기
라이브 방송 목록의 상단 타이틀 폰트 크기를 변경할 수 있습니다.
{% hint style="info" %}
폰트 크기는 px 값으로 넣을 수 있습니다.
{% endhint %}
**설정 방법**
A. 방송 목록 모듈 코드 내 `moduleconfig` 내 `title style fontSize` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안의 값만 수정해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
```javascript
title: {
style: {
fontWeight: "bold",
fontColor: "black",
align: "left",
fontFamily: "",
fontSize: "19px",
```
### 10. 타이틀 상하 여백
라이브 방송 목록 타이틀 영역의 상하 여백을 변경할 수 있습니다.
{% hint style="info" %}
여백의 크기는 px 값으로 넣을 수 있습니다.
{% endhint %}
**설정 방법**
A. 방송 목록 모듈 코드 내 `moduleconfig` 내 `title style paddingTop, paddingBottom` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안에 숫자+px로 작성해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
```javascript
title: {
style: {
fontWeight: "bold",
fontColor: "black",
align: "left",
fontFamily: "",
fontSize: "19px",
paddingTop: "0px",
paddingBottom: "13px" // 타이틀 스타일
}
```
### 11. 더보기 버튼 노출 여부
라이브 방송 목록의 더보기 버튼을 보여줄 것인지, 보여주지 않을 것인지 선택할 수 있습니다.
{% hint style="info" %}
* 레이아웃 타입이 캐러셀(carousel), 강조(highlight) 이면서 & 노출 조건에 해당하는 라이브 방송이 20개 초과되어 노출되는 경우, 오른쪽 캐로셀 스크롤 시에도 더보기 버튼이 하나 더 노출됩니다.\
이 경우에는 모바일 기준 2개의 더보기 버튼이 노출됩니다.
* 더보기 버튼 노출 여부는 두 개의 더보기 버튼에 모두 적용됩니다.
{% endhint %}
* 노출함 (true)\
* 노출하지 않음 (false)\
**설정 방법**
A. 방송 목록 모듈 코드 내 `moduleconfig` 내 `moreButton useFeature` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안의 값만 영어로 작성해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
{% code overflow="wrap" %}
```javascript
moreButton: {
useFeature: true, // 더보기 버튼 노출 여부 (true/false)
```
{% endcode %}
### 12. 영역 좌우상하 여백
라이브 방송 목록 전체 영역의 좌우 및 상하 여백을 변경할 수 있습니다.
{% hint style="info" %}
여백의 크기는 px 값으로 넣을 수 있습니다.
{% endhint %}
* 좌우 여백
* 상하 여백
**설정 방법**
A. 방송 목록 모듈 코드 내 `moduleconfig` 내 `style mobileMargin, pcMargin` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안에 숫자+px로 작성해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
```javascript
style: {
mobileMargin: {
left: "20px",
right: "20px",
top: "30px",
bottom: "32px" // 모바일 상하좌우 여백
},
pcMargin: {
left: "40px",
right: "40px",
top: "30px",
bottom: "32px" // pc 상하좌우 여백
},
```
### 13. 영역 최대 너비
라이브 방송 목록 전체 영역의 최대 너비값을 설정할 수 있습니다.\
해당 너비를 설정하는 이유는 자사몰 헤더의 너비와 맞추어야, 라이브 모듈 영역이 자사몰 스타일과 자연스럽게 어울릴 수 있기 때문입니다. 최대 너비를 설정하면, 라이브 모듈의 너비가 maxWidth로 설정한 값보다 커지는 것을 방지합니다.
{% hint style="info" %}
* 최대 너비는 px 값으로 넣을 수 있습니다.
* 자사몰 헤더/영역의 너비가 정해져있는 경우, 라이브 모듈의 최대 너비도 동일하게 설정하여 자사몰 헤더 너비와 라이브 모듈의 사이즈를 맞출 수 있습니다.
{% endhint %}
**설정 방법**
A. 방송 목록 모듈 코드 내 `moduleconfig` 내 `style maxWidth` 값을 변경해주세요.
{% hint style="info" %}
따옴표(' ') 안에 숫자+px로 작성해주세요. 이 외에 콤마(,) 및 괄호({ })등은 삭제하지 마세요.
{% endhint %}
{% code overflow="wrap" %}
```javascript
style: {
maxWidth: "1280px", // 영역 최대 너비
},자사몰 동시송출 설정된 모든 방송을 노출합니다.
```
{% endcode %}