import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Search, ShoppingBag, Star, X, Minus, Plus, Sparkles, Heart, Leaf, Check, ArrowRight, Menu, Bell } from 'lucide-react'; const products = [ { id: 1, name: '히알루론산 토너', price: 28000, category: '토너', rating: 4.8, reviews: 128, gradient: 'from-pink-300 via-rose-200 to-orange-200', tags: ['저자극', '수분충전', '무향료'], desc: '3중 히알루론산이 피부 속까지 촉촉하게 채워주는 약산성 토너입니다.' }, { id: 2, name: '판테놀 진정 세럼', price: 34000, category: '세럼', rating: 4.9, reviews: 342, gradient: 'from-emerald-300 via-teal-200 to-emerald-200', tags: ['진정', '비건', '민감성'], desc: '판테놀 10%가 민감한 피부를 진정시키고 보호막을 강화해줍니다.' }, { id: 3, name: '콜라겐 아이크림', price: 39000, category: '크림', rating: 4.7, reviews: 89, gradient: 'from-violet-300 via-purple-200 to-violet-200', tags: ['탄력', '영양', '눈가케어'], desc: '저분자 콜라겐이 눈가 주름을 탄탄하게 케어해주는 아이크림입니다.' }, { id: 4, name: '병풀 수딩 크림', price: 32000, category: '크림', rating: 4.8, reviews: 215, gradient: 'from-sky-300 via-blue-200 to-cyan-200', tags: ['수딩', '비건', '수분장벽'], desc: '병풀 추출물이 자극받은 피부를 편안하게 케어해주는 수딩 크림입니다.' }, { id: 5, name: '비타민C 앰플', price: 45000, category: '세럼', rating: 4.9, reviews: 456, gradient: 'from-amber-300 via-yellow-200 to-orange-200', tags: ['미백', '항산화', '광채'], desc: '순수 비타민C 15%가 칙칙한 피부에 환한 광채를 더해줍니다.' }, { id: 6, name: '약산성 클렌징폼', price: 18000, category: '클렌저', rating: 4.6, reviews: 178, gradient: 'from-rose-300 via-pink-200 to-fuchsia-200', tags: ['약산성', '저자극', '풍부거품'], desc: '풍부하고 촘촘한 거품이 노폐물을 부드럽게 세정해주는 클렌징폼입니다.' }, { id: 7, name: '무기자차 선크림', price: 29000, category: '선크림', rating: 4.7, reviews: 234, gradient: 'from-indigo-300 via-blue-200 to-sky-200', tags: ['무기자차', '민감성', '백탁없음'], desc: '백탁 없이 산뜻하게 발리는 무기자차 선크림입니다.' }, { id: 8, name: '세라마이드 보습크림', price: 36000, category: '크림', rating: 4.8, reviews: 167, gradient: 'from-emerald-300 via-green-200 to-lime-200', tags: ['보습', '장벽강화', '건성'], desc: '세라마이드가 건조한 피부에 깊은 보습을 채워주는 크림입니다.' }, { id: 9, name: '그린티 시카 토너', price: 26000, category: '토너', rating: 4.5, reviews: 98, gradient: 'from-green-300 via-teal-200 to-emerald-200', tags: ['시카', '수분', '모공'], desc: '그린티와 시카 성분이 모공을 정돈하고 피부를 매끄럽게 케어합니다.' }, { id: 10, name: '비건 클렌징오일', price: 31000, category: '클렌저', rating: 4.7, reviews: 145, gradient: 'from-orange-300 via-amber-200 to-yellow-200', tags: ['비건', '딥클렌징', '워터리'], desc: '메이크업까지 부드럽게 녹여주는 워터리 텍스처의 클렌징오일입니다.' }, { id: 11, name: '아쿠아 선에센스', price: 27000, category: '선크림', rating: 4.6, reviews: 123, gradient: 'from-cyan-300 via-sky-200 to-blue-200', tags: ['에센스형', '보습', '가벼움'], desc: '에센스처럼 가볍게 발리는 촉촉한 선에센스입니다.' }, { id: 12, name: '레티놀 나이트 세럼', price: 42000, category: '세럼', rating: 4.4, reviews: 87, gradient: 'from-fuchsia-300 via-pink-200 to-rose-200', tags: ['레티놀', '탄력', '주름'], desc: '피부 탄력과 주름 개선을 돕는 레티놀 나이트 세럼입니다.' }, ]; const reviews = [ { name: '김수연', rating: 5, text: '피부가 진짜 진정되는 느낌이에요! 민감성인데 자극 하나 없이 촉촉하게 케어돼요. 재구매 의사 200%입니다!', product: '판테놀 진정 세럼', initial: '김', gradient: 'from-pink-300 to-rose-200' }, { name: '이지현', rating: 5, text: '비타민C 앰플 쓰고 피부에 광이 확 살아났어요. 쿠션 팩트 없이도 피부가 환해졌어요!', product: '비타민C 앰플', initial: '이', gradient: 'from-amber-300 to-orange-200' }, { name: '박민준', rating: 4, text: '무기자차인데 백탁이 전혀 없어서 너무 좋아요. 발림성도 가볍고 유분기도 적당해서 매일 쓰고 있어요.', product: '무기자차 선크림', initial: '박', gradient: 'from-sky-300 to-blue-200' }, ]; const categories = ['전체', '토너', '세럼', '크림', '클렌저', '선크림']; function App() { const [cartCount, setCartCount] = useState(0); const [selectedCategory, setSelectedCategory] = useState('전체'); const [selectedProduct, setSelectedProduct] = useState(null); const [quantity, setQuantity] = useState(1); const [toast, setToast] = useState(null); const [email, setEmail] = useState(''); const [subscribed, setSubscribed] = useState(false); const [searchOpen, setSearchOpen] = useState(false); const [searchTerm, setSearchTerm] = useState(''); const [mobileMenu, setMobileMenu] = useState(false); const filteredProducts = useMemo(() => { if (selectedCategory === '전체') return products; return products.filter(p => p.category === selectedCategory); }, [selectedCategory]); const filteredSearch = useMemo(() => { if (!searchTerm) return filteredProducts; return filteredProducts.filter(p => p.name.includes(searchTerm)); }, [filteredProducts, searchTerm]); const addToCart = useCallback((product, qty = 1) => { setCartCount(prev => prev + qty); setToast(`${product.name} ${qty}개가 장바구니에 추가되었습니다!`); setTimeout(() => setToast(null), 3000); }, []); const openModal = (product) => { setSelectedProduct(product); setQuantity(1); }; const closeModal = () => { setSelectedProduct(null); }; const handleSubscribe = (e) => { e.preventDefault(); if (email && email.includes('@')) { setSubscribed(true); setEmail(''); setTimeout(() => setSubscribed(false), 3000); } }; const scrollToSection = (id) => { document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' }); }; return (

{/* 배경 블롭 */}

{/* 토스트 */} {toast && ( {toast} )} {/* 네비게이션 */}

scrollToSection('hero')}>

글로우랩

GlowLab

{['신상품', '베스트', '스킨케어', '클렌징', '이벤트'].map((item) => ( scrollToSection(item === '베스트' ? 'reviews' : 'products')} > {item} ))}

setSearchOpen(!searchOpen)} > {cartCount > 0 && ( {cartCount} )}

{searchOpen && (

setSearchTerm(e.target.value)} placeholder="제품을 검색해보세요..." className="w-full p-3 rounded-2xl bg-gray-50 border border-gray-100 focus:outline-none focus:ring-2 focus:ring-pink-300" />

)} {mobileMenu && (

{['신상품', '베스트', '스킨케어', '클렌징', '이벤트'].map((item) => ( ))}

)}

{/* 히어로 섹션 */}

2024년 신제품 출시 당신의 피부에 맞는 완벽한 케어 피부 고민에 맞는 맞춤형 스킨케어 솔루션.
글로우랩이 당신의 일상 속 작은 변화를 시작합니다. scrollToSection('products')} className="px-8 py-4 rounded-full bg-gradient-to-r from-pink-500 to-rose-500 text-white font-bold shadow-[8px_8px_20px_rgba(244,63,94,0.3),-4px_-4px_12px_rgba(255,255,255,0.9)] hover:shadow-[12px_12px_25px_rgba(244,63,94,0.4),-4px_-4px_12px_rgba(255,255,255,0.9)] transition-shadow" > 지금 쇼핑하기 브랜드 스토리

50K+

행복한 고객님

98%

재구매율

120+

프리미엄 제품

{/* 필터 칩 */}

{categories.map((cat) => ( setSelectedCategory(cat)} className={`px-6 py-3 rounded-full font-medium transition-all ${ selectedCategory === cat ? 'bg-gradient-to-r from-pink-500 to-rose-500 text-white shadow-[6px_6px_12px_rgba(244,63,94,0.3),-3px_-3px_8px_rgba(255,255,255,0.9)]' : 'bg-white/80 text-gray-600 shadow-[4px_4px_10px_rgba(0,0,0,0.06),-4px_-4px_10px_rgba(255,255,255,0.9)]' }`} > {cat} ))}

{/* 상품 그리드 */} {filteredSearch.map((product) => ( openModal(product)} >

{product.category}

{product.name}

{product.rating} ({product.reviews})

{product.price.toLocaleString()}원

{ e.stopPropagation(); addToCart(product); }} className="px-4 py-2 rounded-full bg-gradient-to-r from-pink-500 to-rose-500 text-white text-sm font-medium shadow-[4px_4px_10px_rgba(244,63,94,0.3),-2px_-2px_6px_rgba(255,255,255,0.9)]" > 담기

))}

{/* 베스트 리뷰 */}

베스트 리뷰

고객님들의 진솔한 이야기를 들어보세요

{reviews.map((review, index) => (

{review.initial}

{review.name}

{[...Array(5)].map((_, i) => ( ))}

{review.text}

{review.product} 구매

))}

{/* 뉴스레터 */}

글로우랩 소식 받아보기

신제품 출시와 특별 할인 소식을 가장 먼저 받아보세요

{subscribed && (

구독이 완료되었습니다! 감사합니다.

)}

{/* 푸터 */} {/* 상품 상세 모달 */} {selectedProduct && ( e.stopPropagation()} className="bg-white/95 backdrop-blur-xl rounded-[2rem] p-6 sm:p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-[12px_12px_30px_rgba(0,0,0,0.2)]" >

{selectedProduct.tags.map((tag) => ( {tag} ))}

{selectedProduct.name}

{selectedProduct.desc}

{[...Array(5)].map((_, i) => ( ))}

({selectedProduct.rating}) 리뷰 {selectedProduct.reviews}개

{quantity}

{(selectedProduct.price * quantity).toLocaleString()}원

{ addToCart(selectedProduct, quantity); closeModal(); }} className="w-full py-4 rounded-full bg-gradient-to-r from-pink-500 to-rose-500 text-white font-bold text-lg shadow-[6px_6px_15px_rgba(244,63,94,0.3),-3px_-3px_8px_rgba(255,255,255,0.9)]" > 장바구니 담기 )}

); } export default App;