MAKITTDocs

Brand Hero

docs/hcs-asset/brand-hero.md

id: 'brand-hero' status: completed

Brand Hero

Reference

  • URL: Biodance More than hype 계열의 브랜드 소개 히어로
  • 구조: 왼쪽 카피 + 가치 제안 리스트, 오른쪽 원형 비주얼
  • 시각 방향: standard-commerce의 흰 배경, 검은 타이포, 연한 회색 디바이더

React Component

  • Path: makitt-client/apps/makitt-standard-commerce/src/components/assets/brand-hero/
  • Status: implemented
  • Grouping:
    • uiKit: standard-commerce
    • shopComponentGroup: brand
    • shopComponentType: brand-hero
  • Content strategy:
    • 정적 카피와 아이콘 리스트
    • CDN 업로드 이미지 사용

HCS JSON Asset

  • Path: makitt-client/apps/builder/data/hcs-asset/brand-hero.json
  • Status: implemented
  • Explicit metadata:
    • uiKit: standard-commerce
    • shopComponentGroup: brand
    • shopComponentType: brand-hero
  • Resource binding:
    • 없음
  • Content strategy:
    • HCS asset 자체에 정적 카피와 이미지 URL 포함
    • 아이콘은 icon renderer로 구성

Prerequisites

makitt-server (shop-api)

APIMethodEndpointStatus
없음--available

makitt-web (셀러 어드민 UI)

기능설명Status
없음정적 섹션available

makitt-shop (HCS 렌더링)

항목설명Status
container레이아웃 구성available
text / heading카피 표현available
image원형 비주얼available
icon가치 제안 리스트 아이콘available

HCS Conversion Notes

  • React asset의 useIsMobile 분기와 유사하게 HCS에서도 2열 → 1열 전환을 CSS로 반영했다.
  • 아이콘 라인은 Leaf, Rabbit, FlaskConical, ShieldCheck를 사용해 정적 가치 제안 리스트로 구성했다.
  • 이미지 URL은 생성 후 업로드한 dev CDN 경로를 사용한다.