| Screen ID |
Screen Title |
Screen Path |
| SHOP-PDP-01 |
상품 상세 (SH_110_Product_Detail) |
/shop/product/{productId} |
PLP 상품 카드 클릭 시 진입하는 상품 상세 화면. 상단 미디어, 탐색 보조 영역(다른 색상/함께 착용한 상품/관련 피드), 하단 고정 결제 영역으로 구성된다. “즉시 구매하기” 클릭 시 열리는 결제 바텀시트는 buy-now-bottomsheet.md, “장바구니 담기” 클릭 시 열리는 바텀시트는 add-to-cart-bottomsheet.md 참고.
원본: 쇼핑 · 상품상세 마스터.md(SH_110_Product_Detail) + 상품 상세정보 영역 정책.md 병합.
| 항목 |
KR / 공통 기준 |
JP |
| 헤더 배경 |
투명 |
동일 |
| 좌측 |
뒤로가기 |
동일 |
| 우측 |
장바구니 |
동일 |
| 아래로 스와이프 |
현재 화면 닫힘 |
동일 |
| 비디오 첫 번째 배치 |
불가 |
동일 |
사이즈 가이드 이미지(SCHEME, 99.jpg) |
상단 미디어 미노출 |
동일 |
| 비디오 플레이어 |
BytePlus Player, 자동재생, 기본 음소거 |
동일 |
| 이미지 확대 |
핀치 제스처, 탭만으로 줌 전환 없음 |
동일 |
이미지 파일 유형별 노출
| 성격 |
예시 |
상단 노출 |
| 썸네일(대표) |
1.jpg |
O |
| 상세 이미지 |
2.jpg, 3.jpg, 100.jpg |
O |
| Hover/보조 |
20.jpg, 110.jpg |
O |
| 사이즈 가이드 |
99.jpg (SCHEME) |
X |
| 항목 |
기준 |
| 카테고리 경로 |
상단에 “1차 카테고리 > 2차 카테고리” 형식으로 표시 |
| 카테고리 클릭 |
해당 카테고리의 상품 리스트 화면(plp-main.md)으로 이동 |
| 브랜드명 표시 위치 |
카테고리 경로 아래 |
| 브랜드명 스타일 |
Bold 처리 |
| 브랜드명 옆 |
포커스 브랜드 설정/해제 버튼 |
플래그 표시
브랜드명 다음에 상품 플래그를 표시한다. Bold 처리. 표시 가능 플래그·우선순위·최대 개수는 상품 카드 컴포넌트 스펙 — 플래그 시스템과 동일한 규칙(신상품 > 회원전용 > 앱전용 > 컬렉션 상품 > 무료배송, 최대 5개)을 따른다.
상품명 표시
- 상품명(영문)과 상품명(한글)을 순차적으로 표시한다.
상품 속성 표시
- 상품의 사이즈, 소재, 원산지, 제조사 등 주요 속성 정보를 표시한다.
- 속성 정보는 상품명 아래 별도 섹션으로 접을 수 있는 형태로 제공된다.
- 표시 순서: 사이즈 가이드 > 상품 정보 고시 > 상세 정보
다른 색상
| 항목 |
기준 |
| 노출 조건 |
브랜드 + 상품코드(뒤 4자리 제외) + 상품명 모두 일치 |
| 없을 시 |
섹션 숨김 |
| 정렬 |
API 응답 순서 그대로 |
운영 주의: 다른 색상 API는 초기 클릭한 상품 기준으로 1회만 호출된다. 다른 색상으로 이동해도 섹션은 즉시 재구성되지 않는다.
함께 착용한 상품
| 항목 |
기준 |
| 노출 조건 |
along_with_product_codes 값이 있을 때 |
| 없을 시 |
섹션 숨김 |
| 정렬 |
along_with_product_codes 코드 순서 |
관련 피드
| 항목 |
기준 |
| 노출 조건 |
관련 피드 1개 이상 |
| WEAR |
제외 |
| 정렬 |
최신순, 약 10개 단위 무한 스크롤 |
| 숏폼 |
정적 썸네일만, 비디오 자동재생 없음 |
| 조건 |
표시 |
discountedRate = 0 |
currentPrice만 표시 (정상가 단독) |
discountedRate ≥ 1 |
initialPrice 취소선 + currentPrice (discountedRate%). 할인가는 기본 가격과 같은 줄, 할인가 옆에 할인율 표시 |
unavailableCoupon = 1 |
쿠폰 적용이 불가한 상품입니다. |
unavailableCoupon = 0 |
상품별 쿠폰 계산 API 호출 → 최대 할인 금액 [price]원 (쿠폰 적용가는 할인가 아래 줄에 표시) |
| 아이콘/버튼 |
기능 |
| 포커스 브랜드 |
관심 브랜드 설정/해제 |
| 하트(관심상품) |
채워진/빈 상태로 찜 여부 표시. 클릭 시 관심 상품 추가/제거 |
| 공유 |
상품 링크 복사 + OS 공유 |
- 즉시 구매하기 버튼과 장바구니 담기 버튼을 하단에 표시한다.
상품 상태별 버튼 표시
| 상태 |
버튼 표시 |
| 정상 판매 |
“즉시 구매하기” / “장바구니 담기” |
| 품절 |
“품절” 버튼 표시, 클릭 불가 |
| 오프라인 전용 상품 |
“오프라인 전용 상품” 버튼 표시 |
| 예약 구매 상품 |
“YYYY.MM.DD 00:00부터 구매 가능” 버튼 표시 |
구매하기 / 장바구니 담기 클릭 시 Device ID 검증 흐름
deviceCheck 플래그 확인 (0이면 검증 생략)user.latest_device_id 기준 구매 이력 조회- 이력 없음 → 액션 허용 / 이력 있음 →
장바구니에 담을 수 있는 수량을 초과했습니다. 토스트 후 차단
운영 주의: 위 토스트 문구는 기기 기준 구매 제한 로직이다. CS 접수 시 일반 재고 부족이 아닌 deviceCheck 제한 여부도 함께 확인한다.
- 재고/품절 판정 값(
current_stock)은 공통 ERP 재고 매핑 규칙을 그대로 따른다. 이 문서에서 재정의하지 않는다.
- 상품 카드 컴포넌트가 아닌 PDP 전용 정보 영역(카테고리 경로, 브랜드, 플래그, 가격, 액션 버튼)은 이 문서가 SSOT다.
| 항목 |
내용 |
| 엔드포인트 |
GET /v1/products/{productId}/detail |
| 주요 활용 필드 |
brandName, productName, productKoreanName, currentPrice, initialPrice, discountedRate, images, info, productSizes, fittingHeight, fittingWeight, fittingSize, question, unavailableCoupon, unavailableMileage, deviceCheck |
| 항목 |
내용 |
| 엔드포인트 |
GET /v1/products/{productId}/otherColor |
| 호출 시점 |
초기 진입 상품 기준 1회만 호출 |
| 활용 필드 |
productId, thumbnailUrl, brandName, productName, currentPrice, isNewArrival, isMidsale |
| 항목 |
내용 |
| 엔드포인트 |
GET /v1/products/{productId}/fittingcuts |
| 활용 필드 |
thumbnailUrl, brandName, productName, currentPrice, initialPrice, discountedRate, sizes |
| 항목 |
내용 |
| 엔드포인트 |
GET /v1/contents/feed-list-related |
| 필터링 |
feedType = WEAR 제외 |
| 활용 필드 |
title, imageUrl, feedType, isLiked, documentId, slug, vid, id |
| 기능 |
API |
| 목록 조회 |
GET /v1/bookmarks |
| 추가/제거 |
POST /v1/bookmarks (targetId, targetType) |
| 점수 증가 |
POST /v1/score/scoreUp |
| 확인 항목 |
확인 방법 |
정상 기준 |
| 상품 상세 API |
GET /v1/products/{productId}/detail |
payload 존재 |
| 이미지 배열 |
images 필드 |
1개 이상 |
| 다른 색상 |
otherColor 응답 |
조건 충족 상품 존재 |
| 함께 착용한 상품 |
along_with_product_codes |
값이 있을 때만 노출 |
| 관련 피드 |
feed-list-related 응답 |
1개 이상 |
| 구매 액션 차단 여부 |
deviceCheck 플래그 |
토스트 문구 함께 확인 |
| 증상 |
예상 원인 |
1차 조치 |
| 상품 상세 — 전체 미노출 |
상품 상세 API 실패 |
API 응답 확인 후 개발팀 전달 |
| 상품 상세 — 비디오 재생 불가 |
BytePlus URL/플레이어 이슈 |
이미지 대체 노출 여부 확인 |
| 상품 상세 — 구매 버튼 차단 |
Device ID 제한 |
deviceCheck 플래그 및 토스트 문구 확인 |
PDP는 추천/연관 상품 로직과 미디어 렌더링에서 반복적으로 문제가 발생한다. 다른색상·추천상품 영역에 조건 안 맞는 상품 혼입 여부, 데이터 페칭 실패 시 재시도 처리, 구매 버튼 중복클릭 방어를 체크할 것.
자세히: QA 체크리스트 §5 PDP
| 항목 |
내용 |
| 오프라인 전용/예약구매 상품의 버튼 비활성 세부 조건 |
상품 상세정보 영역 정책.md에는 버튼 문구만 정의되어 있고, 클릭 시 동작(비활성 vs 안내 팝업)이 명시되지 않음. 개발팀 확인 필요 |
| 재고 관련 표시값 |
current_stock 계산 규칙은 공통 ERP 재고 매핑 참고 |
| 버전 |
날짜 |
변경 내용 |
| v1.0 |
2026-07-30 |
최초 작성 — 쇼핑 · 상품상세 마스터.md(SH_110_Product_Detail) + 상품 상세정보 영역 정책.md 병합 (오프라인 전용/예약구매 상품 버튼 상태 추가) |