LogoLogo
  • 샵바이 스킨 알아보기
    • 샵바이 스킨 설명서
    • 오로라 리액트(통합형) 스킨 개발 가이드
    • 오로라 리액트(통합형) 릴리즈 노트
    • 오로라 바닐라(개별형) 릴리즈 노트
    • 1:1 문의하기
  • 오로라 개별형 스킨 개발 가이드
    • 개발 프로세스
      • 등록
      • 개발
        • 개발 환경 구성하기
        • 스킨 디렉토리 구조
      • 설치
    • 기본 API 이해하기
      • 샵바이 API 호출 가이드
        • OAuth 2.0 적용 가이드
      • 외부 스크립트 호출 가이드
    • 화면별 API 활용 가이드
      • 공통 영역
        • 공통 상단
        • 공통 하단
        • 디자인 팝업
        • 슬라이드 메뉴 (모바일 전용)
        • 최근 본 상품
      • 메인 화면
        • 배너 영역
        • 상품진열 영역
        • 인스타그램 연동
      • 회원가입
      • 로그인
      • 간편 로그인
      • 휴대폰 본인인증
      • 상품 리스트
      • 상품 상세
        • 상품 기본 정보
        • 상품 상세 배너 (모바일 전용)
        • 상품 상세정보 (탭)
        • 배송/반품/교환 안내 (탭)
        • 상품후기 (탭)
        • 상품문의 (탭)
        • 관련상품
      • 장바구니
      • 주문서
      • 마이페이지 > 쇼핑정보
        • 주문목록/배송조회
        • 취소/반품/교환 내역
        • 주문 상세
        • 좋아요
      • 마이페이지 > 혜택관리
        • 쿠폰
        • 적립금
      • 마이페이지 > 회원정보
        • 회원정보 수정
        • 회원탈퇴
        • 배송지 관리
      • 마이페이지 > 나의 게시글
        • 1:1 문의
        • 상품문의
        • 상품후기
      • 상품후기 게시판
      • 일반 게시판
      • 기획전
    • KCP 휴대폰 본인인증 연동 (iOS/AOS)
  • 앱 개발 가이드
    • [샵바이] 웹훅(webhook) 가이드
    • [고도몰] 웹훅(webhook) 가이드
  • 추천 콘텐츠
    • 추천 콘텐츠
      • [간편 로그인] SNS 연동 기능 개발 가이드
      • [공통] 마이페이 API 화면가이드
      • [엔터프라이즈] 선물하기 기능 (배송지 나중입력)
      • [엔터프라이즈] 카카오 싱크 신청 가이드
      • [엔터프라이즈] 카카오 싱크 회원가입 API 화면가이드
      • [엔터프라이즈] 이니렌탈(렌탈결제) API 화면가이드
      • [엔터프라이즈] 외부 회원 연동 가이드
      • [엔터프라이즈] 외부 적립금 전환 가이드
      • [엔터프라이즈] 외부 적립금 연동가이드
      • [엔터프라이즈] 사은품 API 화면가이드
      • [엔터프라이즈] PG신청 가이드 (2024/4/1 업데이트)
      • [엔터프라이즈] 카카오 픽셀 설치 가이드
      • [엔터프라이즈]정기결제(배송) API 화면가이드
      • [프로/엔터프라이즈] 쇼핑몰에 인스타그램 위젯을 적용해보세요!
      • [베이직/프로] 카카오싱크 신청 가이드
      • [웹훅 추가] 주문정보 웹훅(Webhook)이란?
      • [웹훅 추가] 회원정보 변경 및 회원탈퇴
      • [웹훅 추가] 앱 설치 및 삭제
      • shop by API, POSTMAN에 추가하기
      • [글로벌] 글로벌 기능 가이드
        • 사용 프로세스
          • 엑심베이 PG 계약
          • 개발 환경 세팅
          • shop by 어드민 세팅
          • 쇼핑몰 스킨 개발
            • 언어/통화 설정
            • 상품/전시 설정
            • 주문서 조회
            • 주문 예약하기
            • 회원 등록
        • 글로벌 주문/환불 프로세스
    • FAQ
      • 에러코드_ (1) 주문
      • 에러코드_ (2) 프로모션
      • 에러코드_ (3) 클레임
      • 쿠폰 코드 API 에러메시지 안내
      • 장바구니/주문결제 에러코드 안내
      • 배송타입 및 택배사코드 안내
      • 파트너어드민 매출내역 조회기준
      • shop api error response 안내
      • server API로 주문의 외부 유입경로 집계 방법
      • 은행코드 안내
      • 7/15 스킨 에디터 업데이트 주의사항
        • 모바일_업데이트 전 템플릿 코드
        • PC_업데이트 전 템플릿 코드
        • 업데이트 후/전 템플릿 코드 비교
      • [샵바이 엔터프라이즈] server API 호출방법
      • [샵바이 엔터프라이즈] 파트너 어드민에서 상품 노출은 미리 해두고, 판매 기간은 미래시점으로 설정할 수 있는 기능이 있을까요?
      • [샵바이 엔터프라이즈] 파트너사 담당MD 일괄변경 어떻게하나요?
Powered by GitBook
On this page
  • 필수 항목
  • aurora 디렉토리 구조
  • assets
  • callback
  • core
  • modals
  • pages
  • partials
  • environment.json

Was this helpful?

  1. 오로라 개별형 스킨 개발 가이드
  2. 개발 프로세스
  3. 개발

스킨 디렉토리 구조

필수 항목

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

  • 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' 플랫폼 타입을 호출

    • 공통 데이터

      • 쇼핑몰 정보

      • 약관 정보

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

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

      • 결제 설정 정보

      • 배너 설정 정보

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

      • 플랫폼 타입 : PC 혹은 MOBILE_WEB

  • error.js

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

    • 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

Previous개발 환경 구성하기Next설치

Last updated 11 months ago

Was this helpful?

각 항목의 데이터는 합니다.

합니다.

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

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

malls 몰 정보 조회하기 API 응답 값과 동일
적용 중인 몰 약관 조회하기 API 응답 값과 동일
게시판 설정 조회하기 API 응답 값과 동일
주문 설정 값 가져오기 API 응답 값과 동일
사용 혹은 작업중 스킨 정보 및 배너 그룹 조회하기 API 응답 값과 동일
회원정보 조회하기 API 응답 값과 동일
unhandledrejection
error