예제 코드

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

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

📘
파트너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>