전략평가 화면 기능 수정

frontend/src/components/strategyEvaluation/StrategyEvaluationChart.tsx

@@ -36,6 +36,7 @@ interface Props {
   onStrategySelect: (strategyId: number) => void;
   onMarketChange: (market: string) => void;
   onTimeframeChoiceChange: (choice: BacktestRunTimeframeChoice) => void;
+  onChartLoadingChange?: (loading: boolean) => void;
   theme?: Theme;
   strategy: StrategyDto | null;
   selectedBarIndex: number;
@@ -55,6 +56,8 @@ interface Props {
     hlines: import('../../utils/indicatorRegistry').HLineDef[];
     cloudColors?: import('../../utils/ichimokuConfig').IchimokuCloudColors;
   };
+  /** 선택 봉 조건 평가 진행 중 */
+  evalLoading?: boolean;
 }
 
 const isOverlayType = (type: string) => getIndicatorDef(type)?.overlay === true;
@@ -76,6 +79,7 @@ const StrategyEvaluationChart: React.FC<Props> = ({
   onStrategySelect,
   onMarketChange,
   onTimeframeChoiceChange,
+  onChartLoadingChange,
   theme = 'dark',
   strategy,
   selectedBarIndex,
@@ -84,6 +88,7 @@ const StrategyEvaluationChart: React.FC<Props> = ({
   paramsRevision = 0,
   getParamsOverride,
   getVisualConfigOverride,
+  evalLoading = false,
 }) => {
   const { getParams: baseGetParams, getVisualConfig: baseGetVisual } = useIndicatorSettings();
   const getParams = getParamsOverride ?? baseGetParams;
@@ -206,14 +211,23 @@ const StrategyEvaluationChart: React.FC<Props> = ({
     }
     void runBacktestForBars(bars);
     return () => { ++backtestGenRef.current; };
-  }, [strategy?.id, bars, loading, runBacktestForBars]);
+  }, [strategy?.id, market, timeframe, paramsRevision, bars, loading, runBacktestForBars]);
 
   useEffect(() => {
     applyMarkers();
   }, [signals, applyMarkers]);
 
+  useEffect(() => {
+    onChartLoadingChange?.(loading);
+  }, [loading, onChartLoadingChange]);
+
   useEffect(() => {
     let cancelled = false;
+    ++backtestGenRef.current;
+    setSignals([]);
+    setBacktestError(null);
+    setBacktestRunning(false);
+    managerRef.current?.clearBacktestMarkers();
     setLoading(true);
     setError(null);
     const toTimeSec = Math.floor(Date.now() / 1000);
@@ -235,7 +249,7 @@ const StrategyEvaluationChart: React.FC<Props> = ({
         if (!cancelled) setLoading(false);
       });
     return () => { cancelled = true; };
-  }, [market, timeframe, onBarsLoaded, onSelectedBarIndexChange]);
+  }, [market, timeframe, strategy?.id, onBarsLoaded, onSelectedBarIndexChange]);
 
   const scrollToBar = useCallback((barIdx: number) => {
     const mgr = chartMgr;
@@ -351,7 +365,10 @@ const StrategyEvaluationChart: React.FC<Props> = ({
             ))}
           </select>
           {selectedBar && (
-            <span className="seval-chart-bar-time">
+            <span className={`seval-chart-bar-time${evalLoading ? ' seval-chart-bar-time--loading' : ''}`}>
+              {evalLoading && (
+                <span className="btd-run-spinner seval-chart-bar-spinner" aria-hidden />
+              )}
               {new Date(selectedBar.time * 1000).toLocaleString('ko-KR')}
             </span>
           )}