import React, { useState, useMemo } from "react"; import { Plus, Trash2 } from "lucide-react"; const CATEGORIES = [ { id: "food", label: "식비", icon: "🍚", color: "#f59e0b" }, { id: "transport", label: "교통", icon: "🚌", color: "#3b82f6" }, { id: "shopping", label: "쇼핑", icon: "🛍️", color: "#ec4899" }, { id: "culture", label: "문화", icon: "🎬", color: "#8b5cf6" }, { id: "health", label: "건강", icon: "💊", color: "#10b981" }, { id: "other", label: "기타", icon: "📦", color: "#6b7280" }, ]; export default function App() { const [expenses, setExpenses] = useStorage("expenses_v2", []); const [budget, setBudget] = useStorage("monthly_budget", 500000); const [showAdd, setShowAdd] = useState(false); const [form, setForm] = useState({ amount: "", category: "food", memo: "" }); const [editBudget, setEditBudget] = useState(false); const [budgetInput, setBudgetInput] = useState(String(budget)); const thisMonth = new Date().getMonth(); const monthExpenses = (expenses || []).filter(e => { try { return new Date(e.date).getMonth() === thisMonth; } catch { return false; } }); const totalSpent = monthExpenses.reduce((sum, e) => sum + (e.amount || 0), 0); const remaining = budget - totalSpent; const pct = budget > 0 ? Math.min(100, (totalSpent / budget) * 100) : 0; const byCategory = useMemo(() => { const map = {}; for (const e of monthExpenses) { map[e.category] = (map[e.category] || 0) + (e.amount || 0); } return CATEGORIES.map(c => ({ ...c, amount: map[c.id] || 0 })).filter(c => c.amount > 0); }, [monthExpenses]); const handleAdd = () => { const amount = parseInt(form.amount); if (!amount || amount <= 0) return; setExpenses(prev => [...(prev || []), { id: crypto.randomUUID(), amount, category: form.category, memo: form.memo, date: new Date().toISOString() }]); setForm({ amount: "", category: "food", memo: "" }); setShowAdd(false); }; const handleDelete = (id) => { setExpenses(prev => (prev || []).filter(e => e.id !== id)); }; const handleBudgetSave = () => { const val = parseInt(budgetInput); if (val > 0) setBudget(val); setEditBudget(false); }; return (

{editBudget ? (

setBudgetInput(e.target.value)} className="w-32 px-3 py-2 rounded-lg bg-white border border-emerald-200 text-sm" /> 저장

) : ( )} = 0 ? "text-emerald-700" : "text-red-600"}`}> {remaining >= 0 ? `${remaining.toLocaleString()}원 남음` : `${Math.abs(remaining).toLocaleString()}원 초과`}

90 ? "#ef4444" : pct > 70 ? "#f59e0b" : "#10b981"} showValue />

사용 {totalSpent.toLocaleString()}원 예산 {budget?.toLocaleString()}원

{byCategory.length > 0 && ( ({ label: c.label, value: c.amount, color: c.color }))} size={100} /> )} {monthExpenses.length === 0 ? ( setShowAdd(true)} /> ) : (

{monthExpenses.sort((a, b) => new Date(b.date) - new Date(a.date)).map(e => { const cat = CATEGORIES.find(c => c.id === e.category) || CATEGORIES[5]; return (

{cat.icon}

{e.memo || cat.label}

{new Date(e.date).toLocaleDateString("ko-KR", { month: "short", day: "numeric" })}

{e.amount?.toLocaleString()}원

); })}

)}

setShowAdd(false)} title="지출 추가">

금액 setForm({...form, amount: e.target.value})} className="w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 text-lg font-bold" />

카테고리 ({ id: c.id, label: c.label, icon: c.icon }))} selected={form.category} onSelect={v => setForm({...form, category: v})} />

메모 (선택) setForm({...form, memo: e.target.value})} className="w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 text-sm" />

추가

setShowAdd(true)} className="bg-emerald-600" />

); }