차트 설정 수정

frontend/src/components/PaneSeparatorOverlay.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import type { ChartManager } from '../utils/ChartManager';
 import type { ChartPaneSeparatorOptions, PaneSeparatorStyle } from '../types/chartPaneSeparator';
-import { classifyPaneBoundary } from '../types/chartPaneSeparator';
+import { classifyPaneBoundary, paneSeparatorOptionsKey } from '../types/chartPaneSeparator';
 import { plotColorCss } from '../utils/plotColorUtils';
 
 interface Props {
@@ -34,6 +34,7 @@ function strokeBoundary(
 
 const PaneSeparatorOverlay: React.FC<Props> = ({ manager, options }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
+  const optionsKey = paneSeparatorOptionsKey(options);
 
   const redraw = useCallback(() => {
     const canvas = canvasRef.current;
@@ -72,7 +73,7 @@ const PaneSeparatorOverlay: React.FC<Props> = ({ manager, options }) => {
       const y = lower.topY + lower.height;
       strokeBoundary(ctx, cssW, y, style);
     }
-  }, [manager, options]);
+  }, [manager, options, optionsKey]);
 
   useEffect(() => {
     redraw();
@@ -80,11 +81,15 @@ const PaneSeparatorOverlay: React.FC<Props> = ({ manager, options }) => {
     const container = manager.getContainer();
     const ro = new ResizeObserver(() => redraw());
     if (container) ro.observe(container);
+    const raf1 = requestAnimationFrame(redraw);
+    const raf2 = requestAnimationFrame(() => requestAnimationFrame(redraw));
     return () => {
       unsub();
       ro.disconnect();
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
     };
-  }, [manager, redraw]);
+  }, [manager, redraw, optionsKey]);
 
   return (
     <canvas