알림목록 수정

frontend/src/components/TradeAlertModal.tsx

@@ -1,11 +1,12 @@
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDraggablePanel } from '../hooks/useDraggablePanel';
-import { placePaperOrder, placeLiveOrder, loadLiveSummary } from '../utils/backendApi';
+import { placePaperOrder, placeLiveOrder, loadLiveSummary, loadStrategy, type StrategyDto } from '../utils/backendApi';
 import { formatSignalTime } from '../utils/tradeSignalDisplay';
 import { formatUpbitKrwPrice } from '../utils/safeFormat';
 import { TRADE_BUY_COLOR, TRADE_SELL_COLOR } from '../utils/tradeSignalColors';
 import { useTradeAlertTimeFormat } from '../utils/tradeAlertTimeFormat';
+import StrategyConditionView from './tradeNotification/StrategyConditionView';
 
 export interface TradeSignalInfo {
   market:        string;
@@ -79,6 +80,19 @@ export const TradeAlertModal: React.FC<Props> = ({
   const [activePct,  setActivePct]  = useState<string | null>(null);
   const [ordering, setOrdering]     = useState(false);
 
+  /* ── 전략 조건 — 마운트 즉시 로딩 ──────────────────────────── */
+  const [strategy,     setStrategy]     = useState<StrategyDto | null>(null);
+  const [stratLoading, setStratLoading] = useState(false);
+
+  useEffect(() => {
+    if (!signal.strategyId) return;
+    setStratLoading(true);
+    loadStrategy(signal.strategyId)
+      .then(s => setStrategy(s))
+      .catch(() => setStrategy(null))
+      .finally(() => setStratLoading(false));
+  }, [signal.strategyId]);
+
   const {
     panelRef,
     dragging,
@@ -187,6 +201,9 @@ export const TradeAlertModal: React.FC<Props> = ({
           <button className="tam-close" onClick={onClose} title="닫기">✕</button>
         </div>
 
+        {/* ── 스크롤 가능 본문 영역 ─────────────────────── */}
+        <div className="tam-modal-body">
+
         <div className="tam-price-section">
           <div className="tam-price-row">
             <span className="tam-market-name">{signal.market}</span>
@@ -222,6 +239,27 @@ export const TradeAlertModal: React.FC<Props> = ({
           </div>
         </div>
 
+        {/* ── 전략 조건 섹션 ────────────────────────────── */}
+        {signal.strategyId && (
+          <div className="tam-condition-section">
+            <div className="tam-condition-section-header">
+              <span className="tam-condition-section-title">전략 조건</span>
+              {stratLoading && <span className="tam-condition-section-loading">로딩 중…</span>}
+            </div>
+            <div className="tam-condition-panel">
+              {stratLoading && (
+                <div className="tam-condition-loading">전략 조건 로딩 중…</div>
+              )}
+              {!stratLoading && !strategy && (
+                <div className="tam-condition-empty">전략 조건을 불러올 수 없습니다.</div>
+              )}
+              {!stratLoading && strategy && (
+                <StrategyConditionView strategy={strategy} signalType={signal.signalType} />
+              )}
+            </div>
+          </div>
+        )}
+
         <div className="tam-order-section">
           <div className="tam-field-row">
             <span className="tam-field-label">자산 비율</span>
@@ -287,6 +325,8 @@ export const TradeAlertModal: React.FC<Props> = ({
             {!useLive && !usePaper && '※ 설정에서 모의투자 또는 API 키를 활성화하세요'}
           </p>
         </div>
+
+        </div>{/* /.tam-modal-body */}
       </div>
     </div>
   );