import React, { useState, useMemo } from 'react'; import { View, Text, TouchableOpacity, ScrollView, TextInput, StyleSheet, SafeAreaView } from 'react-native'; import { Ionicons, Feather } from '@expo/vector-icons'; type Category = '전체' | '치킨' | '한식' | '중식' | '분식' | '디저트'; type Tab = '홈' | '주문내역' | '쿠폰' | '마이'; interface MenuItem { name: string; price: number; } interface Restaurant { id: number; name: string; category: Exclude; rating: number; time: string; fee: string; color: string; items: MenuItem[]; } const restaurants: Restaurant[] = [ { id: 1, name: '교촌치킨', category: '치킨', rating: 4.8, time: '25-35분', fee: '₩2,000', color: '#f97316', items: [{ name: '허니콤보', price: 19000 }, { name: '오리지날', price: 18000 }, { name: '치즈볼', price: 6000 }] }, { id: 2, name: '반포족발', category: '한식', rating: 4.6, time: '30-40분', fee: '무료', color: '#d97706', items: [{ name: '족발 (중)', price: 34000 }, { name: '냉면', price: 8000 }, { name: '왕교자', price: 7000 }] }, { id: 3, name: '명동칼국수', category: '한식', rating: 4.7, time: '20-30분', fee: '₩1,500', color: '#65a30d', items: [{ name: '칼국수', price: 9000 }, { name: '비빔칼국수', price: 9500 }, { name: '왕만두', price: 5000 }] }, { id: 4, name: '홍콩반점', category: '중식', rating: 4.5, time: '25-35분', fee: '₩2,500', color: '#e11d48', items: [{ name: '짜장면', price: 7000 }, { name: '짬뽕', price: 8000 }, { name: '탕수육', price: 18000 }] }, { id: 5, name: '국수나무', category: '분식', rating: 4.4, time: '20-30분', fee: '₩1,000', color: '#0284c7', items: [{ name: '비빔국수', price: 7500 }, { name: '떡볶이', price: 6500 }, { name: '튀김', price: 6500 }] }, { id: 6, name: '배스킨라빈스', category: '디저트', rating: 4.9, time: '15-25분', fee: '무료', color: '#c026d3', items: [{ name: '싱글레귤러', price: 3800 }, { name: '파인트', price: 9800 }] }, ]; const categories: Category[] = ['전체', '치킨', '한식', '중식', '분식', '디저트']; const pastOrders = [ { restaurant: '교촌치킨', date: '12.20', total: 23500, items: '허니콤보 외 2개' }, { restaurant: '명동칼국수', date: '12.18', total: 14000, items: '칼국수 외 1개' }, ]; const coupons = [ { title: '신규가입 웰컴 쿠폰', discount: '₩5,000', condition: '최소 주문 ₩15,000' }, { title: '주말 특별 할인', discount: '15%', condition: '최소 주문 ₩20,000' }, ]; function NeuCard({ children, style, onPress }: { children: React.ReactNode; style?: any; onPress?: () => void }) { const Wrapper = onPress ? TouchableOpacity : View; return ( {children} ); } export default function App() { const [tab, setTab] = useState('홈'); const [category, setCategory] = useState('전체'); const [search, setSearch] = useState(''); const [selected, setSelected] = useState(null); const [cart, setCart] = useState>({}); const filtered = useMemo(() => restaurants.filter(r => (category === '전체' || r.category === category) && (search === '' || r.name.includes(search)) ), [category, search]); const cartTotal = useMemo(() => { if (!selected) return 0; return Object.entries(cart).reduce((sum, [name, qty]) => { const item = selected.items.find(i => i.name === name); return sum + (item ? item.price * qty : 0); }, 0); }, [cart, selected]); const cartCount = Object.values(cart).reduce((a, b) => a + b, 0); const addItem = (name: string) => setCart(prev => ({ ...prev, [name]: (prev[name] || 0) + 1 })); const removeItem = (name: string) => setCart(prev => { const next = { ...prev }; if (next[name] > 1) next[name] -= 1; else delete next[name]; return next; }); const openRestaurant = (r: Restaurant) => { setSelected(r); setCart({}); }; return ( {selected ? ( setSelected(null)} style={styles.backBtn}> {selected.name} 🍽️ {selected.rating} · {selected.time} · 배달비 {selected.fee} {selected.items.map(item => ( {item.name} ₩{item.price.toLocaleString()} {cart[item.name] ? ( removeItem(item.name)} style={styles.stepBtn}> {cart[item.name]} addItem(item.name)} style={styles.stepBtn}> ) : ( addItem(item.name)} style={styles.addBtn}> )} ))} {cartCount > 0 && ( { setSelected(null); setCart({}); setTab('주문내역'); }}> 장바구니 보기 · ₩{cartTotal.toLocaleString()} )} ) : ( <> {tab === '홈' && ( <> 서울시 강남구 역삼동 든든배달 · DeundeunBaedal {categories.map(c => ( setCategory(c)} style={[styles.chip, category === c && styles.chipActive]} > {c} ))} {filtered.map(r => ( openRestaurant(r)} style={styles.restRow}> {r.name} {r.rating} 배달 {r.time} · {r.fee} ))} )} {tab === '주문내역' && ( 주문내역 {pastOrders.map((o, i) => ( {o.restaurant} {o.items} {o.date} ₩{o.total.toLocaleString()} ))} )} {tab === '쿠폰' && ( 쿠폰 {coupons.map((c, i) => ( {c.condition} {c.title} {c.discount} ))} )} {tab === '마이' && ( 마이 홍길동님 든든한 배달의 친구 {['배달 주소 관리', '결제 수단', '알림 설정', '고객센터'].map(item => ( {item} ))} )} {([ { key: '홈', icon: 'home' }, { key: '주문내역', icon: 'receipt' }, { key: '쿠폰', icon: 'pricetag' }, { key: '마이', icon: 'person-circle' }, ] as const).map(t => ( setTab(t.key)} style={styles.tabItem}> {t.key} ))} )} ); } const NEU_BG = '#e8eaf0'; const styles = StyleSheet.create({ root: { flex: 1, backgroundColor: NEU_BG }, neuCard: { backgroundColor: NEU_BG, borderRadius: 18, padding: 14, shadowColor: '#a3b1c6', shadowOffset: { width: 6, height: 6 }, shadowOpacity: 0.35, shadowRadius: 10, elevation: 4, }, locationRow: { flexDirection: 'row', alignItems: 'center', gap: 6 }, locationText: { fontSize: 14, fontWeight: '600', color: '#374151' }, brandSub: { fontSize: 12, color: '#9ca3af', marginTop: 2, marginBottom: 16 }, searchBar: { flexDirection: 'row', alignItems: 'center', gap: 10, paddingVertical: 14 }, searchInput: { flex: 1, fontSize: 14, color: '#374151' }, chip: { paddingHorizontal: 16, paddingVertical: 9, borderRadius: 999, marginRight: 10, backgroundColor: NEU_BG, shadowColor: '#a3b1c6', shadowOffset: { width: 3, height: 3 }, shadowOpacity: 0.3, shadowRadius: 4, elevation: 2, }, chipActive: { backgroundColor: '#4f46e5' }, chipText: { fontSize: 13, fontWeight: '600', color: '#6b7280' }, chipTextActive: { color: '#fff' }, restRow: { flexDirection: 'row', alignItems: 'center', gap: 14 }, restIcon: { width: 56, height: 56, borderRadius: 16, alignItems: 'center', justifyContent: 'center' }, restName: { fontSize: 15, fontWeight: '700', color: '#1f2937' }, ratingRow: { flexDirection: 'row', alignItems: 'center', gap: 4, marginTop: 3 }, ratingText: { fontSize: 12, fontWeight: '600', color: '#4b5563' }, metaText: { fontSize: 12, color: '#6b7280', marginTop: 2 }, metaTextFaint: { fontSize: 11, color: '#9ca3af', marginTop: 2 }, priceText: { fontSize: 15, fontWeight: '800', color: '#1f2937' }, sectionTitle: { fontSize: 20, fontWeight: '800', color: '#1f2937', marginBottom: 4 }, couponDiscount: { fontSize: 20, fontWeight: '800', color: '#4f46e5' }, avatar: { width: 64, height: 64, borderRadius: 32, backgroundColor: '#4f46e5', alignItems: 'center', justifyContent: 'center' }, settingsRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingVertical: 16 }, tabBar: { flexDirection: 'row', justifyContent: 'space-around', paddingVertical: 12, backgroundColor: NEU_BG, borderTopWidth: 1, borderTopColor: 'rgba(0,0,0,0.04)', }, tabItem: { alignItems: 'center', gap: 3 }, tabLabel: { fontSize: 10, color: '#9ca3af' }, tabLabelActive: { color: '#4f46e5', fontWeight: '700' }, detailHeader: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 16, paddingTop: 8 }, backBtn: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center', backgroundColor: NEU_BG }, detailTitle: { fontSize: 16, fontWeight: '700', color: '#1f2937' }, heroBlock: { height: 140, borderRadius: 20, alignItems: 'center', justifyContent: 'center', marginBottom: 16 }, heroEmoji: { fontSize: 44 }, rowBetween: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, menuRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, menuName: { fontSize: 14, fontWeight: '600', color: '#1f2937' }, menuPrice: { fontSize: 13, color: '#6b7280', marginTop: 3 }, stepper: { flexDirection: 'row', alignItems: 'center', gap: 10 }, stepBtn: { width: 28, height: 28, borderRadius: 14, backgroundColor: NEU_BG, alignItems: 'center', justifyContent: 'center' }, stepCount: { fontSize: 14, fontWeight: '700', color: '#1f2937', minWidth: 16, textAlign: 'center' }, addBtn: { width: 32, height: 32, borderRadius: 16, backgroundColor: NEU_BG, alignItems: 'center', justifyContent: 'center' }, floatingBar: { position: 'absolute', left: 20, right: 20, bottom: 20 }, checkoutBtn: { backgroundColor: '#4f46e5', borderRadius: 16, paddingVertical: 16, alignItems: 'center' }, checkoutText: { color: '#fff', fontSize: 15, fontWeight: '700' }, });