diff --git a/backend-node/src/routes/dataRoutes.ts b/backend-node/src/routes/dataRoutes.ts
index 4ad42561..fb0f1518 100644
--- a/backend-node/src/routes/dataRoutes.ts
+++ b/backend-node/src/routes/dataRoutes.ts
@@ -5,6 +5,92 @@ import { AuthenticatedRequest } from "../types/auth";
 
 const router = express.Router();
 
+/**
+ * 조인 데이터 조회 API (다른 라우트보다 먼저 정의)
+ * GET /api/data/join?leftTable=...&rightTable=...&leftColumn=...&rightColumn=...&leftValue=...
+ */
+router.get(
+  "/join",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res) => {
+    try {
+      const { leftTable, rightTable, leftColumn, rightColumn, leftValue } =
+        req.query;
+
+      // 입력값 검증
+      if (!leftTable || !rightTable || !leftColumn || !rightColumn) {
+        return res.status(400).json({
+          success: false,
+          message:
+            "필수 파라미터가 누락되었습니다 (leftTable, rightTable, leftColumn, rightColumn).",
+          error: "MISSING_PARAMETERS",
+        });
+      }
+
+      // SQL 인젝션 방지를 위한 검증
+      const tables = [leftTable as string, rightTable as string];
+      const columns = [leftColumn as string, rightColumn as string];
+
+      for (const table of tables) {
+        if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(table)) {
+          return res.status(400).json({
+            success: false,
+            message: `유효하지 않은 테이블명입니다: ${table}`,
+            error: "INVALID_TABLE_NAME",
+          });
+        }
+      }
+
+      for (const column of columns) {
+        if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(column)) {
+          return res.status(400).json({
+            success: false,
+            message: `유효하지 않은 컬럼명입니다: ${column}`,
+            error: "INVALID_COLUMN_NAME",
+          });
+        }
+      }
+
+      console.log(`🔗 조인 데이터 조회:`, {
+        leftTable,
+        rightTable,
+        leftColumn,
+        rightColumn,
+        leftValue,
+      });
+
+      // 조인 데이터 조회
+      const result = await dataService.getJoinedData(
+        leftTable as string,
+        rightTable as string,
+        leftColumn as string,
+        rightColumn as string,
+        leftValue as string
+      );
+
+      if (!result.success) {
+        return res.status(400).json(result);
+      }
+
+      console.log(
+        `✅ 조인 데이터 조회 성공: ${result.data?.length || 0}개 항목`
+      );
+
+      return res.json({
+        success: true,
+        data: result.data,
+      });
+    } catch (error) {
+      console.error("조인 데이터 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "조인 데이터 조회 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "Unknown error",
+      });
+    }
+  }
+);
+
 /**
  * 동적 테이블 데이터 조회 API
  * GET /api/data/{tableName}
@@ -15,7 +101,18 @@ router.get(
   async (req: AuthenticatedRequest, res) => {
     try {
       const { tableName } = req.params;
-      const { limit = "10", offset = "0", orderBy, ...filters } = req.query;
+      const {
+        limit,
+        offset,
+        page,
+        size,
+        orderBy,
+        searchTerm,
+        sortBy,
+        sortOrder,
+        userLang,
+        ...filters
+      } = req.query;
 
       // 입력값 검증
       if (!tableName || typeof tableName !== "string") {
@@ -35,21 +132,43 @@ router.get(
         });
       }
 
+      // page/size 또는 limit/offset 방식 지원
+      let finalLimit = 100;
+      let finalOffset = 0;
+
+      if (page && size) {
+        // page/size 방식
+        const pageNum = parseInt(page as string) || 1;
+        const sizeNum = parseInt(size as string) || 100;
+        finalLimit = sizeNum;
+        finalOffset = (pageNum - 1) * sizeNum;
+      } else if (limit || offset) {
+        // limit/offset 방식
+        finalLimit = parseInt(limit as string) || 10;
+        finalOffset = parseInt(offset as string) || 0;
+      }
+
       console.log(`📊 데이터 조회 요청: ${tableName}`, {
-        limit: parseInt(limit as string),
-        offset: parseInt(offset as string),
-        orderBy: orderBy as string,
+        limit: finalLimit,
+        offset: finalOffset,
+        orderBy: orderBy || sortBy,
+        searchTerm,
         filters,
         user: req.user?.userId,
       });
 
+      // filters에서 searchTerm과 sortOrder 제거 (이미 별도로 처리됨)
+      const cleanFilters = { ...filters };
+      delete cleanFilters.searchTerm;
+      delete cleanFilters.sortOrder;
+
       // 데이터 조회
       const result = await dataService.getTableData({
         tableName,
-        limit: parseInt(limit as string),
-        offset: parseInt(offset as string),
-        orderBy: orderBy as string,
-        filters: filters as Record<string, string>,
+        limit: finalLimit,
+        offset: finalOffset,
+        orderBy: (orderBy || sortBy) as string,
+        filters: cleanFilters as Record<string, string>,
         userCompany: req.user?.companyCode,
       });
 
@@ -61,7 +180,21 @@ router.get(
         `✅ 데이터 조회 성공: ${tableName}, ${result.data?.length || 0}개 항목`
       );
 
-      return res.json(result.data);
+      // 페이징 정보 포함하여 반환
+      const total = result.data?.length || 0;
+      const responsePage =
+        finalLimit > 0 ? Math.floor(finalOffset / finalLimit) + 1 : 1;
+      const responseSize = finalLimit;
+      const totalPages = responseSize > 0 ? Math.ceil(total / responseSize) : 1;
+
+      return res.json({
+        success: true,
+        data: result.data,
+        total,
+        page: responsePage,
+        size: responseSize,
+        totalPages,
+      });
     } catch (error) {
       console.error("데이터 조회 오류:", error);
       return res.status(500).json({
@@ -127,4 +260,231 @@ router.get(
   }
 );
 
+/**
+ * 레코드 상세 조회 API
+ * GET /api/data/{tableName}/{id}
+ */
+router.get(
+  "/:tableName/:id",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res) => {
+    try {
+      const { tableName, id } = req.params;
+
+      // 입력값 검증
+      if (!tableName || typeof tableName !== "string") {
+        return res.status(400).json({
+          success: false,
+          message: "테이블명이 필요합니다.",
+          error: "INVALID_TABLE_NAME",
+        });
+      }
+
+      if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(tableName)) {
+        return res.status(400).json({
+          success: false,
+          message: "유효하지 않은 테이블명입니다.",
+          error: "INVALID_TABLE_NAME",
+        });
+      }
+
+      console.log(`🔍 레코드 상세 조회: ${tableName}/${id}`);
+
+      // 레코드 상세 조회
+      const result = await dataService.getRecordDetail(tableName, id);
+
+      if (!result.success) {
+        return res.status(400).json(result);
+      }
+
+      if (!result.data) {
+        return res.status(404).json({
+          success: false,
+          message: "레코드를 찾을 수 없습니다.",
+        });
+      }
+
+      console.log(`✅ 레코드 조회 성공: ${tableName}/${id}`);
+
+      return res.json({
+        success: true,
+        data: result.data,
+      });
+    } catch (error) {
+      console.error("레코드 상세 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "레코드 조회 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "Unknown error",
+      });
+    }
+  }
+);
+
+/**
+ * 레코드 생성 API
+ * POST /api/data/{tableName}
+ */
+router.post(
+  "/:tableName",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res) => {
+    try {
+      const { tableName } = req.params;
+      const data = req.body;
+
+      // 입력값 검증
+      if (!tableName || typeof tableName !== "string") {
+        return res.status(400).json({
+          success: false,
+          message: "테이블명이 필요합니다.",
+          error: "INVALID_TABLE_NAME",
+        });
+      }
+
+      if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(tableName)) {
+        return res.status(400).json({
+          success: false,
+          message: "유효하지 않은 테이블명입니다.",
+          error: "INVALID_TABLE_NAME",
+        });
+      }
+
+      console.log(`➕ 레코드 생성: ${tableName}`, data);
+
+      // 레코드 생성
+      const result = await dataService.createRecord(tableName, data);
+
+      if (!result.success) {
+        return res.status(400).json(result);
+      }
+
+      console.log(`✅ 레코드 생성 성공: ${tableName}`);
+
+      return res.status(201).json({
+        success: true,
+        data: result.data,
+        message: "레코드가 생성되었습니다.",
+      });
+    } catch (error) {
+      console.error("레코드 생성 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "레코드 생성 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "Unknown error",
+      });
+    }
+  }
+);
+
+/**
+ * 레코드 수정 API
+ * PUT /api/data/{tableName}/{id}
+ */
+router.put(
+  "/:tableName/:id",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res) => {
+    try {
+      const { tableName, id } = req.params;
+      const data = req.body;
+
+      // 입력값 검증
+      if (!tableName || typeof tableName !== "string") {
+        return res.status(400).json({
+          success: false,
+          message: "테이블명이 필요합니다.",
+          error: "INVALID_TABLE_NAME",
+        });
+      }
+
+      if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(tableName)) {
+        return res.status(400).json({
+          success: false,
+          message: "유효하지 않은 테이블명입니다.",
+          error: "INVALID_TABLE_NAME",
+        });
+      }
+
+      console.log(`✏️ 레코드 수정: ${tableName}/${id}`, data);
+
+      // 레코드 수정
+      const result = await dataService.updateRecord(tableName, id, data);
+
+      if (!result.success) {
+        return res.status(400).json(result);
+      }
+
+      console.log(`✅ 레코드 수정 성공: ${tableName}/${id}`);
+
+      return res.json({
+        success: true,
+        data: result.data,
+        message: "레코드가 수정되었습니다.",
+      });
+    } catch (error) {
+      console.error("레코드 수정 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "레코드 수정 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "Unknown error",
+      });
+    }
+  }
+);
+
+/**
+ * 레코드 삭제 API
+ * DELETE /api/data/{tableName}/{id}
+ */
+router.delete(
+  "/:tableName/:id",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res) => {
+    try {
+      const { tableName, id } = req.params;
+
+      // 입력값 검증
+      if (!tableName || typeof tableName !== "string") {
+        return res.status(400).json({
+          success: false,
+          message: "테이블명이 필요합니다.",
+          error: "INVALID_TABLE_NAME",
+        });
+      }
+
+      if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(tableName)) {
+        return res.status(400).json({
+          success: false,
+          message: "유효하지 않은 테이블명입니다.",
+          error: "INVALID_TABLE_NAME",
+        });
+      }
+
+      console.log(`🗑️ 레코드 삭제: ${tableName}/${id}`);
+
+      // 레코드 삭제
+      const result = await dataService.deleteRecord(tableName, id);
+
+      if (!result.success) {
+        return res.status(400).json(result);
+      }
+
+      console.log(`✅ 레코드 삭제 성공: ${tableName}/${id}`);
+
+      return res.json({
+        success: true,
+        message: "레코드가 삭제되었습니다.",
+      });
+    } catch (error) {
+      console.error("레코드 삭제 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "레코드 삭제 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "Unknown error",
+      });
+    }
+  }
+);
+
 export default router;
diff --git a/backend-node/src/services/dataService.ts b/backend-node/src/services/dataService.ts
index 2608e8c9..661ffae1 100644
--- a/backend-node/src/services/dataService.ts
+++ b/backend-node/src/services/dataService.ts
@@ -313,6 +313,283 @@ class DataService {
       return null;
     }
   }
+
+  /**
+   * 레코드 상세 조회
+   */
+  async getRecordDetail(
+    tableName: string,
+    id: string | number
+  ): Promise<ServiceResponse<any>> {
+    try {
+      // 테이블명 화이트리스트 검증
+      if (!ALLOWED_TABLES.includes(tableName)) {
+        return {
+          success: false,
+          message: `접근이 허용되지 않은 테이블입니다: ${tableName}`,
+          error: "TABLE_NOT_ALLOWED",
+        };
+      }
+
+      // Primary Key 컬럼 찾기
+      const pkResult = await query<{ attname: string }>(
+        `SELECT a.attname
+         FROM pg_index i
+         JOIN pg_attribute a ON a.attrelid = i.indrelid AND a.attnum = ANY(i.indkey)
+         WHERE i.indrelid = $1::regclass AND i.indisprimary`,
+        [tableName]
+      );
+
+      let pkColumn = "id"; // 기본값
+      if (pkResult.length > 0) {
+        pkColumn = pkResult[0].attname;
+      }
+
+      const queryText = `SELECT * FROM "${tableName}" WHERE "${pkColumn}" = $1`;
+      const result = await query<any>(queryText, [id]);
+
+      if (result.length === 0) {
+        return {
+          success: false,
+          message: "레코드를 찾을 수 없습니다.",
+          error: "RECORD_NOT_FOUND",
+        };
+      }
+
+      return {
+        success: true,
+        data: result[0],
+      };
+    } catch (error) {
+      console.error(`레코드 상세 조회 오류 (${tableName}/${id}):`, error);
+      return {
+        success: false,
+        message: "레코드 조회 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "Unknown error",
+      };
+    }
+  }
+
+  /**
+   * 조인된 데이터 조회
+   */
+  async getJoinedData(
+    leftTable: string,
+    rightTable: string,
+    leftColumn: string,
+    rightColumn: string,
+    leftValue?: string | number
+  ): Promise<ServiceResponse<any[]>> {
+    try {
+      // 테이블명 화이트리스트 검증
+      if (!ALLOWED_TABLES.includes(leftTable)) {
+        return {
+          success: false,
+          message: `접근이 허용되지 않은 테이블입니다: ${leftTable}`,
+          error: "TABLE_NOT_ALLOWED",
+        };
+      }
+
+      if (!ALLOWED_TABLES.includes(rightTable)) {
+        return {
+          success: false,
+          message: `접근이 허용되지 않은 테이블입니다: ${rightTable}`,
+          error: "TABLE_NOT_ALLOWED",
+        };
+      }
+
+      let queryText = `
+        SELECT r.* 
+        FROM "${rightTable}" r
+        INNER JOIN "${leftTable}" l 
+        ON l."${leftColumn}" = r."${rightColumn}"
+      `;
+
+      const values: any[] = [];
+      if (leftValue !== undefined && leftValue !== null) {
+        queryText += ` WHERE l."${leftColumn}" = $1`;
+        values.push(leftValue);
+      }
+
+      const result = await query<any>(queryText, values);
+
+      return {
+        success: true,
+        data: result,
+      };
+    } catch (error) {
+      console.error(
+        `조인 데이터 조회 오류 (${leftTable} → ${rightTable}):`,
+        error
+      );
+      return {
+        success: false,
+        message: "조인 데이터 조회 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "Unknown error",
+      };
+    }
+  }
+
+  /**
+   * 레코드 생성
+   */
+  async createRecord(
+    tableName: string,
+    data: Record<string, any>
+  ): Promise<ServiceResponse<any>> {
+    try {
+      // 테이블명 화이트리스트 검증
+      if (!ALLOWED_TABLES.includes(tableName)) {
+        return {
+          success: false,
+          message: `접근이 허용되지 않은 테이블입니다: ${tableName}`,
+          error: "TABLE_NOT_ALLOWED",
+        };
+      }
+
+      const columns = Object.keys(data);
+      const values = Object.values(data);
+      const placeholders = values.map((_, index) => `$${index + 1}`).join(", ");
+      const columnNames = columns.map((col) => `"${col}"`).join(", ");
+
+      const queryText = `
+        INSERT INTO "${tableName}" (${columnNames})
+        VALUES (${placeholders})
+        RETURNING *
+      `;
+
+      const result = await query<any>(queryText, values);
+
+      return {
+        success: true,
+        data: result[0],
+      };
+    } catch (error) {
+      console.error(`레코드 생성 오류 (${tableName}):`, error);
+      return {
+        success: false,
+        message: "레코드 생성 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "Unknown error",
+      };
+    }
+  }
+
+  /**
+   * 레코드 수정
+   */
+  async updateRecord(
+    tableName: string,
+    id: string | number,
+    data: Record<string, any>
+  ): Promise<ServiceResponse<any>> {
+    try {
+      // 테이블명 화이트리스트 검증
+      if (!ALLOWED_TABLES.includes(tableName)) {
+        return {
+          success: false,
+          message: `접근이 허용되지 않은 테이블입니다: ${tableName}`,
+          error: "TABLE_NOT_ALLOWED",
+        };
+      }
+
+      // Primary Key 컬럼 찾기
+      const pkResult = await query<{ attname: string }>(
+        `SELECT a.attname
+         FROM pg_index i
+         JOIN pg_attribute a ON a.attrelid = i.indrelid AND a.attnum = ANY(i.indkey)
+         WHERE i.indrelid = $1::regclass AND i.indisprimary`,
+        [tableName]
+      );
+
+      let pkColumn = "id";
+      if (pkResult.length > 0) {
+        pkColumn = pkResult[0].attname;
+      }
+
+      const columns = Object.keys(data);
+      const values = Object.values(data);
+      const setClause = columns
+        .map((col, index) => `"${col}" = $${index + 1}`)
+        .join(", ");
+
+      const queryText = `
+        UPDATE "${tableName}"
+        SET ${setClause}
+        WHERE "${pkColumn}" = $${values.length + 1}
+        RETURNING *
+      `;
+
+      values.push(id);
+      const result = await query<any>(queryText, values);
+
+      if (result.length === 0) {
+        return {
+          success: false,
+          message: "레코드를 찾을 수 없습니다.",
+          error: "RECORD_NOT_FOUND",
+        };
+      }
+
+      return {
+        success: true,
+        data: result[0],
+      };
+    } catch (error) {
+      console.error(`레코드 수정 오류 (${tableName}/${id}):`, error);
+      return {
+        success: false,
+        message: "레코드 수정 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "Unknown error",
+      };
+    }
+  }
+
+  /**
+   * 레코드 삭제
+   */
+  async deleteRecord(
+    tableName: string,
+    id: string | number
+  ): Promise<ServiceResponse<void>> {
+    try {
+      // 테이블명 화이트리스트 검증
+      if (!ALLOWED_TABLES.includes(tableName)) {
+        return {
+          success: false,
+          message: `접근이 허용되지 않은 테이블입니다: ${tableName}`,
+          error: "TABLE_NOT_ALLOWED",
+        };
+      }
+
+      // Primary Key 컬럼 찾기
+      const pkResult = await query<{ attname: string }>(
+        `SELECT a.attname
+         FROM pg_index i
+         JOIN pg_attribute a ON a.attrelid = i.indrelid AND a.attnum = ANY(i.indkey)
+         WHERE i.indrelid = $1::regclass AND i.indisprimary`,
+        [tableName]
+      );
+
+      let pkColumn = "id";
+      if (pkResult.length > 0) {
+        pkColumn = pkResult[0].attname;
+      }
+
+      const queryText = `DELETE FROM "${tableName}" WHERE "${pkColumn}" = $1`;
+      await query<any>(queryText, [id]);
+
+      return {
+        success: true,
+      };
+    } catch (error) {
+      console.error(`레코드 삭제 오류 (${tableName}/${id}):`, error);
+      return {
+        success: false,
+        message: "레코드 삭제 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "Unknown error",
+      };
+    }
+  }
 }
 
 export const dataService = new DataService();
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 9bf3d672..05602fbb 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -942,8 +942,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                 migratedComponents: layoutToUse.components.length,
                 sampleComponent: layoutToUse.components[0],
               });
-
-              toast.success("레이아웃이 새로운 그리드 시스템으로 자동 변환되었습니다.");
             }
 
             // 기본 격자 설정 보장 (격자 표시와 스냅 기본 활성화)
@@ -1249,9 +1247,42 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
 
     try {
       setIsSaving(true);
+
+      // 분할 패널 컴포넌트의 rightPanel.tableName 자동 설정
+      const updatedComponents = layout.components.map((comp) => {
+        if (comp.type === "component" && comp.componentType === "split-panel-layout") {
+          const config = comp.componentConfig || {};
+          const rightPanel = config.rightPanel || {};
+          const leftPanel = config.leftPanel || {};
+          const relationshipType = rightPanel.relation?.type || "detail";
+
+          // 관계 타입이 detail이면 rightPanel.tableName을 leftPanel.tableName과 동일하게 설정
+          if (relationshipType === "detail" && leftPanel.tableName) {
+            console.log("🔧 분할 패널 자동 수정:", {
+              componentId: comp.id,
+              leftTableName: leftPanel.tableName,
+              rightTableName: leftPanel.tableName,
+            });
+
+            return {
+              ...comp,
+              componentConfig: {
+                ...config,
+                rightPanel: {
+                  ...rightPanel,
+                  tableName: leftPanel.tableName,
+                },
+              },
+            };
+          }
+        }
+        return comp;
+      });
+
       // 해상도 정보를 포함한 레이아웃 데이터 생성
       const layoutWithResolution = {
         ...layout,
+        components: updatedComponents,
         screenResolution: screenResolution,
       };
       console.log("💾 저장 시작:", {
@@ -3744,13 +3775,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         screenResolution={screenResolution}
         onBack={onBackToList}
         onSave={handleSave}
-        onUndo={undo}
-        onRedo={redo}
-        onPreview={() => {
-          toast.info("미리보기 기능은 준비 중입니다.");
-        }}
-        canUndo={historyIndex > 0}
-        canRedo={historyIndex < history.length - 1}
         isSaving={isSaving}
       />
       {/* 메인 컨테이너 (좌측 툴바 + 패널들 + 캔버스) */}
@@ -3869,12 +3893,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
           ref={canvasContainerRef}
           className="relative flex-1 overflow-auto bg-gradient-to-br from-gray-50 to-slate-100 px-2 py-6"
         >
-          {/* Pan 모드 안내 */}
-          {isPanMode && (
-            <div className="pointer-events-none fixed top-20 left-1/2 z-50 -translate-x-1/2 transform rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-lg">
-              🖐️ Pan 모드 활성화 - 드래그하여 캔버스 이동
-            </div>
-          )}
+          {/* Pan 모드 안내 - 제거됨 */}
 
           {/* 줌 레벨 표시 */}
           <div className="pointer-events-none fixed right-6 bottom-6 z-50 rounded-lg bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-lg ring-1 ring-gray-200">
diff --git a/frontend/components/screen/panels/ComponentsPanel.tsx b/frontend/components/screen/panels/ComponentsPanel.tsx
index edf3cced..5ec0b646 100644
--- a/frontend/components/screen/panels/ComponentsPanel.tsx
+++ b/frontend/components/screen/panels/ComponentsPanel.tsx
@@ -3,10 +3,10 @@
 import React, { useState, useMemo } from "react";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
 import { ComponentDefinition, ComponentCategory } from "@/types/component";
-import { Search, Package, Grid, Layers, Palette, Zap, MousePointer } from "lucide-react";
+import { Search, Package, Grid, Layers, Palette, Zap, MousePointer, Edit3, BarChart3 } from "lucide-react";
 
 interface ComponentsPanelProps {
   className?: string;
@@ -14,21 +14,20 @@ interface ComponentsPanelProps {
 
 export function ComponentsPanel({ className }: ComponentsPanelProps) {
   const [searchQuery, setSearchQuery] = useState("");
-  const [selectedCategory, setSelectedCategory] = useState<"all" | "display" | "action" | "layout" | "utility">("all");
 
   // 레지스트리에서 모든 컴포넌트 조회
   const allComponents = useMemo(() => {
     const components = ComponentRegistry.getAllComponents();
-    
+
     // 수동으로 table-list 컴포넌트 추가 (임시)
-    const hasTableList = components.some(c => c.id === 'table-list');
+    const hasTableList = components.some((c) => c.id === "table-list");
     if (!hasTableList) {
       components.push({
-        id: 'table-list',
-        name: '데이터 테이블 v2',
-        description: '검색, 필터링, 페이징, CRUD 기능이 포함된 완전한 데이터 테이블 컴포넌트',
-        category: 'display',
-        tags: ['table', 'data', 'crud'],
+        id: "table-list",
+        name: "데이터 테이블 v2",
+        description: "검색, 필터링, 페이징, CRUD 기능이 포함된 완전한 데이터 테이블 컴포넌트",
+        category: "display",
+        tags: ["table", "data", "crud"],
         defaultSize: { width: 1000, height: 680 },
       } as ComponentDefinition);
     }
@@ -39,17 +38,16 @@ export function ComponentsPanel({ className }: ComponentsPanelProps) {
   // 카테고리별 컴포넌트 그룹화
   const componentsByCategory = useMemo(() => {
     return {
-      all: allComponents,
-      display: allComponents.filter((c) => c.category === "display"),
-      action: allComponents.filter((c) => c.category === "action"),
-      layout: allComponents.filter((c) => c.category === "layout"),
-      utility: allComponents.filter((c) => c.category === "utility"),
+      input: allComponents.filter((c) => c.category === ComponentCategory.INPUT && c.id === "file-upload"),
+      action: allComponents.filter((c) => c.category === ComponentCategory.ACTION),
+      display: allComponents.filter((c) => c.category === ComponentCategory.DISPLAY),
+      layout: allComponents.filter((c) => c.category === ComponentCategory.LAYOUT),
     };
   }, [allComponents]);
 
-  // 검색 및 필터링된 컴포넌트
-  const filteredComponents = useMemo(() => {
-    let components = selectedCategory === "all" ? componentsByCategory.all : componentsByCategory[selectedCategory as keyof typeof componentsByCategory];
+  // 카테고리별 검색 필터링
+  const getFilteredComponents = (category: keyof typeof componentsByCategory) => {
+    let components = componentsByCategory[category];
 
     if (searchQuery) {
       const query = searchQuery.toLowerCase();
@@ -57,12 +55,12 @@ export function ComponentsPanel({ className }: ComponentsPanelProps) {
         (component: ComponentDefinition) =>
           component.name.toLowerCase().includes(query) ||
           component.description.toLowerCase().includes(query) ||
-          component.tags?.some((tag: string) => tag.toLowerCase().includes(query))
+          component.tags?.some((tag: string) => tag.toLowerCase().includes(query)),
       );
     }
 
     return components;
-  }, [componentsByCategory, selectedCategory, searchQuery]);
+  };
 
   // 카테고리 아이콘 매핑
   const getCategoryIcon = (category: ComponentCategory) => {
@@ -90,139 +88,127 @@ export function ComponentsPanel({ className }: ComponentsPanelProps) {
     e.dataTransfer.effectAllowed = "copy";
   };
 
+  // 컴포넌트 카드 렌더링 함수
+  const renderComponentCard = (component: ComponentDefinition) => (
+    <div
+      key={component.id}
+      draggable
+      onDragStart={(e) => {
+        handleDragStart(e, component);
+        e.currentTarget.style.opacity = "0.6";
+        e.currentTarget.style.transform = "rotate(2deg) scale(0.98)";
+      }}
+      onDragEnd={(e) => {
+        e.currentTarget.style.opacity = "1";
+        e.currentTarget.style.transform = "none";
+      }}
+      className="group cursor-grab rounded-lg border border-gray-200/40 bg-white/90 p-4 shadow-sm backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:scale-[1.02] hover:border-purple-300/60 hover:bg-white hover:shadow-lg hover:shadow-purple-500/15 active:translate-y-0 active:scale-[0.98] active:cursor-grabbing"
+    >
+      <div className="flex items-start space-x-3">
+        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-100 text-purple-700 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:shadow-lg">
+          {getCategoryIcon(component.category)}
+        </div>
+        <div className="min-w-0 flex-1">
+          <h4 className="mb-1 text-sm leading-tight font-semibold text-gray-900">{component.name}</h4>
+          <p className="mb-2 line-clamp-2 text-xs leading-relaxed text-gray-500">{component.description}</p>
+          <div className="flex items-center space-x-2 text-xs text-gray-400">
+            <span className="rounded-full bg-purple-100 px-2 py-0.5 font-medium text-purple-700">
+              {component.defaultSize.width}×{component.defaultSize.height}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  // 빈 상태 렌더링
+  const renderEmptyState = () => (
+    <div className="flex h-32 items-center justify-center text-center text-gray-500">
+      <div className="p-8">
+        <Package className="mx-auto mb-3 h-12 w-12 text-gray-300" />
+        <p className="text-muted-foreground text-sm font-medium">컴포넌트를 찾을 수 없습니다</p>
+        <p className="mt-1 text-xs text-gray-400">검색어를 조정해보세요</p>
+      </div>
+    </div>
+  );
+
   return (
-    <div className={`flex h-full flex-col bg-slate-50 p-6 border-r border-gray-200/60 shadow-sm ${className}`}>
+    <div className={`flex h-full flex-col border-r border-gray-200/60 bg-slate-50 p-6 shadow-sm ${className}`}>
       {/* 헤더 */}
-      <div className="mb-6">
-        <h2 className="text-lg font-semibold text-gray-900 mb-1">컴포넌트</h2>
-        <p className="text-sm text-gray-500">7개의 사용 가능한 컴포넌트</p>
+      <div className="mb-4">
+        <h2 className="mb-1 text-lg font-semibold text-gray-900">컴포넌트</h2>
+        <p className="text-sm text-gray-500">{allComponents.length}개의 사용 가능한 컴포넌트</p>
       </div>
 
       {/* 검색 */}
-      <div className="space-y-4">
+      <div className="mb-4">
         <div className="relative">
           <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
           <Input
             placeholder="컴포넌트 검색..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-10 border-0 bg-white/80 backdrop-blur-sm shadow-sm focus:bg-white transition-colors"
+            className="border-0 bg-white/80 pl-10 shadow-sm backdrop-blur-sm transition-colors focus:bg-white"
           />
         </div>
+      </div>
 
-        {/* 카테고리 필터 */}
-        <div className="flex flex-wrap gap-2">
-          <Button
-            variant={selectedCategory === "all" ? "default" : "outline"}
-            size="sm"
-            onClick={() => setSelectedCategory("all")}
-            className="flex items-center space-x-1.5 h-8 px-3 text-xs font-medium rounded-full transition-all"
-          >
-            <Package className="h-3 w-3" />
-            <span>전체</span>
-          </Button>
-          <Button
-            variant={selectedCategory === "display" ? "default" : "outline"}
-            size="sm"
-            onClick={() => setSelectedCategory("display")}
-            className="flex items-center space-x-1.5 h-8 px-3 text-xs font-medium rounded-full transition-all"
-          >
-            <Palette className="h-3 w-3" />
-            <span>표시</span>
-          </Button>
-          <Button
-            variant={selectedCategory === "action" ? "default" : "outline"}
-            size="sm"
-            onClick={() => setSelectedCategory("action")}
-            className="flex items-center space-x-1.5 h-8 px-3 text-xs font-medium rounded-full transition-all"
-          >
+      {/* 카테고리 탭 */}
+      <Tabs defaultValue="input" className="flex flex-1 flex-col">
+        <TabsList className="mb-4 grid w-full grid-cols-4 bg-white/80 p-1">
+          <TabsTrigger value="input" className="flex items-center gap-1 text-xs">
+            <Edit3 className="h-3 w-3" />
+            입력
+          </TabsTrigger>
+          <TabsTrigger value="action" className="flex items-center gap-1 text-xs">
             <Zap className="h-3 w-3" />
-            <span>액션</span>
-          </Button>
-          <Button
-            variant={selectedCategory === "layout" ? "default" : "outline"}
-            size="sm"
-            onClick={() => setSelectedCategory("layout")}
-            className="flex items-center space-x-1.5 h-8 px-3 text-xs font-medium rounded-full transition-all"
-          >
+            액션
+          </TabsTrigger>
+          <TabsTrigger value="display" className="flex items-center gap-1 text-xs">
+            <BarChart3 className="h-3 w-3" />
+            표시
+          </TabsTrigger>
+          <TabsTrigger value="layout" className="flex items-center gap-1 text-xs">
             <Layers className="h-3 w-3" />
-            <span>레이아웃</span>
-          </Button>
-          <Button
-            variant={selectedCategory === "utility" ? "default" : "outline"}
-            size="sm"
-            onClick={() => setSelectedCategory("utility")}
-            className="flex items-center space-x-1.5 h-8 px-3 text-xs font-medium rounded-full transition-all"
-          >
-            <Package className="h-3 w-3" />
-            <span>유틸리티</span>
-          </Button>
-        </div>
-      </div>
+            레이아웃
+          </TabsTrigger>
+        </TabsList>
 
-      {/* 컴포넌트 목록 */}
-      <div className="flex-1 space-y-3 overflow-y-auto mt-6">
-        {filteredComponents.length > 0 ? (
-          filteredComponents.map((component) => (
-            <div
-              key={component.id}
-              draggable
-              onDragStart={(e) => {
-                handleDragStart(e, component);
-                // 드래그 시작 시 시각적 피드백
-                e.currentTarget.style.opacity = '0.6';
-                e.currentTarget.style.transform = 'rotate(2deg) scale(0.98)';
-              }}
-              onDragEnd={(e) => {
-                // 드래그 종료 시 원래 상태로 복원
-                e.currentTarget.style.opacity = '1';
-                e.currentTarget.style.transform = 'none';
-              }}
-              className="group cursor-grab rounded-lg border border-gray-200/40 bg-white/90 backdrop-blur-sm p-6 shadow-sm transition-all duration-300 hover:bg-white hover:shadow-lg hover:shadow-purple-500/15 hover:scale-[1.02] hover:border-purple-300/60 hover:-translate-y-1 active:cursor-grabbing active:scale-[0.98] active:translate-y-0"
-            >
-              <div className="flex items-start space-x-4">
-                <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-purple-100 text-purple-700 shadow-md group-hover:shadow-lg group-hover:scale-110 transition-all duration-300">
-                  {getCategoryIcon(component.category)}
-                </div>
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-start justify-between mb-2">
-                    <h4 className="font-semibold text-gray-900 text-sm leading-tight">{component.name}</h4>
-                    <Badge variant="secondary" className="text-xs bg-purple-50 text-purple-600 border-0 ml-2 px-2 py-1 rounded-full font-medium">
-                      신규
-                    </Badge>
-                  </div>
-                  <p className="text-xs text-gray-500 line-clamp-2 leading-relaxed mb-3">{component.description}</p>
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center space-x-2 text-xs text-gray-400">
-                      <span className="bg-purple-100 px-3 py-1 rounded-full font-medium text-purple-700 shadow-sm">
-                        {component.defaultSize.width}×{component.defaultSize.height}
-                      </span>
-                    </div>
-                    <span className="text-xs font-medium text-primary capitalize bg-gradient-to-r from-purple-50 to-indigo-50 px-3 py-1 rounded-full border border-primary/20/50">
-                      {component.category}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          ))
-        ) : (
-          <div className="flex h-32 items-center justify-center text-center text-gray-500">
-            <div className="p-8">
-              <Package className="mx-auto mb-3 h-12 w-12 text-gray-300" />
-              <p className="text-sm font-medium text-muted-foreground">컴포넌트를 찾을 수 없습니다</p>
-              <p className="text-xs text-gray-400 mt-1">검색어나 필터를 조정해보세요</p>
-            </div>
-          </div>
-        )}
-      </div>
+        {/* 입력 컴포넌트 */}
+        <TabsContent value="input" className="mt-0 flex-1 space-y-3 overflow-y-auto">
+          {getFilteredComponents("input").length > 0
+            ? getFilteredComponents("input").map(renderComponentCard)
+            : renderEmptyState()}
+        </TabsContent>
+
+        {/* 액션 컴포넌트 */}
+        <TabsContent value="action" className="mt-0 flex-1 space-y-3 overflow-y-auto">
+          {getFilteredComponents("action").length > 0
+            ? getFilteredComponents("action").map(renderComponentCard)
+            : renderEmptyState()}
+        </TabsContent>
+
+        {/* 표시 컴포넌트 */}
+        <TabsContent value="display" className="mt-0 flex-1 space-y-3 overflow-y-auto">
+          {getFilteredComponents("display").length > 0
+            ? getFilteredComponents("display").map(renderComponentCard)
+            : renderEmptyState()}
+        </TabsContent>
+
+        {/* 레이아웃 컴포넌트 */}
+        <TabsContent value="layout" className="mt-0 flex-1 space-y-3 overflow-y-auto">
+          {getFilteredComponents("layout").length > 0
+            ? getFilteredComponents("layout").map(renderComponentCard)
+            : renderEmptyState()}
+        </TabsContent>
+      </Tabs>
 
       {/* 도움말 */}
-      <div className="rounded-xl bg-gradient-to-r from-purple-50 to-pink-50 border border-purple-100/60 p-4 mt-6">
+      <div className="mt-4 rounded-xl border border-purple-100/60 bg-gradient-to-r from-purple-50 to-pink-50 p-4">
         <div className="flex items-start space-x-3">
-          <MousePointer className="h-4 w-4 text-purple-600 flex-shrink-0 mt-0.5" />
+          <MousePointer className="mt-0.5 h-4 w-4 flex-shrink-0 text-purple-600" />
           <div className="flex-1">
-            <p className="text-xs text-gray-700 leading-relaxed">
+            <p className="text-xs leading-relaxed text-gray-700">
               컴포넌트를 <span className="font-semibold text-purple-700">드래그</span>하여 화면에 추가하세요
             </p>
           </div>
diff --git a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
index ef188fe1..e7877be6 100644
--- a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
+++ b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
@@ -546,10 +546,11 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
             config={selectedComponent.componentConfig || {}}
             screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName}
             tableColumns={currentTable?.columns || []}
+            tables={tables}
             onChange={(newConfig) => {
-              Object.entries(newConfig).forEach(([key, value]) => {
-                handleUpdate(`componentConfig.${key}`, value);
-              });
+              console.log("🔄 DynamicComponentConfigPanel onChange:", newConfig);
+              // 전체 componentConfig를 업데이트
+              handleUpdate("componentConfig", newConfig);
             }}
           />
 
@@ -624,10 +625,11 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
             config={widget.componentConfig || {}}
             screenTableName={widget.tableName || currentTable?.tableName || currentTableName}
             tableColumns={currentTable?.columns || []}
+            tables={tables}
             onChange={(newConfig) => {
-              Object.entries(newConfig).forEach(([key, value]) => {
-                handleUpdate(`componentConfig.${key}`, value);
-              });
+              console.log("🔄 DynamicComponentConfigPanel onChange (widget):", newConfig);
+              // 전체 componentConfig를 업데이트
+              handleUpdate("componentConfig", newConfig);
             }}
           />
         );
diff --git a/frontend/components/screen/toolbar/SlimToolbar.tsx b/frontend/components/screen/toolbar/SlimToolbar.tsx
index 3cc2bc20..9b8cd8a3 100644
--- a/frontend/components/screen/toolbar/SlimToolbar.tsx
+++ b/frontend/components/screen/toolbar/SlimToolbar.tsx
@@ -2,8 +2,7 @@
 
 import React from "react";
 import { Button } from "@/components/ui/button";
-import { Database, ArrowLeft, Undo, Redo, Play, Save, Monitor } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { Database, ArrowLeft, Save, Monitor } from "lucide-react";
 import { ScreenResolution } from "@/types/screen";
 
 interface SlimToolbarProps {
@@ -12,11 +11,6 @@ interface SlimToolbarProps {
   screenResolution?: ScreenResolution;
   onBack: () => void;
   onSave: () => void;
-  onUndo: () => void;
-  onRedo: () => void;
-  onPreview: () => void;
-  canUndo: boolean;
-  canRedo: boolean;
   isSaving?: boolean;
 }
 
@@ -26,11 +20,6 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
   screenResolution,
   onBack,
   onSave,
-  onUndo,
-  onRedo,
-  onPreview,
-  canUndo,
-  canRedo,
   isSaving = false,
 }) => {
   return (
@@ -71,37 +60,8 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
         )}
       </div>
 
-      {/* 우측: 액션 버튼들 */}
-      <div className="flex items-center space-x-2">
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={onUndo}
-          disabled={!canUndo}
-          className="flex items-center space-x-1"
-        >
-          <Undo className="h-4 w-4" />
-          <span className="hidden sm:inline">실행취소</span>
-        </Button>
-
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={onRedo}
-          disabled={!canRedo}
-          className="flex items-center space-x-1"
-        >
-          <Redo className="h-4 w-4" />
-          <span className="hidden sm:inline">다시실행</span>
-        </Button>
-
-        <div className="h-6 w-px bg-gray-300" />
-
-        <Button variant="outline" size="sm" onClick={onPreview} className="flex items-center space-x-2">
-          <Play className="h-4 w-4" />
-          <span>미리보기</span>
-        </Button>
-
+      {/* 우측: 저장 버튼 */}
+      <div className="flex items-center">
         <Button onClick={onSave} disabled={isSaving} className="flex items-center space-x-2">
           <Save className="h-4 w-4" />
           <span>{isSaving ? "저장 중..." : "저장"}</span>
diff --git a/frontend/lib/api/data.ts b/frontend/lib/api/data.ts
new file mode 100644
index 00000000..3f53db1f
--- /dev/null
+++ b/frontend/lib/api/data.ts
@@ -0,0 +1,108 @@
+import { apiClient } from "./client";
+
+/**
+ * 데이터 조회 API
+ */
+export const dataApi = {
+  /**
+   * 테이블 데이터 조회
+   * @param tableName 테이블명
+   * @param params 조회 파라미터 (검색, 페이징 등)
+   */
+  getTableData: async (
+    tableName: string,
+    params?: {
+      page?: number;
+      size?: number;
+      searchTerm?: string;
+      sortBy?: string;
+      sortOrder?: "asc" | "desc";
+      filters?: Record<string, any>;
+    },
+  ): Promise<{
+    data: any[];
+    total: number;
+    page: number;
+    size: number;
+    totalPages: number;
+  }> => {
+    const response = await apiClient.get(`/data/${tableName}`, { params });
+    const raw = response.data || {};
+    const items: any[] = (raw.data ?? raw.items ?? raw.rows ?? []) as any[];
+
+    const page = raw.page ?? params?.page ?? 1;
+    const size = raw.size ?? params?.size ?? items.length;
+    const total = raw.total ?? items.length;
+    const totalPages = raw.totalPages ?? Math.max(1, Math.ceil(total / (size || 1)));
+
+    return { data: items, total, page, size, totalPages };
+  },
+
+  /**
+   * 특정 레코드 상세 조회
+   * @param tableName 테이블명
+   * @param id 레코드 ID
+   */
+  getRecordDetail: async (tableName: string, id: string | number): Promise<any> => {
+    const response = await apiClient.get(`/data/${tableName}/${id}`);
+    return response.data?.data || response.data;
+  },
+
+  /**
+   * 조인된 데이터 조회
+   * @param leftTable 좌측 테이블명
+   * @param rightTable 우측 테이블명
+   * @param leftColumn 좌측 컬럼명
+   * @param rightColumn 우측 컬럼명 (외래키)
+   * @param leftValue 좌측 값 (필터링)
+   */
+  getJoinedData: async (
+    leftTable: string,
+    rightTable: string,
+    leftColumn: string,
+    rightColumn: string,
+    leftValue?: any,
+  ): Promise<any[]> => {
+    const response = await apiClient.get(`/data/join`, {
+      params: {
+        leftTable,
+        rightTable,
+        leftColumn,
+        rightColumn,
+        leftValue,
+      },
+    });
+    const raw = response.data || {};
+    return (raw.data ?? raw.items ?? raw.rows ?? []) as any[];
+  },
+
+  /**
+   * 레코드 생성
+   * @param tableName 테이블명
+   * @param data 레코드 데이터
+   */
+  createRecord: async (tableName: string, data: Record<string, any>): Promise<any> => {
+    const response = await apiClient.post(`/data/${tableName}`, data);
+    return response.data?.data || response.data;
+  },
+
+  /**
+   * 레코드 수정
+   * @param tableName 테이블명
+   * @param id 레코드 ID
+   * @param data 수정할 데이터
+   */
+  updateRecord: async (tableName: string, id: string | number, data: Record<string, any>): Promise<any> => {
+    const response = await apiClient.put(`/data/${tableName}/${id}`, data);
+    return response.data?.data || response.data;
+  },
+
+  /**
+   * 레코드 삭제
+   * @param tableName 테이블명
+   * @param id 레코드 ID
+   */
+  deleteRecord: async (tableName: string, id: string | number): Promise<void> => {
+    await apiClient.delete(`/data/${tableName}/${id}`);
+  },
+};
diff --git a/frontend/lib/registry/components/checkbox-basic/index.ts b/frontend/lib/registry/components/checkbox-basic/index.ts
index 8a09d02a..6f032cb1 100644
--- a/frontend/lib/registry/components/checkbox-basic/index.ts
+++ b/frontend/lib/registry/components/checkbox-basic/index.ts
@@ -17,7 +17,7 @@ export const CheckboxBasicDefinition = createComponentDefinition({
   name: "체크박스",
   nameEng: "CheckboxBasic Component",
   description: "체크 상태 선택을 위한 체크박스 컴포넌트",
-  category: ComponentCategory.INPUT,
+  category: ComponentCategory.FORM,
   webType: "checkbox",
   component: CheckboxBasicWrapper,
   defaultConfig: {
diff --git a/frontend/lib/registry/components/index.ts b/frontend/lib/registry/components/index.ts
index 80f690f3..343f428d 100644
--- a/frontend/lib/registry/components/index.ts
+++ b/frontend/lib/registry/components/index.ts
@@ -37,6 +37,7 @@ import "./divider-line/DividerLineRenderer";
 import "./accordion-basic/AccordionBasicRenderer";
 import "./table-list/TableListRenderer";
 import "./card-display/CardDisplayRenderer";
+import "./split-panel-layout/SplitPanelLayoutRenderer";
 
 /**
  * 컴포넌트 초기화 함수
diff --git a/frontend/lib/registry/components/radio-basic/index.ts b/frontend/lib/registry/components/radio-basic/index.ts
index 322ecab2..4b984a33 100644
--- a/frontend/lib/registry/components/radio-basic/index.ts
+++ b/frontend/lib/registry/components/radio-basic/index.ts
@@ -17,7 +17,7 @@ export const RadioBasicDefinition = createComponentDefinition({
   name: "라디오 버튼",
   nameEng: "RadioBasic Component",
   description: "단일 옵션 선택을 위한 라디오 버튼 그룹 컴포넌트",
-  category: ComponentCategory.INPUT,
+  category: ComponentCategory.FORM,
   webType: "radio",
   component: RadioBasicWrapper,
   defaultConfig: {
diff --git a/frontend/lib/registry/components/select-basic/index.ts b/frontend/lib/registry/components/select-basic/index.ts
index f391dda9..33052f26 100644
--- a/frontend/lib/registry/components/select-basic/index.ts
+++ b/frontend/lib/registry/components/select-basic/index.ts
@@ -17,7 +17,7 @@ export const SelectBasicDefinition = createComponentDefinition({
   name: "선택상자",
   nameEng: "SelectBasic Component",
   description: "옵션 선택을 위한 드롭다운 선택상자 컴포넌트",
-  category: ComponentCategory.INPUT,
+  category: ComponentCategory.FORM,
   webType: "select",
   component: SelectBasicWrapper,
   defaultConfig: {
diff --git a/frontend/lib/registry/components/slider-basic/index.ts b/frontend/lib/registry/components/slider-basic/index.ts
index dfbb2ccb..921d5de8 100644
--- a/frontend/lib/registry/components/slider-basic/index.ts
+++ b/frontend/lib/registry/components/slider-basic/index.ts
@@ -17,7 +17,7 @@ export const SliderBasicDefinition = createComponentDefinition({
   name: "슬라이더",
   nameEng: "SliderBasic Component",
   description: "범위 값 선택을 위한 슬라이더 컴포넌트",
-  category: ComponentCategory.INPUT,
+  category: ComponentCategory.FORM,
   webType: "number",
   component: SliderBasicWrapper,
   defaultConfig: {
diff --git a/frontend/lib/registry/components/split-panel-layout/README.md b/frontend/lib/registry/components/split-panel-layout/README.md
new file mode 100644
index 00000000..b1c2d813
--- /dev/null
+++ b/frontend/lib/registry/components/split-panel-layout/README.md
@@ -0,0 +1,80 @@
+# SplitPanelLayout 컴포넌트
+
+마스터-디테일 패턴의 좌우 분할 레이아웃 컴포넌트입니다.
+
+## 특징
+
+- 🔄 **마스터-디테일 패턴**: 좌측에서 항목 선택 시 우측에 상세 정보 표시
+- 📏 **크기 조절 가능**: 드래그하여 좌우 패널 크기 조정
+- 🔍 **검색 기능**: 각 패널에 독립적인 검색 기능
+- 🔗 **관계 설정**: JOIN, DETAIL, CUSTOM 관계 타입 지원
+- ⚙️ **유연한 설정**: 다양한 옵션으로 커스터마이징 가능
+
+## 사용 사례
+
+### 1. 코드 관리
+
+- 좌측: 코드 카테고리 목록
+- 우측: 선택된 카테고리의 코드 목록
+
+### 2. 테이블 조인 설정
+
+- 좌측: 기본 테이블 목록
+- 우측: 선택된 테이블의 조인 조건 설정
+
+### 3. 메뉴 관리
+
+- 좌측: 메뉴 트리 구조
+- 우측: 선택된 메뉴의 상세 설정
+
+## 설정 옵션
+
+### 좌측 패널 (leftPanel)
+
+- `title`: 패널 제목
+- `tableName`: 데이터베이스 테이블명
+- `showSearch`: 검색 기능 표시 여부
+- `showAdd`: 추가 버튼 표시 여부
+
+### 우측 패널 (rightPanel)
+
+- `title`: 패널 제목
+- `tableName`: 데이터베이스 테이블명
+- `showSearch`: 검색 기능 표시 여부
+- `showAdd`: 추가 버튼 표시 여부
+- `relation`: 좌측 항목과의 관계 설정
+  - `type`: "join" | "detail" | "custom"
+  - `foreignKey`: 외래키 컬럼명
+
+### 레이아웃 설정
+
+- `splitRatio`: 좌측 패널 너비 비율 (0-100, 기본 30)
+- `resizable`: 크기 조절 가능 여부 (기본 true)
+- `minLeftWidth`: 좌측 최소 너비 (기본 200px)
+- `minRightWidth`: 우측 최소 너비 (기본 300px)
+- `autoLoad`: 자동 데이터 로드 (기본 true)
+
+## 예시
+
+```typescript
+const config: SplitPanelLayoutConfig = {
+  leftPanel: {
+    title: "코드 카테고리",
+    tableName: "code_category",
+    showSearch: true,
+    showAdd: true,
+  },
+  rightPanel: {
+    title: "코드 목록",
+    tableName: "code_info",
+    showSearch: true,
+    showAdd: true,
+    relation: {
+      type: "detail",
+      foreignKey: "category_id",
+    },
+  },
+  splitRatio: 30,
+  resizable: true,
+};
+```
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
new file mode 100644
index 00000000..8d6f2926
--- /dev/null
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -0,0 +1,425 @@
+"use client";
+
+import React, { useState, useCallback, useEffect } from "react";
+import { ComponentRendererProps } from "../../types";
+import { SplitPanelLayoutConfig } from "./types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Plus, Search, GripVertical, Loader2 } from "lucide-react";
+import { dataApi } from "@/lib/api/data";
+import { useToast } from "@/hooks/use-toast";
+
+export interface SplitPanelLayoutComponentProps extends ComponentRendererProps {
+  // 추가 props
+}
+
+/**
+ * SplitPanelLayout 컴포넌트
+ * 마스터-디테일 패턴의 좌우 분할 레이아웃
+ */
+export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps> = ({
+  component,
+  isDesignMode = false,
+  isSelected = false,
+  onClick,
+  ...props
+}) => {
+  const componentConfig = (component.componentConfig || {}) as SplitPanelLayoutConfig;
+
+  // 기본 설정값
+  const splitRatio = componentConfig.splitRatio || 30;
+  const resizable = componentConfig.resizable ?? true;
+  const minLeftWidth = componentConfig.minLeftWidth || 200;
+  const minRightWidth = componentConfig.minRightWidth || 300;
+
+  // 데이터 상태
+  const [leftData, setLeftData] = useState<any[]>([]);
+  const [rightData, setRightData] = useState<any>(null);
+  const [selectedLeftItem, setSelectedLeftItem] = useState<any>(null);
+  const [leftSearchQuery, setLeftSearchQuery] = useState("");
+  const [rightSearchQuery, setRightSearchQuery] = useState("");
+  const [isLoadingLeft, setIsLoadingLeft] = useState(false);
+  const [isLoadingRight, setIsLoadingRight] = useState(false);
+  const { toast } = useToast();
+
+  // 리사이저 드래그 상태
+  const [isDragging, setIsDragging] = useState(false);
+  const [leftWidth, setLeftWidth] = useState(splitRatio);
+
+  // 컴포넌트 스타일
+  const componentStyle: React.CSSProperties = {
+    position: "absolute",
+    left: `${component.style?.positionX || 0}px`,
+    top: `${component.style?.positionY || 0}px`,
+    width: `${component.style?.width || 1000}px`,
+    height: `${component.style?.height || 600}px`,
+    zIndex: component.style?.positionZ || 1,
+    cursor: isDesignMode ? "pointer" : "default",
+    border: isSelected ? "2px solid #3b82f6" : "1px solid #e5e7eb",
+  };
+
+  // 좌측 데이터 로드
+  const loadLeftData = useCallback(async () => {
+    const leftTableName = componentConfig.leftPanel?.tableName;
+    if (!leftTableName || isDesignMode) return;
+
+    setIsLoadingLeft(true);
+    try {
+      const result = await dataApi.getTableData(leftTableName, {
+        page: 1,
+        size: 100,
+        searchTerm: leftSearchQuery || undefined,
+      });
+      setLeftData(result.data);
+    } catch (error) {
+      console.error("좌측 데이터 로드 실패:", error);
+      toast({
+        title: "데이터 로드 실패",
+        description: "좌측 패널 데이터를 불러올 수 없습니다.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoadingLeft(false);
+    }
+  }, [componentConfig.leftPanel?.tableName, leftSearchQuery, isDesignMode, toast]);
+
+  // 우측 데이터 로드
+  const loadRightData = useCallback(
+    async (leftItem: any) => {
+      const relationshipType = componentConfig.rightPanel?.relation?.type || "detail";
+      const rightTableName = componentConfig.rightPanel?.tableName;
+
+      if (!rightTableName || isDesignMode) return;
+
+      setIsLoadingRight(true);
+      try {
+        if (relationshipType === "detail") {
+          // 상세 모드: 동일 테이블의 상세 정보
+          const primaryKey = leftItem.id || leftItem.ID || Object.values(leftItem)[0];
+          const detail = await dataApi.getRecordDetail(rightTableName, primaryKey);
+          setRightData(detail);
+        } else if (relationshipType === "join") {
+          // 조인 모드: 다른 테이블의 관련 데이터
+          const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
+          const rightColumn = componentConfig.rightPanel?.relation?.foreignKey;
+          const leftTable = componentConfig.leftPanel?.tableName;
+
+          if (leftColumn && rightColumn && leftTable) {
+            const leftValue = leftItem[leftColumn];
+            const joinedData = await dataApi.getJoinedData(
+              leftTable,
+              rightTableName,
+              leftColumn,
+              rightColumn,
+              leftValue,
+            );
+            setRightData(joinedData[0] || null); // 첫 번째 관련 레코드
+          }
+        } else {
+          // 커스텀 모드: 상세 정보로 폴백
+          const primaryKey = leftItem.id || leftItem.ID || Object.values(leftItem)[0];
+          const detail = await dataApi.getRecordDetail(rightTableName, primaryKey);
+          setRightData(detail);
+        }
+      } catch (error) {
+        console.error("우측 데이터 로드 실패:", error);
+        toast({
+          title: "데이터 로드 실패",
+          description: "우측 패널 데이터를 불러올 수 없습니다.",
+          variant: "destructive",
+        });
+      } finally {
+        setIsLoadingRight(false);
+      }
+    },
+    [
+      componentConfig.rightPanel?.tableName,
+      componentConfig.rightPanel?.relation,
+      componentConfig.leftPanel?.tableName,
+      isDesignMode,
+      toast,
+    ],
+  );
+
+  // 좌측 항목 선택 핸들러
+  const handleLeftItemSelect = useCallback(
+    (item: any) => {
+      setSelectedLeftItem(item);
+      loadRightData(item);
+    },
+    [loadRightData],
+  );
+
+  // 초기 데이터 로드
+  useEffect(() => {
+    if (!isDesignMode && componentConfig.autoLoad !== false) {
+      loadLeftData();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDesignMode, componentConfig.autoLoad]);
+
+  // 검색어 변경 시 재로드
+  useEffect(() => {
+    if (!isDesignMode && leftSearchQuery) {
+      const timer = setTimeout(() => {
+        loadLeftData();
+      }, 300); // 디바운스
+      return () => clearTimeout(timer);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [leftSearchQuery, isDesignMode]);
+
+  // 리사이저 드래그 핸들러
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (!resizable) return;
+    setIsDragging(true);
+    e.preventDefault();
+  };
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging) return;
+      const containerWidth = (e.currentTarget as HTMLElement)?.offsetWidth || 1000;
+      const newLeftWidth = (e.clientX / containerWidth) * 100;
+
+      if (newLeftWidth > 20 && newLeftWidth < 80) {
+        setLeftWidth(newLeftWidth);
+      }
+    },
+    [isDragging],
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  React.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove as any);
+      document.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove as any);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+
+  return (
+    <div
+      style={componentStyle}
+      onClick={(e) => {
+        if (isDesignMode) {
+          e.stopPropagation();
+          onClick?.(e);
+        }
+      }}
+      className="flex overflow-hidden rounded-lg bg-white shadow-sm"
+    >
+      {/* 좌측 패널 */}
+      <div
+        style={{ width: `${leftWidth}%`, minWidth: `${minLeftWidth}px` }}
+        className="flex flex-col border-r border-gray-200"
+      >
+        <Card className="flex h-full flex-col border-0 shadow-none">
+          <CardHeader className="border-b border-gray-100 pb-3">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-base font-semibold">
+                {componentConfig.leftPanel?.title || "좌측 패널"}
+              </CardTitle>
+              {componentConfig.leftPanel?.showAdd && (
+                <Button size="sm" variant="outline">
+                  <Plus className="mr-1 h-4 w-4" />
+                  추가
+                </Button>
+              )}
+            </div>
+            {componentConfig.leftPanel?.showSearch && (
+              <div className="relative mt-2">
+                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                <Input
+                  placeholder="검색..."
+                  value={leftSearchQuery}
+                  onChange={(e) => setLeftSearchQuery(e.target.value)}
+                  className="pl-9"
+                />
+              </div>
+            )}
+          </CardHeader>
+          <CardContent className="flex-1 overflow-auto p-2">
+            {/* 좌측 데이터 목록 */}
+            <div className="space-y-1">
+              {isDesignMode ? (
+                // 디자인 모드: 샘플 데이터
+                <>
+                  <div
+                    onClick={() => handleLeftItemSelect({ id: 1, name: "항목 1" })}
+                    className={`cursor-pointer rounded-md p-3 transition-colors hover:bg-gray-50 ${
+                      selectedLeftItem?.id === 1 ? "bg-blue-50 text-blue-700" : "text-gray-700"
+                    }`}
+                  >
+                    <div className="font-medium">항목 1</div>
+                    <div className="text-xs text-gray-500">설명 텍스트</div>
+                  </div>
+                  <div
+                    onClick={() => handleLeftItemSelect({ id: 2, name: "항목 2" })}
+                    className={`cursor-pointer rounded-md p-3 transition-colors hover:bg-gray-50 ${
+                      selectedLeftItem?.id === 2 ? "bg-blue-50 text-blue-700" : "text-gray-700"
+                    }`}
+                  >
+                    <div className="font-medium">항목 2</div>
+                    <div className="text-xs text-gray-500">설명 텍스트</div>
+                  </div>
+                  <div
+                    onClick={() => handleLeftItemSelect({ id: 3, name: "항목 3" })}
+                    className={`cursor-pointer rounded-md p-3 transition-colors hover:bg-gray-50 ${
+                      selectedLeftItem?.id === 3 ? "bg-blue-50 text-blue-700" : "text-gray-700"
+                    }`}
+                  >
+                    <div className="font-medium">항목 3</div>
+                    <div className="text-xs text-gray-500">설명 텍스트</div>
+                  </div>
+                </>
+              ) : isLoadingLeft ? (
+                // 로딩 중
+                <div className="flex items-center justify-center py-8">
+                  <Loader2 className="h-6 w-6 animate-spin text-blue-500" />
+                  <span className="ml-2 text-sm text-gray-500">데이터를 불러오는 중...</span>
+                </div>
+              ) : leftData.length > 0 ? (
+                // 실제 데이터 표시
+                leftData.map((item, index) => {
+                  const itemId = item.id || item.ID || item[Object.keys(item)[0]] || index;
+                  const isSelected = selectedLeftItem && (selectedLeftItem.id === itemId || selectedLeftItem === item);
+                  // 첫 번째 2-3개 필드를 표시
+                  const keys = Object.keys(item).filter((k) => k !== "id" && k !== "ID");
+                  const displayTitle = item[keys[0]] || item.name || item.title || `항목 ${index + 1}`;
+                  const displaySubtitle = keys[1] ? item[keys[1]] : null;
+
+                  return (
+                    <div
+                      key={itemId}
+                      onClick={() => handleLeftItemSelect(item)}
+                      className={`cursor-pointer rounded-md p-3 transition-colors hover:bg-gray-50 ${
+                        isSelected ? "bg-blue-50 text-blue-700" : "text-gray-700"
+                      }`}
+                    >
+                      <div className="truncate font-medium">{displayTitle}</div>
+                      {displaySubtitle && <div className="truncate text-xs text-gray-500">{displaySubtitle}</div>}
+                    </div>
+                  );
+                })
+              ) : (
+                // 데이터 없음
+                <div className="py-8 text-center text-sm text-gray-500">데이터가 없습니다.</div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 리사이저 */}
+      {resizable && (
+        <div
+          onMouseDown={handleMouseDown}
+          className="group flex w-1 cursor-col-resize items-center justify-center bg-gray-200 transition-colors hover:bg-blue-400"
+        >
+          <GripVertical className="h-4 w-4 text-gray-400 group-hover:text-white" />
+        </div>
+      )}
+
+      {/* 우측 패널 */}
+      <div style={{ width: `${100 - leftWidth}%`, minWidth: `${minRightWidth}px` }} className="flex flex-col">
+        <Card className="flex h-full flex-col border-0 shadow-none">
+          <CardHeader className="border-b border-gray-100 pb-3">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-base font-semibold">
+                {componentConfig.rightPanel?.title || "우측 패널"}
+              </CardTitle>
+              {componentConfig.rightPanel?.showAdd && (
+                <Button size="sm" variant="outline">
+                  <Plus className="mr-1 h-4 w-4" />
+                  추가
+                </Button>
+              )}
+            </div>
+            {componentConfig.rightPanel?.showSearch && (
+              <div className="relative mt-2">
+                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                <Input
+                  placeholder="검색..."
+                  value={rightSearchQuery}
+                  onChange={(e) => setRightSearchQuery(e.target.value)}
+                  className="pl-9"
+                />
+              </div>
+            )}
+          </CardHeader>
+          <CardContent className="flex-1 overflow-auto p-4">
+            {/* 우측 상세 데이터 */}
+            {isLoadingRight ? (
+              // 로딩 중
+              <div className="flex h-full items-center justify-center">
+                <div className="text-center">
+                  <Loader2 className="mx-auto h-8 w-8 animate-spin text-blue-500" />
+                  <p className="mt-2 text-sm text-gray-500">상세 정보를 불러오는 중...</p>
+                </div>
+              </div>
+            ) : rightData ? (
+              // 실제 데이터 표시
+              <div className="space-y-2">
+                {Object.entries(rightData).map(([key, value]) => {
+                  // null, undefined, 빈 문자열 제외
+                  if (value === null || value === undefined || value === "") return null;
+
+                  return (
+                    <div key={key} className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
+                      <div className="mb-1 text-xs font-semibold tracking-wide text-gray-500 uppercase">{key}</div>
+                      <div className="text-sm text-gray-900">{String(value)}</div>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : selectedLeftItem && isDesignMode ? (
+              // 디자인 모드: 샘플 데이터
+              <div className="space-y-4">
+                <div className="rounded-lg border border-gray-200 p-4">
+                  <h3 className="mb-2 font-medium text-gray-900">{selectedLeftItem.name} 상세 정보</h3>
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">항목 1:</span>
+                      <span className="font-medium">값 1</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">항목 2:</span>
+                      <span className="font-medium">값 2</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">항목 3:</span>
+                      <span className="font-medium">값 3</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              // 선택 없음
+              <div className="flex h-full items-center justify-center">
+                <div className="text-center text-sm text-gray-500">
+                  <p className="mb-2">좌측에서 항목을 선택하세요</p>
+                  <p className="text-xs">선택한 항목의 상세 정보가 여기에 표시됩니다</p>
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * SplitPanelLayout 래퍼 컴포넌트
+ */
+export const SplitPanelLayoutWrapper: React.FC<SplitPanelLayoutComponentProps> = (props) => {
+  return <SplitPanelLayoutComponent {...props} />;
+};
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
new file mode 100644
index 00000000..e8f68244
--- /dev/null
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
@@ -0,0 +1,457 @@
+"use client";
+
+import React, { useState, useMemo, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Check, ChevronsUpDown, ArrowRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { SplitPanelLayoutConfig } from "./types";
+import { TableInfo } from "@/types/screen";
+
+interface SplitPanelLayoutConfigPanelProps {
+  config: SplitPanelLayoutConfig;
+  onChange: (config: SplitPanelLayoutConfig) => void;
+  tables?: TableInfo[]; // 전체 테이블 목록 (선택적)
+  screenTableName?: string; // 현재 화면의 테이블명 (좌측 패널에서 사용)
+}
+
+/**
+ * SplitPanelLayout 설정 패널
+ */
+export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelProps> = ({
+  config,
+  onChange,
+  tables = [], // 기본값 빈 배열
+  screenTableName, // 현재 화면의 테이블명
+}) => {
+  const [rightTableOpen, setRightTableOpen] = useState(false);
+  const [leftColumnOpen, setLeftColumnOpen] = useState(false);
+  const [rightColumnOpen, setRightColumnOpen] = useState(false);
+
+  // screenTableName이 변경되면 leftPanel.tableName 자동 업데이트
+  useEffect(() => {
+    if (screenTableName) {
+      // 좌측 패널 테이블명 업데이트
+      if (config.leftPanel?.tableName !== screenTableName) {
+        updateLeftPanel({ tableName: screenTableName });
+      }
+
+      // 관계 타입이 detail이면 우측 패널도 동일한 테이블 사용
+      const relationshipType = config.rightPanel?.relation?.type || "detail";
+      if (relationshipType === "detail" && config.rightPanel?.tableName !== screenTableName) {
+        updateRightPanel({ tableName: screenTableName });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [screenTableName]);
+
+  console.log("🔧 SplitPanelLayoutConfigPanel 렌더링");
+  console.log("  - config:", config);
+  console.log("  - tables:", tables);
+  console.log("  - tablesCount:", tables.length);
+  console.log("  - screenTableName:", screenTableName);
+  console.log("  - leftTable:", config.leftPanel?.tableName);
+  console.log("  - rightTable:", config.rightPanel?.tableName);
+
+  const updateConfig = (updates: Partial<SplitPanelLayoutConfig>) => {
+    const newConfig = { ...config, ...updates };
+    console.log("🔄 Config 업데이트:", newConfig);
+    onChange(newConfig);
+  };
+
+  const updateLeftPanel = (updates: Partial<SplitPanelLayoutConfig["leftPanel"]>) => {
+    const newConfig = {
+      ...config,
+      leftPanel: { ...config.leftPanel, ...updates },
+    };
+    console.log("🔄 Left Panel 업데이트:", newConfig);
+    onChange(newConfig);
+  };
+
+  const updateRightPanel = (updates: Partial<SplitPanelLayoutConfig["rightPanel"]>) => {
+    const newConfig = {
+      ...config,
+      rightPanel: { ...config.rightPanel, ...updates },
+    };
+    console.log("🔄 Right Panel 업데이트:", newConfig);
+    onChange(newConfig);
+  };
+
+  // 좌측 테이블은 현재 화면의 테이블 (screenTableName) 사용
+  const leftTableColumns = useMemo(() => {
+    const tableName = screenTableName || config.leftPanel?.tableName;
+    const table = tables.find((t) => t.tableName === tableName);
+    return table?.columns || [];
+  }, [tables, screenTableName, config.leftPanel?.tableName]);
+
+  // 우측 테이블의 컬럼 목록 가져오기
+  const rightTableColumns = useMemo(() => {
+    const table = tables.find((t) => t.tableName === config.rightPanel?.tableName);
+    return table?.columns || [];
+  }, [tables, config.rightPanel?.tableName]);
+
+  // 테이블 데이터 로딩 상태 확인
+  if (!tables || tables.length === 0) {
+    return (
+      <div className="rounded-lg border border-yellow-200 bg-yellow-50 p-4">
+        <p className="text-sm text-yellow-800">⚠️ 테이블 데이터를 불러올 수 없습니다.</p>
+        <p className="mt-1 text-xs text-yellow-600">
+          화면에 테이블이 연결되지 않았거나 테이블 목록이 로드되지 않았습니다.
+        </p>
+      </div>
+    );
+  }
+
+  // 관계 타입에 따라 우측 테이블을 자동으로 설정
+  const relationshipType = config.rightPanel?.relation?.type || "detail";
+
+  return (
+    <div className="space-y-6">
+      {/* 테이블 정보 표시 */}
+      <div className="rounded-lg bg-blue-50 p-3">
+        <p className="text-xs text-blue-600">📊 사용 가능한 테이블: {tables.length}개</p>
+      </div>
+
+      {/* 관계 타입 선택 (최상단) */}
+      <div className="space-y-3 rounded-lg border-2 border-indigo-200 bg-indigo-50 p-4">
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 text-white">
+            <span className="text-sm font-bold">1</span>
+          </div>
+          <h3 className="text-sm font-semibold text-indigo-900">패널 관계 타입 선택</h3>
+        </div>
+        <p className="text-xs text-indigo-700">좌측과 우측 패널 간의 데이터 관계를 선택하세요</p>
+        <Select
+          value={relationshipType}
+          onValueChange={(value: "join" | "detail" | "custom") => {
+            // 상세 모드로 변경 시 우측 테이블을 현재 화면 테이블로 설정
+            if (value === "detail" && screenTableName) {
+              updateRightPanel({
+                relation: { ...config.rightPanel?.relation, type: value },
+                tableName: screenTableName,
+              });
+            } else {
+              updateRightPanel({
+                relation: { ...config.rightPanel?.relation, type: value },
+              });
+            }
+          }}
+        >
+          <SelectTrigger className="bg-white">
+            <SelectValue placeholder="관계 타입 선택" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="detail">
+              <div className="flex flex-col">
+                <span className="font-medium">상세 (DETAIL)</span>
+                <span className="text-xs text-gray-500">좌측 목록 → 우측 상세 정보 (동일 테이블)</span>
+              </div>
+            </SelectItem>
+            <SelectItem value="join">
+              <div className="flex flex-col">
+                <span className="font-medium">조인 (JOIN)</span>
+                <span className="text-xs text-gray-500">좌측 테이블 → 우측 관련 테이블 (다른 테이블)</span>
+              </div>
+            </SelectItem>
+            <SelectItem value="custom">
+              <div className="flex flex-col">
+                <span className="font-medium">커스텀 (CUSTOM)</span>
+                <span className="text-xs text-gray-500">사용자 정의 관계</span>
+              </div>
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 좌측 패널 설정 (마스터) */}
+      <div className="space-y-4">
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 text-white">
+            <span className="text-sm font-bold">2</span>
+          </div>
+          <h3 className="text-sm font-semibold text-gray-900">좌측 패널 설정 (마스터)</h3>
+        </div>
+
+        <div className="space-y-2">
+          <Label>패널 제목</Label>
+          <Input
+            value={config.leftPanel?.title || ""}
+            onChange={(e) => updateLeftPanel({ title: e.target.value })}
+            placeholder="좌측 패널 제목"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label>테이블 (현재 화면)</Label>
+          <div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
+            <p className="text-sm font-medium text-gray-900">{screenTableName || "테이블이 지정되지 않음"}</p>
+            <p className="mt-1 text-xs text-gray-500">좌측 패널은 현재 화면의 테이블 데이터를 표시합니다</p>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <Label>검색 기능</Label>
+          <Switch
+            checked={config.leftPanel?.showSearch ?? true}
+            onCheckedChange={(checked) => updateLeftPanel({ showSearch: checked })}
+          />
+        </div>
+
+        <div className="flex items-center justify-between">
+          <Label>추가 버튼</Label>
+          <Switch
+            checked={config.leftPanel?.showAdd ?? false}
+            onCheckedChange={(checked) => updateLeftPanel({ showAdd: checked })}
+          />
+        </div>
+      </div>
+
+      {/* 우측 패널 설정 */}
+      <div className="space-y-4">
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-600 text-white">
+            <span className="text-sm font-bold">3</span>
+          </div>
+          <h3 className="text-sm font-semibold text-gray-900">
+            우측 패널 설정 ({relationshipType === "detail" ? "상세" : relationshipType === "join" ? "조인" : "커스텀"})
+          </h3>
+        </div>
+
+        <div className="space-y-2">
+          <Label>패널 제목</Label>
+          <Input
+            value={config.rightPanel?.title || ""}
+            onChange={(e) => updateRightPanel({ title: e.target.value })}
+            placeholder="우측 패널 제목"
+          />
+        </div>
+
+        {/* 관계 타입에 따라 테이블 선택 UI 변경 */}
+        {relationshipType === "detail" ? (
+          // 상세 모드: 좌측과 동일한 테이블 (비활성화)
+          <div className="space-y-2">
+            <Label>테이블 (좌측과 동일)</Label>
+            <div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
+              <p className="text-sm font-medium text-gray-900">{screenTableName || "테이블이 지정되지 않음"}</p>
+              <p className="mt-1 text-xs text-gray-500">상세 모드에서는 좌측과 동일한 테이블을 사용합니다</p>
+            </div>
+          </div>
+        ) : (
+          // 조인/커스텀 모드: 전체 테이블에서 선택 가능
+          <div className="space-y-2">
+            <Label>테이블 선택 (전체 테이블)</Label>
+            <Popover open={rightTableOpen} onOpenChange={setRightTableOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={rightTableOpen}
+                  className="w-full justify-between"
+                >
+                  {config.rightPanel?.tableName || "테이블을 선택하세요"}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-full p-0">
+                <Command>
+                  <CommandInput placeholder="테이블 검색..." />
+                  <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
+                  <CommandGroup className="max-h-[200px] overflow-auto">
+                    {tables.map((table) => (
+                      <CommandItem
+                        key={table.tableName}
+                        value={table.tableName}
+                        onSelect={(value) => {
+                          updateRightPanel({ tableName: value });
+                          setRightTableOpen(false);
+                        }}
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-4 w-4",
+                            config.rightPanel?.tableName === table.tableName ? "opacity-100" : "opacity-0",
+                          )}
+                        />
+                        {table.tableName}
+                        <span className="ml-2 text-xs text-gray-500">({table.tableLabel || ""})</span>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+        )}
+
+        {/* 컬럼 매핑 - 조인/커스텀 모드에서만 표시 */}
+        {relationshipType !== "detail" && (
+          <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
+            <Label className="text-sm font-semibold">컬럼 매핑 (외래키 관계)</Label>
+            <p className="text-xs text-gray-600">좌측 테이블의 컬럼을 우측 테이블의 컬럼과 연결합니다</p>
+
+            <div className="space-y-2">
+              <Label className="text-xs">좌측 컬럼</Label>
+              <Popover open={leftColumnOpen} onOpenChange={setLeftColumnOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={leftColumnOpen}
+                    className="w-full justify-between"
+                    disabled={!config.leftPanel?.tableName}
+                  >
+                    {config.rightPanel?.relation?.leftColumn || "좌측 컬럼 선택"}
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-full p-0">
+                  <Command>
+                    <CommandInput placeholder="컬럼 검색..." />
+                    <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandGroup className="max-h-[200px] overflow-auto">
+                      {leftTableColumns.map((column) => (
+                        <CommandItem
+                          key={column.columnName}
+                          value={column.columnName}
+                          onSelect={(value) => {
+                            updateRightPanel({
+                              relation: { ...config.rightPanel?.relation, leftColumn: value },
+                            });
+                            setLeftColumnOpen(false);
+                          }}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              config.rightPanel?.relation?.leftColumn === column.columnName
+                                ? "opacity-100"
+                                : "opacity-0",
+                            )}
+                          />
+                          {column.columnName}
+                          <span className="ml-2 text-xs text-gray-500">({column.columnLabel || ""})</span>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+
+            <div className="flex items-center justify-center">
+              <ArrowRight className="h-4 w-4 text-gray-400" />
+            </div>
+
+            <div className="space-y-2">
+              <Label className="text-xs">우측 컬럼 (외래키)</Label>
+              <Popover open={rightColumnOpen} onOpenChange={setRightColumnOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={rightColumnOpen}
+                    className="w-full justify-between"
+                    disabled={!config.rightPanel?.tableName}
+                  >
+                    {config.rightPanel?.relation?.foreignKey || "우측 컬럼 선택"}
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-full p-0">
+                  <Command>
+                    <CommandInput placeholder="컬럼 검색..." />
+                    <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandGroup className="max-h-[200px] overflow-auto">
+                      {rightTableColumns.map((column) => (
+                        <CommandItem
+                          key={column.columnName}
+                          value={column.columnName}
+                          onSelect={(value) => {
+                            updateRightPanel({
+                              relation: { ...config.rightPanel?.relation, foreignKey: value },
+                            });
+                            setRightColumnOpen(false);
+                          }}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              config.rightPanel?.relation?.foreignKey === column.columnName
+                                ? "opacity-100"
+                                : "opacity-0",
+                            )}
+                          />
+                          {column.columnName}
+                          <span className="ml-2 text-xs text-gray-500">({column.columnLabel || ""})</span>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+        )}
+
+        <div className="flex items-center justify-between">
+          <Label>검색 기능</Label>
+          <Switch
+            checked={config.rightPanel?.showSearch ?? true}
+            onCheckedChange={(checked) => updateRightPanel({ showSearch: checked })}
+          />
+        </div>
+
+        <div className="flex items-center justify-between">
+          <Label>추가 버튼</Label>
+          <Switch
+            checked={config.rightPanel?.showAdd ?? false}
+            onCheckedChange={(checked) => updateRightPanel({ showAdd: checked })}
+          />
+        </div>
+      </div>
+
+      {/* 레이아웃 설정 */}
+      <div className="space-y-4">
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-purple-600 text-white">
+            <span className="text-sm font-bold">4</span>
+          </div>
+          <h3 className="text-sm font-semibold text-gray-900">레이아웃 설정</h3>
+        </div>
+
+        <div className="space-y-2">
+          <Label>좌측 패널 너비: {config.splitRatio || 30}%</Label>
+          <Slider
+            value={[config.splitRatio || 30]}
+            onValueChange={(value) => updateConfig({ splitRatio: value[0] })}
+            min={20}
+            max={80}
+            step={5}
+          />
+        </div>
+
+        <div className="flex items-center justify-between">
+          <Label>크기 조절 가능</Label>
+          <Switch
+            checked={config.resizable ?? true}
+            onCheckedChange={(checked) => updateConfig({ resizable: checked })}
+          />
+        </div>
+
+        <div className="flex items-center justify-between">
+          <Label>자동 데이터 로드</Label>
+          <Switch
+            checked={config.autoLoad ?? true}
+            onCheckedChange={(checked) => updateConfig({ autoLoad: checked })}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutRenderer.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutRenderer.tsx
new file mode 100644
index 00000000..9daaa646
--- /dev/null
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutRenderer.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { SplitPanelLayoutDefinition } from "./index";
+import { SplitPanelLayoutComponent } from "./SplitPanelLayoutComponent";
+
+/**
+ * SplitPanelLayout 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class SplitPanelLayoutRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = SplitPanelLayoutDefinition;
+
+  render(): React.ReactElement {
+    return <SplitPanelLayoutComponent {...this.props} renderer={this} />;
+  }
+
+  /**
+   * 컴포넌트별 특화 메서드들
+   */
+
+  // 좌측 패널 데이터 로드
+  protected async loadLeftPanelData() {
+    // 좌측 패널 데이터 로드 로직
+  }
+
+  // 우측 패널 데이터 로드 (선택된 항목 기반)
+  protected async loadRightPanelData(selectedItem: any) {
+    // 우측 패널 데이터 로드 로직
+  }
+}
+
+// 자동 등록 실행
+SplitPanelLayoutRenderer.registerSelf();
+
+// Hot Reload 지원 (개발 모드)
+if (process.env.NODE_ENV === "development") {
+  SplitPanelLayoutRenderer.enableHotReload();
+}
diff --git a/frontend/lib/registry/components/split-panel-layout/config.ts b/frontend/lib/registry/components/split-panel-layout/config.ts
new file mode 100644
index 00000000..f0713351
--- /dev/null
+++ b/frontend/lib/registry/components/split-panel-layout/config.ts
@@ -0,0 +1,69 @@
+/**
+ * SplitPanelLayout 컴포넌트 설정
+ */
+
+export const splitPanelLayoutConfig = {
+  // 기본 스타일
+  defaultStyle: {
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    backgroundColor: "#ffffff",
+  },
+
+  // 프리셋 설정들
+  presets: {
+    codeManagement: {
+      name: "코드 관리",
+      leftPanel: {
+        title: "코드 카테고리",
+        showSearch: true,
+        showAdd: true,
+      },
+      rightPanel: {
+        title: "코드 목록",
+        showSearch: true,
+        showAdd: true,
+        relation: {
+          type: "detail",
+          foreignKey: "category_id",
+        },
+      },
+      splitRatio: 30,
+    },
+    tableJoin: {
+      name: "테이블 조인",
+      leftPanel: {
+        title: "기본 테이블",
+        showSearch: true,
+        showAdd: false,
+      },
+      rightPanel: {
+        title: "조인 조건",
+        showSearch: false,
+        showAdd: true,
+        relation: {
+          type: "join",
+        },
+      },
+      splitRatio: 35,
+    },
+    menuSettings: {
+      name: "메뉴 설정",
+      leftPanel: {
+        title: "메뉴 트리",
+        showSearch: true,
+        showAdd: true,
+      },
+      rightPanel: {
+        title: "메뉴 상세",
+        showSearch: false,
+        showAdd: false,
+        relation: {
+          type: "detail",
+          foreignKey: "menu_id",
+        },
+      },
+      splitRatio: 25,
+    },
+  },
+};
diff --git a/frontend/lib/registry/components/split-panel-layout/index.ts b/frontend/lib/registry/components/split-panel-layout/index.ts
new file mode 100644
index 00000000..10c6ee7d
--- /dev/null
+++ b/frontend/lib/registry/components/split-panel-layout/index.ts
@@ -0,0 +1,60 @@
+"use client";
+
+import React from "react";
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import { SplitPanelLayoutWrapper } from "./SplitPanelLayoutComponent";
+import { SplitPanelLayoutConfigPanel } from "./SplitPanelLayoutConfigPanel";
+import { SplitPanelLayoutConfig } from "./types";
+
+/**
+ * SplitPanelLayout 컴포넌트 정의
+ * 마스터-디테일 패턴의 좌우 분할 레이아웃
+ */
+export const SplitPanelLayoutDefinition = createComponentDefinition({
+  id: "split-panel-layout",
+  name: "분할 패널",
+  nameEng: "SplitPanelLayout Component",
+  description: "마스터-디테일 패턴의 좌우 분할 레이아웃 컴포넌트",
+  category: ComponentCategory.DISPLAY,
+  webType: "text",
+  component: SplitPanelLayoutWrapper,
+  defaultConfig: {
+    leftPanel: {
+      title: "마스터",
+      showSearch: true,
+      showAdd: false,
+    },
+    rightPanel: {
+      title: "디테일",
+      showSearch: true,
+      showAdd: false,
+      relation: {
+        type: "detail",
+        foreignKey: "parent_id",
+      },
+    },
+    splitRatio: 30,
+    resizable: true,
+    minLeftWidth: 200,
+    minRightWidth: 300,
+    autoLoad: true,
+    syncSelection: true,
+  } as SplitPanelLayoutConfig,
+  defaultSize: { width: 1000, height: 600 },
+  configPanel: SplitPanelLayoutConfigPanel,
+  icon: "PanelLeftRight",
+  tags: ["분할", "마스터", "디테일", "레이아웃"],
+  version: "1.0.0",
+  author: "개발팀",
+  documentation: "https://docs.example.com/components/split-panel-layout",
+});
+
+// 컴포넌트는 SplitPanelLayoutRenderer에서 자동 등록됩니다
+
+// 타입 내보내기
+export type { SplitPanelLayoutConfig } from "./types";
+
+// 컴포넌트 내보내기
+export { SplitPanelLayoutComponent } from "./SplitPanelLayoutComponent";
+export { SplitPanelLayoutRenderer } from "./SplitPanelLayoutRenderer";
diff --git a/frontend/lib/registry/components/split-panel-layout/types.ts b/frontend/lib/registry/components/split-panel-layout/types.ts
new file mode 100644
index 00000000..3236d169
--- /dev/null
+++ b/frontend/lib/registry/components/split-panel-layout/types.ts
@@ -0,0 +1,51 @@
+/**
+ * SplitPanelLayout 컴포넌트 타입 정의
+ */
+
+export interface SplitPanelLayoutConfig {
+  // 좌측 패널 설정
+  leftPanel: {
+    title: string;
+    tableName?: string; // 데이터베이스 테이블명
+    dataSource?: string; // API 엔드포인트
+    showSearch?: boolean;
+    showAdd?: boolean;
+    columns?: Array<{
+      name: string;
+      label: string;
+      width?: number;
+    }>;
+  };
+
+  // 우측 패널 설정
+  rightPanel: {
+    title: string;
+    tableName?: string;
+    dataSource?: string;
+    showSearch?: boolean;
+    showAdd?: boolean;
+    columns?: Array<{
+      name: string;
+      label: string;
+      width?: number;
+    }>;
+
+    // 좌측 선택 항목과의 관계 설정
+    relation?: {
+      type: "join" | "detail" | "custom"; // 관계 타입
+      leftColumn?: string; // 좌측 테이블의 연결 컬럼
+      foreignKey?: string; // 우측 테이블의 외래키 컬럼명
+      condition?: string; // 커스텀 조건
+    };
+  };
+
+  // 레이아웃 설정
+  splitRatio?: number; // 좌우 비율 (0-100, 기본 30)
+  resizable?: boolean; // 크기 조절 가능 여부
+  minLeftWidth?: number; // 좌측 최소 너비 (px)
+  minRightWidth?: number; // 우측 최소 너비 (px)
+
+  // 동작 설정
+  autoLoad?: boolean; // 자동 데이터 로드
+  syncSelection?: boolean; // 선택 항목 동기화
+}
diff --git a/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx b/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
index 721ddde2..dc4f15da 100644
--- a/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
+++ b/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
@@ -75,9 +75,9 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
     color: componentConfig.color || "#212121",
     textAlign: componentConfig.textAlign || "left",
     backgroundColor: componentConfig.backgroundColor || "transparent",
-    padding: componentConfig.padding || "8px 12px",
-    borderRadius: componentConfig.borderRadius || "8px",
-    border: componentConfig.border || "1px solid #e5e7eb",
+    padding: componentConfig.padding || "0",
+    borderRadius: componentConfig.borderRadius || "0",
+    border: componentConfig.border || "none",
     width: "100%",
     height: "100%",
     display: "flex",
@@ -91,7 +91,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
     wordBreak: "break-word",
     overflow: "hidden",
     transition: "all 0.2s ease-in-out",
-    boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    boxShadow: "none",
   };
 
   return (
diff --git a/frontend/lib/registry/components/toggle-switch/index.ts b/frontend/lib/registry/components/toggle-switch/index.ts
index 948a52b2..7d38a1ef 100644
--- a/frontend/lib/registry/components/toggle-switch/index.ts
+++ b/frontend/lib/registry/components/toggle-switch/index.ts
@@ -17,7 +17,7 @@ export const ToggleSwitchDefinition = createComponentDefinition({
   name: "토글 스위치",
   nameEng: "ToggleSwitch Component",
   description: "ON/OFF 상태 전환을 위한 토글 스위치 컴포넌트",
-  category: ComponentCategory.INPUT,
+  category: ComponentCategory.FORM,
   webType: "boolean",
   component: ToggleSwitchWrapper,
   defaultConfig: {
diff --git a/frontend/lib/utils/getComponentConfigPanel.tsx b/frontend/lib/utils/getComponentConfigPanel.tsx
index fa464377..dedffa7a 100644
--- a/frontend/lib/utils/getComponentConfigPanel.tsx
+++ b/frontend/lib/utils/getComponentConfigPanel.tsx
@@ -23,6 +23,7 @@ const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
   "accordion-basic": () => import("@/lib/registry/components/accordion-basic/AccordionBasicConfigPanel"),
   "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"),
 };
 
 // ConfigPanel 컴포넌트 캐시
@@ -101,6 +102,7 @@ export interface ComponentConfigPanelProps {
   onChange: (config: Record<string, any>) => void;
   screenTableName?: string; // 화면에서 지정한 테이블명
   tableColumns?: any[]; // 테이블 컬럼 정보
+  tables?: any[]; // 전체 테이블 목록
 }
 
 export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> = ({
@@ -109,9 +111,10 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
   onChange,
   screenTableName,
   tableColumns,
+  tables,
 }) => {
   console.log(`🔥 DynamicComponentConfigPanel 렌더링 시작: ${componentId}`);
-  
+
   const [ConfigPanelComponent, setConfigPanelComponent] = React.useState<React.ComponentType<any> | null>(null);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
@@ -187,18 +190,21 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
     ConfigPanelComponent: ConfigPanelComponent?.name,
     config,
     configType: typeof config,
-    configKeys: typeof config === 'object' ? Object.keys(config || {}) : 'not object',
+    configKeys: typeof config === "object" ? Object.keys(config || {}) : "not object",
     screenTableName,
-    tableColumns: Array.isArray(tableColumns) ? tableColumns.length : tableColumns
+    tableColumns: Array.isArray(tableColumns) ? tableColumns.length : tableColumns,
+    tables: Array.isArray(tables) ? tables.length : tables,
+    tablesType: typeof tables,
   });
 
   return (
     <ConfigPanelComponent
       config={config}
       onChange={onChange}
-      onConfigChange={onChange}  // TableListConfigPanel을 위한 추가 prop
+      onConfigChange={onChange} // TableListConfigPanel을 위한 추가 prop
       screenTableName={screenTableName}
       tableColumns={tableColumns}
+      tables={tables} // 전체 테이블 목록 전달
     />
   );
 };