diff --git a/PLAN.MD b/PLAN.MD
index 507695c6..0ca6521d 100644
--- a/PLAN.MD
+++ b/PLAN.MD
@@ -1,4 +1,65 @@
-# 프로젝트: 외부 REST API 커넥션 관리 확장 (POST/Body 지원)
+# 프로젝트: 화면 관리 기능 개선 (복제/삭제/그룹 관리)
+
+## 개요
+화면 관리 시스템의 복제 및 삭제 기능을 전면 개선하여, 단일 화면 복제, 그룹(폴더) 전체 복제, 정렬 순서 유지, 일괄 이름 변경 등 다양한 고급 기능을 지원합니다.
+
+## 핵심 기능
+
+### 1. 단일 화면 복제
+- [x] 우클릭 컨텍스트 메뉴에서 "복제" 선택
+- [x] 화면명, 화면 코드 자동 생성 (중복 시 `_COPY` 접미사 추가)
+- [x] 연결된 모달 화면 함께 복제
+- [x] 대상 그룹 선택 가능
+- [x] 복제 후 목록 자동 새로고침
+
+### 2. 그룹(폴더) 전체 복제
+- [x] 대분류 폴더 복제 시 모든 하위 폴더 + 화면 재귀적 복제
+- [x] 정렬 순서(display_order) 유지
+  - 그룹 생성 시 원본 display_order 전달
+  - 화면 추가 시 원본 display_order 유지
+  - 하위 그룹들 display_order 순으로 정렬 후 복제
+- [x] 대분류(최상위 그룹) 복제 시 경고 문구 표시
+- [x] 정렬 순서 입력 필드 추가 (사용자가 직접 수정 가능)
+- [x] 원본 그룹 정보 표시 개선
+  - 직접 포함 화면 수
+  - 하위 그룹 수
+  - 복제될 총 화면 수 (하위 그룹 포함)
+
+### 3. 고급 옵션: 이름 일괄 변경
+- [x] 삭제할 텍스트 지정 (모든 폴더/화면 이름에서 제거)
+- [x] 추가할 접미사 지정 (기본값: " (복제)")
+- [x] 미리보기 기능
+
+### 4. 삭제 기능
+- [x] 단일 화면 삭제 (휴지통으로 이동)
+- [x] 그룹 삭제 시 옵션 선택
+  - "화면도 함께 삭제" 체크박스
+  - 체크 시: 그룹 + 포함된 화면 모두 삭제
+  - 미체크 시: 화면은 "미분류"로 이동
+
+### 5. 회사 코드 지원 (최고 관리자)
+- [x] 대상 회사 선택 가능
+- [x] 복제된 그룹/화면에 선택한 회사 코드 적용
+
+## 관련 파일
+- `frontend/components/screen/CopyScreenModal.tsx` - 복제 모달 (화면/그룹 통합)
+- `frontend/components/screen/ScreenGroupTreeView.tsx` - 트리 뷰 + 컨텍스트 메뉴
+- `frontend/lib/api/screen.ts` - 화면 API (복제, 삭제)
+- `frontend/lib/api/screenGroup.ts` - 그룹 API
+
+## 진행 상태
+- [완료] 단일 화면 복제 + 새로고침
+- [완료] 그룹 전체 복제 (재귀적)
+- [완료] 정렬 순서(display_order) 유지
+- [완료] 대분류 경고 문구
+- [완료] 정렬 순서 입력 필드
+- [완료] 고급 옵션: 이름 일괄 변경
+- [완료] 단일 화면 삭제
+- [완료] 그룹 삭제 (화면 함께 삭제 옵션)
+
+---
+
+# 이전 프로젝트: 외부 REST API 커넥션 관리 확장 (POST/Body 지원)
 
 ## 개요
 현재 GET 방식 위주로 구현된 외부 REST API 커넥션 관리 기능을 확장하여, POST, PUT, DELETE 등 다양한 HTTP 메서드와 JSON Request Body를 설정하고 테스트할 수 있도록 개선합니다. 이를 통해 토큰 발급 API나 데이터 전송 API 등 다양한 외부 시스템과의 연동을 지원합니다.
diff --git a/backend-node/src/controllers/entityJoinController.ts b/backend-node/src/controllers/entityJoinController.ts
index d42029d1..f4f89d25 100644
--- a/backend-node/src/controllers/entityJoinController.ts
+++ b/backend-node/src/controllers/entityJoinController.ts
@@ -30,7 +30,6 @@ export class EntityJoinController {
         autoFilter, // 🔒 멀티테넌시 자동 필터
         dataFilter, // 🆕 데이터 필터 (JSON 문자열)
         excludeFilter, // 🆕 제외 필터 (JSON 문자열) - 다른 테이블에 이미 존재하는 데이터 제외
-        deduplication, // 🆕 중복 제거 설정 (JSON 문자열)
         userLang, // userLang은 별도로 분리하여 search에 포함되지 않도록 함
         ...otherParams
       } = req.query;
@@ -50,9 +49,6 @@ export class EntityJoinController {
           // search가 문자열인 경우 JSON 파싱
           searchConditions =
             typeof search === "string" ? JSON.parse(search) : search;
-          
-          // 🔍 디버그: 파싱된 검색 조건 로깅
-          logger.info(`🔍 파싱된 검색 조건:`, JSON.stringify(searchConditions, null, 2));
         } catch (error) {
           logger.warn("검색 조건 파싱 오류:", error);
           searchConditions = {};
@@ -155,24 +151,6 @@ export class EntityJoinController {
         }
       }
 
-      // 🆕 중복 제거 설정 처리
-      let parsedDeduplication: {
-        enabled: boolean;
-        groupByColumn: string;
-        keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
-        sortColumn?: string;
-      } | undefined = undefined;
-      if (deduplication) {
-        try {
-          parsedDeduplication =
-            typeof deduplication === "string" ? JSON.parse(deduplication) : deduplication;
-          logger.info("중복 제거 설정 파싱 완료:", parsedDeduplication);
-        } catch (error) {
-          logger.warn("중복 제거 설정 파싱 오류:", error);
-          parsedDeduplication = undefined;
-        }
-      }
-
       const result = await tableManagementService.getTableDataWithEntityJoins(
         tableName,
         {
@@ -190,26 +168,13 @@ export class EntityJoinController {
           screenEntityConfigs: parsedScreenEntityConfigs,
           dataFilter: parsedDataFilter, // 🆕 데이터 필터 전달
           excludeFilter: parsedExcludeFilter, // 🆕 제외 필터 전달
-          deduplication: parsedDeduplication, // 🆕 중복 제거 설정 전달
         }
       );
 
-      // 🆕 중복 제거 처리 (결과 데이터에 적용)
-      let finalData = result;
-      if (parsedDeduplication?.enabled && parsedDeduplication.groupByColumn && Array.isArray(result.data)) {
-        logger.info(`🔄 중복 제거 시작: 기준 컬럼 = ${parsedDeduplication.groupByColumn}, 전략 = ${parsedDeduplication.keepStrategy}`);
-        const originalCount = result.data.length;
-        finalData = {
-          ...result,
-          data: this.deduplicateData(result.data, parsedDeduplication),
-        };
-        logger.info(`✅ 중복 제거 완료: ${originalCount}개 → ${finalData.data.length}개`);
-      }
-
       res.status(200).json({
         success: true,
         message: "Entity 조인 데이터 조회 성공",
-        data: finalData,
+        data: result,
       });
     } catch (error) {
       logger.error("Entity 조인 데이터 조회 실패", error);
@@ -593,98 +558,6 @@ export class EntityJoinController {
       });
     }
   }
-
-  /**
-   * 중복 데이터 제거 (메모리 내 처리)
-   */
-  private deduplicateData(
-    data: any[],
-    config: {
-      groupByColumn: string;
-      keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
-      sortColumn?: string;
-    }
-  ): any[] {
-    if (!data || data.length === 0) return data;
-
-    // 그룹별로 데이터 분류
-    const groups: Record<string, any[]> = {};
-
-    for (const row of data) {
-      const groupKey = row[config.groupByColumn];
-      if (groupKey === undefined || groupKey === null) continue;
-
-      if (!groups[groupKey]) {
-        groups[groupKey] = [];
-      }
-      groups[groupKey].push(row);
-    }
-
-    // 각 그룹에서 하나의 행만 선택
-    const result: any[] = [];
-
-    for (const [groupKey, rows] of Object.entries(groups)) {
-      if (rows.length === 0) continue;
-
-      let selectedRow: any;
-
-      switch (config.keepStrategy) {
-        case "latest":
-          // 정렬 컬럼 기준 최신 (가장 큰 값)
-          if (config.sortColumn) {
-            rows.sort((a, b) => {
-              const aVal = a[config.sortColumn!];
-              const bVal = b[config.sortColumn!];
-              if (aVal === bVal) return 0;
-              if (aVal > bVal) return -1;
-              return 1;
-            });
-          }
-          selectedRow = rows[0];
-          break;
-
-        case "earliest":
-          // 정렬 컬럼 기준 최초 (가장 작은 값)
-          if (config.sortColumn) {
-            rows.sort((a, b) => {
-              const aVal = a[config.sortColumn!];
-              const bVal = b[config.sortColumn!];
-              if (aVal === bVal) return 0;
-              if (aVal < bVal) return -1;
-              return 1;
-            });
-          }
-          selectedRow = rows[0];
-          break;
-
-        case "base_price":
-          // base_price가 true인 행 선택
-          selectedRow = rows.find((r) => r.base_price === true || r.base_price === "true") || rows[0];
-          break;
-
-        case "current_date":
-          // 오늘 날짜 기준 유효 기간 내 행 선택
-          const today = new Date().toISOString().split("T")[0];
-          selectedRow = rows.find((r) => {
-            const startDate = r.start_date;
-            const endDate = r.end_date;
-            if (!startDate) return true;
-            if (startDate <= today && (!endDate || endDate >= today)) return true;
-            return false;
-          }) || rows[0];
-          break;
-
-        default:
-          selectedRow = rows[0];
-      }
-
-      if (selectedRow) {
-        result.push(selectedRow);
-      }
-    }
-
-    return result;
-  }
 }
 
 export const entityJoinController = new EntityJoinController();
diff --git a/backend-node/src/controllers/screenGroupController.ts b/backend-node/src/controllers/screenGroupController.ts
index 2d7bc0e1..569fe793 100644
--- a/backend-node/src/controllers/screenGroupController.ts
+++ b/backend-node/src/controllers/screenGroupController.ts
@@ -1,23 +1,18 @@
 import { Request, Response } from "express";
 import { getPool } from "../database/db";
 import { logger } from "../utils/logger";
-import { MultiLangService } from "../services/multilangService";
-import { AuthenticatedRequest } from "../types/auth";
 
 // pool 인스턴스 가져오기
 const pool = getPool();
 
-// 다국어 서비스 인스턴스
-const multiLangService = new MultiLangService();
-
 // ============================================================
 // 화면 그룹 (screen_groups) CRUD
 // ============================================================
 
 // 화면 그룹 목록 조회
-export const getScreenGroups = async (req: AuthenticatedRequest, res: Response) => {
+export const getScreenGroups = async (req: Request, res: Response) => {
   try {
-    const companyCode = req.user!.companyCode;
+    const companyCode = (req.user as any).companyCode;
     const { page = 1, size = 20, searchTerm } = req.query;
     const offset = (parseInt(page as string) - 1) * parseInt(size as string);
 
@@ -89,10 +84,10 @@ export const getScreenGroups = async (req: AuthenticatedRequest, res: Response)
 };
 
 // 화면 그룹 상세 조회
-export const getScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
+export const getScreenGroup = async (req: Request, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user!.companyCode;
+    const companyCode = (req.user as any).companyCode;
 
     let query = `
       SELECT sg.*,
@@ -135,10 +130,10 @@ export const getScreenGroup = async (req: AuthenticatedRequest, res: Response) =
 };
 
 // 화면 그룹 생성
-export const createScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
+export const createScreenGroup = async (req: Request, res: Response) => {
   try {
-    const userCompanyCode = req.user!.companyCode;
-    const userId = req.user!.userId;
+    const userCompanyCode = (req.user as any).companyCode;
+    const userId = (req.user as any).userId;
     const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body;
 
     if (!group_name || !group_code) {
@@ -196,47 +191,6 @@ export const createScreenGroup = async (req: AuthenticatedRequest, res: Response
     // 업데이트된 데이터 반환
     const updatedResult = await pool.query(`SELECT * FROM screen_groups WHERE id = $1`, [newGroupId]);
 
-    // 다국어 카테고리 자동 생성 (그룹 경로 기반)
-    try {
-      // 그룹 경로 조회 (상위 그룹 → 현재 그룹)
-      const groupPathResult = await pool.query(
-        `WITH RECURSIVE group_path AS (
-           SELECT id, parent_group_id, group_name, group_level, 1 as depth
-           FROM screen_groups
-           WHERE id = $1
-           UNION ALL
-           SELECT g.id, g.parent_group_id, g.group_name, g.group_level, gp.depth + 1
-           FROM screen_groups g
-           INNER JOIN group_path gp ON g.id = gp.parent_group_id
-           WHERE g.parent_group_id IS NOT NULL
-         )
-         SELECT group_name FROM group_path
-         ORDER BY depth DESC`,
-        [newGroupId]
-      );
-      
-      const groupPath = groupPathResult.rows.map((r: any) => r.group_name);
-      
-      // 회사 이름 조회
-      let companyName = "공통";
-      if (finalCompanyCode !== "*") {
-        const companyResult = await pool.query(
-          `SELECT company_name FROM company_mng WHERE company_code = $1`,
-          [finalCompanyCode]
-        );
-        if (companyResult.rows.length > 0) {
-          companyName = companyResult.rows[0].company_name;
-        }
-      }
-      
-      // 다국어 카테고리 생성
-      await multiLangService.ensureScreenGroupCategory(finalCompanyCode, companyName, groupPath);
-      logger.info("화면 그룹 다국어 카테고리 자동 생성 완료", { groupPath, companyCode: finalCompanyCode });
-    } catch (multilangError: any) {
-      // 다국어 카테고리 생성 실패해도 그룹 생성은 성공으로 처리
-      logger.warn("화면 그룹 다국어 카테고리 생성 실패 (무시하고 계속):", multilangError.message);
-    }
-
     logger.info("화면 그룹 생성", { userCompanyCode, finalCompanyCode, groupId: newGroupId, groupName: group_name, parentGroupId: parent_group_id });
 
     res.json({ success: true, data: updatedResult.rows[0], message: "화면 그룹이 생성되었습니다." });
@@ -250,10 +204,10 @@ export const createScreenGroup = async (req: AuthenticatedRequest, res: Response
 };
 
 // 화면 그룹 수정
-export const updateScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
+export const updateScreenGroup = async (req: Request, res: Response) => {
   try {
     const { id } = req.params;
-    const userCompanyCode = req.user!.companyCode;
+    const userCompanyCode = (req.user as any).companyCode;
     const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body;
 
     // 회사 코드 결정: 최고 관리자가 특정 회사를 선택한 경우 해당 회사로, 아니면 현재 그룹의 회사 유지
@@ -339,10 +293,10 @@ export const updateScreenGroup = async (req: AuthenticatedRequest, res: Response
 };
 
 // 화면 그룹 삭제
-export const deleteScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
+export const deleteScreenGroup = async (req: Request, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user!.companyCode;
+    const companyCode = (req.user as any).companyCode;
 
     let query = `DELETE FROM screen_groups WHERE id = $1`;
     const params: any[] = [id];
@@ -375,10 +329,10 @@ export const deleteScreenGroup = async (req: AuthenticatedRequest, res: Response
 // ============================================================
 
 // 그룹에 화면 추가
-export const addScreenToGroup = async (req: AuthenticatedRequest, res: Response) => {
+export const addScreenToGroup = async (req: Request, res: Response) => {
   try {
-    const companyCode = req.user!.companyCode;
-    const userId = req.user!.userId;
+    const companyCode = (req.user as any).companyCode;
+    const userId = (req.user as any).userId;
     const { group_id, screen_id, screen_role, display_order, is_default } = req.body;
 
     if (!group_id || !screen_id) {
@@ -415,10 +369,10 @@ export const addScreenToGroup = async (req: AuthenticatedRequest, res: Response)
 };
 
 // 그룹에서 화면 제거
-export const removeScreenFromGroup = async (req: AuthenticatedRequest, res: Response) => {
+export const removeScreenFromGroup = async (req: Request, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user!.companyCode;
+    const companyCode = (req.user as any).companyCode;
 
     let query = `DELETE FROM screen_group_screens WHERE id = $1`;
     const params: any[] = [id];
@@ -446,10 +400,10 @@ export const removeScreenFromGroup = async (req: AuthenticatedRequest, res: Resp
 };
 
 // 그룹 내 화면 순서/역할 수정
-export const updateScreenInGroup = async (req: AuthenticatedRequest, res: Response) => {
+export const updateScreenInGroup = async (req: Request, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user!.companyCode;
+    const companyCode = (req.user as any).companyCode;
     const { screen_role, display_order, is_default } = req.body;
 
     let query = `
@@ -485,9 +439,9 @@ export const updateScreenInGroup = async (req: AuthenticatedRequest, res: Respon
 // ============================================================
 
 // 화면 필드 조인 목록 조회
-export const getFieldJoins = async (req: AuthenticatedRequest, res: Response) => {
+export const getFieldJoins = async (req: Request, res: Response) => {
   try {
-    const companyCode = req.user!.companyCode;
+    const companyCode = (req.user as any).companyCode;
     const { screen_id } = req.query;
 
     let query = `
@@ -526,10 +480,10 @@ export const getFieldJoins = async (req: AuthenticatedRequest, res: Response) =>
 };
 
 // 화면 필드 조인 생성
-export const createFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
+export const createFieldJoin = async (req: Request, res: Response) => {
   try {
-    const companyCode = req.user!.companyCode;
-    const userId = req.user!.userId;
+    const companyCode = (req.user as any).companyCode;
+    const userId = (req.user as any).userId;
     const { 
       screen_id, layout_id, component_id, field_name,
       save_table, save_column, join_table, join_column, display_column,
@@ -567,10 +521,10 @@ export const createFieldJoin = async (req: AuthenticatedRequest, res: Response)
 };
 
 // 화면 필드 조인 수정
-export const updateFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
+export const updateFieldJoin = async (req: Request, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user!.companyCode;
+    const companyCode = (req.user as any).companyCode;
     const { 
       layout_id, component_id, field_name,
       save_table, save_column, join_table, join_column, display_column,
@@ -612,10 +566,10 @@ export const updateFieldJoin = async (req: AuthenticatedRequest, res: Response)
 };
 
 // 화면 필드 조인 삭제
-export const deleteFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
+export const deleteFieldJoin = async (req: Request, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user!.companyCode;
+    const companyCode = (req.user as any).companyCode;
 
     let query = `DELETE FROM screen_field_joins WHERE id = $1`;
     const params: any[] = [id];
@@ -646,9 +600,9 @@ export const deleteFieldJoin = async (req: AuthenticatedRequest, res: Response)
 // ============================================================
 
 // 데이터 흐름 목록 조회
-export const getDataFlows = async (req: AuthenticatedRequest, res: Response) => {
+export const getDataFlows = async (req: Request, res: Response) => {
   try {
-    const companyCode = req.user!.companyCode;
+    const companyCode = (req.user as any).companyCode;
     const { group_id, source_screen_id } = req.query;
 
     let query = `
@@ -696,10 +650,10 @@ export const getDataFlows = async (req: AuthenticatedRequest, res: Response) =>
 };
 
 // 데이터 흐름 생성
-export const createDataFlow = async (req: AuthenticatedRequest, res: Response) => {
+export const createDataFlow = async (req: Request, res: Response) => {
   try {
-    const companyCode = req.user!.companyCode;
-    const userId = req.user!.userId;
+    const companyCode = (req.user as any).companyCode;
+    const userId = (req.user as any).userId;
     const { 
       group_id, source_screen_id, source_action, target_screen_id, target_action,
       data_mapping, flow_type, flow_label, condition_expression, is_active
@@ -735,10 +689,10 @@ export const createDataFlow = async (req: AuthenticatedRequest, res: Response) =
 };
 
 // 데이터 흐름 수정
-export const updateDataFlow = async (req: AuthenticatedRequest, res: Response) => {
+export const updateDataFlow = async (req: Request, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user!.companyCode;
+    const companyCode = (req.user as any).companyCode;
     const { 
       group_id, source_screen_id, source_action, target_screen_id, target_action,
       data_mapping, flow_type, flow_label, condition_expression, is_active
@@ -778,10 +732,10 @@ export const updateDataFlow = async (req: AuthenticatedRequest, res: Response) =
 };
 
 // 데이터 흐름 삭제
-export const deleteDataFlow = async (req: AuthenticatedRequest, res: Response) => {
+export const deleteDataFlow = async (req: Request, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user!.companyCode;
+    const companyCode = (req.user as any).companyCode;
 
     let query = `DELETE FROM screen_data_flows WHERE id = $1`;
     const params: any[] = [id];
@@ -812,9 +766,9 @@ export const deleteDataFlow = async (req: AuthenticatedRequest, res: Response) =
 // ============================================================
 
 // 화면-테이블 관계 목록 조회
-export const getTableRelations = async (req: AuthenticatedRequest, res: Response) => {
+export const getTableRelations = async (req: Request, res: Response) => {
   try {
-    const companyCode = req.user!.companyCode;
+    const companyCode = (req.user as any).companyCode;
     const { screen_id, group_id } = req.query;
 
     let query = `
@@ -861,10 +815,10 @@ export const getTableRelations = async (req: AuthenticatedRequest, res: Response
 };
 
 // 화면-테이블 관계 생성
-export const createTableRelation = async (req: AuthenticatedRequest, res: Response) => {
+export const createTableRelation = async (req: Request, res: Response) => {
   try {
-    const companyCode = req.user!.companyCode;
-    const userId = req.user!.userId;
+    const companyCode = (req.user as any).companyCode;
+    const userId = (req.user as any).userId;
     const { group_id, screen_id, table_name, relation_type, crud_operations, description, is_active } = req.body;
 
     if (!screen_id || !table_name) {
@@ -894,10 +848,10 @@ export const createTableRelation = async (req: AuthenticatedRequest, res: Respon
 };
 
 // 화면-테이블 관계 수정
-export const updateTableRelation = async (req: AuthenticatedRequest, res: Response) => {
+export const updateTableRelation = async (req: Request, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user!.companyCode;
+    const companyCode = (req.user as any).companyCode;
     const { group_id, table_name, relation_type, crud_operations, description, is_active } = req.body;
 
     let query = `
@@ -929,10 +883,10 @@ export const updateTableRelation = async (req: AuthenticatedRequest, res: Respon
 };
 
 // 화면-테이블 관계 삭제
-export const deleteTableRelation = async (req: AuthenticatedRequest, res: Response) => {
+export const deleteTableRelation = async (req: Request, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user!.companyCode;
+    const companyCode = (req.user as any).companyCode;
 
     let query = `DELETE FROM screen_table_relations WHERE id = $1`;
     const params: any[] = [id];
diff --git a/backend-node/src/controllers/tableManagementController.ts b/backend-node/src/controllers/tableManagementController.ts
index e57e8295..db301ec8 100644
--- a/backend-node/src/controllers/tableManagementController.ts
+++ b/backend-node/src/controllers/tableManagementController.ts
@@ -809,12 +809,6 @@ export async function getTableData(
       }
     }
 
-    // 🆕 최종 검색 조건 로그
-    logger.info(
-      `🔍 최종 검색 조건 (enhancedSearch):`,
-      JSON.stringify(enhancedSearch)
-    );
-
     // 데이터 조회
     const result = await tableManagementService.getTableData(tableName, {
       page: parseInt(page),
@@ -898,10 +892,7 @@ export async function addTableData(
     const companyCode = req.user?.companyCode;
     if (companyCode && !data.company_code) {
       // 테이블에 company_code 컬럼이 있는지 확인
-      const hasCompanyCodeColumn = await tableManagementService.hasColumn(
-        tableName,
-        "company_code"
-      );
+      const hasCompanyCodeColumn = await tableManagementService.hasColumn(tableName, "company_code");
       if (hasCompanyCodeColumn) {
         data.company_code = companyCode;
         logger.info(`멀티테넌시: company_code 자동 추가 - ${companyCode}`);
@@ -911,10 +902,7 @@ export async function addTableData(
     // 🆕 writer 컬럼 자동 추가 (테이블에 writer 컬럼이 있고 값이 없는 경우)
     const userId = req.user?.userId;
     if (userId && !data.writer) {
-      const hasWriterColumn = await tableManagementService.hasColumn(
-        tableName,
-        "writer"
-      );
+      const hasWriterColumn = await tableManagementService.hasColumn(tableName, "writer");
       if (hasWriterColumn) {
         data.writer = userId;
         logger.info(`writer 자동 추가 - ${userId}`);
@@ -922,25 +910,13 @@ export async function addTableData(
     }
 
     // 데이터 추가
-    const result = await tableManagementService.addTableData(tableName, data);
+    await tableManagementService.addTableData(tableName, data);
 
     logger.info(`테이블 데이터 추가 완료: ${tableName}`);
 
-    // 무시된 컬럼이 있으면 경고 정보 포함
-    const response: ApiResponse<{
-      skippedColumns?: string[];
-      savedColumns?: string[];
-    }> = {
+    const response: ApiResponse<null> = {
       success: true,
-      message:
-        result.skippedColumns.length > 0
-          ? `테이블 데이터를 추가했습니다. (무시된 컬럼 ${result.skippedColumns.length}개: ${result.skippedColumns.join(", ")})`
-          : "테이블 데이터를 성공적으로 추가했습니다.",
-      data: {
-        skippedColumns:
-          result.skippedColumns.length > 0 ? result.skippedColumns : undefined,
-        savedColumns: result.savedColumns,
-      },
+      message: "테이블 데이터를 성공적으로 추가했습니다.",
     };
 
     res.status(201).json(response);
@@ -1668,10 +1644,10 @@ export async function toggleLogTable(
 
 /**
  * 메뉴의 상위 메뉴들이 설정한 모든 카테고리 타입 컬럼 조회 (계층 구조 상속)
- *
+ * 
  * @route GET /api/table-management/menu/:menuObjid/category-columns
  * @description 현재 메뉴와 상위 메뉴들에서 설정한 category_column_mapping의 모든 카테고리 컬럼 조회
- *
+ * 
  * 예시:
  * - 2레벨 메뉴 "고객사관리"에서 discount_type, rounding_type 설정
  * - 3레벨 메뉴 "고객등록", "고객조회" 등에서도 동일하게 보임 (상속)
@@ -1684,10 +1660,7 @@ export async function getCategoryColumnsByMenu(
     const { menuObjid } = req.params;
     const companyCode = req.user?.companyCode;
 
-    logger.info("📥 메뉴별 카테고리 컬럼 조회 요청", {
-      menuObjid,
-      companyCode,
-    });
+    logger.info("📥 메뉴별 카테고리 컬럼 조회 요청", { menuObjid, companyCode });
 
     if (!menuObjid) {
       res.status(400).json({
@@ -1713,11 +1686,8 @@ export async function getCategoryColumnsByMenu(
 
     if (mappingTableExists) {
       // 🆕 category_column_mapping을 사용한 계층 구조 기반 조회
-      logger.info(
-        "🔍 category_column_mapping 기반 카테고리 컬럼 조회 (계층 구조 상속)",
-        { menuObjid, companyCode }
-      );
-
+      logger.info("🔍 category_column_mapping 기반 카테고리 컬럼 조회 (계층 구조 상속)", { menuObjid, companyCode });
+      
       // 현재 메뉴와 모든 상위 메뉴의 objid 조회 (재귀)
       const ancestorMenuQuery = `
         WITH RECURSIVE menu_hierarchy AS (
@@ -1739,21 +1709,17 @@ export async function getCategoryColumnsByMenu(
           ARRAY_AGG(menu_name_kor) as menu_names
         FROM menu_hierarchy
       `;
-
-      const ancestorMenuResult = await pool.query(ancestorMenuQuery, [
-        parseInt(menuObjid),
-      ]);
-      const ancestorMenuObjids = ancestorMenuResult.rows[0]?.menu_objids || [
-        parseInt(menuObjid),
-      ];
+      
+      const ancestorMenuResult = await pool.query(ancestorMenuQuery, [parseInt(menuObjid)]);
+      const ancestorMenuObjids = ancestorMenuResult.rows[0]?.menu_objids || [parseInt(menuObjid)];
       const ancestorMenuNames = ancestorMenuResult.rows[0]?.menu_names || [];
-
-      logger.info("✅ 상위 메뉴 계층 조회 완료", {
-        ancestorMenuObjids,
+      
+      logger.info("✅ 상위 메뉴 계층 조회 완료", { 
+        ancestorMenuObjids, 
         ancestorMenuNames,
-        hierarchyDepth: ancestorMenuObjids.length,
+        hierarchyDepth: ancestorMenuObjids.length 
       });
-
+      
       // 상위 메뉴들에 설정된 모든 카테고리 컬럼 조회 (테이블 필터링 제거)
       const columnsQuery = `
         SELECT DISTINCT
@@ -1783,31 +1749,20 @@ export async function getCategoryColumnsByMenu(
           AND ttc.input_type = 'category'
         ORDER BY ttc.table_name, ccm.logical_column_name
       `;
-
-      columnsResult = await pool.query(columnsQuery, [
-        companyCode,
-        ancestorMenuObjids,
-      ]);
-      logger.info(
-        "✅ category_column_mapping 기반 조회 완료 (계층 구조 상속)",
-        {
-          rowCount: columnsResult.rows.length,
-          columns: columnsResult.rows.map(
-            (r: any) => `${r.tableName}.${r.columnName}`
-          ),
-        }
-      );
+      
+      columnsResult = await pool.query(columnsQuery, [companyCode, ancestorMenuObjids]);
+      logger.info("✅ category_column_mapping 기반 조회 완료 (계층 구조 상속)", { 
+        rowCount: columnsResult.rows.length,
+        columns: columnsResult.rows.map((r: any) => `${r.tableName}.${r.columnName}`)
+      });
     } else {
       // 🔄 레거시 방식: 형제 메뉴들의 테이블에서 모든 카테고리 컬럼 조회
-      logger.info("🔍 레거시 방식: 형제 메뉴 테이블 기반 카테고리 컬럼 조회", {
-        menuObjid,
-        companyCode,
-      });
-
+      logger.info("🔍 레거시 방식: 형제 메뉴 테이블 기반 카테고리 컬럼 조회", { menuObjid, companyCode });
+      
       // 형제 메뉴 조회
       const { getSiblingMenuObjids } = await import("../services/menuService");
       const siblingObjids = await getSiblingMenuObjids(parseInt(menuObjid));
-
+      
       // 형제 메뉴들이 사용하는 테이블 조회
       const tablesQuery = `
         SELECT DISTINCT sd.table_name
@@ -1817,17 +1772,11 @@ export async function getCategoryColumnsByMenu(
           AND sma.company_code = $2
           AND sd.table_name IS NOT NULL
       `;
-
-      const tablesResult = await pool.query(tablesQuery, [
-        siblingObjids,
-        companyCode,
-      ]);
+      
+      const tablesResult = await pool.query(tablesQuery, [siblingObjids, companyCode]);
       const tableNames = tablesResult.rows.map((row: any) => row.table_name);
-
-      logger.info("✅ 형제 메뉴 테이블 조회 완료", {
-        tableNames,
-        count: tableNames.length,
-      });
+      
+      logger.info("✅ 형제 메뉴 테이블 조회 완료", { tableNames, count: tableNames.length });
 
       if (tableNames.length === 0) {
         res.json({
@@ -1837,7 +1786,7 @@ export async function getCategoryColumnsByMenu(
         });
         return;
       }
-
+      
       const columnsQuery = `
         SELECT 
           ttc.table_name AS "tableName",
@@ -1862,15 +1811,13 @@ export async function getCategoryColumnsByMenu(
           AND ttc.input_type = 'category'
         ORDER BY ttc.table_name, ttc.column_name
       `;
-
+      
       columnsResult = await pool.query(columnsQuery, [tableNames, companyCode]);
-      logger.info("✅ 레거시 방식 조회 완료", {
-        rowCount: columnsResult.rows.length,
-      });
+      logger.info("✅ 레거시 방식 조회 완료", { rowCount: columnsResult.rows.length });
     }
-
-    logger.info("✅ 카테고리 컬럼 조회 완료", {
-      columnCount: columnsResult.rows.length,
+    
+    logger.info("✅ 카테고리 컬럼 조회 완료", { 
+      columnCount: columnsResult.rows.length 
     });
 
     res.json({
@@ -1895,9 +1842,9 @@ export async function getCategoryColumnsByMenu(
 
 /**
  * 범용 다중 테이블 저장 API
- *
+ * 
  * 메인 테이블과 서브 테이블(들)에 트랜잭션으로 데이터를 저장합니다.
- *
+ * 
  * 요청 본문:
  * {
  *   mainTable: { tableName: string, primaryKeyColumn: string },
@@ -1967,29 +1914,23 @@ export async function multiTableSave(
     }
 
     let mainResult: any;
-
+    
     if (isUpdate && pkValue) {
       // UPDATE
       const updateColumns = Object.keys(mainData)
-        .filter((col) => col !== pkColumn)
+        .filter(col => col !== pkColumn)
         .map((col, idx) => `"${col}" = $${idx + 1}`)
         .join(", ");
       const updateValues = Object.keys(mainData)
-        .filter((col) => col !== pkColumn)
-        .map((col) => mainData[col]);
-
+        .filter(col => col !== pkColumn)
+        .map(col => mainData[col]);
+      
       // updated_at 컬럼 존재 여부 확인
-      const hasUpdatedAt = await client.query(
-        `
+      const hasUpdatedAt = await client.query(`
         SELECT 1 FROM information_schema.columns 
         WHERE table_name = $1 AND column_name = 'updated_at'
-      `,
-        [mainTableName]
-      );
-      const updatedAtClause =
-        hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0
-          ? ", updated_at = NOW()"
-          : "";
+      `, [mainTableName]);
+      const updatedAtClause = hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0 ? ", updated_at = NOW()" : "";
 
       const updateQuery = `
         UPDATE "${mainTableName}"
@@ -1998,43 +1939,29 @@ export async function multiTableSave(
         ${companyCode !== "*" ? `AND company_code = $${updateValues.length + 2}` : ""}
         RETURNING *
       `;
-
-      const updateParams =
-        companyCode !== "*"
-          ? [...updateValues, pkValue, companyCode]
-          : [...updateValues, pkValue];
-
-      logger.info("메인 테이블 UPDATE:", {
-        query: updateQuery,
-        paramsCount: updateParams.length,
-      });
+      
+      const updateParams = companyCode !== "*" 
+        ? [...updateValues, pkValue, companyCode]
+        : [...updateValues, pkValue];
+      
+      logger.info("메인 테이블 UPDATE:", { query: updateQuery, paramsCount: updateParams.length });
       mainResult = await client.query(updateQuery, updateParams);
     } else {
       // INSERT
-      const columns = Object.keys(mainData)
-        .map((col) => `"${col}"`)
-        .join(", ");
-      const placeholders = Object.keys(mainData)
-        .map((_, idx) => `$${idx + 1}`)
-        .join(", ");
+      const columns = Object.keys(mainData).map(col => `"${col}"`).join(", ");
+      const placeholders = Object.keys(mainData).map((_, idx) => `$${idx + 1}`).join(", ");
       const values = Object.values(mainData);
 
       // updated_at 컬럼 존재 여부 확인
-      const hasUpdatedAt = await client.query(
-        `
+      const hasUpdatedAt = await client.query(`
         SELECT 1 FROM information_schema.columns 
         WHERE table_name = $1 AND column_name = 'updated_at'
-      `,
-        [mainTableName]
-      );
-      const updatedAtClause =
-        hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0
-          ? ", updated_at = NOW()"
-          : "";
+      `, [mainTableName]);
+      const updatedAtClause = hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0 ? ", updated_at = NOW()" : "";
 
       const updateSetClause = Object.keys(mainData)
-        .filter((col) => col !== pkColumn)
-        .map((col) => `"${col}" = EXCLUDED."${col}"`)
+        .filter(col => col !== pkColumn)
+        .map(col => `"${col}" = EXCLUDED."${col}"`)
         .join(", ");
 
       const insertQuery = `
@@ -2045,10 +1972,7 @@ export async function multiTableSave(
         RETURNING *
       `;
 
-      logger.info("메인 테이블 INSERT/UPSERT:", {
-        query: insertQuery,
-        paramsCount: values.length,
-      });
+      logger.info("메인 테이블 INSERT/UPSERT:", { query: insertQuery, paramsCount: values.length });
       mainResult = await client.query(insertQuery, values);
     }
 
@@ -2067,15 +1991,12 @@ export async function multiTableSave(
       const { tableName, linkColumn, items, options } = subTableConfig;
 
       // saveMainAsFirst가 활성화된 경우, items가 비어있어도 메인 데이터를 서브 테이블에 저장해야 함
-      const hasSaveMainAsFirst =
-        options?.saveMainAsFirst &&
-        options?.mainFieldMappings &&
-        options.mainFieldMappings.length > 0;
-
+      const hasSaveMainAsFirst = options?.saveMainAsFirst && 
+                                  options?.mainFieldMappings && 
+                                  options.mainFieldMappings.length > 0;
+      
       if (!tableName || (!items?.length && !hasSaveMainAsFirst)) {
-        logger.info(
-          `서브 테이블 ${tableName} 스킵: 데이터 없음 (saveMainAsFirst: ${hasSaveMainAsFirst})`
-        );
+        logger.info(`서브 테이블 ${tableName} 스킵: 데이터 없음 (saveMainAsFirst: ${hasSaveMainAsFirst})`);
         continue;
       }
 
@@ -2088,20 +2009,15 @@ export async function multiTableSave(
 
       // 기존 데이터 삭제 옵션
       if (options?.deleteExistingBefore && linkColumn?.subColumn) {
-        const deleteQuery =
-          options?.deleteOnlySubItems && options?.mainMarkerColumn
-            ? `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1 AND "${options.mainMarkerColumn}" = $2`
-            : `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1`;
+        const deleteQuery = options?.deleteOnlySubItems && options?.mainMarkerColumn
+          ? `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1 AND "${options.mainMarkerColumn}" = $2`
+          : `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1`;
+        
+        const deleteParams = options?.deleteOnlySubItems && options?.mainMarkerColumn
+          ? [savedPkValue, options.subMarkerValue ?? false]
+          : [savedPkValue];
 
-        const deleteParams =
-          options?.deleteOnlySubItems && options?.mainMarkerColumn
-            ? [savedPkValue, options.subMarkerValue ?? false]
-            : [savedPkValue];
-
-        logger.info(`서브 테이블 ${tableName} 기존 데이터 삭제:`, {
-          deleteQuery,
-          deleteParams,
-        });
+        logger.info(`서브 테이블 ${tableName} 기존 데이터 삭제:`, { deleteQuery, deleteParams });
         await client.query(deleteQuery, deleteParams);
       }
 
@@ -2114,12 +2030,7 @@ export async function multiTableSave(
         linkColumn,
         mainDataKeys: Object.keys(mainData),
       });
-      if (
-        options?.saveMainAsFirst &&
-        options?.mainFieldMappings &&
-        options.mainFieldMappings.length > 0 &&
-        linkColumn?.subColumn
-      ) {
+      if (options?.saveMainAsFirst && options?.mainFieldMappings && options.mainFieldMappings.length > 0 && linkColumn?.subColumn) {
         const mainSubItem: Record<string, any> = {
           [linkColumn.subColumn]: savedPkValue,
         };
@@ -2133,8 +2044,7 @@ export async function multiTableSave(
 
         // 메인 마커 설정
         if (options.mainMarkerColumn) {
-          mainSubItem[options.mainMarkerColumn] =
-            options.mainMarkerValue ?? true;
+          mainSubItem[options.mainMarkerColumn] = options.mainMarkerValue ?? true;
         }
 
         // company_code 추가
@@ -2157,30 +2067,20 @@ export async function multiTableSave(
         if (companyCode !== "*") {
           checkParams.push(companyCode);
         }
-
+        
         const existingResult = await client.query(checkQuery, checkParams);
-
+        
         if (existingResult.rows.length > 0) {
           // UPDATE
           const updateColumns = Object.keys(mainSubItem)
-            .filter(
-              (col) =>
-                col !== linkColumn.subColumn &&
-                col !== options.mainMarkerColumn &&
-                col !== "company_code"
-            )
+            .filter(col => col !== linkColumn.subColumn && col !== options.mainMarkerColumn && col !== "company_code")
             .map((col, idx) => `"${col}" = $${idx + 1}`)
             .join(", ");
-
+          
           const updateValues = Object.keys(mainSubItem)
-            .filter(
-              (col) =>
-                col !== linkColumn.subColumn &&
-                col !== options.mainMarkerColumn &&
-                col !== "company_code"
-            )
-            .map((col) => mainSubItem[col]);
-
+            .filter(col => col !== linkColumn.subColumn && col !== options.mainMarkerColumn && col !== "company_code")
+            .map(col => mainSubItem[col]);
+          
           if (updateColumns) {
             const updateQuery = `
               UPDATE "${tableName}"
@@ -2199,26 +2099,14 @@ export async function multiTableSave(
             }
 
             const updateResult = await client.query(updateQuery, updateParams);
-            subTableResults.push({
-              tableName,
-              type: "main",
-              data: updateResult.rows[0],
-            });
+            subTableResults.push({ tableName, type: "main", data: updateResult.rows[0] });
           } else {
-            subTableResults.push({
-              tableName,
-              type: "main",
-              data: existingResult.rows[0],
-            });
+            subTableResults.push({ tableName, type: "main", data: existingResult.rows[0] });
           }
         } else {
           // INSERT
-          const mainSubColumns = Object.keys(mainSubItem)
-            .map((col) => `"${col}"`)
-            .join(", ");
-          const mainSubPlaceholders = Object.keys(mainSubItem)
-            .map((_, idx) => `$${idx + 1}`)
-            .join(", ");
+          const mainSubColumns = Object.keys(mainSubItem).map(col => `"${col}"`).join(", ");
+          const mainSubPlaceholders = Object.keys(mainSubItem).map((_, idx) => `$${idx + 1}`).join(", ");
           const mainSubValues = Object.values(mainSubItem);
 
           const insertQuery = `
@@ -2228,11 +2116,7 @@ export async function multiTableSave(
           `;
 
           const insertResult = await client.query(insertQuery, mainSubValues);
-          subTableResults.push({
-            tableName,
-            type: "main",
-            data: insertResult.rows[0],
-          });
+          subTableResults.push({ tableName, type: "main", data: insertResult.rows[0] });
         }
       }
 
@@ -2248,12 +2132,8 @@ export async function multiTableSave(
           item.company_code = companyCode;
         }
 
-        const subColumns = Object.keys(item)
-          .map((col) => `"${col}"`)
-          .join(", ");
-        const subPlaceholders = Object.keys(item)
-          .map((_, idx) => `$${idx + 1}`)
-          .join(", ");
+        const subColumns = Object.keys(item).map(col => `"${col}"`).join(", ");
+        const subPlaceholders = Object.keys(item).map((_, idx) => `$${idx + 1}`).join(", ");
         const subValues = Object.values(item);
 
         const subInsertQuery = `
@@ -2262,16 +2142,9 @@ export async function multiTableSave(
           RETURNING *
         `;
 
-        logger.info(`서브 테이블 ${tableName} 아이템 저장:`, {
-          subInsertQuery,
-          subValuesCount: subValues.length,
-        });
+        logger.info(`서브 테이블 ${tableName} 아이템 저장:`, { subInsertQuery, subValuesCount: subValues.length });
         const subResult = await client.query(subInsertQuery, subValues);
-        subTableResults.push({
-          tableName,
-          type: "sub",
-          data: subResult.rows[0],
-        });
+        subTableResults.push({ tableName, type: "sub", data: subResult.rows[0] });
       }
 
       logger.info(`서브 테이블 ${tableName} 저장 완료`);
@@ -2312,11 +2185,8 @@ export async function multiTableSave(
 }
 
 /**
- * 두 테이블 간의 엔티티 관계 자동 감지
- * GET /api/table-management/tables/entity-relations?leftTable=xxx&rightTable=yyy
- *
- * column_labels에서 정의된 엔티티/카테고리 타입 설정을 기반으로
- * 두 테이블 간의 외래키 관계를 자동으로 감지합니다.
+ * 두 테이블 간 엔티티 관계 조회
+ * column_labels의 entity/category 타입 설정을 기반으로 두 테이블 간의 관계를 조회
  */
 export async function getTableEntityRelations(
   req: AuthenticatedRequest,
@@ -2325,55 +2195,94 @@ export async function getTableEntityRelations(
   try {
     const { leftTable, rightTable } = req.query;
 
-    logger.info(
-      `=== 테이블 엔티티 관계 조회 시작: ${leftTable} <-> ${rightTable} ===`
-    );
-
     if (!leftTable || !rightTable) {
-      const response: ApiResponse<null> = {
+      res.status(400).json({
         success: false,
         message: "leftTable과 rightTable 파라미터가 필요합니다.",
-        error: {
-          code: "MISSING_PARAMETERS",
-          details: "leftTable과 rightTable 쿼리 파라미터가 필요합니다.",
-        },
-      };
-      res.status(400).json(response);
+      });
       return;
     }
 
-    const tableManagementService = new TableManagementService();
-    const relations = await tableManagementService.detectTableEntityRelations(
-      String(leftTable),
-      String(rightTable)
-    );
+    logger.info("=== 테이블 엔티티 관계 조회 ===", { leftTable, rightTable });
 
-    logger.info(`테이블 엔티티 관계 조회 완료: ${relations.length}개 발견`);
+    // 두 테이블의 컬럼 라벨 정보 조회
+    const columnLabelsQuery = `
+      SELECT 
+        table_name,
+        column_name,
+        column_label,
+        web_type,
+        detail_settings
+      FROM column_labels
+      WHERE table_name IN ($1, $2)
+        AND web_type IN ('entity', 'category')
+    `;
 
-    const response: ApiResponse<any> = {
+    const result = await query(columnLabelsQuery, [leftTable, rightTable]);
+
+    // 관계 분석
+    const relations: Array<{
+      fromTable: string;
+      fromColumn: string;
+      toTable: string;
+      toColumn: string;
+      relationType: string;
+    }> = [];
+
+    for (const row of result) {
+      try {
+        const detailSettings = typeof row.detail_settings === "string" 
+          ? JSON.parse(row.detail_settings) 
+          : row.detail_settings;
+
+        if (detailSettings && detailSettings.referenceTable) {
+          const refTable = detailSettings.referenceTable;
+          const refColumn = detailSettings.referenceColumn || "id";
+          
+          // leftTable과 rightTable 간의 관계인지 확인
+          if (
+            (row.table_name === leftTable && refTable === rightTable) ||
+            (row.table_name === rightTable && refTable === leftTable)
+          ) {
+            relations.push({
+              fromTable: row.table_name,
+              fromColumn: row.column_name,
+              toTable: refTable,
+              toColumn: refColumn,
+              relationType: row.web_type,
+            });
+          }
+        }
+      } catch (parseError) {
+        logger.warn("detail_settings 파싱 오류:", { 
+          table: row.table_name, 
+          column: row.column_name,
+          error: parseError 
+        });
+      }
+    }
+
+    logger.info("테이블 엔티티 관계 조회 완료", { 
+      leftTable, 
+      rightTable, 
+      relationsCount: relations.length 
+    });
+
+    res.json({
       success: true,
-      message: `${relations.length}개의 엔티티 관계를 발견했습니다.`,
       data: {
-        leftTable: String(leftTable),
-        rightTable: String(rightTable),
+        leftTable,
+        rightTable,
         relations,
       },
-    };
-
-    res.status(200).json(response);
-  } catch (error) {
-    logger.error("테이블 엔티티 관계 조회 중 오류 발생:", error);
-
-    const response: ApiResponse<null> = {
+    });
+  } catch (error: any) {
+    logger.error("테이블 엔티티 관계 조회 실패:", error);
+    res.status(500).json({
       success: false,
-      message: "테이블 엔티티 관계 조회 중 오류가 발생했습니다.",
-      error: {
-        code: "ENTITY_RELATIONS_ERROR",
-        details: error instanceof Error ? error.message : "Unknown error",
-      },
-    };
-
-    res.status(500).json(response);
+      message: "테이블 엔티티 관계 조회에 실패했습니다.",
+      error: error.message,
+    });
   }
 }
 
diff --git a/backend-node/src/services/dataService.ts b/backend-node/src/services/dataService.ts
index 75c57673..8c6e63f0 100644
--- a/backend-node/src/services/dataService.ts
+++ b/backend-node/src/services/dataService.ts
@@ -254,7 +254,10 @@ class DataService {
           key !== "limit" &&
           key !== "offset" &&
           key !== "orderBy" &&
-          key !== "userLang"
+          key !== "userLang" &&
+          key !== "page" &&
+          key !== "pageSize" &&
+          key !== "size"
         ) {
           // 컬럼명 검증 (SQL 인젝션 방지)
           if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(key)) {
diff --git a/backend-node/src/services/screenManagementService.ts b/backend-node/src/services/screenManagementService.ts
index 40628f12..4891e353 100644
--- a/backend-node/src/services/screenManagementService.ts
+++ b/backend-node/src/services/screenManagementService.ts
@@ -2603,10 +2603,10 @@ export class ScreenManagementService {
       // 없으면 원본과 같은 회사에 복사
       const targetCompanyCode = copyData.targetCompanyCode || sourceScreen.company_code;
 
-      // 3. 화면 코드 중복 체크 (대상 회사 기준)
+      // 3. 화면 코드 중복 체크 (대상 회사 기준, 삭제되지 않은 화면만)
       const existingScreens = await client.query<any>(
         `SELECT screen_id FROM screen_definitions
-         WHERE screen_code = $1 AND company_code = $2
+         WHERE screen_code = $1 AND company_code = $2 AND deleted_date IS NULL
          LIMIT 1`,
         [copyData.screenCode, targetCompanyCode]
       );
diff --git a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
index 37c17d14..eb8b1c8e 100644
--- a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
@@ -54,6 +54,19 @@ export default function ScreenManagementPage() {
     loadScreens();
   }, [loadScreens]);
 
+  // 화면 목록 새로고침 이벤트 리스너
+  useEffect(() => {
+    const handleScreenListRefresh = () => {
+      console.log("🔄 화면 목록 새로고침 이벤트 수신");
+      loadScreens();
+    };
+
+    window.addEventListener("screen-list-refresh", handleScreenListRefresh);
+    return () => {
+      window.removeEventListener("screen-list-refresh", handleScreenListRefresh);
+    };
+  }, [loadScreens]);
+
   // URL 쿼리 파라미터로 화면 디자이너 자동 열기
   useEffect(() => {
     const openDesignerId = searchParams.get("openDesigner");
@@ -247,5 +260,3 @@ export default function ScreenManagementPage() {
     </div>
   );
 }
-
-
diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx
index 133a7256..dba52052 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -34,7 +34,7 @@ function ScreenViewPage() {
 
   // URL 쿼리에서 menuObjid 가져오기 (메뉴 스코프)
   const menuObjid = searchParams.get("menuObjid") ? parseInt(searchParams.get("menuObjid")!) : undefined;
-  
+
   // URL 쿼리에서 프리뷰용 company_code 가져오기
   const previewCompanyCode = searchParams.get("company_code");
   
@@ -115,7 +115,7 @@ function ScreenViewPage() {
   // 편집 모달 이벤트 리스너 등록
   useEffect(() => {
     const handleOpenEditModal = (event: CustomEvent) => {
-      // console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
+      console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
 
       setEditModalConfig({
         screenId: event.detail.screenId,
@@ -327,8 +327,8 @@ function ScreenViewPage() {
           newScale = Math.min(scaleX, scaleY, 1); // 최대 1배율
         } else {
           // 일반 모드: 가로 기준 스케일 (좌우 여백 16px씩 고정)
-          const MARGIN_X = 32;
-          const availableWidth = containerWidth - MARGIN_X;
+        const MARGIN_X = 32;
+        const availableWidth = containerWidth - MARGIN_X;
           newScale = availableWidth / designWidth;
         }
 
@@ -408,10 +408,9 @@ function ScreenViewPage() {
 
           {/* 절대 위치 기반 렌더링 (화면관리와 동일한 방식) */}
           {layoutReady && layout && layout.components.length > 0 ? (
-            <ScreenMultiLangProvider components={layout.components} companyCode={companyCode}>
-              <div
-                className="bg-background relative"
-                style={{
+            <div
+              className="bg-background relative"
+              style={{
                 width: `${screenWidth}px`,
                 height: `${screenHeight}px`,
                 minWidth: `${screenWidth}px`,
@@ -854,8 +853,7 @@ function ScreenViewPage() {
                   </>
                 );
               })()}
-              </div>
-            </ScreenMultiLangProvider>
+            </div>
           ) : (
             // 빈 화면일 때
             <div className="bg-background flex items-center justify-center" style={{ minHeight: screenHeight }}>
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 1614c9b8..a252eaff 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -388,237 +388,6 @@ select {
   border-spacing: 0 !important;
 }
 
-/* ===== POP (Production Operation Panel) Styles ===== */
-
-/* POP 전용 다크 테마 변수 */
-.pop-dark {
-  /* 배경 색상 */
-  --pop-bg-deepest: 8 12 21;
-  --pop-bg-deep: 10 15 28;
-  --pop-bg-primary: 13 19 35;
-  --pop-bg-secondary: 18 26 47;
-  --pop-bg-tertiary: 25 35 60;
-  --pop-bg-elevated: 32 45 75;
-
-  /* 네온 강조색 */
-  --pop-neon-cyan: 0 212 255;
-  --pop-neon-cyan-bright: 0 240 255;
-  --pop-neon-cyan-dim: 0 150 190;
-  --pop-neon-pink: 255 0 102;
-  --pop-neon-purple: 138 43 226;
-
-  /* 상태 색상 */
-  --pop-success: 0 255 136;
-  --pop-success-dim: 0 180 100;
-  --pop-warning: 255 170 0;
-  --pop-warning-dim: 200 130 0;
-  --pop-danger: 255 51 51;
-  --pop-danger-dim: 200 40 40;
-
-  /* 텍스트 색상 */
-  --pop-text-primary: 255 255 255;
-  --pop-text-secondary: 180 195 220;
-  --pop-text-muted: 100 120 150;
-
-  /* 테두리 색상 */
-  --pop-border: 40 55 85;
-  --pop-border-light: 55 75 110;
-}
-
-/* POP 전용 라이트 테마 변수 */
-.pop-light {
-  --pop-bg-deepest: 245 247 250;
-  --pop-bg-deep: 240 243 248;
-  --pop-bg-primary: 250 251 253;
-  --pop-bg-secondary: 255 255 255;
-  --pop-bg-tertiary: 245 247 250;
-  --pop-bg-elevated: 235 238 245;
-
-  --pop-neon-cyan: 0 122 204;
-  --pop-neon-cyan-bright: 0 140 230;
-  --pop-neon-cyan-dim: 0 100 170;
-  --pop-neon-pink: 220 38 127;
-  --pop-neon-purple: 118 38 200;
-
-  --pop-success: 22 163 74;
-  --pop-success-dim: 21 128 61;
-  --pop-warning: 245 158 11;
-  --pop-warning-dim: 217 119 6;
-  --pop-danger: 220 38 38;
-  --pop-danger-dim: 185 28 28;
-
-  --pop-text-primary: 15 23 42;
-  --pop-text-secondary: 71 85 105;
-  --pop-text-muted: 148 163 184;
-
-  --pop-border: 226 232 240;
-  --pop-border-light: 203 213 225;
-}
-
-/* POP 배경 그리드 패턴 */
-.pop-bg-pattern::before {
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background:
-    repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
-    repeating-linear-gradient(0deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
-    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 60%);
-  pointer-events: none;
-  z-index: 0;
-}
-
-.pop-light .pop-bg-pattern::before {
-  background:
-    repeating-linear-gradient(90deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
-    repeating-linear-gradient(0deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
-    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 122, 204, 0.05) 0%, transparent 60%);
-}
-
-/* POP 글로우 효과 */
-.pop-glow-cyan {
-  box-shadow:
-    0 0 20px rgba(0, 212, 255, 0.5),
-    0 0 40px rgba(0, 212, 255, 0.3);
-}
-
-.pop-glow-cyan-strong {
-  box-shadow:
-    0 0 10px rgba(0, 212, 255, 0.8),
-    0 0 30px rgba(0, 212, 255, 0.5),
-    0 0 50px rgba(0, 212, 255, 0.3);
-}
-
-.pop-glow-success {
-  box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
-}
-
-.pop-glow-warning {
-  box-shadow: 0 0 15px rgba(255, 170, 0, 0.5);
-}
-
-.pop-glow-danger {
-  box-shadow: 0 0 15px rgba(255, 51, 51, 0.5);
-}
-
-/* POP 펄스 글로우 애니메이션 */
-@keyframes pop-pulse-glow {
-  0%,
-  100% {
-    box-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
-  }
-  50% {
-    box-shadow:
-      0 0 20px rgba(0, 212, 255, 0.8),
-      0 0 30px rgba(0, 212, 255, 0.4);
-  }
-}
-
-.pop-animate-pulse-glow {
-  animation: pop-pulse-glow 2s ease-in-out infinite;
-}
-
-/* POP 프로그레스 바 샤인 애니메이션 */
-@keyframes pop-progress-shine {
-  0% {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-}
-
-.pop-progress-shine::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 20px;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
-  animation: pop-progress-shine 1.5s ease-in-out infinite;
-}
-
-/* POP 스크롤바 스타일 */
-.pop-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.pop-scrollbar::-webkit-scrollbar-track {
-  background: rgb(var(--pop-bg-secondary));
-}
-
-.pop-scrollbar::-webkit-scrollbar-thumb {
-  background: rgb(var(--pop-border-light));
-  border-radius: 9999px;
-}
-
-.pop-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: rgb(var(--pop-neon-cyan-dim));
-}
-
-/* POP 스크롤바 숨기기 */
-.pop-hide-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-.pop-hide-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-/* ===== Marching Ants Animation (Excel Copy Border) ===== */
-@keyframes marching-ants-h {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 16px 0;
-  }
-}
-
-@keyframes marching-ants-v {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 0 16px;
-  }
-}
-
-.animate-marching-ants-h {
-  background: repeating-linear-gradient(
-    90deg,
-    hsl(var(--primary)) 0,
-    hsl(var(--primary)) 4px,
-    transparent 4px,
-    transparent 8px
-  );
-  background-size: 16px 2px;
-  animation: marching-ants-h 0.4s linear infinite;
-}
-
-.animate-marching-ants-v {
-  background: repeating-linear-gradient(
-    180deg,
-    hsl(var(--primary)) 0,
-    hsl(var(--primary)) 4px,
-    transparent 4px,
-    transparent 8px
-  );
-  background-size: 2px 16px;
-  animation: marching-ants-v 0.4s linear infinite;
-}
-
 /* ===== 저장 테이블 막대기 애니메이션 ===== */
 @keyframes saveBarDrop {
   0% {
diff --git a/frontend/components/screen/CopyScreenModal.tsx b/frontend/components/screen/CopyScreenModal.tsx
index f5e71c4c..5590cef4 100644
--- a/frontend/components/screen/CopyScreenModal.tsx
+++ b/frontend/components/screen/CopyScreenModal.tsx
@@ -20,13 +20,29 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Loader2, Copy, Link as LinkIcon, Trash2, AlertCircle } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Loader2, Copy, Link as LinkIcon, Trash2, AlertCircle, AlertTriangle, Check, ChevronsUpDown, FolderTree } from "lucide-react";
 import { ScreenDefinition } from "@/types/screen";
 import { screenApi } from "@/lib/api/screen";
+import { ScreenGroup, addScreenToGroup, createScreenGroup } from "@/lib/api/screenGroup";
 import { apiClient } from "@/lib/api/client";
 import { toast } from "sonner";
 import { useAuth } from "@/hooks/useAuth";
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
 
 interface LinkedModalScreen {
   screenId: number;
@@ -45,7 +61,13 @@ interface CopyScreenModalProps {
   isOpen: boolean;
   onClose: () => void;
   sourceScreen: ScreenDefinition | null;
-  onCopySuccess: () => void;
+  onCopySuccess: () => void | Promise<void>;
+  // 트리 구조 지원용 추가 props
+  mode?: "screen" | "group"; // 단일 화면 복제 또는 그룹 복제
+  sourceGroup?: ScreenGroup | null; // 그룹 복제 시 원본 그룹
+  groups?: ScreenGroup[]; // 대상 그룹 목록
+  targetGroupId?: number | null; // 초기 선택된 대상 그룹
+  allScreens?: ScreenDefinition[]; // 그룹 복제 시 사용할 전체 화면 목록
 }
 
 export default function CopyScreenModal({
@@ -53,6 +75,11 @@ export default function CopyScreenModal({
   onClose,
   sourceScreen,
   onCopySuccess,
+  mode = "screen",
+  sourceGroup,
+  groups = [],
+  targetGroupId: initialTargetGroupId,
+  allScreens = [],
 }: CopyScreenModalProps) {
   const { user } = useAuth();
   // 최고 관리자 판별: userType이 "SUPER_ADMIN" 또는 companyCode가 "*"
@@ -76,6 +103,21 @@ export default function CopyScreenModal({
   const [screenCode, setScreenCode] = useState("");
   const [description, setDescription] = useState("");
 
+  // 대상 그룹 선택 (트리 구조용)
+  const [selectedTargetGroupId, setSelectedTargetGroupId] = useState<number | null>(null);
+  const [isGroupSelectOpen, setIsGroupSelectOpen] = useState(false);
+
+  // 그룹 복제용 상태
+  const [newGroupName, setNewGroupName] = useState("");
+  const [groupParentId, setGroupParentId] = useState<number | null>(null);
+  const [isParentGroupSelectOpen, setIsParentGroupSelectOpen] = useState(false);
+  const [groupDisplayOrder, setGroupDisplayOrder] = useState<number>(0);
+
+  // 그룹 일괄 이름 변경 (고급 옵션) - 찾기/대체 방식
+  const [useGroupBulkRename, setUseGroupBulkRename] = useState(false);
+  const [groupFindText, setGroupFindText] = useState(""); // 찾을 텍스트
+  const [groupReplaceText, setGroupReplaceText] = useState(""); // 대체할 텍스트
+
   // 대상 회사 선택 (최고 관리자 전용)
   const [targetCompanyCode, setTargetCompanyCode] = useState<string>("");
   const [companies, setCompanies] = useState<CompanyInfo[]>([]);
@@ -90,8 +132,12 @@ export default function CopyScreenModal({
   const [removeText, setRemoveText] = useState("");
   const [addPrefix, setAddPrefix] = useState("");
 
+  // 그룹 복제 모드: "all" (전체), "folder_only" (폴더만), "screen_only" (화면만)
+  const [groupCopyMode, setGroupCopyMode] = useState<"all" | "folder_only" | "screen_only">("all");
+
   // 복사 중 상태
   const [isCopying, setIsCopying] = useState(false);
+  const [copyProgress, setCopyProgress] = useState({ current: 0, total: 0, message: "" });
 
   // 최고 관리자인 경우 회사 목록 조회
   useEffect(() => {
@@ -104,24 +150,66 @@ export default function CopyScreenModal({
 
   // 모달이 열릴 때 초기값 설정 및 연결된 화면 감지
   useEffect(() => {
-    console.log("🔍 모달 초기화:", { isOpen, sourceScreen, isSuperAdmin });
-    if (isOpen && sourceScreen) {
-      // 메인 화면 정보 설정
+    console.log("🔍 모달 초기화:", { isOpen, sourceScreen, sourceGroup, mode, isSuperAdmin });
+    
+    if (isOpen && mode === "screen" && sourceScreen) {
+      // 단일 화면 복제 모드
       setScreenName(`${sourceScreen.screenName} (복사본)`);
       setDescription(sourceScreen.description || "");
 
       // 대상 회사 코드 설정
       if (isSuperAdmin) {
-        setTargetCompanyCode(sourceScreen.companyCode); // 기본값: 원본과 같은 회사
+        setTargetCompanyCode(sourceScreen.companyCode);
       } else {
         setTargetCompanyCode(sourceScreen.companyCode);
       }
 
+      // 대상 그룹 초기화 (전달받은 값 또는 null)
+      setSelectedTargetGroupId(initialTargetGroupId ?? null);
+
       // 연결된 모달 화면 감지
       console.log("✅ 연결된 모달 화면 감지 시작");
       detectLinkedModals();
+    } else if (isOpen && mode === "group" && sourceGroup) {
+      // 그룹 복제 모드
+      
+      // 1. 그룹명 중복 체크 - 같은 부모 그룹 내에 동일한 이름이 있는지 확인
+      const parentId = sourceGroup.parent_group_id;
+      const siblingGroups = groups.filter(g => g.parent_group_id === parentId);
+      const existingNames = siblingGroups.map(g => g.group_name);
+      
+      let newName = sourceGroup.group_name;
+      if (existingNames.includes(newName)) {
+        // 겹치는 이름이 있으면 "(복제)" 추가
+        newName = `${sourceGroup.group_name} (복제)`;
+        // "(복제)"도 겹치면 숫자 추가
+        let copyNum = 2;
+        while (existingNames.includes(newName)) {
+          newName = `${sourceGroup.group_name} (복제 ${copyNum})`;
+          copyNum++;
+        }
+      }
+      setNewGroupName(newName);
+      
+      setGroupParentId(sourceGroup.parent_group_id ?? null);
+      
+      // 2. 상위 그룹의 회사 코드로 대상 회사 자동 설정
+      let autoCompanyCode = sourceGroup.company_code || "";
+      if (sourceGroup.parent_group_id) {
+        const parentGroup = groups.find(g => g.id === sourceGroup.parent_group_id);
+        if (parentGroup?.company_code) {
+          autoCompanyCode = parentGroup.company_code;
+        }
+      }
+      setTargetCompanyCode(autoCompanyCode);
+      
+      setGroupDisplayOrder(sourceGroup.display_order ?? 0);
+      setUseGroupBulkRename(false);
+      setGroupFindText("");
+      setGroupReplaceText("");
+      setGroupCopyMode("all");
     }
-  }, [isOpen, sourceScreen, isSuperAdmin]);
+  }, [isOpen, sourceScreen, sourceGroup, mode, isSuperAdmin, initialTargetGroupId]);
 
   // 일괄 변경 설정이 변경될 때 화면명 자동 업데이트
   useEffect(() => {
@@ -194,11 +282,15 @@ export default function CopyScreenModal({
     try {
       setLoadingCompanies(true);
       const response = await apiClient.get("/admin/companies");
+      console.log("📋 회사 목록 API 응답:", response.data);
       const data = response.data.data || response.data || [];
-      setCompanies(data.map((c: any) => ({
+      console.log("📋 회사 목록 데이터:", data);
+      const mappedCompanies = data.map((c: any) => ({
         companyCode: c.company_code || c.companyCode,
         companyName: c.company_name || c.companyName,
-      })));
+      }));
+      console.log("📋 매핑된 회사 목록:", mappedCompanies);
+      setCompanies(mappedCompanies);
     } catch (error) {
       console.error("회사 목록 조회 실패:", error);
       toast.error("회사 목록을 불러오는데 실패했습니다.");
@@ -331,6 +423,82 @@ export default function CopyScreenModal({
     };
   };
 
+  // 그룹 경로 가져오기
+  const getGroupPath = (groupId: number | null): string => {
+    if (groupId === null) return "";
+    const group = groups.find((g) => g.id === groupId);
+    if (!group) return "";
+    
+    const path: string[] = [group.group_name];
+    let currentParentId = group.parent_group_id;
+    
+    while (currentParentId) {
+      const parent = groups.find((g) => g.id === currentParentId);
+      if (parent) {
+        path.unshift(parent.group_name);
+        currentParentId = parent.parent_group_id;
+      } else {
+        break;
+      }
+    }
+    
+    return path.join(" > ");
+  };
+
+  // 그룹 레벨 가져오기 (들여쓰기용)
+  const getGroupLevel = (groupId: number | null): number => {
+    if (groupId === null) return 0;
+    const group = groups.find((g) => g.id === groupId);
+    if (!group) return 0;
+    
+    let level = 0;
+    let currentParentId = group.parent_group_id;
+    
+    while (currentParentId) {
+      level++;
+      const parent = groups.find((g) => g.id === currentParentId);
+      if (parent) {
+        currentParentId = parent.parent_group_id;
+      } else {
+        break;
+      }
+    }
+    
+    return level;
+  };
+
+  // 그룹 정렬 (계층 구조 유지)
+  const getSortedGroups = (): ScreenGroup[] => {
+    if (!groups || groups.length === 0) return [];
+    
+    const result: ScreenGroup[] = [];
+    
+    const addChildren = (parentId: number | null | undefined) => {
+      const children = groups.filter((g) => 
+        (g.parent_group_id === parentId) || 
+        (parentId === null && !g.parent_group_id)
+      );
+      for (const child of children) {
+        result.push(child);
+        addChildren(child.id);
+      }
+    };
+    
+    addChildren(null);
+    
+    // 정렬 결과가 비어있으면 원본 그룹 반환 (parent_group_id가 없는 경우)
+    return result.length > 0 ? result : groups;
+  };
+
+  // 고유한 화면코드 생성 (중복 시 _COPY 추가)
+  const generateUniqueScreenCode = (baseCode: string, existingCodes: Set<string>): string => {
+    let newCode = `${baseCode}_COPY`;
+    while (existingCodes.has(newCode)) {
+      newCode = `${newCode}_COPY`;
+    }
+    return newCode;
+  };
+
   // 화면 복사 실행
   const handleCopy = async () => {
     if (!sourceScreen) return;
@@ -369,6 +537,7 @@ export default function CopyScreenModal({
         companyCode,
         screenName.trim()
       );
+      
       if (isMainDuplicate) {
         toast.error(`"${screenName}" 화면명이 이미 존재합니다. 다른 이름을 입력해주세요.`);
         setIsCopying(false);
@@ -407,15 +576,330 @@ export default function CopyScreenModal({
 
       console.log("✅ 복사 완료:", result);
 
+      // 대상 그룹이 선택된 경우 복제된 메인 화면을 그룹에 추가
+      if (selectedTargetGroupId && result.mainScreen?.screenId) {
+        try {
+          await addScreenToGroup({
+            group_id: selectedTargetGroupId,
+            screen_id: result.mainScreen.screenId,
+            screen_role: "MAIN",
+            display_order: 1,
+          });
+          console.log(`✅ 복제된 화면을 그룹(${selectedTargetGroupId})에 추가 완료`);
+        } catch (groupError) {
+          console.error("그룹에 화면 추가 실패:", groupError);
+          // 그룹 추가 실패해도 복제는 성공했으므로 계속 진행
+        }
+      }
+
       toast.success(
         `화면 복사가 완료되었습니다! (메인 1개 + 모달 ${result.modalScreens.length}개)`
       );
       
-      onCopySuccess();
+      // 새로고침 완료 후 모달 닫기
+      await onCopySuccess();
       handleClose();
     } catch (error: any) {
       console.error("화면 복사 실패:", error);
-      const errorMessage = error.response?.data?.message || "화면 복사에 실패했습니다.";
+      const errorMessage = error.response?.data?.message || error.message || "화면 복사에 실패했습니다.";
+      toast.error(errorMessage);
+    } finally {
+      setIsCopying(false);
+    }
+  };
+
+  // 이름 변환 헬퍼 함수 (일괄 이름 변경 적용)
+  const transformName = (originalName: string, isRootGroup: boolean = false): string => {
+    // 루트 그룹은 사용자가 직접 입력한 이름 사용
+    if (isRootGroup) {
+      return newGroupName.trim();
+    }
+    
+    // 일괄 이름 변경이 활성화된 경우 (찾기/대체 방식)
+    if (useGroupBulkRename && groupFindText) {
+      // 찾을 텍스트를 대체할 텍스트로 변경
+      return originalName.replace(new RegExp(groupFindText, "g"), groupReplaceText);
+    }
+    
+    // 기본: "(복제)" 붙이기
+    return `${originalName} (복제)`;
+  };
+
+  // 재귀적 그룹 복제 함수 (하위 그룹 + 화면 전부 복제)
+  const copyGroupRecursively = async (
+    sourceGroupData: ScreenGroup,
+    parentGroupId: number | null,
+    targetCompany: string,
+    screenCodes: string[], // 미리 생성된 화면 코드 배열
+    codeIndex: { current: number }, // 현재 사용할 코드 인덱스 (참조로 전달)
+    stats: { groups: number; screens: number },
+    totalScreenCount: number // 전체 화면 수 (진행률 표시용)
+  ): Promise<void> => {
+    // 1. 현재 그룹 생성 (원본 display_order 유지)
+    const timestamp = Date.now();
+    const randomSuffix = Math.floor(Math.random() * 1000);
+    const newGroupCode = `${targetCompany}_GROUP_${timestamp}_${randomSuffix}`;
+    
+    console.log(`📁 그룹 생성: ${sourceGroupData.group_name} (복제)`);
+    
+    const newGroupResponse = await createScreenGroup({
+      group_name: transformName(sourceGroupData.group_name), // 일괄 이름 변경 적용
+      group_code: newGroupCode,
+      parent_group_id: parentGroupId,
+      target_company_code: targetCompany,
+      display_order: sourceGroupData.display_order, // 원본 정렬순서 유지
+    });
+
+    if (!newGroupResponse.success || !newGroupResponse.data) {
+      throw new Error(newGroupResponse.error || `그룹 생성 실패: ${sourceGroupData.group_name}`);
+    }
+
+    const newGroup = newGroupResponse.data;
+    stats.groups++;
+    console.log(`✅ 그룹 생성 완료: ${newGroup.group_name} (id: ${newGroup.id})`);
+
+    // 2. 현재 그룹의 화면들 복제 (원본 display_order 유지) - folder_only 모드가 아닌 경우만
+    if (groupCopyMode !== "folder_only") {
+      const sourceScreensInfo = sourceGroupData.screens || [];
+      
+      // 화면 정보와 display_order를 함께 매핑
+      const screensWithOrder = sourceScreensInfo.map((s: any) => {
+        const screenId = typeof s === 'object' ? s.screen_id : s;
+        const displayOrder = typeof s === 'object' ? s.display_order : 0;
+        const screenRole = typeof s === 'object' ? s.screen_role : 'MAIN';
+        const screenData = allScreens.find((sc) => sc.screenId === screenId);
+        return { screenId, displayOrder, screenRole, screenData };
+      }).filter(item => item.screenData); // 화면 데이터가 있는 것만
+
+      // display_order 순으로 정렬
+      screensWithOrder.sort((a, b) => (a.displayOrder || 0) - (b.displayOrder || 0));
+
+    for (const { screenData: screen, displayOrder, screenRole } of screensWithOrder) {
+      try {
+        // 미리 생성된 화면 코드 사용
+        const newScreenCode = screenCodes[codeIndex.current];
+        codeIndex.current++;
+
+        // 진행률 업데이트
+        setCopyProgress({ 
+          current: stats.screens + 1, 
+          total: totalScreenCount, 
+          message: `화면 복제 중: ${screen.screenName}` 
+        });
+
+        console.log(`  📄 화면 복제: ${screen.screenName} → ${newScreenCode}`);
+
+        const result = await screenApi.copyScreenWithModals(screen.screenId, {
+          targetCompanyCode: targetCompany,
+          mainScreen: {
+            screenName: transformName(screen.screenName), // 일괄 이름 변경 적용
+            screenCode: newScreenCode,
+            description: screen.description || "",
+          },
+          modalScreens: [],
+        });
+
+        if (result.mainScreen?.screenId) {
+          await addScreenToGroup({
+            group_id: newGroup.id,
+            screen_id: result.mainScreen.screenId,
+            screen_role: screenRole || "MAIN",
+            display_order: displayOrder, // 원본 정렬순서 유지
+          });
+          stats.screens++;
+          console.log(`  ✅ 화면 복제 완료: ${result.mainScreen.screenName}`);
+        }
+        } catch (screenError) {
+          console.error(`  ❌ 화면 복제 실패 (${screen.screenCode}):`, screenError);
+        }
+      }
+    }
+
+    // 3. 하위 그룹들 재귀 복제 (display_order 순으로 정렬) - screen_only 모드가 아닌 경우만
+    if (groupCopyMode !== "screen_only") {
+      const childGroups = groups
+        .filter(g => g.parent_group_id === sourceGroupData.id)
+        .sort((a, b) => (a.display_order || 0) - (b.display_order || 0));
+      console.log(`📂 하위 그룹 ${childGroups.length}개 발견:`, childGroups.map(g => g.group_name));
+      
+      for (const childGroup of childGroups) {
+        await copyGroupRecursively(
+          childGroup,
+          newGroup.id,
+          targetCompany,
+          screenCodes,
+          codeIndex,
+          stats,
+          totalScreenCount
+        );
+      }
+    }
+  };
+
+  // 그룹 내 모든 화면 수 계산 (재귀적)
+  const countAllScreensInGroup = (groupId: number): number => {
+    const group = groups.find(g => g.id === groupId);
+    if (!group) return 0;
+    
+    const directScreens = group.screens?.length || 0;
+    const childGroups = groups.filter(g => g.parent_group_id === groupId);
+    const childScreens = childGroups.reduce((sum, child) => sum + countAllScreensInGroup(child.id), 0);
+    
+    return directScreens + childScreens;
+  };
+
+  // 그룹 복제 실행
+  const handleCopyGroup = async () => {
+    if (!sourceGroup) return;
+
+    if (!newGroupName.trim()) {
+      toast.error("그룹명을 입력해주세요.");
+      return;
+    }
+
+    // 최고 관리자인 경우 대상 회사 필수
+    if (isSuperAdmin && !targetCompanyCode) {
+      toast.error("대상 회사를 선택해주세요.");
+      return;
+    }
+
+    try {
+      setIsCopying(true);
+      setCopyProgress({ current: 0, total: 0, message: "복제 준비 중..." });
+
+      const finalCompanyCode = targetCompanyCode || sourceGroup.company_code;
+      const stats = { groups: 0, screens: 0 };
+      
+      console.log("🔄 그룹 복제 시작 (재귀적):", { 
+        sourceGroup: sourceGroup.group_name, 
+        targetCompany: finalCompanyCode,
+      });
+
+      // 1. 복제할 전체 화면 수 계산 (folder_only 모드가 아닌 경우만)
+      const totalScreenCount = groupCopyMode === "folder_only" ? 0 : countAllScreensInGroup(sourceGroup.id);
+      setCopyProgress({ current: 0, total: totalScreenCount, message: "화면 코드 생성 중..." });
+      console.log(`📊 복제할 총 화면 수: ${totalScreenCount}개 (모드: ${groupCopyMode})`);
+
+      // 2. 필요한 화면 코드들을 API로 미리 생성 (DB에서 고유 코드 보장)
+      let screenCodes: string[] = [];
+      if (totalScreenCount > 0) {
+        console.log(`🔧 화면 코드 ${totalScreenCount}개 생성 중...`);
+        screenCodes = await screenApi.generateMultipleScreenCodes(finalCompanyCode, totalScreenCount);
+        console.log(`✅ 화면 코드 생성 완료:`, screenCodes);
+      }
+      const codeIndex = { current: 0 }; // 참조로 전달해서 재귀 호출간 공유
+
+      // 3. 루트 그룹 생성 (일괄 변경 활성화 시 transformName 적용)
+      const timestamp = Date.now();
+      const newGroupCode = `${finalCompanyCode}_GROUP_${timestamp}`;
+      
+      // 일괄 이름 변경이 활성화된 경우 원본 이름에 변환 적용
+      const rootGroupName = useGroupBulkRename && groupFindText
+        ? transformName(sourceGroup.group_name)
+        : newGroupName.trim();
+      
+      const newGroupResponse = await createScreenGroup({
+        group_name: rootGroupName,
+        group_code: newGroupCode,
+        parent_group_id: groupParentId,
+        target_company_code: finalCompanyCode,
+        display_order: groupDisplayOrder, // 사용자가 입력한 정렬 순서
+      });
+
+      if (!newGroupResponse.success || !newGroupResponse.data) {
+        throw new Error(newGroupResponse.error || "그룹 생성 실패");
+      }
+
+      const newRootGroup = newGroupResponse.data;
+      stats.groups++;
+      console.log("✅ 루트 그룹 생성 완료:", newRootGroup.group_name);
+
+      // 4. 원본 그룹의 화면들 복제 (루트 레벨, 원본 display_order 유지) - folder_only 모드가 아닌 경우만
+      if (groupCopyMode !== "folder_only") {
+        const sourceScreensInfo = sourceGroup.screens || [];
+        
+        // 화면 정보와 display_order를 함께 매핑
+        const screensWithOrder = sourceScreensInfo.map((s: any) => {
+          const screenId = typeof s === 'object' ? s.screen_id : s;
+          const displayOrder = typeof s === 'object' ? s.display_order : 0;
+          const screenRole = typeof s === 'object' ? s.screen_role : 'MAIN';
+          const screenData = allScreens.find((sc) => sc.screenId === screenId);
+          return { screenId, displayOrder, screenRole, screenData };
+        }).filter(item => item.screenData);
+
+      // display_order 순으로 정렬
+      screensWithOrder.sort((a, b) => (a.displayOrder || 0) - (b.displayOrder || 0));
+
+      for (const { screenData: screen, displayOrder, screenRole } of screensWithOrder) {
+        try {
+          // 미리 생성된 화면 코드 사용
+          const newScreenCode = screenCodes[codeIndex.current];
+          codeIndex.current++;
+
+          // 진행률 업데이트
+          setCopyProgress({ 
+            current: stats.screens + 1, 
+            total: totalScreenCount, 
+            message: `화면 복제 중: ${screen.screenName}` 
+          });
+
+          console.log(`📄 화면 복제: ${screen.screenName} → ${newScreenCode}`);
+
+          const result = await screenApi.copyScreenWithModals(screen.screenId, {
+            targetCompanyCode: finalCompanyCode,
+            mainScreen: {
+              screenName: transformName(screen.screenName), // 일괄 이름 변경 적용
+              screenCode: newScreenCode,
+              description: screen.description || "",
+            },
+            modalScreens: [],
+          });
+
+          if (result.mainScreen?.screenId) {
+            await addScreenToGroup({
+              group_id: newRootGroup.id,
+              screen_id: result.mainScreen.screenId,
+              screen_role: screenRole || "MAIN",
+              display_order: displayOrder, // 원본 정렬순서 유지
+            });
+            stats.screens++;
+            console.log(`✅ 화면 복제 완료: ${result.mainScreen.screenName}`);
+          }
+          } catch (screenError) {
+            console.error(`화면 복제 실패 (${screen.screenCode}):`, screenError);
+          }
+        }
+      }
+
+      // 5. 하위 그룹들 재귀 복제 (display_order 순으로 정렬) - screen_only 모드가 아닌 경우만
+      if (groupCopyMode !== "screen_only") {
+        const childGroups = groups
+          .filter(g => g.parent_group_id === sourceGroup.id)
+          .sort((a, b) => (a.display_order || 0) - (b.display_order || 0));
+        console.log(`📂 하위 그룹 ${childGroups.length}개 발견:`, childGroups.map(g => g.group_name));
+        
+        for (const childGroup of childGroups) {
+          await copyGroupRecursively(
+            childGroup,
+            newRootGroup.id,
+            finalCompanyCode,
+            screenCodes,
+            codeIndex,
+            stats,
+            totalScreenCount
+          );
+        }
+      }
+
+      toast.success(
+        `그룹 복제가 완료되었습니다! (그룹 ${stats.groups}개 + 화면 ${stats.screens}개)`
+      );
+
+      await onCopySuccess();
+      handleClose();
+    } catch (error: any) {
+      console.error("그룹 복제 실패:", error);
+      const errorMessage = error.response?.data?.message || "그룹 복제에 실패했습니다.";
       toast.error(errorMessage);
     } finally {
       setIsCopying(false);
@@ -429,272 +913,571 @@ export default function CopyScreenModal({
     setDescription("");
     setTargetCompanyCode("");
     setLinkedScreens([]);
+    setSelectedTargetGroupId(null);
+    setNewGroupName("");
+    setGroupParentId(null);
+    setGroupDisplayOrder(0);
+    setUseGroupBulkRename(false);
+    setGroupFindText("");
+    setGroupReplaceText("");
     onClose();
   };
 
+  // 그룹 복제 모드 렌더링
+  if (mode === "group") {
+    return (
+      <Dialog open={isOpen} onOpenChange={handleClose}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          {/* 로딩 오버레이 */}
+          {isCopying && (
+            <div className="absolute inset-0 z-50 flex flex-col items-center justify-center rounded-lg bg-background/90 backdrop-blur-sm">
+              <Loader2 className="h-10 w-10 animate-spin text-primary" />
+              <p className="mt-4 text-sm font-medium">{copyProgress.message}</p>
+              {copyProgress.total > 0 && (
+                <>
+                  <div className="mt-3 h-2 w-48 overflow-hidden rounded-full bg-secondary">
+                    <div
+                      className="h-full bg-primary transition-all duration-300"
+                      style={{ width: `${Math.round((copyProgress.current / copyProgress.total) * 100)}%` }}
+                    />
+                  </div>
+                  <p className="mt-2 text-xs text-muted-foreground">
+                    {copyProgress.current} / {copyProgress.total} 화면
+                  </p>
+                </>
+              )}
+            </div>
+          )}
+          
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
+              <FolderTree className="h-5 w-5" />
+              그룹 복제
+            </DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              "{sourceGroup?.group_name}" 그룹을 복제합니다. 그룹 내 모든 화면도 함께 복제됩니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3 sm:space-y-4">
+            {/* 대분류 경고 (최상위 그룹인 경우) */}
+            {sourceGroup && !sourceGroup.parent_group_id && (
+              <div className="rounded-md border border-amber-300 bg-amber-50 p-3">
+                <div className="flex items-start gap-2">
+                  <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0 text-amber-600" />
+                  <div>
+                    <h4 className="text-sm font-medium text-amber-800">대분류 폴더 복제</h4>
+                    <p className="mt-1 text-xs text-amber-700">
+                      이 폴더는 최상위(대분류) 폴더입니다. 복제 시 모든 하위 폴더와 화면이 함께 복제됩니다.
+                      데이터 양이 많을 경우 복제에 시간이 소요될 수 있습니다.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* 원본 그룹 정보 */}
+            <div className="rounded-md bg-gray-50 p-3">
+              <h4 className="mb-2 text-sm font-medium text-gray-700">원본 그룹 정보</h4>
+              <div className="space-y-1 text-sm text-muted-foreground">
+                <div>
+                  <span className="font-medium">그룹명:</span> {sourceGroup?.group_name}
+                </div>
+                <div>
+                  <span className="font-medium">정렬 순서:</span> {sourceGroup?.display_order ?? 0}
+                </div>
+                <div>
+                  <span className="font-medium">직접 포함 화면:</span> {sourceGroup?.screens?.length || 0}개
+                </div>
+                {(() => {
+                  // 하위 그룹 수 계산
+                  const childGroupCount = groups.filter(g => g.parent_group_id === sourceGroup?.id).length;
+                  // 총 화면 수 계산 (현재 그룹 + 모든 하위 그룹)
+                  const totalScreenCount = sourceGroup ? countAllScreensInGroup(sourceGroup.id) : 0;
+                  return (
+                    <>
+                      <div>
+                        <span className="font-medium">하위 그룹:</span> {childGroupCount}개
+                      </div>
+                      {childGroupCount > 0 && (
+                        <div className="mt-1 border-t pt-1">
+                          <span className="font-medium text-primary">복제될 총 화면:</span>{" "}
+                          <span className="font-semibold text-primary">{totalScreenCount}개</span>
+                        </div>
+                      )}
+                    </>
+                  );
+                })()}
+              </div>
+            </div>
+
+            {/* 복제 모드 선택 */}
+            <div className="space-y-2">
+              <Label className="text-xs sm:text-sm">복제 범위</Label>
+              <RadioGroup
+                value={groupCopyMode}
+                onValueChange={(value) => setGroupCopyMode(value as "all" | "folder_only" | "screen_only")}
+                className="flex flex-wrap gap-4"
+              >
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="all" id="copy-all" />
+                  <Label htmlFor="copy-all" className="text-xs sm:text-sm font-normal cursor-pointer">
+                    전체 (폴더+화면)
+                  </Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="folder_only" id="copy-folder-only" />
+                  <Label htmlFor="copy-folder-only" className="text-xs sm:text-sm font-normal cursor-pointer">
+                    폴더만
+                  </Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="screen_only" id="copy-screen-only" />
+                  <Label htmlFor="copy-screen-only" className="text-xs sm:text-sm font-normal cursor-pointer">
+                    화면만 (현재 폴더)
+                  </Label>
+                </div>
+              </RadioGroup>
+              <p className="text-[10px] sm:text-xs text-muted-foreground">
+                {groupCopyMode === "all" && "하위 그룹과 모든 화면이 함께 복제됩니다"}
+                {groupCopyMode === "folder_only" && "하위 그룹 구조만 복제하고 화면은 복제하지 않습니다"}
+                {groupCopyMode === "screen_only" && "현재 그룹의 화면만 복제하고 하위 그룹은 복제하지 않습니다"}
+              </p>
+            </div>
+
+            {/* 새 그룹명 + 정렬 순서 */}
+            <div className="flex gap-3">
+              <div className="flex-1">
+                <Label htmlFor="newGroupName" className="text-xs sm:text-sm">
+                  새 그룹명 *
+                </Label>
+                <Input
+                  id="newGroupName"
+                  value={newGroupName}
+                  onChange={(e) => setNewGroupName(e.target.value)}
+                  placeholder="복제될 그룹의 이름을 입력하세요"
+                  className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                />
+              </div>
+              <div className="w-24">
+                <Label htmlFor="groupDisplayOrder" className="text-xs sm:text-sm">
+                  정렬 순서
+                </Label>
+                <Input
+                  id="groupDisplayOrder"
+                  type="number"
+                  min={0}
+                  value={groupDisplayOrder === 0 ? "" : groupDisplayOrder}
+                  onChange={(e) => {
+                    const val = e.target.value;
+                    setGroupDisplayOrder(val === "" ? 0 : parseInt(val) || 0);
+                  }}
+                  onBlur={(e) => {
+                    // 빈 값이면 0으로 설정
+                    if (e.target.value === "") {
+                      setGroupDisplayOrder(0);
+                    }
+                  }}
+                  className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                />
+              </div>
+            </div>
+
+            {/* 상위 그룹 선택 */}
+            {groups.length > 0 && (
+              <div>
+                <Label className="text-xs sm:text-sm">상위 그룹 (선택사항)</Label>
+                <Popover open={isParentGroupSelectOpen} onOpenChange={setIsParentGroupSelectOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={isParentGroupSelectOpen}
+                      className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                    >
+                      {groupParentId
+                        ? getGroupPath(groupParentId) || "그룹 선택"
+                        : "상위 그룹 없음 (최상위)"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-full min-w-[300px] p-0" align="start">
+                    <Command>
+                      <CommandInput placeholder="그룹 검색..." className="text-xs sm:text-sm" />
+                      <CommandList>
+                        <CommandEmpty className="text-xs sm:text-sm">
+                          그룹을 찾을 수 없습니다.
+                        </CommandEmpty>
+                        <CommandGroup>
+                          <CommandItem
+                            value="최상위 그룹"
+                            onSelect={() => {
+                              setGroupParentId(null);
+                              setIsParentGroupSelectOpen(false);
+                              // 최상위 선택 시 원본 그룹의 회사 코드 유지
+                              if (sourceGroup?.company_code) {
+                                setTargetCompanyCode(sourceGroup.company_code);
+                              }
+                            }}
+                            className="text-xs sm:text-sm"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-4 w-4",
+                                groupParentId === null ? "opacity-100" : "opacity-0"
+                              )}
+                            />
+                            최상위 그룹 (상위 없음)
+                          </CommandItem>
+                          {getSortedGroups()
+                            .filter((g) => g.id !== sourceGroup?.id)
+                            .map((group) => (
+                              <CommandItem
+                                key={group.id}
+                                value={`${group.group_name} ${getGroupPath(group.id)}`}
+                                onSelect={() => {
+                                  setGroupParentId(group.id);
+                                  setIsParentGroupSelectOpen(false);
+                                  // 선택한 상위 그룹의 회사 코드로 자동 설정
+                                  if (group.company_code) {
+                                    setTargetCompanyCode(group.company_code);
+                                  }
+                                }}
+                                className="text-xs sm:text-sm"
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    groupParentId === group.id ? "opacity-100" : "opacity-0"
+                                  )}
+                                />
+                                <span style={{ paddingLeft: `${getGroupLevel(group.id) * 12}px` }}>
+                                  {group.group_name}
+                                </span>
+                              </CommandItem>
+                            ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+
+            {/* 대상 회사 선택 (최고 관리자 전용) */}
+            {isSuperAdmin && companies.length > 0 && (
+              <div>
+                <Label className="text-xs sm:text-sm">대상 회사 *</Label>
+                <select
+                  value={targetCompanyCode}
+                  onChange={(e) => setTargetCompanyCode(e.target.value)}
+                  className="mt-1 flex h-8 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
+                >
+                  {companies.map((company) => (
+                    <option key={company.companyCode} value={company.companyCode}>
+                      {company.companyName} ({company.companyCode})
+                    </option>
+                  ))}
+                </select>
+                <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+                  복제된 그룹과 화면이 이 회사에 생성됩니다
+                </p>
+              </div>
+            )}
+
+            {/* 고급 옵션: 일괄 이름 변경 */}
+            <details className="rounded-md border p-3">
+              <summary className="cursor-pointer text-xs font-medium text-muted-foreground sm:text-sm">
+                고급 옵션: 이름 일괄 변경
+              </summary>
+              <div className="mt-3 space-y-3">
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    id="useGroupBulkRename"
+                    checked={useGroupBulkRename}
+                    onChange={(e) => setUseGroupBulkRename(e.target.checked)}
+                    className="h-4 w-4 rounded border-gray-300"
+                  />
+                  <label htmlFor="useGroupBulkRename" className="text-xs sm:text-sm">
+                    폴더/화면 이름 일괄 변경 사용
+                  </label>
+                </div>
+
+                {useGroupBulkRename && (
+                  <>
+                    <div>
+                      <Label className="text-xs sm:text-sm">찾을 텍스트</Label>
+                      <Input
+                        value={groupFindText}
+                        onChange={(e) => setGroupFindText(e.target.value)}
+                        placeholder="예: 테스트"
+                        className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                      />
+                      <p className="mt-1 text-[10px] text-muted-foreground">
+                        모든 폴더/화면 이름에서 이 텍스트를 찾습니다
+                      </p>
+                    </div>
+
+                    <div>
+                      <Label className="text-xs sm:text-sm">대체할 텍스트</Label>
+                      <Input
+                        value={groupReplaceText}
+                        onChange={(e) => setGroupReplaceText(e.target.value)}
+                        placeholder="예: TEST"
+                        className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                      />
+                      <p className="mt-1 text-[10px] text-muted-foreground">
+                        찾은 텍스트를 이 텍스트로 대체합니다
+                      </p>
+                    </div>
+
+                    <div className="rounded-md bg-gray-50 p-2 text-xs text-muted-foreground">
+                      <strong>미리보기:</strong>
+                      <div className="mt-1">
+                        "{sourceGroup?.group_name}" → "
+                        {groupFindText
+                          ? (sourceGroup?.group_name || "").replace(new RegExp(groupFindText, "g"), groupReplaceText)
+                          : `${sourceGroup?.group_name} (복제)`}
+                        "
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+            </details>
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={handleClose}
+              disabled={isCopying}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              취소
+            </Button>
+            <Button
+              onClick={handleCopyGroup}
+              disabled={isCopying || !newGroupName.trim() || (isSuperAdmin && !targetCompanyCode)}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              {isCopying ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  복제 중...
+                </>
+              ) : (
+                <>
+                  <FolderTree className="mr-2 h-4 w-4" />
+                  복제하기
+                </>
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  // 화면 복제 모드 렌더링
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="max-w-[95vw] sm:max-w-[700px] max-h-[90vh] overflow-hidden">
+      <DialogContent className="max-w-[95vw] sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Copy className="h-5 w-5" />
-            화면 복사
-            {linkedScreens.length > 0 && (
-              <span className="text-sm font-normal text-muted-foreground">
-                ({linkedScreens.length}개의 모달 화면 포함)
-              </span>
-            )}
-          </DialogTitle>
-          <DialogDescription>
-            {sourceScreen?.screenName} 화면을 복사합니다. 화면 구성과 연결된 모달 화면도 함께 복사됩니다.
+          <DialogTitle className="text-base sm:text-lg">화면 복제</DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            "{sourceScreen?.screenName}" 화면을 복제합니다.
+            {linkedScreens.length > 0 && ` (모달 ${linkedScreens.length}개 포함)`}
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4">
-          {/* 원본 화면 정보 */}
-          <div className="rounded-md bg-gray-50 p-3">
-            <h4 className="mb-2 text-sm font-medium text-gray-700">원본 화면 정보</h4>
-            <div className="space-y-1 text-sm text-muted-foreground">
-              <div>
-                <span className="font-medium">화면명:</span> {sourceScreen?.screenName}
-              </div>
-              <div>
-                <span className="font-medium">화면코드:</span> {sourceScreen?.screenCode}
-              </div>
-              <div>
-                <span className="font-medium">회사코드:</span> {sourceScreen?.companyCode}
-              </div>
-            </div>
+          {/* 새 화면명 */}
+          <div>
+            <Label htmlFor="screenName" className="text-sm">새 화면명 *</Label>
+            <Input
+              id="screenName"
+              value={screenName}
+              onChange={(e) => setScreenName(e.target.value)}
+              placeholder="복제될 화면 이름"
+              className="mt-1"
+            />
           </div>
 
+          {/* 새 화면코드 (자동생성) */}
+          <div>
+            <Label htmlFor="screenCode" className="text-sm">화면코드 (자동생성)</Label>
+            <Input
+              id="screenCode"
+              value={screenCode}
+              readOnly
+              className="mt-1 bg-muted"
+            />
+          </div>
+
+          {/* 대상 그룹 선택 */}
+          {groups.length > 0 && (
+            <div>
+              <Label className="text-sm">복제할 그룹</Label>
+              <Popover open={isGroupSelectOpen} onOpenChange={setIsGroupSelectOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    className="mt-1 h-10 w-full justify-between text-sm"
+                  >
+                    {selectedTargetGroupId
+                      ? getGroupPath(selectedTargetGroupId)
+                      : "미분류"}
+                    <ChevronsUpDown className="ml-2 h-4 w-4 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-full min-w-[280px] p-0" align="start">
+                  <Command>
+                    <CommandInput placeholder="그룹 검색..." />
+                    <CommandList>
+                      <CommandEmpty>그룹 없음</CommandEmpty>
+                      <CommandGroup>
+                        <CommandItem
+                          value="미분류"
+                          onSelect={() => {
+                            setSelectedTargetGroupId(null);
+                            setIsGroupSelectOpen(false);
+                          }}
+                        >
+                          <Check className={cn("mr-2 h-4 w-4", selectedTargetGroupId === null ? "opacity-100" : "opacity-0")} />
+                          미분류
+                        </CommandItem>
+                        {getSortedGroups().map((group) => (
+                          <CommandItem
+                            key={group.id}
+                            value={group.group_name}
+                            onSelect={() => {
+                              setSelectedTargetGroupId(group.id);
+                              setIsGroupSelectOpen(false);
+                            }}
+                          >
+                            <Check className={cn("mr-2 h-4 w-4", selectedTargetGroupId === group.id ? "opacity-100" : "opacity-0")} />
+                            <span style={{ paddingLeft: `${getGroupLevel(group.id) * 12}px` }}>
+                              {group.group_name}
+                            </span>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+          )}
+
           {/* 최고 관리자: 대상 회사 선택 */}
           {isSuperAdmin && (
             <div>
-              <Label htmlFor="targetCompany">복사 대상 회사 * (최고 관리자 전용)</Label>
+              <Label className="text-sm">대상 회사</Label>
               <Select value={targetCompanyCode} onValueChange={setTargetCompanyCode}>
-                <SelectTrigger id="targetCompany" className="mt-1">
-                  <SelectValue placeholder="회사를 선택하세요" />
+                <SelectTrigger className="mt-1">
+                  <SelectValue placeholder="회사 선택" />
                 </SelectTrigger>
                 <SelectContent>
-                  {loadingCompanies ? (
-                    <div className="p-2 text-center text-sm text-muted-foreground">
-                      로딩 중...
-                    </div>
-                  ) : (
-                    companies.map((company) => (
-                      <SelectItem key={company.companyCode} value={company.companyCode}>
-                        {company.companyName} ({company.companyCode})
-                      </SelectItem>
-                    ))
-                  )}
+                  {companies.map((company) => (
+                    <SelectItem key={company.companyCode} value={company.companyCode}>
+                      {company.companyName}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
-              <p className="mt-1 text-xs text-muted-foreground">
-                선택한 회사로 화면이 복사됩니다. 원본과 다른 회사를 선택하면 회사 간 화면 복사가 가능합니다.
-              </p>
             </div>
           )}
 
-          {/* 화면명 일괄 수정 */}
-          <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
-            <div className="mb-3 flex items-center gap-2">
-              <input
-                type="checkbox"
-                id="useBulkRename"
-                checked={useBulkRename}
-                onChange={(e) => setUseBulkRename(e.target.checked)}
-                className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500"
-              />
-              <Label htmlFor="useBulkRename" className="text-sm font-medium text-blue-900 cursor-pointer">
-                🔄 화면명 일괄 수정 (선택사항)
-              </Label>
-            </div>
-
-            {useBulkRename && (
-              <div className="space-y-3">
-                <div className="grid grid-cols-2 gap-3">
-                  <div>
-                    <Label htmlFor="removeText" className="text-xs text-blue-900">
-                      제거할 텍스트
-                    </Label>
-                    <Input
-                      id="removeText"
-                      value={removeText}
-                      onChange={(e) => setRemoveText(e.target.value)}
-                      placeholder="예: 탑씰"
-                      className="mt-1 bg-white"
-                    />
-                  </div>
-                  <div>
-                    <Label htmlFor="addPrefix" className="text-xs text-blue-900">
-                      추가할 접두사
-                    </Label>
-                    <Input
-                      id="addPrefix"
-                      value={addPrefix}
-                      onChange={(e) => setAddPrefix(e.target.value)}
-                      placeholder="예: 대진산업"
-                      className="mt-1 bg-white"
-                    />
-                  </div>
-                </div>
-
-                {/* 미리보기 */}
-                {(removeText || addPrefix) && getPreviewNames() && (
-                  <div className="rounded-md border border-blue-300 bg-white p-3">
-                    <p className="mb-2 text-xs font-medium text-blue-900">미리보기</p>
-                    <div className="space-y-2 text-xs">
-                      {/* 메인 화면 */}
-                      <div>
-                        <p className="text-gray-500">
-                          메인: <span className="line-through">{getPreviewNames()?.main.original}</span>
-                        </p>
-                        <p className="font-medium text-blue-700">
-                          → {getPreviewNames()?.main.preview}
-                        </p>
-                      </div>
-                      {/* 모달 화면들 */}
-                      {getPreviewNames()?.modals.map((modal, idx) => (
-                        <div key={idx}>
-                          <p className="text-gray-500">
-                            모달: <span className="line-through">{modal.original}</span>
-                          </p>
-                          <p className="font-medium text-blue-700">→ {modal.preview}</p>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-
-                <p className="text-xs text-blue-700">
-                  💡 모든 화면명에서 "제거할 텍스트"를 삭제하고 "추가할 접두사"를 앞에 붙입니다.
-                </p>
-              </div>
-            )}
-          </div>
-
-          {/* 메인 화면 정보 입력 */}
-          <div className="space-y-3 rounded-lg border p-3">
-            <h4 className="text-sm font-medium">메인 화면 정보</h4>
-            
-            <div>
-              <Label htmlFor="screenName">새 화면명 *</Label>
-              <Input
-                id="screenName"
-                value={screenName}
-                onChange={(e) => setScreenName(e.target.value)}
-                placeholder="복사될 화면의 이름을 입력하세요"
-                className="mt-1"
-              />
-            </div>
-
-            <div>
-              <Label htmlFor="screenCode">새 화면코드 (자동생성)</Label>
-              <Input
-                id="screenCode"
-                value={screenCode}
-                readOnly
-                className="mt-1 bg-gray-50"
-                placeholder="화면 코드가 자동으로 생성됩니다"
-              />
-            </div>
-
-            <div>
-              <Label htmlFor="description">설명</Label>
-              <Textarea
-                id="description"
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                placeholder="화면 설명을 입력하세요 (선택사항)"
-                className="mt-1"
-                rows={3}
-              />
-            </div>
-          </div>
-
-          {/* 연결된 모달 화면 목록 */}
-          {loadingLinkedScreens ? (
-            <div className="flex items-center justify-center gap-2 rounded-lg border p-6">
-              <Loader2 className="h-5 w-5 animate-spin" />
-              <span className="text-sm text-muted-foreground">연결된 모달 화면 감지 중...</span>
-            </div>
-          ) : linkedScreens.length > 0 ? (
-            <div className="space-y-3 rounded-lg border p-3">
-              <div className="flex items-center justify-between">
-                <h4 className="flex items-center gap-2 text-sm font-medium">
+          {/* 연결된 모달 화면 (있을 경우만) */}
+          {linkedScreens.length > 0 && (
+            <div className="rounded-md border p-3">
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-sm font-medium flex items-center gap-1">
                   <LinkIcon className="h-4 w-4" />
-                  연결된 모달 화면 ({linkedScreens.length}개)
-                </h4>
-                <p className="text-xs text-muted-foreground">함께 복사됩니다</p>
+                  연결된 모달 ({linkedScreens.length}개)
+                </span>
               </div>
-
-              <div className="space-y-2">
-                {linkedScreens.map((linkedScreen) => (
-                  <div
-                    key={linkedScreen.screenId}
-                    className="space-y-2 rounded-md border bg-gray-50 p-3"
-                  >
-                    <div className="flex items-start justify-between gap-2">
-                      <div className="flex-1 space-y-1">
-                        <p className="text-xs text-muted-foreground">
-                          원본: {linkedScreen.screenName} ({linkedScreen.screenCode})
-                        </p>
-                        <Input
-                          value={linkedScreen.newScreenName || ""}
-                          onChange={(e) =>
-                            updateLinkedScreenName(linkedScreen.screenId, e.target.value)
-                          }
-                          placeholder="복사될 모달 화면 이름"
-                          className="h-8 text-sm"
-                        />
-                        <Input
-                          value={linkedScreen.newScreenCode || ""}
-                          readOnly
-                          className="h-8 bg-white text-xs"
-                          placeholder="코드 자동 생성"
-                        />
-                      </div>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="h-8 w-8 text-destructive hover:bg-destructive/10"
-                        onClick={() => removeLinkedScreen(linkedScreen.screenId)}
-                        title="이 화면은 복사하지 않음"
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
+              <div className="space-y-2 max-h-[150px] overflow-y-auto">
+                {linkedScreens.map((linked) => (
+                  <div key={linked.screenId} className="flex items-center justify-between text-xs bg-muted rounded p-2">
+                    <div className="flex-1 min-w-0">
+                      <Input
+                        value={linked.newScreenName || ""}
+                        onChange={(e) => updateLinkedScreenName(linked.screenId, e.target.value)}
+                        className="h-7 text-xs"
+                        placeholder="모달 화면명"
+                      />
                     </div>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7 ml-1 text-destructive"
+                      onClick={() => removeLinkedScreen(linked.screenId)}
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
                   </div>
                 ))}
               </div>
-
-              <Alert>
-                <AlertCircle className="h-4 w-4" />
-                <AlertDescription className="text-xs">
-                  모달 화면을 복사하지 않으려면 휴지통 아이콘을 클릭하세요. 버튼의 모달 연결이 자동으로
-                  업데이트됩니다.
-                </AlertDescription>
-              </Alert>
             </div>
-          ) : null}
+          )}
+
+          {/* 화면명 일괄 수정 (접히는 옵션) */}
+          <details className="text-sm">
+            <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
+              고급 옵션
+            </summary>
+            <div className="mt-3 space-y-3 rounded-md border p-3">
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <Label className="text-xs">제거할 텍스트</Label>
+                  <Input
+                    value={removeText}
+                    onChange={(e) => {
+                      setRemoveText(e.target.value);
+                      setUseBulkRename(true);
+                    }}
+                    placeholder="예: 탑씰"
+                    className="mt-1 h-8 text-xs"
+                  />
+                </div>
+                <div>
+                  <Label className="text-xs">추가할 접두사</Label>
+                  <Input
+                    value={addPrefix}
+                    onChange={(e) => {
+                      setAddPrefix(e.target.value);
+                      setUseBulkRename(true);
+                    }}
+                    placeholder="예: 대진"
+                    className="mt-1 h-8 text-xs"
+                  />
+                </div>
+              </div>
+              {(removeText || addPrefix) && getPreviewNames() && (
+                <div className="text-xs text-muted-foreground">
+                  미리보기: {getPreviewNames()?.main.preview}
+                </div>
+              )}
+            </div>
+          </details>
         </div>
 
         <DialogFooter className="gap-2 sm:gap-0">
           <Button variant="outline" onClick={handleClose} disabled={isCopying}>
             취소
           </Button>
-          <Button onClick={handleCopy} disabled={isCopying || !targetCompanyCode}>
+          <Button onClick={handleCopy} disabled={isCopying || !screenName.trim() || !screenCode}>
             {isCopying ? (
               <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                복사 중...
+                복제 중...
               </>
             ) : (
-              <>
-                <Copy className="mr-2 h-4 w-4" />
-                복사하기
-                {linkedScreens.length > 0 && ` (${linkedScreens.length + 1}개 화면)`}
-              </>
+              "복제"
             )}
           </Button>
         </DialogFooter>
@@ -702,3 +1485,4 @@ export default function CopyScreenModal({
     </Dialog>
   );
 }
+
diff --git a/frontend/components/screen/EditModal.tsx b/frontend/components/screen/EditModal.tsx
index b3c94ade..7c722ad6 100644
--- a/frontend/components/screen/EditModal.tsx
+++ b/frontend/components/screen/EditModal.tsx
@@ -309,17 +309,10 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
   // 🆕 그룹 데이터 조회 함수
   const loadGroupData = async () => {
     if (!modalState.tableName || !modalState.groupByColumns || modalState.groupByColumns.length === 0) {
-      // console.warn("테이블명 또는 그룹핑 컬럼이 없습니다.");
       return;
     }
 
     try {
-      // console.log("🔍 그룹 데이터 조회 시작:", {
-      //   tableName: modalState.tableName,
-      //   groupByColumns: modalState.groupByColumns,
-      //   editData: modalState.editData,
-      // });
-
       // 그룹핑 컬럼 값 추출 (예: order_no = "ORD-20251124-001")
       const groupValues: Record<string, any> = {};
       modalState.groupByColumns.forEach((column) => {
@@ -329,15 +322,9 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
       });
 
       if (Object.keys(groupValues).length === 0) {
-        // console.warn("그룹핑 컬럼 값이 없습니다:", modalState.groupByColumns);
         return;
       }
 
-      // console.log("🔍 그룹 조회 요청:", {
-      //   tableName: modalState.tableName,
-      //   groupValues,
-      // });
-
       // 같은 그룹의 모든 레코드 조회 (entityJoinApi 사용)
       const { entityJoinApi } = await import("@/lib/api/entityJoin");
       const response = await entityJoinApi.getTableDataWithJoins(modalState.tableName, {
@@ -347,23 +334,19 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
         enableEntityJoin: true,
       });
 
-      // console.log("🔍 그룹 조회 응답:", response);
-
       // entityJoinApi는 배열 또는 { data: [] } 형식으로 반환
       const dataArray = Array.isArray(response) ? response : response?.data || [];
 
       if (dataArray.length > 0) {
-        // console.log("✅ 그룹 데이터 조회 성공:", dataArray.length, "건");
         setGroupData(dataArray);
         setOriginalGroupData(JSON.parse(JSON.stringify(dataArray))); // Deep copy
         toast.info(`${dataArray.length}개의 관련 품목을 불러왔습니다.`);
       } else {
-        console.warn("그룹 데이터가 없습니다:", response);
         setGroupData([modalState.editData]); // 기본값: 선택된 행만
         setOriginalGroupData([JSON.parse(JSON.stringify(modalState.editData))]);
       }
     } catch (error: any) {
-      console.error("❌ 그룹 데이터 조회 오류:", error);
+      console.error("그룹 데이터 조회 오류:", error);
       toast.error("관련 데이터를 불러오는 중 오류가 발생했습니다.");
       setGroupData([modalState.editData]); // 기본값: 선택된 행만
       setOriginalGroupData([JSON.parse(JSON.stringify(modalState.editData))]);
@@ -1043,17 +1026,18 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
                 const groupedDataProp = groupData.length > 0 ? groupData : undefined;
 
                 // 🆕 UniversalFormModal이 있는지 확인 (자체 저장 로직 사용)
-                // 최상위 컴포넌트 또는 조건부 컨테이너 내부 화면에 universal-form-modal이 있는지 확인
+                // 최상위 컴포넌트에 universal-form-modal이 있는지 확인
+                // ⚠️ 수정: conditional-container는 제외 (groupData가 있으면 EditModal.handleSave 사용)
                 const hasUniversalFormModal = screenData.components.some(
                   (c) => {
-                    // 최상위에 universal-form-modal이 있는 경우
+                    // 최상위에 universal-form-modal이 있는 경우만 자체 저장 로직 사용
                     if (c.componentType === "universal-form-modal") return true;
-                    // 조건부 컨테이너 내부에 universal-form-modal이 있는 경우
-                    // (조건부 컨테이너가 있으면 내부 화면에서 universal-form-modal을 사용하는 것으로 가정)
-                    if (c.componentType === "conditional-container") return true;
                     return false;
                   }
                 );
+                
+                // 🆕 그룹 데이터가 있으면 EditModal.handleSave 사용 (일괄 저장)
+                const shouldUseEditModalSave = groupData.length > 0 || !hasUniversalFormModal;
 
                 // 🔑 첨부파일 컴포넌트가 행(레코드) 단위로 파일을 저장할 수 있도록 tableName 추가
                 const enrichedFormData = {
@@ -1095,9 +1079,9 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
                       id: modalState.screenId!,
                       tableName: screenData.screenInfo?.tableName,
                     }}
-                    // 🆕 UniversalFormModal이 있으면 onSave 전달 안 함 (자체 저장 로직 사용)
-                    // ModalRepeaterTable만 있으면 기존대로 onSave 전달 (호환성 유지)
-                    onSave={hasUniversalFormModal ? undefined : handleSave}
+                    // 🆕 그룹 데이터가 있거나 UniversalFormModal이 없으면 EditModal.handleSave 사용
+                    // groupData가 있으면 일괄 저장을 위해 반드시 EditModal.handleSave 사용
+                    onSave={shouldUseEditModalSave ? handleSave : undefined}
                     isInModal={true}
                     // 🆕 그룹 데이터를 ModalRepeaterTable에 전달
                     groupedData={groupedDataProp}
diff --git a/frontend/components/screen/InteractiveScreenViewer.tsx b/frontend/components/screen/InteractiveScreenViewer.tsx
index bd06363f..a7ed06f8 100644
--- a/frontend/components/screen/InteractiveScreenViewer.tsx
+++ b/frontend/components/screen/InteractiveScreenViewer.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useCallback, useEffect, useMemo } from "react";
+import React, { useState, useCallback } from "react";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
@@ -48,7 +48,6 @@ import { isFileComponent } from "@/lib/utils/componentTypeUtils";
 import { buildGridClasses } from "@/lib/constants/columnSpans";
 import { cn } from "@/lib/utils";
 import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
-import { useMultiLang } from "@/hooks/useMultiLang";
 import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
 import { TableOptionsToolbar } from "./table-options/TableOptionsToolbar";
 import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";
@@ -89,7 +88,7 @@ const CascadingDropdownWrapper: React.FC<CascadingDropdownWrapperProps> = ({
     relationCode,
     parentValue,
   });
-
+  
   // 실제 사용할 설정 (직접 설정 또는 API에서 가져온 설정)
   const effectiveConfig = config || relationConfig;
 
@@ -110,7 +109,11 @@ const CascadingDropdownWrapper: React.FC<CascadingDropdownWrapperProps> = ({
   const isDisabled = disabled || !parentValue || loading;
 
   return (
-    <Select value={value || ""} onValueChange={(newValue) => onChange?.(newValue)} disabled={isDisabled}>
+    <Select
+      value={value || ""}
+      onValueChange={(newValue) => onChange?.(newValue)}
+      disabled={isDisabled}
+    >
       <SelectTrigger className="h-full w-full">
         {loading ? (
           <div className="flex items-center gap-2">
@@ -184,80 +187,22 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const { userName, user } = useAuth(); // 현재 로그인한 사용자명과 사용자 정보 가져오기
-  const { userLang } = useMultiLang(); // 다국어 훅
   const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
   const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});
-
-  // 다국어 번역 상태 (langKeyId가 있는 컴포넌트들의 번역 텍스트)
-  const [translations, setTranslations] = useState<Record<string, string>>({});
-
-  // 다국어 키 수집 및 번역 로드
-  useEffect(() => {
-    const loadTranslations = async () => {
-      // 모든 컴포넌트에서 langKey 수집
-      const langKeysToFetch: string[] = [];
-
-      const collectLangKeys = (comps: ComponentData[]) => {
-        comps.forEach((comp) => {
-          // 컴포넌트 라벨의 langKey
-          if ((comp as any).langKey) {
-            langKeysToFetch.push((comp as any).langKey);
-          }
-          // componentConfig 내의 langKey (버튼 텍스트 등)
-          if ((comp as any).componentConfig?.langKey) {
-            langKeysToFetch.push((comp as any).componentConfig.langKey);
-          }
-          // 자식 컴포넌트 재귀 처리
-          if ((comp as any).children) {
-            collectLangKeys((comp as any).children);
-          }
-        });
-      };
-
-      collectLangKeys(allComponents);
-
-      // langKey가 있으면 배치 조회
-      if (langKeysToFetch.length > 0 && userLang) {
-        try {
-          const { apiClient } = await import("@/lib/api/client");
-          const response = await apiClient.post(
-            "/multilang/batch",
-            {
-              langKeys: [...new Set(langKeysToFetch)], // 중복 제거
-            },
-            {
-              params: {
-                userLang,
-                companyCode: user?.companyCode || "*",
-              },
-            },
-          );
-
-          if (response.data?.success && response.data?.data) {
-            setTranslations(response.data.data);
-          }
-        } catch (error) {
-          console.error("다국어 번역 로드 실패:", error);
-        }
-      }
-    };
-
-    loadTranslations();
-  }, [allComponents, userLang, user?.companyCode]);
-
+  
   // 팝업 화면 상태
   const [popupScreen, setPopupScreen] = useState<{
     screenId: number;
     title: string;
     size: string;
   } | null>(null);
-
+  
   // 팝업 화면 레이아웃 상태
   const [popupLayout, setPopupLayout] = useState<ComponentData[]>([]);
   const [popupLoading, setPopupLoading] = useState(false);
   const [popupScreenResolution, setPopupScreenResolution] = useState<{ width: number; height: number } | null>(null);
   const [popupScreenInfo, setPopupScreenInfo] = useState<{ id: number; tableName?: string } | null>(null);
-
+  
   // 팝업 전용 formData 상태
   const [popupFormData, setPopupFormData] = useState<Record<string, any>>({});
 
@@ -265,68 +210,64 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
   const finalFormData = { ...localFormData, ...externalFormData };
 
   // 개선된 검증 시스템 (선택적 활성화)
-  const enhancedValidation =
-    enableEnhancedValidation && screenInfo && tableColumns.length > 0
-      ? useFormValidation(
-          finalFormData,
-          allComponents.filter((c) => c.type === "widget") as WidgetComponent[],
-          tableColumns,
-          {
-            id: screenInfo.id,
-            screenName: screenInfo.tableName || "unknown",
-            tableName: screenInfo.tableName,
-            screenResolution: { width: 800, height: 600 },
-            gridSettings: { size: 20, color: "#e0e0e0", opacity: 0.5 },
-            description: "동적 화면",
-          },
-          {
-            enableRealTimeValidation: true,
-            validationDelay: 300,
-            enableAutoSave: false,
-            showToastMessages: true,
-            ...validationOptions,
-          },
-        )
-      : null;
+  const enhancedValidation = enableEnhancedValidation && screenInfo && tableColumns.length > 0 
+    ? useFormValidation(
+        finalFormData,
+        allComponents.filter(c => c.type === 'widget') as WidgetComponent[],
+        tableColumns,
+        { 
+          id: screenInfo.id, 
+          screenName: screenInfo.tableName || "unknown",
+          tableName: screenInfo.tableName,
+          screenResolution: { width: 800, height: 600 },
+          gridSettings: { size: 20, color: "#e0e0e0", opacity: 0.5 },
+          description: "동적 화면"
+        },
+        {
+          enableRealTimeValidation: true,
+          validationDelay: 300,
+          enableAutoSave: false,
+          showToastMessages: true,
+          ...validationOptions,
+        }
+      )
+    : null;
 
   // 자동값 생성 함수
-  const generateAutoValue = useCallback(
-    async (autoValueType: string, ruleId?: string): Promise<string> => {
-      const now = new Date();
-      switch (autoValueType) {
-        case "current_datetime":
-          return now.toISOString().slice(0, 19).replace("T", " "); // YYYY-MM-DD HH:mm:ss
-        case "current_date":
-          return now.toISOString().slice(0, 10); // YYYY-MM-DD
-        case "current_time":
-          return now.toTimeString().slice(0, 8); // HH:mm:ss
-        case "current_user":
-          // 실제 접속중인 사용자명 사용
-          return userName || "사용자"; // 사용자명이 없으면 기본값
-        case "uuid":
-          return crypto.randomUUID();
-        case "sequence":
-          return `SEQ_${Date.now()}`;
-        case "numbering_rule":
-          // 채번 규칙 사용
-          if (ruleId) {
-            try {
-              const { generateNumberingCode } = await import("@/lib/api/numberingRule");
-              const response = await generateNumberingCode(ruleId);
-              if (response.success && response.data) {
-                return response.data.generatedCode;
-              }
-            } catch (error) {
-              console.error("채번 규칙 코드 생성 실패:", error);
+  const generateAutoValue = useCallback(async (autoValueType: string, ruleId?: string): Promise<string> => {
+    const now = new Date();
+    switch (autoValueType) {
+      case "current_datetime":
+        return now.toISOString().slice(0, 19).replace("T", " "); // YYYY-MM-DD HH:mm:ss
+      case "current_date":
+        return now.toISOString().slice(0, 10); // YYYY-MM-DD
+      case "current_time":
+        return now.toTimeString().slice(0, 8); // HH:mm:ss
+      case "current_user":
+        // 실제 접속중인 사용자명 사용
+        return userName || "사용자"; // 사용자명이 없으면 기본값
+      case "uuid":
+        return crypto.randomUUID();
+      case "sequence":
+        return `SEQ_${Date.now()}`;
+      case "numbering_rule":
+        // 채번 규칙 사용
+        if (ruleId) {
+          try {
+            const { generateNumberingCode } = await import("@/lib/api/numberingRule");
+            const response = await generateNumberingCode(ruleId);
+            if (response.success && response.data) {
+              return response.data.generatedCode;
             }
+          } catch (error) {
+            console.error("채번 규칙 코드 생성 실패:", error);
           }
-          return "";
-        default:
-          return "";
-      }
-    },
-    [userName],
-  ); // userName 의존성 추가
+        }
+        return "";
+      default:
+        return "";
+    }
+  }, [userName]); // userName 의존성 추가
 
   // 팝업 화면 레이아웃 로드
   React.useEffect(() => {
@@ -335,29 +276,29 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         try {
           setPopupLoading(true);
           // console.log("🔍 팝업 화면 로드 시작:", popupScreen);
-
+          
           // 화면 레이아웃과 화면 정보를 병렬로 가져오기
           const [layout, screen] = await Promise.all([
             screenApi.getLayout(popupScreen.screenId),
-            screenApi.getScreen(popupScreen.screenId),
+            screenApi.getScreen(popupScreen.screenId)
           ]);
-
+          
           console.log("📊 팝업 화면 로드 완료:", {
             componentsCount: layout.components?.length || 0,
             screenInfo: {
               screenId: screen.screenId,
-              tableName: screen.tableName,
+              tableName: screen.tableName
             },
-            popupFormData: {},
+            popupFormData: {}
           });
-
+          
           setPopupLayout(layout.components || []);
           setPopupScreenResolution(layout.screenResolution || null);
           setPopupScreenInfo({
             id: popupScreen.screenId,
-            tableName: screen.tableName,
+            tableName: screen.tableName
           });
-
+          
           // 팝업 formData 초기화
           setPopupFormData({});
         } catch (error) {
@@ -368,7 +309,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           setPopupLoading(false);
         }
       };
-
+      
       loadPopupLayout();
     }
   }, [popupScreen]);
@@ -379,7 +320,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     external: externalFormData,
     local: localFormData,
     merged: formData,
-    hasExternalCallback: !!onFormDataChange,
+    hasExternalCallback: !!onFormDataChange
   });
 
   // 폼 데이터 업데이트
@@ -388,16 +329,16 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     if (isPreviewMode) {
       return;
     }
-
+    
     // console.log(`🔄 updateFormData: ${fieldName} = "${value}" (외부콜백: ${!!onFormDataChange})`);
-
+    
     // 항상 로컬 상태도 업데이트
     setLocalFormData((prev) => ({
       ...prev,
       [fieldName]: value,
     }));
     // console.log(`💾 로컬 상태 업데이트: ${fieldName} = "${value}"`);
-
+    
     // 외부 콜백이 있는 경우에도 전달 (개별 필드 단위로)
     if (onFormDataChange) {
       onFormDataChange(fieldName, value);
@@ -412,24 +353,29 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       // console.log("🔧 initAutoInputFields 실행 시작");
       for (const comp of allComponents) {
         // 🆕 type: "component" 또는 type: "widget" 모두 처리
-        if (comp.type === "widget" || comp.type === "component") {
+        if (comp.type === 'widget' || comp.type === 'component') {
           const widget = comp as WidgetComponent;
           const fieldName = widget.columnName || widget.id;
-
+          
           // 🆕 autoFill 처리 (테이블 조회 기반 자동 입력)
           if (widget.autoFill?.enabled || (comp as any).autoFill?.enabled) {
             const autoFillConfig = widget.autoFill || (comp as any).autoFill;
             const currentValue = formData[fieldName];
-            if (currentValue === undefined || currentValue === "") {
+            if (currentValue === undefined || currentValue === '') {
               const { sourceTable, filterColumn, userField, displayColumn } = autoFillConfig;
-
+              
               // 사용자 정보에서 필터 값 가져오기
               const userValue = user?.[userField];
-
+              
               if (userValue && sourceTable && filterColumn && displayColumn) {
                 try {
-                  const result = await tableTypeApi.getTableRecord(sourceTable, filterColumn, userValue, displayColumn);
-
+                  const result = await tableTypeApi.getTableRecord(
+                    sourceTable,
+                    filterColumn,
+                    userValue,
+                    displayColumn
+                  );
+                  
                   updateFormData(fieldName, result.value);
                 } catch (error) {
                   console.error(`autoFill 조회 실패: ${fieldName}`, error);
@@ -438,40 +384,37 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             }
             continue; // autoFill이 활성화되면 일반 자동입력은 건너뜀
           }
-
+          
           // 기존 widget 타입 전용 로직은 widget인 경우만
-          if (comp.type !== "widget") continue;
-
+          if (comp.type !== 'widget') continue;
+          
           // 텍스트 타입 위젯의 자동입력 처리 (기존 로직)
-          if (
-            (widget.widgetType === "text" || widget.widgetType === "email" || widget.widgetType === "tel") &&
-            widget.webTypeConfig
-          ) {
+          if ((widget.widgetType === 'text' || widget.widgetType === 'email' || widget.widgetType === 'tel') && 
+              widget.webTypeConfig) {
             const config = widget.webTypeConfig as TextTypeConfig;
             const isAutoInput = config?.autoInput || false;
-
+            
             if (isAutoInput && config?.autoValueType) {
               // 이미 값이 있으면 덮어쓰지 않음
               const currentValue = formData[fieldName];
               console.log(`🔍 자동입력 필드 체크: ${fieldName}`, {
                 currentValue,
-                isEmpty: currentValue === undefined || currentValue === "",
+                isEmpty: currentValue === undefined || currentValue === '',
                 isAutoInput,
-                autoValueType: config.autoValueType,
+                autoValueType: config.autoValueType
               });
-
-              if (currentValue === undefined || currentValue === "") {
-                const autoValue =
-                  config.autoValueType === "custom"
-                    ? config.customValue || ""
-                    : generateAutoValue(config.autoValueType);
-
+              
+              if (currentValue === undefined || currentValue === '') {
+                const autoValue = config.autoValueType === "custom" 
+                  ? config.customValue || ""
+                  : generateAutoValue(config.autoValueType);
+                
                 console.log("🔄 자동입력 필드 초기화:", {
                   fieldName,
                   autoValueType: config.autoValueType,
-                  autoValue,
+                  autoValue
                 });
-
+                
                 updateFormData(fieldName, autoValue);
               } else {
                 // console.log(`⏭️ 자동입력 건너뜀 (값 있음): ${fieldName} = "${currentValue}"`);
@@ -528,7 +471,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       const FlowWidget = require("@/components/screen/widgets/FlowWidget").FlowWidget;
       // componentConfig에서 flowId 추출
       const flowConfig = (comp as any).componentConfig || {};
-
+      
       console.log("🔍 InteractiveScreenViewer 플로우 위젯 변환:", {
         compType: comp.type,
         hasComponentConfig: !!(comp as any).componentConfig,
@@ -536,7 +479,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         flowConfigFlowId: flowConfig.flowId,
         finalFlowId: flowConfig.flowId,
       });
-
+      
       const flowComponent = {
         ...comp,
         type: "flow" as const,
@@ -546,9 +489,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         allowDataMove: flowConfig.allowDataMove || false,
         displayMode: flowConfig.displayMode || "horizontal",
       };
-
+      
       console.log("🔍 InteractiveScreenViewer 최종 flowComponent:", flowComponent);
-
+      
       return (
         <div className="w-full">
           <FlowWidget component={flowComponent as any} />
@@ -560,7 +503,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     const componentType = (comp as any).componentType || (comp as any).componentId;
     if (comp.type === "tabs" || (comp.type === "component" && componentType === "tabs-widget")) {
       const TabsWidget = require("@/components/screen/widgets/TabsWidget").TabsWidget;
-
+      
       // componentConfig에서 탭 정보 추출
       const tabsConfig = comp.componentConfig || {};
       const tabsComponent = {
@@ -573,7 +516,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         allowCloseable: tabsConfig.allowCloseable || false,
         persistSelection: tabsConfig.persistSelection || false,
       };
-
+      
       console.log("🔍 탭 컴포넌트 렌더링:", {
         originalType: comp.type,
         componentType,
@@ -581,11 +524,11 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         tabs: tabsComponent.tabs,
         tabsConfig,
       });
-
+      
       return (
         <div className="h-full w-full">
-          <TabsWidget
-            component={tabsComponent as any}
+          <TabsWidget 
+            component={tabsComponent as any} 
             menuObjid={menuObjid} // 🆕 부모의 menuObjid 전달
           />
         </div>
@@ -598,7 +541,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       const componentConfig = (comp as any).componentConfig || {};
       // config가 중첩되어 있을 수 있음: componentConfig.config 또는 componentConfig 직접
       const rackConfig = componentConfig.config || componentConfig;
-
+      
       console.log("🏗️ 렉 구조 컴포넌트 렌더링:", {
         componentType,
         componentConfig,
@@ -606,7 +549,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         fieldMapping: rackConfig.fieldMapping,
         formData,
       });
-
+      
       return (
         <div className="h-full w-full overflow-auto">
           <RackStructureComponent
@@ -625,7 +568,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       );
     }
 
-    const { widgetType, label: originalLabel, placeholder, required, readonly, columnName } = comp;
+    const { widgetType, label, placeholder, required, readonly, columnName } = comp;
     const fieldName = columnName || comp.id;
     const currentValue = formData[fieldName] || "";
 
@@ -637,7 +580,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     const compLangKey = (comp as any).langKey;
     const label = compLangKey && translations[compLangKey] ? translations[compLangKey] : originalLabel;
 
-    // 스타일 적용
+=======
     const applyStyles = (element: React.ReactElement) => {
       if (!comp.style) return element;
 
@@ -648,7 +591,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       return React.cloneElement(element, {
         style: {
           ...element.props.style, // 기존 스타일 유지
-          ...styleWithoutSize, // width/height 제외한 스타일만 적용
+          ...styleWithoutSize,  // width/height 제외한 스타일만 적용
           boxSizing: "border-box",
         },
       });
@@ -663,13 +606,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
         // 자동입력 관련 처리
         const isAutoInput = config?.autoInput || false;
-        const autoValue =
-          isAutoInput && config?.autoValueType
-            ? config.autoValueType === "custom"
-              ? config.customValue || ""
-              : generateAutoValue(config.autoValueType)
-            : "";
-
+        const autoValue = isAutoInput && config?.autoValueType
+          ? config.autoValueType === "custom" 
+            ? config.customValue || ""
+            : generateAutoValue(config.autoValueType)
+          : "";
+        
         // 기본값 또는 자동값 설정
         const displayValue = isAutoInput ? autoValue : currentValue || config?.defaultValue || "";
 
@@ -862,17 +804,17 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         });
 
         const finalPlaceholder = config?.placeholder || placeholder || "선택하세요...";
-
+        
         // 🆕 연쇄 드롭다운 처리 (방법 1: 관계 코드 방식 - 권장)
         if (config?.cascadingRelationCode && config?.cascadingParentField) {
           const parentFieldValue = formData[config.cascadingParentField];
-
+          
           console.log("🔗 연쇄 드롭다운 (관계코드 방식):", {
             relationCode: config.cascadingRelationCode,
             parentField: config.cascadingParentField,
             parentValue: parentFieldValue,
           });
-
+          
           return applyStyles(
             <CascadingDropdownWrapper
               relationCode={config.cascadingRelationCode}
@@ -886,12 +828,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             />,
           );
         }
-
+        
         // 🔄 연쇄 드롭다운 처리 (방법 2: 직접 설정 방식 - 레거시)
         if (config?.cascading?.enabled) {
           const cascadingConfig = config.cascading;
           const parentValue = formData[cascadingConfig.parentField];
-
+          
           return applyStyles(
             <CascadingDropdownWrapper
               config={cascadingConfig}
@@ -904,7 +846,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             />,
           );
         }
-
+        
         // 일반 Select
         const options = config?.options || [
           { label: "옵션 1", value: "option1" },
@@ -1073,7 +1015,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               min={config?.minDate}
               max={config?.maxDate}
               className="w-full"
-              style={{ height: "100%" }}
+            style={{ height: "100%" }}
             />,
           );
         } else {
@@ -1141,20 +1083,19 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       case "file": {
         const widget = comp as WidgetComponent;
         const config = widget.webTypeConfig as FileTypeConfig | undefined;
-
+        
         // 현재 파일 값 가져오기
         const getCurrentValue = () => {
           const fieldName = widget.columnName || widget.id;
           return (externalFormData?.[fieldName] || localFormData[fieldName]) as any;
         };
-
+        
         const currentValue = getCurrentValue();
 
         // 화면 ID 추출 (URL에서)
-        const screenId =
-          typeof window !== "undefined" && window.location.pathname.includes("/screens/")
-            ? parseInt(window.location.pathname.split("/screens/")[1])
-            : null;
+        const screenId = typeof window !== 'undefined' && window.location.pathname.includes('/screens/') 
+          ? parseInt(window.location.pathname.split('/screens/')[1]) 
+          : null;
 
         console.log("📁 InteractiveScreenViewer - File 위젯:", {
           componentId: widget.id,
@@ -1176,14 +1117,14 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             e.target.value = ""; // 파일 선택 취소
             return;
           }
-
+          
           const files = e.target.files;
           const fieldName = widget.columnName || widget.id;
-
+          
           // 파일 선택을 취소한 경우 (files가 null이거나 길이가 0)
           if (!files || files.length === 0) {
             // console.log("📁 파일 선택 취소됨 - 기존 파일 유지");
-
+            
             // 현재 저장된 파일이 있는지 확인
             const currentStoredValue = externalFormData?.[fieldName] || localFormData[fieldName];
             if (currentStoredValue) {
@@ -1212,19 +1153,19 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           // 실제 서버로 파일 업로드
           try {
             toast.loading(`${files.length}개 파일 업로드 중...`);
-
+            
             const uploadResult = await uploadFilesAndCreateData(files);
-
+            
             if (uploadResult.success) {
               // console.log("📁 업로드 완료된 파일 데이터:", uploadResult.data);
-
-              setLocalFormData((prev) => ({ ...prev, [fieldName]: uploadResult.data }));
-
+              
+              setLocalFormData(prev => ({ ...prev, [fieldName]: uploadResult.data }));
+              
               // 외부 폼 데이터 변경 콜백 호출
               if (onFormDataChange) {
                 onFormDataChange(fieldName, uploadResult.data);
               }
-
+              
               toast.success(uploadResult.message);
             } else {
               throw new Error("파일 업로드에 실패했습니다.");
@@ -1232,7 +1173,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           } catch (error) {
             // console.error("파일 업로드 오류:", error);
             toast.error("파일 업로드에 실패했습니다.");
-
+            
             // 파일 입력 초기화
             e.target.value = "";
             return;
@@ -1241,13 +1182,13 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
         const clearFile = () => {
           const fieldName = widget.columnName || widget.id;
-          setLocalFormData((prev) => ({ ...prev, [fieldName]: null }));
-
+          setLocalFormData(prev => ({ ...prev, [fieldName]: null }));
+          
           // 외부 폼 데이터 변경 콜백 호출
           if (onFormDataChange) {
             onFormDataChange(fieldName, null);
           }
-
+          
           // 파일 input 초기화
           const fileInput = document.querySelector(`input[type="file"][data-field="${fieldName}"]`) as HTMLInputElement;
           if (fileInput) {
@@ -1261,31 +1202,39 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           // 새로운 JSON 구조에서 파일 정보 추출
           const fileData = currentValue.files || [];
           if (fileData.length === 0) return null;
-
+          
           return (
             <div className="mt-2 space-y-2">
-              <div className="text-foreground text-sm font-medium">업로드된 파일 ({fileData.length}개)</div>
+              <div className="text-sm font-medium text-foreground">
+                업로드된 파일 ({fileData.length}개)
+              </div>
               {fileData.map((fileInfo: any, index: number) => {
-                const isImage = fileInfo.type?.startsWith("image/");
-
+                const isImage = fileInfo.type?.startsWith('image/');
+                
                 return (
-                  <div key={index} className="bg-muted flex items-center gap-2 rounded border p-2">
-                    <div className="bg-muted/50 flex h-16 w-16 items-center justify-center rounded">
+                  <div key={index} className="flex items-center gap-2 rounded border bg-muted p-2">
+                    <div className="flex h-16 w-16 items-center justify-center rounded bg-muted/50">
                       {isImage ? (
                         <div className="text-success text-xs font-medium">IMG</div>
                       ) : (
-                        <File className="text-muted-foreground h-8 w-8" />
+                        <File className="h-8 w-8 text-muted-foreground" />
                       )}
                     </div>
-                    <div className="min-w-0 flex-1">
-                      <p className="text-foreground truncate text-sm font-medium">{fileInfo.name}</p>
-                      <p className="text-muted-foreground text-xs">{(fileInfo.size / 1024 / 1024).toFixed(2)} MB</p>
-                      <p className="text-muted-foreground text-xs">{fileInfo.type || "알 수 없는 형식"}</p>
-                      <p className="text-muted-foreground/70 text-xs">
-                        업로드: {new Date(fileInfo.uploadedAt).toLocaleString("ko-KR")}
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-foreground truncate">{fileInfo.name}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {(fileInfo.size / 1024 / 1024).toFixed(2)} MB
                       </p>
+                      <p className="text-xs text-muted-foreground">{fileInfo.type || '알 수 없는 형식'}</p>
+                      <p className="text-xs text-muted-foreground/70">업로드: {new Date(fileInfo.uploadedAt).toLocaleString('ko-KR')}</p>
                     </div>
-                    <Button type="button" variant="ghost" size="sm" onClick={clearFile} className="h-8 w-8 p-0">
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={clearFile}
+                      className="h-8 w-8 p-0"
+                    >
                       <X className="h-4 w-4" />
                     </Button>
                   </div>
@@ -1296,7 +1245,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         };
 
         const fieldName = widget.columnName || widget.id;
-
+        
         return applyStyles(
           <div className="w-full space-y-2">
             {/* 파일 선택 영역 */}
@@ -1309,45 +1258,45 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                 required={required}
                 multiple={config?.multiple}
                 accept={config?.accept}
-                className="absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
                 style={{ zIndex: 1 }}
               />
-              <div
-                className={cn(
-                  "flex items-center justify-center rounded-lg border-2 border-dashed p-4 text-center transition-colors",
-                  currentValue && currentValue.files && currentValue.files.length > 0
-                    ? "border-success/30 bg-success/10"
-                    : "border-input bg-muted hover:border-input/80 hover:bg-muted/80",
-                  readonly && "cursor-not-allowed opacity-50",
-                  !readonly && "cursor-pointer",
-                )}
-              >
+              <div className={cn(
+                "flex items-center justify-center rounded-lg border-2 border-dashed p-4 text-center transition-colors",
+                currentValue && currentValue.files && currentValue.files.length > 0 
+                  ? 'border-success/30 bg-success/10' 
+                  : 'border-input bg-muted hover:border-input/80 hover:bg-muted/80',
+                readonly && 'cursor-not-allowed opacity-50',
+                !readonly && 'cursor-pointer'
+              )}>
                 <div className="space-y-2">
                   {currentValue && currentValue.files && currentValue.files.length > 0 ? (
                     <>
                       <div className="flex items-center justify-center">
-                        <div className="bg-success/20 flex h-8 w-8 items-center justify-center rounded-full">
-                          <svg className="text-success h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-success/20">
+                          <svg className="h-5 w-5 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                           </svg>
                         </div>
                       </div>
-                      <p className="text-success text-sm font-medium">
-                        {currentValue.totalCount === 1 ? "파일 선택됨" : `${currentValue.totalCount}개 파일 선택됨`}
+                      <p className="text-sm font-medium text-success">
+                        {currentValue.totalCount === 1 
+                          ? '파일 선택됨' 
+                          : `${currentValue.totalCount}개 파일 선택됨`}
                       </p>
-                      <p className="text-success/80 text-xs">
+                      <p className="text-xs text-success/80">
                         총 {(currentValue.totalSize / 1024 / 1024).toFixed(2)}MB
                       </p>
-                      <p className="text-success/80 text-xs">클릭하여 다른 파일 선택</p>
+                      <p className="text-xs text-success/80">클릭하여 다른 파일 선택</p>
                     </>
                   ) : (
                     <>
-                      <Upload className="text-muted-foreground mx-auto h-8 w-8" />
-                      <p className="text-muted-foreground text-sm">
-                        {config?.dragDrop ? "파일을 드래그하여 놓거나 클릭하여 선택" : "클릭하여 파일 선택"}
+                      <Upload className="mx-auto h-8 w-8 text-muted-foreground" />
+                      <p className="text-sm text-muted-foreground">
+                        {config?.dragDrop ? '파일을 드래그하여 놓거나 클릭하여 선택' : '클릭하여 파일 선택'}
                       </p>
                       {(config?.accept || config?.maxSize) && (
-                        <div className="text-muted-foreground space-y-1 text-xs">
+                        <div className="text-xs text-muted-foreground space-y-1">
                           {config.accept && <div>허용 형식: {config.accept}</div>}
                           {config.maxSize && <div>최대 크기: {config.maxSize}MB</div>}
                           {config.multiple && <div>다중 선택 가능</div>}
@@ -1358,10 +1307,10 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                 </div>
               </div>
             </div>
-
+            
             {/* 파일 미리보기 */}
             {renderFilePreview()}
-          </div>,
+          </div>
         );
       }
 
@@ -1369,7 +1318,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         const widget = comp as WidgetComponent;
         const config = widget.webTypeConfig as CodeTypeConfig | undefined;
 
-        console.log("🔍 [InteractiveScreenViewer] Code 위젯 렌더링:", {
+        console.log(`🔍 [InteractiveScreenViewer] Code 위젯 렌더링:`, {
           componentId: widget.id,
           columnName: widget.columnName,
           codeCategory: config?.codeCategory,
@@ -1403,11 +1352,11 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               onEvent={(event: string, data: any) => {
                 // console.log(`Code widget event: ${event}`, data);
               }}
-            />,
+            />
           );
         } catch (error) {
           // console.error("DynamicWebTypeRenderer 로딩 실패, 기본 Select 사용:", error);
-
+          
           // 폴백: 기본 Select 컴포넌트 사용
           return applyStyles(
             <Select
@@ -1422,31 +1371,64 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               <SelectContent>
                 <SelectItem value="loading">로딩 중...</SelectItem>
               </SelectContent>
-            </Select>,
+            </Select>
           );
         }
       }
 
       case "entity": {
-        // DynamicWebTypeRenderer로 위임하여 EntitySearchInputWrapper 사용
         const widget = comp as WidgetComponent;
-        return applyStyles(
-          <DynamicWebTypeRenderer
-            webType="entity"
-            config={widget.webTypeConfig}
-            props={{
-              component: widget,
-              value: currentValue,
-              onChange: (value: any) => updateFormData(fieldName, value),
-              onFormDataChange: updateFormData,
-              formData: formData,
-              readonly: readonly,
-              required: required,
-              placeholder: widget.placeholder || "엔티티를 선택하세요",
-              isInteractive: true,
-              className: "w-full h-full",
-            }}
-          />,
+        const config = widget.webTypeConfig as EntityTypeConfig | undefined;
+
+        console.log("🏢 InteractiveScreenViewer - Entity 위젯:", {
+          componentId: widget.id,
+          widgetType: widget.widgetType,
+          config,
+          appliedSettings: {
+            entityName: config?.entityName,
+            displayField: config?.displayField,
+            valueField: config?.valueField,
+            multiple: config?.multiple,
+            defaultValue: config?.defaultValue,
+          },
+        });
+
+        const finalPlaceholder = config?.placeholder || "엔티티를 선택하세요...";
+        const defaultOptions = [
+          { label: "사용자", value: "user" },
+          { label: "제품", value: "product" },
+          { label: "주문", value: "order" },
+          { label: "카테고리", value: "category" },
+        ];
+
+        return (
+          <Select
+            value={currentValue || config?.defaultValue || ""}
+            onValueChange={(value) => updateFormData(fieldName, value)}
+            disabled={readonly}
+            required={required}
+          >
+            <SelectTrigger 
+              className="w-full"
+            style={{ height: "100%" }}
+              style={{
+                ...comp.style,
+                width: "100%",
+                height: "100%",
+              }}
+            >
+              <SelectValue placeholder={finalPlaceholder} />
+            </SelectTrigger>
+            <SelectContent>
+              {defaultOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {config?.displayFormat
+                    ? config.displayFormat.replace("{label}", option.label).replace("{value}", option.value)
+                    : option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>,
         );
       }
 
@@ -1459,9 +1441,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           if (isPreviewMode) {
             return;
           }
-
+          
           const actionType = config?.actionType || "save";
-
+          
           try {
             switch (actionType) {
               case "save":
@@ -1498,7 +1480,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                 await handleCustomAction();
                 break;
               default:
-              // console.log(`알 수 없는 액션 타입: ${actionType}`);
+                // console.log(`알 수 없는 액션 타입: ${actionType}`);
             }
           } catch (error) {
             // console.error(`버튼 액션 실행 오류 (${actionType}):`, error);
@@ -1529,24 +1511,24 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           // 기존 방식 (레거시 지원)
           const currentFormData = { ...localFormData, ...externalFormData };
           // console.log("💾 기존 방식으로 저장 - currentFormData:", currentFormData);
-
+          
           // formData 유효성 체크를 완화 (빈 객체라도 위젯이 있으면 저장 진행)
-          const hasWidgets = allComponents.some((comp) => comp.type === "widget");
+          const hasWidgets = allComponents.some(comp => comp.type === 'widget');
           if (!hasWidgets) {
             alert("저장할 입력 컴포넌트가 없습니다.");
             return;
           }
 
           // 필수 항목 검증
-          const requiredFields = allComponents.filter((c) => c.required && (c.columnName || c.id));
-          const missingFields = requiredFields.filter((field) => {
+          const requiredFields = allComponents.filter(c => c.required && (c.columnName || c.id));
+          const missingFields = requiredFields.filter(field => {
             const fieldName = field.columnName || field.id;
             const value = currentFormData[fieldName];
             return !value || value.toString().trim() === "";
           });
 
           if (missingFields.length > 0) {
-            const fieldNames = missingFields.map((f) => f.label || f.columnName || f.id).join(", ");
+            const fieldNames = missingFields.map(f => f.label || f.columnName || f.id).join(", ");
             alert(`다음 필수 항목을 입력해주세요: ${fieldNames}`);
             return;
           }
@@ -1559,59 +1541,56 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           try {
             // 컬럼명 기반으로 데이터 매핑
             const mappedData: Record<string, any> = {};
-
+            
             // 입력 가능한 컴포넌트에서 데이터 수집
-            allComponents.forEach((comp) => {
+            allComponents.forEach(comp => {
               // 위젯 컴포넌트이고 입력 가능한 타입인 경우
-              if (comp.type === "widget") {
+              if (comp.type === 'widget') {
                 const widget = comp as WidgetComponent;
                 const fieldName = widget.columnName || widget.id;
                 let value = currentFormData[fieldName];
-
+                
                 console.log(`🔍 컴포넌트 처리: ${fieldName}`, {
                   widgetType: widget.widgetType,
                   formDataValue: value,
                   hasWebTypeConfig: !!widget.webTypeConfig,
-                  config: widget.webTypeConfig,
+                  config: widget.webTypeConfig
                 });
-
+                
                 // 자동입력 필드인 경우에만 값이 없을 때 생성
-                if (
-                  (widget.widgetType === "text" || widget.widgetType === "email" || widget.widgetType === "tel") &&
-                  widget.webTypeConfig
-                ) {
+                if ((widget.widgetType === 'text' || widget.widgetType === 'email' || widget.widgetType === 'tel') && 
+                    widget.webTypeConfig) {
                   const config = widget.webTypeConfig as TextTypeConfig;
                   const isAutoInput = config?.autoInput || false;
-
+                  
                   console.log(`📋 ${fieldName} 자동입력 체크:`, {
                     isAutoInput,
                     autoValueType: config?.autoValueType,
                     hasValue: !!value,
-                    value,
+                    value
                   });
-
-                  if (isAutoInput && config?.autoValueType && (!value || value === "")) {
+                  
+                  if (isAutoInput && config?.autoValueType && (!value || value === '')) {
                     // 자동입력이고 값이 없을 때만 생성
-                    value =
-                      config.autoValueType === "custom"
-                        ? config.customValue || ""
-                        : generateAutoValue(config.autoValueType);
-
+                    value = config.autoValueType === "custom" 
+                      ? config.customValue || ""
+                      : generateAutoValue(config.autoValueType);
+                    
                     console.log("💾 자동입력 값 저장 (값이 없어서 생성):", {
                       fieldName,
                       autoValueType: config.autoValueType,
-                      generatedValue: value,
+                      generatedValue: value
                     });
                   } else if (isAutoInput && value) {
                     console.log("💾 자동입력 필드지만 기존 값 유지:", {
                       fieldName,
-                      existingValue: value,
+                      existingValue: value
                     });
                   } else if (!isAutoInput) {
                     // console.log(`📝 일반 입력 필드: ${fieldName} = "${value}"`);
                   }
                 }
-
+                
                 // 값이 있는 경우만 매핑 (빈 문자열도 포함하되, undefined는 제외)
                 if (value !== undefined && value !== null && value !== "undefined") {
                   // columnName이 있으면 columnName을 키로, 없으면 컴포넌트 ID를 키로 사용
@@ -1630,34 +1609,35 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               매핑된데이터: mappedData,
               화면정보: screenInfo,
               전체컴포넌트수: allComponents.length,
-              위젯컴포넌트수: allComponents.filter((c) => c.type === "widget").length,
+              위젯컴포넌트수: allComponents.filter(c => c.type === 'widget').length,
             });
 
             // 각 컴포넌트의 상세 정보 로그
             // console.log("🔍 컴포넌트별 데이터 수집 상세:");
-            allComponents.forEach((comp) => {
-              if (comp.type === "widget") {
+            allComponents.forEach(comp => {
+              if (comp.type === 'widget') {
                 const widget = comp as WidgetComponent;
                 const fieldName = widget.columnName || widget.id;
                 const value = currentFormData[fieldName];
-                const hasValue = value !== undefined && value !== null && value !== "";
+                const hasValue = value !== undefined && value !== null && value !== '';
                 // console.log(`  - ${fieldName} (${widget.widgetType}): "${value}" (값있음: ${hasValue}, 컬럼명: ${widget.columnName})`);
               }
             });
-
+            
             // 매핑된 데이터가 비어있으면 경고
             if (Object.keys(mappedData).length === 0) {
               // console.warn("⚠️ 매핑된 데이터가 없습니다. 빈 데이터로 저장됩니다.");
             }
 
             // 테이블명 결정 (화면 정보에서 가져오거나 첫 번째 컴포넌트의 테이블명 사용)
-            const tableName =
-              screenInfo.tableName || allComponents.find((c) => c.columnName)?.tableName || "dynamic_form_data"; // 기본값
+            const tableName = screenInfo.tableName || 
+                             allComponents.find(c => c.columnName)?.tableName ||
+                             "dynamic_form_data"; // 기본값
 
             // 🆕 자동으로 작성자 정보 추가 (user.userId가 확실히 있음)
             const writerValue = user.userId;
             const companyCodeValue = user.companyCode || "";
-
+            
             console.log("👤 현재 사용자 정보:", {
               userId: user.userId,
               userName: userName,
@@ -1689,11 +1669,11 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             if (result.success) {
               alert("저장되었습니다.");
               // console.log("✅ 저장 성공:", result.data);
-
+              
               // 저장 후 데이터 초기화 (선택사항)
               if (onFormDataChange) {
                 const resetData: Record<string, any> = {};
-                Object.keys(formData).forEach((key) => {
+                Object.keys(formData).forEach(key => {
                   resetData[key] = "";
                 });
                 onFormDataChange(resetData);
@@ -1707,25 +1687,27 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           }
         };
 
+
         // 삭제 액션
         const handleDeleteAction = async () => {
           const confirmMessage = config?.confirmMessage || "정말로 삭제하시겠습니까?";
-
+          
           if (!confirm(confirmMessage)) {
             return;
           }
 
           // 삭제할 레코드 ID가 필요 (폼 데이터에서 id 필드 찾기)
           const recordId = formData["id"] || formData["ID"] || formData["objid"];
-
+          
           if (!recordId) {
             alert("삭제할 데이터를 찾을 수 없습니다. (ID가 없음)");
             return;
           }
 
           // 테이블명 결정
-          const tableName =
-            screenInfo?.tableName || allComponents.find((c) => c.columnName)?.tableName || "unknown_table";
+          const tableName = screenInfo?.tableName || 
+                           allComponents.find(c => c.columnName)?.tableName ||
+                           "unknown_table";
 
           if (!tableName || tableName === "unknown_table") {
             alert("테이블 정보가 없어 삭제할 수 없습니다.");
@@ -1735,17 +1717,16 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           try {
             // console.log("🗑️ 삭제 실행:", { recordId, tableName, formData });
 
-            // screenId 전달하여 제어관리 실행 가능하도록 함
-            const result = await dynamicFormApi.deleteFormDataFromTable(recordId, tableName, screenInfo?.id);
+            const result = await dynamicFormApi.deleteFormDataFromTable(recordId, tableName);
 
             if (result.success) {
               alert("삭제되었습니다.");
               // console.log("✅ 삭제 성공");
-
+              
               // 삭제 후 폼 초기화
               if (onFormDataChange) {
                 const resetData: Record<string, any> = {};
-                Object.keys(formData).forEach((key) => {
+                Object.keys(formData).forEach(key => {
                   resetData[key] = "";
                 });
                 onFormDataChange(resetData);
@@ -1762,13 +1743,13 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         // 편집 액션
         const handleEditAction = () => {
           console.log("✏️ 수정 액션 실행");
-
+          
           // 버튼 컴포넌트의 수정 모달 설정 가져오기
           const editModalTitle = config?.editModalTitle || "";
           const editModalDescription = config?.editModalDescription || "";
-
+          
           console.log("📝 버튼 수정 모달 설정:", { editModalTitle, editModalDescription });
-
+          
           // EditModal 열기 이벤트 발생
           const event = new CustomEvent("openEditModal", {
             detail: {
@@ -1797,7 +1778,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         const handleSearchAction = () => {
           // console.log("🔍 검색 실행:", formData);
           // 검색 로직
-          const searchTerms = Object.values(formData).filter((v) => v && v.toString().trim());
+          const searchTerms = Object.values(formData).filter(v => v && v.toString().trim());
           if (searchTerms.length === 0) {
             alert("검색할 내용을 입력해주세요.");
           } else {
@@ -1810,7 +1791,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           if (confirm("모든 입력을 초기화하시겠습니까?")) {
             if (onFormDataChange) {
               const resetData: Record<string, any> = {};
-              Object.keys(formData).forEach((key) => {
+              Object.keys(formData).forEach(key => {
                 resetData[key] = "";
               });
               onFormDataChange(resetData);
@@ -1830,24 +1811,22 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         // 닫기 액션
         const handleCloseAction = () => {
           // console.log("❌ 닫기 액션 실행");
-
+          
           // 모달 내부에서 실행되는지 확인
           const isInModal = document.querySelector('[role="dialog"]') !== null;
           const isInPopup = window.opener !== null;
-
+          
           if (isInModal) {
             // 모달 내부인 경우: 모달의 닫기 버튼 클릭하거나 모달 닫기 이벤트 발생
             // console.log("🔄 모달 내부에서 닫기 - 모달 닫기 시도");
-
+            
             // 모달의 닫기 버튼을 찾아서 클릭
-            const modalCloseButton = document.querySelector(
-              '[role="dialog"] button[aria-label*="Close"], [role="dialog"] button[data-dismiss="modal"], [role="dialog"] .dialog-close',
-            );
+            const modalCloseButton = document.querySelector('[role="dialog"] button[aria-label*="Close"], [role="dialog"] button[data-dismiss="modal"], [role="dialog"] .dialog-close');
             if (modalCloseButton) {
               (modalCloseButton as HTMLElement).click();
             } else {
               // ESC 키 이벤트 발생시키기
-              const escEvent = new KeyboardEvent("keydown", { key: "Escape", keyCode: 27, which: 27 });
+              const escEvent = new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, which: 27 });
               document.dispatchEvent(escEvent);
             }
           } else if (isInPopup) {
@@ -1864,7 +1843,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         // 팝업 액션
         const handlePopupAction = () => {
           // console.log("🎯 팝업 액션 실행:", { popupScreenId: config?.popupScreenId });
-
+          
           if (config?.popupScreenId) {
             // 화면 모달 열기
             setPopupScreen({
@@ -1883,17 +1862,17 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         // 네비게이션 액션
         const handleNavigateAction = () => {
           const navigateType = config?.navigateType || "url";
-
+          
           if (navigateType === "screen" && config?.navigateScreenId) {
             // 화면으로 이동
             const screenPath = `/screens/${config.navigateScreenId}`;
-
+            
             console.log("🎯 화면으로 이동:", {
               screenId: config.navigateScreenId,
               target: config.navigateTarget || "_self",
-              path: screenPath,
+              path: screenPath
             });
-
+            
             if (config.navigateTarget === "_blank") {
               window.open(screenPath, "_blank");
             } else {
@@ -1903,9 +1882,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             // URL로 이동
             console.log("🔗 URL로 이동:", {
               url: config.navigateUrl,
-              target: config.navigateTarget || "_self",
+              target: config.navigateTarget || "_self"
             });
-
+            
             if (config.navigateTarget === "_blank") {
               window.open(config.navigateUrl, "_blank");
             } else {
@@ -1915,7 +1894,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             console.log("🔗 네비게이션 정보가 설정되지 않았습니다:", {
               navigateType,
               hasUrl: !!config?.navigateUrl,
-              hasScreenId: !!config?.navigateScreenId,
+              hasScreenId: !!config?.navigateScreenId
             });
           }
         };
@@ -1938,16 +1917,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           }
         };
 
-        // 버튼 텍스트 다국어 적용 (componentConfig.langKey 확인)
-        const buttonLangKey = (widget as any).componentConfig?.langKey;
-        const buttonText =
-          buttonLangKey && translations[buttonLangKey]
-            ? translations[buttonLangKey]
-            : (widget as any).componentConfig?.text || label || "버튼";
-
         // 커스텀 색상이 있으면 Tailwind 클래스 대신 직접 스타일 적용
         const hasCustomColors = config?.backgroundColor || config?.textColor;
-
+        
         return applyStyles(
           <button
             onClick={handleButtonClick}
@@ -1964,8 +1936,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               borderColor: config?.borderColor,
             }}
           >
-            {buttonText}
-          </button>,
+            {label || "버튼"}
+          </button>
         );
       }
 
@@ -1988,73 +1960,71 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
   // 파일 첨부 컴포넌트 처리
   if (isFileComponent(component)) {
     const fileComponent = component as FileComponent;
-
+    
     console.log("🎯 File 컴포넌트 렌더링:", {
       componentId: fileComponent.id,
       currentUploadedFiles: fileComponent.uploadedFiles?.length || 0,
       hasOnFormDataChange: !!onFormDataChange,
-      userInfo: user ? { userId: user.userId, companyCode: user.companyCode } : "no user",
+      userInfo: user ? { userId: user.userId, companyCode: user.companyCode } : "no user"
     });
+    
+    const handleFileUpdate = useCallback(async (updates: Partial<FileComponent>) => {
+      // 실제 화면에서는 파일 업데이트를 처리
+      console.log("📎 InteractiveScreenViewer - 파일 컴포넌트 업데이트:", {
+        updates,
+        hasUploadedFiles: !!updates.uploadedFiles,
+        uploadedFilesCount: updates.uploadedFiles?.length || 0,
+        hasOnFormDataChange: !!onFormDataChange
+      });
+      
+      if (updates.uploadedFiles && onFormDataChange) {
+        const fieldName = fileComponent.columnName || fileComponent.id;
+        
+        // attach_file_info 테이블 구조에 맞는 데이터 생성
+        const fileInfoForDB = updates.uploadedFiles.map(file => ({
+          objid: file.objid.replace('temp_', ''), // temp_ 제거
+          target_objid: "",
+          saved_file_name: file.savedFileName,
+          real_file_name: file.realFileName,
+          doc_type: file.docType,
+          doc_type_name: file.docTypeName,
+          file_size: file.fileSize,
+          file_ext: file.fileExt,
+          file_path: file.filePath,
+          writer: file.writer,
+          regdate: file.regdate,
+          status: file.status,
+          parent_target_objid: "",
+          company_code: file.companyCode
+        }));
 
-    const handleFileUpdate = useCallback(
-      async (updates: Partial<FileComponent>) => {
-        // 실제 화면에서는 파일 업데이트를 처리
-        console.log("📎 InteractiveScreenViewer - 파일 컴포넌트 업데이트:", {
-          updates,
+        // console.log("💾 attach_file_info 형태로 변환된 데이터:", fileInfoForDB);
+
+        // FormData에는 파일 연결 정보만 저장 (간단한 형태)
+        const formDataValue = {
+          fileCount: updates.uploadedFiles.length,
+          docType: fileComponent.fileConfig.docType,
+          files: updates.uploadedFiles.map(file => ({
+            objid: file.objid,
+            realFileName: file.realFileName,
+            fileSize: file.fileSize,
+            status: file.status
+          }))
+        };
+
+        // console.log("📝 FormData 저장값:", { fieldName, formDataValue });
+        onFormDataChange(fieldName, formDataValue);
+
+        // TODO: 실제 API 연동 시 attach_file_info 테이블에 저장
+        // await saveFilesToDatabase(fileInfoForDB);
+        
+      } else {
+        console.warn("⚠️ 파일 업데이트 실패:", {
           hasUploadedFiles: !!updates.uploadedFiles,
-          uploadedFilesCount: updates.uploadedFiles?.length || 0,
-          hasOnFormDataChange: !!onFormDataChange,
+          hasOnFormDataChange: !!onFormDataChange
         });
-
-        if (updates.uploadedFiles && onFormDataChange) {
-          const fieldName = fileComponent.columnName || fileComponent.id;
-
-          // attach_file_info 테이블 구조에 맞는 데이터 생성
-          const fileInfoForDB = updates.uploadedFiles.map((file) => ({
-            objid: file.objid.replace("temp_", ""), // temp_ 제거
-            target_objid: "",
-            saved_file_name: file.savedFileName,
-            real_file_name: file.realFileName,
-            doc_type: file.docType,
-            doc_type_name: file.docTypeName,
-            file_size: file.fileSize,
-            file_ext: file.fileExt,
-            file_path: file.filePath,
-            writer: file.writer,
-            regdate: file.regdate,
-            status: file.status,
-            parent_target_objid: "",
-            company_code: file.companyCode,
-          }));
-
-          // console.log("💾 attach_file_info 형태로 변환된 데이터:", fileInfoForDB);
-
-          // FormData에는 파일 연결 정보만 저장 (간단한 형태)
-          const formDataValue = {
-            fileCount: updates.uploadedFiles.length,
-            docType: fileComponent.fileConfig.docType,
-            files: updates.uploadedFiles.map((file) => ({
-              objid: file.objid,
-              realFileName: file.realFileName,
-              fileSize: file.fileSize,
-              status: file.status,
-            })),
-          };
-
-          // console.log("📝 FormData 저장값:", { fieldName, formDataValue });
-          onFormDataChange(fieldName, formDataValue);
-
-          // TODO: 실제 API 연동 시 attach_file_info 테이블에 저장
-          // await saveFilesToDatabase(fileInfoForDB);
-        } else {
-          console.warn("⚠️ 파일 업데이트 실패:", {
-            hasUploadedFiles: !!updates.uploadedFiles,
-            hasOnFormDataChange: !!onFormDataChange,
-          });
-        }
-      },
-      [fileComponent, onFormDataChange],
-    );
+      }
+    }, [fileComponent, onFormDataChange]);
 
     return (
       <div className="h-full w-full">
@@ -2109,10 +2079,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     (component.label || component.style?.labelText) &&
     !templateTypes.includes(component.type); // 템플릿 컴포넌트는 라벨 표시 안함
 
-  // 다국어 라벨 텍스트 결정 (langKey가 있으면 번역 텍스트 사용)
-  const langKey = (component as any).langKey;
-  const originalLabelText = component.style?.labelText || component.label || "";
-  const labelText = langKey && translations[langKey] ? translations[langKey] : originalLabelText;
+  const labelText = component.style?.labelText || component.label || "";
 
   // 라벨 표시 여부 로그 (디버깅용)
   if (component.type === "widget") {
@@ -2121,8 +2088,6 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       hideLabel,
       shouldShowLabel,
       labelText,
-      langKey,
-      hasTranslation: !!translations[langKey],
     });
   }
 
@@ -2137,6 +2102,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     marginBottom: component.style?.labelMarginBottom || "4px",
   };
 
+
   // 상위에서 라벨을 표시한 경우, 컴포넌트 내부에서는 라벨을 숨김
   const componentForRendering = shouldShowLabel
     ? {
@@ -2152,122 +2118,112 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     <SplitPanelProvider>
       <ActiveTabProvider>
         <TableOptionsProvider>
-          <div className="flex h-full flex-col">
-            {/* 테이블 옵션 툴바 */}
-            <TableOptionsToolbar />
+        <div className="flex h-full flex-col">
+          {/* 테이블 옵션 툴바 */}
+          <TableOptionsToolbar />
+          
+          {/* 메인 컨텐츠 */}
+          <div className="h-full flex-1" style={{ width: '100%' }}>
+            {/* 라벨이 있는 경우 표시 (데이터 테이블 제외) */}
+            {shouldShowLabel && (
+              <label className="mb-2 block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                {labelText}
+                {(component.required || component.componentConfig?.required) && <span className="ml-1 text-destructive">*</span>}
+              </label>
+            )}
 
-            {/* 메인 컨텐츠 */}
-            <div className="h-full flex-1" style={{ width: "100%" }}>
-              {/* 라벨이 있는 경우 표시 (데이터 테이블 제외) */}
-              {shouldShowLabel && (
-                <label className="mb-2 block text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-                  {labelText}
-                  {(component.required || component.componentConfig?.required) && (
-                    <span className="text-destructive ml-1">*</span>
-                  )}
-                </label>
-              )}
-
-              {/* 실제 위젯 - 상위에서 라벨을 렌더링했으므로 자식은 라벨 숨김 */}
-              <div className="h-full" style={{ width: "100%", height: "100%" }}>
-                {renderInteractiveWidget(componentForRendering)}
-              </div>
-            </div>
+          {/* 실제 위젯 - 상위에서 라벨을 렌더링했으므로 자식은 라벨 숨김 */}
+          <div className="h-full" style={{ width: '100%', height: '100%' }}>{renderInteractiveWidget(componentForRendering)}</div>
           </div>
+        </div>
 
-          {/* 개선된 검증 패널 (선택적 표시) */}
-          {showValidationPanel && enhancedValidation && (
-            <div className="absolute right-4 bottom-4 z-50">
-              <FormValidationIndicator
-                validationState={enhancedValidation.validationState}
-                saveState={enhancedValidation.saveState}
-                onSave={async () => {
-                  const success = await enhancedValidation.saveForm();
-                  if (success) {
-                    toast.success("데이터가 성공적으로 저장되었습니다!");
-                  }
-                }}
-                canSave={enhancedValidation.canSave}
-                compact={true}
-                showDetails={false}
-              />
-            </div>
-          )}
+        {/* 개선된 검증 패널 (선택적 표시) */}
+        {showValidationPanel && enhancedValidation && (
+          <div className="absolute bottom-4 right-4 z-50">
+            <FormValidationIndicator
+              validationState={enhancedValidation.validationState}
+              saveState={enhancedValidation.saveState}
+              onSave={async () => {
+                const success = await enhancedValidation.saveForm();
+                if (success) {
+                  toast.success("데이터가 성공적으로 저장되었습니다!");
+                }
+              }}
+              canSave={enhancedValidation.canSave}
+              compact={true}
+              showDetails={false}
+            />
+          </div>
+        )}
 
-          {/* 모달 화면 */}
-          <Dialog
-            open={!!popupScreen}
-            onOpenChange={() => {
-              setPopupScreen(null);
-              setPopupFormData({}); // 팝업 닫을 때 formData도 초기화
-            }}
-          >
-            <DialogContent className="max-h-[90vh] max-w-4xl overflow-hidden p-0">
-              <DialogHeader className="px-6 pt-4 pb-2">
-                <DialogTitle>{popupScreen?.title || "상세 정보"}</DialogTitle>
-              </DialogHeader>
-
-              <div className="overflow-y-auto px-6 pb-6" style={{ maxHeight: "calc(90vh - 80px)" }}>
-                {popupLoading ? (
-                  <div className="flex items-center justify-center py-8">
-                    <div className="text-muted-foreground">화면을 불러오는 중...</div>
-                  </div>
-                ) : popupLayout.length > 0 ? (
-                  <div
-                    className="bg-background relative rounded border"
-                    style={{
-                      width: popupScreenResolution ? `${popupScreenResolution.width}px` : "100%",
-                      height: popupScreenResolution ? `${popupScreenResolution.height}px` : "400px",
-                      minHeight: "400px",
-                      position: "relative",
-                      overflow: "hidden",
-                    }}
-                  >
-                    {/* 팝업에서도 실제 위치와 크기로 렌더링 */}
-                    {popupLayout.map((popupComponent) => (
-                      <div
-                        key={popupComponent.id}
-                        className="absolute"
-                        style={{
-                          left: `${popupComponent.position.x}px`,
-                          top: `${popupComponent.position.y}px`,
-                          width: popupComponent.style?.width || `${popupComponent.size.width}px`,
-                          height: popupComponent.style?.height || `${popupComponent.size.height}px`,
-                          zIndex: Math.min(popupComponent.position.z || 1, 20), // 최대 z-index 20으로 제한
+        {/* 모달 화면 */}
+        <Dialog open={!!popupScreen} onOpenChange={() => {
+          setPopupScreen(null);
+          setPopupFormData({}); // 팝업 닫을 때 formData도 초기화
+        }}>
+          <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden p-0">
+            <DialogHeader className="px-6 pt-4 pb-2">
+              <DialogTitle>{popupScreen?.title || "상세 정보"}</DialogTitle>
+            </DialogHeader>
+            
+            <div className="overflow-y-auto px-6 pb-6" style={{ maxHeight: "calc(90vh - 80px)" }}>
+              {popupLoading ? (
+                <div className="flex items-center justify-center py-8">
+                  <div className="text-muted-foreground">화면을 불러오는 중...</div>
+                </div>
+              ) : popupLayout.length > 0 ? (
+                <div className="relative bg-background border rounded" style={{ 
+                  width: popupScreenResolution ? `${popupScreenResolution.width}px` : "100%", 
+                  height: popupScreenResolution ? `${popupScreenResolution.height}px` : "400px",
+                  minHeight: "400px",
+                  position: "relative",
+                  overflow: "hidden"
+                }}>
+                  {/* 팝업에서도 실제 위치와 크기로 렌더링 */}
+                  {popupLayout.map((popupComponent) => (
+                    <div
+                      key={popupComponent.id}
+                      className="absolute"
+                      style={{
+                        left: `${popupComponent.position.x}px`,
+                        top: `${popupComponent.position.y}px`,
+                        width: popupComponent.style?.width || `${popupComponent.size.width}px`,
+                        height: popupComponent.style?.height || `${popupComponent.size.height}px`,
+                        zIndex: Math.min(popupComponent.position.z || 1, 20), // 최대 z-index 20으로 제한
+                      }}
+                    >
+                      {/* 🎯 핵심 수정: 팝업 전용 formData 사용 */}
+                      <InteractiveScreenViewer
+                        component={popupComponent}
+                        allComponents={popupLayout}
+                        hideLabel={false}
+                        screenInfo={popupScreenInfo || undefined}
+                        formData={popupFormData}
+                        onFormDataChange={(fieldName, value) => {
+                          console.log("💾 팝업 formData 업데이트:", {
+                            fieldName,
+                            value,
+                            valueType: typeof value,
+                            prevFormData: popupFormData
+                          });
+                          
+                          setPopupFormData(prev => ({ 
+                            ...prev, 
+                            [fieldName]: value 
+                          }));
                         }}
-                      >
-                        {/* 🎯 핵심 수정: 팝업 전용 formData 사용 */}
-                        <InteractiveScreenViewer
-                          component={popupComponent}
-                          allComponents={popupLayout}
-                          hideLabel={false}
-                          screenInfo={popupScreenInfo || undefined}
-                          formData={popupFormData}
-                          onFormDataChange={(fieldName, value) => {
-                            console.log("💾 팝업 formData 업데이트:", {
-                              fieldName,
-                              value,
-                              valueType: typeof value,
-                              prevFormData: popupFormData,
-                            });
-
-                            setPopupFormData((prev) => ({
-                              ...prev,
-                              [fieldName]: value,
-                            }));
-                          }}
-                        />
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <div className="flex items-center justify-center py-8">
-                    <div className="text-muted-foreground">화면 데이터가 없습니다.</div>
-                  </div>
-                )}
-              </div>
-            </DialogContent>
-          </Dialog>
+                      />
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="flex items-center justify-center py-8">
+                  <div className="text-muted-foreground">화면 데이터가 없습니다.</div>
+                </div>
+              )}
+            </div>
+          </DialogContent>
+        </Dialog>
         </TableOptionsProvider>
       </ActiveTabProvider>
     </SplitPanelProvider>
diff --git a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
index f3adf081..15f620d6 100644
--- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
+++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
@@ -374,7 +374,6 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
           isInteractive={true}
           formData={formData}
           originalData={originalData || undefined}
-          initialData={(originalData && Object.keys(originalData).length > 0) ? originalData : formData} // 🆕 originalData가 있으면 사용, 없으면 formData 사용 (생성 모드에서 부모 데이터 전달)
           onFormDataChange={handleFormDataChange}
           screenId={screenInfo?.id}
           tableName={screenInfo?.tableName}
diff --git a/frontend/components/screen/ScreenGroupModal.tsx b/frontend/components/screen/ScreenGroupModal.tsx
index 351f3b18..3cf0759a 100644
--- a/frontend/components/screen/ScreenGroupModal.tsx
+++ b/frontend/components/screen/ScreenGroupModal.tsx
@@ -315,7 +315,11 @@ export function ScreenGroupModal({
                       <CommandItem
                         value="none"
                         onSelect={() => {
-                          setFormData({ ...formData, parent_group_id: null });
+                          setFormData({ 
+                            ...formData, 
+                            parent_group_id: null,
+                            // 대분류 선택 시 현재 회사 코드 유지
+                          });
                           setIsParentGroupSelectOpen(false);
                         }}
                         className="text-xs sm:text-sm"
@@ -335,7 +339,13 @@ export function ScreenGroupModal({
                           key={parentGroup.id}
                           value={`${parentGroup.group_name} ${getGroupPath(parentGroup.id)}`}
                           onSelect={() => {
-                            setFormData({ ...formData, parent_group_id: parentGroup.id });
+                            // 상위 그룹의 company_code로 자동 설정
+                            const parentCompanyCode = parentGroup.company_code || formData.target_company_code;
+                            setFormData({ 
+                              ...formData, 
+                              parent_group_id: parentGroup.id,
+                              target_company_code: parentCompanyCode,
+                            });
                             setIsParentGroupSelectOpen(false);
                           }}
                           className="text-xs sm:text-sm"
diff --git a/frontend/components/screen/ScreenGroupTreeView.tsx b/frontend/components/screen/ScreenGroupTreeView.tsx
index 6fa7314b..b171bbe1 100644
--- a/frontend/components/screen/ScreenGroupTreeView.tsx
+++ b/frontend/components/screen/ScreenGroupTreeView.tsx
@@ -13,6 +13,9 @@ import {
   Edit,
   Trash2,
   FolderInput,
+  Copy,
+  FolderTree,
+  Loader2,
 } from "lucide-react";
 import { ScreenDefinition } from "@/types/screen";
 import {
@@ -73,7 +76,9 @@ import {
 } from "@/components/ui/popover";
 import { Check, ChevronsUpDown } from "lucide-react";
 import { ScreenGroupModal } from "./ScreenGroupModal";
+import CopyScreenModal from "./CopyScreenModal";
 import { toast } from "sonner";
+import { screenApi } from "@/lib/api/screen";
 
 interface ScreenGroupTreeViewProps {
   screens: ScreenDefinition[];
@@ -115,15 +120,41 @@ export function ScreenGroupTreeView({
   // 삭제 확인 다이얼로그 상태
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [deletingGroup, setDeletingGroup] = useState<ScreenGroup | null>(null);
+  const [deleteScreensWithGroup, setDeleteScreensWithGroup] = useState(false); // 화면도 함께 삭제 체크박스
+  const [isDeleting, setIsDeleting] = useState(false); // 삭제 진행 중 상태
+  const [deleteProgress, setDeleteProgress] = useState({ current: 0, total: 0, message: "" }); // 삭제 진행 상태
 
-  // 화면 이동 메뉴 상태
-  const [movingScreen, setMovingScreen] = useState<ScreenDefinition | null>(null);
-  const [isMoveMenuOpen, setIsMoveMenuOpen] = useState(false);
+  // 단일 화면 삭제 상태
+  const [isScreenDeleteDialogOpen, setIsScreenDeleteDialogOpen] = useState(false);
+  const [deletingScreen, setDeletingScreen] = useState<ScreenDefinition | null>(null);
+  const [isScreenDeleting, setIsScreenDeleting] = useState(false); // 화면 삭제 진행 중
+
+  // 화면 수정 모달 상태 (이름 변경 + 그룹 이동 통합)
+  const [editingScreen, setEditingScreen] = useState<ScreenDefinition | null>(null);
+  const [isEditScreenModalOpen, setIsEditScreenModalOpen] = useState(false);
+  const [editScreenName, setEditScreenName] = useState<string>("");
   const [selectedGroupForMove, setSelectedGroupForMove] = useState<number | null>(null);
   const [screenRole, setScreenRole] = useState<string>("");
   const [isGroupSelectOpen, setIsGroupSelectOpen] = useState(false);
   const [displayOrder, setDisplayOrder] = useState<number>(1);
 
+  // 화면 복제 모달 상태 (CopyScreenModal 사용)
+  const [isCopyModalOpen, setIsCopyModalOpen] = useState(false);
+  const [copyingScreen, setCopyingScreen] = useState<ScreenDefinition | null>(null);
+  const [copyTargetGroupId, setCopyTargetGroupId] = useState<number | null>(null);
+  const [copyMode, setCopyMode] = useState<"screen" | "group">("screen");
+
+  // 그룹 복제 모달 상태 (CopyScreenModal 그룹 모드 사용)
+  const [copyingGroup, setCopyingGroup] = useState<ScreenGroup | null>(null);
+
+  // 컨텍스트 메뉴 상태 (화면용)
+  const [contextMenuScreen, setContextMenuScreen] = useState<ScreenDefinition | null>(null);
+  const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | null>(null);
+
+  // 그룹 컨텍스트 메뉴 상태
+  const [contextMenuGroup, setContextMenuGroup] = useState<ScreenGroup | null>(null);
+  const [contextMenuGroupPosition, setContextMenuGroupPosition] = useState<{ x: number; y: number } | null>(null);
+
   // 그룹 목록 및 그룹별 화면 로드
   useEffect(() => {
     loadGroupsData();
@@ -219,21 +250,110 @@ export function ScreenGroupTreeView({
   };
 
   // 그룹 삭제 버튼 클릭
-  const handleDeleteGroup = (group: ScreenGroup, e: React.MouseEvent) => {
-    e.stopPropagation();
+  const handleDeleteGroup = (group: ScreenGroup, e?: React.MouseEvent) => {
+    e?.stopPropagation();
     setDeletingGroup(group);
+    setDeleteScreensWithGroup(false); // 기본값: 화면 삭제 안함
     setIsDeleteDialogOpen(true);
   };
 
+  // 그룹과 모든 하위 그룹의 화면을 재귀적으로 수집
+  const getAllScreensInGroupRecursively = (groupId: number): ScreenDefinition[] => {
+    const result: ScreenDefinition[] = [];
+    
+    // 현재 그룹의 화면들
+    const currentGroupScreens = getScreensInGroup(groupId);
+    result.push(...currentGroupScreens);
+    
+    // 하위 그룹들 찾기
+    const childGroups = groups.filter((g) => (g as any).parent_group_id === groupId);
+    for (const childGroup of childGroups) {
+      const childScreens = getAllScreensInGroupRecursively(childGroup.id);
+      result.push(...childScreens);
+    }
+    
+    return result;
+  };
+
+  // 모든 하위 그룹 ID를 재귀적으로 수집 (삭제 순서: 자식 → 부모)
+  const getAllChildGroupIds = (groupId: number): number[] => {
+    const result: number[] = [];
+    const childGroups = groups.filter((g) => (g as any).parent_group_id === groupId);
+    
+    for (const childGroup of childGroups) {
+      // 자식의 자식들을 먼저 수집 (깊은 곳부터)
+      const grandChildIds = getAllChildGroupIds(childGroup.id);
+      result.push(...grandChildIds);
+      result.push(childGroup.id);
+    }
+    
+    return result;
+  };
+
   // 그룹 삭제 확인
   const confirmDeleteGroup = async () => {
     if (!deletingGroup) return;
 
+    // 삭제 전 통계 수집 (화면 수는 삭제 전에 계산)
+    const totalScreensToDelete = getAllScreensInGroupRecursively(deletingGroup.id).length;
+    const childGroupIds = getAllChildGroupIds(deletingGroup.id);
+
+    // 총 작업 수 계산 (화면 + 하위 그룹 + 현재 그룹)
+    const totalSteps = totalScreensToDelete + childGroupIds.length + 1;
+    let currentStep = 0;
+
     try {
+      setIsDeleting(true);
+      setDeleteProgress({ current: 0, total: totalSteps, message: "삭제 준비 중..." });
+
+      // 화면도 함께 삭제하는 경우
+      if (deleteScreensWithGroup) {
+        // 현재 그룹 + 모든 하위 그룹의 화면을 재귀적으로 수집
+        const allScreens = getAllScreensInGroupRecursively(deletingGroup.id);
+        if (allScreens.length > 0) {
+          const { screenApi } = await import("@/lib/api/screen");
+          
+          // 화면을 하나씩 삭제하면서 진행률 업데이트
+          for (let i = 0; i < allScreens.length; i++) {
+            const screen = allScreens[i];
+            currentStep++;
+            setDeleteProgress({ 
+              current: currentStep, 
+              total: totalSteps, 
+              message: `화면 삭제 중: ${screen.screenName}` 
+            });
+            await screenApi.deleteScreen(screen.screenId, "그룹 삭제와 함께 삭제");
+          }
+          console.log(`✅ 그룹 및 하위 그룹 내 화면 ${allScreens.length}개 삭제 완료`);
+        }
+      }
+
+      // 하위 그룹들을 먼저 삭제 (자식 → 부모 순서)
+      for (let i = 0; i < childGroupIds.length; i++) {
+        const childId = childGroupIds[i];
+        const childGroup = groups.find(g => g.id === childId);
+        currentStep++;
+        setDeleteProgress({ 
+          current: currentStep, 
+          total: totalSteps, 
+          message: `하위 그룹 삭제 중: ${childGroup?.group_name || childId}` 
+        });
+        await deleteScreenGroup(childId);
+        console.log(`✅ 하위 그룹 ${childId} 삭제 완료`);
+      }
+
+      // 최종적으로 대상 그룹 삭제
+      currentStep++;
+      setDeleteProgress({ current: currentStep, total: totalSteps, message: "그룹 삭제 완료 중..." });
       const response = await deleteScreenGroup(deletingGroup.id);
       if (response.success) {
-        toast.success("그룹이 삭제되었습니다");
-        loadGroupsData();
+        toast.success(
+          deleteScreensWithGroup 
+            ? `그룹과 화면 ${totalScreensToDelete}개가 삭제되었습니다`
+            : "그룹이 삭제되었습니다"
+        );
+        await loadGroupsData();
+        window.dispatchEvent(new CustomEvent("screen-list-refresh"));
       } else {
         toast.error(response.message || "그룹 삭제에 실패했습니다");
       }
@@ -241,16 +361,45 @@ export function ScreenGroupTreeView({
       console.error("그룹 삭제 실패:", error);
       toast.error("그룹 삭제에 실패했습니다");
     } finally {
+      setIsDeleting(false);
+      setDeleteProgress({ current: 0, total: 0, message: "" });
       setIsDeleteDialogOpen(false);
       setDeletingGroup(null);
+      setDeleteScreensWithGroup(false);
     }
   };
 
-  // 화면 이동 메뉴 열기
-  const handleMoveScreen = (screen: ScreenDefinition, e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setMovingScreen(screen);
+  // 단일 화면 삭제 버튼 클릭
+  const handleDeleteScreen = (screen: ScreenDefinition) => {
+    setDeletingScreen(screen);
+    setIsScreenDeleteDialogOpen(true);
+  };
+
+  // 단일 화면 삭제 확인
+  const confirmDeleteScreen = async () => {
+    if (!deletingScreen) return;
+
+    try {
+      setIsScreenDeleting(true);
+      const { screenApi } = await import("@/lib/api/screen");
+      await screenApi.deleteScreen(deletingScreen.screenId, "사용자 요청으로 삭제");
+      toast.success(`"${deletingScreen.screenName}" 화면이 삭제되었습니다`);
+      await loadGroupsData();
+      window.dispatchEvent(new CustomEvent("screen-list-refresh"));
+    } catch (error) {
+      console.error("화면 삭제 실패:", error);
+      toast.error("화면 삭제에 실패했습니다");
+    } finally {
+      setIsScreenDeleting(false);
+      setIsScreenDeleteDialogOpen(false);
+      setDeletingScreen(null);
+    }
+  };
+
+  // 화면 수정 모달 열기 (이름 변경 + 그룹 이동)
+  const handleOpenEditScreenModal = (screen: ScreenDefinition) => {
+    setEditingScreen(screen);
+    setEditScreenName(screen.screenName);
     
     // 현재 화면이 속한 그룹 정보 찾기
     let currentGroupId: number | null = null;
@@ -273,17 +422,92 @@ export function ScreenGroupTreeView({
     setSelectedGroupForMove(currentGroupId);
     setScreenRole(currentScreenRole);
     setDisplayOrder(currentDisplayOrder);
-    setIsMoveMenuOpen(true);
+    setIsEditScreenModalOpen(true);
   };
 
-  // 화면을 특정 그룹으로 이동
-  const moveScreenToGroup = async (targetGroupId: number | null) => {
-    if (!movingScreen) return;
+  // 화면 복제 모달 열기 (CopyScreenModal 사용)
+  const handleOpenCopyModal = (screen: ScreenDefinition) => {
+    // 현재 화면이 속한 그룹 찾기 (기본값으로 설정)
+    let currentGroupId: number | null = null;
+    for (const group of groups) {
+      if (group.screens && Array.isArray(group.screens)) {
+        const found = group.screens.find((s: any) => Number(s.screen_id) === Number(screen.screenId));
+        if (found) {
+          currentGroupId = group.id;
+          break;
+        }
+      }
+    }
+    
+    setCopyingScreen(screen);
+    setCopyTargetGroupId(currentGroupId);
+    setCopyMode("screen");
+    setIsCopyModalOpen(true);
+    setContextMenuPosition(null); // 컨텍스트 메뉴 닫기
+  };
+
+  // 그룹 복제 모달 열기 (CopyScreenModal 그룹 모드 사용)
+  const handleOpenGroupCopyModal = (group: ScreenGroup) => {
+    setCopyingGroup(group);
+    setCopyMode("group");
+    setIsCopyModalOpen(true);
+    closeGroupContextMenu(); // 그룹 컨텍스트 메뉴 닫기
+  };
+
+  // 복제 성공 콜백
+  const handleCopySuccess = async () => {
+    console.log("🔄 복제 성공 - 새로고침 시작");
+    // 그룹 목록 새로고침
+    await loadGroupsData();
+    console.log("✅ 그룹 목록 새로고침 완료");
+    // 화면 목록 새로고침
+    window.dispatchEvent(new CustomEvent("screen-list-refresh"));
+    console.log("✅ 화면 목록 새로고침 이벤트 발송 완료");
+  };
+
+  // 컨텍스트 메뉴 열기
+  const handleContextMenu = (e: React.MouseEvent, screen: ScreenDefinition) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setContextMenuScreen(screen);
+    setContextMenuPosition({ x: e.clientX, y: e.clientY });
+  };
+
+  // 컨텍스트 메뉴 닫기
+  const closeContextMenu = () => {
+    setContextMenuPosition(null);
+    setContextMenuScreen(null);
+  };
+
+  // 그룹 컨텍스트 메뉴 열기
+  const handleGroupContextMenu = (e: React.MouseEvent, group: ScreenGroup) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setContextMenuGroup(group);
+    setContextMenuGroupPosition({ x: e.clientX, y: e.clientY });
+  };
+
+  // 그룹 컨텍스트 메뉴 닫기
+  const closeGroupContextMenu = () => {
+    setContextMenuGroupPosition(null);
+    setContextMenuGroup(null);
+  };
+
+  // 화면 수정 저장 (이름 변경 + 그룹 이동)
+  const saveScreenEdit = async () => {
+    if (!editingScreen) return;
 
     try {
-      // 현재 그룹에서 제거
+      // 1. 화면 이름이 변경되었으면 업데이트
+      if (editScreenName.trim() && editScreenName !== editingScreen.screenName) {
+        await screenApi.updateScreen(editingScreen.screenId, {
+          screenName: editScreenName.trim(),
+        });
+      }
+
+      // 2. 현재 그룹에서 제거
       const currentGroupId = Array.from(groupScreensMap.entries()).find(([_, screenIds]) =>
-        screenIds.includes(movingScreen.screenId)
+        screenIds.includes(editingScreen.screenId)
       )?.[0];
 
       if (currentGroupId) {
@@ -291,7 +515,7 @@ export function ScreenGroupTreeView({
         const currentGroup = groups.find((g) => g.id === currentGroupId);
         if (currentGroup && currentGroup.screens) {
           const screenGroupScreen = currentGroup.screens.find(
-            (s: any) => s.screen_id === movingScreen.screenId
+            (s: any) => s.screen_id === editingScreen.screenId
           );
           if (screenGroupScreen) {
             await removeScreenFromGroup(screenGroupScreen.id);
@@ -299,25 +523,27 @@ export function ScreenGroupTreeView({
         }
       }
 
-      // 새 그룹에 추가 (미분류가 아닌 경우)
-      if (targetGroupId !== null) {
+      // 3. 새 그룹에 추가 (미분류가 아닌 경우)
+      if (selectedGroupForMove !== null) {
         await addScreenToGroup({
-          group_id: targetGroupId,
-          screen_id: movingScreen.screenId,
+          group_id: selectedGroupForMove,
+          screen_id: editingScreen.screenId,
           screen_role: screenRole,
           display_order: displayOrder,
           is_default: "N",
         });
       }
 
-      toast.success("화면이 이동되었습니다");
+      toast.success("화면이 수정되었습니다");
       loadGroupsData();
+      window.dispatchEvent(new CustomEvent("screen-list-refresh"));
     } catch (error) {
-      console.error("화면 이동 실패:", error);
-      toast.error("화면 이동에 실패했습니다");
+      console.error("화면 수정 실패:", error);
+      toast.error("화면 수정에 실패했습니다");
     } finally {
-      setIsMoveMenuOpen(false);
-      setMovingScreen(null);
+      setIsEditScreenModalOpen(false);
+      setEditingScreen(null);
+      setEditScreenName("");
       setSelectedGroupForMove(null);
       setScreenRole("");
       setDisplayOrder(1);
@@ -444,6 +670,7 @@ export function ScreenGroupTreeView({
                   "text-sm font-medium group/item"
                 )}
                 onClick={() => toggleGroup(groupId)}
+                onContextMenu={(e) => handleGroupContextMenu(e, group)}
               >
                 {isExpanded ? (
                   <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
@@ -507,6 +734,7 @@ export function ScreenGroupTreeView({
                             "text-xs font-medium group/item"
                           )}
                           onClick={() => toggleGroup(childGroupId)}
+                          onContextMenu={(e) => handleGroupContextMenu(e, childGroup)}
                         >
                           {isChildExpanded ? (
                             <ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" />
@@ -566,6 +794,7 @@ export function ScreenGroupTreeView({
                                       "text-xs group/item"
                                     )}
                                     onClick={() => toggleGroup(grandChildId)}
+                                    onContextMenu={(e) => handleGroupContextMenu(e, grandChild)}
                                   >
                                     {isGrandExpanded ? (
                                       <ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" />
@@ -626,7 +855,7 @@ export function ScreenGroupTreeView({
                                             )}
                                             onClick={() => handleScreenClickInGroup(screen, grandChild)}
                                             onDoubleClick={() => handleScreenDoubleClick(screen)}
-                                            onContextMenu={(e) => handleMoveScreen(screen, e)}
+                                            onContextMenu={(e) => handleContextMenu(e, screen)}
                                           >
                                             <Monitor className="h-3 w-3 shrink-0 text-blue-500" />
                                             <span className="truncate flex-1">{screen.screenName}</span>
@@ -662,7 +891,7 @@ export function ScreenGroupTreeView({
                                   )}
                                   onClick={() => handleScreenClickInGroup(screen, childGroup)}
                                   onDoubleClick={() => handleScreenDoubleClick(screen)}
-                                  onContextMenu={(e) => handleMoveScreen(screen, e)}
+                                  onContextMenu={(e) => handleContextMenu(e, screen)}
                                 >
                                   <Monitor className="h-3 w-3 shrink-0 text-blue-500" />
                                   <span className="truncate flex-1">{screen.screenName}</span>
@@ -698,7 +927,7 @@ export function ScreenGroupTreeView({
                         )}
                         onClick={() => handleScreenClickInGroup(screen, group)}
                         onDoubleClick={() => handleScreenDoubleClick(screen)}
-                        onContextMenu={(e) => handleMoveScreen(screen, e)}
+                        onContextMenu={(e) => handleContextMenu(e, screen)}
                       >
                         <Monitor className="h-4 w-4 shrink-0 text-blue-500" />
                         <span className="truncate flex-1">{screen.screenName}</span>
@@ -748,7 +977,7 @@ export function ScreenGroupTreeView({
                     )}
                     onClick={() => handleScreenClick(screen)}
                     onDoubleClick={() => handleScreenDoubleClick(screen)}
-                    onContextMenu={(e) => handleMoveScreen(screen, e)}
+                    onContextMenu={(e) => handleContextMenu(e, screen)}
                   >
                     <Monitor className="h-4 w-4 shrink-0 text-blue-500" />
                     <span className="truncate flex-1">{screen.screenName}</span>
@@ -781,6 +1010,23 @@ export function ScreenGroupTreeView({
         group={editingGroup}
       />
 
+      {/* 화면/그룹 복제 모달 (CopyScreenModal 사용) */}
+      <CopyScreenModal
+        isOpen={isCopyModalOpen}
+        onClose={() => {
+          setIsCopyModalOpen(false);
+          setCopyingScreen(null);
+          setCopyingGroup(null);
+        }}
+        sourceScreen={copyMode === "screen" ? copyingScreen : null}
+        onCopySuccess={handleCopySuccess}
+        mode={copyMode}
+        sourceGroup={copyMode === "group" ? copyingGroup : null}
+        groups={groups}
+        targetGroupId={copyTargetGroupId}
+        allScreens={screens}
+      />
+
       {/* 그룹 삭제 확인 다이얼로그 */}
       <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
         <AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
@@ -789,34 +1035,167 @@ export function ScreenGroupTreeView({
             <AlertDialogDescription className="text-xs sm:text-sm">
               "{deletingGroup?.group_name}" 그룹을 삭제하시겠습니까?
               <br />
-              그룹에 속한 화면들은 미분류로 이동됩니다.
+              {deleteScreensWithGroup 
+                ? <span className="text-destructive font-medium">그룹에 속한 화면들도 함께 삭제됩니다.</span>
+                : "그룹에 속한 화면들은 미분류로 이동됩니다."
+              }
             </AlertDialogDescription>
           </AlertDialogHeader>
+          
+          {/* 그룹 정보 표시 */}
+          {deletingGroup && (
+            <div className="rounded-md border bg-muted/50 p-3 text-xs space-y-1">
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">하위 그룹 수:</span>
+                <span className="font-medium">{getAllChildGroupIds(deletingGroup.id).length}개</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">총 화면 수 (하위 포함):</span>
+                <span className="font-medium">{getAllScreensInGroupRecursively(deletingGroup.id).length}개</span>
+              </div>
+            </div>
+          )}
+          
+          {/* 화면도 함께 삭제 체크박스 */}
+          {deletingGroup && getAllScreensInGroupRecursively(deletingGroup.id).length > 0 && (
+            <div className="flex items-center space-x-2 py-2">
+              <input
+                type="checkbox"
+                id="deleteScreensWithGroup"
+                checked={deleteScreensWithGroup}
+                onChange={(e) => setDeleteScreensWithGroup(e.target.checked)}
+                className="h-4 w-4 rounded border-gray-300 text-destructive focus:ring-destructive"
+              />
+              <label 
+                htmlFor="deleteScreensWithGroup" 
+                className="text-sm text-muted-foreground cursor-pointer"
+              >
+                화면도 함께 삭제 ({getAllScreensInGroupRecursively(deletingGroup.id).length}개)
+              </label>
+            </div>
+          )}
+          
+          {/* 로딩 오버레이 */}
+          {isDeleting && (
+            <div className="absolute inset-0 z-50 flex flex-col items-center justify-center rounded-lg bg-background/90 backdrop-blur-sm">
+              <Loader2 className="h-10 w-10 animate-spin text-destructive" />
+              <p className="mt-4 text-sm font-medium">{deleteProgress.message}</p>
+              {deleteProgress.total > 0 && (
+                <>
+                  <div className="mt-3 h-2 w-48 overflow-hidden rounded-full bg-secondary">
+                    <div
+                      className="h-full bg-destructive transition-all duration-300"
+                      style={{ width: `${Math.round((deleteProgress.current / deleteProgress.total) * 100)}%` }}
+                    />
+                  </div>
+                  <p className="mt-2 text-xs text-muted-foreground">
+                    {deleteProgress.current} / {deleteProgress.total}
+                  </p>
+                </>
+              )}
+            </div>
+          )}
+
           <AlertDialogFooter className="gap-2 sm:gap-0">
-            <AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+            <AlertDialogCancel 
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+              disabled={isDeleting}
+            >
               취소
             </AlertDialogCancel>
             <AlertDialogAction
-              onClick={confirmDeleteGroup}
+              onClick={(e) => {
+                e.preventDefault(); // 자동 닫힘 방지
+                confirmDeleteGroup();
+              }}
+              disabled={isDeleting}
               className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm bg-destructive hover:bg-destructive/90"
             >
-              삭제
+              {isDeleting ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  삭제 중...
+                </>
+              ) : (
+                "삭제"
+              )}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
 
-      {/* 화면 이동 메뉴 (다이얼로그) */}
-      <Dialog open={isMoveMenuOpen} onOpenChange={setIsMoveMenuOpen}>
+      {/* 단일 화면 삭제 확인 다이얼로그 */}
+      <AlertDialog open={isScreenDeleteDialogOpen} onOpenChange={setIsScreenDeleteDialogOpen}>
+        <AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          {/* 로딩 오버레이 */}
+          {isScreenDeleting && (
+            <div className="absolute inset-0 z-50 flex flex-col items-center justify-center rounded-lg bg-background/90 backdrop-blur-sm">
+              <Loader2 className="h-8 w-8 animate-spin text-destructive" />
+              <p className="mt-3 text-sm font-medium">화면 삭제 중...</p>
+            </div>
+          )}
+          
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-base sm:text-lg">화면 삭제</AlertDialogTitle>
+            <AlertDialogDescription className="text-xs sm:text-sm">
+              "{deletingScreen?.screenName}" 화면을 삭제하시겠습니까?
+              <br />
+              삭제된 화면은 휴지통으로 이동됩니다.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter className="gap-2 sm:gap-0">
+            <AlertDialogCancel 
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+              disabled={isScreenDeleting}
+            >
+              취소
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={(e) => {
+                e.preventDefault(); // 자동 닫힘 방지
+                confirmDeleteScreen();
+              }}
+              disabled={isScreenDeleting}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm bg-destructive hover:bg-destructive/90"
+            >
+              {isScreenDeleting ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  삭제 중...
+                </>
+              ) : (
+                "삭제"
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* 화면 수정 모달 (이름 변경 + 그룹 이동) */}
+      <Dialog open={isEditScreenModalOpen} onOpenChange={setIsEditScreenModalOpen}>
         <DialogContent className="max-w-[95vw] sm:max-w-[400px]">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">화면 그룹 설정</DialogTitle>
+            <DialogTitle className="text-base sm:text-lg">화면 수정</DialogTitle>
             <DialogDescription className="text-xs sm:text-sm">
-              "{movingScreen?.screenName}"의 그룹과 역할을 설정하세요
+              화면 정보를 수정하세요
             </DialogDescription>
           </DialogHeader>
           
           <div className="space-y-3 sm:space-y-4">
+            {/* 화면 이름 */}
+            <div>
+              <Label htmlFor="edit-screen-name" className="text-xs sm:text-sm">
+                화면 이름 *
+              </Label>
+              <Input
+                id="edit-screen-name"
+                value={editScreenName}
+                onChange={(e) => setEditScreenName(e.target.value)}
+                placeholder="화면 이름을 입력하세요"
+                className="h-8 text-xs sm:h-10 sm:text-sm"
+              />
+            </div>
+
             {/* 그룹 선택 (트리 구조 + 검색) */}
             <div>
               <Label htmlFor="target-group" className="text-xs sm:text-sm">
@@ -949,8 +1328,9 @@ export function ScreenGroupTreeView({
             <Button
               variant="outline"
               onClick={() => {
-                setIsMoveMenuOpen(false);
-                setMovingScreen(null);
+                setIsEditScreenModalOpen(false);
+                setEditingScreen(null);
+                setEditScreenName("");
                 setSelectedGroupForMove(null);
                 setScreenRole("");
                 setDisplayOrder(1);
@@ -960,14 +1340,125 @@ export function ScreenGroupTreeView({
               취소
             </Button>
             <Button
-              onClick={() => moveScreenToGroup(selectedGroupForMove)}
+              onClick={saveScreenEdit}
+              disabled={!editScreenName.trim()}
               className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
             >
-              이동
+              저장
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* 커스텀 컨텍스트 메뉴 */}
+      {contextMenuPosition && contextMenuScreen && (
+        <>
+          {/* 백드롭 - 클릭 시 메뉴 닫기 */}
+          <div
+            className="fixed inset-0 z-40"
+            onClick={closeContextMenu}
+            onContextMenu={(e) => {
+              e.preventDefault();
+              closeContextMenu();
+            }}
+          />
+          {/* 컨텍스트 메뉴 */}
+          <div
+            className="fixed z-50 min-w-[150px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
+            style={{
+              left: contextMenuPosition.x,
+              top: contextMenuPosition.y,
+            }}
+          >
+            <div
+              className="flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
+              onClick={() => {
+                handleOpenCopyModal(contextMenuScreen);
+              }}
+            >
+              <Copy className="mr-2 h-4 w-4" />
+              복제
+            </div>
+            <div className="my-1 h-px bg-border" />
+              <div
+                className="flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
+                onClick={() => {
+                  handleOpenEditScreenModal(contextMenuScreen);
+                  closeContextMenu();
+                }}
+              >
+                <Edit className="mr-2 h-4 w-4" />
+                수정
+              </div>
+            <div className="my-1 h-px bg-border" />
+            <div
+              className="flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm text-destructive hover:bg-accent"
+              onClick={() => {
+                handleDeleteScreen(contextMenuScreen);
+                closeContextMenu();
+              }}
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              삭제
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* 그룹 컨텍스트 메뉴 */}
+      {contextMenuGroupPosition && contextMenuGroup && (
+        <>
+          {/* 백드롭 - 클릭 시 메뉴 닫기 */}
+          <div
+            className="fixed inset-0 z-40"
+            onClick={closeGroupContextMenu}
+            onContextMenu={(e) => {
+              e.preventDefault();
+              closeGroupContextMenu();
+            }}
+          />
+          {/* 컨텍스트 메뉴 */}
+          <div
+            className="fixed z-50 min-w-[150px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
+            style={{
+              left: contextMenuGroupPosition.x,
+              top: contextMenuGroupPosition.y,
+            }}
+          >
+            <div
+              className="flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
+              onClick={() => handleOpenGroupCopyModal(contextMenuGroup)}
+            >
+              <Copy className="mr-2 h-4 w-4" />
+              그룹 복제
+            </div>
+            <div className="my-1 h-px bg-border" />
+              <div
+                className="flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
+                onClick={() => {
+                  setEditingGroup(contextMenuGroup);
+                  setIsGroupModalOpen(true);
+                  closeGroupContextMenu();
+                }}
+              >
+                <Edit className="mr-2 h-4 w-4" />
+                수정
+              </div>
+            <div className="my-1 h-px bg-border" />
+            <div
+              className="flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm text-destructive hover:bg-accent"
+              onClick={() => {
+                handleDeleteGroup(contextMenuGroup);
+                closeGroupContextMenu();
+              }}
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              그룹 삭제
+            </div>
+          </div>
+        </>
+      )}
+
     </div>
   );
 }
\ No newline at end of file
diff --git a/frontend/components/screen/ScreenSettingModal.tsx b/frontend/components/screen/ScreenSettingModal.tsx
index c7373e5c..36e2bbe5 100644
--- a/frontend/components/screen/ScreenSettingModal.tsx
+++ b/frontend/components/screen/ScreenSettingModal.tsx
@@ -416,6 +416,10 @@ export function ScreenSettingModal({
                     <Database className="h-3 w-3" />
                     개요
                   </TabsTrigger>
+                  <TabsTrigger value="table-setting" className="gap-1 text-xs px-2" disabled={!mainTable}>
+                    <Settings2 className="h-3 w-3" />
+                    테이블 설정
+                  </TabsTrigger>
                   <TabsTrigger value="control-management" className="gap-1 text-xs px-2">
                     <Zap className="h-3 w-3" />
                     제어 관리
@@ -466,7 +470,22 @@ export function ScreenSettingModal({
                 />
               </TabsContent>
 
-              {/* 탭 2: 제어 관리 */}
+              {/* 탭 2: 테이블 설정 */}
+              <TabsContent value="table-setting" className="mt-0 min-h-0 flex-1 overflow-hidden p-0">
+                {mainTable && (
+                  <TableSettingModal
+                    isOpen={true}
+                    onClose={() => {}} // 탭에서는 닫기 불필요
+                    tableName={mainTable}
+                    tableLabel={mainTableLabel}
+                    screenId={currentScreenId}
+                    onSaveSuccess={handleRefresh}
+                    isEmbedded={true} // 임베드 모드
+                  />
+                )}
+              </TabsContent>
+
+              {/* 탭 3: 제어 관리 */}
               <TabsContent value="control-management" className="mt-0 min-h-0 flex-1 overflow-auto p-3">
                 <ControlManagementTab
                   screenId={currentScreenId}
@@ -2198,17 +2217,6 @@ function OverviewTab({
             <Database className="h-4 w-4 text-blue-500" />
             메인 테이블
           </h3>
-          {mainTable && (
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-7 gap-1 text-xs"
-              onClick={() => onOpenTableSetting?.(mainTable, mainTableLabel)}
-            >
-              <Settings2 className="h-3 w-3" />
-              테이블 설정
-            </Button>
-          )}
         </div>
         {mainTable ? (
           <TableColumnAccordion 
@@ -3049,6 +3057,7 @@ interface ButtonControlInfo {
   // 버튼 스타일
   backgroundColor?: string;
   textColor?: string;
+  borderRadius?: string;
   // 모달/네비게이션 관련
   modalScreenId?: number;
   navigateScreenId?: number;
@@ -3215,6 +3224,7 @@ function ControlManagementTab({
                 // 버튼 스타일 (webTypeConfig 우선)
                 backgroundColor: webTypeConfig.backgroundColor || config.backgroundColor || style.backgroundColor,
                 textColor: webTypeConfig.textColor || config.textColor || style.color || style.labelColor,
+                borderRadius: webTypeConfig.borderRadius || config.borderRadius || style.borderRadius,
                 // 모달/네비게이션 관련 (화면 디자이너는 targetScreenId 사용)
                 modalScreenId: action.targetScreenId || action.modalScreenId,
                 navigateScreenId: action.navigateScreenId || action.targetScreenId,
@@ -3527,6 +3537,11 @@ function ControlManagementTab({
               comp.style.color = values.textColor;
               comp.style.labelColor = values.textColor;
             }
+            if (values.borderRadius !== undefined) {
+              comp.webTypeConfig.borderRadius = values.borderRadius;
+              comp.componentConfig.borderRadius = values.borderRadius;
+              comp.style.borderRadius = values.borderRadius;
+            }
             
             // 액션 타입 업데이트
             if (values.actionType) {
@@ -3735,6 +3750,7 @@ function ControlManagementTab({
                 const currentLabel = editedValues[btn.id]?.label ?? btn.label;
                 const currentBgColor = editedValues[btn.id]?.backgroundColor ?? btn.backgroundColor ?? "#3b82f6";
                 const currentTextColor = editedValues[btn.id]?.textColor ?? btn.textColor ?? "#ffffff";
+                const currentBorderRadius = editedValues[btn.id]?.borderRadius ?? btn.borderRadius ?? "4px";
                 
                 return (
                 <div key={btn.id} className="py-3 px-1">
@@ -3742,10 +3758,11 @@ function ControlManagementTab({
                   <div className="flex items-center gap-3 mb-3">
                     {/* 버튼 프리뷰 */}
                     <div
-                      className="flex items-center justify-center px-3 py-1.5 rounded text-xs font-medium min-w-[60px] shrink-0"
+                      className="flex items-center justify-center px-3 py-1.5 text-xs font-medium min-w-[60px] shrink-0"
                       style={{
                         backgroundColor: currentBgColor,
                         color: currentTextColor,
+                        borderRadius: currentBorderRadius,
                       }}
                     >
                       {currentLabel || "버튼"}
@@ -3870,6 +3887,34 @@ function ControlManagementTab({
                       </div>
                     </div>
 
+                    {/* 버튼 모서리 (borderRadius) */}
+                    <div className="grid grid-cols-[80px_1fr] items-center gap-2">
+                      <Label className="text-xs text-muted-foreground">모서리</Label>
+                      <div className="flex items-center gap-2">
+                        <Select
+                          value={editedValues[btn.id]?.borderRadius ?? btn.borderRadius ?? "4px"}
+                          onValueChange={(val) => setEditedValues(prev => ({
+                            ...prev,
+                            [btn.id]: { ...prev[btn.id], borderRadius: val }
+                          }))}
+                        >
+                          <SelectTrigger className="h-7 w-[100px] text-xs">
+                            <SelectValue placeholder="선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="0px" className="text-xs">없음 (0px)</SelectItem>
+                            <SelectItem value="2px" className="text-xs">약간 (2px)</SelectItem>
+                            <SelectItem value="4px" className="text-xs">기본 (4px)</SelectItem>
+                            <SelectItem value="6px" className="text-xs">둥글게 (6px)</SelectItem>
+                            <SelectItem value="8px" className="text-xs">더 둥글게 (8px)</SelectItem>
+                            <SelectItem value="12px" className="text-xs">많이 (12px)</SelectItem>
+                            <SelectItem value="9999px" className="text-xs">원형</SelectItem>
+                          </SelectContent>
+                        </Select>
+                        <span className="text-[10px] text-muted-foreground">버튼 모서리 둥글기</span>
+                      </div>
+                    </div>
+
                     {/* 확인 메시지 설정 (save/delete 액션에서만 표시) */}
                     {((editedValues[btn.id]?.actionType || btn.actionType) === "save" ||
                       (editedValues[btn.id]?.actionType || btn.actionType) === "delete") && (
diff --git a/frontend/components/screen/TableSettingModal.tsx b/frontend/components/screen/TableSettingModal.tsx
index f0613b66..c176c25c 100644
--- a/frontend/components/screen/TableSettingModal.tsx
+++ b/frontend/components/screen/TableSettingModal.tsx
@@ -129,6 +129,7 @@ interface TableSettingModalProps {
   columns?: ColumnInfo[];
   filterColumns?: string[];
   onSaveSuccess?: () => void;
+  isEmbedded?: boolean; // 탭 안에 임베드 모드로 표시
 }
 
 // 검색 가능한 Select 컴포넌트
@@ -256,6 +257,7 @@ export function TableSettingModal({
   columns = [],
   filterColumns = [],
   onSaveSuccess,
+  isEmbedded = false,
 }: TableSettingModalProps) {
   const [activeTab, setActiveTab] = useState("columns");
   const [loading, setLoading] = useState(false);
@@ -304,9 +306,19 @@ export function TableSettingModal({
         // 초기 편집 상태 설정
         const initialEdits: Record<string, Partial<ColumnTypeInfo>> = {};
         columnsData.forEach((col) => {
+          // referenceTable이 설정되어 있으면 inputType은 entity여야 함
+          let effectiveInputType = col.inputType || "direct";
+          if (col.referenceTable && effectiveInputType !== "entity") {
+            effectiveInputType = "entity";
+          }
+          // codeCategory/codeValue가 설정되어 있으면 inputType은 code여야 함
+          if (col.codeCategory && effectiveInputType !== "code") {
+            effectiveInputType = "code";
+          }
+          
           initialEdits[col.columnName] = {
             displayName: col.displayName,
-            inputType: col.inputType || "direct",
+            inputType: effectiveInputType,
             referenceTable: col.referenceTable,
             referenceColumn: col.referenceColumn,
             displayColumn: col.displayColumn,
@@ -343,10 +355,10 @@ export function TableSettingModal({
     try {
       // 모든 화면 조회
       const screensResponse = await screenApi.getScreens({ size: 1000 });
-      if (screensResponse.items) {
+      if (screensResponse.data) {
         const usingScreens: ScreenUsingTable[] = [];
         
-        screensResponse.items.forEach((screen: any) => {
+        screensResponse.data.forEach((screen: any) => {
           // 메인 테이블로 사용하는 경우
           if (screen.tableName === tableName) {
             usingScreens.push({
@@ -418,6 +430,35 @@ export function TableSettingModal({
       },
     }));
     
+    // 입력 타입 변경 시 관련 필드 초기화
+    if (field === "inputType") {
+      // 엔티티가 아닌 다른 타입으로 변경하면 참조 설정 초기화
+      if (value !== "entity") {
+        setEditedColumns((prev) => ({
+          ...prev,
+          [columnName]: {
+            ...prev[columnName],
+            inputType: value,
+            referenceTable: "",
+            referenceColumn: "",
+            displayColumn: "",
+          },
+        }));
+      }
+      // 코드가 아닌 다른 타입으로 변경하면 코드 설정 초기화
+      if (value !== "code") {
+        setEditedColumns((prev) => ({
+          ...prev,
+          [columnName]: {
+            ...prev[columnName],
+            inputType: value,
+            codeCategory: "",
+            codeValue: "",
+          },
+        }));
+      }
+    }
+    
     // 참조 테이블 변경 시 참조 컬럼 초기화
     if (field === "referenceTable") {
       setEditedColumns((prev) => ({
@@ -452,8 +493,18 @@ export function TableSettingModal({
 
         // detailSettings 처리 (Entity 타입인 경우)
         let finalDetailSettings = mergedColumn.detailSettings || "";
+        
+        // referenceTable이 설정되어 있으면 inputType을 entity로 자동 설정
+        let currentInputType = (mergedColumn.inputType || "") as string;
+        if (mergedColumn.referenceTable && currentInputType !== "entity") {
+          currentInputType = "entity";
+        }
+        // codeCategory가 설정되어 있으면 inputType을 code로 자동 설정
+        if (mergedColumn.codeCategory && currentInputType !== "code") {
+          currentInputType = "code";
+        }
 
-        if (mergedColumn.inputType === "entity" && mergedColumn.referenceTable) {
+        if (currentInputType === "entity" && mergedColumn.referenceTable) {
           // 기존 detailSettings를 파싱하거나 새로 생성
           let existingSettings: Record<string, unknown> = {};
           if (typeof mergedColumn.detailSettings === "string" && mergedColumn.detailSettings.trim().startsWith("{")) {
@@ -479,7 +530,7 @@ export function TableSettingModal({
         }
 
         // Code 타입인 경우 hierarchyRole을 detailSettings에 포함
-        if (mergedColumn.inputType === "code" && (mergedColumn as any).hierarchyRole) {
+        if (currentInputType === "code" && (mergedColumn as any).hierarchyRole) {
           let existingSettings: Record<string, unknown> = {};
           if (typeof finalDetailSettings === "string" && finalDetailSettings.trim().startsWith("{")) {
             try {
@@ -502,7 +553,7 @@ export function TableSettingModal({
         const columnSetting: ColumnSettings = {
           columnName: columnName,
           columnLabel: mergedColumn.displayName || originalColumn.displayName || "",
-          webType: mergedColumn.inputType || originalColumn.inputType || "text",
+          inputType: currentInputType || "text", // referenceTable/codeCategory가 설정된 경우 자동 보정된 값 사용
           detailSettings: finalDetailSettings,
           codeCategory: mergedColumn.codeCategory || originalColumn.codeCategory || "",
           codeValue: mergedColumn.codeValue || originalColumn.codeValue || "",
@@ -593,6 +644,158 @@ export function TableSettingModal({
     ];
   };
 
+  // 임베드 모드
+  if (isEmbedded) {
+    return (
+      <>
+        <div className="flex h-full flex-col">
+          {/* 헤더 */}
+          <div className="flex flex-shrink-0 items-center justify-between border-b pb-2 px-3 pt-2">
+            <div className="flex items-center gap-2">
+              <Table2 className="h-4 w-4 text-green-500" />
+              <span className="text-sm font-medium">{tableLabel || tableName}</span>
+              {tableName !== tableLabel && tableName !== (tableLabel || tableName) && (
+                <span className="text-xs text-muted-foreground">({tableName})</span>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowTableManagementModal(true)}
+                className="h-7 gap-1 text-xs"
+              >
+                <Settings className="h-3 w-3" />
+                테이블 타입 관리
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleRefresh}
+                className="h-7 w-7 p-0"
+                disabled={loading}
+              >
+                <RefreshCw className={cn("h-3 w-3", loading && "animate-spin")} />
+              </Button>
+              <Button
+                size="sm"
+                onClick={handleSaveAll}
+                className="h-7 gap-1 text-xs"
+                disabled={saving || loading}
+              >
+                {saving ? (
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                ) : (
+                  <Save className="h-3 w-3" />
+                )}
+                저장
+              </Button>
+            </div>
+          </div>
+          <div className="flex min-h-0 flex-1 gap-3 p-3">
+            {/* 좌측: 탭 (40%) */}
+            <div className="flex w-[40%] min-h-0 flex-col">
+              <Tabs
+                value={activeTab}
+                onValueChange={setActiveTab}
+                className="flex min-h-0 flex-1 flex-col"
+              >
+                <TabsList className="h-8 flex-shrink-0">
+                  <TabsTrigger value="columns" className="gap-1 text-xs">
+                    <Columns3 className="h-3 w-3" />
+                    컬럼 설정
+                  </TabsTrigger>
+                  <TabsTrigger value="screens" className="gap-1 text-xs">
+                    <Monitor className="h-3 w-3" />
+                    화면 연동
+                  </TabsTrigger>
+                  <TabsTrigger value="references" className="gap-1 text-xs">
+                    <Eye className="h-3 w-3" />
+                    참조 관계
+                  </TabsTrigger>
+                </TabsList>
+                
+                <TabsContent value="columns" className="mt-2 min-h-0 flex-1 overflow-hidden">
+                  <ColumnListTab
+                    columns={tableColumns.map((col) => ({
+                      ...col,
+                      isPK: col.columnName === "id" || col.columnName.endsWith("_id"),
+                      isFK: (col.inputType as string) === "entity",
+                    }))}
+                    editedColumns={editedColumns}
+                    selectedColumn={selectedColumn}
+                    onSelectColumn={setSelectedColumn}
+                    loading={loading}
+                  />
+                </TabsContent>
+                
+                <TabsContent value="screens" className="mt-2 min-h-0 flex-1 overflow-hidden">
+                  <ScreensTab screensUsingTable={screensUsingTable} loading={loading} />
+                </TabsContent>
+                
+                <TabsContent value="references" className="mt-2 min-h-0 flex-1 overflow-hidden">
+                  <ReferenceTab
+                    tableName={tableName}
+                    tableLabel={tableLabel}
+                    referencedBy={referencedBy}
+                    joinColumnRefs={joinColumnRefs}
+                    loading={loading}
+                  />
+                </TabsContent>
+              </Tabs>
+            </div>
+            
+            {/* 우측: 상세 설정 (60%) */}
+            <div className="flex w-[60%] min-h-0 flex-col rounded-lg border bg-muted/30 p-3">
+              {selectedColumn && mergedColumns.find((c) => c.columnName === selectedColumn) ? (
+                <ColumnDetailPanel
+                  columnInfo={mergedColumns.find((c) => c.columnName === selectedColumn)!}
+                  editedColumn={editedColumns[selectedColumn] || {}}
+                  tableOptions={tableOptions}
+                  inputTypeOptions={inputTypeOptions}
+                  getRefColumnOptions={getRefColumnOptions}
+                  loadingRefColumns={loadingRefColumns}
+                  onColumnChange={(field, value) => handleColumnChange(selectedColumn, field, value)}
+                />
+              ) : (
+                <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+                  <div className="text-center">
+                    <Columns3 className="mx-auto h-12 w-12 text-muted-foreground/30" />
+                    <p className="mt-2">왼쪽에서 컬럼을 선택하면</p>
+                    <p>상세 설정을 할 수 있습니다.</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+        
+        {/* 테이블 타입 관리 모달 */}
+        <Dialog open={showTableManagementModal} onOpenChange={setShowTableManagementModal}>
+          <DialogContent className="flex h-[90vh] max-h-[1000px] w-[95vw] max-w-[1400px] flex-col p-0">
+            <div className="flex items-center justify-between border-b p-4">
+              <h2 className="text-lg font-semibold">테이블 타입 관리</h2>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  setShowTableManagementModal(false);
+                  loadTableData();
+                }}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+            <div className="flex-1 overflow-hidden">
+              <TableManagementPage />
+            </div>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  }
+
+  // 기존 모달 모드
   return (
     <>
     <Dialog open={isOpen} onOpenChange={onClose}>
@@ -843,6 +1046,7 @@ function ColumnListTab({
           <div className="space-y-1 px-3 pb-3">
             {filteredColumns.map((col) => {
               const edited = editedColumns[col.columnName] || {};
+              // editedColumns에서 inputType을 가져옴 (초기화 시 이미 보정됨)
               const inputType = (edited.inputType || col.inputType || "text") as string;
               const isSelected = selectedColumn === col.columnName;
 
@@ -873,23 +1077,17 @@ function ColumnListTab({
                           PK
                         </Badge>
                       )}
-                      {col.isFK && (
-                        <Badge variant="outline" className="bg-green-100 text-green-700 text-[10px] px-1.5">
-                          <Link2 className="mr-0.5 h-2.5 w-2.5" />
-                          FK
-                        </Badge>
-                      )}
-                      {(edited.referenceTable || col.referenceTable) && (
+                      {/* 엔티티 타입이거나 referenceTable이 설정되어 있으면 조인 배지 표시 (FK와 동일 의미) */}
+                      {(inputType === "entity" || edited.referenceTable || col.referenceTable) && (
                         <Badge variant="outline" className="bg-blue-100 text-blue-700 text-[10px] px-1.5">
+                          <Link2 className="mr-0.5 h-2.5 w-2.5" />
                           조인
                         </Badge>
                       )}
                     </div>
                   </div>
-                  <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
+                  <div className="mt-1 text-xs text-muted-foreground">
                     <span className="font-mono">{col.columnName}</span>
-                    <span>•</span>
-                    <span>{col.dataType}</span>
                   </div>
                 </div>
               );
@@ -925,10 +1123,11 @@ function ColumnDetailPanel({
   onColumnChange,
 }: ColumnDetailPanelProps) {
   const currentLabel = editedColumn.displayName ?? columnInfo.displayName ?? "";
-  const currentInputType = (editedColumn.inputType ?? columnInfo.inputType ?? "text") as string;
   const currentRefTable = editedColumn.referenceTable ?? columnInfo.referenceTable ?? "";
   const currentRefColumn = editedColumn.referenceColumn ?? columnInfo.referenceColumn ?? "";
   const currentDisplayColumn = editedColumn.displayColumn ?? columnInfo.displayColumn ?? "";
+  // editedColumn에서 inputType을 가져옴 (초기화 시 이미 보정됨)
+  const currentInputType = (editedColumn.inputType ?? columnInfo.inputType ?? "text") as string;
 
   return (
     <div className="flex h-full flex-col">
@@ -948,9 +1147,10 @@ function ColumnDetailPanel({
               Primary Key
             </Badge>
           )}
-          {columnInfo.isFK && (
-            <Badge variant="outline" className="bg-green-100 text-green-700 text-[10px]">
-              Foreign Key
+          {/* 엔티티 타입이거나 referenceTable이 있으면 조인 배지 표시 */}
+          {(currentInputType === "entity" || currentRefTable) && (
+            <Badge variant="outline" className="bg-blue-100 text-blue-700 text-[10px]">
+              조인
             </Badge>
           )}
         </div>
diff --git a/frontend/components/webtypes/RepeaterInput.tsx b/frontend/components/webtypes/RepeaterInput.tsx
index db9e1d6b..7cd4b279 100644
--- a/frontend/components/webtypes/RepeaterInput.tsx
+++ b/frontend/components/webtypes/RepeaterInput.tsx
@@ -16,7 +16,9 @@ import {
   RepeaterItemData,
   RepeaterFieldDefinition,
   CalculationFormula,
+  SubDataState,
 } from "@/types/repeater";
+import { SubDataLookupPanel } from "@/lib/registry/components/repeater-field-group/SubDataLookupPanel";
 import { cn } from "@/lib/utils";
 import { useBreakpoint } from "@/hooks/useBreakpoint";
 import { usePreviewBreakpoint } from "@/components/screen/ResponsivePreviewModal";
@@ -68,8 +70,12 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
     layout = "grid", // 기본값을 grid로 설정
     showDivider = true,
     emptyMessage = "항목이 없습니다. '항목 추가' 버튼을 클릭하세요.",
+    subDataLookup,
   } = config;
 
+  // 하위 데이터 조회 상태 관리 (각 항목별)
+  const [subDataStates, setSubDataStates] = useState<Map<number, SubDataState>>(new Map());
+
   // 반응형: 작은 화면(모바일/태블릿)에서는 카드 레이아웃 강제
   const effectiveLayout = breakpoint === "mobile" || breakpoint === "tablet" ? "card" : layout;
 
@@ -272,6 +278,111 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
   // 드래그 앤 드롭 (순서 변경)
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
 
+  // 하위 데이터 선택 핸들러
+  const handleSubDataSelection = (itemIndex: number, selectedItem: any | null, maxValue: number | null) => {
+    console.log("[RepeaterInput] 하위 데이터 선택:", { itemIndex, selectedItem, maxValue });
+
+    // 상태 업데이트
+    setSubDataStates((prev) => {
+      const newMap = new Map(prev);
+      const currentState = newMap.get(itemIndex) || {
+        itemIndex,
+        data: [],
+        selectedItem: null,
+        isLoading: false,
+        error: null,
+        isExpanded: false,
+      };
+      newMap.set(itemIndex, {
+        ...currentState,
+        selectedItem,
+      });
+      return newMap;
+    });
+
+    // 선택된 항목 정보를 item에 저장
+    if (selectedItem && subDataLookup) {
+      const newItems = [...items];
+      newItems[itemIndex] = {
+        ...newItems[itemIndex],
+        _subDataSelection: selectedItem,
+        _subDataMaxValue: maxValue,
+      };
+
+      // 선택된 하위 데이터의 필드 값을 상위 item에 복사 (설정된 경우)
+      // 예: warehouse_code, location_code 등
+      if (subDataLookup.lookup.displayColumns) {
+        subDataLookup.lookup.displayColumns.forEach((col) => {
+          if (selectedItem[col] !== undefined) {
+            // 필드가 정의되어 있으면 복사
+            const fieldDef = fields.find((f) => f.name === col);
+            if (fieldDef || col.includes("_code") || col.includes("_id")) {
+              newItems[itemIndex][col] = selectedItem[col];
+            }
+          }
+        });
+      }
+
+      setItems(newItems);
+
+      // onChange 호출
+      const dataWithMeta = config.targetTable
+        ? newItems.map((item) => ({ ...item, _targetTable: config.targetTable }))
+        : newItems;
+      onChange?.(dataWithMeta);
+    }
+  };
+
+  // 조건부 입력 활성화 여부 확인
+  const isConditionalInputEnabled = (itemIndex: number, fieldName: string): boolean => {
+    if (!subDataLookup?.enabled) return true;
+    if (subDataLookup.conditionalInput?.targetField !== fieldName) return true;
+
+    const subState = subDataStates.get(itemIndex);
+    if (!subState?.selectedItem) return false;
+
+    const { requiredFields, requiredMode = "all" } = subDataLookup.selection;
+    if (!requiredFields || requiredFields.length === 0) return true;
+
+    if (requiredMode === "any") {
+      return requiredFields.some((field) => {
+        const value = subState.selectedItem[field];
+        return value !== undefined && value !== null && value !== "";
+      });
+    } else {
+      return requiredFields.every((field) => {
+        const value = subState.selectedItem[field];
+        return value !== undefined && value !== null && value !== "";
+      });
+    }
+  };
+
+  // 최대값 가져오기
+  const getMaxValueForField = (itemIndex: number, fieldName: string): number | null => {
+    if (!subDataLookup?.enabled) return null;
+    if (subDataLookup.conditionalInput?.targetField !== fieldName) return null;
+    if (!subDataLookup.conditionalInput?.maxValueField) return null;
+
+    const subState = subDataStates.get(itemIndex);
+    if (!subState?.selectedItem) return null;
+
+    const maxVal = subState.selectedItem[subDataLookup.conditionalInput.maxValueField];
+    return typeof maxVal === "number" ? maxVal : parseFloat(maxVal) || null;
+  };
+
+  // 경고 임계값 체크
+  const checkWarningThreshold = (itemIndex: number, fieldName: string, value: number): boolean => {
+    if (!subDataLookup?.enabled) return false;
+    if (subDataLookup.conditionalInput?.targetField !== fieldName) return false;
+
+    const maxValue = getMaxValueForField(itemIndex, fieldName);
+    if (maxValue === null || maxValue === 0) return false;
+
+    const threshold = subDataLookup.conditionalInput?.warningThreshold ?? 90;
+    const percentage = (value / maxValue) * 100;
+    return percentage >= threshold;
+  };
+
   const handleDragStart = (index: number) => {
     if (!allowReorder || readonly || disabled) return;
     setDraggedIndex(index);
@@ -389,14 +500,26 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
   const renderField = (field: RepeaterFieldDefinition, itemIndex: number, value: any) => {
     const isReadonly = disabled || readonly || field.readonly;
 
+    // 조건부 입력 비활성화 체크
+    const isConditionalDisabled =
+      subDataLookup?.enabled &&
+      subDataLookup.conditionalInput?.targetField === field.name &&
+      !isConditionalInputEnabled(itemIndex, field.name);
+
+    // 최대값 및 경고 체크
+    const maxValue = getMaxValueForField(itemIndex, field.name);
+    const numValue = parseFloat(value) || 0;
+    const showWarning = checkWarningThreshold(itemIndex, field.name, numValue);
+    const exceedsMax = maxValue !== null && numValue > maxValue;
+
     // 🆕 placeholder 기본값: 필드에 설정된 값 > 필드 라벨 기반 자동 생성
     // "id(를) 입력하세요" 같은 잘못된 기본값 방지
     const defaultPlaceholder = field.placeholder || `${field.label || field.name}`;
 
     const commonProps = {
       value: value || "",
-      disabled: isReadonly,
-      placeholder: defaultPlaceholder,
+      disabled: isReadonly || isConditionalDisabled,
+      placeholder: isConditionalDisabled ? "재고 선택 필요" : defaultPlaceholder,
       required: field.required,
     };
 
@@ -569,23 +692,37 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
                 type="number"
                 onChange={(e) => handleFieldChange(itemIndex, field.name, e.target.value)}
                 min={field.validation?.min}
-                max={field.validation?.max}
-                className="pr-1"
+                max={maxValue !== null ? maxValue : field.validation?.max}
+                className={cn("pr-1", exceedsMax && "border-red-500", showWarning && !exceedsMax && "border-amber-500")}
               />
               {value && <div className="text-muted-foreground mt-0.5 text-[10px]">{formattedDisplay}</div>}
+              {exceedsMax && (
+                <div className="mt-0.5 text-[10px] text-red-500">최대 {maxValue}까지 입력 가능</div>
+              )}
+              {showWarning && !exceedsMax && (
+                <div className="mt-0.5 text-[10px] text-amber-600">재고의 {subDataLookup?.conditionalInput?.warningThreshold ?? 90}% 이상</div>
+              )}
             </div>
           );
         }
 
         return (
-          <Input
-            {...commonProps}
-            type="number"
-            onChange={(e) => handleFieldChange(itemIndex, field.name, e.target.value)}
-            min={field.validation?.min}
-            max={field.validation?.max}
-            className="min-w-[80px]"
-          />
+          <div className="relative min-w-[80px]">
+            <Input
+              {...commonProps}
+              type="number"
+              onChange={(e) => handleFieldChange(itemIndex, field.name, e.target.value)}
+              min={field.validation?.min}
+              max={maxValue !== null ? maxValue : field.validation?.max}
+              className={cn(exceedsMax && "border-red-500", showWarning && !exceedsMax && "border-amber-500")}
+            />
+            {exceedsMax && (
+              <div className="mt-0.5 text-[10px] text-red-500">최대 {maxValue}까지 입력 가능</div>
+            )}
+            {showWarning && !exceedsMax && (
+              <div className="mt-0.5 text-[10px] text-amber-600">재고의 {subDataLookup?.conditionalInput?.warningThreshold ?? 90}% 이상</div>
+            )}
+          </div>
         );
 
       case "email":
@@ -754,6 +891,9 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
 
   // 그리드/테이블 형식 렌더링
   const renderGridLayout = () => {
+    // 하위 데이터 조회 설정이 있으면 연결 컬럼 찾기
+    const linkColumn = subDataLookup?.lookup?.linkColumn;
+
     return (
       <div className="bg-card">
         <Table>
@@ -775,55 +915,83 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
             </TableRow>
           </TableHeader>
           <TableBody>
-            {items.map((item, itemIndex) => (
-              <TableRow
-                key={itemIndex}
-                className={cn(
-                  "bg-background hover:bg-muted/50 transition-colors",
-                  draggedIndex === itemIndex && "opacity-50",
-                )}
-                draggable={allowReorder && !readonly && !disabled}
-                onDragStart={() => handleDragStart(itemIndex)}
-                onDragOver={(e) => handleDragOver(e, itemIndex)}
-                onDrop={(e) => handleDrop(e, itemIndex)}
-                onDragEnd={handleDragEnd}
-              >
-                {/* 인덱스 번호 */}
-                {showIndex && (
-                  <TableCell className="h-12 px-2.5 py-2 text-center text-sm font-medium">{itemIndex + 1}</TableCell>
-                )}
+            {items.map((item, itemIndex) => {
+              // 하위 데이터 조회용 연결 값
+              const linkValue = linkColumn ? item[linkColumn] : null;
 
-                {/* 드래그 핸들 */}
-                {allowReorder && !readonly && !disabled && (
-                  <TableCell className="h-12 px-2.5 py-2 text-center">
-                    <GripVertical className="text-muted-foreground h-4 w-4 cursor-move" />
-                  </TableCell>
-                )}
+              return (
+                <React.Fragment key={itemIndex}>
+                  <TableRow
+                    className={cn(
+                      "bg-background hover:bg-muted/50 transition-colors",
+                      draggedIndex === itemIndex && "opacity-50",
+                    )}
+                    draggable={allowReorder && !readonly && !disabled}
+                    onDragStart={() => handleDragStart(itemIndex)}
+                    onDragOver={(e) => handleDragOver(e, itemIndex)}
+                    onDrop={(e) => handleDrop(e, itemIndex)}
+                    onDragEnd={handleDragEnd}
+                  >
+                    {/* 인덱스 번호 */}
+                    {showIndex && (
+                      <TableCell className="h-12 px-2.5 py-2 text-center text-sm font-medium">{itemIndex + 1}</TableCell>
+                    )}
 
-                {/* 필드들 */}
-                {fields.map((field) => (
-                  <TableCell key={field.name} className="h-12 px-2.5 py-2">
-                    {renderField(field, itemIndex, item[field.name])}
-                  </TableCell>
-                ))}
+                    {/* 드래그 핸들 */}
+                    {allowReorder && !readonly && !disabled && (
+                      <TableCell className="h-12 px-2.5 py-2 text-center">
+                        <GripVertical className="text-muted-foreground h-4 w-4 cursor-move" />
+                      </TableCell>
+                    )}
 
-                {/* 삭제 버튼 */}
-                <TableCell className="h-12 px-2.5 py-2 text-center">
-                  {!readonly && !disabled && (
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => handleRemoveItem(itemIndex)}
-                      className="text-destructive hover:bg-destructive/10 hover:text-destructive h-8 w-8"
-                      title="항목 제거"
-                    >
-                      <X className="h-4 w-4" />
-                    </Button>
+                    {/* 필드들 */}
+                    {fields.map((field) => (
+                      <TableCell key={field.name} className="h-12 px-2.5 py-2">
+                        {renderField(field, itemIndex, item[field.name])}
+                      </TableCell>
+                    ))}
+
+                    {/* 삭제 버튼 */}
+                    <TableCell className="h-12 px-2.5 py-2 text-center">
+                      {!readonly && !disabled && (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => handleRemoveItem(itemIndex)}
+                          className="text-destructive hover:bg-destructive/10 hover:text-destructive h-8 w-8"
+                          title="항목 제거"
+                        >
+                          <X className="h-4 w-4" />
+                        </Button>
+                      )}
+                    </TableCell>
+                  </TableRow>
+
+                  {/* 하위 데이터 조회 패널 (인라인) */}
+                  {subDataLookup?.enabled && linkValue && (
+                    <TableRow className="bg-gray-50/50">
+                      <TableCell
+                        colSpan={
+                          fields.length + (showIndex ? 1 : 0) + (allowReorder && !readonly && !disabled ? 1 : 0) + 1
+                        }
+                        className="px-2.5 py-2"
+                      >
+                        <SubDataLookupPanel
+                          config={subDataLookup}
+                          linkValue={linkValue}
+                          itemIndex={itemIndex}
+                          onSelectionChange={(selectedItem, maxValue) =>
+                            handleSubDataSelection(itemIndex, selectedItem, maxValue)
+                          }
+                          disabled={readonly || disabled}
+                        />
+                      </TableCell>
+                    </TableRow>
                   )}
-                </TableCell>
-              </TableRow>
-            ))}
+                </React.Fragment>
+              );
+            })}
           </TableBody>
         </Table>
       </div>
@@ -832,10 +1000,15 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
 
   // 카드 형식 렌더링 (기존 방식)
   const renderCardLayout = () => {
+    // 하위 데이터 조회 설정이 있으면 연결 컬럼 찾기
+    const linkColumn = subDataLookup?.lookup?.linkColumn;
+
     return (
       <>
         {items.map((item, itemIndex) => {
           const isCollapsed = collapsible && collapsedItems.has(itemIndex);
+          // 하위 데이터 조회용 연결 값
+          const linkValue = linkColumn ? item[linkColumn] : null;
 
           return (
             <Card
@@ -907,6 +1080,21 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
                       </div>
                     ))}
                   </div>
+
+                  {/* 하위 데이터 조회 패널 (인라인) */}
+                  {subDataLookup?.enabled && linkValue && (
+                    <div className="mt-3 border-t pt-3">
+                      <SubDataLookupPanel
+                        config={subDataLookup}
+                        linkValue={linkValue}
+                        itemIndex={itemIndex}
+                        onSelectionChange={(selectedItem, maxValue) =>
+                          handleSubDataSelection(itemIndex, selectedItem, maxValue)
+                        }
+                        disabled={readonly || disabled}
+                      />
+                    </div>
+                  )}
                 </CardContent>
               )}
 
diff --git a/frontend/components/webtypes/config/RepeaterConfigPanel.tsx b/frontend/components/webtypes/config/RepeaterConfigPanel.tsx
index 00c8f5a7..97e20574 100644
--- a/frontend/components/webtypes/config/RepeaterConfigPanel.tsx
+++ b/frontend/components/webtypes/config/RepeaterConfigPanel.tsx
@@ -9,14 +9,17 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Plus, X, GripVertical, Check, ChevronsUpDown, Calculator } from "lucide-react";
+import { Switch } from "@/components/ui/switch";
+import { Plus, X, GripVertical, Check, ChevronsUpDown, Calculator, Database, ArrowUp, ArrowDown } from "lucide-react";
 import {
   RepeaterFieldGroupConfig,
   RepeaterFieldDefinition,
   RepeaterFieldType,
   CalculationOperator,
   CalculationFormula,
+  SubDataLookupConfig,
 } from "@/types/repeater";
+import { apiClient } from "@/lib/api/client";
 import { ColumnInfo } from "@/types/screen";
 import { cn } from "@/lib/utils";
 
@@ -93,6 +96,56 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
     handleFieldsChange(localFields.filter((_, i) => i !== index));
   };
 
+  // 필드 순서 변경 (위로)
+  const moveFieldUp = (index: number) => {
+    if (index <= 0) return;
+    const newFields = [...localFields];
+    [newFields[index - 1], newFields[index]] = [newFields[index], newFields[index - 1]];
+    handleFieldsChange(newFields);
+  };
+
+  // 필드 순서 변경 (아래로)
+  const moveFieldDown = (index: number) => {
+    if (index >= localFields.length - 1) return;
+    const newFields = [...localFields];
+    [newFields[index], newFields[index + 1]] = [newFields[index + 1], newFields[index]];
+    handleFieldsChange(newFields);
+  };
+
+  // 드래그 앤 드롭 상태
+  const [draggedFieldIndex, setDraggedFieldIndex] = useState<number | null>(null);
+
+  // 필드 드래그 시작
+  const handleFieldDragStart = (index: number) => {
+    setDraggedFieldIndex(index);
+  };
+
+  // 필드 드래그 오버
+  const handleFieldDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault();
+  };
+
+  // 필드 드롭
+  const handleFieldDrop = (e: React.DragEvent, targetIndex: number) => {
+    e.preventDefault();
+    if (draggedFieldIndex === null || draggedFieldIndex === targetIndex) {
+      setDraggedFieldIndex(null);
+      return;
+    }
+
+    const newFields = [...localFields];
+    const draggedField = newFields[draggedFieldIndex];
+    newFields.splice(draggedFieldIndex, 1);
+    newFields.splice(targetIndex, 0, draggedField);
+    handleFieldsChange(newFields);
+    setDraggedFieldIndex(null);
+  };
+
+  // 필드 드래그 종료
+  const handleFieldDragEnd = () => {
+    setDraggedFieldIndex(null);
+  };
+
   // 필드 수정 (입력 중 - 로컬 상태만)
   const updateFieldLocal = (index: number, field: "label" | "placeholder", value: string) => {
     setLocalInputs((prev) => ({
@@ -129,6 +182,46 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
   const [tableSelectOpen, setTableSelectOpen] = useState(false);
   const [tableSearchValue, setTableSearchValue] = useState("");
 
+  // 하위 데이터 조회 설정 상태
+  const [subDataTableSelectOpen, setSubDataTableSelectOpen] = useState(false);
+  const [subDataTableSearchValue, setSubDataTableSearchValue] = useState("");
+  const [subDataTableColumns, setSubDataTableColumns] = useState<ColumnInfo[]>([]);
+  const [subDataLinkColumnOpen, setSubDataLinkColumnOpen] = useState(false);
+  const [subDataLinkColumnSearch, setSubDataLinkColumnSearch] = useState("");
+
+  // 하위 데이터 조회 테이블 컬럼 로드
+  const loadSubDataTableColumns = async (tableName: string) => {
+    if (!tableName) {
+      setSubDataTableColumns([]);
+      return;
+    }
+    try {
+      const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
+      let columns: ColumnInfo[] = [];
+      if (response.data?.success && response.data?.data) {
+        if (Array.isArray(response.data.data.columns)) {
+          columns = response.data.data.columns;
+        } else if (Array.isArray(response.data.data)) {
+          columns = response.data.data;
+        }
+      } else if (Array.isArray(response.data)) {
+        columns = response.data;
+      }
+      setSubDataTableColumns(columns);
+      console.log("[RepeaterConfigPanel] 하위 데이터 테이블 컬럼 로드:", { tableName, count: columns.length });
+    } catch (error) {
+      console.error("[RepeaterConfigPanel] 하위 데이터 테이블 컬럼 로드 실패:", error);
+      setSubDataTableColumns([]);
+    }
+  };
+
+  // 하위 데이터 테이블이 설정되어 있으면 컬럼 로드
+  useEffect(() => {
+    if (config.subDataLookup?.lookup?.tableName) {
+      loadSubDataTableColumns(config.subDataLookup.lookup.tableName);
+    }
+  }, [config.subDataLookup?.lookup?.tableName]);
+
   // 필터링된 테이블 목록
   const filteredTables = useMemo(() => {
     if (!tableSearchValue) return allTables;
@@ -146,6 +239,86 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
     return table ? table.displayName || table.tableName : config.targetTable;
   }, [config.targetTable, allTables]);
 
+  // 하위 데이터 조회 테이블 표시명
+  const selectedSubDataTableLabel = useMemo(() => {
+    const tableName = config.subDataLookup?.lookup?.tableName;
+    if (!tableName) return "테이블을 선택하세요";
+    const table = allTables.find((t) => t.tableName === tableName);
+    return table ? `${table.displayName || table.tableName} (${tableName})` : tableName;
+  }, [config.subDataLookup?.lookup?.tableName, allTables]);
+
+  // 필터링된 하위 데이터 테이블 컬럼
+  const filteredSubDataColumns = useMemo(() => {
+    if (!subDataLinkColumnSearch) return subDataTableColumns;
+    const searchLower = subDataLinkColumnSearch.toLowerCase();
+    return subDataTableColumns.filter(
+      (col) =>
+        col.columnName.toLowerCase().includes(searchLower) ||
+        (col.columnLabel && col.columnLabel.toLowerCase().includes(searchLower)),
+    );
+  }, [subDataTableColumns, subDataLinkColumnSearch]);
+
+  // 하위 데이터 조회 설정 변경 핸들러
+  const handleSubDataLookupChange = (path: string, value: any) => {
+    const currentConfig = config.subDataLookup || {
+      enabled: false,
+      lookup: { tableName: "", linkColumn: "", displayColumns: [] },
+      selection: { mode: "single", requiredFields: [], requiredMode: "all" },
+      conditionalInput: { targetField: "" },
+      ui: { expandMode: "inline", maxHeight: "150px", showSummary: true },
+    };
+
+    // 경로를 따라 중첩 객체 업데이트
+    const pathParts = path.split(".");
+    let target: any = { ...currentConfig };
+    const newConfig = target;
+
+    for (let i = 0; i < pathParts.length - 1; i++) {
+      const part = pathParts[i];
+      target[part] = { ...target[part] };
+      target = target[part];
+    }
+    target[pathParts[pathParts.length - 1]] = value;
+
+    onChange({
+      ...config,
+      subDataLookup: newConfig as SubDataLookupConfig,
+    });
+  };
+
+  // 표시 컬럼 토글 핸들러
+  const handleDisplayColumnToggle = (columnName: string, checked: boolean) => {
+    const currentColumns = config.subDataLookup?.lookup?.displayColumns || [];
+    let newColumns: string[];
+    if (checked) {
+      newColumns = [...currentColumns, columnName];
+    } else {
+      newColumns = currentColumns.filter((c) => c !== columnName);
+    }
+    handleSubDataLookupChange("lookup.displayColumns", newColumns);
+  };
+
+  // 필수 선택 필드 토글 핸들러
+  const handleRequiredFieldToggle = (fieldName: string, checked: boolean) => {
+    const currentFields = config.subDataLookup?.selection?.requiredFields || [];
+    let newFields: string[];
+    if (checked) {
+      newFields = [...currentFields, fieldName];
+    } else {
+      newFields = currentFields.filter((f) => f !== fieldName);
+    }
+    handleSubDataLookupChange("selection.requiredFields", newFields);
+  };
+
+  // 컬럼 라벨 업데이트 핸들러
+  const handleColumnLabelChange = (columnName: string, label: string) => {
+    const currentLabels = config.subDataLookup?.lookup?.columnLabels || {};
+    handleSubDataLookupChange("lookup.columnLabels", {
+      ...currentLabels,
+      [columnName]: label,
+    });
+  };
+
   return (
     <div className="space-y-4">
       {/* 대상 테이블 선택 */}
@@ -250,24 +423,485 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
         </p>
       </div>
 
+      {/* 하위 데이터 조회 설정 */}
+      <div className="space-y-3 rounded-lg border-2 border-purple-200 bg-purple-50/30 p-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Database className="h-4 w-4 text-purple-600" />
+            <Label className="text-sm font-semibold text-purple-800">하위 데이터 조회</Label>
+          </div>
+          <Switch
+            checked={config.subDataLookup?.enabled ?? false}
+            onCheckedChange={(checked) => handleSubDataLookupChange("enabled", checked)}
+          />
+        </div>
+        <p className="text-xs text-purple-600">
+          품목 선택 시 재고/단가 등 관련 데이터를 조회하고 선택할 수 있습니다.
+        </p>
+
+        {config.subDataLookup?.enabled && (
+          <div className="space-y-4 pt-2">
+            {/* 조회 테이블 선택 */}
+            <div className="space-y-2">
+              <Label className="text-xs font-medium text-purple-700">조회 테이블</Label>
+              <Popover open={subDataTableSelectOpen} onOpenChange={setSubDataTableSelectOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={subDataTableSelectOpen}
+                    className="h-9 w-full justify-between text-xs"
+                  >
+                    {selectedSubDataTableLabel}
+                    <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-full p-0" align="start">
+                  <Command>
+                    <CommandInput
+                      placeholder="테이블 검색..."
+                      value={subDataTableSearchValue}
+                      onValueChange={setSubDataTableSearchValue}
+                      className="h-8 text-xs"
+                    />
+                    <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandGroup className="max-h-48 overflow-auto">
+                      {allTables
+                        .filter((table) => {
+                          if (!subDataTableSearchValue) return true;
+                          const searchLower = subDataTableSearchValue.toLowerCase();
+                          return (
+                            table.tableName.toLowerCase().includes(searchLower) ||
+                            (table.displayName && table.displayName.toLowerCase().includes(searchLower))
+                          );
+                        })
+                        .map((table) => (
+                          <CommandItem
+                            key={table.tableName}
+                            value={table.tableName}
+                            onSelect={(currentValue) => {
+                              handleSubDataLookupChange("lookup.tableName", currentValue);
+                              loadSubDataTableColumns(currentValue);
+                              setSubDataTableSelectOpen(false);
+                              setSubDataTableSearchValue("");
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                config.subDataLookup?.lookup?.tableName === table.tableName
+                                  ? "opacity-100"
+                                  : "opacity-0",
+                              )}
+                            />
+                            <div>
+                              <div className="font-medium">{table.displayName || table.tableName}</div>
+                              <div className="text-gray-500">{table.tableName}</div>
+                            </div>
+                          </CommandItem>
+                        ))}
+                    </CommandGroup>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <p className="text-[10px] text-purple-500">예: inventory (재고), price_list (단가표)</p>
+            </div>
+
+            {/* 연결 컬럼 선택 */}
+            {config.subDataLookup?.lookup?.tableName && (
+              <div className="space-y-2">
+                <Label className="text-xs font-medium text-purple-700">연결 컬럼</Label>
+                <Popover open={subDataLinkColumnOpen} onOpenChange={setSubDataLinkColumnOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={subDataLinkColumnOpen}
+                      className="h-9 w-full justify-between text-xs"
+                    >
+                      {config.subDataLookup?.lookup?.linkColumn
+                        ? (() => {
+                            const col = subDataTableColumns.find(
+                              (c) => c.columnName === config.subDataLookup?.lookup?.linkColumn,
+                            );
+                            return col
+                              ? `${col.columnLabel || col.columnName} (${col.columnName})`
+                              : config.subDataLookup?.lookup?.linkColumn;
+                          })()
+                        : "연결 컬럼 선택"}
+                      <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-full p-0" align="start">
+                    <Command>
+                      <CommandInput
+                        placeholder="컬럼 검색..."
+                        value={subDataLinkColumnSearch}
+                        onValueChange={setSubDataLinkColumnSearch}
+                        className="h-8 text-xs"
+                      />
+                      <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
+                      <CommandGroup className="max-h-48 overflow-auto">
+                        {filteredSubDataColumns.map((col) => (
+                          <CommandItem
+                            key={col.columnName}
+                            value={col.columnName}
+                            onSelect={(currentValue) => {
+                              handleSubDataLookupChange("lookup.linkColumn", currentValue);
+                              setSubDataLinkColumnOpen(false);
+                              setSubDataLinkColumnSearch("");
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                config.subDataLookup?.lookup?.linkColumn === col.columnName
+                                  ? "opacity-100"
+                                  : "opacity-0",
+                              )}
+                            />
+                            <div>
+                              <div className="font-medium">{col.columnLabel || col.columnName}</div>
+                              <div className="text-gray-500">{col.columnName}</div>
+                            </div>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+                <p className="text-[10px] text-purple-500">상위 데이터와 연결할 컬럼 (예: item_code)</p>
+              </div>
+            )}
+
+            {/* 표시 컬럼 선택 */}
+            {config.subDataLookup?.lookup?.tableName && subDataTableColumns.length > 0 && (
+              <div className="space-y-2">
+                <Label className="text-xs font-medium text-purple-700">표시 컬럼</Label>
+                <div className="max-h-32 space-y-1 overflow-y-auto rounded border bg-white p-2">
+                  {subDataTableColumns.map((col) => {
+                    const isSelected = config.subDataLookup?.lookup?.displayColumns?.includes(col.columnName);
+                    return (
+                      <div key={col.columnName} className="flex items-center gap-2">
+                        <Checkbox
+                          id={`display-col-${col.columnName}`}
+                          checked={isSelected}
+                          onCheckedChange={(checked) => handleDisplayColumnToggle(col.columnName, checked as boolean)}
+                        />
+                        <Label
+                          htmlFor={`display-col-${col.columnName}`}
+                          className="flex-1 cursor-pointer text-xs font-normal"
+                        >
+                          {col.columnLabel || col.columnName}
+                          <span className="ml-1 text-gray-400">({col.columnName})</span>
+                        </Label>
+                      </div>
+                    );
+                  })}
+                </div>
+                <p className="text-[10px] text-purple-500">조회 결과에 표시할 컬럼들 (예: 창고, 위치, 수량)</p>
+              </div>
+            )}
+
+            {/* 선택 설정 */}
+            {(config.subDataLookup?.lookup?.displayColumns?.length || 0) > 0 && (
+              <div className="space-y-3 border-t border-purple-200 pt-3">
+                <Label className="text-xs font-medium text-purple-700">선택 설정</Label>
+
+                {/* 선택 모드 */}
+                <div className="space-y-2">
+                  <Label className="text-[10px] text-purple-600">선택 모드</Label>
+                  <Select
+                    value={config.subDataLookup?.selection?.mode || "single"}
+                    onValueChange={(v) => handleSubDataLookupChange("selection.mode", v)}
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="single" className="text-xs">
+                        단일 선택
+                      </SelectItem>
+                      <SelectItem value="multiple" className="text-xs">
+                        다중 선택
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* 필수 선택 필드 */}
+                <div className="space-y-2">
+                  <Label className="text-[10px] text-purple-600">필수 선택 필드</Label>
+                  <div className="flex flex-wrap gap-2">
+                    {config.subDataLookup?.lookup?.displayColumns?.map((colName) => {
+                      const col = subDataTableColumns.find((c) => c.columnName === colName);
+                      const isRequired = config.subDataLookup?.selection?.requiredFields?.includes(colName);
+                      return (
+                        <div key={colName} className="flex items-center gap-1">
+                          <Checkbox
+                            id={`required-field-${colName}`}
+                            checked={isRequired}
+                            onCheckedChange={(checked) => handleRequiredFieldToggle(colName, checked as boolean)}
+                          />
+                          <Label htmlFor={`required-field-${colName}`} className="cursor-pointer text-xs font-normal">
+                            {col?.columnLabel || colName}
+                          </Label>
+                        </div>
+                      );
+                    })}
+                  </div>
+                  <p className="text-[10px] text-purple-500">이 필드들이 선택되어야 입력이 활성화됩니다</p>
+                </div>
+
+                {/* 필수 조건 */}
+                {(config.subDataLookup?.selection?.requiredFields?.length || 0) > 1 && (
+                  <div className="space-y-2">
+                    <Label className="text-[10px] text-purple-600">필수 조건</Label>
+                    <Select
+                      value={config.subDataLookup?.selection?.requiredMode || "all"}
+                      onValueChange={(v) => handleSubDataLookupChange("selection.requiredMode", v)}
+                    >
+                      <SelectTrigger className="h-8 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="all" className="text-xs">
+                          모두 선택해야 함
+                        </SelectItem>
+                        <SelectItem value="any" className="text-xs">
+                          하나만 선택해도 됨
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* 조건부 입력 설정 */}
+            {(config.subDataLookup?.lookup?.displayColumns?.length || 0) > 0 && (
+              <div className="space-y-3 border-t border-purple-200 pt-3">
+                <Label className="text-xs font-medium text-purple-700">조건부 입력 설정</Label>
+
+                {/* 활성화 대상 필드 */}
+                <div className="space-y-2">
+                  <Label className="text-[10px] text-purple-600">활성화 대상 필드</Label>
+                  <Select
+                    value={config.subDataLookup?.conditionalInput?.targetField || "__none__"}
+                    onValueChange={(v) =>
+                      handleSubDataLookupChange("conditionalInput.targetField", v === "__none__" ? "" : v)
+                    }
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue placeholder="필드 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="__none__" className="text-xs">
+                        선택 안함
+                      </SelectItem>
+                      {localFields.length === 0 ? (
+                        <SelectItem value="__empty__" disabled className="text-xs text-gray-400">
+                          필드 정의에서 먼저 필드를 추가하세요
+                        </SelectItem>
+                      ) : (
+                        localFields.map((f) => (
+                          <SelectItem key={f.name} value={f.name} className="text-xs">
+                            {f.label || f.name} ({f.name})
+                          </SelectItem>
+                        ))
+                      )}
+                    </SelectContent>
+                  </Select>
+                  <p className="text-[10px] text-purple-500">
+                    하위 데이터 선택 후 입력이 활성화될 필드 (예: 출고수량)
+                    {localFields.length === 0 && (
+                      <span className="ml-1 text-amber-600">* 필드 정의 필요</span>
+                    )}
+                  </p>
+                </div>
+
+                {/* 최대값 참조 필드 */}
+                <div className="space-y-2">
+                  <Label className="text-[10px] text-purple-600">최대값 참조 필드 (선택)</Label>
+                  <Select
+                    value={config.subDataLookup?.conditionalInput?.maxValueField || "__none__"}
+                    onValueChange={(v) =>
+                      handleSubDataLookupChange("conditionalInput.maxValueField", v === "__none__" ? undefined : v)
+                    }
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue placeholder="필드 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="__none__" className="text-xs">
+                        사용 안함
+                      </SelectItem>
+                      {subDataTableColumns.map((col) => (
+                        <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
+                          {col.columnLabel || col.columnName} ({col.columnName})
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <p className="text-[10px] text-purple-500">입력 최대값을 제한할 하위 데이터 필드 (예: 재고수량)</p>
+                </div>
+
+                {/* 경고 임계값 */}
+                {config.subDataLookup?.conditionalInput?.maxValueField && (
+                  <div className="space-y-2">
+                    <Label className="text-[10px] text-purple-600">경고 임계값 (%)</Label>
+                    <Input
+                      type="number"
+                      min={0}
+                      max={100}
+                      value={config.subDataLookup?.conditionalInput?.warningThreshold ?? 90}
+                      onChange={(e) =>
+                        handleSubDataLookupChange("conditionalInput.warningThreshold", parseInt(e.target.value) || 90)
+                      }
+                      className="h-8 text-xs"
+                    />
+                    <p className="text-[10px] text-purple-500">이 비율 이상 입력 시 경고 표시 (예: 90%)</p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* UI 설정 */}
+            {(config.subDataLookup?.lookup?.displayColumns?.length || 0) > 0 && (
+              <div className="space-y-3 border-t border-purple-200 pt-3">
+                <Label className="text-xs font-medium text-purple-700">UI 설정</Label>
+
+                {/* 확장 방식 */}
+                <div className="space-y-2">
+                  <Label className="text-[10px] text-purple-600">확장 방식</Label>
+                  <Select
+                    value={config.subDataLookup?.ui?.expandMode || "inline"}
+                    onValueChange={(v) => handleSubDataLookupChange("ui.expandMode", v)}
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="inline" className="text-xs">
+                        인라인 (행 아래 확장)
+                      </SelectItem>
+                      <SelectItem value="modal" className="text-xs">
+                        모달 (팝업)
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* 최대 높이 */}
+                {config.subDataLookup?.ui?.expandMode === "inline" && (
+                  <div className="space-y-2">
+                    <Label className="text-[10px] text-purple-600">최대 높이</Label>
+                    <Input
+                      value={config.subDataLookup?.ui?.maxHeight || "150px"}
+                      onChange={(e) => handleSubDataLookupChange("ui.maxHeight", e.target.value)}
+                      placeholder="150px"
+                      className="h-8 text-xs"
+                    />
+                  </div>
+                )}
+
+                {/* 요약 정보 표시 */}
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="sub-data-show-summary"
+                    checked={config.subDataLookup?.ui?.showSummary ?? true}
+                    onCheckedChange={(checked) => handleSubDataLookupChange("ui.showSummary", checked)}
+                  />
+                  <Label htmlFor="sub-data-show-summary" className="cursor-pointer text-xs font-normal">
+                    요약 정보 표시
+                  </Label>
+                </div>
+              </div>
+            )}
+
+            {/* 설정 요약 */}
+            {config.subDataLookup?.lookup?.tableName && (
+              <div className="rounded bg-purple-100 p-2 text-xs">
+                <p className="font-medium text-purple-800">설정 요약</p>
+                <ul className="mt-1 space-y-0.5 text-purple-700">
+                  <li>조회 테이블: {config.subDataLookup?.lookup?.tableName || "-"}</li>
+                  <li>연결 컬럼: {config.subDataLookup?.lookup?.linkColumn || "-"}</li>
+                  <li>표시 컬럼: {config.subDataLookup?.lookup?.displayColumns?.join(", ") || "-"}</li>
+                  <li>필수 선택: {config.subDataLookup?.selection?.requiredFields?.join(", ") || "-"}</li>
+                  <li>활성화 필드: {config.subDataLookup?.conditionalInput?.targetField || "-"}</li>
+                </ul>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
       {/* 필드 정의 */}
       <div className="space-y-3">
-        <Label className="text-sm font-semibold">필드 정의</Label>
+        <div className="flex items-center justify-between">
+          <Label className="text-sm font-semibold">필드 정의</Label>
+          <span className="text-xs text-gray-500">드래그하거나 화살표로 순서 변경</span>
+        </div>
 
         {localFields.map((field, index) => (
-          <Card key={`${field.name}-${index}`} className="border-2">
+          <Card
+            key={`${field.name}-${index}`}
+            className={cn(
+              "border-2 transition-all",
+              draggedFieldIndex === index && "opacity-50 border-blue-400",
+              draggedFieldIndex !== null && draggedFieldIndex !== index && "border-dashed",
+            )}
+            draggable
+            onDragStart={() => handleFieldDragStart(index)}
+            onDragOver={(e) => handleFieldDragOver(e, index)}
+            onDrop={(e) => handleFieldDrop(e, index)}
+            onDragEnd={handleFieldDragEnd}
+          >
             <CardContent className="space-y-3 pt-4">
               <div className="flex items-center justify-between">
-                <span className="text-sm font-semibold text-gray-700">필드 {index + 1}</span>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => removeField(index)}
-                  className="h-6 w-6 text-red-500 hover:bg-red-50"
-                >
-                  <X className="h-3 w-3" />
-                </Button>
+                <div className="flex items-center gap-2">
+                  {/* 드래그 핸들 */}
+                  <GripVertical className="h-4 w-4 cursor-move text-gray-400 hover:text-gray-600" />
+                  <span className="text-sm font-semibold text-gray-700">필드 {index + 1}</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  {/* 순서 변경 버튼 */}
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => moveFieldUp(index)}
+                    disabled={index === 0}
+                    className="h-6 w-6 text-gray-500 hover:bg-gray-100 disabled:opacity-30"
+                    title="위로 이동"
+                  >
+                    <ArrowUp className="h-3 w-3" />
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => moveFieldDown(index)}
+                    disabled={index === localFields.length - 1}
+                    className="h-6 w-6 text-gray-500 hover:bg-gray-100 disabled:opacity-30"
+                    title="아래로 이동"
+                  >
+                    <ArrowDown className="h-3 w-3" />
+                  </Button>
+                  {/* 삭제 버튼 */}
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => removeField(index)}
+                    className="h-6 w-6 text-red-500 hover:bg-red-50"
+                    title="삭제"
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </div>
               </div>
 
               <div className="grid grid-cols-2 gap-3">
diff --git a/frontend/lib/api/entityJoin.ts b/frontend/lib/api/entityJoin.ts
index 9a73cb4c..81b49a5e 100644
--- a/frontend/lib/api/entityJoin.ts
+++ b/frontend/lib/api/entityJoin.ts
@@ -77,12 +77,6 @@ export const entityJoinApi = {
         filterColumn?: string;
         filterValue?: any;
       }; // 🆕 제외 필터 (다른 테이블에 이미 존재하는 데이터 제외)
-      deduplication?: {
-        enabled: boolean;
-        groupByColumn: string;
-        keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
-        sortColumn?: string;
-      }; // 🆕 중복 제거 설정
       companyCodeOverride?: string; // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 사용 가능)
     } = {},
   ): Promise<EntityJoinResponse> => {
@@ -116,7 +110,6 @@ export const entityJoinApi = {
         autoFilter: JSON.stringify(autoFilter), // 🔒 멀티테넌시 필터링 (오버라이드 포함)
         dataFilter: params.dataFilter ? JSON.stringify(params.dataFilter) : undefined, // 🆕 데이터 필터
         excludeFilter: params.excludeFilter ? JSON.stringify(params.excludeFilter) : undefined, // 🆕 제외 필터
-        deduplication: params.deduplication ? JSON.stringify(params.deduplication) : undefined, // 🆕 중복 제거 설정
       },
     });
     return response.data.data;
diff --git a/frontend/lib/api/screen.ts b/frontend/lib/api/screen.ts
index c89af5be..2c530a49 100644
--- a/frontend/lib/api/screen.ts
+++ b/frontend/lib/api/screen.ts
@@ -105,6 +105,18 @@ export const screenApi = {
     return response.data;
   },
 
+  // 화면 수정 (이름, 설명 등)
+  updateScreen: async (
+    screenId: number,
+    data: {
+      screenName?: string;
+      description?: string;
+      tableName?: string;
+    }
+  ): Promise<void> => {
+    await apiClient.put(`/screen-management/screens/${screenId}`, data);
+  },
+
   // 화면 삭제 (휴지통으로 이동)
   deleteScreen: async (screenId: number, deleteReason?: string, force?: boolean): Promise<void> => {
     await apiClient.delete(`/screen-management/screens/${screenId}`, {
diff --git a/frontend/lib/api/tableManagement.ts b/frontend/lib/api/tableManagement.ts
index 5953fd82..24ef25a0 100644
--- a/frontend/lib/api/tableManagement.ts
+++ b/frontend/lib/api/tableManagement.ts
@@ -13,7 +13,7 @@ export interface ColumnTypeInfo {
   dataType: string;
   dbType: string;
   webType: string;
-  inputType?: "direct" | "auto";
+  inputType?: string; // text, number, entity, code, select, date, checkbox 등
   detailSettings: string;
   description?: string;
   isNullable: string;
@@ -39,11 +39,11 @@ export interface TableInfo {
   columnCount: number;
 }
 
-// 컬럼 설정 타입
+// 컬럼 설정 타입 (백엔드 API와 동일한 필드명 사용)
 export interface ColumnSettings {
   columnName?: string;
   columnLabel: string;
-  webType: string;
+  inputType: string; // 백엔드에서 inputType으로 받음
   detailSettings: string;
   codeCategory: string;
   codeValue: string;
diff --git a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
index 7ea3d192..f65cf5e2 100644
--- a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
@@ -27,7 +27,6 @@ import { useScreenContextOptional } from "@/contexts/ScreenContext";
 import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext";
 import { applyMappingRules } from "@/lib/utils/dataMapping";
 import { apiClient } from "@/lib/api/client";
-import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
 
 export interface ButtonPrimaryComponentProps extends ComponentRendererProps {
   config?: ButtonPrimaryConfig;
@@ -108,7 +107,6 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const screenContext = useScreenContextOptional(); // 화면 컨텍스트
   const splitPanelContext = useSplitPanelContext(); // 분할 패널 컨텍스트
-  const { getTranslatedText } = useScreenMultiLang(); // 다국어 컨텍스트
   // 🆕 ScreenContext에서 splitPanelPosition 가져오기 (중첩 화면에서도 작동)
   const splitPanelPosition = screenContext?.splitPanelPosition;
 
@@ -301,20 +299,6 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
   // 🆕 modalDataStore에서 선택된 데이터 확인 (분할 패널 등에서 저장됨)
   const [modalStoreData, setModalStoreData] = useState<Record<string, any[]>>({});
 
-  // 🆕 splitPanelContext?.selectedLeftData를 로컬 상태로 추적 (리렌더링 보장)
-  const [trackedSelectedLeftData, setTrackedSelectedLeftData] = useState<Record<string, any> | null>(null);
-
-  // splitPanelContext?.selectedLeftData 변경 감지 및 로컬 상태 동기화
-  useEffect(() => {
-    const newData = splitPanelContext?.selectedLeftData ?? null;
-    setTrackedSelectedLeftData(newData);
-    // console.log("🔄 [ButtonPrimary] selectedLeftData 변경 감지:", {
-    //   label: component.label,
-    //   hasData: !!newData,
-    //   dataKeys: newData ? Object.keys(newData) : [],
-    // });
-  }, [splitPanelContext?.selectedLeftData, component.label]);
-
   // modalDataStore 상태 구독 (실시간 업데이트)
   useEffect(() => {
     const actionConfig = component.componentConfig?.action;
@@ -373,8 +357,8 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
 
     // 2. 분할 패널 좌측 선택 데이터 확인
     if (rowSelectionSource === "auto" || rowSelectionSource === "splitPanelLeft") {
-      // SplitPanelContext에서 확인 (trackedSelectedLeftData 사용으로 리렌더링 보장)
-      if (trackedSelectedLeftData && Object.keys(trackedSelectedLeftData).length > 0) {
+      // SplitPanelContext에서 확인
+      if (splitPanelContext?.selectedLeftData && Object.keys(splitPanelContext.selectedLeftData).length > 0) {
         if (!hasSelection) {
           hasSelection = true;
           selectionCount = 1;
@@ -422,7 +406,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     component.label,
     selectedRows,
     selectedRowsData,
-    trackedSelectedLeftData,
+    splitPanelContext?.selectedLeftData,
     flowSelectedData,
     splitPanelContext,
     modalStoreData,
@@ -1300,10 +1284,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     ...userStyle,
   };
 
-  // 다국어 적용: componentConfig.langKey가 있으면 번역 텍스트 사용
-  const langKey = (component as any).componentConfig?.langKey;
-  const originalButtonText = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";
-  const buttonContent = getTranslatedText(langKey, originalButtonText);
+  const buttonContent = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";
 
   return (
     <>
diff --git a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
index 2caf1332..153cebdf 100644
--- a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
@@ -180,8 +180,11 @@ export function ModalRepeaterTableComponent({
   filterCondition: propFilterCondition,
   companyCode: propCompanyCode,
   
+  // 🆕 그룹 데이터 (EditModal에서 전달, 같은 그룹의 여러 품목)
+  groupedData,
+  
   ...props
-}: ModalRepeaterTableComponentProps) {
+}: ModalRepeaterTableComponentProps & { groupedData?: Record<string, any>[] }) {
   // ✅ config 또는 component.config 또는 개별 prop 우선순위로 병합
   const componentConfig = {
     ...config,
@@ -208,9 +211,16 @@ export function ModalRepeaterTableComponent({
   // 모달 필터 설정
   const modalFilters = componentConfig?.modalFilters || [];
   
-  // ✅ value는 formData[columnName] 우선, 없으면 prop 사용
+  // ✅ value는 groupedData 우선, 없으면 formData[columnName], 없으면 prop 사용
   const columnName = component?.columnName;
-  const externalValue = (columnName && formData?.[columnName]) || componentConfig?.value || propValue || [];
+  
+  // 🆕 groupedData가 전달되면 (EditModal에서 그룹 조회 결과) 우선 사용
+  const externalValue = (() => {
+    if (groupedData && groupedData.length > 0) {
+      return groupedData;
+    }
+    return (columnName && formData?.[columnName]) || componentConfig?.value || propValue || [];
+  })();
   
   // 빈 객체 판단 함수 (수정 모달의 실제 데이터는 유지)
   const isEmptyRow = (item: any): boolean => {
diff --git a/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx b/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx
index 4f4595ff..b55907a4 100644
--- a/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx
+++ b/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx
@@ -303,6 +303,17 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     externalDataLength: externalData?.length,
     initialFieldsLength: initialFields?.length,
   });
+  
+  // 🆕 데이터 샘플 확인
+  if (externalData && externalData.length > 0) {
+    console.log("🔶 첫 번째 데이터 샘플:", externalData[0]);
+    console.log("🔶 전체 데이터 개수:", externalData.length);
+  }
+  
+  // 🆕 필드 설정 확인
+  if (initialFields && initialFields.length > 0) {
+    console.log("🔶 필드 설정:", initialFields);
+  }
   // ==================== 상태 ====================
 
   const [fields, setFields] = useState<PivotFieldConfig[]>(initialFields);
@@ -312,6 +323,9 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     sortConfig: null,
     filterConfig: {},
   });
+  
+  // 🆕 초기 로드 시 자동 확장 (첫 레벨만)
+  const [isInitialExpanded, setIsInitialExpanded] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [showFieldPanel, setShowFieldPanel] = useState(false); // 기본적으로 접힌 상태
   const [showFieldChooser, setShowFieldChooser] = useState(false);
@@ -494,13 +508,44 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
       return null;
     }
 
-    return processPivotData(
+    const result = processPivotData(
       filteredData,
       visibleFields,
       pivotState.expandedRowPaths,
       pivotState.expandedColumnPaths
     );
+    
+    // 🆕 피벗 결과 확인
+    console.log("🔶 피벗 처리 결과:", {
+      hasResult: !!result,
+      flatRowsCount: result?.flatRows?.length,
+      flatColumnsCount: result?.flatColumns?.length,
+      dataMatrixSize: result?.dataMatrix?.size,
+      expandedRowPaths: pivotState.expandedRowPaths.length,
+      expandedColumnPaths: pivotState.expandedColumnPaths.length,
+    });
+    
+    return result;
   }, [filteredData, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]);
+  
+  // 🆕 초기 로드 시 첫 레벨 자동 확장
+  useEffect(() => {
+    if (!isInitialExpanded && pivotResult && pivotResult.flatRows.length > 0) {
+      // 첫 레벨 행들의 경로 수집 (level 0인 행들)
+      const firstLevelPaths = pivotResult.flatRows
+        .filter(row => row.level === 0 && row.hasChildren)
+        .map(row => row.path);
+      
+      if (firstLevelPaths.length > 0) {
+        console.log("🔶 초기 자동 확장:", firstLevelPaths);
+        setPivotState(prev => ({
+          ...prev,
+          expandedRowPaths: firstLevelPaths,
+        }));
+        setIsInitialExpanded(true);
+      }
+    }
+  }, [pivotResult, isInitialExpanded]);
 
   // 조건부 서식용 전체 값 수집
   const allCellValues = useMemo(() => {
@@ -665,6 +710,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
   // 행 확장/축소
   const handleToggleRowExpand = useCallback(
     (path: string[]) => {
+      console.log("🔶 행 확장/축소 클릭:", path);
+      
       setPivotState((prev) => {
         const pathKey = pathToKey(path);
         const existingIndex = prev.expandedRowPaths.findIndex(
@@ -673,13 +720,16 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
 
         let newPaths: string[][];
         if (existingIndex >= 0) {
+          console.log("🔶 행 축소:", path);
           newPaths = prev.expandedRowPaths.filter(
             (_, i) => i !== existingIndex
           );
         } else {
+          console.log("🔶 행 확장:", path);
           newPaths = [...prev.expandedRowPaths, path];
         }
 
+        console.log("🔶 새로운 확장 경로:", newPaths);
         onExpandChange?.(newPaths);
 
         return {
diff --git a/frontend/lib/registry/components/pivot-grid/PivotGridRenderer.tsx b/frontend/lib/registry/components/pivot-grid/PivotGridRenderer.tsx
index 8e3563d9..08b21369 100644
--- a/frontend/lib/registry/components/pivot-grid/PivotGridRenderer.tsx
+++ b/frontend/lib/registry/components/pivot-grid/PivotGridRenderer.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { PivotGridComponent } from "./PivotGridComponent";
 import { PivotGridConfigPanel } from "./PivotGridConfigPanel";
 import { PivotFieldConfig } from "./types";
+import { dataApi } from "@/lib/api/data";
 
 // ==================== 샘플 데이터 (미리보기용) ====================
 
@@ -95,6 +96,48 @@ const PivotGridWrapper: React.FC<any> = (props) => {
   const configFields = componentConfig.fields || props.fields;
   const configData = props.data;
   
+  // 🆕 테이블에서 데이터 자동 로딩
+  const [loadedData, setLoadedData] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  
+  useEffect(() => {
+    const loadTableData = async () => {
+      const tableName = componentConfig.dataSource?.tableName;
+      
+      // 데이터가 이미 있거나, 테이블명이 없으면 로딩하지 않음
+      if (configData || !tableName || props.isDesignMode) {
+        return;
+      }
+      
+      setIsLoading(true);
+      try {
+        console.log("🔷 [PivotGrid] 테이블 데이터 로딩 시작:", tableName);
+        
+        const response = await dataApi.getTableData(tableName, {
+          page: 1,
+          size: 10000, // 피벗 분석용 대량 데이터 (pageSize → size)
+        });
+        
+        console.log("🔷 [PivotGrid] API 응답:", response);
+        
+        // dataApi.getTableData는 { data, total, page, size, totalPages } 구조
+        if (response.data && Array.isArray(response.data)) {
+          setLoadedData(response.data);
+          console.log("✅ [PivotGrid] 데이터 로딩 완료:", response.data.length, "건");
+        } else {
+          console.error("❌ [PivotGrid] 데이터 로딩 실패: 응답에 data 배열이 없음");
+          setLoadedData([]);
+        }
+      } catch (error) {
+        console.error("❌ [PivotGrid] 데이터 로딩 에러:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    
+    loadTableData();
+  }, [componentConfig.dataSource?.tableName, configData, props.isDesignMode]);
+  
   // 디버깅 로그
   console.log("🔷 PivotGridWrapper props:", {
     isDesignMode: props.isDesignMode,
@@ -103,23 +146,28 @@ const PivotGridWrapper: React.FC<any> = (props) => {
     hasConfig: !!props.config,
     hasData: !!configData,
     dataLength: configData?.length,
+    hasLoadedData: loadedData.length > 0,
+    loadedDataLength: loadedData.length,
     hasFields: !!configFields,
     fieldsLength: configFields?.length,
+    isLoading,
   });
 
   // 디자인 모드 판단:
   // 1. isDesignMode === true
   // 2. isInteractive === false (편집 모드)
-  // 3. 데이터가 없는 경우
   const isDesignMode = props.isDesignMode === true || props.isInteractive === false;
-  const hasValidData = configData && Array.isArray(configData) && configData.length > 0;
+  
+  // 🆕 실제 데이터 우선순위: props.data > loadedData > 샘플 데이터
+  const actualData = configData || loadedData;
+  const hasValidData = actualData && Array.isArray(actualData) && actualData.length > 0;
   const hasValidFields = configFields && Array.isArray(configFields) && configFields.length > 0;
   
   // 디자인 모드이거나 데이터가 없으면 샘플 데이터 사용
-  const usePreviewData = isDesignMode || !hasValidData;
+  const usePreviewData = isDesignMode || (!hasValidData && !isLoading);
 
   // 최종 데이터/필드 결정
-  const finalData = usePreviewData ? SAMPLE_DATA : configData;
+  const finalData = usePreviewData ? SAMPLE_DATA : actualData;
   const finalFields = hasValidFields ? configFields : SAMPLE_FIELDS;
   const finalTitle = usePreviewData 
     ? (componentConfig.title || props.title || "피벗 그리드") + " (미리보기)"
@@ -140,6 +188,18 @@ const PivotGridWrapper: React.FC<any> = (props) => {
     showColumnTotals: true,
   };
 
+  // 🆕 로딩 중 표시
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64 bg-muted/30 rounded-lg">
+        <div className="text-center space-y-2">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
+          <p className="text-sm text-muted-foreground">데이터 로딩 중...</p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <PivotGridComponent
       title={finalTitle}
diff --git a/frontend/lib/registry/components/pivot-grid/components/FieldChooser.tsx b/frontend/lib/registry/components/pivot-grid/components/FieldChooser.tsx
index de4a8948..89fe5128 100644
--- a/frontend/lib/registry/components/pivot-grid/components/FieldChooser.tsx
+++ b/frontend/lib/registry/components/pivot-grid/components/FieldChooser.tsx
@@ -401,7 +401,7 @@ export const FieldChooser: React.FC<FieldChooserProps> = ({
         </div>
 
         {/* 필드 목록 */}
-        <ScrollArea className="flex-1 -mx-6 px-6">
+        <ScrollArea className="flex-1 -mx-6 px-6 max-h-[40vh] overflow-y-auto">
           <div className="space-y-2 py-2">
             {filteredFields.length === 0 ? (
               <div className="text-center py-8 text-muted-foreground">
diff --git a/frontend/lib/registry/components/repeater-field-group/SubDataLookupPanel.tsx b/frontend/lib/registry/components/repeater-field-group/SubDataLookupPanel.tsx
new file mode 100644
index 00000000..5baf0fe0
--- /dev/null
+++ b/frontend/lib/registry/components/repeater-field-group/SubDataLookupPanel.tsx
@@ -0,0 +1,422 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { ChevronDown, ChevronUp, Loader2, AlertCircle, Check, Package, Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import { SubDataLookupConfig } from "@/types/repeater";
+import { useSubDataLookup } from "./useSubDataLookup";
+
+export interface SubDataLookupPanelProps {
+  config: SubDataLookupConfig;
+  linkValue: string | number | null; // 상위 항목의 연결 값 (예: item_code)
+  itemIndex: number; // 상위 항목 인덱스
+  onSelectionChange: (selectedItem: any | null, maxValue: number | null) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * 하위 데이터 조회 패널
+ * 품목 선택 시 재고/단가 등 관련 데이터를 표시하고 선택할 수 있는 패널
+ */
+export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
+  config,
+  linkValue,
+  itemIndex,
+  onSelectionChange,
+  disabled = false,
+  className,
+}) => {
+  const {
+    data,
+    isLoading,
+    error,
+    selectedItem,
+    setSelectedItem,
+    isInputEnabled,
+    maxValue,
+    isExpanded,
+    setIsExpanded,
+    refetch,
+    getSelectionSummary,
+  } = useSubDataLookup({
+    config,
+    linkValue,
+    itemIndex,
+    enabled: !disabled,
+  });
+
+  // 선택 핸들러
+  const handleSelect = (item: any) => {
+    if (disabled) return;
+
+    // 이미 선택된 항목이면 선택 해제
+    const newSelectedItem = selectedItem?.id === item.id ? null : item;
+    setSelectedItem(newSelectedItem);
+
+    // 최대값 계산
+    let newMaxValue: number | null = null;
+    if (newSelectedItem && config.conditionalInput.maxValueField) {
+      const val = newSelectedItem[config.conditionalInput.maxValueField];
+      newMaxValue = typeof val === "number" ? val : parseFloat(val) || null;
+    }
+
+    onSelectionChange(newSelectedItem, newMaxValue);
+  };
+
+  // 컬럼 라벨 가져오기
+  const getColumnLabel = (columnName: string): string => {
+    return config.lookup.columnLabels?.[columnName] || columnName;
+  };
+
+  // 표시할 컬럼 목록
+  const displayColumns = config.lookup.displayColumns || [];
+
+  // 요약 정보 표시용 선택 상태
+  const summaryText = useMemo(() => {
+    if (!selectedItem) return null;
+    return getSelectionSummary();
+  }, [selectedItem, getSelectionSummary]);
+
+  // linkValue가 없으면 렌더링하지 않음
+  if (!linkValue) {
+    return null;
+  }
+
+  // 인라인 모드 렌더링
+  if (config.ui?.expandMode === "inline" || !config.ui?.expandMode) {
+    return (
+      <div className={cn("w-full", className)}>
+        {/* 토글 버튼 및 요약 */}
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              const willExpand = !isExpanded;
+              setIsExpanded(willExpand);
+              if (willExpand) {
+                refetch(); // 펼칠 때 데이터 재조회
+              }
+            }}
+            disabled={disabled || isLoading}
+            className="h-7 gap-1 px-2 text-xs"
+          >
+            {isLoading ? (
+              <Loader2 className="h-3 w-3 animate-spin" />
+            ) : isExpanded ? (
+              <ChevronUp className="h-3 w-3" />
+            ) : (
+              <ChevronDown className="h-3 w-3" />
+            )}
+            <Package className="h-3 w-3" />
+            <span>재고 조회</span>
+            {data.length > 0 && <span className="text-muted-foreground">({data.length})</span>}
+          </Button>
+
+          {/* 선택 요약 표시 */}
+          {selectedItem && summaryText && (
+            <div className="flex items-center gap-1 text-xs">
+              <Check className="h-3 w-3 text-green-600" />
+              <span className="text-green-700">{summaryText}</span>
+            </div>
+          )}
+        </div>
+
+        {/* 확장된 패널 */}
+        {isExpanded && (
+          <div
+            className="mt-2 rounded-md border bg-gray-50"
+            style={{ maxHeight: config.ui?.maxHeight || "150px", overflowY: "auto" }}
+          >
+            {/* 에러 상태 */}
+            {error && (
+              <div className="flex items-center gap-2 p-3 text-xs text-red-600">
+                <AlertCircle className="h-4 w-4" />
+                <span>{error}</span>
+                <Button type="button" variant="ghost" size="sm" onClick={refetch} className="ml-auto h-6 text-xs">
+                  재시도
+                </Button>
+              </div>
+            )}
+
+            {/* 로딩 상태 */}
+            {isLoading && (
+              <div className="flex items-center justify-center gap-2 p-4 text-xs text-gray-500">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                <span>조회 중...</span>
+              </div>
+            )}
+
+            {/* 데이터 없음 */}
+            {!isLoading && !error && data.length === 0 && (
+              <div className="p-4 text-center text-xs text-gray-500">
+                {config.ui?.emptyMessage || "재고 데이터가 없습니다"}
+              </div>
+            )}
+
+            {/* 데이터 테이블 */}
+            {!isLoading && !error && data.length > 0 && (
+              <table className="w-full text-xs">
+                <thead className="sticky top-0 bg-gray-100">
+                  <tr>
+                    <th className="w-8 p-2 text-center">선택</th>
+                    {displayColumns.map((col) => (
+                      <th key={col} className="p-2 text-left font-medium">
+                        {getColumnLabel(col)}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {data.map((item, idx) => {
+                    const isSelected = selectedItem?.id === item.id;
+                    return (
+                      <tr
+                        key={item.id || idx}
+                        onClick={() => handleSelect(item)}
+                        className={cn(
+                          "cursor-pointer border-t transition-colors",
+                          isSelected ? "bg-blue-50" : "hover:bg-gray-100",
+                          disabled && "cursor-not-allowed opacity-50",
+                        )}
+                      >
+                        <td className="p-2 text-center">
+                          <div
+                            className={cn(
+                              "mx-auto flex h-4 w-4 items-center justify-center rounded-full border",
+                              isSelected ? "border-blue-600 bg-blue-600" : "border-gray-300",
+                            )}
+                          >
+                            {isSelected && <Check className="h-3 w-3 text-white" />}
+                          </div>
+                        </td>
+                        {displayColumns.map((col) => (
+                          <td key={col} className="p-2">
+                            {item[col] ?? "-"}
+                          </td>
+                        ))}
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            )}
+          </div>
+        )}
+
+        {/* 필수 선택 안내 */}
+        {!isInputEnabled && selectedItem && config.selection.requiredFields.length > 0 && (
+          <p className="mt-1 text-[10px] text-amber-600">
+            {config.selection.requiredFields.map((f) => getColumnLabel(f)).join(", ")}을(를) 선택해주세요
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  // 모달 모드 렌더링
+  if (config.ui?.expandMode === "modal") {
+    return (
+      <div className={cn("w-full", className)}>
+        {/* 재고 조회 버튼 및 요약 */}
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              setIsExpanded(true);
+              refetch(); // 모달 열 때 데이터 재조회
+            }}
+            disabled={disabled || isLoading}
+            className="h-7 gap-1 px-2 text-xs"
+          >
+            {isLoading ? (
+              <Loader2 className="h-3 w-3 animate-spin" />
+            ) : (
+              <Search className="h-3 w-3" />
+            )}
+            <Package className="h-3 w-3" />
+            <span>재고 조회</span>
+            {data.length > 0 && <span className="text-muted-foreground">({data.length})</span>}
+          </Button>
+
+          {/* 선택 요약 표시 */}
+          {selectedItem && summaryText && (
+            <div className="flex items-center gap-1 text-xs">
+              <Check className="h-3 w-3 text-green-600" />
+              <span className="text-green-700">{summaryText}</span>
+            </div>
+          )}
+        </div>
+
+        {/* 필수 선택 안내 */}
+        {!isInputEnabled && selectedItem && config.selection.requiredFields.length > 0 && (
+          <p className="mt-1 text-[10px] text-amber-600">
+            {config.selection.requiredFields.map((f) => getColumnLabel(f)).join(", ")}을(를) 선택해주세요
+          </p>
+        )}
+
+        {/* 모달 */}
+        <Dialog open={isExpanded} onOpenChange={setIsExpanded}>
+          <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+            <DialogHeader>
+              <DialogTitle className="text-base sm:text-lg">재고 현황</DialogTitle>
+              <DialogDescription className="text-xs sm:text-sm">
+                출고할 재고를 선택하세요. 창고/위치별 재고 수량을 확인할 수 있습니다.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div
+              className="rounded-md border"
+              style={{ maxHeight: config.ui?.maxHeight || "300px", overflowY: "auto" }}
+            >
+              {/* 에러 상태 */}
+              {error && (
+                <div className="flex items-center gap-2 p-3 text-xs text-red-600">
+                  <AlertCircle className="h-4 w-4" />
+                  <span>{error}</span>
+                  <Button type="button" variant="ghost" size="sm" onClick={refetch} className="ml-auto h-6 text-xs">
+                    재시도
+                  </Button>
+                </div>
+              )}
+
+              {/* 로딩 상태 */}
+              {isLoading && (
+                <div className="flex items-center justify-center gap-2 p-8 text-sm text-gray-500">
+                  <Loader2 className="h-5 w-5 animate-spin" />
+                  <span>재고 조회 중...</span>
+                </div>
+              )}
+
+              {/* 데이터 없음 */}
+              {!isLoading && !error && data.length === 0 && (
+                <div className="p-8 text-center text-sm text-gray-500">
+                  {config.ui?.emptyMessage || "해당 품목의 재고가 없습니다"}
+                </div>
+              )}
+
+              {/* 데이터 테이블 */}
+              {!isLoading && !error && data.length > 0 && (
+                <table className="w-full text-sm">
+                  <thead className="sticky top-0 bg-gray-100">
+                    <tr>
+                      <th className="w-12 p-3 text-center">선택</th>
+                      {displayColumns.map((col) => (
+                        <th key={col} className="p-3 text-left font-medium">
+                          {getColumnLabel(col)}
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {data.map((item, idx) => {
+                      const isSelected = selectedItem?.id === item.id;
+                      return (
+                        <tr
+                          key={item.id || idx}
+                          onClick={() => handleSelect(item)}
+                          className={cn(
+                            "cursor-pointer border-t transition-colors",
+                            isSelected ? "bg-blue-50" : "hover:bg-gray-50",
+                            disabled && "cursor-not-allowed opacity-50",
+                          )}
+                        >
+                          <td className="p-3 text-center">
+                            <div
+                              className={cn(
+                                "mx-auto flex h-5 w-5 items-center justify-center rounded-full border-2",
+                                isSelected ? "border-blue-600 bg-blue-600" : "border-gray-300",
+                              )}
+                            >
+                              {isSelected && <Check className="h-3 w-3 text-white" />}
+                            </div>
+                          </td>
+                          {displayColumns.map((col) => (
+                            <td key={col} className="p-3">
+                              {item[col] ?? "-"}
+                            </td>
+                          ))}
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              )}
+            </div>
+
+            <DialogFooter className="gap-2 sm:gap-0">
+              <Button
+                variant="outline"
+                onClick={() => setIsExpanded(false)}
+                className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+              >
+                닫기
+              </Button>
+              <Button
+                onClick={() => setIsExpanded(false)}
+                disabled={!selectedItem}
+                className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+              >
+                선택 완료
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  }
+
+  // 기본값: inline 모드로 폴백 (설정이 없거나 알 수 없는 모드인 경우)
+  return (
+    <div className={cn("w-full", className)}>
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => {
+            const willExpand = !isExpanded;
+            setIsExpanded(willExpand);
+            if (willExpand) {
+              refetch(); // 펼칠 때 데이터 재조회
+            }
+          }}
+          disabled={disabled || isLoading}
+          className="h-7 gap-1 px-2 text-xs"
+        >
+          {isLoading ? (
+            <Loader2 className="h-3 w-3 animate-spin" />
+          ) : isExpanded ? (
+            <ChevronUp className="h-3 w-3" />
+          ) : (
+            <ChevronDown className="h-3 w-3" />
+          )}
+          <Package className="h-3 w-3" />
+          <span>재고 조회</span>
+          {data.length > 0 && <span className="text-muted-foreground">({data.length})</span>}
+        </Button>
+        {selectedItem && summaryText && (
+          <div className="flex items-center gap-1 text-xs">
+            <Check className="h-3 w-3 text-green-600" />
+            <span className="text-green-700">{summaryText}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+SubDataLookupPanel.displayName = "SubDataLookupPanel";
diff --git a/frontend/lib/registry/components/repeater-field-group/useSubDataLookup.ts b/frontend/lib/registry/components/repeater-field-group/useSubDataLookup.ts
new file mode 100644
index 00000000..b2c44e3d
--- /dev/null
+++ b/frontend/lib/registry/components/repeater-field-group/useSubDataLookup.ts
@@ -0,0 +1,227 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { SubDataLookupConfig, SubDataState } from "@/types/repeater";
+
+const LOG_PREFIX = {
+  INFO: "[SubDataLookup]",
+  DEBUG: "[SubDataLookup]",
+  WARN: "[SubDataLookup]",
+  ERROR: "[SubDataLookup]",
+};
+
+export interface UseSubDataLookupProps {
+  config: SubDataLookupConfig;
+  linkValue: string | number | null; // 상위 항목의 연결 값 (예: item_code)
+  itemIndex: number; // 상위 항목 인덱스
+  enabled?: boolean; // 기능 활성화 여부
+}
+
+export interface UseSubDataLookupReturn {
+  data: any[]; // 조회된 하위 데이터
+  isLoading: boolean; // 로딩 상태
+  error: string | null; // 에러 메시지
+  selectedItem: any | null; // 선택된 하위 항목
+  setSelectedItem: (item: any | null) => void; // 선택 항목 설정
+  isInputEnabled: boolean; // 조건부 입력 활성화 여부
+  maxValue: number | null; // 최대 입력 가능 값
+  isExpanded: boolean; // 확장 상태
+  setIsExpanded: (expanded: boolean) => void; // 확장 상태 설정
+  refetch: () => void; // 데이터 재조회
+  getSelectionSummary: () => string; // 선택 요약 텍스트
+}
+
+/**
+ * 하위 데이터 조회 훅
+ * 품목 선택 시 재고/단가 등 관련 데이터를 조회하고 관리
+ */
+export function useSubDataLookup(props: UseSubDataLookupProps): UseSubDataLookupReturn {
+  const { config, linkValue, itemIndex, enabled = true } = props;
+
+  // 상태
+  const [data, setData] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedItem, setSelectedItem] = useState<any | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // 이전 linkValue 추적 (중복 호출 방지)
+  const prevLinkValueRef = useRef<string | number | null>(null);
+
+  // 데이터 조회 함수
+  const fetchData = useCallback(async () => {
+    // 비활성화 또는 linkValue 없으면 스킵
+    if (!enabled || !config?.enabled || !linkValue) {
+      console.log(`${LOG_PREFIX.DEBUG} 조회 스킵:`, {
+        enabled,
+        configEnabled: config?.enabled,
+        linkValue,
+        itemIndex,
+      });
+      setData([]);
+      setSelectedItem(null);
+      return;
+    }
+
+    const { tableName, linkColumn, additionalFilters } = config.lookup;
+
+    if (!tableName || !linkColumn) {
+      console.warn(`${LOG_PREFIX.WARN} 필수 설정 누락:`, { tableName, linkColumn });
+      return;
+    }
+
+    console.log(`${LOG_PREFIX.INFO} 하위 데이터 조회 시작:`, {
+      tableName,
+      linkColumn,
+      linkValue,
+      itemIndex,
+    });
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // 검색 조건 구성 - 정확한 값 매칭을 위해 equals 연산자 사용
+      const searchCondition: Record<string, any> = {
+        [linkColumn]: { value: linkValue, operator: "equals" },
+        ...additionalFilters,
+      };
+
+      console.log(`${LOG_PREFIX.DEBUG} API 요청 조건:`, {
+        tableName,
+        linkColumn,
+        linkValue,
+        searchCondition,
+      });
+
+      const response = await apiClient.post(`/table-management/tables/${tableName}/data`, {
+        page: 1,
+        size: 100,
+        search: searchCondition,
+        autoFilter: { enabled: true },
+      });
+
+      if (response.data?.success) {
+        const items = response.data?.data?.data || response.data?.data || [];
+        console.log(`${LOG_PREFIX.DEBUG} API 응답:`, {
+          dataCount: items.length,
+          firstItem: items[0],
+          tableName,
+        });
+        setData(items);
+      } else {
+        console.warn(`${LOG_PREFIX.WARN} API 응답 실패:`, response.data);
+        setData([]);
+        setError("데이터 조회에 실패했습니다");
+      }
+    } catch (err: any) {
+      console.error(`${LOG_PREFIX.ERROR} 하위 데이터 조회 실패:`, {
+        error: err.message,
+        config,
+        linkValue,
+      });
+      setError(err.message || "데이터 조회 중 오류가 발생했습니다");
+      setData([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [enabled, config, linkValue, itemIndex]);
+
+  // linkValue 변경 시 데이터 조회
+  useEffect(() => {
+    // 같은 값이면 스킵
+    if (prevLinkValueRef.current === linkValue) {
+      return;
+    }
+    prevLinkValueRef.current = linkValue;
+
+    // linkValue가 없으면 초기화
+    if (!linkValue) {
+      setData([]);
+      setSelectedItem(null);
+      setIsExpanded(false);
+      return;
+    }
+
+    fetchData();
+  }, [linkValue, fetchData]);
+
+  // 조건부 입력 활성화 여부 계산
+  const isInputEnabled = useCallback((): boolean => {
+    if (!config?.enabled || !selectedItem) {
+      return false;
+    }
+
+    const { requiredFields, requiredMode = "all" } = config.selection;
+
+    if (!requiredFields || requiredFields.length === 0) {
+      // 필수 필드가 없으면 선택만 하면 활성화
+      return true;
+    }
+
+    // 선택된 항목에서 필수 필드 값 확인
+    if (requiredMode === "any") {
+      // 하나라도 있으면 OK
+      return requiredFields.some((field) => {
+        const value = selectedItem[field];
+        return value !== undefined && value !== null && value !== "";
+      });
+    } else {
+      // 모두 있어야 OK
+      return requiredFields.every((field) => {
+        const value = selectedItem[field];
+        return value !== undefined && value !== null && value !== "";
+      });
+    }
+  }, [config, selectedItem]);
+
+  // 최대값 계산
+  const getMaxValue = useCallback((): number | null => {
+    if (!config?.enabled || !selectedItem) {
+      return null;
+    }
+
+    const { maxValueField } = config.conditionalInput;
+    if (!maxValueField) {
+      return null;
+    }
+
+    const maxValue = selectedItem[maxValueField];
+    return typeof maxValue === "number" ? maxValue : parseFloat(maxValue) || null;
+  }, [config, selectedItem]);
+
+  // 선택 요약 텍스트 생성
+  const getSelectionSummary = useCallback((): string => {
+    if (!selectedItem) {
+      return "선택 안됨";
+    }
+
+    const { displayColumns, columnLabels } = config.lookup;
+    const parts: string[] = [];
+
+    displayColumns.forEach((col) => {
+      const value = selectedItem[col];
+      if (value !== undefined && value !== null && value !== "") {
+        const label = columnLabels?.[col] || col;
+        parts.push(`${label}: ${value}`);
+      }
+    });
+
+    return parts.length > 0 ? parts.join(", ") : "선택됨";
+  }, [selectedItem, config?.lookup]);
+
+  return {
+    data,
+    isLoading,
+    error,
+    selectedItem,
+    setSelectedItem,
+    isInputEnabled: isInputEnabled(),
+    maxValue: getMaxValue(),
+    isExpanded,
+    setIsExpanded,
+    refetch: fetchData,
+    getSelectionSummary,
+  };
+}
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
index a84c90fd..50f7c41b 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -32,13 +32,11 @@ import {
   DialogFooter,
   DialogDescription,
 } from "@/components/ui/dialog";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Label } from "@/components/ui/label";
 import { useTableOptions } from "@/contexts/TableOptionsContext";
 import { TableFilter, ColumnVisibility, GroupSumConfig } from "@/types/table-options";
 import { useAuth } from "@/hooks/useAuth";
 import { useSplitPanel } from "./SplitPanelContext";
-import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
 
 export interface SplitPanelLayoutComponentProps extends ComponentRendererProps {
   // 추가 props
@@ -59,8 +57,6 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const componentConfig = (component.componentConfig || {}) as SplitPanelLayoutConfig;
   // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 사용 가능)
   const companyCode = (props as any).companyCode as string | undefined;
-  // 🌐 다국어 컨텍스트
-  const { getTranslatedText } = useScreenMultiLang();
 
   // 기본 설정값
   const splitRatio = componentConfig.splitRatio || 30;
@@ -84,7 +80,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   // "테이블명.컬럼명" 형식을 "원본컬럼_조인컬럼명" 형식으로 변환하여 데이터 접근
   const getEntityJoinValue = useCallback(
     (item: any, columnName: string, entityColumnMap?: Record<string, string>): any => {
-      // 직접 매칭 시도
+      // 🆕 백엔드가 제공하는 _label 필드 우선 사용
+      // 백엔드는 "표시 컬럼"이 설정된 경우 columnName_label을 자동 생성
+      const labelKey = `${columnName}_label`;
+      if (item[labelKey] !== undefined && item[labelKey] !== "" && item[labelKey] !== null) {
+        return item[labelKey];
+      }
+
+      // 직접 매칭 시도 (JOIN된 값이 없으면 원본 값 반환)
       if (item[columnName] !== undefined) {
         return item[columnName];
       }
@@ -141,13 +144,6 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         if (item[underscoreKey] !== undefined) {
           return item[underscoreKey];
         }
-
-        // 6️⃣ 🆕 모든 키에서 _fieldName으로 끝나는 키 찾기
-        // 예: partner_id_customer_name (프론트엔드가 customer_id로 추론했지만 실제는 partner_id인 경우)
-        const matchingKey = Object.keys(item).find((key) => key.endsWith(`_${fieldName}`));
-        if (matchingKey && item[matchingKey] !== undefined) {
-          return item[matchingKey];
-        }
       }
 
       return undefined;
@@ -175,11 +171,6 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const [rightSearchQuery, setRightSearchQuery] = useState("");
   const [isLoadingLeft, setIsLoadingLeft] = useState(false);
   const [isLoadingRight, setIsLoadingRight] = useState(false);
-
-  // 🆕 추가 탭 관련 상태
-  const [activeTabIndex, setActiveTabIndex] = useState(0); // 0 = 기본 탭 (우측 패널), 1+ = 추가 탭
-  const [tabsData, setTabsData] = useState<Record<number, any[]>>({}); // 탭별 데이터 캐시
-  const [tabsLoading, setTabsLoading] = useState<Record<number, boolean>>({}); // 탭별 로딩 상태
   const [rightTableColumns, setRightTableColumns] = useState<any[]>([]); // 우측 테이블 컬럼 정보
   const [expandedItems, setExpandedItems] = useState<Set<any>>(new Set()); // 펼쳐진 항목들
   const [leftColumnLabels, setLeftColumnLabels] = useState<Record<string, string>>({}); // 좌측 컬럼 라벨
@@ -190,10 +181,6 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const [rightCategoryMappings, setRightCategoryMappings] = useState<
     Record<string, Record<string, { label: string; color?: string }>>
   >({}); // 우측 카테고리 매핑
-
-  // 카테고리 코드 라벨 캐시 (CATEGORY_* 코드 -> 라벨)
-  const [categoryCodeLabels, setCategoryCodeLabels] = useState<Record<string, string>>({});
-
   const { toast } = useToast();
 
   // 추가 모달 상태
@@ -227,12 +214,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const splitPanelId = `split-panel-${component.id}`;
 
   // 디버깅: Context 연결 상태 확인
-  // console.log("🔗 [SplitPanelLayout] Context 연결 상태:", {
-  //   componentId: component.id,
-  //   splitPanelId,
-  //   hasRegisterFunc: typeof ctxRegisterSplitPanel === "function",
-  //   splitPanelsSize: splitPanelContext.splitPanels?.size ?? "없음",
-  // });
+  console.log("🔗 [SplitPanelLayout] Context 연결 상태:", {
+    componentId: component.id,
+    splitPanelId,
+    hasRegisterFunc: typeof ctxRegisterSplitPanel === "function",
+    splitPanelsSize: splitPanelContext.splitPanels?.size ?? "없음",
+  });
 
   // Context에 분할 패널 등록 (좌표 정보 포함) - 마운트 시 1회만 실행
   const ctxRegisterRef = useRef(ctxRegisterSplitPanel);
@@ -257,15 +244,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       isDragging: false,
     };
 
-    // console.log("📦 [SplitPanelLayout] Context에 분할 패널 등록:", {
-    //   splitPanelId,
-    //   panelInfo,
-    // });
+    console.log("📦 [SplitPanelLayout] Context에 분할 패널 등록:", {
+      splitPanelId,
+      panelInfo,
+    });
 
     ctxRegisterRef.current(splitPanelId, panelInfo);
 
     return () => {
-      // console.log("📦 [SplitPanelLayout] Context에서 분할 패널 해제:", splitPanelId);
+      console.log("📦 [SplitPanelLayout] Context에서 분할 패널 해제:", splitPanelId);
       ctxUnregisterRef.current(splitPanelId);
     };
     // 마운트/언마운트 시에만 실행, 위치/크기 변경은 별도 업데이트로 처리
@@ -333,11 +320,11 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
   // 🆕 그룹별 합산된 데이터 계산
   const summedLeftData = useMemo(() => {
-    // console.log("🔍 [그룹합산] leftGroupSumConfig:", leftGroupSumConfig);
+    console.log("🔍 [그룹합산] leftGroupSumConfig:", leftGroupSumConfig);
 
     // 그룹핑이 비활성화되었거나 그룹 기준 컬럼이 없으면 원본 데이터 반환
     if (!leftGroupSumConfig?.enabled || !leftGroupSumConfig?.groupByColumn) {
-      // console.log("🔍 [그룹합산] 그룹핑 비활성화 - 원본 데이터 반환");
+      console.log("🔍 [그룹합산] 그룹핑 비활성화 - 원본 데이터 반환");
       return leftData;
     }
 
@@ -625,41 +612,6 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     return result;
   }, []);
 
-  // 🆕 간단한 값 포맷팅 함수 (추가 탭용)
-  const formatValue = useCallback(
-    (
-      value: any,
-      format?: {
-        type?: "number" | "currency" | "date" | "text";
-        thousandSeparator?: boolean;
-        decimalPlaces?: number;
-        prefix?: string;
-        suffix?: string;
-        dateFormat?: string;
-      },
-    ): string => {
-      if (value === null || value === undefined) return "-";
-
-      // 날짜 포맷
-      if (format?.type === "date" || format?.dateFormat) {
-        return formatDateValue(value, format?.dateFormat || "YYYY-MM-DD");
-      }
-
-      // 숫자 포맷
-      if (
-        format?.type === "number" ||
-        format?.type === "currency" ||
-        format?.thousandSeparator ||
-        format?.decimalPlaces !== undefined
-      ) {
-        return formatNumberValue(value, format);
-      }
-
-      return String(value);
-    },
-    [formatDateValue, formatNumberValue],
-  );
-
   // 셀 값 포맷팅 함수 (카테고리 타입 처리 + 날짜/숫자 포맷)
   const formatCellValue = useCallback(
     (
@@ -722,14 +674,6 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         );
       }
 
-      // 🆕 카테고리 코드 패턴 감지 (CATEGORY_로 시작하는 값)
-      if (typeof value === "string" && value.startsWith("CATEGORY_")) {
-        const cachedLabel = categoryCodeLabels[value];
-        if (cachedLabel) {
-          return <span className="text-sm">{cachedLabel}</span>;
-        }
-      }
-
       // 🆕 자동 날짜 감지 (ISO 8601 형식 또는 Date 객체)
       if (typeof value === "string" && value.match(/^\d{4}-\d{2}-\d{2}(T|\s)/)) {
         return formatDateValue(value, "YYYY-MM-DD");
@@ -751,7 +695,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       // 일반 값
       return String(value);
     },
-    [formatDateValue, formatNumberValue, categoryCodeLabels],
+    [formatDateValue, formatNumberValue],
   );
 
   // 좌측 데이터 로드
@@ -821,8 +765,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         }
       });
 
-      // console.log("🔗 [분할패널] additionalJoinColumns:", additionalJoinColumns);
-      // console.log("🔗 [분할패널] configuredColumns:", configuredColumns);
+      console.log("🔗 [분할패널] additionalJoinColumns:", additionalJoinColumns);
+      console.log("🔗 [분할패널] configuredColumns:", configuredColumns);
 
       const result = await entityJoinApi.getTableDataWithJoins(leftTableName, {
         page: 1,
@@ -835,10 +779,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       });
 
       // 🔍 디버깅: API 응답 데이터의 키 확인
-      // if (result.data && result.data.length > 0) {
-      //   console.log("🔗 [분할패널] API 응답 첫 번째 데이터 키:", Object.keys(result.data[0]));
-      //   console.log("🔗 [분할패널] API 응답 첫 번째 데이터:", result.data[0]);
-      // }
+      if (result.data && result.data.length > 0) {
+        console.log("🔗 [분할패널] API 응답 첫 번째 데이터 키:", Object.keys(result.data[0]));
+        console.log("🔗 [분할패널] API 응답 첫 번째 데이터:", result.data[0]);
+      }
 
       // 가나다순 정렬 (좌측 패널의 표시 컬럼 기준)
       const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
@@ -897,8 +841,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             companyCodeOverride: companyCode, // 🆕 프리뷰용 회사 코드 오버라이드
           });
 
-          // result.data가 EntityJoinResponse의 실제 배열 필드
-          const detail = result.data && result.data.length > 0 ? result.data[0] : null;
+          const detail = result.items && result.items.length > 0 ? result.items[0] : null;
           setRightData(detail);
         } else if (relationshipType === "join") {
           // 조인 모드: 다른 테이블의 관련 데이터 (여러 개)
@@ -968,68 +911,26 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             return;
           }
 
-          // 🆕 엔티티 관계 자동 감지 로직 개선
-          // 1. 설정된 keys가 있으면 사용
-          // 2. 없으면 테이블 타입관리에서 정의된 엔티티 관계를 자동으로 조회
-          let effectiveKeys = keys || [];
-
-          if (effectiveKeys.length === 0 && leftTable && rightTableName) {
-            // 엔티티 관계 자동 감지
-            console.log("🔍 [분할패널] 엔티티 관계 자동 감지 시작:", leftTable, "->", rightTableName);
-            const { tableManagementApi } = await import("@/lib/api/tableManagement");
-            const relResponse = await tableManagementApi.getTableEntityRelations(leftTable, rightTableName);
-
-            if (relResponse.success && relResponse.data?.relations && relResponse.data.relations.length > 0) {
-              effectiveKeys = relResponse.data.relations.map((rel) => ({
-                leftColumn: rel.leftColumn,
-                rightColumn: rel.rightColumn,
-              }));
-              console.log("✅ [분할패널] 자동 감지된 관계:", effectiveKeys);
-            }
-          }
-
-          if (effectiveKeys.length > 0 && leftTable) {
+          // 🆕 복합키 지원
+          if (keys && keys.length > 0 && leftTable) {
             // 복합키: 여러 조건으로 필터링
             const { entityJoinApi } = await import("@/lib/api/entityJoin");
 
-            // 복합키 조건 생성 (다중 값 지원)
-            // 🆕 항상 배열로 전달하여 백엔드에서 다중 값 컬럼 검색을 지원하도록 함
-            // 예: 좌측에서 "2"를 선택해도, 우측에서 "2,3"을 가진 행이 표시되도록
+            // 복합키 조건 생성
             const searchConditions: Record<string, any> = {};
-            effectiveKeys.forEach((key) => {
+            keys.forEach((key) => {
               if (key.leftColumn && key.rightColumn && leftItem[key.leftColumn] !== undefined) {
-                const leftValue = leftItem[key.leftColumn];
-                // 다중 값 지원: 모든 값을 배열로 변환하여 다중 값 컬럼 검색 활성화
-                if (typeof leftValue === "string") {
-                  if (leftValue.includes(",")) {
-                    // "2,3" 형태면 분리해서 배열로
-                    const values = leftValue
-                      .split(",")
-                      .map((v: string) => v.trim())
-                      .filter((v: string) => v);
-                    searchConditions[key.rightColumn] = values;
-                    console.log("🔗 [분할패널] 다중 값 검색 (분리):", key.rightColumn, "=", values);
-                  } else {
-                    // 단일 값도 배열로 변환 (우측에 "2,3" 같은 다중 값이 있을 수 있으므로)
-                    searchConditions[key.rightColumn] = [leftValue.trim()];
-                    console.log("🔗 [분할패널] 다중 값 검색 (단일):", key.rightColumn, "=", [leftValue.trim()]);
-                  }
-                } else {
-                  // 숫자나 다른 타입은 배열로 감싸기
-                  searchConditions[key.rightColumn] = [leftValue];
-                  console.log("🔗 [분할패널] 다중 값 검색 (기타):", key.rightColumn, "=", [leftValue]);
-                }
+                searchConditions[key.rightColumn] = leftItem[key.leftColumn];
               }
             });
 
             console.log("🔗 [분할패널] 복합키 조건:", searchConditions);
 
-            // 엔티티 조인 API로 데이터 조회 (🆕 deduplication 전달)
+            // 엔티티 조인 API로 데이터 조회
             const result = await entityJoinApi.getTableDataWithJoins(rightTableName, {
               search: searchConditions,
               enableEntityJoin: true,
               size: 1000,
-              deduplication: componentConfig.rightPanel?.deduplication, // 🆕 중복 제거 설정 전달
               companyCodeOverride: companyCode, // 🆕 프리뷰용 회사 코드 오버라이드
             });
 
@@ -1038,14 +939,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             // 추가 dataFilter 적용
             let filteredData = result.data || [];
             const dataFilter = componentConfig.rightPanel?.dataFilter;
-            // filters 또는 conditions 배열 지원 (DataFilterConfigPanel은 filters 사용)
-            const filterConditions = dataFilter?.filters || dataFilter?.conditions || [];
-            if (dataFilter?.enabled && filterConditions.length > 0) {
+            if (dataFilter?.enabled && dataFilter.conditions?.length > 0) {
               filteredData = filteredData.filter((item: any) => {
-                return filterConditions.every((cond: any) => {
-                  // columnName 또는 column 지원
-                  const columnName = cond.columnName || cond.column;
-                  const value = item[columnName];
+                return dataFilter.conditions.every((cond: any) => {
+                  const value = item[cond.column];
                   const condValue = cond.value;
                   switch (cond.operator) {
                     case "equals":
@@ -1054,12 +951,6 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                       return value !== condValue;
                     case "contains":
                       return String(value).includes(String(condValue));
-                    case "is_null":
-                    case "NULL":
-                      return value === null || value === undefined || value === "";
-                    case "is_not_null":
-                    case "NOT NULL":
-                      return value !== null && value !== undefined && value !== "";
                     default:
                       return true;
                   }
@@ -1069,7 +960,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
             setRightData(filteredData);
           } else {
-            // 단일키 (하위 호환성) 또는 관계를 찾지 못한 경우
+            // 단일키 (하위 호환성)
             const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
             const rightColumn = componentConfig.rightPanel?.relation?.foreignKey;
 
@@ -1087,9 +978,6 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 componentConfig.rightPanel?.deduplication, // 🆕 중복 제거 설정 전달
               );
               setRightData(joinedData || []); // 모든 관련 레코드 (배열)
-            } else {
-              console.warn("⚠️ [분할패널] 테이블 관계를 찾을 수 없습니다:", leftTable, "->", rightTableName);
-              setRightData([]);
             }
           }
         }
@@ -1113,294 +1001,23 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     ],
   );
 
-  // 🆕 카테고리 코드 라벨 로드 (rightData 변경 시)
-  useEffect(() => {
-    const loadCategoryCodeLabels = async () => {
-      if (!rightData) return;
-
-      const categoryCodes = new Set<string>();
-
-      // rightData가 배열인 경우 (조인 모드)
-      const dataArray = Array.isArray(rightData) ? rightData : [rightData];
-
-      dataArray.forEach((row: Record<string, any>) => {
-        if (row) {
-          Object.values(row).forEach((value) => {
-            if (typeof value === "string" && value.startsWith("CATEGORY_")) {
-              categoryCodes.add(value);
-            }
-          });
-        }
-      });
-
-      // 새로운 카테고리 코드만 필터링 (이미 캐시된 것 제외)
-      const newCodes = Array.from(categoryCodes).filter((code) => !categoryCodeLabels[code]);
-
-      if (newCodes.length > 0) {
-        try {
-          console.log("🏷️ [SplitPanel] 카테고리 코드 라벨 조회:", newCodes);
-          const response = await apiClient.post("/table-categories/labels-by-codes", { valueCodes: newCodes });
-          if (response.data.success && response.data.data) {
-            console.log("🏷️ [SplitPanel] 카테고리 라벨 조회 결과:", response.data.data);
-            setCategoryCodeLabels((prev) => ({
-              ...prev,
-              ...response.data.data,
-            }));
-          }
-        } catch (error) {
-          console.error("카테고리 라벨 조회 실패:", error);
-        }
-      }
-    };
-
-    loadCategoryCodeLabels();
-  }, [rightData]);
-
-  // 🆕 추가 탭 데이터 로딩 함수
-  const loadTabData = useCallback(
-    async (tabIndex: number, leftItem: any) => {
-      console.log(`📥 loadTabData 호출됨: tabIndex=${tabIndex}`, {
-        leftItem: leftItem ? Object.keys(leftItem) : null,
-        additionalTabs: componentConfig.rightPanel?.additionalTabs?.length,
-        isDesignMode,
-      });
-
-      const tabConfig = componentConfig.rightPanel?.additionalTabs?.[tabIndex - 1];
-
-      console.log("📥 tabConfig:", {
-        tabIndex,
-        configIndex: tabIndex - 1,
-        tabConfig: tabConfig
-          ? {
-              tableName: tabConfig.tableName,
-              relation: tabConfig.relation,
-              dataFilter: tabConfig.dataFilter,
-            }
-          : null,
-      });
-
-      if (!tabConfig || !leftItem || isDesignMode) {
-        console.log("⚠️ loadTabData 중단:", { hasTabConfig: !!tabConfig, hasLeftItem: !!leftItem, isDesignMode });
-        return;
-      }
-
-      const tabTableName = tabConfig.tableName;
-      if (!tabTableName) return;
-
-      setTabsLoading((prev) => ({ ...prev, [tabIndex]: true }));
-      try {
-        // 조인 키 확인
-        const keys = tabConfig.relation?.keys;
-        const leftColumn = tabConfig.relation?.leftColumn || keys?.[0]?.leftColumn;
-        const rightColumn = tabConfig.relation?.foreignKey || keys?.[0]?.rightColumn;
-
-        console.log(`🔑 [추가탭 ${tabIndex}] 조인 키 분석:`, {
-          hasRelation: !!tabConfig.relation,
-          keys,
-          leftColumn,
-          rightColumn,
-          willUseJoin: !!(leftColumn && rightColumn),
-        });
-
-        let resultData: any[] = [];
-
-        if (leftColumn && rightColumn) {
-          // 조인 조건이 있는 경우
-          const { entityJoinApi } = await import("@/lib/api/entityJoin");
-          const searchConditions: Record<string, any> = {};
-
-          if (keys && keys.length > 0) {
-            // 복합키
-            keys.forEach((key) => {
-              if (key.leftColumn && key.rightColumn && leftItem[key.leftColumn] !== undefined) {
-                // operator: "equals"를 추가하여 정확한 값 매칭 (entity 타입 컬럼에서 코드값으로 검색)
-                searchConditions[key.rightColumn] = {
-                  value: leftItem[key.leftColumn],
-                  operator: "equals",
-                };
-              }
-            });
-          } else {
-            // 단일키
-            const leftValue = leftItem[leftColumn];
-            if (leftValue !== undefined) {
-              // operator: "equals"를 추가하여 정확한 값 매칭 (entity 타입 컬럼에서 코드값으로 검색)
-              searchConditions[rightColumn] = {
-                value: leftValue,
-                operator: "equals",
-              };
-            }
-          }
-
-          console.log(`🔗 [추가탭 ${tabIndex}] 조회 조건:`, searchConditions);
-
-          const result = await entityJoinApi.getTableDataWithJoins(tabTableName, {
-            search: searchConditions,
-            enableEntityJoin: true,
-            size: 1000,
-          });
-
-          resultData = result.data || [];
-        } else {
-          // 조인 조건이 없는 경우: 전체 데이터 조회 (독립 탭)
-          console.log(`📋 [추가탭 ${tabIndex}] 조인 없이 전체 데이터 조회: ${tabTableName}`);
-          const { entityJoinApi } = await import("@/lib/api/entityJoin");
-          const result = await entityJoinApi.getTableDataWithJoins(tabTableName, {
-            enableEntityJoin: true,
-            size: 1000,
-          });
-          resultData = result.data || [];
-          console.log(`📋 [추가탭 ${tabIndex}] 전체 데이터 조회 결과:`, resultData.length);
-        }
-
-        // 데이터 필터 적용
-        const dataFilter = tabConfig.dataFilter;
-        // filters 또는 conditions 배열 지원 (DataFilterConfigPanel은 filters 사용)
-        const filterConditions = dataFilter?.filters || dataFilter?.conditions || [];
-
-        console.log(`🔍 [추가탭 ${tabIndex}] 필터 설정:`, {
-          enabled: dataFilter?.enabled,
-          filterConditions,
-          dataBeforeFilter: resultData.length,
-        });
-
-        if (dataFilter?.enabled && filterConditions.length > 0) {
-          const beforeCount = resultData.length;
-          resultData = resultData.filter((item: any) => {
-            return filterConditions.every((cond: any) => {
-              // columnName 또는 column 지원
-              const columnName = cond.columnName || cond.column;
-              const value = item[columnName];
-              const condValue = cond.value;
-
-              let result = true;
-              switch (cond.operator) {
-                case "equals":
-                  result = value === condValue;
-                  break;
-                case "notEquals":
-                  result = value !== condValue;
-                  break;
-                case "contains":
-                  result = String(value).includes(String(condValue));
-                  break;
-                case "is_null":
-                case "NULL":
-                  result = value === null || value === undefined || value === "";
-                  break;
-                case "is_not_null":
-                case "NOT NULL":
-                  result = value !== null && value !== undefined && value !== "";
-                  break;
-                default:
-                  result = true;
-              }
-
-              // 첫 5개 항목만 로그 출력
-              if (resultData.indexOf(item) < 5) {
-                console.log(`   필터 체크: ${columnName}=${value}, operator=${cond.operator}, result=${result}`);
-              }
-
-              return result;
-            });
-          });
-          console.log(`🔍 [추가탭 ${tabIndex}] 필터 적용 후: ${beforeCount} → ${resultData.length}`);
-        }
-
-        // 중복 제거 적용
-        const deduplication = tabConfig.deduplication;
-        if (deduplication?.enabled && deduplication.groupByColumn) {
-          const groupedMap = new Map<string, any>();
-          resultData.forEach((item) => {
-            const key = String(item[deduplication.groupByColumn] || "");
-            const existing = groupedMap.get(key);
-            if (!existing) {
-              groupedMap.set(key, item);
-            } else {
-              // keepStrategy에 따라 유지할 항목 결정
-              const sortCol = deduplication.sortColumn || "start_date";
-              const existingVal = existing[sortCol];
-              const newVal = item[sortCol];
-              if (deduplication.keepStrategy === "latest" && newVal > existingVal) {
-                groupedMap.set(key, item);
-              } else if (deduplication.keepStrategy === "earliest" && newVal < existingVal) {
-                groupedMap.set(key, item);
-              }
-            }
-          });
-          resultData = Array.from(groupedMap.values());
-        }
-
-        console.log(`🔗 [추가탭 ${tabIndex}] 결과 데이터:`, resultData.length);
-        setTabsData((prev) => ({ ...prev, [tabIndex]: resultData }));
-      } catch (error) {
-        console.error(`추가탭 ${tabIndex} 데이터 로드 실패:`, error);
-        toast({
-          title: "데이터 로드 실패",
-          description: "탭 데이터를 불러올 수 없습니다.",
-          variant: "destructive",
-        });
-      } finally {
-        setTabsLoading((prev) => ({ ...prev, [tabIndex]: false }));
-      }
-    },
-    [componentConfig.rightPanel?.additionalTabs, isDesignMode, toast],
-  );
-
   // 좌측 항목 선택 핸들러
   const handleLeftItemSelect = useCallback(
     (item: any) => {
       setSelectedLeftItem(item);
       setExpandedRightItems(new Set()); // 좌측 항목 변경 시 우측 확장 초기화
-      setTabsData({}); // 모든 탭 데이터 초기화
-
-      // 현재 활성 탭에 따라 데이터 로드
-      if (activeTabIndex === 0) {
-        loadRightData(item);
-      } else {
-        loadTabData(activeTabIndex, item);
-      }
+      loadRightData(item);
 
       // 🆕 modalDataStore에 선택된 좌측 항목 저장 (단일 선택)
       const leftTableName = componentConfig.leftPanel?.tableName;
       if (leftTableName && !isDesignMode) {
         import("@/stores/modalDataStore").then(({ useModalDataStore }) => {
           useModalDataStore.getState().setData(leftTableName, [item]);
-          // console.log(`✅ 분할 패널 좌측 선택: ${leftTableName}`, item);
+          console.log(`✅ 분할 패널 좌측 선택: ${leftTableName}`, item);
         });
       }
     },
-    [loadRightData, loadTabData, activeTabIndex, componentConfig.leftPanel?.tableName, isDesignMode],
-  );
-
-  // 🆕 탭 변경 핸들러
-  const handleTabChange = useCallback(
-    (newTabIndex: number) => {
-      console.log(`🔄 탭 변경: ${activeTabIndex} → ${newTabIndex}`, {
-        selectedLeftItem: !!selectedLeftItem,
-        tabsData: Object.keys(tabsData),
-        hasTabData: !!tabsData[newTabIndex],
-      });
-
-      setActiveTabIndex(newTabIndex);
-
-      // 선택된 좌측 항목이 있으면 해당 탭의 데이터 로드
-      if (selectedLeftItem) {
-        if (newTabIndex === 0) {
-          // 기본 탭: 우측 패널 데이터가 없으면 로드
-          if (!rightData || (Array.isArray(rightData) && rightData.length === 0)) {
-            loadRightData(selectedLeftItem);
-          }
-        } else {
-          // 추가 탭: 항상 새로 로드 (필터 설정 변경 반영을 위해)
-          console.log(`🔄 추가 탭 ${newTabIndex} 데이터 로드 (항상 새로고침)`);
-          loadTabData(newTabIndex, selectedLeftItem);
-        }
-      } else {
-        console.log("⚠️ 좌측 항목이 선택되지 않아 탭 데이터를 로드하지 않음");
-      }
-    },
-    [selectedLeftItem, rightData, tabsData, loadRightData, loadTabData, activeTabIndex],
+    [loadRightData, componentConfig.leftPanel?.tableName, isDesignMode],
   );
 
   // 우측 항목 확장/축소 토글
@@ -1594,7 +1211,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           }
         });
         setLeftColumnLabels(labels);
-        // console.log("✅ 좌측 컬럼 라벨 로드:", labels);
+        console.log("✅ 좌측 컬럼 라벨 로드:", labels);
       } catch (error) {
         console.error("좌측 테이블 컬럼 라벨 로드 실패:", error);
       }
@@ -1623,7 +1240,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           }
         });
         setRightColumnLabels(labels);
-        // console.log("✅ 우측 컬럼 라벨 로드:", labels);
+        console.log("✅ 우측 컬럼 라벨 로드:", labels);
       } catch (error) {
         console.error("우측 테이블 컬럼 정보 로드 실패:", error);
       }
@@ -1665,7 +1282,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 };
               });
               mappings[columnName] = valueMap;
-              // console.log(`✅ 좌측 카테고리 매핑 로드 [${columnName}]:`, valueMap);
+              console.log(`✅ 좌측 카테고리 매핑 로드 [${columnName}]:`, valueMap);
             }
           } catch (error) {
             console.error(`좌측 카테고리 값 조회 실패 [${columnName}]:`, error);
@@ -1703,7 +1320,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           }
         });
 
-        // console.log("🔍 우측 패널 카테고리 로드 대상 테이블:", Array.from(tablesToLoad));
+        console.log("🔍 우측 패널 카테고리 로드 대상 테이블:", Array.from(tablesToLoad));
 
         // 각 테이블에 대해 카테고리 매핑 로드
         for (const tableName of tablesToLoad) {
@@ -1796,22 +1413,36 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
   // 수정 버튼 핸들러
   const handleEditClick = useCallback(
-    async (panel: "left" | "right", item: any) => {
-      // 🆕 현재 활성 탭의 설정 가져오기
-      const currentTabConfig =
-        activeTabIndex === 0
-          ? componentConfig.rightPanel
-          : componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1];
+    (panel: "left" | "right", item: any) => {
       // 🆕 우측 패널 수정 버튼 설정 확인
-      if (panel === "right" && currentTabConfig?.editButton?.mode === "modal") {
-        const modalScreenId = currentTabConfig?.editButton?.modalScreenId;
+      if (panel === "right" && componentConfig.rightPanel?.editButton?.mode === "modal") {
+        const modalScreenId = componentConfig.rightPanel?.editButton?.modalScreenId;
 
         if (modalScreenId) {
           // 커스텀 모달 화면 열기
-          const rightTableName = currentTabConfig?.tableName || "";
+          const rightTableName = componentConfig.rightPanel?.tableName || "";
+
+          // Primary Key 찾기 (우선순위: id > ID > 첫 번째 필드)
+          let primaryKeyName = "id";
+          let primaryKeyValue: any;
+
+          if (item.id !== undefined && item.id !== null) {
+            primaryKeyName = "id";
+            primaryKeyValue = item.id;
+          } else if (item.ID !== undefined && item.ID !== null) {
+            primaryKeyName = "ID";
+            primaryKeyValue = item.ID;
+          } else {
+            // 첫 번째 필드를 Primary Key로 간주
+            const firstKey = Object.keys(item)[0];
+            primaryKeyName = firstKey;
+            primaryKeyValue = item[firstKey];
+          }
 
           console.log("✅ 수정 모달 열기:", {
             tableName: rightTableName,
+            primaryKeyName,
+            primaryKeyValue,
             screenId: modalScreenId,
             fullItem: item,
           });
@@ -1822,99 +1453,23 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           });
 
           // 🆕 groupByColumns 추출
-          const groupByColumns = currentTabConfig?.editButton?.groupByColumns || [];
+          const groupByColumns = componentConfig.rightPanel?.editButton?.groupByColumns || [];
 
           console.log("🔧 [SplitPanel] 수정 버튼 클릭 - groupByColumns 확인:", {
             groupByColumns,
-            editButtonConfig: currentTabConfig?.editButton,
+            editButtonConfig: componentConfig.rightPanel?.editButton,
             hasGroupByColumns: groupByColumns.length > 0,
           });
 
-          // 🆕 groupByColumns 기준으로 모든 관련 레코드 조회 (API 직접 호출)
-          let allRelatedRecords = [item]; // 기본값: 현재 아이템만
-
-          if (groupByColumns.length > 0) {
-            // groupByColumns 값으로 검색 조건 생성
-            const matchConditions: Record<string, any> = {};
-            groupByColumns.forEach((col: string) => {
-              if (item[col] !== undefined && item[col] !== null) {
-                matchConditions[col] = item[col];
-              }
-            });
-
-            console.log("🔍 [SplitPanel] 그룹 레코드 조회 시작:", {
-              테이블: rightTableName,
-              조건: matchConditions,
-            });
-
-            if (Object.keys(matchConditions).length > 0) {
-              // 🆕 deduplication 없이 원본 데이터 다시 조회 (API 직접 호출)
-              try {
-                const { entityJoinApi } = await import("@/lib/api/entityJoin");
-
-                // 🔧 dataFilter로 정확 매칭 조건 생성 (search는 LIKE 검색이라 부정확)
-                const exactMatchFilters = Object.entries(matchConditions).map(([key, value]) => ({
-                  id: `exact-${key}`,
-                  columnName: key,
-                  operator: "equals",
-                  value: value,
-                  valueType: "text",
-                }));
-
-                console.log("🔍 [SplitPanel] 정확 매칭 필터:", exactMatchFilters);
-
-                const result = await entityJoinApi.getTableDataWithJoins(rightTableName, {
-                  // search 대신 dataFilter 사용 (정확 매칭)
-                  dataFilter: {
-                    enabled: true,
-                    matchType: "all",
-                    filters: exactMatchFilters,
-                  },
-                  enableEntityJoin: true,
-                  size: 1000,
-                  // 🔧 명시적으로 deduplication 비활성화 (모든 레코드 가져오기)
-                  deduplication: { enabled: false, groupByColumn: "", keepStrategy: "latest" },
-                });
-
-                // 🔍 디버깅: API 응답 구조 확인
-                console.log("🔍 [SplitPanel] API 응답 전체:", result);
-                console.log("🔍 [SplitPanel] result.data:", result.data);
-                console.log("🔍 [SplitPanel] result 타입:", typeof result);
-
-                // result 자체가 배열일 수도 있음 (entityJoinApi 응답 구조에 따라)
-                const dataArray = Array.isArray(result) ? result : result.data || [];
-
-                if (dataArray.length > 0) {
-                  allRelatedRecords = dataArray;
-                  console.log("✅ [SplitPanel] 그룹 레코드 조회 완료:", {
-                    조건: matchConditions,
-                    결과수: allRelatedRecords.length,
-                    레코드들: allRelatedRecords.map((r: any) => ({
-                      id: r.id,
-                      supplier_item_code: r.supplier_item_code,
-                    })),
-                  });
-                } else {
-                  console.warn("⚠️ [SplitPanel] 그룹 레코드 조회 결과 없음, 현재 아이템만 사용");
-                }
-              } catch (error) {
-                console.error("❌ [SplitPanel] 그룹 레코드 조회 실패:", error);
-                allRelatedRecords = [item];
-              }
-            } else {
-              console.warn("⚠️ [SplitPanel] groupByColumns 값이 없음, 현재 아이템만 사용");
-            }
-          }
-
-          // 🔧 수정: URL 파라미터 대신 editData로 직접 전달
-          // 이렇게 하면 테이블의 Primary Key가 무엇이든 상관없이 데이터가 정확히 전달됨
+          // ScreenModal 열기 이벤트 발생 (URL 파라미터로 ID + groupByColumns 전달)
           window.dispatchEvent(
             new CustomEvent("openScreenModal", {
               detail: {
                 screenId: modalScreenId,
-                editData: allRelatedRecords, // 🆕 모든 관련 레코드 전달 (배열)
                 urlParams: {
-                  mode: "edit", // 🆕 수정 모드 표시
+                  mode: "edit",
+                  editId: primaryKeyValue,
+                  tableName: rightTableName,
                   ...(groupByColumns.length > 0 && {
                     groupByColumns: JSON.stringify(groupByColumns),
                   }),
@@ -1923,10 +1478,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             }),
           );
 
-          console.log("✅ [SplitPanel] openScreenModal 이벤트 발생 (editData 직접 전달):", {
+          console.log("✅ [SplitPanel] openScreenModal 이벤트 발생:", {
             screenId: modalScreenId,
-            editData: allRelatedRecords,
-            recordCount: allRelatedRecords.length,
+            editId: primaryKeyValue,
+            tableName: rightTableName,
             groupByColumns: groupByColumns.length > 0 ? JSON.stringify(groupByColumns) : "없음",
           });
 
@@ -1940,7 +1495,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       setEditModalFormData({ ...item });
       setShowEditModal(true);
     },
-    [componentConfig, activeTabIndex],
+    [componentConfig],
   );
 
   // 수정 모달 저장
@@ -2040,18 +1595,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
   // 삭제 확인
   const handleDeleteConfirm = useCallback(async () => {
-    // 🆕 현재 활성 탭의 설정 가져오기
-    const currentTabConfig =
-      activeTabIndex === 0
-        ? componentConfig.rightPanel
-        : componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1];
-
     // 우측 패널 삭제 시 중계 테이블 확인
-    let tableName = deleteModalPanel === "left" ? componentConfig.leftPanel?.tableName : currentTabConfig?.tableName;
+    let tableName =
+      deleteModalPanel === "left" ? componentConfig.leftPanel?.tableName : componentConfig.rightPanel?.tableName;
 
     // 우측 패널 + 중계 테이블 모드인 경우
-    if (deleteModalPanel === "right" && currentTabConfig?.addConfig?.targetTable) {
-      tableName = currentTabConfig.addConfig.targetTable;
+    if (deleteModalPanel === "right" && componentConfig.rightPanel?.addConfig?.targetTable) {
+      tableName = componentConfig.rightPanel.addConfig.targetTable;
       console.log("🔗 중계 테이블 모드: 삭제 대상 테이블 =", tableName);
     }
 
@@ -2076,89 +1626,47 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     try {
       console.log("🗑️ 데이터 삭제:", { tableName, primaryKey });
 
-      // 🔍 그룹 삭제 설정 확인 (editButton.groupByColumns 또는 deduplication)
-      const groupByColumns = componentConfig.rightPanel?.editButton?.groupByColumns || [];
-      const deduplication = componentConfig.rightPanel?.dataFilter?.deduplication;
-
-      console.log("🔍 삭제 설정 디버깅:", {
+      // 🔍 중복 제거 설정 디버깅
+      console.log("🔍 중복 제거 디버깅:", {
         panel: deleteModalPanel,
-        groupByColumns,
-        deduplication,
-        deduplicationEnabled: deduplication?.enabled,
+        dataFilter: componentConfig.rightPanel?.dataFilter,
+        deduplication: componentConfig.rightPanel?.dataFilter?.deduplication,
+        enabled: componentConfig.rightPanel?.dataFilter?.deduplication?.enabled,
       });
 
       let result;
 
-      // 🔧 우측 패널 삭제 시 그룹 삭제 조건 확인
-      if (deleteModalPanel === "right") {
-        // 1. groupByColumns가 설정된 경우 (패널 설정에서 선택된 컬럼들)
-        if (groupByColumns.length > 0) {
-          const filterConditions: Record<string, any> = {};
+      // 🔧 중복 제거가 활성화된 경우, groupByColumn 기준으로 모든 관련 레코드 삭제
+      if (deleteModalPanel === "right" && componentConfig.rightPanel?.dataFilter?.deduplication?.enabled) {
+        const deduplication = componentConfig.rightPanel.dataFilter.deduplication;
+        const groupByColumn = deduplication.groupByColumn;
 
-          // 선택된 컬럼들의 값을 필터 조건으로 추가
-          for (const col of groupByColumns) {
-            if (deleteModalItem[col] !== undefined && deleteModalItem[col] !== null) {
-              filterConditions[col] = deleteModalItem[col];
-            }
-          }
-
-          // 🔒 안전장치: 조인 모드에서 좌측 패널의 키 값도 필터 조건에 포함
-          // (다른 거래처의 같은 품목이 삭제되는 것을 방지)
-          if (selectedLeftItem && componentConfig.rightPanel?.mode === "join") {
-            const leftColumn = componentConfig.rightPanel.join?.leftColumn;
-            const rightColumn = componentConfig.rightPanel.join?.rightColumn;
-            if (leftColumn && rightColumn && selectedLeftItem[leftColumn]) {
-              // rightColumn이 filterConditions에 없으면 추가
-              if (!filterConditions[rightColumn]) {
-                filterConditions[rightColumn] = selectedLeftItem[leftColumn];
-                console.log(`🔒 안전장치: ${rightColumn} = ${selectedLeftItem[leftColumn]} 추가`);
-              }
-            }
-          }
-
-          // 필터 조건이 있으면 그룹 삭제
-          if (Object.keys(filterConditions).length > 0) {
-            console.log(`🔗 그룹 삭제 (groupByColumns): ${groupByColumns.join(", ")} 기준`);
-            console.log("🗑️ 그룹 삭제 조건:", filterConditions);
-
-            result = await dataApi.deleteGroupRecords(tableName, filterConditions);
-          } else {
-            // 필터 조건이 없으면 단일 삭제
-            console.log("⚠️ groupByColumns 값이 없어 단일 삭제로 전환");
-            result = await dataApi.deleteRecord(tableName, primaryKey);
-          }
-        }
-        // 2. 중복 제거(deduplication)가 활성화된 경우
-        else if (deduplication?.enabled && deduplication?.groupByColumn) {
-          const groupByColumn = deduplication.groupByColumn;
+        if (groupByColumn && deleteModalItem[groupByColumn]) {
           const groupValue = deleteModalItem[groupByColumn];
+          console.log(`🔗 중복 제거 활성화: ${groupByColumn} = ${groupValue} 기준으로 모든 레코드 삭제`);
 
-          if (groupValue) {
-            console.log(`🔗 중복 제거 활성화: ${groupByColumn} = ${groupValue} 기준으로 모든 레코드 삭제`);
+          // groupByColumn 값으로 필터링하여 삭제
+          const filterConditions: Record<string, any> = {
+            [groupByColumn]: groupValue,
+          };
 
-            const filterConditions: Record<string, any> = {
-              [groupByColumn]: groupValue,
-            };
-
-            // 좌측 패널의 선택된 항목 정보도 포함 (customer_id 등)
-            if (selectedLeftItem && componentConfig.rightPanel?.mode === "join") {
-              const leftColumn = componentConfig.rightPanel.join.leftColumn;
-              const rightColumn = componentConfig.rightPanel.join.rightColumn;
-              filterConditions[rightColumn] = selectedLeftItem[leftColumn];
-            }
-
-            console.log("🗑️ 그룹 삭제 조건:", filterConditions);
-            result = await dataApi.deleteGroupRecords(tableName, filterConditions);
-          } else {
-            result = await dataApi.deleteRecord(tableName, primaryKey);
+          // 좌측 패널의 선택된 항목 정보도 포함 (customer_id 등)
+          if (selectedLeftItem && componentConfig.rightPanel?.mode === "join") {
+            const leftColumn = componentConfig.rightPanel.join.leftColumn;
+            const rightColumn = componentConfig.rightPanel.join.rightColumn;
+            filterConditions[rightColumn] = selectedLeftItem[leftColumn];
           }
-        }
-        // 3. 그 외: 단일 레코드 삭제
-        else {
+
+          console.log("🗑️ 그룹 삭제 조건:", filterConditions);
+
+          // 그룹 삭제 API 호출
+          result = await dataApi.deleteGroupRecords(tableName, filterConditions);
+        } else {
+          // 단일 레코드 삭제
           result = await dataApi.deleteRecord(tableName, primaryKey);
         }
       } else {
-        // 좌측 패널: 단일 레코드 삭제
+        // 단일 레코드 삭제
         result = await dataApi.deleteRecord(tableName, primaryKey);
       }
 
@@ -2181,12 +1689,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             setRightData(null);
           }
         } else if (deleteModalPanel === "right" && selectedLeftItem) {
-          // 🆕 현재 활성 탭에 따라 새로고침
-          if (activeTabIndex === 0) {
-            loadRightData(selectedLeftItem);
-          } else {
-            loadTabData(activeTabIndex, selectedLeftItem);
-          }
+          loadRightData(selectedLeftItem);
         }
       } else {
         toast({
@@ -2210,17 +1713,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         variant: "destructive",
       });
     }
-  }, [
-    deleteModalPanel,
-    componentConfig,
-    deleteModalItem,
-    toast,
-    selectedLeftItem,
-    loadLeftData,
-    loadRightData,
-    activeTabIndex,
-    loadTabData,
-  ]);
+  }, [deleteModalPanel, componentConfig, deleteModalItem, toast, selectedLeftItem, loadLeftData, loadRightData]);
 
   // 항목별 추가 버튼 핸들러 (좌측 항목의 + 버튼 - 하위 항목 추가)
   const handleItemAddClick = useCallback(
@@ -2460,7 +1953,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   useEffect(() => {
     const handleRefreshTable = () => {
       if (!isDesignMode) {
-        // console.log("🔄 [SplitPanel] refreshTable 이벤트 수신 - 데이터 새로고침");
+        console.log("🔄 [SplitPanel] refreshTable 이벤트 수신 - 데이터 새로고침");
         loadLeftData();
         // 선택된 항목이 있으면 우측 패널도 새로고침
         if (selectedLeftItem) {
@@ -2562,7 +2055,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           >
             <div className="flex w-full items-center justify-between">
               <CardTitle className="text-base font-semibold">
-                {getTranslatedText(componentConfig.leftPanel?.langKey, componentConfig.leftPanel?.title || "좌측 패널")}
+                {componentConfig.leftPanel?.title || "좌측 패널"}
               </CardTitle>
               {!isDesignMode && componentConfig.leftPanel?.showAdd && (
                 <Button size="sm" variant="outline" onClick={() => handleAddClick("left")}>
@@ -2596,9 +2089,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                     <table className="min-w-full divide-y divide-gray-200">
                       <thead className="bg-gray-50">
                         <tr>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">컬럼 1</th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">컬럼 2</th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">컬럼 3</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 1</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 2</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 3</th>
                         </tr>
                       </thead>
                       <tbody className="divide-y divide-gray-200 bg-white">
@@ -2624,12 +2117,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                   (() => {
                     // 🆕 그룹별 합산된 데이터 사용
                     const dataSource = summedLeftData;
-                    // console.log(
-                    //   "🔍 [테이블모드 렌더링] dataSource 개수:",
-                    //   dataSource.length,
-                    //   "leftGroupSumConfig:",
-                    //   leftGroupSumConfig,
-                    // );
+                    console.log(
+                      "🔍 [테이블모드 렌더링] dataSource 개수:",
+                      dataSource.length,
+                      "leftGroupSumConfig:",
+                      leftGroupSumConfig,
+                    );
 
                     // 🔧 로컬 검색 필터 적용
                     const filteredData = leftSearchQuery
@@ -2647,12 +2140,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                       visibleLeftColumns.length > 0
                         ? visibleLeftColumns.map((col: any) => {
                             const colName = typeof col === "string" ? col : col.name || col.columnName;
-                            const originalLabel =
-                              leftColumnLabels[colName] || (typeof col === "object" ? col.label : null) || colName;
-                            const colLangKey = typeof col === "object" ? col.langKey : undefined;
                             return {
                               name: colName,
-                              label: colLangKey ? getTranslatedText(colLangKey, originalLabel) : originalLabel,
+                              label:
+                                leftColumnLabels[colName] || (typeof col === "object" ? col.label : null) || colName,
                               width: typeof col === "object" ? col.width : 150,
                               align: (typeof col === "object" ? col.align : "left") as "left" | "center" | "right",
                               format: typeof col === "object" ? col.format : undefined, // 🆕 포맷 설정 포함
@@ -2684,7 +2175,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                     {columnsToShow.map((col, idx) => (
                                       <th
                                         key={idx}
-                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500"
+                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
                                         style={{
                                           width: col.width ? `${col.width}px` : "auto",
                                           textAlign: col.align || "left",
@@ -2745,7 +2236,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                               {columnsToShow.map((col, idx) => (
                                 <th
                                   key={idx}
-                                  className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500"
+                                  className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
                                   style={{
                                     width: col.width ? `${col.width}px` : "auto",
                                     textAlign: col.align || "left",
@@ -3043,34 +2534,6 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         className="flex flex-shrink-0 flex-col"
       >
         <Card className="flex flex-col border-0 shadow-none" style={{ height: "100%" }}>
-          {/* 🆕 탭 바 (추가 탭이 있을 때만 표시) */}
-          {(componentConfig.rightPanel?.additionalTabs?.length || 0) > 0 && (
-            <div className="flex-shrink-0 border-b">
-              <Tabs
-                value={String(activeTabIndex)}
-                onValueChange={(value) => handleTabChange(Number(value))}
-                className="w-full"
-              >
-                <TabsList className="h-9 w-full justify-start rounded-none border-b-0 bg-transparent p-0 px-2">
-                  <TabsTrigger
-                    value="0"
-                    className="data-[state=active]:border-primary h-8 rounded-none border-b-2 border-transparent px-4 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
-                  >
-                    {componentConfig.rightPanel?.title || "기본"}
-                  </TabsTrigger>
-                  {componentConfig.rightPanel?.additionalTabs?.map((tab, index) => (
-                    <TabsTrigger
-                      key={tab.tabId}
-                      value={String(index + 1)}
-                      className="data-[state=active]:border-primary h-8 rounded-none border-b-2 border-transparent px-4 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
-                    >
-                      {tab.label || `탭 ${index + 1}`}
-                    </TabsTrigger>
-                  ))}
-                </TabsList>
-              </Tabs>
-            </div>
-          )}
           <CardHeader
             className="flex-shrink-0 border-b"
             style={{
@@ -3083,34 +2546,16 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           >
             <div className="flex w-full items-center justify-between">
               <CardTitle className="text-base font-semibold">
-                {activeTabIndex === 0
-                  ? getTranslatedText(
-                      componentConfig.rightPanel?.langKey,
-                      componentConfig.rightPanel?.title || "우측 패널",
-                    )
-                  : getTranslatedText(
-                      componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1]?.titleLangKey,
-                      componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1]?.title ||
-                        componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1]?.label ||
-                        "우측 패널",
-                    )}
+                {componentConfig.rightPanel?.title || "우측 패널"}
               </CardTitle>
               {!isDesignMode && (
                 <div className="flex items-center gap-2">
-                  {/* 현재 활성 탭에 따른 추가 버튼 */}
-                  {activeTabIndex === 0
-                    ? componentConfig.rightPanel?.showAdd && (
-                        <Button size="sm" variant="outline" onClick={() => handleAddClick("right")}>
-                          <Plus className="mr-1 h-4 w-4" />
-                          추가
-                        </Button>
-                      )
-                    : componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1]?.showAdd && (
-                        <Button size="sm" variant="outline" onClick={() => handleAddClick("right")}>
-                          <Plus className="mr-1 h-4 w-4" />
-                          추가
-                        </Button>
-                      )}
+                  {componentConfig.rightPanel?.showAdd && (
+                    <Button size="sm" variant="outline" onClick={() => handleAddClick("right")}>
+                      <Plus className="mr-1 h-4 w-4" />
+                      추가
+                    </Button>
+                  )}
                   {/* 우측 패널 수정/삭제는 각 카드에서 처리 */}
                 </div>
               )}
@@ -3130,203 +2575,347 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             </div>
           )}
           <CardContent className="flex-1 overflow-auto p-4">
-            {/* 🆕 추가 탭 데이터 렌더링 */}
-            {activeTabIndex > 0 ? (
-              // 추가 탭 컨텐츠
-              (() => {
-                const currentTabConfig = componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1];
-                const currentTabData = tabsData[activeTabIndex] || [];
-                const isTabLoading = tabsLoading[activeTabIndex];
+            {/* 우측 데이터 */}
+            {isLoadingRight ? (
+              // 로딩 중
+              <div className="flex h-full items-center justify-center">
+                <div className="text-center">
+                  <Loader2 className="text-primary mx-auto h-8 w-8 animate-spin" />
+                  <p className="text-muted-foreground mt-2 text-sm">데이터를 불러오는 중...</p>
+                </div>
+              </div>
+            ) : rightData ? (
+              // 실제 데이터 표시
+              Array.isArray(rightData) ? (
+                // 조인 모드: 여러 데이터를 테이블/리스트로 표시
+                (() => {
+                  // 검색 필터링
+                  const filteredData = rightSearchQuery
+                    ? rightData.filter((item) => {
+                        const searchLower = rightSearchQuery.toLowerCase();
+                        return Object.entries(item).some(([key, value]) => {
+                          if (value === null || value === undefined) return false;
+                          return String(value).toLowerCase().includes(searchLower);
+                        });
+                      })
+                    : rightData;
 
-                if (isTabLoading) {
-                  return (
-                    <div className="flex h-full items-center justify-center">
-                      <div className="text-center">
-                        <Loader2 className="text-primary mx-auto h-8 w-8 animate-spin" />
-                        <p className="text-muted-foreground mt-2 text-sm">데이터를 불러오는 중...</p>
+                  // 테이블 모드 체크
+                  const isTableMode = componentConfig.rightPanel?.displayMode === "table";
+
+                  if (isTableMode) {
+                    // 테이블 모드 렌더링
+                    const displayColumns = componentConfig.rightPanel?.columns || [];
+
+                    // 🆕 그룹 합산 모드일 때: 복합키 컬럼을 우선 표시
+                    const relationKeys = componentConfig.rightPanel?.relation?.keys || [];
+                    const keyColumns = relationKeys.map((k: any) => k.leftColumn).filter(Boolean);
+                    const isGroupedMode = selectedLeftItem?._originalItems?.length > 0;
+
+                    let columnsToShow: any[] = [];
+
+                    if (displayColumns.length > 0) {
+                      // 설정된 컬럼 사용
+                      columnsToShow = displayColumns.map((col) => ({
+                        ...col,
+                        label: rightColumnLabels[col.name] || col.label || col.name,
+                        format: col.format,
+                      }));
+
+                      // 🆕 그룹 합산 모드이고, 키 컬럼이 표시 목록에 없으면 맨 앞에 추가
+                      if (isGroupedMode && keyColumns.length > 0) {
+                        const existingColNames = columnsToShow.map((c) => c.name);
+                        const missingKeyColumns = keyColumns.filter((k: string) => !existingColNames.includes(k));
+
+                        if (missingKeyColumns.length > 0) {
+                          const keyColsToAdd = missingKeyColumns.map((colName: string) => ({
+                            name: colName,
+                            label: rightColumnLabels[colName] || colName,
+                            width: 120,
+                            align: "left" as const,
+                            format: undefined,
+                            _isKeyColumn: true, // 구분용 플래그
+                          }));
+                          columnsToShow = [...keyColsToAdd, ...columnsToShow];
+                          console.log("🔗 [우측패널] 그룹모드 - 키 컬럼 추가:", missingKeyColumns);
+                        }
+                      }
+                    } else {
+                      // 기본 컬럼 자동 생성
+                      columnsToShow = Object.keys(filteredData[0] || {})
+                        .filter((key) => shouldShowField(key))
+                        .slice(0, 5)
+                        .map((key) => ({
+                          name: key,
+                          label: rightColumnLabels[key] || key,
+                          width: 150,
+                          align: "left" as const,
+                          format: undefined,
+                        }));
+                    }
+
+                    return (
+                      <div className="w-full">
+                        <div className="text-muted-foreground mb-2 text-xs">
+                          {filteredData.length}개의 관련 데이터
+                          {rightSearchQuery && filteredData.length !== rightData.length && (
+                            <span className="text-primary ml-1">(전체 {rightData.length}개 중)</span>
+                          )}
+                        </div>
+                        <div className="overflow-auto">
+                          <table className="min-w-full divide-y divide-gray-200">
+                            <thead className="sticky top-0 z-10 bg-gray-50">
+                              <tr>
+                                {columnsToShow.map((col, idx) => (
+                                  <th
+                                    key={idx}
+                                    className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+                                    style={{
+                                      width: col.width ? `${col.width}px` : "auto",
+                                      textAlign: col.align || "left",
+                                    }}
+                                  >
+                                    {col.label}
+                                  </th>
+                                ))}
+                                {/* 수정 또는 삭제 버튼이 하나라도 활성화되어 있을 때만 작업 컬럼 표시 */}
+                                {!isDesignMode &&
+                                  ((componentConfig.rightPanel?.editButton?.enabled ?? true) ||
+                                    (componentConfig.rightPanel?.deleteButton?.enabled ?? true)) && (
+                                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase">
+                                      작업
+                                    </th>
+                                  )}
+                              </tr>
+                            </thead>
+                            <tbody className="divide-y divide-gray-200 bg-white">
+                              {filteredData.map((item, idx) => {
+                                const itemId = item.id || item.ID || idx;
+
+                                return (
+                                  <tr key={itemId} className="hover:bg-accent transition-colors">
+                                    {columnsToShow.map((col, colIdx) => (
+                                      <td
+                                        key={colIdx}
+                                        className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
+                                        style={{ textAlign: col.align || "left" }}
+                                      >
+                                        {formatCellValue(
+                                          col.name,
+                                          getEntityJoinValue(item, col.name),
+                                          rightCategoryMappings,
+                                          col.format,
+                                        )}
+                                      </td>
+                                    ))}
+                                    {/* 수정 또는 삭제 버튼이 하나라도 활성화되어 있을 때만 작업 셀 표시 */}
+                                    {!isDesignMode &&
+                                      ((componentConfig.rightPanel?.editButton?.enabled ?? true) ||
+                                        (componentConfig.rightPanel?.deleteButton?.enabled ?? true)) && (
+                                        <td className="px-3 py-2 text-right text-sm whitespace-nowrap">
+                                          <div className="flex justify-end gap-1">
+                                            {(componentConfig.rightPanel?.editButton?.enabled ?? true) && (
+                                              <Button
+                                                variant={
+                                                  componentConfig.rightPanel?.editButton?.buttonVariant || "outline"
+                                                }
+                                                size="sm"
+                                                onClick={(e) => {
+                                                  e.stopPropagation();
+                                                  handleEditClick("right", item);
+                                                }}
+                                                className="h-7"
+                                              >
+                                                <Pencil className="mr-1 h-3 w-3" />
+                                                {componentConfig.rightPanel?.editButton?.buttonLabel || "수정"}
+                                              </Button>
+                                            )}
+                                            {(componentConfig.rightPanel?.deleteButton?.enabled ?? true) && (
+                                              <button
+                                                onClick={(e) => {
+                                                  e.stopPropagation();
+                                                  handleDeleteClick("right", item);
+                                                }}
+                                                className="rounded p-1 transition-colors hover:bg-red-100"
+                                                title={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
+                                              >
+                                                <Trash2 className="h-4 w-4 text-red-600" />
+                                              </button>
+                                            )}
+                                          </div>
+                                        </td>
+                                      )}
+                                  </tr>
+                                );
+                              })}
+                            </tbody>
+                          </table>
+                        </div>
                       </div>
-                    </div>
-                  );
-                }
+                    );
+                  }
 
-                if (!selectedLeftItem) {
-                  return (
-                    <div className="flex h-full items-center justify-center">
-                      <p className="text-muted-foreground text-sm">좌측에서 항목을 선택하세요</p>
-                    </div>
-                  );
-                }
-
-                if (currentTabData.length === 0) {
-                  return (
-                    <div className="flex h-full items-center justify-center">
-                      <p className="text-muted-foreground text-sm">데이터가 없습니다</p>
-                    </div>
-                  );
-                }
-
-                // 탭 데이터 렌더링 (목록/테이블 모드)
-                const isTableMode = currentTabConfig?.displayMode === "table";
-
-                if (isTableMode) {
-                  // 테이블 모드
-                  const displayColumns = currentTabConfig?.columns || [];
-                  const columnsToShow =
-                    displayColumns.length > 0
-                      ? displayColumns.map((col) => ({
-                          ...col,
-                          label: col.label || col.name,
-                        }))
-                      : Object.keys(currentTabData[0] || {})
-                          .filter(shouldShowField)
-                          .slice(0, 8)
-                          .map((key) => ({ name: key, label: key }));
-
-                  return (
-                    <div className="overflow-auto rounded-lg border">
-                      <table className="w-full text-sm">
-                        <thead className="bg-muted/50 sticky top-0">
-                          <tr>
-                            {columnsToShow.map((col: any) => (
-                              <th
-                                key={col.name}
-                                className="px-3 py-2 text-left font-medium"
-                                style={{ width: col.width ? `${col.width}px` : "auto" }}
-                              >
-                                {col.label}
-                              </th>
-                            ))}
-                            {(currentTabConfig?.showEdit || currentTabConfig?.showDelete) && (
-                              <th className="w-20 px-3 py-2 text-center font-medium">작업</th>
-                            )}
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {currentTabData.map((item: any, idx: number) => (
-                            <tr key={item.id || idx} className="hover:bg-muted/30 border-t">
-                              {columnsToShow.map((col: any) => (
-                                <td key={col.name} className="px-3 py-2">
-                                  {formatValue(item[col.name], col.format)}
-                                </td>
-                              ))}
-                              {(currentTabConfig?.showEdit || currentTabConfig?.showDelete) && (
-                                <td className="px-3 py-2 text-center">
-                                  <div className="flex items-center justify-center gap-1">
-                                    {currentTabConfig?.showEdit && (
-                                      <Button
-                                        variant="ghost"
-                                        size="sm"
-                                        className="h-7 w-7 p-0"
-                                        onClick={() => handleEditClick("right", item)}
-                                      >
-                                        <Pencil className="h-3.5 w-3.5" />
-                                      </Button>
-                                    )}
-                                    {currentTabConfig?.showDelete && (
-                                      <Button
-                                        variant="ghost"
-                                        size="sm"
-                                        className="h-7 w-7 p-0 text-red-500 hover:text-red-600"
-                                        onClick={() => handleDeleteClick("right", item)}
-                                      >
-                                        <Trash2 className="h-3.5 w-3.5" />
-                                      </Button>
-                                    )}
-                                  </div>
-                                </td>
-                              )}
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
-                    </div>
-                  );
-                } else {
-                  // 목록 (카드) 모드
-                  const displayColumns = currentTabConfig?.columns || [];
-                  const summaryCount = currentTabConfig?.summaryColumnCount ?? 3;
-                  const showLabel = currentTabConfig?.summaryShowLabel ?? true;
-
-                  return (
+                  // 목록 모드 (기존)
+                  return filteredData.length > 0 ? (
                     <div className="space-y-2">
-                      {currentTabData.map((item: any, idx: number) => {
-                        const itemId = item.id || idx;
+                      <div className="text-muted-foreground mb-2 text-xs">
+                        {filteredData.length}개의 관련 데이터
+                        {rightSearchQuery && filteredData.length !== rightData.length && (
+                          <span className="text-primary ml-1">(전체 {rightData.length}개 중)</span>
+                        )}
+                      </div>
+                      {filteredData.map((item, index) => {
+                        const itemId = item.id || item.ID || index;
                         const isExpanded = expandedRightItems.has(itemId);
 
-                        // 표시할 컬럼 결정
-                        const columnsToShow =
-                          displayColumns.length > 0
-                            ? displayColumns
-                            : Object.keys(item)
-                                .filter(shouldShowField)
-                                .slice(0, 8)
-                                .map((key) => ({ name: key, label: key }));
+                        // 우측 패널 표시 컬럼 설정 확인
+                        const rightColumns = componentConfig.rightPanel?.columns;
+                        let firstValues: [string, any, string][] = [];
+                        let allValues: [string, any, string][] = [];
 
-                        const summaryColumns = columnsToShow.slice(0, summaryCount);
-                        const detailColumns = columnsToShow.slice(summaryCount);
+                        if (rightColumns && rightColumns.length > 0) {
+                          // 설정된 컬럼만 표시 (엔티티 조인 컬럼 처리)
+                          const summaryCount = componentConfig.rightPanel?.summaryColumnCount ?? 3;
+                          firstValues = rightColumns
+                            .slice(0, summaryCount)
+                            .map((col) => {
+                              // 🆕 엔티티 조인 컬럼 처리 (getEntityJoinValue 사용)
+                              const value = getEntityJoinValue(item, col.name);
+                              return [col.name, value, col.label] as [string, any, string];
+                            })
+                            .filter(([_, value]) => value !== null && value !== undefined && value !== "");
+
+                          allValues = rightColumns
+                            .map((col) => {
+                              // 🆕 엔티티 조인 컬럼 처리 (getEntityJoinValue 사용)
+                              const value = getEntityJoinValue(item, col.name);
+                              return [col.name, value, col.label] as [string, any, string];
+                            })
+                            .filter(([_, value]) => value !== null && value !== undefined && value !== "");
+                        } else {
+                          // 설정 없으면 모든 컬럼 표시 (기존 로직)
+                          const summaryCount = componentConfig.rightPanel?.summaryColumnCount ?? 3;
+                          firstValues = Object.entries(item)
+                            .filter(([key]) => !key.toLowerCase().includes("id"))
+                            .slice(0, summaryCount)
+                            .map(([key, value]) => [key, value, ""] as [string, any, string]);
+
+                          allValues = Object.entries(item)
+                            .filter(([key, value]) => value !== null && value !== undefined && value !== "")
+                            .map(([key, value]) => [key, value, ""] as [string, any, string]);
+                        }
 
                         return (
-                          <div key={itemId} className="rounded-lg border bg-white p-3">
-                            <div
-                              className="flex cursor-pointer items-start justify-between"
-                              onClick={() => toggleRightItemExpansion(itemId)}
-                            >
-                              <div className="flex-1">
-                                <div className="flex flex-wrap gap-x-4 gap-y-1">
-                                  {summaryColumns.map((col: any) => (
-                                    <div key={col.name} className="text-sm">
-                                      {showLabel && <span className="text-muted-foreground mr-1">{col.label}:</span>}
-                                      <span className={col.bold ? "font-semibold" : ""}>
-                                        {formatValue(item[col.name], col.format)}
-                                      </span>
-                                    </div>
-                                  ))}
+                          <div
+                            key={itemId}
+                            className="bg-card overflow-hidden rounded-lg border shadow-sm transition-all hover:shadow-md"
+                          >
+                            {/* 요약 정보 */}
+                            <div className="p-3">
+                              <div className="flex items-start justify-between gap-2">
+                                <div
+                                  className="min-w-0 flex-1 cursor-pointer"
+                                  onClick={() => toggleRightItemExpansion(itemId)}
+                                >
+                                  <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+                                    {firstValues.map(([key, value, label], idx) => {
+                                      // 포맷 설정 및 볼드 설정 찾기
+                                      const colConfig = rightColumns?.find((c) => c.name === key);
+                                      const format = colConfig?.format;
+                                      const boldValue = colConfig?.bold ?? false;
+
+                                      // 🆕 포맷 적용 (날짜/숫자/카테고리)
+                                      const displayValue = formatCellValue(key, value, rightCategoryMappings, format);
+
+                                      const showLabel = componentConfig.rightPanel?.summaryShowLabel ?? true;
+
+                                      return (
+                                        <div key={key} className="flex items-baseline gap-1">
+                                          {showLabel && (
+                                            <span className="text-muted-foreground text-xs font-medium whitespace-nowrap">
+                                              {label || getColumnLabel(key)}:
+                                            </span>
+                                          )}
+                                          <span
+                                            className={`text-foreground text-sm ${boldValue ? "font-semibold" : ""}`}
+                                          >
+                                            {displayValue}
+                                          </span>
+                                        </div>
+                                      );
+                                    })}
+                                  </div>
+                                </div>
+                                <div className="flex flex-shrink-0 items-start gap-1 pt-1">
+                                  {/* 수정 버튼 */}
+                                  {!isDesignMode && (componentConfig.rightPanel?.editButton?.enabled ?? true) && (
+                                    <Button
+                                      variant={componentConfig.rightPanel?.editButton?.buttonVariant || "outline"}
+                                      size="sm"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleEditClick("right", item);
+                                      }}
+                                      className="h-7"
+                                    >
+                                      <Pencil className="mr-1 h-3 w-3" />
+                                      {componentConfig.rightPanel?.editButton?.buttonLabel || "수정"}
+                                    </Button>
+                                  )}
+                                  {/* 삭제 버튼 */}
+                                  {!isDesignMode && (componentConfig.rightPanel?.deleteButton?.enabled ?? true) && (
+                                    <button
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleDeleteClick("right", item);
+                                      }}
+                                      className="rounded p-1 transition-colors hover:bg-red-100"
+                                      title={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
+                                    >
+                                      <Trash2 className="h-4 w-4 text-red-600" />
+                                    </button>
+                                  )}
+                                  {/* 확장/접기 버튼 */}
+                                  <button
+                                    onClick={() => toggleRightItemExpansion(itemId)}
+                                    className="rounded p-1 transition-colors hover:bg-gray-200"
+                                  >
+                                    {isExpanded ? (
+                                      <ChevronUp className="text-muted-foreground h-5 w-5" />
+                                    ) : (
+                                      <ChevronDown className="text-muted-foreground h-5 w-5" />
+                                    )}
+                                  </button>
                                 </div>
                               </div>
-                              <div className="ml-2 flex items-center gap-1">
-                                {currentTabConfig?.showEdit && (
-                                  <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    className="h-7 w-7 p-0"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      handleEditClick("right", item);
-                                    }}
-                                  >
-                                    <Pencil className="h-3.5 w-3.5" />
-                                  </Button>
-                                )}
-                                {currentTabConfig?.showDelete && (
-                                  <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    className="h-7 w-7 p-0 text-red-500 hover:text-red-600"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      handleDeleteClick("right", item);
-                                    }}
-                                  >
-                                    <Trash2 className="h-3.5 w-3.5" />
-                                  </Button>
-                                )}
-                                {detailColumns.length > 0 &&
-                                  (isExpanded ? (
-                                    <ChevronUp className="h-4 w-4 text-gray-400" />
-                                  ) : (
-                                    <ChevronDown className="h-4 w-4 text-gray-400" />
-                                  ))}
-                              </div>
                             </div>
-                            {isExpanded && detailColumns.length > 0 && (
-                              <div className="mt-2 border-t pt-2">
-                                <div className="grid grid-cols-2 gap-2">
-                                  {detailColumns.map((col: any) => (
-                                    <div key={col.name} className="text-sm">
-                                      <span className="text-muted-foreground">{col.label}:</span>
-                                      <span className="ml-1">{formatValue(item[col.name], col.format)}</span>
-                                    </div>
-                                  ))}
+
+                            {/* 상세 정보 (확장 시 표시) */}
+                            {isExpanded && (
+                              <div className="bg-muted/50 border-t px-3 py-2">
+                                <div className="mb-2 text-xs font-semibold">전체 상세 정보</div>
+                                <div className="bg-card overflow-auto rounded-md border">
+                                  <table className="w-full text-sm">
+                                    <tbody className="divide-border divide-y">
+                                      {allValues.map(([key, value, label]) => {
+                                        // 포맷 설정 찾기
+                                        const colConfig = rightColumns?.find((c) => c.name === key);
+                                        const format = colConfig?.format;
+
+                                        // 🆕 포맷 적용 (날짜/숫자/카테고리)
+                                        const displayValue = formatCellValue(key, value, rightCategoryMappings, format);
+
+                                        return (
+                                          <tr key={key} className="hover:bg-muted">
+                                            <td className="text-muted-foreground px-3 py-2 font-medium whitespace-nowrap">
+                                              {label || getColumnLabel(key)}
+                                            </td>
+                                            <td className="text-foreground px-3 py-2 break-all">{displayValue}</td>
+                                          </tr>
+                                        );
+                                      })}
+                                    </tbody>
+                                  </table>
                                 </div>
                               </div>
                             )}
@@ -3334,478 +2923,109 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                         );
                       })}
                     </div>
-                  );
-                }
-              })()
-            ) : (
-              /* 기본 탭 (우측 패널) 데이터 */
-              <>
-                {isLoadingRight ? (
-                  // 로딩 중
-                  <div className="flex h-full items-center justify-center">
-                    <div className="text-center">
-                      <Loader2 className="text-primary mx-auto h-8 w-8 animate-spin" />
-                      <p className="text-muted-foreground mt-2 text-sm">데이터를 불러오는 중...</p>
+                  ) : (
+                    <div className="text-muted-foreground py-8 text-center text-sm">
+                      {rightSearchQuery ? (
+                        <>
+                          <p>검색 결과가 없습니다.</p>
+                          <p className="text-muted-foreground/70 mt-1 text-xs">다른 검색어를 입력해보세요.</p>
+                        </>
+                      ) : (
+                        "관련 데이터가 없습니다."
+                      )}
                     </div>
-                  </div>
-                ) : rightData ? (
-                  // 실제 데이터 표시
-                  Array.isArray(rightData) ? (
-                    // 조인 모드: 여러 데이터를 테이블/리스트로 표시
-                    (() => {
-                      // 검색 필터링
-                      const filteredData = rightSearchQuery
-                        ? rightData.filter((item) => {
-                            const searchLower = rightSearchQuery.toLowerCase();
-                            return Object.entries(item).some(([key, value]) => {
-                              if (value === null || value === undefined) return false;
-                              return String(value).toLowerCase().includes(searchLower);
-                            });
-                          })
-                        : rightData;
+                  );
+                })()
+              ) : (
+                // 상세 모드: 단일 객체를 상세 정보로 표시
+                (() => {
+                  const rightColumns = componentConfig.rightPanel?.columns;
+                  let displayEntries: [string, any, string][] = [];
 
-                      // 테이블 모드 체크
-                      const isTableMode = componentConfig.rightPanel?.displayMode === "table";
+                  if (rightColumns && rightColumns.length > 0) {
+                    console.log("🔍 [디버깅] 상세 모드 표시 로직:");
+                    console.log("  📋 rightData 전체:", rightData);
+                    console.log("  📋 rightData keys:", Object.keys(rightData));
+                    console.log(
+                      "  ⚙️ 설정된 컬럼:",
+                      rightColumns.map((c) => `${c.name} (${c.label})`),
+                    );
 
-                      if (isTableMode) {
-                        // 테이블 모드 렌더링
-                        const displayColumns = componentConfig.rightPanel?.columns || [];
+                    // 설정된 컬럼만 표시
+                    displayEntries = rightColumns
+                      .map((col) => {
+                        // 🆕 엔티티 조인 컬럼 처리 (예: item_info.item_name → item_name)
+                        let value = rightData[col.name];
+                        console.log(`  🔎 컬럼 "${col.name}": 직접 접근 = ${value}`);
 
-                        // 🆕 그룹 합산 모드일 때: 복합키 컬럼을 우선 표시
-                        const relationKeys = componentConfig.rightPanel?.relation?.keys || [];
-                        const keyColumns = relationKeys.map((k: any) => k.leftColumn).filter(Boolean);
-                        const isGroupedMode = selectedLeftItem?._originalItems?.length > 0;
-
-                        let columnsToShow: any[] = [];
-
-                        if (displayColumns.length > 0) {
-                          // 설정된 컬럼 사용 - 🌐 다국어 처리 추가
-                          columnsToShow = displayColumns.map((col) => {
-                            const originalLabel = rightColumnLabels[col.name] || col.label || col.name;
-                            const colLangKey = (col as any).langKey;
-                            return {
-                              ...col,
-                              label: colLangKey ? getTranslatedText(colLangKey, originalLabel) : originalLabel,
-                              format: col.format,
-                            };
-                          });
-
-                          // 🆕 그룹 합산 모드이고, 키 컬럼이 표시 목록에 없으면 맨 앞에 추가
-                          if (isGroupedMode && keyColumns.length > 0) {
-                            const existingColNames = columnsToShow.map((c) => c.name);
-                            const missingKeyColumns = keyColumns.filter((k: string) => !existingColNames.includes(k));
-
-                            if (missingKeyColumns.length > 0) {
-                              const keyColsToAdd = missingKeyColumns.map((colName: string) => ({
-                                name: colName,
-                                label: rightColumnLabels[colName] || colName,
-                                width: 120,
-                                align: "left" as const,
-                                format: undefined,
-                                _isKeyColumn: true, // 구분용 플래그
-                              }));
-                              columnsToShow = [...keyColsToAdd, ...columnsToShow];
-                              console.log("🔗 [우측패널] 그룹모드 - 키 컬럼 추가:", missingKeyColumns);
-                            }
-                          }
-                        } else {
-                          // 기본 컬럼 자동 생성
-                          columnsToShow = Object.keys(filteredData[0] || {})
-                            .filter((key) => shouldShowField(key))
-                            .slice(0, 5)
-                            .map((key) => ({
-                              name: key,
-                              label: rightColumnLabels[key] || key,
-                              width: 150,
-                              align: "left" as const,
-                              format: undefined,
-                            }));
+                        if (value === undefined && col.name.includes(".")) {
+                          const columnName = col.name.split(".").pop();
+                          value = rightData[columnName || ""];
+                          console.log(`    → 변환 후 "${columnName}" 접근 = ${value}`);
                         }
 
-                        return (
-                          <div className="w-full">
-                            <div className="text-muted-foreground mb-2 text-xs">
-                              {filteredData.length}개의 관련 데이터
-                              {rightSearchQuery && filteredData.length !== rightData.length && (
-                                <span className="text-primary ml-1">(전체 {rightData.length}개 중)</span>
-                              )}
-                            </div>
-                            <div className="overflow-auto">
-                              <table className="min-w-full divide-y divide-gray-200">
-                                <thead className="sticky top-0 z-10 bg-gray-50">
-                                  <tr>
-                                    {columnsToShow.map((col, idx) => (
-                                      <th
-                                        key={idx}
-                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500"
-                                        style={{
-                                          width: col.width ? `${col.width}px` : "auto",
-                                          textAlign: col.align || "left",
-                                        }}
-                                      >
-                                        {col.label}
-                                      </th>
-                                    ))}
-                                    {/* 수정 또는 삭제 버튼이 하나라도 활성화되어 있을 때만 작업 컬럼 표시 */}
-                                    {!isDesignMode &&
-                                      ((componentConfig.rightPanel?.editButton?.enabled ?? true) ||
-                                        (componentConfig.rightPanel?.deleteButton?.enabled ?? true)) && (
-                                        <th className="px-3 py-2 text-right text-xs font-medium text-gray-500">작업</th>
-                                      )}
-                                  </tr>
-                                </thead>
-                                <tbody className="divide-y divide-gray-200 bg-white">
-                                  {filteredData.map((item, idx) => {
-                                    const itemId = item.id || item.ID || idx;
+                        return [col.name, value, col.label] as [string, any, string];
+                      })
+                      .filter(([key, value]) => {
+                        const filtered = value === null || value === undefined || value === "";
+                        if (filtered) {
+                          console.log(`  ❌ 필터링됨: "${key}" (값: ${value})`);
+                        }
+                        return !filtered;
+                      });
 
-                                    return (
-                                      <tr key={itemId} className="hover:bg-accent transition-colors">
-                                        {columnsToShow.map((col, colIdx) => (
-                                          <td
-                                            key={colIdx}
-                                            className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
-                                            style={{ textAlign: col.align || "left" }}
-                                          >
-                                            {formatCellValue(
-                                              col.name,
-                                              getEntityJoinValue(item, col.name),
-                                              rightCategoryMappings,
-                                              col.format,
-                                            )}
-                                          </td>
-                                        ))}
-                                        {/* 수정 또는 삭제 버튼이 하나라도 활성화되어 있을 때만 작업 셀 표시 */}
-                                        {!isDesignMode &&
-                                          ((componentConfig.rightPanel?.editButton?.enabled ?? true) ||
-                                            (componentConfig.rightPanel?.deleteButton?.enabled ?? true)) && (
-                                            <td className="px-3 py-2 text-right text-sm whitespace-nowrap">
-                                              <div className="flex justify-end gap-1">
-                                                {(componentConfig.rightPanel?.editButton?.enabled ?? true) && (
-                                                  <Button
-                                                    variant={
-                                                      componentConfig.rightPanel?.editButton?.buttonVariant || "outline"
-                                                    }
-                                                    size="sm"
-                                                    onClick={(e) => {
-                                                      e.stopPropagation();
-                                                      handleEditClick("right", item);
-                                                    }}
-                                                    className="h-7"
-                                                  >
-                                                    <Pencil className="mr-1 h-3 w-3" />
-                                                    {componentConfig.rightPanel?.editButton?.buttonLabel || "수정"}
-                                                  </Button>
-                                                )}
-                                                {(componentConfig.rightPanel?.deleteButton?.enabled ?? true) && (
-                                                  <button
-                                                    onClick={(e) => {
-                                                      e.stopPropagation();
-                                                      handleDeleteClick("right", item);
-                                                    }}
-                                                    className="rounded p-1 transition-colors hover:bg-red-100"
-                                                    title={
-                                                      componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"
-                                                    }
-                                                  >
-                                                    <Trash2 className="h-4 w-4 text-red-600" />
-                                                  </button>
-                                                )}
-                                              </div>
-                                            </td>
-                                          )}
-                                      </tr>
-                                    );
-                                  })}
-                                </tbody>
-                              </table>
-                            </div>
+                    console.log("  ✅ 최종 표시할 항목:", displayEntries.length, "개");
+                  } else {
+                    // 설정 없으면 모든 컬럼 표시
+                    displayEntries = Object.entries(rightData)
+                      .filter(([_, value]) => value !== null && value !== undefined && value !== "")
+                      .map(([key, value]) => [key, value, ""] as [string, any, string]);
+                    console.log("  ⚠️ 컬럼 설정 없음, 모든 컬럼 표시");
+                  }
+
+                  return (
+                    <div className="space-y-2">
+                      {displayEntries.map(([key, value, label]) => (
+                        <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">
+                            {label || getColumnLabel(key)}
                           </div>
-                        );
-                      }
-
-                      // 목록 모드 (기존)
-                      return filteredData.length > 0 ? (
-                        <div className="space-y-2">
-                          <div className="text-muted-foreground mb-2 text-xs">
-                            {filteredData.length}개의 관련 데이터
-                            {rightSearchQuery && filteredData.length !== rightData.length && (
-                              <span className="text-primary ml-1">(전체 {rightData.length}개 중)</span>
-                            )}
-                          </div>
-                          {filteredData.map((item, index) => {
-                            const itemId = item.id || item.ID || index;
-                            const isExpanded = expandedRightItems.has(itemId);
-
-                            // 우측 패널 표시 컬럼 설정 확인
-                            const rightColumns = componentConfig.rightPanel?.columns;
-                            let firstValues: [string, any, string][] = [];
-                            let allValues: [string, any, string][] = [];
-
-                            if (rightColumns && rightColumns.length > 0) {
-                              // 설정된 컬럼만 표시 (엔티티 조인 컬럼 처리)
-                              const summaryCount = componentConfig.rightPanel?.summaryColumnCount ?? 3;
-                              firstValues = rightColumns
-                                .slice(0, summaryCount)
-                                .map((col) => {
-                                  // 🆕 엔티티 조인 컬럼 처리 (getEntityJoinValue 사용)
-                                  const value = getEntityJoinValue(item, col.name);
-                                  return [col.name, value, col.label] as [string, any, string];
-                                })
-                                .filter(([_, value]) => value !== null && value !== undefined && value !== "");
-
-                              allValues = rightColumns
-                                .map((col) => {
-                                  // 🆕 엔티티 조인 컬럼 처리 (getEntityJoinValue 사용)
-                                  const value = getEntityJoinValue(item, col.name);
-                                  return [col.name, value, col.label] as [string, any, string];
-                                })
-                                .filter(([_, value]) => value !== null && value !== undefined && value !== "");
-                            } else {
-                              // 설정 없으면 모든 컬럼 표시 (기존 로직)
-                              const summaryCount = componentConfig.rightPanel?.summaryColumnCount ?? 3;
-                              firstValues = Object.entries(item)
-                                .filter(([key]) => !key.toLowerCase().includes("id"))
-                                .slice(0, summaryCount)
-                                .map(([key, value]) => [key, value, ""] as [string, any, string]);
-
-                              allValues = Object.entries(item)
-                                .filter(([key, value]) => value !== null && value !== undefined && value !== "")
-                                .map(([key, value]) => [key, value, ""] as [string, any, string]);
-                            }
-
-                            return (
-                              <div
-                                key={itemId}
-                                className="bg-card overflow-hidden rounded-lg border shadow-sm transition-all hover:shadow-md"
-                              >
-                                {/* 요약 정보 */}
-                                <div className="p-3">
-                                  <div className="flex items-start justify-between gap-2">
-                                    <div
-                                      className="min-w-0 flex-1 cursor-pointer"
-                                      onClick={() => toggleRightItemExpansion(itemId)}
-                                    >
-                                      <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
-                                        {firstValues.map(([key, value, label], idx) => {
-                                          // 포맷 설정 및 볼드 설정 찾기
-                                          const colConfig = rightColumns?.find((c) => c.name === key);
-                                          const format = colConfig?.format;
-                                          const boldValue = colConfig?.bold ?? false;
-
-                                          // 🆕 포맷 적용 (날짜/숫자/카테고리)
-                                          const displayValue = formatCellValue(
-                                            key,
-                                            value,
-                                            rightCategoryMappings,
-                                            format,
-                                          );
-
-                                          const showLabel = componentConfig.rightPanel?.summaryShowLabel ?? true;
-
-                                          return (
-                                            <div key={key} className="flex items-baseline gap-1">
-                                              {showLabel && (
-                                                <span className="text-muted-foreground text-xs font-medium whitespace-nowrap">
-                                                  {label || getColumnLabel(key)}:
-                                                </span>
-                                              )}
-                                              <span
-                                                className={`text-foreground text-sm ${boldValue ? "font-semibold" : ""}`}
-                                              >
-                                                {displayValue}
-                                              </span>
-                                            </div>
-                                          );
-                                        })}
-                                      </div>
-                                    </div>
-                                    <div className="flex flex-shrink-0 items-start gap-1 pt-1">
-                                      {/* 수정 버튼 */}
-                                      {!isDesignMode && (componentConfig.rightPanel?.editButton?.enabled ?? true) && (
-                                        <Button
-                                          variant={componentConfig.rightPanel?.editButton?.buttonVariant || "outline"}
-                                          size="sm"
-                                          onClick={(e) => {
-                                            e.stopPropagation();
-                                            handleEditClick("right", item);
-                                          }}
-                                          className="h-7"
-                                        >
-                                          <Pencil className="mr-1 h-3 w-3" />
-                                          {componentConfig.rightPanel?.editButton?.buttonLabel || "수정"}
-                                        </Button>
-                                      )}
-                                      {/* 삭제 버튼 */}
-                                      {!isDesignMode && (componentConfig.rightPanel?.deleteButton?.enabled ?? true) && (
-                                        <button
-                                          onClick={(e) => {
-                                            e.stopPropagation();
-                                            handleDeleteClick("right", item);
-                                          }}
-                                          className="rounded p-1 transition-colors hover:bg-red-100"
-                                          title={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
-                                        >
-                                          <Trash2 className="h-4 w-4 text-red-600" />
-                                        </button>
-                                      )}
-                                      {/* 확장/접기 버튼 */}
-                                      <button
-                                        onClick={() => toggleRightItemExpansion(itemId)}
-                                        className="rounded p-1 transition-colors hover:bg-gray-200"
-                                      >
-                                        {isExpanded ? (
-                                          <ChevronUp className="text-muted-foreground h-5 w-5" />
-                                        ) : (
-                                          <ChevronDown className="text-muted-foreground h-5 w-5" />
-                                        )}
-                                      </button>
-                                    </div>
-                                  </div>
-                                </div>
-
-                                {/* 상세 정보 (확장 시 표시) */}
-                                {isExpanded && (
-                                  <div className="bg-muted/50 border-t px-3 py-2">
-                                    <div className="mb-2 text-xs font-semibold">전체 상세 정보</div>
-                                    <div className="bg-card overflow-auto rounded-md border">
-                                      <table className="w-full text-sm">
-                                        <tbody className="divide-border divide-y">
-                                          {allValues.map(([key, value, label]) => {
-                                            // 포맷 설정 찾기
-                                            const colConfig = rightColumns?.find((c) => c.name === key);
-                                            const format = colConfig?.format;
-
-                                            // 🆕 포맷 적용 (날짜/숫자/카테고리)
-                                            const displayValue = formatCellValue(
-                                              key,
-                                              value,
-                                              rightCategoryMappings,
-                                              format,
-                                            );
-
-                                            return (
-                                              <tr key={key} className="hover:bg-muted">
-                                                <td className="text-muted-foreground px-3 py-2 font-medium whitespace-nowrap">
-                                                  {label || getColumnLabel(key)}
-                                                </td>
-                                                <td className="text-foreground px-3 py-2 break-all">{displayValue}</td>
-                                              </tr>
-                                            );
-                                          })}
-                                        </tbody>
-                                      </table>
-                                    </div>
-                                  </div>
-                                )}
-                              </div>
-                            );
-                          })}
+                          <div className="text-sm">{String(value)}</div>
                         </div>
-                      ) : (
-                        <div className="text-muted-foreground py-8 text-center text-sm">
-                          {rightSearchQuery ? (
-                            <>
-                              <p>검색 결과가 없습니다.</p>
-                              <p className="text-muted-foreground/70 mt-1 text-xs">다른 검색어를 입력해보세요.</p>
-                            </>
-                          ) : (
-                            "관련 데이터가 없습니다."
-                          )}
-                        </div>
-                      );
-                    })()
-                  ) : (
-                    // 상세 모드: 단일 객체를 상세 정보로 표시
-                    (() => {
-                      const rightColumns = componentConfig.rightPanel?.columns;
-                      let displayEntries: [string, any, string][] = [];
-
-                      if (rightColumns && rightColumns.length > 0) {
-                        console.log("🔍 [디버깅] 상세 모드 표시 로직:");
-                        console.log("  📋 rightData 전체:", rightData);
-                        console.log("  📋 rightData keys:", Object.keys(rightData));
-                        console.log(
-                          "  ⚙️ 설정된 컬럼:",
-                          rightColumns.map((c) => `${c.name} (${c.label})`),
-                        );
-
-                        // 설정된 컬럼만 표시
-                        displayEntries = rightColumns
-                          .map((col) => {
-                            // 🆕 엔티티 조인 컬럼 처리 (예: item_info.item_name → item_name)
-                            let value = rightData[col.name];
-                            console.log(`  🔎 컬럼 "${col.name}": 직접 접근 = ${value}`);
-
-                            if (value === undefined && col.name.includes(".")) {
-                              const columnName = col.name.split(".").pop();
-                              value = rightData[columnName || ""];
-                              console.log(`    → 변환 후 "${columnName}" 접근 = ${value}`);
-                            }
-
-                            return [col.name, value, col.label] as [string, any, string];
-                          })
-                          .filter(([key, value]) => {
-                            const filtered = value === null || value === undefined || value === "";
-                            if (filtered) {
-                              console.log(`  ❌ 필터링됨: "${key}" (값: ${value})`);
-                            }
-                            return !filtered;
-                          });
-
-                        console.log("  ✅ 최종 표시할 항목:", displayEntries.length, "개");
-                      } else {
-                        // 설정 없으면 모든 컬럼 표시
-                        displayEntries = Object.entries(rightData)
-                          .filter(([_, value]) => value !== null && value !== undefined && value !== "")
-                          .map(([key, value]) => [key, value, ""] as [string, any, string]);
-                        console.log("  ⚠️ 컬럼 설정 없음, 모든 컬럼 표시");
-                      }
-
-                      return (
-                        <div className="space-y-2">
-                          {displayEntries.map(([key, value, label]) => (
-                            <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">
-                                {label || getColumnLabel(key)}
-                              </div>
-                              <div className="text-sm">{String(value)}</div>
-                            </div>
-                          ))}
-                        </div>
-                      );
-                    })()
-                  )
-                ) : selectedLeftItem && isDesignMode ? (
-                  // 디자인 모드: 샘플 데이터
-                  <div className="space-y-4">
-                    <div className="rounded-lg border p-4">
-                      <h3 className="mb-2 font-medium">{selectedLeftItem.name} 상세 정보</h3>
-                      <div className="space-y-2 text-sm">
-                        <div className="flex justify-between">
-                          <span className="text-muted-foreground">항목 1:</span>
-                          <span className="font-medium">값 1</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-muted-foreground">항목 2:</span>
-                          <span className="font-medium">값 2</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-muted-foreground">항목 3:</span>
-                          <span className="font-medium">값 3</span>
-                        </div>
-                      </div>
+                      ))}
+                    </div>
+                  );
+                })()
+              )
+            ) : selectedLeftItem && isDesignMode ? (
+              // 디자인 모드: 샘플 데이터
+              <div className="space-y-4">
+                <div className="rounded-lg border p-4">
+                  <h3 className="mb-2 font-medium">{selectedLeftItem.name} 상세 정보</h3>
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">항목 1:</span>
+                      <span className="font-medium">값 1</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">항목 2:</span>
+                      <span className="font-medium">값 2</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">항목 3:</span>
+                      <span className="font-medium">값 3</span>
                     </div>
                   </div>
-                ) : (
-                  // 선택 없음
-                  <div className="flex h-full items-center justify-center">
-                    <div className="text-muted-foreground text-center text-sm">
-                      <p className="mb-2">좌측에서 항목을 선택하세요</p>
-                      <p className="text-xs">선택한 항목의 상세 정보가 여기에 표시됩니다</p>
-                    </div>
-                  </div>
-                )}
-              </>
+                </div>
+              </div>
+            ) : (
+              // 선택 없음
+              <div className="flex h-full items-center justify-center">
+                <div className="text-muted-foreground text-center text-sm">
+                  <p className="mb-2">좌측에서 항목을 선택하세요</p>
+                  <p className="text-xs">선택한 항목의 상세 정보가 여기에 표시됩니다</p>
+                </div>
+              </div>
             )}
           </CardContent>
         </Card>
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 65285a7d..9be0f4ee 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -6,7 +6,6 @@ import { WebType } from "@/types/common";
 import { tableTypeApi } from "@/lib/api/screen";
 import { entityJoinApi } from "@/lib/api/entityJoin";
 import { codeCache } from "@/lib/caching/codeCache";
-import { getCategoryLabelsByCodes } from "@/lib/api/tableCategoryValue";
 import { useEntityJoinOptimization } from "@/lib/hooks/useEntityJoinOptimization";
 import { getFullImageUrl } from "@/lib/api/client";
 import { Button } from "@/components/ui/button";
@@ -67,7 +66,6 @@ import { useAuth } from "@/hooks/useAuth";
 import { useScreenContextOptional } from "@/contexts/ScreenContext";
 import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext";
 import type { DataProvidable, DataReceivable, DataReceiverConfig } from "@/types/data-transfer";
-import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
 
 // ========================================
 // 인터페이스
@@ -244,11 +242,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   parentTabsComponentId,
   companyCode,
 }) => {
-  // ========================================
-  // 다국어 번역 훅
-  // ========================================
-  const { getTranslatedText } = useScreenMultiLang();
-
   // ========================================
   // 설정 및 스타일
   // ========================================
@@ -486,7 +479,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     }
 
     // 2. 헤더 필터 적용 (joinColumnMapping 사용 안 함 - 직접 컬럼명 사용)
-    // 🆕 다중 값 지원: 셀 값이 "A,B,C" 형태일 때, 필터에서 "A"를 선택하면 해당 행도 표시
     if (Object.keys(headerFilters).length > 0) {
       result = result.filter((row) => {
         return Object.entries(headerFilters).every(([columnName, values]) => {
@@ -496,16 +488,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           const cellValue = row[columnName] ?? row[columnName.toLowerCase()] ?? row[columnName.toUpperCase()];
           const cellStr = cellValue !== null && cellValue !== undefined ? String(cellValue) : "";
 
-          // 정확히 일치하는 경우
-          if (values.has(cellStr)) return true;
-
-          // 다중 값인 경우: 콤마로 분리해서 하나라도 포함되면 true
-          if (cellStr.includes(",")) {
-            const cellValues = cellStr.split(",").map(v => v.trim());
-            return cellValues.some(v => values.has(v));
-          }
-
-          return false;
+          return values.has(cellStr);
         });
       });
     }
@@ -1053,16 +1036,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       onGroupSumChange: setGroupSumConfig, // 그룹별 합산 설정
       // 틀고정 컬럼 관련
       frozenColumnCount, // 현재 틀고정 컬럼 수
-      onFrozenColumnCountChange: (count: number, updatedColumns?: Array<{ columnName: string; visible: boolean }>) => {
+      onFrozenColumnCountChange: (count: number) => {
         setFrozenColumnCount(count);
         // 체크박스 컬럼은 항상 틀고정에 포함
         const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : [];
         // 표시 가능한 컬럼 중 처음 N개를 틀고정 컬럼으로 설정
-        // updatedColumns가 전달되면 그것을 사용, 아니면 columnsToRegister 사용
-        const colsToUse = updatedColumns || columnsToRegister;
-        const visibleCols = colsToUse
+        const visibleCols = columnsToRegister
           .filter((col) => col.visible !== false)
-          .map((col) => col.columnName || (col as any).field);
+          .map((col) => col.columnName || col.field);
         const newFrozenColumns = [...checkboxColumn, ...visibleCols.slice(0, count)];
         setFrozenColumns(newFrozenColumns);
       },
@@ -2073,7 +2054,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     return row.id || row.uuid || `row-${index}`;
   };
 
-  const handleRowSelection = (rowKey: string, checked: boolean, rowData?: any) => {
+  const handleRowSelection = (rowKey: string, checked: boolean) => {
     const newSelectedRows = new Set(selectedRows);
     if (checked) {
       newSelectedRows.add(rowKey);
@@ -2110,31 +2091,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       });
     }
 
-    // 🆕 분할 패널 컨텍스트에 선택된 데이터 저장/해제 (체크박스 선택 시에도 작동)
-    const effectiveSplitPosition = splitPanelPosition || currentSplitPosition;
-    if (splitPanelContext && effectiveSplitPosition === "left" && !splitPanelContext.disableAutoDataTransfer) {
-      if (checked && selectedRowsData.length > 0) {
-        // 선택된 경우: 첫 번째 선택된 데이터 저장 (또는 전달된 rowData)
-        const dataToStore = rowData || selectedRowsData[selectedRowsData.length - 1];
-        splitPanelContext.setSelectedLeftData(dataToStore);
-        console.log("🔗 [TableList] handleRowSelection - 분할 패널 좌측 데이터 저장:", {
-          rowKey,
-          dataToStore,
-        });
-      } else if (!checked && selectedRowsData.length === 0) {
-        // 모든 선택이 해제된 경우: 데이터 초기화
-        splitPanelContext.setSelectedLeftData(null);
-        console.log("🔗 [TableList] handleRowSelection - 분할 패널 좌측 데이터 초기화");
-      } else if (selectedRowsData.length > 0) {
-        // 일부 선택 해제된 경우: 남은 첫 번째 데이터로 업데이트
-        splitPanelContext.setSelectedLeftData(selectedRowsData[0]);
-        console.log("🔗 [TableList] handleRowSelection - 분할 패널 좌측 데이터 업데이트:", {
-          remainingCount: selectedRowsData.length,
-          firstData: selectedRowsData[0],
-        });
-      }
-    }
-
     const allRowsSelected = filteredData.every((row, index) => newSelectedRows.has(getRowKey(row, index)));
     setIsAllSelected(allRowsSelected && filteredData.length > 0);
   };
@@ -2199,8 +2155,35 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     const rowKey = getRowKey(row, index);
     const isCurrentlySelected = selectedRows.has(rowKey);
 
-    // handleRowSelection에서 분할 패널 데이터 처리도 함께 수행됨
-    handleRowSelection(rowKey, !isCurrentlySelected, row);
+    handleRowSelection(rowKey, !isCurrentlySelected);
+
+    // 🆕 분할 패널 컨텍스트에 선택된 데이터 저장 (좌측 화면인 경우)
+    // disableAutoDataTransfer가 true이면 자동 전달 비활성화 (버튼 클릭으로만 전달)
+    // currentSplitPosition을 사용하여 정확한 위치 확인 (splitPanelPosition이 없을 수 있음)
+    const effectiveSplitPosition = splitPanelPosition || currentSplitPosition;
+
+    console.log("🔗 [TableList] 행 클릭 - 분할 패널 위치 확인:", {
+      splitPanelPosition,
+      currentSplitPosition,
+      effectiveSplitPosition,
+      hasSplitPanelContext: !!splitPanelContext,
+      disableAutoDataTransfer: splitPanelContext?.disableAutoDataTransfer,
+    });
+
+    if (splitPanelContext && effectiveSplitPosition === "left" && !splitPanelContext.disableAutoDataTransfer) {
+      if (!isCurrentlySelected) {
+        // 선택된 경우: 데이터 저장
+        splitPanelContext.setSelectedLeftData(row);
+        console.log("🔗 [TableList] 분할 패널 좌측 데이터 저장:", {
+          row,
+          parentDataMapping: splitPanelContext.parentDataMapping,
+        });
+      } else {
+        // 선택 해제된 경우: 데이터 초기화
+        splitPanelContext.setSelectedLeftData(null);
+        console.log("🔗 [TableList] 분할 패널 좌측 데이터 초기화");
+      }
+    }
 
     console.log("행 클릭:", { row, index, isSelected: !isCurrentlySelected });
   };
@@ -2267,176 +2250,30 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   // 🆕 편집 모드 진입 placeholder (실제 구현은 visibleColumns 정의 후)
   const startEditingRef = useRef<() => void>(() => {});
 
-  // 🆕 카테고리 라벨 매핑 (API에서 가져온 것)
-  const [categoryLabelCache, setCategoryLabelCache] = useState<Record<string, string>>({});
-
-  // 🆕 각 컬럼의 고유값 목록 계산 (라벨 포함)
+  // 🆕 각 컬럼의 고유값 목록 계산
   const columnUniqueValues = useMemo(() => {
-    const result: Record<string, Array<{ value: string; label: string }>> = {};
+    const result: Record<string, string[]> = {};
 
     if (data.length === 0) return result;
 
-    // 🆕 전체 데이터에서 개별 값 -> 라벨 매핑 테이블 구축 (다중 값 처리용)
-    const globalLabelMap: Record<string, Map<string, string>> = {};
-    
     (tableConfig.columns || []).forEach((column: { columnName: string }) => {
       if (column.columnName === "__checkbox__") return;
 
       const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
-      // 라벨 컬럼 후보들 (백엔드에서 _name, _label, _value_label 등으로 반환할 수 있음)
-      const labelColumnCandidates = [
-        `${column.columnName}_name`,        // 예: division_name
-        `${column.columnName}_label`,       // 예: division_label
-        `${column.columnName}_value_label`, // 예: division_value_label
-      ];
-      const valuesMap = new Map<string, string>(); // value -> label
-      const singleValueLabelMap = new Map<string, string>(); // 개별 값 -> 라벨 (다중값 처리용)
+      const values = new Set<string>();
 
-      // 1차: 모든 데이터에서 개별 값 -> 라벨 매핑 수집 (단일값 + 다중값 모두)
       data.forEach((row) => {
         const val = row[mappedColumnName];
         if (val !== null && val !== undefined && val !== "") {
-          const valueStr = String(val);
-          
-          // 라벨 컬럼에서 라벨 찾기
-          let labelStr = "";
-          for (const labelCol of labelColumnCandidates) {
-            if (row[labelCol] && row[labelCol] !== "") {
-              labelStr = String(row[labelCol]);
-              break;
-            }
-          }
-          
-          // 단일 값인 경우
-          if (!valueStr.includes(",")) {
-            if (labelStr) {
-              singleValueLabelMap.set(valueStr, labelStr);
-            }
-          } else {
-            // 다중 값인 경우: 값과 라벨을 각각 분리해서 매핑
-            const individualValues = valueStr.split(",").map(v => v.trim());
-            const individualLabels = labelStr ? labelStr.split(",").map(l => l.trim()) : [];
-            
-            // 값과 라벨 개수가 같으면 1:1 매핑
-            if (individualValues.length === individualLabels.length) {
-              individualValues.forEach((v, idx) => {
-                if (individualLabels[idx] && !singleValueLabelMap.has(v)) {
-                  singleValueLabelMap.set(v, individualLabels[idx]);
-                }
-              });
-            }
-          }
+          values.add(String(val));
         }
       });
 
-      // 2차: 모든 값 처리 (다중 값 포함) - 필터 목록용
-      data.forEach((row) => {
-        const val = row[mappedColumnName];
-        if (val !== null && val !== undefined && val !== "") {
-          const valueStr = String(val);
-          
-          // 콤마로 구분된 다중 값인지 확인
-          if (valueStr.includes(",")) {
-            // 다중 값: 각각 분리해서 개별 라벨 찾기
-            const individualValues = valueStr.split(",").map(v => v.trim());
-            // 🆕 singleValueLabelMap → categoryLabelCache 순으로 라벨 찾기
-            const individualLabels = individualValues.map(v => 
-              singleValueLabelMap.get(v) || categoryLabelCache[v] || v
-            );
-            valuesMap.set(valueStr, individualLabels.join(", "));
-          } else {
-            // 단일 값: 매핑에서 찾거나 캐시에서 찾거나 원본 사용
-            const label = singleValueLabelMap.get(valueStr) || categoryLabelCache[valueStr] || valueStr;
-            valuesMap.set(valueStr, label);
-          }
-        }
-      });
-
-      globalLabelMap[column.columnName] = singleValueLabelMap;
-
-      // value-label 쌍으로 저장하고 라벨 기준 정렬
-      result[column.columnName] = Array.from(valuesMap.entries())
-        .map(([value, label]) => ({ value, label }))
-        .sort((a, b) => a.label.localeCompare(b.label));
+      result[column.columnName] = Array.from(values).sort();
     });
 
     return result;
-  }, [data, tableConfig.columns, joinColumnMapping, categoryLabelCache]);
-
-  // 🆕 라벨을 못 찾은 CATEGORY_ 코드들을 API로 조회
-  useEffect(() => {
-    const unlabeledCodes = new Set<string>();
-    
-    // columnUniqueValues에서 라벨이 코드 그대로인 항목 찾기
-    Object.values(columnUniqueValues).forEach(items => {
-      items.forEach(item => {
-        // 라벨에 CATEGORY_가 포함되어 있으면 라벨을 못 찾은 것
-        if (item.label.includes("CATEGORY_")) {
-          // 콤마로 분리해서 개별 코드 추출
-          const codes = item.label.split(",").map(c => c.trim());
-          codes.forEach(code => {
-            if (code.startsWith("CATEGORY_") && !categoryLabelCache[code]) {
-              unlabeledCodes.add(code);
-            }
-          });
-        }
-      });
-    });
-
-    if (unlabeledCodes.size === 0) return;
-
-    // API로 라벨 조회
-    const fetchLabels = async () => {
-      try {
-        const response = await getCategoryLabelsByCodes(Array.from(unlabeledCodes));
-        if (response.success && response.data) {
-          setCategoryLabelCache(prev => ({ ...prev, ...response.data }));
-        }
-      } catch (error) {
-        console.error("카테고리 라벨 조회 실패:", error);
-      }
-    };
-
-    fetchLabels();
-  }, [columnUniqueValues, categoryLabelCache]);
-
-  // 🆕 데이터에서 CATEGORY_ 코드를 찾아 라벨 미리 로드 (테이블 셀 렌더링용)
-  useEffect(() => {
-    if (data.length === 0) return;
-
-    const categoryCodesToFetch = new Set<string>();
-
-    // 모든 데이터 행에서 CATEGORY_ 코드 수집
-    data.forEach((row) => {
-      Object.entries(row).forEach(([key, value]) => {
-        if (value && typeof value === "string") {
-          // 콤마로 구분된 다중 값도 처리
-          const codes = value.split(",").map((v) => v.trim());
-          codes.forEach((code) => {
-            if (code.startsWith("CATEGORY_") && !categoryLabelCache[code]) {
-              categoryCodesToFetch.add(code);
-            }
-          });
-        }
-      });
-    });
-
-    if (categoryCodesToFetch.size === 0) return;
-
-    // API로 라벨 조회
-    const fetchLabels = async () => {
-      try {
-        const response = await getCategoryLabelsByCodes(Array.from(categoryCodesToFetch));
-        if (response.success && response.data && Object.keys(response.data).length > 0) {
-          setCategoryLabelCache((prev) => ({ ...prev, ...response.data }));
-        }
-      } catch (error) {
-        console.error("CATEGORY_ 라벨 조회 실패:", error);
-      }
-    };
-
-    fetchLabels();
-  }, [data, categoryLabelCache]);
+  }, [data, tableConfig.columns, joinColumnMapping]);
 
   // 🆕 헤더 필터 토글
   const toggleHeaderFilter = useCallback((columnName: string, value: string) => {
@@ -4081,7 +3918,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           if (enterRow) {
             const rowKey = getRowKey(enterRow, rowIndex);
             const isCurrentlySelected = selectedRows.has(rowKey);
-            handleRowSelection(rowKey, !isCurrentlySelected, enterRow);
+            handleRowSelection(rowKey, !isCurrentlySelected);
           }
           break;
         case " ": // Space
@@ -4091,7 +3928,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           if (spaceRow) {
             const currentRowKey = getRowKey(spaceRow, rowIndex);
             const isChecked = selectedRows.has(currentRowKey);
-            handleRowSelection(currentRowKey, !isChecked, spaceRow);
+            handleRowSelection(currentRowKey, !isChecked);
           }
           break;
         case "F2":
@@ -4305,7 +4142,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     return (
       <Checkbox
         checked={isChecked}
-        onCheckedChange={(checked) => handleRowSelection(rowKey, checked as boolean, row)}
+        onCheckedChange={(checked) => handleRowSelection(rowKey, checked as boolean)}
         aria-label={`행 ${index + 1} 선택`}
       />
     );
@@ -4594,36 +4431,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         case "boolean":
           return value ? "예" : "아니오";
         default:
-          // 🆕 CATEGORY_ 코드 자동 변환 (inputType이 category가 아니어도)
-          const strValue = String(value);
-          if (strValue.startsWith("CATEGORY_")) {
-            // rowData에서 _label 필드 찾기
-            if (rowData) {
-              const labelFieldCandidates = [
-                `${column.columnName}_label`,
-                `${column.columnName}_name`,
-                `${column.columnName}_value_label`,
-              ];
-              for (const labelField of labelFieldCandidates) {
-                if (rowData[labelField] && rowData[labelField] !== "") {
-                  return String(rowData[labelField]);
-                }
-              }
-            }
-            // categoryMappings에서 찾기
-            const mapping = categoryMappings[column.columnName];
-            if (mapping && mapping[strValue]) {
-              return mapping[strValue].label;
-            }
-            // categoryLabelCache에서 찾기 (필터용 캐시)
-            if (categoryLabelCache[strValue]) {
-              return categoryLabelCache[strValue];
-            }
-          }
-          return strValue;
+          return String(value);
       }
     },
-    [columnMeta, joinedColumnMeta, optimizedConvertCode, categoryMappings, categoryLabelCache],
+    [columnMeta, joinedColumnMeta, optimizedConvertCode, categoryMappings],
   );
 
   // ========================================
@@ -4762,22 +4573,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       });
       setColumnWidths(newWidths);
 
-      // 틀고정 컬럼 업데이트 (보이는 컬럼 기준으로 처음 N개를 틀고정)
-      // 기존 frozen 개수를 유지하면서, 숨겨진 컬럼을 제외한 보이는 컬럼 중 처음 N개를 틀고정
-      const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : [];
-      const visibleCols = config.columns
-        .filter((col) => col.visible && col.columnName !== "__checkbox__")
-        .map((col) => col.columnName);
-      
-      // 현재 설정된 frozen 컬럼 개수 (체크박스 제외)
-      const currentFrozenCount = config.columns.filter(
-        (col) => col.frozen && col.columnName !== "__checkbox__"
-      ).length;
-      
-      // 보이는 컬럼 중 처음 currentFrozenCount개를 틀고정으로 설정
-      const newFrozenColumns = [...checkboxColumn, ...visibleCols.slice(0, currentFrozenCount)];
+      // 틀고정 컬럼 업데이트
+      const newFrozenColumns = config.columns.filter((col) => col.frozen).map((col) => col.columnName);
       setFrozenColumns(newFrozenColumns);
-      setFrozenColumnCount(currentFrozenCount);
 
       // 그리드선 표시 업데이트
       setShowGridLines(config.showGridLines);
@@ -5878,10 +5676,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             rowSpan={2}
                             className="border-primary/10 border-r px-2 py-1 text-center text-xs font-semibold sm:px-4 sm:text-sm"
                           >
-                            {/* langKey가 있으면 다국어 번역 사용 */}
-                            {(column as any).langKey 
-                              ? getTranslatedText((column as any).langKey, columnLabels[column.columnName] || column.columnName)
-                              : columnLabels[column.columnName] || column.columnName}
+                            {columnLabels[column.columnName] || column.columnName}
                           </th>
                         );
                       }
@@ -5900,18 +5695,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   {visibleColumns.map((column, columnIndex) => {
                     const columnWidth = columnWidths[column.columnName];
                     const isFrozen = frozenColumns.includes(column.columnName);
-                    
-                    // 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
-                    // 숨겨진 컬럼은 제외하고 보이는 틀고정 컬럼만 포함
-                    const visibleFrozenColumns = visibleColumns
-                      .filter(col => frozenColumns.includes(col.columnName))
-                      .map(col => col.columnName);
-                    const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
-                    
+                    const frozenIndex = frozenColumns.indexOf(column.columnName);
+
+                    // 틀고정된 컬럼의 left 위치 계산
                     let leftPosition = 0;
                     if (isFrozen && frozenIndex > 0) {
                       for (let i = 0; i < frozenIndex; i++) {
-                        const frozenCol = visibleFrozenColumns[i];
+                        const frozenCol = frozenColumns[i];
                         // 체크박스 컬럼은 48px 고정
                         const frozenColWidth = frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
                         leftPosition += frozenColWidth;
@@ -5977,12 +5767,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 <Lock className="text-muted-foreground h-3 w-3" />
                               </span>
                             )}
-                            <span>
-                              {/* langKey가 있으면 다국어 번역 사용 */}
-                              {(column as any).langKey 
-                                ? getTranslatedText((column as any).langKey, columnLabels[column.columnName] || column.displayName || column.columnName)
-                                : columnLabels[column.columnName] || column.displayName}
-                            </span>
+                            <span>{columnLabels[column.columnName] || column.displayName}</span>
                             {column.sortable !== false && sortColumn === column.columnName && (
                               <span>{sortDirection === "asc" ? "↑" : "↓"}</span>
                             )}
@@ -6030,16 +5815,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                         )}
                                       </div>
                                       <div className="max-h-48 space-y-1 overflow-y-auto">
-                                        {columnUniqueValues[column.columnName]?.slice(0, 50).map((item) => {
-                                          const isSelected = headerFilters[column.columnName]?.has(item.value);
+                                        {columnUniqueValues[column.columnName]?.slice(0, 50).map((val) => {
+                                          const isSelected = headerFilters[column.columnName]?.has(val);
                                           return (
                                             <div
-                                              key={item.value}
+                                              key={val}
                                               className={cn(
                                                 "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1 text-xs",
                                                 isSelected && "bg-primary/10",
                                               )}
-                                              onClick={() => toggleHeaderFilter(column.columnName, item.value)}
+                                              onClick={() => toggleHeaderFilter(column.columnName, val)}
                                             >
                                               <div
                                                 className={cn(
@@ -6049,7 +5834,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                               >
                                                 {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
                                               </div>
-                                              <span className="truncate">{item.label || "(빈 값)"}</span>
+                                              <span className="truncate">{val || "(빈 값)"}</span>
                                             </div>
                                           );
                                         })}
@@ -6222,17 +6007,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 const isNumeric = inputType === "number" || inputType === "decimal";
 
                                 const isFrozen = frozenColumns.includes(column.columnName);
-                                
-                                // 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
-                                const visibleFrozenColumns = visibleColumns
-                                  .filter(col => frozenColumns.includes(col.columnName))
-                                  .map(col => col.columnName);
-                                const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
+                                const frozenIndex = frozenColumns.indexOf(column.columnName);
 
+                                // 틀고정된 컬럼의 left 위치 계산
                                 let leftPosition = 0;
                                 if (isFrozen && frozenIndex > 0) {
                                   for (let i = 0; i < frozenIndex; i++) {
-                                    const frozenCol = visibleFrozenColumns[i];
+                                    const frozenCol = frozenColumns[i];
                                     // 체크박스 컬럼은 48px 고정
                                     const frozenColWidth =
                                       frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
@@ -6379,12 +6160,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             const isNumeric = inputType === "number" || inputType === "decimal";
 
                             const isFrozen = frozenColumns.includes(column.columnName);
-                            
-                            // 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
-                            const visibleFrozenColumns = visibleColumns
-                              .filter(col => frozenColumns.includes(col.columnName))
-                              .map(col => col.columnName);
-                            const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
+                            const frozenIndex = frozenColumns.indexOf(column.columnName);
 
                             // 셀 포커스 상태
                             const isCellFocused = focusedCell?.rowIndex === index && focusedCell?.colIndex === colIndex;
@@ -6398,10 +6174,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             // 🆕 검색 하이라이트 여부
                             const isSearchHighlighted = searchHighlights.has(`${index}-${colIndex}`);
 
+                            // 틀고정된 컬럼의 left 위치 계산
                             let leftPosition = 0;
                             if (isFrozen && frozenIndex > 0) {
                               for (let i = 0; i < frozenIndex; i++) {
-                                const frozenCol = visibleFrozenColumns[i];
+                                const frozenCol = frozenColumns[i];
                                 // 체크박스 컬럼은 48px 고정
                                 const frozenColWidth =
                                   frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
@@ -6561,17 +6338,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                       const summary = summaryData[column.columnName];
                       const columnWidth = columnWidths[column.columnName];
                       const isFrozen = frozenColumns.includes(column.columnName);
-                      
-                      // 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
-                      const visibleFrozenColumns = visibleColumns
-                        .filter(col => frozenColumns.includes(col.columnName))
-                        .map(col => col.columnName);
-                      const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
+                      const frozenIndex = frozenColumns.indexOf(column.columnName);
 
+                      // 틀고정된 컬럼의 left 위치 계산
                       let leftPosition = 0;
                       if (isFrozen && frozenIndex > 0) {
                         for (let i = 0; i < frozenIndex; i++) {
-                          const frozenCol = visibleFrozenColumns[i];
+                          const frozenCol = frozenColumns[i];
                           // 체크박스 컬럼은 48px 고정
                           const frozenColWidth = frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
                           leftPosition += frozenColWidth;
diff --git a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
index 57c50c58..939bb5d5 100644
--- a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
@@ -427,10 +427,17 @@ export function UniversalFormModalComponent({
       }
 
       // 🆕 테이블 섹션 데이터 병합 (품목 리스트 등)
+      // 참고: initializeForm에서 DB 로드 시 __tableSection_ (더블), 
+      //       handleTableDataChange에서 수정 시 _tableSection_ (싱글) 사용
       for (const [key, value] of Object.entries(formData)) {
-        if (key.startsWith("_tableSection_") && Array.isArray(value)) {
-          event.detail.formData[key] = value;
-          console.log(`[UniversalFormModal] 테이블 섹션 병합: ${key}, ${value.length}개 항목`);
+        // 싱글/더블 언더스코어 모두 처리
+        if ((key.startsWith("_tableSection_") || key.startsWith("__tableSection_")) && Array.isArray(value)) {
+          // 저장 시에는 _tableSection_ 키로 통일 (buttonActions.ts에서 이 키를 기대)
+          const normalizedKey = key.startsWith("__tableSection_") 
+            ? key.replace("__tableSection_", "_tableSection_") 
+            : key;
+          event.detail.formData[normalizedKey] = value;
+          console.log(`[UniversalFormModal] 테이블 섹션 병합: ${key} → ${normalizedKey}, ${value.length}개 항목`);
         }
       }
 
@@ -920,6 +927,19 @@ export function UniversalFormModalComponent({
             const tableSectionKey = `__tableSection_${section.id}`;
             newFormData[tableSectionKey] = items;
             console.log(`[initializeForm] 테이블 섹션 ${section.id}: formData[${tableSectionKey}]에 저장됨`);
+
+            // 🆕 원본 그룹 데이터 저장 (삭제 추적용)
+            // groupedDataInitializedRef가 false일 때만 설정 (true면 _groupedData useEffect에서 이미 처리됨)
+            // DB에서 로드한 데이터를 originalGroupedData에 저장해야 삭제 시 비교 가능
+            if (!groupedDataInitializedRef.current) {
+              setOriginalGroupedData((prev) => {
+                const newOriginal = [...prev, ...JSON.parse(JSON.stringify(items))];
+                console.log(`[initializeForm] 테이블 섹션 ${section.id}: originalGroupedData에 ${items.length}건 추가 (총 ${newOriginal.length}건)`);
+                return newOriginal;
+              });
+            } else {
+              console.log(`[initializeForm] 테이블 섹션 ${section.id}: _groupedData로 이미 초기화됨, originalGroupedData 설정 스킵`);
+            }
           }
         } catch (error) {
           console.error(`[initializeForm] 테이블 섹션 ${section.id}: 디테일 데이터 로드 실패`, error);
diff --git a/frontend/lib/utils/buttonActions.ts b/frontend/lib/utils/buttonActions.ts
index d0607be1..65aef991 100644
--- a/frontend/lib/utils/buttonActions.ts
+++ b/frontend/lib/utils/buttonActions.ts
@@ -713,6 +713,47 @@ export class ButtonActionExecutor {
     if (repeaterJsonKeys.length > 0) {
       console.log("🔄 [handleSave] RepeaterFieldGroup JSON 문자열 감지:", repeaterJsonKeys);
       
+      // 🎯 채번 규칙 할당 처리 (RepeaterFieldGroup 저장 전에 실행)
+      console.log("🔍 [handleSave-RepeaterFieldGroup] 채번 규칙 할당 체크 시작");
+      
+      const fieldsWithNumberingRepeater: Record<string, string> = {};
+      
+      // formData에서 채번 규칙이 설정된 필드 찾기
+      for (const [key, value] of Object.entries(context.formData)) {
+        if (key.endsWith("_numberingRuleId") && value) {
+          const fieldName = key.replace("_numberingRuleId", "");
+          fieldsWithNumberingRepeater[fieldName] = value as string;
+          console.log(`🎯 [handleSave-RepeaterFieldGroup] 채번 필드 발견: ${fieldName} → 규칙 ${value}`);
+        }
+      }
+      
+      console.log("📋 [handleSave-RepeaterFieldGroup] 채번 규칙이 설정된 필드:", fieldsWithNumberingRepeater);
+      
+      // 채번 규칙이 있는 필드에 대해 allocateCode 호출
+      if (Object.keys(fieldsWithNumberingRepeater).length > 0) {
+        console.log("🎯 [handleSave-RepeaterFieldGroup] 채번 규칙 할당 시작 (allocateCode 호출)");
+        const { allocateNumberingCode } = await import("@/lib/api/numberingRule");
+        
+        for (const [fieldName, ruleId] of Object.entries(fieldsWithNumberingRepeater)) {
+          try {
+            console.log(`🔄 [handleSave-RepeaterFieldGroup] ${fieldName} 필드에 대해 allocateCode 호출: ${ruleId}`);
+            const allocateResult = await allocateNumberingCode(ruleId);
+            
+            if (allocateResult.success && allocateResult.data?.generatedCode) {
+              const newCode = allocateResult.data.generatedCode;
+              console.log(`✅ [handleSave-RepeaterFieldGroup] ${fieldName} 새 코드 할당: ${context.formData[fieldName]} → ${newCode}`);
+              context.formData[fieldName] = newCode;
+            } else {
+              console.warn(`⚠️ [handleSave-RepeaterFieldGroup] ${fieldName} 코드 할당 실패:`, allocateResult.error);
+            }
+          } catch (allocateError) {
+            console.error(`❌ [handleSave-RepeaterFieldGroup] ${fieldName} 코드 할당 오류:`, allocateError);
+          }
+        }
+      }
+      
+      console.log("✅ [handleSave-RepeaterFieldGroup] 채번 규칙 할당 완료");
+      
       // 🆕 상단 폼 데이터(마스터 정보) 추출
       // RepeaterFieldGroup JSON과 컴포넌트 키를 제외한 나머지가 마스터 정보
       const masterFields: Record<string, any> = {};
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 35411799..1558865e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,6 +17,7 @@
         "@radix-ui/react-avatar": "^1.1.0",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-collapsible": "^1.1.12",
+        "@radix-ui/react-context-menu": "^2.2.16",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.1",
         "@radix-ui/react-label": "^2.1.7",
@@ -1715,6 +1716,34 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz",
+      "integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dialog": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index b68d13db..f3b0371d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,6 +25,7 @@
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.7",
diff --git a/frontend/types/repeater.ts b/frontend/types/repeater.ts
index 9151a65f..2362210b 100644
--- a/frontend/types/repeater.ts
+++ b/frontend/types/repeater.ts
@@ -95,6 +95,7 @@ export interface RepeaterFieldGroupConfig {
   layout?: "grid" | "card"; // 레이아웃 타입: grid(테이블 행) 또는 card(카드 형식)
   showDivider?: boolean; // 항목 사이 구분선 표시 (카드 모드일 때만)
   emptyMessage?: string; // 항목이 없을 때 메시지
+  subDataLookup?: SubDataLookupConfig; // 하위 데이터 조회 설정 (재고, 단가 등)
 }
 
 /**
@@ -106,3 +107,71 @@ export type RepeaterItemData = Record<string, any>;
  * 반복 그룹 전체 데이터 (배열)
  */
 export type RepeaterData = RepeaterItemData[];
+
+// ============================================================
+// 하위 데이터 조회 설정 (Sub Data Lookup)
+// 품목 선택 시 재고/단가 등 관련 데이터를 조회하고 선택하는 기능
+// ============================================================
+
+/**
+ * 하위 데이터 조회 테이블 설정
+ */
+export interface SubDataLookupSettings {
+  tableName: string; // 조회할 테이블 (예: inventory, price_list)
+  linkColumn: string; // 상위 데이터와 연결할 컬럼 (예: item_code)
+  displayColumns: string[]; // 표시할 컬럼들 (예: ["warehouse_code", "location_code", "quantity"])
+  columnLabels?: Record<string, string>; // 컬럼 라벨 (예: { warehouse_code: "창고" })
+  additionalFilters?: Record<string, any>; // 추가 필터 조건
+}
+
+/**
+ * 하위 데이터 선택 설정
+ */
+export interface SubDataSelectionSettings {
+  mode: "single" | "multiple"; // 단일/다중 선택
+  requiredFields: string[]; // 필수 선택 필드 (예: ["warehouse_code"])
+  requiredMode?: "any" | "all"; // 필수 조건: "any" = 하나만, "all" = 모두 (기본: "all")
+}
+
+/**
+ * 조건부 입력 활성화 설정
+ */
+export interface ConditionalInputSettings {
+  targetField: string; // 활성화할 입력 필드 (예: "outbound_qty")
+  maxValueField?: string; // 최대값 참조 필드 (예: "quantity" - 재고 수량)
+  warningThreshold?: number; // 경고 임계값 (퍼센트, 예: 90)
+  errorMessage?: string; // 에러 메시지
+}
+
+/**
+ * 하위 데이터 UI 설정
+ */
+export interface SubDataUISettings {
+  expandMode: "inline" | "modal"; // 확장 방식 (인라인 또는 모달)
+  maxHeight?: string; // 최대 높이 (예: "150px")
+  showSummary?: boolean; // 요약 정보 표시
+  emptyMessage?: string; // 데이터 없을 때 메시지
+}
+
+/**
+ * 하위 데이터 조회 전체 설정
+ */
+export interface SubDataLookupConfig {
+  enabled: boolean; // 기능 활성화 여부
+  lookup: SubDataLookupSettings; // 조회 설정
+  selection: SubDataSelectionSettings; // 선택 설정
+  conditionalInput: ConditionalInputSettings; // 조건부 입력 설정
+  ui?: SubDataUISettings; // UI 설정
+}
+
+/**
+ * 하위 데이터 상태 (런타임)
+ */
+export interface SubDataState {
+  itemIndex: number; // 상위 항목 인덱스
+  data: any[]; // 조회된 하위 데이터
+  selectedItem: any | null; // 선택된 하위 항목
+  isLoading: boolean; // 로딩 상태
+  error: string | null; // 에러 메시지
+  isExpanded: boolean; // 확장 상태
+}