상품 상세 화면
이해하기
특정 상품의 상세 정보를 확인할 수 있는 상품 상세화면 문서입니다.

🅐 상품 기본 정보

기본 스킨에서 상품 기본정보 영역은 위와 같은 레이아웃을 가지고 있습니다.
- get상품 상세 조회
- /products/{productNo}
해당 상품번호(productNo)에 대한 상세 정보를 조회합니다.
해당 상품 정보에 대한 상품 이미지 URL, 상품 기본정보, 상세 정보, 배송 / 반품 / 교환, 후기, 문의, 관련상품 등의 정보를 조회할 수 있습니다.
엔드포인트 URI에 따라 본 화면을 구성하는 여러가지 데이터를 불러오며, 아래에서 문서 내 영역별로 해당 API를 다시 소개합니다.

쇼핑몰에서 판매할 상품을 등록할 때, '상품 (예시 : 청바지) '에 대한 '옵션 (S사이즈, M사이즈, L사이즈) '을 설정할 수 있습니다.
shop by pro 에서는 2가지 형태의 옵션 기능을 제공합니다.
어드민 [상품 > 상품관리 > 상품 등록 > 일반 상품 등록 > 판매정보 > 옵션 사용 여부] 를 '사용함 ' 으로 선택한 경우,
'선택형 옵션 '과 '텍스트 옵션 ' 둘 중 하나만 사용하거나, 동시에 둘 다 사용할 수 있습니다.
- ㉠ 선택형 옵션 (조합형 옵션( : 여러 옵션을 조합하여 쇼핑몰 고객이 선택하는 형태
- ㉡ 텍스트 옵션 : 쇼핑몰 고객이 직접 입력할 수 있는 옵션 형태
쇼핑몰 고객이 선택하는 형태의 옵션입니다.
현재 shop by pro에서는 여러 옵션을 조합하는 '조립형 옵션' 형태만 제공하고 있습니다.
선택형 옵션은 노출 방식에 따라 '분리형' 과 '일체형' 2가지 유형으로 구분됩니다.
- 분리형 옵션 multiLevelOptions : 각 옵션 별로 계층(단계)를 구분하여 셀렉트 박스를 제공합니다.
- 일체형 옵션 flatOptions : 쇼핑몰 고객이 선택할 수 있는 옵션을 모두 리스트업 하여 셀렉트 박스를 제공합니다.

쇼핑몰 고객이 직접 옵션값을 입력하는 형태입니다.
어드민에서 '매칭타입'에 따라 상품별 / 옵션별로 텍스트 옵션을 노출할 수 있습니다.
- 상품별 : 쇼핑몰 고객이 상품 당 1개의 텍스트 옵션만 입력할 수 있습니다.
- 옵션별 : 각 옵션별로 개별 텍스트 옵션을 입력할 수 있습니다.

상품의 옵션 단위로 주문이 진행되므로, 옵션이 없는 상품은 없습니다.
어드민에서 상품 등록 수정 시 '옵션 사용 안 함'을 선택하는 경우에도, 내부적으로는 자동으로 하나의 옵션이 생성됩니다.
따라서 쇼핑몰 고객이 실제로 상품을 구매하기 위해서는,
본 화면에서 GET/products/{productNo} 와 함께 아래 옵션 조회 API를 반드시 호출해야 합니다.
- get상품 옵션 조회
- /products/{productNo}/options
해당 상품번호(productNo)에 대한 옵션 정보를 조회합니다.
- TYPE
- 조합형 옵션 및 텍스트 옵션을 선택할 수 있습니다.
- 만약 어드민에서 옵션 사용 여부를 '사용안함'으로 설정한 경우 응답값이 Default로 내려옵니다.
- flatOptions
- 일체형 옵션(각 옵션들의 조합으로 생성되는 모든 옵션을 쭉 나열한 데이터)
- selectType에서 flat선택 시 flatLevelOptions값을 활용

- multiLevelOptions
- 분리형 옵션 (계층 구조로 구성된 옵션 데이터)
- selectType에서 multi선택 시 multiLevelOptions값을 활용

- input
- 'inputLabel 텍스트 옵션 내 입력문구'를 의미합니다.
ex ) 최대한 늦게 생산된 것으로 보내주세요.
쇼핑몰 고객이 현재 다운로드 받을 수 있는 쿠폰 리스트와 쿠폰을 다운 받을 수 있는 팝업을 노출합니다.

클릭 시 로그인 여부 체크 후 쿠폰다운로드 팝업을 출력합니다.

- post상품별 발급 가능한 쿠폰 다운로드
- /coupons/products/{productNo}/download
해당 상품에서 다운로드 받을 수 있는 모든 쿠폰을 발급합니다.
상품번호 productNo로 해당 상품에서 다운 받을 수 있는 모든 쿠폰을 발급합니다.
어드민 [프로모션 > 혜택관리 > 쿠폰 관리 ]의 설정 정보에 따라 아래 정보가 노출됩니다.
㉠ 출력 되는 쿠폰
- 발급 유형 : 다운로드 발급
- 발급 상태 : 발급중
- 해당 상품이 대상 상품인 쿠폰
- 즉시할인가를 기준으로 할인되는 금액이 높은 순으로 쿠폰을 정렬
- 할인금액이 동일하다면 주문 쿠폰이 상품 쿠폰보다 상단에 출력
- 할인되는 금액 및 혜택 구분이 모두 동일하다면 쿠폰 등록일 기준 최신순으로 출력
㉡ 혜택
- 정률로 설정 시 % 출력 / 정액 설정시 금액 출력
- 쿠폰 유형 ('주문적용 쿠폰'-> 주문할인 / '상품적용 쿠폰'-> 상품할인)
- 최대 할인금액 (할인 금액을 정률로 설정한 경우에만 노출)
- 최소 기준금액 (최소금액 설정 해두었을 시 노출)
㉢ 다운로드 버튼
- 발급 시, (회원 별 발급 수량 제한이 있을 경우) 발급 완료 아이콘 출력
- 발급 불가 쿠폰의 경우 안내 문구 출력
(발급 대상 회원 등급일 경우 / 발급 불가한 시간,요일일 경우 / 쿠폰의 일별 총 발급수량 소진 시)
해당 상품을 찜하기 리스트에 추가 / 삭제할 수 있는 기능입니다.

찜하기 기능은 쇼핑몰 회원 (member)의 경우에만 사용 가능하므로, 찜하기 버튼 클릭 시 로그인 여부를 확인해야 합니다.
- 비회원 (guest)
비회원의 경우 찜하기 기능을 지원하지 않습니다.
찜하기 버튼 클릭 시 로그인 여부를 확인하여, 미로그인 (비회원) 시 알럿 노출 후 로그인 기능을 제공합니다.
- 회원 (member)
로그인한 상태에서 찜하기 버튼 클릭 시, 아래 POST/profile/like-products 를 호출합니다.
기본 스킨에서는 버튼 클릭 시 '찜하기'가 적용되며 한번 더 클릭할 경우 '찜하기'가 삭제됩니다.
해당 API로 찜하기가 적용된 상품은 마이페이지_쇼핑정보 내 '찜 리스트'에 추가됩니다.
- post찜하기 추가 및 삭제
- /profile/like-products
로그인 회원이 특정 상품에 '찜하기'를 추가/삭제합니다.
선택한 상품을 옵션 단위로 장바구니에 추가하는 기능입니다.
장바구니(cart) 버튼 클릭 시, 상품 옵션 선택 여부를 확인 후 장바구니 화면으로 이동합니다.

단, 회원인 경우에만 API를 호출하며 비회원인 경우 API 호출이 아닌 localStorage 에 자체적으로 저장합니다.
- 회원 (member)
- post장바구니 등록
- /cart
로그인 회원의 상품 구매 수량과 옵션을 장바구니에 등록합니다.
로그인한 상태에서 장바구니 버튼 클릭 시, 아래 POST/cart 를 호출하여 선택한 상품의 옵션이 장바구니에 추가합니다.
- 비회원 (guest)
비회원의 경우에도 장바구니 버튼을 제공합니다.
단, API 호출이 아닌 localStorage 내 비회원 장바구니 데이터를 자체적으로 관리해야 합니다.
localStorage에 비회원 장바구니 데이터 저장 시, POST/cart의 request body와 동일한 데이터 형식으로 저장해야 합니다.
이후 상품 상세화면 혹은 장바구니 화면에서 주문서 호출 시 request 형식을 통일하기 위한 목적입니다.

버튼 클릭 시 우선 로그인 여부를 확인 한 뒤 POST /order-sheets API로 주문서를 생성합니다.
만약 미로그인(비회원) 일 경우에는 해당 API로 비회원 주문을 진행합니다.
- post주문서 생성 요청
- /order-sheets
선택한 상품의 옵션에 대한 주문서를 생성합니다.
주문서를 생성하는 API로, 주문서 화면으로 이동하기 전 단계에서 호출해야 합니다.
해당 API에서 응답 값으로 획득한 주문서 번호 orderSheetNo 를 주문서 화면으로 전달합니다.
비회원 주문인 경우 accessToken을 null로 보냅니다.
🅑 상품 상세 정보 및 🅒 배송/반품/교환 안내
상품 상세 정보 및 배송/반품/교환 안내 영역에 대해 소개합니다.


어드민에서는 [상품 > 상품 관리 > 상품 등록/수정] 화면에서 아래 항목들에 대한 에디터(editor)기능을 제공하고 있습니다.
에디터 기능을 통해 쇼핑몰 관리자는 상품 상세 정보 및 배송/반품/교환 영역에 노출할 내용을 작성할 수 있습니다.
- 상품 상세 (상단)
- 상품 상세
- 상품 상세 (하단)
- 배송 안내
- AS 안내
- 환불 안내
- 교환 안내
- get상품 상세 조회
- /products/{productNo}
해당 상품번호(productNo)에 대한 상세 정보를 조회합니다.
앞서 본 문서 상단 'ⓐ 상품기본 정보' 영역에서 소개했던 API입니다.
해당 상품번호에 대한 상품 기본정보, 상세정보, 배송/반품/교환, 후기, 문의, 관련상품 등을 정보를 조회할 수 있습니다.
어드민에 작성한 데이터를 그대로 쇼핑몰 고객들이 보는 화면에 노출합니다.
해당 정보들은 GET/products/{productNo} 리턴 값에 포함되어 있으며, 에디터로 작성한 내용은 html 코드 형태로 제공하므로
곧바로 상품 페이지 html 에 추가할 수 있습니다.
- contentFooter: 상품 상세 하단
- contentHeader: 상품 상세 상단

상품 상세 정보 영역에서 '등록된 옵션 이미지 사용' 기능에 대해 소개합니다.
어드민에서 '상품 상세 사용' 토글 대신 '등록된 옵션 이미지 사용' 항목을 선택할 수 있습니다.
등록된 옵션 이미지 사용 선택 시, 옵션 이미지가 등록되어 있는 옵션의 이미지 등록 여부 및 사용 여부에 따라
[판매정보 > 옵션 > 옵션 수정]에서 등록해 두었던 옵션의 첫 번째 옵션 값과 이미지가 노출됩니다.

- get상품 상세 조회
- /products/{productNo}
해당 상품번호(productNo)에 대한 상세 정보를 조회합니다.
앞서 본 문서 상단 'ⓐ 상품기본 정보' 영역에서 소개했던 API입니다.
해당 상품번호에 대한 상품 기본정보, 상세정보, 배송/반품/교환, 후기, 문의, 관련상품 등을 정보를 조회할 수 있습니다.
'등록된 옵션 이미지 사용' 사용 여부는 응답 값 내 baseInfo.optionImageViewable 값을 통해 확인 할 수 있습니다.
- get옵션 이미지 목록 조회
- /products/{productNo}/options/{optionNo}/images
해당 상품번호(productNo)에 대한 옵션 이미지 목록 정보를 조회합니다.
옵션 번호 OptionNo를 기준으로 옵션 이미지 리스트를 호출할 수 있습니다.
🅓 상품후기
상품 후기 메뉴 접근 시 상품 후기 목록을 조회합니다.

- get상품평 목록 조회
- /products/{productNo}/product-reviews
해당 상품번호에 작성된 상품평을 조회합니다.
해당 상품 번호 productNo기준으로 작성된 상품평 목록을 조회하며, 아래의 항목으로 리스트를 구성합니다.
- 상품 정보 (상품 썸네일 / 상품명 / 옵션명)
- 별점
- 작성일
- 후기 정보 (후기 내용 / 대표 이미지)

- post내 상품평 등록
- /products/{productNo}/product-reviews
해당 상품번호에 대한 상품평을 등록합니다.
작성 가능한 상품 후기 목록은 구매한 상품의 옵션 기준으로 출력됩니다.
해당 로그인한 회원의 상품이 배송 완료되어, 상품평을 작성할 수 있는 상태일 경우
위와 같이 화면에 '상품 후기 작성하기 ' 버튼을 노출합니다.
버튼 클릭 시, 아래 상품 후기 등록 페이지로 이동합니다.

- get내 상품평 등록
- /products/{productNo}/product-reviews
해당 상품번호에 대한 상품평을 등록합니다.
해당 상품 번호productNo 기준으로 상품평을 등록할 수 있습니다.
기본 스킨에서는 상품 후기 등록 페이지에 아래의 항목을 제공합니다.
- 주문상품 선택 영역
- 나의 게시글 > 상품 후기에서 게시글 등록이 가능한 주문상품 (옵션 기준)을 선택해야 합니다.
- 평점
- 5점까지 설정 가능합니다.
- 내용
- 최대 1000자 입력 가능합니다.
- 첨부파일
- 첨부파일은 이미지파일 최대 10개까지 등록 가능하며, 1개당 용량은 5MB로 제한됩니다.

- put상품 후기 수정
- /products/{productNo}/product-reviews/{reviewNo}
작성자 본인의 상품 후기을 수정합니다.
해당 상품 번호productNo에 대한 작성자 본인의 상품후기를 수정합니다.
상품 후기는 작성자 본인만 수정 가능하여 회원 엑세스 토큰 accessToken 은 요청 시 필수로 입력해야 합니다.
수정이 가능한 범위는 주문상품, 평점, 내용, 첨부파일 입니다.
- delete상품 후기 삭제
- /products/{productNo}/product-reviews/{reviewNo}
해당 상품번호에 대한 작성자 본인의 상품 후기를 삭제합니다.
상품 후기 삭제는 상품후기 상세 페이지에서 기능 제공합니다.
상품 후기는 작성자만 삭제 가능하여 요청 시 회원 엑세스 토큰 accessToken을 필수 값으로 전송해야 합니다.
🅔 상품문의
상품문의는 [어드민 > 게시판 관리 > 게시판리스트] 설정에 따릅니다.
상품문의는 회원만 작성 가능하며, 비회원은 작성이 불가 합니다.
비밀글 설정은 어드민 설정에 따르며, 비밀글 쓰기 기능이 사용함인 경우 상품문의 등록 페이지에서 비밀글 여부를 설정할 수 있는 기능을 제공해야 합니다.

- get상품 문의 목록 조회
- /products/{productNo}/inquiries
해당 상품 번호에 대한 상품 문의 목록을 조회합니다.
위 화면과 같이 해당 상품 번호 productNo에 대한 상품 문의 목록을 조회합니다.
답변이 완료 되지 않은 문의 글에 대해서만 수정 및 삭제가 가능합니다.
수정 / 삭제 API는 하단 내용에서 확인하실 수 있습니다.

- post상품 문의 목록 등록
- /products/{productNo}/inquiries
해당 상품 번호에 대한 상품 문의를 등록합니다.
기본 스킨의 경우 상품문의 리스트에서 '상품 문의하기 글쓰기' 버튼을 제공하고 있어 해당 버튼을 통해 게시글 등록이 가능합니다.
위 화면과 같이 해당 상품 번호 productNo에 대한 상품 문의 목록을 조회합니다.
버튼 클릭 시, 상품 문의를 등록할 수 있는 위와 같은 페이지를 제작하여 회원에게 제공합니다.
기본 스킨에서는 아래의 항목을 제공합니다.
- 문의유형
- 문의유형은 어드민에서 등록한 문의 유형을 select-box로 제공합니다.
- 상품
- 문의할 상품이 productNo 기준으로 고정되어 있습니다.
- 내용
- 최대 1000자 입력 가능합니다.
- 비밀글 설정
- 어드민에서 비밀글 쓰기를 사용함으로 설정하는 경우 등록시 비밀글 여부를 선택할 수 있도록 기능이 제공됩니다.
- 어드민에서 비밀글 쓰기를 사용안함으로 설정하는 경우 등록시 비밀글 여부선택 항목은 제공되지 않아야 합니다.
- 답변등록 알림 (이메일, SMS 수신)
- 어드민의 자동 SMS 설정, 자동 메일 설정 여부에 따라 답글 등록 시 문의 등록자에게 답변 완료에 대해 안내됩니다.
- put상품 문의 수정
- /products/inquiries/{inquiryNo}
해당 문의번호 inquiryNo에 대한 상품 문의를 수정합니다.
'더보기' 버튼 클릭 시, 작성자 본인만 상품 문의를 수정할 수 있습니다.
제목 / 내용 / 문의 유형만 수정 가능합니다.
답변이 완료된 문의는 수정할 수 없습니다.
- delete상품 문의 삭제
- /products/inquiries/{inquiryNo}
작성자의 상품 문의를 삭제합니다.
'더보기' 버튼 클릭 시, 작성자 본인만 상품 문의를 삭제할 수 있습니다.
답변이 완료 되지 않은 문의건에 대해서만 삭제 가능합니다.
상품문의 상세 조회 시 inquiryStatus (답변상태) 값이 답변 완료인 경우 삭제 버튼을 미노출 하여 삭제 기능을 제공하지 않습니다.
어드민에서 설정한 관련 상품 목록을 상품 상세 페이지 최하단에 노출합니다.
디스플레이 유형은 좌우 이동형으로, 세로 1줄로 설정한 관련 상품이 4개씩 출력 되며 좌 / 우 버튼을 통해 1칸씩 이동 가능합니다.

- get관련 상품 목록 조회
- /products/{productNo}/related-products
관련 상품 정보를 조회할 수 있습니다.
어드민 [상품 > 상품 등록 / 수정] 에서 관련 상품을 설정할 수 있습니다.
관련 상품 사용 안함 설정 시 영역이 미노출됩니다.

