타입에러 수정

- SearchColumnConfig 타입 추가 (types.ts)
- 좌측/우측 패널 모두 여러 검색 컬럼 설정 가능
- ConfigPanel에 검색 컬럼 추가/삭제 UI 구현
- 검색 시 OR 조건으로 여러 컬럼 동시 검색
- 기존 searchColumn 단일 설정과 하위 호환성 유지

backend-node/src/controllers/driverController.ts

@@ -1,14 +1,15 @@
 // 공차중계 운전자 컨트롤러
-import { Request, Response } from "express";
+import { Response } from "express";
 import { query } from "../database/db";
 import { logger } from "../utils/logger";
+import { AuthenticatedRequest } from "../types/auth";
 
 export class DriverController {
   /**
    * GET /api/driver/profile
    * 운전자 프로필 조회
    */
-  static async getProfile(req: Request, res: Response): Promise<void> {
+  static async getProfile(req: AuthenticatedRequest, res: Response): Promise<void> {
     try {
       const userId = req.user?.userId;
 
@@ -85,7 +86,7 @@ export class DriverController {
    * PUT /api/driver/profile
    * 운전자 프로필 수정 (이름, 연락처, 면허정보, 차량번호, 차종)
    */
-  static async updateProfile(req: Request, res: Response): Promise<void> {
+  static async updateProfile(req: AuthenticatedRequest, res: Response): Promise<void> {
     try {
       const userId = req.user?.userId;
 
@@ -183,7 +184,7 @@ export class DriverController {
    * PUT /api/driver/status
    * 차량 상태 변경 (대기/정비만 가능)
    */
-  static async updateStatus(req: Request, res: Response): Promise<void> {
+  static async updateStatus(req: AuthenticatedRequest, res: Response): Promise<void> {
     try {
       const userId = req.user?.userId;
 
@@ -246,7 +247,7 @@ export class DriverController {
    * DELETE /api/driver/vehicle
    * 차량 삭제 (user_id = NULL 처리, 기록 보존)
    */
-  static async deleteVehicle(req: Request, res: Response): Promise<void> {
+  static async deleteVehicle(req: AuthenticatedRequest, res: Response): Promise<void> {
     try {
       const userId = req.user?.userId;
 
@@ -303,7 +304,7 @@ export class DriverController {
    * POST /api/driver/vehicle
    * 새 차량 등록
    */
-  static async registerVehicle(req: Request, res: Response): Promise<void> {
+  static async registerVehicle(req: AuthenticatedRequest, res: Response): Promise<void> {
     try {
       const userId = req.user?.userId;
       const companyCode = req.user?.companyCode;
@@ -400,7 +401,7 @@ export class DriverController {
    * DELETE /api/driver/account
    * 회원 탈퇴 (차량 정보 포함 삭제)
    */
-  static async deleteAccount(req: Request, res: Response): Promise<void> {
+  static async deleteAccount(req: AuthenticatedRequest, res: Response): Promise<void> {
     try {
       const userId = req.user?.userId;
 

frontend/components/screen/EditModal.tsx

@@ -118,7 +118,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
   // 전역 모달 이벤트 리스너
   useEffect(() => {
     const handleOpenEditModal = (event: CustomEvent) => {
-      const { screenId, title, description, modalSize, editData, onSave, groupByColumns, tableName } = event.detail;
+      const { screenId, title, description, modalSize, editData, onSave, groupByColumns, tableName, isCreateMode } = event.detail;
 
       setModalState({
         isOpen: true,
@@ -134,7 +134,13 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
 
       // 편집 데이터로 폼 데이터 초기화
       setFormData(editData || {});
-      setOriginalData(editData || {});
+      // 🆕 isCreateMode가 true이면 originalData를 빈 객체로 설정 (INSERT 모드)
+      // originalData가 비어있으면 INSERT, 있으면 UPDATE로 처리됨
+      setOriginalData(isCreateMode ? {} : (editData || {}));
+      
+      if (isCreateMode) {
+        console.log("[EditModal] 생성 모드로 열림, 초기값:", editData);
+      }
     };
 
     const handleCloseEditModal = () => {
@@ -567,46 +573,77 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
         return;
       }
 
-      // 기존 로직: 단일 레코드 수정
+      // originalData가 비어있으면 INSERT, 있으면 UPDATE
-      const changedData: Record<string, any> = {};
+      const isCreateMode = Object.keys(originalData).length === 0;
-      Object.keys(formData).forEach((key) => {
+      
-        if (formData[key] !== originalData[key]) {
+      if (isCreateMode) {
-          changedData[key] = formData[key];
+        // INSERT 모드
-        }
+        console.log("[EditModal] INSERT 모드 - 새 데이터 생성:", formData);
-      });
+        
+        const response = await dynamicFormApi.saveFormData({
+          screenId: modalState.screenId!,
+          tableName: screenData.screenInfo.tableName,
+          data: formData,
+        });
 
-      if (Object.keys(changedData).length === 0) {
+        if (response.success) {
-        toast.info("변경된 내용이 없습니다.");
+          toast.success("데이터가 생성되었습니다.");
-        handleClose();
-        return;
-      }
 
-      // 기본키 확인 (id 또는 첫 번째 키)
+          // 부모 컴포넌트의 onSave 콜백 실행 (테이블 새로고침)
-      const recordId = originalData.id || Object.values(originalData)[0];
+          if (modalState.onSave) {
-
+            try {
-      // UPDATE 액션 실행
+              modalState.onSave();
-      const response = await dynamicFormApi.updateFormDataPartial(
+            } catch (callbackError) {
-        recordId,
+              console.error("onSave 콜백 에러:", callbackError);
-        originalData,
+            }
-        changedData,
-        screenData.screenInfo.tableName,
-      );
-
-      if (response.success) {
-        toast.success("데이터가 수정되었습니다.");
-
-        // 부모 컴포넌트의 onSave 콜백 실행 (테이블 새로고침)
-        if (modalState.onSave) {
-          try {
-            modalState.onSave();
-          } catch (callbackError) {
-            console.error("⚠️ onSave 콜백 에러:", callbackError);
           }
+
+          handleClose();
+        } else {
+          throw new Error(response.message || "생성에 실패했습니다.");
+        }
+      } else {
+        // UPDATE 모드 - 기존 로직
+        const changedData: Record<string, any> = {};
+        Object.keys(formData).forEach((key) => {
+          if (formData[key] !== originalData[key]) {
+            changedData[key] = formData[key];
+          }
+        });
+
+        if (Object.keys(changedData).length === 0) {
+          toast.info("변경된 내용이 없습니다.");
+          handleClose();
+          return;
         }
 
-        handleClose();
+        // 기본키 확인 (id 또는 첫 번째 키)
-      } else {
+        const recordId = originalData.id || Object.values(originalData)[0];
-        throw new Error(response.message || "수정에 실패했습니다.");
+
+        // UPDATE 액션 실행
+        const response = await dynamicFormApi.updateFormDataPartial(
+          recordId,
+          originalData,
+          changedData,
+          screenData.screenInfo.tableName,
+        );
+
+        if (response.success) {
+          toast.success("데이터가 수정되었습니다.");
+
+          // 부모 컴포넌트의 onSave 콜백 실행 (테이블 새로고침)
+          if (modalState.onSave) {
+            try {
+              modalState.onSave();
+            } catch (callbackError) {
+              console.error("onSave 콜백 에러:", callbackError);
+            }
+          }
+
+          handleClose();
+        } else {
+          throw new Error(response.message || "수정에 실패했습니다.");
+        }
       }
     } catch (error: any) {
       console.error("❌ 수정 실패:", error);

frontend/lib/registry/components/index.ts

@@ -37,6 +37,7 @@ import "./accordion-basic/AccordionBasicRenderer";
 import "./table-list/TableListRenderer";
 import "./card-display/CardDisplayRenderer";
 import "./split-panel-layout/SplitPanelLayoutRenderer";
+import "./split-panel-layout2/SplitPanelLayout2Renderer"; // 분할 패널 레이아웃 v2
 import "./map/MapRenderer";
 import "./repeater-field-group/RepeaterFieldGroupRenderer";
 import "./flow-widget/FlowWidgetRenderer";

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

@@ -1684,53 +1684,43 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                       const isExpanded = expandedItems.has(itemId);
                       const level = item.level || 0;
 
-                      // 조인에 사용하는 leftColumn을 필수로 표시
+                      // 🔧 수정: "표시할 컬럼 선택"에서 설정한 컬럼을 우선 사용
-                      const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
+                      const configuredColumns = componentConfig.leftPanel?.columns || [];
                       let displayFields: { label: string; value: any }[] = [];
 
                       // 디버그 로그
                       if (index === 0) {
                         console.log("🔍 좌측 패널 표시 로직:");
-                        console.log("  - leftColumn (조인 키):", leftColumn);
+                        console.log("  - 설정된 표시 컬럼:", configuredColumns);
                         console.log("  - item keys:", Object.keys(item));
                       }
 
-                      if (leftColumn) {
+                      if (configuredColumns.length > 0) {
-                        // 조인 모드: leftColumn 값을 첫 번째로 표시 (필수)
+                        // 🔧 "표시할 컬럼 선택"에서 설정한 컬럼 사용
-                        displayFields.push({
+                        displayFields = configuredColumns.slice(0, 2).map((col: any) => {
-                          label: leftColumn,
+                          const colName = typeof col === "string" ? col : col.name || col.columnName;
-                          value: item[leftColumn],
+                          const colLabel = typeof col === "object" ? col.label : leftColumnLabels[colName] || colName;
+                          return {
+                            label: colLabel,
+                            value: item[colName],
+                          };
                         });
 
-                        // 추가로 다른 의미있는 필드 1-2개 표시 (동적)
-                        const additionalKeys = Object.keys(item).filter(
-                          (k) =>
-                            k !== "id" &&
-                            k !== "ID" &&
-                            k !== leftColumn &&
-                            shouldShowField(k),
-                        );
-
-                        if (additionalKeys.length > 0) {
-                          displayFields.push({
-                            label: additionalKeys[0],
-                            value: item[additionalKeys[0]],
-                          });
-                        }
-
                         if (index === 0) {
-                          console.log("  ✅ 조인 키 기반 표시:", displayFields);
+                          console.log("  ✅ 설정된 컬럼 기반 표시:", displayFields);
                         }
                       } else {
-                        // 상세 모드 또는 설정 없음: 자동으로 첫 2개 필드 표시
+                        // 설정된 컬럼이 없으면 자동으로 첫 2개 필드 표시
-                        const keys = Object.keys(item).filter((k) => k !== "id" && k !== "ID");
+                        const keys = Object.keys(item).filter(
+                          (k) => k !== "id" && k !== "ID" && k !== "children" && k !== "level" && shouldShowField(k)
+                        );
                         displayFields = keys.slice(0, 2).map((key) => ({
-                          label: key,
+                          label: leftColumnLabels[key] || key,
                           value: item[key],
                         }));
 
                         if (index === 0) {
-                          console.log("  ⚠️ 조인 키 없음, 자동 선택:", displayFields);
+                          console.log("  ⚠️ 설정된 컬럼 없음, 자동 선택:", displayFields);
                         }
                       }
 

frontend/lib/registry/components/split-panel-layout2/README.md

@@ -0,0 +1,102 @@
+# SplitPanelLayout2 컴포넌트
+
+마스터-디테일 패턴의 좌우 분할 레이아웃 컴포넌트 (개선 버전)
+
+## 개요
+
+- **ID**: `split-panel-layout2`
+- **카테고리**: layout
+- **웹타입**: container
+- **버전**: 2.0.0
+
+## 주요 기능
+
+- 좌측 패널: 마스터 데이터 목록 (예: 부서 목록)
+- 우측 패널: 디테일 데이터 목록 (예: 부서원 목록)
+- 조인 기반 데이터 연결
+- 검색 기능 (좌측/우측 모두)
+- 계층 구조 지원 (트리 형태)
+- 데이터 전달 기능 (모달로 선택된 데이터 전달)
+- 리사이즈 가능한 분할 바
+
+## 사용 예시
+
+### 부서-사원 관리
+
+1. 좌측 패널: `dept_info` 테이블 (부서 목록)
+2. 우측 패널: `user_info` 테이블 (사원 목록)
+3. 조인 조건: `dept_code` = `dept_code`
+4. 데이터 전달: `dept_code`, `dept_name`, `company_code`
+
+## 설정 옵션
+
+### 좌측 패널 설정
+
+| 속성 | 타입 | 설명 |
+|------|------|------|
+| title | string | 패널 제목 |
+| tableName | string | 테이블명 |
+| displayColumns | ColumnConfig[] | 표시할 컬럼 목록 |
+| searchColumn | string | 검색 대상 컬럼 |
+| showSearch | boolean | 검색 기능 표시 여부 |
+| hierarchyConfig | object | 계층 구조 설정 |
+
+### 우측 패널 설정
+
+| 속성 | 타입 | 설명 |
+|------|------|------|
+| title | string | 패널 제목 |
+| tableName | string | 테이블명 |
+| displayColumns | ColumnConfig[] | 표시할 컬럼 목록 |
+| searchColumn | string | 검색 대상 컬럼 |
+| showSearch | boolean | 검색 기능 표시 여부 |
+| showAddButton | boolean | 추가 버튼 표시 |
+| showEditButton | boolean | 수정 버튼 표시 |
+| showDeleteButton | boolean | 삭제 버튼 표시 |
+
+### 조인 설정
+
+| 속성 | 타입 | 설명 |
+|------|------|------|
+| leftColumn | string | 좌측 테이블의 조인 컬럼 |
+| rightColumn | string | 우측 테이블의 조인 컬럼 |
+
+### 데이터 전달 설정
+
+| 속성 | 타입 | 설명 |
+|------|------|------|
+| sourceColumn | string | 좌측 패널의 소스 컬럼 |
+| targetColumn | string | 모달로 전달할 타겟 컬럼명 |
+
+## 데이터 흐름
+
+```
+[좌측 패널 항목 클릭]
+    ↓
+[selectedLeftItem 상태 저장]
+    ↓
+[modalDataStore에 테이블명으로 저장]
+    ↓
+[ScreenContext DataProvider 등록]
+    ↓
+[우측 패널 데이터 로드 (조인 조건 적용)]
+```
+
+## 버튼과 연동
+
+버튼 컴포넌트에서 이 컴포넌트의 선택된 데이터에 접근하려면:
+
+1. 버튼의 액션 타입을 `openModalWithData`로 설정
+2. 데이터 소스 ID를 좌측 패널의 테이블명으로 설정 (예: `dept_info`)
+3. `modalDataStore`에서 자동으로 데이터를 가져옴
+
+## 개발자 정보
+
+- **생성일**: 2024
+- **경로**: `lib/registry/components/split-panel-layout2/`
+
+## 관련 문서
+
+- [컴포넌트 시스템 가이드](../../docs/컴포넌트_시스템_가이드.md)
+- [split-panel-layout (v1)](../split-panel-layout/README.md)
+

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

@@ -0,0 +1,837 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { ComponentRendererProps } from "@/types/component";
+import {
+  SplitPanelLayout2Config,
+  ColumnConfig,
+  DataTransferField,
+} from "./types";
+import { defaultConfig } from "./config";
+import { cn } from "@/lib/utils";
+import { Search, Plus, ChevronRight, ChevronDown, Edit, Trash2, Users, Building2 } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { toast } from "sonner";
+import { useScreenContextOptional } from "@/contexts/ScreenContext";
+import { apiClient } from "@/lib/api/client";
+
+export interface SplitPanelLayout2ComponentProps extends ComponentRendererProps {
+  // 추가 props
+}
+
+/**
+ * SplitPanelLayout2 컴포넌트
+ * 마스터-디테일 패턴의 좌우 분할 레이아웃 (개선 버전)
+ */
+export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProps> = ({
+  component,
+  isDesignMode = false,
+  isSelected = false,
+  isPreview = false,
+  onClick,
+  ...props
+}) => {
+  const config = useMemo(() => {
+    return {
+      ...defaultConfig,
+      ...component.componentConfig,
+    } as SplitPanelLayout2Config;
+  }, [component.componentConfig]);
+
+  // ScreenContext (데이터 전달용)
+  const screenContext = useScreenContextOptional();
+
+  // 상태 관리
+  const [leftData, setLeftData] = useState<any[]>([]);
+  const [rightData, setRightData] = useState<any[]>([]);
+  const [selectedLeftItem, setSelectedLeftItem] = useState<any>(null);
+  const [leftSearchTerm, setLeftSearchTerm] = useState("");
+  const [rightSearchTerm, setRightSearchTerm] = useState("");
+  const [leftLoading, setLeftLoading] = useState(false);
+  const [rightLoading, setRightLoading] = useState(false);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [splitPosition, setSplitPosition] = useState(config.splitRatio || 30);
+  const [isResizing, setIsResizing] = useState(false);
+
+  // 좌측 패널 컬럼 라벨 매핑
+  const [leftColumnLabels, setLeftColumnLabels] = useState<Record<string, string>>({});
+  const [rightColumnLabels, setRightColumnLabels] = useState<Record<string, string>>({});
+
+
+  // 좌측 데이터 로드
+  const loadLeftData = useCallback(async () => {
+    if (!config.leftPanel?.tableName || isDesignMode) return;
+
+    setLeftLoading(true);
+    try {
+      const response = await apiClient.post(`/table-management/tables/${config.leftPanel.tableName}/data`, {
+        page: 1,
+        size: 1000, // 전체 데이터 로드
+        // 멀티테넌시: 자동으로 company_code 필터링 적용
+        autoFilter: {
+          enabled: true,
+          filterColumn: "company_code",
+          filterType: "company",
+        },
+      });
+      if (response.data.success) {
+        // API 응답 구조: { success: true, data: { data: [...], total, page, ... } }
+        let data = response.data.data?.data || [];
+
+        // 계층 구조 처리
+        if (config.leftPanel.hierarchyConfig?.enabled) {
+          data = buildHierarchy(
+            data,
+            config.leftPanel.hierarchyConfig.idColumn,
+            config.leftPanel.hierarchyConfig.parentColumn
+          );
+        }
+
+        setLeftData(data);
+        console.log(`[SplitPanelLayout2] 좌측 데이터 로드: ${data.length}건 (company_code 필터 적용)`);
+      }
+    } catch (error) {
+      console.error("[SplitPanelLayout2] 좌측 데이터 로드 실패:", error);
+      toast.error("좌측 패널 데이터를 불러오는데 실패했습니다.");
+    } finally {
+      setLeftLoading(false);
+    }
+  }, [config.leftPanel?.tableName, config.leftPanel?.hierarchyConfig, isDesignMode]);
+
+  // 우측 데이터 로드 (좌측 선택 항목 기반)
+  const loadRightData = useCallback(async (selectedItem: any) => {
+    if (!config.rightPanel?.tableName || !config.joinConfig?.leftColumn || !config.joinConfig?.rightColumn || !selectedItem) {
+      setRightData([]);
+      return;
+    }
+
+    const joinValue = selectedItem[config.joinConfig.leftColumn];
+    if (joinValue === undefined || joinValue === null) {
+      console.log(`[SplitPanelLayout2] 조인 값이 없음: ${config.joinConfig.leftColumn}`);
+      setRightData([]);
+      return;
+    }
+
+    setRightLoading(true);
+    try {
+      console.log(`[SplitPanelLayout2] 우측 데이터 로드 시작: ${config.rightPanel.tableName}, ${config.joinConfig.rightColumn}=${joinValue}`);
+      
+      const response = await apiClient.post(`/table-management/tables/${config.rightPanel.tableName}/data`, {
+        page: 1,
+        size: 1000, // 전체 데이터 로드
+        // dataFilter를 사용하여 정확한 값 매칭 (Entity 타입 검색 문제 회피)
+        dataFilter: {
+          enabled: true,
+          matchType: "all",
+          filters: [
+            {
+              id: "join_filter",
+              columnName: config.joinConfig.rightColumn,
+              operator: "equals",
+              value: String(joinValue),
+              valueType: "static",
+            }
+          ],
+        },
+        // 멀티테넌시: 자동으로 company_code 필터링 적용
+        autoFilter: {
+          enabled: true,
+          filterColumn: "company_code",
+          filterType: "company",
+        },
+      });
+
+      if (response.data.success) {
+        // API 응답 구조: { success: true, data: { data: [...], total, page, ... } }
+        const data = response.data.data?.data || [];
+        setRightData(data);
+        console.log(`[SplitPanelLayout2] 우측 데이터 로드 완료: ${data.length}건`);
+      } else {
+        console.error("[SplitPanelLayout2] 우측 데이터 로드 실패:", response.data.message);
+        setRightData([]);
+      }
+    } catch (error: any) {
+      console.error("[SplitPanelLayout2] 우측 데이터 로드 에러:", {
+        message: error?.message,
+        status: error?.response?.status,
+        statusText: error?.response?.statusText,
+        data: error?.response?.data,
+        config: {
+          url: error?.config?.url,
+          method: error?.config?.method,
+          data: error?.config?.data,
+        }
+      });
+      setRightData([]);
+    } finally {
+      setRightLoading(false);
+    }
+  }, [config.rightPanel?.tableName, config.joinConfig]);
+
+  // 좌측 패널 추가 버튼 클릭
+  const handleLeftAddClick = useCallback(() => {
+    if (!config.leftPanel?.addModalScreenId) {
+      toast.error("연결된 모달 화면이 없습니다.");
+      return;
+    }
+    
+    // EditModal 열기 이벤트 발생
+    const event = new CustomEvent("openEditModal", {
+      detail: {
+        screenId: config.leftPanel.addModalScreenId,
+        title: config.leftPanel?.addButtonLabel || "추가",
+        modalSize: "lg",
+        editData: {},
+        isCreateMode: true, // 생성 모드
+        onSave: () => {
+          loadLeftData();
+        },
+      },
+    });
+    window.dispatchEvent(event);
+    console.log("[SplitPanelLayout2] 좌측 추가 모달 열기:", config.leftPanel.addModalScreenId);
+  }, [config.leftPanel?.addModalScreenId, config.leftPanel?.addButtonLabel, loadLeftData]);
+
+  // 우측 패널 추가 버튼 클릭
+  const handleRightAddClick = useCallback(() => {
+    if (!config.rightPanel?.addModalScreenId) {
+      toast.error("연결된 모달 화면이 없습니다.");
+      return;
+    }
+
+    // 데이터 전달 필드 설정
+    const initialData: Record<string, any> = {};
+    if (selectedLeftItem && config.dataTransferFields) {
+      for (const field of config.dataTransferFields) {
+        if (field.sourceColumn && field.targetColumn) {
+          initialData[field.targetColumn] = selectedLeftItem[field.sourceColumn];
+        }
+      }
+    }
+
+    console.log("[SplitPanelLayout2] 모달로 전달할 데이터:", initialData);
+    console.log("[SplitPanelLayout2] 모달 screenId:", config.rightPanel?.addModalScreenId);
+
+    // EditModal 열기 이벤트 발생
+    const event = new CustomEvent("openEditModal", {
+      detail: {
+        screenId: config.rightPanel.addModalScreenId,
+        title: config.rightPanel?.addButtonLabel || "추가",
+        modalSize: "lg",
+        editData: initialData,
+        isCreateMode: true, // 생성 모드
+        onSave: () => {
+          if (selectedLeftItem) {
+            loadRightData(selectedLeftItem);
+          }
+        },
+      },
+    });
+    window.dispatchEvent(event);
+    console.log("[SplitPanelLayout2] 우측 추가 모달 열기");
+  }, [config.rightPanel?.addModalScreenId, config.rightPanel?.addButtonLabel, config.dataTransferFields, selectedLeftItem, loadRightData]);
+
+  // 컬럼 라벨 로드
+  const loadColumnLabels = useCallback(async (tableName: string, setLabels: (labels: Record<string, string>) => void) => {
+    if (!tableName) return;
+
+    try {
+      const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
+      if (response.data.success) {
+        const labels: Record<string, string> = {};
+        // API 응답 구조: { success: true, data: { columns: [...] } }
+        const columns = response.data.data?.columns || [];
+        columns.forEach((col: any) => {
+          const colName = col.column_name || col.columnName;
+          const colLabel = col.column_label || col.columnLabel || colName;
+          if (colName) {
+            labels[colName] = colLabel;
+          }
+        });
+        setLabels(labels);
+      }
+    } catch (error) {
+      console.error("[SplitPanelLayout2] 컬럼 라벨 로드 실패:", error);
+    }
+  }, []);
+
+  // 계층 구조 빌드
+  const buildHierarchy = (data: any[], idColumn: string, parentColumn: string): any[] => {
+    const itemMap = new Map<string, any>();
+    const roots: any[] = [];
+
+    // 모든 항목을 맵에 저장
+    data.forEach((item) => {
+      itemMap.set(item[idColumn], { ...item, children: [] });
+    });
+
+    // 부모-자식 관계 설정
+    data.forEach((item) => {
+      const current = itemMap.get(item[idColumn]);
+      const parentId = item[parentColumn];
+
+      if (parentId && itemMap.has(parentId)) {
+        itemMap.get(parentId).children.push(current);
+      } else {
+        roots.push(current);
+      }
+    });
+
+    return roots;
+  };
+
+  // 좌측 항목 선택 핸들러
+  const handleLeftItemSelect = useCallback((item: any) => {
+    setSelectedLeftItem(item);
+    loadRightData(item);
+
+    // ScreenContext DataProvider 등록 (버튼에서 접근 가능하도록)
+    if (screenContext && !isDesignMode) {
+      screenContext.registerDataProvider(component.id, {
+        componentId: component.id,
+        componentType: "split-panel-layout2",
+        getSelectedData: () => [item],
+        getAllData: () => leftData,
+        clearSelection: () => setSelectedLeftItem(null),
+      });
+      console.log(`[SplitPanelLayout2] DataProvider 등록: ${component.id}`);
+    }
+  }, [isDesignMode, screenContext, component.id, leftData, loadRightData]);
+
+  // 항목 확장/축소 토글
+  const toggleExpand = useCallback((itemId: string) => {
+    setExpandedItems((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(itemId)) {
+        newSet.delete(itemId);
+      } else {
+        newSet.add(itemId);
+      }
+      return newSet;
+    });
+  }, []);
+
+  // 검색 필터링
+  const filteredLeftData = useMemo(() => {
+    if (!leftSearchTerm) return leftData;
+
+    // 복수 검색 컬럼 지원 (searchColumns 우선, 없으면 searchColumn 사용)
+    const searchColumns = config.leftPanel?.searchColumns?.map((c) => c.columnName).filter(Boolean) || [];
+    const legacyColumn = config.leftPanel?.searchColumn;
+    const columnsToSearch = searchColumns.length > 0 ? searchColumns : legacyColumn ? [legacyColumn] : [];
+
+    if (columnsToSearch.length === 0) return leftData;
+
+    const filterRecursive = (items: any[]): any[] => {
+      return items.filter((item) => {
+        // 여러 컬럼 중 하나라도 매칭되면 포함
+        const matches = columnsToSearch.some((col) => {
+          const value = String(item[col] || "").toLowerCase();
+          return value.includes(leftSearchTerm.toLowerCase());
+        });
+
+        if (item.children?.length > 0) {
+          const filteredChildren = filterRecursive(item.children);
+          if (filteredChildren.length > 0) {
+            item.children = filteredChildren;
+            return true;
+          }
+        }
+
+        return matches;
+      });
+    };
+
+    return filterRecursive([...leftData]);
+  }, [leftData, leftSearchTerm, config.leftPanel?.searchColumns, config.leftPanel?.searchColumn]);
+
+  const filteredRightData = useMemo(() => {
+    if (!rightSearchTerm) return rightData;
+
+    // 복수 검색 컬럼 지원 (searchColumns 우선, 없으면 searchColumn 사용)
+    const searchColumns = config.rightPanel?.searchColumns?.map((c) => c.columnName).filter(Boolean) || [];
+    const legacyColumn = config.rightPanel?.searchColumn;
+    const columnsToSearch = searchColumns.length > 0 ? searchColumns : legacyColumn ? [legacyColumn] : [];
+
+    if (columnsToSearch.length === 0) return rightData;
+
+    return rightData.filter((item) => {
+      // 여러 컬럼 중 하나라도 매칭되면 포함
+      return columnsToSearch.some((col) => {
+        const value = String(item[col] || "").toLowerCase();
+        return value.includes(rightSearchTerm.toLowerCase());
+      });
+    });
+  }, [rightData, rightSearchTerm, config.rightPanel?.searchColumns, config.rightPanel?.searchColumn]);
+
+  // 리사이즈 핸들러
+  const handleResizeStart = useCallback((e: React.MouseEvent) => {
+    if (!config.resizable) return;
+    e.preventDefault();
+    setIsResizing(true);
+  }, [config.resizable]);
+
+  const handleResizeMove = useCallback((e: MouseEvent) => {
+    if (!isResizing) return;
+
+    const container = document.getElementById(`split-panel-${component.id}`);
+    if (!container) return;
+
+    const rect = container.getBoundingClientRect();
+    const newPosition = ((e.clientX - rect.left) / rect.width) * 100;
+    const minLeft = (config.minLeftWidth || 200) / rect.width * 100;
+    const minRight = (config.minRightWidth || 300) / rect.width * 100;
+
+    setSplitPosition(Math.max(minLeft, Math.min(100 - minRight, newPosition)));
+  }, [isResizing, component.id, config.minLeftWidth, config.minRightWidth]);
+
+  const handleResizeEnd = useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  // 리사이즈 이벤트 리스너
+  useEffect(() => {
+    if (isResizing) {
+      window.addEventListener("mousemove", handleResizeMove);
+      window.addEventListener("mouseup", handleResizeEnd);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleResizeMove);
+      window.removeEventListener("mouseup", handleResizeEnd);
+    };
+  }, [isResizing, handleResizeMove, handleResizeEnd]);
+
+  // 초기 데이터 로드
+  useEffect(() => {
+    if (config.autoLoad && !isDesignMode) {
+      loadLeftData();
+      loadColumnLabels(config.leftPanel?.tableName || "", setLeftColumnLabels);
+      loadColumnLabels(config.rightPanel?.tableName || "", setRightColumnLabels);
+    }
+  }, [config.autoLoad, isDesignMode, loadLeftData, loadColumnLabels, config.leftPanel?.tableName, config.rightPanel?.tableName]);
+
+  // 컴포넌트 언마운트 시 DataProvider 해제
+  useEffect(() => {
+    return () => {
+      if (screenContext) {
+        screenContext.unregisterDataProvider(component.id);
+      }
+    };
+  }, [screenContext, component.id]);
+
+  // 값 포맷팅
+  const formatValue = (value: any, format?: ColumnConfig["format"]): string => {
+    if (value === null || value === undefined) return "-";
+    if (!format) return String(value);
+
+    switch (format.type) {
+      case "number":
+        const num = Number(value);
+        if (isNaN(num)) return String(value);
+        let formatted = format.decimalPlaces !== undefined
+          ? num.toFixed(format.decimalPlaces)
+          : String(num);
+        if (format.thousandSeparator) {
+          formatted = formatted.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        }
+        return `${format.prefix || ""}${formatted}${format.suffix || ""}`;
+
+      case "currency":
+        const currency = Number(value);
+        if (isNaN(currency)) return String(value);
+        const currencyFormatted = currency.toLocaleString("ko-KR");
+        return `${format.prefix || ""}${currencyFormatted}${format.suffix || "원"}`;
+
+      case "date":
+        try {
+          const date = new Date(value);
+          return date.toLocaleDateString("ko-KR");
+        } catch {
+          return String(value);
+        }
+
+      default:
+        return String(value);
+    }
+  };
+
+  // 좌측 패널 항목 렌더링
+  const renderLeftItem = (item: any, level: number = 0, index: number = 0) => {
+    const idColumn = config.leftPanel?.hierarchyConfig?.idColumn || "id";
+    const itemId = item[idColumn] ?? `item-${level}-${index}`;
+    const hasChildren = item.children?.length > 0;
+    const isExpanded = expandedItems.has(String(itemId));
+    const isSelected = selectedLeftItem && selectedLeftItem[idColumn] === item[idColumn];
+
+    // displayRow 설정에 따라 컬럼 분류
+    const displayColumns = config.leftPanel?.displayColumns || [];
+    const nameRowColumns = displayColumns.filter((col, idx) => 
+      col.displayRow === "name" || (!col.displayRow && idx === 0)
+    );
+    const infoRowColumns = displayColumns.filter((col, idx) => 
+      col.displayRow === "info" || (!col.displayRow && idx > 0)
+    );
+
+    // 이름 행의 첫 번째 값 (주요 표시 값)
+    const primaryValue = nameRowColumns[0]
+      ? item[nameRowColumns[0].name]
+      : Object.values(item).find((v) => typeof v === "string" && v.length > 0);
+
+    return (
+      <div key={itemId}>
+        <div
+          className={cn(
+            "flex items-center gap-3 px-4 py-3 cursor-pointer rounded-md transition-colors",
+            "hover:bg-accent",
+            isSelected && "bg-primary/10 border-l-2 border-primary"
+          )}
+          style={{ paddingLeft: `${level * 16 + 16}px` }}
+          onClick={() => handleLeftItemSelect(item)}
+        >
+          {/* 확장/축소 버튼 */}
+          {hasChildren ? (
+            <button
+              className="p-0.5 hover:bg-accent rounded"
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleExpand(String(itemId));
+              }}
+            >
+              {isExpanded ? (
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
+              ) : (
+                <ChevronRight className="h-4 w-4 text-muted-foreground" />
+              )}
+            </button>
+          ) : (
+            <div className="w-5" />
+          )}
+
+          {/* 아이콘 */}
+          <Building2 className="h-5 w-5 text-muted-foreground" />
+
+          {/* 내용 */}
+          <div className="flex-1 min-w-0">
+            {/* 이름 행 (Name Row) */}
+            <div className="flex items-center gap-2">
+              <span className="font-medium text-base truncate">
+                {primaryValue || "이름 없음"}
+              </span>
+              {/* 이름 행의 추가 컬럼들 (배지 스타일) */}
+              {nameRowColumns.slice(1).map((col, idx) => {
+                const value = item[col.name];
+                if (!value) return null;
+                return (
+                  <span key={idx} className="text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">
+                    {formatValue(value, col.format)}
+                  </span>
+                );
+              })}
+            </div>
+            {/* 정보 행 (Info Row) */}
+            {infoRowColumns.length > 0 && (
+              <div className="flex items-center gap-2 text-sm text-muted-foreground truncate">
+                {infoRowColumns.map((col, idx) => {
+                  const value = item[col.name];
+                  if (!value) return null;
+                  return (
+                    <span key={idx}>
+                      {formatValue(value, col.format)}
+                    </span>
+                  );
+                }).filter(Boolean).reduce((acc: React.ReactNode[], curr, idx) => {
+                  if (idx > 0) acc.push(<span key={`sep-${idx}`} className="text-muted-foreground/50">|</span>);
+                  acc.push(curr);
+                  return acc;
+                }, [])}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* 자식 항목 */}
+        {hasChildren && isExpanded && (
+          <div>
+            {item.children.map((child: any, childIndex: number) => renderLeftItem(child, level + 1, childIndex))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  // 우측 패널 카드 렌더링
+  const renderRightCard = (item: any, index: number) => {
+    const displayColumns = config.rightPanel?.displayColumns || [];
+
+    // displayRow 설정에 따라 컬럼 분류
+    // displayRow가 "name"이면 이름 행, "info"이면 정보 행 (기본값: 첫 번째는 name, 나머지는 info)
+    const nameRowColumns = displayColumns.filter((col, idx) => 
+      col.displayRow === "name" || (!col.displayRow && idx === 0)
+    );
+    const infoRowColumns = displayColumns.filter((col, idx) => 
+      col.displayRow === "info" || (!col.displayRow && idx > 0)
+    );
+
+    return (
+      <Card key={index} className="mb-2 py-0 hover:shadow-md transition-shadow">
+        <CardContent className="px-4 py-2">
+          <div className="flex items-start justify-between">
+            <div className="flex-1">
+              {/* 이름 행 (Name Row) */}
+              {nameRowColumns.length > 0 && (
+                <div className="flex items-center gap-2 mb-2">
+                  {nameRowColumns.map((col, idx) => {
+                    const value = item[col.name];
+                    if (!value && idx > 0) return null;
+                    
+                    // 첫 번째 컬럼은 굵게 표시
+                    if (idx === 0) {
+                      return (
+                        <span key={idx} className="font-semibold text-lg">
+                          {formatValue(value, col.format) || "이름 없음"}
+                        </span>
+                      );
+                    }
+                    // 나머지는 배지 스타일
+                    return (
+                      <span key={idx} className="text-sm bg-muted px-2 py-0.5 rounded">
+                        {formatValue(value, col.format)}
+                      </span>
+                    );
+                  })}
+                </div>
+              )}
+
+              {/* 정보 행 (Info Row) */}
+              {infoRowColumns.length > 0 && (
+                <div className="flex flex-wrap gap-x-4 gap-y-1 text-base text-muted-foreground">
+                  {infoRowColumns.map((col, idx) => {
+                    const value = item[col.name];
+                    if (!value) return null;
+
+                    // 아이콘 결정
+                    let icon = null;
+                    const colName = col.name.toLowerCase();
+                    if (colName.includes("tel") || colName.includes("phone")) {
+                      icon = <span className="text-sm">tel</span>;
+                    } else if (colName.includes("email")) {
+                      icon = <span className="text-sm">@</span>;
+                    } else if (colName.includes("sabun") || colName.includes("id")) {
+                      icon = <span className="text-sm">ID</span>;
+                    }
+
+                    return (
+                      <span key={idx} className="flex items-center gap-1">
+                        {icon}
+                        {formatValue(value, col.format)}
+                      </span>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+
+            {/* 액션 버튼 */}
+            <div className="flex gap-1">
+              {config.rightPanel?.showEditButton && (
+                <Button variant="outline" size="sm" className="h-8">
+                  수정
+                </Button>
+              )}
+              {config.rightPanel?.showDeleteButton && (
+                <Button variant="outline" size="sm" className="h-8">
+                  삭제
+                </Button>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  };
+
+  // 디자인 모드 렌더링
+  if (isDesignMode) {
+    return (
+      <div
+        className={cn(
+          "w-full h-full border-2 border-dashed rounded-lg flex",
+          isSelected ? "border-primary" : "border-muted-foreground/30"
+        )}
+        onClick={onClick}
+      >
+        {/* 좌측 패널 미리보기 */}
+        <div
+          className="border-r bg-muted/30 p-4 flex flex-col"
+          style={{ width: `${splitPosition}%` }}
+        >
+          <div className="text-sm font-medium mb-2">
+            {config.leftPanel?.title || "좌측 패널"}
+          </div>
+          <div className="text-xs text-muted-foreground mb-2">
+            테이블: {config.leftPanel?.tableName || "미설정"}
+          </div>
+          <div className="flex-1 flex items-center justify-center text-muted-foreground text-xs">
+            좌측 목록 영역
+          </div>
+        </div>
+
+        {/* 우측 패널 미리보기 */}
+        <div className="flex-1 p-4 flex flex-col">
+          <div className="text-sm font-medium mb-2">
+            {config.rightPanel?.title || "우측 패널"}
+          </div>
+          <div className="text-xs text-muted-foreground mb-2">
+            테이블: {config.rightPanel?.tableName || "미설정"}
+          </div>
+          <div className="flex-1 flex items-center justify-center text-muted-foreground text-xs">
+            우측 상세 영역
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      id={`split-panel-${component.id}`}
+      className="w-full h-full flex bg-background rounded-lg border overflow-hidden"
+      style={{ minHeight: "400px" }}
+    >
+      {/* 좌측 패널 */}
+      <div
+        className="flex flex-col border-r bg-card"
+        style={{ width: `${splitPosition}%`, minWidth: config.minLeftWidth }}
+      >
+        {/* 헤더 */}
+        <div className="p-4 border-b bg-muted/30">
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="font-semibold text-base">{config.leftPanel?.title || "목록"}</h3>
+            {config.leftPanel?.showAddButton && (
+              <Button size="sm" variant="default" className="h-8 text-sm" onClick={handleLeftAddClick}>
+                <Plus className="h-4 w-4 mr-1" />
+                {config.leftPanel?.addButtonLabel || "추가"}
+              </Button>
+            )}
+          </div>
+
+          {/* 검색 */}
+          {config.leftPanel?.showSearch && (
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="검색..."
+                value={leftSearchTerm}
+                onChange={(e) => setLeftSearchTerm(e.target.value)}
+                className="pl-9 h-9 text-sm"
+              />
+            </div>
+          )}
+        </div>
+
+        {/* 목록 */}
+        <div className="flex-1 overflow-auto">
+          {leftLoading ? (
+            <div className="flex items-center justify-center h-full text-muted-foreground text-base">
+              로딩 중...
+            </div>
+          ) : filteredLeftData.length === 0 ? (
+            <div className="flex items-center justify-center h-full text-muted-foreground text-base">
+              데이터가 없습니다
+            </div>
+          ) : (
+            <div className="py-1">
+              {filteredLeftData.map((item, index) => renderLeftItem(item, 0, index))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 리사이저 */}
+      {config.resizable && (
+        <div
+          className={cn(
+            "w-1 cursor-col-resize hover:bg-primary/50 transition-colors",
+            isResizing && "bg-primary/50"
+          )}
+          onMouseDown={handleResizeStart}
+        />
+      )}
+
+      {/* 우측 패널 */}
+      <div className="flex-1 flex flex-col bg-card">
+        {/* 헤더 */}
+        <div className="p-4 border-b bg-muted/30">
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="font-semibold text-base">
+              {selectedLeftItem
+                ? config.leftPanel?.displayColumns?.[0]
+                  ? selectedLeftItem[config.leftPanel.displayColumns[0].name]
+                  : config.rightPanel?.title || "상세"
+                : config.rightPanel?.title || "상세"}
+            </h3>
+            <div className="flex items-center gap-2">
+              {selectedLeftItem && (
+                <span className="text-sm text-muted-foreground">
+                  {rightData.length}명
+                </span>
+              )}
+              {config.rightPanel?.showAddButton && selectedLeftItem && (
+                <Button size="sm" variant="default" className="h-8 text-sm" onClick={handleRightAddClick}>
+                  <Plus className="h-4 w-4 mr-1" />
+                  {config.rightPanel?.addButtonLabel || "추가"}
+                </Button>
+              )}
+            </div>
+          </div>
+
+          {/* 검색 */}
+          {config.rightPanel?.showSearch && selectedLeftItem && (
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="검색..."
+                value={rightSearchTerm}
+                onChange={(e) => setRightSearchTerm(e.target.value)}
+                className="pl-9 h-9 text-sm"
+              />
+            </div>
+          )}
+        </div>
+
+        {/* 내용 */}
+        <div className="flex-1 overflow-auto p-4">
+          {!selectedLeftItem ? (
+            <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
+              <Users className="h-16 w-16 mb-3 opacity-30" />
+              <span className="text-base">{config.rightPanel?.emptyMessage || "좌측에서 항목을 선택해주세요"}</span>
+            </div>
+          ) : rightLoading ? (
+            <div className="flex items-center justify-center h-full text-muted-foreground text-base">
+              로딩 중...
+            </div>
+          ) : filteredRightData.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
+              <Users className="h-16 w-16 mb-3 opacity-30" />
+              <span className="text-base">등록된 항목이 없습니다</span>
+            </div>
+          ) : (
+            <div>
+              {filteredRightData.map((item, index) => renderRightCard(item, index))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * SplitPanelLayout2 래퍼 컴포넌트
+ */
+export const SplitPanelLayout2Wrapper: React.FC<SplitPanelLayout2ComponentProps> = (props) => {
+  return <SplitPanelLayout2Component {...props} />;
+};
+

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

@@ -0,0 +1,963 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+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";
+
+// lodash set 대체 함수
+const setPath = (obj: any, path: string, value: any): any => {
+  const keys = path.split(".");
+  const result = { ...obj };
+  let current = result;
+
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    current[key] = current[key] ? { ...current[key] } : {};
+    current = current[key];
+  }
+
+  current[keys[keys.length - 1]] = value;
+  return result;
+};
+
+interface SplitPanelLayout2ConfigPanelProps {
+  config: SplitPanelLayout2Config;
+  onChange: (config: SplitPanelLayout2Config) => void;
+}
+
+interface TableInfo {
+  table_name: string;
+  table_comment?: string;
+}
+
+interface ColumnInfo {
+  column_name: string;
+  data_type: string;
+  column_comment?: string;
+}
+
+interface ScreenInfo {
+  screen_id: number;
+  screen_name: string;
+  screen_code: string;
+}
+
+export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanelProps> = ({
+  config,
+  onChange,
+}) => {
+  // updateConfig 헬퍼 함수: 경로 기반으로 config를 업데이트
+  const updateConfig = useCallback((path: string, value: any) => {
+    console.log(`[SplitPanelLayout2ConfigPanel] updateConfig: ${path} =`, value);
+    const newConfig = setPath(config, path, value);
+    console.log("[SplitPanelLayout2ConfigPanel] newConfig:", newConfig);
+    onChange(newConfig);
+  }, [config, onChange]);
+
+  // 상태
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [leftColumns, setLeftColumns] = useState<ColumnInfo[]>([]);
+  const [rightColumns, setRightColumns] = useState<ColumnInfo[]>([]);
+  const [screens, setScreens] = useState<ScreenInfo[]>([]);
+  const [tablesLoading, setTablesLoading] = useState(false);
+  const [screensLoading, setScreensLoading] = useState(false);
+
+  // Popover 상태
+  const [leftTableOpen, setLeftTableOpen] = useState(false);
+  const [rightTableOpen, setRightTableOpen] = useState(false);
+  const [leftModalOpen, setLeftModalOpen] = useState(false);
+  const [rightModalOpen, setRightModalOpen] = useState(false);
+
+  // 테이블 목록 로드
+  const loadTables = useCallback(async () => {
+    setTablesLoading(true);
+    try {
+      const response = await apiClient.get("/table-management/tables");
+      console.log("[loadTables] API 응답:", response.data);
+      
+      let tableList: any[] = [];
+      if (response.data?.success && Array.isArray(response.data?.data)) {
+        tableList = response.data.data;
+      } else if (Array.isArray(response.data?.data)) {
+        tableList = response.data.data;
+      } else if (Array.isArray(response.data)) {
+        tableList = response.data;
+      }
+      
+      console.log("[loadTables] 추출된 테이블 목록:", tableList);
+      
+      if (tableList.length > 0) {
+        // 백엔드에서 카멜케이스(tableName)로 반환하므로 둘 다 처리
+        const transformedTables = tableList.map((t: any) => ({
+          table_name: t.tableName ?? t.table_name ?? t.name ?? "",
+          table_comment: t.displayName ?? t.table_comment ?? t.description ?? "",
+        }));
+        console.log("[loadTables] 변환된 테이블 목록:", transformedTables);
+        setTables(transformedTables);
+      } else {
+        console.warn("[loadTables] 테이블 목록이 비어있습니다");
+        setTables([]);
+      }
+    } catch (error) {
+      console.error("테이블 목록 로드 실패:", error);
+      setTables([]);
+    } finally {
+      setTablesLoading(false);
+    }
+  }, []);
+
+  // 화면 목록 로드
+  const loadScreens = useCallback(async () => {
+    setScreensLoading(true);
+    try {
+      // size를 크게 설정하여 모든 화면 가져오기
+      const response = await apiClient.get("/screen-management/screens?size=1000");
+      console.log("[loadScreens] API 응답:", response.data);
+      
+      // API 응답 구조: { success, data: [...], total, page, size }
+      let screenList: any[] = [];
+      if (response.data?.success && Array.isArray(response.data?.data)) {
+        screenList = response.data.data;
+      } else if (Array.isArray(response.data?.data)) {
+        screenList = response.data.data;
+      } else if (Array.isArray(response.data)) {
+        screenList = response.data;
+      }
+      
+      console.log("[loadScreens] 추출된 화면 목록:", screenList);
+      
+      if (screenList.length > 0) {
+        // 백엔드에서 카멜케이스(screenId, screenName)로 반환하므로 둘 다 처리
+        const transformedScreens = screenList.map((s: any) => ({
+          screen_id: s.screenId ?? s.screen_id ?? s.id,
+          screen_name: s.screenName ?? s.screen_name ?? s.name ?? `화면 ${s.screenId || s.screen_id || s.id}`,
+          screen_code: s.screenCode ?? s.screen_code ?? s.code ?? "",
+        }));
+        console.log("[loadScreens] 변환된 화면 목록:", transformedScreens);
+        setScreens(transformedScreens);
+      } else {
+        console.warn("[loadScreens] 화면 목록이 비어있습니다");
+        setScreens([]);
+      }
+    } catch (error) {
+      console.error("화면 목록 로드 실패:", error);
+      setScreens([]);
+    } finally {
+      setScreensLoading(false);
+    }
+  }, []);
+
+  // 컬럼 목록 로드
+  const loadColumns = useCallback(async (tableName: string, side: "left" | "right") => {
+    if (!tableName) return;
+    try {
+      const response = await apiClient.get(`/table-management/tables/${tableName}/columns?size=200`);
+      console.log(`[loadColumns] ${side} API 응답:`, response.data);
+      
+      // API 응답 구조: { success, data: { columns: [...], total, page, totalPages } }
+      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;
+      } else if (Array.isArray(response.data)) {
+        columnList = response.data;
+      }
+      
+      console.log(`[loadColumns] ${side} 추출된 컬럼 목록:`, columnList);
+      
+      if (columnList.length > 0) {
+        // 백엔드에서 카멜케이스(columnName)로 반환하므로 둘 다 처리
+        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 ?? "",
+        }));
+        console.log(`[loadColumns] ${side} 변환된 컬럼 목록:`, transformedColumns);
+        
+        if (side === "left") {
+          setLeftColumns(transformedColumns);
+        } else {
+          setRightColumns(transformedColumns);
+        }
+      } else {
+        console.warn(`[loadColumns] ${side} 컬럼 목록이 비어있습니다`);
+        if (side === "left") {
+          setLeftColumns([]);
+        } else {
+          setRightColumns([]);
+        }
+      }
+    } catch (error) {
+      console.error(`${side} 컬럼 목록 로드 실패:`, error);
+      if (side === "left") {
+        setLeftColumns([]);
+      } else {
+        setRightColumns([]);
+      }
+    }
+  }, []);
+
+  // 초기 로드
+  useEffect(() => {
+    loadTables();
+    loadScreens();
+  }, [loadTables, loadScreens]);
+
+  // 테이블 변경 시 컬럼 로드
+  useEffect(() => {
+    if (config.leftPanel?.tableName) {
+      loadColumns(config.leftPanel.tableName, "left");
+    }
+  }, [config.leftPanel?.tableName, loadColumns]);
+
+  useEffect(() => {
+    if (config.rightPanel?.tableName) {
+      loadColumns(config.rightPanel.tableName, "right");
+    }
+  }, [config.rightPanel?.tableName, loadColumns]);
+
+  // 테이블 선택 컴포넌트
+  const TableSelect: React.FC<{
+    value: string;
+    onValueChange: (value: string) => void;
+    placeholder: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+  }> = ({ value, onValueChange, placeholder, open, onOpenChange }) => {
+    const selectedTable = tables.find((t) => t.table_name === value);
+    
+    return (
+      <Popover open={open} onOpenChange={onOpenChange}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            disabled={tablesLoading}
+            className="h-9 w-full justify-between text-sm"
+          >
+            {tablesLoading
+              ? "로딩 중..."
+              : selectedTable
+                ? selectedTable.table_comment || selectedTable.table_name
+                : value || placeholder}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-full p-0" align="start">
+          <Command>
+            <CommandInput placeholder="테이블 검색..." className="h-9" />
+            <CommandList>
+              <CommandEmpty>
+                {tables.length === 0 ? "테이블 목록을 불러오는 중..." : "검색 결과가 없습니다"}
+              </CommandEmpty>
+              <CommandGroup>
+                {tables.map((table, index) => (
+                  <CommandItem
+                    key={`table-${table.table_name || index}`}
+                    value={table.table_name}
+                    onSelect={(selectedValue) => {
+                      onValueChange(selectedValue);
+                      onOpenChange(false);
+                    }}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-4 w-4",
+                        value === table.table_name ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    <span className="flex flex-col">
+                      <span>{table.table_comment || table.table_name}</span>
+                      <span className="text-xs text-muted-foreground">{table.table_name}</span>
+                    </span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    );
+  };
+
+  // 화면 선택 컴포넌트
+  const ScreenSelect: React.FC<{
+    value: number | undefined;
+    onValueChange: (value: number | undefined) => void;
+    placeholder: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+  }> = ({ value, onValueChange, placeholder, open, onOpenChange }) => {
+    const selectedScreen = screens.find((s) => s.screen_id === value);
+    
+    return (
+      <Popover open={open} onOpenChange={onOpenChange}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            disabled={screensLoading}
+            className="w-full justify-between h-9 text-sm"
+          >
+            {screensLoading
+              ? "로딩 중..."
+              : selectedScreen
+                ? selectedScreen.screen_name
+                : value
+                  ? `화면 ${value}`
+                  : placeholder}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-full p-0" align="start">
+          <Command>
+            <CommandInput placeholder="화면 검색..." className="h-9" />
+            <CommandList>
+              <CommandEmpty>
+                {screens.length === 0 ? "화면 목록을 불러오는 중..." : "검색 결과가 없습니다"}
+              </CommandEmpty>
+              <CommandGroup>
+                {screens.map((screen, index) => (
+                  <CommandItem
+                    key={`screen-${screen.screen_id ?? index}`}
+                    value={`${screen.screen_id}-${screen.screen_name}`}
+                    onSelect={(selectedValue: string) => {
+                      const screenId = parseInt(selectedValue.split("-")[0]);
+                      console.log("[ScreenSelect] onSelect:", { selectedValue, screenId, screen });
+                      onValueChange(isNaN(screenId) ? undefined : screenId);
+                      onOpenChange(false);
+                    }}
+                    className="flex items-center"
+                  >
+                    <div className="flex items-center w-full">
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4 shrink-0",
+                          value === screen.screen_id ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      <span className="flex flex-col">
+                        <span>{screen.screen_name}</span>
+                        <span className="text-xs text-muted-foreground">{screen.screen_code}</span>
+                      </span>
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    );
+  };
+
+  // 컬럼 선택 컴포넌트
+  const ColumnSelect: React.FC<{
+    columns: ColumnInfo[];
+    value: string;
+    onValueChange: (value: string) => void;
+    placeholder: string;
+  }> = ({ columns, value, onValueChange, placeholder }) => {
+    // 현재 선택된 값의 라벨 찾기
+    const selectedColumn = columns.find((col) => col.column_name === value);
+    const displayValue = selectedColumn
+      ? selectedColumn.column_comment || selectedColumn.column_name
+      : value || "";
+
+    return (
+      <Select value={value || ""} onValueChange={onValueChange}>
+        <SelectTrigger className="h-9 text-sm min-w-[120px]">
+          <SelectValue placeholder={placeholder}>
+            {displayValue || placeholder}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {columns.length === 0 ? (
+            <SelectItem value="_empty" disabled>
+              테이블을 먼저 선택하세요
+            </SelectItem>
+          ) : (
+            columns.map((col) => (
+              <SelectItem key={col.column_name} value={col.column_name}>
+                {col.column_comment || col.column_name}
+              </SelectItem>
+            ))
+          )}
+        </SelectContent>
+      </Select>
+    );
+  };
+
+  // 표시 컬럼 추가
+  const addDisplayColumn = (side: "left" | "right") => {
+    const path = side === "left" ? "leftPanel.displayColumns" : "rightPanel.displayColumns";
+    const currentColumns = side === "left"
+      ? config.leftPanel?.displayColumns || []
+      : config.rightPanel?.displayColumns || [];
+
+    updateConfig(path, [...currentColumns, { name: "", label: "" }]);
+  };
+
+  // 표시 컬럼 삭제
+  const removeDisplayColumn = (side: "left" | "right", index: number) => {
+    const path = side === "left" ? "leftPanel.displayColumns" : "rightPanel.displayColumns";
+    const currentColumns = side === "left"
+      ? config.leftPanel?.displayColumns || []
+      : config.rightPanel?.displayColumns || [];
+
+    updateConfig(path, currentColumns.filter((_, i) => i !== index));
+  };
+
+  // 표시 컬럼 업데이트
+  const updateDisplayColumn = (side: "left" | "right", index: number, field: keyof 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 };
+      updateConfig(path, currentColumns);
+    }
+  };
+
+  // 데이터 전달 필드 추가
+  const addDataTransferField = () => {
+    const currentFields = config.dataTransferFields || [];
+    updateConfig("dataTransferFields", [...currentFields, { sourceColumn: "", targetColumn: "" }]);
+  };
+
+  // 데이터 전달 필드 삭제
+  const removeDataTransferField = (index: number) => {
+    const currentFields = config.dataTransferFields || [];
+    updateConfig("dataTransferFields", currentFields.filter((_, i) => i !== index));
+  };
+
+  // 데이터 전달 필드 업데이트
+  const updateDataTransferField = (index: number, field: keyof DataTransferField, value: string) => {
+    const currentFields = [...(config.dataTransferFields || [])];
+    if (currentFields[index]) {
+      currentFields[index] = { ...currentFields[index], [field]: value };
+      updateConfig("dataTransferFields", currentFields);
+    }
+  };
+
+  return (
+    <div className="space-y-6 p-1">
+      {/* 좌측 패널 설정 */}
+      <div className="space-y-4">
+        <h4 className="font-medium text-sm border-b pb-2">좌측 패널 설정 (마스터)</h4>
+
+        <div className="space-y-3">
+          <div>
+            <Label className="text-xs">패널 제목</Label>
+            <Input
+              value={config.leftPanel?.title || ""}
+              onChange={(e) => updateConfig("leftPanel.title", e.target.value)}
+              placeholder="부서"
+              className="h-9 text-sm"
+            />
+          </div>
+
+          <div>
+            <Label className="text-xs">테이블 선택</Label>
+            <TableSelect
+              value={config.leftPanel?.tableName || ""}
+              onValueChange={(value) => updateConfig("leftPanel.tableName", value)}
+              placeholder="테이블 선택"
+              open={leftTableOpen}
+              onOpenChange={setLeftTableOpen}
+            />
+          </div>
+
+          {/* 표시 컬럼 */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <Label className="text-xs">표시할 컬럼</Label>
+              <Button size="sm" variant="ghost" className="h-6 text-xs" onClick={() => addDisplayColumn("left")}>
+                <Plus className="mr-1 h-3 w-3" />
+                추가
+              </Button>
+            </div>
+            <div className="space-y-3">
+              {(config.leftPanel?.displayColumns || []).map((col, index) => (
+                <div key={index} className="space-y-2 rounded-md border p-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={() => removeDisplayColumn("left", index)}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                  <ColumnSelect
+                    columns={leftColumns}
+                    value={col.name}
+                    onValueChange={(value) => updateDisplayColumn("left", index, "name", value)}
+                    placeholder="컬럼 선택"
+                  />
+                  <div>
+                    <Label className="text-xs text-muted-foreground">표시 위치</Label>
+                    <Select
+                      value={col.displayRow || "name"}
+                      onValueChange={(value) => updateDisplayColumn("left", 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.leftPanel?.displayColumns || []).length === 0 && (
+                <div className="rounded-md border py-4 text-center text-xs text-muted-foreground">
+                  표시할 컬럼을 추가하세요
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Label className="text-xs">검색 표시</Label>
+            <Switch
+              checked={config.leftPanel?.showSearch || false}
+              onCheckedChange={(checked) => updateConfig("leftPanel.showSearch", checked)}
+            />
+          </div>
+
+          {config.leftPanel?.showSearch && (
+            <div>
+              <div className="mb-2 flex items-center justify-between">
+                <Label className="text-xs">검색 대상 컬럼</Label>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="h-6 text-xs"
+                  onClick={() => {
+                    const current = config.leftPanel?.searchColumns || [];
+                    updateConfig("leftPanel.searchColumns", [...current, { columnName: "", label: "" }]);
+                  }}
+                >
+                  <Plus className="mr-1 h-3 w-3" />
+                  추가
+                </Button>
+              </div>
+              <div className="space-y-2">
+                {(config.leftPanel?.searchColumns || []).map((searchCol, index) => (
+                  <div key={index} className="flex items-center gap-2">
+                    <ColumnSelect
+                      columns={leftColumns}
+                      value={searchCol.columnName}
+                      onValueChange={(value) => {
+                        const current = [...(config.leftPanel?.searchColumns || [])];
+                        current[index] = { ...current[index], columnName: value };
+                        updateConfig("leftPanel.searchColumns", current);
+                      }}
+                      placeholder="컬럼 선택"
+                    />
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      className="h-8 w-8 shrink-0 p-0"
+                      onClick={() => {
+                        const current = config.leftPanel?.searchColumns || [];
+                        updateConfig(
+                          "leftPanel.searchColumns",
+                          current.filter((_, i) => i !== index)
+                        );
+                      }}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+                {(config.leftPanel?.searchColumns || []).length === 0 && (
+                  <div className="rounded-md border py-3 text-center text-xs text-muted-foreground">
+                    검색할 컬럼을 추가하세요
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          <div className="flex items-center justify-between">
+            <Label className="text-xs">추가 버튼 표시</Label>
+            <Switch
+              checked={config.leftPanel?.showAddButton || false}
+              onCheckedChange={(checked) => updateConfig("leftPanel.showAddButton", checked)}
+            />
+          </div>
+
+          {config.leftPanel?.showAddButton && (
+            <>
+              <div>
+                <Label className="text-xs">추가 버튼 라벨</Label>
+                <Input
+                  value={config.leftPanel?.addButtonLabel || ""}
+                  onChange={(e) => updateConfig("leftPanel.addButtonLabel", e.target.value)}
+                  placeholder="추가"
+                  className="h-9 text-sm"
+                />
+              </div>
+              <div>
+                <Label className="text-xs">모달 화면 선택</Label>
+                <ScreenSelect
+                  value={config.leftPanel?.addModalScreenId}
+                  onValueChange={(value) => updateConfig("leftPanel.addModalScreenId", value)}
+                  placeholder="모달 화면 선택"
+                  open={leftModalOpen}
+                  onOpenChange={setLeftModalOpen}
+                />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* 우측 패널 설정 */}
+      <div className="space-y-4">
+        <h4 className="font-medium text-sm border-b pb-2">우측 패널 설정 (상세)</h4>
+
+        <div className="space-y-3">
+          <div>
+            <Label className="text-xs">패널 제목</Label>
+            <Input
+              value={config.rightPanel?.title || ""}
+              onChange={(e) => updateConfig("rightPanel.title", e.target.value)}
+              placeholder="사원"
+              className="h-9 text-sm"
+            />
+          </div>
+
+          <div>
+            <Label className="text-xs">테이블 선택</Label>
+            <TableSelect
+              value={config.rightPanel?.tableName || ""}
+              onValueChange={(value) => updateConfig("rightPanel.tableName", value)}
+              placeholder="테이블 선택"
+              open={rightTableOpen}
+              onOpenChange={setRightTableOpen}
+            />
+          </div>
+
+          {/* 표시 컬럼 */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <Label className="text-xs">표시할 컬럼</Label>
+              <Button size="sm" variant="ghost" className="h-6 text-xs" onClick={() => addDisplayColumn("right")}>
+                <Plus className="mr-1 h-3 w-3" />
+                추가
+              </Button>
+            </div>
+            <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>
+                  </div>
+                  <ColumnSelect
+                    columns={rightColumns}
+                    value={col.name}
+                    onValueChange={(value) => updateDisplayColumn("right", index, "name", value)}
+                    placeholder="컬럼 선택"
+                  />
+                  <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">
+                  표시할 컬럼을 추가하세요
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Label className="text-xs">검색 표시</Label>
+            <Switch
+              checked={config.rightPanel?.showSearch || false}
+              onCheckedChange={(checked) => updateConfig("rightPanel.showSearch", checked)}
+            />
+          </div>
+
+          {config.rightPanel?.showSearch && (
+            <div>
+              <div className="mb-2 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?.searchColumns || [];
+                    updateConfig("rightPanel.searchColumns", [...current, { columnName: "", label: "" }]);
+                  }}
+                >
+                  <Plus className="mr-1 h-3 w-3" />
+                  추가
+                </Button>
+              </div>
+              <div className="space-y-2">
+                {(config.rightPanel?.searchColumns || []).map((searchCol, index) => (
+                  <div key={index} className="flex items-center gap-2">
+                    <ColumnSelect
+                      columns={rightColumns}
+                      value={searchCol.columnName}
+                      onValueChange={(value) => {
+                        const current = [...(config.rightPanel?.searchColumns || [])];
+                        current[index] = { ...current[index], columnName: value };
+                        updateConfig("rightPanel.searchColumns", current);
+                      }}
+                      placeholder="컬럼 선택"
+                    />
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      className="h-8 w-8 shrink-0 p-0"
+                      onClick={() => {
+                        const current = config.rightPanel?.searchColumns || [];
+                        updateConfig(
+                          "rightPanel.searchColumns",
+                          current.filter((_, i) => i !== index)
+                        );
+                      }}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+                {(config.rightPanel?.searchColumns || []).length === 0 && (
+                  <div className="rounded-md border py-3 text-center text-xs text-muted-foreground">
+                    검색할 컬럼을 추가하세요
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          <div className="flex items-center justify-between">
+            <Label className="text-xs">추가 버튼 표시</Label>
+            <Switch
+              checked={config.rightPanel?.showAddButton || false}
+              onCheckedChange={(checked) => updateConfig("rightPanel.showAddButton", checked)}
+            />
+          </div>
+
+          {config.rightPanel?.showAddButton && (
+            <>
+              <div>
+                <Label className="text-xs">추가 버튼 라벨</Label>
+                <Input
+                  value={config.rightPanel?.addButtonLabel || ""}
+                  onChange={(e) => updateConfig("rightPanel.addButtonLabel", e.target.value)}
+                  placeholder="추가"
+                  className="h-9 text-sm"
+                />
+              </div>
+              <div>
+                <Label className="text-xs">모달 화면 선택</Label>
+                <ScreenSelect
+                  value={config.rightPanel?.addModalScreenId}
+                  onValueChange={(value) => updateConfig("rightPanel.addModalScreenId", value)}
+                  placeholder="모달 화면 선택"
+                  open={rightModalOpen}
+                  onOpenChange={setRightModalOpen}
+                />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* 연결 설정 */}
+      <div className="space-y-4">
+        <h4 className="border-b pb-2 text-sm font-medium">연결 설정 (조인)</h4>
+        
+        {/* 설명 */}
+        <div className="rounded-md bg-muted/50 p-3 text-xs text-muted-foreground">
+          <p className="mb-1 font-medium text-foreground">좌측 패널 선택 시 우측 패널 데이터 필터링</p>
+          <p>좌측에서 항목을 선택하면 좌측 조인 컬럼의 값으로 우측 테이블을 필터링합니다.</p>
+          <p className="mt-1 text-[10px]">예: 부서(dept_code) 선택 시 해당 부서의 사원만 표시</p>
+        </div>
+
+        <div className="space-y-3">
+          <div>
+            <Label className="text-xs">좌측 테이블 조인 컬럼</Label>
+            <ColumnSelect
+              columns={leftColumns}
+              value={config.joinConfig?.leftColumn || ""}
+              onValueChange={(value) => updateConfig("joinConfig.leftColumn", value)}
+              placeholder="조인 컬럼 선택"
+            />
+          </div>
+
+          <div>
+            <Label className="text-xs">우측 테이블 조인 컬럼</Label>
+            <ColumnSelect
+              columns={rightColumns}
+              value={config.joinConfig?.rightColumn || ""}
+              onValueChange={(value) => updateConfig("joinConfig.rightColumn", value)}
+              placeholder="조인 컬럼 선택"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* 데이터 전달 설정 */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between border-b pb-2">
+          <h4 className="text-sm font-medium">데이터 전달 설정</h4>
+          <Button size="sm" variant="ghost" className="h-6 text-xs" onClick={addDataTransferField}>
+            <Plus className="mr-1 h-3 w-3" />
+            추가
+          </Button>
+        </div>
+
+        {/* 설명 */}
+        <div className="rounded-md bg-muted/50 p-3 text-xs text-muted-foreground">
+          <p className="mb-1 font-medium text-foreground">우측 패널 추가 버튼 클릭 시 모달로 데이터 전달</p>
+          <p>좌측에서 선택한 항목의 값을 모달 폼에 자동으로 채워줍니다.</p>
+          <p className="mt-1 text-[10px]">예: dept_code를 모달의 dept_code 필드에 자동 입력</p>
+        </div>
+
+        <div className="space-y-3">
+          {(config.dataTransferFields || []).map((field, index) => (
+            <div key={index} className="space-y-2 rounded-md border p-3">
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-medium">필드 {index + 1}</span>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="h-6 w-6 p-0"
+                  onClick={() => removeDataTransferField(index)}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              </div>
+              <div>
+                <Label className="text-xs">소스 컬럼 (좌측 패널)</Label>
+                <ColumnSelect
+                  columns={leftColumns}
+                  value={field.sourceColumn}
+                  onValueChange={(value) => updateDataTransferField(index, "sourceColumn", value)}
+                  placeholder="소스 컬럼"
+                />
+              </div>
+              <div>
+                <Label className="text-xs">타겟 컬럼 (모달 필드명)</Label>
+                <Input
+                  value={field.targetColumn}
+                  onChange={(e) => updateDataTransferField(index, "targetColumn", e.target.value)}
+                  placeholder="모달에서 사용할 필드명"
+                  className="h-9 text-sm"
+                />
+              </div>
+            </div>
+          ))}
+          {(config.dataTransferFields || []).length === 0 && (
+            <div className="rounded-md border py-4 text-center text-xs text-muted-foreground">
+              전달할 필드를 추가하세요
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 레이아웃 설정 */}
+      <div className="space-y-4">
+        <h4 className="font-medium text-sm border-b pb-2">레이아웃 설정</h4>
+
+        <div className="space-y-3">
+          <div>
+            <Label className="text-xs">좌우 비율 (좌측 %)</Label>
+            <Input
+              type="number"
+              value={config.splitRatio || 30}
+              onChange={(e) => updateConfig("splitRatio", parseInt(e.target.value) || 30)}
+              min={10}
+              max={90}
+              className="h-9 text-sm"
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Label className="text-xs">크기 조절 가능</Label>
+            <Switch
+              checked={config.resizable !== false}
+              onCheckedChange={(checked) => updateConfig("resizable", checked)}
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Label className="text-xs">자동 데이터 로드</Label>
+            <Switch
+              checked={config.autoLoad !== false}
+              onCheckedChange={(checked) => updateConfig("autoLoad", checked)}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SplitPanelLayout2ConfigPanel;

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

@@ -0,0 +1,42 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { SplitPanelLayout2Definition } from "./index";
+import { SplitPanelLayout2Component } from "./SplitPanelLayout2Component";
+
+/**
+ * SplitPanelLayout2 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class SplitPanelLayout2Renderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = SplitPanelLayout2Definition;
+
+  render(): React.ReactElement {
+    return <SplitPanelLayout2Component {...this.props} renderer={this} />;
+  }
+
+  /**
+   * 컴포넌트별 특화 메서드들
+   */
+
+  // 좌측 패널 데이터 새로고침
+  public refreshLeftPanel() {
+    // 컴포넌트 내부에서 처리
+  }
+
+  // 우측 패널 데이터 새로고침
+  public refreshRightPanel() {
+    // 컴포넌트 내부에서 처리
+  }
+
+  // 선택된 좌측 항목 가져오기
+  public getSelectedLeftItem(): any {
+    // 컴포넌트 내부 상태에서 가져옴
+    return null;
+  }
+}
+
+// 자동 등록 실행
+SplitPanelLayout2Renderer.registerSelf();
+

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

@@ -0,0 +1,57 @@
+/**
+ * SplitPanelLayout2 기본 설정
+ */
+
+import { SplitPanelLayout2Config } from "./types";
+
+/**
+ * 기본 설정값
+ */
+export const defaultConfig: Partial<SplitPanelLayout2Config> = {
+  leftPanel: {
+    title: "목록",
+    tableName: "",
+    displayColumns: [],
+    showSearch: true,
+    showAddButton: false,
+  },
+  rightPanel: {
+    title: "상세",
+    tableName: "",
+    displayColumns: [],
+    showSearch: true,
+    showAddButton: true,
+    addButtonLabel: "추가",
+    showEditButton: true,
+    showDeleteButton: true,
+    displayMode: "card",
+    emptyMessage: "좌측에서 항목을 선택해주세요",
+  },
+  joinConfig: {
+    leftColumn: "",
+    rightColumn: "",
+  },
+  dataTransferFields: [],
+  splitRatio: 30,
+  resizable: true,
+  minLeftWidth: 250,
+  minRightWidth: 400,
+  autoLoad: true,
+};
+
+/**
+ * 컴포넌트 메타데이터
+ */
+export const componentMeta = {
+  id: "split-panel-layout2",
+  name: "분할 패널 레이아웃 v2",
+  nameEng: "Split Panel Layout v2",
+  description: "마스터-디테일 패턴의 좌우 분할 레이아웃 (데이터 전달 기능 포함)",
+  category: "layout",
+  webType: "container",
+  icon: "LayoutPanelLeft",
+  tags: ["레이아웃", "분할", "마스터", "디테일", "패널", "부서", "사원"],
+  version: "2.0.0",
+  author: "개발팀",
+};
+

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

@@ -0,0 +1,41 @@
+"use client";
+
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import type { WebType } from "@/types/screen";
+import { SplitPanelLayout2Wrapper } from "./SplitPanelLayout2Component";
+import { SplitPanelLayout2ConfigPanel } from "./SplitPanelLayout2ConfigPanel";
+import { defaultConfig, componentMeta } from "./config";
+
+/**
+ * SplitPanelLayout2 컴포넌트 정의
+ * 마스터-디테일 패턴의 좌우 분할 레이아웃 (개선 버전)
+ */
+export const SplitPanelLayout2Definition = createComponentDefinition({
+  id: componentMeta.id,
+  name: componentMeta.name,
+  nameEng: componentMeta.nameEng,
+  description: componentMeta.description,
+  category: ComponentCategory.LAYOUT,
+  webType: componentMeta.webType as WebType,
+  component: SplitPanelLayout2Wrapper,
+  defaultConfig: defaultConfig,
+  defaultSize: { width: 1200, height: 600 },
+  configPanel: SplitPanelLayout2ConfigPanel,
+  icon: componentMeta.icon,
+  tags: componentMeta.tags,
+  version: componentMeta.version,
+  author: componentMeta.author,
+  documentation: "https://docs.example.com/components/split-panel-layout2",
+});
+
+// 타입 내보내기
+export type {
+  SplitPanelLayout2Config,
+  LeftPanelConfig,
+  RightPanelConfig,
+  JoinConfig,
+  DataTransferField,
+  ColumnConfig,
+} from "./types";
+

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

@@ -0,0 +1,113 @@
+/**
+ * SplitPanelLayout2 컴포넌트 타입 정의
+ * 마스터-디테일 패턴의 좌우 분할 레이아웃 (개선 버전)
+ */
+
+/**
+ * 컬럼 설정
+ */
+export interface ColumnConfig {
+  name: string; // 컬럼명
+  label: string; // 표시 라벨
+  displayRow?: "name" | "info"; // 표시 위치 (name: 이름 행, info: 정보 행)
+  width?: number; // 너비 (px)
+  bold?: boolean; // 굵게 표시
+  format?: {
+    type?: "text" | "number" | "currency" | "date";
+    thousandSeparator?: boolean;
+    decimalPlaces?: number;
+    prefix?: string;
+    suffix?: string;
+    dateFormat?: string;
+  };
+}
+
+/**
+ * 데이터 전달 필드 설정
+ */
+export interface DataTransferField {
+  sourceColumn: string; // 좌측 패널의 컬럼명
+  targetColumn: string; // 모달로 전달할 컬럼명
+  label?: string; // 표시용 라벨
+}
+
+/**
+ * 검색 컬럼 설정
+ */
+export interface SearchColumnConfig {
+  columnName: string; // 검색 대상 컬럼명
+  label?: string; // 표시 라벨 (없으면 컬럼명 사용)
+}
+
+/**
+ * 좌측 패널 설정
+ */
+export interface LeftPanelConfig {
+  title?: string; // 패널 제목
+  tableName: string; // 테이블명
+  displayColumns: ColumnConfig[]; // 표시할 컬럼들
+  searchColumn?: string; // 검색 대상 컬럼 (단일, 하위 호환성)
+  searchColumns?: SearchColumnConfig[]; // 검색 대상 컬럼들 (복수)
+  showSearch?: boolean; // 검색 표시 여부
+  showAddButton?: boolean; // 추가 버튼 표시
+  addButtonLabel?: string; // 추가 버튼 라벨
+  addModalScreenId?: number; // 추가 모달 화면 ID
+  // 계층 구조 설정
+  hierarchyConfig?: {
+    enabled: boolean;
+    parentColumn: string; // 부모 참조 컬럼 (예: parent_dept_code)
+    idColumn: string; // ID 컬럼 (예: dept_code)
+  };
+}
+
+/**
+ * 우측 패널 설정
+ */
+export interface RightPanelConfig {
+  title?: string; // 패널 제목
+  tableName: string; // 테이블명
+  displayColumns: ColumnConfig[]; // 표시할 컬럼들
+  searchColumn?: string; // 검색 대상 컬럼 (단일, 하위 호환성)
+  searchColumns?: SearchColumnConfig[]; // 검색 대상 컬럼들 (복수)
+  showSearch?: boolean; // 검색 표시 여부
+  showAddButton?: boolean; // 추가 버튼 표시
+  addButtonLabel?: string; // 추가 버튼 라벨
+  addModalScreenId?: number; // 추가 모달 화면 ID
+  showEditButton?: boolean; // 수정 버튼 표시
+  showDeleteButton?: boolean; // 삭제 버튼 표시
+  displayMode?: "card" | "list"; // 표시 모드
+  emptyMessage?: string; // 데이터 없을 때 메시지
+}
+
+/**
+ * 조인 설정
+ */
+export interface JoinConfig {
+  leftColumn: string; // 좌측 테이블의 조인 컬럼
+  rightColumn: string; // 우측 테이블의 조인 컬럼
+}
+
+/**
+ * 메인 설정
+ */
+export interface SplitPanelLayout2Config {
+  // 패널 설정
+  leftPanel: LeftPanelConfig;
+  rightPanel: RightPanelConfig;
+
+  // 조인 설정
+  joinConfig: JoinConfig;
+
+  // 데이터 전달 설정 (모달로 전달할 필드)
+  dataTransferFields?: DataTransferField[];
+
+  // 레이아웃 설정
+  splitRatio?: number; // 좌우 비율 (0-100, 기본 30)
+  resizable?: boolean; // 크기 조절 가능 여부
+  minLeftWidth?: number; // 좌측 최소 너비 (px)
+  minRightWidth?: number; // 우측 최소 너비 (px)
+
+  // 동작 설정
+  autoLoad?: boolean; // 자동 데이터 로드
+}
+

frontend/lib/utils/getComponentConfigPanel.tsx

@@ -24,6 +24,7 @@ const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
   "table-list": () => import("@/lib/registry/components/table-list/TableListConfigPanel"),
   "card-display": () => import("@/lib/registry/components/card-display/CardDisplayConfigPanel"),
   "split-panel-layout": () => import("@/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel"),
+  "split-panel-layout2": () => import("@/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel"),
   "repeater-field-group": () => import("@/components/webtypes/config/RepeaterConfigPanel"),
   "flow-widget": () => import("@/components/screen/config-panels/FlowWidgetConfigPanel"),
   // 🆕 수주 등록 관련 컴포넌트들