'use client'; import { useState, useEffect } from 'react'; interface PurchaseRecord { id: number; draw_no: number; amount: number; sets: number; prize: number; note: string; created_at: string; } interface PurchaseStats { total_records: number; total_invested: number; total_prize: number; net: number; return_rate: number; prize_count: number; max_prize: number; } function StatCard({ label, value, sub, color }: { label: string; value: string; sub?: string; color?: string }) { return (
{label}
{value}
{sub &&
{sub}
}
); } export default function PurchaseTab() { const [records, setRecords] = useState([]); const [stats, setStats] = useState(null); const [loading, setLoading] = useState(true); const [editingId, setEditingId] = useState(null); const [editPrize, setEditPrize] = useState(''); const [editNote, setEditNote] = useState(''); const [showAdd, setShowAdd] = useState(false); const [addForm, setAddForm] = useState({ draw_no: '', amount: '5000', sets: '5', prize: '0', note: '' }); const [saving, setSaving] = useState(false); const load = async () => { try { const [recRes, statRes] = await Promise.all([ fetch('/api/lotto/purchase').then(r => r.json()), fetch('/api/lotto/purchase/stats').then(r => r.json()), ]); if (recRes?.error || statRes?.error) throw new Error(recRes?.error ?? statRes?.error); setRecords(recRes.records ?? []); setStats(statRes); } catch { /* 에러 시 빈 상태 유지 */ } finally { setLoading(false); } }; useEffect(() => { load(); }, []); const handleAdd = async () => { if (!addForm.draw_no) return; setSaving(true); try { await fetch('/api/lotto/purchase', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ draw_no: parseInt(addForm.draw_no), amount: parseInt(addForm.amount), sets: parseInt(addForm.sets), prize: parseInt(addForm.prize), note: addForm.note, }), }); setShowAdd(false); setAddForm({ draw_no: '', amount: '5000', sets: '5', prize: '0', note: '' }); await load(); } finally { setSaving(false); } }; const handleUpdate = async (id: number) => { setSaving(true); try { await fetch(`/api/lotto/purchase/${id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prize: parseInt(editPrize) || 0, note: editNote }), }); setEditingId(null); await load(); } finally { setSaving(false); } }; const handleDelete = async (id: number) => { if (!confirm('삭제하시겠습니까?')) return; await fetch(`/api/lotto/purchase/${id}`, { method: 'DELETE' }); await load(); }; const inputStyle: React.CSSProperties = { background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.12)', borderRadius: '.4rem', padding: '.35rem .65rem', color: '#fff', fontSize: '.78rem', width: '100%', outline: 'none', }; if (loading) return (
); return (
{/* 통계 카드 */} {stats && (
INVESTMENT STATS
= 0 ? '+' : ''}${(stats.net / 10000).toFixed(1)}만원`} sub={`회수율 ${stats.return_rate.toFixed(1)}%`} color={stats.net >= 0 ? '#4ade80' : '#f87171'} /> 0 ? `${stats.max_prize.toLocaleString()}원` : '-'} color="#fbbf24" />
)} {/* 구매 기록 테이블 */}
PURCHASE HISTORY
{/* 추가 폼 */} {showAdd && (
회차 *
setAddForm(p => ({ ...p, draw_no: e.target.value }))} />
구매금액
setAddForm(p => ({ ...p, amount: e.target.value }))} />
세트수
setAddForm(p => ({ ...p, sets: e.target.value }))} />
당첨금
setAddForm(p => ({ ...p, prize: e.target.value }))} />
메모
setAddForm(p => ({ ...p, note: e.target.value }))} />
)} {/* 레코드 목록 */} {records.length === 0 ? (
구매 기록이 없습니다. 구매 후 기록을 추가해보세요.
) : (
{['회차', '구매금액', '세트', '당첨금', '손익', '메모', ''].map(h => ( ))} {records.map(rec => { const net = rec.prize - rec.amount; const isEditing = editingId === rec.id; return ( ); })}
{h}
{rec.draw_no}회 {rec.amount.toLocaleString()}원 {rec.sets}세트 {isEditing ? ( setEditPrize(e.target.value)} /> ) : ( 0 ? '#4ade80' : 'rgba(255,255,255,.3)' }}> {rec.prize > 0 ? `${rec.prize.toLocaleString()}원` : '-'} )} 0 ? '#4ade80' : net < 0 ? '#f87171' : 'rgba(255,255,255,.3)', fontFamily: "'JetBrains Mono',monospace", fontWeight: 700 }}> {net > 0 ? '+' : ''}{net.toLocaleString()} {isEditing ? ( setEditNote(e.target.value)} /> ) : ( {rec.note || '-'} )} {isEditing ? (
) : (
)}
)}
); }