가상매매 화면오류 수정

frontend/src/components/virtual/VirtualTargetCardChart.tsx

@@ -22,7 +22,15 @@ import {
   resolveStrategyTimeframes,
 } from '../../utils/strategyToChartIndicators';
 import { timeframeToCandleType } from '../../utils/chartCandleType';
-import { DEFAULT_DISPLAY_TIMEZONE } from '../../utils/timezone';
+import { DISPLAY_COUNT } from '../../hooks/useUpbitData';
+
+/** 미니 카드 폭에 맞춰 표시할 캔들 수 (좌우 빈 공간·x축 라벨 겹침 방지) */
+const COMPACT_MIN_BAR_PX = 5;
+
+function resolveCompactDisplayCount(width: number): number {
+  if (width <= 0) return DISPLAY_COUNT;
+  return Math.max(40, Math.min(DISPLAY_COUNT, Math.floor(width / COMPACT_MIN_BAR_PX)));
+}
 
 interface Props {
   market: string;
@@ -81,6 +89,11 @@ const VirtualTargetCardChart: React.FC<Props> = ({
     [indicators, timeframe],
   );
 
+  const resolveInitialDisplayCount = useCallback(
+    (plotWidth: number) => resolveCompactDisplayCount(plotWidth),
+    [],
+  );
+
   const managerRef = useRef<ChartManager | null>(null);
   const canvasWrapRef = useRef<HTMLDivElement | null>(null);
   const [chartReloadTick, setChartReloadTick] = useState(0);
@@ -106,9 +119,10 @@ const VirtualTargetCardChart: React.FC<Props> = ({
     chartLiveReadyRef.current = true;
     const pending = pendingBarRef.current;
     const mgr = managerRef.current;
-    if (!pending || !mgr || barsMarketRef.current !== marketRef.current) return;
-    pendingBarRef.current = null;
-    mgr.updateBar(pending);
+    if (pending && mgr && barsMarketRef.current === marketRef.current) {
+      pendingBarRef.current = null;
+      mgr.updateBar(pending);
+    }
     syncChartLayout();
   }, [syncChartLayout]);
 
@@ -155,7 +169,6 @@ const VirtualTargetCardChart: React.FC<Props> = ({
 
   const barsReady = bars.length >= 2 && barsMarket === market;
 
-
   const requestChartReload = useCallback(() => {
     chartReloadTriggeredRef.current = true;
     setChartReloadTick(t => t + 1);
@@ -171,36 +184,39 @@ const VirtualTargetCardChart: React.FC<Props> = ({
     const wrap = canvasWrapRef.current;
     if (!wrap) return;
 
-    const timers = [200, 600, 1200].map(delay =>
+    let resizeTimer: ReturnType<typeof setTimeout> | null = null;
+    const scheduleLayoutSync = () => {
+      if (resizeTimer) clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => syncChartLayout(), 120);
+    };
+
+    const timers = [600].map(delay =>
       setTimeout(() => {
         if (!canvasWrapRef.current) return;
         if (managerRef.current?.hasMainSeries()) {
           syncChartLayout();
-        } else if (!chartReloadTriggeredRef.current && delay >= 600 && barsReady) {
+        } else if (!chartReloadTriggeredRef.current && barsReady) {
           requestChartReload();
         }
       }, delay),
     );
 
-    const ro = new ResizeObserver(() => syncChartLayout());
+    const ro = new ResizeObserver(() => scheduleLayoutSync());
     ro.observe(wrap);
 
     return () => {
       timers.forEach(clearTimeout);
+      if (resizeTimer) clearTimeout(resizeTimer);
       ro.disconnect();
     };
   }, [market, timeframe, barsReady, syncChartLayout, requestChartReload]);
 
   useEffect(() => {
     if (!barsReady) return;
-    if (managerRef.current?.hasMainSeries()) {
-      syncChartLayout();
-      return;
-    }
-    if (!chartReloadTriggeredRef.current) {
+    if (!managerRef.current?.hasMainSeries() && !chartReloadTriggeredRef.current) {
       requestChartReload();
     }
-  }, [barsReady, syncChartLayout, requestChartReload]);
+  }, [barsReady, requestChartReload]);
 
   useEffect(() => {
     if (!streamActive) return;
@@ -242,7 +258,7 @@ const VirtualTargetCardChart: React.FC<Props> = ({
           <div className="vtd-card-chart-loading">캔들 데이터 수집 중…</div>
         )}
         <TradingChart
-          key={`${market}-${timeframe}-${chartReloadTick}`}
+          key={`${market}-${timeframe}-${chartReloadTick}-${effectiveIndicators.map(i => i.id).join(',')}`}
           chartVisible={chartStreamEnabled}
           bars={bars}
           barsMarket={barsMarket}
@@ -261,6 +277,8 @@ const VirtualTargetCardChart: React.FC<Props> = ({
           onManagerReady={mgr => { managerRef.current = mgr; }}
           onAddDrawing={noop as (d: Drawing) => void}
           onCandlesReady={handleCandlesReady}
+          resolveInitialDisplayCount={resolveInitialDisplayCount}
+          skipViewportRecovery
           magnifierEnabled={false}
           volumeVisible={false}
           paneLayoutClamp