import React, { useState, useMemo } from 'react'; import { View, Text, TouchableOpacity, ScrollView, StyleSheet, SafeAreaView } from 'react-native'; import { LinearGradient } from 'expo-linear-gradient'; import { BlurView } from 'expo-blur'; import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons'; type Category = '전체' | '커피' | '논커피' | '디저트'; interface Drink { id: number; name: string; category: Exclude; price: number; colors: [string, string]; } const drinks: Drink[] = [ { id: 1, name: '아메리카노', category: '커피', price: 4500, colors: ['#fbbf24', '#f97316'] }, { id: 2, name: '카페라떼', category: '커피', price: 5000, colors: ['#fde68a', '#fbbf24'] }, { id: 3, name: '바닐라빈 라떼', category: '커피', price: 5800, colors: ['#fef3c7', '#fbbf24'] }, { id: 4, name: '콜드브루', category: '커피', price: 5200, colors: ['#a3a3a3', '#525252'] }, { id: 5, name: '자몽에이드', category: '논커피', price: 5500, colors: ['#fda4af', '#f43f5e'] }, { id: 6, name: '딸기라떼', category: '논커피', price: 6200, colors: ['#fecdd3', '#fb7185'] }, { id: 7, name: '크로플', category: '디저트', price: 4800, colors: ['#fde68a', '#f59e0b'] }, { id: 8, name: '시나몬롤', category: '디저트', price: 5300, colors: ['#fdba74', '#ea580c'] }, ]; const categories: Category[] = ['전체', '커피', '논커피', '디저트']; const sizes = [{ label: '톨', mult: 1 }, { label: '그란데', mult: 1.2 }, { label: '벤티', mult: 1.4 }]; const branches = ['강남점', '홍대점', '성수점']; const pastOrders = [ { date: '12월 15일', items: '아메리카노, 크로플', total: 9800 }, { date: '12월 12일', items: '바닐라빈 라떼', total: 5800 }, ]; function GlassCard({ children, style }: { children: React.ReactNode; style?: any }) { return ( {children} ); } export default function App() { const [branch, setBranch] = useState('강남점'); const [tab, setTab] = useState<'홈' | '주문내역' | '마이'>('홈'); const [category, setCategory] = useState('전체'); const [picked, setPicked] = useState(null); const [size, setSize] = useState('톨'); const [temp, setTemp] = useState<'ICE' | 'HOT'>('ICE'); const [cart, setCart] = useState<{ drink: Drink; size: string; temp: string; mult: number }[]>([]); const filtered = useMemo(() => category === '전체' ? drinks : drinks.filter(d => d.category === category), [category]); const cartTotal = useMemo(() => cart.reduce((sum, c) => sum + c.drink.price * c.mult, 0), [cart]); const addToCart = (drink: Drink) => { const s = sizes.find(s => s.label === size)!; setCart(prev => [...prev, { drink, size, temp, mult: s.mult }]); setPicked(null); }; return ( 모카빈 MochaBean {branch} {tab === '홈' && ( <> {categories.map(c => ( setCategory(c)} style={{ marginRight: 10 }}> {c} ))} {filtered.map(d => ( { setPicked(d); setSize('톨'); setTemp('ICE'); }}> {d.name} ₩{d.price.toLocaleString()} ))} )} {tab === '주문내역' && ( 주문 내역 {pastOrders.map((o, i) => ( {o.date} {o.items} ₩{o.total.toLocaleString()} ))} )} {tab === '마이' && ( 마이 페이지 김모카 님 gold@mochabean.com {branches.map(b => ( setBranch(b)}> {b} ))} )} {cart.length > 0 && tab === '홈' && ( 장바구니 {cart.length}개 · ₩{cartTotal.toLocaleString()} { setCart([]); setTab('주문내역'); }}> 주문하기 )} {([ { key: '홈', icon: 'home' }, { key: '주문내역', icon: 'list' }, { key: '마이', icon: 'person-circle' }, ] as const).map(t => ( setTab(t.key)} style={styles.tabItem}> {t.key} ))} {picked && ( setPicked(null)}> 옵션 선택 {picked.name} 사이즈 {sizes.map(s => ( setSize(s.label)} style={[styles.optionBtn, size === s.label && styles.optionBtnActive]}> {s.label} ))} 온도 {(['ICE', 'HOT'] as const).map(tp => ( setTemp(tp)} style={[styles.optionBtn, { flex: 1 }, temp === tp && styles.optionBtnActive]}> {tp === 'ICE' ? '🧊 아이스' : '🔥 핫'} ))} addToCart(picked)}> 담기 · ₩{(picked.price * (sizes.find(s => s.label === size)?.mult || 1)).toLocaleString()} )} ); } const styles = StyleSheet.create({ glass: { borderRadius: 18, borderWidth: 1, borderColor: 'rgba(255,255,255,0.5)', overflow: 'hidden', padding: 12 }, header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 20, paddingTop: 8, paddingBottom: 4 }, brandName: { fontSize: 22, fontWeight: '800', color: '#78350f' }, brandSub: { fontSize: 11, color: '#a8794f' }, branchPill: { flexDirection: 'row', alignItems: 'center', gap: 6, paddingVertical: 8, paddingHorizontal: 14 }, branchText: { fontSize: 12, fontWeight: '700', color: '#78350f' }, chip: { paddingVertical: 8, paddingHorizontal: 16 }, chipActive: { backgroundColor: 'rgba(194,65,12,0.85)' }, chipText: { fontSize: 13, fontWeight: '600', color: '#78350f' }, chipTextActive: { color: '#fff' }, grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 14 }, gridItem: { width: '47%' }, drinkSwatch: { height: 90, alignItems: 'center', justifyContent: 'center' }, drinkName: { fontSize: 14, fontWeight: '700', color: '#451a03' }, drinkPrice: { fontSize: 13, color: '#c2410c', marginTop: 4, fontWeight: '700' }, sectionTitle: { fontSize: 20, fontWeight: '800', color: '#451a03', marginBottom: 8 }, rowBetween: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }, orderDate: { fontSize: 14, fontWeight: '700', color: '#451a03' }, metaText: { fontSize: 12, color: '#92400e', marginTop: 3 }, priceText: { fontSize: 15, fontWeight: '800', color: '#c2410c' }, avatarCircle: { width: 60, height: 60, borderRadius: 30, backgroundColor: '#c2410c', alignItems: 'center', justifyContent: 'center' }, branchList: { gap: 10, marginTop: 4 }, branchOption: { paddingVertical: 12, alignItems: 'center' }, cartBar: { position: 'absolute', left: 20, right: 20, bottom: 88 }, cartBarInner: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 12, paddingHorizontal: 16 }, cartText: { fontSize: 13, fontWeight: '700', color: '#451a03' }, orderBtn: { backgroundColor: '#c2410c', paddingVertical: 8, paddingHorizontal: 16, borderRadius: 12 }, orderBtnText: { color: '#fff', fontSize: 13, fontWeight: '700' }, tabBar: { flexDirection: 'row', justifyContent: 'space-around', paddingVertical: 12, backgroundColor: 'rgba(255,255,255,0.6)' }, tabItem: { alignItems: 'center', gap: 3 }, tabLabel: { fontSize: 10, color: '#a8a29e' }, tabLabelActive: { color: '#c2410c', fontWeight: '700' }, modalOverlay: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.3)', justifyContent: 'flex-end' }, modalCard: { borderRadius: 0, borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: 22, backgroundColor: 'rgba(255,255,255,0.5)' }, modalSwatch: { height: 100, borderRadius: 16, alignItems: 'center', justifyContent: 'center', marginTop: 14 }, subheading: { fontSize: 13, fontWeight: '700', color: '#78350f', marginTop: 16, marginBottom: 8 }, optionRow: { flexDirection: 'row', gap: 8 }, optionBtn: { flex: 1, paddingVertical: 12, borderRadius: 12, alignItems: 'center', backgroundColor: 'rgba(255,255,255,0.6)', borderWidth: 1, borderColor: 'rgba(194,65,12,0.2)' }, optionBtnActive: { backgroundColor: '#c2410c', borderColor: '#c2410c' }, optionText: { fontSize: 13, fontWeight: '600', color: '#78350f' }, optionTextActive: { color: '#fff' }, addCartBtn: { backgroundColor: '#c2410c', paddingVertical: 16, borderRadius: 14, alignItems: 'center', marginTop: 18 }, });

Mocabean