실시간 차트 보조지표 탭 문제 수정

frontend/src/App.tsx

@@ -56,6 +56,10 @@ import {
   splitIndicatorPane,
   replaceIndicatorConfigsFromTypes,
 } from './utils/indicatorPaneMerge';
+import {
+  getOrderedSettingsIndicatorTypes,
+  sortIndicatorsByTypeOrder,
+} from './utils/indicatorListOrder';
 import { useAppSettings } from './hooks/useAppSettings';
 import { clampVirtualTargetMax } from './utils/virtualTargetLimits';
 import { resolveTrendSearchAppSettings } from './utils/trendSearchAppSettings';
@@ -1158,11 +1162,12 @@ function App() {
           if (slot0.mode)            setMode(slot0.mode as ChartMode);
           if (slot0.logScale != null) setLogScale(Boolean(slot0.logScale));
           if (Array.isArray(slot0.indicators)) {
-            setIndicators((slot0.indicators as IndicatorConfig[]).map(ind => {
+            const loaded = (slot0.indicators as IndicatorConfig[]).map(ind => {
               if (ind.type === 'SMA') return normalizeSmaConfig(ind);
               if (ind.type === 'IchimokuCloud') return normalizeIchimokuConfig(ind);
               return ind;
-            }));
+            });
+            setIndicators(sortIndicatorsByTypeOrder(loaded));
           }
           if (Array.isArray(slot0.drawings))    setDrawings(slot0.drawings as Drawing[]);
           if (slot0.drawingsLocked  != null) setDrawingsLocked(Boolean(slot0.drawingsLocked));
@@ -1178,11 +1183,13 @@ function App() {
               symbol:         s.symbol   as string | undefined,
               timeframe:      s.timeframe as Timeframe | undefined,
               indicators:     Array.isArray(s.indicators)
-                ? (s.indicators as IndicatorConfig[]).map(ind => {
-                    if (ind.type === 'SMA') return normalizeSmaConfig(ind);
-                    if (ind.type === 'IchimokuCloud') return normalizeIchimokuConfig(ind);
-                    return ind;
-                  })
+                ? sortIndicatorsByTypeOrder(
+                    (s.indicators as IndicatorConfig[]).map(ind => {
+                      if (ind.type === 'SMA') return normalizeSmaConfig(ind);
+                      if (ind.type === 'IchimokuCloud') return normalizeIchimokuConfig(ind);
+                      return ind;
+                    }),
+                  )
                 : undefined,
               mainChartStyle: s.mainChartStyle as MainChartStyle | undefined,
             };
@@ -1347,6 +1354,20 @@ function App() {
     }
   }, [layoutDef.count, activeSlot]);
 
+  /** 설정 목록 순서 변경 → 차트 pane 순서 동기화 */
+  const handleIndicatorListOrderChange = useCallback((orderedTypes: string[]) => {
+    const resort = (inds: IndicatorConfig[]) => sortIndicatorsByTypeOrder(inds, orderedTypes);
+    if (layoutDef.count > 1) {
+      const slotRef = slotRefs.current[activeSlot];
+      if (!slotRef) return;
+      const next = resort(slotRef.getIndicators());
+      slotRef.setIndicators(next);
+      setActiveSlotIndicators(next.map(i => ({ ...i })));
+    } else {
+      setIndicators(prev => resort(prev));
+    }
+  }, [layoutDef.count, activeSlot]);
+
   const handleAddIndicator = useCallback((type: string, fromConfig?: IndicatorConfig) => {
     if (layoutDef.count > 1) {
       const slotRef = slotRefs.current[activeSlot];
@@ -1380,22 +1401,27 @@ function App() {
       } else if (type === 'IchimokuCloud') {
         cfg = normalizeIchimokuConfig(cfg);
       }
-      return [...prev, cfg];
+      return sortIndicatorsByTypeOrder([...prev, cfg]);
     });
   }, [layoutDef.count, activeSlot, getParams, getVisualConfig]);
 
-  /** 지표 추가 팝업 — 탭 전체 추가 (기존 보조지표 제거 후 탭 지표만 적용) */
+  /** 지표 추가 팝업 — 탭 전체 추가 (탭 목록 순서 유지) */
   const handleAddIndicators = useCallback((types: string[]) => {
     if (!types.length) return;
+    const orderedTypes = types.filter(t => getIndicatorDef(t));
+    if (orderedTypes.length === 0) return;
     if (layoutDef.count > 1) {
       const slotRef = slotRefs.current[activeSlot];
       if (slotRef) {
-        slotRef.addIndicators(types);
+        slotRef.addIndicators(orderedTypes);
         return;
       }
     }
     setIndicators(
-      replaceIndicatorConfigsFromTypes(types, getParams, getVisualConfig, newIndId),
+      sortIndicatorsByTypeOrder(
+        replaceIndicatorConfigsFromTypes(orderedTypes, getParams, getVisualConfig, newIndId),
+        orderedTypes,
+      ),
     );
   }, [layoutDef.count, activeSlot, getParams, getVisualConfig]);
 
@@ -1543,7 +1569,7 @@ function App() {
     allConfigs: IndicatorConfig[];
   }) => {
     const { chartIndicators, allConfigs } = result;
-    applyChartIndicators(chartIndicators);
+    applyChartIndicators(sortIndicatorsByTypeOrder(chartIndicators));
     allConfigs.forEach(ind => {
       saveParams(ind.type, ind.params);
       saveVisual(ind.type, ind.plots, ind.hlines, ind.cloudColors, ind.bandBackground);
@@ -1784,6 +1810,7 @@ function App() {
           chartIndicators={bulkSettingsIndicators}
           onAddIndicatorToChart={handleAddIndicator}
           onRemoveIndicatorFromChart={handleRemoveByType}
+          onIndicatorListOrderChange={handleIndicatorListOrderChange}
           chartSeriesPriceLabels={chartSeriesPriceLabels}
           onChartSeriesPriceLabels={v => {
             saveAppDef({ chartSeriesPriceLabels: v });
@@ -1898,6 +1925,7 @@ function App() {
         onScrollToNow={() => managerRef.current?.scrollToRealTime()}
         onAddIndicator={handleAddIndicator}
         onAddIndicators={handleAddIndicators}
+        onIndicatorOrderChange={handleIndicatorListOrderChange}
         onRemoveByType={handleRemoveByType}
         onOpenBulkIndicatorSettings={() => setShowBulkIndSettings(true)}
         onOpenIndicatorSettings={handleOpenIndicatorSettings}