모의투자 관리 기능 추가

2026-05-31 03:47:07 +09:00
parent 9d7dddfa57
commit 16d0e2c226
78 changed files with 4688 additions and 972 deletions
@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import { loadPaperLedger, type PaperLedgerEntryDto } from '../../utils/backendApi';
+import { fmtKrw } from '../TradeOrderPanel';
+
+const ENTRY_LABELS: Record<string, string> = {
+  INITIAL: '초기 예탁',
+  BUY_SETTLE: '매수 결제',
+  SELL_SETTLE: '매도 입금',
+  RESET: '계좌 초기화',
+  FEE: '수수료',
+  ADJUST: '조정',
+};
+
+interface Props {
+  refreshKey?: number;
+}
+
+const PaperLedgerTab: React.FC<Props> = ({ refreshKey = 0 }) => {
+  const [entries, setEntries] = useState<PaperLedgerEntryDto[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    void loadPaperLedger({ page: 0, size: 50 }).then(page => {
+      if (!cancelled) {
+        setEntries(page.content);
+        setLoading(false);
+      }
+    });
+    return () => { cancelled = true; };
+  }, [refreshKey]);
+
+  if (loading) return <p className="ptd-muted">원장 로딩…</p>;
+  if (!entries.length) return <p className="ptd-muted">자금 변동 내역이 없습니다.</p>;
+
+  return (
+    <table className="ptd-table ptd-table--compact">
+      <thead>
+        <tr>
+          <th>시각</th>
+          <th>유형</th>
+          <th>금액</th>
+          <th>예수금</th>
+          <th>종목</th>
+        </tr>
+      </thead>
+      <tbody>
+        {entries.map(e => (
+          <tr key={e.id}>
+            <td className="ptd-time">{e.createdAt?.slice(5, 16).replace('T', ' ') ?? '—'}</td>
+            <td>{ENTRY_LABELS[e.entryType] ?? e.entryType}</td>
+            <td className={e.amount >= 0 ? 'up' : 'down'}>{e.amount >= 0 ? '+' : ''}{fmtKrw(e.amount)}</td>
+            <td>{fmtKrw(e.cashAfter)}</td>
+            <td>{e.symbol?.replace(/^KRW-/, '') ?? '—'}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default PaperLedgerTab;