가상투자 화면 추가

frontend/src/hooks/useLiveReceiveFlash.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef, useState } from 'react';
+
+/** 실시간 차트 ws-dot receiving 과 동일 — 데이터 수신 시 짧은 형광 플래시 */
+export function useLiveReceiveFlash(
+  signal: number | string | null | undefined,
+  enabled: boolean,
+  durationMs = 600,
+): boolean {
+  const [flashing, setFlashing] = useState(false);
+  const prevRef = useRef<number | string | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (!enabled || signal == null) {
+      prevRef.current = null;
+      return;
+    }
+    const prev = prevRef.current;
+    prevRef.current = signal;
+    if (prev == null || prev === signal) return;
+
+    setFlashing(true);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      setFlashing(false);
+      timerRef.current = null;
+    }, durationMs);
+  }, [signal, enabled, durationMs]);
+
+  useEffect(() => () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+  }, []);
+
+  return flashing;
+}

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 };
 }