가상투자 화면 추가

frontend/src/hooks/useVirtualTargetLiveStatus.ts

@@ -30,11 +30,18 @@ function topicFor(market: string): string {
   return `/sub/charts/${market}/${TICK_CANDLE}`;
 }
 
+export interface VirtualTargetLiveState {
+  statusByMarket: Record<string, VirtualLiveStatus>;
+  /** STOMP 틱 수신 시각 (ms) — 카드 형광 플래시 트리거 */
+  lastTickAtByMarket: Record<string, number>;
+}
+
 export function useVirtualTargetLiveStatus(
   targets: TargetRef[],
   running: boolean,
-): Record<string, VirtualLiveStatus> {
+): VirtualTargetLiveState {
   const [byMarket, setByMarket] = useState<Record<string, VirtualLiveStatus>>({});
+  const [lastTickAtByMarket, setLastTickAtByMarket] = useState<Record<string, number>>({});
   const stateRef = useRef<Record<string, MarketLiveState>>({});
   const stompConnectedRef = useRef(isStompChartConnected());
 
@@ -43,6 +50,9 @@ export function useVirtualTargetLiveStatus(
     const next: MarketLiveState = { ...prev, ...patch };
     stateRef.current[market] = next;
     setByMarket(cur => ({ ...cur, [market]: next.status }));
+    if (patch.lastTickAt != null) {
+      setLastTickAtByMarket(cur => ({ ...cur, [market]: patch.lastTickAt! }));
+    }
   };
 
   const recomputeStatus = (market: string) => {
@@ -64,6 +74,7 @@ export function useVirtualTargetLiveStatus(
     if (!running) {
       stateRef.current = {};
       setByMarket({});
+      setLastTickAtByMarket({});
       return;
     }
 
@@ -87,6 +98,11 @@ export function useVirtualTargetLiveStatus(
           delete next[key];
           return next;
         });
+        setLastTickAtByMarket(cur => {
+          const next = { ...cur };
+          delete next[key];
+          return next;
+        });
       }
     }
 
@@ -115,5 +131,5 @@ export function useVirtualTargetLiveStatus(
     };
   }, [targets, running]);
 
-  return byMarket;
+  return { statusByMarket: byMarket, lastTickAtByMarket };
 }