업비트 스타일 매수/매도 탭 주문 패널 적용

- TradeTabOrderPanel 신규 생성: 매수|매도|간편주문|거래내역 탭
  - 매수 탭: 빨간 하단 인디케이터, 매도 탭: 파란 하단 인디케이터
  - 간편주문: 시장가 즉시체결 (KRW 금액 입력 + % 버튼)
  - 거래내역: historySlot prop으로 외부 콘텐츠 주입
- VirtualTradingPage: 외부 '거래' 탭 제거 → 거래내역 내부 탭으로 이동
- PaperTradingPage: 미체결/체결/원장 거래내역 내부 탭으로 이동
- TradeNotificationListPage·RightSidePanel: TradeTabOrderPanel 적용
- tradeRightPanel.css: ttop-* · qop-* 스타일 추가

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 { TradeSplitOrderPanel, TradeOrderbookPanelContent, TradeRightPanelBody } from './trade';
+import { TradeTabOrderPanel, 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' | 'history';
+type RightTab = 'trade' | 'orderbook';
 
 interface Props {
   theme?: Theme;
@@ -258,7 +258,7 @@ const VirtualTradingPage: React.FC<Props> = ({
       setTrades(tr);
     } catch { /* ignore */ }
     onPaperOrderFilled?.();
-    if (opts?.focusHistory) setRightTab('history');
+    if (opts?.focusHistory) setRightTab('trade');
   }, [onPaperOrderFilled]);
 
   const handleGlobalDisplayModeChange = useCallback((mode: VirtualCardDisplayMode) => {
@@ -472,12 +472,20 @@ 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')}>
-        거래{trades.length > 0 ? ` (${trades.length})` : ''}
-      </button>
     </div>
   );
 
+  const tradeHistorySlot = (
+    <PaperTradeHistoryList
+      trades={trades}
+      strategyNames={strategyNames}
+      tickers={tickers}
+      onSelectMarket={handleSelectMarket}
+      emptyText="수동·자동 매매 체결 내역이 없습니다."
+      className="ptd-trade-history--fill"
+    />
+  );
+
   return (
     <BuilderPageShell
       theme={theme}
@@ -564,7 +572,7 @@ const VirtualTradingPage: React.FC<Props> = ({
       right={(
         <TradeRightPanelBody anchorRef={orderAnchorRef} embeddedInShell>
           {rightTab === 'trade' ? (
-            <TradeSplitOrderPanel
+            <TradeTabOrderPanel
               market={selectedMarket}
               tradePrice={tradePrice}
               availableKrw={coerceFiniteNumber(summary?.cashBalance) ?? 0}
@@ -575,8 +583,9 @@ const VirtualTradingPage: React.FC<Props> = ({
               paperTradingEnabled={paperTradingEnabled}
               paperAutoTradeEnabled={paperAutoTradeEnabled}
               onPaperOrderFilled={() => void refreshPaperData({ focusHistory: true })}
+              historySlot={tradeHistorySlot}
             />
-          ) : rightTab === 'orderbook' ? (
+          ) : (
             <TradeOrderbookPanelContent
               market={selectedMarket}
               asks={orderbook.asks}
@@ -594,15 +603,6 @@ 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>
       )}