// ---------- Money Tab Components ---------- // All data stored via parent's onSave (proven savePinItem path). // Balance → regular item with title '::balance::', amount in memo field // Loans → regular item with title '::loans::', JSON list in memo field const { useState: useSM, useEffect: useEM, useRef: useRM, useMemo: useMM } = React; const BALANCE_TITLE = '::balance::'; const LOANS_TITLE = '::loans::'; // ---- Balance Display ---- function BalanceCard({ items, onSave }) { const [editing, setEditing] = useSM(false); const [input, setInput] = useSM(''); const inputRef = useRM(null); const balItem = useMM(() => (items || []).find(i => i.title === BALANCE_TITLE), [items]); const balance = balItem ? parseInt(balItem.memo || '0', 10) : null; const save = (amount) => { onSave({ id: balItem?.id || uid(), tab: 'money', title: BALANCE_TITLE, memo: String(amount), dateISO: D.todayISO(), color: 'green', pinned: true, status: 'planned', tags: [], }); }; const startEdit = () => { setInput(balance != null ? String(balance) : ''); setEditing(true); setTimeout(() => inputRef.current?.focus(), 40); }; const commit = () => { const v = parseInt(input.replace(/[^0-9-]/g, ''), 10); if (!isNaN(v)) save(v); setEditing(false); }; const fmt = (n) => n == null ? '미입력' : n.toLocaleString('ko-KR') + '원'; return (
잔고 {editing ? ( setInput(e.target.value)} onKeyDown={(e) => { if (e.nativeEvent?.isComposing) return; if (e.key === 'Enter') commit(); if (e.key === 'Escape') setEditing(false); }} onBlur={commit} placeholder="잔고 입력" /> ) : ( ₩ {fmt(balance)} )} {!editing && }
); } // ---- Loan Card ---- function LoanCard({ items, onSave }) { const [collapsed, setCollapsed] = useSM(() => localStorage.getItem('mycal.loan.collapsed') === 'true'); const [editIdx, setEditIdx] = useSM(-1); const [form, setForm] = useSM({}); const loansItem = useMM(() => (items || []).find(i => i.title === LOANS_TITLE), [items]); const loans = useMM(() => { try { return loansItem?.memo ? JSON.parse(loansItem.memo) : []; } catch { return []; } }, [loansItem]); const persist = (list) => { onSave({ id: loansItem?.id || uid(), tab: 'money', title: LOANS_TITLE, memo: JSON.stringify(list), dateISO: D.todayISO(), color: 'orange', pinned: true, status: 'planned', tags: [], }); }; const toggle = () => { setCollapsed((v) => { localStorage.setItem('mycal.loan.collapsed', String(!v)); return !v; }); }; const startAdd = () => { setEditIdx(loans.length); setForm({ name: '', balance: '', monthly: '', rate: '', current: '', total: '' }); }; const startEdit = (i) => { setEditIdx(i); const l = loans[i]; setForm({ name: l.name || '', balance: String(l.balance || ''), monthly: String(l.monthly || ''), rate: String(l.rate || ''), current: String(l.current || ''), total: String(l.total || ''), }); }; const commitEdit = () => { if (!form.name.trim()) { setEditIdx(-1); return; } const entry = { name: form.name.trim(), balance: parseInt(form.balance.replace(/[^0-9]/g, ''), 10) || 0, monthly: parseInt(form.monthly.replace(/[^0-9]/g, ''), 10) || 0, rate: form.rate.trim(), current: parseInt(form.current.replace(/[^0-9]/g, ''), 10) || 0, total: parseInt(form.total.replace(/[^0-9]/g, ''), 10) || 0, }; const next = [...loans]; if (editIdx >= loans.length) next.push(entry); else next[editIdx] = entry; persist(next); setEditIdx(-1); }; const removeLoan = (i) => { persist(loans.filter((_, j) => j !== i)); }; const fmt = (n) => n ? n.toLocaleString('ko-KR') : '0'; const renderEditForm = (autoFocusName) => (
setForm({...form, name: e.target.value})} autoFocus={autoFocusName} />
setForm({...form, balance: e.target.value})} /> setForm({...form, monthly: e.target.value})} /> setForm({...form, rate: e.target.value})} />
setForm({...form, current: e.target.value})} /> / setForm({...form, total: e.target.value})} />
); return (
{!collapsed && (
{loans.map((l, i) => ( editIdx === i ? ( {renderEditForm(false)} ) : (
startEdit(i)}>
{l.name}
잔액 {fmt(l.balance)} · 월 {fmt(l.monthly)} {l.rate && <>·{l.rate}%}
{(l.current || l.total) ?
{l.current || 0}/{l.total || '?'}회차
: null}
) ))} {editIdx === loans.length ? renderEditForm(true) : ( )}
)}
); } window.BalanceCard = BalanceCard; window.LoanCard = LoanCard;