MAKITTDocs

Expert Endorsement

docs/hcs-asset/expert-endorsement.md


id: 'expert-endorsement' status: in-progress

Expert Endorsement

Reference

  • URL: https://biodance.com/pages/more-than-hype
  • 위치: 페이지 하단부 — "Brand Advisors" 섹션 (Section 4~7)
  • 구조: 섹션 제목/부제 → 전폭 단체 사진 (둥근 모서리) → 3컬럼 카드 그리드 (직함, 이름, 인용문, 약력)
  • 디자인: 다크 회색 배경 사진, 연한 회색 (#f5f5f5) 카드, serif 이름 타이포그래피

React Component

  • Path: apps/makitt-standard-commerce/src/components/assets/expert-endorsement/
  • Status: implemented
  • 반응형: 데스크톱 3컬럼 카드 → 모바일 1컬럼 스택
  • i18n: ko, en, ja
  • Props: sectionTitle, sectionSubtitle, groupImageUrl, experts[] (title, name, quote, bio), ctaText, ctaLink

Prerequisites

makitt-server (shop-api)

APIMethodEndpointStatus
N/A (정적 콘텐츠)

makitt-server (admin-api)

APIMethodEndpointStatus
N/A (정적 콘텐츠)

makitt-server (도메인/모델링)

항목내용Status
정적 콘텐츠이므로 도메인 모델 불필요N/A

makitt-web (셀러 어드민 UI)

기능설명Status
정적 콘텐츠이므로 어드민 UI 불필요N/A

makitt-shop (HCS 렌더링)

항목설명Status
section renderer섹션 컨테이너available
container renderer레이아웃/카드 컨테이너available
heading renderer제목, 전문가 이름available
text renderer직함, 인용문, 약력available
image renderer단체 사진available

HCS Conversion Notes

  • 3개 카드가 반복 패턴이지만 각각 고유 콘텐츠이므로 repeat 바인딩 대신 개별 노드로 생성
  • 향후 동적 데이터 연동 시 data-list + repeat로 전환 가능
  • 단체 사진의 borderRadius: 30px (모바일 16px)은 레퍼런스 원본 그대로 적용
  • 카드 배경색 #f5f5f5는 디자인 토큰 $colors.neutral.100으로 대체 가능