Merge pull request 'lhj' (#372) from lhj into main

Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/372

.cursor/rules/multilang-component-guide.mdc

@@ -140,7 +140,7 @@ if (comp.componentType === "my-new-component") {
   if (config?.title) {
     addLabel({
       id: `${comp.id}_title`,
-      componentId: `${comp.id}_title`,
+      componentId: `${comp.id}_title`,-
       label: config.title,
       type: "title",
       parentType: "my-new-component",

PLAN.MD

@@ -1,4 +1,72 @@
-# 프로젝트: 외부 REST API 커넥션 관리 확장 (POST/Body 지원)
+# 프로젝트: 화면 관리 기능 개선 (복제/삭제/그룹 관리/테이블 설정)
+
+## 개요
+화면 관리 시스템의 복제, 삭제, 수정, 테이블 설정 기능을 전면 개선하여 효율적인 화면 관리를 지원합니다.
+
+## 핵심 기능
+
+### 1. 단일 화면 복제
+- [x] 우클릭 컨텍스트 메뉴에서 "복제" 선택
+- [x] 화면명, 화면 코드 자동 생성 (중복 시 `_COPY` 접미사 추가)
+- [x] 연결된 모달 화면 함께 복제
+- [x] 대상 그룹 선택 가능
+- [x] 복제 후 목록 자동 새로고침
+
+### 2. 그룹(폴더) 전체 복제
+- [x] 대분류 폴더 복제 시 모든 하위 폴더 + 화면 재귀적 복제
+- [x] 정렬 순서(display_order) 유지
+- [x] 대분류(최상위 그룹) 복제 시 경고 문구 표시
+- [x] 정렬 순서 입력 필드 추가
+- [x] 복제 모드 선택: 전체(폴더+화면), 폴더만, 화면만
+- [x] 모달 스크롤 지원 (max-h-[90vh] overflow-y-auto)
+
+### 3. 고급 옵션: 이름 일괄 변경
+- [x] 찾을 텍스트 / 대체할 텍스트 (Find & Replace)
+- [x] 미리보기 기능
+
+### 4. 삭제 기능
+- [x] 단일 화면 삭제 (휴지통으로 이동)
+- [x] 그룹 삭제 (화면 함께 삭제 옵션)
+- [x] 삭제 시 로딩 프로그레스 바 표시
+
+### 5. 화면 수정 기능
+- [x] 우클릭 "수정" 메뉴로 화면 이름/그룹/역할/정렬 순서 변경
+- [x] 그룹 추가/수정 시 상위 그룹 기반 자동 회사 코드 설정
+
+### 6. 테이블 설정 기능 (TableSettingModal)
+- [x] 화면 설정 모달에 "테이블 설정" 탭 추가
+- [x] 입력 타입 변경 시 관련 참조 필드 자동 초기화
+  - 엔티티→텍스트: referenceTable, referenceColumn, displayColumn 초기화
+  - 코드→다른 타입: codeCategory, codeValue 초기화
+- [x] 데이터 일관성 유지 (inputType ↔ referenceTable 연동)
+- [x] 조인 배지 단일화 (FK 배지 제거, 조인 배지만 표시)
+
+### 7. 회사 코드 지원 (최고 관리자)
+- [x] 대상 회사 선택 가능
+- [x] 상위 그룹 선택 시 자동 회사 코드 설정
+
+## 관련 파일
+- `frontend/components/screen/CopyScreenModal.tsx` - 복제 모달
+- `frontend/components/screen/ScreenGroupTreeView.tsx` - 트리 뷰 + 컨텍스트 메뉴
+- `frontend/components/screen/TableSettingModal.tsx` - 테이블 설정 모달
+- `frontend/components/screen/ScreenSettingModal.tsx` - 화면 설정 모달 (테이블 설정 탭 포함)
+- `frontend/lib/api/screen.ts` - 화면 API
+- `frontend/lib/api/screenGroup.ts` - 그룹 API
+- `frontend/lib/api/tableManagement.ts` - 테이블 관리 API
+
+## 진행 상태
+- [완료] 단일 화면 복제 + 새로고침
+- [완료] 그룹 전체 복제 (재귀적)
+- [완료] 고급 옵션: 이름 일괄 변경 (Find & Replace)
+- [완료] 단일 화면/그룹 삭제 + 로딩 프로그레스
+- [완료] 화면 수정 (이름/그룹/역할/순서)
+- [완료] 테이블 설정 탭 추가
+- [완료] 입력 타입 변경 시 관련 필드 초기화
+- [완료] 그룹 복제 모달 스크롤 문제 수정
+
+---
+
+# 이전 프로젝트: 외부 REST API 커넥션 관리 확장 (POST/Body 지원)
 
 ## 개요
 현재 GET 방식 위주로 구현된 외부 REST API 커넥션 관리 기능을 확장하여, POST, PUT, DELETE 등 다양한 HTTP 메서드와 JSON Request Body를 설정하고 테스트할 수 있도록 개선합니다. 이를 통해 토큰 발급 API나 데이터 전송 API 등 다양한 외부 시스템과의 연동을 지원합니다.

backend-node/src/controllers/adminController.ts

@@ -1417,6 +1417,75 @@ export async function updateMenu(
   }
 }
 
+/**
+ * 재귀적으로 모든 하위 메뉴 ID를 수집하는 헬퍼 함수
+ */
+async function collectAllChildMenuIds(parentObjid: number): Promise<number[]> {
+  const allIds: number[] = [];
+  
+  // 직접 자식 메뉴들 조회
+  const children = await query<any>(
+    `SELECT objid FROM menu_info WHERE parent_obj_id = $1`,
+    [parentObjid]
+  );
+  
+  for (const child of children) {
+    allIds.push(child.objid);
+    // 자식의 자식들도 재귀적으로 수집
+    const grandChildren = await collectAllChildMenuIds(child.objid);
+    allIds.push(...grandChildren);
+  }
+  
+  return allIds;
+}
+
+/**
+ * 메뉴 및 관련 데이터 정리 헬퍼 함수
+ */
+async function cleanupMenuRelatedData(menuObjid: number): Promise<void> {
+  // 1. category_column_mapping에서 menu_objid를 NULL로 설정
+  await query(
+    `UPDATE category_column_mapping SET menu_objid = NULL WHERE menu_objid = $1`,
+    [menuObjid]
+  );
+  
+  // 2. code_category에서 menu_objid를 NULL로 설정
+  await query(
+    `UPDATE code_category SET menu_objid = NULL WHERE menu_objid = $1`,
+    [menuObjid]
+  );
+  
+  // 3. code_info에서 menu_objid를 NULL로 설정
+  await query(
+    `UPDATE code_info SET menu_objid = NULL WHERE menu_objid = $1`,
+    [menuObjid]
+  );
+  
+  // 4. numbering_rules에서 menu_objid를 NULL로 설정
+  await query(
+    `UPDATE numbering_rules SET menu_objid = NULL WHERE menu_objid = $1`,
+    [menuObjid]
+  );
+  
+  // 5. rel_menu_auth에서 관련 권한 삭제
+  await query(
+    `DELETE FROM rel_menu_auth WHERE menu_objid = $1`,
+    [menuObjid]
+  );
+  
+  // 6. screen_menu_assignments에서 관련 할당 삭제
+  await query(
+    `DELETE FROM screen_menu_assignments WHERE menu_objid = $1`,
+    [menuObjid]
+  );
+  
+  // 7. screen_groups에서 menu_objid를 NULL로 설정
+  await query(
+    `UPDATE screen_groups SET menu_objid = NULL WHERE menu_objid = $1`,
+    [menuObjid]
+  );
+}
+
 /**
  * 메뉴 삭제
  */
@@ -1443,7 +1512,7 @@ export async function deleteMenu(
 
     // 삭제하려는 메뉴 조회
     const currentMenu = await queryOne<any>(
-      `SELECT objid, company_code FROM menu_info WHERE objid = $1`,
+      `SELECT objid, company_code, menu_name_kor FROM menu_info WHERE objid = $1`,
       [Number(menuId)]
     );
 
@@ -1478,67 +1547,50 @@ export async function deleteMenu(
       }
     }
 
-    // 외래키 제약 조건이 있는 관련 테이블 데이터 먼저 정리
     const menuObjid = Number(menuId);
     
-    // 1. category_column_mapping에서 menu_objid를 NULL로 설정
-    await query(
-      `UPDATE category_column_mapping SET menu_objid = NULL WHERE menu_objid = $1`,
-      [menuObjid]
-    );
+    // 하위 메뉴들 재귀적으로 수집
+    const childMenuIds = await collectAllChildMenuIds(menuObjid);
+    const allMenuIdsToDelete = [menuObjid, ...childMenuIds];
     
-    // 2. code_category에서 menu_objid를 NULL로 설정
-    await query(
-      `UPDATE code_category SET menu_objid = NULL WHERE menu_objid = $1`,
-      [menuObjid]
-    );
+    logger.info(`메뉴 삭제 대상: 본인(${menuObjid}) + 하위 메뉴 ${childMenuIds.length}개`, {
+      menuName: currentMenu.menu_name_kor,
+      totalCount: allMenuIdsToDelete.length,
+      childMenuIds,
+    });
 
-    // 3. code_info에서 menu_objid를 NULL로 설정
-    await query(
-      `UPDATE code_info SET menu_objid = NULL WHERE menu_objid = $1`,
-      [menuObjid]
-    );
+    // 모든 삭제 대상 메뉴에 대해 관련 데이터 정리
+    for (const objid of allMenuIdsToDelete) {
+      await cleanupMenuRelatedData(objid);
+    }
 
-    // 4. numbering_rules에서 menu_objid를 NULL로 설정
-    await query(
-      `UPDATE numbering_rules SET menu_objid = NULL WHERE menu_objid = $1`,
-      [menuObjid]
-    );
+    logger.info("메뉴 관련 데이터 정리 완료", { 
+      menuObjid, 
+      totalCleaned: allMenuIdsToDelete.length 
+    });
 
-    // 5. rel_menu_auth에서 관련 권한 삭제
-    await query(
-      `DELETE FROM rel_menu_auth WHERE menu_objid = $1`,
-      [menuObjid]
-    );
+    // 하위 메뉴부터 역순으로 삭제 (외래키 제약 회피)
+    // 가장 깊은 하위부터 삭제해야 하므로 역순으로
+    const reversedIds = [...allMenuIdsToDelete].reverse();
     
-    // 6. screen_menu_assignments에서 관련 할당 삭제
-    await query(
-      `DELETE FROM screen_menu_assignments WHERE menu_objid = $1`,
-      [menuObjid]
-    );
+    for (const objid of reversedIds) {
+      await query(`DELETE FROM menu_info WHERE objid = $1`, [objid]);
+    }
 
-    logger.info("메뉴 관련 데이터 정리 완료", { menuObjid });
-
-    // Raw Query를 사용한 메뉴 삭제
-    const [deletedMenu] = await query<any>(
-      `DELETE FROM menu_info WHERE objid = $1 RETURNING *`,
-      [menuObjid]
-    );
-
-    logger.info("메뉴 삭제 성공", { deletedMenu });
+    logger.info("메뉴 삭제 성공", { 
+      deletedMenuObjid: menuObjid,
+      deletedMenuName: currentMenu.menu_name_kor,
+      totalDeleted: allMenuIdsToDelete.length,
+    });
 
     const response: ApiResponse<any> = {
       success: true,
-      message: "메뉴가 성공적으로 삭제되었습니다.",
+      message: `메뉴가 성공적으로 삭제되었습니다. (하위 메뉴 ${childMenuIds.length}개 포함)`,
       data: {
-        objid: deletedMenu.objid.toString(),
-        menuNameKor: deletedMenu.menu_name_kor,
-        menuNameEng: deletedMenu.menu_name_eng,
-        menuUrl: deletedMenu.menu_url,
-        menuDesc: deletedMenu.menu_desc,
-        status: deletedMenu.status,
-        writer: deletedMenu.writer,
-        regdate: new Date(deletedMenu.regdate).toISOString(),
+        objid: menuObjid.toString(),
+        menuNameKor: currentMenu.menu_name_kor,
+        deletedCount: allMenuIdsToDelete.length,
+        deletedChildCount: childMenuIds.length,
       },
     };
 
@@ -1623,18 +1675,49 @@ export async function deleteMenusBatch(
       }
     }
 
+    // 모든 삭제 대상 메뉴 ID 수집 (하위 메뉴 포함)
+    const allMenuIdsToDelete = new Set<number>();
+    
+    for (const menuId of menuIds) {
+      const objid = Number(menuId);
+      allMenuIdsToDelete.add(objid);
+      
+      // 하위 메뉴들 재귀적으로 수집
+      const childMenuIds = await collectAllChildMenuIds(objid);
+      childMenuIds.forEach(id => allMenuIdsToDelete.add(Number(id)));
+    }
+    
+    const allIdsArray = Array.from(allMenuIdsToDelete);
+    
+    logger.info(`메뉴 일괄 삭제 대상: 선택 ${menuIds.length}개 + 하위 메뉴 포함 총 ${allIdsArray.length}개`, {
+      selectedMenuIds: menuIds,
+      totalWithChildren: allIdsArray.length,
+    });
+
+    // 모든 삭제 대상 메뉴에 대해 관련 데이터 정리
+    for (const objid of allIdsArray) {
+      await cleanupMenuRelatedData(objid);
+    }
+
+    logger.info("메뉴 관련 데이터 정리 완료", { 
+      totalCleaned: allIdsArray.length 
+    });
+
     // Raw Query를 사용한 메뉴 일괄 삭제
     let deletedCount = 0;
     let failedCount = 0;
     const deletedMenus: any[] = [];
     const failedMenuIds: string[] = [];
 
+    // 하위 메뉴부터 삭제하기 위해 역순으로 정렬
+    const reversedIds = [...allIdsArray].reverse();
+
     // 각 메뉴 ID에 대해 삭제 시도
-    for (const menuId of menuIds) {
+    for (const menuObjid of reversedIds) {
       try {
         const result = await query<any>(
           `DELETE FROM menu_info WHERE objid = $1 RETURNING *`,
-          [Number(menuId)]
+          [menuObjid]
         );
 
         if (result.length > 0) {
@@ -1645,20 +1728,20 @@ export async function deleteMenusBatch(
           });
         } else {
           failedCount++;
-          failedMenuIds.push(menuId);
+          failedMenuIds.push(String(menuObjid));
         }
       } catch (error) {
-        logger.error(`메뉴 삭제 실패 (ID: ${menuId}):`, error);
+        logger.error(`메뉴 삭제 실패 (ID: ${menuObjid}):`, error);
         failedCount++;
-        failedMenuIds.push(menuId);
+        failedMenuIds.push(String(menuObjid));
       }
     }
 
     logger.info("메뉴 일괄 삭제 완료", {
-      total: menuIds.length,
+      requested: menuIds.length,
+      totalWithChildren: allIdsArray.length,
       deletedCount,
       failedCount,
-      deletedMenus,
       failedMenuIds,
     });
 

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);
@@ -584,98 +549,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();

backend-node/src/controllers/screenGroupController.ts

@@ -1,22 +1,25 @@
 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";
+import {
+  syncScreenGroupsToMenu,
+  syncMenuToScreenGroups,
+  getSyncStatus,
+  syncAllCompanies,
+} from "../services/menuScreenSyncService";
 
 // pool 인스턴스 가져오기
 const pool = getPool();
 
-// 다국어 서비스 인스턴스
-const multiLangService = new MultiLangService();
-
 // ============================================================
 // 화면 그룹 (screen_groups) CRUD
 // ============================================================
 
 // 화면 그룹 목록 조회
-export const getScreenGroups = async (req: Request, res: Response) => {
+export const getScreenGroups = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user?.companyCode || "*";
     const { page = 1, size = 20, searchTerm } = req.query;
     const offset = (parseInt(page as string) - 1) * parseInt(size as string);
 
@@ -88,10 +91,10 @@ export const getScreenGroups = async (req: Request, res: Response) => {
 };
 
 // 화면 그룹 상세 조회
-export const getScreenGroup = async (req: Request, res: Response) => {
+export const getScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user?.companyCode || "*";
 
     let query = `
       SELECT sg.*,
@@ -134,10 +137,10 @@ export const getScreenGroup = async (req: Request, res: Response) => {
 };
 
 // 화면 그룹 생성
-export const createScreenGroup = async (req: Request, res: Response) => {
+export const createScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const userCompanyCode = (req.user as any).companyCode;
-    const userId = (req.user as any).userId;
+    const userCompanyCode = req.user?.companyCode || "*";
+    const userId = req.user?.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) {
@@ -195,47 +198,6 @@ export const createScreenGroup = async (req: Request, 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: "화면 그룹이 생성되었습니다." });
@@ -249,10 +211,10 @@ export const createScreenGroup = async (req: Request, res: Response) => {
 };
 
 // 화면 그룹 수정
-export const updateScreenGroup = async (req: Request, res: Response) => {
+export const updateScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const userCompanyCode = (req.user as any).companyCode;
+    const userCompanyCode = req.user?.companyCode || "*";
     const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body;
 
     // 회사 코드 결정: 최고 관리자가 특정 회사를 선택한 경우 해당 회사로, 아니면 현재 그룹의 회사 유지
@@ -338,11 +300,36 @@ export const updateScreenGroup = async (req: Request, res: Response) => {
 };
 
 // 화면 그룹 삭제
-export const deleteScreenGroup = async (req: Request, res: Response) => {
+export const deleteScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
+  const client = await pool.connect();
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user?.companyCode || "*";
 
+    await client.query('BEGIN');
+
+    // 1. 삭제할 그룹과 하위 그룹 ID 수집 (CASCADE 삭제 대상)
+    const childGroupsResult = await client.query(`
+      WITH RECURSIVE child_groups AS (
+        SELECT id FROM screen_groups WHERE id = $1
+        UNION ALL
+        SELECT sg.id FROM screen_groups sg
+        JOIN child_groups cg ON sg.parent_group_id = cg.id
+      )
+      SELECT id FROM child_groups
+    `, [id]);
+    const groupIdsToDelete = childGroupsResult.rows.map((r: any) => r.id);
+
+    // 2. menu_info에서 삭제될 screen_group 참조를 NULL로 정리
+    if (groupIdsToDelete.length > 0) {
+      await client.query(`
+        UPDATE menu_info 
+        SET screen_group_id = NULL 
+        WHERE screen_group_id = ANY($1::int[])
+      `, [groupIdsToDelete]);
+    }
+
+    // 3. screen_groups 삭제
     let query = `DELETE FROM screen_groups WHERE id = $1`;
     const params: any[] = [id];
 
@@ -353,18 +340,24 @@ export const deleteScreenGroup = async (req: Request, res: Response) => {
 
     query += " RETURNING id";
 
-    const result = await pool.query(query, params);
+    const result = await client.query(query, params);
 
     if (result.rows.length === 0) {
+      await client.query('ROLLBACK');
       return res.status(404).json({ success: false, message: "화면 그룹을 찾을 수 없거나 권한이 없습니다." });
     }
 
-    logger.info("화면 그룹 삭제", { companyCode, groupId: id });
+    await client.query('COMMIT');
+
+    logger.info("화면 그룹 삭제", { companyCode, groupId: id, cleanedRefs: groupIdsToDelete.length });
 
     res.json({ success: true, message: "화면 그룹이 삭제되었습니다." });
   } catch (error: any) {
+    await client.query('ROLLBACK');
     logger.error("화면 그룹 삭제 실패:", error);
     res.status(500).json({ success: false, message: "화면 그룹 삭제에 실패했습니다.", error: error.message });
+  } finally {
+    client.release();
   }
 };
 
@@ -374,10 +367,10 @@ export const deleteScreenGroup = async (req: Request, res: Response) => {
 // ============================================================
 
 // 그룹에 화면 추가
-export const addScreenToGroup = async (req: Request, res: Response) => {
+export const addScreenToGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
-    const userId = (req.user as any).userId;
+    const companyCode = req.user?.companyCode || "*";
+    const userId = req.user?.userId || "";
     const { group_id, screen_id, screen_role, display_order, is_default } = req.body;
 
     if (!group_id || !screen_id) {
@@ -414,10 +407,10 @@ export const addScreenToGroup = async (req: Request, res: Response) => {
 };
 
 // 그룹에서 화면 제거
-export const removeScreenFromGroup = async (req: Request, res: Response) => {
+export const removeScreenFromGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user?.companyCode || "*";
 
     let query = `DELETE FROM screen_group_screens WHERE id = $1`;
     const params: any[] = [id];
@@ -445,10 +438,10 @@ export const removeScreenFromGroup = async (req: Request, res: Response) => {
 };
 
 // 그룹 내 화면 순서/역할 수정
-export const updateScreenInGroup = async (req: Request, res: Response) => {
+export const updateScreenInGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user?.companyCode || "*";
     const { screen_role, display_order, is_default } = req.body;
 
     let query = `
@@ -484,9 +477,9 @@ export const updateScreenInGroup = async (req: Request, res: Response) => {
 // ============================================================
 
 // 화면 필드 조인 목록 조회
-export const getFieldJoins = async (req: Request, res: Response) => {
+export const getFieldJoins = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user?.companyCode || "*";
     const { screen_id } = req.query;
 
     let query = `
@@ -525,10 +518,10 @@ export const getFieldJoins = async (req: Request, res: Response) => {
 };
 
 // 화면 필드 조인 생성
-export const createFieldJoin = async (req: Request, res: Response) => {
+export const createFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
-    const userId = (req.user as any).userId;
+    const companyCode = req.user?.companyCode || "*";
+    const userId = req.user?.userId || "";
     const { 
       screen_id, layout_id, component_id, field_name,
       save_table, save_column, join_table, join_column, display_column,
@@ -566,10 +559,10 @@ export const createFieldJoin = async (req: Request, res: Response) => {
 };
 
 // 화면 필드 조인 수정
-export const updateFieldJoin = async (req: Request, res: Response) => {
+export const updateFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user?.companyCode || "*";
     const { 
       layout_id, component_id, field_name,
       save_table, save_column, join_table, join_column, display_column,
@@ -611,10 +604,10 @@ export const updateFieldJoin = async (req: Request, res: Response) => {
 };
 
 // 화면 필드 조인 삭제
-export const deleteFieldJoin = async (req: Request, res: Response) => {
+export const deleteFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user?.companyCode || "*";
 
     let query = `DELETE FROM screen_field_joins WHERE id = $1`;
     const params: any[] = [id];
@@ -645,9 +638,9 @@ export const deleteFieldJoin = async (req: Request, res: Response) => {
 // ============================================================
 
 // 데이터 흐름 목록 조회
-export const getDataFlows = async (req: Request, res: Response) => {
+export const getDataFlows = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user?.companyCode || "*";
     const { group_id, source_screen_id } = req.query;
 
     let query = `
@@ -695,10 +688,10 @@ export const getDataFlows = async (req: Request, res: Response) => {
 };
 
 // 데이터 흐름 생성
-export const createDataFlow = async (req: Request, res: Response) => {
+export const createDataFlow = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
-    const userId = (req.user as any).userId;
+    const companyCode = req.user?.companyCode || "*";
+    const userId = req.user?.userId || "";
     const { 
       group_id, source_screen_id, source_action, target_screen_id, target_action,
       data_mapping, flow_type, flow_label, condition_expression, is_active
@@ -734,10 +727,10 @@ export const createDataFlow = async (req: Request, res: Response) => {
 };
 
 // 데이터 흐름 수정
-export const updateDataFlow = async (req: Request, res: Response) => {
+export const updateDataFlow = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user?.companyCode || "*";
     const { 
       group_id, source_screen_id, source_action, target_screen_id, target_action,
       data_mapping, flow_type, flow_label, condition_expression, is_active
@@ -777,10 +770,10 @@ export const updateDataFlow = async (req: Request, res: Response) => {
 };
 
 // 데이터 흐름 삭제
-export const deleteDataFlow = async (req: Request, res: Response) => {
+export const deleteDataFlow = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user?.companyCode || "*";
 
     let query = `DELETE FROM screen_data_flows WHERE id = $1`;
     const params: any[] = [id];
@@ -811,9 +804,9 @@ export const deleteDataFlow = async (req: Request, res: Response) => {
 // ============================================================
 
 // 화면-테이블 관계 목록 조회
-export const getTableRelations = async (req: Request, res: Response) => {
+export const getTableRelations = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user?.companyCode || "*";
     const { screen_id, group_id } = req.query;
 
     let query = `
@@ -860,10 +853,10 @@ export const getTableRelations = async (req: Request, res: Response) => {
 };
 
 // 화면-테이블 관계 생성
-export const createTableRelation = async (req: Request, res: Response) => {
+export const createTableRelation = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
-    const userId = (req.user as any).userId;
+    const companyCode = req.user?.companyCode || "*";
+    const userId = req.user?.userId || "";
     const { group_id, screen_id, table_name, relation_type, crud_operations, description, is_active } = req.body;
 
     if (!screen_id || !table_name) {
@@ -893,10 +886,10 @@ export const createTableRelation = async (req: Request, res: Response) => {
 };
 
 // 화면-테이블 관계 수정
-export const updateTableRelation = async (req: Request, res: Response) => {
+export const updateTableRelation = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user?.companyCode || "*";
     const { group_id, table_name, relation_type, crud_operations, description, is_active } = req.body;
 
     let query = `
@@ -928,10 +921,10 @@ export const updateTableRelation = async (req: Request, res: Response) => {
 };
 
 // 화면-테이블 관계 삭제
-export const deleteTableRelation = async (req: Request, res: Response) => {
+export const deleteTableRelation = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user?.companyCode || "*";
 
     let query = `DELETE FROM screen_table_relations WHERE id = $1`;
     const params: any[] = [id];
@@ -961,7 +954,7 @@ export const deleteTableRelation = async (req: Request, res: Response) => {
 // ============================================================
 
 // 화면 레이아웃 요약 조회 (위젯 타입별 개수, 라벨 목록)
-export const getScreenLayoutSummary = async (req: Request, res: Response) => {
+export const getScreenLayoutSummary = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { screenId } = req.params;
 
@@ -1029,7 +1022,7 @@ export const getScreenLayoutSummary = async (req: Request, res: Response) => {
 };
 
 // 여러 화면의 레이아웃 요약 일괄 조회 (미니어처 렌더링용 좌표 포함)
-export const getMultipleScreenLayoutSummary = async (req: Request, res: Response) => {
+export const getMultipleScreenLayoutSummary = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { screenIds } = req.body;
 
@@ -1229,7 +1222,7 @@ export const getMultipleScreenLayoutSummary = async (req: Request, res: Response
 // ============================================================
 
 // 여러 화면의 서브 테이블 정보 조회 (메인 테이블 → 서브 테이블 관계)
-export const getScreenSubTables = async (req: Request, res: Response) => {
+export const getScreenSubTables = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { screenIds } = req.body;
 
@@ -2059,3 +2052,202 @@ export const getScreenSubTables = async (req: Request, res: Response) => {
   }
 };
 
+
+// ============================================================
+// 메뉴-화면그룹 동기화 API
+// ============================================================
+
+/**
+ * 화면관리 → 메뉴 동기화
+ * screen_groups를 menu_info로 동기화
+ */
+export const syncScreenGroupsToMenuController = async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const userCompanyCode = req.user?.companyCode || "*";
+    const userId = req.user?.userId || "";
+    const { targetCompanyCode } = req.body;
+
+    // 최고 관리자가 특정 회사를 지정한 경우 해당 회사로
+    let companyCode = userCompanyCode;
+    if (userCompanyCode === "*" && targetCompanyCode) {
+      companyCode = targetCompanyCode;
+    }
+
+    // 최고 관리자(*)는 회사를 지정해야 함
+    if (companyCode === "*") {
+      return res.status(400).json({
+        success: false,
+        message: "동기화할 회사를 선택해주세요.",
+      });
+    }
+
+    logger.info("화면관리 → 메뉴 동기화 요청", { companyCode, userId });
+
+    const result = await syncScreenGroupsToMenu(companyCode, userId);
+
+    if (!result.success) {
+      return res.status(500).json({
+        success: false,
+        message: "동기화 중 오류가 발생했습니다.",
+        errors: result.errors,
+      });
+    }
+
+    res.json({
+      success: true,
+      message: `동기화 완료: 생성 ${result.created}개, 연결 ${result.linked}개, 스킵 ${result.skipped}개`,
+      data: result,
+    });
+  } catch (error: any) {
+    logger.error("화면관리 → 메뉴 동기화 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: "동기화에 실패했습니다.",
+      error: error.message,
+    });
+  }
+};
+
+/**
+ * 메뉴 → 화면관리 동기화
+ * menu_info를 screen_groups로 동기화
+ */
+export const syncMenuToScreenGroupsController = async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const userCompanyCode = req.user?.companyCode || "*";
+    const userId = req.user?.userId || "";
+    const { targetCompanyCode } = req.body;
+
+    // 최고 관리자가 특정 회사를 지정한 경우 해당 회사로
+    let companyCode = userCompanyCode;
+    if (userCompanyCode === "*" && targetCompanyCode) {
+      companyCode = targetCompanyCode;
+    }
+
+    // 최고 관리자(*)는 회사를 지정해야 함
+    if (companyCode === "*") {
+      return res.status(400).json({
+        success: false,
+        message: "동기화할 회사를 선택해주세요.",
+      });
+    }
+
+    logger.info("메뉴 → 화면관리 동기화 요청", { companyCode, userId });
+
+    const result = await syncMenuToScreenGroups(companyCode, userId);
+
+    if (!result.success) {
+      return res.status(500).json({
+        success: false,
+        message: "동기화 중 오류가 발생했습니다.",
+        errors: result.errors,
+      });
+    }
+
+    res.json({
+      success: true,
+      message: `동기화 완료: 생성 ${result.created}개, 연결 ${result.linked}개, 스킵 ${result.skipped}개`,
+      data: result,
+    });
+  } catch (error: any) {
+    logger.error("메뉴 → 화면관리 동기화 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: "동기화에 실패했습니다.",
+      error: error.message,
+    });
+  }
+};
+
+/**
+ * 동기화 상태 조회
+ */
+export const getSyncStatusController = async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const userCompanyCode = req.user?.companyCode || "*";
+    const { targetCompanyCode } = req.query;
+
+    // 최고 관리자가 특정 회사를 지정한 경우 해당 회사로
+    let companyCode = userCompanyCode;
+    if (userCompanyCode === "*" && targetCompanyCode) {
+      companyCode = targetCompanyCode as string;
+    }
+
+    // 최고 관리자(*)는 회사를 지정해야 함
+    if (companyCode === "*") {
+      return res.status(400).json({
+        success: false,
+        message: "조회할 회사를 선택해주세요.",
+      });
+    }
+
+    const status = await getSyncStatus(companyCode);
+
+    res.json({
+      success: true,
+      data: status,
+    });
+  } catch (error: any) {
+    logger.error("동기화 상태 조회 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: "동기화 상태 조회에 실패했습니다.",
+      error: error.message,
+    });
+  }
+};
+
+/**
+ * 전체 회사 동기화
+ * 모든 회사에 대해 양방향 동기화 수행 (최고 관리자만)
+ */
+export const syncAllCompaniesController = async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const userCompanyCode = req.user?.companyCode || "*";
+    const userId = req.user?.userId || "";
+
+    // 최고 관리자만 전체 동기화 가능
+    if (userCompanyCode !== "*") {
+      return res.status(403).json({
+        success: false,
+        message: "전체 동기화는 최고 관리자만 수행할 수 있습니다.",
+      });
+    }
+
+    logger.info("전체 회사 동기화 요청", { userId });
+
+    const result = await syncAllCompanies(userId);
+
+    if (!result.success) {
+      return res.status(500).json({
+        success: false,
+        message: "전체 동기화 중 오류가 발생했습니다.",
+      });
+    }
+
+    // 결과 요약
+    const totalCreated = result.results.reduce((sum, r) => sum + r.created, 0);
+    const totalLinked = result.results.reduce((sum, r) => sum + r.linked, 0);
+
+    res.json({
+      success: true,
+      message: `전체 동기화 완료: ${result.totalCompanies}개 회사 중 ${result.successCount}개 성공`,
+      data: {
+        totalCompanies: result.totalCompanies,
+        successCount: result.successCount,
+        failedCount: result.failedCount,
+        totalCreated,
+        totalLinked,
+        details: result.results,
+      },
+    });
+  } catch (error: any) {
+    logger.error("전체 회사 동기화 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: "전체 동기화에 실패했습니다.",
+      error: error.message,
+    });
+  }
+};
+

backend-node/src/controllers/tableManagementController.ts

@@ -804,12 +804,6 @@ export async function getTableData(
       }
     }
 
-    // 🆕 최종 검색 조건 로그
-    logger.info(
-      `🔍 최종 검색 조건 (enhancedSearch):`,
-      JSON.stringify(enhancedSearch)
-    );
-
     // 데이터 조회
     const result = await tableManagementService.getTableData(tableName, {
       page: parseInt(page),
@@ -893,10 +887,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}`);
@@ -906,10 +897,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}`);
@@ -917,25 +905,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);
@@ -1679,10 +1655,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({
@@ -1708,10 +1681,7 @@ 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 = `
@@ -1735,18 +1705,14 @@ export async function getCategoryColumnsByMenu(
         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, 
         ancestorMenuNames,
-        hierarchyDepth: ancestorMenuObjids.length,
+        hierarchyDepth: ancestorMenuObjids.length 
       });
       
       // 상위 메뉴들에 설정된 모든 카테고리 컬럼 조회 (테이블 필터링 제거)
@@ -1779,25 +1745,14 @@ export async function getCategoryColumnsByMenu(
         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");
@@ -1813,16 +1768,10 @@ export async function getCategoryColumnsByMenu(
           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({
@@ -1859,13 +1808,11 @@ export async function getCategoryColumnsByMenu(
       `;
       
       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,
+      columnCount: columnsResult.rows.length 
     });
 
     res.json({
@@ -1966,25 +1913,19 @@ export async function multiTableSave(
     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}"
@@ -1994,42 +1935,28 @@ export async function multiTableSave(
         RETURNING *
       `;
       
-      const updateParams =
-        companyCode !== "*"
-          ? [...updateValues, pkValue, companyCode]
-          : [...updateValues, pkValue];
+      const updateParams = companyCode !== "*" 
+        ? [...updateValues, pkValue, companyCode]
+        : [...updateValues, pkValue];
       
-      logger.info("메인 테이블 UPDATE:", {
-        query: updateQuery,
-        paramsCount: updateParams.length,
-      });
+      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 = `
@@ -2040,10 +1967,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);
     }
 
@@ -2062,15 +1986,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;
       }
 
@@ -2083,20 +2004,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);
       }
 
@@ -2109,12 +2025,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,
         };
@@ -2128,8 +2039,7 @@ export async function multiTableSave(
 
         // 메인 마커 설정
         if (options.mainMarkerColumn) {
-          mainSubItem[options.mainMarkerColumn] =
-            options.mainMarkerValue ?? true;
+          mainSubItem[options.mainMarkerColumn] = options.mainMarkerValue ?? true;
         }
 
         // company_code 추가
@@ -2158,23 +2068,13 @@ export async function multiTableSave(
         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 = `
@@ -2194,26 +2094,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 = `
@@ -2223,11 +2111,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] });
         }
       }
 
@@ -2243,12 +2127,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 = `
@@ -2257,16 +2137,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} 저장 완료`);
@@ -2307,11 +2180,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,
@@ -2320,54 +2190,93 @@ 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,
+    });
   }
 }

backend-node/src/routes/screenGroupRoutes.ts

@@ -31,6 +31,11 @@ import {
   getMultipleScreenLayoutSummary,
   // 화면 서브 테이블 관계
   getScreenSubTables,
+  // 메뉴-화면그룹 동기화
+  syncScreenGroupsToMenuController,
+  syncMenuToScreenGroupsController,
+  getSyncStatusController,
+  syncAllCompaniesController,
 } from "../controllers/screenGroupController";
 
 const router = Router();
@@ -89,6 +94,18 @@ router.post("/layout-summary/batch", getMultipleScreenLayoutSummary);
 // ============================================================
 router.post("/sub-tables/batch", getScreenSubTables);
 
+// ============================================================
+// 메뉴-화면그룹 동기화
+// ============================================================
+// 동기화 상태 조회
+router.get("/sync/status", getSyncStatusController);
+// 화면관리 → 메뉴 동기화
+router.post("/sync/screen-to-menu", syncScreenGroupsToMenuController);
+// 메뉴 → 화면관리 동기화
+router.post("/sync/menu-to-screen", syncMenuToScreenGroupsController);
+// 전체 회사 동기화 (최고 관리자만)
+router.post("/sync/all", syncAllCompaniesController);
+
 export default router;
 
 

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)) {

backend-node/src/services/menuCopyService.ts

@@ -2090,7 +2090,7 @@ export class MenuCopyService {
             menu.menu_url,
             menu.menu_desc,
             userId,
-            menu.status,
+            'active', // 복제된 메뉴는 항상 활성화 상태
             menu.system_name,
             targetCompanyCode, // 새 회사 코드
             menu.lang_key,

backend-node/src/services/menuScreenSyncService.ts

@@ -0,0 +1,969 @@
+import { getPool } from "../database/db";
+import { logger } from "../utils/logger";
+
+const pool = getPool();
+
+/**
+ * 메뉴-화면그룹 동기화 서비스
+ * 
+ * 양방향 동기화:
+ * 1. screen_groups → menu_info: 화면관리 폴더 구조를 메뉴로 동기화
+ * 2. menu_info → screen_groups: 사용자 메뉴를 화면관리 폴더로 동기화
+ */
+
+// ============================================================
+// 타입 정의
+// ============================================================
+
+interface SyncResult {
+  success: boolean;
+  created: number;
+  linked: number;
+  skipped: number;
+  errors: string[];
+  details: SyncDetail[];
+}
+
+interface SyncDetail {
+  action: 'created' | 'linked' | 'skipped' | 'error';
+  sourceName: string;
+  sourceId: number | string;
+  targetId?: number | string;
+  reason?: string;
+}
+
+// ============================================================
+// 화면관리 → 메뉴 동기화
+// ============================================================
+
+/**
+ * screen_groups를 menu_info로 동기화
+ * 
+ * 로직:
+ * 1. 해당 회사의 screen_groups 조회 (폴더 구조)
+ * 2. 이미 menu_objid가 연결된 것은 제외
+ * 3. 이름으로 기존 menu_info 매칭 시도
+ *    - 매칭되면: 양쪽에 연결 ID 업데이트
+ *    - 매칭 안되면: menu_info에 새로 생성
+ * 4. 계층 구조(parent) 유지
+ */
+export async function syncScreenGroupsToMenu(
+  companyCode: string,
+  userId: string
+): Promise<SyncResult> {
+  const result: SyncResult = {
+    success: true,
+    created: 0,
+    linked: 0,
+    skipped: 0,
+    errors: [],
+    details: [],
+  };
+
+  const client = await pool.connect();
+  
+  try {
+    await client.query('BEGIN');
+
+    logger.info("화면관리 → 메뉴 동기화 시작", { companyCode, userId });
+
+    // 1. 해당 회사의 screen_groups 조회 (아직 menu_objid가 없는 것)
+    const screenGroupsQuery = `
+      SELECT 
+        sg.id, 
+        sg.group_name, 
+        sg.group_code, 
+        sg.parent_group_id,
+        sg.group_level,
+        sg.display_order,
+        sg.description,
+        sg.icon,
+        sg.menu_objid,
+        -- 부모 그룹의 menu_objid도 조회 (계층 연결용)
+        parent.menu_objid as parent_menu_objid
+      FROM screen_groups sg
+      LEFT JOIN screen_groups parent ON sg.parent_group_id = parent.id
+      WHERE sg.company_code = $1
+      ORDER BY sg.group_level ASC, sg.display_order ASC
+    `;
+    const screenGroupsResult = await client.query(screenGroupsQuery, [companyCode]);
+
+    // 2. 해당 회사의 기존 menu_info 조회 (사용자 메뉴, menu_type=1)
+    // 경로 기반 매칭을 위해 부모 이름도 조회
+    const existingMenusQuery = `
+      SELECT 
+        m.objid, 
+        m.menu_name_kor, 
+        m.parent_obj_id, 
+        m.screen_group_id,
+        p.menu_name_kor as parent_name
+      FROM menu_info m
+      LEFT JOIN menu_info p ON m.parent_obj_id = p.objid
+      WHERE m.company_code = $1 AND m.menu_type = 1
+    `;
+    const existingMenusResult = await client.query(existingMenusQuery, [companyCode]);
+
+    // 경로(부모이름 > 이름) → 메뉴 매핑 (screen_group_id가 없는 것만)
+    // 단순 이름 매칭도 유지 (하위 호환)
+    const menuByPath: Map<string, any> = new Map();
+    const menuByName: Map<string, any> = new Map();
+    existingMenusResult.rows.forEach((menu: any) => {
+      if (!menu.screen_group_id) {
+        const menuName = menu.menu_name_kor?.trim().toLowerCase() || '';
+        const parentName = menu.parent_name?.trim().toLowerCase() || '';
+        const pathKey = parentName ? `${parentName}>${menuName}` : menuName;
+        
+        menuByPath.set(pathKey, menu);
+        // 단순 이름 매핑은 첫 번째 것만 (중복 방지)
+        if (!menuByName.has(menuName)) {
+          menuByName.set(menuName, menu);
+        }
+      }
+    });
+
+    // 모든 메뉴의 objid 집합 (삭제 확인용)
+    const existingMenuObjids = new Set(existingMenusResult.rows.map((m: any) => Number(m.objid)));
+
+    // 3. 사용자 메뉴의 루트 찾기 (parent_obj_id = 0인 사용자 메뉴)
+    // 없으면 생성
+    let userMenuRootObjid: number | null = null;
+    const rootMenuQuery = `
+      SELECT objid FROM menu_info 
+      WHERE company_code = $1 AND menu_type = 1 AND parent_obj_id = 0
+      ORDER BY seq ASC
+      LIMIT 1
+    `;
+    const rootMenuResult = await client.query(rootMenuQuery, [companyCode]);
+    
+    if (rootMenuResult.rows.length > 0) {
+      userMenuRootObjid = Number(rootMenuResult.rows[0].objid);
+    } else {
+      // 루트 메뉴가 없으면 생성
+      const newObjid = Date.now();
+      const createRootQuery = `
+        INSERT INTO menu_info (objid, parent_obj_id, menu_name_kor, menu_name_eng, seq, menu_type, company_code, writer, regdate, status)
+        VALUES ($1, 0, '사용자', 'User', 1, 1, $2, $3, NOW(), 'active')
+        RETURNING objid
+      `;
+      const createRootResult = await client.query(createRootQuery, [newObjid, companyCode, userId]);
+      userMenuRootObjid = Number(createRootResult.rows[0].objid);
+      logger.info("사용자 메뉴 루트 생성", { companyCode, objid: userMenuRootObjid });
+    }
+
+    // 4. screen_groups ID → menu_objid 매핑 (순차 처리를 위해)
+    const groupToMenuMap: Map<number, number> = new Map();
+
+    // screen_groups의 부모 이름 조회를 위한 매핑
+    const groupIdToName: Map<number, string> = new Map();
+    screenGroupsResult.rows.forEach((g: any) => {
+      groupIdToName.set(g.id, g.group_name?.trim().toLowerCase() || '');
+    });
+
+    // 5. 최상위 회사 폴더 ID 찾기 (level 0, parent_group_id IS NULL)
+    // 이 폴더는 메뉴로 생성하지 않고, 하위 폴더들을 사용자 루트 바로 아래에 배치
+    const topLevelCompanyFolderIds = new Set<number>();
+    for (const group of screenGroupsResult.rows) {
+      if (group.group_level === 0 && group.parent_group_id === null) {
+        topLevelCompanyFolderIds.add(group.id);
+        // 최상위 폴더 → 사용자 루트에 매핑 (하위 폴더의 부모로 사용)
+        groupToMenuMap.set(group.id, userMenuRootObjid!);
+        logger.info("최상위 회사 폴더 스킵", { groupId: group.id, groupName: group.group_name });
+      }
+    }
+
+    // 6. 각 screen_group 처리
+    for (const group of screenGroupsResult.rows) {
+      const groupId = group.id;
+      const groupName = group.group_name?.trim();
+      const groupNameLower = groupName?.toLowerCase() || '';
+
+      // 최상위 회사 폴더는 메뉴로 생성하지 않고 스킵
+      if (topLevelCompanyFolderIds.has(groupId)) {
+        result.skipped++;
+        result.details.push({
+          action: 'skipped',
+          sourceName: groupName,
+          sourceId: groupId,
+          reason: '최상위 회사 폴더 (메뉴 생성 스킵)',
+        });
+        continue;
+      }
+
+      // 이미 연결된 경우 - 실제로 메뉴가 존재하는지 확인
+      if (group.menu_objid) {
+        const menuExists = existingMenuObjids.has(Number(group.menu_objid));
+        
+        if (menuExists) {
+          // 메뉴가 존재하면 스킵
+          result.skipped++;
+          result.details.push({
+            action: 'skipped',
+            sourceName: groupName,
+            sourceId: groupId,
+            targetId: group.menu_objid,
+            reason: '이미 메뉴와 연결됨',
+          });
+          groupToMenuMap.set(groupId, Number(group.menu_objid));
+          continue;
+        } else {
+          // 메뉴가 삭제되었으면 연결 해제하고 재생성
+          logger.info("삭제된 메뉴 연결 해제", { groupId, deletedMenuObjid: group.menu_objid });
+          await client.query(
+            `UPDATE screen_groups SET menu_objid = NULL, updated_date = NOW() WHERE id = $1`,
+            [groupId]
+          );
+          // 계속 진행하여 재생성 또는 재연결
+        }
+      }
+
+      // 부모 그룹 이름 조회 (경로 기반 매칭용)
+      const parentGroupName = group.parent_group_id ? groupIdToName.get(group.parent_group_id) : '';
+      const pathKey = parentGroupName ? `${parentGroupName}>${groupNameLower}` : groupNameLower;
+
+      // 경로로 기존 메뉴 매칭 시도 (우선순위: 경로 매칭 > 이름 매칭)
+      let matchedMenu = menuByPath.get(pathKey);
+      if (!matchedMenu) {
+        // 경로 매칭 실패시 이름으로 시도 (하위 호환)
+        matchedMenu = menuByName.get(groupNameLower);
+      }
+
+      if (matchedMenu) {
+        // 매칭된 메뉴와 연결
+        const menuObjid = Number(matchedMenu.objid);
+
+        // screen_groups에 menu_objid 업데이트
+        await client.query(
+          `UPDATE screen_groups SET menu_objid = $1, updated_date = NOW() WHERE id = $2`,
+          [menuObjid, groupId]
+        );
+
+        // menu_info에 screen_group_id 업데이트
+        await client.query(
+          `UPDATE menu_info SET screen_group_id = $1 WHERE objid = $2`,
+          [groupId, menuObjid]
+        );
+
+        groupToMenuMap.set(groupId, menuObjid);
+        result.linked++;
+        result.details.push({
+          action: 'linked',
+          sourceName: groupName,
+          sourceId: groupId,
+          targetId: menuObjid,
+        });
+
+        // 매칭된 메뉴는 Map에서 제거 (중복 매칭 방지)
+        menuByPath.delete(pathKey);
+        menuByName.delete(groupNameLower);
+
+      } else {
+        // 새 메뉴 생성
+        const newObjid = Date.now() + groupId; // 고유 ID 보장
+
+        // 부모 메뉴 objid 결정
+        // 우선순위: groupToMenuMap > parent_menu_objid (존재 확인 필수)
+        let parentMenuObjid = userMenuRootObjid;
+        if (group.parent_group_id && groupToMenuMap.has(group.parent_group_id)) {
+          // 현재 트랜잭션에서 생성된 부모 메뉴 사용
+          parentMenuObjid = groupToMenuMap.get(group.parent_group_id)!;
+        } else if (group.parent_group_id && group.parent_menu_objid) {
+          // 기존 parent_menu_objid가 실제로 존재하는지 확인
+          const parentMenuExists = existingMenuObjids.has(Number(group.parent_menu_objid));
+          if (parentMenuExists) {
+            parentMenuObjid = Number(group.parent_menu_objid);
+          }
+        }
+
+        // 같은 부모 아래에서 가장 높은 seq 조회 후 +1
+        let nextSeq = 1;
+        const maxSeqQuery = `
+          SELECT COALESCE(MAX(seq), 0) + 1 as next_seq 
+          FROM menu_info 
+          WHERE parent_obj_id = $1 AND company_code = $2 AND menu_type = 1
+        `;
+        const maxSeqResult = await client.query(maxSeqQuery, [parentMenuObjid, companyCode]);
+        if (maxSeqResult.rows.length > 0) {
+          nextSeq = parseInt(maxSeqResult.rows[0].next_seq) || 1;
+        }
+
+        // menu_info에 삽입
+        const insertMenuQuery = `
+          INSERT INTO menu_info (
+            objid, parent_obj_id, menu_name_kor, menu_name_eng, 
+            seq, menu_type, company_code, writer, regdate, status, screen_group_id, menu_desc
+          ) VALUES ($1, $2, $3, $4, $5, 1, $6, $7, NOW(), 'active', $8, $9)
+          RETURNING objid
+        `;
+        await client.query(insertMenuQuery, [
+          newObjid,
+          parentMenuObjid,
+          groupName,
+          group.group_code || groupName,
+          nextSeq,
+          companyCode,
+          userId,
+          groupId,
+          group.description || null,
+        ]);
+
+        // screen_groups에 menu_objid 업데이트
+        await client.query(
+          `UPDATE screen_groups SET menu_objid = $1, updated_date = NOW() WHERE id = $2`,
+          [newObjid, groupId]
+        );
+
+        groupToMenuMap.set(groupId, newObjid);
+        result.created++;
+        result.details.push({
+          action: 'created',
+          sourceName: groupName,
+          sourceId: groupId,
+          targetId: newObjid,
+        });
+      }
+    }
+
+    await client.query('COMMIT');
+
+    logger.info("화면관리 → 메뉴 동기화 완료", { 
+      companyCode, 
+      created: result.created, 
+      linked: result.linked, 
+      skipped: result.skipped 
+    });
+
+    return result;
+
+  } catch (error: any) {
+    await client.query('ROLLBACK');
+    logger.error("화면관리 → 메뉴 동기화 실패", { companyCode, error: error.message });
+    result.success = false;
+    result.errors.push(error.message);
+    return result;
+  } finally {
+    client.release();
+  }
+}
+
+
+// ============================================================
+// 메뉴 → 화면관리 동기화
+// ============================================================
+
+/**
+ * menu_info를 screen_groups로 동기화
+ * 
+ * 로직:
+ * 1. 해당 회사의 사용자 메뉴(menu_type=1) 조회
+ * 2. 이미 screen_group_id가 연결된 것은 제외
+ * 3. 이름으로 기존 screen_groups 매칭 시도
+ *    - 매칭되면: 양쪽에 연결 ID 업데이트
+ *    - 매칭 안되면: screen_groups에 새로 생성 (폴더로)
+ * 4. 계층 구조(parent) 유지
+ */
+export async function syncMenuToScreenGroups(
+  companyCode: string,
+  userId: string
+): Promise<SyncResult> {
+  const result: SyncResult = {
+    success: true,
+    created: 0,
+    linked: 0,
+    skipped: 0,
+    errors: [],
+    details: [],
+  };
+
+  const client = await pool.connect();
+  
+  try {
+    await client.query('BEGIN');
+
+    logger.info("메뉴 → 화면관리 동기화 시작", { companyCode, userId });
+
+    // 0. 회사 이름 조회 (회사 폴더 찾기/생성용)
+    const companyNameQuery = `SELECT company_name FROM company_mng WHERE company_code = $1`;
+    const companyNameResult = await client.query(companyNameQuery, [companyCode]);
+    const companyName = companyNameResult.rows[0]?.company_name || companyCode;
+
+    // 1. 해당 회사의 사용자 메뉴 조회 (menu_type=1)
+    const menusQuery = `
+      SELECT 
+        m.objid, 
+        m.menu_name_kor, 
+        m.menu_name_eng,
+        m.parent_obj_id,
+        m.seq,
+        m.menu_url,
+        m.menu_desc,
+        m.screen_group_id,
+        -- 부모 메뉴의 screen_group_id도 조회 (계층 연결용)
+        parent.screen_group_id as parent_screen_group_id
+      FROM menu_info m
+      LEFT JOIN menu_info parent ON m.parent_obj_id = parent.objid
+      WHERE m.company_code = $1 AND m.menu_type = 1
+      ORDER BY 
+        CASE WHEN m.parent_obj_id = 0 THEN 0 ELSE 1 END,
+        m.parent_obj_id,
+        m.seq
+    `;
+    const menusResult = await client.query(menusQuery, [companyCode]);
+
+    // 2. 해당 회사의 기존 screen_groups 조회 (경로 기반 매칭을 위해 부모 이름도 조회)
+    const existingGroupsQuery = `
+      SELECT 
+        g.id, 
+        g.group_name, 
+        g.menu_objid,
+        g.parent_group_id,
+        p.group_name as parent_name
+      FROM screen_groups g
+      LEFT JOIN screen_groups p ON g.parent_group_id = p.id
+      WHERE g.company_code = $1
+    `;
+    const existingGroupsResult = await client.query(existingGroupsQuery, [companyCode]);
+
+    // 경로(부모이름 > 이름) → 그룹 매핑 (menu_objid가 없는 것만)
+    // 단순 이름 매칭도 유지 (하위 호환)
+    const groupByPath: Map<string, any> = new Map();
+    const groupByName: Map<string, any> = new Map();
+    existingGroupsResult.rows.forEach((group: any) => {
+      if (!group.menu_objid) {
+        const groupName = group.group_name?.trim().toLowerCase() || '';
+        const parentName = group.parent_name?.trim().toLowerCase() || '';
+        const pathKey = parentName ? `${parentName}>${groupName}` : groupName;
+        
+        groupByPath.set(pathKey, group);
+        // 단순 이름 매핑은 첫 번째 것만 (중복 방지)
+        if (!groupByName.has(groupName)) {
+          groupByName.set(groupName, group);
+        }
+      }
+    });
+
+    // 모든 그룹의 id 집합 (삭제 확인용)
+    const existingGroupIds = new Set(existingGroupsResult.rows.map((g: any) => Number(g.id)));
+
+    // 3. 회사 폴더 찾기 또는 생성 (루트 레벨에 회사명으로 된 폴더)
+    let companyFolderId: number | null = null;
+    const companyFolderQuery = `
+      SELECT id FROM screen_groups 
+      WHERE company_code = $1 AND parent_group_id IS NULL AND group_level = 0
+      ORDER BY id ASC
+      LIMIT 1
+    `;
+    const companyFolderResult = await client.query(companyFolderQuery, [companyCode]);
+    
+    if (companyFolderResult.rows.length > 0) {
+      companyFolderId = companyFolderResult.rows[0].id;
+      logger.info("회사 폴더 발견", { companyCode, companyFolderId, companyName });
+    } else {
+      // 회사 폴더가 없으면 생성
+      // 루트 레벨에서 가장 높은 display_order 조회 후 +1
+      let nextRootOrder = 1;
+      const maxRootOrderQuery = `
+        SELECT COALESCE(MAX(display_order), 0) + 1 as next_order 
+        FROM screen_groups 
+        WHERE parent_group_id IS NULL
+      `;
+      const maxRootOrderResult = await client.query(maxRootOrderQuery);
+      if (maxRootOrderResult.rows.length > 0) {
+        nextRootOrder = parseInt(maxRootOrderResult.rows[0].next_order) || 1;
+      }
+
+      const createFolderQuery = `
+        INSERT INTO screen_groups (
+          group_name, group_code, parent_group_id, group_level,
+          display_order, company_code, writer, hierarchy_path
+        ) VALUES ($1, $2, NULL, 0, $3, $4, $5, '/')
+        RETURNING id
+      `;
+      const createFolderResult = await client.query(createFolderQuery, [
+        companyName,
+        companyCode.toLowerCase(),
+        nextRootOrder,
+        companyCode,
+        userId,
+      ]);
+      companyFolderId = createFolderResult.rows[0].id;
+      
+      // hierarchy_path 업데이트
+      await client.query(
+        `UPDATE screen_groups SET hierarchy_path = $1 WHERE id = $2`,
+        [`/${companyFolderId}/`, companyFolderId]
+      );
+      
+      logger.info("회사 폴더 생성", { companyCode, companyFolderId, companyName });
+    }
+
+    // 4. menu_objid → screen_group_id 매핑 (순차 처리를 위해)
+    const menuToGroupMap: Map<number, number> = new Map();
+
+    // 부모 메뉴 중 이미 screen_group_id가 있는 것 등록
+    menusResult.rows.forEach((menu: any) => {
+      if (menu.screen_group_id) {
+        menuToGroupMap.set(Number(menu.objid), Number(menu.screen_group_id));
+      }
+    });
+
+    // 루트 메뉴(parent_obj_id = 0)의 objid 찾기 → 회사 폴더와 매핑
+    let rootMenuObjid: number | null = null;
+    for (const menu of menusResult.rows) {
+      if (Number(menu.parent_obj_id) === 0) {
+        rootMenuObjid = Number(menu.objid);
+        // 루트 메뉴는 회사 폴더와 연결
+        if (companyFolderId) {
+          menuToGroupMap.set(rootMenuObjid, companyFolderId);
+        }
+        break;
+      }
+    }
+
+    // 5. 각 메뉴 처리
+    for (const menu of menusResult.rows) {
+      const menuObjid = Number(menu.objid);
+      const menuName = menu.menu_name_kor?.trim();
+
+      // 루트 메뉴(parent_obj_id = 0)는 스킵 (이미 회사 폴더와 매핑됨)
+      if (Number(menu.parent_obj_id) === 0) {
+        result.skipped++;
+        result.details.push({
+          action: 'skipped',
+          sourceName: menuName,
+          sourceId: menuObjid,
+          targetId: companyFolderId || undefined,
+          reason: '루트 메뉴 → 회사 폴더와 매핑됨',
+        });
+        continue;
+      }
+
+      // 이미 연결된 경우 - 실제로 그룹이 존재하는지 확인
+      if (menu.screen_group_id) {
+        const groupExists = existingGroupIds.has(Number(menu.screen_group_id));
+        
+        if (groupExists) {
+          // 그룹이 존재하면 스킵
+          result.skipped++;
+          result.details.push({
+            action: 'skipped',
+            sourceName: menuName,
+            sourceId: menuObjid,
+            targetId: menu.screen_group_id,
+            reason: '이미 화면그룹과 연결됨',
+          });
+          menuToGroupMap.set(menuObjid, Number(menu.screen_group_id));
+          continue;
+        } else {
+          // 그룹이 삭제되었으면 연결 해제하고 재생성
+          logger.info("삭제된 그룹 연결 해제", { menuObjid, deletedGroupId: menu.screen_group_id });
+          await client.query(
+            `UPDATE menu_info SET screen_group_id = NULL WHERE objid = $1`,
+            [menuObjid]
+          );
+          // 계속 진행하여 재생성 또는 재연결
+        }
+      }
+
+      const menuNameLower = menuName?.toLowerCase() || '';
+      
+      // 부모 메뉴 이름 조회 (경로 기반 매칭용)
+      const parentMenu = menusResult.rows.find((m: any) => Number(m.objid) === Number(menu.parent_obj_id));
+      const parentMenuName = parentMenu?.menu_name_kor?.trim().toLowerCase() || '';
+      const pathKey = parentMenuName ? `${parentMenuName}>${menuNameLower}` : menuNameLower;
+
+      // 경로로 기존 그룹 매칭 시도 (우선순위: 경로 매칭 > 이름 매칭)
+      let matchedGroup = groupByPath.get(pathKey);
+      if (!matchedGroup) {
+        // 경로 매칭 실패시 이름으로 시도 (하위 호환)
+        matchedGroup = groupByName.get(menuNameLower);
+      }
+
+      if (matchedGroup) {
+        // 매칭된 그룹과 연결
+        const groupId = Number(matchedGroup.id);
+
+        try {
+          // menu_info에 screen_group_id 업데이트
+          await client.query(
+            `UPDATE menu_info SET screen_group_id = $1 WHERE objid = $2`,
+            [groupId, menuObjid]
+          );
+
+          // screen_groups에 menu_objid 업데이트
+          await client.query(
+            `UPDATE screen_groups SET menu_objid = $1, updated_date = NOW() WHERE id = $2`,
+            [menuObjid, groupId]
+          );
+
+          menuToGroupMap.set(menuObjid, groupId);
+          result.linked++;
+          result.details.push({
+            action: 'linked',
+            sourceName: menuName,
+            sourceId: menuObjid,
+            targetId: groupId,
+          });
+
+          // 매칭된 그룹은 Map에서 제거 (중복 매칭 방지)
+          groupByPath.delete(pathKey);
+          groupByName.delete(menuNameLower);
+        } catch (linkError: any) {
+          logger.error("그룹 연결 중 에러", { menuName, menuObjid, groupId, error: linkError.message, stack: linkError.stack });
+          throw linkError;
+        }
+
+      } else {
+        // 새 screen_group 생성
+        // 부모 그룹 ID 결정
+        let parentGroupId: number | null = null;
+        let groupLevel = 1; // 기본값은 1 (회사 폴더 아래)
+
+        // 우선순위 1: menuToGroupMap에서 부모 메뉴의 새 그룹 ID 조회 (같은 트랜잭션에서 생성된 것)
+        if (menuToGroupMap.has(Number(menu.parent_obj_id))) {
+          parentGroupId = menuToGroupMap.get(Number(menu.parent_obj_id))!;
+        }
+        // 우선순위 2: 부모 메뉴가 루트 메뉴면 회사 폴더 사용
+        else if (Number(menu.parent_obj_id) === rootMenuObjid) {
+          parentGroupId = companyFolderId;
+        }
+        // 우선순위 3: 부모 메뉴의 screen_group_id가 있고, 해당 그룹이 실제로 존재하면 사용
+        else if (menu.parent_screen_group_id && existingGroupIds.has(Number(menu.parent_screen_group_id))) {
+          parentGroupId = Number(menu.parent_screen_group_id);
+        }
+
+        // 부모 그룹의 레벨 조회
+        if (parentGroupId) {
+          const parentLevelQuery = `SELECT group_level FROM screen_groups WHERE id = $1`;
+          const parentLevelResult = await client.query(parentLevelQuery, [parentGroupId]);
+          if (parentLevelResult.rows.length > 0) {
+            groupLevel = (parentLevelResult.rows[0].group_level || 0) + 1;
+          }
+        }
+
+        // 같은 부모 아래에서 가장 높은 display_order 조회 후 +1
+        let nextDisplayOrder = 1;
+        const maxOrderQuery = parentGroupId
+          ? `SELECT COALESCE(MAX(display_order), 0) + 1 as next_order FROM screen_groups WHERE parent_group_id = $1 AND company_code = $2`
+          : `SELECT COALESCE(MAX(display_order), 0) + 1 as next_order FROM screen_groups WHERE parent_group_id IS NULL AND company_code = $1`;
+        const maxOrderParams = parentGroupId ? [parentGroupId, companyCode] : [companyCode];
+        const maxOrderResult = await client.query(maxOrderQuery, maxOrderParams);
+        if (maxOrderResult.rows.length > 0) {
+          nextDisplayOrder = parseInt(maxOrderResult.rows[0].next_order) || 1;
+        }
+
+        // group_code 생성 (영문명 또는 이름 기반)
+        const groupCode = (menu.menu_name_eng || menuName || 'group')
+          .replace(/\s+/g, '_')
+          .toLowerCase()
+          .substring(0, 50);
+
+        // screen_groups에 삽입
+        const insertGroupQuery = `
+          INSERT INTO screen_groups (
+            group_name, group_code, parent_group_id, group_level,
+            display_order, company_code, writer, menu_objid, description
+          ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
+          RETURNING id
+        `;
+
+        let newGroupId: number;
+        try {
+          logger.info("새 그룹 생성 시도", { 
+            menuName, 
+            menuObjid, 
+            groupCode: groupCode + '_' + menuObjid,
+            parentGroupId, 
+            groupLevel, 
+            nextDisplayOrder,
+            companyCode,
+          });
+
+          const insertResult = await client.query(insertGroupQuery, [
+            menuName,
+            groupCode + '_' + menuObjid, // 고유성 보장
+            parentGroupId,
+            groupLevel,
+            nextDisplayOrder,
+            companyCode,
+            userId,
+            menuObjid,
+            menu.menu_desc || null,
+          ]);
+
+          newGroupId = insertResult.rows[0].id;
+        } catch (insertError: any) {
+          logger.error("그룹 생성 중 에러", { 
+            menuName, 
+            menuObjid, 
+            parentGroupId, 
+            groupLevel,
+            error: insertError.message, 
+            stack: insertError.stack,
+            code: insertError.code,
+            detail: insertError.detail,
+          });
+          throw insertError;
+        }
+
+        // hierarchy_path 업데이트
+        let hierarchyPath = `/${newGroupId}/`;
+        if (parentGroupId) {
+          const parentPathQuery = `SELECT hierarchy_path FROM screen_groups WHERE id = $1`;
+          const parentPathResult = await client.query(parentPathQuery, [parentGroupId]);
+          if (parentPathResult.rows.length > 0 && parentPathResult.rows[0].hierarchy_path) {
+            hierarchyPath = `${parentPathResult.rows[0].hierarchy_path}${newGroupId}/`.replace('//', '/');
+          }
+        }
+        await client.query(
+          `UPDATE screen_groups SET hierarchy_path = $1 WHERE id = $2`,
+          [hierarchyPath, newGroupId]
+        );
+
+        // menu_info에 screen_group_id 업데이트
+        await client.query(
+          `UPDATE menu_info SET screen_group_id = $1 WHERE objid = $2`,
+          [newGroupId, menuObjid]
+        );
+
+        menuToGroupMap.set(menuObjid, newGroupId);
+        result.created++;
+        result.details.push({
+          action: 'created',
+          sourceName: menuName,
+          sourceId: menuObjid,
+          targetId: newGroupId,
+        });
+      }
+    }
+
+    await client.query('COMMIT');
+
+    logger.info("메뉴 → 화면관리 동기화 완료", { 
+      companyCode, 
+      created: result.created, 
+      linked: result.linked, 
+      skipped: result.skipped 
+    });
+
+    return result;
+
+  } catch (error: any) {
+    await client.query('ROLLBACK');
+    logger.error("메뉴 → 화면관리 동기화 실패", { 
+      companyCode, 
+      error: error.message,
+      stack: error.stack,
+      code: error.code,
+      detail: error.detail,
+    });
+    result.success = false;
+    result.errors.push(error.message);
+    return result;
+  } finally {
+    client.release();
+  }
+}
+
+
+// ============================================================
+// 동기화 상태 조회
+// ============================================================
+
+/**
+ * 동기화 상태 조회
+ * 
+ * - 연결된 항목 수
+ * - 연결 안 된 항목 수
+ * - 양방향 비교
+ */
+export async function getSyncStatus(companyCode: string): Promise<{
+  screenGroups: { total: number; linked: number; unlinked: number };
+  menuItems: { total: number; linked: number; unlinked: number };
+  potentialMatches: Array<{ menuName: string; groupName: string; similarity: string }>;
+}> {
+  // screen_groups 상태
+  const sgQuery = `
+    SELECT 
+      COUNT(*) as total,
+      COUNT(menu_objid) as linked
+    FROM screen_groups
+    WHERE company_code = $1
+  `;
+  const sgResult = await pool.query(sgQuery, [companyCode]);
+
+  // menu_info 상태 (사용자 메뉴만, 루트 제외)
+  const menuQuery = `
+    SELECT 
+      COUNT(*) as total,
+      COUNT(screen_group_id) as linked
+    FROM menu_info
+    WHERE company_code = $1 AND menu_type = 1 AND parent_obj_id != 0
+  `;
+  const menuResult = await pool.query(menuQuery, [companyCode]);
+
+  // 이름이 같은 잠재적 매칭 후보 조회
+  const matchQuery = `
+    SELECT 
+      m.menu_name_kor as menu_name,
+      sg.group_name
+    FROM menu_info m
+    JOIN screen_groups sg ON LOWER(TRIM(m.menu_name_kor)) = LOWER(TRIM(sg.group_name))
+    WHERE m.company_code = $1 
+      AND sg.company_code = $1
+      AND m.menu_type = 1
+      AND m.screen_group_id IS NULL
+      AND sg.menu_objid IS NULL
+    LIMIT 10
+  `;
+  const matchResult = await pool.query(matchQuery, [companyCode]);
+
+  const sgTotal = parseInt(sgResult.rows[0].total);
+  const sgLinked = parseInt(sgResult.rows[0].linked);
+  const menuTotal = parseInt(menuResult.rows[0].total);
+  const menuLinked = parseInt(menuResult.rows[0].linked);
+
+  return {
+    screenGroups: {
+      total: sgTotal,
+      linked: sgLinked,
+      unlinked: sgTotal - sgLinked,
+    },
+    menuItems: {
+      total: menuTotal,
+      linked: menuLinked,
+      unlinked: menuTotal - menuLinked,
+    },
+    potentialMatches: matchResult.rows.map((row: any) => ({
+      menuName: row.menu_name,
+      groupName: row.group_name,
+      similarity: 'exact',
+    })),
+  };
+}
+
+
+// ============================================================
+// 전체 동기화 (모든 회사)
+// ============================================================
+
+interface AllCompaniesSyncResult {
+  success: boolean;
+  totalCompanies: number;
+  successCount: number;
+  failedCount: number;
+  results: Array<{
+    companyCode: string;
+    companyName: string;
+    direction: 'screens-to-menus' | 'menus-to-screens';
+    created: number;
+    linked: number;
+    skipped: number;
+    success: boolean;
+    error?: string;
+  }>;
+}
+
+/**
+ * 모든 회사에 대해 양방향 동기화 수행
+ * 
+ * 로직:
+ * 1. 모든 회사 조회
+ * 2. 각 회사별로 양방향 동기화 수행
+ *    - 화면관리 → 메뉴 동기화
+ *    - 메뉴 → 화면관리 동기화
+ * 3. 결과 집계
+ */
+export async function syncAllCompanies(
+  userId: string
+): Promise<AllCompaniesSyncResult> {
+  const result: AllCompaniesSyncResult = {
+    success: true,
+    totalCompanies: 0,
+    successCount: 0,
+    failedCount: 0,
+    results: [],
+  };
+
+  try {
+    logger.info("전체 동기화 시작", { userId });
+
+    // 모든 회사 조회 (최고 관리자 전용 회사 제외)
+    const companiesQuery = `
+      SELECT company_code, company_name 
+      FROM company_mng 
+      WHERE company_code != '*'
+      ORDER BY company_name
+    `;
+    const companiesResult = await pool.query(companiesQuery);
+    
+    result.totalCompanies = companiesResult.rows.length;
+
+    // 각 회사별로 양방향 동기화
+    for (const company of companiesResult.rows) {
+      const companyCode = company.company_code;
+      const companyName = company.company_name;
+
+      try {
+        // 1. 화면관리 → 메뉴 동기화
+        const screensToMenusResult = await syncScreenGroupsToMenu(companyCode, userId);
+        result.results.push({
+          companyCode,
+          companyName,
+          direction: 'screens-to-menus',
+          created: screensToMenusResult.created,
+          linked: screensToMenusResult.linked,
+          skipped: screensToMenusResult.skipped,
+          success: screensToMenusResult.success,
+          error: screensToMenusResult.errors.length > 0 ? screensToMenusResult.errors.join(', ') : undefined,
+        });
+
+        // 2. 메뉴 → 화면관리 동기화
+        const menusToScreensResult = await syncMenuToScreenGroups(companyCode, userId);
+        result.results.push({
+          companyCode,
+          companyName,
+          direction: 'menus-to-screens',
+          created: menusToScreensResult.created,
+          linked: menusToScreensResult.linked,
+          skipped: menusToScreensResult.skipped,
+          success: menusToScreensResult.success,
+          error: menusToScreensResult.errors.length > 0 ? menusToScreensResult.errors.join(', ') : undefined,
+        });
+
+        if (screensToMenusResult.success && menusToScreensResult.success) {
+          result.successCount++;
+        } else {
+          result.failedCount++;
+        }
+
+      } catch (error: any) {
+        logger.error("회사 동기화 실패", { companyCode, companyName, error: error.message });
+        result.results.push({
+          companyCode,
+          companyName,
+          direction: 'screens-to-menus',
+          created: 0,
+          linked: 0,
+          skipped: 0,
+          success: false,
+          error: error.message,
+        });
+        result.failedCount++;
+      }
+    }
+
+    logger.info("전체 동기화 완료", { 
+      totalCompanies: result.totalCompanies,
+      successCount: result.successCount,
+      failedCount: result.failedCount,
+    });
+
+    return result;
+
+  } catch (error: any) {
+    logger.error("전체 동기화 실패", { error: error.message });
+    result.success = false;
+    return result;
+  }
+}
+

backend-node/src/services/screenManagementService.ts

@@ -2597,10 +2597,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]
       );

backend-node/src/services/tableManagementService.ts

@@ -1323,17 +1323,24 @@ export class TableManagementService {
           // - "2," 로 시작
           // - ",2" 로 끝남
           // - ",2," 중간에 포함
-          const paramBase = paramIndex + (idx * 4);
+          const paramBase = paramIndex + idx * 4;
           conditions.push(`(
             ${columnName}::text = $${paramBase} OR
             ${columnName}::text LIKE $${paramBase + 1} OR
             ${columnName}::text LIKE $${paramBase + 2} OR
             ${columnName}::text LIKE $${paramBase + 3}
           )`);
-          values.push(safeValue, `${safeValue},%`, `%,${safeValue}`, `%,${safeValue},%`);
+          values.push(
+            safeValue,
+            `${safeValue},%`,
+            `%,${safeValue}`,
+            `%,${safeValue},%`
+          );
         });
 
-        logger.info(`🔍 다중 값 배열 검색: ${columnName} IN [${value.join(", ")}]`);
+        logger.info(
+          `🔍 다중 값 배열 검색: ${columnName} IN [${value.join(", ")}]`
+        );
         return {
           whereClause: `(${conditions.join(" OR ")})`,
           values,
@@ -1775,18 +1782,26 @@ export class TableManagementService {
 
         // displayColumn이 비어있거나 "none"이면 참조 테이블에서 자동 감지 (entityJoinService와 동일한 로직)
         let displayColumn = entityTypeInfo.displayColumn;
-        if (!displayColumn || displayColumn === "none" || displayColumn === "") {
-          displayColumn = await this.findDisplayColumnForTable(referenceTable, referenceColumn);
+        if (
+          !displayColumn ||
+          displayColumn === "none" ||
+          displayColumn === ""
+        ) {
+          displayColumn = await this.findDisplayColumnForTable(
+            referenceTable,
+            referenceColumn
+          );
           logger.info(
             `🔍 [buildEntitySearchCondition] displayColumn 자동 감지: ${referenceTable} -> ${displayColumn}`
           );
         }
 
         // 참조 테이블의 표시 컬럼으로 검색
+        // 🔧 main. 접두사 추가: EXISTS 서브쿼리에서 외부 테이블 참조 시 명시적으로 지정
         return {
           whereClause: `EXISTS (
             SELECT 1 FROM ${referenceTable} ref 
-            WHERE ref.${referenceColumn} = ${columnName} 
+            WHERE ref.${referenceColumn} = main.${columnName} 
             AND ref.${displayColumn} ILIKE $${paramIndex}
           )`,
           values: [`%${value}%`],
@@ -2150,14 +2165,14 @@ export class TableManagementService {
       // 안전한 테이블명 검증
       const safeTableName = tableName.replace(/[^a-zA-Z0-9_]/g, "");
 
-      // 전체 개수 조회
-      const countQuery = `SELECT COUNT(*) as count FROM ${safeTableName} ${whereClause}`;
+      // 전체 개수 조회 (main 별칭 추가 - buildWhereClause가 main. 접두사를 사용하므로 필요)
+      const countQuery = `SELECT COUNT(*) as count FROM ${safeTableName} main ${whereClause}`;
       const countResult = await query<any>(countQuery, searchValues);
       const total = parseInt(countResult[0].count);
 
-      // 데이터 조회
+      // 데이터 조회 (main 별칭 추가)
       const dataQuery = `
-        SELECT * FROM ${safeTableName} 
+        SELECT main.* FROM ${safeTableName} main 
         ${whereClause} 
         ${orderClause}
         LIMIT $${paramIndex} OFFSET $${paramIndex + 1}
@@ -2506,7 +2521,9 @@ export class TableManagementService {
       });
 
       if (skippedColumns.length > 0) {
-        logger.info(`⚠️ 테이블에 존재하지 않는 컬럼 스킵: ${skippedColumns.join(", ")}`);
+        logger.info(
+          `⚠️ 테이블에 존재하지 않는 컬럼 스킵: ${skippedColumns.join(", ")}`
+        );
       }
 
       // WHERE 조건 생성 (PRIMARY KEY 우선, 없으면 모든 원본 데이터 사용)
@@ -2776,10 +2793,14 @@ export class TableManagementService {
           // 실제 소스 컬럼이 partner_id인데 프론트엔드가 customer_id로 추론하는 경우 대응
           if (!baseJoinConfig && (additionalColumn as any).referenceTable) {
             baseJoinConfig = joinConfigs.find(
-              (config) => config.referenceTable === (additionalColumn as any).referenceTable
+              (config) =>
+                config.referenceTable ===
+                (additionalColumn as any).referenceTable
             );
             if (baseJoinConfig) {
-              logger.info(`🔄 referenceTable로 조인 설정 찾음: ${(additionalColumn as any).referenceTable} → ${baseJoinConfig.sourceColumn}`);
+              logger.info(
+                `🔄 referenceTable로 조인 설정 찾음: ${(additionalColumn as any).referenceTable} → ${baseJoinConfig.sourceColumn}`
+              );
             }
           }
 
@@ -2797,10 +2818,16 @@ export class TableManagementService {
             const frontendSourceColumn = additionalColumn.sourceColumn; // 프론트엔드가 추론한 소스 컬럼 (customer_id)
             if (originalJoinAlias.startsWith(`${frontendSourceColumn}_`)) {
               // 프론트엔드가 추론한 소스 컬럼으로 시작하면 그 부분 제거
-              actualColumnName = originalJoinAlias.replace(`${frontendSourceColumn}_`, "");
+              actualColumnName = originalJoinAlias.replace(
+                `${frontendSourceColumn}_`,
+                ""
+              );
             } else if (originalJoinAlias.startsWith(`${sourceColumn}_`)) {
               // 실제 소스 컬럼으로 시작하면 그 부분 제거
-              actualColumnName = originalJoinAlias.replace(`${sourceColumn}_`, "");
+              actualColumnName = originalJoinAlias.replace(
+                `${sourceColumn}_`,
+                ""
+              );
             } else {
               // 어느 것도 아니면 원본 사용
               actualColumnName = originalJoinAlias;
@@ -3199,8 +3226,10 @@ export class TableManagementService {
       }
 
       // Entity 조인 컬럼 검색이 있는지 확인 (기본 조인 + 추가 조인 컬럼 모두 포함)
+      // 🔧 sourceColumn도 포함: search={"order_no":"..."} 형태도 Entity 검색으로 인식
       const allEntityColumns = [
         ...joinConfigs.map((config) => config.aliasColumn),
+        ...joinConfigs.map((config) => config.sourceColumn), // 🔧 소스 컬럼도 포함
         // 추가 조인 컬럼들도 포함 (writer_dept_code, company_code_status 등)
         ...joinConfigs.flatMap((config) => {
           const additionalColumns = [];
@@ -3606,8 +3635,10 @@ export class TableManagementService {
           });
 
           // main. 접두사 추가 (조인 쿼리용)
+          // 🔧 이미 접두사(. 앞)가 있는 경우는 교체하지 않음 (ref.column, main.column 등)
+          // Negative lookbehind (?<!\.) 사용: 앞에 .이 없는 경우만 매칭
           condition = condition.replace(
-            new RegExp(`\\b${columnName}\\b`, "g"),
+            new RegExp(`(?<!\\.)\\b${columnName}\\b`, "g"),
             `main.${columnName}`
           );
           conditions.push(condition);
@@ -3812,6 +3843,9 @@ export class TableManagementService {
       "customer_mng",
       "item_info",
       "dept_info",
+      "sales_order_mng", // 🔧 수주관리 테이블 추가
+      "sales_order_detail", // 🔧 수주상세 테이블 추가
+      "partner_info", // 🔧 거래처 테이블 추가
       // 필요시 추가
     ];
 
@@ -4730,15 +4764,19 @@ export class TableManagementService {
   async detectTableEntityRelations(
     leftTable: string,
     rightTable: string
-  ): Promise<Array<{
-    leftColumn: string;
-    rightColumn: string;
-    direction: "left_to_right" | "right_to_left";
-    inputType: string;
-    displayColumn?: string;
-  }>> {
+  ): Promise<
+    Array<{
+      leftColumn: string;
+      rightColumn: string;
+      direction: "left_to_right" | "right_to_left";
+      inputType: string;
+      displayColumn?: string;
+    }>
+  > {
     try {
-      logger.info(`두 테이블 간 엔티티 관계 감지 시작: ${leftTable} <-> ${rightTable}`);
+      logger.info(
+        `두 테이블 간 엔티티 관계 감지 시작: ${leftTable} <-> ${rightTable}`
+      );
 
       const relations: Array<{
         leftColumn: string;
@@ -4806,12 +4844,17 @@ export class TableManagementService {
 
       logger.info(`엔티티 관계 감지 완료: ${relations.length}개 발견`);
       relations.forEach((rel, idx) => {
-        logger.info(`  ${idx + 1}. ${leftTable}.${rel.leftColumn} <-> ${rightTable}.${rel.rightColumn} (${rel.direction})`);
+        logger.info(
+          `  ${idx + 1}. ${leftTable}.${rel.leftColumn} <-> ${rightTable}.${rel.rightColumn} (${rel.direction})`
+        );
       });
 
       return relations;
     } catch (error) {
-      logger.error(`엔티티 관계 감지 실패: ${leftTable} <-> ${rightTable}`, error);
+      logger.error(
+        `엔티티 관계 감지 실패: ${leftTable} <-> ${rightTable}`,
+        error
+      );
       return [];
     }
   }

frontend/app/(main)/admin/screenMng/screenMngList/page.tsx

@@ -53,6 +53,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");
@@ -98,10 +111,15 @@ export default function ScreenManagementPage() {
   };
 
   // 검색어로 필터링된 화면
-  const filteredScreens = screens.filter((screen) =>
-    screen.screenName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    screen.screenCode.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+  // 검색어가 여러 키워드(폴더 계층 검색)이면 화면 필터링 없이 모든 화면 표시
+  // 단일 키워드면 해당 키워드로 화면 필터링
+  const searchKeywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(Boolean);
+  const filteredScreens = searchKeywords.length > 1 
+    ? screens  // 폴더 계층 검색 시에는 화면 필터링 없음 (폴더에서 이미 필터링됨)
+    : screens.filter((screen) =>
+      screen.screenName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      screen.screenCode.toLowerCase().includes(searchTerm.toLowerCase())
+    );
 
   // 화면 설계 모드일 때는 레이아웃 없이 전체 화면 사용
   if (isDesignMode) {
@@ -170,6 +188,7 @@ export default function ScreenManagementPage() {
                 selectedScreen={selectedScreen}
                 onScreenSelect={handleScreenSelect}
                 onScreenDesign={handleDesignScreen}
+                searchTerm={searchTerm}
                 onGroupSelect={(group) => {
                   setSelectedGroup(group);
                   setSelectedScreen(null); // 화면 선택 해제
@@ -228,5 +247,3 @@ export default function ScreenManagementPage() {
     </div>
   );
 }
-
-

frontend/app/(main)/screens/[screenId]/page.tsx

@@ -23,7 +23,6 @@ import { TableSearchWidgetHeightProvider, useTableSearchWidgetHeight } from "@/c
 import { ScreenContextProvider } from "@/contexts/ScreenContext"; // 컴포넌트 간 통신
 import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext"; // 분할 패널 리사이즈
 import { ActiveTabProvider } from "@/contexts/ActiveTabContext"; // 활성 탭 관리
-import { ScreenMultiLangProvider } from "@/contexts/ScreenMultiLangContext"; // 화면 다국어
 
 function ScreenViewPage() {
   const params = useParams();
@@ -114,7 +113,7 @@ function ScreenViewPage() {
   // 편집 모달 이벤트 리스너 등록
   useEffect(() => {
     const handleOpenEditModal = (event: CustomEvent) => {
-      // console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
+      console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
 
       setEditModalConfig({
         screenId: event.detail.screenId,
@@ -265,8 +264,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;
         }
 
@@ -346,10 +345,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`,
@@ -771,8 +769,7 @@ function ScreenViewPage() {
                   </>
                 );
               })()}
-              </div>
-            </ScreenMultiLangProvider>
+            </div>
           ) : (
             // 빈 화면일 때
             <div className="bg-background flex items-center justify-center" style={{ minHeight: screenHeight }}>

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% {

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,18 +1026,19 @@ 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 = {
                   ...(groupData.length > 0 ? groupData[0] : formData),
@@ -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}

frontend/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -365,7 +365,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}

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"

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") && (

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) => ({
@@ -453,7 +494,17 @@ export function TableSettingModal({
         // detailSettings 처리 (Entity 타입인 경우)
         let finalDetailSettings = mergedColumn.detailSettings || "";
         
-        if (mergedColumn.inputType === "entity" && mergedColumn.referenceTable) {
+        // 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 (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>

frontend/components/screen/panels/DataFlowPanel.tsx

@@ -462,3 +462,4 @@ export default function DataFlowPanel({ groupId, screenId, screens = [] }: DataF
 
 
 
+

frontend/components/screen/panels/FieldJoinPanel.tsx

@@ -414,3 +414,4 @@ export default function FieldJoinPanel({ screenId, componentId, layoutId }: Fiel
 
 
 
+

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>
               )}
 

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">

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;

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}`, {

frontend/lib/api/screenGroup.ts

@@ -498,3 +498,97 @@ export async function getScreenSubTables(
   }
 }
 
+
+// ============================================================
+// 메뉴-화면그룹 동기화 API
+// ============================================================
+
+export interface SyncDetail {
+  action: 'created' | 'linked' | 'skipped' | 'error';
+  sourceName: string;
+  sourceId: number | string;
+  targetId?: number | string;
+  reason?: string;
+}
+
+export interface SyncResult {
+  success: boolean;
+  created: number;
+  linked: number;
+  skipped: number;
+  errors: string[];
+  details: SyncDetail[];
+}
+
+export interface SyncStatus {
+  screenGroups: { total: number; linked: number; unlinked: number };
+  menuItems: { total: number; linked: number; unlinked: number };
+  potentialMatches: Array<{ menuName: string; groupName: string; similarity: string }>;
+}
+
+// 동기화 상태 조회
+export async function getMenuScreenSyncStatus(
+  targetCompanyCode?: string
+): Promise<ApiResponse<SyncStatus>> {
+  try {
+    const queryParams = targetCompanyCode ? `?targetCompanyCode=${targetCompanyCode}` : '';
+    const response = await apiClient.get(`/screen-groups/sync/status${queryParams}`);
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+// 화면관리 → 메뉴 동기화
+export async function syncScreenGroupsToMenu(
+  targetCompanyCode?: string
+): Promise<ApiResponse<SyncResult>> {
+  try {
+    const response = await apiClient.post("/screen-groups/sync/screen-to-menu", { targetCompanyCode });
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+// 메뉴 → 화면관리 동기화
+export async function syncMenuToScreenGroups(
+  targetCompanyCode?: string
+): Promise<ApiResponse<SyncResult>> {
+  try {
+    const response = await apiClient.post("/screen-groups/sync/menu-to-screen", { targetCompanyCode });
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+// 전체 동기화 결과 타입
+export interface AllCompaniesSyncResult {
+  totalCompanies: number;
+  successCount: number;
+  failedCount: number;
+  totalCreated: number;
+  totalLinked: number;
+  details: Array<{
+    companyCode: string;
+    companyName: string;
+    direction: 'screens-to-menus' | 'menus-to-screens';
+    created: number;
+    linked: number;
+    skipped: number;
+    success: boolean;
+    error?: string;
+  }>;
+}
+
+// 전체 회사 동기화 (최고 관리자만)
+export async function syncAllCompanies(): Promise<ApiResponse<AllCompaniesSyncResult>> {
+  try {
+    const response = await apiClient.post("/screen-groups/sync/all");
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+

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;

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;
@@ -413,7 +397,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
       selectionCount,
       selectionSource,
       hasSplitPanelContext: !!splitPanelContext,
-      trackedSelectedLeftData: trackedSelectedLeftData,
+      selectedLeftData: splitPanelContext?.selectedLeftData,
       selectedRowsData: selectedRowsData?.length,
       selectedRows: selectedRows?.length,
       flowSelectedData: flowSelectedData?.length,
@@ -445,7 +429,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     component.label,
     selectedRows,
     selectedRowsData,
-    trackedSelectedLeftData,
+    splitPanelContext?.selectedLeftData,
     flowSelectedData,
     splitPanelContext,
     modalStoreData,
@@ -1322,10 +1306,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 (
     <>

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 => {

frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx

@@ -184,7 +184,7 @@ const DataCell: React.FC<DataCellProps> = ({
         onClick={onClick}
         onDoubleClick={onDoubleClick}
       >
-        -
+        0
       </td>
     );
   }
@@ -222,7 +222,7 @@ const DataCell: React.FC<DataCellProps> = ({
         )}
         <span className="relative z-10 flex items-center justify-end gap-1">
           {icon && <span>{icon}</span>}
-          {values[0].formattedValue}
+          {values[0].formattedValue || (values[0].value === 0 ? '0' : values[0].formattedValue)}
         </span>
       </td>
     );
@@ -257,7 +257,7 @@ const DataCell: React.FC<DataCellProps> = ({
           )}
           <span className="relative z-10 flex items-center justify-end gap-1">
             {icon && <span>{icon}</span>}
-            {val.formattedValue}
+            {val.formattedValue || (val.value === 0 ? '0' : val.formattedValue)}
           </span>
         </td>
       ))}
@@ -296,13 +296,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
   onFieldDrop,
   onExpandChange,
 }) => {
-  // 디버깅 로그
-  console.log("🔶 PivotGridComponent props:", {
-    title,
-    hasExternalData: !!externalData,
-    externalDataLength: externalData?.length,
-    initialFieldsLength: initialFields?.length,
-  });
   // ==================== 상태 ====================
 
   const [fields, setFields] = useState<PivotFieldConfig[]>(initialFields);
@@ -312,6 +305,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);
@@ -370,20 +366,63 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     localStorage.setItem(stateStorageKey, JSON.stringify(stateToSave));
   }, [fields, pivotState, sortConfig, columnWidths, stateStorageKey]);
   
-  // 상태 복원 (localStorage)
+  // 상태 복원 (localStorage) - 프로덕션 안전성 강화
   useEffect(() => {
     if (typeof window === "undefined") return;
-    const savedState = localStorage.getItem(stateStorageKey);
-    if (savedState) {
-      try {
-        const parsed = JSON.parse(savedState);
-        if (parsed.fields) setFields(parsed.fields);
-        if (parsed.pivotState) setPivotState(parsed.pivotState);
-        if (parsed.sortConfig) setSortConfig(parsed.sortConfig);
-        if (parsed.columnWidths) setColumnWidths(parsed.columnWidths);
-      } catch (e) {
-        console.warn("피벗 상태 복원 실패:", e);
+    
+    try {
+      const savedState = localStorage.getItem(stateStorageKey);
+      if (!savedState) return;
+      
+      const parsed = JSON.parse(savedState);
+      
+      // 버전 체크 - 버전이 다르면 이전 상태 무시
+      if (parsed.version !== PIVOT_STATE_VERSION) {
+        localStorage.removeItem(stateStorageKey);
+        return;
       }
+      
+      // 필드 복원 시 유효성 검사 (중요!)
+      if (parsed.fields && Array.isArray(parsed.fields) && parsed.fields.length > 0) {
+        // 저장된 필드가 현재 데이터와 호환되는지 확인
+        const validFields = parsed.fields.filter((f: PivotFieldConfig) => 
+          f && typeof f.field === "string" && typeof f.area === "string"
+        );
+        
+        if (validFields.length > 0) {
+          setFields(validFields);
+        }
+      }
+      
+      // pivotState 복원 시 유효성 검사 (확장 경로 검증)
+      if (parsed.pivotState && typeof parsed.pivotState === "object") {
+        const restoredState: PivotGridState = {
+          // expandedRowPaths는 배열의 배열이어야 함
+          expandedRowPaths: Array.isArray(parsed.pivotState.expandedRowPaths) 
+            ? parsed.pivotState.expandedRowPaths.filter(
+                (p: unknown) => Array.isArray(p) && p.every(item => typeof item === "string")
+              )
+            : [],
+          // expandedColumnPaths도 동일하게 검증
+          expandedColumnPaths: Array.isArray(parsed.pivotState.expandedColumnPaths)
+            ? parsed.pivotState.expandedColumnPaths.filter(
+                (p: unknown) => Array.isArray(p) && p.every(item => typeof item === "string")
+              )
+            : [],
+          sortConfig: parsed.pivotState.sortConfig || null,
+          filterConfig: parsed.pivotState.filterConfig || {},
+        };
+        setPivotState(restoredState);
+      }
+      
+      if (parsed.sortConfig) setSortConfig(parsed.sortConfig);
+      if (parsed.columnWidths && typeof parsed.columnWidths === "object") {
+        setColumnWidths(parsed.columnWidths);
+      }
+    } catch (e) {
+      console.warn("피벗 상태 복원 실패, localStorage 초기화:", e);
+      // 손상된 상태는 제거
+      localStorage.removeItem(stateStorageKey);
     }
   }, [stateStorageKey]);
 
@@ -418,10 +457,12 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
 
   // 필터 영역 필드
   const filterFields = useMemo(
-    () =>
-      fields
+    () => {
+      const result = fields
         .filter((f) => f.area === "filter" && f.visible !== false)
-        .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)),
+        .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0));
+      return result;
+    },
     [fields]
   );
 
@@ -466,42 +507,87 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
 
     if (activeFilters.length === 0) return data;
 
-    return data.filter((row) => {
+    const result = data.filter((row) => {
       return activeFilters.every((filter) => {
-        const value = row[filter.field];
+        const rawValue = row[filter.field];
         const filterValues = filter.filterValues || [];
         const filterType = filter.filterType || "include";
 
+        // 타입 안전한 비교: 값을 문자열로 변환하여 비교
+        const value = rawValue === null || rawValue === undefined 
+          ? "(빈 값)" 
+          : String(rawValue);
+
         if (filterType === "include") {
-          return filterValues.includes(value);
+          return filterValues.some((fv) => String(fv) === value);
         } else {
-          return !filterValues.includes(value);
+          return filterValues.every((fv) => String(fv) !== value);
         }
       });
     });
+
+    // 모든 데이터가 필터링되면 경고 (디버깅용)
+    if (result.length === 0 && data.length > 0) {
+      console.warn("⚠️ [PivotGrid] 필터로 인해 모든 데이터가 제거됨");
+    }
+
+    return result;
   }, [data, fields]);
 
   // ==================== 피벗 처리 ====================
 
   const pivotResult = useMemo<PivotResult | null>(() => {
-    if (!filteredData || filteredData.length === 0 || fields.length === 0) {
+    try {
+      if (!filteredData || filteredData.length === 0 || fields.length === 0) {
+        return null;
+      }
+
+      // FieldChooser에서 이미 필드를 완전히 제거하므로 visible 필터링 불필요
+      // 행, 열, 데이터 영역에 필드가 하나도 없으면 null 반환 (필터는 제외)
+      if (fields.filter((f) => ["row", "column", "data"].includes(f.area)).length === 0) {
+        return null;
+      }
+
+      const result = processPivotData(
+        filteredData,
+        fields,
+        pivotState.expandedRowPaths,
+        pivotState.expandedColumnPaths
+      );
+      
+      return result;
+    } catch (error) {
+      console.error("❌ [pivotResult] 피벗 처리 에러:", error);
       return null;
     }
-
-    const visibleFields = fields.filter((f) => f.visible !== false);
-    // 행, 열, 데이터 영역에 필드가 하나도 없으면 null 반환 (필터는 제외)
-    if (visibleFields.filter((f) => ["row", "column", "data"].includes(f.area)).length === 0) {
-      return null;
-    }
-
-    return processPivotData(
-      filteredData,
-      visibleFields,
-      pivotState.expandedRowPaths,
-      pivotState.expandedColumnPaths
-    );
   }, [filteredData, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]);
   
+  // 초기 로드 시 첫 레벨 자동 확장
+  useEffect(() => {
+    try {
+      if (pivotResult && pivotResult.flatRows && pivotResult.flatRows.length > 0 && !isInitialExpanded) {
+        // 첫 레벨 행들의 경로 수집 (level 0인 행들)
+        const firstLevelRows = pivotResult.flatRows.filter((row) => row.level === 0 && row.hasChildren);
+
+        // 첫 레벨 행이 있으면 자동 확장
+        if (firstLevelRows.length > 0 && firstLevelRows.length < 100) {
+          const firstLevelPaths = firstLevelRows.map((row) => row.path);
+          setPivotState((prev) => ({
+            ...prev,
+            expandedRowPaths: firstLevelPaths,
+          }));
+          setIsInitialExpanded(true);
+        } else {
+          // 행이 너무 많으면 자동 확장 건너뛰기
+          setIsInitialExpanded(true);
+        }
+      }
+    } catch (error) {
+      console.error("❌ [초기 확장] 에러:", error);
+      setIsInitialExpanded(true);
+    }
+  }, [pivotResult, isInitialExpanded]);
+
   // 조건부 서식용 전체 값 수집
   const allCellValues = useMemo(() => {
     if (!pivotResult) return new Map<string, number[]>();
@@ -691,23 +777,52 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     [onExpandChange]
   );
 
-  // 전체 확장
+  // 전체 확장 (재귀적으로 모든 레벨 확장)
   const handleExpandAll = useCallback(() => {
-    if (!pivotResult) return;
-
-    const allRowPaths: string[][] = [];
-    pivotResult.flatRows.forEach((row) => {
-      if (row.hasChildren) {
-        allRowPaths.push(row.path);
+    try {
+      if (!pivotResult) {
+        return;
       }
-    });
 
-    setPivotState((prev) => ({
-      ...prev,
-      expandedRowPaths: allRowPaths,
-      expandedColumnPaths: [],
-    }));
-  }, [pivotResult]);
+      // 재귀적으로 모든 가능한 경로 생성
+      const allRowPaths: string[][] = [];
+      const rowFields = fields.filter((f) => f.area === "row" && f.visible !== false);
+      
+      // 행 필드가 없으면 종료
+      if (rowFields.length === 0) {
+        return;
+      }
+      
+      // 데이터에서 모든 고유한 경로 추출
+      const pathSet = new Set<string>();
+      filteredData.forEach((item) => {
+        // 마지막 레벨은 제외 (확장할 자식이 없으므로)
+        for (let depth = 1; depth < rowFields.length; depth++) {
+          const path = rowFields.slice(0, depth).map((f) => String(item[f.field] ?? ""));
+          const pathKey = JSON.stringify(path);
+          pathSet.add(pathKey);
+        }
+      });
+
+      // Set을 배열로 변환 (최대 1000개로 제한하여 성능 보호)
+      const MAX_PATHS = 1000;
+      let count = 0;
+      pathSet.forEach((pathKey) => {
+        if (count < MAX_PATHS) {
+          allRowPaths.push(JSON.parse(pathKey));
+          count++;
+        }
+      });
+
+      setPivotState((prev) => ({
+        ...prev,
+        expandedRowPaths: allRowPaths,
+        expandedColumnPaths: [],
+      }));
+    } catch (error) {
+      console.error("❌ [handleExpandAll] 에러:", error);
+    }
+  }, [pivotResult, fields, filteredData]);
 
   // 전체 축소
   const handleCollapseAll = useCallback(() => {
@@ -830,6 +945,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
   
   // 인쇄 기능 (PDF 내보내기보다 먼저 정의해야 함)
   const handlePrint = useCallback(() => {
+    if (typeof window === "undefined") return;
+    
     const printContent = tableRef.current;
     if (!printContent) return;
     
@@ -930,10 +1047,14 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     console.log("피벗 상태가 저장되었습니다.");
   }, [saveStateToStorage]);
   
-  // 상태 초기화
+  // 상태 초기화 (확장/축소, 정렬, 필터만 초기화, 필드 설정은 유지)
   const handleResetState = useCallback(() => {
-    localStorage.removeItem(stateStorageKey);
-    setFields(initialFields);
+    // 로컬 스토리지에서 상태 제거 (SSR 보호)
+    if (typeof window !== "undefined") {
+      localStorage.removeItem(stateStorageKey);
+    }
+    
+    // 확장/축소, 정렬, 필터 상태만 초기화
     setPivotState({
       expandedRowPaths: [],
       expandedColumnPaths: [],
@@ -944,7 +1065,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     setColumnWidths({});
     setSelectedCell(null);
     setSelectionRange(null);
-  }, [stateStorageKey, initialFields]);
+  }, [stateStorageKey]);
   
   // 필드 숨기기/표시 상태
   const [hiddenFields, setHiddenFields] = useState<Set<string>>(new Set());
@@ -961,11 +1082,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     });
   }, []);
   
-  // 숨겨진 필드 제외한 활성 필드들
-  const visibleFields = useMemo(() => {
-    return fields.filter((f) => !hiddenFields.has(f.field));
-  }, [fields, hiddenFields]);
-  
   // 숨겨진 필드 목록
   const hiddenFieldsList = useMemo(() => {
     return fields.filter((f) => hiddenFields.has(f.field));
@@ -1333,8 +1449,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                 variant="ghost"
                 size="sm"
                 className="h-7 px-2"
-                onClick={handleExpandAll}
-                title="전체 확장"
+                onClick={handleCollapseAll}
+                title="전체 축소"
               >
                 <ChevronDown className="h-4 w-4" />
               </Button>
@@ -1343,8 +1459,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                 variant="ghost"
                 size="sm"
                 className="h-7 px-2"
-                onClick={handleCollapseAll}
-                title="전체 축소"
+                onClick={handleExpandAll}
+                title="전체 확장"
               >
                 <ChevronRight className="h-4 w-4" />
               </Button>
@@ -1524,19 +1640,25 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                     <button
                       className={cn(
                         "flex items-center gap-1.5 px-2 py-1 rounded text-xs",
-                        "border transition-colors",
+                        "border transition-colors max-w-xs",
                         isFiltered
                           ? "bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-200"
                           : "bg-background border-border hover:bg-accent"
                       )}
+                      title={isFiltered ? `${filterField.caption}: ${selectedValues.join(", ")}` : filterField.caption}
                     >
-                      <span>{filterField.caption}</span>
-                      {isFiltered && (
-                        <span className="bg-orange-500 text-white px-1 rounded text-[10px]">
-                          {selectedValues.length}
+                      <span className="font-medium">{filterField.caption}:</span>
+                      {isFiltered ? (
+                        <span className="truncate">
+                          {selectedValues.length <= 2 
+                            ? selectedValues.join(", ")
+                            : `${selectedValues.slice(0, 2).join(", ")} 외 ${selectedValues.length - 2}개`
+                          }
                         </span>
+                      ) : (
+                        <span className="text-muted-foreground">전체</span>
                       )}
-                      <ChevronDown className="h-3 w-3" />
+                      <ChevronDown className="h-3 w-3 shrink-0" />
                     </button>
                   }
                 />
@@ -1550,20 +1672,27 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
       <div 
         ref={tableContainerRef}
         className="flex-1 overflow-auto focus:outline-none"
-        style={{ maxHeight: enableVirtualScroll ? containerHeight : undefined }}
+        style={{ 
+          maxHeight: enableVirtualScroll && containerHeight > 0 ? containerHeight : undefined,
+          // 최소 200px 보장 + 데이터에 맞게 조정 (최대 400px)
+          minHeight: Math.max(
+            200, // 절대 최소값 - 블라인드 효과 방지
+            Math.min(400, (sortedFlatRows.length + 3) * ROW_HEIGHT + 50)
+          )
+        }}
         tabIndex={0}
         onKeyDown={handleKeyDown}
       >
         <table ref={tableRef} className="w-full border-collapse">
           <thead>
             {/* 열 헤더 */}
-            <tr className="bg-muted/50">
+            <tr className="bg-background">
               {/* 좌상단 코너 (행 필드 라벨 + 필터) */}
               <th
                 className={cn(
                   "border-r border-b border-border",
-                  "px-2 py-2 text-left text-xs font-medium",
-                  "bg-muted sticky left-0 top-0 z-20"
+                  "px-2 py-1 text-left text-xs font-medium",
+                  "bg-background sticky left-0 top-0 z-20"
                 )}
                 rowSpan={columnFields.length > 0 ? 2 : 1}
               >
@@ -1607,8 +1736,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                   key={idx}
                   className={cn(
                     "border-r border-b border-border relative group",
-                    "px-2 py-1.5 text-center text-xs font-medium",
-                    "bg-muted/70 sticky top-0 z-10",
+                    "px-2 py-1 text-center text-xs font-medium",
+                    "bg-background sticky top-0 z-10",
                     dataFields.length === 1 && "cursor-pointer hover:bg-accent/50"
                   )}
                   colSpan={dataFields.length || 1}
@@ -1631,15 +1760,30 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                 </th>
               ))}
 
-              {/* 열 필드 필터 (헤더 왼쪽에 표시) */}
+              {/* 행 총계 헤더 */}
+              {totals?.showRowGrandTotals && (
+                <th
+                  className={cn(
+                    "border-b border-border",
+                    "px-2 py-1 text-center text-xs font-medium",
+                    "bg-background sticky top-0 z-10"
+                  )}
+                  colSpan={dataFields.length || 1}
+                  rowSpan={dataFields.length > 1 ? 2 : 1}
+                >
+                  총계
+                </th>
+              )}
+              
+              {/* 열 필드 필터 (헤더 오른쪽 끝에 표시) */}
               {columnFields.length > 0 && (
                 <th
                   className={cn(
                     "border-b border-border",
-                    "px-1 py-1.5 text-center text-xs",
-                    "bg-muted/50 sticky top-0 z-10"
+                    "px-1 py-1 text-center text-xs",
+                    "bg-background sticky top-0 z-10"
                   )}
-                  rowSpan={columnFields.length > 0 ? 2 : 1}
+                  rowSpan={dataFields.length > 1 ? 2 : 1}
                 >
                   <div className="flex flex-col gap-0.5">
                     {columnFields.map((f) => (
@@ -1671,25 +1815,11 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                   </div>
                 </th>
               )}
-
-              {/* 행 총계 헤더 */}
-              {totals?.showRowGrandTotals && (
-                <th
-                  className={cn(
-                    "border-b border-border",
-                    "px-2 py-1.5 text-center text-xs font-medium",
-                    "bg-primary/10 sticky top-0 z-10"
-                  )}
-                  colSpan={dataFields.length || 1}
-                >
-                  총계
-                </th>
-              )}
             </tr>
 
             {/* 데이터 필드 라벨 (다중 데이터 필드인 경우) */}
             {dataFields.length > 1 && (
-              <tr className="bg-muted/30">
+              <tr className="bg-background">
                 {flatColumns.map((col, colIdx) => (
                   <React.Fragment key={colIdx}>
                     {dataFields.map((df, dfIdx) => (
@@ -1697,7 +1827,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                         key={`${colIdx}-${dfIdx}`}
                         className={cn(
                           "border-r border-b border-border",
-                          "px-2 py-1 text-center text-xs font-normal",
+                          "px-2 py-0.5 text-center text-xs font-normal",
                           "text-muted-foreground cursor-pointer hover:bg-accent/50"
                         )}
                         onClick={() => handleSort(df.field)}
@@ -1710,19 +1840,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                     ))}
                   </React.Fragment>
                 ))}
-                {totals?.showRowGrandTotals &&
-                  dataFields.map((df, dfIdx) => (
-                    <th
-                      key={`total-${dfIdx}`}
-                      className={cn(
-                        "border-r border-b border-border",
-                        "px-2 py-1 text-center text-xs font-normal",
-                        "bg-primary/5 text-muted-foreground"
-                      )}
-                    >
-                      {df.caption}
-                    </th>
-                  ))}
               </tr>
             )}
           </thead>
@@ -1837,12 +1954,15 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
               });
             })()}
             
-            {/* 가상 스크롤 하단 여백 */}
-            {enableVirtualScroll && (
-              <tr style={{ height: virtualScroll.totalHeight - virtualScroll.offsetTop - (visibleFlatRows.length * ROW_HEIGHT) }}>
-                <td colSpan={rowFields.length + flatColumns.length + (totals?.showRowGrandTotals ? dataFields.length : 0)} />
-              </tr>
-            )}
+            {/* 가상 스크롤 하단 여백 - 음수 방지 */}
+            {enableVirtualScroll && (() => {
+              const bottomPadding = Math.max(0, virtualScroll.totalHeight - virtualScroll.offsetTop - (visibleFlatRows.length * ROW_HEIGHT));
+              return bottomPadding > 0 ? (
+                <tr style={{ height: bottomPadding }}>
+                  <td colSpan={rowFields.length + flatColumns.length + (totals?.showRowGrandTotals ? dataFields.length : 0)} />
+                </tr>
+              ) : null;
+            })()}
 
             {/* 열 총계 행 (하단 위치 - 기본값) */}
             {totals?.showColumnGrandTotals && totals?.rowGrandTotalPosition !== "top" && (

frontend/lib/registry/components/pivot-grid/PivotGridRenderer.tsx

@@ -1,12 +1,73 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useState, Component, ErrorInfo, ReactNode } 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";
+import { AlertCircle, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+// ==================== 에러 경계 ====================
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+}
+
+class PivotGridErrorBoundary extends Component<
+  { children: ReactNode; onReset?: () => void },
+  ErrorBoundaryState
+> {
+  constructor(props: { children: ReactNode; onReset?: () => void }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("🔴 [PivotGrid] 렌더링 에러:", error);
+    console.error("🔴 [PivotGrid] 에러 정보:", errorInfo);
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: undefined });
+    this.props.onReset?.();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex flex-col items-center justify-center p-8 text-center border border-destructive/50 rounded-lg bg-destructive/5">
+          <AlertCircle className="h-8 w-8 text-destructive mb-2" />
+          <h3 className="text-sm font-medium text-destructive mb-1">
+            피벗 그리드 오류
+          </h3>
+          <p className="text-xs text-muted-foreground mb-3 max-w-md">
+            {this.state.error?.message || "알 수 없는 오류가 발생했습니다."}
+          </p>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={this.handleReset}
+            className="gap-2"
+          >
+            <RefreshCw className="h-3.5 w-3.5" />
+            다시 시도
+          </Button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
 
 // ==================== 샘플 데이터 (미리보기용) ====================
 
@@ -95,43 +156,63 @@ const PivotGridWrapper: React.FC<any> = (props) => {
   const configFields = componentConfig.fields || props.fields;
   const configData = props.data;
   
-  // 디버깅 로그
-  console.log("🔷 PivotGridWrapper props:", {
-    isDesignMode: props.isDesignMode,
-    isInteractive: props.isInteractive,
-    hasComponentConfig: !!props.componentConfig,
-    hasConfig: !!props.config,
-    hasData: !!configData,
-    dataLength: configData?.length,
-    hasFields: !!configFields,
-    fieldsLength: configFields?.length,
-  });
+  // 🆕 테이블에서 데이터 자동 로딩
+  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 {
+        const response = await dataApi.getTableData(tableName, {
+          page: 1,
+          size: 10000, // 피벗 분석용 대량 데이터
+        });
+        
+        // dataApi.getTableData는 { data, total, page, size, totalPages } 구조
+        if (response.data && Array.isArray(response.data)) {
+          setLoadedData(response.data);
+        } else {
+          console.error("❌ [PivotGrid] 데이터 로딩 실패: 응답에 data 배열이 없음");
+          setLoadedData([]);
+        }
+      } catch (error) {
+        console.error("❌ [PivotGrid] 데이터 로딩 에러:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    
+    loadTableData();
+  }, [componentConfig.dataSource?.tableName, configData, props.isDesignMode]);
 
   // 디자인 모드 판단:
   // 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 || "피벗 그리드") + " (미리보기)"
     : (componentConfig.title || props.title);
 
-  console.log("🔷 PivotGridWrapper final:", {
-    isDesignMode,
-    usePreviewData,
-    finalDataLength: finalData?.length,
-    finalFieldsLength: finalFields?.length,
-  });
-
   // 총계 설정
   const totalsConfig = componentConfig.totals || props.totals || {
     showRowGrandTotals: true,
@@ -140,24 +221,39 @@ 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}
-      data={finalData}
-      fields={finalFields}
-      totals={totalsConfig}
-      style={componentConfig.style || props.style}
-      fieldChooser={componentConfig.fieldChooser || props.fieldChooser}
-      chart={componentConfig.chart || props.chart}
-      allowExpandAll={componentConfig.allowExpandAll !== false}
-      height={componentConfig.height || props.height || "400px"}
-      maxHeight={componentConfig.maxHeight || props.maxHeight}
-      exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }}
-      onCellClick={props.onCellClick}
-      onCellDoubleClick={props.onCellDoubleClick}
-      onFieldDrop={props.onFieldDrop}
-      onExpandChange={props.onExpandChange}
-    />
+    <PivotGridErrorBoundary>
+      <PivotGridComponent
+        title={finalTitle}
+        data={finalData}
+        fields={finalFields}
+        totals={totalsConfig}
+        style={componentConfig.style || props.style}
+        fieldChooser={componentConfig.fieldChooser || props.fieldChooser}
+        chart={componentConfig.chart || props.chart}
+        allowExpandAll={componentConfig.allowExpandAll !== false}
+        height="100%"
+        maxHeight={componentConfig.maxHeight || props.maxHeight}
+        exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }}
+        onCellClick={props.onCellClick}
+        onCellDoubleClick={props.onCellDoubleClick}
+        onFieldDrop={props.onFieldDrop}
+        onExpandChange={props.onExpandChange}
+      />
+    </PivotGridErrorBoundary>
   );
 };
 
@@ -224,18 +320,6 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer {
     const configFields = componentConfig.fields || props.fields;
     const configData = props.data;
 
-    // 디버깅 로그
-    console.log("🔷 PivotGridRenderer props:", {
-      isDesignMode: props.isDesignMode,
-      isInteractive: props.isInteractive,
-      hasComponentConfig: !!props.componentConfig,
-      hasConfig: !!props.config,
-      hasData: !!configData,
-      dataLength: configData?.length,
-      hasFields: !!configFields,
-      fieldsLength: configFields?.length,
-    });
-
     // 디자인 모드 판단:
     // 1. isDesignMode === true
     // 2. isInteractive === false (편집 모드)
@@ -254,13 +338,6 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer {
       ? (componentConfig.title || props.title || "피벗 그리드") + " (미리보기)"
       : (componentConfig.title || props.title);
 
-    console.log("🔷 PivotGridRenderer final:", {
-      isDesignMode,
-      usePreviewData,
-      finalDataLength: finalData?.length,
-      finalFieldsLength: finalFields?.length,
-    });
-
     // 총계 설정
     const totalsConfig = componentConfig.totals || props.totals || {
       showRowGrandTotals: true,
@@ -279,7 +356,7 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer {
         fieldChooser={componentConfig.fieldChooser || props.fieldChooser}
         chart={componentConfig.chart || props.chart}
         allowExpandAll={componentConfig.allowExpandAll !== false}
-        height={componentConfig.height || props.height || "400px"}
+        height="100%"
         maxHeight={componentConfig.maxHeight || props.maxHeight}
         exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }}
         onCellClick={props.onCellClick}

frontend/lib/registry/components/pivot-grid/components/FieldChooser.tsx

@@ -267,11 +267,9 @@ export const FieldChooser: React.FC<FieldChooserProps> = ({
     const existingConfig = selectedFields.find((f) => f.field === field.field);
 
     if (area === "none") {
-      // 필드 제거 또는 숨기기
+      // 필드 완전 제거 (visible: false 대신 배열에서 제거)
       if (existingConfig) {
-        const newFields = selectedFields.map((f) =>
-          f.field === field.field ? { ...f, visible: false } : f
-        );
+        const newFields = selectedFields.filter((f) => f.field !== field.field);
         onFieldsChange(newFields);
       }
     } else {
@@ -401,7 +399,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">

frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx

@@ -25,6 +25,7 @@ import {
   horizontalListSortingStrategy,
   useSortable,
 } from "@dnd-kit/sortable";
+import { useDroppable } from "@dnd-kit/core";
 import { CSS } from "@dnd-kit/utilities";
 import { cn } from "@/lib/utils";
 import { PivotFieldConfig, PivotAreaType } from "../types";
@@ -244,22 +245,31 @@ const DroppableArea: React.FC<DroppableAreaProps> = ({
   const areaFields = fields.filter((f) => f.area === area && f.visible !== false);
   const fieldIds = areaFields.map((f) => `${area}-${f.field}`);
 
+  // 🆕 드롭 가능 영역 설정
+  const { setNodeRef, isOver: isOverDroppable } = useDroppable({
+    id: area, // "filter", "column", "row", "data"
+  });
+
+  const finalIsOver = isOver || isOverDroppable;
+
   return (
     <div
+      ref={setNodeRef}
       className={cn(
-        "flex-1 min-h-[44px] rounded border border-dashed p-1.5",
-        "transition-colors duration-200",
+        "flex-1 min-h-[60px] rounded border-2 border-dashed p-2",
+        "transition-all duration-200",
         config.color,
-        isOver && "border-primary bg-primary/5"
+        finalIsOver && "border-primary bg-primary/10 scale-[1.02]",
+        areaFields.length === 0 && "border-2" // 빈 영역일 때 테두리 강조
       )}
       data-area={area}
     >
       {/* 영역 헤더 */}
-      <div className="flex items-center gap-1 mb-1 text-[11px] font-medium text-muted-foreground">
+      <div className="flex items-center gap-1 mb-1.5 text-xs font-semibold text-muted-foreground">
         {icon}
         <span>{title}</span>
         {areaFields.length > 0 && (
-          <span className="text-[10px] bg-muted px-1 rounded">
+          <span className="text-[10px] bg-muted px-1.5 py-0.5 rounded">
             {areaFields.length}
           </span>
         )}
@@ -267,11 +277,16 @@ const DroppableArea: React.FC<DroppableAreaProps> = ({
 
       {/* 필드 목록 */}
       <SortableContext items={fieldIds} strategy={horizontalListSortingStrategy}>
-        <div className="flex flex-wrap gap-1 min-h-[22px]">
+        <div className="flex flex-wrap gap-1 min-h-[28px] relative">
           {areaFields.length === 0 ? (
-            <span className="text-[10px] text-muted-foreground/50 italic">
-              필드를 여기로 드래그
-            </span>
+            <div 
+              className="flex items-center justify-center w-full py-1 pointer-events-none"
+              style={{ pointerEvents: 'none' }}
+            >
+              <span className="text-xs text-muted-foreground/70 italic font-medium">
+                ← 필드를 여기로 드래그하세요
+              </span>
+            </div>
           ) : (
             areaFields.map((field) => (
               <SortableFieldChip
@@ -339,8 +354,16 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
       return;
     }
 
-    // 드롭 영역 감지
+    // 드롭 영역 감지 (영역 자체의 ID를 우선 확인)
     const overId = over.id as string;
+    
+    // 1. overId가 영역 자체인 경우 (filter, column, row, data)
+    if (["filter", "column", "row", "data"].includes(overId)) {
+      setOverArea(overId as PivotAreaType);
+      return;
+    }
+    
+    // 2. overId가 필드인 경우 (예: row-part_name)
     const targetArea = overId.split("-")[0] as PivotAreaType;
     if (["filter", "column", "row", "data"].includes(targetArea)) {
       setOverArea(targetArea);
@@ -350,10 +373,13 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
   // 드래그 종료
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
+    const currentOverArea = overArea; // handleDragOver에서 감지한 영역 저장
     setActiveId(null);
     setOverArea(null);
 
-    if (!over) return;
+    if (!over) {
+      return;
+    }
 
     const activeId = active.id as string;
     const overId = over.id as string;
@@ -363,7 +389,16 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
       PivotAreaType,
       string
     ];
-    const [targetArea] = overId.split("-") as [PivotAreaType, string];
+    
+    // targetArea 결정: handleDragOver에서 감지한 영역 우선 사용
+    let targetArea: PivotAreaType;
+    if (currentOverArea) {
+      targetArea = currentOverArea;
+    } else if (["filter", "column", "row", "data"].includes(overId)) {
+      targetArea = overId as PivotAreaType;
+    } else {
+      targetArea = overId.split("-")[0] as PivotAreaType;
+    }
 
     // 같은 영역 내 정렬
     if (sourceArea === targetArea) {
@@ -406,6 +441,7 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
         }
         return f;
       });
+      
       onFieldsChange(newFields);
     }
   };

frontend/lib/registry/components/pivot-grid/hooks/useVirtualScroll.ts

@@ -51,14 +51,18 @@ export function useVirtualScroll(options: VirtualScrollOptions): VirtualScrollRe
   // 보이는 아이템 수
   const visibleCount = Math.ceil(containerHeight / itemHeight);
 
-  // 시작/끝 인덱스 계산
+  // 시작/끝 인덱스 계산 (음수 방지)
   const { startIndex, endIndex } = useMemo(() => {
+    // itemCount가 0이면 빈 배열
+    if (itemCount === 0) {
+      return { startIndex: 0, endIndex: -1 };
+    }
     const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
     const end = Math.min(
       itemCount - 1,
       Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
     );
-    return { startIndex: start, endIndex: end };
+    return { startIndex: start, endIndex: Math.max(start, end) }; // end가 start보다 작지 않도록
   }, [scrollTop, itemHeight, containerHeight, itemCount, overscan]);
 
   // 전체 높이

frontend/lib/registry/components/pivot-grid/utils/pivotEngine.ts

@@ -710,27 +710,19 @@ export function processPivotData(
     .filter((f) => f.area === "data" && f.visible !== false)
     .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0));
 
-  const filterFields = fields.filter(
-    (f) => f.area === "filter" && f.visible !== false
+  // 참고: 필터링은 PivotGridComponent에서 이미 처리됨
+  // 여기서는 추가 필터링 없이 전달받은 데이터 사용
+  const filteredData = data;
+
+  // 확장 경로 Set 변환 (잘못된 형식 필터링)
+  const validRowPaths = (expandedRowPaths || []).filter(
+    (p): p is string[] => Array.isArray(p) && p.length > 0 && p.every(item => typeof item === "string")
   );
-
-  // 필터 적용
-  let filteredData = data;
-  for (const filterField of filterFields) {
-    if (filterField.filterValues && filterField.filterValues.length > 0) {
-      filteredData = filteredData.filter((row) => {
-        const value = getFieldValue(row, filterField);
-        if (filterField.filterType === "exclude") {
-          return !filterField.filterValues!.includes(value);
-        }
-        return filterField.filterValues!.includes(value);
-      });
-    }
-  }
-
-  // 확장 경로 Set 변환
-  const expandedRowSet = new Set(expandedRowPaths.map(pathToKey));
-  const expandedColSet = new Set(expandedColumnPaths.map(pathToKey));
+  const validColPaths = (expandedColumnPaths || []).filter(
+    (p): p is string[] => Array.isArray(p) && p.length > 0 && p.every(item => typeof item === "string")
+  );
+  const expandedRowSet = new Set(validRowPaths.map(pathToKey));
+  const expandedColSet = new Set(validColPaths.map(pathToKey));
 
   // 기본 확장: 첫 번째 레벨 모두 확장
   if (expandedRowPaths.length === 0 && rowFields.length > 0) {

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";

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,
+  };
+}

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";
@@ -42,7 +41,7 @@ import {
   Lock,
 } from "lucide-react";
 import * as XLSX from "xlsx";
-import { FileText, ChevronRightIcon } from "lucide-react";
+import { FileText, ChevronRightIcon, Search } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
@@ -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();
-
   // ========================================
   // 설정 및 스타일
   // ========================================
@@ -462,6 +455,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
   // 🆕 컬럼 헤더 필터 상태 (상단에서 선언)
   const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [headerLikeFilters, setHeaderLikeFilters] = useState<Record<string, string>>({}); // LIKE 검색용
   const [openFilterColumn, setOpenFilterColumn] = useState<string | null>(null);
 
   // 🆕 Filter Builder (고급 필터) 관련 상태 - filteredData보다 먼저 정의해야 함
@@ -481,7 +475,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]) => {
@@ -491,16 +484,23 @@ 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;
+          return values.has(cellStr);
+        });
+      });
+    }
 
-          // 다중 값인 경우: 콤마로 분리해서 하나라도 포함되면 true
-          if (cellStr.includes(",")) {
-            const cellValues = cellStr.split(",").map(v => v.trim());
-            return cellValues.some(v => values.has(v));
-          }
+    // 2-1. 🆕 LIKE 검색 필터 적용
+    if (Object.keys(headerLikeFilters).length > 0) {
+      result = result.filter((row) => {
+        return Object.entries(headerLikeFilters).every(([columnName, searchText]) => {
+          if (!searchText || searchText.trim() === "") return true;
 
-          return false;
+          // 여러 가능한 컬럼명 시도
+          const cellValue = row[columnName] ?? row[columnName.toLowerCase()] ?? row[columnName.toUpperCase()];
+          const cellStr = cellValue !== null && cellValue !== undefined ? String(cellValue).toLowerCase() : "";
+
+          // LIKE 검색 (대소문자 무시)
+          return cellStr.includes(searchText.toLowerCase());
         });
       });
     }
@@ -558,7 +558,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     }
 
     return result;
-  }, [data, splitPanelPosition, splitPanelContext?.addedItemIds, headerFilters, filterGroups]);
+  }, [data, splitPanelPosition, splitPanelContext?.addedItemIds, headerFilters, headerLikeFilters, filterGroups]);
 
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
@@ -1048,16 +1048,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);
       },
@@ -2068,7 +2066,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);
@@ -2111,31 +2109,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);
   };
@@ -2205,8 +2178,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 });
   };
@@ -2273,176 +2273,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) => {
@@ -3098,6 +2952,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       headerFilters: Object.fromEntries(
         Object.entries(headerFilters).map(([key, set]) => [key, Array.from(set as Set<string>)]),
       ),
+      headerLikeFilters, // LIKE 검색 필터 저장
       pageSize: localPageSize,
       timestamp: Date.now(),
     };
@@ -3118,6 +2973,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     frozenColumnCount,
     showGridLines,
     headerFilters,
+    headerLikeFilters,
     localPageSize,
   ]);
 
@@ -3154,6 +3010,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         });
         setHeaderFilters(filters);
       }
+      if (state.headerLikeFilters) {
+        setHeaderLikeFilters(state.headerLikeFilters);
+      }
     } catch (error) {
       console.error("❌ 테이블 상태 복원 실패:", error);
     }
@@ -4087,7 +3946,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
@@ -4097,7 +3956,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":
@@ -4311,7 +4170,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} 선택`}
       />
     );
@@ -4600,36 +4459,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],
   );
 
   // ========================================
@@ -4768,22 +4601,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);
@@ -5827,10 +5647,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>
                         );
                       }
@@ -5849,18 +5666,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   {visibleColumns.map((column, columnIndex) => {
                     const columnWidth = columnWidths[column.columnName];
                     const isFrozen = frozenColumns.includes(column.columnName);
+                    const frozenIndex = frozenColumns.indexOf(column.columnName);
 
-                    // 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
-                    // 숨겨진 컬럼은 제외하고 보이는 틀고정 컬럼만 포함
-                    const visibleFrozenColumns = visibleColumns
-                      .filter(col => frozenColumns.includes(col.columnName))
-                      .map(col => col.columnName);
-                    const frozenIndex = visibleFrozenColumns.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;
@@ -5926,12 +5738,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>
                             )}
@@ -5952,7 +5759,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                       }}
                                       className={cn(
                                         "hover:bg-primary/20 ml-1 rounded p-0.5 transition-colors",
-                                        headerFilters[column.columnName]?.size > 0 && "text-primary bg-primary/10",
+                                        (headerFilters[column.columnName]?.size > 0 || headerLikeFilters[column.columnName]) && "text-primary bg-primary/10",
                                       )}
                                       title="필터"
                                     >
@@ -5960,7 +5767,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                     </button>
                                   </PopoverTrigger>
                                   <PopoverContent
-                                    className="w-48 p-2"
+                                    className="w-56 p-2"
                                     align="start"
                                     onClick={(e) => e.stopPropagation()}
                                   >
@@ -5969,26 +5776,52 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                         <span className="text-xs font-medium">
                                           필터: {columnLabels[column.columnName] || column.displayName}
                                         </span>
-                                        {headerFilters[column.columnName]?.size > 0 && (
+                                        {(headerFilters[column.columnName]?.size > 0 || headerLikeFilters[column.columnName]) && (
                                           <button
-                                            onClick={() => clearHeaderFilter(column.columnName)}
+                                            onClick={() => {
+                                              clearHeaderFilter(column.columnName);
+                                              setHeaderLikeFilters((prev) => {
+                                                const newFilters = { ...prev };
+                                                delete newFilters[column.columnName];
+                                                return newFilters;
+                                              });
+                                            }}
                                             className="text-destructive text-xs hover:underline"
                                           >
                                             초기화
                                           </button>
                                         )}
                                       </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);
+                                      {/* LIKE 검색 입력 필드 */}
+                                      <div className="relative">
+                                        <Search className="text-muted-foreground absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2" />
+                                        <input
+                                          type="text"
+                                          placeholder="검색어 입력 (포함)"
+                                          value={headerLikeFilters[column.columnName] || ""}
+                                          onChange={(e) => {
+                                            setHeaderLikeFilters((prev) => ({
+                                              ...prev,
+                                              [column.columnName]: e.target.value,
+                                            }));
+                                          }}
+                                          className="border-input bg-background placeholder:text-muted-foreground h-7 w-full rounded-md border pl-7 pr-2 text-xs focus:outline-none focus:ring-1 focus:ring-primary"
+                                          onClick={(e) => e.stopPropagation()}
+                                        />
+                                      </div>
+                                      {/* 구분선 */}
+                                      <div className="text-muted-foreground border-t pt-2 text-[10px]">또는 값 선택:</div>
+                                      <div className="max-h-40 space-y-1 overflow-y-auto">
+                                        {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(
@@ -5998,7 +5831,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>
                                           );
                                         })}
@@ -6171,17 +6004,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 const isNumeric = inputType === "number" || inputType === "decimal";
 
                                 const isFrozen = frozenColumns.includes(column.columnName);
+                                const frozenIndex = frozenColumns.indexOf(column.columnName);
 
-                                // 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
-                                const visibleFrozenColumns = visibleColumns
-                                  .filter(col => frozenColumns.includes(col.columnName))
-                                  .map(col => col.columnName);
-                                const frozenIndex = visibleFrozenColumns.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;
@@ -6328,12 +6157,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;
@@ -6347,10 +6171,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;
@@ -6510,17 +6335,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                       const summary = summaryData[column.columnName];
                       const columnWidth = columnWidths[column.columnName];
                       const isFrozen = frozenColumns.includes(column.columnName);
+                      const frozenIndex = frozenColumns.indexOf(column.columnName);
 
-                      // 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
-                      const visibleFrozenColumns = visibleColumns
-                        .filter(col => frozenColumns.includes(col.columnName))
-                        .map(col => col.columnName);
-                      const frozenIndex = visibleFrozenColumns.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;

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);

frontend/lib/utils/buttonActions.ts

@@ -708,6 +708,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> = {};

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",

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",

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; // 확장 상태
+}