MAKITTDocs

Brand Hero Parallax

docs/hcs-asset/brand-hero-parallax.md

id: 'brand-hero-parallax' status: in-progress

Brand Hero Parallax

Reference

  • URL: https://dalba.com/
  • 위치: 홈페이지 최상단 히어로 섹션 (above the fold + scroll)
  • 구조: 3-layer CSS parallax
    • L1: position: fixed 배경 이미지 (모델 + 골드 배경)
    • L2: position: sticky 브랜드 로고 (2x viewport 높이 스크롤 영역)
    • L3: 일반 플로우 제품 쇼케이스 (좌텍스트 + 중앙 제품 + 우텍스트)
  • 기술: GSAP + ScrollTrigger 로드되어 있으나 히어로 자체는 순수 CSS parallax
  • Screenshot: /tmp/pw-script/dalba-frame-*.png

React Component

  • Path: apps/makitt-standard-commerce/src/components/assets/brand-hero-parallax/
  • Status: implemented
  • 반응형: 데스크탑 3컬럼 flex → 모바일 column-reverse (제품 위, 텍스트 아래)
  • i18n: ko, en, ja
  • 애니메이션: IntersectionObserver 기반 fade-in-up (제품 섹션)

Prerequisites

makitt-server (shop-api)

고객 대면 API. 이 에셋은 정적 히어로이므로 별도 API 불필요.

APIMethodEndpointStatus
(없음)--N/A

makitt-server (admin-api)

APIMethodEndpointStatus
(없음)--N/A

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

항목내용Status
(없음)정적 에셋, 도메인 모델 불필요N/A

makitt-web (셀러 어드민 UI)

기능설명Status
(없음)정적 에셋N/A

makitt-shop (HCS 렌더링)

항목설명Status
section renderer루트 섹션available
container renderer레이어/래퍼available
image renderer배경/로고/제품 이미지available
heading renderer제품명 텍스트available
text renderer서브타이틀 텍스트available
link rendererCTA 링크available

HCS Conversion Notes

  • position: fixed와 position: sticky가 HCS CSS에서 정상 작동하는지 확인 필요
  • 3-layer parallax 구조를 TreeNode 중첩으로 표현
    • L1: container (fixed, z-index: 0) → image
    • L2: container (relative, height: 200vh) → container (sticky, top: 80px) → image (logo)
    • L3: section (relative, z-index: 2, bg: white) → 3-column flex
  • 모바일: @media (max-width: 768px) 쿼리로 column-reverse 전환
  • IntersectionObserver fade-in 애니메이션은 HCS에서 표현 불가 → 정적 렌더링
  • CTA 링크는 navigate action 또는 link type 사용