feat: enhance v2-split-panel-layout component

SplitPanelLayoutComponent, ConfigPanel, types 개선

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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

@@ -422,6 +422,7 @@ interface AdditionalTabConfigPanelProps {
   availableRightTables: TableInfo[];
   leftTableColumns: ColumnInfo[];
   menuObjid?: number;
+  screenTableName?: string;
   // 공유 컬럼 로드 상태
   loadedTableColumns: Record<string, ColumnInfo[]>;
   loadTableColumns: (tableName: string) => Promise<void>;
@@ -466,14 +467,45 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
   loadTableColumns,
   loadingColumns,
   entityJoinColumns: entityJoinColumnsMap,
+  screenTableName,
 }) => {
-  // 탭 테이블 변경 시 컬럼 로드
+  // 탭 테이블 변경 시 컬럼 로드 + 엔티티 관계 자동 감지
   useEffect(() => {
     if (tab.tableName && !loadedTableColumns[tab.tableName] && !loadingColumns[tab.tableName]) {
       loadTableColumns(tab.tableName);
     }
   }, [tab.tableName, loadedTableColumns, loadingColumns, loadTableColumns]);
 
+  // 탭 테이블 변경 시 좌측 테이블과의 관계 자동 감지
+  useEffect(() => {
+    const leftTable = config.leftPanel?.tableName || screenTableName;
+    const rightTable = tab.tableName;
+    if (!leftTable || !rightTable) return;
+    // 이미 relation이 설정되어 있으면 스킵
+    if (tab.relation?.keys && tab.relation.keys.length > 0) return;
+
+    const detectRelations = async () => {
+      try {
+        const { tableManagementApi } = await import("@/lib/api/tableManagement");
+        const response = await tableManagementApi.getTableEntityRelations(leftTable, rightTable);
+        if (response.success && response.data?.relations?.length > 0) {
+          const firstRel = response.data.relations[0];
+          updateTab({
+            relation: {
+              type: "join",
+              keys: [{ leftColumn: firstRel.leftColumn, rightColumn: firstRel.rightColumn }],
+            },
+          });
+          console.log(`✅ 추가 탭 [${tab.label}] 엔티티 관계 자동 감지:`, firstRel);
+        }
+      } catch (error) {
+        console.warn(`추가 탭 [${tab.label}] 관계 감지 실패:`, error);
+      }
+    };
+    detectRelations();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tab.tableName, config.leftPanel?.tableName, screenTableName]);
+
   // 현재 탭의 컬럼 목록
   const tabColumns = useMemo(() => {
     return tab.tableName ? loadedTableColumns[tab.tableName] || [] : [];
@@ -3707,6 +3739,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                       availableRightTables={availableRightTables}
                       leftTableColumns={leftTableColumns}
                       menuObjid={menuObjid}
+                      screenTableName={screenTableName}
                       loadedTableColumns={loadedTableColumns}
                       loadTableColumns={loadTableColumns}
                       loadingColumns={loadingColumns}