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

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

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

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>
       )}