모의투자 관리 기능 추가

frontend/src/components/VirtualTradingPage.tsx

@@ -15,9 +15,7 @@ import {
 } from '../utils/backendApi';
 import type { Theme, TradeOrderFillRequest } from '../types';
 import type { TickerData } from '../hooks/useMarketTicker';
-import TradeOrderPanel from './TradeOrderPanel';
-import { OrderbookPanel } from './OrderbookPanel';
-import PaperSplitPanel from './paper/PaperSplitPanel';
+import { TradeSplitOrderPanel, TradeOrderbookPanelContent, TradeRightPanelBody } from './trade';
 import { useUpbitOrderbook } from '../hooks/useUpbitOrderbook';
 import { useUpbitRecentTrades } from '../hooks/useUpbitRecentTrades';
 import PaperTradeHistoryList from './paper/PaperTradeHistoryList';
@@ -423,7 +421,7 @@ const VirtualTradingPage: React.FC<Props> = ({
       leftDefaultWidth={380}
       leftCollapsedStorageKey="vtd-left-open"
       rightStorageKey="vtd-right-width"
-      rightDefaultWidth={380}
+      rightDefaultWidth={440}
       rightCollapsedStorageKey="vtd-right-open"
       left={(
         <VirtualLeftTargetPanel
@@ -466,71 +464,38 @@ const VirtualTradingPage: React.FC<Props> = ({
       )}
       rightTabs={rightTabs}
       right={(
-        <div className="ptd-right-body" ref={orderAnchorRef}>
+        <TradeRightPanelBody anchorRef={orderAnchorRef} embeddedInShell>
           {rightTab === 'trade' ? (
-            <PaperSplitPanel
-              className="ptd-split-panel--right"
-              topTitle="매수"
-              bottomTitle="매도"
-              top={(
-                <div className="ptd-order-card">
-                  <TradeOrderPanel
-                    side="buy"
-                    market={selectedMarket}
-                    tradePrice={tradePrice}
-                    availableKrw={coerceFiniteNumber(summary?.cashBalance) ?? 0}
-                    fillRequest={fillBuy}
-                    searchAnchorRef={orderAnchorRef}
-                    onMarketSelect={handleSelectMarket}
-                    showSymbolField
-                    paperTradingEnabled={paperTradingEnabled}
-                    paperAutoTradeEnabled={paperAutoTradeEnabled}
-                    onPaperOrderFilled={() => void refreshPaperData({ focusHistory: true })}
-                  />
-                </div>
-              )}
-              bottom={(
-                <div className="ptd-order-card">
-                  <TradeOrderPanel
-                    side="sell"
-                    market={selectedMarket}
-                    tradePrice={tradePrice}
-                    availableCoinQty={posQty}
-                    fillRequest={fillSell}
-                    onMarketSelect={handleSelectMarket}
-                    showSymbolField={false}
-                    paperTradingEnabled={paperTradingEnabled}
-                    paperAutoTradeEnabled={paperAutoTradeEnabled}
-                    onPaperOrderFilled={() => void refreshPaperData({ focusHistory: true })}
-                  />
-                </div>
-              )}
+            <TradeSplitOrderPanel
+              market={selectedMarket}
+              tradePrice={tradePrice}
+              availableKrw={coerceFiniteNumber(summary?.cashBalance) ?? 0}
+              fillBuy={fillBuy}
+              fillSell={fillSell}
+              searchAnchorRef={orderAnchorRef}
+              onMarketSelect={handleSelectMarket}
+              paperTradingEnabled={paperTradingEnabled}
+              paperAutoTradeEnabled={paperAutoTradeEnabled}
+              onPaperOrderFilled={() => void refreshPaperData({ focusHistory: true })}
             />
           ) : rightTab === 'orderbook' ? (
-            <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>
+            <TradeOrderbookPanelContent
+              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 ?? undefined}
+              onRowClick={handleOrderbookRowClick}
+            />
           ) : (
             <PaperTradeHistoryList
               trades={trades}
@@ -541,7 +506,7 @@ const VirtualTradingPage: React.FC<Props> = ({
               className="ptd-trade-history--fill"
             />
           )}
-        </div>
+        </TradeRightPanelBody>
       )}
     />
   );