단순이동평균선 이름 표시방식 변경

frontend/src/components/IndicatorSettingsForm.tsx

@@ -5,7 +5,6 @@ import React, { useState, useCallback, useEffect, useRef } from 'react';
 import type { IndicatorConfig, Timeframe } from '../types';
 import { getIndicatorDef } from '../utils/indicatorRegistry';
 import type { PlotDef, HLineDef } from '../utils/indicatorRegistry';
-import { getPlotLabel } from '../utils/indicatorLabels';
 import { getNumericParamSpec } from '../utils/indicatorParamSpec';
 import NumericParamInput from './NumericParamInput';
 import SmaPeriodInput from './SmaPeriodInput';
@@ -14,6 +13,7 @@ import {
   SMA_MA_COUNT,
   smaPeriodKey,
   smaPlotId,
+  formatSmaMaDisplayLabel,
 } from '../utils/smaConfig';
 import PlotLineStylePicker from './PlotLineStylePicker';
 import {
@@ -188,8 +188,14 @@ const IndicatorSettingsForm: React.FC<IndicatorSettingsFormProps> = ({
   }, [plotVis, patch]);
 
   const handleSmaPeriod = useCallback((maIndex: number, v: number) => {
-    patch({ params: { ...params, [smaPeriodKey(maIndex)]: v } });
-  }, [params, patch]);
+    const nextParams = { ...params, [smaPeriodKey(maIndex)]: v };
+    const nextPlots = plots.map((pl, i) =>
+      i === maIndex - 1
+        ? { ...pl, title: formatSmaMaDisplayLabel(nextParams, maIndex) }
+        : pl,
+    );
+    patch({ params: nextParams, plots: nextPlots });
+  }, [params, plots, patch]);
 
   const handleSmaToggle = useCallback((plotIndex: number, enabled: boolean) => {
     patch({ plotVis: { ...plotVis, [smaPlotId(plotIndex)]: enabled } });
@@ -254,7 +260,9 @@ const IndicatorSettingsForm: React.FC<IndicatorSettingsFormProps> = ({
                   />
                   <span className="ism-toggle-slider" />
                 </label>
-                <label className="ism-label ism-sma-ma-label">{getPlotLabel(`MA${maNum}`)}</label>
+                <label className="ism-label ism-sma-ma-label">
+                  {formatSmaMaDisplayLabel(params, maNum)}
+                </label>
                 <div
                   className="ism-control ism-sma-ma-control"
                   onMouseDown={e => e.stopPropagation()}
@@ -268,7 +276,7 @@ const IndicatorSettingsForm: React.FC<IndicatorSettingsFormProps> = ({
                   {plot && !inputsOnly && (
                     <PlotLineStylePicker
                       disabled={!enabled}
-                      title={`MA${maNum}`}
+                      title={formatSmaMaDisplayLabel(params, maNum)}
                       value={{
                         color: plot.color,
                         lineWidth: plot.lineWidth,