import React, { useState, useRef, useEffect } from "react"; import { Plus, Trash2, PieChart, Check, Copy } from 'lucide-react'; const categoryList = [ "식비", "교통", "주거", "생활", "여가", "의료", "쇼핑", "기타" ]; function getMonthKey() { const d = new Date(); return d.getFullYear() + "-" + ('' + (d.getMonth() + 1)).padStart(2, '0'); } export default function App() { const monthKey = getMonthKey(); const [expensesData, setExpensesData] = useStorage("accountbook-" + monthKey, []); const [budget, setBudget] = useStorage("accountbook-budget-" + monthKey, 0); const [category, setCategory] = useState(categoryList[0]); const [amount, setAmount] = useState(""); const [memo, setMemo] = useState(""); const [showAdd, setShowAdd] = useState(false); const [copyFlash, setCopyFlash] = useState(false); // 이번달 1일~말일까지 const thisMonthStart = (() => { const d = new Date(); d.setDate(1); d.setHours(0,0,0,0); return d.getTime(); })(); const thisMonthEnd = (() => { const d = new Date(); d.setMonth(d.getMonth() + 1); d.setDate(0); d.setHours(23,59,59,999); return d.getTime(); })(); // 이번 달 기준 데이터 const expenses = (expensesData||[]).filter(e => e.date >= thisMonthStart && e.date <= thisMonthEnd); const totalSpent = expenses.reduce((sum, e) => sum + e.amount, 0); // 카테고리별 합계 const catSums = categoryList.map(cat => ({ cat, sum: expenses.filter(e => e.category === cat).reduce((sum, e) => sum + e.amount, 0) })); const hasData = expenses.length > 0; // 파이차트 데이터 준비 const pieData = catSums.filter(c => c.sum > 0); const pieTotal = pieData.reduce((acc, v) => acc+v.sum, 0); const pieAngles = pieData.reduce((a, v, i) => { a.push(a.length > 0 ? a[a.length-1] + (v.sum/pieTotal)*360 : (v.sum/pieTotal)*360); return a; }, []); const colorArr = [ "#38bdf8", "#facc15", "#f87171", "#34d399", "#e879f9", "#fb7185", "#60a5fa", "#a3e635" ]; // 진행률 const progress = budget > 0 ? Math.min(totalSpent / budget, 1) : 0; const budgetLeft = budget - totalSpent; // form validation const canAdd = amount && !isNaN(+amount) && +amount > 0; // 오늘 날짜 (자동 입력) const [date, setDate] = useState(() => { const d = new Date(); return d.toISOString().slice(0, 10); }); // 복사하기 (지출 내역 전체) const handleCopy = () => { const header = `날짜\t카테고리\t금액\t메모`; const rows = expenses.map(e => `${new Date(e.date).toLocaleDateString('ko')}\t${e.category}\t${e.amount.toLocaleString()}\t${e.memo || ''}`); const txt = [header, ...rows].join('\n'); navigator.clipboard.writeText(txt); setCopyFlash(true); setTimeout(() => setCopyFlash(false), 1200); }; // 삭제 const handleDelete = (idx) => { setExpensesData(expensesData.filter((_, i) => i !== idx)); }; // 예산 입력 핸들러 const handleBudgetChange = (e) => { const value = e.target.value.replace(/[^\d]/g, ""); setBudget(value === "" ? 0 : Number(value)); }; // 새 지출 등록 const handleAdd = () => { if (!canAdd) return; setExpensesData([ { category, amount: +amount, memo, date: new Date(date).getTime() }, ...expensesData, ]); setAmount(""); setMemo(""); setShowAdd(false); }; // 엔터로 등록 const amountRef = useRef(); useEffect(() => { if (showAdd && amountRef.current) amountRef.current.focus(); }, [showAdd]); return (

{/* 예산 + 진행률 */}

예산 설정 0 ? budget : ''} onChange={handleBudgetChange} placeholder="원" autoComplete="off" aria-label="예산" /> 원

{budget > 0 ? `${Math.round(progress*100)}% 사용` : "예산을 입력하세요"}

총 사용 {totalSpent.toLocaleString()}원 {budget > 0 && 남은 예산 {budgetLeft >= 0 ? budgetLeft.toLocaleString() : {Math.abs(budgetLeft).toLocaleString()}원 초과}원}

{/* 파이차트 */}

카테고리별 비율

{hasData ? ( ) : (

내역 없음

)} {/* 범례 */}

{pieData.map((d, i) => (

{d.cat} {d.sum.toLocaleString()}원 ({Math.round(d.sum/pieTotal*100)}%)

))}

{/* 지출 추가 */}

{showAdd && (

setShowAdd(false)} />

setAmount(e.target.value)} /> 원

setDate(e.target.value)} className="px-4 py-3 rounded-xl text-base border bg-gray-100 focus:outline-none" /> setMemo(e.target.value)} />

)}

{/* 내역 리스트 */}

지출 내역 {expenses.length}건

{expenses.length === 0 ? (

📒

아직 기록된 지출이 없습니다.

) : ( {expenses.map((e, i) => ( ))}

날짜	카테고리	금액	메모
{new Date(e.date).toLocaleDateString('ko', { month:'2-digit', day:'2-digit'})}	{e.category}	{e.amount.toLocaleString()}원	{e.memo}

)}

); } // 파이차트 SVG function PieChartSVG({data, angles, colors}) { const R = 60; let prev = 0; const sectors = data.map((d, i) => { const startAngle = i === 0 ? 0 : angles[i-1]; const endAngle = angles[i]; const large = endAngle - startAngle > 180 ? 1 : 0; // 각도를 호의 두점(x,y)로 변환 const start = polarToXY(R, startAngle); const end = polarToXY(R, endAngle); return ( ); }); return ( ); } function polarToXY(R, angle) { const rad = (angle-90) * Math.PI/180; return { x: R + R * Math.cos(rad), y: R + R * Math.sin(rad) }; }