가상투자 설정 수정

2026-05-25 22:30:54 +09:00
parent cae1c3a624
commit 1e950c7db4
24 changed files with 1015 additions and 362 deletions
@@ -0,0 +1,87 @@
+import React from 'react';
+import type { PaperTradeDto } from '../../utils/backendApi';
+import { fmtKrw } from '../TradeOrderPanel';
+
+function coinCode(symbol: string): string {
+  return symbol.replace(/^KRW-/, '');
+}
+
+function fmtTradeTime(iso: string | null | undefined): string {
+  if (!iso) return '—';
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso.slice(0, 19).replace('T', ' ');
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${pad(d.getMonth() + 1)}/${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+
+function sourceLabel(source: string | null | undefined): string {
+  if (source === 'STRATEGY') return '자동';
+  return '수동';
+}
+
+interface Props {
+  trades: PaperTradeDto[];
+  strategyNames?: Record<number, string>;
+  emptyText?: string;
+  className?: string;
+  onSelectMarket?: (market: string) => void;
+}
+
+const PaperTradeHistoryList: React.FC<Props> = ({
+  trades,
+  strategyNames = {},
+  emptyText = '거래 내역이 없습니다.',
+  className = '',
+  onSelectMarket,
+}) => (
+  <div className={`ptd-trade-history${className ? ` ${className}` : ''}`}>
+    {trades.length === 0 ? (
+      <p className="ptd-muted ptd-trade-history-empty">{emptyText}</p>
+    ) : (
+      <div className="ptd-trade-history-scroll">
+        <table className="ptd-table ptd-table--compact ptd-table--trades">
+          <thead>
+            <tr>
+              <th>시간</th>
+              <th>종목</th>
+              <th>유형</th>
+              <th>구분</th>
+              <th>체결가</th>
+              <th>수량</th>
+              <th>금액</th>
+            </tr>
+          </thead>
+          <tbody>
+            {trades.map(t => {
+              const strategyName = t.strategyId != null
+                ? (strategyNames[t.strategyId] ?? `#${t.strategyId}`)
+                : null;
+              return (
+                <tr
+                  key={t.id}
+                  className={onSelectMarket ? 'ptd-row--click' : undefined}
+                  onClick={onSelectMarket ? () => onSelectMarket(t.symbol) : undefined}
+                  title={strategyName ? `전략: ${strategyName}` : undefined}
+                >
+                  <td className="ptd-time">{fmtTradeTime(t.createdAt)}</td>
+                  <td>{coinCode(t.symbol)}</td>
+                  <td className={t.side === 'BUY' ? 'up' : 'down'}>
+                    {t.side === 'BUY' ? '매수' : '매도'}
+                  </td>
+                  <td className={t.source === 'STRATEGY' ? 'ptd-source--auto' : 'ptd-source--manual'}>
+                    {sourceLabel(t.source)}
+                  </td>
+                  <td>{fmtKrw(t.price)}</td>
+                  <td>{t.quantity}</td>
+                  <td>{fmtKrw(t.netAmount)}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    )}
+  </div>
+);
+
+export default PaperTradeHistoryList;