모의투자 관리 기능 추가

frontend/src/components/TradeNotificationListPage.tsx

@@ -7,9 +7,12 @@ import type { TickerData } from '../hooks/useMarketTicker';
 import { useTradeNotification, type TradeNotificationItem } from '../contexts/TradeNotificationContext';
 import { loadPaperSummary, type PaperSummaryDto } from '../utils/backendApi';
 import { coerceFiniteNumber } from '../utils/safeFormat';
-import TradeOrderPanel from './TradeOrderPanel';
-import { OrderbookPanel } from './OrderbookPanel';
-import PaperSplitPanel from './paper/PaperSplitPanel';
+import {
+  TradeSplitOrderPanel,
+  TradeOrderbookPanelContent,
+  TradeRightPanelTabs,
+  TradeRightPanelBody,
+} from './trade';
 import { useUpbitOrderbook } from '../hooks/useUpbitOrderbook';
 import { useUpbitRecentTrades } from '../hooks/useUpbitRecentTrades';
 import { useAppSettings } from '../hooks/useAppSettings';
@@ -504,93 +507,52 @@ export const TradeNotificationListPage: React.FC<Props> = ({
             </svg>
           </button>
           <aside
-            className={`tnl-right${rightOpen ? ' tnl-right--open' : ''}`}
+            className={`tnl-right trade-right-panel${rightOpen ? ' tnl-right--open' : ''}`}
             aria-label="매매·호가"
             aria-hidden={!rightOpen}
           >
-            <div className="bps-right-tabs tnl-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>
-            <div className="tnl-right-body ptd-right-body" ref={orderAnchorRef}>
+            <TradeRightPanelTabs
+              activeTab={rightTab}
+              onTabChange={setRightTab}
+              className="tnl-right-tabs"
+            />
+            <TradeRightPanelBody
+              anchorRef={orderAnchorRef}
+              bodyClassName="tnl-right-body"
+            >
               {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={m => handleSelectMarket(m)}
-                        showSymbolField
-                        paperTradingEnabled={paperTradingEnabled}
-                        paperAutoTradeEnabled={paperAutoTradeEnabled}
-                        onPaperOrderFilled={() => void refreshPaperData()}
-                      />
-                    </div>
-                  )}
-                  bottom={(
-                    <div className="ptd-order-card">
-                      <TradeOrderPanel
-                        side="sell"
-                        market={selectedMarket}
-                        tradePrice={tradePrice}
-                        availableCoinQty={posQty}
-                        fillRequest={fillSell}
-                        onMarketSelect={m => handleSelectMarket(m)}
-                        showSymbolField={false}
-                        paperTradingEnabled={paperTradingEnabled}
-                        paperAutoTradeEnabled={paperAutoTradeEnabled}
-                        onPaperOrderFilled={() => void refreshPaperData()}
-                      />
-                    </div>
-                  )}
+                <TradeSplitOrderPanel
+                  market={selectedMarket}
+                  tradePrice={tradePrice}
+                  availableKrw={coerceFiniteNumber(summary?.cashBalance) ?? 0}
+                  fillBuy={fillBuy}
+                  fillSell={fillSell}
+                  searchAnchorRef={orderAnchorRef}
+                  onMarketSelect={m => handleSelectMarket(m)}
+                  paperTradingEnabled={paperTradingEnabled}
+                  paperAutoTradeEnabled={paperAutoTradeEnabled}
+                  onPaperOrderFilled={() => void refreshPaperData()}
                 />
               ) : (
-                <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}
+                />
               )}
-            </div>
+            </TradeRightPanelBody>
           </aside>
         </div>
       </div>