From ab6f65a31da5f5cd219beb9751528c444837651a Mon Sep 17 00:00:00 2001
From: Macbook <macbook@Macbookui-MacBookPro.local>
Date: Mon, 8 Jun 2026 01:55:33 +0900
Subject: [PATCH] =?UTF-8?q?=EC=95=8C=EB=A6=BC=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?=EA=B7=B8=EB=A6=AC=EB=93=9C=ED=98=95=20=EC=8B=A4=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=84=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=88=98=EC=8B=A0?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TradeNotificationListRow.tsx                 | 15 ++++++++++++++-
 frontend/src/styles/tradeNotificationList.css    | 16 ++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/tradeNotification/TradeNotificationListRow.tsx b/frontend/src/components/tradeNotification/TradeNotificationListRow.tsx
index 2b40e37..a8285bf 100644
--- a/frontend/src/components/tradeNotification/TradeNotificationListRow.tsx
+++ b/frontend/src/components/tradeNotification/TradeNotificationListRow.tsx
@@ -27,6 +27,8 @@ import { useIndicatorSettings } from '../../hooks/useIndicatorSettings';
 import TradeSignalChartCard from './TradeSignalChartCard';
 import TradeNotificationSignalCard from './TradeNotificationSignalCard';
 import TradeNotificationHScrollPane from './TradeNotificationHScrollPane';
+import VirtualLiveBadge from '../virtual/VirtualLiveBadge';
+import type { VirtualLiveStatus } from '../../hooks/useVirtualTargetLiveStatus';
 
 const IcTrash = () => (
   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
@@ -215,6 +217,10 @@ const TradeNotificationListRow: React.FC<Props> = ({
     chartActivitySeq,
   ]);
   const receiving = useLiveReceiveFlash(receiveSignal, liveReceiveEnabled);
+  const highlightReceiving = chartLiveReceiveHighlight && receiving;
+  const gridLiveStatus: VirtualLiveStatus = panelActive
+    ? (ticker != null ? 'live' : 'connecting')
+    : 'idle';
 
   const indicatorChartCount = indicatorCards.length;
   /** 보조지표 2개 이상이면 첫 1개만 보이고 나머지는 좌우 스크롤 */
@@ -238,6 +244,7 @@ const TradeNotificationListRow: React.FC<Props> = ({
         isBuy ? 'tnl-summary-card--buy' : 'tnl-summary-card--sell',
         !isListLayout ? 'tnl-summary-card--grid' : '',
         isSelected ? 'tnl-summary-card--selected' : '',
+        !isListLayout && highlightReceiving ? 'tnl-summary-card--receiving' : '',
       ].filter(Boolean).join(' ')}
       aria-label="알림 요약"
     >
@@ -248,6 +255,12 @@ const TradeNotificationListRow: React.FC<Props> = ({
                 <span className="tnl-summary-sym">{sym || secondary}</span>
               </div>
               <div className="tnl-summary-head-actions">
+                {!isListLayout && panelActive && (
+                  <VirtualLiveBadge
+                    status={gridLiveStatus}
+                    receiving={highlightReceiving}
+                  />
+                )}
                 <span className={`tnl-signal ${isBuy ? 'tnl-signal--buy' : 'tnl-signal--sell'}`}>
                   {item.signalType}
                 </span>
@@ -366,7 +379,7 @@ const TradeNotificationListRow: React.FC<Props> = ({
     isListLayout ? 'tnl-row--gallery' : 'tnl-row--grid',
     !item.isRead ? 'tnl-row--unread' : '',
     isSelected ? 'tnl-row--selected' : '',
-    receiving ? 'tnl-row--receiving' : '',
+    receiving && isListLayout ? 'tnl-row--receiving' : '',
   ].filter(Boolean).join(' ');
 
   if (!isListLayout) {
diff --git a/frontend/src/styles/tradeNotificationList.css b/frontend/src/styles/tradeNotificationList.css
index 270c032..78527b6 100644
--- a/frontend/src/styles/tradeNotificationList.css
+++ b/frontend/src/styles/tradeNotificationList.css
@@ -1478,6 +1478,22 @@
     0 0 12px 2px color-mix(in srgb, var(--accent, #7aa2f7) 18%, transparent);
 }
 
+/* 그리드형 — 실시간 수신 시 카드 외곽 형광 연두 (목록형 행 아웃라인과 동일) */
+.tnl-summary-card--grid.tnl-summary-card--receiving {
+  border-color: var(--gc-receive-border) !important;
+  box-shadow: var(--gc-receive-shadow);
+  transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out;
+}
+
+.tnl-summary-card--grid.tnl-summary-card--receiving.tnl-summary-card--selected {
+  border-color: var(--gc-receive-border) !important;
+  box-shadow: var(--gc-receive-shadow);
+}
+
+.tnl-summary-card--grid .tnl-summary-head-actions .vtd-live-badge {
+  margin-right: 2px;
+}
+
 .tnl-row--gallery.tnl-row--selected .tnl-hscroll-pane,
 .tnl-row--gallery.tnl-row--selected .tnl-summary-card--selected {
   border-color: var(--accent, #7aa2f7);