가상매매 목록 실시간 연결안됨 문제수정

app/src/screens/virtual/VirtualTradingScreen.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useAuth } from '../../contexts/AuthContext';
 import { useAppSettings } from '../../hooks/useAppSettings';
 import { useVirtualTradingCore } from '@frontend/hooks/useVirtualTradingCore';
+import { resolveVirtualLiveStatusFallback } from '@frontend/hooks/useVirtualTargetLiveStatus';
 import { resolveVirtualTargetStrategyId } from '@frontend/utils/virtualTargetStrategy';
 import { useNavigation } from '../../contexts/NavigationContext';
 import BottomSheet from '../../components/BottomSheet';
@@ -195,7 +196,12 @@ export default function VirtualTradingScreen() {
                 strategies={strategies}
                 snapshot={snap}
                 signalLoading={signalLoading}
-                liveStatus={liveStatusByMarket[t.market]}
+                liveStatus={resolveVirtualLiveStatusFallback(
+                  t.market,
+                  strategyId,
+                  liveStatusByMarket,
+                  session.running,
+                )}
                 onDetail={() => goVirtualDetail(t.market)}
                 onTrade={side => goVirtualTrade(t.market, side)}
                 onTogglePin={() => void handleTogglePin(t.market)}

frontend/src/components/VirtualTradingPage.tsx

@@ -221,16 +221,17 @@ const VirtualTradingPage: React.FC<Props> = ({
   }, [session.running, refreshPaperData]);
 
   const mergedLiveStatus = useMemo(() => {
-    if (!session.running) return liveStatusByMarket;
     const merged = { ...liveStatusByMarket };
     const now = Date.now();
+    /** 폴링 주기(3~5s) + 지연 여유 — 지표 스냅샷 갱신 시 STOMP 틱 없어도 실시간 표시 */
+    const SNAP_LIVE_MS = 12_000;
     for (const [market, snap] of Object.entries(snapshots)) {
-      if (snap?.updatedAt && now - snap.updatedAt < 8000) {
+      if (snap?.updatedAt && now - snap.updatedAt < SNAP_LIVE_MS) {
         merged[market] = 'live';
       }
     }
     return merged;
-  }, [liveStatusByMarket, snapshots, session.running]);
+  }, [liveStatusByMarket, snapshots]);
 
   const posQty = useMemo(() => {
     const p = summary?.positions?.find(x => x.symbol === selectedMarket);

frontend/src/components/virtual/VirtualTargetGrid.tsx

@@ -9,7 +9,10 @@ import {
   type VirtualCardViewMode,
   type VirtualSessionConfig,
 } from '../../utils/virtualTradingStorage';
-import type { VirtualLiveStatus } from '../../hooks/useVirtualTargetLiveStatus';
+import {
+  resolveVirtualLiveStatusFallback,
+  type VirtualLiveStatus,
+} from '../../hooks/useVirtualTargetLiveStatus';
 import type { VirtualIndicatorSnapshot } from '../../hooks/useVirtualIndicatorSnapshots';
 import type { TickerData } from '../../hooks/useMarketTicker';
 import { resolveVirtualTargetStrategyId } from '../../utils/virtualTargetStrategy';
@@ -141,7 +144,12 @@ const VirtualTargetGrid: React.FC<Props> = ({
           snapshot={snapshots[focusTarget.market]}
           signalLoading={snapshotLoadingByMarket[focusTarget.market]}
           running={session.running}
-          liveStatus={liveStatusByMarket[focusTarget.market] ?? (session.running ? 'connecting' : 'idle')}
+          liveStatus={resolveVirtualLiveStatusFallback(
+            focusTarget.market,
+            resolveVirtualTargetStrategyId(focusTarget, session.globalStrategyId),
+            liveStatusByMarket,
+            session.running,
+          )}
           lastTickAt={lastTickAtByMarket[focusTarget.market]}
           viewMode={viewMode}
           onExit={() => setFocusMarket(null)}
@@ -176,7 +184,8 @@ const VirtualTargetGrid: React.FC<Props> = ({
           aria-label="가상매매 종목 그리드"
         >
           {t => {
-            const strat = strategies.find(s => s.id === resolveVirtualTargetStrategyId(t, session.globalStrategyId));
+            const stratId = resolveVirtualTargetStrategyId(t, session.globalStrategyId);
+            const strat = strategies.find(s => s.id === stratId);
             return (
               <VirtualTargetCard
                 market={t.market}
@@ -188,7 +197,12 @@ const VirtualTargetGrid: React.FC<Props> = ({
                 snapshot={snapshots[t.market]}
                 signalLoading={snapshotLoadingByMarket[t.market]}
                 running={session.running}
-                liveStatus={liveStatusByMarket[t.market] ?? (session.running ? 'connecting' : 'idle')}
+                liveStatus={resolveVirtualLiveStatusFallback(
+                  t.market,
+                  stratId,
+                  liveStatusByMarket,
+                  session.running,
+                )}
                 lastTickAt={lastTickAtByMarket[t.market]}
                 viewMode={viewMode}
                 displayMode={resolveCardDisplayMode(t.market)}

frontend/src/hooks/useVirtualTargetLiveStatus.ts

@@ -14,6 +14,8 @@ import {
 export type VirtualLiveStatus = 'idle' | 'connecting' | 'live' | 'disconnected';
 
 const STALE_MS = 20_000;
+/** useStompChartData 와 동일 — STOMP 수립 후 틱 없어도 실시간 파이프라인 준비 완료로 간주 */
+const CONN_GRACE_MS = 800;
 const TICK_CANDLE = '1m';
 
 interface TargetRef {
@@ -30,6 +32,24 @@ function topicFor(market: string): string {
   return `/sub/charts/${market}/${TICK_CANDLE}`;
 }
 
+function isCandlePayload(data: { time?: unknown; close?: unknown } | null): boolean {
+  if (!data) return false;
+  return typeof data.time === 'number' || typeof data.close === 'number';
+}
+
+/** 목록·카드에서 liveStatusByMarket 미등록 시 fallback */
+export function resolveVirtualLiveStatusFallback(
+  market: string,
+  strategyId: number | null,
+  statusByMarket: Record<string, VirtualLiveStatus>,
+  running: boolean,
+): VirtualLiveStatus {
+  const known = statusByMarket[market];
+  if (known) return known;
+  if (!strategyId) return 'idle';
+  return running ? 'connecting' : 'idle';
+}
+
 export interface VirtualTargetLiveState {
   statusByMarket: Record<string, VirtualLiveStatus>;
   /** STOMP 틱 수신 시각 (ms) — 카드 형광 플래시 트리거 */
@@ -46,6 +66,9 @@ export function useVirtualTargetLiveStatus(
   const [lastTickAtByMarket, setLastTickAtByMarket] = useState<Record<string, number>>({});
   const stateRef = useRef<Record<string, MarketLiveState>>({});
   const stompConnectedRef = useRef(isStompChartConnected());
+  const stompConnectedAtRef = useRef<number | null>(
+    isStompChartConnected() ? Date.now() : null,
+  );
 
   const patchMarket = (market: string, patch: Partial<MarketLiveState>) => {
     const prev = stateRef.current[market] ?? { status: 'idle' as VirtualLiveStatus, lastTickAt: null };
@@ -66,12 +89,22 @@ export function useVirtualTargetLiveStatus(
       return;
     }
     if (stompConnectedRef.current) {
+      const connectedAt = stompConnectedAtRef.current;
+      if (connectedAt != null && now - connectedAt >= CONN_GRACE_MS) {
+        patchMarket(market, { status: 'live' });
+        return;
+      }
       patchMarket(market, { status: 'connecting' });
     } else {
       patchMarket(market, { status: 'disconnected' });
     }
   };
 
+  const targetsKey = targets
+    .filter(t => t.strategyId != null)
+    .map(t => `${t.market}:${t.strategyId}`)
+    .join('|');
+
   useEffect(() => {
     const activeMarkets = targets
       .filter(t => t.strategyId != null)
@@ -112,17 +145,30 @@ export function useVirtualTargetLiveStatus(
     const unsubs = activeMarkets.map(market => {
       const topic = topicFor(market);
       return subscribeStompTopic(topic, msg => {
-        const data = parseStompJson<{ time?: number }>(msg);
+        const data = parseStompJson<{ time?: number; close?: number }>(msg);
-        if (data?.time == null) return;
+        if (!isCandlePayload(data)) return;
         patchMarket(market, { status: 'live', lastTickAt: Date.now() });
       });
     });
 
+    let graceTimer: ReturnType<typeof setTimeout> | null = null;
+    const scheduleGraceRecompute = () => {
+      if (graceTimer) clearTimeout(graceTimer);
+      if (!stompConnectedRef.current) return;
+      graceTimer = setTimeout(() => {
+        for (const market of activeMarkets) recomputeStatus(market);
+      }, CONN_GRACE_MS);
+    };
+
     const offConn = subscribeStompConnection(next => {
       stompConnectedRef.current = next;
+      stompConnectedAtRef.current = next ? Date.now() : null;
       for (const market of activeMarkets) recomputeStatus(market);
+      if (next) scheduleGraceRecompute();
     });
 
+    if (stompConnectedRef.current) scheduleGraceRecompute();
+
     const staleId = window.setInterval(() => {
       for (const market of activeMarkets) recomputeStatus(market);
     }, 3000);
@@ -131,8 +177,9 @@ export function useVirtualTargetLiveStatus(
       unsubs.forEach(u => u());
       offConn();
       clearInterval(staleId);
+      if (graceTimer) clearTimeout(graceTimer);
     };
-  }, [targets, running, eagerConnect]);
+  }, [targetsKey, running, eagerConnect]);
 
   return { statusByMarket: byMarket, lastTickAtByMarket };
 }

frontend/src/hooks/useVirtualTradingCore.ts

@@ -219,16 +219,16 @@ export function useVirtualTradingCore(options: UseVirtualTradingCoreOptions = {}
   );
 
   const mergedLiveStatus = useMemo(() => {
-    if (!session.running) return liveStatusByMarket;
     const merged = { ...liveStatusByMarket };
     const now = Date.now();
+    const SNAP_LIVE_MS = 12_000;
     for (const [market, snap] of Object.entries(snapshots)) {
-      if (snap?.updatedAt && now - snap.updatedAt < 8000) {
+      if (snap?.updatedAt && now - snap.updatedAt < SNAP_LIVE_MS) {
         merged[market] = 'live';
       }
     }
     return merged;
-  }, [liveStatusByMarket, snapshots, session.running]);
+  }, [liveStatusByMarket, snapshots]);
 
   const handleTargetsChange = useCallback((items: VirtualTargetItem[]) => {
     if (items.length > virtualTargetMaxCount) {