전략알림 수정

frontend/src/components/TradeNotificationListPage.tsx

@@ -1,18 +1,52 @@
 /**
- * 매매 시그널 알림 목록 화면
+ * 매매 시그널 알림 목록 화면 — 좌: 알림 목록, 우: 매매·호가 (가상매매 우측 패널과 동일)
  */
-import React, { useCallback } from 'react';
-import type { Theme } from '../types';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { Theme, TradeOrderFillRequest } from '../types';
+import type { TickerData } from '../hooks/useMarketTicker';
 import { useTradeNotification, type TradeNotificationItem } from '../contexts/TradeNotificationContext';
 import { buildSignalDetailRows, formatSignalPrice, getSignalHeadline } from '../utils/tradeSignalDisplay';
+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 { useUpbitOrderbook } from '../hooks/useUpbitOrderbook';
+import { useUpbitRecentTrades } from '../hooks/useUpbitRecentTrades';
+import '../styles/virtualTradingDashboard.css';
+
+type RightTab = 'trade' | 'orderbook';
 
 interface Props {
   theme: Theme;
   onGoToChart: (market: string) => void;
+  tickers?: Map<string, TickerData>;
+  defaultMarket?: string;
+  paperTradingEnabled?: boolean;
+  paperAutoTradeEnabled?: boolean;
+  onPaperOrderFilled?: () => void;
 }
 
+function fillBothSides(
+  market: string,
+  price: number,
+  setFillBuy: React.Dispatch<React.SetStateAction<TradeOrderFillRequest | null>>,
+  setFillSell: React.Dispatch<React.SetStateAction<TradeOrderFillRequest | null>>,
+) {
+  const seq = Date.now();
+  setFillBuy({ market, price, side: 'buy', seq });
+  setFillSell({ market, price, side: 'sell', seq: seq + 1 });
+}
 
-export const TradeNotificationListPage: React.FC<Props> = ({ theme, onGoToChart }) => {
+export const TradeNotificationListPage: React.FC<Props> = ({
+  theme,
+  onGoToChart,
+  tickers,
+  defaultMarket = 'KRW-BTC',
+  paperTradingEnabled = true,
+  paperAutoTradeEnabled = false,
+  onPaperOrderFilled,
+}) => {
   const {
     allNotifications,
     unreadCount,
@@ -22,104 +56,278 @@ export const TradeNotificationListPage: React.FC<Props> = ({ theme, onGoToChart
     refreshHistory,
   } = useTradeNotification();
 
-  const [filter, setFilter] = React.useState<'all' | 'unread'>('all');
+  const [filter, setFilter] = useState<'all' | 'unread'>('all');
+  const [selectedMarket, setSelectedMarket] = useState(defaultMarket);
+  const [selectedNotifyId, setSelectedNotifyId] = useState<string | null>(null);
+  const [rightTab, setRightTab] = useState<RightTab>('trade');
+  const [fillBuy, setFillBuy] = useState<TradeOrderFillRequest | null>(null);
+  const [fillSell, setFillSell] = useState<TradeOrderFillRequest | null>(null);
+  const [summary, setSummary] = useState<PaperSummaryDto | null>(null);
+  const orderAnchorRef = useRef<HTMLDivElement>(null);
+
+  const refreshPaperData = useCallback(async () => {
+    try {
+      const s = await loadPaperSummary();
+      setSummary(s);
+    } catch {
+      setSummary(null);
+    }
+    onPaperOrderFilled?.();
+  }, [onPaperOrderFilled]);
+
+  useEffect(() => {
+    void refreshPaperData();
+  }, [refreshPaperData]);
+
+  const tradePrice = useMemo(
+    () => coerceFiniteNumber(tickers?.get(selectedMarket)?.tradePrice),
+    [tickers, selectedMarket],
+  );
+
+  const posQty = useMemo(() => {
+    const p = summary?.positions?.find(x => x.symbol === selectedMarket);
+    return coerceFiniteNumber(p?.quantity) ?? 0;
+  }, [summary?.positions, 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, price?: number) => {
+    setSelectedMarket(market);
+    const p = price ?? coerceFiniteNumber(tickers?.get(market)?.tradePrice);
+    if (p != null && p > 0) {
+      fillBothSides(market, p, setFillBuy, setFillSell);
+    }
+    setRightTab('trade');
+  }, [tickers]);
+
+  const handleNotificationSelect = useCallback((item: TradeNotificationItem) => {
+    if (!item.isRead) markAsRead(item.id);
+    setSelectedNotifyId(item.id);
+    const price = coerceFiniteNumber(item.price);
+    if (price != null && price > 0) {
+      fillBothSides(item.market, price, setFillBuy, setFillSell);
+    } else {
+      handleSelectMarket(item.market);
+    }
+    setRightTab('trade');
+  }, [markAsRead, handleSelectMarket]);
+
+  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 filtered = filter === 'unread'
     ? allNotifications.filter(n => !n.isRead)
     : allNotifications;
 
-  const handleRow = useCallback((item: TradeNotificationItem) => {
-    if (!item.isRead) markAsRead(item.id);
-    openDetail(item, { centered: true });
-  }, [markAsRead, openDetail]);
-
   return (
-    <div className={`tnl-page app ${theme}`}>
-      <div className="tnl-header">
-        <h1 className="tnl-title">매매 시그널 알림</h1>
-        <p className="tnl-sub">
-          실시간 전략 실행 시 발생한 BUY/SELL 신호입니다. 화면·종목과 무관하게 수신됩니다.
-        </p>
-        <div className="tnl-toolbar">
-          <span className="tnl-chip tnl-chip--warn">미확인 {unreadCount}건</span>
-          <div className="tnl-filter">
+    <div className={`tnl-page tnl-page--with-right bps-page--vtd app ${theme}`}>
+      <div className="tnl-body">
+        <div className="tnl-main">
+          <div className="tnl-header">
+            <h1 className="tnl-title">매매 시그널 알림</h1>
+            <p className="tnl-sub">
+              알림을 선택하면 우측 매매 패널에 종목·가격이 자동 입력됩니다.
+            </p>
+            <div className="tnl-toolbar">
+              <span className="tnl-chip tnl-chip--warn">미확인 {unreadCount}건</span>
+              <div className="tnl-filter">
+                <button
+                  type="button"
+                  className={filter === 'all' ? 'tnl-filter-btn--active' : ''}
+                  onClick={() => setFilter('all')}
+                >
+                  전체
+                </button>
+                <button
+                  type="button"
+                  className={filter === 'unread' ? 'tnl-filter-btn--active' : ''}
+                  onClick={() => setFilter('unread')}
+                >
+                  미확인
+                </button>
+              </div>
+              <button type="button" className="tnl-btn" onClick={() => void refreshHistory()}>
+                새로고침
+              </button>
+              {unreadCount > 0 && (
+                <button type="button" className="tnl-btn tnl-btn--primary" onClick={markAllAsRead}>
+                  모두 읽음
+                </button>
+              )}
+            </div>
+          </div>
+
+          <div className="tnl-list-wrap">
+            {filtered.length === 0 ? (
+              <div className="tnl-empty">표시할 알림이 없습니다.</div>
+            ) : (
+              <ul className="tnl-list">
+                {filtered.map(item => {
+                  const isBuy = item.signalType === 'BUY';
+                  const detailRows = buildSignalDetailRows(item);
+                  const isSelected = selectedNotifyId === item.id;
+                  return (
+                    <li
+                      key={item.id}
+                      className={`tnl-row ${!item.isRead ? 'tnl-row--unread' : ''}${isSelected ? ' tnl-row--selected' : ''}`}
+                    >
+                      <button
+                        type="button"
+                        className="tnl-row-main"
+                        onClick={() => handleNotificationSelect(item)}
+                      >
+                        <span className={`tnl-signal ${isBuy ? 'tnl-signal--buy' : 'tnl-signal--sell'}`}>
+                          {item.signalType}
+                        </span>
+                        <span className="tnl-row-body">
+                          <span className="tnl-row-title">{getSignalHeadline(item)}</span>
+                          <span className="tnl-row-price">{formatSignalPrice(item.price)}</span>
+                          <span className="tnl-row-detail-grid">
+                            {detailRows.map(row => (
+                              <span key={row.label} className="tnl-row-detail-item">
+                                <span className="tnl-row-detail-lbl">{row.label}</span>
+                                <span className="tnl-row-detail-val">{row.value}</span>
+                              </span>
+                            ))}
+                          </span>
+                        </span>
+                        {!item.isRead && <span className="tnl-dot" aria-hidden />}
+                      </button>
+                      <button
+                        type="button"
+                        className="tnl-row-action"
+                        title="상세 보기"
+                        onClick={() => {
+                          if (!item.isRead) markAsRead(item.id);
+                          openDetail(item, { centered: true });
+                        }}
+                      >
+                        상세
+                      </button>
+                      <button
+                        type="button"
+                        className="tnl-row-chart"
+                        title="차트로 이동"
+                        onClick={() => {
+                          markAsRead(item.id);
+                          onGoToChart(item.market);
+                        }}
+                      >
+                        차트
+                      </button>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </div>
+        </div>
+
+        <aside className="tnl-right" aria-label="매매·호가">
+          <div className="bps-right-tabs tnl-right-tabs">
             <button
               type="button"
-              className={filter === 'all' ? 'tnl-filter-btn--active' : ''}
-              onClick={() => setFilter('all')}
+              className={`bps-right-tab${rightTab === 'trade' ? ' bps-right-tab--on' : ''}`}
+              onClick={() => setRightTab('trade')}
             >
-              전체
+              매매
             </button>
             <button
               type="button"
-              className={filter === 'unread' ? 'tnl-filter-btn--active' : ''}
-              onClick={() => setFilter('unread')}
+              className={`bps-right-tab${rightTab === 'orderbook' ? ' bps-right-tab--on' : ''}`}
+              onClick={() => setRightTab('orderbook')}
             >
-              미확인
+              호가
             </button>
           </div>
-          <button type="button" className="tnl-btn" onClick={() => void refreshHistory()}>
-            새로고침
-          </button>
-          {unreadCount > 0 && (
-            <button type="button" className="tnl-btn tnl-btn--primary" onClick={markAllAsRead}>
-              모두 읽음
-            </button>
-          )}
-        </div>
-      </div>
-
-      <div className="tnl-list-wrap">
-        {filtered.length === 0 ? (
-          <div className="tnl-empty">표시할 알림이 없습니다.</div>
-        ) : (
-          <ul className="tnl-list">
-            {filtered.map(item => {
-              const isBuy = item.signalType === 'BUY';
-              const detailRows = buildSignalDetailRows(item);
-              return (
-                <li
-                  key={item.id}
-                  className={`tnl-row ${!item.isRead ? 'tnl-row--unread' : ''}`}
-                >
-                  <button
-                    type="button"
-                    className="tnl-row-main"
-                    onClick={() => handleRow(item)}
-                  >
-                    <span className={`tnl-signal ${isBuy ? 'tnl-signal--buy' : 'tnl-signal--sell'}`}>
-                      {item.signalType}
-                    </span>
-                    <span className="tnl-row-body">
-                      <span className="tnl-row-title">{getSignalHeadline(item)}</span>
-                      <span className="tnl-row-price">{formatSignalPrice(item.price)}</span>
-                      <span className="tnl-row-detail-grid">
-                        {detailRows.map(row => (
-                          <span key={row.label} className="tnl-row-detail-item">
-                            <span className="tnl-row-detail-lbl">{row.label}</span>
-                            <span className="tnl-row-detail-val">{row.value}</span>
-                          </span>
-                        ))}
-                      </span>
-                    </span>
-                    {!item.isRead && <span className="tnl-dot" aria-hidden />}
-                  </button>
-                  <button
-                    type="button"
-                    className="tnl-row-chart"
-                    title="차트로 이동"
-                    onClick={() => {
-                      markAsRead(item.id);
-                      onGoToChart(item.market);
-                    }}
-                  >
-                    차트
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
-        )}
+          <div className="tnl-right-body ptd-right-body" ref={orderAnchorRef}>
+            {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>
+                )}
+              />
+            ) : (
+              <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>
+            )}
+          </div>
+        </aside>
       </div>
     </div>
   );

frontend/src/components/TradeSignalSnackbar.tsx

@@ -45,6 +45,7 @@ export const TradeSignalSnackbar: React.FC<Props> = ({
     toastNotifications,
     dismissToast,
     dismissToasts,
+    dismissAllToasts,
     openDetail,
   } = useTradeNotification();
 
@@ -94,10 +95,10 @@ export const TradeSignalSnackbar: React.FC<Props> = ({
 
   const dismissAll = useCallback(() => {
     if (toastNotifications.length === 0) return;
-    dismissToasts(toastNotifications.map(n => n.id));
+    dismissAllToasts();
     setPageIndex(0);
     positionsRef.current = {};
-  }, [dismissToasts, toastNotifications]);
+  }, [dismissAllToasts, toastNotifications.length]);
 
   const dismissCurrentPage = useCallback(() => {
     const ids = pageItems.map(i => i.id);