id: 'product-detail'
status: in-progress
Product Detail
Reference
- URL: https://biodance.com/products/radiant-vita-niacinamide-serum
- 위치: 상품 상세 페이지 메인 영역
- 구조: 2컬럼 레이아웃 (이미지 갤러리 55% + 상품 정보 45%)
- 테마: Shopify Pipeline v7.3.0
React Component
- Path:
apps/makitt-standard-commerce/src/components/assets/product-detail/
- Status: implemented
- 반응형: Desktop 2컬럼, Tablet 2컬럼(50/50), Mobile 1컬럼 스택
- i18n: ko, en, ja
Prerequisites
makitt-server (shop-api)
고객 대면 API. shop storefront에서 호출.
| API | Method | Endpoint | Status |
|---|
| Get Product | GET | /shop/{shopId}/products/{productId} | available |
| Get Product by Slug | GET | /shop/{shopId}/products/by-slug/{slug} | available |
| Add to Cart | POST | /shop/{shopId}/cart/items | available |
| Search Products | GET | /shop/{shopId}/products/search | available |
makitt-server (admin-api)
셀러 어드민에서 이 기능의 데이터를 관리하기 위한 API.
| API | Method | Endpoint | Status |
|---|
| Product CRUD | - | /shops/{shopId}/products/* | available |
| Category CRUD | - | /shops/{shopId}/categories/* | available |
| Variant Group CRUD | - | /shops/{shopId}/variant-groups/* | available |
makitt-server (도메인/모델링)
| 항목 | 내용 | Status |
|---|
| Product Entity | DynamoDB + OpenSearch | available |
| Cart Entity | DynamoDB | available |
| Category Entity | DynamoDB | available |
| Variant Group Entity | DynamoDB | available |
makitt-web (셀러 어드민 UI)
| 기능 | 설명 | Status |
|---|
| 상품 관리 | 상품 CRUD, 이미지 업로드, 옵션/바리언트 관리 | available |
| 카테고리 관리 | 카테고리 CRUD | available |
makitt-shop (HCS 렌더링)
| 항목 | 설명 | Status |
|---|
section renderer | 레이아웃 섹션 | available |
container renderer | 컨테이너 | available |
image renderer | 이미지 | available |
heading renderer | 제목 | available |
text renderer | 텍스트 | available |
button renderer | 버튼 | available |
form renderer | 폼 | available |
input renderer | 입력 | available |
select renderer | 셀렉트 | available |
gallery renderer | 갤러리 | available |
gallery-content renderer | 갤러리 콘텐츠 | available |
gallery-item renderer | 갤러리 아이템 | available |
gallery-prev renderer | 갤러리 이전 | available |
gallery-next renderer | 갤러리 다음 | available |
gallery-pagination renderer | 갤러리 페이지네이션 | available |
cart.addToCart action | 장바구니 추가 액션 | partial |
product.detail resource | 상품 상세 리소스 | partial |
HCS Conversion Notes
- 상품 데이터는
resource 바인딩으로 product API와 연결
- 이미지 갤러리는
gallery compound component 사용
- Add to Cart는
form + submit.action: "cart.addToCart" 패턴
- 수량 입력은
input type="number" 사용
- 바리언트 선택은
select 또는 버튼 그룹으로 구현
- 가격 표시에는
{{product.featuredPrice|currency}} transform 사용