> 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/api-1/main/display-product.md).

# 상품진열 영역

* ['상품진열' 개념](#undefined)
* [좋아요 버튼 구현](#like-products)
* [장바구니 버튼 구현 (옵션 선택 팝업)](#cart)

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

***

### 상품진열 영역

상품진열 영역이란, 메인 페이지 내에서 특별한 목적에 따라 상품 리스트를 노출하기 위한 공간입니다. \
최초 쇼핑몰 생성 시, 세팅되는 상품 진열명은 '신규상품, 인기상품, MD추천, HOT, EVENT'로 구성됩니다.

오로라 개별형 기본 스킨 메인 화면에는 플랫폼(PC, 모바일) 별로 각 5개의 상품진열이 설정되어 있습니다. \
상품진열은 플랫폼별(PC, 모바일)로 설정이 가능하며, 스킨에 접속한 디바이스 구분에 따라 설정한 상품진열을 조회하여 노출합니다.

#### 어드민(관리자)에서의 상품진열 영역관리 <a href="#undefined" id="undefined"></a>

설정된 상품진열의 사용여부, 전시하고자 하는 상품 리스트 등 관련 설정은 아래 어드민 경로에서 관리할 수 있습니다.

```
shop by pro : 디자인 > 디자인 설정 > 상품 진열 관리
shop by premium: 전시관리 > 상품 진열 관리
```

#### 쇼핑몰 노출 위치에 따른 5개의 진열 ID <a href="#ec-87-bc-ed-95-91-eb-aa-b0-eb-85-b8-ec-b6-9c-ec-9c-84-ec-b9-98-ec-97-90-eb-94-b0-eb-a5-b8-5-ea-b0-9c" id="ec-87-bc-ed-95-91-eb-aa-b0-eb-85-b8-ec-b6-9c-ec-9c-84-ec-b9-98-ec-97-90-eb-94-b0-eb-a5-b8-5-ea-b0-9c"></a>

기본 스킨에서는 설정된 상품진열을 `진열ID(sectionId)`로 조회하여 노출하고 있습니다.

기본으로 세팅되는 상품진열의 진열ID는 아래와 같습니다.\
정해진 아래 진열ID를 소스 내 하드코딩하여 각 섹션의 위치를 구분할 수 있습니다.

* **PC** : SCPC0001, SCPC0002, SCPC0003, SCPC0004, SCPC0005
* **Mobile**: SCMO0001, SCMO0002, SCMO0003, SCMO0004, SCMO0005

> [GET / display/sections/{sectionNo}](https://docs.shopby.co.kr/?url.primaryName=display/#/ProductSection/get-section-v1-1)
>
> ► 진열번호 기준으로 상품진열 조회하기 \
> 상품 진열 번호(sectionNo)을 기준으로 상품 진열을 조회하는 API입니다.

**진열번호(sectionNo)**: 상품진열 등록 시 부여되는 유일값으로 모든 상품진열에 존재하는 값입니다.

> [GET /display/sections/ids/{sectionId}](https://docs.shopby.co.kr/?url.primaryName=display/#/ProductSection/get-sections-by-section-id)
>
> ▶ 진열ID 기준으로 상품진열 조회하기\
> 상품 진열ID(sectionId)을 기준으로 상품 진열을 조회하는 API입니다.

**진열ID(sectionId)**: 진열번호 외에 다른 기준으로 호출이 필요할 경우 사용할 수 있는 값입니다.\
어드민에서 쇼핑몰 별 중복체크를 지원하므로, 다른 쇼핑몰에서 사용하는 값으로 상품진열 ID를 사용하실 수 있습니다.

#### '추가'로 상품진열 등록하기 <a href="#ec-b6-94-ea-b0-80-eb-a1-9c-ec-83-81-ed-92-88-ec-a7-84-ec-97-b4-eb-93-b1-eb-a1-9d-ed-95-98-ea-b8-b0" id="ec-b6-94-ea-b0-80-eb-a1-9c-ec-83-81-ed-92-88-ec-a7-84-ec-97-b4-eb-93-b1-eb-a1-9d-ed-95-98-ea-b8-b0"></a>

쇼핑몰 생성 시, 오로라 개별형 기본 스킨에는 기본으로 세팅되는 PC 5개, 모바일 5개의 상품진열코드만 반영이 되어 있습니다.

기본스킨에서 제공하는 상품진열 외에 추가로 노출하고자 할 경우,\
어드민에서 상품 진열을 등록한 후 노출하고자 하는 상품진열의 번호 또는 ID로 조회하여 노출할 수 있습니다.

진열번호, 진열ID 모두 진열 별로 API를 호출하여 상품 리스트를 가져오기 때문에, 상품진열 개수 별로 각각 API호출을 진행하셔야 합니다.\
즉, 기본 스킨에서는 상품진열 5개 SCPC0001 \~ SCPC0005를 모두 사용하기 때문에, 총 5번의 해당 API 호출이 발생합니다

***

### '좋아요' 와 '장바구니' 기능 <a href="#f0-9f-85-90-ec-a2-8b-ec-95-84-ec-9a-94-ec-99-80-f0-9f-85-91-ec-9e-a5-eb-b0-94-ea-b5-ac-eb-8b-88-ea-b" id="f0-9f-85-90-ec-a2-8b-ec-95-84-ec-9a-94-ec-99-80-f0-9f-85-91-ec-9e-a5-eb-b0-94-ea-b5-ac-eb-8b-88-ea-b"></a>

상품진열 내 전시된 상품에 대해 제공되는 '좋아요' 및 '장바구니' 기능을 소개합니다.

{% hint style="info" %}
어드민내에서 상품을 전시하는 방식(=디스플레이 유형)에 따라 '좋아요' 및 '장바구니' 기능 제공 여부가 다릅니다.
{% endhint %}

#### 디스플레이 유형 (PC/Mobile) <a href="#eb-94-94-ec-8a-a4-ed-94-8c-eb-a0-88-ec-9d-b4-ec-9c-a0-ed-98-95-pc-mobile" id="eb-94-94-ec-8a-a4-ed-94-8c-eb-a0-88-ec-9d-b4-ec-9c-a0-ed-98-95-pc-mobile"></a>

상품진열의 '디스플레이 유형'은 어드민에서 설정 가능합니다.

```
- shop by pro: 디자인> 디자인 설정> 상품 진열관리 
- shop by premium: 전시관리> 상품 진열관리
```

각 디스플레이 유형에 따라 가로 또는 세로 상품노출 개수는 고정되어 있으며,\
고정되지 않은 방향의 상품 노출 개수만 어드민에서 설정 가능합니다.

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

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

***

### 좋아요(like-products) 버튼 구현

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

좋아요 기능은 일종의 위시리스트 개념으로, 해당 상품에 대한 단순 좋아요(like-products)를 표시할 수 있습니다.\
따라서 주문서 페이지와 바로 연결하여 결제가 이루어지는 장바구니(cart)와 사용 목적이 구분됩니다.

좋아요 기능은 쇼핑몰 회원(member)의 경우에만 사용 가능하므로, 버튼 클릭 시 로그인 여부를 확인해야 합니다.

* 비회원(guest)
  * 비회원의 경우 좋아요 기능을 지원하지 않습니다.
  * 좋아요 버튼 클릭 시 로그인 여부를 확인하여, 미로그인(비회원)시 서비스이용불가 안내창 노출 후 로그인 페이지로 현재창 이동해야 합니다.
* 회원(member)
  * 로그인한 상태에서 좋아요 버튼 클릭 시, 아래 POST /profile/like-products를 호출합니다.
  * 해당 API로 좋아요가 적용된 상품은 [마이페이지\_쇼핑정보](https://workspace-help.nhn-commerce.com/undefined-1/api-1/greater-than/undefined-3) 내 '좋아요' 리스트에 추가됩니다.

> [POST /profile/like-products](https://docs.shopby.co.kr/?url.primaryName=product/#/Profile/post-profile-like-products)
>
> ▶ 회원이 상품을 좋아한다고 추가/삭제하기\
> 회원이 좋아요한 상품을 목록에 추가하거나 삭제합니다

***

### 장바구니(cart) 버튼 구현

선택한 상품을 옵션 단위로 장바구니에 추가하는 기능입니다. \
상품진열 디스플레이 유형 중 'PC-리스트형', 'PC-장바구니형'인 경우에만 '장바구니' 버튼이 제공됩니다.

<figure><img src="/files/VTwbDj6lE4926F07mqX2" alt=""><figcaption><p>PC-리스트형</p></figcaption></figure>

<figure><img src="/files/qKoUM64SpMeHuSPzQgtZ" alt=""><figcaption><p>PC-장바구니형</p></figcaption></figure>

#### Ⓐ 장바구니 버튼

Ⓑ 상품 옵션 선택 레이어 팝업을 노출하기 위한 버튼입니다. \
단, 성인 인증 상품일 경우 회원/비회원 여부를 확인하여 필요 시 로그인 화면으로 이동시켜야 합니다. \
로그인 이후에는 성인 인증 여부를 확인하는 컨펌창이 필요합니다.

#### Ⓑ 상품 옵션 선택 레이어 팝업

<div align="left"><figure><img src="/files/D4J3vWu82dZFspm2KWpt" alt="" width="375"><figcaption></figcaption></figure></div>

오로라 개별형 기본 스킨에서는 장바구니 버튼 버튼 클릭 시, 상품 옵션을 선택할 수 있는 레이어 팝업이 출력됩니다.\
상품 옵션 구현 방법은 [상품 상세화면](/aurora-guide/api-1/product-detail.md)의 '옵션' 항목과 동일하니, 해당 문서를 참고하시길 바랍니다.

참고로, Ⓑ상품 옵션을 선택할 수 있는 레이어 팝업이 출력되는 점을 제외하고\
아래 안내 드릴 메인 페이지 내 Ⓒ '장바구니 담기 버튼' 호출 로직은 상품 상세화면 내 '장바구니 버튼' 호출 로직과 동일합니다

<div align="left"><figure><img src="/files/7fivwwoVHwHhZ9RiSMTC" alt="" width="375"><figcaption></figcaption></figure></div>

**추가상품**

선택한 상품에 설정된 추가상품이 존재할 시, 본 상품의 옵션 정보 하단에 추가상품의 상품 선택/옵션 선택 영역이 출력됩니다.

> [GET /products/{productNo}/extra-products](https://docs.shopby.co.kr/?url.primaryName=product/#/Product/get-extra-products)
>
> ► 추가상품 조회하기\
> 상품번호에 대한 추가상품을 조회할 수 있습니다.

[`추가상품 조회하기 API`](https://docs.shopby.co.kr/?url.primaryName=product/#/Product/get-extra-products)는 **추가상품의 옵션 정보**를 함께 반환하여,  별도의 [`옵션 조회하기 API`](https://docs.shopby.co.kr/?url.primaryName=product/#/Product%20Option/get-product-options)를 호출할 필요가 없습니다.

다만, [`추가상품 조회하기 API`](https://docs.shopby.co.kr/?url.primaryName=product/#/Product/get-extra-products)에서 제공하는 옵션 정보는 기존 [`옵션 조회하기 API`](https://docs.shopby.co.kr/?url.primaryName=product/#/Product%20Option/get-product-options)의 필드 구성 및 데이터 구조와 **상이한 부분**이 있습니다.\
만약 일반 상품 옵션과 동일하게 처리해야 하는 경우, 필드명 및 데이터 구조가 **기존과** **호환되도록 변환 처리**가 필요할 수 있습니다.

자세한 필드 구성 및 응답 구조는 **API 문서**를 참고하시기 바랍니다.

#### Ⓒ 장바구니 담기 버튼&#x20;

장바구니 버튼 기능은 쇼핑몰 회원 여부와 상관없이 제공합니다.\
단, 회원인 경우에만 API를 호출하며 비회원인 경우 API 호출이 아닌 localStorage에 자체적으로 저장합니다.

* 회원(member)
  * 로그인한 상태에서 장바구니 담기 버튼 클릭 시, 아래 POST /cart를 호출하여 선택한 상품의 옵션이 장바구니에 추가됩니다.&#x20;

> [POST /cart](https://docs.shopby.co.kr/?url.primaryName=order/#/Cart/post-cart)
>
> ▶ 장바구니 등록하기\
> 로그인 회원의 상품 구매 수량과 옵션을 장바구니에 등록합니다.

* 비회원(guest)
  * 비회원인 경우에도 장바구니 담기 버튼을 제공합니다.
  * 단, API 호출이 아닌 localStorage 내 비회원 장바구니 데이터를 자체적으로 관리해야 합니다.
  * localStorage에 비회원 장바구니 데이터 저장 시, POST /cart의 request body와 동일한 데이터 형식으로 저장해야 합니다. 이후 상품 상세화면 혹은 장바구니 화면에서 주문서 호출 시 request 형식을 통일하기 위한 목적입니다.

#### Ⓓ 바로구매 버튼

바로구매 버튼 클릭 시 우선 로그인 여부를 확인하여, 만약 미로그인(비회원)일 경우 비회원 주문을 진행합니다.\
로그인한 회원일 경우 아래 POST /order-sheets API로 주문서를 생성한 뒤 [주문서 화면](/aurora-guide/api-1/order-sheet-form.md)으로 이동합니다.&#x20;

> [POST /order-sheets](https://docs.shopby.co.kr/?url.primaryName=order/#/OrderSheet/post-order-sheet)
>
> ► 주문서 작성하기\
> 선태한 상품의 옵션에 대한 주문서를 생성합니다.&#x20;

주문서를 생성하는 API로 주문서 화면으로 이동하기 전 단계에서 호출해야 합니다.\
해당 API에서 응답 값으로 획득한 주문서 번호 orderSheetNo 를 [주문서 화면](/aurora-guide/api-1/order-sheet-form.md)으로 전달합니다. \
비회원 주문인 경우 accessToken을 null로 보냅니다.