Guides

소스클립 전시 v1.3.1

Suggest Edits

1. 소개

고객사 자사몰 웹사이트에 클립 콘텐츠 영상을 큐레이션 별로 전시해주는 서비스로, javascript library 형태로 제공됩니다.

2. 연동 방법

연동 방법에는 전체 페이지만을 렌더링하는 방식과, 모듈화 방식을 사용하는 방법으로 구분됩니다.

모듈화 방식은 전체 페이지를 렌더링하는 기능뿐만 아니라, 원하는 큐레이션들을 임의로 선택하여 렌더링할 수 있습니다.

원하시는 기능에 따라 둘 중 하나의 방식을 선택합니다.

공통 STEP

head 태그 내에 소스클립 라이브러리 스크립트 태그를 다음과 같이 추가합니다.

  • 프로덕션 환경의 경우
<script src="https://showcase.sauceclip.com/static/js/SauceClipCollectionLib.js"></script>
  • 스테이지 환경의 경우
<script src="https://stage.showcase.sauceclip.com/static/js/SauceClipCollectionLib.js"></script

전체 페이지만을 렌더링하는 방식

STEP 1. 페이지 내 적용하려는 위치에 태그를 다음과 같이 추가합니다.

<div id="sauce_clip_collection"></div>

STEP 2. STEP2에서 추가한 태그에 전체 페이지가 렌더링 되도록 함수를 실행합니다.

📘

파트너ID에는 계정정보 가져오기 API를 통해서 확인한 파트너ID를 입력해 주세요.

<script>
  window.SauceClipCollectionLib({ partnerId: 'mobidoo' });
</script>

STEP3. 페이지 내에 적용된 것을 확인합니다.

📘

  • 등록된 큐레이션이 없는 경우, 빈 화면이 출력됩니다.
  • 큐레이션 내에 공개 상태의 클립이 없는 경우에 빈 화면이 출력됩니다.

모듈화 방식

STEP 1. 페이지 내 적용하려는 위치에 태그를 다음과 같이 추가합니다. id 속성에는 임의의 값을 지정합니다.

여러 요소에 적용하려는 경우, 복수의 태그를 임의의 위치에 추가합니다. 단, 중복되지 않는 id 속성의 값을 지정합니다.

<div id="{{임의의 태그ID}}"></div>

STEP 2. 모듈을 초기화합니다.

📘

파트너ID에는 계정정보 가져오기 API를 통해서 확인한 파트너ID를 입력해 주세요.

<script>
  window.SauceClipCollectionLib.setInit({ partnerId: "mobidoo" });
</script>

STEP 3. 선택적으로 옵션을 설정합니다.

STEP 3는 선택사항입니다. 실행하지 않는 경우 기본 설정으로 적용됩니다.

선택 가능한 옵션은 다음과 같습니다.

  • 플레이어 실행 방식 설정
  • 전시 요소의 인라인 스타일 설정

STEP 3-플레이어 실행 방식 설정

큐레이션 내 클립 클릭 시, 플레이어를 실행하는 방식을 선택할 수 있습니다.

  • 리다이렉션 (기본)
<script>
  window.SauceClipCollectionLib.setClipPlayerOpenType('redirect');
</script>
  • 새창 열기
<script>
  window.SauceClipCollectionLib.setClipPlayerOpenType('new-window');
</script>
  • 모달 열기
<script>
  window.SauceClipCollectionLib.setClipPlayerOpenType('modal');
</script>

STEP 3-전시 요소의 인라인 스타일 설정

특정 요소에 css 인라인 스타일을 추가할 수 있습니다.

  • 큐레이션 네비게이션 컨테이너 요소의 인라인 스타일 설정
<script>
  SauceClipCollectionLib.setCurationNavigationContainerStyle("{{인라인스타일 문자열}}"); // ex) '{"zIndex": 10}'
</script>
  • 큐레이션 네비게이션 스크롤 버튼 요소의 인라인 스타일 설정
<script>
  SauceClipCollectionLib.setCurationNavigationScrollButtonStyle("{{인라인스타일 문자열}}"); // ex) '{"zIndex": 100}'
</script>
  • 큐레이션 내 클립의 미디어 요소의 인라인 스타일 설정
<script>
  SauceClipCollectionLib.setCurationClipMediaStyle("{{인라인스타일 문자열}}"); // ex) '{"zIndex": 90}' 
</script>
  • 가로형 큐레이션 내 컨텐츠 요소의 인라인 스타일 설정
<script>
  SauceClipCollectionLib.setCurationHorizontalContentsStyle("{{인라인스타일 문자열}}"); // ex) '{"padding": "0 16px"}' 
</script>

STEP 4. STEP1에서 추가한 태그에 전체 페이지나 큐레이션이 렌더링 되도록 함수를 실행합니다.

함수를 여러 번 실행하여 복수의 페이지나 큐레이션을 렌더링할 수 있습니다.

STEP 4-전체페이지 렌더링

다음과 같이 함수를 실행합니다.
함수 매개변수 내 elementId의 값에는 STEP1에서 추가한 원하는 위치의 태그 id 속성 값을 지정합니다.

<script>
  window.SauceClipCollectionLib.load({ elementId: "{{임의의 태그ID}}" });
</script>

STEP 4-큐레이션 렌더링

다음과 같이 함수를 실행합니다.
함수 매개변수 내 curationId의 값에는 등록된 큐레이션 id 값을 지정합니다.
함수 매개변수 내 elementId의 값에는 STEP1에서 추가한 원하는 위치의 태그 id 속성 값을 지정합니다.

<script>
  window.SauceClipCollectionLib.loadCuration({ curationId: "{{임의의 큐레이션ID}}", elementId: "{{임의의 태그ID}}" });
</script>

STEP5. 페이지 내에 적용된 것을 확인합니다.

📘

  • 등록된 큐레이션이 없는 경우, 빈 화면이 출력됩니다.
  • 큐레이션 내에 공개 상태의 클립이 없는 경우에 빈 화면이 출력됩니다

3. 예제 코드

스테이지 환경으로 예시 페이지에 전시하는 예제 코드입니다.

전체 페이지만을 렌더링하는 방식

📘

파트너ID 입력이 필요합니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>[스테이지] 소스클립 전시 전체페이지만 렌더링 방식 데모</title>
  </head>
  <body>
    <header>
      <section class="left">
        <a href="https://sauce.im">
          <img
            alt="logo"
            src="https://sauce.im/_next/image?url=%2Fimages%2Flogos%2Forange_logo.png&w=256&q=75"
            width="120"
            height="30"
            decoding="async"
            loading="lazy"
            style="color:transparent"
          />
        </a>
      </section>
      <section class="center"></section>
      <section class="right">
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
    </header>
    <main>
      <!-- STEP1. 태그 추가 -->
      <div id="sauce_clip_collection"></div>
    </main>
    <script>
      /* 공통STEP. 스크립트 추가 */
      const clipCollectionScriptEl = document.createElement("script");

      clipCollectionScriptEl.setAttribute(
        "src",
        "https://stage.showcase.sauceclip.com/static/js/SauceClipCollectionLib.js"
      );
      clipCollectionScriptEl.setAttribute("async", "");
      document.head.append(clipCollectionScriptEl);
      clipCollectionScriptEl.addEventListener("load", () => {
        /* STEP2. 렌더링 함수 호출 */
        window.SauceClipCollectionLib({ partnerId: 'mobidoo' });
      });
    </script>
  </body>
  <style>
    html, body {
      padding: 0;
      margin: 0;
      width: 100vw;
      height: 100vh;
    }
    header {
      display: flex;
      justify-content: space-between;
      padding: 32px;
      border-bottom: 2px solid rgba(0, 0, 0, 0.20);
      width: 100%;
      height: 98px;
    }
    header .right ul {
      list-style: none;
      display: flex;
      gap: 8px;
    }
    header .right ul li {
      width: 60px;
      height: 30px;
      border-radius: 8px;
      background-color: #e6e6e6;
    }
    main {
      width: 100%;
    }
  </style>
</html>

모듈화 방식

📘

  • 파트너ID 입력이 필요합니다.
  • 큐레이션ID 입력이 필요합니다.
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>[스테이지] 소스클립 전시 모듈화 방식 데모</title>
  </head>
  <body>
    <header>
      <section class="left">
        <a href="https://sauce.im">
          <img
            alt="logo"
            src="https://sauce.im/_next/image?url=%2Fimages%2Flogos%2Forange_logo.png&w=256&q=75"
            width="120"
            height="30"
            decoding="async"
            loading="lazy"
            style="color:transparent"
          />
        </a>
      </section>
      <section class="center"></section>
      <section class="right">
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
    </header>
    <main>
      <!-- STEP1. 태그 추가 -->
      <div id="sauce_clip_collection"></div>
      <div id="sauce_clip_curation_1"></div>
      <div id="sauce_clip_curation_2"></div>
      <div id="sauce_clip_curation_3"></div>
    </main>
    <script>
      // 공통STEP. 스크립트 추가
      const clipCollectionScriptEl = document.createElement("script");

      clipCollectionScriptEl.setAttribute(
        "src",
        "https://stage.showcase.sauceclip.com/static/js/SauceClipCollectionLib.js"
      );
      clipCollectionScriptEl.setAttribute("async", "");
      document.head.append(clipCollectionScriptEl);
      clipCollectionScriptEl.addEventListener("load", () => {
        /* STEP2. 모듈 초기화 */
        window.SauceClipCollectionLib.setInit({ partnerId: "mobidoo" });

        /* STEP3. 옵션 설정 */
        /* STEP 3-플레이어 실행 방식 설정. */
        var clipPlayerOpenType = 'redirect'; // 리다이렉션
        // var clipPlayerOpenType = 'new-window'; // 새창열기
        // var clipPlayerOpenType = 'modal'; // 모달열기
        window.SauceClipCollectionLib.setClipPlayerOpenType(clipPlayerOpenType);

        /* STEP 3-전시 요소의 인라인 스타일 설정. */
        /* 큐레이션 네비게이션 컨테이너 요소의 인라인 스타일 설정 - z-index 감소 */
        SauceClipCollectionLib.setCurationNavigationContainerStyle('{"zIndex": 100}');
        /* 큐레이션 네비게이션 스크롤 버튼 요소의 인라인 스타일 설정 - z-index 감소 */
        SauceClipCollectionLib.setCurationNavigationScrollButtonStyle('{"zIndex": 10}');
        /* 큐레이션 내 클립의 미디어 요소의 인라인 스타일 설정 - z-index 감소 */
        SauceClipCollectionLib.setCurationClipMediaStyle('{"zIndex": 90}');
        /* 가로형 큐레이션 내 컨텐츠 요소의 인라인 스타일 설정 - 좌우 여백 주기 */
        var paddingValue = "16px"; // 여백값
        window.SauceClipCollectionLib.setCurationHorizontalContentsStyle(`{"padding-left": "${paddingValue}", "padding-right": "${paddingValue}", "overflow-x": "hidden"}`);

        /* STEP4. 렌더링 함수 호출 */
        /* STEP 4-전체페이지 렌더링. */
        window.SauceClipCollectionLib.load({ elementId: "sauce_clip_collection" });

        /* STEP 4-큐레이션 렌더링. */
        window.SauceClipCollectionLib.loadCuration({ curationId: "000", elementId: "sauce_clip_curation_1" });
        window.SauceClipCollectionLib.loadCuration({ curationId: "000", elementId: "sauce_clip_curation_2" });
        window.SauceClipCollectionLib.loadCuration({ curationId: "000", elementId: "sauce_clip_curation_3" });
      });
    </script>
    <script>
      window.addEventListener("load", () => {
        window.addEventListener(
          "message",
          function (e) {
            // 브릿지는 이 곳에서 처리할 수 있습니다.
          },
          false
        );
      });
    </script>
  </body>
  <style>
    html, body {
      padding: 0;
      margin: 0;
      width: 100vw;
      height: 100vh;
    }
    header {
      display: flex;
      justify-content: space-between;
      padding: 32px;
      border-bottom: 2px solid rgba(0, 0, 0, 0.20);
      width: 100%;
      height: 98px;
    }
    header .right ul {
      list-style: none;
      display: flex;
      gap: 8px;
    }
    header .right ul li {
      width: 60px;
      height: 30px;
      border-radius: 8px;
      background-color: #e6e6e6;
    }
    main {
      width: 100%;
    }
  </style>
</html>

4. 브릿지

📘

브릿지의 페이로드는 JSON형식의 객체가 문자열로 변환되어 제공됩니다.

브릿지 목록

  • 클립 클릭 브릿지
  • 에러 정보 브릿지

클립 클릭 브릿지

브릿지명

: sauceclipMoveBroadcast

페이로드

{
	clipd: {{클립ID}},
	curationId: {{큐레이션ID}},
	partnerId: {{파트너ID}},
	shortUrl: {{클립URL}},
}
  • clipId
    • 타입: Integer
    • 설명: 클릭된 클립의 ID
  • curationId
    • 타입: Integer
    • 설명: 클릭된 클립의 큐레이션 ID
  • partnerId
    • 타입: String
    • 설명: 파트너ID
  • shortUrl
    • 타입: String
    • 설명: 클릭된 클립으로 이동 가능한 리다이렉션 URL

에러 정보 브릿지

브릿지명

: sauceclipCollectionError

페이로드

{
	errorCode: {{에러코드}},
	errorDetails: {{에러 상세 내용}},
	errorType: {{에러 타입}},
}
  • errorCode
    • 타입: String
    • 설명
      • API에러인 경우, 상태 코드
      • UI에러인 경우, 에러 메시지
      • 비디오 에러인 경우, 에러 코드나 hls 에러타입
  • errorDetails
    • 타입: String
    • 설명: 에러 상세 내용
  • errorType
    • 타입: String ('api' | 'ui' | 'video')
    • 설명
      • api: API 관련 에러
      • ui: UI 관련 에러
      • video: 비디오 관련 에러

Updated 3 months ago