추세검색 설정 수정

frontend/src/components/VirtualTradingPage.tsx

@@ -16,8 +16,10 @@ import {
 import type { Theme, TradeOrderFillRequest } from '../types';
 import type { TickerData } from '../hooks/useMarketTicker';
 import TradeOrderPanel from './TradeOrderPanel';
-import PaperCompactOrderbook from './paper/PaperCompactOrderbook';
+import { OrderbookPanel } from './OrderbookPanel';
 import PaperSplitPanel from './paper/PaperSplitPanel';
+import { useUpbitOrderbook } from '../hooks/useUpbitOrderbook';
+import { useUpbitRecentTrades } from '../hooks/useUpbitRecentTrades';
 import PaperTradeHistoryList from './paper/PaperTradeHistoryList';
 import BuilderPageShell from './layout/BuilderPageShell';
 import VirtualLeftTargetPanel from './virtual/VirtualLeftTargetPanel';
@@ -199,6 +201,23 @@ const VirtualTradingPage: React.FC<Props> = ({
     [tickers, selectedMarket],
   );
 
+  const { orderbook, wsStatus: obWsStatus, spread } = useUpbitOrderbook(selectedMarket);
+  const { trades: recentTrades, strength: tradeStrength } = useUpbitRecentTrades(selectedMarket);
+  const selectedTicker = tickers?.get(selectedMarket);
+  const orderbookPrevClose = selectedTicker
+    ? (selectedTicker.tradePrice ?? 0) - (selectedTicker.changePrice ?? 0)
+    : 0;
+  const orderbookTickerInfo = selectedTicker ? {
+    tradePrice: selectedTicker.tradePrice,
+    changeRate: selectedTicker.changeRate,
+    changePrice: selectedTicker.changePrice,
+    accTradePrice24: selectedTicker.accTradePrice24,
+    accTradeVolume24: selectedTicker.accTradeVolume24,
+    highPrice: selectedTicker.highPrice,
+    lowPrice: selectedTicker.lowPrice,
+    openingPrice: selectedTicker.openingPrice,
+  } : undefined;
+
   const handleSelectMarket = useCallback((market: string) => {
     setSelectedMarket(market);
     const price = tickers?.get(market)?.tradePrice;
@@ -265,11 +284,13 @@ const VirtualTradingPage: React.FC<Props> = ({
     setSession(s => ({ ...s, running: false }));
   }, [targets, session]);
 
-  const handleObPick = useCallback((price: number, rowType: 'ask' | 'bid') => {
-    const side = rowType === 'ask' ? 'buy' : 'sell';
-    const req: TradeOrderFillRequest = { market: selectedMarket, price, side, seq: Date.now() };
-    if (side === 'buy') setFillBuy(req); else setFillSell(req);
+  /** 실시간 차트 우측 호가와 동일: 매수 호가(bid) → 매수 탭, 매도 호가(ask) → 매도 탭 */
+  const handleOrderbookRowClick = useCallback((price: number, rowType: 'ask' | 'bid') => {
     setRightTab('trade');
+    const side = rowType === 'bid' ? 'buy' : 'sell';
+    const req: TradeOrderFillRequest = { market: selectedMarket, price, side, seq: Date.now() };
+    if (side === 'buy') setFillBuy(req);
+    else setFillSell(req);
   }, [selectedMarket]);
 
   const handleTargetStrategyChange = useCallback(async (market: string, strategyId: number | null) => {
@@ -497,35 +518,35 @@ const VirtualTradingPage: React.FC<Props> = ({
               )}
             />
           ) : rightTab === 'orderbook' ? (
-            <PaperSplitPanel
-              className="ptd-split-panel--right"
-              topTitle="매도 호가"
-              bottomTitle="매수 호가"
-              top={(
-                <PaperCompactOrderbook
-                  market={selectedMarket}
-                  onPick={handleObPick}
-                  section="asks"
-                  fillHeight
-                  hideHeader
-                  depth={10}
-                />
-              )}
-              bottom={(
-                <PaperCompactOrderbook
-                  market={selectedMarket}
-                  onPick={handleObPick}
-                  section="bids"
-                  fillHeight
-                  hideHeader
-                  depth={10}
-                />
-              )}
-            />
+            <div className="rsp-ob-stack ptd-ob-stack--fill">
+              <div className="rsp-trade-card rsp-ob-card">
+                <div className="rsp-trade-card-title rsp-ob-card-title">실시간 호가</div>
+                <div className="rsp-trade-card-body rsp-ob-card-body">
+                  <OrderbookPanel
+                    market={selectedMarket}
+                    asks={orderbook.asks}
+                    bids={orderbook.bids}
+                    totalAskSize={orderbook.totalAskSize}
+                    totalBidSize={orderbook.totalBidSize}
+                    wsStatus={obWsStatus}
+                    bestAsk={spread.bestAsk}
+                    bestBid={spread.bestBid}
+                    spread={spread.spread}
+                    spreadPct={spread.pct}
+                    prevClose={orderbookPrevClose}
+                    tickerInfo={orderbookTickerInfo}
+                    recentTrades={recentTrades}
+                    tradeStrength={tradeStrength}
+                    onRowClick={handleOrderbookRowClick}
+                  />
+                </div>
+              </div>
+            </div>
           ) : (
             <PaperTradeHistoryList
               trades={trades}
               strategyNames={strategyNames}
+              tickers={tickers}
               onSelectMarket={handleSelectMarket}
               emptyText="수동·자동 매매 체결 내역이 없습니다."
               className="ptd-trade-history--fill"