← 갤러리로 돌아가기홈페이지쇼핑몰패션
이 앱은 데모 페이지에서 로그인 없이 바로 체험할 수 있어요. 아래 버튼으로 이동해서 더미 데이터로 주요 기능을 눌러보세요.
데모 보러 가기🛠️ 개발 가이드
패션 편집숍을 위한 미니멀 쇼핑몰 홈페이지 데모예요. "장바구니 담기"를 누르면 실제 결제 없이 토스트 메시지만 보여줘요.
핵심 구현 포인트
- 상품 배열 하나로 카드 그리드를 만들고, BEST/NEW 배지는 태그 필드 값에 따라 조건부로 렌더링해요.
- 장바구니 담기 버튼은 setTimeout으로 잠깐 떴다 사라지는 토스트 알림만 보여주는 로컬 상태예요 — 실제 장바구니 데이터는 없어요.
- 흑백 위주의 미니멀 팔레트로 패션 브랜드다운 톤을 만들었어요.
이렇게 만들면 돼요
- 상품 데이터를 이름·가격·배지 필드로 정의해요.
- 상품 그리드를 map()으로 렌더링하고 각 카드에 담기 버튼을 붙여요.
- 담기 버튼 클릭 시 토스트를 보여주는 boolean state를 만들고 setTimeout으로 자동으로 꺼지게 해요.
참고 파일
components/gallery/ShopLandingDemo.jsx