import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { BookOpen, Clock, Users, ArrowRight, X, ShoppingBag, Plus, Minus, Calendar, CheckCircle2, Mail, Sparkles, ChevronRight, Star, Heart, BookMarked } from 'lucide-react'; interface Book { id: number; title: string; author: string; price: number; coverColor: string; description: string; pages: number; category: string; featured?: boolean; } interface BookClubEvent { id: number; title: string; date: string; time: string; location: string; book: string; participants: number; maxParticipants: number; } const books: Book[] = [ { id: 1, title: '한밤의 정원사', author: '이수진', price: 16800, coverColor: 'bg-[#2D4A3E]', description: '도시의 밤, 작은 정원에서 벌어지는 기적 같은 이야기. 식물과 사람의 교감을 따뜻하게 그려낸 소설.', pages: 352, category: '소설' }, { id: 2, title: '종이의 온도', author: '김민서', price: 14500, coverColor: 'bg-[#7A3B2E]', description: '인쇄소에서 일하는 여성의 시선으로 바라본 세상. 종이에 스며드는 감정과 삶의 기록.', pages: 288, category: '에세이' }, { id: 3, title: '바람이 머무는 곳', author: '박지훈', price: 15200, coverColor: 'bg-[#8B7355]', description: '제주도의 오래된 돌담집에서 시작되는 세대를 넘는 이야기. 기억과 상실에 관한 서정적 산문.', pages: 320, category: '소설' }, { id: 4, title: '별을 읽는 밤', author: '최은영', price: 17800, coverColor: 'bg-[#3E5C76]', description: '천문학자와 시인이 함께 쓴 우주 에세이. 별빛 아래에서 발견하는 인간의 작은 위로.', pages: 416, category: '에세이' }, { id: 5, title: '정원의 시간', author: '윤서연', price: 13900, coverColor: 'bg-[#6B8E23]', description: '사계절을 담은 정원 일기. 씨앗을 심고 꽃을 피우는 과정에서 배우는 인생의 지혜.', pages: 264, category: '라이프스타일' }, { id: 6, title: '물결의 노래', author: '정하늘', price: 16200, coverColor: 'bg-[#2E86AB]', description: '바닷가 마을에서 펼쳐지는 두 자매의 성장 이야기. 파도 소리에 실린 기억과 화해.', pages: 384, category: '소설' }, { id: 7, title: '책장 사이의 여행', author: '강보라', price: 15800, coverColor: 'bg-[#C17A74]', description: '전 세계의 독특한 서점을 찾아 떠나는 기록. 책과 공간, 사람이 만나는 순간들.', pages: 296, category: '여행' }, { id: 8, title: '겨울의 시', author: '이상미', price: 12800, coverColor: 'bg-[#4A6B8A]', description: '겨울을 배경으로 한 시 모음집. 차가운 계절에 따뜻한 언어로 건네는 위로의 문장들.', pages: 208, category: '시' } ]; const bookClubEvents: BookClubEvent[] = [ { id: 1, title: '이달의 북클럽: 한밤의 정원사', date: '2025-02-15', time: '19:00', location: '2층 북클럽룸', book: '한밤의 정원사', participants: 8, maxParticipants: 12 }, { id: 2, title: '에세이 쓰기 워크숍', date: '2025-02-22', time: '14:00', location: '1층 카페', book: '나의 첫 에세이', participants: 5, maxParticipants: 10 }, { id: 3, title: '시 낭독의 밤', date: '2025-03-01', time: '18:30', location: '2층 테라스', book: '겨울의 시', participants: 10, maxParticipants: 15 }, { id: 4, title: '북커버 디자인 클래스', date: '2025-03-08', time: '15:00', location: '1층 워크숍룸', book: '디자인의 언어', participants: 3, maxParticipants: 8 } ]; const fadeInUp = { initial: { opacity: 0, y: 30 }, whileInView: { opacity: 1, y: 0 }, viewport: { once: true, margin: '-100px' }, transition: { duration: 0.6, ease: 'easeOut' } }; const staggerContainer = { initial: {}, whileInView: { transition: { staggerChildren: 0.1 } }, viewport: { once: true, margin: '-100px' } }; export default function App() { const [selectedBook, setSelectedBook] = useState(null); const [cartCount, setCartCount] = useState(0); const [email, setEmail] = useState(''); const [subscribed, setSubscribed] = useState(false); const [activeSection, setActiveSection] = useState('home'); const [isScrolled, setIsScrolled] = useState(false); const [cartItems, setCartItems] = useState<{ book: Book; qty: number }[]>([]); const [showCart, setShowCart] = useState(false); useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 50); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); const addToCart = useCallback((book: Book) => { setCartItems(prev => { const existing = prev.find(item => item.book.id === book.id); if (existing) { return prev.map(item => item.book.id === book.id ? { ...item, qty: item.qty + 1 } : item ); } return [...prev, { book, qty: 1 }]; }); setCartCount(prev => prev + 1); }, []); const removeFromCart = useCallback((bookId: number) => { setCartItems(prev => { const existing = prev.find(item => item.book.id === bookId); if (existing && existing.qty > 1) { return prev.map(item => item.book.id === bookId ? { ...item, qty: item.qty - 1 } : item ); } return prev.filter(item => item.book.id !== bookId); }); setCartCount(prev => Math.max(0, prev - 1)); }, []); const toggleCart = useCallback(() => { setShowCart(prev => !prev); }, []); const handleSubscribe = useCallback((e: React.FormEvent) => { e.preventDefault(); if (email.trim()) { setSubscribed(true); setEmail(''); setTimeout(() => setSubscribed(false), 3000); } }, [email]); const totalPrice = useMemo(() => { return cartItems.reduce((sum, item) => sum + (item.book.price * item.qty), 0); }, [cartItems]); const featuredBook = books.find(book => book.id === 1); return (

{/* Background texture */}

{/* Header */}

책숲

독립서점 & 북클럽

{['home', 'books', 'bookclub', 'schedule', 'contact'].map((item) => ( ))}

{/* Cart Drawer */} {showCart && ( e.stopPropagation()} >

장바구니

{cartItems.length === 0 ? (

장바구니가 비어있어요

마음에 드는 책을 담아보세요

) : ( <>

{cartItems.map((item) => (

{item.book.title}

{item.book.author}

{item.qty}

{(item.book.price * item.qty).toLocaleString()}원

))}

합계 {totalPrice.toLocaleString()}원

)}

)} {/* Hero Section */}

2025년 2월의 북클럽

책이 머무는
따뜻한 공간

마음에 드는 책을 고르고, 함께 읽고, 이야기 나누는 곳. 책숲에서 당신의 다음 책과 만나보세요.

오늘의 책

{featuredBook?.title}

{featuredBook?.author}

{/* Books Section */}

Curation

큐레이션된 도서

책숲이 엄선한 이달의 추천 도서입니다.

{books.map((book) => ( setSelectedBook(book)} whileHover={{ y: -8 }} whileTap={{ scale: 0.98 }} className="group text-left" >

상세보기

{book.category}

{book.title}

{book.author}

{book.price.toLocaleString()}원

))}

{/* Book Club Highlight */}

이달의 북클럽

함께 읽으면
두 배로 깊어지는
이야기

이달의 북클럽 도서는 {featuredBook?.title}입니다. {featuredBook?.description}

매주 토요일

오후 3시 - 5시

최대 12명

소규모 모임

이달의 책

{featuredBook?.title}

{featuredBook?.author}

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

독자 평점 4.8 / 5.0

{/* Schedule Section */}

Schedule

독서 모임 일정

함께 읽고 나누는 시간, 지금 예약하세요.

{bookClubEvents.map((event, index) => (

{new Date(event.date).toLocaleDateString('ko-KR', { month: 'long', day: 'numeric', weekday: 'long' })}

{event.title}

{event.book}

{event.time} {event.location}

{[...Array(Math.min(3, event.participants))].map((_, i) => (

{String.fromCharCode(65 + i)}

))}

{event.participants}/{event.maxParticipants}명

))}

{/* Newsletter Section */}

새 책 소식을 받아보세요

매주 새로운 책과 북클럽 소식을 메일로 보내드립니다.
구독은 언제든 해지할 수 있어요.

{subscribed && ( 구독이 완료되었습니다. 감사합니다! )}

{/* Footer */} {/* Book Detail Modal */} {selectedBook && ( setSelectedBook(null)} > e.stopPropagation()} >

{selectedBook.category}

{selectedBook.title}

{selectedBook.category}

{selectedBook.title}

{selectedBook.author}

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

4.8

{selectedBook.author}

{selectedBook.description}

{selectedBook.pages}쪽 예상 독서 시간 4시간

가격

{selectedBook.price.toLocaleString()} 원

)}

); }

장바구니

책이 머무는 따뜻한 공간

큐레이션된 도서

{book.title}

함께 읽으면 두 배로 깊어지는 이야기

{featuredBook?.title}

독서 모임 일정

{event.title}

새 책 소식을 받아보세요

{selectedBook.title}

{selectedBook.title}

책이 머무는
따뜻한 공간

함께 읽으면
두 배로 깊어지는
이야기

チェクスプ