매매탭 주문패널을 스플릿 카드 레이아웃으로 복원 (상단 매수, 하단 매도)

- TradeTabOrderPanel(탭 방식) → TradeSplitOrderPanel(카드 분리 방식)으로 전환
- VirtualTradingPage·PaperTradingPage에 '거래' 외부 탭 복원
- 거래 내역(미체결/체결/원장)을 '거래' 탭 하위로 원복

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/PaperTradingPage.tsx

@@ -23,7 +23,7 @@ import PaperPendingOrdersList from './paper/PaperPendingOrdersList';
 import PaperLedgerTab from './paper/PaperLedgerTab';
 import PaperAssetTrendChart from './paper/PaperAssetTrendChart';
 import { computePaperMetrics } from '../utils/paperMetrics';
-import { TradeTabOrderPanel, TradeOrderbookPanelContent, TradeRightPanelBody } from './trade';
+import { TradeSplitOrderPanel, TradeOrderbookPanelContent, TradeRightPanelBody } from './trade';
 import type { Theme, TradeOrderFillRequest } from '../types';
 import PaperAnalysisChart from './paper/PaperAnalysisChart';
 import PaperLeftStrategyTab from './paper/PaperLeftStrategyTab';
@@ -38,7 +38,7 @@ import { formatVirtualTargetOptionLabel } from '../utils/virtualTargetNames';
 
 type HistoryTab = 'open' | 'recent' | 'ledger';
 type CenterTab = 'invest' | 'chart';
-type RightTab = 'trade' | 'orderbook';
+type RightTab = 'trade' | 'orderbook' | 'history';
 type LeftTab = 'strategy' | 'settings';
 
 interface Props {
@@ -140,7 +140,7 @@ const PaperTradingPage: React.FC<Props> = ({
     } finally {
       setInitialLoading(false);
     }
-    if (opts?.focusHistory) setRightTab('trade');
+    if (opts?.focusHistory) setRightTab('history');
   }, []);
 
   useEffect(() => {
@@ -293,33 +293,7 @@ const PaperTradingPage: React.FC<Props> = ({
     <div className="bps-right-tabs">
       <button type="button" className={`bps-right-tab${rightTab === 'trade' ? ' bps-right-tab--on' : ''}`} onClick={() => setRightTab('trade')}>매매</button>
       <button type="button" className={`bps-right-tab${rightTab === 'orderbook' ? ' bps-right-tab--on' : ''}`} onClick={() => setRightTab('orderbook')}>호가</button>
-    </div>
-  );
-
-  const tradeHistorySlot = (
-    <div className="ptd-right-history">
-      <div className="ptd-tabs ptd-tabs--history">
-        <button type="button" className={`ptd-tab${historyTab === 'open' ? ' active' : ''}`} onClick={() => setHistoryTab('open')}>미체결</button>
-        <button type="button" className={`ptd-tab${historyTab === 'recent' ? ' active' : ''}`} onClick={() => setHistoryTab('recent')}>체결{trades.length > 0 ? ` (${trades.length})` : ''}</button>
-        <button type="button" className={`ptd-tab${historyTab === 'ledger' ? ' active' : ''}`} onClick={() => setHistoryTab('ledger')}>원장</button>
-      </div>
-      <div className="ptd-right-history-body">
-        {historyTab === 'open' ? (
-          <PaperPendingOrdersList orders={pendingOrders} onChanged={() => void loadData()} />
-        ) : historyTab === 'ledger' ? (
-          <PaperLedgerTab refreshKey={dataRefreshKey} />
-        ) : (
-          <PaperTradeHistoryList
-            trades={trades}
-            strategyNames={strategyNames}
-            tickers={tickers}
-            selectedTradeId={selectedTradeId}
-            onSelectTrade={handleTradeHistorySelect}
-            emptyText="체결 내역이 없습니다."
-            className="ptd-trade-history--fill"
-          />
-        )}
-      </div>
+      <button type="button" className={`bps-right-tab${rightTab === 'history' ? ' bps-right-tab--on' : ''}`} onClick={() => setRightTab('history')}>거래</button>
     </div>
   );
 
@@ -445,7 +419,7 @@ const PaperTradingPage: React.FC<Props> = ({
       right={(
         <TradeRightPanelBody anchorRef={orderAnchorRef} embeddedInShell>
           {rightTab === 'trade' ? (
-            <TradeTabOrderPanel
+            <TradeSplitOrderPanel
               market={selectedMarket}
               tradePrice={tradePrice}
               availableKrw={orderableCash}
@@ -457,9 +431,8 @@ const PaperTradingPage: React.FC<Props> = ({
               paperTradingEnabled={paperTradingEnabled}
               paperAutoTradeEnabled={paperAutoTradeEnabled}
               onPaperOrderFilled={() => void loadData({ focusHistory: true })}
-              historySlot={tradeHistorySlot}
             />
-          ) : (
+          ) : rightTab === 'orderbook' ? (
             <TradeOrderbookPanelContent
               market={selectedMarket}
               asks={orderbook.asks}
@@ -477,6 +450,31 @@ const PaperTradingPage: React.FC<Props> = ({
               tradeStrength={tradeStrength ?? undefined}
               onRowClick={handleOrderbookRowClick}
             />
+          ) : (
+            <div className="ptd-right-history">
+              <div className="ptd-tabs ptd-tabs--history">
+                <button type="button" className={`ptd-tab${historyTab === 'open' ? ' active' : ''}`} onClick={() => setHistoryTab('open')}>미체결</button>
+                <button type="button" className={`ptd-tab${historyTab === 'recent' ? ' active' : ''}`} onClick={() => setHistoryTab('recent')}>체결{trades.length > 0 ? ` (${trades.length})` : ''}</button>
+                <button type="button" className={`ptd-tab${historyTab === 'ledger' ? ' active' : ''}`} onClick={() => setHistoryTab('ledger')}>원장</button>
+              </div>
+              <div className="ptd-right-history-body">
+                {historyTab === 'open' ? (
+                  <PaperPendingOrdersList orders={pendingOrders} onChanged={() => void loadData()} />
+                ) : historyTab === 'ledger' ? (
+                  <PaperLedgerTab refreshKey={dataRefreshKey} />
+                ) : (
+                  <PaperTradeHistoryList
+                    trades={trades}
+                    strategyNames={strategyNames}
+                    tickers={tickers}
+                    selectedTradeId={selectedTradeId}
+                    onSelectTrade={handleTradeHistorySelect}
+                    emptyText="체결 내역이 없습니다."
+                    className="ptd-trade-history--fill"
+                  />
+                )}
+              </div>
+            </div>
           )}
         </TradeRightPanelBody>
       )}

frontend/src/components/RightSidePanel.tsx

@@ -5,7 +5,7 @@
  */
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import {
-  TradeTabOrderPanel,
+  TradeSplitOrderPanel,
   TradeOrderbookPanelContent,
   TradeRightPanelTabs,
   TradeRightPanelBody,
@@ -158,7 +158,7 @@ const RightSidePanel: React.FC<RightSidePanelProps> = ({
 
         <TradeRightPanelBody anchorRef={tradeSectionRef} className="rsp-body-wrap">
           {activeTab === 'trade' && (
-            <TradeTabOrderPanel
+            <TradeSplitOrderPanel
               market={market}
               tradePrice={tradePrice}
               availableKrw={availableKrw}
@@ -169,7 +169,6 @@ const RightSidePanel: React.FC<RightSidePanelProps> = ({
               paperTradingEnabled={paperTradingEnabled}
               paperAutoTradeEnabled={paperAutoTradeEnabled}
               onPaperOrderFilled={onPaperOrderFilled}
-              hideHistory
             />
           )}
 

frontend/src/components/TradeNotificationListPage.tsx

@@ -23,7 +23,7 @@ import BacktestAnalysisReportModal from './backtest/BacktestAnalysisReportModal'
 import type { BacktestAnalysisReportModel } from './backtest/BacktestAnalysisReportModal';
 import { coerceFiniteNumber } from '../utils/safeFormat';
 import {
-  TradeTabOrderPanel,
+  TradeSplitOrderPanel,
   TradeOrderbookPanelContent,
   TradeRightPanelTabs,
   TradeRightPanelBody,
@@ -753,7 +753,7 @@ export const TradeNotificationListPage: React.FC<Props> = ({
               bodyClassName="tnl-right-body"
             >
               {rightTab === 'trade' ? (
-                <TradeTabOrderPanel
+                <TradeSplitOrderPanel
                   market={selectedMarket}
                   tradePrice={tradePrice}
                   availableKrw={coerceFiniteNumber(summary?.cashBalance) ?? 0}
@@ -764,7 +764,6 @@ export const TradeNotificationListPage: React.FC<Props> = ({
                   paperTradingEnabled={paperTradingEnabled}
                   paperAutoTradeEnabled={paperAutoTradeEnabled}
                   onPaperOrderFilled={() => void refreshPaperData()}
-                  hideHistory
                 />
               ) : (
                 <TradeOrderbookPanelContent

frontend/src/components/VirtualTradingPage.tsx

@@ -15,7 +15,7 @@ import {
 } from '../utils/backendApi';
 import type { Theme, TradeOrderFillRequest } from '../types';
 import type { TickerData } from '../hooks/useMarketTicker';
-import { TradeTabOrderPanel, TradeOrderbookPanelContent, TradeRightPanelBody } from './trade';
+import { TradeSplitOrderPanel, TradeOrderbookPanelContent, TradeRightPanelBody } from './trade';
 import { useUpbitOrderbook } from '../hooks/useUpbitOrderbook';
 import { useUpbitRecentTrades } from '../hooks/useUpbitRecentTrades';
 import PaperTradeHistoryList from './paper/PaperTradeHistoryList';
@@ -72,7 +72,7 @@ import {
 } from '../utils/virtualTargetHydrate';
 import '../styles/virtualTradingDashboard.css';
 
-type RightTab = 'trade' | 'orderbook';
+type RightTab = 'trade' | 'orderbook' | 'history';
 
 interface Props {
   theme?: Theme;
@@ -258,7 +258,7 @@ const VirtualTradingPage: React.FC<Props> = ({
       setTrades(tr);
     } catch { /* ignore */ }
     onPaperOrderFilled?.();
-    if (opts?.focusHistory) setRightTab('trade');
+    if (opts?.focusHistory) setRightTab('history');
   }, [onPaperOrderFilled]);
 
   const handleGlobalDisplayModeChange = useCallback((mode: VirtualCardDisplayMode) => {
@@ -472,20 +472,10 @@ const VirtualTradingPage: React.FC<Props> = ({
     <div className="bps-right-tabs">
       <button type="button" className={`bps-right-tab${rightTab === 'trade' ? ' bps-right-tab--on' : ''}`} onClick={() => setRightTab('trade')}>매매</button>
       <button type="button" className={`bps-right-tab${rightTab === 'orderbook' ? ' bps-right-tab--on' : ''}`} onClick={() => setRightTab('orderbook')}>호가</button>
+      <button type="button" className={`bps-right-tab${rightTab === 'history' ? ' bps-right-tab--on' : ''}`} onClick={() => setRightTab('history')}>거래</button>
     </div>
   );
 
-  const tradeHistorySlot = (
-    <PaperTradeHistoryList
-      trades={trades}
-      strategyNames={strategyNames}
-      tickers={tickers}
-      onSelectMarket={handleSelectMarket}
-      emptyText="수동·자동 매매 체결 내역이 없습니다."
-      className="ptd-trade-history--fill"
-    />
-  );
-
   return (
     <BuilderPageShell
       theme={theme}
@@ -572,7 +562,7 @@ const VirtualTradingPage: React.FC<Props> = ({
       right={(
         <TradeRightPanelBody anchorRef={orderAnchorRef} embeddedInShell>
           {rightTab === 'trade' ? (
-            <TradeTabOrderPanel
+            <TradeSplitOrderPanel
               market={selectedMarket}
               tradePrice={tradePrice}
               availableKrw={coerceFiniteNumber(summary?.cashBalance) ?? 0}
@@ -583,9 +573,8 @@ const VirtualTradingPage: React.FC<Props> = ({
               paperTradingEnabled={paperTradingEnabled}
               paperAutoTradeEnabled={paperAutoTradeEnabled}
               onPaperOrderFilled={() => void refreshPaperData({ focusHistory: true })}
-              historySlot={tradeHistorySlot}
             />
-          ) : (
+          ) : rightTab === 'orderbook' ? (
             <TradeOrderbookPanelContent
               market={selectedMarket}
               asks={orderbook.asks}
@@ -603,6 +592,15 @@ const VirtualTradingPage: React.FC<Props> = ({
               tradeStrength={tradeStrength ?? undefined}
               onRowClick={handleOrderbookRowClick}
             />
+          ) : (
+            <PaperTradeHistoryList
+              trades={trades}
+              strategyNames={strategyNames}
+              tickers={tickers}
+              onSelectMarket={handleSelectMarket}
+              emptyText="수동·자동 매매 체결 내역이 없습니다."
+              className="ptd-trade-history--fill"
+            />
           )}
         </TradeRightPanelBody>
       )}