MAKITTDocs

Featured Collection Shelf

docs/hcs-asset/featured-collection-shelf.md

id: 'featured-collection-shelf' status: completed

Featured Collection Shelf

Reference

  • URL: Biodance 메인 페이지의 OUR TOP SHELF 섹션 계열
  • 구조: 가운데 정렬된 타이틀 + 2개 컬렉션 탭 + 4-up 상품 shelf
  • 시각 방향: standard-commerce의 흰 배경, 얇은 타이포, 정사각형 상품 프레임

React Component

  • Path: makitt-client/apps/makitt-standard-commerce/src/components/assets/featured-collection-shelf/
  • Status: implemented
  • Grouping:
    • uiKit: standard-commerce
    • shopComponentGroup: product
    • shopComponentType: featured-collection-shelf
  • Data strategy:
    • 컬렉션 단건 2개를 먼저 읽어서 탭 메타 구성
    • 활성 탭이 바뀔 때 해당 컬렉션의 상품 목록만 다시 조회

HCS JSON Asset

  • Path: makitt-client/apps/builder/data/hcs-asset/featured-collection-shelf.json
  • Status: implemented
  • Explicit metadata:
    • uiKit: standard-commerce
    • shopComponentGroup: product
    • shopComponentType: featured-collection-shelf
  • Resource binding:
    • collection.collection — primary tab label
    • collection.collection — secondary tab label
    • collection.products — 활성 컬렉션 상품 목록
  • State strategy:
    • url.query.activeCollectionId를 탭 상태 저장소로 사용
    • query가 없으면 primary collection을 기본값으로 사용

Resource Registry

  • Package: @makitt/api
  • Keys:
    • collection.collection
    • collection.products
  • Fetcher:
    • collectionApi.detail()
    • collectionApi.products()

Prerequisites

makitt-server (shop-api)

APIMethodEndpointStatus
컬렉션 단건GET/shop/{shopId}/collections/{collectionId}available
컬렉션 상품 목록GET/shop/{shopId}/collections/{collectionId}/productsavailable

@makitt/api (리소스 레지스트리)

항목설명Status
collection.collection컬렉션 상세 리소스available
collection.products컬렉션 상품 목록 리소스available

makitt-shop (HCS 렌더링)

항목설명Status
navigate action탭 전환 시 query 업데이트available
link renderer상품 카드 이동available
repeat binding상품 카드 반복 렌더available

HCS Conversion Notes

  • React asset은 내부 state로 active tab을 관리하지만, HCS 버전은 query 기반으로 단순화했다.
  • 로컬 HCS asset에는 현재 shop 기준 primary/secondary collection id를 명시적으로 넣었다.
    • 8c45a175-f355-4c7c-b484-14f7ea40d060
    • d4f37792-f557-4383-b7f5-726589c49ef9
  • builder에서 다른 컬렉션으로 바꾸고 싶으면 각 tab node의 collection.collection params와 navigate.query.activeCollectionId를 함께 수정하면 된다.