> For the complete documentation index, see [llms.txt](https://workspace-help.nhn-commerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://workspace-help.nhn-commerce.com/aurora-guide/process/development/directory.md).

# 스킨 디렉토리 구조

### 필수 항목

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

* <mark style="background-color:yellow;">pc</mark>/<mark style="background-color:yellow;">mobile</mark> 소문자 등록
  * 디바이스 플랫폼 타입에 따라 <mark style="background-color:yellow;">pc</mark> 또는 <mark style="background-color:yellow;">mobile</mark> 하위에 존재하는 파일을 제공합니다.
* 메인페이지는 루트에 <mark style="background-color:yellow;">index.html</mark> (메인페이지)로 추가
  * <mark style="background-color:orange;">/</mark> 경로로 매핑되어 있는 파일명은 <mark style="background-color:yellow;">index.html</mark> 입니다.
  * 다른 파일명으로 추가 시 <mark style="background-color:yellow;">{쇼핑몰명}.shopby.co.kr</mark> 로 접근했을 때 흰 화면이 노출될 수 있습니다.&#x20;

```
📦 pc 혹은 mobile
└─ index.html
```

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

***

### aurora 디렉토리 구조

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

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

***

### assets

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

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

* pages : 각 페이지별 스타일 파일
* main.css : 메인 페이지 스타일&#x20;
* shopby-skin-{pc 혹은 mobile}.css : 스킨에서 사용하는 공통 스타
  * 해당 파일은 읽기 전용 파일입니다.&#x20;
  * 임의 수정 시 레이아웃 및 공통으로 사용되는 스타일이 정상적으로 노출되지 않을 수 있습니다.&#x20;
* custom-common.css : 전체 페이지에 일괄 적용이 필요한 스타일을 정의해 사용할 수 있습니다.&#x20;

#### <mark style="color:purple;">**✓ 공통 스타일 로드 예시**</mark>&#x20;

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

***

### callback

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

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

***

### core

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

```
📦 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 : <mark style="background-color:yellow;">DOMContentLoaded</mark>시점에 플렛폼 타입에 따라 공통 데이터를 호출합니다.
  * pc : 'PC' 플랫폼 타입으로 호출
  * mobile : 'MOBILE\_WEB' 플랫폼 타입을 호출&#x20;
  * 공통 데이터&#x20;
    * 쇼핑몰 정보
      * [malls 몰 정보 조회하기 API 응답 값과 동일](https://docs.shopby.co.kr/?url.primaryName=admin/#/Mall/get-malls)
    * 약관 정보

      * 회사 소개, 이용약관, 개인정보 처리방침, 이용안내 4가지 항목을 기본으로 호출합니다.
      * 각 항목의 데이터는 [적용 중인 몰 약관 조회하기 API 응답 값과 동일](https://docs.shopby.co.kr/?url.primaryName=manage/#/Terms/search-used-terms)합니다.

      ```
      const terms = [
          {MALL_INTRODUCTION : 적용 중인 몰 약관 조회하기 API 응답 값},
          {USE : 적용 중인 몰 약관 조회하기 API 응답 값},
          {PI_PROCESS : 적용 중인 몰 약관 조회하기 API 응답 값},
          {ACCESS_GUIDE : 적용 중인 몰 약관 조회하기 API 응답 값}
      ];
      ```
    * 게시판 설정 정보
      * [게시판 설정 조회하기 API 응답 값과 동일](https://docs.shopby.co.kr/?url.primaryName=manage/#/Board/get-board-config)합니다.
    * 결제 설정 정보
      * [주문 설정 값 가져오기 API 응답 값과 동일](https://docs.shopby.co.kr/?url.primaryName=order/#/OrderConfiguration/get-order-configuration)
    * 배너 설정 정보
      * [사용 혹은 작업중 스킨 정보 및 배너 그룹 조회하기 API 응답 값과 동일](https://docs.shopby.co.kr/?url.primaryName=display/#/SkinBanner/get-skin-banners-groups-by-skin)
    * 회원정보(로그인 한 경우)
      * [회원정보 조회하기 API 응답 값과 동일](https://docs.shopby.co.kr/?url.primaryName=member/#/Profile/get-profile)
    * 플랫폼 타입 : PC 혹은 MOBILE\_WEB
* error.js
  * api 호출 및 스크립트 오류 발생 시 error.js 에서 공통으로 핸들링합니다.
  * [unhandledrejection](https://developer.mozilla.org/en-US/docs/Web/API/Window/unhandledrejection_event) 는 프로미스 오류 발생 시 호출되는 이벤트입니다.
  * [error](https://developer.mozilla.org/en-US/docs/Web/API/Window/error_event) 는 스크립트 오류 발생 시 호출되는 이벤트입니다.<br>

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

***

### modals

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

***

### pages

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

***

### partials

페이지에서 부분적으로 삽입해야하는 부분을 제공합니다.\ <mark style="background-color:yellow;">partials</mark> 는 <mark style="background-color:yellow;">template</mark> 태그로 삽입해야 합니다.

#### <mark style="color:purple;">**✓ 예시**</mark>&#x20;

{% code overflow="wrap" %}

```
<!-- 메타정보 -->
<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>
```

{% endcode %}

***

### environment.json

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

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

**clientId 세팅하기**

<mark style="background-color:yellow;">clientId</mark>는 각 쇼핑몰을 구분하는 값으로 shop API 호출 시 필수 request값입니다.\ <mark style="background-color:yellow;">{pc/mobile}/environment.json</mark> 에 부여받은 <mark style="background-color:yellow;">clientId</mark>를 기입합니다.

#### clientId **확인하기**

* shop by pro : <mark style="background-color:yellow;">쇼핑몰도메인/environment.json</mark> 에서 확인 가능\
  예) example.shopby.co.kr/environment.json
* shop by premium :
  * 서비스어드민 : <mark style="background-color:yellow;">서비스관리 > 쇼핑몰관리 > (쇼핑몰 선택) > 개발연동정보 > 클라이언트 아이디</mark>에서 확인 가능
* 쇼핑몰도메인/environment.json 에서 확인 가능\
  예) example.shopby.co.kr/environment.json