알림목록 그리드형 실시간 데이터 수신표시 적용

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) {

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);