코드 할당 요청 시 폼 데이터 추가: numberingRuleController에서 코드 할당 요청 시 폼 데이터를 포함하도록 수정하였습니다. 이를 통해 날짜 컬럼 기준 생성 시 필요한 정보를 전달할 수 있도록 개선하였습니다.

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

PLAN.MD

@@ -1,7 +1,7 @@
-# 프로젝트: 화면 관리 기능 개선 (복제/삭제/그룹 관리)
+# 프로젝트: 화면 관리 기능 개선 (복제/삭제/그룹 관리/테이블 설정)
 
 ## 개요
-화면 관리 시스템의 복제 및 삭제 기능을 전면 개선하여, 단일 화면 복제, 그룹(폴더) 전체 복제, 정렬 순서 유지, 일괄 이름 변경 등 다양한 고급 기능을 지원합니다.
+화면 관리 시스템의 복제, 삭제, 수정, 테이블 설정 기능을 전면 개선하여 효율적인 화면 관리를 지원합니다.
 
 ## 핵심 기능
 
@@ -15,47 +15,54 @@
 ### 2. 그룹(폴더) 전체 복제
 - [x] 대분류 폴더 복제 시 모든 하위 폴더 + 화면 재귀적 복제
 - [x] 정렬 순서(display_order) 유지
-  - 그룹 생성 시 원본 display_order 전달
-  - 화면 추가 시 원본 display_order 유지
-  - 하위 그룹들 display_order 순으로 정렬 후 복제
 - [x] 대분류(최상위 그룹) 복제 시 경고 문구 표시
-- [x] 정렬 순서 입력 필드 추가 (사용자가 직접 수정 가능)
-- [x] 원본 그룹 정보 표시 개선
-  - 직접 포함 화면 수
-  - 하위 그룹 수
-  - 복제될 총 화면 수 (하위 그룹 포함)
+- [x] 정렬 순서 입력 필드 추가
+- [x] 복제 모드 선택: 전체(폴더+화면), 폴더만, 화면만
+- [x] 모달 스크롤 지원 (max-h-[90vh] overflow-y-auto)
 
 ### 3. 고급 옵션: 이름 일괄 변경
-- [x] 삭제할 텍스트 지정 (모든 폴더/화면 이름에서 제거)
-- [x] 추가할 접미사 지정 (기본값: " (복제)")
+- [x] 찾을 텍스트 / 대체할 텍스트 (Find & Replace)
 - [x] 미리보기 기능
 
 ### 4. 삭제 기능
 - [x] 단일 화면 삭제 (휴지통으로 이동)
-- [x] 그룹 삭제 시 옵션 선택
-  - "화면도 함께 삭제" 체크박스
-  - 체크 시: 그룹 + 포함된 화면 모두 삭제
-  - 미체크 시: 화면은 "미분류"로 이동
+- [x] 그룹 삭제 (화면 함께 삭제 옵션)
+- [x] 삭제 시 로딩 프로그레스 바 표시
 
-### 5. 회사 코드 지원 (최고 관리자)
+### 5. 화면 수정 기능
+- [x] 우클릭 "수정" 메뉴로 화면 이름/그룹/역할/정렬 순서 변경
+- [x] 그룹 추가/수정 시 상위 그룹 기반 자동 회사 코드 설정
+
+### 6. 테이블 설정 기능 (TableSettingModal)
+- [x] 화면 설정 모달에 "테이블 설정" 탭 추가
+- [x] 입력 타입 변경 시 관련 참조 필드 자동 초기화
+  - 엔티티→텍스트: referenceTable, referenceColumn, displayColumn 초기화
+  - 코드→다른 타입: codeCategory, codeValue 초기화
+- [x] 데이터 일관성 유지 (inputType ↔ referenceTable 연동)
+- [x] 조인 배지 단일화 (FK 배지 제거, 조인 배지만 표시)
+
+### 7. 회사 코드 지원 (최고 관리자)
 - [x] 대상 회사 선택 가능
-- [x] 복제된 그룹/화면에 선택한 회사 코드 적용
+- [x] 상위 그룹 선택 시 자동 회사 코드 설정
 
 ## 관련 파일
-- `frontend/components/screen/CopyScreenModal.tsx` - 복제 모달 (화면/그룹 통합)
+- `frontend/components/screen/CopyScreenModal.tsx` - 복제 모달
 - `frontend/components/screen/ScreenGroupTreeView.tsx` - 트리 뷰 + 컨텍스트 메뉴
-- `frontend/lib/api/screen.ts` - 화면 API (복제, 삭제)
+- `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
 
 ## 진행 상태
 - [완료] 단일 화면 복제 + 새로고침
 - [완료] 그룹 전체 복제 (재귀적)
-- [완료] 정렬 순서(display_order) 유지
-- [완료] 대분류 경고 문구
-- [완료] 정렬 순서 입력 필드
-- [완료] 고급 옵션: 이름 일괄 변경
-- [완료] 단일 화면 삭제
-- [완료] 그룹 삭제 (화면 함께 삭제 옵션)
+- [완료] 고급 옵션: 이름 일괄 변경 (Find & Replace)
+- [완료] 단일 화면/그룹 삭제 + 로딩 프로그레스
+- [완료] 화면 수정 (이름/그룹/역할/순서)
+- [완료] 테이블 설정 탭 추가
+- [완료] 입력 타입 변경 시 관련 필드 초기화
+- [완료] 그룹 복제 모달 스크롤 문제 수정
 
 ---
 

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]
-    );
-    
-    // 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]
-    );
+    logger.info(`메뉴 삭제 대상: 본인(${menuObjid}) + 하위 메뉴 ${childMenuIds.length}개`, {
+      menuName: currentMenu.menu_name_kor,
+      totalCount: allMenuIdsToDelete.length,
+      childMenuIds,
+    });
 
-    logger.info("메뉴 관련 데이터 정리 완료", { menuObjid });
+    // 모든 삭제 대상 메뉴에 대해 관련 데이터 정리
+    for (const objid of allMenuIdsToDelete) {
+      await cleanupMenuRelatedData(objid);
+    }
 
-    // Raw Query를 사용한 메뉴 삭제
-    const [deletedMenu] = await query<any>(
-      `DELETE FROM menu_info WHERE objid = $1 RETURNING *`,
-      [menuObjid]
-    );
+    logger.info("메뉴 관련 데이터 정리 완료", { 
+      menuObjid, 
+      totalCleaned: allMenuIdsToDelete.length 
+    });
 
-    logger.info("메뉴 삭제 성공", { deletedMenu });
+    // 하위 메뉴부터 역순으로 삭제 (외래키 제약 회피)
+    // 가장 깊은 하위부터 삭제해야 하므로 역순으로
+    const reversedIds = [...allMenuIdsToDelete].reverse();
+    
+    for (const objid of reversedIds) {
+      await query(`DELETE FROM menu_info WHERE objid = $1`, [objid]);
+    }
+
+    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/numberingRuleController.ts

@@ -216,11 +216,12 @@ router.post("/:ruleId/preview", authenticateToken, async (req: AuthenticatedRequ
 router.post("/:ruleId/allocate", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
   const companyCode = req.user!.companyCode;
   const { ruleId } = req.params;
+  const { formData } = req.body; // 폼 데이터 (날짜 컬럼 기준 생성 시 사용)
 
-  logger.info("코드 할당 요청", { ruleId, companyCode });
+  logger.info("코드 할당 요청", { ruleId, companyCode, hasFormData: !!formData });
 
   try {
-    const allocatedCode = await numberingRuleService.allocateCode(ruleId, companyCode);
+    const allocatedCode = await numberingRuleService.allocateCode(ruleId, companyCode, formData);
     logger.info("코드 할당 성공", { ruleId, allocatedCode });
     return res.json({ success: true, data: { generatedCode: allocatedCode } });
   } catch (error: any) {

backend-node/src/controllers/screenGroupController.ts

@@ -1,6 +1,13 @@
 import { Request, Response } from "express";
 import { getPool } from "../database/db";
 import { logger } from "../utils/logger";
+import { AuthenticatedRequest } from "../types/auth";
+import {
+  syncScreenGroupsToMenu,
+  syncMenuToScreenGroups,
+  getSyncStatus,
+  syncAllCompanies,
+} from "../services/menuScreenSyncService";
 
 // pool 인스턴스 가져오기
 const pool = getPool();
@@ -10,9 +17,9 @@ const pool = getPool();
 // ============================================================
 
 // 화면 그룹 목록 조회
-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);
 
@@ -84,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.*,
@@ -130,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) {
@@ -204,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;
 
     // 회사 코드 결정: 최고 관리자가 특정 회사를 선택한 경우 해당 회사로, 아니면 현재 그룹의 회사 유지
@@ -293,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];
 
@@ -308,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();
   }
 };
 
@@ -329,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) {
@@ -369,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];
@@ -400,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 = `
@@ -439,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 = `
@@ -480,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,
@@ -521,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,
@@ -566,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];
@@ -600,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 = `
@@ -650,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
@@ -689,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
@@ -732,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];
@@ -766,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 = `
@@ -815,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) {
@@ -848,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 = `
@@ -883,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];
@@ -916,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;
 
@@ -984,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;
 
@@ -1184,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;
 
@@ -2014,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/routes/cascadingAutoFillRoutes.ts

@@ -58,3 +58,4 @@ export default router;
 
 
 
+

backend-node/src/routes/cascadingConditionRoutes.ts

@@ -54,3 +54,4 @@ export default router;
 
 
 
+

backend-node/src/routes/cascadingHierarchyRoutes.ts

@@ -70,3 +70,4 @@ export default router;
 
 
 
+

backend-node/src/routes/cascadingMutualExclusionRoutes.ts

@@ -58,3 +58,4 @@ export default router;
 
 
 
+

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/masterDetailExcelService.ts

@@ -883,16 +883,21 @@ class MasterDetailExcelService {
 
   /**
    * 채번 규칙으로 번호 생성 (기존 numberingRuleService 사용)
+   * @param client DB 클라이언트
+   * @param ruleId 규칙 ID
+   * @param companyCode 회사 코드
+   * @param formData 폼 데이터 (날짜 컬럼 기준 생성 시 사용)
    */
   private async generateNumberWithRule(
     client: any, 
     ruleId: string, 
-    companyCode: string
+    companyCode: string,
+    formData?: Record<string, any>
   ): Promise<string> {
     try {
       // 기존 numberingRuleService를 사용하여 코드 할당
       const { numberingRuleService } = await import("./numberingRuleService");
-      const generatedCode = await numberingRuleService.allocateCode(ruleId, companyCode);
+      const generatedCode = await numberingRuleService.allocateCode(ruleId, companyCode, formData);
       
       logger.info(`채번 생성 (numberingRuleService): rule=${ruleId}, result=${generatedCode}`);
       

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/nodeFlowExecutionService.ts

@@ -984,9 +984,11 @@ export class NodeFlowExecutionService {
             // 자동 생성 (채번 규칙)
             const companyCode = context.buttonContext?.companyCode || "*";
             try {
+              // 폼 데이터를 전달하여 날짜 컬럼 기준 생성 지원
               value = await numberingRuleService.allocateCode(
                 mapping.numberingRuleId,
-                companyCode
+                companyCode,
+                data // 폼 데이터 전달 (날짜 컬럼 기준 생성 시 사용)
               );
               console.log(
                 `  🔢 자동 생성(채번): ${mapping.targetField} = ${value} (규칙: ${mapping.numberingRuleId})`

backend-node/src/services/numberingRuleService.ts

@@ -937,8 +937,15 @@ class NumberingRuleService {
 
   /**
    * 코드 할당 (저장 시점에 실제 순번 증가)
+   * @param ruleId 채번 규칙 ID
+   * @param companyCode 회사 코드
+   * @param formData 폼 데이터 (날짜 컬럼 기준 생성 시 사용)
    */
-  async allocateCode(ruleId: string, companyCode: string): Promise<string> {
+  async allocateCode(
+    ruleId: string, 
+    companyCode: string, 
+    formData?: Record<string, any>
+  ): Promise<string> {
     const pool = getPool();
     const client = await pool.connect();
 
@@ -974,10 +981,40 @@ class NumberingRuleService {
 
             case "date": {
               // 날짜 (다양한 날짜 형식)
-              return this.formatDate(
-                new Date(),
-                autoConfig.dateFormat || "YYYYMMDD"
-              );
+              const dateFormat = autoConfig.dateFormat || "YYYYMMDD";
+              
+              // 컬럼 기준 생성인 경우 폼 데이터에서 날짜 추출
+              if (autoConfig.useColumnValue && autoConfig.sourceColumnName && formData) {
+                const columnValue = formData[autoConfig.sourceColumnName];
+                if (columnValue) {
+                  // 날짜 문자열 또는 Date 객체를 Date로 변환
+                  const dateValue = columnValue instanceof Date 
+                    ? columnValue 
+                    : new Date(columnValue);
+                  
+                  if (!isNaN(dateValue.getTime())) {
+                    logger.info("컬럼 기준 날짜 생성", {
+                      sourceColumn: autoConfig.sourceColumnName,
+                      columnValue,
+                      parsedDate: dateValue.toISOString(),
+                    });
+                    return this.formatDate(dateValue, dateFormat);
+                  } else {
+                    logger.warn("날짜 변환 실패, 현재 날짜 사용", {
+                      sourceColumn: autoConfig.sourceColumnName,
+                      columnValue,
+                    });
+                  }
+                } else {
+                  logger.warn("소스 컬럼 값이 없음, 현재 날짜 사용", {
+                    sourceColumn: autoConfig.sourceColumnName,
+                    formDataKeys: Object.keys(formData),
+                  });
+                }
+              }
+              
+              // 기본: 현재 날짜 사용
+              return this.formatDate(new Date(), dateFormat);
             }
 
             case "text": {

backend-node/src/services/tableManagementService.ts

@@ -1320,7 +1320,7 @@ export class TableManagementService {
         // 각 값을 LIKE 또는 = 조건으로 처리
         const conditions: string[] = [];
         const values: any[] = [];
-        
+
         value.forEach((v: any, idx: number) => {
           const safeValue = String(v).trim();
           // 정확히 일치하거나, 콤마로 구분된 값 중 하나로 포함
@@ -1329,17 +1329,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,
@@ -1778,21 +1785,29 @@ export class TableManagementService {
         // contains 연산자 (기본): 참조 테이블의 표시 컬럼으로 검색
         const referenceColumn = entityTypeInfo.referenceColumn || "id";
         const referenceTable = entityTypeInfo.referenceTable;
-        
+
         // 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}%`],
@@ -2156,14 +2171,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}
@@ -2500,7 +2515,7 @@ export class TableManagementService {
           skippedColumns.push(column);
           return;
         }
-        
+
         const dataType = columnTypeMap.get(column) || "text";
         setConditions.push(
           `"${column}" = $${paramIndex}::${this.getPostgreSQLType(dataType)}`
@@ -2512,7 +2527,9 @@ export class TableManagementService {
       });
 
       if (skippedColumns.length > 0) {
-        logger.info(`⚠️ 테이블에 존재하지 않는 컬럼 스킵: ${skippedColumns.join(", ")}`);
+        logger.info(
+          `⚠️ 테이블에 존재하지 않는 컬럼 스킵: ${skippedColumns.join(", ")}`
+        );
       }
 
       // WHERE 조건 생성 (PRIMARY KEY 우선, 없으면 모든 원본 데이터 사용)
@@ -2782,10 +2799,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}`
+              );
             }
           }
 
@@ -2793,25 +2814,31 @@ export class TableManagementService {
             // joinAlias에서 실제 컬럼명 추출
             const sourceColumn = baseJoinConfig.sourceColumn; // 실제 소스 컬럼 (예: partner_id)
             const originalJoinAlias = additionalColumn.joinAlias; // 프론트엔드가 보낸 별칭 (예: customer_id_customer_name)
-            
+
             // 🔄 프론트엔드가 잘못된 소스 컬럼으로 추론한 경우 처리
             // customer_id_customer_name → customer_name 추출 (customer_id_ 부분 제거)
             // 또는 partner_id_customer_name → customer_name 추출 (partner_id_ 부분 제거)
             let actualColumnName: string;
-            
+
             // 프론트엔드가 보낸 joinAlias에서 실제 컬럼명 추출
             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;
             }
-            
+
             // 🆕 올바른 joinAlias 재생성 (실제 소스 컬럼 기반)
             const correctedJoinAlias = `${sourceColumn}_${actualColumnName}`;
 
@@ -3205,8 +3232,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 = [];
@@ -3612,8 +3641,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);
@@ -3815,9 +3846,12 @@ export class TableManagementService {
     // 🔒 멀티테넌시: 회사별 데이터 테이블은 캐시 사용 불가 (company_code 필터링 필요)
     const companySpecificTables = [
       "supplier_mng",
-      "customer_mng", 
+      "customer_mng",
       "item_info",
       "dept_info",
+      "sales_order_mng", // 🔧 수주관리 테이블 추가
+      "sales_order_detail", // 🔧 수주상세 테이블 추가
+      "partner_info", // 🔧 거래처 테이블 추가
       // 필요시 추가
     ];
 
@@ -4733,7 +4767,7 @@ export class TableManagementService {
   /**
    * 두 테이블 간의 엔티티 관계 자동 감지
    * column_labels에서 엔티티 타입 설정을 기반으로 테이블 간 관계를 찾습니다.
-   * 
+   *
    * @param leftTable 좌측 테이블명
    * @param rightTable 우측 테이블명
    * @returns 감지된 엔티티 관계 배열
@@ -4741,16 +4775,20 @@ 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;
         rightColumn: string;
@@ -4817,12 +4855,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 [];
     }
   }

docs/노드플로우_개선사항.md

@@ -590,3 +590,4 @@ const result = await executeNodeFlow(flowId, {
 
 
 
+

docs/다국어_관리_시스템_개선_계획서.md

@@ -596,3 +596,4 @@ POST /multilang/keys/123/override
 
 
 
+

docs/메일발송_기능_사용_가이드.md

@@ -363,3 +363,4 @@
 
 
 
+

docs/즉시저장_버튼_액션_구현_계획서.md

@@ -349,3 +349,4 @@ const getComponentValue = (componentId: string) => {
 
 
 
+

docs/집계위젯_개발진행상황.md

@@ -208,3 +208,4 @@ console.log("[AggregationWidget] selectableComponents:", filtered);
 - `frontend/components/screen/panels/UnifiedPropertiesPanel.tsx` - `allComponents` 전달
 - `frontend/components/screen/ScreenDesigner.tsx` - `layout.components` 전달
 
+

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

@@ -112,10 +112,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) {
@@ -202,6 +207,7 @@ export default function ScreenManagementPage() {
                 selectedScreen={selectedScreen}
                 onScreenSelect={handleScreenSelect}
                 onScreenDesign={handleDesignScreen}
+                searchTerm={searchTerm}
                 onGroupSelect={(group) => {
                   setSelectedGroup(group);
                   setSelectedScreen(null); // 화면 선택 해제

frontend/components/numbering-rule/AutoConfigPanel.tsx

@@ -1,10 +1,17 @@
 "use client";
 
-import React from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
 import { CodePartType, DATE_FORMAT_OPTIONS } from "@/types/numbering-rule";
+import { tableManagementApi } from "@/lib/api/tableManagement";
 
 interface AutoConfigPanelProps {
   partType: CodePartType;
@@ -13,6 +20,18 @@ interface AutoConfigPanelProps {
   isPreview?: boolean;
 }
 
+interface TableInfo {
+  tableName: string;
+  displayName: string;
+}
+
+interface ColumnInfo {
+  columnName: string;
+  displayName: string;
+  dataType: string;
+  inputType?: string;
+}
+
 export const AutoConfigPanel: React.FC<AutoConfigPanelProps> = ({
   partType,
   config = {},
@@ -104,28 +123,11 @@ export const AutoConfigPanel: React.FC<AutoConfigPanelProps> = ({
   // 3. 날짜
   if (partType === "date") {
     return (
-      <div>
-        <Label className="text-xs font-medium sm:text-sm">날짜 형식</Label>
-        <Select
-          value={config.dateFormat || "YYYYMMDD"}
-          onValueChange={(value) => onChange({ ...config, dateFormat: value })}
-          disabled={isPreview}
-        >
-          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {DATE_FORMAT_OPTIONS.map((option) => (
-              <SelectItem key={option.value} value={option.value} className="text-xs sm:text-sm">
-                {option.label} ({option.example})
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
-          현재 날짜가 자동으로 입력됩니다
-        </p>
-      </div>
+      <DateConfigPanel
+        config={config}
+        onChange={onChange}
+        isPreview={isPreview}
+      />
     );
   }
 
@@ -150,3 +152,314 @@ export const AutoConfigPanel: React.FC<AutoConfigPanelProps> = ({
 
   return null;
 };
+
+/**
+ * 날짜 타입 전용 설정 패널
+ * - 날짜 형식 선택
+ * - 컬럼 값 기준 생성 옵션
+ */
+interface DateConfigPanelProps {
+  config?: any;
+  onChange: (config: any) => void;
+  isPreview?: boolean;
+}
+
+const DateConfigPanel: React.FC<DateConfigPanelProps> = ({
+  config = {},
+  onChange,
+  isPreview = false,
+}) => {
+  // 테이블 목록
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
+
+  // 컬럼 목록
+  const [columns, setColumns] = useState<ColumnInfo[]>([]);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  const [columnComboboxOpen, setColumnComboboxOpen] = useState(false);
+
+  // 체크박스 상태
+  const useColumnValue = config.useColumnValue || false;
+  const sourceTableName = config.sourceTableName || "";
+  const sourceColumnName = config.sourceColumnName || "";
+
+  // 테이블 목록 로드
+  useEffect(() => {
+    if (useColumnValue && tables.length === 0) {
+      loadTables();
+    }
+  }, [useColumnValue]);
+
+  // 테이블 변경 시 컬럼 로드
+  useEffect(() => {
+    if (sourceTableName) {
+      loadColumns(sourceTableName);
+    } else {
+      setColumns([]);
+    }
+  }, [sourceTableName]);
+
+  const loadTables = async () => {
+    setLoadingTables(true);
+    try {
+      const response = await tableManagementApi.getTableList();
+      if (response.success && response.data) {
+        const tableList = response.data.map((t: any) => ({
+          tableName: t.tableName || t.table_name,
+          displayName: t.displayName || t.table_label || t.tableName || t.table_name,
+        }));
+        setTables(tableList);
+      }
+    } catch (error) {
+      console.error("테이블 목록 로드 실패:", error);
+    } finally {
+      setLoadingTables(false);
+    }
+  };
+
+  const loadColumns = async (tableName: string) => {
+    setLoadingColumns(true);
+    try {
+      const response = await tableManagementApi.getColumnList(tableName);
+      if (response.success && response.data) {
+        const rawColumns = response.data?.columns || response.data;
+        // 날짜 타입 컬럼만 필터링
+        const dateColumns = (rawColumns as any[]).filter((col: any) => {
+          const inputType = col.inputType || col.input_type || "";
+          const dataType = (col.dataType || col.data_type || "").toLowerCase();
+          return (
+            inputType === "date" ||
+            inputType === "datetime" ||
+            dataType.includes("date") ||
+            dataType.includes("timestamp")
+          );
+        });
+
+        setColumns(
+          dateColumns.map((col: any) => ({
+            columnName: col.columnName || col.column_name,
+            displayName: col.displayName || col.column_label || col.columnName || col.column_name,
+            dataType: col.dataType || col.data_type || "",
+            inputType: col.inputType || col.input_type || "",
+          }))
+        );
+      }
+    } catch (error) {
+      console.error("컬럼 목록 로드 실패:", error);
+    } finally {
+      setLoadingColumns(false);
+    }
+  };
+
+  // 선택된 테이블/컬럼 라벨
+  const selectedTableLabel = useMemo(() => {
+    const found = tables.find((t) => t.tableName === sourceTableName);
+    return found ? `${found.displayName} (${found.tableName})` : "";
+  }, [tables, sourceTableName]);
+
+  const selectedColumnLabel = useMemo(() => {
+    const found = columns.find((c) => c.columnName === sourceColumnName);
+    return found ? `${found.displayName} (${found.columnName})` : "";
+  }, [columns, sourceColumnName]);
+
+  return (
+    <div className="space-y-3 sm:space-y-4">
+      {/* 날짜 형식 선택 */}
+      <div>
+        <Label className="text-xs font-medium sm:text-sm">날짜 형식</Label>
+        <Select
+          value={config.dateFormat || "YYYYMMDD"}
+          onValueChange={(value) => onChange({ ...config, dateFormat: value })}
+          disabled={isPreview}
+        >
+          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {DATE_FORMAT_OPTIONS.map((option) => (
+              <SelectItem key={option.value} value={option.value} className="text-xs sm:text-sm">
+                {option.label} ({option.example})
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+          {useColumnValue
+            ? "선택한 컬럼의 날짜 값이 이 형식으로 변환됩니다"
+            : "현재 날짜가 자동으로 입력됩니다"}
+        </p>
+      </div>
+
+      {/* 컬럼 값 기준 생성 체크박스 */}
+      <div className="flex items-start gap-2">
+        <Checkbox
+          id="useColumnValue"
+          checked={useColumnValue}
+          onCheckedChange={(checked) => {
+            onChange({
+              ...config,
+              useColumnValue: checked,
+              // 체크 해제 시 테이블/컬럼 초기화
+              ...(checked ? {} : { sourceTableName: "", sourceColumnName: "" }),
+            });
+          }}
+          disabled={isPreview}
+          className="mt-0.5"
+        />
+        <div className="flex-1">
+          <Label
+            htmlFor="useColumnValue"
+            className="cursor-pointer text-xs font-medium sm:text-sm"
+          >
+            날짜 컬럼 기준으로 생성
+          </Label>
+          <p className="text-[10px] text-muted-foreground sm:text-xs">
+            폼에 입력된 날짜 값으로 코드를 생성합니다
+          </p>
+        </div>
+      </div>
+
+      {/* 테이블 선택 (체크 시 표시) */}
+      {useColumnValue && (
+        <>
+          <div>
+            <Label className="text-xs font-medium sm:text-sm">테이블</Label>
+            <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={tableComboboxOpen}
+                  disabled={isPreview || loadingTables}
+                  className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                >
+                  {loadingTables
+                    ? "로딩 중..."
+                    : sourceTableName
+                      ? selectedTableLabel
+                      : "테이블 선택"}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent
+                className="p-0"
+                style={{ width: "var(--radix-popover-trigger-width)" }}
+                align="start"
+              >
+                <Command>
+                  <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
+                  <CommandList>
+                    <CommandEmpty className="text-xs sm:text-sm">
+                      테이블을 찾을 수 없습니다
+                    </CommandEmpty>
+                    <CommandGroup>
+                      {tables.map((table) => (
+                        <CommandItem
+                          key={table.tableName}
+                          value={`${table.displayName} ${table.tableName}`}
+                          onSelect={() => {
+                            onChange({
+                              ...config,
+                              sourceTableName: table.tableName,
+                              sourceColumnName: "", // 테이블 변경 시 컬럼 초기화
+                            });
+                            setTableComboboxOpen(false);
+                          }}
+                          className="text-xs sm:text-sm"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              sourceTableName === table.tableName ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                          <div className="flex flex-col">
+                            <span className="font-medium">{table.displayName}</span>
+                            <span className="text-[10px] text-gray-500">{table.tableName}</span>
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          {/* 컬럼 선택 */}
+          <div>
+            <Label className="text-xs font-medium sm:text-sm">날짜 컬럼</Label>
+            <Popover open={columnComboboxOpen} onOpenChange={setColumnComboboxOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={columnComboboxOpen}
+                  disabled={isPreview || loadingColumns || !sourceTableName}
+                  className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                >
+                  {loadingColumns
+                    ? "로딩 중..."
+                    : !sourceTableName
+                      ? "테이블을 먼저 선택하세요"
+                      : sourceColumnName
+                        ? selectedColumnLabel
+                        : columns.length === 0
+                          ? "날짜 컬럼이 없습니다"
+                          : "컬럼 선택"}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent
+                className="p-0"
+                style={{ width: "var(--radix-popover-trigger-width)" }}
+                align="start"
+              >
+                <Command>
+                  <CommandInput placeholder="컬럼 검색..." className="text-xs sm:text-sm" />
+                  <CommandList>
+                    <CommandEmpty className="text-xs sm:text-sm">
+                      날짜 컬럼을 찾을 수 없습니다
+                    </CommandEmpty>
+                    <CommandGroup>
+                      {columns.map((column) => (
+                        <CommandItem
+                          key={column.columnName}
+                          value={`${column.displayName} ${column.columnName}`}
+                          onSelect={() => {
+                            onChange({ ...config, sourceColumnName: column.columnName });
+                            setColumnComboboxOpen(false);
+                          }}
+                          className="text-xs sm:text-sm"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              sourceColumnName === column.columnName ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                          <div className="flex flex-col">
+                            <span className="font-medium">{column.displayName}</span>
+                            <span className="text-[10px] text-gray-500">
+                              {column.columnName} ({column.inputType || column.dataType})
+                            </span>
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+            {sourceTableName && columns.length === 0 && !loadingColumns && (
+              <p className="mt-1 text-[10px] text-amber-600 sm:text-xs">
+                이 테이블에 날짜 타입 컬럼이 없습니다
+              </p>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};

frontend/components/numbering-rule/NumberingRuleDesigner.tsx

@@ -479,18 +479,6 @@ export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
                 </p>
               </div>
 
-              {/* 세 번째 줄: 자동 감지된 테이블 정보 표시 */}
-              {currentTableName && (
-                <div className="space-y-2">
-                  <Label className="text-sm font-medium">적용 테이블</Label>
-                  <div className="border-input bg-muted text-muted-foreground flex h-9 items-center rounded-md border px-3 text-sm">
-                    {currentTableName}
-                  </div>
-                  <p className="text-muted-foreground text-xs">
-                    이 규칙은 현재 화면의 테이블({currentTableName})에 자동으로 적용됩니다
-                  </p>
-                </div>
-              )}
             </div>
 
             <div className="flex-1 overflow-y-auto">

frontend/components/numbering-rule/NumberingRulePreview.tsx

@@ -44,6 +44,22 @@ export const NumberingRulePreview: React.FC<NumberingRulePreviewProps> = ({
           // 3. 날짜
           case "date": {
             const format = autoConfig.dateFormat || "YYYYMMDD";
+            
+            // 컬럼 기준 생성인 경우 placeholder 표시
+            if (autoConfig.useColumnValue && autoConfig.sourceColumnName) {
+              // 형식에 맞는 placeholder 반환
+              switch (format) {
+                case "YYYY": return "[YYYY]";
+                case "YY": return "[YY]";
+                case "YYYYMM": return "[YYYYMM]";
+                case "YYMM": return "[YYMM]";
+                case "YYYYMMDD": return "[YYYYMMDD]";
+                case "YYMMDD": return "[YYMMDD]";
+                default: return "[DATE]";
+              }
+            }
+            
+            // 현재 날짜 기준 생성
             const now = new Date();
             const year = now.getFullYear();
             const month = String(now.getMonth() + 1).padStart(2, "0");

frontend/components/screen/CopyScreenModal.tsx

@@ -927,7 +927,7 @@ export default function CopyScreenModal({
   if (mode === "group") {
     return (
       <Dialog open={isOpen} onOpenChange={handleClose}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
           {/* 로딩 오버레이 */}
           {isCopying && (
             <div className="absolute inset-0 z-50 flex flex-col items-center justify-center rounded-lg bg-background/90 backdrop-blur-sm">

frontend/components/screen/ScreenGroupTreeView.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { cn } from "@/lib/utils";
 import {
   ChevronRight,
@@ -16,6 +16,8 @@ import {
   Copy,
   FolderTree,
   Loader2,
+  RefreshCw,
+  Building2,
 } from "lucide-react";
 import { ScreenDefinition } from "@/types/screen";
 import {
@@ -24,9 +26,17 @@ import {
   deleteScreenGroup,
   addScreenToGroup,
   removeScreenFromGroup,
+  getMenuScreenSyncStatus,
+  syncScreenGroupsToMenu,
+  syncMenuToScreenGroups,
+  syncAllCompanies,
+  SyncStatus,
+  AllCompaniesSyncResult,
 } from "@/lib/api/screenGroup";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { useAuth } from "@/hooks/useAuth";
+import { getCompanyList, Company } from "@/lib/api/company";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -88,6 +98,7 @@ interface ScreenGroupTreeViewProps {
   onGroupSelect?: (group: { id: number; name: string; company_code?: string } | null) => void;
   onScreenSelectInGroup?: (group: { id: number; name: string; company_code?: string }, screenId: number) => void;
   companyCode?: string;
+  searchTerm?: string; // 검색어 (띄어쓰기로 구분된 여러 키워드)
 }
 
 interface TreeNode {
@@ -107,6 +118,7 @@ export function ScreenGroupTreeView({
   onGroupSelect,
   onScreenSelectInGroup,
   companyCode,
+  searchTerm = "",
 }: ScreenGroupTreeViewProps) {
   const [groups, setGroups] = useState<ScreenGroup[]>([]);
   const [loading, setLoading] = useState(true);
@@ -155,6 +167,25 @@ export function ScreenGroupTreeView({
   const [contextMenuGroup, setContextMenuGroup] = useState<ScreenGroup | null>(null);
   const [contextMenuGroupPosition, setContextMenuGroupPosition] = useState<{ x: number; y: number } | null>(null);
 
+  // 메뉴-화면그룹 동기화 상태
+  const [isSyncDialogOpen, setIsSyncDialogOpen] = useState(false);
+  const [syncStatus, setSyncStatus] = useState<SyncStatus | null>(null);
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [syncDirection, setSyncDirection] = useState<"screen-to-menu" | "menu-to-screen" | "all" | null>(null);
+  const [syncProgress, setSyncProgress] = useState<{ message: string; detail?: string } | null>(null);
+  
+  // 회사 선택 (최고 관리자용)
+  const { user } = useAuth();
+  const [companies, setCompanies] = useState<Company[]>([]);
+  const [selectedCompanyCode, setSelectedCompanyCode] = useState<string>("");
+  const [isSyncCompanySelectOpen, setIsSyncCompanySelectOpen] = useState(false);
+  
+  // 현재 사용자가 최고 관리자인지 확인
+  const isSuperAdmin = user?.companyCode === "*";
+  
+  // 실제 사용할 회사 코드 (props → 선택 → 사용자 기본값)
+  const effectiveCompanyCode = companyCode || selectedCompanyCode || (isSuperAdmin ? "" : user?.companyCode) || "";
+
   // 그룹 목록 및 그룹별 화면 로드
   useEffect(() => {
     loadGroupsData();
@@ -242,6 +273,160 @@ export function ScreenGroupTreeView({
     setIsGroupModalOpen(true);
   };
 
+  // 동기화 다이얼로그 열기
+  const handleOpenSyncDialog = async () => {
+    setIsSyncDialogOpen(true);
+    setSyncStatus(null);
+    setSyncDirection(null);
+    setSelectedCompanyCode("");
+    
+    // 최고 관리자일 때 회사 목록 로드
+    if (isSuperAdmin && companies.length === 0) {
+      try {
+        const companiesList = await getCompanyList();
+        // 최고 관리자(*)용 회사는 제외
+        const filteredCompanies = companiesList.filter(c => c.company_code !== "*");
+        setCompanies(filteredCompanies);
+      } catch (error) {
+        console.error("회사 목록 로드 실패:", error);
+      }
+    }
+    
+    // 최고 관리자가 아니면 바로 상태 조회
+    if (!isSuperAdmin && user?.companyCode) {
+      const response = await getMenuScreenSyncStatus(user.companyCode);
+      if (response.success && response.data) {
+        setSyncStatus(response.data);
+      }
+    }
+  };
+  
+  // 회사 선택 시 상태 조회
+  const handleCompanySelect = async (companyCode: string) => {
+    setSelectedCompanyCode(companyCode);
+    setIsSyncCompanySelectOpen(false);
+    setSyncStatus(null);
+    
+    if (companyCode) {
+      const response = await getMenuScreenSyncStatus(companyCode);
+      if (response.success && response.data) {
+        setSyncStatus(response.data);
+      } else {
+        toast.error(response.error || "동기화 상태 조회 실패");
+      }
+    }
+  };
+
+  // 동기화 실행
+  const handleSync = async (direction: "screen-to-menu" | "menu-to-screen") => {
+    // 사용할 회사 코드 결정
+    const targetCompanyCode = isSuperAdmin ? selectedCompanyCode : user?.companyCode;
+    
+    if (!targetCompanyCode) {
+      toast.error("회사를 선택해주세요.");
+      return;
+    }
+    
+    setIsSyncing(true);
+    setSyncDirection(direction);
+    setSyncProgress({
+      message: direction === "screen-to-menu" 
+        ? "화면관리 → 메뉴 동기화 중..." 
+        : "메뉴 → 화면관리 동기화 중...",
+      detail: "데이터를 분석하고 있습니다..."
+    });
+    
+    try {
+      setSyncProgress({
+        message: direction === "screen-to-menu" 
+          ? "화면관리 → 메뉴 동기화 중..." 
+          : "메뉴 → 화면관리 동기화 중...",
+        detail: "동기화 작업을 수행하고 있습니다..."
+      });
+      
+      const response = direction === "screen-to-menu"
+        ? await syncScreenGroupsToMenu(targetCompanyCode)
+        : await syncMenuToScreenGroups(targetCompanyCode);
+      
+      if (response.success) {
+        const data = response.data;
+        setSyncProgress({
+          message: "동기화 완료!",
+          detail: `생성 ${data?.created || 0}개, 연결 ${data?.linked || 0}개, 스킵 ${data?.skipped || 0}개`
+        });
+        toast.success(
+          `동기화 완료: 생성 ${data?.created || 0}개, 연결 ${data?.linked || 0}개, 스킵 ${data?.skipped || 0}개`
+        );
+        // 그룹 데이터 새로고침
+        await loadGroupsData();
+        // 동기화 상태 새로고침
+        const statusResponse = await getMenuScreenSyncStatus(targetCompanyCode);
+        if (statusResponse.success && statusResponse.data) {
+          setSyncStatus(statusResponse.data);
+        }
+      } else {
+        setSyncProgress(null);
+        toast.error(`동기화 실패: ${response.error || "알 수 없는 오류"}`);
+      }
+    } catch (error: any) {
+      setSyncProgress(null);
+      toast.error(`동기화 실패: ${error.message}`);
+    } finally {
+      setIsSyncing(false);
+      setSyncDirection(null);
+      // 3초 후 진행 메시지 초기화
+      setTimeout(() => setSyncProgress(null), 3000);
+    }
+  };
+
+  // 전체 회사 동기화 (최고 관리자만)
+  const handleSyncAll = async () => {
+    if (!isSuperAdmin) {
+      toast.error("전체 동기화는 최고 관리자만 수행할 수 있습니다.");
+      return;
+    }
+
+    setIsSyncing(true);
+    setSyncDirection("all");
+    setSyncProgress({
+      message: "전체 회사 동기화 중...",
+      detail: "모든 회사의 데이터를 분석하고 있습니다..."
+    });
+
+    try {
+      setSyncProgress({
+        message: "전체 회사 동기화 중...",
+        detail: "양방향 동기화 작업을 수행하고 있습니다..."
+      });
+      
+      const response = await syncAllCompanies();
+
+      if (response.success && response.data) {
+        const data = response.data;
+        setSyncProgress({
+          message: "전체 동기화 완료!",
+          detail: `${data.totalCompanies}개 회사, 생성 ${data.totalCreated}개, 연결 ${data.totalLinked}개`
+        });
+        toast.success(
+          `전체 동기화 완료: ${data.totalCompanies}개 회사, 생성 ${data.totalCreated}개, 연결 ${data.totalLinked}개`
+        );
+        // 그룹 데이터 새로고침
+        await loadGroupsData();
+      } else {
+        setSyncProgress(null);
+        toast.error(`전체 동기화 실패: ${response.error || "알 수 없는 오류"}`);
+      }
+    } catch (error: any) {
+      setSyncProgress(null);
+      toast.error(`전체 동기화 실패: ${error.message}`);
+    } finally {
+      setIsSyncing(false);
+      setSyncDirection(null);
+      // 3초 후 진행 메시지 초기화
+      setTimeout(() => setSyncProgress(null), 3000);
+    }
+  };
+
   // 그룹 수정 버튼 클릭
   const handleEditGroup = (group: ScreenGroup, e: React.MouseEvent) => {
     e.stopPropagation();
@@ -596,6 +781,191 @@ export function ScreenGroupTreeView({
     return result;
   };
 
+  // 검색어로 그룹 필터링 (띄어쓰기로 구분된 여러 키워드 - 계층적 검색)
+  const getFilteredGroups = useMemo(() => {
+    if (!searchTerm.trim()) {
+      return groups; // 검색어가 없으면 모든 그룹 반환
+    }
+
+    // 검색어를 띄어쓰기로 분리하고 빈 문자열 제거
+    const keywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(k => k.length > 0);
+    
+    if (keywords.length === 0) {
+      return groups;
+    }
+
+    // 그룹의 조상 ID들을 가져오는 함수
+    const getAncestorIds = (groupId: number): Set<number> => {
+      const ancestors = new Set<number>();
+      let current = groups.find(g => g.id === groupId);
+      while (current?.parent_group_id) {
+        ancestors.add(current.parent_group_id);
+        current = groups.find(g => g.id === current!.parent_group_id);
+      }
+      return ancestors;
+    };
+
+    // 첫 번째 키워드와 일치하는 그룹 찾기
+    let currentMatchingIds = new Set<number>();
+    for (const group of groups) {
+      const groupName = group.group_name.toLowerCase();
+      if (groupName.includes(keywords[0])) {
+        currentMatchingIds.add(group.id);
+      }
+    }
+
+    // 일치하는 그룹이 없으면 빈 배열 반환
+    if (currentMatchingIds.size === 0) {
+      return [];
+    }
+
+    // 나머지 키워드들을 순차적으로 처리 (계층적 검색)
+    for (let i = 1; i < keywords.length; i++) {
+      const keyword = keywords[i];
+      const nextMatchingIds = new Set<number>();
+      
+      for (const group of groups) {
+        const groupName = group.group_name.toLowerCase();
+        if (groupName.includes(keyword)) {
+          // 이 그룹의 조상 중에 이전 키워드와 일치하는 그룹이 있는지 확인
+          const ancestors = getAncestorIds(group.id);
+          const hasMatchingAncestor = Array.from(currentMatchingIds).some(id => 
+            ancestors.has(id) || id === group.id
+          );
+          
+          if (hasMatchingAncestor) {
+            nextMatchingIds.add(group.id);
+          }
+        }
+      }
+      
+      // 매칭되는 게 있으면 업데이트, 없으면 이전 결과 유지
+      if (nextMatchingIds.size > 0) {
+        // 이전 키워드 매칭도 유지 (상위 폴더 표시를 위해)
+        nextMatchingIds.forEach(id => currentMatchingIds.add(id));
+        currentMatchingIds = nextMatchingIds;
+      }
+    }
+
+    // 최종 매칭 결과
+    const finalMatchingIds = currentMatchingIds;
+
+    // 표시할 그룹 ID 집합
+    const groupsToShow = new Set<number>();
+    
+    // 일치하는 그룹의 상위 그룹들도 포함 (계층 유지를 위해)
+    const addParents = (groupId: number) => {
+      const group = groups.find(g => g.id === groupId);
+      if (group) {
+        groupsToShow.add(group.id);
+        if (group.parent_group_id) {
+          addParents(group.parent_group_id);
+        }
+      }
+    };
+
+    // 하위 그룹들을 추가하는 함수
+    const addChildren = (groupId: number) => {
+      const children = groups.filter(g => g.parent_group_id === groupId);
+      for (const child of children) {
+        groupsToShow.add(child.id);
+        addChildren(child.id);
+      }
+    };
+
+    // 최종 매칭 그룹들의 상위 추가
+    for (const groupId of finalMatchingIds) {
+      addParents(groupId);
+    }
+
+    // 마지막 키워드와 일치하는 그룹의 하위만 추가
+    for (const groupId of finalMatchingIds) {
+      addChildren(groupId);
+    }
+
+    // 필터링된 그룹만 반환
+    return groups.filter(g => groupsToShow.has(g.id));
+  }, [groups, searchTerm]);
+
+  // 검색 시 해당 그룹이 일치하는지 확인 (하이라이트용)
+  const isGroupMatchingSearch = (groupName: string): boolean => {
+    if (!searchTerm.trim()) return false;
+    const keywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(k => k.length > 0);
+    const name = groupName.toLowerCase();
+    return keywords.some(keyword => name.includes(keyword));
+  };
+
+  // 검색 시 해당 그룹이 자동으로 펼쳐져야 하는지 확인
+  // (검색어와 일치하는 그룹의 상위 + 마지막 검색어와 일치하는 그룹도 자동 펼침)
+  const shouldAutoExpandForSearch = useMemo(() => {
+    if (!searchTerm.trim()) return new Set<number>();
+    
+    const keywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(k => k.length > 0);
+    if (keywords.length === 0) return new Set<number>();
+
+    // 그룹의 조상 ID들을 가져오는 함수
+    const getAncestorIds = (groupId: number): Set<number> => {
+      const ancestors = new Set<number>();
+      let current = groups.find(g => g.id === groupId);
+      while (current?.parent_group_id) {
+        ancestors.add(current.parent_group_id);
+        current = groups.find(g => g.id === current!.parent_group_id);
+      }
+      return ancestors;
+    };
+
+    // 계층적 검색으로 최종 일치 그룹 찾기 (getFilteredGroups와 동일한 로직)
+    let currentMatchingIds = new Set<number>();
+    for (const group of groups) {
+      const groupName = group.group_name.toLowerCase();
+      if (groupName.includes(keywords[0])) {
+        currentMatchingIds.add(group.id);
+      }
+    }
+
+    for (let i = 1; i < keywords.length; i++) {
+      const keyword = keywords[i];
+      const nextMatchingIds = new Set<number>();
+      
+      for (const group of groups) {
+        const groupName = group.group_name.toLowerCase();
+        if (groupName.includes(keyword)) {
+          const ancestors = getAncestorIds(group.id);
+          const hasMatchingAncestor = Array.from(currentMatchingIds).some(id => 
+            ancestors.has(id) || id === group.id
+          );
+          
+          if (hasMatchingAncestor) {
+            nextMatchingIds.add(group.id);
+          }
+        }
+      }
+      
+      if (nextMatchingIds.size > 0) {
+        nextMatchingIds.forEach(id => currentMatchingIds.add(id));
+        currentMatchingIds = nextMatchingIds;
+      }
+    }
+
+    // 자동 펼침 대상: 일치 그룹의 상위 + 일치 그룹 자체
+    const autoExpandIds = new Set<number>();
+    
+    const addParents = (groupId: number) => {
+      const group = groups.find(g => g.id === groupId);
+      if (group?.parent_group_id) {
+        autoExpandIds.add(group.parent_group_id);
+        addParents(group.parent_group_id);
+      }
+    };
+
+    for (const groupId of currentMatchingIds) {
+      autoExpandIds.add(groupId); // 일치하는 그룹 자체도 펼침 (화면 표시를 위해)
+      addParents(groupId);
+    }
+
+    return autoExpandIds;
+  }, [groups, searchTerm]);
+
   // 그룹 데이터 새로고침
   const loadGroupsData = async () => {
     try {
@@ -635,8 +1005,8 @@ export function ScreenGroupTreeView({
 
   return (
     <div className="h-full flex flex-col overflow-hidden">
-      {/* 그룹 추가 버튼 */}
-      <div className="flex-shrink-0 border-b p-2">
+      {/* 그룹 추가 & 동기화 버튼 */}
+      <div className="flex-shrink-0 border-b p-2 space-y-2">
         <Button
           onClick={handleAddGroup}
           variant="outline"
@@ -646,20 +1016,39 @@ export function ScreenGroupTreeView({
           <Plus className="h-4 w-4" />
           그룹 추가
         </Button>
+{isSuperAdmin && (
+          <Button
+            onClick={handleOpenSyncDialog}
+            variant="ghost"
+            size="sm"
+            className="w-full gap-2 text-muted-foreground"
+          >
+            <RefreshCw className="h-4 w-4" />
+            메뉴 동기화
+          </Button>
+        )}
       </div>
 
       {/* 트리 목록 */}
       <div className="flex-1 overflow-auto p-2">
+        {/* 검색 결과 없음 표시 */}
+        {searchTerm.trim() && getFilteredGroups.length === 0 && (
+          <div className="py-8 text-center text-sm text-muted-foreground">
+            &quot;{searchTerm}&quot;와 일치하는 폴더가 없습니다
+          </div>
+        )}
+        
         {/* 그룹화된 화면들 (대분류만 먼저 렌더링) */}
-        {groups
+        {getFilteredGroups
           .filter((g) => !(g as any).parent_group_id) // 대분류만 (parent_group_id가 null)
           .map((group) => {
           const groupId = String(group.id);
-          const isExpanded = expandedGroups.has(groupId);
+          const isExpanded = expandedGroups.has(groupId) || shouldAutoExpandForSearch.has(group.id); // 검색 시 상위 그룹만 자동 확장
           const groupScreens = getScreensInGroup(group.id);
+          const isMatching = isGroupMatchingSearch(group.group_name); // 검색어 일치 여부
             
-            // 하위 그룹들 찾기
-            const childGroups = groups.filter((g) => (g as any).parent_group_id === group.id);
+            // 하위 그룹들 찾기 (필터링된 그룹에서만)
+            const childGroups = getFilteredGroups.filter((g) => (g as any).parent_group_id === group.id);
 
           return (
             <div key={groupId} className="mb-1">
@@ -667,7 +1056,8 @@ export function ScreenGroupTreeView({
               <div
                 className={cn(
                   "flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
-                  "text-sm font-medium group/item"
+                  "text-sm font-medium group/item",
+                  isMatching && "bg-primary/5 dark:bg-primary/10" // 검색 일치 하이라이트 (연한 배경)
                 )}
                 onClick={() => toggleGroup(groupId)}
                 onContextMenu={(e) => handleGroupContextMenu(e, group)}
@@ -682,7 +1072,7 @@ export function ScreenGroupTreeView({
                 ) : (
                   <Folder className="h-4 w-4 shrink-0 text-amber-500" />
                 )}
-                <span className="truncate flex-1">{group.group_name}</span>
+                <span className={cn("truncate flex-1", isMatching && "font-medium text-primary/80")}>{group.group_name}</span>
                 <Badge variant="secondary" className="text-xs">
                   {groupScreens.length}
                 </Badge>
@@ -719,11 +1109,12 @@ export function ScreenGroupTreeView({
                 <div className="ml-6 mt-1 space-y-0.5">
                   {childGroups.map((childGroup) => {
                     const childGroupId = String(childGroup.id);
-                    const isChildExpanded = expandedGroups.has(childGroupId);
+                    const isChildExpanded = expandedGroups.has(childGroupId) || shouldAutoExpandForSearch.has(childGroup.id); // 검색 시 상위 그룹만 자동 확장
                     const childScreens = getScreensInGroup(childGroup.id);
+                    const isChildMatching = isGroupMatchingSearch(childGroup.group_name);
                     
-                    // 손자 그룹들 (3단계)
-                    const grandChildGroups = groups.filter((g) => (g as any).parent_group_id === childGroup.id);
+                    // 손자 그룹들 (3단계) - 필터링된 그룹에서만
+                    const grandChildGroups = getFilteredGroups.filter((g) => (g as any).parent_group_id === childGroup.id);
 
                     return (
                       <div key={childGroupId}>
@@ -731,7 +1122,8 @@ export function ScreenGroupTreeView({
                         <div
                           className={cn(
                             "flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
-                            "text-xs font-medium group/item"
+                            "text-xs font-medium group/item",
+                            isChildMatching && "bg-primary/5 dark:bg-primary/10"
                           )}
                           onClick={() => toggleGroup(childGroupId)}
                           onContextMenu={(e) => handleGroupContextMenu(e, childGroup)}
@@ -746,7 +1138,7 @@ export function ScreenGroupTreeView({
                           ) : (
                             <Folder className="h-3 w-3 shrink-0 text-blue-500" />
                           )}
-                          <span className="truncate flex-1">{childGroup.group_name}</span>
+                          <span className={cn("truncate flex-1", isChildMatching && "font-medium text-primary/80")}>{childGroup.group_name}</span>
                           <Badge variant="secondary" className="text-[10px] h-4">
                             {childScreens.length}
                           </Badge>
@@ -782,8 +1174,9 @@ export function ScreenGroupTreeView({
                           <div className="ml-6 mt-1 space-y-0.5">
                             {grandChildGroups.map((grandChild) => {
                               const grandChildId = String(grandChild.id);
-                              const isGrandExpanded = expandedGroups.has(grandChildId);
+                              const isGrandExpanded = expandedGroups.has(grandChildId) || shouldAutoExpandForSearch.has(grandChild.id); // 검색 시 상위 그룹만 자동 확장
                               const grandScreens = getScreensInGroup(grandChild.id);
+                              const isGrandMatching = isGroupMatchingSearch(grandChild.group_name);
 
                               return (
                                 <div key={grandChildId}>
@@ -791,7 +1184,8 @@ export function ScreenGroupTreeView({
                                   <div
                                     className={cn(
                                       "flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
-                                      "text-xs group/item"
+                                      "text-xs group/item",
+                                      isGrandMatching && "bg-primary/5 dark:bg-primary/10"
                                     )}
                                     onClick={() => toggleGroup(grandChildId)}
                                     onContextMenu={(e) => handleGroupContextMenu(e, grandChild)}
@@ -806,7 +1200,7 @@ export function ScreenGroupTreeView({
                                     ) : (
                                       <Folder className="h-3 w-3 shrink-0 text-green-500" />
                                     )}
-                                    <span className="truncate flex-1">{grandChild.group_name}</span>
+                                    <span className={cn("truncate flex-1", isGrandMatching && "font-medium text-primary/80")}>{grandChild.group_name}</span>
                                     <Badge variant="outline" className="text-[10px] h-4">
                                       {grandScreens.length}
                                     </Badge>
@@ -1459,6 +1853,222 @@ export function ScreenGroupTreeView({
         </>
       )}
 
+      {/* 메뉴-화면그룹 동기화 다이얼로그 */}
+      <Dialog open={isSyncDialogOpen} onOpenChange={setIsSyncDialogOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px] overflow-hidden">
+          {/* 동기화 진행 중 오버레이 (삭제와 동일한 스타일) */}
+          {isSyncing && (
+            <div className="absolute inset-0 z-50 flex flex-col items-center justify-center rounded-lg bg-background/90 backdrop-blur-sm">
+              <Loader2 className="h-10 w-10 animate-spin text-primary" />
+              <p className="mt-4 text-sm font-medium">{syncProgress?.message || "동기화 중..."}</p>
+              {syncProgress?.detail && (
+                <p className="mt-1 text-xs text-muted-foreground">{syncProgress.detail}</p>
+              )}
+              <div className="mt-3 h-2 w-48 overflow-hidden rounded-full bg-secondary">
+                <div
+                  className="h-full bg-primary animate-pulse"
+                  style={{ width: "100%" }}
+                />
+              </div>
+            </div>
+          )}
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">메뉴-화면 동기화</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              화면관리의 폴더 구조와 메뉴관리를 연동합니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          {/* 최고 관리자: 회사 선택 */}
+          {isSuperAdmin && (
+            <div className="space-y-2">
+              <Label className="text-xs sm:text-sm">
+                <Building2 className="inline-block h-4 w-4 mr-1" />
+                동기화할 회사 선택
+              </Label>
+              <Popover open={isSyncCompanySelectOpen} onOpenChange={setIsSyncCompanySelectOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={isSyncCompanySelectOpen}
+                    className="h-10 w-full justify-between text-sm"
+                  >
+                    {selectedCompanyCode
+                      ? companies.find((c) => c.company_code === selectedCompanyCode)?.company_name || selectedCompanyCode
+                      : "회사를 선택하세요"}
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="p-0 w-full" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                  <Command>
+                    <CommandInput placeholder="회사 검색..." className="text-sm" />
+                    <CommandList>
+                      <CommandEmpty className="text-sm py-2 text-center">회사를 찾을 수 없습니다.</CommandEmpty>
+                      <CommandGroup>
+                        {companies.map((company) => (
+                          <CommandItem
+                            key={company.company_code}
+                            value={company.company_code}
+                            onSelect={() => handleCompanySelect(company.company_code)}
+                            className="text-sm"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-4 w-4",
+                                selectedCompanyCode === company.company_code ? "opacity-100" : "opacity-0"
+                              )}
+                            />
+                            {company.company_name}
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+          )}
+
+          {/* 현재 상태 표시 */}
+          {syncStatus ? (
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="rounded-md border p-3">
+                  <div className="text-xs text-muted-foreground mb-1">화면관리</div>
+                  <div className="text-lg font-semibold">{syncStatus.screenGroups.total}개</div>
+                  <div className="text-xs text-muted-foreground">
+                    연결됨: {syncStatus.screenGroups.linked} / 미연결: {syncStatus.screenGroups.unlinked}
+                  </div>
+                </div>
+                <div className="rounded-md border p-3">
+                  <div className="text-xs text-muted-foreground mb-1">사용자 메뉴</div>
+                  <div className="text-lg font-semibold">{syncStatus.menuItems.total}개</div>
+                  <div className="text-xs text-muted-foreground">
+                    연결됨: {syncStatus.menuItems.linked} / 미연결: {syncStatus.menuItems.unlinked}
+                  </div>
+                </div>
+              </div>
+
+              {syncStatus.potentialMatches.length > 0 && (
+                <div className="rounded-md border p-3 bg-muted/50">
+                  <div className="text-xs font-medium mb-2">자동 매칭 가능 ({syncStatus.potentialMatches.length}개)</div>
+                  <div className="text-xs text-muted-foreground space-y-1 max-h-24 overflow-auto">
+                    {syncStatus.potentialMatches.slice(0, 5).map((match, i) => (
+                      <div key={i}>
+                        {match.menuName} = {match.groupName}
+                      </div>
+                    ))}
+                    {syncStatus.potentialMatches.length > 5 && (
+                      <div>...외 {syncStatus.potentialMatches.length - 5}개</div>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {/* 동기화 버튼 */}
+              <div className="space-y-2">
+                <Button
+                  onClick={() => handleSync("screen-to-menu")}
+                  disabled={isSyncing}
+                  variant="outline"
+                  className="w-full justify-start gap-2 border-blue-200 bg-blue-50/50 hover:bg-blue-100/70 hover:border-blue-300"
+                >
+                  {isSyncing && syncDirection === "screen-to-menu" ? (
+                    <Loader2 className="h-4 w-4 animate-spin text-blue-600" />
+                  ) : (
+                    <FolderTree className="h-4 w-4 text-blue-600" />
+                  )}
+                  <span className="flex-1 text-left text-blue-700">화면관리 → 메뉴 동기화</span>
+                  <span className="text-xs text-blue-500/70">
+                    폴더 구조를 메뉴에 반영
+                  </span>
+                </Button>
+                <Button
+                  onClick={() => handleSync("menu-to-screen")}
+                  disabled={isSyncing}
+                  variant="outline"
+                  className="w-full justify-start gap-2 border-emerald-200 bg-emerald-50/50 hover:bg-emerald-100/70 hover:border-emerald-300"
+                >
+                  {isSyncing && syncDirection === "menu-to-screen" ? (
+                    <Loader2 className="h-4 w-4 animate-spin text-emerald-600" />
+                  ) : (
+                    <FolderInput className="h-4 w-4 text-emerald-600" />
+                  )}
+                  <span className="flex-1 text-left text-emerald-700">메뉴 → 화면관리 동기화</span>
+                  <span className="text-xs text-emerald-500/70">
+                    메뉴 구조를 폴더에 반영
+                  </span>
+                </Button>
+              </div>
+
+              {/* 전체 동기화 (최고 관리자만) */}
+              {isSuperAdmin && (
+                <div className="border-t pt-3 mt-3">
+                  <Button
+                    onClick={handleSyncAll}
+                    disabled={isSyncing}
+                    variant="default"
+                    className="w-full justify-start gap-2"
+                  >
+                    {isSyncing && syncDirection === "all" ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <RefreshCw className="h-4 w-4" />
+                    )}
+                    <span className="flex-1 text-left">전체 회사 동기화</span>
+                    <span className="text-xs text-primary-foreground/70">
+                      모든 회사 양방향 동기화
+                    </span>
+                  </Button>
+                </div>
+              )}
+            </div>
+          ) : isSuperAdmin && !selectedCompanyCode ? (
+            <div className="flex flex-col items-center justify-center py-8 text-center">
+              <Building2 className="h-10 w-10 text-muted-foreground mb-3" />
+              <p className="text-sm text-muted-foreground mb-4">
+                개별 회사 동기화를 하려면 회사를 선택해주세요.
+              </p>
+              
+              {/* 전체 회사 동기화 버튼 (회사 선택 없이도 표시) */}
+              <div className="w-full border-t pt-4">
+                <Button
+                  onClick={handleSyncAll}
+                  disabled={isSyncing}
+                  variant="default"
+                  className="w-full justify-start gap-2"
+                >
+                  {isSyncing && syncDirection === "all" ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <RefreshCw className="h-4 w-4" />
+                  )}
+                  <span className="flex-1 text-left">전체 회사 동기화</span>
+                  <span className="text-xs text-primary-foreground/70">
+                    모든 회사 양방향 동기화
+                  </span>
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            </div>
+          )}
+
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setIsSyncDialogOpen(false)}
+              disabled={isSyncing}
+            >
+              닫기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
     </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/unified/UnifiedInput.tsx

@@ -2,7 +2,7 @@
 
 /**
  * UnifiedInput
- * 
+ *
  * 통합 입력 컴포넌트
  * - text: 텍스트 입력
  * - number: 숫자 입력
@@ -12,12 +12,14 @@
  * - button: 버튼 (입력이 아닌 액션)
  */
 
-import React, { forwardRef, useCallback, useMemo, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Input } from "@/components/ui/input";
 import { Slider } from "@/components/ui/slider";
 import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
-import { UnifiedInputProps, UnifiedInputType, UnifiedInputFormat } from "@/types/unified-components";
+import { UnifiedInputProps, UnifiedInputConfig, UnifiedInputFormat } from "@/types/unified-components";
+import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
+import { AutoGenerationConfig } from "@/types/screen";
 
 // 형식별 입력 마스크 및 검증 패턴
 const FORMAT_PATTERNS: Record<UnifiedInputFormat, { pattern: RegExp; placeholder: string }> = {
@@ -56,46 +58,55 @@ function formatTel(value: string): string {
 /**
  * 텍스트 입력 컴포넌트
  */
-const TextInput = forwardRef<HTMLInputElement, {
-  value?: string | number;
-  onChange?: (value: string) => void;
-  format?: UnifiedInputFormat;
-  mask?: string;
-  placeholder?: string;
-  readonly?: boolean;
-  disabled?: boolean;
-  className?: string;
-}>(({ value, onChange, format = "none", placeholder, readonly, disabled, className }, ref) => {
+const TextInput = forwardRef<
+  HTMLInputElement,
+  {
+    value?: string | number;
+    onChange?: (value: string) => void;
+    format?: UnifiedInputFormat;
+    mask?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+    className?: string;
+  }
+>(({ value, onChange, format = "none", placeholder, readonly, disabled, className }, ref) => {
   // 형식에 따른 값 포맷팅
-  const formatValue = useCallback((val: string): string => {
-    switch (format) {
-      case "currency":
-        return formatCurrency(val);
-      case "biz_no":
-        return formatBizNo(val);
-      case "tel":
-        return formatTel(val);
-      default:
-        return val;
-    }
-  }, [format]);
+  const formatValue = useCallback(
+    (val: string): string => {
+      switch (format) {
+        case "currency":
+          return formatCurrency(val);
+        case "biz_no":
+          return formatBizNo(val);
+        case "tel":
+          return formatTel(val);
+        default:
+          return val;
+      }
+    },
+    [format],
+  );
 
-  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    let newValue = e.target.value;
-    
-    // 형식에 따른 자동 포맷팅
-    if (format === "currency") {
-      // 숫자와 쉼표만 허용
-      newValue = newValue.replace(/[^\d,]/g, "");
-      newValue = formatCurrency(newValue);
-    } else if (format === "biz_no") {
-      newValue = formatBizNo(newValue);
-    } else if (format === "tel") {
-      newValue = formatTel(newValue);
-    }
-    
-    onChange?.(newValue);
-  }, [format, onChange]);
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      let newValue = e.target.value;
+
+      // 형식에 따른 자동 포맷팅
+      if (format === "currency") {
+        // 숫자와 쉼표만 허용
+        newValue = newValue.replace(/[^\d,]/g, "");
+        newValue = formatCurrency(newValue);
+      } else if (format === "biz_no") {
+        newValue = formatBizNo(newValue);
+      } else if (format === "tel") {
+        newValue = formatTel(newValue);
+      }
+
+      onChange?.(newValue);
+    },
+    [format, onChange],
+  );
 
   const displayValue = useMemo(() => {
     if (value === undefined || value === null) return "";
@@ -122,32 +133,38 @@ TextInput.displayName = "TextInput";
 /**
  * 숫자 입력 컴포넌트
  */
-const NumberInput = forwardRef<HTMLInputElement, {
-  value?: number;
-  onChange?: (value: number | undefined) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  placeholder?: string;
-  readonly?: boolean;
-  disabled?: boolean;
-  className?: string;
-}>(({ value, onChange, min, max, step = 1, placeholder, readonly, disabled, className }, ref) => {
-  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
-    if (val === "") {
-      onChange?.(undefined);
-      return;
-    }
-    
-    let num = parseFloat(val);
-    
-    // 범위 제한
-    if (min !== undefined && num < min) num = min;
-    if (max !== undefined && num > max) num = max;
-    
-    onChange?.(num);
-  }, [min, max, onChange]);
+const NumberInput = forwardRef<
+  HTMLInputElement,
+  {
+    value?: number;
+    onChange?: (value: number | undefined) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    placeholder?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+    className?: string;
+  }
+>(({ value, onChange, min, max, step = 1, placeholder, readonly, disabled, className }, ref) => {
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const val = e.target.value;
+      if (val === "") {
+        onChange?.(undefined);
+        return;
+      }
+
+      let num = parseFloat(val);
+
+      // 범위 제한
+      if (min !== undefined && num < min) num = min;
+      if (max !== undefined && num > max) num = max;
+
+      onChange?.(num);
+    },
+    [min, max, onChange],
+  );
 
   return (
     <Input
@@ -170,14 +187,17 @@ NumberInput.displayName = "NumberInput";
 /**
  * 비밀번호 입력 컴포넌트
  */
-const PasswordInput = forwardRef<HTMLInputElement, {
-  value?: string;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-  readonly?: boolean;
-  disabled?: boolean;
-  className?: string;
-}>(({ value, onChange, placeholder, readonly, disabled, className }, ref) => {
+const PasswordInput = forwardRef<
+  HTMLInputElement,
+  {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+    className?: string;
+  }
+>(({ value, onChange, placeholder, readonly, disabled, className }, ref) => {
   const [showPassword, setShowPassword] = useState(false);
 
   return (
@@ -195,7 +215,7 @@ const PasswordInput = forwardRef<HTMLInputElement, {
       <button
         type="button"
         onClick={() => setShowPassword(!showPassword)}
-        className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground text-xs"
+        className="text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2 text-xs"
       >
         {showPassword ? "숨김" : "보기"}
       </button>
@@ -207,15 +227,18 @@ PasswordInput.displayName = "PasswordInput";
 /**
  * 슬라이더 입력 컴포넌트
  */
-const SliderInput = forwardRef<HTMLDivElement, {
-  value?: number;
-  onChange?: (value: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  disabled?: boolean;
-  className?: string;
-}>(({ value, onChange, min = 0, max = 100, step = 1, disabled, className }, ref) => {
+const SliderInput = forwardRef<
+  HTMLDivElement,
+  {
+    value?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    className?: string;
+  }
+>(({ value, onChange, min = 0, max = 100, step = 1, disabled, className }, ref) => {
   return (
     <div ref={ref} className={cn("flex items-center gap-4", className)}>
       <Slider
@@ -227,7 +250,7 @@ const SliderInput = forwardRef<HTMLDivElement, {
         disabled={disabled}
         className="flex-1"
       />
-      <span className="text-sm font-medium w-12 text-right">{value ?? min}</span>
+      <span className="w-12 text-right text-sm font-medium">{value ?? min}</span>
     </div>
   );
 });
@@ -236,12 +259,15 @@ SliderInput.displayName = "SliderInput";
 /**
  * 색상 선택 컴포넌트
  */
-const ColorInput = forwardRef<HTMLInputElement, {
-  value?: string;
-  onChange?: (value: string) => void;
-  disabled?: boolean;
-  className?: string;
-}>(({ value, onChange, disabled, className }, ref) => {
+const ColorInput = forwardRef<
+  HTMLInputElement,
+  {
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+  }
+>(({ value, onChange, disabled, className }, ref) => {
   return (
     <div className={cn("flex items-center gap-2", className)}>
       <Input
@@ -250,7 +276,7 @@ const ColorInput = forwardRef<HTMLInputElement, {
         value={value || "#000000"}
         onChange={(e) => onChange?.(e.target.value)}
         disabled={disabled}
-        className="w-12 h-full p-1 cursor-pointer"
+        className="h-full w-12 cursor-pointer p-1"
       />
       <Input
         type="text"
@@ -268,15 +294,18 @@ ColorInput.displayName = "ColorInput";
 /**
  * 여러 줄 텍스트 입력 컴포넌트
  */
-const TextareaInput = forwardRef<HTMLTextAreaElement, {
-  value?: string;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-  rows?: number;
-  readonly?: boolean;
-  disabled?: boolean;
-  className?: string;
-}>(({ value = "", onChange, placeholder, rows = 3, readonly, disabled, className }, ref) => {
+const TextareaInput = forwardRef<
+  HTMLTextAreaElement,
+  {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    rows?: number;
+    readonly?: boolean;
+    disabled?: boolean;
+    className?: string;
+  }
+>(({ value = "", onChange, placeholder, rows = 3, readonly, disabled, className }, ref) => {
   return (
     <textarea
       ref={ref}
@@ -287,8 +316,8 @@ const TextareaInput = forwardRef<HTMLTextAreaElement, {
       readOnly={readonly}
       disabled={disabled}
       className={cn(
-        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className,
       )}
     />
   );
@@ -298,155 +327,251 @@ TextareaInput.displayName = "TextareaInput";
 /**
  * 메인 UnifiedInput 컴포넌트
  */
-export const UnifiedInput = forwardRef<HTMLDivElement, UnifiedInputProps>(
-  (props, ref) => {
-    const {
-      id,
-      label,
-      required,
-      readonly,
-      disabled,
-      style,
-      size,
-      config: configProp,
-      value,
-      onChange,
-    } = props;
+export const UnifiedInput = forwardRef<HTMLDivElement, UnifiedInputProps>((props, ref) => {
+  const { id, label, required, readonly, disabled, style, size, config: configProp, value, onChange } = props;
 
-    // config가 없으면 기본값 사용
-    const config: UnifiedInputConfig = configProp || { type: "text" };
+  // formData 추출 (채번규칙 날짜 컬럼 기준 생성 시 사용)
+  const formData = (props as any).formData || {};
+  const columnName = (props as any).columnName;
 
-    // 조건부 렌더링 체크
-    // TODO: conditional 처리 로직 추가
-    
-    // 타입별 입력 컴포넌트 렌더링
-    const renderInput = () => {
-      const inputType = config.type || "text";
-      switch (inputType) {
-        case "text":
-          return (
-            <TextInput
-              value={value}
-              onChange={(v) => onChange?.(v)}
-              format={config.format}
-              mask={config.mask}
-              placeholder={config.placeholder}
-              readonly={readonly}
-              disabled={disabled}
-            />
-          );
+  // config가 없으면 기본값 사용
+  const config = (configProp || { type: "text" }) as UnifiedInputConfig & {
+    inputType?: string;
+    rows?: number;
+    autoGeneration?: AutoGenerationConfig;
+  };
 
-        case "number":
-          return (
-            <NumberInput
-              value={typeof value === "number" ? value : undefined}
-              onChange={(v) => onChange?.(v ?? 0)}
-              min={config.min}
-              max={config.max}
-              step={config.step}
-              placeholder={config.placeholder}
-              readonly={readonly}
-              disabled={disabled}
-            />
-          );
+  // 자동생성 설정 추출
+  const autoGeneration: AutoGenerationConfig = (props as any).autoGeneration ||
+    (config as any).autoGeneration || {
+      type: "none",
+      enabled: false,
+    };
 
-        case "password":
-          return (
-            <PasswordInput
-              value={typeof value === "string" ? value : ""}
-              onChange={(v) => onChange?.(v)}
-              placeholder={config.placeholder}
-              readonly={readonly}
-              disabled={disabled}
-            />
-          );
+  // 자동생성 상태 관리
+  const [autoGeneratedValue, setAutoGeneratedValue] = useState<string | null>(null);
+  const isGeneratingRef = useRef(false);
+  const hasGeneratedRef = useRef(false);
+  const lastFormDataRef = useRef<string>(""); // 마지막 formData 추적 (채번 규칙용)
 
-        case "slider":
-          return (
-            <SliderInput
-              value={typeof value === "number" ? value : config.min ?? 0}
-              onChange={(v) => onChange?.(v)}
-              min={config.min}
-              max={config.max}
-              step={config.step}
-              disabled={disabled}
-            />
-          );
+  // 수정 모드 여부 확인
+  const originalData = (props as any).originalData || (props as any)._originalData;
+  const isEditMode = originalData && Object.keys(originalData).length > 0;
 
-        case "color":
-          return (
-            <ColorInput
-              value={typeof value === "string" ? value : "#000000"}
-              onChange={(v) => onChange?.(v)}
-              disabled={disabled}
-            />
-          );
+  // 채번 규칙인 경우 formData 변경 감지 (자기 자신 필드 제외)
+  const formDataForNumbering = useMemo(() => {
+    if (autoGeneration.type !== "numbering_rule") return "";
+    // 자기 자신의 값은 제외 (무한 루프 방지)
+    const { [columnName]: _, ...rest } = formData;
+    return JSON.stringify(rest);
+  }, [autoGeneration.type, formData, columnName]);
 
-        case "textarea":
-          return (
-            <TextareaInput
-              value={value}
-              onChange={(v) => onChange?.(v)}
-              placeholder={config.placeholder}
-              rows={config.rows}
-              readonly={readonly}
-              disabled={disabled}
-            />
-          );
+  // 자동생성 로직
+  useEffect(() => {
+    const generateValue = async () => {
+      // 자동생성 비활성화 또는 생성 중
+      if (!autoGeneration.enabled || isGeneratingRef.current) {
+        return;
+      }
 
-        default:
-          return (
-            <TextInput
-              value={value}
-              onChange={(v) => onChange?.(v)}
-              placeholder={config.placeholder}
-              readonly={readonly}
-              disabled={disabled}
-            />
-          );
+      // 수정 모드에서는 자동생성 안함
+      if (isEditMode) {
+        return;
+      }
+
+      // 채번 규칙인 경우: formData가 변경되었는지 확인
+      const isNumberingRule = autoGeneration.type === "numbering_rule";
+      const formDataChanged =
+        isNumberingRule && formDataForNumbering !== lastFormDataRef.current && lastFormDataRef.current !== "";
+
+      // 이미 생성되었고, formData 변경이 아닌 경우 스킵
+      if (hasGeneratedRef.current && !formDataChanged) {
+        return;
+      }
+
+      // 첫 생성 시: 값이 이미 있으면 스킵 (formData 변경 시에는 강제 재생성)
+      if (!formDataChanged && value !== undefined && value !== null && value !== "") {
+        return;
+      }
+
+      isGeneratingRef.current = true;
+
+      try {
+        // formData를 전달하여 날짜 컬럼 기준 생성 지원
+        const generatedValue = await AutoGenerationUtils.generateValue(autoGeneration, columnName, formData);
+
+        if (generatedValue !== null && generatedValue !== undefined) {
+          setAutoGeneratedValue(generatedValue);
+          onChange?.(generatedValue);
+          hasGeneratedRef.current = true;
+
+          // formData 기록
+          if (isNumberingRule) {
+            lastFormDataRef.current = formDataForNumbering;
+          }
+        }
+      } catch (error) {
+        console.error("자동생성 실패:", error);
+      } finally {
+        isGeneratingRef.current = false;
       }
     };
 
-    // 라벨이 표시될 때 입력 필드가 차지할 높이 계산
-    const showLabel = label && style?.labelDisplay !== false;
-    // size에서 우선 가져오고, 없으면 style에서 가져옴
-    const componentWidth = size?.width || style?.width;
-    const componentHeight = size?.height || style?.height;
+    generateValue();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoGeneration.enabled, autoGeneration.type, isEditMode, formDataForNumbering]);
 
-    return (
-      <div
-        ref={ref}
-        id={id}
-        className="flex flex-col"
-        style={{
-          width: componentWidth,
-          height: componentHeight,
-        }}
-      >
-        {showLabel && (
-          <Label
-            htmlFor={id}
-            style={{
-              fontSize: style?.labelFontSize,
-              color: style?.labelColor,
-              fontWeight: style?.labelFontWeight,
-              marginBottom: style?.labelMarginBottom,
+  // 실제 표시할 값 (자동생성 값 또는 props value)
+  const displayValue = autoGeneratedValue ?? value;
+
+  // 조건부 렌더링 체크
+  // TODO: conditional 처리 로직 추가
+
+  // 타입별 입력 컴포넌트 렌더링
+  const renderInput = () => {
+    const inputType = config.inputType || config.type || "text";
+    switch (inputType) {
+      case "text":
+        return (
+          <TextInput
+            value={displayValue}
+            onChange={(v) => {
+              setAutoGeneratedValue(null); // 사용자 입력 시 자동생성 값 초기화
+              onChange?.(v);
             }}
-            className="text-sm font-medium flex-shrink-0"
-          >
-            {label}
-            {required && <span className="text-orange-500 ml-0.5">*</span>}
-          </Label>
-        )}
-        <div className="flex-1 min-h-0">
-          {renderInput()}
-        </div>
-      </div>
-    );
-  }
-);
+            format={config.format}
+            mask={config.mask}
+            placeholder={config.placeholder}
+            readonly={readonly || (autoGeneration.enabled && hasGeneratedRef.current)}
+            disabled={disabled}
+          />
+        );
+
+      case "number":
+        return (
+          <NumberInput
+            value={typeof displayValue === "number" ? displayValue : undefined}
+            onChange={(v) => {
+              setAutoGeneratedValue(null);
+              onChange?.(v ?? 0);
+            }}
+            min={config.min}
+            max={config.max}
+            step={config.step}
+            placeholder={config.placeholder}
+            readonly={readonly}
+            disabled={disabled}
+          />
+        );
+
+      case "password":
+        return (
+          <PasswordInput
+            value={typeof displayValue === "string" ? displayValue : ""}
+            onChange={(v) => {
+              setAutoGeneratedValue(null);
+              onChange?.(v);
+            }}
+            placeholder={config.placeholder}
+            readonly={readonly}
+            disabled={disabled}
+          />
+        );
+
+      case "slider":
+        return (
+          <SliderInput
+            value={typeof displayValue === "number" ? displayValue : (config.min ?? 0)}
+            onChange={(v) => {
+              setAutoGeneratedValue(null);
+              onChange?.(v);
+            }}
+            min={config.min}
+            max={config.max}
+            step={config.step}
+            disabled={disabled}
+          />
+        );
+
+      case "color":
+        return (
+          <ColorInput
+            value={typeof displayValue === "string" ? displayValue : "#000000"}
+            onChange={(v) => {
+              setAutoGeneratedValue(null);
+              onChange?.(v);
+            }}
+            disabled={disabled}
+          />
+        );
+
+      case "textarea":
+        return (
+          <TextareaInput
+            value={displayValue as string}
+            onChange={(v) => {
+              setAutoGeneratedValue(null);
+              onChange?.(v);
+            }}
+            placeholder={config.placeholder}
+            rows={config.rows}
+            readonly={readonly}
+            disabled={disabled}
+          />
+        );
+
+      default:
+        return (
+          <TextInput
+            value={displayValue}
+            onChange={(v) => {
+              setAutoGeneratedValue(null);
+              onChange?.(v);
+            }}
+            placeholder={config.placeholder}
+            readonly={readonly}
+            disabled={disabled}
+          />
+        );
+    }
+  };
+
+  // 라벨이 표시될 때 입력 필드가 차지할 높이 계산
+  const showLabel = label && style?.labelDisplay !== false;
+  // size에서 우선 가져오고, 없으면 style에서 가져옴
+  const componentWidth = size?.width || style?.width;
+  const componentHeight = size?.height || style?.height;
+
+  return (
+    <div
+      ref={ref}
+      id={id}
+      className="flex flex-col"
+      style={{
+        width: componentWidth,
+        height: componentHeight,
+      }}
+    >
+      {showLabel && (
+        <Label
+          htmlFor={id}
+          style={{
+            fontSize: style?.labelFontSize,
+            color: style?.labelColor,
+            fontWeight: style?.labelFontWeight,
+            marginBottom: style?.labelMarginBottom,
+          }}
+          className="flex-shrink-0 text-sm font-medium"
+        >
+          {label}
+          {required && <span className="ml-0.5 text-orange-500">*</span>}
+        </Label>
+      )}
+      <div className="min-h-0 flex-1">{renderInput()}</div>
+    </div>
+  );
+});
 
 UnifiedInput.displayName = "UnifiedInput";
 
 export default UnifiedInput;
-

frontend/components/unified/config-panels/UnifiedInputConfigPanel.tsx

@@ -5,23 +5,99 @@
  * 통합 입력 컴포넌트의 세부 설정을 관리합니다.
  */
 
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
+import { Checkbox } from "@/components/ui/checkbox";
+import { AutoGenerationType, AutoGenerationConfig } from "@/types/screen";
+import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
+import { getAvailableNumberingRules } from "@/lib/api/numberingRule";
+import { NumberingRuleConfig } from "@/types/numbering-rule";
 
 interface UnifiedInputConfigPanelProps {
   config: Record<string, any>;
   onChange: (config: Record<string, any>) => void;
+  menuObjid?: number; // 메뉴 OBJID (채번 규칙 필터링용)
 }
 
-export const UnifiedInputConfigPanel: React.FC<UnifiedInputConfigPanelProps> = ({ config, onChange }) => {
+export const UnifiedInputConfigPanel: React.FC<UnifiedInputConfigPanelProps> = ({ config, onChange, menuObjid }) => {
+  // 채번 규칙 목록 상태
+  const [numberingRules, setNumberingRules] = useState<NumberingRuleConfig[]>([]);
+  const [loadingRules, setLoadingRules] = useState(false);
+  
+  // 부모 메뉴 목록 상태 (채번규칙 사용을 위한 선택)
+  const [parentMenus, setParentMenus] = useState<any[]>([]);
+  const [loadingMenus, setLoadingMenus] = useState(false);
+  
+  // 선택된 메뉴 OBJID
+  const [selectedMenuObjid, setSelectedMenuObjid] = useState<number | undefined>(() => {
+    return config.autoGeneration?.selectedMenuObjid || menuObjid;
+  });
+
   // 설정 업데이트 핸들러
   const updateConfig = (field: string, value: any) => {
     onChange({ ...config, [field]: value });
   };
 
+  // 부모 메뉴 목록 로드 (사용자 메뉴의 레벨 2만)
+  useEffect(() => {
+    const loadMenus = async () => {
+      setLoadingMenus(true);
+      try {
+        const { apiClient } = await import("@/lib/api/client");
+        const response = await apiClient.get("/admin/menus");
+        
+        if (response.data.success && response.data.data) {
+          const allMenus = response.data.data;
+          
+          // 사용자 메뉴(menu_type='1')의 레벨 2만 필터링
+          const level2UserMenus = allMenus.filter((menu: any) => 
+            menu.menu_type === '1' && menu.lev === 2
+          );
+          
+          setParentMenus(level2UserMenus);
+        }
+      } catch (error) {
+        console.error("부모 메뉴 로드 실패:", error);
+      } finally {
+        setLoadingMenus(false);
+      }
+    };
+    loadMenus();
+  }, []);
+
+  // 채번 규칙 목록 로드 (선택된 메뉴 기준)
+  useEffect(() => {
+    const loadRules = async () => {
+      if (config.autoGeneration?.type !== "numbering_rule") {
+        return;
+      }
+
+      if (!selectedMenuObjid) {
+        setNumberingRules([]);
+        return;
+      }
+      
+      setLoadingRules(true);
+      try {
+        const response = await getAvailableNumberingRules(selectedMenuObjid);
+        
+        if (response.success && response.data) {
+          setNumberingRules(response.data);
+        }
+      } catch (error) {
+        console.error("채번 규칙 목록 로드 실패:", error);
+        setNumberingRules([]);
+      } finally {
+        setLoadingRules(false);
+      }
+    };
+
+    loadRules();
+  }, [selectedMenuObjid, config.autoGeneration?.type]);
+
   return (
     <div className="space-y-4">
       {/* 입력 타입 */}
@@ -143,6 +219,229 @@ export const UnifiedInputConfigPanel: React.FC<UnifiedInputConfigPanelProps> = (
         />
         <p className="text-muted-foreground text-[10px]"># = 숫자, A = 문자, * = 모든 문자</p>
       </div>
+
+      <Separator />
+
+      {/* 자동생성 기능 */}
+      <div className="space-y-3">
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="autoGenerationEnabled"
+            checked={config.autoGeneration?.enabled || false}
+            onCheckedChange={(checked) => {
+              const currentConfig = config.autoGeneration || { type: "none", enabled: false };
+              updateConfig("autoGeneration", {
+                ...currentConfig,
+                enabled: checked as boolean,
+              });
+            }}
+          />
+          <Label htmlFor="autoGenerationEnabled" className="text-xs font-medium cursor-pointer">
+            자동생성 활성화
+          </Label>
+        </div>
+
+        {/* 자동생성 타입 선택 */}
+        {config.autoGeneration?.enabled && (
+          <div className="space-y-3 pl-6">
+            <div className="space-y-2">
+              <Label className="text-xs font-medium">자동생성 타입</Label>
+              <Select
+                value={config.autoGeneration?.type || "none"}
+                onValueChange={(value: AutoGenerationType) => {
+                  const currentConfig = config.autoGeneration || { type: "none", enabled: false };
+                  updateConfig("autoGeneration", {
+                    ...currentConfig,
+                    type: value,
+                  });
+                }}
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue placeholder="자동생성 타입 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">자동생성 없음</SelectItem>
+                  <SelectItem value="uuid">UUID 생성</SelectItem>
+                  <SelectItem value="current_user">현재 사용자 ID</SelectItem>
+                  <SelectItem value="current_time">현재 시간</SelectItem>
+                  <SelectItem value="sequence">순차 번호</SelectItem>
+                  <SelectItem value="numbering_rule">채번 규칙</SelectItem>
+                  <SelectItem value="random_string">랜덤 문자열</SelectItem>
+                  <SelectItem value="random_number">랜덤 숫자</SelectItem>
+                  <SelectItem value="company_code">회사 코드</SelectItem>
+                  <SelectItem value="department">부서 코드</SelectItem>
+                </SelectContent>
+              </Select>
+
+              {/* 선택된 타입 설명 */}
+              {config.autoGeneration?.type && config.autoGeneration.type !== "none" && (
+                <p className="text-muted-foreground text-[10px]">
+                  {AutoGenerationUtils.getTypeDescription(config.autoGeneration.type)}
+                </p>
+              )}
+            </div>
+
+            {/* 채번 규칙 선택 */}
+            {config.autoGeneration?.type === "numbering_rule" && (
+              <>
+                {/* 부모 메뉴 선택 */}
+                <div className="space-y-2">
+                  <Label className="text-xs font-medium">
+                    대상 메뉴 <span className="text-destructive">*</span>
+                  </Label>
+                  <Select
+                    value={selectedMenuObjid?.toString() || ""}
+                    onValueChange={(value) => {
+                      const menuId = parseInt(value);
+                      setSelectedMenuObjid(menuId);
+                      
+                      updateConfig("autoGeneration", {
+                        ...config.autoGeneration,
+                        selectedMenuObjid: menuId,
+                      });
+                    }}
+                    disabled={loadingMenus}
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue placeholder={loadingMenus ? "메뉴 로딩 중..." : "채번규칙을 사용할 메뉴 선택"} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {parentMenus.length === 0 ? (
+                        <SelectItem value="no-menus" disabled>
+                          사용 가능한 메뉴가 없습니다
+                        </SelectItem>
+                      ) : (
+                        parentMenus.map((menu) => (
+                          <SelectItem key={menu.objid} value={menu.objid.toString()}>
+                            {menu.menu_name_kor}
+                          </SelectItem>
+                        ))
+                      )}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* 채번 규칙 선택 */}
+                {selectedMenuObjid ? (
+                  <div className="space-y-2">
+                    <Label className="text-xs font-medium">
+                      채번 규칙 <span className="text-destructive">*</span>
+                    </Label>
+                    <Select
+                      value={config.autoGeneration?.options?.numberingRuleId || ""}
+                      onValueChange={(value) => {
+                        updateConfig("autoGeneration", {
+                          ...config.autoGeneration,
+                          options: {
+                            ...config.autoGeneration?.options,
+                            numberingRuleId: value,
+                          },
+                        });
+                      }}
+                      disabled={loadingRules}
+                    >
+                      <SelectTrigger className="h-8 text-xs">
+                        <SelectValue placeholder={loadingRules ? "규칙 로딩 중..." : "채번 규칙 선택"} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {numberingRules.length === 0 ? (
+                          <SelectItem value="no-rules" disabled>
+                            사용 가능한 규칙이 없습니다
+                          </SelectItem>
+                        ) : (
+                          numberingRules.map((rule) => (
+                            <SelectItem key={rule.ruleId} value={rule.ruleId}>
+                              {rule.ruleName}
+                            </SelectItem>
+                          ))
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                ) : (
+                  <div className="rounded-md border border-amber-200 bg-amber-50 p-2 text-xs text-amber-800">
+                    먼저 대상 메뉴를 선택하세요
+                  </div>
+                )}
+              </>
+            )}
+
+            {/* 자동생성 옵션 (랜덤/순차용) */}
+            {config.autoGeneration?.type &&
+              ["random_string", "random_number", "sequence"].includes(config.autoGeneration.type) && (
+                <div className="space-y-2">
+                  {/* 길이 설정 */}
+                  {["random_string", "random_number"].includes(config.autoGeneration.type) && (
+                    <div className="space-y-1">
+                      <Label className="text-xs font-medium">길이</Label>
+                      <Input
+                        type="number"
+                        min="1"
+                        max="50"
+                        value={config.autoGeneration?.options?.length || 8}
+                        onChange={(e) => {
+                          updateConfig("autoGeneration", {
+                            ...config.autoGeneration,
+                            options: {
+                              ...config.autoGeneration?.options,
+                              length: parseInt(e.target.value) || 8,
+                            },
+                          });
+                        }}
+                        className="h-8 text-xs"
+                      />
+                    </div>
+                  )}
+
+                  {/* 접두사 */}
+                  <div className="space-y-1">
+                    <Label className="text-xs font-medium">접두사</Label>
+                    <Input
+                      value={config.autoGeneration?.options?.prefix || ""}
+                      onChange={(e) => {
+                        updateConfig("autoGeneration", {
+                          ...config.autoGeneration,
+                          options: {
+                            ...config.autoGeneration?.options,
+                            prefix: e.target.value,
+                          },
+                        });
+                      }}
+                      placeholder="예: INV-"
+                      className="h-8 text-xs"
+                    />
+                  </div>
+
+                  {/* 접미사 */}
+                  <div className="space-y-1">
+                    <Label className="text-xs font-medium">접미사</Label>
+                    <Input
+                      value={config.autoGeneration?.options?.suffix || ""}
+                      onChange={(e) => {
+                        updateConfig("autoGeneration", {
+                          ...config.autoGeneration,
+                          options: {
+                            ...config.autoGeneration?.options,
+                            suffix: e.target.value,
+                          },
+                        });
+                      }}
+                      className="h-8 text-xs"
+                    />
+                  </div>
+
+                  {/* 미리보기 */}
+                  <div className="space-y-1">
+                    <Label className="text-xs font-medium">미리보기</Label>
+                    <div className="rounded border bg-muted p-2 text-xs font-mono">
+                      {AutoGenerationUtils.generatePreviewValue(config.autoGeneration)}
+                    </div>
+                  </div>
+                </div>
+              )}
+          </div>
+        )}
+      </div>
     </div>
   );
 };

frontend/contexts/ActiveTabContext.tsx

@@ -143,3 +143,4 @@ export const useActiveTabOptional = () => {
 
 
 
+

frontend/hooks/useAutoFill.ts

@@ -200,3 +200,4 @@ export function applyAutoFillToFormData(
 
 
 
+

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/registry/DynamicComponentRenderer.tsx

@@ -244,7 +244,11 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
               step: config.step,
               buttonText: config.buttonText,
               buttonVariant: config.buttonVariant,
+              autoGeneration: config.autoGeneration,
             }}
+            autoGeneration={config.autoGeneration}
+            formData={props.formData}
+            originalData={props.originalData}
           />
         );
 

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,24 +296,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
   onFieldDrop,
   onExpandChange,
 }) => {
-  // 디버깅 로그
-  console.log("🔶 PivotGridComponent props:", {
-    title,
-    hasExternalData: !!externalData,
-    externalDataLength: externalData?.length,
-    initialFieldsLength: initialFields?.length,
-  });
-  
-  // 🆕 데이터 샘플 확인
-  if (externalData && externalData.length > 0) {
-    console.log("🔶 첫 번째 데이터 샘플:", externalData[0]);
-    console.log("🔶 전체 데이터 개수:", externalData.length);
-  }
-  
-  // 🆕 필드 설정 확인
-  if (initialFields && initialFields.length > 0) {
-    console.log("🔶 필드 설정:", initialFields);
-  }
   // ==================== 상태 ====================
 
   const [fields, setFields] = useState<PivotFieldConfig[]>(initialFields);
@@ -384,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]);
 
@@ -432,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]
   );
 
@@ -480,70 +507,84 @@ 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;
-    }
-
-    const result = processPivotData(
-      filteredData,
-      visibleFields,
-      pivotState.expandedRowPaths,
-      pivotState.expandedColumnPaths
-    );
-    
-    // 🆕 피벗 결과 확인
-    console.log("🔶 피벗 처리 결과:", {
-      hasResult: !!result,
-      flatRowsCount: result?.flatRows?.length,
-      flatColumnsCount: result?.flatColumns?.length,
-      dataMatrixSize: result?.dataMatrix?.size,
-      expandedRowPaths: pivotState.expandedRowPaths.length,
-      expandedColumnPaths: pivotState.expandedColumnPaths.length,
-    });
-    
-    return result;
   }, [filteredData, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]);
   
-  // 🆕 초기 로드 시 첫 레벨 자동 확장
+  // 초기 로드 시 첫 레벨 자동 확장
   useEffect(() => {
-    if (!isInitialExpanded && pivotResult && pivotResult.flatRows.length > 0) {
-      // 첫 레벨 행들의 경로 수집 (level 0인 행들)
-      const firstLevelPaths = pivotResult.flatRows
-        .filter(row => row.level === 0 && row.hasChildren)
-        .map(row => row.path);
-      
-      if (firstLevelPaths.length > 0) {
-        console.log("🔶 초기 자동 확장:", firstLevelPaths);
-        setPivotState(prev => ({
-          ...prev,
-          expandedRowPaths: firstLevelPaths,
-        }));
-        setIsInitialExpanded(true);
+    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]);
 
@@ -710,8 +751,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
   // 행 확장/축소
   const handleToggleRowExpand = useCallback(
     (path: string[]) => {
-      console.log("🔶 행 확장/축소 클릭:", path);
-      
       setPivotState((prev) => {
         const pathKey = pathToKey(path);
         const existingIndex = prev.expandedRowPaths.findIndex(
@@ -720,16 +759,13 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
 
         let newPaths: string[][];
         if (existingIndex >= 0) {
-          console.log("🔶 행 축소:", path);
           newPaths = prev.expandedRowPaths.filter(
             (_, i) => i !== existingIndex
           );
         } else {
-          console.log("🔶 행 확장:", path);
           newPaths = [...prev.expandedRowPaths, path];
         }
 
-        console.log("🔶 새로운 확장 경로:", newPaths);
         onExpandChange?.(newPaths);
 
         return {
@@ -741,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(() => {
@@ -880,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;
     
@@ -980,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: [],
@@ -994,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());
@@ -1011,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));
@@ -1383,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>
@@ -1393,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>
@@ -1574,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>
                   }
                 />
@@ -1600,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}
               >
@@ -1657,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}
@@ -1680,16 +1759,31 @@ 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) => (
@@ -1721,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) => (
@@ -1747,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)}
@@ -1760,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>
@@ -1887,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,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } 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";
@@ -8,6 +8,66 @@ 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;
+  }
+}
 
 // ==================== 샘플 데이터 (미리보기용) ====================
 
@@ -111,19 +171,14 @@ const PivotGridWrapper: React.FC<any> = (props) => {
       
       setIsLoading(true);
       try {
-        console.log("🔷 [PivotGrid] 테이블 데이터 로딩 시작:", tableName);
-        
         const response = await dataApi.getTableData(tableName, {
           page: 1,
-          size: 10000, // 피벗 분석용 대량 데이터 (pageSize → size)
+          size: 10000, // 피벗 분석용 대량 데이터
         });
         
-        console.log("🔷 [PivotGrid] API 응답:", response);
-        
         // dataApi.getTableData는 { data, total, page, size, totalPages } 구조
         if (response.data && Array.isArray(response.data)) {
           setLoadedData(response.data);
-          console.log("✅ [PivotGrid] 데이터 로딩 완료:", response.data.length, "건");
         } else {
           console.error("❌ [PivotGrid] 데이터 로딩 실패: 응답에 data 배열이 없음");
           setLoadedData([]);
@@ -137,21 +192,6 @@ const PivotGridWrapper: React.FC<any> = (props) => {
     
     loadTableData();
   }, [componentConfig.dataSource?.tableName, configData, props.isDesignMode]);
-  
-  // 디버깅 로그
-  console.log("🔷 PivotGridWrapper props:", {
-    isDesignMode: props.isDesignMode,
-    isInteractive: props.isInteractive,
-    hasComponentConfig: !!props.componentConfig,
-    hasConfig: !!props.config,
-    hasData: !!configData,
-    dataLength: configData?.length,
-    hasLoadedData: loadedData.length > 0,
-    loadedDataLength: loadedData.length,
-    hasFields: !!configFields,
-    fieldsLength: configFields?.length,
-    isLoading,
-  });
 
   // 디자인 모드 판단:
   // 1. isDesignMode === true
@@ -173,13 +213,6 @@ const PivotGridWrapper: React.FC<any> = (props) => {
     ? (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,
@@ -200,24 +233,27 @@ const PivotGridWrapper: React.FC<any> = (props) => {
     );
   }
 
+  // 에러 경계로 감싸서 렌더링 에러 시 컴포넌트가 완전히 사라지지 않도록 함
   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>
   );
 };
 
@@ -284,18 +320,6 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer {
     const componentConfig = props.componentConfig || props.config || {};
     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
@@ -315,13 +339,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,
@@ -340,7 +357,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 {

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/split-panel-layout/SplitPanelLayoutComponent.tsx

@@ -917,10 +917,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             const { entityJoinApi } = await import("@/lib/api/entityJoin");
 
             // 복합키 조건 생성
+            // 🔧 관계 필터링은 정확한 값 매칭이 필요하므로 equals 연산자 사용
+            // (entity 타입 컬럼의 경우 기본 contains 연산자가 참조 테이블의 표시 컬럼으로 검색하여 실패함)
             const searchConditions: Record<string, any> = {};
             keys.forEach((key) => {
               if (key.leftColumn && key.rightColumn && leftItem[key.leftColumn] !== undefined) {
-                searchConditions[key.rightColumn] = leftItem[key.leftColumn];
+                searchConditions[key.rightColumn] = {
+                  value: leftItem[key.leftColumn],
+                  operator: "equals",
+                };
               }
             });
 

frontend/lib/registry/components/table-list/TableListComponent.tsx

@@ -41,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";
@@ -460,6 +460,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보다 먼저 정의해야 함
@@ -493,6 +494,22 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       });
     }
 
+    // 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;
+
+          // 여러 가능한 컬럼명 시도
+          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());
+        });
+      });
+    }
+
     // 3. 🆕 Filter Builder 적용
     if (filterGroups.length > 0) {
       result = result.filter((row) => {
@@ -546,7 +563,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);
@@ -2968,6 +2985,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(),
     };
@@ -2988,6 +3006,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     frozenColumnCount,
     showGridLines,
     headerFilters,
+    headerLikeFilters,
     localPageSize,
   ]);
 
@@ -3024,6 +3043,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         });
         setHeaderFilters(filters);
       }
+      if (state.headerLikeFilters) {
+        setHeaderLikeFilters(state.headerLikeFilters);
+      }
     } catch (error) {
       console.error("❌ 테이블 상태 복원 실패:", error);
     }
@@ -5827,7 +5849,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="필터"
                                     >
@@ -5835,7 +5857,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()}
                                   >
@@ -5844,16 +5866,42 @@ 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">
+                                      {/* 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 (

frontend/lib/utils/autoGeneration.ts

@@ -146,10 +146,34 @@ export class AutoGenerationUtils {
   }
 
   /**
-   * 자동생성 값 생성 메인 함수
+   * 채번 규칙 API 호출하여 코드 생성
    */
-  static generateValue(config: AutoGenerationConfig, columnName?: string): string | null {
-    console.log("🔧 AutoGenerationUtils.generateValue 호출:", {
+  static async generateNumberingRuleCode(ruleId: string, formData?: Record<string, any>): Promise<string | null> {
+    try {
+      const { apiClient } = await import("@/lib/api/client");
+      const response = await apiClient.post(`/numbering-rules/${ruleId}/allocate`, {
+        formData: formData || {},
+      });
+      
+      if (response.data.success && response.data.data) {
+        // API 응답에서 생성된 코드 추출
+        const generatedCode = response.data.data.generatedCode || response.data.data;
+        console.log("채번 규칙 코드 생성 성공:", generatedCode);
+        return generatedCode;
+      }
+      console.error("채번 규칙 코드 생성 실패:", response.data.message);
+      return null;
+    } catch (error) {
+      console.error("채번 규칙 API 호출 실패:", error);
+      return null;
+    }
+  }
+
+  /**
+   * 자동생성 값 생성 메인 함수 (비동기)
+   */
+  static async generateValue(config: AutoGenerationConfig, columnName?: string, formData?: Record<string, any>): Promise<string | null> {
+    console.log("AutoGenerationUtils.generateValue 호출:", {
       config,
       columnName,
       enabled: config.enabled,
@@ -157,7 +181,7 @@ export class AutoGenerationUtils {
     });
 
     if (!config.enabled || config.type === "none") {
-      console.log("⚠️ AutoGenerationUtils.generateValue 스킵:", {
+      console.log("AutoGenerationUtils.generateValue 스킵:", {
         enabled: config.enabled,
         type: config.type,
       });
@@ -174,17 +198,25 @@ export class AutoGenerationUtils {
         return this.getCurrentUserId();
 
       case "current_time":
-        console.log("🕒 AutoGenerationUtils.generateCurrentTime 호출:", {
+        console.log("AutoGenerationUtils.generateCurrentTime 호출:", {
           format: options.format,
           options,
         });
         const timeValue = this.generateCurrentTime(options.format);
-        console.log("🕒 AutoGenerationUtils.generateCurrentTime 결과:", timeValue);
+        console.log("AutoGenerationUtils.generateCurrentTime 결과:", timeValue);
         return timeValue;
 
       case "sequence":
         return this.generateSequence(columnName || "default", options.startValue || 1, options.prefix, options.suffix);
 
+      case "numbering_rule":
+        // 채번 규칙 ID가 있으면 API 호출
+        if (options.numberingRuleId) {
+          return await this.generateNumberingRuleCode(options.numberingRuleId, formData);
+        }
+        console.warn("numbering_rule 타입인데 numberingRuleId가 없습니다");
+        return null;
+
       case "random_string":
         return this.generateRandomString(options.length || 8, options.prefix, options.suffix);
 

frontend/types/numbering-rule.ts

@@ -51,6 +51,9 @@ export interface NumberingRulePart {
     
     // 날짜용
     dateFormat?: DateFormat;      // 날짜 형식
+    useColumnValue?: boolean;     // 컬럼 값 기준 생성 여부
+    sourceTableName?: string;     // 소스 테이블명
+    sourceColumnName?: string;    // 소스 컬럼명 (날짜 컬럼)
     
     // 문자용
     textValue?: string;           // 텍스트 값 (예: "PRJ", "CODE")

frontend/types/screen.ts

@@ -123,12 +123,25 @@ export interface AreaComponent extends ContainerComponent {
 }
 
 /**
- * @deprecated 사용하지 않는 타입입니다
+ * 자동생성 타입
  */
-export type AutoGenerationType = "table" | "form" | "mixed";
+export type AutoGenerationType =
+  | "none"
+  | "uuid"
+  | "current_user"
+  | "current_time"
+  | "sequence"
+  | "numbering_rule"
+  | "random_string"
+  | "random_number"
+  | "company_code"
+  | "department"
+  | "table" // deprecated
+  | "form" // deprecated
+  | "mixed"; // deprecated
 
 /**
- * @deprecated 사용하지 않는 타입입니다
+ * 자동생성 설정
  */
 export interface AutoGenerationConfig {
   type: AutoGenerationType;
@@ -143,5 +156,6 @@ export interface AutoGenerationConfig {
     format?: string; // 시간 형식 (current_time용)
     startValue?: number; // 시퀀스 시작값
     numberingRuleId?: string; // 채번 규칙 ID (numbering_rule 타입용)
+    sourceColumnName?: string; // 날짜 컬럼명 (채번 규칙에서 날짜 기반 생성 시)
   };
 }

화면_임베딩_및_데이터_전달_시스템_구현_계획서.md

@@ -1692,3 +1692,4 @@ const 출고등록_설정: ScreenSplitPanel = {
 
 
 
+

화면_임베딩_시스템_Phase1-4_구현_완료.md

@@ -539,3 +539,4 @@ const { data: config } = await getScreenSplitPanel(screenId);
 
 
 
+

화면_임베딩_시스템_충돌_분석_보고서.md

@@ -526,3 +526,4 @@ function ScreenViewPage() {
 
 
 
+