라이브 알림 연동

라이브 알림 연동 — 쇼룸 WEB

⏱ 예상 소요 시간: 40분

🔧 필수/선택: 필수 — 알림 기능을 쓰려면 구현해야 합니다

사전 준비

다섯 가지가 모두 갖춰져야 알림 버튼이 표시되고 동작합니다.

준비	내용
자사몰 알림 기능	사용자에게 알림을 신청·해제하는 기능을 자사몰에 준비합니다
회원 연동	사용자 인증으로 회원 정보를 전달합니다
브릿지 이벤트 구현	이 페이지의 이벤트 2종과 콜백 2종을 구현합니다
테마 설정	테마 설정 > 라이브 예고에서 알림받기 기능을 사용으로 설정합니다
라이브 설정	라이브 상세 > 라이브 방송 설정에서 라이브 알림을 사용함으로 설정합니다

알림 버튼 노출 위치

예정 라이브·라이브 캘린더의 시작 전 카드와 라이브 배너에 표시됩니다.
라이브 알림을 켠 방송에만 표시됩니다.

동작 순서

사용자가 알림 버튼을 클릭합니다. 로그인 전이면 로그인 모달이 열립니다.
쇼룸이 sauceShowroomTurnOnNotification 또는 sauceShowroomTurnOffNotification 을 전송합니다.
자사몰이 알림을 신청·해제합니다.
자사몰이 처리 결과(result)를 라이브 ID와 함께 콜백으로 회신합니다.
쇼룸이 result 에 따라 버튼 상태를 정합니다.

항목 · 결과값	동작
콜백 대기 시간	제한 없음. 그동안 버튼을 잠급니다
콜백 대조	`broadcastId` 가 요청한 라이브 ID와 같은 콜백만 받습니다
`'success'`	알림 신청자 목록에 등록(해제면 삭제)하고 버튼 상태를 바꿉니다
`'fail'`	에러 모달 · 버튼 유지
`'cancel'`	버튼 유지(모달 없음) · 사용자 거절 시
`result` 생략	`'success'` 로 처리
브릿지 미구현	대기 없이 에러 모달

⚠️ 콜백을 회신하지 않으면 알림 버튼이 잠긴 채 남습니다. 실패·취소도 회신합니다.

동일 페이지 구현

쇼룸이 보낸 알림 이벤트를 자사몰이 처리해 결과를 콜백으로 쇼룸에 회신합니다.

javascript

window.sauceShowroom.sauceShowroomTurnOnNotification = async (jsonStr) => {
  const notificationInfo = JSON.parse(jsonStr)

  // 자사몰 알림 신청 처리 — 'success' · 'fail' · 'cancel' 중 하나를 돌려준다
  const result = await api.postNotification(notificationInfo)

  // 실패·취소도 회신한다 — 회신하지 않으면 버튼이 잠긴 채 남는다
  window.sauceShowroom.sauceShowroomTurnOnNotificationCallback({
    broadcastId: notificationInfo.broadcastId,
    result
  })
}

window.sauceShowroom.sauceShowroomTurnOffNotification = async (jsonStr) => {
  const notificationInfo = JSON.parse(jsonStr)

  const result = await api.deleteNotification(notificationInfo)

  window.sauceShowroom.sauceShowroomTurnOffNotificationCallback({
    broadcastId: notificationInfo.broadcastId,
    result
  })
}

⚠️ 콜백 함수는 쇼룸이 setInit 시점에 window.sauceShowroom 에 등록합니다. 이벤트 함수를 정의할 때 객체를 통째로 덮어쓰면 콜백이 지워지므로, 위와 같이 속성만 더합니다.

📘 이벤트 함수는 JSON 문자열을 받지만, 콜백 인자는 객체로 넘깁니다.

부모 페이지 구현

iframe 구성에서는 콜백도 postMessage 로 회신합니다. 부모 페이지에는 window.sauceShowroom 이 없습니다.

javascript

const showroomIframe = document.getElementById('showroom-iframe')

// result: 'success' · 'fail' · 'cancel'
const sendCallback = (key, broadcastId, result) => {
  showroomIframe.contentWindow.postMessage(
    JSON.stringify({ key, params: { broadcastId, result } }),
    '*'
  )
}

window.addEventListener('message', async (e) => {
  if (typeof e.data !== 'string') return

  let key
  let params

  try {
    const data = JSON.parse(e.data)
    key = data.key
    params = data.params
  } catch (_error) {
    return
  }

  if (key === 'sauceShowroomTurnOnNotification') {
    const result = await api.postNotification(params)
    sendCallback('sauceShowroomTurnOnNotificationCallback', params.broadcastId, result)
  }

  if (key === 'sauceShowroomTurnOffNotification') {
    const result = await api.deleteNotification(params)
    sendCallback('sauceShowroomTurnOffNotificationCallback', params.broadcastId, result)
  }
})

⚠️ 콜백은 쇼룸이 들어 있는 iframe 안으로 보냅니다. 부모 페이지의 window 에 보내면 쇼룸이 받지 못합니다.

버튼 상태의 기준

알림 버튼의 켜짐·꺼짐은 쇼룸이 관리하는 알림 신청자 목록으로 판정합니다.

시점	동작
모듈 표시	회원 ID로 알림 신청 목록을 조회해 버튼 상태를 정합니다
해제 클릭	확인 모달을 표시하고, 확인 시 해제 이벤트를 전송합니다

⚠️ 자사몰 알림 목록과 쇼룸 알림 신청자 목록은 별개라, 자사몰에서만 해제하면 버튼이 켜진 상태로 남습니다.

다음 단계

로그인 연동 — 알림 버튼의 로그인 분기

→