반응형 및 테이블 리스트 컴포넌트 오류 수정

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

@@ -28,7 +28,7 @@ interface SplitPanelLayoutConfigPanelProps {
 export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelProps> = ({
   config,
   onChange,
-  tables = [], // 기본값 빈 배열
+  tables = [], // 기본값 빈 배열 (현재 화면 테이블만)
   screenTableName, // 현재 화면의 테이블명
 }) => {
   const [rightTableOpen, setRightTableOpen] = useState(false);
@@ -36,6 +36,32 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
   const [rightColumnOpen, setRightColumnOpen] = useState(false);
   const [loadedTableColumns, setLoadedTableColumns] = useState<Record<string, ColumnInfo[]>>({});
   const [loadingColumns, setLoadingColumns] = useState<Record<string, boolean>>({});
+  const [allTables, setAllTables] = useState<any[]>([]); // 조인 모드용 전체 테이블 목록
+
+  // 관계 타입
+  const relationshipType = config.rightPanel?.relation?.type || "detail";
+
+  // 조인 모드일 때만 전체 테이블 목록 로드
+  useEffect(() => {
+    if (relationshipType === "join") {
+      const loadAllTables = async () => {
+        try {
+          const { tableManagementApi } = await import("@/lib/api/tableManagement");
+          const response = await tableManagementApi.getTableList();
+          if (response.success && response.data) {
+            console.log("✅ 분할패널 조인 모드: 전체 테이블 목록 로드", response.data.length, "개");
+            setAllTables(response.data);
+          }
+        } catch (error) {
+          console.error("❌ 전체 테이블 목록 로드 실패:", error);
+        }
+      };
+      loadAllTables();
+    } else {
+      // 상세 모드일 때는 기본 테이블만 사용
+      setAllTables([]);
+    }
+  }, [relationshipType]);
 
   // screenTableName이 변경되면 좌측 패널 테이블을 항상 화면 테이블로 설정
   useEffect(() => {
@@ -155,8 +181,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
     );
   }
 
-  // 관계 타입에 따라 우측 테이블을 자동으로 설정
-  const relationshipType = config.rightPanel?.relation?.type || "detail";
+  // 조인 모드에서 우측 테이블 선택 시 사용할 테이블 목록
+  const availableRightTables = relationshipType === "join" ? allTables : tables;
+
+  console.log("📊 분할패널 테이블 목록 상태:");
+  console.log("  - relationshipType:", relationshipType);
+  console.log("  - allTables:", allTables.length, "개");
+  console.log("  - availableRightTables:", availableRightTables.length, "개");
 
   return (
     <div className="space-y-6">
@@ -285,7 +316,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   <CommandInput placeholder="테이블 검색..." />
                   <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
                   <CommandGroup className="max-h-[200px] overflow-auto">
-                    {tables.map((table) => (
+                    {availableRightTables.map((table) => (
                       <CommandItem
                         key={table.tableName}
                         value={table.tableName}
@@ -300,8 +331,8 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                             config.rightPanel?.tableName === table.tableName ? "opacity-100" : "opacity-0",
                           )}
                         />
-                        {table.tableName}
-                        <span className="ml-2 text-xs text-gray-500">({table.tableLabel || ""})</span>
+                        {table.displayName || table.tableName}
+                        {table.displayName && <span className="ml-2 text-xs text-gray-500">({table.tableName})</span>}
                       </CommandItem>
                     ))}
                   </CommandGroup>