일목균형표 수정

frontend/src/components/PaneLegend.tsx

@@ -252,12 +252,51 @@ function assignLayoutsByPaneIndex(
     const lay = byPane.get(host.paneIndex);
     if (!lay || lay.height < MIN_SUB_PANE_HEIGHT) continue;
     for (const item of slot.items) {
+      if (item.layoutTopY != null) continue;
       item.layoutTopY = lay.topY;
       item.layoutHeight = lay.height;
     }
   }
 }
 
+/** 화면 순서(위→아래)의 활성 sub-pane ↔ 슬롯 순서 — orphan pane index 와 분리 */
+function assignLayoutsBySubPaneOrder(
+  slots: VisualSlot[],
+  subLayouts: Array<{ paneIndex: number; topY: number; height: number }>,
+): void {
+  for (let i = 0; i < slots.length && i < subLayouts.length; i++) {
+    const lay = subLayouts[i];
+    for (const item of slots[i].items) {
+      if (item.layoutTopY != null) continue;
+      item.layoutTopY = lay.topY;
+      item.layoutHeight = lay.height;
+    }
+  }
+}
+
+/** paneIndex·orphan pane 으로 어긋난 좌표를 슬롯 순서 기준 sub-pane 위치로 보정 */
+function reconcileLayoutsWithSubPanes(
+  slots: VisualSlot[],
+  subLayouts: Array<{ paneIndex: number; topY: number; height: number }>,
+): void {
+  const TOL = 24;
+  for (let i = 0; i < slots.length && i < subLayouts.length; i++) {
+    const expected = subLayouts[i];
+    for (const item of slots[i].items) {
+      const cur = item.layoutTopY;
+      const curH = item.layoutHeight;
+      if (
+        cur == null
+        || Math.abs(cur - expected.topY) > TOL
+        || (curH != null && Math.abs(curH - expected.height) > TOL)
+      ) {
+        item.layoutTopY = expected.topY;
+        item.layoutHeight = expected.height;
+      }
+    }
+  }
+}
+
 function buildPaneItems(
   manager: ChartManager,
   containerEl: HTMLElement | null,
@@ -301,7 +340,12 @@ function buildPaneItems(
   }
 
   const slots = buildVisualSlots(items, indicators);
+  const subLayouts = manager.getIndicatorSubPaneLayouts();
+  assignLayoutsBySubPaneOrder(slots, subLayouts);
   assignLayoutsByPaneIndex(slots, manager.getPaneLayouts());
+  if (subLayouts.length > 0) {
+    reconcileLayoutsWithSubPanes(slots, subLayouts);
+  }
 
   if (containerEl?.isConnected) {
     const missing = items.filter(i => i.layoutTopY == null);
@@ -319,7 +363,7 @@ function buildPaneItems(
     }
   }
 
-  return items.filter(i => i.layoutTopY != null && i.layoutHeight != null);
+  return items;
 }
 
 function paneItemLayout(
@@ -457,10 +501,18 @@ const PaneLegend: React.FC<PaneLegendProps> = ({
       setTimeout(syncPaneItems, 900),
       setTimeout(syncPaneItems, 1200),
       setTimeout(syncPaneItems, 1800),
+      setTimeout(syncPaneItems, 2500),
     ];
+    requestAnimationFrame(() => {
+      requestAnimationFrame(syncPaneItems);
+    });
   }, [syncPaneItems]);
 
-  useEffect(() => { scheduleRetry(); return () => retryRef.current.forEach(clearTimeout); }, [scheduleRetry]);
+  useEffect(() => {
+    setPaneItems([]);
+    scheduleRetry();
+    return () => retryRef.current.forEach(clearTimeout);
+  }, [scheduleRetry]);
 
   useEffect(() => {
     const unsub = manager.subscribePaneLayout(() => scheduleRetry());