Lumenstate

상세 레시피

완성된 코드에서 거꾸로 읽어 낸 조립 과정입니다. 단계마다 어떤 데이터와 이미지, 컴퍼넌트를 조합했는지 보여 줍니다.

1. 01

   제품과 문구, 두 벌의 테마 준비

   화면에 들어갈 내용과 색을 컴포넌트 밖에서 먼저 정리합니다.

   데이터

   products, productAssets, content, defaultTheme, darkTheme

   이미지

   제품 낮·밤 사진 40장, 히어로와 STUDIO 장면의 낮·밤 사진

   결과

   화면을 만들기 전에 제품 20종의 정보와 사진, 브랜드 문구, 낮·밤 테마가 준비됩니다.

2. 02

   시각 하나로 낮과 밤 바꾸기

   시각 값을 전역에 두고 사진과 테마, 하단 컨트롤이 그 값을 함께 쓰게 합니다.

   데이터

   defaultTheme, darkTheme

   컴퍼넌트

   TimelineProvider, TimeBlendImage, FloatingTimeline, LumenstateShell

   결과

   하단 알약에서 시각을 고르면 배경과 글자색, 사진이 함께 낮에서 밤으로 바뀝니다.

3. 03

   하루를 보여 주는 브랜드 섹션

   브랜드 문구와 장면 사진을 히어로, STUDIO 선언문, 스튜디오 파노라마로 엮습니다.

   데이터

   content, products

   이미지

   히어로 무드보드 낮·밤 사진, STUDIO 장면 낮·밤 사진, 자정부터 정오까지 이어진 스튜디오 파노라마

   컴퍼넌트

   HeroSection, StudioStatementScene, BrandValueSection, ElevationSection

   결과

   스크롤을 내리면 낮의 집에서 밤의 스튜디오로, 이어서 자정부터 정오까지의 파노라마로 하루가 지나갑니다.

4. 04

   시각을 따르는 제품 컬렉션

   제품 데이터와 사진 쌍을 카드와 필터 그리드로 묶고, 카드에서 상세 사진으로 이어지는 전환을 붙입니다.

   데이터

   products, content

   이미지

   제품 낮·밤 사진 40장

   컴퍼넌트

   ProductCard, ProductGallery, useSharedElement, ProductImageViewer

   결과

   고른 시각의 빛으로 제품 20종이 보이고, 카드를 누르면 그 사진이 상세 화면의 큰 사진 자리로 이어집니다.

5. 05

   상세에서 장바구니, 체크아웃까지

   주소의 제품 id로 상세 화면을 만들고 옵션 선택, 장바구니, 체크아웃을 잇습니다.

   데이터

   products

   컴퍼넌트

   CartProvider, ProductDetailTemplate, ProductDetailRoute, CheckoutSection

   결과

   옵션을 골라 담은 제품이 새로고침 뒤에도 장바구니에 남고, 체크아웃 화면에서 주문 요약으로 보입니다.

6. 06

   랜딩과 앱 조립

   브랜드 섹션과 컬렉션을 한 페이지로 잇고, 앱 전체를 시각과 장바구니, 전환 상태로 감쌉니다.

   컴퍼넌트

   LandingPage, App

   결과

   히어로와 파노라마를 지나 컬렉션에 닿으면 방문자가 직접 시각을 고르는 하단 타임라인이 나타납니다.