# 스킨 디렉토리 구조

### 필수 항목

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

* <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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://workspace-help.nhn-commerce.com/aurora-guide/process/development/directory.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.