import React, { useState, useCallback, useMemo } from "react"; import { Plus, Trash2, X, Wallet, ArrowDown } from "lucide-react"; const LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); const T = { ko: { month: "이번 달", add: "추가", total: "총 지출", avg: "일 평균", count: "건", empty: "첫 지출을 기록해보세요", amount: "금액", memo: "메모 (선택)", save: "저장", today: "오늘", currency: "₩" }, en: { month: "This Month", add: "Add", total: "Total", avg: "Daily Avg", count: "items", empty: "Record your first expense", amount: "Amount", memo: "Memo (optional)", save: "Save", today: "Today", currency: "$" }, ja: { month: "今月", add: "追加", total: "合計", avg: "日平均", count: "件", empty: "最初の支出を記録しましょう", amount: "金額", memo: "メモ (任意)", save: "保存", today: "今日", currency: "¥" }, zh: { month: "本月", add: "添加", total: "总计", avg: "日均", count: "笔", empty: "记录第一笔支出", amount: "金额", memo: "备注 (可选)", save: "保存", today: "今天", currency: "¥" }, }; const t = T[LANG] || T.en; const CATS = [ { id: "food", emoji: "🍽️", label: "Food", bg: "bg-orange-500", light: "bg-orange-100 text-orange-700" }, { id: "transport", emoji: "🚗", label: "Transport", bg: "bg-blue-500", light: "bg-blue-100 text-blue-700" }, { id: "shopping", emoji: "🛍️", label: "Shopping", bg: "bg-pink-500", light: "bg-pink-100 text-pink-700" }, { id: "fun", emoji: "🎮", label: "Fun", bg: "bg-purple-500", light: "bg-purple-100 text-purple-700" }, { id: "health", emoji: "💊", label: "Health", bg: "bg-emerald-500", light: "bg-emerald-100 text-emerald-700" }, { id: "other", emoji: "📦", label: "Other", bg: "bg-gray-500", light: "bg-gray-100 text-gray-700" }, ]; export default function App() { const [expenses, setExpenses] = useSharedStorage("exp_v2", []); const [showAdd, setShowAdd] = useState(false); const [amount, setAmount] = useState(""); const [catId, setCatId] = useState("food"); const [memo, setMemo] = useState(""); const now = new Date(); const mk = now.toISOString().slice(0, 7); const me = useMemo(() => (expenses || []).filter(e => e.d && e.d.startsWith(mk)), [expenses, mk]); const tot = me.reduce((s, e) => s + (e.a || 0), 0); const avg = now.getDate() > 0 ? Math.round(tot / now.getDate()) : 0; const catData = useMemo(() => { const m = {}; me.forEach(e => { m[e.c] = (m[e.c] || 0) + e.a; }); return CATS.map(c => ({ ...c, val: m[c.id] || 0 })).filter(c => c.val > 0).sort((a, b) => b.val - a.val); }, [me]); const fmt = (n) => n.toLocaleString(); const handleAdd = useCallback(() => { const v = parseFloat(amount); if (!v || v <= 0) return; setExpenses([{ id: Date.now(), a: v, c: catId, m: memo.trim(), d: now.toISOString().slice(0, 10) }, ...(expenses || [])]); setAmount(""); setMemo(""); setShowAdd(false); }, [amount, catId, memo, expenses, setExpenses, now]); const del = useCallback((id) => setExpenses((expenses || []).filter(e => e.id !== id)), [expenses, setExpenses]); return (

{t.month}

{t.currency}{fmt(tot)}

{t.avg} {t.currency}{fmt(avg)} {me.length} {t.count}

{catData.length > 0 && (

{catData.map(c => (

0 ? (c.val / tot) * 100 : 0) + "%" }} /> ))}

)} {catData.length > 0 && (

{catData.map(c => ( {c.emoji} {t.currency}{fmt(c.val)} ))}

)}

{me.length === 0 ? (

{t.empty}

) : (

{me.map(e => { const cat = CATS.find(c => c.id === e.c) || CATS[5]; return (

{cat.emoji}

{t.currency}{e.a.toLocaleString()}

{e.m &&

{e.m}

}

{e.d === now.toISOString().slice(0, 10) ? t.today : e.d.slice(5)}

); })}

)}

{showAdd && (

setShowAdd(false)} />

{t.add}

{t.amount} setAmount(e.target.value.replace(/[^\d.]/g, ""))} placeholder="0" className="w-full px-4 py-3 rounded-xl border border-gray-200 text-xl font-bold text-gray-900 mb-3 outline-none focus:ring-2 focus:ring-blue-500" />

{CATS.map(c => ( ))}

setMemo(e.target.value)} placeholder={t.memo} onKeyDown={e => e.key === "Enter" && handleAdd()} className="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm text-gray-900 mb-4 outline-none focus:ring-2 focus:ring-blue-500 placeholder:text-gray-400" />

)}

); }

Expense Tracker

Expense Tracker

reviews