라이브 알림 연동

라이브 알림 연동 — 쇼룸 WEB

⏱ 예상 소요 시간: 40분

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

사전 준비

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

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

알림 버튼 노출 위치

예정 라이브·라이브 캘린더의 시작 전 카드와 라이브 배너에 표시됩니다.

동작 순서

쇼룸이 이벤트를 보내고, 자사몰이 처리한 뒤 콜백으로 결과를 회신하는 왕복 구조입니다.

사용자가 알림 버튼을 클릭합니다. 로그인 상태가 아니면 로그인 모달이 열립니다.
쇼룸이 sauceShowroomTurnOnNotification 또는 sauceShowroomTurnOffNotification 을 전송합니다.
자사몰이 알림을 신청·해제합니다.
성공한 경우 자사몰이 콜백 이벤트를 라이브 ID와 함께 회신합니다.
쇼룸이 알림 신청자 목록을 갱신하고 버튼 상태를 바꿉니다.

항목	값
콜백 대기 시간	5초
확인 주기	0.1초
성공 판정	콜백의 `broadcastId` 가 요청한 라이브 ID와 일치할 때
시간 안에 콜백이 없을 때	에러 모달을 표시하고 버튼 상태를 바꾸지 않습니다

⚠️ 콜백을 회신하지 않으면 쇼룸은 실패로 간주합니다. 자사몰에서 알림이 신청됐더라도 쇼룸의 버튼은 꺼진 상태로 남습니다.

동일 페이지 구현

알림 이벤트를 받아 처리하고, 성공했을 때 콜백을 호출합니다.

javascript

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

  // 자사몰 알림 신청 처리
  const isSuccess = await api.postAlarm(notificationInfo)

  // 성공한 경우에만 콜백을 회신한다 — 회신하지 않으면 실패로 처리된다
  if (isSuccess) {
    window.sauceShowroom.sauceShowroomTurnOnNotificationCallback({
      broadcastId: notificationInfo.broadcastId
    })
  }
}

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

  const isSuccess = await api.deleteAlarm(notificationInfo)

  if (isSuccess) {
    window.sauceShowroom.sauceShowroomTurnOffNotificationCallback({
      broadcastId: notificationInfo.broadcastId
    })
  }
}

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

📌 콜백 인자는 객체입니다. 이벤트 함수가 받는 값은 JSON 문자열이고, 콜백으로 넘기는 값은 문자열이 아닙니다.

부모 페이지 구현

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

javascript

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

const sendCallback = (key, broadcastId) => {
  showroomIframe.contentWindow.postMessage(
    JSON.stringify({ key, params: { broadcastId } }),
    '*'
  )
}

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 isSuccess = await api.postAlarm(params)
    if (isSuccess) {
      sendCallback('sauceShowroomTurnOnNotificationCallback', params.broadcastId)
    }
  }

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

⚠️ 콜백은 쇼룸이 들어 있는 iframe 안으로 보냅니다. 부모 페이지의 window 에 보내면 쇼룸이 받지 못해 5초 뒤 실패로 처리됩니다.

버튼 상태의 기준

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

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

⚠️ 자사몰 알림 목록과 쇼룸 알림 목록은 별개입니다. 자사몰에서만 알림을 해제하고 콜백을 회신하지 않으면 두 목록이 어긋나 버튼이 켜진 상태로 남습니다.

다음 단계

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

→