id: 'advanced-product-detail'
status: completed
Advanced Product Detail
Reference
- URL:
http://standard-commerce.makitt.localhost:3006/admin?uiKit=standard-commerce&component=product-detail
- 위치: standard-commerce product detail 메인 PDP
- 구조: 갤러리 + 상품 정보/옵션/배송 선택 + 추천 상품 탭 +
상품 상세 | 리뷰 | 구매정보 탭
- Screenshot: 로컬 preview 기준
React Component
- Path:
apps/makitt-standard-commerce/src/components/assets/product-detail/
- Status: implemented
- 반응형: 데스크톱 2컬럼, 모바일 1컬럼, 추천상품은 가로 캐러셀
- i18n: ko, en, ja
Prerequisites
makitt-server (shop-api)
고객 대면 API. shop storefront에서 호출.
| API | Method | Endpoint | Status |
|---|
| Product Detail | GET | /shop/{shopId}/products/{productId} | available |
| Resolve Store Item | GET | /shop/{shopId}/products/{productId}/resolve | available |
| Review Stats | GET | /shop/{shopId}/reviews/stats | available |
| Reviews | GET | /shop/{shopId}/reviews | available |
| Add To Cart | POST | /shop/{shopId}/cart/items | available |
makitt-server (admin-api)
셀러 어드민에서 이 기능의 데이터를 관리하기 위한 API.
| 기능 | Endpoint | Status |
|---|
| 상품 추가정보/구매정보 관리 | /api/v1/products/{productId} | available |
| 상품 추천 설정 관리 | /api/v1/products/{productId}/recommendations | available |
makitt-server (도메인/모델링)
| 항목 | 내용 | Status |
|---|
| Product 응답 확장 | reviewSummary, purchaseInfoSections, recommendationSections | available |
| Product Recommendation Config | 별도 DynamoDB item | available |
| Cart Shipping Policy 선택 | cart item selectedShippingPolicyId | available |
makitt-web (셀러 어드민 UI)
| 기능 | 설명 | Status |
|---|
| 상품 추가정보/구매정보 편집 | 상품 수정 페이지 | available |
| 추천 상품 편집 | 상품 수정 페이지 | available |
makitt-shop (HCS 렌더링)
| 항목 | 설명 | Status |
|---|
container, image, button, form renderer | PDP 기본 구조 | available |
carousel renderer | 이미지/추천상품 캐러셀 | available |
setState, setFormField action | 탭/옵션/배송 선택 상태 제어 | available |
cart.add action | 장바구니 담기 | available |
HCS Conversion Notes
- 기존
product-detail.json을 베이스로 확장하고, breadcrumb는 제거했다.
- 추천상품은
product.recommendationSections를 읽어 칩 + 가로 캐러셀로 렌더링한다.
- 리뷰 탭은
review.stats와 review.reviews를 별도 resource container에서 읽는다.
- 구매정보 탭은
product.purchaseInfoSections[].items[]를 2단 repeat로 렌더링한다.
- HCS 액션에서
shippingPolicyId를 cart.add payload로 보낼 수 있도록 shared action registry를 확장했다.