실시간 차트 갱신문제 수정

frontend/src/components/ChartSlot.tsx

@@ -383,6 +383,7 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
   const reloadTriggeredRef = useRef(false); // 재마운트는 최대 1회
   useLayoutEffect(() => {
     reloadTriggeredRef.current = false;
+    chartLiveReadyRef.current = false;
     pendingRealtimeBarRef.current = null;
   }, [symbol, timeframe]);
   useEffect(() => {
@@ -429,9 +430,23 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
 
   const pendingRealtimeBarRef = useRef<OHLCVBar | null>(null);
   const barsMarketRef = useRef<string | null>(null);
+  const chartLiveReadyRef = useRef(false);
+
+  const handleCandlesReady = useCallback(() => {
+    chartLiveReadyRef.current = true;
+    const pending = pendingRealtimeBarRef.current;
+    const mgr = managerRef.current;
+    if (!pending || !mgr || barsMarketRef.current !== symbolRef.current) return;
+    pendingRealtimeBarRef.current = null;
+    mgr.updateBar(pending);
+  }, []);
 
   const handleTickUpdate = useCallback((bar: OHLCVBar) => {
     if (barsMarketRef.current !== symbolRef.current) return;
+    if (!chartLiveReadyRef.current) {
+      pendingRealtimeBarRef.current = bar;
+      return;
+    }
     if (!managerRef.current) {
       pendingRealtimeBarRef.current = bar;
       return;
@@ -440,6 +455,10 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
   }, []);
   const handleNewCandle = useCallback((bar: OHLCVBar) => {
     if (barsMarketRef.current !== symbolRef.current) return;
+    if (!chartLiveReadyRef.current) {
+      pendingRealtimeBarRef.current = bar;
+      return;
+    }
     if (!managerRef.current) {
       pendingRealtimeBarRef.current = bar;
       return;
@@ -653,7 +672,7 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
           onManagerReady={mgr => {
             managerRef.current = mgr;
             const pending = pendingRealtimeBarRef.current;
-            if (pending && barsMarketRef.current === symbolRef.current && bars.length > 0) {
+            if (pending && chartLiveReadyRef.current && barsMarketRef.current === symbolRef.current && bars.length > 0) {
               pendingRealtimeBarRef.current = null;
               const last = bars[bars.length - 1];
               if (last && pending.time === last.time) mgr.updateBar(pending);
@@ -682,6 +701,7 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
               }
             });
           }}
+          onCandlesReady={handleCandlesReady}
           onDataLoaded={() => {
             // reloadAll(setData + setInitialVisibleRange) 완료 후
             // 첫 마운트 시 pending 상태였던 sync range 를 재적용한다