feat(SplitPanelLayout2): 추가 조인 테이블 기능 구현

- JoinTableConfig 타입 정의 (joinTable, joinType, mainColumn, joinColumn, selectColumns)

- RightPanelConfig.joinTables 배열 추가로 다중 조인 지원

- loadJoinTableData(), mergeJoinData() 함수로 클라이언트 사이드 조인 처리

- JoinTableItem 컴포넌트로 조인 테이블 설정 UI 제공

- 표시 컬럼에 sourceTable 추가로 테이블별 컬럼 구분

- 메인+조인 테이블 컬럼 통합 로드 기능

frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Component.tsx

@@ -7,6 +7,7 @@ import {
   ColumnConfig,
   DataTransferField,
   ActionButtonConfig,
+  JoinTableConfig,
 } from "./types";
 import { defaultConfig } from "./config";
 import { cn } from "@/lib/utils";
@@ -128,6 +129,94 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
     }
   }, [config.leftPanel?.tableName, config.leftPanel?.hierarchyConfig, isDesignMode]);
 
+  // 조인 테이블 데이터 로드 (단일 테이블)
+  const loadJoinTableData = useCallback(async (
+    joinConfig: JoinTableConfig,
+    mainData: any[]
+  ): Promise<Map<string, any>> => {
+    const resultMap = new Map<string, any>();
+    if (!joinConfig.joinTable || !joinConfig.mainColumn || !joinConfig.joinColumn || mainData.length === 0) {
+      return resultMap;
+    }
+
+    // 메인 데이터에서 조인할 키 값들 추출
+    const joinKeys = [...new Set(mainData.map((item) => item[joinConfig.mainColumn]).filter(Boolean))];
+    if (joinKeys.length === 0) return resultMap;
+
+    try {
+      console.log(`[SplitPanelLayout2] 조인 테이블 로드: ${joinConfig.joinTable}, 키: ${joinKeys.length}개`);
+      
+      const response = await apiClient.post(`/table-management/tables/${joinConfig.joinTable}/data`, {
+        page: 1,
+        size: 1000,
+        // 조인 키 값들로 필터링
+        dataFilter: {
+          enabled: true,
+          matchType: "any", // OR 조건으로 여러 키 매칭
+          filters: joinKeys.map((key, idx) => ({
+            id: `join_key_${idx}`,
+            columnName: joinConfig.joinColumn,
+            operator: "equals",
+            value: String(key),
+            valueType: "static",
+          })),
+        },
+        autoFilter: {
+          enabled: true,
+          filterColumn: "company_code",
+          filterType: "company",
+        },
+      });
+
+      if (response.data.success) {
+        const joinData = response.data.data?.data || [];
+        // 조인 컬럼 값을 키로 하는 Map 생성
+        joinData.forEach((item: any) => {
+          const key = item[joinConfig.joinColumn];
+          if (key) {
+            resultMap.set(String(key), item);
+          }
+        });
+        console.log(`[SplitPanelLayout2] 조인 테이블 로드 완료: ${joinData.length}건`);
+      }
+    } catch (error) {
+      console.error(`[SplitPanelLayout2] 조인 테이블 로드 실패 (${joinConfig.joinTable}):`, error);
+    }
+
+    return resultMap;
+  }, []);
+
+  // 메인 데이터에 조인 테이블 데이터 병합
+  const mergeJoinData = useCallback((
+    mainData: any[],
+    joinConfig: JoinTableConfig,
+    joinDataMap: Map<string, any>
+  ): any[] => {
+    return mainData.map((item) => {
+      const joinKey = item[joinConfig.mainColumn];
+      const joinRow = joinDataMap.get(String(joinKey));
+
+      if (joinRow && joinConfig.selectColumns) {
+        // 선택된 컬럼만 병합
+        const mergedItem = { ...item };
+        joinConfig.selectColumns.forEach((col) => {
+          // alias가 있으면 alias_컬럼명, 없으면 그냥 컬럼명
+          const targetKey = joinConfig.alias ? `${joinConfig.alias}_${col}` : col;
+          // 메인 테이블에 같은 컬럼이 없으면 추가
+          if (!(col in mergedItem)) {
+            mergedItem[col] = joinRow[col];
+          } else if (joinConfig.alias) {
+            // 메인 테이블에 같은 컬럼이 있으면 alias로 추가
+            mergedItem[targetKey] = joinRow[col];
+          }
+        });
+        return mergedItem;
+      }
+
+      return item;
+    });
+  }, []);
+
   // 우측 데이터 로드 (좌측 선택 항목 기반)
   const loadRightData = useCallback(async (selectedItem: any) => {
     if (!config.rightPanel?.tableName || !config.joinConfig?.leftColumn || !config.joinConfig?.rightColumn || !selectedItem) {
@@ -173,7 +262,24 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
 
       if (response.data.success) {
         // API 응답 구조: { success: true, data: { data: [...], total, page, ... } }
-        const data = response.data.data?.data || [];
+        let data = response.data.data?.data || [];
+        console.log(`[SplitPanelLayout2] 메인 데이터 로드 완료: ${data.length}건`);
+
+        // 추가 조인 테이블 처리
+        const joinTables = config.rightPanel?.joinTables || [];
+        if (joinTables.length > 0 && data.length > 0) {
+          console.log(`[SplitPanelLayout2] 조인 테이블 처리 시작: ${joinTables.length}개`);
+          
+          for (const joinTableConfig of joinTables) {
+            const joinDataMap = await loadJoinTableData(joinTableConfig, data);
+            if (joinDataMap.size > 0) {
+              data = mergeJoinData(data, joinTableConfig, joinDataMap);
+            }
+          }
+          
+          console.log(`[SplitPanelLayout2] 조인 데이터 병합 완료`);
+        }
+
         setRightData(data);
         console.log(`[SplitPanelLayout2] 우측 데이터 로드 완료: ${data.length}건`);
       } else {
@@ -196,7 +302,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
     } finally {
       setRightLoading(false);
     }
-  }, [config.rightPanel?.tableName, config.joinConfig]);
+  }, [config.rightPanel?.tableName, config.rightPanel?.joinTables, config.joinConfig, loadJoinTableData, mergeJoinData]);
 
   // 좌측 패널 추가 버튼 클릭
   const handleLeftAddClick = useCallback(() => {

frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel.tsx

@@ -28,7 +28,7 @@ import {
 import { Check, ChevronsUpDown, Plus, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
-import type { SplitPanelLayout2Config, ColumnConfig, DataTransferField } from "./types";
+import type { SplitPanelLayout2Config, ColumnConfig, DataTransferField, JoinTableConfig } from "./types";
 
 // lodash set 대체 함수
 const setPath = (obj: any, path: string, value: any): any => {
@@ -245,6 +245,68 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
     }
   }, [config.rightPanel?.tableName, loadColumns]);
 
+  // 조인 테이블 컬럼도 우측 컬럼 목록에 추가
+  useEffect(() => {
+    const loadJoinTableColumns = async () => {
+      const joinTables = config.rightPanel?.joinTables || [];
+      if (joinTables.length === 0 || !config.rightPanel?.tableName) return;
+
+      // 메인 테이블 컬럼 먼저 로드
+      try {
+        const mainResponse = await apiClient.get(`/table-management/tables/${config.rightPanel.tableName}/columns?size=200`);
+        let mainColumns: ColumnInfo[] = [];
+        
+        if (mainResponse.data?.success) {
+          const columnList = mainResponse.data.data?.columns || mainResponse.data.data || [];
+          mainColumns = columnList.map((c: any) => ({
+            column_name: c.columnName ?? c.column_name ?? c.name ?? "",
+            data_type: c.dataType ?? c.data_type ?? c.type ?? "",
+            column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
+          }));
+        }
+
+        // 조인 테이블들의 선택된 컬럼 추가
+        const joinColumns: ColumnInfo[] = [];
+        for (const jt of joinTables) {
+          if (jt.joinTable && jt.selectColumns && jt.selectColumns.length > 0) {
+            try {
+              const joinResponse = await apiClient.get(`/table-management/tables/${jt.joinTable}/columns?size=200`);
+              if (joinResponse.data?.success) {
+                const columnList = joinResponse.data.data?.columns || joinResponse.data.data || [];
+                const transformedColumns = columnList.map((c: any) => ({
+                  column_name: c.columnName ?? c.column_name ?? c.name ?? "",
+                  data_type: c.dataType ?? c.data_type ?? c.type ?? "",
+                  column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
+                }));
+                
+                // 선택된 컬럼 추가 (테이블명으로 구분)
+                jt.selectColumns.forEach((selCol) => {
+                  const col = transformedColumns.find((c: ColumnInfo) => c.column_name === selCol);
+                  if (col) {
+                    joinColumns.push({
+                      ...col,
+                      column_comment: col.column_comment ? `${col.column_comment} (${jt.joinTable})` : `${col.column_name} (${jt.joinTable})`,
+                    });
+                  }
+                });
+              }
+            } catch (error) {
+              console.error(`조인 테이블 ${jt.joinTable} 컬럼 로드 실패:`, error);
+            }
+          }
+        }
+
+        // 메인 + 조인 컬럼 합치기
+        setRightColumns([...mainColumns, ...joinColumns]);
+        console.log(`[loadJoinTableColumns] 우측 컬럼 로드 완료: 메인 ${mainColumns.length}개 + 조인 ${joinColumns.length}개`);
+      } catch (error) {
+        console.error("조인 테이블 컬럼 로드 실패:", error);
+      }
+    };
+
+    loadJoinTableColumns();
+  }, [config.rightPanel?.tableName, config.rightPanel?.joinTables]);
+
   // 테이블 선택 컴포넌트
   const TableSelect: React.FC<{
     value: string;
@@ -388,13 +450,28 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
     value: string;
     onValueChange: (value: string) => void;
     placeholder: string;
-  }> = ({ columns, value, onValueChange, placeholder }) => {
+    showTableName?: boolean; // 테이블명 표시 여부
+    tableName?: string; // 메인 테이블명 (조인 컬럼과 구분용)
+  }> = ({ columns, value, onValueChange, placeholder, showTableName = false, tableName }) => {
     // 현재 선택된 값의 라벨 찾기
     const selectedColumn = columns.find((col) => col.column_name === value);
     const displayValue = selectedColumn
       ? selectedColumn.column_comment || selectedColumn.column_name
       : value || "";
 
+    // 컬럼이 조인 테이블에서 온 것인지 확인 (column_comment에 괄호가 있으면 조인 테이블)
+    const isJoinColumn = (col: ColumnInfo) => col.column_comment?.includes("(") && col.column_comment?.includes(")");
+    
+    // 컬럼 표시 텍스트 생성
+    const getColumnDisplayText = (col: ColumnInfo) => {
+      const label = col.column_comment || col.column_name;
+      if (showTableName && tableName && !isJoinColumn(col)) {
+        // 메인 테이블 컬럼에 테이블명 추가
+        return `${label} (${tableName})`;
+      }
+      return label;
+    };
+
     return (
       <Select value={value || ""} onValueChange={onValueChange}>
         <SelectTrigger className="h-9 text-sm min-w-[120px]">
@@ -410,7 +487,16 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
           ) : (
             columns.map((col) => (
               <SelectItem key={col.column_name} value={col.column_name}>
-                {col.column_comment || col.column_name}
+                <span className="flex flex-col">
+                  <span>{col.column_comment || col.column_name}</span>
+                  {showTableName && (
+                    <span className="text-[10px] text-muted-foreground">
+                      {isJoinColumn(col) 
+                        ? col.column_name 
+                        : `${col.column_name} (${tableName || "메인"})`}
+                    </span>
+                  )}
+                </span>
               </SelectItem>
             ))
           )}
@@ -419,6 +505,222 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
     );
   };
 
+  // 조인 테이블 아이템 컴포넌트
+  const JoinTableItem: React.FC<{
+    index: number;
+    joinTable: JoinTableConfig;
+    tables: TableInfo[];
+    mainTableColumns: ColumnInfo[];
+    onUpdate: (field: keyof JoinTableConfig | Partial<JoinTableConfig>, value?: any) => void;
+    onRemove: () => void;
+  }> = ({ index, joinTable, tables, mainTableColumns, onUpdate, onRemove }) => {
+    const [joinTableColumns, setJoinTableColumns] = useState<ColumnInfo[]>([]);
+    const [joinTableOpen, setJoinTableOpen] = useState(false);
+
+    // 조인 테이블 선택 시 해당 테이블의 컬럼 로드
+    useEffect(() => {
+      const loadJoinTableColumns = async () => {
+        if (!joinTable.joinTable) {
+          setJoinTableColumns([]);
+          return;
+        }
+        try {
+          const response = await apiClient.get(`/table-management/tables/${joinTable.joinTable}/columns?size=200`);
+          let columnList: any[] = [];
+          if (response.data?.success && response.data?.data?.columns) {
+            columnList = response.data.data.columns;
+          } else if (Array.isArray(response.data?.data?.columns)) {
+            columnList = response.data.data.columns;
+          } else if (Array.isArray(response.data?.data)) {
+            columnList = response.data.data;
+          }
+
+          const transformedColumns = columnList.map((c: any) => ({
+            column_name: c.columnName ?? c.column_name ?? c.name ?? "",
+            data_type: c.dataType ?? c.data_type ?? c.type ?? "",
+            column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
+          }));
+          setJoinTableColumns(transformedColumns);
+        } catch (error) {
+          console.error("조인 테이블 컬럼 로드 실패:", error);
+          setJoinTableColumns([]);
+        }
+      };
+      loadJoinTableColumns();
+    }, [joinTable.joinTable]);
+
+    const selectedTable = tables.find((t) => t.table_name === joinTable.joinTable);
+
+    return (
+      <div className="rounded-md border p-3 space-y-3">
+        <div className="flex items-center justify-between">
+          <span className="text-xs font-medium text-muted-foreground">조인 {index + 1}</span>
+          <Button size="sm" variant="ghost" className="h-6 w-6 p-0" onClick={onRemove}>
+            <X className="h-3 w-3" />
+          </Button>
+        </div>
+
+        {/* 조인 테이블 선택 */}
+        <div>
+          <Label className="text-xs">조인할 테이블</Label>
+          <Popover open={joinTableOpen} onOpenChange={setJoinTableOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={joinTableOpen}
+                className="h-8 w-full justify-between text-xs"
+              >
+                {selectedTable
+                  ? selectedTable.table_comment || selectedTable.table_name
+                  : joinTable.joinTable || "테이블 선택"}
+                <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-full p-0" align="start">
+              <Command>
+                <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
+                <CommandList>
+                  <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                  <CommandGroup>
+                    {tables.map((table) => (
+                      <CommandItem
+                        key={table.table_name}
+                        value={`${table.table_name} ${table.table_comment || ""}`}
+                        onSelect={() => {
+                          // cmdk가 value를 소문자로 변환하므로 직접 table.table_name 사용
+                          // 여러 필드를 한 번에 업데이트 (연속 호출 시 덮어쓰기 방지)
+                          onUpdate({
+                            joinTable: table.table_name,
+                            selectColumns: [], // 테이블 변경 시 선택 컬럼 초기화
+                          });
+                          setJoinTableOpen(false);
+                        }}
+                        className="text-xs"
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-3 w-3",
+                            joinTable.joinTable === table.table_name ? "opacity-100" : "opacity-0"
+                          )}
+                        />
+                        <span className="flex flex-col">
+                          <span>{table.table_comment || table.table_name}</span>
+                          <span className="text-[10px] text-muted-foreground">{table.table_name}</span>
+                        </span>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        {/* 조인 타입 */}
+        <div>
+          <Label className="text-xs">조인 방식</Label>
+          <Select
+            value={joinTable.joinType || "LEFT"}
+            onValueChange={(value) => onUpdate("joinType", value)}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="LEFT">LEFT JOIN (데이터 없어도 표시)</SelectItem>
+              <SelectItem value="INNER">INNER JOIN (데이터 있어야만 표시)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* 조인 조건 */}
+        <div className="space-y-2">
+          <Label className="text-xs">조인 조건</Label>
+          <div className="rounded-md bg-muted/30 p-2 space-y-2">
+            <div>
+              <Label className="text-[10px] text-muted-foreground">메인 테이블 컬럼</Label>
+              <ColumnSelect
+                columns={mainTableColumns}
+                value={joinTable.mainColumn || ""}
+                onValueChange={(value) => onUpdate("mainColumn", value)}
+                placeholder="메인 테이블 컬럼"
+              />
+            </div>
+            <div className="text-center text-[10px] text-muted-foreground">=</div>
+            <div>
+              <Label className="text-[10px] text-muted-foreground">조인 테이블 컬럼</Label>
+              <ColumnSelect
+                columns={joinTableColumns}
+                value={joinTable.joinColumn || ""}
+                onValueChange={(value) => onUpdate("joinColumn", value)}
+                placeholder="조인 테이블 컬럼"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* 가져올 컬럼 선택 */}
+        <div>
+          <div className="flex items-center justify-between mb-1">
+            <Label className="text-xs">가져올 컬럼</Label>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="h-5 text-[10px] px-1"
+              onClick={() => {
+                const current = joinTable.selectColumns || [];
+                onUpdate("selectColumns", [...current, ""]);
+              }}
+              disabled={!joinTable.joinTable}
+            >
+              <Plus className="mr-0.5 h-2.5 w-2.5" />
+              추가
+            </Button>
+          </div>
+          <p className="text-[10px] text-muted-foreground mb-2">
+            조인 테이블에서 표시할 컬럼들을 선택하세요
+          </p>
+          <div className="space-y-1">
+            {(joinTable.selectColumns || []).map((col, colIndex) => (
+              <div key={colIndex} className="flex items-center gap-1">
+                <ColumnSelect
+                  columns={joinTableColumns}
+                  value={col}
+                  onValueChange={(value) => {
+                    const current = [...(joinTable.selectColumns || [])];
+                    current[colIndex] = value;
+                    onUpdate("selectColumns", current);
+                  }}
+                  placeholder="컬럼 선택"
+                />
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="h-8 w-8 shrink-0 p-0"
+                  onClick={() => {
+                    const current = joinTable.selectColumns || [];
+                    onUpdate(
+                      "selectColumns",
+                      current.filter((_, i) => i !== colIndex)
+                    );
+                  }}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              </div>
+            ))}
+            {(joinTable.selectColumns || []).length === 0 && (
+              <div className="rounded border py-2 text-center text-[10px] text-muted-foreground">
+                가져올 컬럼을 추가하세요
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   // 표시 컬럼 추가
   const addDisplayColumn = (side: "left" | "right") => {
     const path = side === "left" ? "leftPanel.displayColumns" : "rightPanel.displayColumns";
@@ -440,14 +742,25 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
   };
 
   // 표시 컬럼 업데이트
-  const updateDisplayColumn = (side: "left" | "right", index: number, field: keyof ColumnConfig, value: any) => {
+  const updateDisplayColumn = (
+    side: "left" | "right",
+    index: number,
+    fieldOrPartial: keyof ColumnConfig | Partial<ColumnConfig>,
+    value?: any
+  ) => {
     const path = side === "left" ? "leftPanel.displayColumns" : "rightPanel.displayColumns";
     const currentColumns = side === "left"
       ? [...(config.leftPanel?.displayColumns || [])]
       : [...(config.rightPanel?.displayColumns || [])];
 
     if (currentColumns[index]) {
-      currentColumns[index] = { ...currentColumns[index], [field]: value };
+      if (typeof fieldOrPartial === "object") {
+        // 여러 필드를 한 번에 업데이트
+        currentColumns[index] = { ...currentColumns[index], ...fieldOrPartial };
+      } else {
+        // 단일 필드 업데이트
+        currentColumns[index] = { ...currentColumns[index], [fieldOrPartial]: value };
+      }
       updateConfig(path, currentColumns);
     }
   };
@@ -687,6 +1000,66 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
             />
           </div>
 
+          {/* 추가 조인 테이블 설정 */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label className="text-xs">추가 조인 테이블</Label>
+              <Button
+                size="sm"
+                variant="ghost"
+                className="h-6 text-xs"
+                onClick={() => {
+                  const current = config.rightPanel?.joinTables || [];
+                  updateConfig("rightPanel.joinTables", [
+                    ...current,
+                    {
+                      joinTable: "",
+                      joinType: "LEFT",
+                      mainColumn: "",
+                      joinColumn: "",
+                      selectColumns: [],
+                    },
+                  ]);
+                }}
+              >
+                <Plus className="mr-1 h-3 w-3" />
+                추가
+              </Button>
+            </div>
+            <p className="text-[10px] text-muted-foreground">
+              다른 테이블을 조인하면 표시할 컬럼에서 해당 테이블의 컬럼도 선택할 수 있습니다.
+            </p>
+            <div className="space-y-2">
+              {(config.rightPanel?.joinTables || []).map((joinTable, index) => (
+                <JoinTableItem
+                  key={index}
+                  index={index}
+                  joinTable={joinTable}
+                  tables={tables}
+                  mainTableColumns={rightColumns}
+                  onUpdate={(fieldOrPartial, value) => {
+                    const current = [...(config.rightPanel?.joinTables || [])];
+                    if (typeof fieldOrPartial === "object") {
+                      // 여러 필드를 한 번에 업데이트
+                      current[index] = { ...current[index], ...fieldOrPartial };
+                    } else {
+                      // 단일 필드 업데이트
+                      current[index] = { ...current[index], [fieldOrPartial]: value };
+                    }
+                    updateConfig("rightPanel.joinTables", current);
+                  }}
+                  onRemove={() => {
+                    const current = config.rightPanel?.joinTables || [];
+                    updateConfig(
+                      "rightPanel.joinTables",
+                      current.filter((_, i) => i !== index)
+                    );
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+
           {/* 표시 컬럼 */}
           <div>
             <div className="flex items-center justify-between mb-2">
@@ -696,52 +1069,144 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
                 추가
               </Button>
             </div>
+            <p className="text-[10px] text-muted-foreground mb-2">
+              테이블을 선택한 후 해당 테이블의 컬럼을 선택하세요.
+            </p>
             <div className="space-y-3">
-              {(config.rightPanel?.displayColumns || []).map((col, index) => (
-                <div key={index} className="rounded-md border p-3 space-y-2">
-                  <div className="flex items-center justify-between">
-                    <span className="text-xs font-medium text-muted-foreground">컬럼 {index + 1}</span>
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      className="h-6 w-6 p-0"
-                      onClick={() => removeDisplayColumn("right", index)}
-                    >
-                      <X className="h-3 w-3" />
-                    </Button>
+              {(config.rightPanel?.displayColumns || []).map((col, index) => {
+                // 선택 가능한 테이블 목록: 메인 테이블 + 조인 테이블들
+                const availableTables = [
+                  config.rightPanel?.tableName,
+                  ...(config.rightPanel?.joinTables || []).map((jt) => jt.joinTable),
+                ].filter(Boolean) as string[];
+
+                // 선택된 테이블의 컬럼만 필터링
+                const selectedSourceTable = col.sourceTable || config.rightPanel?.tableName;
+                const filteredColumns = rightColumns.filter((c) => {
+                  // 조인 테이블 컬럼인지 확인 (column_comment에 테이블명 포함)
+                  const isJoinColumn = c.column_comment?.includes("(") && c.column_comment?.includes(")");
+                  
+                  if (selectedSourceTable === config.rightPanel?.tableName) {
+                    // 메인 테이블 선택 시: 조인 컬럼 아닌 것만
+                    return !isJoinColumn;
+                  } else {
+                    // 조인 테이블 선택 시: 해당 테이블 컬럼만
+                    return c.column_comment?.includes(`(${selectedSourceTable})`);
+                  }
+                });
+
+                // 테이블 라벨 가져오기
+                const getTableLabel = (tableName: string) => {
+                  const table = tables.find((t) => t.table_name === tableName);
+                  return table?.table_comment || tableName;
+                };
+
+                return (
+                  <div key={index} className="rounded-md border p-3 space-y-2">
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs font-medium text-muted-foreground">컬럼 {index + 1}</span>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        className="h-6 w-6 p-0"
+                        onClick={() => removeDisplayColumn("right", index)}
+                      >
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </div>
+                    
+                    {/* 테이블 선택 */}
+                    <div>
+                      <Label className="text-[10px] text-muted-foreground">테이블</Label>
+                      <Select
+                        value={col.sourceTable || config.rightPanel?.tableName || ""}
+                        onValueChange={(value) => {
+                          // 테이블 변경 시 sourceTable과 name을 한 번에 업데이트
+                          updateDisplayColumn("right", index, {
+                            sourceTable: value,
+                            name: "", // 컬럼 초기화
+                          });
+                        }}
+                      >
+                        <SelectTrigger className="h-8 text-xs">
+                          <SelectValue placeholder="테이블 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {availableTables.map((tableName) => (
+                            <SelectItem key={tableName} value={tableName}>
+                              <span className="flex flex-col">
+                                <span>{getTableLabel(tableName)}</span>
+                                <span className="text-[10px] text-muted-foreground">{tableName}</span>
+                              </span>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* 컬럼 선택 */}
+                    <div>
+                      <Label className="text-[10px] text-muted-foreground">컬럼</Label>
+                      <Select
+                        value={col.name || ""}
+                        onValueChange={(value) => updateDisplayColumn("right", index, "name", value)}
+                      >
+                        <SelectTrigger className="h-8 text-xs">
+                          <SelectValue placeholder="컬럼 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {filteredColumns.length === 0 ? (
+                            <SelectItem value="_empty" disabled>
+                              테이블을 먼저 선택하세요
+                            </SelectItem>
+                          ) : (
+                            filteredColumns.map((c) => {
+                              // 조인 컬럼의 경우 테이블명 제거하고 표시
+                              const displayLabel = c.column_comment?.replace(/\s*\([^)]+\)$/, "") || c.column_name;
+                              return (
+                                <SelectItem key={c.column_name} value={c.column_name}>
+                                  <span className="flex flex-col">
+                                    <span>{displayLabel}</span>
+                                    <span className="text-[10px] text-muted-foreground">{c.column_name}</span>
+                                  </span>
+                                </SelectItem>
+                              );
+                            })
+                          )}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* 표시 라벨 */}
+                    <div>
+                      <Label className="text-[10px] text-muted-foreground">표시 라벨</Label>
+                      <Input
+                        value={col.label || ""}
+                        onChange={(e) => updateDisplayColumn("right", index, "label", e.target.value)}
+                        placeholder="라벨명 (미입력 시 컬럼명 사용)"
+                        className="h-8 text-xs"
+                      />
+                    </div>
+
+                    {/* 표시 위치 */}
+                    <div>
+                      <Label className="text-[10px] text-muted-foreground">표시 위치</Label>
+                      <Select
+                        value={col.displayRow || "info"}
+                        onValueChange={(value) => updateDisplayColumn("right", index, "displayRow", value)}
+                      >
+                        <SelectTrigger className="h-8 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="name">이름 행 (Name Row)</SelectItem>
+                          <SelectItem value="info">정보 행 (Info Row)</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
                   </div>
-                  <ColumnSelect
-                    columns={rightColumns}
-                    value={col.name}
-                    onValueChange={(value) => updateDisplayColumn("right", index, "name", value)}
-                    placeholder="컬럼 선택"
-                  />
-                  <div>
-                    <Label className="text-xs text-muted-foreground">표시 라벨</Label>
-                    <Input
-                      value={col.label || ""}
-                      onChange={(e) => updateDisplayColumn("right", index, "label", e.target.value)}
-                      placeholder="라벨명 (미입력 시 컬럼명 사용)"
-                      className="h-8 text-xs"
-                    />
-                  </div>
-                  <div>
-                    <Label className="text-xs text-muted-foreground">표시 위치</Label>
-                    <Select
-                      value={col.displayRow || "info"}
-                      onValueChange={(value) => updateDisplayColumn("right", index, "displayRow", value)}
-                    >
-                      <SelectTrigger className="h-8 text-xs">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="name">이름 행 (Name Row)</SelectItem>
-                        <SelectItem value="info">정보 행 (Info Row)</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-              ))}
+                );
+              })}
               {(config.rightPanel?.displayColumns || []).length === 0 && (
                 <div className="text-center py-4 text-xs text-muted-foreground border rounded-md">
                   표시할 컬럼을 추가하세요

frontend/lib/registry/components/split-panel-layout2/types.ts

@@ -9,6 +9,7 @@
 export interface ColumnConfig {
   name: string; // 컬럼명
   label: string; // 표시 라벨
+  sourceTable?: string; // 소스 테이블명 (메인 테이블 또는 조인 테이블)
   displayRow?: "name" | "info"; // 표시 위치 (name: 이름 행, info: 정보 행)
   width?: number; // 너비 (px)
   bold?: boolean; // 굵게 표시
@@ -94,6 +95,17 @@ export interface RightPanelConfig {
   actionButtons?: ActionButtonConfig[]; // 복수 액션 버튼 배열
   primaryKeyColumn?: string; // 기본키 컬럼명 (수정/삭제용, 기본: id)
   emptyMessage?: string; // 데이터 없을 때 메시지
+  
+  /**
+   * 추가 조인 테이블 설정
+   * 메인 테이블에 다른 테이블을 JOIN하여 추가 정보를 함께 표시합니다.
+   * 
+   * 사용 예시:
+   * - 메인 테이블: user_dept (부서-사용자 관계)
+   * - 조인 테이블: user_info (사용자 개인정보)
+   * - 결과: 부서별 사원 목록에 이메일, 전화번호 등 개인정보 함께 표시
+   */
+  joinTables?: JoinTableConfig[];
 }
 
 /**
@@ -104,6 +116,27 @@ export interface JoinConfig {
   rightColumn: string; // 우측 테이블의 조인 컬럼
 }
 
+/**
+ * 추가 조인 테이블 설정
+ * 우측 패널의 메인 테이블에 다른 테이블을 JOIN하여 추가 컬럼을 가져옵니다.
+ * 
+ * 예시: user_dept (메인) + user_info (조인) → 부서관계 + 개인정보 함께 표시
+ * 
+ * - joinTable: 조인할 테이블명 (예: user_info)
+ * - joinType: 조인 방식 (LEFT JOIN 권장)
+ * - mainColumn: 메인 테이블의 조인 컬럼 (예: user_id)
+ * - joinColumn: 조인 테이블의 조인 컬럼 (예: user_id)
+ * - selectColumns: 조인 테이블에서 가져올 컬럼들 (예: email, cell_phone)
+ */
+export interface JoinTableConfig {
+  joinTable: string; // 조인할 테이블명
+  joinType: "LEFT" | "INNER"; // 조인 타입 (LEFT: 없어도 표시, INNER: 있어야만 표시)
+  mainColumn: string; // 메인 테이블의 조인 컬럼
+  joinColumn: string; // 조인 테이블의 조인 컬럼
+  selectColumns: string[]; // 조인 테이블에서 가져올 컬럼들
+  alias?: string; // 테이블 별칭 (중복 컬럼명 구분용)
+}
+
 /**
  * 메인 설정
  */