이동 연동

이동 연동 — 쇼룸 WEB

⏱ 예상 소요 시간: 20분

🔧 필수/선택: 선택 — 정의하지 않으면 쇼룸이 링크로 이동

이벤트 4종

네 이벤트 모두 페이로드에 이동할 URL이 들어 있습니다.

이벤트	클릭 대상	이동 URL 필드
`sauceShowroomMoveBanner`	이미지·띠·라이브 배너	`linkUrl`
`sauceShowroomMoveProduct`	카드·배너 안 상품	`linkUrl`
`sauceShowroomMoveSauceLivePlayer`	라이브·VOD 카드	`broadcastUrl`
`sauceShowroomMoveSauceClipPlayer`	클립 카드	`clipUrl`

동일 페이지 구현

라이브러리를 넣은 페이지에서 window.sauceShowroom 객체에 함수를 정의합니다. 인자는 JSON 문자열입니다.

javascript

window.sauceShowroom = {
  // 배너 클릭
  sauceShowroomMoveBanner: (jsonStr) => {
    const bannerInfo = JSON.parse(jsonStr)
    window.location.href = bannerInfo.linkUrl
  },
  // 상품 클릭
  sauceShowroomMoveProduct: (jsonStr) => {
    const productInfo = JSON.parse(jsonStr)
    window.location.href = productInfo.linkUrl
  },
  // 라이브·VOD 카드 클릭
  sauceShowroomMoveSauceLivePlayer: (jsonStr) => {
    const broadcastInfo = JSON.parse(jsonStr)
    window.location.href = broadcastInfo.broadcastUrl
  },
  // 클립 카드 클릭
  sauceShowroomMoveSauceClipPlayer: (jsonStr) => {
    const clipInfo = JSON.parse(jsonStr)
    window.location.href = clipInfo.clipUrl
  }
}

⚠️ window.sauceShowroom 을 통째로 덮어쓰면 쇼룸이 등록해 둔 콜백 함수가 지워집니다. 알림 연동을 함께 쓸 때는 setInit 전에 정의하거나 window.sauceShowroom.sauceShowroomMoveBanner = … 처럼 속성만 더합니다.

부모 페이지 구현

쇼룸 페이지를 iframe 으로 띄운 경우, 부모 페이지에서 message 를 받습니다.

javascript

window.addEventListener('message', (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
  }

  switch (key) {
    case 'sauceShowroomMoveBanner':
      window.location.href = params.linkUrl
      break
    case 'sauceShowroomMoveProduct':
      window.location.href = params.linkUrl
      break
    case 'sauceShowroomMoveSauceLivePlayer':
      window.location.href = params.broadcastUrl
      break
    case 'sauceShowroomMoveSauceClipPlayer':
      window.location.href = params.clipUrl
      break
    default:
  }
})

📌 부모 페이지에서 받는 값은 { key, params } 형태의 JSON 문자열입니다. params 는 파싱된 객체이므로 한 번 더 JSON.parse 하지 않습니다.

정의하지 않았을 때의 이동

네 이벤트는 폴백이 있습니다. 브릿지를 붙이기 전에도 클릭이 동작합니다.

클릭 대상	이동 방식
이미지·띠 배너	배너에 설정한 링크로 이동. 배너의 열기 방식이 `'BLANK'` 면 새 창, 그 밖에는 현재 창
라이브 배너	라이브 플레이어로 현재 창 이동
상품	상품 링크로 현재 창 이동
라이브·VOD 카드	라이브 플레이어로 현재 창 이동
클립 카드	클립 플레이어로 현재 창 이동

인증 정보 전달

사용자 인증을 완료한 상태에서는 쇼룸이 직접 이동시킬 때 이동 URL에 accessToken 쿼리 파라미터를 붙입니다. 플레이어는 이 토큰으로 로그인 상태를 잇습니다.

⚠️ 이동을 직접 처리하면 이 처리가 일어나지 않습니다. 페이로드의 URL은 토큰이 붙지 않은 값이므로, 플레이어 로그인을 이으려면 토큰을 직접 붙여 이동해야 합니다.

javascript

sauceShowroomMoveSauceLivePlayer: (jsonStr) => {
  const broadcastInfo = JSON.parse(jsonStr)
  const url = new URL(broadcastInfo.broadcastUrl)

  url.searchParams.append('accessToken', '설정한 JWT 토큰')

  window.location.href = url.href
}

다음 단계

라이브 알림 연동 — 브릿지 없이 동작하지 않는 기능

→