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 = () => ( @@ -215,6 +217,10 @@ const TradeNotificationListRow: React.FC = ({ 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 = ({ 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 = ({ {sym || secondary}
+ {!isListLayout && panelActive && ( + + )} {item.signalType} @@ -366,7 +379,7 @@ const TradeNotificationListRow: React.FC = ({ 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);