알림목록 단일 선택모드

frontend/src/components/tradeNotification/TradeNotificationListRow.tsx

@@ -37,6 +37,16 @@ const IcTrash = () => (
   </svg>
 );
 
+const IcReport = () => (
+  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14 2 14 8 20 8" />
+    <line x1="16" y1="13" x2="8" y2="13" />
+    <line x1="16" y1="17" x2="8" y2="17" />
+    <line x1="10" y1="9" x2="8" y2="9" />
+  </svg>
+);
+
 export type TradeNotificationRowLayout = 'list' | 'grid';
 
 interface Props {
@@ -53,6 +63,9 @@ interface Props {
   onGoToChart: () => void;
   /** 매매 버튼 클릭 → 우측 매매 패널 열기 */
   onTrade?: () => void;
+  /** 상세분석 레포트 버튼 클릭 */
+  onReport?: () => void;
+  reportLoading?: boolean;
 }
 
 const MAX_INDICATOR_CARDS = 8;
@@ -70,6 +83,8 @@ const TradeNotificationListRow: React.FC<Props> = ({
   onDetail,
   onGoToChart,
   onTrade,
+  onReport,
+  reportLoading = false,
 }) => {
   useTradeAlertTimeFormat();
   const isBuy = item.signalType === 'BUY';
@@ -317,6 +332,18 @@ const TradeNotificationListRow: React.FC<Props> = ({
                 매매
               </button>
             )}
+            {onReport && (
+              <button
+                type="button"
+                className={['tnl-row-report', reportLoading ? 'tnl-row-report--loading' : ''].filter(Boolean).join(' ')}
+                title="상세분석 레포트"
+                aria-label="상세분석 레포트"
+                disabled={reportLoading}
+                onClick={onReport}
+              >
+                <IcReport />
+              </button>
+            )}
           </div>
     </article>
   );