import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Sparkles, Bot, Zap, ArrowRight, Shield, Calendar, Clock, User, Check, X, Plus, Minus, ChevronLeft, ChevronRight, Star, Heart, Activity, Flame, Award, BookOpen, Dumbbell, Music, Sun, Moon, Coffee, Home, Settings, LogOut, Bell, Search, Menu, ChevronDown, Filter, Grid, List, MapPin, Phone, Mail, Instagram, Youtube, Facebook, Twitter, Linkedin, Github, Globe, ExternalLink, Eye, EyeOff, Lock, Unlock, KeyRound, CreditCard, Wallet, BadgeCheck, Crown, Gem, Diamond, CircleDollarSign, TrendingUp, TrendingDown, BarChart3, PieChart, LineChart, AreaChart, Radar, ScatterChart, Table2, Rows3, Columns3, LayoutGrid, LayoutList, LayoutDashboard, LayoutPanelTop, LayoutPanelLeft, LayoutPanelRight, LayoutPanelBottom, PanelTop, PanelLeft, PanelRight, PanelBottom, Square, Circle, Triangle, Hexagon, Octagon, Pentagon, Star as StarIcon, Heart as HeartIcon, Zap as ZapIcon, Flame as FlameIcon, Droplet, Wind, Waves, Mountain, TreePine, Flower2, Leaf, Sprout, SunDim, MoonStar, CloudSun, CloudMoon, Cloudy, CloudRain, CloudSnow, CloudLightning, CloudFog, CloudDrizzle, CloudHail, CloudHaze, Tornado, Hurricane, Snowflake, Umbrella, Rainbow, Sunset, Sunrise, ThermometerSun, ThermometerSnowflake, Gauge, Compass, Navigation, Map, Route, Footprints, Bike, CarFront, BusFront, TrainFront, TramFront, Ship, Plane, Rocket, Satellite, Telescope, Microscope, Atom, Dna, Brain, HeartPulse, Stethoscope, Pill, Syringe, Bone, Muscle, PersonStanding, PersonStanding2, PersonStanding3, PersonStanding4, PersonStanding5, PersonStanding6, PersonStanding7, PersonStanding8, PersonStanding9, PersonStanding10, PersonStanding11, PersonStanding12, PersonStanding13, PersonStanding14, PersonStanding15, PersonStanding16, PersonStanding17, PersonStanding18, PersonStanding19, PersonStanding20, PersonStanding21, PersonStanding22, PersonStanding23, PersonStanding24, PersonStanding25, PersonStanding26, PersonStanding27, PersonStanding28, PersonStanding29, PersonStanding30 } from 'lucide-react'; export default function App() { const [activeView, setActiveView] = useState<'booking' | 'schedule'>('booking'); const [selectedDay, setSelectedDay] = useState(0); const [showModal, setShowModal] = useState(false); const [selectedClass, setSelectedClass] = useState(null); const [myClasses, setMyClasses] = useState([ { id: 1, name: '필라테스 기본반', instructor: '김수연', time: '09:00 - 10:00', day: '월', date: '12일', booked: true }, { id: 2, name: '스트레칭 클래스', instructor: '박지훈', time: '18:00 - 19:00', day: '수', date: '14일', booked: true } ]); const [showToast, setShowToast] = useState(false); const [showPricing, setShowPricing] = useState(false); const [selectedPlan, setSelectedPlan] = useState(null); const [credits, setCredits] = useState(8); const days = [ { day: '월', date: '12일', isToday: false }, { day: '화', date: '13일', isToday: true }, { day: '수', date: '14일', isToday: false }, { day: '목', date: '15일', isToday: false }, { day: '금', date: '16일', isToday: false }, { day: '토', date: '17일', isToday: false }, { day: '일', date: '18일', isToday: false } ]; const classes = [ { id: 1, name: '필라테스 기본반', instructor: '김수연', time: '09:00 - 10:00', day: '월', capacity: 12, booked: 8, level: '초급', color: 'from-violet-500 to-purple-600' }, { id: 2, name: '리포머 필라테스', instructor: '이하은', time: '10:30 - 11:30', day: '화', capacity: 8, booked: 6, level: '중급', color: 'from-emerald-500 to-teal-600' }, { id: 3, name: '요가 플로우', instructor: '박지훈', time: '12:00 - 13:00', day: '수', capacity: 15, booked: 10, level: '전체', color: 'from-pink-500 to-rose-600' }, { id: 4, name: '바디밸런스', instructor: '최민준', time: '14:00 - 15:00', day: '목', capacity: 10, booked: 4, level: '초급', color: 'from-amber-500 to-orange-600' }, { id: 5, name: '스트레칭 클래스', instructor: '정서연', time: '16:00 - 17:00', day: '금', capacity: 20, booked: 15, level: '전체', color: 'from-cyan-500 to-blue-600' }, { id: 6, name: '코어 필라테스', instructor: '김수연', time: '18:00 - 19:00', day: '토', capacity: 8, booked: 3, level: '중급', color: 'from-indigo-500 to-violet-600' }, { id: 7, name: '필라테스 기본반', instructor: '이하은', time: '09:00 - 10:00', day: '화', capacity: 12, booked: 5, level: '초급', color: 'from-violet-500 to-purple-600' }, { id: 8, name: '요가 플로우', instructor: '박지훈', time: '11:00 - 12:00', day: '목', capacity: 15, booked: 12, level: '전체', color: 'from-pink-500 to-rose-600' }, { id: 9, name: '바디밸런스', instructor: '최민준', time: '15:00 - 16:00', day: '금', capacity: 10, booked: 7, level: '초급', color: 'from-amber-500 to-orange-600' }, { id: 10, name: '리포머 필라테스', instructor: '김수연', time: '17:00 - 18:00', day: '토', capacity: 8, booked: 2, level: '중급', color: 'from-emerald-500 to-teal-600' }, { id: 11, name: '스트레칭 클래스', instructor: '정서연', time: '19:00 - 20:00', day: '일', capacity: 20, booked: 9, level: '전체', color: 'from-cyan-500 to-blue-600' }, { id: 12, name: '코어 필라테스', instructor: '이하은', time: '10:00 - 11:00', day: '월', capacity: 8, booked: 6, level: '중급', color: 'from-indigo-500 to-violet-600' } ]; const filteredClasses = classes.filter(c => { if (selectedDay === 0) return true; const dayMap = ['월', '화', '수', '목', '금', '토', '일']; return c.day === dayMap[selectedDay]; }); const handleBook = (cls: any) => { setSelectedClass(cls); setShowModal(true); }; const confirmBooking = () => { if (!selectedClass) return; const newClass = { ...selectedClass, booked: true, day: days[selectedDay].day, date: days[selectedDay].date }; setMyClasses([...myClasses, newClass]); setShowModal(false); setShowToast(true); setCredits(prev => Math.max(0, prev - 1)); setTimeout(() => setShowToast(false), 3000); }; const cancelBooking = (id: number) => { setMyClasses(myClasses.filter(c => c.id !== id)); setCredits(prev => prev + 1); }; const plans = [ { id: '10', name: '10회권', price: '150,000원', period: '3개월', perClass: '15,000원/회', popular: false }, { id: '20', name: '20회권', price: '270,000원', period: '6개월', perClass: '13,500원/회', popular: true }, { id: 'unlimited', name: '무제한권', price: '450,000원', period: '1개월', perClass: '무제한', popular: false } ]; return (

{/* Animated liquid glass blobs */}

{/* Main content */}

{/* Header */}

필라플로우

PilaFlow · 프리미엄 필라테스 스튜디오

{/* Main content area */} {activeView === 'booking' ? ( {/* Day picker */}

{days.map((d, idx) => ( ))}

{/* Class list */}

{filteredClasses.map((cls, idx) => (

{cls.level}

{cls.name}

{cls.instructor} 강사

{cls.time} · {cls.day}요일

정원 {cls.capacity}명 {cls.booked}명 예약중

))}

) : ( {/* Credits summary */}

{credits}

회 남음

남은 수강권

8회권 · 2025년 3월 15일까지

8회

총 8회 중 {8 - credits}회 사용

{/* Pricing panel */} {showPricing && (

{plans.map((plan) => ( ))}

)} {/* My schedule list */}

예약된 클래스

{myClasses.length === 0 ? (

아직 예약된 클래스가 없습니다.

클래스 예약 탭에서 예약해보세요!

) : ( myClasses.map((cls, idx) => (

{cls.name}

{cls.instructor} 강사 · {cls.time} · {cls.day}요일 {cls.date}

)) )}

)} {/* Footer */}

{/* Booking confirmation modal */} {showModal && selectedClass && (

setShowModal(false)} />

예약 확인

{selectedClass.name}

{selectedClass.instructor} 강사

{selectedClass.time}

{days[selectedDay].day}요일 {days[selectedDay].date}

)} {/* Success toast */} {showToast && (

예약이 완료되었습니다 )}

); }

Pilaflow