# 개발 환경 구성하기

* [배너 정보 (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>


---

# 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/setting.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.