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.quote summary
- 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.quote resource를 form subtree 안에 두어 선택 변경 시 다시 계산되게 구성
recommendation 섹션은 cart.recommendations + local recoTab state로 활성 탭만 표시
shipping selector는 select의 change -> cart.update로 바로 서버를 source of truth로 사용
React 원본의 option-change modal / recommendation option modal은 아직 asset에 그대로 옮기지 않았음