diff --git a/backend-node/src/controllers/tableManagementController.ts b/backend-node/src/controllers/tableManagementController.ts
index c4c29503..8b1f859d 100644
--- a/backend-node/src/controllers/tableManagementController.ts
+++ b/backend-node/src/controllers/tableManagementController.ts
@@ -62,10 +62,10 @@ export async function getColumnList(
   try {
     const { tableName } = req.params;
     const { page = 1, size = 50 } = req.query;
-    
+
     // 🔥 회사 코드 추출 (JWT에서 또는 DB에서 조회)
     let companyCode = req.user?.companyCode;
-    
+
     if (!companyCode && req.user?.userId) {
       // JWT에 없으면 DB에서 조회
       const { query } = require("../database/db");
@@ -74,7 +74,9 @@ export async function getColumnList(
         [req.user.userId]
       );
       companyCode = userResult[0]?.company_code;
-      logger.info(`DB에서 회사 코드 조회 (컬럼 목록): ${req.user.userId} → ${companyCode}`);
+      logger.info(
+        `DB에서 회사 코드 조회 (컬럼 목록): ${req.user.userId} → ${companyCode}`
+      );
     }
 
     logger.info(
@@ -139,10 +141,10 @@ export async function updateColumnSettings(
   try {
     const { tableName, columnName } = req.params;
     const settings: ColumnSettings = req.body;
-    
+
     // 🔥 회사 코드 추출 (JWT에서 또는 DB에서 조회)
     let companyCode = req.user?.companyCode;
-    
+
     if (!companyCode && req.user?.userId) {
       // JWT에 없으면 DB에서 조회
       const { query } = require("../database/db");
@@ -154,7 +156,9 @@ export async function updateColumnSettings(
       logger.info(`DB에서 회사 코드 조회: ${req.user.userId} → ${companyCode}`);
     }
 
-    logger.info(`=== 컬럼 설정 업데이트 시작: ${tableName}.${columnName}, company: ${companyCode} ===`);
+    logger.info(
+      `=== 컬럼 설정 업데이트 시작: ${tableName}.${columnName}, company: ${companyCode} ===`
+    );
 
     if (!tableName || !columnName) {
       const response: ApiResponse<null> = {
@@ -194,7 +198,8 @@ export async function updateColumnSettings(
         message: "회사 코드를 찾을 수 없습니다.",
         error: {
           code: "MISSING_COMPANY_CODE",
-          details: "사용자 정보에서 회사 코드를 찾을 수 없습니다. 관리자에게 문의하세요.",
+          details:
+            "사용자 정보에서 회사 코드를 찾을 수 없습니다. 관리자에게 문의하세요.",
         },
       };
       res.status(400).json(response);
@@ -209,7 +214,9 @@ export async function updateColumnSettings(
       companyCode // 🔥 회사 코드 전달
     );
 
-    logger.info(`컬럼 설정 업데이트 완료: ${tableName}.${columnName}, company: ${companyCode}`);
+    logger.info(
+      `컬럼 설정 업데이트 완료: ${tableName}.${columnName}, company: ${companyCode}`
+    );
 
     const response: ApiResponse<null> = {
       success: true,
@@ -243,10 +250,10 @@ export async function updateAllColumnSettings(
   try {
     const { tableName } = req.params;
     const columnSettings: ColumnSettings[] = req.body;
-    
+
     // 🔥 회사 코드 추출 (JWT에서 또는 DB에서 조회)
     let companyCode = req.user?.companyCode;
-    
+
     if (!companyCode && req.user?.userId) {
       // JWT에 없으면 DB에서 조회
       const { query } = require("../database/db");
@@ -264,7 +271,9 @@ export async function updateAllColumnSettings(
     logger.info(`[DEBUG] req.user?.userId: ${req.user?.userId}`);
     logger.info(`[DEBUG] companyCode 최종값: ${companyCode}`);
 
-    logger.info(`=== 전체 컬럼 설정 일괄 업데이트 시작: ${tableName}, company: ${companyCode} ===`);
+    logger.info(
+      `=== 전체 컬럼 설정 일괄 업데이트 시작: ${tableName}, company: ${companyCode} ===`
+    );
 
     if (!tableName) {
       const response: ApiResponse<null> = {
@@ -305,7 +314,8 @@ export async function updateAllColumnSettings(
         message: "회사 코드를 찾을 수 없습니다.",
         error: {
           code: "MISSING_COMPANY_CODE",
-          details: "사용자 정보에서 회사 코드를 찾을 수 없습니다. 관리자에게 문의하세요.",
+          details:
+            "사용자 정보에서 회사 코드를 찾을 수 없습니다. 관리자에게 문의하세요.",
         },
       };
       res.status(400).json(response);
@@ -543,10 +553,10 @@ export async function updateColumnInputType(
   try {
     const { tableName, columnName } = req.params;
     const { inputType, detailSettings } = req.body;
-    
+
     // 🔥 회사 코드 추출 (JWT에서 또는 DB에서 조회)
     let companyCode = req.user?.companyCode;
-    
+
     if (!companyCode && req.user?.userId) {
       // JWT에 없으면 DB에서 조회
       const { query } = require("../database/db");
@@ -588,7 +598,8 @@ export async function updateColumnInputType(
         message: "회사 코드를 찾을 수 없습니다.",
         error: {
           code: "MISSING_COMPANY_CODE",
-          details: "사용자 정보에서 회사 코드를 찾을 수 없습니다. 관리자에게 문의하세요.",
+          details:
+            "사용자 정보에서 회사 코드를 찾을 수 없습니다. 관리자에게 문의하세요.",
         },
       };
       res.status(400).json(response);
@@ -1085,10 +1096,10 @@ export async function getColumnWebTypes(
 ): Promise<void> {
   try {
     const { tableName } = req.params;
-    
+
     // 🔥 회사 코드 추출 (JWT에서 또는 DB에서 조회)
     let companyCode = req.user?.companyCode;
-    
+
     if (!companyCode && req.user?.userId) {
       // JWT에 없으면 DB에서 조회
       const { query } = require("../database/db");
@@ -1097,7 +1108,9 @@ export async function getColumnWebTypes(
         [req.user.userId]
       );
       companyCode = userResult[0]?.company_code;
-      logger.info(`DB에서 회사 코드 조회 (조회): ${req.user.userId} → ${companyCode}`);
+      logger.info(
+        `DB에서 회사 코드 조회 (조회): ${req.user.userId} → ${companyCode}`
+      );
     }
 
     logger.info(
@@ -1129,7 +1142,8 @@ export async function getColumnWebTypes(
         message: "회사 코드를 찾을 수 없습니다.",
         error: {
           code: "MISSING_COMPANY_CODE",
-          details: "사용자 정보에서 회사 코드를 찾을 수 없습니다. 관리자에게 문의하세요.",
+          details:
+            "사용자 정보에서 회사 코드를 찾을 수 없습니다. 관리자에게 문의하세요.",
         },
       };
       res.status(400).json(response);
diff --git a/backend-node/src/routes/dataRoutes.ts b/backend-node/src/routes/dataRoutes.ts
index fb0f1518..7d1f0a88 100644
--- a/backend-node/src/routes/dataRoutes.ts
+++ b/backend-node/src/routes/dataRoutes.ts
@@ -51,21 +51,26 @@ router.get(
         }
       }
 
+      // 회사 코드 추출 (멀티테넌시 필터링)
+      const userCompany = req.user?.companyCode;
+
       console.log(`🔗 조인 데이터 조회:`, {
         leftTable,
         rightTable,
         leftColumn,
         rightColumn,
         leftValue,
+        userCompany,
       });
 
-      // 조인 데이터 조회
+      // 조인 데이터 조회 (회사 코드 전달)
       const result = await dataService.getJoinedData(
         leftTable as string,
         rightTable as string,
         leftColumn as string,
         rightColumn as string,
-        leftValue as string
+        leftValue as string,
+        userCompany
       );
 
       if (!result.success) {
@@ -352,8 +357,25 @@ router.post(
 
       console.log(`➕ 레코드 생성: ${tableName}`, data);
 
+      // company_code와 company_name 자동 추가 (멀티테넌시)
+      const enrichedData = { ...data };
+      
+      // 테이블에 company_code 컬럼이 있는지 확인하고 자동으로 추가
+      const hasCompanyCode = await dataService.checkColumnExists(tableName, "company_code");
+      if (hasCompanyCode && req.user?.companyCode) {
+        enrichedData.company_code = req.user.companyCode;
+        console.log(`🏢 company_code 자동 추가: ${req.user.companyCode}`);
+      }
+      
+      // 테이블에 company_name 컬럼이 있는지 확인하고 자동으로 추가
+      const hasCompanyName = await dataService.checkColumnExists(tableName, "company_name");
+      if (hasCompanyName && req.user?.companyName) {
+        enrichedData.company_name = req.user.companyName;
+        console.log(`🏢 company_name 자동 추가: ${req.user.companyName}`);
+      }
+
       // 레코드 생성
-      const result = await dataService.createRecord(tableName, data);
+      const result = await dataService.createRecord(tableName, enrichedData);
 
       if (!result.success) {
         return res.status(400).json(result);
@@ -437,6 +459,58 @@ router.put(
  * 레코드 삭제 API
  * DELETE /api/data/{tableName}/{id}
  */
+/**
+ * 복합키 레코드 삭제 API (POST)
+ * POST /api/data/:tableName/delete
+ * Body: { user_id: 'xxx', dept_code: 'yyy' }
+ */
+router.post(
+  "/:tableName/delete",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res) => {
+    try {
+      const { tableName } = req.params;
+      const compositeKey = 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}`, compositeKey);
+
+      // 레코드 삭제 (복합키 객체 전달)
+      const result = await dataService.deleteRecord(tableName, compositeKey);
+
+      if (!result.success) {
+        return res.status(400).json(result);
+      }
+
+      console.log(`✅ 레코드 삭제 성공: ${tableName}`);
+      return res.json(result);
+    } catch (error: any) {
+      console.error(`레코드 삭제 오류 (${req.params.tableName}):`, error);
+      return res.status(500).json({
+        success: false,
+        message: "레코드 삭제 중 오류가 발생했습니다.",
+        error: error.message,
+      });
+    }
+  }
+);
+
 router.delete(
   "/:tableName/:id",
   authenticateToken,
diff --git a/backend-node/src/services/authService.ts b/backend-node/src/services/authService.ts
index 7c4f4c8d..11e34576 100644
--- a/backend-node/src/services/authService.ts
+++ b/backend-node/src/services/authService.ts
@@ -165,12 +165,13 @@ export class AuthService {
       const authNames = authResult.map((row) => row.auth_name).join(",");
 
       // 3. 회사 정보 조회 (Raw Query 전환)
-      // Note: 현재 회사 정보는 PersonBean에 직접 사용되지 않지만 향후 확장을 위해 유지
       const companyResult = await query<{ company_name: string }>(
         "SELECT company_name FROM company_mng WHERE company_code = $1",
         [userInfo.company_code || "ILSHIN"]
       );
 
+      const companyName = companyResult.length > 0 ? companyResult[0].company_name : undefined;
+
       // DB에서 조회한 원본 사용자 정보 상세 로그
       //console.log("🔍 AuthService - DB 원본 사용자 정보:", {
       //  userId: userInfo.user_id,
@@ -205,6 +206,7 @@ export class AuthService {
         partnerObjid: userInfo.partner_objid || undefined,
         authName: authNames || undefined,
         companyCode: companyCode,
+        companyName: companyName, // 회사명 추가
         photo: userInfo.photo
           ? `data:image/jpeg;base64,${Buffer.from(userInfo.photo).toString("base64")}`
           : undefined,
diff --git a/backend-node/src/services/dataService.ts b/backend-node/src/services/dataService.ts
index 462ebb4d..0cf7ad6b 100644
--- a/backend-node/src/services/dataService.ts
+++ b/backend-node/src/services/dataService.ts
@@ -231,6 +231,9 @@ class DataService {
 
       const columns = await this.getTableColumnsSimple(tableName);
 
+      // PK 컬럼 정보 조회
+      const pkColumns = await this.getPrimaryKeyColumns(tableName);
+
       // 컬럼 라벨 정보 추가
       const columnsWithLabels = await Promise.all(
         columns.map(async (column) => {
@@ -244,6 +247,7 @@ class DataService {
             dataType: column.data_type,
             isNullable: column.is_nullable === "YES",
             defaultValue: column.column_default,
+            isPrimaryKey: pkColumns.includes(column.column_name), // PK 여부 추가
           };
         })
       );
@@ -262,6 +266,26 @@ class DataService {
     }
   }
 
+  /**
+   * 테이블의 Primary Key 컬럼 목록 조회
+   */
+  private async getPrimaryKeyColumns(tableName: string): Promise<string[]> {
+    try {
+      const result = 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]
+      );
+
+      return result.map((row) => row.attname);
+    } catch (error) {
+      console.error(`PK 컬럼 조회 오류 (${tableName}):`, error);
+      return [];
+    }
+  }
+
   /**
    * 테이블 존재 여부 확인
    */
@@ -286,7 +310,7 @@ class DataService {
   /**
    * 특정 컬럼 존재 여부 확인
    */
-  private async checkColumnExists(
+  async checkColumnExists(
     tableName: string,
     columnName: string
   ): Promise<boolean> {
@@ -409,7 +433,8 @@ class DataService {
     rightTable: string,
     leftColumn: string,
     rightColumn: string,
-    leftValue?: string | number
+    leftValue?: string | number,
+    userCompany?: string
   ): Promise<ServiceResponse<any[]>> {
     try {
       // 왼쪽 테이블 접근 검증
@@ -425,18 +450,42 @@ class DataService {
       }
 
       let queryText = `
-        SELECT r.* 
+        SELECT DISTINCT r.* 
         FROM "${rightTable}" r
         INNER JOIN "${leftTable}" l 
         ON l."${leftColumn}" = r."${rightColumn}"
       `;
 
       const values: any[] = [];
+      const whereConditions: string[] = [];
+      let paramIndex = 1;
+
+      // 좌측 값 필터링
       if (leftValue !== undefined && leftValue !== null) {
-        queryText += ` WHERE l."${leftColumn}" = $1`;
+        whereConditions.push(`l."${leftColumn}" = $${paramIndex}`);
         values.push(leftValue);
+        paramIndex++;
       }
 
+      // 우측 테이블 회사별 필터링 (company_code 컬럼이 있는 경우)
+      if (userCompany && userCompany !== "*") {
+        const hasCompanyCode = await this.checkColumnExists(rightTable, "company_code");
+        if (hasCompanyCode) {
+          whereConditions.push(`r.company_code = $${paramIndex}`);
+          values.push(userCompany);
+          paramIndex++;
+          console.log(`🏢 우측 패널 회사별 필터링 적용: ${rightTable}.company_code = ${userCompany}`);
+        }
+      }
+
+      // WHERE 절 추가
+      if (whereConditions.length > 0) {
+        queryText += ` WHERE ${whereConditions.join(" AND ")}`;
+      }
+
+      console.log("🔍 조인 쿼리 실행:", queryText);
+      console.log("📊 조인 쿼리 파라미터:", values);
+
       const result = await query<any>(queryText, values);
 
       return {
@@ -512,6 +561,11 @@ class DataService {
         return validation.error!;
       }
 
+      // _relationInfo 추출 (조인 관계 업데이트용)
+      const relationInfo = data._relationInfo;
+      const cleanData = { ...data };
+      delete cleanData._relationInfo;
+
       // Primary Key 컬럼 찾기
       const pkResult = await query<{ attname: string }>(
         `SELECT a.attname
@@ -526,8 +580,8 @@ class DataService {
         pkColumn = pkResult[0].attname;
       }
 
-      const columns = Object.keys(data);
-      const values = Object.values(data);
+      const columns = Object.keys(cleanData);
+      const values = Object.values(cleanData);
       const setClause = columns
         .map((col, index) => `"${col}" = $${index + 1}`)
         .join(", ");
@@ -550,6 +604,35 @@ class DataService {
         };
       }
 
+      // 🔗 조인 관계가 있는 경우, 연결된 테이블의 FK도 업데이트
+      if (relationInfo && relationInfo.rightTable && relationInfo.leftColumn && relationInfo.rightColumn) {
+        const { rightTable, leftColumn, rightColumn, oldLeftValue } = relationInfo;
+        const newLeftValue = cleanData[leftColumn];
+
+        // leftColumn 값이 변경된 경우에만 우측 테이블 업데이트
+        if (newLeftValue !== undefined && newLeftValue !== oldLeftValue) {
+          console.log("🔗 조인 관계 FK 업데이트:", {
+            rightTable,
+            rightColumn,
+            oldValue: oldLeftValue,
+            newValue: newLeftValue,
+          });
+
+          try {
+            const updateRelatedQuery = `
+              UPDATE "${rightTable}"
+              SET "${rightColumn}" = $1
+              WHERE "${rightColumn}" = $2
+            `;
+            const updateResult = await query(updateRelatedQuery, [newLeftValue, oldLeftValue]);
+            console.log(`✅ 연결된 ${rightTable} 테이블의 ${updateResult.length}개 레코드 업데이트 완료`);
+          } catch (relError) {
+            console.error("❌ 연결된 테이블 업데이트 실패:", relError);
+            // 연결된 테이블 업데이트 실패 시 롤백은 하지 않고 경고만 로그
+          }
+        }
+      }
+
       return {
         success: true,
         data: result[0],
@@ -569,7 +652,7 @@ class DataService {
    */
   async deleteRecord(
     tableName: string,
-    id: string | number
+    id: string | number | Record<string, any>
   ): Promise<ServiceResponse<void>> {
     try {
       // 테이블 접근 검증
@@ -578,28 +661,53 @@ class DataService {
         return validation.error!;
       }
 
-      // Primary Key 컬럼 찾기
+      // 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`,
+         WHERE i.indrelid = $1::regclass AND i.indisprimary
+         ORDER BY a.attnum`,
         [tableName]
       );
 
-      let pkColumn = "id";
-      if (pkResult.length > 0) {
-        pkColumn = pkResult[0].attname;
+      let whereClauses: string[] = [];
+      let params: any[] = [];
+
+      if (pkResult.length > 1) {
+        // 복합키인 경우: id가 객체여야 함
+        console.log(`🔑 복합키 테이블: ${tableName}, PK: [${pkResult.map(r => r.attname).join(', ')}]`);
+        
+        if (typeof id === 'object' && !Array.isArray(id)) {
+          // id가 객체인 경우: { user_id: 'xxx', dept_code: 'yyy' }
+          pkResult.forEach((pk, index) => {
+            whereClauses.push(`"${pk.attname}" = $${index + 1}`);
+            params.push(id[pk.attname]);
+          });
+        } else {
+          // id가 문자열/숫자인 경우: 첫 번째 PK만 사용 (하위 호환성)
+          whereClauses.push(`"${pkResult[0].attname}" = $1`);
+          params.push(id);
+        }
+      } else {
+        // 단일키인 경우
+        const pkColumn = pkResult.length > 0 ? pkResult[0].attname : "id";
+        whereClauses.push(`"${pkColumn}" = $1`);
+        params.push(typeof id === 'object' ? id[pkColumn] : id);
       }
 
-      const queryText = `DELETE FROM "${tableName}" WHERE "${pkColumn}" = $1`;
-      await query<any>(queryText, [id]);
+      const queryText = `DELETE FROM "${tableName}" WHERE ${whereClauses.join(' AND ')}`;
+      console.log(`🗑️ 삭제 쿼리:`, queryText, params);
+      
+      const result = await query<any>(queryText, params);
+      
+      console.log(`✅ 레코드 삭제 완료: ${tableName}, 영향받은 행: ${result.length}`);
 
       return {
         success: true,
       };
     } catch (error) {
-      console.error(`레코드 삭제 오류 (${tableName}/${id}):`, error);
+      console.error(`레코드 삭제 오류 (${tableName}):`, error);
       return {
         success: false,
         message: "레코드 삭제 중 오류가 발생했습니다.",
diff --git a/backend-node/src/types/auth.ts b/backend-node/src/types/auth.ts
index 35a2c0f5..6abd1e39 100644
--- a/backend-node/src/types/auth.ts
+++ b/backend-node/src/types/auth.ts
@@ -61,6 +61,7 @@ export interface PersonBean {
   partnerObjid?: string;
   authName?: string;
   companyCode?: string;
+  companyName?: string; // 회사명 추가
   photo?: string;
   locale?: string;
   // 권한 레벨 정보 (3단계 체계)
@@ -94,6 +95,7 @@ export interface JwtPayload {
   userName: string;
   deptName?: string;
   companyCode?: string;
+  companyName?: string; // 회사명 추가
   userType?: string;
   userTypeName?: string;
   iat?: number;
diff --git a/backend-node/src/utils/jwtUtils.ts b/backend-node/src/utils/jwtUtils.ts
index f65781fc..44f75cbc 100644
--- a/backend-node/src/utils/jwtUtils.ts
+++ b/backend-node/src/utils/jwtUtils.ts
@@ -17,6 +17,7 @@ export class JwtUtils {
         userName: userInfo.userName,
         deptName: userInfo.deptName,
         companyCode: userInfo.companyCode,
+        companyName: userInfo.companyName, // 회사명 추가
         userType: userInfo.userType,
         userTypeName: userInfo.userTypeName,
       };
@@ -45,6 +46,7 @@ export class JwtUtils {
         userName: decoded.userName,
         deptName: decoded.deptName,
         companyCode: decoded.companyCode,
+        companyName: decoded.companyName, // 회사명 추가
         userType: decoded.userType,
         userTypeName: decoded.userTypeName,
       };
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 4401bb12..6823e2d5 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -183,6 +183,15 @@ body {
   background: hsl(var(--background));
 }
 
+/* Button 기본 커서 스타일 */
+button {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
+}
+
 /* ===== Dialog/Modal Overlay ===== */
 /* Radix UI Dialog Overlay - 60% 불투명도 배경 */
 [data-radix-dialog-overlay],
diff --git a/frontend/lib/api/data.ts b/frontend/lib/api/data.ts
index 3f53db1f..208308ff 100644
--- a/frontend/lib/api/data.ts
+++ b/frontend/lib/api/data.ts
@@ -83,7 +83,7 @@ export const dataApi = {
    */
   createRecord: async (tableName: string, data: Record<string, any>): Promise<any> => {
     const response = await apiClient.post(`/data/${tableName}`, data);
-    return response.data?.data || response.data;
+    return response.data; // success, data, message 포함된 전체 응답 반환
   },
 
   /**
@@ -94,15 +94,23 @@ export const dataApi = {
    */
   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;
+    return response.data; // success, data, message 포함된 전체 응답 반환
   },
 
   /**
    * 레코드 삭제
    * @param tableName 테이블명
-   * @param id 레코드 ID
+   * @param id 레코드 ID 또는 복합키 객체
    */
-  deleteRecord: async (tableName: string, id: string | number): Promise<void> => {
-    await apiClient.delete(`/data/${tableName}/${id}`);
+  deleteRecord: async (tableName: string, id: string | number | Record<string, any>): Promise<any> => {
+    // 복합키 객체인 경우 POST로 전달
+    if (typeof id === 'object' && !Array.isArray(id)) {
+      const response = await apiClient.post(`/data/${tableName}/delete`, id);
+      return response.data;
+    }
+    
+    // 단일 ID인 경우 기존 방식
+    const response = await apiClient.delete(`/data/${tableName}/${id}`);
+    return response.data; // success, message 포함된 전체 응답 반환
   },
 };
diff --git a/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx b/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
index f5eefe3c..8dda7864 100644
--- a/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
+++ b/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
@@ -771,7 +771,17 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
           return;
         }
 
-        console.log("🖼️ 대표 이미지 로드 시작:", file.realFileName);
+        // objid가 없거나 유효하지 않으면 로드 중단
+        if (!file.objid || file.objid === "0" || file.objid === "") {
+          console.warn("⚠️ 대표 이미지 로드 실패: objid가 없음", file);
+          setRepresentativeImageUrl(null);
+          return;
+        }
+
+        console.log("🖼️ 대표 이미지 로드 시작:", {
+          objid: file.objid,
+          fileName: file.realFileName,
+        });
 
         // API 클라이언트를 통해 Blob으로 다운로드 (인증 토큰 포함)
         const response = await apiClient.get(`/files/download/${file.objid}`, {
@@ -792,8 +802,12 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
 
         setRepresentativeImageUrl(url);
         console.log("✅ 대표 이미지 로드 성공:", url);
-      } catch (error) {
-        console.error("❌ 대표 이미지 로드 실패:", error);
+      } catch (error: any) {
+        console.error("❌ 대표 이미지 로드 실패:", {
+          file: file.realFileName,
+          objid: file.objid,
+          error: error?.response?.status || error?.message,
+        });
         setRepresentativeImageUrl(null);
       }
     },
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
index 3da7ce27..dff4ee3a 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -6,10 +6,12 @@ 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, ChevronDown, ChevronUp } from "lucide-react";
+import { Plus, Search, GripVertical, Loader2, ChevronDown, ChevronUp, Save, ChevronRight, Pencil, Trash2 } from "lucide-react";
 import { dataApi } from "@/lib/api/data";
 import { useToast } from "@/hooks/use-toast";
 import { tableTypeApi } from "@/lib/api/screen";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
 
 export interface SplitPanelLayoutComponentProps extends ComponentRendererProps {
   // 추가 props
@@ -45,8 +47,25 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const [isLoadingLeft, setIsLoadingLeft] = useState(false);
   const [isLoadingRight, setIsLoadingRight] = useState(false);
   const [rightTableColumns, setRightTableColumns] = useState<any[]>([]); // 우측 테이블 컬럼 정보
+  const [expandedItems, setExpandedItems] = useState<Set<any>>(new Set()); // 펼쳐진 항목들
   const { toast } = useToast();
 
+  // 추가 모달 상태
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [addModalPanel, setAddModalPanel] = useState<"left" | "right" | "left-item" | null>(null);
+  const [addModalFormData, setAddModalFormData] = useState<Record<string, any>>({});
+  
+  // 수정 모달 상태
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [editModalPanel, setEditModalPanel] = useState<"left" | "right" | null>(null);
+  const [editModalItem, setEditModalItem] = useState<any>(null);
+  const [editModalFormData, setEditModalFormData] = useState<Record<string, any>>({});
+  
+  // 삭제 확인 모달 상태
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [deleteModalPanel, setDeleteModalPanel] = useState<"left" | "right" | null>(null);
+  const [deleteModalItem, setDeleteModalItem] = useState<any>(null);
+
   // 리사이저 드래그 상태
   const [isDragging, setIsDragging] = useState(false);
   const [leftWidth, setLeftWidth] = useState(splitRatio);
@@ -81,6 +100,53 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         border: isSelected ? "2px solid #3b82f6" : "1px solid #e5e7eb",
       };
 
+  // 계층 구조 빌드 함수 (트리 구조 유지)
+  const buildHierarchy = useCallback((items: any[]): any[] => {
+    if (!items || items.length === 0) return [];
+    
+    const itemAddConfig = componentConfig.leftPanel?.itemAddConfig;
+    if (!itemAddConfig) return items.map(item => ({ ...item, children: [] })); // 계층 설정이 없으면 평면 목록
+    
+    const { sourceColumn, parentColumn } = itemAddConfig;
+    if (!sourceColumn || !parentColumn) return items.map(item => ({ ...item, children: [] }));
+
+    // ID를 키로 하는 맵 생성
+    const itemMap = new Map<any, any>();
+    const rootItems: any[] = [];
+
+    // 모든 항목을 맵에 추가하고 children 배열 초기화
+    items.forEach(item => {
+      const id = item[sourceColumn];
+      itemMap.set(id, { ...item, children: [], level: 0 });
+    });
+
+    // 부모-자식 관계 설정
+    items.forEach(item => {
+      const id = item[sourceColumn];
+      const parentId = item[parentColumn];
+      const currentItem = itemMap.get(id);
+
+      if (!currentItem) return;
+
+      if (!parentId || parentId === null || parentId === '') {
+        // 최상위 항목
+        rootItems.push(currentItem);
+      } else {
+        // 부모가 있는 항목
+        const parentItem = itemMap.get(parentId);
+        if (parentItem) {
+          currentItem.level = parentItem.level + 1;
+          parentItem.children.push(currentItem);
+        } else {
+          // 부모를 찾을 수 없으면 최상위로 처리
+          rootItems.push(currentItem);
+        }
+      }
+    });
+
+    return rootItems;
+  }, [componentConfig.leftPanel?.itemAddConfig]);
+
   // 좌측 데이터 로드
   const loadLeftData = useCallback(async () => {
     const leftTableName = componentConfig.leftPanel?.tableName;
@@ -93,7 +159,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         size: 100,
         // searchTerm 제거 - 클라이언트 사이드에서 필터링
       });
-      setLeftData(result.data);
+      
+      // 계층 구조 빌드
+      const hierarchicalData = buildHierarchy(result.data);
+      setLeftData(hierarchicalData);
     } catch (error) {
       console.error("좌측 데이터 로드 실패:", error);
       toast({
@@ -104,7 +173,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     } finally {
       setIsLoadingLeft(false);
     }
-  }, [componentConfig.leftPanel?.tableName, isDesignMode, toast]);
+  }, [componentConfig.leftPanel?.tableName, isDesignMode, toast, buildHierarchy]);
 
   // 우측 데이터 로드
   const loadRightData = useCallback(
@@ -208,6 +277,382 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     loadRightTableColumns();
   }, [componentConfig.rightPanel?.tableName, isDesignMode]);
 
+  // 항목 펼치기/접기 토글
+  const toggleExpand = useCallback((itemId: any) => {
+    setExpandedItems(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(itemId)) {
+        newSet.delete(itemId);
+      } else {
+        newSet.add(itemId);
+      }
+      return newSet;
+    });
+  }, []);
+
+  // 추가 버튼 핸들러
+  const handleAddClick = useCallback((panel: "left" | "right") => {
+    setAddModalPanel(panel);
+    setAddModalFormData({});
+    setShowAddModal(true);
+  }, []);
+
+  // 수정 버튼 핸들러
+  const handleEditClick = useCallback((panel: "left" | "right", item: any) => {
+    setEditModalPanel(panel);
+    setEditModalItem(item);
+    setEditModalFormData({ ...item });
+    setShowEditModal(true);
+  }, []);
+
+  // 수정 모달 저장
+  const handleEditModalSave = useCallback(async () => {
+    const tableName = editModalPanel === "left" 
+      ? componentConfig.leftPanel?.tableName 
+      : componentConfig.rightPanel?.tableName;
+    
+    const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || 'id';
+    const primaryKey = editModalItem[sourceColumn] || editModalItem.id || editModalItem.ID;
+
+    if (!tableName || !primaryKey) {
+      toast({
+        title: "수정 오류",
+        description: "테이블명 또는 Primary Key가 없습니다.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      console.log("📝 데이터 수정:", { tableName, primaryKey, data: editModalFormData });
+      
+      // 프론트엔드 전용 필드 제거 (children, level 등)
+      const cleanData = { ...editModalFormData };
+      delete cleanData.children;
+      delete cleanData.level;
+      
+      // 좌측 패널 수정 시, 조인 관계 정보 포함
+      let updatePayload: any = cleanData;
+      
+      if (editModalPanel === "left" && componentConfig.rightPanel?.relation?.type === "join") {
+        // 조인 관계가 있는 경우, 관계 정보를 페이로드에 추가
+        updatePayload._relationInfo = {
+          rightTable: componentConfig.rightPanel.tableName,
+          leftColumn: componentConfig.rightPanel.relation.leftColumn,
+          rightColumn: componentConfig.rightPanel.relation.rightColumn,
+          oldLeftValue: editModalItem[componentConfig.rightPanel.relation.leftColumn],
+        };
+        console.log("🔗 조인 관계 정보 추가:", updatePayload._relationInfo);
+      }
+      
+      const result = await dataApi.updateRecord(tableName, primaryKey, updatePayload);
+
+      if (result.success) {
+        toast({
+          title: "성공",
+          description: "데이터가 성공적으로 수정되었습니다.",
+        });
+        
+        // 모달 닫기
+        setShowEditModal(false);
+        setEditModalFormData({});
+        setEditModalItem(null);
+        
+        // 데이터 새로고침
+        if (editModalPanel === "left") {
+          loadLeftData();
+          // 우측 패널도 새로고침 (FK가 변경되었을 수 있음)
+          if (selectedLeftItem) {
+            loadRightData(selectedLeftItem);
+          }
+        } else if (editModalPanel === "right" && selectedLeftItem) {
+          loadRightData(selectedLeftItem);
+        }
+      } else {
+        toast({
+          title: "수정 실패",
+          description: result.message || "데이터 수정에 실패했습니다.",
+          variant: "destructive",
+        });
+      }
+    } catch (error: any) {
+      console.error("데이터 수정 오류:", error);
+      toast({
+        title: "오류",
+        description: error?.response?.data?.message || "데이터 수정 중 오류가 발생했습니다.",
+        variant: "destructive",
+      });
+    }
+  }, [editModalPanel, componentConfig, editModalItem, editModalFormData, toast, selectedLeftItem, loadLeftData, loadRightData]);
+
+  // 삭제 버튼 핸들러
+  const handleDeleteClick = useCallback((panel: "left" | "right", item: any) => {
+    setDeleteModalPanel(panel);
+    setDeleteModalItem(item);
+    setShowDeleteModal(true);
+  }, []);
+
+  // 삭제 확인
+  const handleDeleteConfirm = useCallback(async () => {
+    // 우측 패널 삭제 시 중계 테이블 확인
+    let tableName = deleteModalPanel === "left" 
+      ? componentConfig.leftPanel?.tableName 
+      : componentConfig.rightPanel?.tableName;
+    
+    // 우측 패널 + 중계 테이블 모드인 경우
+    if (deleteModalPanel === "right" && componentConfig.rightPanel?.addConfig?.targetTable) {
+      tableName = componentConfig.rightPanel.addConfig.targetTable;
+      console.log("🔗 중계 테이블 모드: 삭제 대상 테이블 =", tableName);
+    }
+    
+    const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || 'id';
+    let primaryKey: any = deleteModalItem[sourceColumn] || deleteModalItem.id || deleteModalItem.ID;
+
+    // 복합키 처리: deleteModalItem 전체를 전달 (백엔드에서 복합키 자동 처리)
+    if (deleteModalItem && typeof deleteModalItem === 'object') {
+      primaryKey = deleteModalItem;
+      console.log("🔑 복합키 가능성: 전체 객체 전달", primaryKey);
+    }
+
+    if (!tableName || !primaryKey) {
+      toast({
+        title: "삭제 오류",
+        description: "테이블명 또는 Primary Key가 없습니다.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      console.log("🗑️ 데이터 삭제:", { tableName, primaryKey });
+      
+      const result = await dataApi.deleteRecord(tableName, primaryKey);
+
+      if (result.success) {
+        toast({
+          title: "성공",
+          description: "데이터가 성공적으로 삭제되었습니다.",
+        });
+        
+        // 모달 닫기
+        setShowDeleteModal(false);
+        setDeleteModalItem(null);
+        
+        // 데이터 새로고침
+        if (deleteModalPanel === "left") {
+          loadLeftData();
+          // 삭제된 항목이 선택되어 있었으면 선택 해제
+          if (selectedLeftItem && selectedLeftItem[sourceColumn] === primaryKey) {
+            setSelectedLeftItem(null);
+            setRightData(null);
+          }
+        } else if (deleteModalPanel === "right" && selectedLeftItem) {
+          loadRightData(selectedLeftItem);
+        }
+      } else {
+        toast({
+          title: "삭제 실패",
+          description: result.message || "데이터 삭제에 실패했습니다.",
+          variant: "destructive",
+        });
+      }
+    } catch (error: any) {
+      console.error("데이터 삭제 오류:", error);
+      
+      // 외래키 제약조건 에러 처리
+      let errorMessage = "데이터 삭제 중 오류가 발생했습니다.";
+      if (error?.response?.data?.error?.includes("foreign key")) {
+        errorMessage = "이 데이터를 참조하는 다른 데이터가 있어 삭제할 수 없습니다.";
+      }
+      
+      toast({
+        title: "오류",
+        description: errorMessage,
+        variant: "destructive",
+      });
+    }
+  }, [deleteModalPanel, componentConfig, deleteModalItem, toast, selectedLeftItem, loadLeftData, loadRightData]);
+
+  // 항목별 추가 버튼 핸들러 (좌측 항목의 + 버튼 - 하위 항목 추가)
+  const handleItemAddClick = useCallback((item: any) => {
+    const itemAddConfig = componentConfig.leftPanel?.itemAddConfig;
+    
+    if (!itemAddConfig) {
+      toast({
+        title: "설정 오류",
+        description: "하위 항목 추가 설정이 없습니다.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const { sourceColumn, parentColumn } = itemAddConfig;
+    
+    if (!sourceColumn || !parentColumn) {
+      toast({
+        title: "설정 오류",
+        description: "현재 항목 ID 컬럼과 상위 항목 저장 컬럼을 설정해주세요.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    // 선택된 항목의 sourceColumn 값을 가져와서 parentColumn에 매핑
+    const sourceValue = item[sourceColumn];
+    
+    if (!sourceValue) {
+      toast({
+        title: "데이터 오류",
+        description: `선택한 항목의 ${sourceColumn} 값이 없습니다.`,
+        variant: "destructive",
+      });
+      return;
+    }
+
+    // 좌측 패널 추가 모달 열기 (parentColumn 값 미리 채우기)
+    setAddModalPanel("left-item");
+    setAddModalFormData({ [parentColumn]: sourceValue });
+    setShowAddModal(true);
+  }, [componentConfig, toast]);
+
+  // 추가 모달 저장
+  const handleAddModalSave = useCallback(async () => {
+    // 테이블명과 모달 컬럼 결정
+    let tableName: string | undefined;
+    let modalColumns: Array<{ name: string; label: string; required?: boolean }> | undefined;
+    let finalData = { ...addModalFormData };
+    
+    if (addModalPanel === "left") {
+      tableName = componentConfig.leftPanel?.tableName;
+      modalColumns = componentConfig.leftPanel?.addModalColumns;
+    } else if (addModalPanel === "right") {
+      // 우측 패널: 중계 테이블 설정이 있는지 확인
+      const addConfig = componentConfig.rightPanel?.addConfig;
+      
+      if (addConfig?.targetTable) {
+        // 중계 테이블 모드
+        tableName = addConfig.targetTable;
+        modalColumns = componentConfig.rightPanel?.addModalColumns;
+        
+        // 좌측 패널에서 선택된 값 자동 채우기
+        if (addConfig.leftPanelColumn && addConfig.targetColumn && selectedLeftItem) {
+          const leftValue = selectedLeftItem[addConfig.leftPanelColumn];
+          finalData[addConfig.targetColumn] = leftValue;
+          console.log(`🔗 좌측 패널 값 자동 채움: ${addConfig.targetColumn} = ${leftValue}`);
+        }
+        
+        // 자동 채움 컬럼 추가
+        if (addConfig.autoFillColumns) {
+          Object.entries(addConfig.autoFillColumns).forEach(([key, value]) => {
+            finalData[key] = value;
+          });
+          console.log("🔧 자동 채움 컬럼:", addConfig.autoFillColumns);
+        }
+      } else {
+        // 일반 테이블 모드
+        tableName = componentConfig.rightPanel?.tableName;
+        modalColumns = componentConfig.rightPanel?.addModalColumns;
+      }
+    } else if (addModalPanel === "left-item") {
+      // 하위 항목 추가 (좌측 테이블에 추가)
+      tableName = componentConfig.leftPanel?.tableName;
+      modalColumns = componentConfig.leftPanel?.itemAddConfig?.addModalColumns;
+    }
+
+    if (!tableName) {
+      toast({
+        title: "테이블 오류",
+        description: "테이블명이 설정되지 않았습니다.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    // 필수 필드 검증
+    const requiredFields = (modalColumns || []).filter(col => col.required);
+    for (const field of requiredFields) {
+      if (!addModalFormData[field.name]) {
+        toast({
+          title: "입력 오류",
+          description: `${field.label}은(는) 필수 입력 항목입니다.`,
+          variant: "destructive",
+        });
+        return;
+      }
+    }
+
+    try {
+      console.log("📝 데이터 추가:", { tableName, data: finalData });
+      
+      const result = await dataApi.createRecord(tableName, finalData);
+      
+      if (result.success) {
+        toast({
+          title: "성공",
+          description: "데이터가 성공적으로 추가되었습니다.",
+        });
+        
+        // 모달 닫기
+        setShowAddModal(false);
+        setAddModalFormData({});
+        
+        // 데이터 새로고침
+        if (addModalPanel === "left" || addModalPanel === "left-item") {
+          // 좌측 패널 데이터 새로고침 (일반 추가 또는 하위 항목 추가)
+          loadLeftData();
+        } else if (addModalPanel === "right" && selectedLeftItem) {
+          // 우측 패널 데이터 새로고침
+          loadRightData(selectedLeftItem);
+        }
+      } else {
+        toast({
+          title: "저장 실패",
+          description: result.message || "데이터 추가에 실패했습니다.",
+          variant: "destructive",
+        });
+      }
+    } catch (error: any) {
+      console.error("데이터 추가 오류:", error);
+      
+      // 에러 메시지 추출
+      let errorMessage = "데이터 추가 중 오류가 발생했습니다.";
+      
+      if (error?.response?.data) {
+        const responseData = error.response.data;
+        
+        // 백엔드에서 반환한 에러 메시지 확인
+        if (responseData.error) {
+          // 중복 키 에러 처리
+          if (responseData.error.includes("duplicate key")) {
+            errorMessage = "이미 존재하는 값입니다. 다른 값을 입력해주세요.";
+          } 
+          // NOT NULL 제약조건 에러
+          else if (responseData.error.includes("null value")) {
+            const match = responseData.error.match(/column "(\w+)"/);
+            const columnName = match ? match[1] : "필수";
+            errorMessage = `${columnName} 필드는 필수 입력 항목입니다.`;
+          }
+          // 외래키 제약조건 에러
+          else if (responseData.error.includes("foreign key")) {
+            errorMessage = "참조하는 데이터가 존재하지 않습니다.";
+          }
+          // 기타 에러
+          else {
+            errorMessage = responseData.message || responseData.error;
+          }
+        } else if (responseData.message) {
+          errorMessage = responseData.message;
+        }
+      }
+      
+      toast({
+        title: "오류",
+        description: errorMessage,
+        variant: "destructive",
+      });
+    }
+  }, [addModalPanel, componentConfig, addModalFormData, toast, selectedLeftItem, loadLeftData, loadRightData]);
+
   // 초기 데이터 로드
   useEffect(() => {
     if (!isDesignMode && componentConfig.autoLoad !== false) {
@@ -295,8 +740,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
               <CardTitle className="text-base font-semibold">
                 {componentConfig.leftPanel?.title || "좌측 패널"}
               </CardTitle>
-              {componentConfig.leftPanel?.showAdd && (
-                <Button size="sm" variant="outline">
+              {!isDesignMode && componentConfig.leftPanel?.showAdd && (
+                <Button 
+                  size="sm" 
+                  variant="outline"
+                  onClick={() => handleAddClick("left")}
+                >
                   <Plus className="mr-1 h-4 w-4" />
                   추가
                 </Button>
@@ -367,30 +816,156 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                       })
                     : leftData;
 
-                  return filteredLeftData.length > 0 ? (
-                    // 실제 데이터 표시
-                    filteredLeftData.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;
+                  // 재귀 렌더링 함수
+                  const renderTreeItem = (item: any, index: number): React.ReactNode => {
+                    const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || 'id';
+                    const itemId = item[sourceColumn] || item.id || item.ID || index;
+                    const isSelected = selectedLeftItem && (selectedLeftItem[sourceColumn] === itemId || selectedLeftItem === item);
+                    const hasChildren = item.children && item.children.length > 0;
+                    const isExpanded = expandedItems.has(itemId);
+                    const level = item.level || 0;
 
-                      return (
+                    // 조인에 사용하는 leftColumn을 필수로 표시
+                    const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
+                    let displayFields: { label: string; value: any }[] = [];
+
+                      // 디버그 로그
+                      if (index === 0) {
+                        console.log("🔍 좌측 패널 표시 로직:");
+                        console.log("  - leftColumn (조인 키):", leftColumn);
+                        console.log("  - item keys:", Object.keys(item));
+                      }
+
+                      if (leftColumn) {
+                        // 조인 모드: leftColumn 값을 첫 번째로 표시 (필수)
+                        displayFields.push({
+                          label: leftColumn,
+                          value: item[leftColumn],
+                        });
+
+                        // 추가로 다른 의미있는 필드 1-2개 표시 (name, title 등)
+                        const additionalKeys = Object.keys(item).filter(
+                          (k) => k !== "id" && k !== "ID" && k !== leftColumn && 
+                                 (k.includes("name") || k.includes("title") || k.includes("desc"))
+                        );
+                        
+                        if (additionalKeys.length > 0) {
+                          displayFields.push({
+                            label: additionalKeys[0],
+                            value: item[additionalKeys[0]],
+                          });
+                        }
+
+                        if (index === 0) {
+                          console.log("  ✅ 조인 키 기반 표시:", displayFields);
+                        }
+                      } else {
+                        // 상세 모드 또는 설정 없음: 자동으로 첫 2개 필드 표시
+                        const keys = Object.keys(item).filter((k) => k !== "id" && k !== "ID");
+                        displayFields = keys.slice(0, 2).map((key) => ({
+                          label: key,
+                          value: item[key],
+                        }));
+
+                        if (index === 0) {
+                          console.log("  ⚠️ 조인 키 없음, 자동 선택:", displayFields);
+                        }
+                      }
+
+                    const displayTitle = displayFields[0]?.value || item.name || item.title || `항목 ${index + 1}`;
+                    const displaySubtitle = displayFields[1]?.value || null;
+
+                    return (
+                      <React.Fragment key={itemId}>
+                        {/* 현재 항목 */}
                         <div
-                          key={itemId}
-                          onClick={() => handleLeftItemSelect(item)}
-                          className={`cursor-pointer rounded-md p-3 transition-colors hover:bg-muted ${
+                          className={`group relative cursor-pointer rounded-md p-3 transition-colors hover:bg-muted ${
                             isSelected ? "bg-primary/10 text-primary" : "text-foreground"
                           }`}
+                          style={{ paddingLeft: `${12 + level * 24}px` }}
                         >
-                          <div className="truncate font-medium">{displayTitle}</div>
-                          {displaySubtitle && <div className="truncate text-xs text-muted-foreground">{displaySubtitle}</div>}
+                          <div 
+                            className="flex items-center gap-2"
+                            onClick={() => {
+                              handleLeftItemSelect(item);
+                              if (hasChildren) {
+                                toggleExpand(itemId);
+                              }
+                            }}
+                          >
+                            {/* 펼치기/접기 아이콘 */}
+                            {hasChildren ? (
+                              <div className="flex-shrink-0">
+                                {isExpanded ? (
+                                  <ChevronDown className="h-4 w-4 text-gray-500" />
+                                ) : (
+                                  <ChevronRight className="h-4 w-4 text-gray-500" />
+                                )}
+                              </div>
+                            ) : (
+                              <div className="w-5" />
+                            )}
+                            
+                 {/* 항목 내용 */}
+                 <div className="flex-1 min-w-0">
+                   <div className="truncate font-medium">{displayTitle}</div>
+                   {displaySubtitle && <div className="truncate text-xs text-muted-foreground">{displaySubtitle}</div>}
+                 </div>
+                 
+                 {/* 항목별 버튼들 */}
+                 {!isDesignMode && (
+                   <div className="flex flex-shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+                     {/* 수정 버튼 */}
+                     <button
+                       onClick={(e) => {
+                         e.stopPropagation();
+                         handleEditClick("left", item);
+                       }}
+                       className="rounded p-1 hover:bg-gray-200 transition-colors"
+                       title="수정"
+                     >
+                       <Pencil className="h-4 w-4 text-gray-600" />
+                     </button>
+                     
+                     {/* 삭제 버튼 */}
+                     <button
+                       onClick={(e) => {
+                         e.stopPropagation();
+                         handleDeleteClick("left", item);
+                       }}
+                       className="rounded p-1 hover:bg-red-100 transition-colors"
+                       title="삭제"
+                     >
+                       <Trash2 className="h-4 w-4 text-red-600" />
+                     </button>
+                     
+                     {/* 항목별 추가 버튼 */}
+                     {componentConfig.leftPanel?.showItemAddButton && (
+                       <button
+                         onClick={(e) => {
+                           e.stopPropagation();
+                           handleItemAddClick(item);
+                         }}
+                         className="rounded p-1 hover:bg-gray-200 transition-colors"
+                         title="하위 항목 추가"
+                       >
+                         <Plus className="h-4 w-4 text-gray-600" />
+                       </button>
+                     )}
+                   </div>
+                 )}
+                          </div>
                         </div>
-                      );
-                    })
+                        
+                        {/* 자식 항목들 (접혀있으면 표시 안함) */}
+                        {hasChildren && isExpanded && item.children.map((child: any, childIndex: number) => renderTreeItem(child, childIndex))}
+                      </React.Fragment>
+                    );
+                  };
+
+                  return filteredLeftData.length > 0 ? (
+                    // 실제 데이터 표시
+                    filteredLeftData.map((item, index) => renderTreeItem(item, index))
                   ) : (
                     // 검색 결과 없음
                     <div className="py-8 text-center text-sm text-muted-foreground">
@@ -432,11 +1007,20 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
               <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>
+              {!isDesignMode && (
+                <div className="flex items-center gap-2">
+                  {componentConfig.rightPanel?.showAdd && (
+                    <Button 
+                      size="sm" 
+                      variant="outline"
+                      onClick={() => handleAddClick("right")}
+                    >
+                      <Plus className="mr-1 h-4 w-4" />
+                      추가
+                    </Button>
+                  )}
+                  {/* 우측 패널 수정/삭제는 각 카드에서 처리 */}
+                </div>
               )}
             </div>
             {componentConfig.rightPanel?.showSearch && (
@@ -488,25 +1072,59 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                       {filteredData.map((item, index) => {
                         const itemId = item.id || item.ID || index;
                         const isExpanded = expandedRightItems.has(itemId);
-                        const firstValues = Object.entries(item)
-                          .filter(([key]) => !key.toLowerCase().includes("id"))
-                          .slice(0, 3);
-                        const allValues = Object.entries(item).filter(
-                          ([key, value]) => value !== null && value !== undefined && value !== "",
-                        );
+                        
+                        // 우측 패널 표시 컬럼 설정 확인
+                        const rightColumns = componentConfig.rightPanel?.columns;
+                        let firstValues: [string, any][] = [];
+                        let allValues: [string, any][] = [];
+
+                        if (index === 0) {
+                          console.log("🔍 우측 패널 표시 로직:");
+                          console.log("  - rightColumns:", rightColumns);
+                          console.log("  - item keys:", Object.keys(item));
+                        }
+
+                        if (rightColumns && rightColumns.length > 0) {
+                          // 설정된 컬럼만 표시
+                          firstValues = rightColumns
+                            .slice(0, 3)
+                            .map((col) => [col.name, item[col.name]] as [string, any])
+                            .filter(([_, value]) => value !== null && value !== undefined && value !== "");
+                          
+                          allValues = rightColumns
+                            .map((col) => [col.name, item[col.name]] as [string, any])
+                            .filter(([_, value]) => value !== null && value !== undefined && value !== "");
+
+                          if (index === 0) {
+                            console.log("  ✅ 설정된 컬럼 사용:", rightColumns.map(c => c.name));
+                          }
+                        } else {
+                          // 설정 없으면 모든 컬럼 표시 (기존 로직)
+                          firstValues = Object.entries(item)
+                            .filter(([key]) => !key.toLowerCase().includes("id"))
+                            .slice(0, 3);
+                          
+                          allValues = Object.entries(item).filter(
+                            ([key, value]) => value !== null && value !== undefined && value !== "",
+                          );
+
+                          if (index === 0) {
+                            console.log("  ⚠️ 컬럼 설정 없음, 모든 컬럼 표시");
+                          }
+                        }
 
                         return (
                           <div
                             key={itemId}
                             className="bg-card overflow-hidden rounded-lg border shadow-sm transition-all hover:shadow-md"
                           >
-                            {/* 요약 정보 (클릭 가능) */}
-                            <div
-                              onClick={() => toggleRightItemExpansion(itemId)}
-                              className="cursor-pointer p-3 transition-colors hover:bg-muted"
-                            >
+                            {/* 요약 정보 */}
+                            <div className="p-3">
                               <div className="flex items-start justify-between gap-2">
-                                <div className="min-w-0 flex-1">
+                                <div 
+                                  className="min-w-0 flex-1 cursor-pointer"
+                                  onClick={() => toggleRightItemExpansion(itemId)}
+                                >
                                   {firstValues.map(([key, value], idx) => (
                                     <div key={key} className="mb-1 last:mb-0">
                                       <div className="text-xs font-medium text-muted-foreground">{getColumnLabel(key)}</div>
@@ -516,12 +1134,44 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                     </div>
                                   ))}
                                 </div>
-                                <div className="flex flex-shrink-0 items-start pt-1">
-                                  {isExpanded ? (
-                                    <ChevronUp className="h-5 w-5 text-muted-foreground" />
-                                  ) : (
-                                    <ChevronDown className="h-5 w-5 text-muted-foreground" />
+                                <div className="flex flex-shrink-0 items-start gap-1 pt-1">
+                                  {/* 수정 버튼 */}
+                                  {!isDesignMode && (
+                                    <button
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleEditClick("right", item);
+                                      }}
+                                      className="rounded p-1 hover:bg-gray-200 transition-colors"
+                                      title="수정"
+                                    >
+                                      <Pencil className="h-4 w-4 text-gray-600" />
+                                    </button>
                                   )}
+                                  {/* 삭제 버튼 */}
+                                  {!isDesignMode && (
+                                    <button
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleDeleteClick("right", item);
+                                      }}
+                                      className="rounded p-1 hover:bg-red-100 transition-colors"
+                                      title="삭제"
+                                    >
+                                      <Trash2 className="h-4 w-4 text-red-600" />
+                                    </button>
+                                  )}
+                                  {/* 확장/접기 버튼 */}
+                                  <button
+                                    onClick={() => toggleRightItemExpansion(itemId)}
+                                    className="rounded p-1 hover:bg-gray-200 transition-colors"
+                                  >
+                                    {isExpanded ? (
+                                      <ChevronUp className="h-5 w-5 text-muted-foreground" />
+                                    ) : (
+                                      <ChevronDown className="h-5 w-5 text-muted-foreground" />
+                                    )}
+                                  </button>
                                 </div>
                               </div>
                             </div>
@@ -565,21 +1215,39 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 })()
               ) : (
                 // 상세 모드: 단일 객체를 상세 정보로 표시
-                <div className="space-y-2">
-                  {Object.entries(rightData).map(([key, value]) => {
-                    // null, undefined, 빈 문자열 제외
-                    if (value === null || value === undefined || value === "") return null;
+                (() => {
+                  const rightColumns = componentConfig.rightPanel?.columns;
+                  let displayEntries: [string, any][] = [];
 
-                    return (
-                      <div key={key} className="bg-card rounded-lg border p-4 shadow-sm">
-                        <div className="text-muted-foreground mb-1 text-xs font-semibold tracking-wide uppercase">
-                          {key}
-                        </div>
-                        <div className="text-sm">{String(value)}</div>
-                      </div>
+                  if (rightColumns && rightColumns.length > 0) {
+                    // 설정된 컬럼만 표시
+                    displayEntries = rightColumns
+                      .map((col) => [col.name, rightData[col.name]] as [string, any])
+                      .filter(([_, value]) => value !== null && value !== undefined && value !== "");
+                    
+                    console.log("🔍 상세 모드 표시 로직:");
+                    console.log("  ✅ 설정된 컬럼 사용:", rightColumns.map(c => c.name));
+                  } else {
+                    // 설정 없으면 모든 컬럼 표시
+                    displayEntries = Object.entries(rightData).filter(
+                      ([_, value]) => value !== null && value !== undefined && value !== ""
                     );
-                  })}
-                </div>
+                    console.log("  ⚠️ 컬럼 설정 없음, 모든 컬럼 표시");
+                  }
+
+                  return (
+                    <div className="space-y-2">
+                      {displayEntries.map(([key, value]) => (
+                        <div key={key} className="bg-card rounded-lg border p-4 shadow-sm">
+                          <div className="text-muted-foreground mb-1 text-xs font-semibold tracking-wide uppercase">
+                            {getColumnLabel(key)}
+                          </div>
+                          <div className="text-sm">{String(value)}</div>
+                        </div>
+                      ))}
+                    </div>
+                  );
+                })()
               )
             ) : selectedLeftItem && isDesignMode ? (
               // 디자인 모드: 샘플 데이터
@@ -614,6 +1282,239 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           </CardContent>
         </Card>
       </div>
+
+      {/* 추가 모달 */}
+      <Dialog open={showAddModal} onOpenChange={setShowAddModal}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">
+              {addModalPanel === "left" 
+                ? `${componentConfig.leftPanel?.title} 추가`
+                : addModalPanel === "right"
+                ? `${componentConfig.rightPanel?.title} 추가`
+                : `하위 ${componentConfig.leftPanel?.title} 추가`}
+            </DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              {addModalPanel === "left-item" 
+                ? "선택한 항목의 하위 항목을 추가합니다. 필수 항목을 입력해주세요."
+                : "새로운 데이터를 추가합니다. 필수 항목을 입력해주세요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3 sm:space-y-4">
+            {(() => {
+              // 어떤 컬럼들을 표시할지 결정
+              let modalColumns: Array<{ name: string; label: string; required?: boolean }> | undefined;
+              
+              if (addModalPanel === "left") {
+                modalColumns = componentConfig.leftPanel?.addModalColumns;
+              } else if (addModalPanel === "right") {
+                modalColumns = componentConfig.rightPanel?.addModalColumns;
+              } else if (addModalPanel === "left-item") {
+                modalColumns = componentConfig.leftPanel?.itemAddConfig?.addModalColumns;
+              }
+              
+              return modalColumns?.map((col, index) => {
+              // 항목별 추가 버튼으로 열렸을 때, parentColumn은 미리 채워져 있고 수정 불가
+              const isPreFilled = addModalPanel === "left-item" 
+                && componentConfig.leftPanel?.itemAddConfig?.parentColumn === col.name 
+                && addModalFormData[col.name];
+              
+              return (
+                <div key={index}>
+                  <Label htmlFor={col.name} className="text-xs sm:text-sm">
+                    {col.label} {col.required && <span className="text-destructive">*</span>}
+                    {isPreFilled && <span className="ml-2 text-[10px] text-blue-600">(자동 설정됨)</span>}
+                  </Label>
+                  <Input
+                    id={col.name}
+                    value={addModalFormData[col.name] || ""}
+                    onChange={(e) => {
+                      setAddModalFormData(prev => ({
+                        ...prev,
+                        [col.name]: e.target.value
+                      }));
+                    }}
+                    placeholder={`${col.label} 입력`}
+                    className="h-8 text-xs sm:h-10 sm:text-sm"
+                    required={col.required}
+                    disabled={isPreFilled}
+                  />
+                </div>
+              );
+              });
+            })()}
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => setShowAddModal(false)}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              취소
+            </Button>
+            <Button
+              onClick={handleAddModalSave}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              <Save className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 수정 모달 */}
+      <Dialog open={showEditModal} onOpenChange={setShowEditModal}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">
+              {editModalPanel === "left" 
+                ? `${componentConfig.leftPanel?.title} 수정`
+                : `${componentConfig.rightPanel?.title} 수정`}
+            </DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              데이터를 수정합니다. 필요한 항목을 변경해주세요.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3 sm:space-y-4">
+            {editModalItem && (() => {
+              // 좌측 패널 수정: leftColumn만 수정 가능
+              if (editModalPanel === "left") {
+                const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
+                
+                // leftColumn만 표시
+                if (!leftColumn || editModalFormData[leftColumn] === undefined) {
+                  return <p className="text-sm text-muted-foreground">수정 가능한 컬럼이 없습니다.</p>;
+                }
+
+                return (
+                  <div>
+                    <Label htmlFor={`edit-${leftColumn}`} className="text-xs sm:text-sm">
+                      {leftColumn}
+                    </Label>
+                    <Input
+                      id={`edit-${leftColumn}`}
+                      value={editModalFormData[leftColumn] || ""}
+                      onChange={(e) => {
+                        setEditModalFormData(prev => ({
+                          ...prev,
+                          [leftColumn]: e.target.value
+                        }));
+                      }}
+                      placeholder={`${leftColumn} 입력`}
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                  </div>
+                );
+              }
+              
+              // 우측 패널 수정: 우측 패널에 설정된 표시 컬럼들만
+              if (editModalPanel === "right") {
+                const rightColumns = componentConfig.rightPanel?.columns;
+                
+                if (rightColumns && rightColumns.length > 0) {
+                  // 설정된 컬럼만 표시
+                  return rightColumns.map((col) => (
+                    <div key={col.name}>
+                      <Label htmlFor={`edit-${col.name}`} className="text-xs sm:text-sm">
+                        {col.label || col.name}
+                      </Label>
+                      <Input
+                        id={`edit-${col.name}`}
+                        value={editModalFormData[col.name] || ""}
+                        onChange={(e) => {
+                          setEditModalFormData(prev => ({
+                            ...prev,
+                            [col.name]: e.target.value
+                          }));
+                        }}
+                        placeholder={`${col.label || col.name} 입력`}
+                        className="h-8 text-xs sm:h-10 sm:text-sm"
+                      />
+                    </div>
+                  ));
+                } else {
+                  // 설정이 없으면 모든 컬럼 표시 (company_code, company_name 제외)
+                  return Object.entries(editModalFormData)
+                    .filter(([key]) => key !== 'company_code' && key !== 'company_name')
+                    .map(([key, value]) => (
+                      <div key={key}>
+                        <Label htmlFor={`edit-${key}`} className="text-xs sm:text-sm">
+                          {key}
+                        </Label>
+                        <Input
+                          id={`edit-${key}`}
+                          value={editModalFormData[key] || ""}
+                          onChange={(e) => {
+                            setEditModalFormData(prev => ({
+                              ...prev,
+                              [key]: e.target.value
+                            }));
+                          }}
+                          placeholder={`${key} 입력`}
+                          className="h-8 text-xs sm:h-10 sm:text-sm"
+                        />
+                      </div>
+                    ));
+                }
+              }
+              
+              return null;
+            })()}
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => setShowEditModal(false)}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              취소
+            </Button>
+            <Button
+              onClick={handleEditModalSave}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              <Save className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 삭제 확인 모달 */}
+      <Dialog open={showDeleteModal} onOpenChange={setShowDeleteModal}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">삭제 확인</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              정말로 이 데이터를 삭제하시겠습니까?
+              <br />이 작업은 되돌릴 수 없습니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => setShowDeleteModal(false)}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              취소
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteConfirm}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              <Trash2 className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
+              삭제
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 };
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
index d53d90e9..bce30f8f 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
@@ -9,7 +9,7 @@ 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 { Check, ChevronsUpDown, ArrowRight, Plus, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { SplitPanelLayoutConfig } from "./types";
 import { TableInfo, ColumnInfo } from "@/types/screen";
@@ -74,6 +74,61 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [screenTableName]);
 
+  // 좌측 패널 테이블 컬럼 로드 완료 시 PK 자동 추가
+  useEffect(() => {
+    const leftTableName = config.leftPanel?.tableName || screenTableName;
+    if (leftTableName && loadedTableColumns[leftTableName] && config.leftPanel?.showAdd) {
+      const currentAddModalColumns = config.leftPanel?.addModalColumns || [];
+      const updatedColumns = ensurePrimaryKeysInAddModal(leftTableName, currentAddModalColumns);
+      
+      // PK가 추가되었으면 업데이트
+      if (updatedColumns.length !== currentAddModalColumns.length) {
+        console.log(`🔄 좌측 패널: PK 컬럼 자동 추가 (${leftTableName})`);
+        updateLeftPanel({ addModalColumns: updatedColumns });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config.leftPanel?.tableName, screenTableName, loadedTableColumns, config.leftPanel?.showAdd]);
+
+  // 좌측 패널 하위 항목 추가 모달 PK 자동 추가
+  useEffect(() => {
+    const leftTableName = config.leftPanel?.tableName || screenTableName;
+    if (leftTableName && loadedTableColumns[leftTableName] && config.leftPanel?.showItemAddButton) {
+      const currentAddModalColumns = config.leftPanel?.itemAddConfig?.addModalColumns || [];
+      const updatedColumns = ensurePrimaryKeysInAddModal(leftTableName, currentAddModalColumns);
+      
+      // PK가 추가되었으면 업데이트
+      if (updatedColumns.length !== currentAddModalColumns.length) {
+        console.log(`🔄 좌측 패널 하위 항목 추가: PK 컬럼 자동 추가 (${leftTableName})`);
+        updateLeftPanel({ 
+          itemAddConfig: {
+            ...config.leftPanel?.itemAddConfig,
+            addModalColumns: updatedColumns,
+            parentColumn: config.leftPanel?.itemAddConfig?.parentColumn || "",
+            sourceColumn: config.leftPanel?.itemAddConfig?.sourceColumn || "",
+          } 
+        });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config.leftPanel?.tableName, screenTableName, loadedTableColumns, config.leftPanel?.showItemAddButton]);
+
+  // 우측 패널 테이블 컬럼 로드 완료 시 PK 자동 추가
+  useEffect(() => {
+    const rightTableName = config.rightPanel?.tableName;
+    if (rightTableName && loadedTableColumns[rightTableName] && config.rightPanel?.showAdd) {
+      const currentAddModalColumns = config.rightPanel?.addModalColumns || [];
+      const updatedColumns = ensurePrimaryKeysInAddModal(rightTableName, currentAddModalColumns);
+      
+      // PK가 추가되었으면 업데이트
+      if (updatedColumns.length !== currentAddModalColumns.length) {
+        console.log(`🔄 우측 패널: PK 컬럼 자동 추가 (${rightTableName})`);
+        updateRightPanel({ addModalColumns: updatedColumns });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config.rightPanel?.tableName, loadedTableColumns, config.rightPanel?.showAdd]);
+
   // 테이블 컬럼 로드 함수
   const loadTableColumns = async (tableName: string) => {
     if (loadedTableColumns[tableName] || loadingColumns[tableName]) {
@@ -98,6 +153,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
         required: col.required !== undefined ? col.required : col.isNullable === "NO" || col.is_nullable === "NO",
         columnDefault: col.columnDefault || col.column_default,
         characterMaximumLength: col.characterMaximumLength || col.character_maximum_length,
+        isPrimaryKey: col.isPrimaryKey || false, // PK 여부 추가
         codeCategory: col.codeCategory || col.code_category,
         codeValue: col.codeValue || col.code_value,
       }));
@@ -139,6 +195,44 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
     onChange(newConfig);
   };
 
+  // PK 컬럼을 추가 모달에 자동으로 포함시키는 함수
+  const ensurePrimaryKeysInAddModal = (
+    tableName: string,
+    existingColumns: Array<{ name: string; label: string; required?: boolean }> = []
+  ) => {
+    const tableColumns = loadedTableColumns[tableName];
+    if (!tableColumns) {
+      console.warn(`⚠️ 테이블 ${tableName}의 컬럼 정보가 로드되지 않음`);
+      return existingColumns;
+    }
+
+    // PK 컬럼 찾기
+    const pkColumns = tableColumns.filter((col) => col.isPrimaryKey);
+    console.log(`🔑 테이블 ${tableName}의 PK 컬럼:`, pkColumns.map(c => c.columnName));
+
+    // 자동으로 처리되는 컬럼 (백엔드에서 자동 추가)
+    const autoHandledColumns = ['company_code', 'company_name'];
+
+    // 기존 컬럼 이름 목록
+    const existingColumnNames = existingColumns.map((col) => col.name);
+
+    // PK 컬럼을 맨 앞에 추가 (이미 있거나 자동 처리되는 컬럼은 제외)
+    const pkColumnsToAdd = pkColumns
+      .filter((col) => !existingColumnNames.includes(col.columnName))
+      .filter((col) => !autoHandledColumns.includes(col.columnName)) // 자동 처리 컬럼 제외
+      .map((col) => ({
+        name: col.columnName,
+        label: col.columnLabel || col.columnName,
+        required: true, // PK는 항상 필수
+      }));
+
+    if (pkColumnsToAdd.length > 0) {
+      console.log(`✅ PK 컬럼 ${pkColumnsToAdd.length}개 자동 추가:`, pkColumnsToAdd.map(c => c.name));
+    }
+
+    return [...pkColumnsToAdd, ...existingColumns];
+  };
+
   const updateLeftPanel = (updates: Partial<SplitPanelLayoutConfig["leftPanel"]>) => {
     const newConfig = {
       ...config,
@@ -268,6 +362,451 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             onCheckedChange={(checked) => updateLeftPanel({ showAdd: checked })}
           />
         </div>
+
+        <div className="flex items-center justify-between">
+          <Label>각 항목에 + 버튼</Label>
+          <Switch
+            checked={config.leftPanel?.showItemAddButton ?? false}
+            onCheckedChange={(checked) => updateLeftPanel({ showItemAddButton: checked })}
+          />
+        </div>
+
+        {/* 항목별 + 버튼 설정 (하위 항목 추가) */}
+        {config.leftPanel?.showItemAddButton && (
+          <div className="space-y-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
+            <Label className="text-sm font-semibold">하위 항목 추가 설정</Label>
+            <p className="text-xs text-gray-600">
+              + 버튼 클릭 시 선택된 항목의 하위 항목을 추가합니다 (예: 부서 → 하위 부서)
+            </p>
+
+            {/* 현재 항목의 값을 가져올 컬럼 (sourceColumn) */}
+            <div>
+              <Label className="text-xs">현재 항목 ID 컬럼</Label>
+              <p className="mb-2 text-[10px] text-gray-500">
+                선택된 항목의 어떤 컬럼 값을 사용할지 (예: dept_code)
+              </p>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    className="h-8 w-full justify-between text-xs"
+                  >
+                    {config.leftPanel?.itemAddConfig?.sourceColumn || "컬럼 선택"}
+                    <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-full p-0">
+                  <Command>
+                    <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                    <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandGroup className="max-h-[200px] overflow-auto">
+                      {leftTableColumns
+                        .filter((column) => !['company_code', 'company_name'].includes(column.columnName))
+                        .map((column) => (
+                        <CommandItem
+                          key={column.columnName}
+                          value={column.columnName}
+                          onSelect={(value) => {
+                            updateLeftPanel({ 
+                              itemAddConfig: {
+                                ...config.leftPanel?.itemAddConfig,
+                                sourceColumn: value,
+                                parentColumn: config.leftPanel?.itemAddConfig?.parentColumn || "",
+                              } 
+                            });
+                          }}
+                          className="text-xs"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-3 w-3",
+                              config.leftPanel?.itemAddConfig?.sourceColumn === column.columnName ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                          {column.columnLabel || column.columnName}
+                          <span className="ml-2 text-[10px] text-gray-500">
+                            ({column.columnName})
+                          </span>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+
+            {/* 상위 항목 ID를 저장할 컬럼 (parentColumn) */}
+            <div>
+              <Label className="text-xs">상위 항목 저장 컬럼</Label>
+              <p className="mb-2 text-[10px] text-gray-500">
+                하위 항목에서 상위 항목 ID를 저장할 컬럼 (예: parent_dept_code)
+              </p>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    className="h-8 w-full justify-between text-xs"
+                  >
+                    {config.leftPanel?.itemAddConfig?.parentColumn || "컬럼 선택"}
+                    <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-full p-0">
+                  <Command>
+                    <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                    <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandGroup className="max-h-[200px] overflow-auto">
+                      {leftTableColumns
+                        .filter((column) => !['company_code', 'company_name'].includes(column.columnName))
+                        .map((column) => (
+                        <CommandItem
+                          key={column.columnName}
+                          value={column.columnName}
+                          onSelect={(value) => {
+                            updateLeftPanel({ 
+                              itemAddConfig: {
+                                ...config.leftPanel?.itemAddConfig,
+                                parentColumn: value,
+                                sourceColumn: config.leftPanel?.itemAddConfig?.sourceColumn || "",
+                              } 
+                            });
+                          }}
+                          className="text-xs"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-3 w-3",
+                              config.leftPanel?.itemAddConfig?.parentColumn === column.columnName ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                          {column.columnLabel || column.columnName}
+                          <span className="ml-2 text-[10px] text-gray-500">
+                            ({column.columnName})
+                          </span>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+
+            {/* 하위 항목 추가 모달 컬럼 설정 */}
+            <div className="space-y-2 rounded border border-blue-300 bg-white p-2">
+              <div className="flex items-center justify-between">
+                <Label className="text-xs font-semibold">추가 모달 입력 컬럼</Label>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const currentColumns = config.leftPanel?.itemAddConfig?.addModalColumns || [];
+                    const newColumns = [
+                      ...currentColumns,
+                      { name: "", label: "", required: false },
+                    ];
+                    updateLeftPanel({ 
+                      itemAddConfig: {
+                        ...config.leftPanel?.itemAddConfig,
+                        addModalColumns: newColumns,
+                        parentColumn: config.leftPanel?.itemAddConfig?.parentColumn || "",
+                        sourceColumn: config.leftPanel?.itemAddConfig?.sourceColumn || "",
+                      } 
+                    });
+                  }}
+                  className="h-6 text-[10px]"
+                >
+                  <Plus className="mr-1 h-3 w-3" />
+                  컬럼 추가
+                </Button>
+              </div>
+              <p className="text-[10px] text-gray-600">
+                하위 항목 추가 시 입력받을 필드를 선택하세요
+              </p>
+
+              <div className="space-y-2">
+                {(config.leftPanel?.itemAddConfig?.addModalColumns || []).length === 0 ? (
+                  <div className="rounded-md border border-dashed border-gray-300 bg-gray-50 p-2 text-center">
+                    <p className="text-[10px] text-gray-500">설정된 컬럼이 없습니다</p>
+                  </div>
+                ) : (
+                  (config.leftPanel?.itemAddConfig?.addModalColumns || []).map((col, index) => {
+                    const column = leftTableColumns.find(c => c.columnName === col.name);
+                    const isPK = column?.isPrimaryKey || false;
+
+                    return (
+                      <div
+                        key={index}
+                        className={cn(
+                          "flex items-center gap-2 rounded-md border p-2",
+                          isPK ? "border-yellow-300 bg-yellow-50" : "bg-white"
+                        )}
+                      >
+                        {isPK && (
+                          <span className="rounded bg-yellow-200 px-1.5 py-0.5 text-[10px] font-semibold text-yellow-700">
+                            PK
+                          </span>
+                        )}
+                        <div className="flex-1">
+                          <Popover>
+                            <PopoverTrigger asChild>
+                              <Button
+                                variant="outline"
+                                role="combobox"
+                                disabled={isPK}
+                                className="h-7 w-full justify-between text-[10px]"
+                              >
+                                {col.name || "컬럼 선택"}
+                                <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                              </Button>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-full p-0">
+                              <Command>
+                                <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                                <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                                <CommandGroup className="max-h-[200px] overflow-auto">
+                                  {leftTableColumns
+                                    .filter((column) => !['company_code', 'company_name'].includes(column.columnName))
+                                    .map((column) => (
+                                    <CommandItem
+                                      key={column.columnName}
+                                      value={column.columnName}
+                                      onSelect={(value) => {
+                                        const newColumns = [...(config.leftPanel?.itemAddConfig?.addModalColumns || [])];
+                                        newColumns[index] = {
+                                          ...newColumns[index],
+                                          name: value,
+                                          label: column.columnLabel || value,
+                                        };
+                                        updateLeftPanel({ 
+                                          itemAddConfig: {
+                                            ...config.leftPanel?.itemAddConfig,
+                                            addModalColumns: newColumns,
+                                            parentColumn: config.leftPanel?.itemAddConfig?.parentColumn || "",
+                                            sourceColumn: config.leftPanel?.itemAddConfig?.sourceColumn || "",
+                                          } 
+                                        });
+                                      }}
+                                      className="text-xs"
+                                    >
+                                      <Check
+                                        className={cn(
+                                          "mr-2 h-3 w-3",
+                                          col.name === column.columnName ? "opacity-100" : "opacity-0"
+                                        )}
+                                      />
+                                      {column.columnLabel || column.columnName}
+                                      <span className="ml-2 text-[10px] text-gray-500">
+                                        ({column.columnName})
+                                      </span>
+                                    </CommandItem>
+                                  ))}
+                                </CommandGroup>
+                              </Command>
+                            </PopoverContent>
+                          </Popover>
+                        </div>
+                        <div className="flex items-center gap-1">
+                          <label className="flex cursor-pointer items-center gap-1 text-[10px] text-gray-600">
+                            <input
+                              type="checkbox"
+                              checked={col.required ?? false}
+                              disabled={isPK}
+                              onChange={(e) => {
+                                const newColumns = [...(config.leftPanel?.itemAddConfig?.addModalColumns || [])];
+                                newColumns[index] = {
+                                  ...newColumns[index],
+                                  required: e.target.checked,
+                                };
+                                updateLeftPanel({ 
+                                  itemAddConfig: {
+                                    ...config.leftPanel?.itemAddConfig,
+                                    addModalColumns: newColumns,
+                                    parentColumn: config.leftPanel?.itemAddConfig?.parentColumn || "",
+                                    sourceColumn: config.leftPanel?.itemAddConfig?.sourceColumn || "",
+                                  } 
+                                });
+                              }}
+                              className="h-3 w-3"
+                            />
+                            필수
+                          </label>
+                        </div>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          disabled={isPK}
+                          onClick={() => {
+                            const newColumns = (config.leftPanel?.itemAddConfig?.addModalColumns || []).filter(
+                              (_, i) => i !== index
+                            );
+                            updateLeftPanel({ 
+                              itemAddConfig: {
+                                ...config.leftPanel?.itemAddConfig,
+                                addModalColumns: newColumns,
+                                parentColumn: config.leftPanel?.itemAddConfig?.parentColumn || "",
+                                sourceColumn: config.leftPanel?.itemAddConfig?.sourceColumn || "",
+                              } 
+                            });
+                          }}
+                          className="h-7 w-7 p-0"
+                          title={isPK ? "PK 컬럼은 삭제할 수 없습니다" : ""}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 좌측 패널 추가 모달 컬럼 설정 */}
+        {config.leftPanel?.showAdd && (
+          <div className="space-y-3 rounded-lg border border-purple-200 bg-purple-50 p-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-sm font-semibold">추가 모달 입력 컬럼</Label>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  const currentColumns = config.leftPanel?.addModalColumns || [];
+                  const newColumns = [
+                    ...currentColumns,
+                    { name: "", label: "", required: false },
+                  ];
+                  updateLeftPanel({ addModalColumns: newColumns });
+                }}
+                className="h-7 text-xs"
+              >
+                <Plus className="mr-1 h-3 w-3" />
+                컬럼 추가
+              </Button>
+            </div>
+            <p className="text-xs text-gray-600">
+              추가 버튼 클릭 시 모달에 표시될 입력 필드를 선택하세요
+            </p>
+
+            <div className="space-y-2">
+              {(config.leftPanel?.addModalColumns || []).length === 0 ? (
+                <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
+                  <p className="text-xs text-gray-500">설정된 컬럼이 없습니다</p>
+                </div>
+              ) : (
+                (config.leftPanel?.addModalColumns || []).map((col, index) => {
+                  // 현재 컬럼이 PK인지 확인
+                  const column = leftTableColumns.find(c => c.columnName === col.name);
+                  const isPK = column?.isPrimaryKey || false;
+                  
+                  return (
+                  <div
+                    key={index}
+                    className={cn(
+                      "flex items-center gap-2 rounded-md border p-2",
+                      isPK ? "bg-yellow-50 border-yellow-300" : "bg-white"
+                    )}
+                  >
+                    {isPK && (
+                      <span className="text-[10px] font-semibold text-yellow-700 px-1.5 py-0.5 bg-yellow-200 rounded">
+                        PK
+                      </span>
+                    )}
+                    <div className="flex-1">
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <Button
+                            variant="outline"
+                            role="combobox"
+                            disabled={isPK}
+                            className="h-8 w-full justify-between text-xs"
+                          >
+                            {col.name || "컬럼 선택"}
+                            <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-full p-0">
+                          <Command>
+                            <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                            <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                            <CommandGroup className="max-h-[200px] overflow-auto">
+                              {leftTableColumns
+                                .filter((column) => !['company_code', 'company_name'].includes(column.columnName))
+                                .map((column) => (
+                                <CommandItem
+                                  key={column.columnName}
+                                  value={column.columnName}
+                                  onSelect={(value) => {
+                                    const newColumns = [...(config.leftPanel?.addModalColumns || [])];
+                                    newColumns[index] = {
+                                      ...newColumns[index],
+                                      name: value,
+                                      label: column.columnLabel || value,
+                                    };
+                                    updateLeftPanel({ addModalColumns: newColumns });
+                                  }}
+                                  className="text-xs"
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-3 w-3",
+                                      col.name === column.columnName ? "opacity-100" : "opacity-0"
+                                    )}
+                                  />
+                                  {column.columnLabel || column.columnName}
+                                  <span className="ml-2 text-[10px] text-gray-500">
+                                    ({column.columnName})
+                                  </span>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <label className="flex items-center gap-1 text-xs text-gray-600 cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={col.required ?? false}
+                          disabled={isPK}
+                          onChange={(e) => {
+                            const newColumns = [...(config.leftPanel?.addModalColumns || [])];
+                            newColumns[index] = {
+                              ...newColumns[index],
+                              required: e.target.checked,
+                            };
+                            updateLeftPanel({ addModalColumns: newColumns });
+                          }}
+                          className="h-3 w-3"
+                        />
+                        필수
+                      </label>
+                    </div>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      disabled={isPK}
+                      onClick={() => {
+                        const newColumns = (config.leftPanel?.addModalColumns || []).filter(
+                          (_, i) => i !== index
+                        );
+                        updateLeftPanel({ addModalColumns: newColumns });
+                      }}
+                      className="h-8 w-8 p-0"
+                      title={isPK ? "PK 컬럼은 삭제할 수 없습니다" : ""}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                );
+                })
+              )}
+            </div>
+          </div>
+        )}
       </div>
 
       {/* 우측 패널 설정 */}
@@ -467,6 +1006,357 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             onCheckedChange={(checked) => updateRightPanel({ showAdd: checked })}
           />
         </div>
+
+        {/* 우측 패널 표시 컬럼 설정 */}
+        <div className="space-y-3 rounded-lg border border-green-200 bg-green-50 p-3">
+          <div className="flex items-center justify-between">
+            <Label className="text-sm font-semibold">표시할 컬럼 선택</Label>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                const currentColumns = config.rightPanel?.columns || [];
+                const newColumns = [
+                  ...currentColumns,
+                  { name: "", label: "", width: 100 },
+                ];
+                updateRightPanel({ columns: newColumns });
+              }}
+              className="h-7 text-xs"
+              disabled={!config.rightPanel?.tableName}
+            >
+              <Plus className="mr-1 h-3 w-3" />
+              컬럼 추가
+            </Button>
+          </div>
+          <p className="text-xs text-gray-600">
+            우측 패널에 표시할 컬럼을 선택하세요. 선택하지 않으면 모든 컬럼이 표시됩니다.
+          </p>
+
+          {/* 선택된 컬럼 목록 */}
+          <div className="space-y-2">
+            {(config.rightPanel?.columns || []).length === 0 ? (
+              <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
+                <p className="text-xs text-gray-500">설정된 컬럼이 없습니다</p>
+                <p className="mt-1 text-[10px] text-gray-400">
+                  컬럼을 추가하지 않으면 모든 컬럼이 표시됩니다
+                </p>
+              </div>
+            ) : (
+              (config.rightPanel?.columns || []).map((col, index) => (
+                <div
+                  key={index}
+                  className="flex items-center gap-2 rounded-md border bg-white p-2"
+                >
+                  <div className="flex-1">
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          className="h-8 w-full justify-between text-xs"
+                        >
+                          {col.name || "컬럼 선택"}
+                          <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-full p-0">
+                        <Command>
+                          <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                          <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                          <CommandGroup className="max-h-[200px] overflow-auto">
+                            {rightTableColumns.map((column) => (
+                              <CommandItem
+                                key={column.columnName}
+                                value={column.columnName}
+                                onSelect={(value) => {
+                                  const newColumns = [...(config.rightPanel?.columns || [])];
+                                  newColumns[index] = {
+                                    ...newColumns[index],
+                                    name: value,
+                                    label: column.columnLabel || value,
+                                  };
+                                  updateRightPanel({ columns: newColumns });
+                                }}
+                                className="text-xs"
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-3 w-3",
+                                    col.name === column.columnName ? "opacity-100" : "opacity-0"
+                                  )}
+                                />
+                                {column.columnLabel || column.columnName}
+                                <span className="ml-2 text-[10px] text-gray-500">
+                                  ({column.columnName})
+                                </span>
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+                  </div>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => {
+                      const newColumns = (config.rightPanel?.columns || []).filter(
+                        (_, i) => i !== index
+                      );
+                      updateRightPanel({ columns: newColumns });
+                    }}
+                    className="h-8 w-8 p-0"
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        {/* 우측 패널 추가 모달 컬럼 설정 */}
+        {config.rightPanel?.showAdd && (
+          <div className="space-y-3 rounded-lg border border-purple-200 bg-purple-50 p-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-sm font-semibold">추가 모달 입력 컬럼</Label>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  const currentColumns = config.rightPanel?.addModalColumns || [];
+                  const newColumns = [
+                    ...currentColumns,
+                    { name: "", label: "", required: false },
+                  ];
+                  updateRightPanel({ addModalColumns: newColumns });
+                }}
+                className="h-7 text-xs"
+                disabled={!config.rightPanel?.tableName}
+              >
+                <Plus className="mr-1 h-3 w-3" />
+                컬럼 추가
+              </Button>
+            </div>
+            <p className="text-xs text-gray-600">
+              추가 버튼 클릭 시 모달에 표시될 입력 필드를 선택하세요
+            </p>
+
+            <div className="space-y-2">
+              {(config.rightPanel?.addModalColumns || []).length === 0 ? (
+                <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
+                  <p className="text-xs text-gray-500">설정된 컬럼이 없습니다</p>
+                </div>
+              ) : (
+                (config.rightPanel?.addModalColumns || []).map((col, index) => {
+                  // 현재 컬럼이 PK인지 확인
+                  const column = rightTableColumns.find(c => c.columnName === col.name);
+                  const isPK = column?.isPrimaryKey || false;
+                  
+                  return (
+                  <div
+                    key={index}
+                    className={cn(
+                      "flex items-center gap-2 rounded-md border p-2",
+                      isPK ? "bg-yellow-50 border-yellow-300" : "bg-white"
+                    )}
+                  >
+                    {isPK && (
+                      <span className="text-[10px] font-semibold text-yellow-700 px-1.5 py-0.5 bg-yellow-200 rounded">
+                        PK
+                      </span>
+                    )}
+                    <div className="flex-1">
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <Button
+                            variant="outline"
+                            role="combobox"
+                            disabled={isPK}
+                            className="h-8 w-full justify-between text-xs"
+                          >
+                            {col.name || "컬럼 선택"}
+                            <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-full p-0">
+                          <Command>
+                            <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                            <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                            <CommandGroup className="max-h-[200px] overflow-auto">
+                              {rightTableColumns
+                                .filter((column) => !['company_code', 'company_name'].includes(column.columnName))
+                                .map((column) => (
+                                <CommandItem
+                                  key={column.columnName}
+                                  value={column.columnName}
+                                  onSelect={(value) => {
+                                    const newColumns = [...(config.rightPanel?.addModalColumns || [])];
+                                    newColumns[index] = {
+                                      ...newColumns[index],
+                                      name: value,
+                                      label: column.columnLabel || value,
+                                    };
+                                    updateRightPanel({ addModalColumns: newColumns });
+                                  }}
+                                  className="text-xs"
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-3 w-3",
+                                      col.name === column.columnName ? "opacity-100" : "opacity-0"
+                                    )}
+                                  />
+                                  {column.columnLabel || column.columnName}
+                                  <span className="ml-2 text-[10px] text-gray-500">
+                                    ({column.columnName})
+                                  </span>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <label className="flex items-center gap-1 text-xs text-gray-600 cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={col.required ?? false}
+                          disabled={isPK}
+                          onChange={(e) => {
+                            const newColumns = [...(config.rightPanel?.addModalColumns || [])];
+                            newColumns[index] = {
+                              ...newColumns[index],
+                              required: e.target.checked,
+                            };
+                            updateRightPanel({ addModalColumns: newColumns });
+                          }}
+                          className="h-3 w-3"
+                        />
+                        필수
+                      </label>
+                    </div>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      disabled={isPK}
+                      onClick={() => {
+                        const newColumns = (config.rightPanel?.addModalColumns || []).filter(
+                          (_, i) => i !== index
+                        );
+                        updateRightPanel({ addModalColumns: newColumns });
+                      }}
+                      className="h-8 w-8 p-0"
+                      title={isPK ? "PK 컬럼은 삭제할 수 없습니다" : ""}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                );
+                })
+              )}
+            </div>
+
+            {/* 중계 테이블 설정 */}
+            <div className="space-y-3 rounded-lg border border-orange-200 bg-orange-50 p-3 mt-3">
+              <Label className="text-sm font-semibold">중계 테이블 설정 (N:M 관계)</Label>
+              <p className="text-xs text-gray-600">
+                중계 테이블을 사용하여 다대다 관계를 구현합니다
+              </p>
+
+              <div>
+                <Label className="text-xs text-gray-700">실제 저장할 테이블</Label>
+                <Input
+                  value={config.rightPanel?.addConfig?.targetTable || ""}
+                  onChange={(e) => {
+                    const addConfig = config.rightPanel?.addConfig || {};
+                    updateRightPanel({
+                      addConfig: {
+                        ...addConfig,
+                        targetTable: e.target.value,
+                      },
+                    });
+                  }}
+                  placeholder="예: user_dept"
+                  className="mt-1 h-8 text-xs"
+                />
+                <p className="mt-1 text-[10px] text-gray-500">
+                  데이터가 실제로 저장될 중계 테이블명
+                </p>
+              </div>
+
+              <div>
+                <Label className="text-xs text-gray-700">좌측 패널 컬럼</Label>
+                <Input
+                  value={config.rightPanel?.addConfig?.leftPanelColumn || ""}
+                  onChange={(e) => {
+                    const addConfig = config.rightPanel?.addConfig || {};
+                    updateRightPanel({
+                      addConfig: {
+                        ...addConfig,
+                        leftPanelColumn: e.target.value,
+                      },
+                    });
+                  }}
+                  placeholder="예: dept_code"
+                  className="mt-1 h-8 text-xs"
+                />
+                <p className="mt-1 text-[10px] text-gray-500">
+                  좌측 패널에서 선택한 항목의 어떤 컬럼값을 가져올지
+                </p>
+              </div>
+
+              <div>
+                <Label className="text-xs text-gray-700">중계 테이블 대상 컬럼</Label>
+                <Input
+                  value={config.rightPanel?.addConfig?.targetColumn || ""}
+                  onChange={(e) => {
+                    const addConfig = config.rightPanel?.addConfig || {};
+                    updateRightPanel({
+                      addConfig: {
+                        ...addConfig,
+                        targetColumn: e.target.value,
+                      },
+                    });
+                  }}
+                  placeholder="예: dept_code"
+                  className="mt-1 h-8 text-xs"
+                />
+                <p className="mt-1 text-[10px] text-gray-500">
+                  중계 테이블의 어떤 컬럼에 좌측값을 저장할지
+                </p>
+              </div>
+
+              <div>
+                <Label className="text-xs text-gray-700">자동 채움 컬럼 (JSON)</Label>
+                <textarea
+                  value={JSON.stringify(config.rightPanel?.addConfig?.autoFillColumns || {}, null, 2)}
+                  onChange={(e) => {
+                    try {
+                      const parsed = JSON.parse(e.target.value);
+                      const addConfig = config.rightPanel?.addConfig || {};
+                      updateRightPanel({
+                        addConfig: {
+                          ...addConfig,
+                          autoFillColumns: parsed,
+                        },
+                      });
+                    } catch (err) {
+                      // JSON 파싱 오류는 무시 (입력 중)
+                    }
+                  }}
+                  placeholder='{ "is_primary": false }'
+                  className="mt-1 h-20 w-full rounded-md border border-input bg-white px-3 py-2 text-xs font-mono"
+                />
+                <p className="mt-1 text-[10px] text-gray-500">
+                  자동으로 채워질 컬럼과 기본값 (예: is_primary: false)
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
 
       {/* 레이아웃 설정 */}
diff --git a/frontend/lib/registry/components/split-panel-layout/types.ts b/frontend/lib/registry/components/split-panel-layout/types.ts
index e2c6b052..df43221a 100644
--- a/frontend/lib/registry/components/split-panel-layout/types.ts
+++ b/frontend/lib/registry/components/split-panel-layout/types.ts
@@ -10,11 +10,34 @@ export interface SplitPanelLayoutConfig {
     dataSource?: string; // API 엔드포인트
     showSearch?: boolean;
     showAdd?: boolean;
+    showEdit?: boolean; // 수정 버튼
+    showDelete?: boolean; // 삭제 버튼
     columns?: Array<{
       name: string;
       label: string;
       width?: number;
     }>;
+    // 추가 모달에서 입력받을 컬럼 설정
+    addModalColumns?: Array<{
+      name: string;
+      label: string;
+      required?: boolean;
+    }>;
+    // 각 항목에 + 버튼 표시 (하위 항목 추가)
+    showItemAddButton?: boolean;
+    // + 버튼 클릭 시 하위 항목 추가를 위한 설정
+    itemAddConfig?: {
+      // 하위 항목 추가 모달에서 입력받을 컬럼
+      addModalColumns?: Array<{
+        name: string;
+        label: string;
+        required?: boolean;
+      }>;
+      // 상위 항목의 ID를 저장할 컬럼 (예: parent_dept_code)
+      parentColumn: string;
+      // 현재 항목의 어떤 컬럼 값을 parentColumn에 넣을지 (예: dept_code)
+      sourceColumn: string;
+    };
   };
 
   // 우측 패널 설정
@@ -24,18 +47,35 @@ export interface SplitPanelLayoutConfig {
     dataSource?: string;
     showSearch?: boolean;
     showAdd?: boolean;
+    showEdit?: boolean; // 수정 버튼
+    showDelete?: boolean; // 삭제 버튼
     columns?: Array<{
       name: string;
       label: string;
       width?: number;
     }>;
+    // 추가 모달에서 입력받을 컬럼 설정
+    addModalColumns?: Array<{
+      name: string;
+      label: string;
+      required?: boolean;
+    }>;
 
     // 좌측 선택 항목과의 관계 설정
     relation?: {
       type: "join" | "detail"; // 관계 타입
       leftColumn?: string; // 좌측 테이블의 연결 컬럼
+      rightColumn?: string; // 우측 테이블의 연결 컬럼 (join용)
       foreignKey?: string; // 우측 테이블의 외래키 컬럼명
     };
+
+    // 우측 패널 추가 시 중계 테이블 설정 (N:M 관계)
+    addConfig?: {
+      targetTable?: string; // 실제로 INSERT할 테이블 (중계 테이블)
+      autoFillColumns?: Record<string, any>; // 자동으로 채워질 컬럼과 기본값
+      leftPanelColumn?: string; // 좌측 패널의 어떤 컬럼값을 가져올지
+      targetColumn?: string; // targetTable의 어떤 컬럼에 넣을지
+    };
   };
 
   // 레이아웃 설정