> 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/setting.md).

# 개발 환경 구성하기

* [배너 정보 (asset) 파일 등록하기](#assets-1)
* [배너 정보 (asset) 파일이란?](#assets)
* [스킨 유형 (platformType)별 zip 파일 구조](#platformtype-zip)
* [로컬 개발 환경 구성하기](#undefined-3)

***

### 배너 정보(assets) 파일 등록하기

스킨에서 사용하는 배너그룹을 정의하는 메타정보와 배너에 사용되는 샘플 이미지가 포함된 정보입니다. \
스킨을 사용하는 쇼핑몰이 생성될 때 해당 정보로 배너그룹이 생성됩니다.

#### ◼︎ 등록 방법 <a href="#eb-93-b1-eb-a1-9d-eb-b0-a9-eb-b2-95" id="eb-93-b1-eb-a1-9d-eb-b0-a9-eb-b2-95"></a>

* [셀러어드민 > 상품 > 디자인](https://workspace.godo.co.kr/seller-admin/product/skin)에서 배너 정보 등록이 필요한 스킨의 `기본 정보` 클릭
* 디자인 정보 수정에서 배너정보 등록

<figure><img src="/files/xqAJclBVbvADgeLj0F8u" alt=""><figcaption></figcaption></figure>

#### **◼︎ zip 파일 구성 시 주의사항**

* 20MB 이내의 zip 파일 형태
* csv 파일 저장 시 utf-8 로 저장

배너 정보 등록 시 쇼핑몰 어드민 아래 경로에서 배너 이미지를 등록하거나 수정할 수 있습니다.

```
shop by pro: 디자인> 디자인설정> 스킨 배너관리
shop by premium: 전시관리> 스킨 배너관리
```

<figure><img src="https://github.com/nhn-commerce-fe/shopby-ui-docs/assets/131448949/cf6229b3-dc28-4447-b460-59a2492db5a6" alt=""><figcaption></figcaption></figure>

***

### 배너 정보 (assets) 파일이란?

* 개념&#x20;
  * 스킨에서 사용하는 배너그룹을 정의하는 메타정보, 배너에 사용되는 샘플 이미지가 포함된 정보입니다.&#x20;
* 필요한 이유
  * 아래서 설명드리는 배너정보(asset파일)은 20MB 이내의 zip파일 형태로 업로드가 필요합니다.
  * 이를 통해 해당 메타정보가 쇼핑몰 어드민(관리자)에 바로 노출되며, 이후 배너를 조회하는 API를 호출할 수 있는 개념입니다.
  * 따라서 스킨이 사용할 배너와 배너그룹에 대한 정확한 정보를 반드시 bannerGroup.csv, banner.csv에 입력해야 합니다.&#x20;

{% hint style="info" %}
단, csv파일 작성 후 저장 시 한글이 깨질 수 있으니 반드시 UTF-8로 저장해야하는 점을 확인부탁드립니다.

*(참고) cs파일 UTF-8저장 방법*\
*엑셀 파일 > 다른 이름으로 저장 > 팝업창 우측 하단 '도구(L)'메뉴 버튼 > '웹 옵션(W)' 선택 > 웹 옵션 창에서 '인코딩' 탭 진입하여 '문서를 다음 형식으로 저장(S)' 내 유니코드(UTF-8) 선택*
{% endhint %}

***

### 스킨 유형(platformType)별 zip파일 구조

앞선 문서에서 안내해 드린 대로 스킨은 적용되는 환경에 따라 아래와 같은 유형이 있습니다. \
각 유형별로 아래와 같은 zip 파일 구조를 갖춰야 합니다.&#x20;

{% hint style="info" %}
오로라 기본 스킨은 개별형(PC+모바일) 스킨이며, 본 스킨 개발 가이드는 개별형을 기준으로 안내합니다.
{% endhint %}

* 개별형(PC + MOBILE) : 하나의 GitLab 프로젝트 내 PC스킨과 Mobile스킨의 소스코드가 모두 개발된 경우
* 개별형(PC) : PC스킨만 개발된 경우
* 개별형(MOBILE) : Mobile스킨만 개발된 경우
* 통합형(COMBINE) : PC스킨과 Mobile스킨의 소스코드가 하나의 형태로 개발된 스킨

***

### ◼︎ asset 디렉토리 구조

스킨 유형별로 아래와 같이 assets을 구성하세요.

```
/assets
   ㄴ /img
       ㄴ /banner
           ㄴ 이미지파일1
           ㄴ 이미지파일2
   ㄴ banner.csv
   ㄴ bannerGroup.csv
```

***

### ◼︎ bannerGroup.csv

스킨에서 사용할 각 배너그룹을 정의하는 메타정보 파일입니다.

* #### **platformType**

bannerGruop.csv 의 platformType은 아래와 같이 작성해 주셔야 합니다.&#x20;

* 개별형(pc+mobile): <mark style="background-color:yellow;">pc/banner.csv</mark>, <mark style="background-color:yellow;">mobile/banner.csv</mark>
* 개별형(pc) : <mark style="background-color:yellow;">PC</mark>
* 개별형(mobile) : <mark style="background-color:yellow;">MOBILE\_WEB</mark>
* 통합형 스킨: <mark style="background-color:yellow;">RESPONSIVE</mark>

- #### bannerGroupType/ bannerGroupCode/bannerGroupName <a href="#undefined" id="undefined"></a>

[배너 영역 가이드](/aurora-guide/api-1/main/banner.md)를 참고하시길 바랍니다.

* (참고) \<span style="color:#121212;">bannerGroupCode\</span>: \
  쇼핑몰 스킨 내 배너의 위치와 bannerGroupCode 는 무관 (ex) BANNER03 을 BANNER04 보다 쇼핑몰 상단에 배치 가능
* (참고) \<span style="color:#121212;">bannerGroupName\</span>: \
  자유롭게 입력가능
* 예제코드 (오로라 리액트 통합형 기준)

#### <mark style="color:purple;">**✓ 예제코드**</mark>

```
,platformType,bannerGroupType,bannerGroupCode,bannerGroupName
,RESPONSIVE,LOGO,LOGO,로고 전용 - 상단로고
,RESPONSIVE,SLIDE,BNSLIDE,움직이는 배너 - 메인 상단 배너
,RESPONSIVE,NORMAL,BANNER01,일반 배너 - 메인 중간 배너 1
,RESPONSIVE,NORMAL,BANNER02,일반 배너 - 메인 중간 배너 2
,RESPONSIVE,NORMAL,BANNER03,일반 배너 - 메인 중간 배너 3
,RESPONSIVE,NORMAL,BANNER04,일반 배너 - 메인 중간 배너 4
,RESPONSIVE,NORMAL,BANNER05,일반 배너 - 메인 중간 배너 5
,RESPONSIVE,NORMAL,BNBOTTOM,일반 배너 - 메인 하단 배너
,RESPONSIVE,NORMAL,BNBGLEFT,일반 배너 - PC 배경 좌측 배너
,RESPONSIVE,NORMAL,BNDETAIL,일반 배너 - 상품상세 배너
```

***

### ◼︎ banner.csv <a href="#e2-93-92-banner.csv" id="e2-93-92-banner.csv"></a>

스킨에서 사용하는 최초의 initial sample data를 입력하는 파일입니다.\
initial sample data란, 개발된 스킨이 배포되었을 때 샘플로서 보여지는 배너(즉 배너 이미지) 정보를 의미합니다.

하나의 배너그룹 안에 여러 개의 배너가 추가될 수 있으므로,\
\<span style="color:#121212;">banner.csv\</span>는 입력행 수 제한이 없습니다.

* bannerGroupCode
  * 해당 배너가 포함될 배너그룹 코드
  * bannerGroup.csv파일 내 bannerGroupCode 정의 선행 필수
* bannerTitle: 배너명
* bannerImage
  * 배너에서 사용할 배너 이미지 파일명 (경로 포함)
  * 스킨 내 이미지가 존재해야함
  * bannerGroupType 이 SLIDE 인 경우, 행 추가를 통해 여러 개의 이미지 등록가능
* displayOrder
  * 동일한 배너그룹에 속한 배너들 간 노출 순서&#x20;
  * ex. 배너그룹 내 배너가 1개만 존재할 경우 default값은 *,1* 으로 입력

#### <mark style="color:purple;">**✓ 예제코드**</mark>

```
,bannerGroupCode,bannerTitle,bannerImage,displayOrder
,LOGO,로고 전용 - 상단로고,/assets/img/banner/header-logo.png,1
,BNSLIDE,움직이는 배너 - 메인 상단 배너,/assets/img/banner/main_slide_banner01.png,1
,BNSLIDE,움직이는 배너 - 메인 상단 배너,/assets/img/banner/main_slide_banner02.png,2
,BNSLIDE,움직이는 배너 - 메인 상단 배너,/assets/img/banner/main_slide_banner03.png,3
,BNSLIDE,움직이는 배너 - 메인 상단 배너,/assets/img/banner/main_slide_banner04.png,4
,BNSLIDE,움직이는 배너 - 메인 상단 배너,/assets/img/banner/main_slide_banner05.png,5
,BNSLIDE,움직이는 배너 - 메인 상단 배너,/assets/img/banner/main_slide_banner06.png,6
,BANNER01,일반 배너 - 메인 중간 배너 1,/assets/img/banner/main_banner01.png,1
,BANNER02,일반 배너 - 메인 중간 배너 2,/assets/img/banner/main_banner02.png,1
,BANNER03,일반 배너 - 메인 중간 배너 3,/assets/img/banner/main_banner03.png,1
,BANNER04,일반 배너 - 메인 중간 배너 4,/assets/img/banner/main_banner04.png,1
,BANNER05,일반 배너 - 메인 중간 배너 5,/assets/img/banner/main_banner05.png,1
,BNBOTTOM,일반 배너 - 메인 하단 배너,/assets/img/banner/main_bottom_banner.png,1
,BNBGLEFT,일반 배너 - PC 배경 좌측 배너,/assets/img/banner/pc_left_banner.png,1
,BNDETAIL,일반 배너 - 상품상세 배너,/assets/img/banner/productdetail_banner.png,1
```

***

### 로컬 개발 환경 구성하기&#x20;

기본 스킨을 코드 베이스로 개발하는 경우 참고하세요.

* aurora : <https://skins.shopby.co.kr/shopby/aurora-vanilla/-/blob/main/README.md>
* aurora react : <https://skins.shopby.co.kr/shopby/aurora-skin/-/blob/main/README.md>