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

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