import React, { useState, useRef, useEffect } from 'react'; import { View, Text, TouchableOpacity, ScrollView, StyleSheet, SafeAreaView, Animated } from 'react-native'; import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons'; interface Pet { name: string; breed: string; emoji: string; color: string; } interface Service { name: string; price: number; duration: string; icon: keyof typeof MaterialCommunityIcons.glyphMap; } const pets: Pet[] = [ { name: '보리', breed: '골든리트리버', emoji: '🐶', color: '#fbcfe8' }, { name: '나비', breed: '코리안숏헤어', emoji: '🐱', color: '#ddd6fe' }, ]; const services: Service[] = [ { name: '기본 목욕', price: 25000, duration: '40분', icon: 'shower' }, { name: '풀 그루밍', price: 55000, duration: '90분', icon: 'content-cut' }, { name: '발톱 관리', price: 12000, duration: '15분', icon: 'paw' }, { name: '건강검진', price: 40000, duration: '30분', icon: 'stethoscope' }, ]; const days = ['월', '화', '수', '목', '금', '토', '일']; const times = ['10:00', '11:30', '13:00', '14:30', '16:00']; type Step = 'home' | 'services' | 'schedule' | 'confirm'; export default function App() { const [step, setStep] = useState('home'); const [pet, setPet] = useState(pets[0]); const [selectedServices, setSelectedServices] = useState([]); const [day, setDay] = useState(null); const [time, setTime] = useState(null); const bounce = useRef(new Animated.Value(0)).current; useEffect(() => { if (step === 'confirm') { bounce.setValue(0); Animated.spring(bounce, { toValue: 1, friction: 4, tension: 60, useNativeDriver: true }).start(); } }, [step]); const toggleService = (s: Service) => { setSelectedServices(prev => prev.find(x => x.name === s.name) ? prev.filter(x => x.name !== s.name) : [...prev, s]); }; const total = selectedServices.reduce((sum, s) => sum + s.price, 0); const reset = () => { setStep('home'); setSelectedServices([]); setDay(null); setTime(null); }; return ( {step === 'home' && ( 멍냥케어 우리 아이 맞춤 케어 내 반려동물 {pets.map(p => ( setPet(p)} style={{ marginRight: 12 }}> {p.emoji} {p.name} {p.breed} ))} 서비스 예약하기 setStep('services')}> {pet.name}의 케어 예약 목욕, 그루밍, 건강검진까지 )} {step === 'services' && ( setStep('home')} style={styles.backBtn}> 서비스 선택 {services.map(s => { const active = !!selectedServices.find(x => x.name === s.name); return ( toggleService(s)} style={[styles.serviceRow, active && styles.serviceRowActive]}> {s.name} {s.duration} ₩{s.price.toLocaleString()} {active && } ); })} {selectedServices.length > 0 && ( setStep('schedule')}> 다음 · 총 ₩{total.toLocaleString()} )} )} {step === 'schedule' && ( setStep('services')} style={styles.backBtn}> 날짜 & 시간 요일 선택 {days.map(d => ( setDay(d)} style={[styles.dayCell, day === d && styles.dayCellActive]}> {d} ))} 시간 선택 {times.map(t => ( setTime(t)} style={[styles.timeCell, time === t && styles.timeCellActive]}> {t} ))} {day && time && ( setStep('confirm')}> 예약 완료하기 )} )} {step === 'confirm' && ( 예약이 완료됐어요! 🎉 {pet.name} · {day}요일 {time} {selectedServices.map(s => ( {s.name} ₩{s.price.toLocaleString()} ))} 총 결제금액 ₩{total.toLocaleString()} 홈으로 )} ); } const styles = StyleSheet.create({ root: { flex: 1, backgroundColor: '#fdf2f8' }, brand: { fontSize: 24, fontWeight: '800', color: '#831843' }, brandSub: { fontSize: 12, color: '#be185d', marginTop: 2, marginBottom: 20 }, sectionTitle: { fontSize: 15, fontWeight: '800', color: '#831843', marginBottom: 10 }, petCard: { width: 130, borderRadius: 20, padding: 16, alignItems: 'center' }, petCardActive: { borderWidth: 3, borderColor: '#db2777' }, petEmoji: { fontSize: 36, marginBottom: 6 }, petName: { fontSize: 14, fontWeight: '800', color: '#4c1d95' }, petBreed: { fontSize: 11, color: '#6b21a8', marginTop: 2 }, ctaCard: { flexDirection: 'row', alignItems: 'center', gap: 14, backgroundColor: '#fff', borderRadius: 20, padding: 18 }, ctaIconWrap: { width: 50, height: 50, borderRadius: 25, backgroundColor: '#fce7f3', alignItems: 'center', justifyContent: 'center' }, ctaTitle: { fontSize: 14, fontWeight: '800', color: '#831843' }, ctaSub: { fontSize: 12, color: '#a21caf', marginTop: 3 }, headerRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, backBtn: { width: 36, height: 36, borderRadius: 18, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }, headerTitle: { fontSize: 16, fontWeight: '800', color: '#831843' }, serviceRow: { flexDirection: 'row', alignItems: 'center', gap: 12, backgroundColor: '#fff', borderRadius: 18, padding: 14, borderWidth: 2, borderColor: 'transparent' }, serviceRowActive: { borderColor: '#f9a8d4' }, serviceIcon: { width: 44, height: 44, borderRadius: 14, backgroundColor: '#fce7f3', alignItems: 'center', justifyContent: 'center' }, serviceName: { fontSize: 14, fontWeight: '700', color: '#831843' }, serviceMeta: { fontSize: 11, color: '#a21caf', marginTop: 2 }, servicePrice: { fontSize: 13, fontWeight: '700', color: '#db2777' }, checkbox: { width: 22, height: 22, borderRadius: 11, borderWidth: 2, borderColor: '#f9a8d4', alignItems: 'center', justifyContent: 'center' }, checkboxActive: { backgroundColor: '#db2777', borderColor: '#db2777' }, nextBtn: { backgroundColor: '#db2777', borderRadius: 16, paddingVertical: 16, alignItems: 'center', marginTop: 20 }, nextBtnText: { color: '#fff', fontSize: 14, fontWeight: '800' }, subheading: { fontSize: 13, fontWeight: '700', color: '#831843', marginTop: 20, marginBottom: 10 }, dayGrid: { flexDirection: 'row', gap: 8 }, dayCell: { flex: 1, paddingVertical: 12, borderRadius: 12, backgroundColor: '#fff', alignItems: 'center' }, dayCellActive: { backgroundColor: '#db2777' }, dayText: { fontSize: 13, fontWeight: '700', color: '#831843' }, dayTextActive: { color: '#fff' }, timeGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 }, timeCell: { paddingVertical: 12, paddingHorizontal: 18, borderRadius: 12, backgroundColor: '#fff' }, timeCellActive: { backgroundColor: '#db2777' }, timeText: { fontSize: 13, fontWeight: '700', color: '#831843' }, timeTextActive: { color: '#fff' }, confirmWrap: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 30 }, confirmCircle: { width: 100, height: 100, borderRadius: 50, backgroundColor: '#db2777', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }, confirmTitle: { fontSize: 19, fontWeight: '800', color: '#831843' }, confirmSub: { fontSize: 13, color: '#a21caf', marginTop: 6 }, confirmSummary: { backgroundColor: '#fff', borderRadius: 18, padding: 18, marginTop: 24, width: '100%' }, summaryRow: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 4 }, summaryText: { fontSize: 13, color: '#831843' }, summaryPrice: { fontSize: 13, fontWeight: '700', color: '#831843' }, summaryTotalText: { fontSize: 14, fontWeight: '800', color: '#831843' }, summaryTotalPrice: { fontSize: 14, fontWeight: '800', color: '#db2777' }, doneBtn: { backgroundColor: '#db2777', borderRadius: 16, paddingVertical: 16, paddingHorizontal: 40, marginTop: 24 }, });