Cart Section
docs/hcs-asset/cart-section.md
id: 'cart-section' status: ready
Cart Section
Reference
- URL:
http://standard-commerce.makitt.localhost:3006/admin?uiKit=standard-commerce&component=cart-section - 기준 소스:
apps/makitt-standard-commerce/src/components/assets/cart-section/cart-section.tsx - 기준 컨트롤러:
apps/makitt-standard-commerce/src/components/assets/cart-section/use-cart-section-controller.ts - 구조: hero → 선택 가능한 cart item list → quote summary → recommendation tabs → checkout CTA
React Component
- Path:
apps/makitt-standard-commerce/src/components/assets/cart-section/ - Status: implemented
- 데이터 흐름:
shopApi.getCart()shopApi.quoteCart({ cartItemIds })shopApi.getCartRecommendations()cart.update,cart.remove,checkout.create
- 반응형: desktop 2-column, mobile stacked cards
HCS Asset
- Path:
apps/builder/data/hcs-asset/cart-section.json - Status: ready
- UI Kit / Group:
standard-commerce/cart - 구현 범위:
- empty state
- 선택 기반
cart.quotesummary - cart item 수량 변경 / 배송 정책 변경 / 삭제
- recommendation tabs
checkout.create후 checkoutId 기반 navigate
- 현재 차이:
- React의 option-change modal, recommendation option modal은 포함하지 않고 상품 상세 이동으로 단순화
Prerequisites
makitt-server (shop-api)
| API | Method | Endpoint | Status |
|---|---|---|---|
| Get Cart | GET | /shop/{shopId}/cart | available |
| Quote Cart | POST | /shop/{shopId}/cart/quote | available |
| Cart Recommendations | GET | /shop/{shopId}/cart/recommendations | available |
| Update Cart Item | PATCH | /shop/{shopId}/cart/items/{cartItemId} | available |
| Remove Cart Item | DELETE | /shop/{shopId}/cart/items/{cartItemId} | available |
| Create Checkout From Cart | POST | /shop/{shopId}/checkout | available |
makitt-server (admin-api)
| API | Method | Endpoint | Status |
|---|---|---|---|
| N/A | - | - | N/A |
makitt-server (도메인/모델링)
| 항목 | 내용 | Status |
|---|---|---|
| Cart Entity | Cart + CartItem + shipping option snapshot | available |
| Quote Application | selected cart item ids 기준 quote 계산 | available |
| Recommendation Service | cart 기반 추천 섹션 계산 | available |
| Checkout Creation | cart item selection → checkout 생성 | available |
makitt-web (셀러 어드민 UI)
| 기능 | 설명 | Status |
|---|---|---|
| N/A | 고객 storefront용 cart 섹션 | N/A |
makitt-shop (HCS 렌더링)
| 항목 | 설명 | Status |
|---|---|---|
cart.cart resource | 장바구니 전체 조회 | available |
cart.quote resource | 선택된 cart item ids 기준 summary 계산 | available |
cart.recommendations resource | 추천 섹션 조회 | available |
cart.update action | 수량/배송 정책 갱신 | available |
cart.remove action | cart item 삭제 | available |
checkout.create action | selected cart items 기준 checkout 생성 | available |
checkbox-group + form binding | 선택된 cart item ids 배열 관리 | available |
navigate | checkoutId query 포함 이동 | available |
HCS Conversion Notes
- selection state는 local state 대신
form.values.selectedCartItemIds를 source of truth로 사용 - summary는
cart.quoteresource를 form subtree 안에 두어 선택 변경 시 다시 계산되게 구성 - recommendation 섹션은
cart.recommendations+ localrecoTabstate로 활성 탭만 표시 - shipping selector는
select의change -> cart.update로 바로 서버를 source of truth로 사용 - React 원본의 option-change modal / recommendation option modal은 아직 asset에 그대로 옮기지 않았음