알림목록 그리드 데이터 수신 표시

frontend/src/components/tradeNotification/TradeNotificationListRow.tsx

@@ -8,6 +8,7 @@ import { useLiveReceiveFlash } from '../../hooks/useLiveReceiveFlash';
 import { useTradeNotificationSignalSnapshot } from '../../hooks/useTradeNotificationSignalSnapshot';
 import type { StrategyDto } from '../../utils/backendApi';
 import { resolveNotificationStrategy } from '../../utils/resolveNotificationStrategy';
+import { normalizeMarketCode } from '../../utils/strategyHydrate';
 import type { TradeNotificationItem } from '../../contexts/TradeNotificationContext';
 import {
   buildSignalDetailRows,
@@ -134,6 +135,8 @@ const TradeNotificationListRow: React.FC<Props> = ({
   }, [item.id]);
 
   const panelActive = isListLayout && inView;
+  const gridActive = !isListLayout && inView;
+  const marketCode = normalizeMarketCode(item.market);
 
   useEffect(() => {
     if (!panelActive || !isListLayout) {
@@ -182,10 +185,12 @@ const TradeNotificationListRow: React.FC<Props> = ({
   const chartExpanded = isListLayout && expandedChartKey != null;
   const chartActive = isListLayout && chartsEnabled && panelActive;
   const signalCardEnabled = isListLayout && panelActive && !chartExpanded;
-  const ticker = tickers?.get(item.market);
+  const ticker = tickers?.get(marketCode) ?? tickers?.get(item.market);
   const expandedIndicator = indicatorCards.find(c => c.id === expandedChartKey);
 
-  const signalSnapshotEnabled = signalCardEnabled && item.strategyId != null;
+  const signalSnapshotEnabled = item.strategyId != null && (
+    signalCardEnabled || gridActive
+  );
   const { snapshot, loading: signalLoading } = useTradeNotificationSignalSnapshot(
     item.market,
     item.strategyId,
@@ -200,7 +205,7 @@ const TradeNotificationListRow: React.FC<Props> = ({
     setChartActivitySeq(n => n + 1);
   }, []);
 
-  const liveReceiveEnabled = panelActive && chartLiveReceiveHighlight;
+  const liveReceiveEnabled = inView && chartLiveReceiveHighlight;
   const receiveSignal = useMemo(() => {
     if (!liveReceiveEnabled) return null;
     return [
@@ -218,8 +223,8 @@ const TradeNotificationListRow: React.FC<Props> = ({
   ]);
   const receiving = useLiveReceiveFlash(receiveSignal, liveReceiveEnabled);
   const highlightReceiving = chartLiveReceiveHighlight && receiving;
-  const gridLiveStatus: VirtualLiveStatus = panelActive
+  const gridLiveStatus: VirtualLiveStatus = gridActive
-    ? (ticker != null ? 'live' : 'connecting')
+    ? (ticker?.tradePrice != null || snapshot?.updatedAt ? 'live' : 'connecting')
     : 'idle';
 
   const indicatorChartCount = indicatorCards.length;
@@ -255,7 +260,7 @@ const TradeNotificationListRow: React.FC<Props> = ({
                 <span className="tnl-summary-sym">{sym || secondary}</span>
               </div>
               <div className="tnl-summary-head-actions">
-                {!isListLayout && panelActive && (
+                {!isListLayout && gridActive && (
                   <VirtualLiveBadge
                     status={gridLiveStatus}
                     receiving={highlightReceiving}

frontend/src/styles/tradeNotificationList.css

@@ -1492,6 +1492,14 @@
 
 .tnl-summary-card--grid .tnl-summary-head-actions .vtd-live-badge {
   margin-right: 2px;
+  flex-shrink: 0;
+}
+
+.tnl-summary-card--grid .tnl-summary-head-actions {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  row-gap: 4px;
+  max-width: 55%;
 }
 
 .tnl-row--gallery.tnl-row--selected .tnl-hscroll-pane,