import React, { useState, useRef, useMemo } from "react"; import { Plus, Trash2, Loader2, Users, Send, Check, ChevronRight } from "lucide-react"; function calculateSettlements(people) { // 준비: 총합, 1인당 금액 계산 const n = people.length; if (n === 0) return []; const total = people.reduce((t, p) => t + (Number(p.amount) || 0), 0); const share = +(total / n).toFixed(2); // 소수점 2자리까지 // 각자의 잔액(양수=더 냄, 음수=적게 냄) const balances = people.map((p) => ({ name: p.name, paid: +(Number(p.amount) || 0).toFixed(2), balance: +(Number(p.amount) - share).toFixed(2), })); // 초과지불자와 미지불자 구분 let over = balances.filter((b) => b.balance > 0).map((b) => ({...b})); let under = balances.filter((b) => b.balance < 0).map((b) => ({...b})); // 송금 목록 계산 const settlements = []; let i = 0, j = 0; while (i < over.length && j < under.length) { const amount = Math.min(over[i].balance, -under[j].balance); settlements.push({ from: under[j].name, to: over[i].name, amount: +amount.toFixed(2), }); over[i].balance = +(over[i].balance - amount).toFixed(2); under[j].balance = +(under[j].balance + amount).toFixed(2); if (Math.abs(over[i].balance) < 0.01) i++; if (Math.abs(under[j].balance) < 0.01) j++; } return { settlements, total, share, balances, }; } export default function App() { const [entries, setEntries] = useSharedStorage("expenseEqualizer:entries", [ { id: 1, name: "홍길동", amount: "" }, { id: 2, name: "김영희", amount: "" }, ]); const [inputName, setInputName] = useState(""); const [inputAmount, setInputAmount] = useState(""); const nameInputRef = useRef(null); // 추가 버튼 핸들러 const addPerson = () => { const name = inputName.trim(); const amt = inputAmount.trim(); if (!name || !amt || isNaN(Number(amt))) return; setEntries([...entries, { id: Date.now(), name, amount: amt }]); setInputName(""); setInputAmount(""); setTimeout(() => nameInputRef.current?.focus(), 10); }; // 삭제 핸들러 const removePerson = (id) => setEntries(entries.filter((e) => e.id !== id)); // 값 변경 핸들러 const updatePerson = (id, field, value) => setEntries(entries.map(e => e.id === id ? {...e, [field]: value} : e)); // 정산 결과 계산 (entries 내용이 바뀔 때마다 즉시) const { settlements, total, share, balances } = useMemo(() => calculateSettlements(entries.filter(e => e.name.trim() && e.amount !== "" && !isNaN(Number(e.amount)))), [entries] ); // 전체 초기화 const resetAll = () => setEntries([]); return (

{/* Header */}

정산 계산기

각자 낸 금액을 입력하면, 공평하게 n등분 하여 정산 필요 금액을 자동 계산합니다.

{/* Body */}

{/* 인원 입력 카드 */}

참여자 & 결제금액

{entries.length === 0 ? (

🤝

이름과 금액을 입력해보세요.

) : ( entries.map((e, i) => (

updatePerson(e.id, "name", ev.target.value)} placeholder={`이름${i === 0 ? " (예: 홍길동)" : ""}`} maxLength={10} /> { // 숫자만 허용 const v = ev.target.value.replace(/[^\d.]/g, ""); updatePerson(e.id, "amount", v); }} placeholder="금액" /> 원

)) )}

{/* 새 사람 추가 폼 */}

setInputName(e.target.value)} placeholder="이름 추가" maxLength={10} onKeyDown={e => e.key === "Enter" && addPerson()} /> setInputAmount(e.target.value.replace(/[^\d.]/g, ""))} onKeyDown={e => e.key === "Enter" && addPerson()} placeholder="금액" /> 원

{/* 요약: 합계/1인당 */}

총 지출 {total?.toLocaleString() ?? 0}원

1인당 부담금 {share?.toLocaleString() ?? 0}원

{/* 정산 결과 */}

정산 내역

{settlements?.length === 0 ? (

✅ 정산 필요 없음! 모두 공평하게 결제했어요.

) : (

{s.from} {s.to} → {s.amount?.toLocaleString()}원

)}

{/* 각자 정산 상세 탭 (잔액) */}

참여자별 잔액

{b.name} · 0 ? "text-emerald-400 font-semibold" : b.balance < 0 ? "text-rose-300 font-semibold" : "text-white/70 font-medium" }> {b.balance > 0 ? `+${b.balance.toLocaleString()}원 (더 냈음)` : b.balance < 0 ? `${b.balance.toLocaleString()}원 (덜 냈음)` : `정확하게 냄`}

{/* 데이터 출처 및 안내 */}

정산 정보는 기기에만 저장되며, 외부로 전송되지 않습니다. 📱 공유방, 동료, 친구들과 실시간 정산에 활용하세요!

); }