Guides

쇼룸 연동

Suggest Edits

쇼룸은 라이브, VOD, 클립 등의 콘텐츠를 큐레이션 별로 운영하고 한 곳에서 전시할 수 있는 기능을 제공합니다.

이 가이드를 통해 카페24로 구축된 파트너사 홈페이지에 쇼룸을 설치해 연동할 수 있습니다.

📘

쇼룸 설치를 성공적으로 진행하기 위해서는,

  1. 소스라이브나 소스클립 파트너 계약을 완료하고 모비두 담당자에게 파트너 계정을 발급 받아야 합니다.
  2. 계정 발급 후, 회원 연동과 스크립트 삽입을 통해 플레이어를 설치한 후 사용할 수 있습니다.

쇼룸 설치

PC Web 연동

STEP 1. 카페24에 대표운영자로 로그인합니다.

STEP 2. 디자인 (PC/모바일) > 디자인 대시보드 > 디자인 보관함 > PC탭에서 쇼룸을 적용할 디자인을 선택 후 복사합니다. 이는 실제 운영 중인 페이지에 영향을 주지 않도록 하기 위함입니다.

STEP 3. 복사된 디자인의 디자인 편집 버튼을 클릭해 스마트 디자인 Easy 화면으로 이동합니다.

STEP 4. 하단의 HTML 수정을 클릭해 스마트 디자인 화면으로 이동합니다.

STEP 5. 왼쪽 하단 폴더추가 버튼을 클릭해 노출된 팝업 화면에서 폴더명 항목에 showroom를 입력 후 저장을 클릭합니다. 해당 폴더가 추가된 것을 확인할 수 있습니다.

STEP 6. 왼쪽 하단 화면추가 버튼을 클릭해 노출된 팝업 화면에서 앞에서 추가한 showroom 폴더를 클릭합니다. 저장 경로는 showroom로 지정되고, 파일명 항목에는 index.html를 입력 후 저장을 클릭합니다.

STEP 7. 앞서 추가한 index.html 에 아래 코드를 붙여 넣고 상단의 저장을 클릭 후 쇼룸 페이지를 직접 추가합니다.

📘

아래 코드는 간편인증을 하여 전체 페이지를 보여주는 예시 코드입니다.

더 구체적인 설정을 하고 싶으신 경우, 쇼룸 기본 사용법 가이드를 참고해 주세요.

<!--@layout(/layout/basic/layout.html)-->
<div id='sauce-showroom'></div>
<script src="https://showroom.sauce.im/static/js/SauceShowroomLib.js"></script></script>

<!-- 쇼룸 이벤트 설정 -->
<script>
    window.sauceShowroom = {
        // 라이브 플레이어 이동 시 이벤트
        sauceShowroomMoveSauceLivePlayer: (jsonStr) => {
            let broadcastInfo;
        
            try {
                broadcastInfo = JSON.parse(jsonStr);
            } catch (e) {
                console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
                return;
            }
            try {
              	// 라이브 플레이어가 임베딩된 페이지 이동
                window.location.href = `/saucelive/saucelive.html?broadcastId=${broadcastInfo.broadcastId}`
            } catch (e) {
                console.warn('라이브 플레이어 처리 중 에러가 발생했습니다.', e);
            }
        }
    }
</script>

<!-- 쇼룸 초기화 -->
<script>
    window.addEventListener("load", async () => {
        // 초기화
        window.SauceShowroomLib.setInit({ partnerUniqueId: '파트너ID를 여기에 입력해주세요.' });
        
        // 테마 설정 (호출하지 않는 경우 기본 테마가 설정되므로, 커스텀 테마를 적용하고 싶으신 경우 설정해주세요.)
        // const themeId = '테마ID를 여기에 입력해주세요.';
        // window.SauceShowroomLib.setThemeUniqueId(themeId);
        
        // 간편인증 (멤버토큰 생성 및 설정 기능, 소스라이브 플레이어 진입 시, 해당 정보로 생성한 토큰 정보가 유효한 경우 로그인됩니다.)
        try {
            // cafe24에 현재 고객이 로그인되어 있는지 확인할 수 있는 공개API를 사용합니다.      
            const cafe24UserInfoResponse = await fetch(
                `${window.location.origin}/exec/front/manage/async?module=member&path_role=ETC&EC_MOBILE=false`,
                { 
                    method: 'GET', 
                    headers: { 
                        accept: 'application/json' 
                    }
                }
            );
            const userInfo = await cafe24UserInfoResponse.json(); 
            const memberData = userInfo.member.memberData;
            const isSignedIn = memberData.id && memberData.id.length > 1;
            
            if (isSignedIn) {
                const userInfo = {
                    memberId: memberData.id,
                    nickname: memberData.nick || memberData.name
                };
                window.SauceShowroomLib.setMemberObject(userInfo);
            }
        } catch (e) {
        	console.error('간편 인증에 실패했습니다.', e)
        }

        // 전체 페이지 보여주기
        window.SauceShowroomLib.load({ elementId: 'sauce-showroom' });
    });
</script>

STEP 8. 코드를 적용한 디자인을 대표 디자인으로 설정합니다.

PC Web 모드에서 쇼룸 연동 작업이 완료되었습니다.


모바일 연동

STEP 1. 카페24에 대표운영자로 로그인합니다.

STEP 2. 디자인 (PC/모바일) > 디자인 대시보드 > 디자인 보관함 > 모바일 탭에서 쇼룸을 적용할 디자인을 선택 후 복사합니다. 이는 실제 운영 중인 페이지에 영향을 주지 않도록 하기 위함입니다.

STEP 3. 복사한 디자인의 디자인 편집 버튼을 클릭해 스마트 디자인 화면으로 이동합니다.


STEP 4. 왼쪽 하단 폴더추가 버튼을 클릭해 노출된 팝업 화면에서 폴더명 항목에 showroom를 입력 후 저장을 클릭합니다. 해당 폴더가 추가된 것을 확인할 수 있습니다.

STEP 5. 왼쪽 하단 화면추가 버튼을 클릭해 노출된 팝업 화면에서 앞에서 추가한 showroom 폴더를 클릭합니다. 저장 경로는 showroom으로 지정되고, 파일명 항목에는 index.html를 입력 후 저장을 클릭합니다.

STEP 6. 앞서 추가한 index.html 에 아래 코드를 붙여 넣고 상단의 저장을 클릭 후 쇼룸 페이지를 직접 추가합니다.

📘

아래 코드는 간편인증을 하여 전체 페이지를 보여주는 예시 코드입니다.

더 구체적인 설정을 하고 싶으신 경우, 쇼룸 기본 사용법 가이드를 참고해 주세요.

<!--@layout(/layout/basic/layout.html)-->
<div id='sauce-showroom'></div>
<script src="https://showroom.sauce.im/static/js/SauceShowroomLib.js"></script></script>

<!-- 쇼룸 이벤트 설정 -->
<script>
    window.sauceShowroom = {
      	// 라이브 플레이어 이동 시 이벤트
        sauceShowroomMoveSauceLivePlayer: (jsonStr) => {
            let broadcastInfo;
        
            try {
                broadcastInfo = JSON.parse(jsonStr);
            } catch (e) {
                console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
                return;
            }
            try {
              	// 라이브 플레이어가 임베딩된 페이지 이동
                window.location.href = `/saucelive/saucelive.html?broadcastId=${broadcastInfo.broadcastId}`
            } catch (e) {
                console.warn('라이브 플레이어 처리 중 에러가 발생했습니다.', e);
            }
        }
    }
</script>

<!-- 쇼룸 초기화 -->
<script>
    window.addEventListener("load", async () => {      
        // 초기화
        window.SauceShowroomLib.setInit({ partnerUniqueId: '파트너ID를 여기에 입력해주세요.' });
        
        // 테마 설정 (호출하지 않는 경우 기본 테마가 설정되므로, 커스텀 테마를 적용하고 싶으신 경우 설정해주세요.)
        // const themeId = '테마ID를 여기에 입력해주세요.';
        // window.SauceShowroomLib.setThemeUniqueId(themeId);
        
        // 간편인증 (멤버토큰 생성 및 설정 기능, 소스라이브 플레이어 진입 시, 해당 정보로 생성한 토큰 정보가 유효한 경우 로그인됩니다.)
        try {
            // cafe24에 현재 고객이 로그인되어 있는지 확인할 수 있는 공개API를 사용합니다.      
            const cafe24UserInfoResponse = await fetch(
                `${window.location.origin}/exec/front/manage/async?module=member&path_role=ETC&EC_MOBILE=false`,
                { 
                    method: 'GET', 
                    headers: { 
                        accept: 'application/json' 
                    }
                }
            );
            const userInfo = await cafe24UserInfoResponse.json(); 
            const memberData = userInfo.member.memberData;
            const isSignedIn = memberData.id && memberData.id.length > 1;
            
            if (isSignedIn) {
                const userInfo = {
                    memberId: memberData.id,
                    nickname: memberData.nick || memberData.name
                };
                window.SauceShowroomLib.setMemberObject(userInfo);
            }
        } catch (e) {
        	console.error('간편 인증에 실패했습니다.', e)
        }

        // 전체 페이지 보여주기
        window.SauceShowroomLib.load({ elementId: 'sauce-showroom' });
    });
</script>

STEP 7. 코드를 적용한 디자인을 대표 디자인으로 설정합니다.

모바일 모드에서의 쇼룸 연동 작업이 완료되었습니다.


더 많은 정보 보기

➕

아래 타이틀을 클릭하고 더 많은 🔗연동 정보🔗를 확인해보세요.

Updated about 2 months ago