스킨 디렉토리 구조

필수 항목

워크스페이스에서 제공하는 배포 프로세스를 이용하는 경우 디렉토리 구조 중 일부를 유지해야 정상적으로 서빙할 수 있습니다.

• pc/mobile 소문자 등록

  • 디바이스 플랫폼 타입에 따라 pc 또는 mobile 하위에 존재하는 파일을 제공합니다.

• 메인페이지는 루트에 index.html (메인페이지)로 추가

  • / 경로로 매핑되어 있는 파일명은 index.html 입니다.

  • 다른 파일명으로 추가 시 {쇼핑몰명}.shopby.co.kr 로 접근했을 때 흰 화면이 노출될 수 있습니다.

📦 pc 혹은 mobile
└─ index.html

이 외에는 자유롭게 구성할 수 있습니다.

---

aurora 디렉토리 구조

aurora 스킨은 하기와 같은 디렉토리 구조를 갖습니다.

📦 pc 혹은 mobile
├─ 🍱 assets
├─ callback
├─ core
├─ modals
├─ pages
├─ partials
├─ environment.json
├─ favicon.ico // 파비콘
├─ index.html // 메인페이지
├─ index.js // 메인페이지
├─ manifest.json // mobile 전용
└─ serviceWorker.js // mobile 전용

---

assets

aurora 스킨에서 사용하는 이미지와 스타일 파일이 존재합니다.

🍱 assets
├─ images
└─ styles
   ├─ pages
   ├─ custom-common.css
   ├─ main.css
   └─ shopby-skin-{mobile 혹은 pc}.css

• pages : 각 페이지별 스타일 파일

• main.css : 메인 페이지 스타일

• shopby-skin-{pc 혹은 mobile}.css : 스킨에서 사용하는 공통 스타

  • 해당 파일은 읽기 전용 파일입니다.

  • 임의 수정 시 레이아웃 및 공통으로 사용되는 스타일이 정상적으로 노출되지 않을 수 있습니다.

• custom-common.css : 전체 페이지에 일괄 적용이 필요한 스타일을 정의해 사용할 수 있습니다.

✓ 공통 스타일 로드 예시

<link rel="stylesheet" href="/assets/styles/shopby-skin-{pc 혹은 mobile}.css" />
<link rel="stylesheet" href="/assets/styles/custom-common.css" />

---

callback

인증 혹은 결제 시 필요한 콜백 페이지를 정의합니다. 상세 내용은 페이지 별 개발 가이드를 참고해주세요.

📦 callback
├─ auth-callback.html
├─ auth-callback.js
├─ kcp-callback.html
├─ kcp-callback.js
├─ my-pay-callback.html
└─ my-pay-callbakc.js

---

core

스킨에서 필요한 코어 로직입니다. 상세 내용은 페이지 별 가이드를 참고해주세요.

📦 core
├─ api-initialize-{pc 혹은 mobile}.js
├─ error.js
├─ external-service-config.js
├─ intro.js
├─ naver-marketing-config.js
└─ naver-pay.js

• api-initialize-{pc 혹은 mobile}.js : DOMContentLoaded시점에 플렛폼 타입에 따라 공통 데이터를 호출합니다.

  • pc : 'PC' 플랫폼 타입으로 호출

  • mobile : 'MOBILE_WEB' 플랫폼 타입을 호출

  • 공통 데이터

    • 쇼핑몰 정보

      • malls 몰 정보 조회하기 API 응답 값과 동일

    • 약관 정보

      • 회사 소개, 이용약관, 개인정보 처리방침, 이용안내 4가지 항목을 기본으로 호출합니다.

      • 각 항목의 데이터는 적용 중인 몰 약관 조회하기 API 응답 값과 동일합니다.

      const terms = [
          {MALL_INTRODUCTION : 적용 중인 몰 약관 조회하기 API 응답 값},
          {USE : 적용 중인 몰 약관 조회하기 API 응답 값},
          {PI_PROCESS : 적용 중인 몰 약관 조회하기 API 응답 값},
          {ACCESS_GUIDE : 적용 중인 몰 약관 조회하기 API 응답 값}
      ];

    • 게시판 설정 정보

      • 게시판 설정 조회하기 API 응답 값과 동일합니다.

    • 결제 설정 정보

      • 주문 설정 값 가져오기 API 응답 값과 동일

    • 배너 설정 정보

      • 사용 혹은 작업중 스킨 정보 및 배너 그룹 조회하기 API 응답 값과 동일

    • 회원정보(로그인 한 경우)

      • 회원정보 조회하기 API 응답 값과 동일

    • 플랫폼 타입 : PC 혹은 MOBILE_WEB

• error.js

  • api 호출 및 스크립트 오류 발생 시 error.js 에서 공통으로 핸들링합니다.

  • unhandledrejection 는 프로미스 오류 발생 시 호출되는 이벤트입니다.

  • error 는 스크립트 오류 발생 시 호출되는 이벤트입니다.

    window.addEventListener('unhandledrejection', handleRejection);
    window.addEventListener('error', handleError);

---

modals

스킨에서 사용하는 레이어 모달이 정의되어 있습니다.

---

pages

각 페이지가 정의된 디렉토리 입니다. 상세 내용은 페이지별 개발 가이드를 참고해 주세요.

---

partials

페이지에서 부분적으로 삽입해야하는 부분을 제공합니다. partials 는 template 태그로 삽입해야 합니다.

✓ 예시

<!-- 메타정보 -->
<template shopby-partials="@partials/common-meta.html" shopby-partials-js="@partials/common-meta.js"></template>

<!-- 디자인팝업 -->
<template shopby-partials="@partials/design-popup.html" shopby-partials-js="@partials/design-popup.js"></template>

<!-- 공통 모달  (알럿, 컴펌 사용 시 필요)-->
<template shopby-partials="@partials/modal.html"></template>

---

environment.json

서버에서 주입하는 파일이기 때문에 프로덕션에서는 디렉토리 내 존재할 필요가 없지만, 로컬에서 서버를 구동하기 위해서는 필요한 파일입니다.

{
   "clientId": "clientId",
   "profile": "real"
}

clientId 세팅하기

clientId는 각 쇼핑몰을 구분하는 값으로 shop API 호출 시 필수 request값입니다. {pc/mobile}/environment.json 에 부여받은 clientId를 기입합니다.

clientId 확인하기

• shop by pro : 쇼핑몰도메인/environment.json 에서 확인 가능 예) example.shopby.co.kr/environment.json

• shop by premium :

  • 서비스어드민 : 서비스관리 > 쇼핑몰관리 > (쇼핑몰 선택) > 개발연동정보 > 클라이언트 아이디에서 확인 가능

• 쇼핑몰도메인/environment.json 에서 확인 가능 예) example.shopby.co.kr/environment.json