보조지표 추가 팝업에서 지표 드래그 이동문제

frontend/src/components/Toolbar.tsx

@@ -340,6 +340,7 @@ const IndDropdown: React.FC<IndDropdownProps> = ({
   const [category, setCategory] = React.useState<IndicatorTabKey>('All');
   const [customTabs, setCustomTabs] = React.useState<IndicatorCustomTab[]>(() => loadCustomTabs());
   const [mainOrderTick, setMainOrderTick] = React.useState(0);
+  const [customTabsRevision, setCustomTabsRevision] = React.useState(0);
   const [draggingType, setDraggingType] = React.useState<string | null>(null);
   const [dragOverType, setDragOverType] = React.useState<string | null>(null);
   const [editorOpen, setEditorOpen] = React.useState(false);
@@ -349,8 +350,15 @@ const IndDropdown: React.FC<IndDropdownProps> = ({
 
   const refreshCustomTabs = useCallback(() => {
     setCustomTabs(loadCustomTabs());
+    setCustomTabsRevision(t => t + 1);
   }, []);
 
+  useEffect(() => {
+    const onTabsChanged = () => refreshCustomTabs();
+    window.addEventListener('gc-indicator-custom-tabs-changed', onTabsChanged);
+    return () => window.removeEventListener('gc-indicator-custom-tabs-changed', onTabsChanged);
+  }, [refreshCustomTabs]);
+
   const selectedCustomTab = React.useMemo(() => {
     const id = parseCustomTabKey(category);
     return id ? customTabs.find(t => t.id === id) ?? null : null;
@@ -390,13 +398,17 @@ const IndDropdown: React.FC<IndDropdownProps> = ({
 
   const tabTypeOrder = React.useMemo((): string[] | null => {
     void mainOrderTick;
+    void customTabsRevision;
     if (search.trim()) return null;
     if (category === 'Main') return getOrderedMainIndicatorTypes();
-    if (isCustomTabKey(category) && selectedCustomTab) {
-      return [...selectedCustomTab.indicatorTypes];
+    if (isCustomTabKey(category)) {
+      const id = parseCustomTabKey(category);
+      if (!id) return null;
+      const tab = customTabs.find(t => t.id === id);
+      return tab ? [...tab.indicatorTypes] : null;
     }
     return null;
-  }, [category, selectedCustomTab, customTabs, search, mainOrderTick]);
+  }, [category, customTabs, search, mainOrderTick, customTabsRevision]);
 
   const canReorderList = tabTypeOrder != null && tabTypeOrder.length > 1;
 
@@ -414,12 +426,19 @@ const IndDropdown: React.FC<IndDropdownProps> = ({
       setMainOrderTick(t => t + 1);
       saveIndicatorListOrder(mergeIndicatorListOrder(next, getSettingsIndicatorTypes()));
       onIndicatorOrderChange?.(next);
-    } else if (isCustomTabKey(category) && selectedCustomTab) {
-      updateCustomTab(selectedCustomTab.id, { indicatorTypes: next });
-      refreshCustomTabs();
+    } else if (isCustomTabKey(category)) {
+      const id = parseCustomTabKey(category);
+      if (!id) return;
+      const updated = updateCustomTab(id, { indicatorTypes: next });
+      if (updated) {
+        setCustomTabs(prev => prev.map(t => (t.id === id ? updated : t)));
+        setCustomTabsRevision(t => t + 1);
+      } else {
+        refreshCustomTabs();
+      }
       onIndicatorOrderChange?.(next);
     }
-  }, [tabTypeOrder, category, selectedCustomTab, refreshCustomTabs, onIndicatorOrderChange]);
+  }, [tabTypeOrder, category, refreshCustomTabs, onIndicatorOrderChange]);
 
   useEffect(() => {
     const clearDrag = () => {