11

frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx

@@ -318,7 +318,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const [rightDraggedColumnIndex, setRightDraggedColumnIndex] = useState<number | null>(null);
   const [rightDropTargetColumnIndex, setRightDropTargetColumnIndex] = useState<number | null>(null);
   const [rightDragSource, setRightDragSource] = useState<"main" | number | null>(null);
-  const [runtimeColumnOrder, setRuntimeColumnOrder] = useState<Record<string, number[]>>({});
+  const [runtimeColumnOrder, setRuntimeColumnOrder] = useState<Record<string, string[]>>({});
 
   // 데이터 상태
   const [leftData, setLeftData] = useState<any[]>([]);
@@ -2597,17 +2597,33 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           });
         }
       } else {
-        // 런타임 모드: 로컬 상태로 순서 변경
+        // 런타임 모드: 컬럼 이름 순서로 로컬 상태 관리
         const key = String(source);
-        setRuntimeColumnOrder((prev) => {
-          const existing = prev[key];
-          const maxLen = 100;
-          const order = existing || Array.from({ length: maxLen }, (_, i) => i);
-          const reordered = [...order];
-          const [removed] = reordered.splice(fromIdx, 1);
-          reordered.splice(targetIndex, 0, removed);
-          return { ...prev, [key]: reordered };
-        });
+        const rightPanel = componentConfig.rightPanel || {};
+        let colNames: string[] = [];
+
+        if (source === "main") {
+          const allColumns = rightPanel.columns || [];
+          colNames = allColumns.filter((c: any) => c.showInSummary !== false).map((c: any) => c.name);
+        } else if (typeof source === "number") {
+          const tabs = rightPanel.additionalTabs || [];
+          const tabConfig = tabs[source];
+          if (tabConfig?.columns) {
+            colNames = tabConfig.columns.filter((c: any) => c.showInSummary !== false).map((c: any) => c.name);
+          }
+        }
+
+        if (colNames.length > 0) {
+          setRuntimeColumnOrder((prev) => {
+            const currentOrder = prev[key] || colNames;
+            const reordered = [...currentOrder];
+            if (fromIdx >= 0 && fromIdx < reordered.length && targetIndex >= 0 && targetIndex < reordered.length) {
+              const [removed] = reordered.splice(fromIdx, 1);
+              reordered.splice(targetIndex, 0, removed);
+            }
+            return { ...prev, [key]: reordered };
+          });
+        }
       }
       handleRightColumnDragEnd();
     },
@@ -2622,21 +2638,26 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     ],
   );
 
-  // 런타임 컬럼 순서 적용 헬퍼
+  // 런타임 컬럼 순서 적용 헬퍼 (이름 기반)
   const applyRuntimeOrder = useCallback(
-    <T,>(columns: T[], source: "main" | number): T[] => {
+    (columns: any[], source: "main" | number): any[] => {
       const key = String(source);
       const order = runtimeColumnOrder[key];
-      if (!order) return columns;
-      const result: T[] = [];
-      for (const idx of order) {
-        if (idx < columns.length) result.push(columns[idx]);
+      if (!order || order.length === 0) return columns;
+      const colMap = new Map(columns.map((col) => [col.name, col]));
+      const result: any[] = [];
+      for (const name of order) {
+        const col = colMap.get(name);
+        if (col) {
+          result.push(col);
+          colMap.delete(name);
+        }
       }
-      // order에 없는 나머지 컬럼 추가
-      for (let i = 0; i < columns.length; i++) {
-        if (!order.includes(i)) result.push(columns[i]);
+      // order에 없는 나머지 컬럼 뒤에 추가
+      for (const col of colMap.values()) {
+        result.push(col);
       }
-      return result.length > 0 ? result : columns;
+      return result;
     },
     [runtimeColumnOrder],
   );