라이브 목록

라이브 목록 — 쇼룸 WEB

⏱ 예상 소요 시간: 10분

📋 사전 조건: 라이브러리 설치

모듈 3종

모듈	함수	표시되는 것
최근 라이브	`loadRecentLive`	진행 중·종료된 라이브 목록
예정 라이브	`loadScheduledLive`	방송 예정인 라이브 목록
라이브 캘린더	`loadLiveCalendar`	날짜별 편성표

▲ 최근 라이브 — 카드에 담기는 항목과 표시 개수는 어드민 테마 설정이 결정합니다

▲ 예정 라이브 — 방송 예정인 라이브가 시작 일시와 함께 표시됩니다

▲ 라이브 캘린더 — 날짜를 고르면 그날 편성된 라이브가 표시됩니다

호출

javascript

window.SauceShowroomLib.loadRecentLive({ elementId: 'my-recent-live' })

window.SauceShowroomLib.loadScheduledLive({ elementId: 'my-scheduled-live' })

window.SauceShowroomLib.loadLiveCalendar({ elementId: 'my-live-calendar' })

파라미터	타입	필수	기본값
elementId	String	선택	`sauce-showroom-recent-live` `sauce-showroom-scheduled-live` `sauce-showroom-live-calendar`

최근 라이브 레이아웃

loadRecentLive 만 typeCode 로 레이아웃을 고를 수 있습니다.

javascript

window.SauceShowroomLib.loadRecentLive({
  elementId: 'my-recent-live',
  typeCode: 'WIDE'
})

typeCode	목록	모두보기
생략	테마에 설정한 개수만큼	모두보기 버튼 → 모달
`'WIDE'`	전체 목록을 펼쳐 표시	스크롤에 따라 더 불러오기

테마가 결정하는 것

함수 파라미터로는 조정하지 않습니다.

항목	대상
제목 표시 여부와 문구	세 모듈 모두
표시 개수	최근 라이브
진행 중 라이브 포함 여부	최근 라이브
정렬 필터 표시 여부	최근 라이브
레이아웃 유형	예정 라이브 — 캐러셀 · 피드 · 이미지 · 리스트 · 와이드
알림 버튼 사용 여부	예정 라이브 · 라이브 캘린더
카드 색상·상품 정보 노출	세 모듈 모두

📘 설정 위치는 어드민 테마 설정 > 라이브 예고 · 최근 라이브 영역입니다.

알림 버튼

예정 라이브와 라이브 캘린더의 시작 전 카드에 알림 버튼이 표시됩니다.

▲ 알림 버튼 — 시작 전 카드에만 표시되고, 신청하면 버튼 상태가 바뀝니다

어드민 테마 설정에서 알림받기 기능을 사용으로 설정합니다.
라이브 상세의 라이브 방송 설정에서 라이브 알림을 사용함으로 설정합니다. 방송마다 따로 설정하며, 설정하지 않은 방송에는 버튼이 표시되지 않습니다.
사용자 인증으로 회원 정보를 전달합니다.
라이브 알림 연동의 브릿지 이벤트를 구현합니다.

📌 네 조건 중 하나라도 빠지면 알림 버튼이 표시되지 않거나 눌러도 완료되지 않습니다. 알림은 브릿지 이벤트 없이 동작하지 않습니다.

다음 단계

다시보기 큐레이션 — VOD · CLIP

→