Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into ksh

EditModal.tsx: conditional-container 존재 시 onSave 미전달 로직 수정
ModalRepeaterTableComponent.tsx: groupedData prop 우선 사용하도록 변경

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

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

PLAN.MD

@@ -1,7 +1,7 @@
-# 프로젝트: 화면 관리 기능 개선 (복제/삭제/그룹 관리/테이블 설정)
+# 프로젝트: 화면 관리 기능 개선 (복제/삭제/그룹 관리)
 
 ## 개요
-화면 관리 시스템의 복제, 삭제, 수정, 테이블 설정 기능을 전면 개선하여 효율적인 화면 관리를 지원합니다.
+화면 관리 시스템의 복제 및 삭제 기능을 전면 개선하여, 단일 화면 복제, 그룹(폴더) 전체 복제, 정렬 순서 유지, 일괄 이름 변경 등 다양한 고급 기능을 지원합니다.
 
 ## 핵심 기능
 
@@ -15,54 +15,47 @@
 ### 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] 찾을 텍스트 / 대체할 텍스트 (Find & Replace)
+- [x] 삭제할 텍스트 지정 (모든 폴더/화면 이름에서 제거)
+- [x] 추가할 접미사 지정 (기본값: " (복제)")
 - [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/components/screen/TableSettingModal.tsx` - 테이블 설정 모달
+- `frontend/lib/api/screen.ts` - 화면 API (복제, 삭제)
-- `frontend/components/screen/ScreenSettingModal.tsx` - 화면 설정 모달 (테이블 설정 탭 포함)
-- `frontend/lib/api/screen.ts` - 화면 API
 - `frontend/lib/api/screenGroup.ts` - 그룹 API
-- `frontend/lib/api/tableManagement.ts` - 테이블 관리 API
 
 ## 진행 상태
 - [완료] 단일 화면 복제 + 새로고침
 - [완료] 그룹 전체 복제 (재귀적)
-- [완료] 고급 옵션: 이름 일괄 변경 (Find & Replace)
+- [완료] 정렬 순서(display_order) 유지
-- [완료] 단일 화면/그룹 삭제 + 로딩 프로그레스
+- [완료] 대분류 경고 문구
-- [완료] 화면 수정 (이름/그룹/역할/순서)
+- [완료] 정렬 순서 입력 필드
-- [완료] 테이블 설정 탭 추가
+- [완료] 고급 옵션: 이름 일괄 변경
-- [완료] 입력 타입 변경 시 관련 필드 초기화
+- [완료] 단일 화면 삭제
-- [완료] 그룹 복제 모달 스크롤 문제 수정
+- [완료] 그룹 삭제 (화면 함께 삭제 옵션)
 
 ---
 

backend-node/src/controllers/adminController.ts

@@ -1418,31 +1418,69 @@ export async function updateMenu(
 }
 
 /**
- * 재귀적으로 모든 하위 메뉴 ID를 수집하는 헬퍼 함수
+ * 메뉴 삭제
  */
-async function collectAllChildMenuIds(parentObjid: number): Promise<number[]> {
+export async function deleteMenu(
-  const allIds: number[] = [];
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  try {
+    const { menuId } = req.params;
+    logger.info(`메뉴 삭제 요청: menuId = ${menuId}`, { user: req.user });
 
-  // 직접 자식 메뉴들 조회
+    // 사용자의 company_code 확인
-  const children = await query<any>(
+    if (!req.user?.companyCode) {
-    `SELECT objid FROM menu_info WHERE parent_obj_id = $1`,
+      res.status(400).json({
-    [parentObjid]
+        success: false,
-  );
+        message: "사용자의 회사 코드를 찾을 수 없습니다.",
-  
+        error: "Missing company_code",
-  for (const child of children) {
+      });
-    allIds.push(child.objid);
+      return;
-    // 자식의 자식들도 재귀적으로 수집
-    const grandChildren = await collectAllChildMenuIds(child.objid);
-    allIds.push(...grandChildren);
     }
 
-  return allIds;
+    const userCompanyCode = req.user.companyCode;
-}
+    const userType = req.user.userType;
+
+    // 삭제하려는 메뉴 조회
+    const currentMenu = await queryOne<any>(
+      `SELECT objid, company_code FROM menu_info WHERE objid = $1`,
+      [Number(menuId)]
+    );
+
+    if (!currentMenu) {
+      res.status(404).json({
+        success: false,
+        message: `메뉴를 찾을 수 없습니다: ${menuId}`,
+        error: "Menu not found",
+      });
+      return;
+    }
+
+    // 공통 메뉴(company_code = '*')는 최고 관리자만 삭제 가능
+    if (currentMenu.company_code === "*") {
+      if (userCompanyCode !== "*" || userType !== "SUPER_ADMIN") {
+        res.status(403).json({
+          success: false,
+          message: "공통 메뉴는 최고 관리자만 삭제할 수 있습니다.",
+          error: "Unauthorized to delete common menu",
+        });
+        return;
+      }
+    } else if (userCompanyCode !== "*") {
+      // 회사 관리자는 자기 회사 메뉴만 삭제 가능
+      if (currentMenu.company_code !== userCompanyCode) {
+        res.status(403).json({
+          success: false,
+          message: "해당 회사의 메뉴를 삭제할 권한이 없습니다.",
+          error: "Unauthorized to delete menu for this company",
+        });
+        return;
+      }
+    }
+
+    // 외래키 제약 조건이 있는 관련 테이블 데이터 먼저 정리
+    const menuObjid = Number(menuId);
     
-/**
- * 메뉴 및 관련 데이터 정리 헬퍼 함수
- */
-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`,
@@ -1479,118 +1517,28 @@ async function cleanupMenuRelatedData(menuObjid: number): Promise<void> {
       [menuObjid]
     );
 
-  // 7. screen_groups에서 menu_objid를 NULL로 설정
+    logger.info("메뉴 관련 데이터 정리 완료", { menuObjid });
-  await query(
+
-    `UPDATE screen_groups SET menu_objid = NULL WHERE menu_objid = $1`,
+    // Raw Query를 사용한 메뉴 삭제
+    const [deletedMenu] = await query<any>(
+      `DELETE FROM menu_info WHERE objid = $1 RETURNING *`,
       [menuObjid]
     );
-}
 
-/**
+    logger.info("메뉴 삭제 성공", { deletedMenu });
- * 메뉴 삭제
- */
-export async function deleteMenu(
-  req: AuthenticatedRequest,
-  res: Response
-): Promise<void> {
-  try {
-    const { menuId } = req.params;
-    logger.info(`메뉴 삭제 요청: menuId = ${menuId}`, { user: req.user });
-
-    // 사용자의 company_code 확인
-    if (!req.user?.companyCode) {
-      res.status(400).json({
-        success: false,
-        message: "사용자의 회사 코드를 찾을 수 없습니다.",
-        error: "Missing company_code",
-      });
-      return;
-    }
-
-    const userCompanyCode = req.user.companyCode;
-    const userType = req.user.userType;
-
-    // 삭제하려는 메뉴 조회
-    const currentMenu = await queryOne<any>(
-      `SELECT objid, company_code, menu_name_kor FROM menu_info WHERE objid = $1`,
-      [Number(menuId)]
-    );
-
-    if (!currentMenu) {
-      res.status(404).json({
-        success: false,
-        message: `메뉴를 찾을 수 없습니다: ${menuId}`,
-        error: "Menu not found",
-      });
-      return;
-    }
-
-    // 공통 메뉴(company_code = '*')는 최고 관리자만 삭제 가능
-    if (currentMenu.company_code === "*") {
-      if (userCompanyCode !== "*" || userType !== "SUPER_ADMIN") {
-        res.status(403).json({
-          success: false,
-          message: "공통 메뉴는 최고 관리자만 삭제할 수 있습니다.",
-          error: "Unauthorized to delete common menu",
-        });
-        return;
-      }
-    } else if (userCompanyCode !== "*") {
-      // 회사 관리자는 자기 회사 메뉴만 삭제 가능
-      if (currentMenu.company_code !== userCompanyCode) {
-        res.status(403).json({
-          success: false,
-          message: "해당 회사의 메뉴를 삭제할 권한이 없습니다.",
-          error: "Unauthorized to delete menu for this company",
-        });
-        return;
-      }
-    }
-
-    const menuObjid = Number(menuId);
-    
-    // 하위 메뉴들 재귀적으로 수집
-    const childMenuIds = await collectAllChildMenuIds(menuObjid);
-    const allMenuIdsToDelete = [menuObjid, ...childMenuIds];
-    
-    logger.info(`메뉴 삭제 대상: 본인(${menuObjid}) + 하위 메뉴 ${childMenuIds.length}개`, {
-      menuName: currentMenu.menu_name_kor,
-      totalCount: allMenuIdsToDelete.length,
-      childMenuIds,
-    });
-
-    // 모든 삭제 대상 메뉴에 대해 관련 데이터 정리
-    for (const objid of allMenuIdsToDelete) {
-      await cleanupMenuRelatedData(objid);
-    }
-
-    logger.info("메뉴 관련 데이터 정리 완료", { 
-      menuObjid, 
-      totalCleaned: allMenuIdsToDelete.length 
-    });
-
-    // 하위 메뉴부터 역순으로 삭제 (외래키 제약 회피)
-    // 가장 깊은 하위부터 삭제해야 하므로 역순으로
-    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: `메뉴가 성공적으로 삭제되었습니다. (하위 메뉴 ${childMenuIds.length}개 포함)`,
+      message: "메뉴가 성공적으로 삭제되었습니다.",
       data: {
-        objid: menuObjid.toString(),
+        objid: deletedMenu.objid.toString(),
-        menuNameKor: currentMenu.menu_name_kor,
+        menuNameKor: deletedMenu.menu_name_kor,
-        deletedCount: allMenuIdsToDelete.length,
+        menuNameEng: deletedMenu.menu_name_eng,
-        deletedChildCount: childMenuIds.length,
+        menuUrl: deletedMenu.menu_url,
+        menuDesc: deletedMenu.menu_desc,
+        status: deletedMenu.status,
+        writer: deletedMenu.writer,
+        regdate: new Date(deletedMenu.regdate).toISOString(),
       },
     };
 
@@ -1675,49 +1623,18 @@ 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 menuObjid of reversedIds) {
+    for (const menuId of menuIds) {
       try {
         const result = await query<any>(
           `DELETE FROM menu_info WHERE objid = $1 RETURNING *`,
-          [menuObjid]
+          [Number(menuId)]
         );
 
         if (result.length > 0) {
@@ -1728,20 +1645,20 @@ export async function deleteMenusBatch(
           });
         } else {
           failedCount++;
-          failedMenuIds.push(String(menuObjid));
+          failedMenuIds.push(menuId);
         }
       } catch (error) {
-        logger.error(`메뉴 삭제 실패 (ID: ${menuObjid}):`, error);
+        logger.error(`메뉴 삭제 실패 (ID: ${menuId}):`, error);
         failedCount++;
-        failedMenuIds.push(String(menuObjid));
+        failedMenuIds.push(menuId);
       }
     }
 
     logger.info("메뉴 일괄 삭제 완료", {
-      requested: menuIds.length,
+      total: menuIds.length,
-      totalWithChildren: allIdsArray.length,
       deletedCount,
       failedCount,
+      deletedMenus,
       failedMenuIds,
     });
 

backend-node/src/controllers/entityJoinController.ts

@@ -30,6 +30,7 @@ export class EntityJoinController {
         autoFilter, // 🔒 멀티테넌시 자동 필터
         dataFilter, // 🆕 데이터 필터 (JSON 문자열)
         excludeFilter, // 🆕 제외 필터 (JSON 문자열) - 다른 테이블에 이미 존재하는 데이터 제외
+        deduplication, // 🆕 중복 제거 설정 (JSON 문자열)
         userLang, // userLang은 별도로 분리하여 search에 포함되지 않도록 함
         ...otherParams
       } = req.query;
@@ -49,6 +50,9 @@ export class EntityJoinController {
           // search가 문자열인 경우 JSON 파싱
           searchConditions =
             typeof search === "string" ? JSON.parse(search) : search;
+          
+          // 🔍 디버그: 파싱된 검색 조건 로깅
+          logger.info(`🔍 파싱된 검색 조건:`, JSON.stringify(searchConditions, null, 2));
         } catch (error) {
           logger.warn("검색 조건 파싱 오류:", error);
           searchConditions = {};
@@ -151,6 +155,24 @@ export class EntityJoinController {
         }
       }
 
+      // 🆕 중복 제거 설정 처리
+      let parsedDeduplication: {
+        enabled: boolean;
+        groupByColumn: string;
+        keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
+        sortColumn?: string;
+      } | undefined = undefined;
+      if (deduplication) {
+        try {
+          parsedDeduplication =
+            typeof deduplication === "string" ? JSON.parse(deduplication) : deduplication;
+          logger.info("중복 제거 설정 파싱 완료:", parsedDeduplication);
+        } catch (error) {
+          logger.warn("중복 제거 설정 파싱 오류:", error);
+          parsedDeduplication = undefined;
+        }
+      }
+
       const result = await tableManagementService.getTableDataWithEntityJoins(
         tableName,
         {
@@ -168,13 +190,26 @@ export class EntityJoinController {
           screenEntityConfigs: parsedScreenEntityConfigs,
           dataFilter: parsedDataFilter, // 🆕 데이터 필터 전달
           excludeFilter: parsedExcludeFilter, // 🆕 제외 필터 전달
+          deduplication: parsedDeduplication, // 🆕 중복 제거 설정 전달
         }
       );
 
+      // 🆕 중복 제거 처리 (결과 데이터에 적용)
+      let finalData = result;
+      if (parsedDeduplication?.enabled && parsedDeduplication.groupByColumn && Array.isArray(result.data)) {
+        logger.info(`🔄 중복 제거 시작: 기준 컬럼 = ${parsedDeduplication.groupByColumn}, 전략 = ${parsedDeduplication.keepStrategy}`);
+        const originalCount = result.data.length;
+        finalData = {
+          ...result,
+          data: this.deduplicateData(result.data, parsedDeduplication),
+        };
+        logger.info(`✅ 중복 제거 완료: ${originalCount}개 → ${finalData.data.length}개`);
+      }
+
       res.status(200).json({
         success: true,
         message: "Entity 조인 데이터 조회 성공",
-        data: result,
+        data: finalData,
       });
     } catch (error) {
       logger.error("Entity 조인 데이터 조회 실패", error);
@@ -549,6 +584,98 @@ export class EntityJoinController {
       });
     }
   }
+
+  /**
+   * 중복 데이터 제거 (메모리 내 처리)
+   */
+  private deduplicateData(
+    data: any[],
+    config: {
+      groupByColumn: string;
+      keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
+      sortColumn?: string;
+    }
+  ): any[] {
+    if (!data || data.length === 0) return data;
+
+    // 그룹별로 데이터 분류
+    const groups: Record<string, any[]> = {};
+
+    for (const row of data) {
+      const groupKey = row[config.groupByColumn];
+      if (groupKey === undefined || groupKey === null) continue;
+
+      if (!groups[groupKey]) {
+        groups[groupKey] = [];
+      }
+      groups[groupKey].push(row);
+    }
+
+    // 각 그룹에서 하나의 행만 선택
+    const result: any[] = [];
+
+    for (const [groupKey, rows] of Object.entries(groups)) {
+      if (rows.length === 0) continue;
+
+      let selectedRow: any;
+
+      switch (config.keepStrategy) {
+        case "latest":
+          // 정렬 컬럼 기준 최신 (가장 큰 값)
+          if (config.sortColumn) {
+            rows.sort((a, b) => {
+              const aVal = a[config.sortColumn!];
+              const bVal = b[config.sortColumn!];
+              if (aVal === bVal) return 0;
+              if (aVal > bVal) return -1;
+              return 1;
+            });
+          }
+          selectedRow = rows[0];
+          break;
+
+        case "earliest":
+          // 정렬 컬럼 기준 최초 (가장 작은 값)
+          if (config.sortColumn) {
+            rows.sort((a, b) => {
+              const aVal = a[config.sortColumn!];
+              const bVal = b[config.sortColumn!];
+              if (aVal === bVal) return 0;
+              if (aVal < bVal) return -1;
+              return 1;
+            });
+          }
+          selectedRow = rows[0];
+          break;
+
+        case "base_price":
+          // base_price가 true인 행 선택
+          selectedRow = rows.find((r) => r.base_price === true || r.base_price === "true") || rows[0];
+          break;
+
+        case "current_date":
+          // 오늘 날짜 기준 유효 기간 내 행 선택
+          const today = new Date().toISOString().split("T")[0];
+          selectedRow = rows.find((r) => {
+            const startDate = r.start_date;
+            const endDate = r.end_date;
+            if (!startDate) return true;
+            if (startDate <= today && (!endDate || endDate >= today)) return true;
+            return false;
+          }) || rows[0];
+          break;
+
+        default:
+          selectedRow = rows[0];
+      }
+
+      if (selectedRow) {
+        result.push(selectedRow);
+      }
+    }
+
+    return result;
+  }
 }
 
 export const entityJoinController = new EntityJoinController();

backend-node/src/controllers/screenGroupController.ts

@@ -1,17 +1,15 @@
 import { Request, Response } from "express";
 import { getPool } from "../database/db";
 import { logger } from "../utils/logger";
+import { MultiLangService } from "../services/multilangService";
 import { AuthenticatedRequest } from "../types/auth";
-import {
-  syncScreenGroupsToMenu,
-  syncMenuToScreenGroups,
-  getSyncStatus,
-  syncAllCompanies,
-} from "../services/menuScreenSyncService";
 
 // pool 인스턴스 가져오기
 const pool = getPool();
 
+// 다국어 서비스 인스턴스
+const multiLangService = new MultiLangService();
+
 // ============================================================
 // 화면 그룹 (screen_groups) CRUD
 // ============================================================
@@ -19,7 +17,7 @@ const pool = getPool();
 // 화면 그룹 목록 조회
 export const getScreenGroups = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = req.user?.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);
 
@@ -94,7 +92,7 @@ export const getScreenGroups = async (req: AuthenticatedRequest, res: Response)
 export const getScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user?.companyCode || "*";
+    const companyCode = req.user!.companyCode;
 
     let query = `
       SELECT sg.*,
@@ -139,8 +137,8 @@ export const getScreenGroup = async (req: AuthenticatedRequest, res: Response) =
 // 화면 그룹 생성
 export const createScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const userCompanyCode = req.user?.companyCode || "*";
+    const userCompanyCode = req.user!.companyCode;
-    const userId = req.user?.userId || "";
+    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) {
@@ -198,6 +196,47 @@ export const createScreenGroup = async (req: AuthenticatedRequest, res: Response
     // 업데이트된 데이터 반환
     const updatedResult = await pool.query(`SELECT * FROM screen_groups WHERE id = $1`, [newGroupId]);
 
+    // 다국어 카테고리 자동 생성 (그룹 경로 기반)
+    try {
+      // 그룹 경로 조회 (상위 그룹 → 현재 그룹)
+      const groupPathResult = await pool.query(
+        `WITH RECURSIVE group_path AS (
+           SELECT id, parent_group_id, group_name, group_level, 1 as depth
+           FROM screen_groups
+           WHERE id = $1
+           UNION ALL
+           SELECT g.id, g.parent_group_id, g.group_name, g.group_level, gp.depth + 1
+           FROM screen_groups g
+           INNER JOIN group_path gp ON g.id = gp.parent_group_id
+           WHERE g.parent_group_id IS NOT NULL
+         )
+         SELECT group_name FROM group_path
+         ORDER BY depth DESC`,
+        [newGroupId]
+      );
+      
+      const groupPath = groupPathResult.rows.map((r: any) => r.group_name);
+      
+      // 회사 이름 조회
+      let companyName = "공통";
+      if (finalCompanyCode !== "*") {
+        const companyResult = await pool.query(
+          `SELECT company_name FROM company_mng WHERE company_code = $1`,
+          [finalCompanyCode]
+        );
+        if (companyResult.rows.length > 0) {
+          companyName = companyResult.rows[0].company_name;
+        }
+      }
+      
+      // 다국어 카테고리 생성
+      await multiLangService.ensureScreenGroupCategory(finalCompanyCode, companyName, groupPath);
+      logger.info("화면 그룹 다국어 카테고리 자동 생성 완료", { groupPath, companyCode: finalCompanyCode });
+    } catch (multilangError: any) {
+      // 다국어 카테고리 생성 실패해도 그룹 생성은 성공으로 처리
+      logger.warn("화면 그룹 다국어 카테고리 생성 실패 (무시하고 계속):", multilangError.message);
+    }
+
     logger.info("화면 그룹 생성", { userCompanyCode, finalCompanyCode, groupId: newGroupId, groupName: group_name, parentGroupId: parent_group_id });
 
     res.json({ success: true, data: updatedResult.rows[0], message: "화면 그룹이 생성되었습니다." });
@@ -214,7 +253,7 @@ export const createScreenGroup = async (req: AuthenticatedRequest, res: Response
 export const updateScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const userCompanyCode = req.user?.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;
 
     // 회사 코드 결정: 최고 관리자가 특정 회사를 선택한 경우 해당 회사로, 아니면 현재 그룹의 회사 유지
@@ -301,35 +340,10 @@ export const updateScreenGroup = async (req: AuthenticatedRequest, res: Response
 
 // 화면 그룹 삭제
 export const deleteScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
-  const client = await pool.connect();
   try {
     const { id } = req.params;
-    const companyCode = req.user?.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];
 
@@ -340,24 +354,18 @@ export const deleteScreenGroup = async (req: AuthenticatedRequest, res: Response
 
     query += " RETURNING id";
 
-    const result = await client.query(query, params);
+    const result = await pool.query(query, params);
 
     if (result.rows.length === 0) {
-      await client.query('ROLLBACK');
       return res.status(404).json({ success: false, message: "화면 그룹을 찾을 수 없거나 권한이 없습니다." });
     }
 
-    await client.query('COMMIT');
+    logger.info("화면 그룹 삭제", { companyCode, groupId: id });
-
-    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();
   }
 };
 
@@ -369,8 +377,8 @@ export const deleteScreenGroup = async (req: AuthenticatedRequest, res: Response
 // 그룹에 화면 추가
 export const addScreenToGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = req.user?.companyCode || "*";
+    const companyCode = req.user!.companyCode;
-    const userId = req.user?.userId || "";
+    const userId = req.user!.userId;
     const { group_id, screen_id, screen_role, display_order, is_default } = req.body;
 
     if (!group_id || !screen_id) {
@@ -410,7 +418,7 @@ export const addScreenToGroup = async (req: AuthenticatedRequest, res: Response)
 export const removeScreenFromGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user?.companyCode || "*";
+    const companyCode = req.user!.companyCode;
 
     let query = `DELETE FROM screen_group_screens WHERE id = $1`;
     const params: any[] = [id];
@@ -441,7 +449,7 @@ export const removeScreenFromGroup = async (req: AuthenticatedRequest, res: Resp
 export const updateScreenInGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user?.companyCode || "*";
+    const companyCode = req.user!.companyCode;
     const { screen_role, display_order, is_default } = req.body;
 
     let query = `
@@ -479,7 +487,7 @@ export const updateScreenInGroup = async (req: AuthenticatedRequest, res: Respon
 // 화면 필드 조인 목록 조회
 export const getFieldJoins = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = req.user?.companyCode || "*";
+    const companyCode = req.user!.companyCode;
     const { screen_id } = req.query;
 
     let query = `
@@ -520,8 +528,8 @@ export const getFieldJoins = async (req: AuthenticatedRequest, res: Response) =>
 // 화면 필드 조인 생성
 export const createFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = req.user?.companyCode || "*";
+    const companyCode = req.user!.companyCode;
-    const userId = req.user?.userId || "";
+    const userId = req.user!.userId;
     const { 
       screen_id, layout_id, component_id, field_name,
       save_table, save_column, join_table, join_column, display_column,
@@ -562,7 +570,7 @@ export const createFieldJoin = async (req: AuthenticatedRequest, res: Response)
 export const updateFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user?.companyCode || "*";
+    const companyCode = req.user!.companyCode;
     const { 
       layout_id, component_id, field_name,
       save_table, save_column, join_table, join_column, display_column,
@@ -607,7 +615,7 @@ export const updateFieldJoin = async (req: AuthenticatedRequest, res: Response)
 export const deleteFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user?.companyCode || "*";
+    const companyCode = req.user!.companyCode;
 
     let query = `DELETE FROM screen_field_joins WHERE id = $1`;
     const params: any[] = [id];
@@ -640,7 +648,7 @@ export const deleteFieldJoin = async (req: AuthenticatedRequest, res: Response)
 // 데이터 흐름 목록 조회
 export const getDataFlows = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = req.user?.companyCode || "*";
+    const companyCode = req.user!.companyCode;
     const { group_id, source_screen_id } = req.query;
 
     let query = `
@@ -690,8 +698,8 @@ export const getDataFlows = async (req: AuthenticatedRequest, res: Response) =>
 // 데이터 흐름 생성
 export const createDataFlow = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = req.user?.companyCode || "*";
+    const companyCode = req.user!.companyCode;
-    const userId = req.user?.userId || "";
+    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
@@ -730,7 +738,7 @@ export const createDataFlow = async (req: AuthenticatedRequest, res: Response) =
 export const updateDataFlow = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user?.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
@@ -773,7 +781,7 @@ export const updateDataFlow = async (req: AuthenticatedRequest, res: Response) =
 export const deleteDataFlow = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user?.companyCode || "*";
+    const companyCode = req.user!.companyCode;
 
     let query = `DELETE FROM screen_data_flows WHERE id = $1`;
     const params: any[] = [id];
@@ -806,7 +814,7 @@ export const deleteDataFlow = async (req: AuthenticatedRequest, res: Response) =
 // 화면-테이블 관계 목록 조회
 export const getTableRelations = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = req.user?.companyCode || "*";
+    const companyCode = req.user!.companyCode;
     const { screen_id, group_id } = req.query;
 
     let query = `
@@ -855,8 +863,8 @@ export const getTableRelations = async (req: AuthenticatedRequest, res: Response
 // 화면-테이블 관계 생성
 export const createTableRelation = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = req.user?.companyCode || "*";
+    const companyCode = req.user!.companyCode;
-    const userId = req.user?.userId || "";
+    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) {
@@ -889,7 +897,7 @@ export const createTableRelation = async (req: AuthenticatedRequest, res: Respon
 export const updateTableRelation = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user?.companyCode || "*";
+    const companyCode = req.user!.companyCode;
     const { group_id, table_name, relation_type, crud_operations, description, is_active } = req.body;
 
     let query = `
@@ -924,7 +932,7 @@ export const updateTableRelation = async (req: AuthenticatedRequest, res: Respon
 export const deleteTableRelation = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = req.user?.companyCode || "*";
+    const companyCode = req.user!.companyCode;
 
     let query = `DELETE FROM screen_table_relations WHERE id = $1`;
     const params: any[] = [id];
@@ -954,7 +962,7 @@ export const deleteTableRelation = async (req: AuthenticatedRequest, res: Respon
 // ============================================================
 
 // 화면 레이아웃 요약 조회 (위젯 타입별 개수, 라벨 목록)
-export const getScreenLayoutSummary = async (req: AuthenticatedRequest, res: Response) => {
+export const getScreenLayoutSummary = async (req: Request, res: Response) => {
   try {
     const { screenId } = req.params;
 
@@ -1022,7 +1030,7 @@ export const getScreenLayoutSummary = async (req: AuthenticatedRequest, res: Res
 };
 
 // 여러 화면의 레이아웃 요약 일괄 조회 (미니어처 렌더링용 좌표 포함)
-export const getMultipleScreenLayoutSummary = async (req: AuthenticatedRequest, res: Response) => {
+export const getMultipleScreenLayoutSummary = async (req: Request, res: Response) => {
   try {
     const { screenIds } = req.body;
 
@@ -1222,7 +1230,7 @@ export const getMultipleScreenLayoutSummary = async (req: AuthenticatedRequest,
 // ============================================================
 
 // 여러 화면의 서브 테이블 정보 조회 (메인 테이블 → 서브 테이블 관계)
-export const getScreenSubTables = async (req: AuthenticatedRequest, res: Response) => {
+export const getScreenSubTables = async (req: Request, res: Response) => {
   try {
     const { screenIds } = req.body;
 
@@ -2052,202 +2060,3 @@ export const getScreenSubTables = async (req: AuthenticatedRequest, res: Respons
   }
 };
 
-
-// ============================================================
-// 메뉴-화면그룹 동기화 API
-// ============================================================
-
-/**
- * 화면관리 → 메뉴 동기화
- * screen_groups를 menu_info로 동기화
- */
-export const syncScreenGroupsToMenuController = async (req: AuthenticatedRequest, res: Response) => {
-  try {
-    const userCompanyCode = req.user?.companyCode || "*";
-    const userId = req.user?.userId || "";
-    const { targetCompanyCode } = req.body;
-
-    // 최고 관리자가 특정 회사를 지정한 경우 해당 회사로
-    let companyCode = userCompanyCode;
-    if (userCompanyCode === "*" && targetCompanyCode) {
-      companyCode = targetCompanyCode;
-    }
-
-    // 최고 관리자(*)는 회사를 지정해야 함
-    if (companyCode === "*") {
-      return res.status(400).json({
-        success: false,
-        message: "동기화할 회사를 선택해주세요.",
-      });
-    }
-
-    logger.info("화면관리 → 메뉴 동기화 요청", { companyCode, userId });
-
-    const result = await syncScreenGroupsToMenu(companyCode, userId);
-
-    if (!result.success) {
-      return res.status(500).json({
-        success: false,
-        message: "동기화 중 오류가 발생했습니다.",
-        errors: result.errors,
-      });
-    }
-
-    res.json({
-      success: true,
-      message: `동기화 완료: 생성 ${result.created}개, 연결 ${result.linked}개, 스킵 ${result.skipped}개`,
-      data: result,
-    });
-  } catch (error: any) {
-    logger.error("화면관리 → 메뉴 동기화 실패:", error);
-    res.status(500).json({
-      success: false,
-      message: "동기화에 실패했습니다.",
-      error: error.message,
-    });
-  }
-};
-
-/**
- * 메뉴 → 화면관리 동기화
- * menu_info를 screen_groups로 동기화
- */
-export const syncMenuToScreenGroupsController = async (req: AuthenticatedRequest, res: Response) => {
-  try {
-    const userCompanyCode = req.user?.companyCode || "*";
-    const userId = req.user?.userId || "";
-    const { targetCompanyCode } = req.body;
-
-    // 최고 관리자가 특정 회사를 지정한 경우 해당 회사로
-    let companyCode = userCompanyCode;
-    if (userCompanyCode === "*" && targetCompanyCode) {
-      companyCode = targetCompanyCode;
-    }
-
-    // 최고 관리자(*)는 회사를 지정해야 함
-    if (companyCode === "*") {
-      return res.status(400).json({
-        success: false,
-        message: "동기화할 회사를 선택해주세요.",
-      });
-    }
-
-    logger.info("메뉴 → 화면관리 동기화 요청", { companyCode, userId });
-
-    const result = await syncMenuToScreenGroups(companyCode, userId);
-
-    if (!result.success) {
-      return res.status(500).json({
-        success: false,
-        message: "동기화 중 오류가 발생했습니다.",
-        errors: result.errors,
-      });
-    }
-
-    res.json({
-      success: true,
-      message: `동기화 완료: 생성 ${result.created}개, 연결 ${result.linked}개, 스킵 ${result.skipped}개`,
-      data: result,
-    });
-  } catch (error: any) {
-    logger.error("메뉴 → 화면관리 동기화 실패:", error);
-    res.status(500).json({
-      success: false,
-      message: "동기화에 실패했습니다.",
-      error: error.message,
-    });
-  }
-};
-
-/**
- * 동기화 상태 조회
- */
-export const getSyncStatusController = async (req: AuthenticatedRequest, res: Response) => {
-  try {
-    const userCompanyCode = req.user?.companyCode || "*";
-    const { targetCompanyCode } = req.query;
-
-    // 최고 관리자가 특정 회사를 지정한 경우 해당 회사로
-    let companyCode = userCompanyCode;
-    if (userCompanyCode === "*" && targetCompanyCode) {
-      companyCode = targetCompanyCode as string;
-    }
-
-    // 최고 관리자(*)는 회사를 지정해야 함
-    if (companyCode === "*") {
-      return res.status(400).json({
-        success: false,
-        message: "조회할 회사를 선택해주세요.",
-      });
-    }
-
-    const status = await getSyncStatus(companyCode);
-
-    res.json({
-      success: true,
-      data: status,
-    });
-  } catch (error: any) {
-    logger.error("동기화 상태 조회 실패:", error);
-    res.status(500).json({
-      success: false,
-      message: "동기화 상태 조회에 실패했습니다.",
-      error: error.message,
-    });
-  }
-};
-
-/**
- * 전체 회사 동기화
- * 모든 회사에 대해 양방향 동기화 수행 (최고 관리자만)
- */
-export const syncAllCompaniesController = async (req: AuthenticatedRequest, res: Response) => {
-  try {
-    const userCompanyCode = req.user?.companyCode || "*";
-    const userId = req.user?.userId || "";
-
-    // 최고 관리자만 전체 동기화 가능
-    if (userCompanyCode !== "*") {
-      return res.status(403).json({
-        success: false,
-        message: "전체 동기화는 최고 관리자만 수행할 수 있습니다.",
-      });
-    }
-
-    logger.info("전체 회사 동기화 요청", { userId });
-
-    const result = await syncAllCompanies(userId);
-
-    if (!result.success) {
-      return res.status(500).json({
-        success: false,
-        message: "전체 동기화 중 오류가 발생했습니다.",
-      });
-    }
-
-    // 결과 요약
-    const totalCreated = result.results.reduce((sum, r) => sum + r.created, 0);
-    const totalLinked = result.results.reduce((sum, r) => sum + r.linked, 0);
-
-    res.json({
-      success: true,
-      message: `전체 동기화 완료: ${result.totalCompanies}개 회사 중 ${result.successCount}개 성공`,
-      data: {
-        totalCompanies: result.totalCompanies,
-        successCount: result.successCount,
-        failedCount: result.failedCount,
-        totalCreated,
-        totalLinked,
-        details: result.results,
-      },
-    });
-  } catch (error: any) {
-    logger.error("전체 회사 동기화 실패:", error);
-    res.status(500).json({
-      success: false,
-      message: "전체 동기화에 실패했습니다.",
-      error: error.message,
-    });
-  }
-};
-

backend-node/src/controllers/tableManagementController.ts

@@ -804,6 +804,12 @@ export async function getTableData(
       }
     }
 
+    // 🆕 최종 검색 조건 로그
+    logger.info(
+      `🔍 최종 검색 조건 (enhancedSearch):`,
+      JSON.stringify(enhancedSearch)
+    );
+
     // 데이터 조회
     const result = await tableManagementService.getTableData(tableName, {
       page: parseInt(page),
@@ -887,7 +893,10 @@ export async function addTableData(
     const companyCode = req.user?.companyCode;
     if (companyCode && !data.company_code) {
       // 테이블에 company_code 컬럼이 있는지 확인
-      const hasCompanyCodeColumn = await tableManagementService.hasColumn(tableName, "company_code");
+      const hasCompanyCodeColumn = await tableManagementService.hasColumn(
+        tableName,
+        "company_code"
+      );
       if (hasCompanyCodeColumn) {
         data.company_code = companyCode;
         logger.info(`멀티테넌시: company_code 자동 추가 - ${companyCode}`);
@@ -897,7 +906,10 @@ export async function addTableData(
     // 🆕 writer 컬럼 자동 추가 (테이블에 writer 컬럼이 있고 값이 없는 경우)
     const userId = req.user?.userId;
     if (userId && !data.writer) {
-      const hasWriterColumn = await tableManagementService.hasColumn(tableName, "writer");
+      const hasWriterColumn = await tableManagementService.hasColumn(
+        tableName,
+        "writer"
+      );
       if (hasWriterColumn) {
         data.writer = userId;
         logger.info(`writer 자동 추가 - ${userId}`);
@@ -905,13 +917,25 @@ export async function addTableData(
     }
 
     // 데이터 추가
-    await tableManagementService.addTableData(tableName, data);
+    const result = await tableManagementService.addTableData(tableName, data);
 
     logger.info(`테이블 데이터 추가 완료: ${tableName}`);
 
-    const response: ApiResponse<null> = {
+    // 무시된 컬럼이 있으면 경고 정보 포함
+    const response: ApiResponse<{
+      skippedColumns?: string[];
+      savedColumns?: string[];
+    }> = {
       success: true,
-      message: "테이블 데이터를 성공적으로 추가했습니다.",
+      message:
+        result.skippedColumns.length > 0
+          ? `테이블 데이터를 추가했습니다. (무시된 컬럼 ${result.skippedColumns.length}개: ${result.skippedColumns.join(", ")})`
+          : "테이블 데이터를 성공적으로 추가했습니다.",
+      data: {
+        skippedColumns:
+          result.skippedColumns.length > 0 ? result.skippedColumns : undefined,
+        savedColumns: result.savedColumns,
+      },
     };
 
     res.status(201).json(response);
@@ -1655,7 +1679,10 @@ export async function getCategoryColumnsByMenu(
     const { menuObjid } = req.params;
     const companyCode = req.user?.companyCode;
 
-    logger.info("📥 메뉴별 카테고리 컬럼 조회 요청", { menuObjid, companyCode });
+    logger.info("📥 메뉴별 카테고리 컬럼 조회 요청", {
+      menuObjid,
+      companyCode,
+    });
 
     if (!menuObjid) {
       res.status(400).json({
@@ -1681,7 +1708,10 @@ export async function getCategoryColumnsByMenu(
 
     if (mappingTableExists) {
       // 🆕 category_column_mapping을 사용한 계층 구조 기반 조회
-      logger.info("🔍 category_column_mapping 기반 카테고리 컬럼 조회 (계층 구조 상속)", { menuObjid, companyCode });
+      logger.info(
+        "🔍 category_column_mapping 기반 카테고리 컬럼 조회 (계층 구조 상속)",
+        { menuObjid, companyCode }
+      );
 
       // 현재 메뉴와 모든 상위 메뉴의 objid 조회 (재귀)
       const ancestorMenuQuery = `
@@ -1705,14 +1735,18 @@ export async function getCategoryColumnsByMenu(
         FROM menu_hierarchy
       `;
 
-      const ancestorMenuResult = await pool.query(ancestorMenuQuery, [parseInt(menuObjid)]);
+      const ancestorMenuResult = await pool.query(ancestorMenuQuery, [
-      const ancestorMenuObjids = ancestorMenuResult.rows[0]?.menu_objids || [parseInt(menuObjid)];
+        parseInt(menuObjid),
+      ]);
+      const ancestorMenuObjids = ancestorMenuResult.rows[0]?.menu_objids || [
+        parseInt(menuObjid),
+      ];
       const ancestorMenuNames = ancestorMenuResult.rows[0]?.menu_names || [];
 
       logger.info("✅ 상위 메뉴 계층 조회 완료", {
         ancestorMenuObjids,
         ancestorMenuNames,
-        hierarchyDepth: ancestorMenuObjids.length 
+        hierarchyDepth: ancestorMenuObjids.length,
       });
 
       // 상위 메뉴들에 설정된 모든 카테고리 컬럼 조회 (테이블 필터링 제거)
@@ -1745,14 +1779,25 @@ export async function getCategoryColumnsByMenu(
         ORDER BY ttc.table_name, ccm.logical_column_name
       `;
 
-      columnsResult = await pool.query(columnsQuery, [companyCode, ancestorMenuObjids]);
+      columnsResult = await pool.query(columnsQuery, [
-      logger.info("✅ category_column_mapping 기반 조회 완료 (계층 구조 상속)", { 
+        companyCode,
+        ancestorMenuObjids,
+      ]);
+      logger.info(
+        "✅ category_column_mapping 기반 조회 완료 (계층 구조 상속)",
+        {
           rowCount: columnsResult.rows.length,
-        columns: columnsResult.rows.map((r: any) => `${r.tableName}.${r.columnName}`)
+          columns: columnsResult.rows.map(
-      });
+            (r: any) => `${r.tableName}.${r.columnName}`
+          ),
+        }
+      );
     } else {
       // 🔄 레거시 방식: 형제 메뉴들의 테이블에서 모든 카테고리 컬럼 조회
-      logger.info("🔍 레거시 방식: 형제 메뉴 테이블 기반 카테고리 컬럼 조회", { menuObjid, companyCode });
+      logger.info("🔍 레거시 방식: 형제 메뉴 테이블 기반 카테고리 컬럼 조회", {
+        menuObjid,
+        companyCode,
+      });
 
       // 형제 메뉴 조회
       const { getSiblingMenuObjids } = await import("../services/menuService");
@@ -1768,10 +1813,16 @@ export async function getCategoryColumnsByMenu(
           AND sd.table_name IS NOT NULL
       `;
 
-      const tablesResult = await pool.query(tablesQuery, [siblingObjids, companyCode]);
+      const tablesResult = await pool.query(tablesQuery, [
+        siblingObjids,
+        companyCode,
+      ]);
       const tableNames = tablesResult.rows.map((row: any) => row.table_name);
 
-      logger.info("✅ 형제 메뉴 테이블 조회 완료", { tableNames, count: tableNames.length });
+      logger.info("✅ 형제 메뉴 테이블 조회 완료", {
+        tableNames,
+        count: tableNames.length,
+      });
 
       if (tableNames.length === 0) {
         res.json({
@@ -1808,11 +1859,13 @@ export async function getCategoryColumnsByMenu(
       `;
 
       columnsResult = await pool.query(columnsQuery, [tableNames, companyCode]);
-      logger.info("✅ 레거시 방식 조회 완료", { rowCount: columnsResult.rows.length });
+      logger.info("✅ 레거시 방식 조회 완료", {
+        rowCount: columnsResult.rows.length,
+      });
     }
 
     logger.info("✅ 카테고리 컬럼 조회 완료", {
-      columnCount: columnsResult.rows.length 
+      columnCount: columnsResult.rows.length,
     });
 
     res.json({
@@ -1913,19 +1966,25 @@ export async function multiTableSave(
     if (isUpdate && pkValue) {
       // UPDATE
       const updateColumns = Object.keys(mainData)
-        .filter(col => col !== pkColumn)
+        .filter((col) => col !== pkColumn)
         .map((col, idx) => `"${col}" = $${idx + 1}`)
         .join(", ");
       const updateValues = Object.keys(mainData)
-        .filter(col => col !== pkColumn)
+        .filter((col) => col !== pkColumn)
-        .map(col => mainData[col]);
+        .map((col) => mainData[col]);
 
       // updated_at 컬럼 존재 여부 확인
-      const hasUpdatedAt = await client.query(`
+      const hasUpdatedAt = await client.query(
+        `
         SELECT 1 FROM information_schema.columns 
         WHERE table_name = $1 AND column_name = 'updated_at'
-      `, [mainTableName]);
+      `,
-      const updatedAtClause = hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0 ? ", updated_at = NOW()" : "";
+        [mainTableName]
+      );
+      const updatedAtClause =
+        hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0
+          ? ", updated_at = NOW()"
+          : "";
 
       const updateQuery = `
         UPDATE "${mainTableName}"
@@ -1935,28 +1994,42 @@ export async function multiTableSave(
         RETURNING *
       `;
 
-      const updateParams = companyCode !== "*" 
+      const updateParams =
+        companyCode !== "*"
           ? [...updateValues, pkValue, companyCode]
           : [...updateValues, pkValue];
 
-      logger.info("메인 테이블 UPDATE:", { query: updateQuery, paramsCount: updateParams.length });
+      logger.info("메인 테이블 UPDATE:", {
+        query: updateQuery,
+        paramsCount: updateParams.length,
+      });
       mainResult = await client.query(updateQuery, updateParams);
     } else {
       // INSERT
-      const columns = Object.keys(mainData).map(col => `"${col}"`).join(", ");
+      const columns = Object.keys(mainData)
-      const placeholders = Object.keys(mainData).map((_, idx) => `$${idx + 1}`).join(", ");
+        .map((col) => `"${col}"`)
+        .join(", ");
+      const placeholders = Object.keys(mainData)
+        .map((_, idx) => `$${idx + 1}`)
+        .join(", ");
       const values = Object.values(mainData);
 
       // updated_at 컬럼 존재 여부 확인
-      const hasUpdatedAt = await client.query(`
+      const hasUpdatedAt = await client.query(
+        `
         SELECT 1 FROM information_schema.columns 
         WHERE table_name = $1 AND column_name = 'updated_at'
-      `, [mainTableName]);
+      `,
-      const updatedAtClause = hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0 ? ", updated_at = NOW()" : "";
+        [mainTableName]
+      );
+      const updatedAtClause =
+        hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0
+          ? ", updated_at = NOW()"
+          : "";
 
       const updateSetClause = Object.keys(mainData)
-        .filter(col => col !== pkColumn)
+        .filter((col) => col !== pkColumn)
-        .map(col => `"${col}" = EXCLUDED."${col}"`)
+        .map((col) => `"${col}" = EXCLUDED."${col}"`)
         .join(", ");
 
       const insertQuery = `
@@ -1967,7 +2040,10 @@ export async function multiTableSave(
         RETURNING *
       `;
 
-      logger.info("메인 테이블 INSERT/UPSERT:", { query: insertQuery, paramsCount: values.length });
+      logger.info("메인 테이블 INSERT/UPSERT:", {
+        query: insertQuery,
+        paramsCount: values.length,
+      });
       mainResult = await client.query(insertQuery, values);
     }
 
@@ -1986,12 +2062,15 @@ export async function multiTableSave(
       const { tableName, linkColumn, items, options } = subTableConfig;
 
       // saveMainAsFirst가 활성화된 경우, items가 비어있어도 메인 데이터를 서브 테이블에 저장해야 함
-      const hasSaveMainAsFirst = options?.saveMainAsFirst && 
+      const hasSaveMainAsFirst =
+        options?.saveMainAsFirst &&
         options?.mainFieldMappings &&
         options.mainFieldMappings.length > 0;
 
       if (!tableName || (!items?.length && !hasSaveMainAsFirst)) {
-        logger.info(`서브 테이블 ${tableName} 스킵: 데이터 없음 (saveMainAsFirst: ${hasSaveMainAsFirst})`);
+        logger.info(
+          `서브 테이블 ${tableName} 스킵: 데이터 없음 (saveMainAsFirst: ${hasSaveMainAsFirst})`
+        );
         continue;
       }
 
@@ -2004,15 +2083,20 @@ export async function multiTableSave(
 
       // 기존 데이터 삭제 옵션
       if (options?.deleteExistingBefore && linkColumn?.subColumn) {
-        const deleteQuery = options?.deleteOnlySubItems && options?.mainMarkerColumn
+        const deleteQuery =
+          options?.deleteOnlySubItems && options?.mainMarkerColumn
             ? `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1 AND "${options.mainMarkerColumn}" = $2`
             : `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1`;
 
-        const deleteParams = options?.deleteOnlySubItems && options?.mainMarkerColumn
+        const deleteParams =
+          options?.deleteOnlySubItems && options?.mainMarkerColumn
             ? [savedPkValue, options.subMarkerValue ?? false]
             : [savedPkValue];
 
-        logger.info(`서브 테이블 ${tableName} 기존 데이터 삭제:`, { deleteQuery, deleteParams });
+        logger.info(`서브 테이블 ${tableName} 기존 데이터 삭제:`, {
+          deleteQuery,
+          deleteParams,
+        });
         await client.query(deleteQuery, deleteParams);
       }
 
@@ -2025,7 +2109,12 @@ export async function multiTableSave(
         linkColumn,
         mainDataKeys: Object.keys(mainData),
       });
-      if (options?.saveMainAsFirst && options?.mainFieldMappings && options.mainFieldMappings.length > 0 && linkColumn?.subColumn) {
+      if (
+        options?.saveMainAsFirst &&
+        options?.mainFieldMappings &&
+        options.mainFieldMappings.length > 0 &&
+        linkColumn?.subColumn
+      ) {
         const mainSubItem: Record<string, any> = {
           [linkColumn.subColumn]: savedPkValue,
         };
@@ -2039,7 +2128,8 @@ export async function multiTableSave(
 
         // 메인 마커 설정
         if (options.mainMarkerColumn) {
-          mainSubItem[options.mainMarkerColumn] = options.mainMarkerValue ?? true;
+          mainSubItem[options.mainMarkerColumn] =
+            options.mainMarkerValue ?? true;
         }
 
         // company_code 추가
@@ -2068,13 +2158,23 @@ export async function multiTableSave(
         if (existingResult.rows.length > 0) {
           // UPDATE
           const updateColumns = Object.keys(mainSubItem)
-            .filter(col => col !== linkColumn.subColumn && col !== options.mainMarkerColumn && col !== "company_code")
+            .filter(
+              (col) =>
+                col !== linkColumn.subColumn &&
+                col !== options.mainMarkerColumn &&
+                col !== "company_code"
+            )
             .map((col, idx) => `"${col}" = $${idx + 1}`)
             .join(", ");
 
           const updateValues = Object.keys(mainSubItem)
-            .filter(col => col !== linkColumn.subColumn && col !== options.mainMarkerColumn && col !== "company_code")
+            .filter(
-            .map(col => mainSubItem[col]);
+              (col) =>
+                col !== linkColumn.subColumn &&
+                col !== options.mainMarkerColumn &&
+                col !== "company_code"
+            )
+            .map((col) => mainSubItem[col]);
 
           if (updateColumns) {
             const updateQuery = `
@@ -2094,14 +2194,26 @@ export async function multiTableSave(
             }
 
             const updateResult = await client.query(updateQuery, updateParams);
-            subTableResults.push({ tableName, type: "main", data: updateResult.rows[0] });
+            subTableResults.push({
+              tableName,
+              type: "main",
+              data: updateResult.rows[0],
+            });
           } else {
-            subTableResults.push({ tableName, type: "main", data: existingResult.rows[0] });
+            subTableResults.push({
+              tableName,
+              type: "main",
+              data: existingResult.rows[0],
+            });
           }
         } else {
           // INSERT
-          const mainSubColumns = Object.keys(mainSubItem).map(col => `"${col}"`).join(", ");
+          const mainSubColumns = Object.keys(mainSubItem)
-          const mainSubPlaceholders = Object.keys(mainSubItem).map((_, idx) => `$${idx + 1}`).join(", ");
+            .map((col) => `"${col}"`)
+            .join(", ");
+          const mainSubPlaceholders = Object.keys(mainSubItem)
+            .map((_, idx) => `$${idx + 1}`)
+            .join(", ");
           const mainSubValues = Object.values(mainSubItem);
 
           const insertQuery = `
@@ -2111,7 +2223,11 @@ export async function multiTableSave(
           `;
 
           const insertResult = await client.query(insertQuery, mainSubValues);
-          subTableResults.push({ tableName, type: "main", data: insertResult.rows[0] });
+          subTableResults.push({
+            tableName,
+            type: "main",
+            data: insertResult.rows[0],
+          });
         }
       }
 
@@ -2127,8 +2243,12 @@ export async function multiTableSave(
           item.company_code = companyCode;
         }
 
-        const subColumns = Object.keys(item).map(col => `"${col}"`).join(", ");
+        const subColumns = Object.keys(item)
-        const subPlaceholders = Object.keys(item).map((_, idx) => `$${idx + 1}`).join(", ");
+          .map((col) => `"${col}"`)
+          .join(", ");
+        const subPlaceholders = Object.keys(item)
+          .map((_, idx) => `$${idx + 1}`)
+          .join(", ");
         const subValues = Object.values(item);
 
         const subInsertQuery = `
@@ -2137,9 +2257,16 @@ export async function multiTableSave(
           RETURNING *
         `;
 
-        logger.info(`서브 테이블 ${tableName} 아이템 저장:`, { subInsertQuery, subValuesCount: subValues.length });
+        logger.info(`서브 테이블 ${tableName} 아이템 저장:`, {
+          subInsertQuery,
+          subValuesCount: subValues.length,
+        });
         const subResult = await client.query(subInsertQuery, subValues);
-        subTableResults.push({ tableName, type: "sub", data: subResult.rows[0] });
+        subTableResults.push({
+          tableName,
+          type: "sub",
+          data: subResult.rows[0],
+        });
       }
 
       logger.info(`서브 테이블 ${tableName} 저장 완료`);
@@ -2180,8 +2307,11 @@ export async function multiTableSave(
 }
 
 /**
- * 두 테이블 간 엔티티 관계 조회
+ * 두 테이블 간의 엔티티 관계 자동 감지
- * column_labels의 entity/category 타입 설정을 기반으로 두 테이블 간의 관계를 조회
+ * GET /api/table-management/tables/entity-relations?leftTable=xxx&rightTable=yyy
+ *
+ * column_labels에서 정의된 엔티티/카테고리 타입 설정을 기반으로
+ * 두 테이블 간의 외래키 관계를 자동으로 감지합니다.
  */
 export async function getTableEntityRelations(
   req: AuthenticatedRequest,
@@ -2190,93 +2320,54 @@ export async function getTableEntityRelations(
   try {
     const { leftTable, rightTable } = req.query;
 
+    logger.info(
+      `=== 테이블 엔티티 관계 조회 시작: ${leftTable} <-> ${rightTable} ===`
+    );
+
     if (!leftTable || !rightTable) {
-      res.status(400).json({
+      const response: ApiResponse<null> = {
         success: false,
         message: "leftTable과 rightTable 파라미터가 필요합니다.",
-      });
+        error: {
+          code: "MISSING_PARAMETERS",
+          details: "leftTable과 rightTable 쿼리 파라미터가 필요합니다.",
+        },
+      };
+      res.status(400).json(response);
       return;
     }
 
-    logger.info("=== 테이블 엔티티 관계 조회 ===", { leftTable, rightTable });
+    const tableManagementService = new TableManagementService();
+    const relations = await tableManagementService.detectTableEntityRelations(
+      String(leftTable),
+      String(rightTable)
+    );
 
-    // 두 테이블의 컬럼 라벨 정보 조회
+    logger.info(`테이블 엔티티 관계 조회 완료: ${relations.length}개 발견`);
-    const columnLabelsQuery = `
-      SELECT 
-        table_name,
-        column_name,
-        column_label,
-        web_type,
-        detail_settings
-      FROM column_labels
-      WHERE table_name IN ($1, $2)
-        AND web_type IN ('entity', 'category')
-    `;
 
-    const result = await query(columnLabelsQuery, [leftTable, rightTable]);
+    const response: ApiResponse<any> = {
-
-    // 관계 분석
-    const relations: Array<{
-      fromTable: string;
-      fromColumn: string;
-      toTable: string;
-      toColumn: string;
-      relationType: string;
-    }> = [];
-
-    for (const row of result) {
-      try {
-        const detailSettings = typeof row.detail_settings === "string" 
-          ? JSON.parse(row.detail_settings) 
-          : row.detail_settings;
-
-        if (detailSettings && detailSettings.referenceTable) {
-          const refTable = detailSettings.referenceTable;
-          const refColumn = detailSettings.referenceColumn || "id";
-          
-          // leftTable과 rightTable 간의 관계인지 확인
-          if (
-            (row.table_name === leftTable && refTable === rightTable) ||
-            (row.table_name === rightTable && refTable === leftTable)
-          ) {
-            relations.push({
-              fromTable: row.table_name,
-              fromColumn: row.column_name,
-              toTable: refTable,
-              toColumn: refColumn,
-              relationType: row.web_type,
-            });
-          }
-        }
-      } catch (parseError) {
-        logger.warn("detail_settings 파싱 오류:", { 
-          table: row.table_name, 
-          column: row.column_name,
-          error: parseError 
-        });
-      }
-    }
-
-    logger.info("테이블 엔티티 관계 조회 완료", { 
-      leftTable, 
-      rightTable, 
-      relationsCount: relations.length 
-    });
-
-    res.json({
       success: true,
+      message: `${relations.length}개의 엔티티 관계를 발견했습니다.`,
       data: {
-        leftTable,
+        leftTable: String(leftTable),
-        rightTable,
+        rightTable: String(rightTable),
         relations,
       },
-    });
+    };
-  } catch (error: any) {
+
-    logger.error("테이블 엔티티 관계 조회 실패:", error);
+    res.status(200).json(response);
-    res.status(500).json({
+  } catch (error) {
+    logger.error("테이블 엔티티 관계 조회 중 오류 발생:", error);
+
+    const response: ApiResponse<null> = {
       success: false,
-      message: "테이블 엔티티 관계 조회에 실패했습니다.",
+      message: "테이블 엔티티 관계 조회 중 오류가 발생했습니다.",
-      error: error.message,
+      error: {
-    });
+        code: "ENTITY_RELATIONS_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+    };
+
+    res.status(500).json(response);
   }
 }

backend-node/src/routes/screenGroupRoutes.ts

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

backend-node/src/services/dataService.ts

@@ -254,10 +254,7 @@ class DataService {
           key !== "limit" &&
           key !== "offset" &&
           key !== "orderBy" &&
-          key !== "userLang" &&
+          key !== "userLang"
-          key !== "page" &&
-          key !== "pageSize" &&
-          key !== "size"
         ) {
           // 컬럼명 검증 (SQL 인젝션 방지)
           if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(key)) {

backend-node/src/services/menuCopyService.ts

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

backend-node/src/services/menuScreenSyncService.ts

@@ -1,969 +0,0 @@
-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/tableManagementService.ts

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

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

@@ -111,12 +111,7 @@ export default function ScreenManagementPage() {
   };
 
   // 검색어로 필터링된 화면
-  // 검색어가 여러 키워드(폴더 계층 검색)이면 화면 필터링 없이 모든 화면 표시
+  const filteredScreens = screens.filter((screen) =>
-  // 단일 키워드면 해당 키워드로 화면 필터링
-  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())
   );
@@ -188,7 +183,6 @@ export default function ScreenManagementPage() {
                 selectedScreen={selectedScreen}
                 onScreenSelect={handleScreenSelect}
                 onScreenDesign={handleDesignScreen}
-                searchTerm={searchTerm}
                 onGroupSelect={(group) => {
                   setSelectedGroup(group);
                   setSelectedScreen(null); // 화면 선택 해제
@@ -247,3 +241,5 @@ export default function ScreenManagementPage() {
     </div>
   );
 }
+
+

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

@@ -23,6 +23,7 @@ import { TableSearchWidgetHeightProvider, useTableSearchWidgetHeight } from "@/c
 import { ScreenContextProvider } from "@/contexts/ScreenContext"; // 컴포넌트 간 통신
 import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext"; // 분할 패널 리사이즈
 import { ActiveTabProvider } from "@/contexts/ActiveTabContext"; // 활성 탭 관리
+import { ScreenMultiLangProvider } from "@/contexts/ScreenMultiLangContext"; // 화면 다국어
 
 function ScreenViewPage() {
   const params = useParams();
@@ -113,7 +114,7 @@ function ScreenViewPage() {
   // 편집 모달 이벤트 리스너 등록
   useEffect(() => {
     const handleOpenEditModal = (event: CustomEvent) => {
-      console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
+      // console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
 
       setEditModalConfig({
         screenId: event.detail.screenId,
@@ -345,6 +346,7 @@ function ScreenViewPage() {
 
           {/* 절대 위치 기반 렌더링 (화면관리와 동일한 방식) */}
           {layoutReady && layout && layout.components.length > 0 ? (
+            <ScreenMultiLangProvider components={layout.components} companyCode={companyCode}>
               <div
                 className="bg-background relative"
                 style={{
@@ -770,6 +772,7 @@ function ScreenViewPage() {
                 );
               })()}
               </div>
+            </ScreenMultiLangProvider>
           ) : (
             // 빈 화면일 때
             <div className="bg-background flex items-center justify-center" style={{ minHeight: screenHeight }}>

frontend/app/globals.css

@@ -388,6 +388,237 @@ select {
   border-spacing: 0 !important;
 }
 
+/* ===== POP (Production Operation Panel) Styles ===== */
+
+/* POP 전용 다크 테마 변수 */
+.pop-dark {
+  /* 배경 색상 */
+  --pop-bg-deepest: 8 12 21;
+  --pop-bg-deep: 10 15 28;
+  --pop-bg-primary: 13 19 35;
+  --pop-bg-secondary: 18 26 47;
+  --pop-bg-tertiary: 25 35 60;
+  --pop-bg-elevated: 32 45 75;
+
+  /* 네온 강조색 */
+  --pop-neon-cyan: 0 212 255;
+  --pop-neon-cyan-bright: 0 240 255;
+  --pop-neon-cyan-dim: 0 150 190;
+  --pop-neon-pink: 255 0 102;
+  --pop-neon-purple: 138 43 226;
+
+  /* 상태 색상 */
+  --pop-success: 0 255 136;
+  --pop-success-dim: 0 180 100;
+  --pop-warning: 255 170 0;
+  --pop-warning-dim: 200 130 0;
+  --pop-danger: 255 51 51;
+  --pop-danger-dim: 200 40 40;
+
+  /* 텍스트 색상 */
+  --pop-text-primary: 255 255 255;
+  --pop-text-secondary: 180 195 220;
+  --pop-text-muted: 100 120 150;
+
+  /* 테두리 색상 */
+  --pop-border: 40 55 85;
+  --pop-border-light: 55 75 110;
+}
+
+/* POP 전용 라이트 테마 변수 */
+.pop-light {
+  --pop-bg-deepest: 245 247 250;
+  --pop-bg-deep: 240 243 248;
+  --pop-bg-primary: 250 251 253;
+  --pop-bg-secondary: 255 255 255;
+  --pop-bg-tertiary: 245 247 250;
+  --pop-bg-elevated: 235 238 245;
+
+  --pop-neon-cyan: 0 122 204;
+  --pop-neon-cyan-bright: 0 140 230;
+  --pop-neon-cyan-dim: 0 100 170;
+  --pop-neon-pink: 220 38 127;
+  --pop-neon-purple: 118 38 200;
+
+  --pop-success: 22 163 74;
+  --pop-success-dim: 21 128 61;
+  --pop-warning: 245 158 11;
+  --pop-warning-dim: 217 119 6;
+  --pop-danger: 220 38 38;
+  --pop-danger-dim: 185 28 28;
+
+  --pop-text-primary: 15 23 42;
+  --pop-text-secondary: 71 85 105;
+  --pop-text-muted: 148 163 184;
+
+  --pop-border: 226 232 240;
+  --pop-border-light: 203 213 225;
+}
+
+/* POP 배경 그리드 패턴 */
+.pop-bg-pattern::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background:
+    repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
+    repeating-linear-gradient(0deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
+    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 60%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.pop-light .pop-bg-pattern::before {
+  background:
+    repeating-linear-gradient(90deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
+    repeating-linear-gradient(0deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
+    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 122, 204, 0.05) 0%, transparent 60%);
+}
+
+/* POP 글로우 효과 */
+.pop-glow-cyan {
+  box-shadow:
+    0 0 20px rgba(0, 212, 255, 0.5),
+    0 0 40px rgba(0, 212, 255, 0.3);
+}
+
+.pop-glow-cyan-strong {
+  box-shadow:
+    0 0 10px rgba(0, 212, 255, 0.8),
+    0 0 30px rgba(0, 212, 255, 0.5),
+    0 0 50px rgba(0, 212, 255, 0.3);
+}
+
+.pop-glow-success {
+  box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
+}
+
+.pop-glow-warning {
+  box-shadow: 0 0 15px rgba(255, 170, 0, 0.5);
+}
+
+.pop-glow-danger {
+  box-shadow: 0 0 15px rgba(255, 51, 51, 0.5);
+}
+
+/* POP 펄스 글로우 애니메이션 */
+@keyframes pop-pulse-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  }
+  50% {
+    box-shadow:
+      0 0 20px rgba(0, 212, 255, 0.8),
+      0 0 30px rgba(0, 212, 255, 0.4);
+  }
+}
+
+.pop-animate-pulse-glow {
+  animation: pop-pulse-glow 2s ease-in-out infinite;
+}
+
+/* POP 프로그레스 바 샤인 애니메이션 */
+@keyframes pop-progress-shine {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
+
+.pop-progress-shine::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 20px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
+  animation: pop-progress-shine 1.5s ease-in-out infinite;
+}
+
+/* POP 스크롤바 스타일 */
+.pop-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.pop-scrollbar::-webkit-scrollbar-track {
+  background: rgb(var(--pop-bg-secondary));
+}
+
+.pop-scrollbar::-webkit-scrollbar-thumb {
+  background: rgb(var(--pop-border-light));
+  border-radius: 9999px;
+}
+
+.pop-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgb(var(--pop-neon-cyan-dim));
+}
+
+/* POP 스크롤바 숨기기 */
+.pop-hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.pop-hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* ===== Marching Ants Animation (Excel Copy Border) ===== */
+@keyframes marching-ants-h {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 16px 0;
+  }
+}
+
+@keyframes marching-ants-v {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 0 16px;
+  }
+}
+
+.animate-marching-ants-h {
+  background: repeating-linear-gradient(
+    90deg,
+    hsl(var(--primary)) 0,
+    hsl(var(--primary)) 4px,
+    transparent 4px,
+    transparent 8px
+  );
+  background-size: 16px 2px;
+  animation: marching-ants-h 0.4s linear infinite;
+}
+
+.animate-marching-ants-v {
+  background: repeating-linear-gradient(
+    180deg,
+    hsl(var(--primary)) 0,
+    hsl(var(--primary)) 4px,
+    transparent 4px,
+    transparent 8px
+  );
+  background-size: 2px 16px;
+  animation: marching-ants-v 0.4s linear infinite;
+}
+
 /* ===== 저장 테이블 막대기 애니메이션 ===== */
 @keyframes saveBarDrop {
   0% {

frontend/components/screen/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] max-h-[90vh] overflow-y-auto">
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
           {/* 로딩 오버레이 */}
           {isCopying && (
             <div className="absolute inset-0 z-50 flex flex-col items-center justify-center rounded-lg bg-background/90 backdrop-blur-sm">

frontend/components/screen/InteractiveScreenViewer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useEffect, useMemo } from "react";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
@@ -48,6 +48,7 @@ import { isFileComponent } from "@/lib/utils/componentTypeUtils";
 import { buildGridClasses } from "@/lib/constants/columnSpans";
 import { cn } from "@/lib/utils";
 import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
+import { useMultiLang } from "@/hooks/useMultiLang";
 import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
 import { TableOptionsToolbar } from "./table-options/TableOptionsToolbar";
 import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";
@@ -109,11 +110,7 @@ const CascadingDropdownWrapper: React.FC<CascadingDropdownWrapperProps> = ({
   const isDisabled = disabled || !parentValue || loading;
 
   return (
-    <Select
+    <Select value={value || ""} onValueChange={(newValue) => onChange?.(newValue)} disabled={isDisabled}>
-      value={value || ""}
-      onValueChange={(newValue) => onChange?.(newValue)}
-      disabled={isDisabled}
-    >
       <SelectTrigger className="h-full w-full">
         {loading ? (
           <div className="flex items-center gap-2">
@@ -187,9 +184,67 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const { userName, user } = useAuth(); // 현재 로그인한 사용자명과 사용자 정보 가져오기
+  const { userLang } = useMultiLang(); // 다국어 훅
   const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
   const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});
 
+  // 다국어 번역 상태 (langKeyId가 있는 컴포넌트들의 번역 텍스트)
+  const [translations, setTranslations] = useState<Record<string, string>>({});
+
+  // 다국어 키 수집 및 번역 로드
+  useEffect(() => {
+    const loadTranslations = async () => {
+      // 모든 컴포넌트에서 langKey 수집
+      const langKeysToFetch: string[] = [];
+
+      const collectLangKeys = (comps: ComponentData[]) => {
+        comps.forEach((comp) => {
+          // 컴포넌트 라벨의 langKey
+          if ((comp as any).langKey) {
+            langKeysToFetch.push((comp as any).langKey);
+          }
+          // componentConfig 내의 langKey (버튼 텍스트 등)
+          if ((comp as any).componentConfig?.langKey) {
+            langKeysToFetch.push((comp as any).componentConfig.langKey);
+          }
+          // 자식 컴포넌트 재귀 처리
+          if ((comp as any).children) {
+            collectLangKeys((comp as any).children);
+          }
+        });
+      };
+
+      collectLangKeys(allComponents);
+
+      // langKey가 있으면 배치 조회
+      if (langKeysToFetch.length > 0 && userLang) {
+        try {
+          const { apiClient } = await import("@/lib/api/client");
+          const response = await apiClient.post(
+            "/multilang/batch",
+            {
+              langKeys: [...new Set(langKeysToFetch)], // 중복 제거
+            },
+            {
+              params: {
+                userLang,
+                companyCode: user?.companyCode || "*",
+              },
+            },
+          );
+
+          if (response.data?.success && response.data?.data) {
+            setTranslations(response.data.data);
+          }
+        } catch (error) {
+          console.error("다국어 번역 로드 실패:", error);
+        }
+      }
+    };
+
+    loadTranslations();
+  }, [allComponents, userLang, user?.companyCode]);
+
   // 팝업 화면 상태
   const [popupScreen, setPopupScreen] = useState<{
     screenId: number;
@@ -210,10 +265,11 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
   const finalFormData = { ...localFormData, ...externalFormData };
 
   // 개선된 검증 시스템 (선택적 활성화)
-  const enhancedValidation = enableEnhancedValidation && screenInfo && tableColumns.length > 0 
+  const enhancedValidation =
+    enableEnhancedValidation && screenInfo && tableColumns.length > 0
       ? useFormValidation(
           finalFormData,
-        allComponents.filter(c => c.type === 'widget') as WidgetComponent[],
+          allComponents.filter((c) => c.type === "widget") as WidgetComponent[],
           tableColumns,
           {
             id: screenInfo.id,
@@ -221,7 +277,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             tableName: screenInfo.tableName,
             screenResolution: { width: 800, height: 600 },
             gridSettings: { size: 20, color: "#e0e0e0", opacity: 0.5 },
-          description: "동적 화면"
+            description: "동적 화면",
           },
           {
             enableRealTimeValidation: true,
@@ -229,12 +285,13 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             enableAutoSave: false,
             showToastMessages: true,
             ...validationOptions,
-        }
+          },
         )
       : null;
 
   // 자동값 생성 함수
-  const generateAutoValue = useCallback(async (autoValueType: string, ruleId?: string): Promise<string> => {
+  const generateAutoValue = useCallback(
+    async (autoValueType: string, ruleId?: string): Promise<string> => {
       const now = new Date();
       switch (autoValueType) {
         case "current_datetime":
@@ -267,7 +324,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         default:
           return "";
       }
-  }, [userName]); // userName 의존성 추가
+    },
+    [userName],
+  ); // userName 의존성 추가
 
   // 팝업 화면 레이아웃 로드
   React.useEffect(() => {
@@ -280,23 +339,23 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           // 화면 레이아웃과 화면 정보를 병렬로 가져오기
           const [layout, screen] = await Promise.all([
             screenApi.getLayout(popupScreen.screenId),
-            screenApi.getScreen(popupScreen.screenId)
+            screenApi.getScreen(popupScreen.screenId),
           ]);
 
           console.log("📊 팝업 화면 로드 완료:", {
             componentsCount: layout.components?.length || 0,
             screenInfo: {
               screenId: screen.screenId,
-              tableName: screen.tableName
+              tableName: screen.tableName,
             },
-            popupFormData: {}
+            popupFormData: {},
           });
 
           setPopupLayout(layout.components || []);
           setPopupScreenResolution(layout.screenResolution || null);
           setPopupScreenInfo({
             id: popupScreen.screenId,
-            tableName: screen.tableName
+            tableName: screen.tableName,
           });
 
           // 팝업 formData 초기화
@@ -320,7 +379,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     external: externalFormData,
     local: localFormData,
     merged: formData,
-    hasExternalCallback: !!onFormDataChange
+    hasExternalCallback: !!onFormDataChange,
   });
 
   // 폼 데이터 업데이트
@@ -353,7 +412,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       // console.log("🔧 initAutoInputFields 실행 시작");
       for (const comp of allComponents) {
         // 🆕 type: "component" 또는 type: "widget" 모두 처리
-        if (comp.type === 'widget' || comp.type === 'component') {
+        if (comp.type === "widget" || comp.type === "component") {
           const widget = comp as WidgetComponent;
           const fieldName = widget.columnName || widget.id;
 
@@ -361,7 +420,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           if (widget.autoFill?.enabled || (comp as any).autoFill?.enabled) {
             const autoFillConfig = widget.autoFill || (comp as any).autoFill;
             const currentValue = formData[fieldName];
-            if (currentValue === undefined || currentValue === '') {
+            if (currentValue === undefined || currentValue === "") {
               const { sourceTable, filterColumn, userField, displayColumn } = autoFillConfig;
 
               // 사용자 정보에서 필터 값 가져오기
@@ -369,12 +428,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
               if (userValue && sourceTable && filterColumn && displayColumn) {
                 try {
-                  const result = await tableTypeApi.getTableRecord(
+                  const result = await tableTypeApi.getTableRecord(sourceTable, filterColumn, userValue, displayColumn);
-                    sourceTable,
-                    filterColumn,
-                    userValue,
-                    displayColumn
-                  );
 
                   updateFormData(fieldName, result.value);
                 } catch (error) {
@@ -386,11 +440,13 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           }
 
           // 기존 widget 타입 전용 로직은 widget인 경우만
-          if (comp.type !== 'widget') continue;
+          if (comp.type !== "widget") continue;
 
           // 텍스트 타입 위젯의 자동입력 처리 (기존 로직)
-          if ((widget.widgetType === 'text' || widget.widgetType === 'email' || widget.widgetType === 'tel') && 
+          if (
-              widget.webTypeConfig) {
+            (widget.widgetType === "text" || widget.widgetType === "email" || widget.widgetType === "tel") &&
+            widget.webTypeConfig
+          ) {
             const config = widget.webTypeConfig as TextTypeConfig;
             const isAutoInput = config?.autoInput || false;
 
@@ -399,20 +455,21 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               const currentValue = formData[fieldName];
               console.log(`🔍 자동입력 필드 체크: ${fieldName}`, {
                 currentValue,
-                isEmpty: currentValue === undefined || currentValue === '',
+                isEmpty: currentValue === undefined || currentValue === "",
                 isAutoInput,
-                autoValueType: config.autoValueType
+                autoValueType: config.autoValueType,
               });
 
-              if (currentValue === undefined || currentValue === '') {
+              if (currentValue === undefined || currentValue === "") {
-                const autoValue = config.autoValueType === "custom" 
+                const autoValue =
+                  config.autoValueType === "custom"
                     ? config.customValue || ""
                     : generateAutoValue(config.autoValueType);
 
                 console.log("🔄 자동입력 필드 초기화:", {
                   fieldName,
                   autoValueType: config.autoValueType,
-                  autoValue
+                  autoValue,
                 });
 
                 updateFormData(fieldName, autoValue);
@@ -568,10 +625,14 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       );
     }
 
-    const { widgetType, label, placeholder, required, readonly, columnName } = comp;
+    const { widgetType, label: originalLabel, placeholder, required, readonly, columnName } = comp;
     const fieldName = columnName || comp.id;
     const currentValue = formData[fieldName] || "";
 
+    // 다국어 라벨 적용 (langKey가 있으면 번역 텍스트 사용)
+    const compLangKey = (comp as any).langKey;
+    const label = compLangKey && translations[compLangKey] ? translations[compLangKey] : originalLabel;
+
     // 스타일 적용
     const applyStyles = (element: React.ReactElement) => {
       if (!comp.style) return element;
@@ -598,7 +659,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
         // 자동입력 관련 처리
         const isAutoInput = config?.autoInput || false;
-        const autoValue = isAutoInput && config?.autoValueType
+        const autoValue =
+          isAutoInput && config?.autoValueType
             ? config.autoValueType === "custom"
               ? config.customValue || ""
               : generateAutoValue(config.autoValueType)
@@ -1085,8 +1147,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         const currentValue = getCurrentValue();
 
         // 화면 ID 추출 (URL에서)
-        const screenId = typeof window !== 'undefined' && window.location.pathname.includes('/screens/') 
+        const screenId =
-          ? parseInt(window.location.pathname.split('/screens/')[1]) 
+          typeof window !== "undefined" && window.location.pathname.includes("/screens/")
+            ? parseInt(window.location.pathname.split("/screens/")[1])
             : null;
 
         console.log("📁 InteractiveScreenViewer - File 위젯:", {
@@ -1151,7 +1214,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             if (uploadResult.success) {
               // console.log("📁 업로드 완료된 파일 데이터:", uploadResult.data);
 
-              setLocalFormData(prev => ({ ...prev, [fieldName]: uploadResult.data }));
+              setLocalFormData((prev) => ({ ...prev, [fieldName]: uploadResult.data }));
 
               // 외부 폼 데이터 변경 콜백 호출
               if (onFormDataChange) {
@@ -1174,7 +1237,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
         const clearFile = () => {
           const fieldName = widget.columnName || widget.id;
-          setLocalFormData(prev => ({ ...prev, [fieldName]: null }));
+          setLocalFormData((prev) => ({ ...prev, [fieldName]: null }));
 
           // 외부 폼 데이터 변경 콜백 호출
           if (onFormDataChange) {
@@ -1197,36 +1260,28 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
           return (
             <div className="mt-2 space-y-2">
-              <div className="text-sm font-medium text-foreground">
+              <div className="text-foreground text-sm font-medium">업로드된 파일 ({fileData.length}개)</div>
-                업로드된 파일 ({fileData.length}개)
-              </div>
               {fileData.map((fileInfo: any, index: number) => {
-                const isImage = fileInfo.type?.startsWith('image/');
+                const isImage = fileInfo.type?.startsWith("image/");
 
                 return (
-                  <div key={index} className="flex items-center gap-2 rounded border bg-muted p-2">
+                  <div key={index} className="bg-muted flex items-center gap-2 rounded border p-2">
-                    <div className="flex h-16 w-16 items-center justify-center rounded bg-muted/50">
+                    <div className="bg-muted/50 flex h-16 w-16 items-center justify-center rounded">
                       {isImage ? (
                         <div className="text-success text-xs font-medium">IMG</div>
                       ) : (
-                        <File className="h-8 w-8 text-muted-foreground" />
+                        <File className="text-muted-foreground h-8 w-8" />
                       )}
                     </div>
-                    <div className="flex-1 min-w-0">
+                    <div className="min-w-0 flex-1">
-                      <p className="text-sm font-medium text-foreground truncate">{fileInfo.name}</p>
+                      <p className="text-foreground truncate text-sm font-medium">{fileInfo.name}</p>
-                      <p className="text-xs text-muted-foreground">
+                      <p className="text-muted-foreground text-xs">{(fileInfo.size / 1024 / 1024).toFixed(2)} MB</p>
-                        {(fileInfo.size / 1024 / 1024).toFixed(2)} MB
+                      <p className="text-muted-foreground text-xs">{fileInfo.type || "알 수 없는 형식"}</p>
+                      <p className="text-muted-foreground/70 text-xs">
+                        업로드: {new Date(fileInfo.uploadedAt).toLocaleString("ko-KR")}
                       </p>
-                      <p className="text-xs text-muted-foreground">{fileInfo.type || '알 수 없는 형식'}</p>
-                      <p className="text-xs text-muted-foreground/70">업로드: {new Date(fileInfo.uploadedAt).toLocaleString('ko-KR')}</p>
                     </div>
-                    <Button
+                    <Button type="button" variant="ghost" size="sm" onClick={clearFile} className="h-8 w-8 p-0">
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={clearFile}
-                      className="h-8 w-8 p-0"
-                    >
                       <X className="h-4 w-4" />
                     </Button>
                   </div>
@@ -1250,45 +1305,45 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                 required={required}
                 multiple={config?.multiple}
                 accept={config?.accept}
-                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
+                className="absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
                 style={{ zIndex: 1 }}
               />
-              <div className={cn(
+              <div
+                className={cn(
                   "flex items-center justify-center rounded-lg border-2 border-dashed p-4 text-center transition-colors",
                   currentValue && currentValue.files && currentValue.files.length > 0
-                  ? 'border-success/30 bg-success/10' 
+                    ? "border-success/30 bg-success/10"
-                  : 'border-input bg-muted hover:border-input/80 hover:bg-muted/80',
+                    : "border-input bg-muted hover:border-input/80 hover:bg-muted/80",
-                readonly && 'cursor-not-allowed opacity-50',
+                  readonly && "cursor-not-allowed opacity-50",
-                !readonly && 'cursor-pointer'
+                  !readonly && "cursor-pointer",
-              )}>
+                )}
+              >
                 <div className="space-y-2">
                   {currentValue && currentValue.files && currentValue.files.length > 0 ? (
                     <>
                       <div className="flex items-center justify-center">
-                        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-success/20">
+                        <div className="bg-success/20 flex h-8 w-8 items-center justify-center rounded-full">
-                          <svg className="h-5 w-5 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <svg className="text-success h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                           </svg>
                         </div>
                       </div>
-                      <p className="text-sm font-medium text-success">
+                      <p className="text-success text-sm font-medium">
-                        {currentValue.totalCount === 1 
+                        {currentValue.totalCount === 1 ? "파일 선택됨" : `${currentValue.totalCount}개 파일 선택됨`}
-                          ? '파일 선택됨' 
-                          : `${currentValue.totalCount}개 파일 선택됨`}
                       </p>
-                      <p className="text-xs text-success/80">
+                      <p className="text-success/80 text-xs">
                         총 {(currentValue.totalSize / 1024 / 1024).toFixed(2)}MB
                       </p>
-                      <p className="text-xs text-success/80">클릭하여 다른 파일 선택</p>
+                      <p className="text-success/80 text-xs">클릭하여 다른 파일 선택</p>
                     </>
                   ) : (
                     <>
-                      <Upload className="mx-auto h-8 w-8 text-muted-foreground" />
+                      <Upload className="text-muted-foreground mx-auto h-8 w-8" />
-                      <p className="text-sm text-muted-foreground">
+                      <p className="text-muted-foreground text-sm">
-                        {config?.dragDrop ? '파일을 드래그하여 놓거나 클릭하여 선택' : '클릭하여 파일 선택'}
+                        {config?.dragDrop ? "파일을 드래그하여 놓거나 클릭하여 선택" : "클릭하여 파일 선택"}
                       </p>
                       {(config?.accept || config?.maxSize) && (
-                        <div className="text-xs text-muted-foreground space-y-1">
+                        <div className="text-muted-foreground space-y-1 text-xs">
                           {config.accept && <div>허용 형식: {config.accept}</div>}
                           {config.maxSize && <div>최대 크기: {config.maxSize}MB</div>}
                           {config.multiple && <div>다중 선택 가능</div>}
@@ -1302,7 +1357,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
             {/* 파일 미리보기 */}
             {renderFilePreview()}
-          </div>
+          </div>,
         );
       }
 
@@ -1310,7 +1365,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         const widget = comp as WidgetComponent;
         const config = widget.webTypeConfig as CodeTypeConfig | undefined;
 
-        console.log(`🔍 [InteractiveScreenViewer] Code 위젯 렌더링:`, {
+        console.log("🔍 [InteractiveScreenViewer] Code 위젯 렌더링:", {
           componentId: widget.id,
           columnName: widget.columnName,
           codeCategory: config?.codeCategory,
@@ -1344,7 +1399,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               onEvent={(event: string, data: any) => {
                 // console.log(`Code widget event: ${event}`, data);
               }}
-            />
+            />,
           );
         } catch (error) {
           // console.error("DynamicWebTypeRenderer 로딩 실패, 기본 Select 사용:", error);
@@ -1363,64 +1418,31 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               <SelectContent>
                 <SelectItem value="loading">로딩 중...</SelectItem>
               </SelectContent>
-            </Select>
+            </Select>,
           );
         }
       }
 
       case "entity": {
+        // DynamicWebTypeRenderer로 위임하여 EntitySearchInputWrapper 사용
         const widget = comp as WidgetComponent;
-        const config = widget.webTypeConfig as EntityTypeConfig | undefined;
+        return applyStyles(
-
+          <DynamicWebTypeRenderer
-        console.log("🏢 InteractiveScreenViewer - Entity 위젯:", {
+            webType="entity"
-          componentId: widget.id,
+            config={widget.webTypeConfig}
-          widgetType: widget.widgetType,
+            props={{
-          config,
+              component: widget,
-          appliedSettings: {
+              value: currentValue,
-            entityName: config?.entityName,
+              onChange: (value: any) => updateFormData(fieldName, value),
-            displayField: config?.displayField,
+              onFormDataChange: updateFormData,
-            valueField: config?.valueField,
+              formData: formData,
-            multiple: config?.multiple,
+              readonly: readonly,
-            defaultValue: config?.defaultValue,
+              required: required,
-          },
+              placeholder: widget.placeholder || "엔티티를 선택하세요",
-        });
+              isInteractive: true,
-
+              className: "w-full h-full",
-        const finalPlaceholder = config?.placeholder || "엔티티를 선택하세요...";
-        const defaultOptions = [
-          { label: "사용자", value: "user" },
-          { label: "제품", value: "product" },
-          { label: "주문", value: "order" },
-          { label: "카테고리", value: "category" },
-        ];
-
-        return (
-          <Select
-            value={currentValue || config?.defaultValue || ""}
-            onValueChange={(value) => updateFormData(fieldName, value)}
-            disabled={readonly}
-            required={required}
-          >
-            <SelectTrigger 
-              className="w-full"
-            style={{ height: "100%" }}
-              style={{
-                ...comp.style,
-                width: "100%",
-                height: "100%",
             }}
-            >
+          />,
-              <SelectValue placeholder={finalPlaceholder} />
-            </SelectTrigger>
-            <SelectContent>
-              {defaultOptions.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {config?.displayFormat
-                    ? config.displayFormat.replace("{label}", option.label).replace("{value}", option.value)
-                    : option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>,
         );
       }
 
@@ -1505,22 +1527,22 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           // console.log("💾 기존 방식으로 저장 - currentFormData:", currentFormData);
 
           // formData 유효성 체크를 완화 (빈 객체라도 위젯이 있으면 저장 진행)
-          const hasWidgets = allComponents.some(comp => comp.type === 'widget');
+          const hasWidgets = allComponents.some((comp) => comp.type === "widget");
           if (!hasWidgets) {
             alert("저장할 입력 컴포넌트가 없습니다.");
             return;
           }
 
           // 필수 항목 검증
-          const requiredFields = allComponents.filter(c => c.required && (c.columnName || c.id));
+          const requiredFields = allComponents.filter((c) => c.required && (c.columnName || c.id));
-          const missingFields = requiredFields.filter(field => {
+          const missingFields = requiredFields.filter((field) => {
             const fieldName = field.columnName || field.id;
             const value = currentFormData[fieldName];
             return !value || value.toString().trim() === "";
           });
 
           if (missingFields.length > 0) {
-            const fieldNames = missingFields.map(f => f.label || f.columnName || f.id).join(", ");
+            const fieldNames = missingFields.map((f) => f.label || f.columnName || f.id).join(", ");
             alert(`다음 필수 항목을 입력해주세요: ${fieldNames}`);
             return;
           }
@@ -1535,9 +1557,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             const mappedData: Record<string, any> = {};
 
             // 입력 가능한 컴포넌트에서 데이터 수집
-            allComponents.forEach(comp => {
+            allComponents.forEach((comp) => {
               // 위젯 컴포넌트이고 입력 가능한 타입인 경우
-              if (comp.type === 'widget') {
+              if (comp.type === "widget") {
                 const widget = comp as WidgetComponent;
                 const fieldName = widget.columnName || widget.id;
                 let value = currentFormData[fieldName];
@@ -1546,12 +1568,14 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                   widgetType: widget.widgetType,
                   formDataValue: value,
                   hasWebTypeConfig: !!widget.webTypeConfig,
-                  config: widget.webTypeConfig
+                  config: widget.webTypeConfig,
                 });
 
                 // 자동입력 필드인 경우에만 값이 없을 때 생성
-                if ((widget.widgetType === 'text' || widget.widgetType === 'email' || widget.widgetType === 'tel') && 
+                if (
-                    widget.webTypeConfig) {
+                  (widget.widgetType === "text" || widget.widgetType === "email" || widget.widgetType === "tel") &&
+                  widget.webTypeConfig
+                ) {
                   const config = widget.webTypeConfig as TextTypeConfig;
                   const isAutoInput = config?.autoInput || false;
 
@@ -1559,24 +1583,25 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                     isAutoInput,
                     autoValueType: config?.autoValueType,
                     hasValue: !!value,
-                    value
+                    value,
                   });
 
-                  if (isAutoInput && config?.autoValueType && (!value || value === '')) {
+                  if (isAutoInput && config?.autoValueType && (!value || value === "")) {
                     // 자동입력이고 값이 없을 때만 생성
-                    value = config.autoValueType === "custom" 
+                    value =
+                      config.autoValueType === "custom"
                         ? config.customValue || ""
                         : generateAutoValue(config.autoValueType);
 
                     console.log("💾 자동입력 값 저장 (값이 없어서 생성):", {
                       fieldName,
                       autoValueType: config.autoValueType,
-                      generatedValue: value
+                      generatedValue: value,
                     });
                   } else if (isAutoInput && value) {
                     console.log("💾 자동입력 필드지만 기존 값 유지:", {
                       fieldName,
-                      existingValue: value
+                      existingValue: value,
                     });
                   } else if (!isAutoInput) {
                     // console.log(`📝 일반 입력 필드: ${fieldName} = "${value}"`);
@@ -1601,17 +1626,17 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               매핑된데이터: mappedData,
               화면정보: screenInfo,
               전체컴포넌트수: allComponents.length,
-              위젯컴포넌트수: allComponents.filter(c => c.type === 'widget').length,
+              위젯컴포넌트수: allComponents.filter((c) => c.type === "widget").length,
             });
 
             // 각 컴포넌트의 상세 정보 로그
             // console.log("🔍 컴포넌트별 데이터 수집 상세:");
-            allComponents.forEach(comp => {
+            allComponents.forEach((comp) => {
-              if (comp.type === 'widget') {
+              if (comp.type === "widget") {
                 const widget = comp as WidgetComponent;
                 const fieldName = widget.columnName || widget.id;
                 const value = currentFormData[fieldName];
-                const hasValue = value !== undefined && value !== null && value !== '';
+                const hasValue = value !== undefined && value !== null && value !== "";
                 // console.log(`  - ${fieldName} (${widget.widgetType}): "${value}" (값있음: ${hasValue}, 컬럼명: ${widget.columnName})`);
               }
             });
@@ -1622,9 +1647,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             }
 
             // 테이블명 결정 (화면 정보에서 가져오거나 첫 번째 컴포넌트의 테이블명 사용)
-            const tableName = screenInfo.tableName || 
+            const tableName =
-                             allComponents.find(c => c.columnName)?.tableName ||
+              screenInfo.tableName || allComponents.find((c) => c.columnName)?.tableName || "dynamic_form_data"; // 기본값
-                             "dynamic_form_data"; // 기본값
 
             // 🆕 자동으로 작성자 정보 추가 (user.userId가 확실히 있음)
             const writerValue = user.userId;
@@ -1665,7 +1689,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               // 저장 후 데이터 초기화 (선택사항)
               if (onFormDataChange) {
                 const resetData: Record<string, any> = {};
-                Object.keys(formData).forEach(key => {
+                Object.keys(formData).forEach((key) => {
                   resetData[key] = "";
                 });
                 onFormDataChange(resetData);
@@ -1679,7 +1703,6 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           }
         };
 
-
         // 삭제 액션
         const handleDeleteAction = async () => {
           const confirmMessage = config?.confirmMessage || "정말로 삭제하시겠습니까?";
@@ -1697,9 +1720,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           }
 
           // 테이블명 결정
-          const tableName = screenInfo?.tableName || 
+          const tableName =
-                           allComponents.find(c => c.columnName)?.tableName ||
+            screenInfo?.tableName || allComponents.find((c) => c.columnName)?.tableName || "unknown_table";
-                           "unknown_table";
 
           if (!tableName || tableName === "unknown_table") {
             alert("테이블 정보가 없어 삭제할 수 없습니다.");
@@ -1709,7 +1731,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           try {
             // console.log("🗑️ 삭제 실행:", { recordId, tableName, formData });
 
-            const result = await dynamicFormApi.deleteFormDataFromTable(recordId, tableName);
+            // screenId 전달하여 제어관리 실행 가능하도록 함
+            const result = await dynamicFormApi.deleteFormDataFromTable(recordId, tableName, screenInfo?.id);
 
             if (result.success) {
               alert("삭제되었습니다.");
@@ -1718,7 +1741,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               // 삭제 후 폼 초기화
               if (onFormDataChange) {
                 const resetData: Record<string, any> = {};
-                Object.keys(formData).forEach(key => {
+                Object.keys(formData).forEach((key) => {
                   resetData[key] = "";
                 });
                 onFormDataChange(resetData);
@@ -1770,7 +1793,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         const handleSearchAction = () => {
           // console.log("🔍 검색 실행:", formData);
           // 검색 로직
-          const searchTerms = Object.values(formData).filter(v => v && v.toString().trim());
+          const searchTerms = Object.values(formData).filter((v) => v && v.toString().trim());
           if (searchTerms.length === 0) {
             alert("검색할 내용을 입력해주세요.");
           } else {
@@ -1783,7 +1806,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           if (confirm("모든 입력을 초기화하시겠습니까?")) {
             if (onFormDataChange) {
               const resetData: Record<string, any> = {};
-              Object.keys(formData).forEach(key => {
+              Object.keys(formData).forEach((key) => {
                 resetData[key] = "";
               });
               onFormDataChange(resetData);
@@ -1813,12 +1836,14 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             // console.log("🔄 모달 내부에서 닫기 - 모달 닫기 시도");
 
             // 모달의 닫기 버튼을 찾아서 클릭
-            const modalCloseButton = document.querySelector('[role="dialog"] button[aria-label*="Close"], [role="dialog"] button[data-dismiss="modal"], [role="dialog"] .dialog-close');
+            const modalCloseButton = document.querySelector(
+              '[role="dialog"] button[aria-label*="Close"], [role="dialog"] button[data-dismiss="modal"], [role="dialog"] .dialog-close',
+            );
             if (modalCloseButton) {
               (modalCloseButton as HTMLElement).click();
             } else {
               // ESC 키 이벤트 발생시키기
-              const escEvent = new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, which: 27 });
+              const escEvent = new KeyboardEvent("keydown", { key: "Escape", keyCode: 27, which: 27 });
               document.dispatchEvent(escEvent);
             }
           } else if (isInPopup) {
@@ -1862,7 +1887,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             console.log("🎯 화면으로 이동:", {
               screenId: config.navigateScreenId,
               target: config.navigateTarget || "_self",
-              path: screenPath
+              path: screenPath,
             });
 
             if (config.navigateTarget === "_blank") {
@@ -1874,7 +1899,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             // URL로 이동
             console.log("🔗 URL로 이동:", {
               url: config.navigateUrl,
-              target: config.navigateTarget || "_self"
+              target: config.navigateTarget || "_self",
             });
 
             if (config.navigateTarget === "_blank") {
@@ -1886,7 +1911,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             console.log("🔗 네비게이션 정보가 설정되지 않았습니다:", {
               navigateType,
               hasUrl: !!config?.navigateUrl,
-              hasScreenId: !!config?.navigateScreenId
+              hasScreenId: !!config?.navigateScreenId,
             });
           }
         };
@@ -1909,6 +1934,13 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           }
         };
 
+        // 버튼 텍스트 다국어 적용 (componentConfig.langKey 확인)
+        const buttonLangKey = (widget as any).componentConfig?.langKey;
+        const buttonText =
+          buttonLangKey && translations[buttonLangKey]
+            ? translations[buttonLangKey]
+            : (widget as any).componentConfig?.text || label || "버튼";
+
         // 커스텀 색상이 있으면 Tailwind 클래스 대신 직접 스타일 적용
         const hasCustomColors = config?.backgroundColor || config?.textColor;
 
@@ -1916,10 +1948,10 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           <button
             onClick={handleButtonClick}
             disabled={readonly}
-            className={`w-full rounded-md px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${
+            className={`focus:ring-ring w-full rounded-md px-3 py-2 text-sm font-medium transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none disabled:opacity-50 ${
               hasCustomColors
-                ? '' 
+                ? ""
-                : 'bg-background border border-foreground text-foreground shadow-xs hover:bg-muted/50'
+                : "bg-background border-foreground text-foreground hover:bg-muted/50 border shadow-xs"
             }`}
             style={{
               height: "100%",
@@ -1928,8 +1960,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               borderColor: config?.borderColor,
             }}
           >
-            {label || "버튼"}
+            {buttonText}
-          </button>
+          </button>,
         );
       }
 
@@ -1957,24 +1989,25 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       componentId: fileComponent.id,
       currentUploadedFiles: fileComponent.uploadedFiles?.length || 0,
       hasOnFormDataChange: !!onFormDataChange,
-      userInfo: user ? { userId: user.userId, companyCode: user.companyCode } : "no user"
+      userInfo: user ? { userId: user.userId, companyCode: user.companyCode } : "no user",
     });
 
-    const handleFileUpdate = useCallback(async (updates: Partial<FileComponent>) => {
+    const handleFileUpdate = useCallback(
+      async (updates: Partial<FileComponent>) => {
         // 실제 화면에서는 파일 업데이트를 처리
         console.log("📎 InteractiveScreenViewer - 파일 컴포넌트 업데이트:", {
           updates,
           hasUploadedFiles: !!updates.uploadedFiles,
           uploadedFilesCount: updates.uploadedFiles?.length || 0,
-        hasOnFormDataChange: !!onFormDataChange
+          hasOnFormDataChange: !!onFormDataChange,
         });
 
         if (updates.uploadedFiles && onFormDataChange) {
           const fieldName = fileComponent.columnName || fileComponent.id;
 
           // attach_file_info 테이블 구조에 맞는 데이터 생성
-        const fileInfoForDB = updates.uploadedFiles.map(file => ({
+          const fileInfoForDB = updates.uploadedFiles.map((file) => ({
-          objid: file.objid.replace('temp_', ''), // temp_ 제거
+            objid: file.objid.replace("temp_", ""), // temp_ 제거
             target_objid: "",
             saved_file_name: file.savedFileName,
             real_file_name: file.realFileName,
@@ -1987,7 +2020,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             regdate: file.regdate,
             status: file.status,
             parent_target_objid: "",
-          company_code: file.companyCode
+            company_code: file.companyCode,
           }));
 
           // console.log("💾 attach_file_info 형태로 변환된 데이터:", fileInfoForDB);
@@ -1996,12 +2029,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           const formDataValue = {
             fileCount: updates.uploadedFiles.length,
             docType: fileComponent.fileConfig.docType,
-          files: updates.uploadedFiles.map(file => ({
+            files: updates.uploadedFiles.map((file) => ({
               objid: file.objid,
               realFileName: file.realFileName,
               fileSize: file.fileSize,
-            status: file.status
+              status: file.status,
-          }))
+            })),
           };
 
           // console.log("📝 FormData 저장값:", { fieldName, formDataValue });
@@ -2009,14 +2042,15 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
           // TODO: 실제 API 연동 시 attach_file_info 테이블에 저장
           // await saveFilesToDatabase(fileInfoForDB);
-        
         } else {
           console.warn("⚠️ 파일 업데이트 실패:", {
             hasUploadedFiles: !!updates.uploadedFiles,
-          hasOnFormDataChange: !!onFormDataChange
+            hasOnFormDataChange: !!onFormDataChange,
           });
         }
-    }, [fileComponent, onFormDataChange]);
+      },
+      [fileComponent, onFormDataChange],
+    );
 
     return (
       <div className="h-full w-full">
@@ -2071,7 +2105,10 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     (component.label || component.style?.labelText) &&
     !templateTypes.includes(component.type); // 템플릿 컴포넌트는 라벨 표시 안함
 
-  const labelText = component.style?.labelText || component.label || "";
+  // 다국어 라벨 텍스트 결정 (langKey가 있으면 번역 텍스트 사용)
+  const langKey = (component as any).langKey;
+  const originalLabelText = component.style?.labelText || component.label || "";
+  const labelText = langKey && translations[langKey] ? translations[langKey] : originalLabelText;
 
   // 라벨 표시 여부 로그 (디버깅용)
   if (component.type === "widget") {
@@ -2080,6 +2117,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       hideLabel,
       shouldShowLabel,
       labelText,
+      langKey,
+      hasTranslation: !!translations[langKey],
     });
   }
 
@@ -2094,7 +2133,6 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     marginBottom: component.style?.labelMarginBottom || "4px",
   };
 
-
   // 상위에서 라벨을 표시한 경우, 컴포넌트 내부에서는 라벨을 숨김
   const componentForRendering = shouldShowLabel
     ? {
@@ -2115,23 +2153,27 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             <TableOptionsToolbar />
 
             {/* 메인 컨텐츠 */}
-          <div className="h-full flex-1" style={{ width: '100%' }}>
+            <div className="h-full flex-1" style={{ width: "100%" }}>
               {/* 라벨이 있는 경우 표시 (데이터 테이블 제외) */}
               {shouldShowLabel && (
-              <label className="mb-2 block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                <label className="mb-2 block text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                   {labelText}
-                {(component.required || component.componentConfig?.required) && <span className="ml-1 text-destructive">*</span>}
+                  {(component.required || component.componentConfig?.required) && (
+                    <span className="text-destructive ml-1">*</span>
+                  )}
                 </label>
               )}
 
               {/* 실제 위젯 - 상위에서 라벨을 렌더링했으므로 자식은 라벨 숨김 */}
-          <div className="h-full" style={{ width: '100%', height: '100%' }}>{renderInteractiveWidget(componentForRendering)}</div>
+              <div className="h-full" style={{ width: "100%", height: "100%" }}>
+                {renderInteractiveWidget(componentForRendering)}
+              </div>
             </div>
           </div>
 
           {/* 개선된 검증 패널 (선택적 표시) */}
           {showValidationPanel && enhancedValidation && (
-          <div className="absolute bottom-4 right-4 z-50">
+            <div className="absolute right-4 bottom-4 z-50">
               <FormValidationIndicator
                 validationState={enhancedValidation.validationState}
                 saveState={enhancedValidation.saveState}
@@ -2149,11 +2191,14 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           )}
 
           {/* 모달 화면 */}
-        <Dialog open={!!popupScreen} onOpenChange={() => {
+          <Dialog
+            open={!!popupScreen}
+            onOpenChange={() => {
               setPopupScreen(null);
               setPopupFormData({}); // 팝업 닫을 때 formData도 초기화
-        }}>
+            }}
-          <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden p-0">
+          >
+            <DialogContent className="max-h-[90vh] max-w-4xl overflow-hidden p-0">
               <DialogHeader className="px-6 pt-4 pb-2">
                 <DialogTitle>{popupScreen?.title || "상세 정보"}</DialogTitle>
               </DialogHeader>
@@ -2164,13 +2209,16 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                     <div className="text-muted-foreground">화면을 불러오는 중...</div>
                   </div>
                 ) : popupLayout.length > 0 ? (
-                <div className="relative bg-background border rounded" style={{ 
+                  <div
+                    className="bg-background relative rounded border"
+                    style={{
                       width: popupScreenResolution ? `${popupScreenResolution.width}px` : "100%",
                       height: popupScreenResolution ? `${popupScreenResolution.height}px` : "400px",
                       minHeight: "400px",
                       position: "relative",
-                  overflow: "hidden"
+                      overflow: "hidden",
-                }}>
+                    }}
+                  >
                     {/* 팝업에서도 실제 위치와 크기로 렌더링 */}
                     {popupLayout.map((popupComponent) => (
                       <div
@@ -2196,12 +2244,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                               fieldName,
                               value,
                               valueType: typeof value,
-                            prevFormData: popupFormData
+                              prevFormData: popupFormData,
                             });
 
-                          setPopupFormData(prev => ({ 
+                            setPopupFormData((prev) => ({
                               ...prev,
-                            [fieldName]: value 
+                              [fieldName]: value,
                             }));
                           }}
                         />

frontend/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -365,6 +365,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
           isInteractive={true}
           formData={formData}
           originalData={originalData || undefined}
+          initialData={(originalData && Object.keys(originalData).length > 0) ? originalData : formData} // 🆕 originalData가 있으면 사용, 없으면 formData 사용 (생성 모드에서 부모 데이터 전달)
           onFormDataChange={handleFormDataChange}
           screenId={screenInfo?.id}
           tableName={screenInfo?.tableName}

frontend/components/screen/ScreenGroupTreeView.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect } from "react";
 import { cn } from "@/lib/utils";
 import {
   ChevronRight,
@@ -16,8 +16,6 @@ import {
   Copy,
   FolderTree,
   Loader2,
-  RefreshCw,
-  Building2,
 } from "lucide-react";
 import { ScreenDefinition } from "@/types/screen";
 import {
@@ -26,17 +24,9 @@ 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,
@@ -98,7 +88,6 @@ 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 {
@@ -118,7 +107,6 @@ export function ScreenGroupTreeView({
   onGroupSelect,
   onScreenSelectInGroup,
   companyCode,
-  searchTerm = "",
 }: ScreenGroupTreeViewProps) {
   const [groups, setGroups] = useState<ScreenGroup[]>([]);
   const [loading, setLoading] = useState(true);
@@ -167,25 +155,6 @@ 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();
@@ -273,160 +242,6 @@ 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();
@@ -781,191 +596,6 @@ 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 {
@@ -1005,8 +635,8 @@ export function ScreenGroupTreeView({
 
   return (
     <div className="h-full flex flex-col overflow-hidden">
-      {/* 그룹 추가 & 동기화 버튼 */}
+      {/* 그룹 추가 버튼 */}
-      <div className="flex-shrink-0 border-b p-2 space-y-2">
+      <div className="flex-shrink-0 border-b p-2">
         <Button
           onClick={handleAddGroup}
           variant="outline"
@@ -1016,39 +646,20 @@ 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>
-        )}
-        
         {/* 그룹화된 화면들 (대분류만 먼저 렌더링) */}
-        {getFilteredGroups
+        {groups
           .filter((g) => !(g as any).parent_group_id) // 대분류만 (parent_group_id가 null)
           .map((group) => {
           const groupId = String(group.id);
-          const isExpanded = expandedGroups.has(groupId) || shouldAutoExpandForSearch.has(group.id); // 검색 시 상위 그룹만 자동 확장
+          const isExpanded = expandedGroups.has(groupId);
           const groupScreens = getScreensInGroup(group.id);
-          const isMatching = isGroupMatchingSearch(group.group_name); // 검색어 일치 여부
             
-            // 하위 그룹들 찾기 (필터링된 그룹에서만)
+            // 하위 그룹들 찾기
-            const childGroups = getFilteredGroups.filter((g) => (g as any).parent_group_id === group.id);
+            const childGroups = groups.filter((g) => (g as any).parent_group_id === group.id);
 
           return (
             <div key={groupId} className="mb-1">
@@ -1056,8 +667,7 @@ 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)}
@@ -1072,7 +682,7 @@ export function ScreenGroupTreeView({
                 ) : (
                   <Folder className="h-4 w-4 shrink-0 text-amber-500" />
                 )}
-                <span className={cn("truncate flex-1", isMatching && "font-medium text-primary/80")}>{group.group_name}</span>
+                <span className="truncate flex-1">{group.group_name}</span>
                 <Badge variant="secondary" className="text-xs">
                   {groupScreens.length}
                 </Badge>
@@ -1109,12 +719,11 @@ 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) || shouldAutoExpandForSearch.has(childGroup.id); // 검색 시 상위 그룹만 자동 확장
+                    const isChildExpanded = expandedGroups.has(childGroupId);
                     const childScreens = getScreensInGroup(childGroup.id);
-                    const isChildMatching = isGroupMatchingSearch(childGroup.group_name);
                     
-                    // 손자 그룹들 (3단계) - 필터링된 그룹에서만
+                    // 손자 그룹들 (3단계)
-                    const grandChildGroups = getFilteredGroups.filter((g) => (g as any).parent_group_id === childGroup.id);
+                    const grandChildGroups = groups.filter((g) => (g as any).parent_group_id === childGroup.id);
 
                     return (
                       <div key={childGroupId}>
@@ -1122,8 +731,7 @@ 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)}
@@ -1138,7 +746,7 @@ export function ScreenGroupTreeView({
                           ) : (
                             <Folder className="h-3 w-3 shrink-0 text-blue-500" />
                           )}
-                          <span className={cn("truncate flex-1", isChildMatching && "font-medium text-primary/80")}>{childGroup.group_name}</span>
+                          <span className="truncate flex-1">{childGroup.group_name}</span>
                           <Badge variant="secondary" className="text-[10px] h-4">
                             {childScreens.length}
                           </Badge>
@@ -1174,9 +782,8 @@ 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) || shouldAutoExpandForSearch.has(grandChild.id); // 검색 시 상위 그룹만 자동 확장
+                              const isGrandExpanded = expandedGroups.has(grandChildId);
                               const grandScreens = getScreensInGroup(grandChild.id);
-                              const isGrandMatching = isGroupMatchingSearch(grandChild.group_name);
 
                               return (
                                 <div key={grandChildId}>
@@ -1184,8 +791,7 @@ 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)}
@@ -1200,7 +806,7 @@ export function ScreenGroupTreeView({
                                     ) : (
                                       <Folder className="h-3 w-3 shrink-0 text-green-500" />
                                     )}
-                                    <span className={cn("truncate flex-1", isGrandMatching && "font-medium text-primary/80")}>{grandChild.group_name}</span>
+                                    <span className="truncate flex-1">{grandChild.group_name}</span>
                                     <Badge variant="outline" className="text-[10px] h-4">
                                       {grandScreens.length}
                                     </Badge>
@@ -1853,222 +1459,6 @@ 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/ScreenSettingModal.tsx

@@ -416,10 +416,6 @@ export function ScreenSettingModal({
                     <Database className="h-3 w-3" />
                     개요
                   </TabsTrigger>
-                  <TabsTrigger value="table-setting" className="gap-1 text-xs px-2" disabled={!mainTable}>
-                    <Settings2 className="h-3 w-3" />
-                    테이블 설정
-                  </TabsTrigger>
                   <TabsTrigger value="control-management" className="gap-1 text-xs px-2">
                     <Zap className="h-3 w-3" />
                     제어 관리
@@ -470,22 +466,7 @@ export function ScreenSettingModal({
                 />
               </TabsContent>
 
-              {/* 탭 2: 테이블 설정 */}
+              {/* 탭 2: 제어 관리 */}
-              <TabsContent value="table-setting" className="mt-0 min-h-0 flex-1 overflow-hidden p-0">
-                {mainTable && (
-                  <TableSettingModal
-                    isOpen={true}
-                    onClose={() => {}} // 탭에서는 닫기 불필요
-                    tableName={mainTable}
-                    tableLabel={mainTableLabel}
-                    screenId={currentScreenId}
-                    onSaveSuccess={handleRefresh}
-                    isEmbedded={true} // 임베드 모드
-                  />
-                )}
-              </TabsContent>
-
-              {/* 탭 3: 제어 관리 */}
               <TabsContent value="control-management" className="mt-0 min-h-0 flex-1 overflow-auto p-3">
                 <ControlManagementTab
                   screenId={currentScreenId}
@@ -2217,6 +2198,17 @@ function OverviewTab({
             <Database className="h-4 w-4 text-blue-500" />
             메인 테이블
           </h3>
+          {mainTable && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-7 gap-1 text-xs"
+              onClick={() => onOpenTableSetting?.(mainTable, mainTableLabel)}
+            >
+              <Settings2 className="h-3 w-3" />
+              테이블 설정
+            </Button>
+          )}
         </div>
         {mainTable ? (
           <TableColumnAccordion 
@@ -3057,7 +3049,6 @@ interface ButtonControlInfo {
   // 버튼 스타일
   backgroundColor?: string;
   textColor?: string;
-  borderRadius?: string;
   // 모달/네비게이션 관련
   modalScreenId?: number;
   navigateScreenId?: number;
@@ -3224,7 +3215,6 @@ function ControlManagementTab({
                 // 버튼 스타일 (webTypeConfig 우선)
                 backgroundColor: webTypeConfig.backgroundColor || config.backgroundColor || style.backgroundColor,
                 textColor: webTypeConfig.textColor || config.textColor || style.color || style.labelColor,
-                borderRadius: webTypeConfig.borderRadius || config.borderRadius || style.borderRadius,
                 // 모달/네비게이션 관련 (화면 디자이너는 targetScreenId 사용)
                 modalScreenId: action.targetScreenId || action.modalScreenId,
                 navigateScreenId: action.navigateScreenId || action.targetScreenId,
@@ -3537,11 +3527,6 @@ function ControlManagementTab({
               comp.style.color = values.textColor;
               comp.style.labelColor = values.textColor;
             }
-            if (values.borderRadius !== undefined) {
-              comp.webTypeConfig.borderRadius = values.borderRadius;
-              comp.componentConfig.borderRadius = values.borderRadius;
-              comp.style.borderRadius = values.borderRadius;
-            }
             
             // 액션 타입 업데이트
             if (values.actionType) {
@@ -3750,7 +3735,6 @@ function ControlManagementTab({
                 const currentLabel = editedValues[btn.id]?.label ?? btn.label;
                 const currentBgColor = editedValues[btn.id]?.backgroundColor ?? btn.backgroundColor ?? "#3b82f6";
                 const currentTextColor = editedValues[btn.id]?.textColor ?? btn.textColor ?? "#ffffff";
-                const currentBorderRadius = editedValues[btn.id]?.borderRadius ?? btn.borderRadius ?? "4px";
                 
                 return (
                 <div key={btn.id} className="py-3 px-1">
@@ -3758,11 +3742,10 @@ function ControlManagementTab({
                   <div className="flex items-center gap-3 mb-3">
                     {/* 버튼 프리뷰 */}
                     <div
-                      className="flex items-center justify-center px-3 py-1.5 text-xs font-medium min-w-[60px] shrink-0"
+                      className="flex items-center justify-center px-3 py-1.5 rounded text-xs font-medium min-w-[60px] shrink-0"
                       style={{
                         backgroundColor: currentBgColor,
                         color: currentTextColor,
-                        borderRadius: currentBorderRadius,
                       }}
                     >
                       {currentLabel || "버튼"}
@@ -3887,34 +3870,6 @@ function ControlManagementTab({
                       </div>
                     </div>
 
-                    {/* 버튼 모서리 (borderRadius) */}
-                    <div className="grid grid-cols-[80px_1fr] items-center gap-2">
-                      <Label className="text-xs text-muted-foreground">모서리</Label>
-                      <div className="flex items-center gap-2">
-                        <Select
-                          value={editedValues[btn.id]?.borderRadius ?? btn.borderRadius ?? "4px"}
-                          onValueChange={(val) => setEditedValues(prev => ({
-                            ...prev,
-                            [btn.id]: { ...prev[btn.id], borderRadius: val }
-                          }))}
-                        >
-                          <SelectTrigger className="h-7 w-[100px] text-xs">
-                            <SelectValue placeholder="선택" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="0px" className="text-xs">없음 (0px)</SelectItem>
-                            <SelectItem value="2px" className="text-xs">약간 (2px)</SelectItem>
-                            <SelectItem value="4px" className="text-xs">기본 (4px)</SelectItem>
-                            <SelectItem value="6px" className="text-xs">둥글게 (6px)</SelectItem>
-                            <SelectItem value="8px" className="text-xs">더 둥글게 (8px)</SelectItem>
-                            <SelectItem value="12px" className="text-xs">많이 (12px)</SelectItem>
-                            <SelectItem value="9999px" className="text-xs">원형</SelectItem>
-                          </SelectContent>
-                        </Select>
-                        <span className="text-[10px] text-muted-foreground">버튼 모서리 둥글기</span>
-                      </div>
-                    </div>
-
                     {/* 확인 메시지 설정 (save/delete 액션에서만 표시) */}
                     {((editedValues[btn.id]?.actionType || btn.actionType) === "save" ||
                       (editedValues[btn.id]?.actionType || btn.actionType) === "delete") && (

frontend/components/screen/TableSettingModal.tsx

@@ -129,7 +129,6 @@ interface TableSettingModalProps {
   columns?: ColumnInfo[];
   filterColumns?: string[];
   onSaveSuccess?: () => void;
-  isEmbedded?: boolean; // 탭 안에 임베드 모드로 표시
 }
 
 // 검색 가능한 Select 컴포넌트
@@ -257,7 +256,6 @@ export function TableSettingModal({
   columns = [],
   filterColumns = [],
   onSaveSuccess,
-  isEmbedded = false,
 }: TableSettingModalProps) {
   const [activeTab, setActiveTab] = useState("columns");
   const [loading, setLoading] = useState(false);
@@ -306,19 +304,9 @@ export function TableSettingModal({
         // 초기 편집 상태 설정
         const initialEdits: Record<string, Partial<ColumnTypeInfo>> = {};
         columnsData.forEach((col) => {
-          // referenceTable이 설정되어 있으면 inputType은 entity여야 함
-          let effectiveInputType = col.inputType || "direct";
-          if (col.referenceTable && effectiveInputType !== "entity") {
-            effectiveInputType = "entity";
-          }
-          // codeCategory/codeValue가 설정되어 있으면 inputType은 code여야 함
-          if (col.codeCategory && effectiveInputType !== "code") {
-            effectiveInputType = "code";
-          }
-          
           initialEdits[col.columnName] = {
             displayName: col.displayName,
-            inputType: effectiveInputType,
+            inputType: col.inputType || "direct",
             referenceTable: col.referenceTable,
             referenceColumn: col.referenceColumn,
             displayColumn: col.displayColumn,
@@ -355,10 +343,10 @@ export function TableSettingModal({
     try {
       // 모든 화면 조회
       const screensResponse = await screenApi.getScreens({ size: 1000 });
-      if (screensResponse.data) {
+      if (screensResponse.items) {
         const usingScreens: ScreenUsingTable[] = [];
         
-        screensResponse.data.forEach((screen: any) => {
+        screensResponse.items.forEach((screen: any) => {
           // 메인 테이블로 사용하는 경우
           if (screen.tableName === tableName) {
             usingScreens.push({
@@ -430,35 +418,6 @@ export function TableSettingModal({
       },
     }));
     
-    // 입력 타입 변경 시 관련 필드 초기화
-    if (field === "inputType") {
-      // 엔티티가 아닌 다른 타입으로 변경하면 참조 설정 초기화
-      if (value !== "entity") {
-        setEditedColumns((prev) => ({
-          ...prev,
-          [columnName]: {
-            ...prev[columnName],
-            inputType: value,
-            referenceTable: "",
-            referenceColumn: "",
-            displayColumn: "",
-          },
-        }));
-      }
-      // 코드가 아닌 다른 타입으로 변경하면 코드 설정 초기화
-      if (value !== "code") {
-        setEditedColumns((prev) => ({
-          ...prev,
-          [columnName]: {
-            ...prev[columnName],
-            inputType: value,
-            codeCategory: "",
-            codeValue: "",
-          },
-        }));
-      }
-    }
-    
     // 참조 테이블 변경 시 참조 컬럼 초기화
     if (field === "referenceTable") {
       setEditedColumns((prev) => ({
@@ -494,17 +453,7 @@ export function TableSettingModal({
         // detailSettings 처리 (Entity 타입인 경우)
         let finalDetailSettings = mergedColumn.detailSettings || "";
 
-        // referenceTable이 설정되어 있으면 inputType을 entity로 자동 설정
+        if (mergedColumn.inputType === "entity" && mergedColumn.referenceTable) {
-        let currentInputType = (mergedColumn.inputType || "") as string;
-        if (mergedColumn.referenceTable && currentInputType !== "entity") {
-          currentInputType = "entity";
-        }
-        // codeCategory가 설정되어 있으면 inputType을 code로 자동 설정
-        if (mergedColumn.codeCategory && currentInputType !== "code") {
-          currentInputType = "code";
-        }
-
-        if (currentInputType === "entity" && mergedColumn.referenceTable) {
           // 기존 detailSettings를 파싱하거나 새로 생성
           let existingSettings: Record<string, unknown> = {};
           if (typeof mergedColumn.detailSettings === "string" && mergedColumn.detailSettings.trim().startsWith("{")) {
@@ -530,7 +479,7 @@ export function TableSettingModal({
         }
 
         // Code 타입인 경우 hierarchyRole을 detailSettings에 포함
-        if (currentInputType === "code" && (mergedColumn as any).hierarchyRole) {
+        if (mergedColumn.inputType === "code" && (mergedColumn as any).hierarchyRole) {
           let existingSettings: Record<string, unknown> = {};
           if (typeof finalDetailSettings === "string" && finalDetailSettings.trim().startsWith("{")) {
             try {
@@ -553,7 +502,7 @@ export function TableSettingModal({
         const columnSetting: ColumnSettings = {
           columnName: columnName,
           columnLabel: mergedColumn.displayName || originalColumn.displayName || "",
-          inputType: currentInputType || "text", // referenceTable/codeCategory가 설정된 경우 자동 보정된 값 사용
+          webType: mergedColumn.inputType || originalColumn.inputType || "text",
           detailSettings: finalDetailSettings,
           codeCategory: mergedColumn.codeCategory || originalColumn.codeCategory || "",
           codeValue: mergedColumn.codeValue || originalColumn.codeValue || "",
@@ -644,158 +593,6 @@ export function TableSettingModal({
     ];
   };
 
-  // 임베드 모드
-  if (isEmbedded) {
-    return (
-      <>
-        <div className="flex h-full flex-col">
-          {/* 헤더 */}
-          <div className="flex flex-shrink-0 items-center justify-between border-b pb-2 px-3 pt-2">
-            <div className="flex items-center gap-2">
-              <Table2 className="h-4 w-4 text-green-500" />
-              <span className="text-sm font-medium">{tableLabel || tableName}</span>
-              {tableName !== tableLabel && tableName !== (tableLabel || tableName) && (
-                <span className="text-xs text-muted-foreground">({tableName})</span>
-              )}
-            </div>
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setShowTableManagementModal(true)}
-                className="h-7 gap-1 text-xs"
-              >
-                <Settings className="h-3 w-3" />
-                테이블 타입 관리
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleRefresh}
-                className="h-7 w-7 p-0"
-                disabled={loading}
-              >
-                <RefreshCw className={cn("h-3 w-3", loading && "animate-spin")} />
-              </Button>
-              <Button
-                size="sm"
-                onClick={handleSaveAll}
-                className="h-7 gap-1 text-xs"
-                disabled={saving || loading}
-              >
-                {saving ? (
-                  <Loader2 className="h-3 w-3 animate-spin" />
-                ) : (
-                  <Save className="h-3 w-3" />
-                )}
-                저장
-              </Button>
-            </div>
-          </div>
-          <div className="flex min-h-0 flex-1 gap-3 p-3">
-            {/* 좌측: 탭 (40%) */}
-            <div className="flex w-[40%] min-h-0 flex-col">
-              <Tabs
-                value={activeTab}
-                onValueChange={setActiveTab}
-                className="flex min-h-0 flex-1 flex-col"
-              >
-                <TabsList className="h-8 flex-shrink-0">
-                  <TabsTrigger value="columns" className="gap-1 text-xs">
-                    <Columns3 className="h-3 w-3" />
-                    컬럼 설정
-                  </TabsTrigger>
-                  <TabsTrigger value="screens" className="gap-1 text-xs">
-                    <Monitor className="h-3 w-3" />
-                    화면 연동
-                  </TabsTrigger>
-                  <TabsTrigger value="references" className="gap-1 text-xs">
-                    <Eye className="h-3 w-3" />
-                    참조 관계
-                  </TabsTrigger>
-                </TabsList>
-                
-                <TabsContent value="columns" className="mt-2 min-h-0 flex-1 overflow-hidden">
-                  <ColumnListTab
-                    columns={tableColumns.map((col) => ({
-                      ...col,
-                      isPK: col.columnName === "id" || col.columnName.endsWith("_id"),
-                      isFK: (col.inputType as string) === "entity",
-                    }))}
-                    editedColumns={editedColumns}
-                    selectedColumn={selectedColumn}
-                    onSelectColumn={setSelectedColumn}
-                    loading={loading}
-                  />
-                </TabsContent>
-                
-                <TabsContent value="screens" className="mt-2 min-h-0 flex-1 overflow-hidden">
-                  <ScreensTab screensUsingTable={screensUsingTable} loading={loading} />
-                </TabsContent>
-                
-                <TabsContent value="references" className="mt-2 min-h-0 flex-1 overflow-hidden">
-                  <ReferenceTab
-                    tableName={tableName}
-                    tableLabel={tableLabel}
-                    referencedBy={referencedBy}
-                    joinColumnRefs={joinColumnRefs}
-                    loading={loading}
-                  />
-                </TabsContent>
-              </Tabs>
-            </div>
-            
-            {/* 우측: 상세 설정 (60%) */}
-            <div className="flex w-[60%] min-h-0 flex-col rounded-lg border bg-muted/30 p-3">
-              {selectedColumn && mergedColumns.find((c) => c.columnName === selectedColumn) ? (
-                <ColumnDetailPanel
-                  columnInfo={mergedColumns.find((c) => c.columnName === selectedColumn)!}
-                  editedColumn={editedColumns[selectedColumn] || {}}
-                  tableOptions={tableOptions}
-                  inputTypeOptions={inputTypeOptions}
-                  getRefColumnOptions={getRefColumnOptions}
-                  loadingRefColumns={loadingRefColumns}
-                  onColumnChange={(field, value) => handleColumnChange(selectedColumn, field, value)}
-                />
-              ) : (
-                <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-                  <div className="text-center">
-                    <Columns3 className="mx-auto h-12 w-12 text-muted-foreground/30" />
-                    <p className="mt-2">왼쪽에서 컬럼을 선택하면</p>
-                    <p>상세 설정을 할 수 있습니다.</p>
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-        
-        {/* 테이블 타입 관리 모달 */}
-        <Dialog open={showTableManagementModal} onOpenChange={setShowTableManagementModal}>
-          <DialogContent className="flex h-[90vh] max-h-[1000px] w-[95vw] max-w-[1400px] flex-col p-0">
-            <div className="flex items-center justify-between border-b p-4">
-              <h2 className="text-lg font-semibold">테이블 타입 관리</h2>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => {
-                  setShowTableManagementModal(false);
-                  loadTableData();
-                }}
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            </div>
-            <div className="flex-1 overflow-hidden">
-              <TableManagementPage />
-            </div>
-          </DialogContent>
-        </Dialog>
-      </>
-    );
-  }
-
-  // 기존 모달 모드
   return (
     <>
     <Dialog open={isOpen} onOpenChange={onClose}>
@@ -1046,7 +843,6 @@ function ColumnListTab({
           <div className="space-y-1 px-3 pb-3">
             {filteredColumns.map((col) => {
               const edited = editedColumns[col.columnName] || {};
-              // editedColumns에서 inputType을 가져옴 (초기화 시 이미 보정됨)
               const inputType = (edited.inputType || col.inputType || "text") as string;
               const isSelected = selectedColumn === col.columnName;
 
@@ -1077,17 +873,23 @@ function ColumnListTab({
                           PK
                         </Badge>
                       )}
-                      {/* 엔티티 타입이거나 referenceTable이 설정되어 있으면 조인 배지 표시 (FK와 동일 의미) */}
+                      {col.isFK && (
-                      {(inputType === "entity" || edited.referenceTable || col.referenceTable) && (
+                        <Badge variant="outline" className="bg-green-100 text-green-700 text-[10px] px-1.5">
-                        <Badge variant="outline" className="bg-blue-100 text-blue-700 text-[10px] px-1.5">
                           <Link2 className="mr-0.5 h-2.5 w-2.5" />
+                          FK
+                        </Badge>
+                      )}
+                      {(edited.referenceTable || col.referenceTable) && (
+                        <Badge variant="outline" className="bg-blue-100 text-blue-700 text-[10px] px-1.5">
                           조인
                         </Badge>
                       )}
                     </div>
                   </div>
-                  <div className="mt-1 text-xs text-muted-foreground">
+                  <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
                     <span className="font-mono">{col.columnName}</span>
+                    <span>•</span>
+                    <span>{col.dataType}</span>
                   </div>
                 </div>
               );
@@ -1123,11 +925,10 @@ function ColumnDetailPanel({
   onColumnChange,
 }: ColumnDetailPanelProps) {
   const currentLabel = editedColumn.displayName ?? columnInfo.displayName ?? "";
+  const currentInputType = (editedColumn.inputType ?? columnInfo.inputType ?? "text") as string;
   const currentRefTable = editedColumn.referenceTable ?? columnInfo.referenceTable ?? "";
   const currentRefColumn = editedColumn.referenceColumn ?? columnInfo.referenceColumn ?? "";
   const currentDisplayColumn = editedColumn.displayColumn ?? columnInfo.displayColumn ?? "";
-  // editedColumn에서 inputType을 가져옴 (초기화 시 이미 보정됨)
-  const currentInputType = (editedColumn.inputType ?? columnInfo.inputType ?? "text") as string;
 
   return (
     <div className="flex h-full flex-col">
@@ -1147,10 +948,9 @@ function ColumnDetailPanel({
               Primary Key
             </Badge>
           )}
-          {/* 엔티티 타입이거나 referenceTable이 있으면 조인 배지 표시 */}
+          {columnInfo.isFK && (
-          {(currentInputType === "entity" || currentRefTable) && (
+            <Badge variant="outline" className="bg-green-100 text-green-700 text-[10px]">
-            <Badge variant="outline" className="bg-blue-100 text-blue-700 text-[10px]">
+              Foreign Key
-              조인
             </Badge>
           )}
         </div>

frontend/components/screen/panels/DataFlowPanel.tsx

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

frontend/components/screen/panels/FieldJoinPanel.tsx

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

frontend/lib/api/entityJoin.ts

@@ -77,6 +77,12 @@ export const entityJoinApi = {
         filterColumn?: string;
         filterValue?: any;
       }; // 🆕 제외 필터 (다른 테이블에 이미 존재하는 데이터 제외)
+      deduplication?: {
+        enabled: boolean;
+        groupByColumn: string;
+        keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
+        sortColumn?: string;
+      }; // 🆕 중복 제거 설정
       companyCodeOverride?: string; // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 사용 가능)
     } = {},
   ): Promise<EntityJoinResponse> => {
@@ -110,6 +116,7 @@ export const entityJoinApi = {
         autoFilter: JSON.stringify(autoFilter), // 🔒 멀티테넌시 필터링 (오버라이드 포함)
         dataFilter: params.dataFilter ? JSON.stringify(params.dataFilter) : undefined, // 🆕 데이터 필터
         excludeFilter: params.excludeFilter ? JSON.stringify(params.excludeFilter) : undefined, // 🆕 제외 필터
+        deduplication: params.deduplication ? JSON.stringify(params.deduplication) : undefined, // 🆕 중복 제거 설정
       },
     });
     return response.data.data;

frontend/lib/api/screenGroup.ts

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

frontend/lib/api/tableManagement.ts

@@ -13,7 +13,7 @@ export interface ColumnTypeInfo {
   dataType: string;
   dbType: string;
   webType: string;
-  inputType?: string; // text, number, entity, code, select, date, checkbox 등
+  inputType?: "direct" | "auto";
   detailSettings: string;
   description?: string;
   isNullable: string;
@@ -39,11 +39,11 @@ export interface TableInfo {
   columnCount: number;
 }
 
-// 컬럼 설정 타입 (백엔드 API와 동일한 필드명 사용)
+// 컬럼 설정 타입
 export interface ColumnSettings {
   columnName?: string;
   columnLabel: string;
-  inputType: string; // 백엔드에서 inputType으로 받음
+  webType: string;
   detailSettings: string;
   codeCategory: string;
   codeValue: string;

frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx

@@ -27,6 +27,7 @@ import { useScreenContextOptional } from "@/contexts/ScreenContext";
 import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext";
 import { applyMappingRules } from "@/lib/utils/dataMapping";
 import { apiClient } from "@/lib/api/client";
+import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
 
 export interface ButtonPrimaryComponentProps extends ComponentRendererProps {
   config?: ButtonPrimaryConfig;
@@ -107,6 +108,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const screenContext = useScreenContextOptional(); // 화면 컨텍스트
   const splitPanelContext = useSplitPanelContext(); // 분할 패널 컨텍스트
+  const { getTranslatedText } = useScreenMultiLang(); // 다국어 컨텍스트
   // 🆕 ScreenContext에서 splitPanelPosition 가져오기 (중첩 화면에서도 작동)
   const splitPanelPosition = screenContext?.splitPanelPosition;
 
@@ -299,6 +301,20 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
   // 🆕 modalDataStore에서 선택된 데이터 확인 (분할 패널 등에서 저장됨)
   const [modalStoreData, setModalStoreData] = useState<Record<string, any[]>>({});
 
+  // 🆕 splitPanelContext?.selectedLeftData를 로컬 상태로 추적 (리렌더링 보장)
+  const [trackedSelectedLeftData, setTrackedSelectedLeftData] = useState<Record<string, any> | null>(null);
+
+  // splitPanelContext?.selectedLeftData 변경 감지 및 로컬 상태 동기화
+  useEffect(() => {
+    const newData = splitPanelContext?.selectedLeftData ?? null;
+    setTrackedSelectedLeftData(newData);
+    // console.log("🔄 [ButtonPrimary] selectedLeftData 변경 감지:", {
+    //   label: component.label,
+    //   hasData: !!newData,
+    //   dataKeys: newData ? Object.keys(newData) : [],
+    // });
+  }, [splitPanelContext?.selectedLeftData, component.label]);
+
   // modalDataStore 상태 구독 (실시간 업데이트)
   useEffect(() => {
     const actionConfig = component.componentConfig?.action;
@@ -357,8 +373,8 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
 
     // 2. 분할 패널 좌측 선택 데이터 확인
     if (rowSelectionSource === "auto" || rowSelectionSource === "splitPanelLeft") {
-      // SplitPanelContext에서 확인
+      // SplitPanelContext에서 확인 (trackedSelectedLeftData 사용으로 리렌더링 보장)
-      if (splitPanelContext?.selectedLeftData && Object.keys(splitPanelContext.selectedLeftData).length > 0) {
+      if (trackedSelectedLeftData && Object.keys(trackedSelectedLeftData).length > 0) {
         if (!hasSelection) {
           hasSelection = true;
           selectionCount = 1;
@@ -397,7 +413,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
       selectionCount,
       selectionSource,
       hasSplitPanelContext: !!splitPanelContext,
-      selectedLeftData: splitPanelContext?.selectedLeftData,
+      trackedSelectedLeftData: trackedSelectedLeftData,
       selectedRowsData: selectedRowsData?.length,
       selectedRows: selectedRows?.length,
       flowSelectedData: flowSelectedData?.length,
@@ -429,7 +445,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     component.label,
     selectedRows,
     selectedRowsData,
-    splitPanelContext?.selectedLeftData,
+    trackedSelectedLeftData,
     flowSelectedData,
     splitPanelContext,
     modalStoreData,
@@ -721,22 +737,20 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
       return;
     }
 
-    if (!screenContext) {
-      toast.error("화면 컨텍스트를 찾을 수 없습니다.");
-      return;
-    }
-
     try {
-      // 1. 소스 컴포넌트에서 데이터 가져오기
+      let sourceData: any[] = [];
+
+      // 1. ScreenContext에서 DataProvider를 통해 데이터 가져오기 시도
+      if (screenContext) {
         let sourceProvider = screenContext.getDataProvider(dataTransferConfig.sourceComponentId);
 
-      // 🆕 소스 컴포넌트를 찾을 수 없으면, 현재 화면에서 테이블 리스트 자동 탐색
+        // 소스 컴포넌트를 찾을 수 없으면, 현재 화면에서 테이블 리스트 자동 탐색
-      // (조건부 컨테이너의 다른 섹션으로 전환했을 때 이전 컴포넌트 ID가 남아있는 경우 대응)
         if (!sourceProvider) {
           console.log(`⚠️ [ButtonPrimary] 지정된 소스 컴포넌트를 찾을 수 없음: ${dataTransferConfig.sourceComponentId}`);
           console.log(`🔍 [ButtonPrimary] 현재 화면에서 DataProvider 자동 탐색...`);
 
           const allProviders = screenContext.getAllDataProviders();
+          console.log(`📋 [ButtonPrimary] 등록된 DataProvider 목록:`, Array.from(allProviders.keys()));
 
           // 테이블 리스트 우선 탐색
           for (const [id, provider] of allProviders) {
@@ -757,25 +771,65 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
               );
             }
           }
-
-        if (!sourceProvider) {
-          toast.error("데이터를 제공할 수 있는 컴포넌트를 찾을 수 없습니다.");
-          return;
-        }
         }
 
+        if (sourceProvider) {
           const rawSourceData = sourceProvider.getSelectedData();
+          sourceData = Array.isArray(rawSourceData) ? rawSourceData : rawSourceData ? [rawSourceData] : [];
+          console.log("📦 [ButtonPrimary] ScreenContext에서 소스 데이터 획득:", { 
+            rawSourceData, 
+            sourceData, 
+            count: sourceData.length 
+          });
+        }
+      } else {
+        console.log("⚠️ [ButtonPrimary] ScreenContext가 없습니다. modalDataStore에서 데이터를 찾습니다.");
+      }
 
-      // 🆕 배열이 아닌 경우 배열로 변환
+      // 2. ScreenContext에서 데이터를 찾지 못한 경우, modalDataStore에서 fallback 조회
-      const sourceData = Array.isArray(rawSourceData) ? rawSourceData : rawSourceData ? [rawSourceData] : [];
+      if (sourceData.length === 0) {
+        console.log("🔍 [ButtonPrimary] modalDataStore에서 데이터 탐색 시도...");
         
-      console.log("📦 소스 데이터:", { rawSourceData, sourceData, isArray: Array.isArray(rawSourceData) });
+        try {
+          const { useModalDataStore } = await import("@/stores/modalDataStore");
+          const dataRegistry = useModalDataStore.getState().dataRegistry;
           
+          console.log("📋 [ButtonPrimary] modalDataStore 전체 키:", Object.keys(dataRegistry));
+
+          // sourceTableName이 지정되어 있으면 해당 테이블에서 조회
+          const sourceTableName = dataTransferConfig.sourceTableName || tableName;
+          
+          if (sourceTableName && dataRegistry[sourceTableName]) {
+            const modalData = dataRegistry[sourceTableName];
+            sourceData = modalData.map((item: any) => item.originalData || item);
+            console.log(`✅ [ButtonPrimary] modalDataStore에서 데이터 발견 (${sourceTableName}):`, sourceData.length, "건");
+          } else {
+            // 테이블명으로 못 찾으면 첫 번째 데이터 사용
+            const firstKey = Object.keys(dataRegistry)[0];
+            if (firstKey && dataRegistry[firstKey]?.length > 0) {
+              const modalData = dataRegistry[firstKey];
+              sourceData = modalData.map((item: any) => item.originalData || item);
+              console.log(`✅ [ButtonPrimary] modalDataStore 첫 번째 키에서 데이터 발견 (${firstKey}):`, sourceData.length, "건");
+            }
+          }
+        } catch (err) {
+          console.warn("⚠️ [ButtonPrimary] modalDataStore 접근 실패:", err);
+        }
+      }
+
+      // 3. 여전히 데이터가 없으면 에러
       if (!sourceData || sourceData.length === 0) {
-        toast.warning("선택된 데이터가 없습니다.");
+        console.error("❌ [ButtonPrimary] 선택된 데이터를 찾을 수 없습니다.", {
+          hasScreenContext: !!screenContext,
+          sourceComponentId: dataTransferConfig.sourceComponentId,
+          sourceTableName: dataTransferConfig.sourceTableName || tableName,
+        });
+        toast.warning("선택된 데이터가 없습니다. 항목을 먼저 선택해주세요.");
         return;
       }
 
+      console.log("📦 [ButtonPrimary] 최종 소스 데이터:", { sourceData, count: sourceData.length });
+
       // 1.5. 추가 데이터 소스 처리 (예: 조건부 컨테이너의 카테고리 값)
       let additionalData: Record<string, any> = {};
 
@@ -1306,7 +1360,10 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     ...userStyle,
   };
 
-  const buttonContent = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";
+  // 다국어 적용: componentConfig.langKey가 있으면 번역 텍스트 사용
+  const langKey = (component as any).componentConfig?.langKey;
+  const originalButtonText = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";
+  const buttonContent = getTranslatedText(langKey, originalButtonText);
 
   return (
     <>

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].value === 0 ? '0' : values[0].formattedValue)}
+          {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.value === 0 ? '0' : val.formattedValue)}
+            {val.formattedValue}
           </span>
         </td>
       ))}
@@ -296,6 +296,13 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
   onFieldDrop,
   onExpandChange,
 }) => {
+  // 디버깅 로그
+  console.log("🔶 PivotGridComponent props:", {
+    title,
+    hasExternalData: !!externalData,
+    externalDataLength: externalData?.length,
+    initialFieldsLength: initialFields?.length,
+  });
   // ==================== 상태 ====================
 
   const [fields, setFields] = useState<PivotFieldConfig[]>(initialFields);
@@ -305,9 +312,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     sortConfig: null,
     filterConfig: {},
   });
-  
-  // 🆕 초기 로드 시 자동 확장 (첫 레벨만)
-  const [isInitialExpanded, setIsInitialExpanded] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [showFieldPanel, setShowFieldPanel] = useState(false); // 기본적으로 접힌 상태
   const [showFieldChooser, setShowFieldChooser] = useState(false);
@@ -366,63 +370,20 @@ 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;
-    
-    try {
     const savedState = localStorage.getItem(stateStorageKey);
-      if (!savedState) return;
+    if (savedState) {
-      
+      try {
         const parsed = JSON.parse(savedState);
-      
+        if (parsed.fields) setFields(parsed.fields);
-      // 버전 체크 - 버전이 다르면 이전 상태 무시
+        if (parsed.pivotState) setPivotState(parsed.pivotState);
-      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") {
+        if (parsed.columnWidths) setColumnWidths(parsed.columnWidths);
-        setColumnWidths(parsed.columnWidths);
-      }
       } catch (e) {
-      console.warn("피벗 상태 복원 실패, localStorage 초기화:", e);
+        console.warn("피벗 상태 복원 실패:", e);
-      // 손상된 상태는 제거
+      }
-      localStorage.removeItem(stateStorageKey);
     }
   }, [stateStorageKey]);
 
@@ -457,12 +418,10 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
 
   // 필터 영역 필드
   const filterFields = useMemo(
-    () => {
+    () =>
-      const result = fields
+      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]
   );
 
@@ -507,87 +466,42 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
 
     if (activeFilters.length === 0) return data;
 
-    const result = data.filter((row) => {
+    return data.filter((row) => {
       return activeFilters.every((filter) => {
-        const rawValue = row[filter.field];
+        const value = 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.some((fv) => String(fv) === value);
+          return filterValues.includes(value);
         } else {
-          return filterValues.every((fv) => String(fv) !== value);
+          return !filterValues.includes(value);
         }
       });
     });
-
-    // 모든 데이터가 필터링되면 경고 (디버깅용)
-    if (result.length === 0 && data.length > 0) {
-      console.warn("⚠️ [PivotGrid] 필터로 인해 모든 데이터가 제거됨");
-    }
-
-    return result;
   }, [data, fields]);
 
   // ==================== 피벗 처리 ====================
 
   const pivotResult = useMemo<PivotResult | null>(() => {
-    try {
     if (!filteredData || filteredData.length === 0 || fields.length === 0) {
       return null;
     }
 
-      // FieldChooser에서 이미 필드를 완전히 제거하므로 visible 필터링 불필요
+    const visibleFields = fields.filter((f) => f.visible !== false);
     // 행, 열, 데이터 영역에 필드가 하나도 없으면 null 반환 (필터는 제외)
-      if (fields.filter((f) => ["row", "column", "data"].includes(f.area)).length === 0) {
+    if (visibleFields.filter((f) => ["row", "column", "data"].includes(f.area)).length === 0) {
       return null;
     }
 
-      const result = processPivotData(
+    return processPivotData(
       filteredData,
-        fields,
+      visibleFields,
       pivotState.expandedRowPaths,
       pivotState.expandedColumnPaths
     );
-      
-      return result;
-    } catch (error) {
-      console.error("❌ [pivotResult] 피벗 처리 에러:", error);
-      return null;
-    }
   }, [filteredData, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]);
 
-  // 초기 로드 시 첫 레벨 자동 확장
-  useEffect(() => {
-    try {
-      if (pivotResult && pivotResult.flatRows && pivotResult.flatRows.length > 0 && !isInitialExpanded) {
-        // 첫 레벨 행들의 경로 수집 (level 0인 행들)
-        const firstLevelRows = pivotResult.flatRows.filter((row) => row.level === 0 && row.hasChildren);
-
-        // 첫 레벨 행이 있으면 자동 확장
-        if (firstLevelRows.length > 0 && firstLevelRows.length < 100) {
-          const firstLevelPaths = firstLevelRows.map((row) => row.path);
-          setPivotState((prev) => ({
-            ...prev,
-            expandedRowPaths: firstLevelPaths,
-          }));
-          setIsInitialExpanded(true);
-        } else {
-          // 행이 너무 많으면 자동 확장 건너뛰기
-          setIsInitialExpanded(true);
-        }
-      }
-    } catch (error) {
-      console.error("❌ [초기 확장] 에러:", error);
-      setIsInitialExpanded(true);
-    }
-  }, [pivotResult, isInitialExpanded]);
-
   // 조건부 서식용 전체 값 수집
   const allCellValues = useMemo(() => {
     if (!pivotResult) return new Map<string, number[]>();
@@ -777,40 +691,14 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     [onExpandChange]
   );
 
-  // 전체 확장 (재귀적으로 모든 레벨 확장)
+  // 전체 확장
   const handleExpandAll = useCallback(() => {
-    try {
+    if (!pivotResult) return;
-      if (!pivotResult) {
-        return;
-      }
 
-      // 재귀적으로 모든 가능한 경로 생성
     const allRowPaths: string[][] = [];
-      const rowFields = fields.filter((f) => f.area === "row" && f.visible !== false);
+    pivotResult.flatRows.forEach((row) => {
-      
+      if (row.hasChildren) {
-      // 행 필드가 없으면 종료
+        allRowPaths.push(row.path);
-      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++;
       }
     });
 
@@ -819,10 +707,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
       expandedRowPaths: allRowPaths,
       expandedColumnPaths: [],
     }));
-    } catch (error) {
+  }, [pivotResult]);
-      console.error("❌ [handleExpandAll] 에러:", error);
-    }
-  }, [pivotResult, fields, filteredData]);
 
   // 전체 축소
   const handleCollapseAll = useCallback(() => {
@@ -945,8 +830,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
   
   // 인쇄 기능 (PDF 내보내기보다 먼저 정의해야 함)
   const handlePrint = useCallback(() => {
-    if (typeof window === "undefined") return;
-    
     const printContent = tableRef.current;
     if (!printContent) return;
     
@@ -1047,14 +930,10 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     console.log("피벗 상태가 저장되었습니다.");
   }, [saveStateToStorage]);
   
-  // 상태 초기화 (확장/축소, 정렬, 필터만 초기화, 필드 설정은 유지)
+  // 상태 초기화
   const handleResetState = useCallback(() => {
-    // 로컬 스토리지에서 상태 제거 (SSR 보호)
-    if (typeof window !== "undefined") {
     localStorage.removeItem(stateStorageKey);
-    }
+    setFields(initialFields);
-    
-    // 확장/축소, 정렬, 필터 상태만 초기화
     setPivotState({
       expandedRowPaths: [],
       expandedColumnPaths: [],
@@ -1065,7 +944,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
     setColumnWidths({});
     setSelectedCell(null);
     setSelectionRange(null);
-  }, [stateStorageKey]);
+  }, [stateStorageKey, initialFields]);
   
   // 필드 숨기기/표시 상태
   const [hiddenFields, setHiddenFields] = useState<Set<string>>(new Set());
@@ -1082,6 +961,11 @@ 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));
@@ -1449,8 +1333,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                 variant="ghost"
                 size="sm"
                 className="h-7 px-2"
-                onClick={handleCollapseAll}
+                onClick={handleExpandAll}
-                title="전체 축소"
+                title="전체 확장"
               >
                 <ChevronDown className="h-4 w-4" />
               </Button>
@@ -1459,8 +1343,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                 variant="ghost"
                 size="sm"
                 className="h-7 px-2"
-                onClick={handleExpandAll}
+                onClick={handleCollapseAll}
-                title="전체 확장"
+                title="전체 축소"
               >
                 <ChevronRight className="h-4 w-4" />
               </Button>
@@ -1640,25 +1524,19 @@ 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 max-w-xs",
+                        "border transition-colors",
                         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 className="font-medium">{filterField.caption}:</span>
+                      <span>{filterField.caption}</span>
-                      {isFiltered ? (
+                      {isFiltered && (
-                        <span className="truncate">
+                        <span className="bg-orange-500 text-white px-1 rounded text-[10px]">
-                          {selectedValues.length <= 2 
+                          {selectedValues.length}
-                            ? selectedValues.join(", ")
-                            : `${selectedValues.slice(0, 2).join(", ")} 외 ${selectedValues.length - 2}개`
-                          }
                         </span>
-                      ) : (
-                        <span className="text-muted-foreground">전체</span>
                       )}
-                      <ChevronDown className="h-3 w-3 shrink-0" />
+                      <ChevronDown className="h-3 w-3" />
                     </button>
                   }
                 />
@@ -1672,27 +1550,20 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
       <div 
         ref={tableContainerRef}
         className="flex-1 overflow-auto focus:outline-none"
-        style={{ 
+        style={{ maxHeight: enableVirtualScroll ? containerHeight : undefined }}
-          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-background">
+            <tr className="bg-muted/50">
               {/* 좌상단 코너 (행 필드 라벨 + 필터) */}
               <th
                 className={cn(
                   "border-r border-b border-border",
-                  "px-2 py-1 text-left text-xs font-medium",
+                  "px-2 py-2 text-left text-xs font-medium",
-                  "bg-background sticky left-0 top-0 z-20"
+                  "bg-muted sticky left-0 top-0 z-20"
                 )}
                 rowSpan={columnFields.length > 0 ? 2 : 1}
               >
@@ -1736,8 +1607,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                   key={idx}
                   className={cn(
                     "border-r border-b border-border relative group",
-                    "px-2 py-1 text-center text-xs font-medium",
+                    "px-2 py-1.5 text-center text-xs font-medium",
-                    "bg-background sticky top-0 z-10",
+                    "bg-muted/70 sticky top-0 z-10",
                     dataFields.length === 1 && "cursor-pointer hover:bg-accent/50"
                   )}
                   colSpan={dataFields.length || 1}
@@ -1760,30 +1631,15 @@ 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 text-center text-xs",
+                    "px-1 py-1.5 text-center text-xs",
-                    "bg-background sticky top-0 z-10"
+                    "bg-muted/50 sticky top-0 z-10"
                   )}
-                  rowSpan={dataFields.length > 1 ? 2 : 1}
+                  rowSpan={columnFields.length > 0 ? 2 : 1}
                 >
                   <div className="flex flex-col gap-0.5">
                     {columnFields.map((f) => (
@@ -1815,11 +1671,25 @@ 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-background">
+              <tr className="bg-muted/30">
                 {flatColumns.map((col, colIdx) => (
                   <React.Fragment key={colIdx}>
                     {dataFields.map((df, dfIdx) => (
@@ -1827,7 +1697,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                         key={`${colIdx}-${dfIdx}`}
                         className={cn(
                           "border-r border-b border-border",
-                          "px-2 py-0.5 text-center text-xs font-normal",
+                          "px-2 py-1 text-center text-xs font-normal",
                           "text-muted-foreground cursor-pointer hover:bg-accent/50"
                         )}
                         onClick={() => handleSort(df.field)}
@@ -1840,6 +1710,19 @@ 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>
@@ -1954,15 +1837,12 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
               });
             })()}
             
-            {/* 가상 스크롤 하단 여백 - 음수 방지 */}
+            {/* 가상 스크롤 하단 여백 */}
-            {enableVirtualScroll && (() => {
+            {enableVirtualScroll && (
-              const bottomPadding = Math.max(0, virtualScroll.totalHeight - virtualScroll.offsetTop - (visibleFlatRows.length * ROW_HEIGHT));
+              <tr style={{ height: 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,73 +1,12 @@
 "use client";
 
-import React, { useEffect, useState, Component, ErrorInfo, ReactNode } from "react";
+import React from "react";
 import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { PivotGridComponent } from "./PivotGridComponent";
 import { PivotGridConfigPanel } from "./PivotGridConfigPanel";
 import { PivotFieldConfig } from "./types";
-import { dataApi } from "@/lib/api/data";
-import { AlertCircle, RefreshCw } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-// ==================== 에러 경계 ====================
-
-interface ErrorBoundaryState {
-  hasError: boolean;
-  error?: Error;
-}
-
-class PivotGridErrorBoundary extends Component<
-  { children: ReactNode; onReset?: () => void },
-  ErrorBoundaryState
-> {
-  constructor(props: { children: ReactNode; onReset?: () => void }) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error("🔴 [PivotGrid] 렌더링 에러:", error);
-    console.error("🔴 [PivotGrid] 에러 정보:", errorInfo);
-  }
-
-  handleReset = () => {
-    this.setState({ hasError: false, error: undefined });
-    this.props.onReset?.();
-  };
-
-  render() {
-    if (this.state.hasError) {
-      return (
-        <div className="flex flex-col items-center justify-center p-8 text-center border border-destructive/50 rounded-lg bg-destructive/5">
-          <AlertCircle className="h-8 w-8 text-destructive mb-2" />
-          <h3 className="text-sm font-medium text-destructive mb-1">
-            피벗 그리드 오류
-          </h3>
-          <p className="text-xs text-muted-foreground mb-3 max-w-md">
-            {this.state.error?.message || "알 수 없는 오류가 발생했습니다."}
-          </p>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={this.handleReset}
-            className="gap-2"
-          >
-            <RefreshCw className="h-3.5 w-3.5" />
-            다시 시도
-          </Button>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}
 
 // ==================== 샘플 데이터 (미리보기용) ====================
 
@@ -156,63 +95,43 @@ const PivotGridWrapper: React.FC<any> = (props) => {
   const configFields = componentConfig.fields || props.fields;
   const configData = props.data;
   
-  // 🆕 테이블에서 데이터 자동 로딩
+  // 디버깅 로그
-  const [loadedData, setLoadedData] = useState<any[]>([]);
+  console.log("🔷 PivotGridWrapper props:", {
-  const [isLoading, setIsLoading] = useState(false);
+    isDesignMode: props.isDesignMode,
-  
+    isInteractive: props.isInteractive,
-  useEffect(() => {
+    hasComponentConfig: !!props.componentConfig,
-    const loadTableData = async () => {
+    hasConfig: !!props.config,
-      const tableName = componentConfig.dataSource?.tableName;
+    hasData: !!configData,
-      
+    dataLength: configData?.length,
-      // 데이터가 이미 있거나, 테이블명이 없으면 로딩하지 않음
+    hasFields: !!configFields,
-      if (configData || !tableName || props.isDesignMode) {
+    fieldsLength: configFields?.length,
-        return;
-      }
-      
-      setIsLoading(true);
-      try {
-        const response = await dataApi.getTableData(tableName, {
-          page: 1,
-          size: 10000, // 피벗 분석용 대량 데이터
   });
 
-        // dataApi.getTableData는 { data, total, page, size, totalPages } 구조
-        if (response.data && Array.isArray(response.data)) {
-          setLoadedData(response.data);
-        } else {
-          console.error("❌ [PivotGrid] 데이터 로딩 실패: 응답에 data 배열이 없음");
-          setLoadedData([]);
-        }
-      } catch (error) {
-        console.error("❌ [PivotGrid] 데이터 로딩 에러:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    
-    loadTableData();
-  }, [componentConfig.dataSource?.tableName, configData, props.isDesignMode]);
-
   // 디자인 모드 판단:
   // 1. isDesignMode === true
   // 2. isInteractive === false (편집 모드)
+  // 3. 데이터가 없는 경우
   const isDesignMode = props.isDesignMode === true || props.isInteractive === false;
-  
+  const hasValidData = configData && Array.isArray(configData) && configData.length > 0;
-  // 🆕 실제 데이터 우선순위: props.data > loadedData > 샘플 데이터
-  const actualData = configData || loadedData;
-  const hasValidData = actualData && Array.isArray(actualData) && actualData.length > 0;
   const hasValidFields = configFields && Array.isArray(configFields) && configFields.length > 0;
   
   // 디자인 모드이거나 데이터가 없으면 샘플 데이터 사용
-  const usePreviewData = isDesignMode || (!hasValidData && !isLoading);
+  const usePreviewData = isDesignMode || !hasValidData;
 
   // 최종 데이터/필드 결정
-  const finalData = usePreviewData ? SAMPLE_DATA : actualData;
+  const finalData = usePreviewData ? SAMPLE_DATA : configData;
   const finalFields = hasValidFields ? configFields : SAMPLE_FIELDS;
   const finalTitle = usePreviewData 
     ? (componentConfig.title || props.title || "피벗 그리드") + " (미리보기)"
     : (componentConfig.title || props.title);
 
+  console.log("🔷 PivotGridWrapper final:", {
+    isDesignMode,
+    usePreviewData,
+    finalDataLength: finalData?.length,
+    finalFieldsLength: finalFields?.length,
+  });
+
   // 총계 설정
   const totalsConfig = componentConfig.totals || props.totals || {
     showRowGrandTotals: true,
@@ -221,21 +140,7 @@ const PivotGridWrapper: React.FC<any> = (props) => {
     showColumnTotals: true,
   };
 
-  // 🆕 로딩 중 표시
-  if (isLoading) {
   return (
-      <div className="flex items-center justify-center h-64 bg-muted/30 rounded-lg">
-        <div className="text-center space-y-2">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
-          <p className="text-sm text-muted-foreground">데이터 로딩 중...</p>
-        </div>
-      </div>
-    );
-  }
-
-  // 에러 경계로 감싸서 렌더링 에러 시 컴포넌트가 완전히 사라지지 않도록 함
-  return (
-    <PivotGridErrorBoundary>
     <PivotGridComponent
       title={finalTitle}
       data={finalData}
@@ -245,7 +150,7 @@ const PivotGridWrapper: React.FC<any> = (props) => {
       fieldChooser={componentConfig.fieldChooser || props.fieldChooser}
       chart={componentConfig.chart || props.chart}
       allowExpandAll={componentConfig.allowExpandAll !== false}
-        height="100%"
+      height={componentConfig.height || props.height || "400px"}
       maxHeight={componentConfig.maxHeight || props.maxHeight}
       exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }}
       onCellClick={props.onCellClick}
@@ -253,7 +158,6 @@ const PivotGridWrapper: React.FC<any> = (props) => {
       onFieldDrop={props.onFieldDrop}
       onExpandChange={props.onExpandChange}
     />
-    </PivotGridErrorBoundary>
   );
 };
 
@@ -320,6 +224,18 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer {
     const configFields = componentConfig.fields || props.fields;
     const configData = props.data;
     
+    // 디버깅 로그
+    console.log("🔷 PivotGridRenderer props:", {
+      isDesignMode: props.isDesignMode,
+      isInteractive: props.isInteractive,
+      hasComponentConfig: !!props.componentConfig,
+      hasConfig: !!props.config,
+      hasData: !!configData,
+      dataLength: configData?.length,
+      hasFields: !!configFields,
+      fieldsLength: configFields?.length,
+    });
+
     // 디자인 모드 판단:
     // 1. isDesignMode === true
     // 2. isInteractive === false (편집 모드)
@@ -338,6 +254,13 @@ 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,
@@ -356,7 +279,7 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer {
         fieldChooser={componentConfig.fieldChooser || props.fieldChooser}
         chart={componentConfig.chart || props.chart}
         allowExpandAll={componentConfig.allowExpandAll !== false}
-        height="100%"
+        height={componentConfig.height || props.height || "400px"}
         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,9 +267,11 @@ 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.filter((f) => f.field !== field.field);
+        const newFields = selectedFields.map((f) =>
+          f.field === field.field ? { ...f, visible: false } : f
+        );
         onFieldsChange(newFields);
       }
     } else {
@@ -399,7 +401,7 @@ export const FieldChooser: React.FC<FieldChooserProps> = ({
         </div>
 
         {/* 필드 목록 */}
-        <ScrollArea className="flex-1 -mx-6 px-6 max-h-[40vh] overflow-y-auto">
+        <ScrollArea className="flex-1 -mx-6 px-6">
           <div className="space-y-2 py-2">
             {filteredFields.length === 0 ? (
               <div className="text-center py-8 text-muted-foreground">

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

@@ -25,7 +25,6 @@ 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";
@@ -245,31 +244,22 @@ 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-[60px] rounded border-2 border-dashed p-2",
+        "flex-1 min-h-[44px] rounded border border-dashed p-1.5",
-        "transition-all duration-200",
+        "transition-colors duration-200",
         config.color,
-        finalIsOver && "border-primary bg-primary/10 scale-[1.02]",
+        isOver && "border-primary bg-primary/5"
-        areaFields.length === 0 && "border-2" // 빈 영역일 때 테두리 강조
       )}
       data-area={area}
     >
       {/* 영역 헤더 */}
-      <div className="flex items-center gap-1 mb-1.5 text-xs font-semibold text-muted-foreground">
+      <div className="flex items-center gap-1 mb-1 text-[11px] font-medium text-muted-foreground">
         {icon}
         <span>{title}</span>
         {areaFields.length > 0 && (
-          <span className="text-[10px] bg-muted px-1.5 py-0.5 rounded">
+          <span className="text-[10px] bg-muted px-1 rounded">
             {areaFields.length}
           </span>
         )}
@@ -277,16 +267,11 @@ const DroppableArea: React.FC<DroppableAreaProps> = ({
 
       {/* 필드 목록 */}
       <SortableContext items={fieldIds} strategy={horizontalListSortingStrategy}>
-        <div className="flex flex-wrap gap-1 min-h-[28px] relative">
+        <div className="flex flex-wrap gap-1 min-h-[22px]">
           {areaFields.length === 0 ? (
-            <div 
+            <span className="text-[10px] text-muted-foreground/50 italic">
-              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
@@ -354,16 +339,8 @@ 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);
@@ -373,13 +350,10 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
   // 드래그 종료
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
-    const currentOverArea = overArea; // handleDragOver에서 감지한 영역 저장
     setActiveId(null);
     setOverArea(null);
 
-    if (!over) {
+    if (!over) return;
-      return;
-    }
 
     const activeId = active.id as string;
     const overId = over.id as string;
@@ -389,16 +363,7 @@ 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) {
@@ -441,7 +406,6 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
         }
         return f;
       });
-      
       onFieldsChange(newFields);
     }
   };

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

@@ -51,18 +51,14 @@ 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: Math.max(start, end) }; // end가 start보다 작지 않도록
+    return { startIndex: start, endIndex: end };
   }, [scrollTop, itemHeight, containerHeight, itemCount, overscan]);
 
   // 전체 높이

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

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

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

@@ -6,6 +6,7 @@ import { WebType } from "@/types/common";
 import { tableTypeApi } from "@/lib/api/screen";
 import { entityJoinApi } from "@/lib/api/entityJoin";
 import { codeCache } from "@/lib/caching/codeCache";
+import { getCategoryLabelsByCodes } from "@/lib/api/tableCategoryValue";
 import { useEntityJoinOptimization } from "@/lib/hooks/useEntityJoinOptimization";
 import { getFullImageUrl } from "@/lib/api/client";
 import { Button } from "@/components/ui/button";
@@ -41,7 +42,7 @@ import {
   Lock,
 } from "lucide-react";
 import * as XLSX from "xlsx";
-import { FileText, ChevronRightIcon, Search } from "lucide-react";
+import { FileText, ChevronRightIcon } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
@@ -66,6 +67,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { useScreenContextOptional } from "@/contexts/ScreenContext";
 import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext";
 import type { DataProvidable, DataReceivable, DataReceiverConfig } from "@/types/data-transfer";
+import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
 
 // ========================================
 // 인터페이스
@@ -242,6 +244,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   parentTabsComponentId,
   companyCode,
 }) => {
+  // ========================================
+  // 다국어 번역 훅
+  // ========================================
+  const { getTranslatedText } = useScreenMultiLang();
+
   // ========================================
   // 설정 및 스타일
   // ========================================
@@ -455,7 +462,6 @@ 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보다 먼저 정의해야 함
@@ -475,6 +481,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     }
 
     // 2. 헤더 필터 적용 (joinColumnMapping 사용 안 함 - 직접 컬럼명 사용)
+    // 🆕 다중 값 지원: 셀 값이 "A,B,C" 형태일 때, 필터에서 "A"를 선택하면 해당 행도 표시
     if (Object.keys(headerFilters).length > 0) {
       result = result.filter((row) => {
         return Object.entries(headerFilters).every(([columnName, values]) => {
@@ -484,23 +491,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           const cellValue = row[columnName] ?? row[columnName.toLowerCase()] ?? row[columnName.toUpperCase()];
           const cellStr = cellValue !== null && cellValue !== undefined ? String(cellValue) : "";
 
-          return values.has(cellStr);
+          // 정확히 일치하는 경우
-        });
+          if (values.has(cellStr)) return true;
-      });
+
+          // 다중 값인 경우: 콤마로 분리해서 하나라도 포함되면 true
+          if (cellStr.includes(",")) {
+            const cellValues = cellStr.split(",").map(v => v.trim());
+            return cellValues.some(v => values.has(v));
           }
 
-    // 2-1. 🆕 LIKE 검색 필터 적용
+          return false;
-    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());
         });
       });
     }
@@ -558,7 +558,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     }
 
     return result;
-  }, [data, splitPanelPosition, splitPanelContext?.addedItemIds, headerFilters, headerLikeFilters, filterGroups]);
+  }, [data, splitPanelPosition, splitPanelContext?.addedItemIds, headerFilters, filterGroups]);
 
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
@@ -871,17 +871,55 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   };
 
   // 화면 컨텍스트에 데이터 제공자/수신자로 등록
+  // 🔧 dataProvider와 dataReceiver를 의존성에 포함하지 않고,
+  // 대신 data와 selectedRows가 변경될 때마다 재등록하여 최신 클로저 참조
   useEffect(() => {
     if (screenContext && component.id) {
-      screenContext.registerDataProvider(component.id, dataProvider);
+      // 🔧 매번 새로운 dataProvider를 등록하여 최신 selectedRows 참조
-      screenContext.registerDataReceiver(component.id, dataReceiver);
+      const currentDataProvider: DataProvidable = {
+        componentId: component.id,
+        componentType: "table-list",
+        getSelectedData: () => {
+          const selectedData = filteredData.filter((row) => {
+            const rowId = String(row.id || row[tableConfig.selectedTable + "_id"] || "");
+            return selectedRows.has(rowId);
+          });
+          console.log("📊 [TableList] getSelectedData 호출:", {
+            componentId: component.id,
+            selectedRowsSize: selectedRows.size,
+            filteredDataLength: filteredData.length,
+            resultLength: selectedData.length,
+          });
+          return selectedData;
+        },
+        getAllData: () => filteredData,
+        clearSelection: () => {
+          setSelectedRows(new Set());
+          setIsAllSelected(false);
+        },
+      };
+
+      const currentDataReceiver: DataReceivable = {
+        componentId: component.id,
+        componentType: "table",
+        receiveData: dataReceiver.receiveData,
+        getData: () => data,
+      };
+
+      screenContext.registerDataProvider(component.id, currentDataProvider);
+      screenContext.registerDataReceiver(component.id, currentDataReceiver);
+
+      console.log("✅ [TableList] ScreenContext에 등록:", {
+        componentId: component.id,
+        selectedRowsSize: selectedRows.size,
+      });
 
       return () => {
         screenContext.unregisterDataProvider(component.id);
         screenContext.unregisterDataReceiver(component.id);
       };
     }
-  }, [screenContext, component.id, data, selectedRows]);
+  }, [screenContext, component.id, data, selectedRows, filteredData, tableConfig.selectedTable]);
 
   // 분할 패널 컨텍스트에 데이터 수신자로 등록
   // useSplitPanelPosition 훅으로 위치 가져오기 (중첩된 화면에서도 작동)
@@ -1048,14 +1086,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       onGroupSumChange: setGroupSumConfig, // 그룹별 합산 설정
       // 틀고정 컬럼 관련
       frozenColumnCount, // 현재 틀고정 컬럼 수
-      onFrozenColumnCountChange: (count: number) => {
+      onFrozenColumnCountChange: (count: number, updatedColumns?: Array<{ columnName: string; visible: boolean }>) => {
         setFrozenColumnCount(count);
         // 체크박스 컬럼은 항상 틀고정에 포함
         const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : [];
         // 표시 가능한 컬럼 중 처음 N개를 틀고정 컬럼으로 설정
-        const visibleCols = columnsToRegister
+        // updatedColumns가 전달되면 그것을 사용, 아니면 columnsToRegister 사용
+        const colsToUse = updatedColumns || columnsToRegister;
+        const visibleCols = colsToUse
           .filter((col) => col.visible !== false)
-          .map((col) => col.columnName || col.field);
+          .map((col) => col.columnName || (col as any).field);
         const newFrozenColumns = [...checkboxColumn, ...visibleCols.slice(0, count)];
         setFrozenColumns(newFrozenColumns);
       },
@@ -2066,7 +2106,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     return row.id || row.uuid || `row-${index}`;
   };
 
-  const handleRowSelection = (rowKey: string, checked: boolean) => {
+  const handleRowSelection = (rowKey: string, checked: boolean, rowData?: any) => {
     const newSelectedRows = new Set(selectedRows);
     if (checked) {
       newSelectedRows.add(rowKey);
@@ -2109,6 +2149,31 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       });
     }
 
+    // 🆕 분할 패널 컨텍스트에 선택된 데이터 저장/해제 (체크박스 선택 시에도 작동)
+    const effectiveSplitPosition = splitPanelPosition || currentSplitPosition;
+    if (splitPanelContext && effectiveSplitPosition === "left" && !splitPanelContext.disableAutoDataTransfer) {
+      if (checked && selectedRowsData.length > 0) {
+        // 선택된 경우: 첫 번째 선택된 데이터 저장 (또는 전달된 rowData)
+        const dataToStore = rowData || selectedRowsData[selectedRowsData.length - 1];
+        splitPanelContext.setSelectedLeftData(dataToStore);
+        console.log("🔗 [TableList] handleRowSelection - 분할 패널 좌측 데이터 저장:", {
+          rowKey,
+          dataToStore,
+        });
+      } else if (!checked && selectedRowsData.length === 0) {
+        // 모든 선택이 해제된 경우: 데이터 초기화
+        splitPanelContext.setSelectedLeftData(null);
+        console.log("🔗 [TableList] handleRowSelection - 분할 패널 좌측 데이터 초기화");
+      } else if (selectedRowsData.length > 0) {
+        // 일부 선택 해제된 경우: 남은 첫 번째 데이터로 업데이트
+        splitPanelContext.setSelectedLeftData(selectedRowsData[0]);
+        console.log("🔗 [TableList] handleRowSelection - 분할 패널 좌측 데이터 업데이트:", {
+          remainingCount: selectedRowsData.length,
+          firstData: selectedRowsData[0],
+        });
+      }
+    }
+
     const allRowsSelected = filteredData.every((row, index) => newSelectedRows.has(getRowKey(row, index)));
     setIsAllSelected(allRowsSelected && filteredData.length > 0);
   };
@@ -2178,35 +2243,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     const rowKey = getRowKey(row, index);
     const isCurrentlySelected = selectedRows.has(rowKey);
 
-    handleRowSelection(rowKey, !isCurrentlySelected);
+    // handleRowSelection에서 분할 패널 데이터 처리도 함께 수행됨
-
+    handleRowSelection(rowKey, !isCurrentlySelected, row);
-    // 🆕 분할 패널 컨텍스트에 선택된 데이터 저장 (좌측 화면인 경우)
-    // disableAutoDataTransfer가 true이면 자동 전달 비활성화 (버튼 클릭으로만 전달)
-    // currentSplitPosition을 사용하여 정확한 위치 확인 (splitPanelPosition이 없을 수 있음)
-    const effectiveSplitPosition = splitPanelPosition || currentSplitPosition;
-
-    console.log("🔗 [TableList] 행 클릭 - 분할 패널 위치 확인:", {
-      splitPanelPosition,
-      currentSplitPosition,
-      effectiveSplitPosition,
-      hasSplitPanelContext: !!splitPanelContext,
-      disableAutoDataTransfer: splitPanelContext?.disableAutoDataTransfer,
-    });
-
-    if (splitPanelContext && effectiveSplitPosition === "left" && !splitPanelContext.disableAutoDataTransfer) {
-      if (!isCurrentlySelected) {
-        // 선택된 경우: 데이터 저장
-        splitPanelContext.setSelectedLeftData(row);
-        console.log("🔗 [TableList] 분할 패널 좌측 데이터 저장:", {
-          row,
-          parentDataMapping: splitPanelContext.parentDataMapping,
-        });
-      } else {
-        // 선택 해제된 경우: 데이터 초기화
-        splitPanelContext.setSelectedLeftData(null);
-        console.log("🔗 [TableList] 분할 패널 좌측 데이터 초기화");
-      }
-    }
 
     console.log("행 클릭:", { row, index, isSelected: !isCurrentlySelected });
   };
@@ -2273,30 +2311,176 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   // 🆕 편집 모드 진입 placeholder (실제 구현은 visibleColumns 정의 후)
   const startEditingRef = useRef<() => void>(() => {});
 
-  // 🆕 각 컬럼의 고유값 목록 계산
+  // 🆕 카테고리 라벨 매핑 (API에서 가져온 것)
+  const [categoryLabelCache, setCategoryLabelCache] = useState<Record<string, string>>({});
+
+  // 🆕 각 컬럼의 고유값 목록 계산 (라벨 포함)
   const columnUniqueValues = useMemo(() => {
-    const result: Record<string, string[]> = {};
+    const result: Record<string, Array<{ value: string; label: string }>> = {};
 
     if (data.length === 0) return result;
 
+    // 🆕 전체 데이터에서 개별 값 -> 라벨 매핑 테이블 구축 (다중 값 처리용)
+    const globalLabelMap: Record<string, Map<string, string>> = {};
+    
     (tableConfig.columns || []).forEach((column: { columnName: string }) => {
       if (column.columnName === "__checkbox__") return;
 
       const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
-      const values = new Set<string>();
+      // 라벨 컬럼 후보들 (백엔드에서 _name, _label, _value_label 등으로 반환할 수 있음)
+      const labelColumnCandidates = [
+        `${column.columnName}_name`,        // 예: division_name
+        `${column.columnName}_label`,       // 예: division_label
+        `${column.columnName}_value_label`, // 예: division_value_label
+      ];
+      const valuesMap = new Map<string, string>(); // value -> label
+      const singleValueLabelMap = new Map<string, string>(); // 개별 값 -> 라벨 (다중값 처리용)
 
+      // 1차: 모든 데이터에서 개별 값 -> 라벨 매핑 수집 (단일값 + 다중값 모두)
       data.forEach((row) => {
         const val = row[mappedColumnName];
         if (val !== null && val !== undefined && val !== "") {
-          values.add(String(val));
+          const valueStr = String(val);
+          
+          // 라벨 컬럼에서 라벨 찾기
+          let labelStr = "";
+          for (const labelCol of labelColumnCandidates) {
+            if (row[labelCol] && row[labelCol] !== "") {
+              labelStr = String(row[labelCol]);
+              break;
+            }
+          }
+          
+          // 단일 값인 경우
+          if (!valueStr.includes(",")) {
+            if (labelStr) {
+              singleValueLabelMap.set(valueStr, labelStr);
+            }
+          } else {
+            // 다중 값인 경우: 값과 라벨을 각각 분리해서 매핑
+            const individualValues = valueStr.split(",").map(v => v.trim());
+            const individualLabels = labelStr ? labelStr.split(",").map(l => l.trim()) : [];
+            
+            // 값과 라벨 개수가 같으면 1:1 매핑
+            if (individualValues.length === individualLabels.length) {
+              individualValues.forEach((v, idx) => {
+                if (individualLabels[idx] && !singleValueLabelMap.has(v)) {
+                  singleValueLabelMap.set(v, individualLabels[idx]);
+                }
+              });
+            }
+          }
         }
       });
 
-      result[column.columnName] = Array.from(values).sort();
+      // 2차: 모든 값 처리 (다중 값 포함) - 필터 목록용
+      data.forEach((row) => {
+        const val = row[mappedColumnName];
+        if (val !== null && val !== undefined && val !== "") {
+          const valueStr = String(val);
+          
+          // 콤마로 구분된 다중 값인지 확인
+          if (valueStr.includes(",")) {
+            // 다중 값: 각각 분리해서 개별 라벨 찾기
+            const individualValues = valueStr.split(",").map(v => v.trim());
+            // 🆕 singleValueLabelMap → categoryLabelCache 순으로 라벨 찾기
+            const individualLabels = individualValues.map(v => 
+              singleValueLabelMap.get(v) || categoryLabelCache[v] || v
+            );
+            valuesMap.set(valueStr, individualLabels.join(", "));
+          } else {
+            // 단일 값: 매핑에서 찾거나 캐시에서 찾거나 원본 사용
+            const label = singleValueLabelMap.get(valueStr) || categoryLabelCache[valueStr] || valueStr;
+            valuesMap.set(valueStr, label);
+          }
+        }
+      });
+
+      globalLabelMap[column.columnName] = singleValueLabelMap;
+
+      // value-label 쌍으로 저장하고 라벨 기준 정렬
+      result[column.columnName] = Array.from(valuesMap.entries())
+        .map(([value, label]) => ({ value, label }))
+        .sort((a, b) => a.label.localeCompare(b.label));
     });
 
     return result;
-  }, [data, tableConfig.columns, joinColumnMapping]);
+  }, [data, tableConfig.columns, joinColumnMapping, categoryLabelCache]);
+
+  // 🆕 라벨을 못 찾은 CATEGORY_ 코드들을 API로 조회
+  useEffect(() => {
+    const unlabeledCodes = new Set<string>();
+    
+    // columnUniqueValues에서 라벨이 코드 그대로인 항목 찾기
+    Object.values(columnUniqueValues).forEach(items => {
+      items.forEach(item => {
+        // 라벨에 CATEGORY_가 포함되어 있으면 라벨을 못 찾은 것
+        if (item.label.includes("CATEGORY_")) {
+          // 콤마로 분리해서 개별 코드 추출
+          const codes = item.label.split(",").map(c => c.trim());
+          codes.forEach(code => {
+            if (code.startsWith("CATEGORY_") && !categoryLabelCache[code]) {
+              unlabeledCodes.add(code);
+            }
+          });
+        }
+      });
+    });
+
+    if (unlabeledCodes.size === 0) return;
+
+    // API로 라벨 조회
+    const fetchLabels = async () => {
+      try {
+        const response = await getCategoryLabelsByCodes(Array.from(unlabeledCodes));
+        if (response.success && response.data) {
+          setCategoryLabelCache(prev => ({ ...prev, ...response.data }));
+        }
+      } catch (error) {
+        console.error("카테고리 라벨 조회 실패:", error);
+      }
+    };
+
+    fetchLabels();
+  }, [columnUniqueValues, categoryLabelCache]);
+
+  // 🆕 데이터에서 CATEGORY_ 코드를 찾아 라벨 미리 로드 (테이블 셀 렌더링용)
+  useEffect(() => {
+    if (data.length === 0) return;
+
+    const categoryCodesToFetch = new Set<string>();
+
+    // 모든 데이터 행에서 CATEGORY_ 코드 수집
+    data.forEach((row) => {
+      Object.entries(row).forEach(([key, value]) => {
+        if (value && typeof value === "string") {
+          // 콤마로 구분된 다중 값도 처리
+          const codes = value.split(",").map((v) => v.trim());
+          codes.forEach((code) => {
+            if (code.startsWith("CATEGORY_") && !categoryLabelCache[code]) {
+              categoryCodesToFetch.add(code);
+            }
+          });
+        }
+      });
+    });
+
+    if (categoryCodesToFetch.size === 0) return;
+
+    // API로 라벨 조회
+    const fetchLabels = async () => {
+      try {
+        const response = await getCategoryLabelsByCodes(Array.from(categoryCodesToFetch));
+        if (response.success && response.data && Object.keys(response.data).length > 0) {
+          setCategoryLabelCache((prev) => ({ ...prev, ...response.data }));
+        }
+      } catch (error) {
+        console.error("CATEGORY_ 라벨 조회 실패:", error);
+      }
+    };
+
+    fetchLabels();
+  }, [data, categoryLabelCache]);
 
   // 🆕 헤더 필터 토글
   const toggleHeaderFilter = useCallback((columnName: string, value: string) => {
@@ -2952,7 +3136,6 @@ 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(),
     };
@@ -2973,7 +3156,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     frozenColumnCount,
     showGridLines,
     headerFilters,
-    headerLikeFilters,
     localPageSize,
   ]);
 
@@ -3010,9 +3192,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         });
         setHeaderFilters(filters);
       }
-      if (state.headerLikeFilters) {
-        setHeaderLikeFilters(state.headerLikeFilters);
-      }
     } catch (error) {
       console.error("❌ 테이블 상태 복원 실패:", error);
     }
@@ -3946,7 +4125,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           if (enterRow) {
             const rowKey = getRowKey(enterRow, rowIndex);
             const isCurrentlySelected = selectedRows.has(rowKey);
-            handleRowSelection(rowKey, !isCurrentlySelected);
+            handleRowSelection(rowKey, !isCurrentlySelected, enterRow);
           }
           break;
         case " ": // Space
@@ -3956,7 +4135,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           if (spaceRow) {
             const currentRowKey = getRowKey(spaceRow, rowIndex);
             const isChecked = selectedRows.has(currentRowKey);
-            handleRowSelection(currentRowKey, !isChecked);
+            handleRowSelection(currentRowKey, !isChecked, spaceRow);
           }
           break;
         case "F2":
@@ -4170,7 +4349,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     return (
       <Checkbox
         checked={isChecked}
-        onCheckedChange={(checked) => handleRowSelection(rowKey, checked as boolean)}
+        onCheckedChange={(checked) => handleRowSelection(rowKey, checked as boolean, row)}
         aria-label={`행 ${index + 1} 선택`}
       />
     );
@@ -4459,10 +4638,36 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         case "boolean":
           return value ? "예" : "아니오";
         default:
-          return String(value);
+          // 🆕 CATEGORY_ 코드 자동 변환 (inputType이 category가 아니어도)
+          const strValue = String(value);
+          if (strValue.startsWith("CATEGORY_")) {
+            // rowData에서 _label 필드 찾기
+            if (rowData) {
+              const labelFieldCandidates = [
+                `${column.columnName}_label`,
+                `${column.columnName}_name`,
+                `${column.columnName}_value_label`,
+              ];
+              for (const labelField of labelFieldCandidates) {
+                if (rowData[labelField] && rowData[labelField] !== "") {
+                  return String(rowData[labelField]);
+                }
+              }
+            }
+            // categoryMappings에서 찾기
+            const mapping = categoryMappings[column.columnName];
+            if (mapping && mapping[strValue]) {
+              return mapping[strValue].label;
+            }
+            // categoryLabelCache에서 찾기 (필터용 캐시)
+            if (categoryLabelCache[strValue]) {
+              return categoryLabelCache[strValue];
+            }
+          }
+          return strValue;
       }
     },
-    [columnMeta, joinedColumnMeta, optimizedConvertCode, categoryMappings],
+    [columnMeta, joinedColumnMeta, optimizedConvertCode, categoryMappings, categoryLabelCache],
   );
 
   // ========================================
@@ -4601,9 +4806,22 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       });
       setColumnWidths(newWidths);
 
-      // 틀고정 컬럼 업데이트
+      // 틀고정 컬럼 업데이트 (보이는 컬럼 기준으로 처음 N개를 틀고정)
-      const newFrozenColumns = config.columns.filter((col) => col.frozen).map((col) => col.columnName);
+      // 기존 frozen 개수를 유지하면서, 숨겨진 컬럼을 제외한 보이는 컬럼 중 처음 N개를 틀고정
+      const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : [];
+      const visibleCols = config.columns
+        .filter((col) => col.visible && col.columnName !== "__checkbox__")
+        .map((col) => col.columnName);
+      
+      // 현재 설정된 frozen 컬럼 개수 (체크박스 제외)
+      const currentFrozenCount = config.columns.filter(
+        (col) => col.frozen && col.columnName !== "__checkbox__"
+      ).length;
+      
+      // 보이는 컬럼 중 처음 currentFrozenCount개를 틀고정으로 설정
+      const newFrozenColumns = [...checkboxColumn, ...visibleCols.slice(0, currentFrozenCount)];
       setFrozenColumns(newFrozenColumns);
+      setFrozenColumnCount(currentFrozenCount);
 
       // 그리드선 표시 업데이트
       setShowGridLines(config.showGridLines);
@@ -5647,7 +5865,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             rowSpan={2}
                             className="border-primary/10 border-r px-2 py-1 text-center text-xs font-semibold sm:px-4 sm:text-sm"
                           >
-                            {columnLabels[column.columnName] || column.columnName}
+                            {/* langKey가 있으면 다국어 번역 사용 */}
+                            {(column as any).langKey 
+                              ? getTranslatedText((column as any).langKey, columnLabels[column.columnName] || column.columnName)
+                              : columnLabels[column.columnName] || column.columnName}
                           </th>
                         );
                       }
@@ -5666,13 +5887,18 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   {visibleColumns.map((column, columnIndex) => {
                     const columnWidth = columnWidths[column.columnName];
                     const isFrozen = frozenColumns.includes(column.columnName);
-                    const frozenIndex = frozenColumns.indexOf(column.columnName);
                     
-                    // 틀고정된 컬럼의 left 위치 계산
+                    // 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
+                    // 숨겨진 컬럼은 제외하고 보이는 틀고정 컬럼만 포함
+                    const visibleFrozenColumns = visibleColumns
+                      .filter(col => frozenColumns.includes(col.columnName))
+                      .map(col => col.columnName);
+                    const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
+                    
                     let leftPosition = 0;
                     if (isFrozen && frozenIndex > 0) {
                       for (let i = 0; i < frozenIndex; i++) {
-                        const frozenCol = frozenColumns[i];
+                        const frozenCol = visibleFrozenColumns[i];
                         // 체크박스 컬럼은 48px 고정
                         const frozenColWidth = frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
                         leftPosition += frozenColWidth;
@@ -5738,7 +5964,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 <Lock className="text-muted-foreground h-3 w-3" />
                               </span>
                             )}
-                            <span>{columnLabels[column.columnName] || column.displayName}</span>
+                            <span>
+                              {/* langKey가 있으면 다국어 번역 사용 */}
+                              {(column as any).langKey 
+                                ? getTranslatedText((column as any).langKey, columnLabels[column.columnName] || column.displayName || column.columnName)
+                                : columnLabels[column.columnName] || column.displayName}
+                            </span>
                             {column.sortable !== false && sortColumn === column.columnName && (
                               <span>{sortDirection === "asc" ? "↑" : "↓"}</span>
                             )}
@@ -5759,7 +5990,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 || headerLikeFilters[column.columnName]) && "text-primary bg-primary/10",
+                                        headerFilters[column.columnName]?.size > 0 && "text-primary bg-primary/10",
                                       )}
                                       title="필터"
                                     >
@@ -5767,7 +5998,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                     </button>
                                   </PopoverTrigger>
                                   <PopoverContent
-                                    className="w-56 p-2"
+                                    className="w-48 p-2"
                                     align="start"
                                     onClick={(e) => e.stopPropagation()}
                                   >
@@ -5776,52 +6007,26 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                         <span className="text-xs font-medium">
                                           필터: {columnLabels[column.columnName] || column.displayName}
                                         </span>
-                                        {(headerFilters[column.columnName]?.size > 0 || headerLikeFilters[column.columnName]) && (
+                                        {headerFilters[column.columnName]?.size > 0 && (
                                           <button
-                                            onClick={() => {
+                                            onClick={() => clearHeaderFilter(column.columnName)}
-                                              clearHeaderFilter(column.columnName);
-                                              setHeaderLikeFilters((prev) => {
-                                                const newFilters = { ...prev };
-                                                delete newFilters[column.columnName];
-                                                return newFilters;
-                                              });
-                                            }}
                                             className="text-destructive text-xs hover:underline"
                                           >
                                             초기화
                                           </button>
                                         )}
                                       </div>
-                                      {/* LIKE 검색 입력 필드 */}
+                                      <div className="max-h-48 space-y-1 overflow-y-auto">
-                                      <div className="relative">
+                                        {columnUniqueValues[column.columnName]?.slice(0, 50).map((item) => {
-                                        <Search className="text-muted-foreground absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2" />
+                                          const isSelected = headerFilters[column.columnName]?.has(item.value);
-                                        <input
-                                          type="text"
-                                          placeholder="검색어 입력 (포함)"
-                                          value={headerLikeFilters[column.columnName] || ""}
-                                          onChange={(e) => {
-                                            setHeaderLikeFilters((prev) => ({
-                                              ...prev,
-                                              [column.columnName]: e.target.value,
-                                            }));
-                                          }}
-                                          className="border-input bg-background placeholder:text-muted-foreground h-7 w-full rounded-md border pl-7 pr-2 text-xs focus:outline-none focus:ring-1 focus:ring-primary"
-                                          onClick={(e) => e.stopPropagation()}
-                                        />
-                                      </div>
-                                      {/* 구분선 */}
-                                      <div className="text-muted-foreground border-t pt-2 text-[10px]">또는 값 선택:</div>
-                                      <div className="max-h-40 space-y-1 overflow-y-auto">
-                                        {columnUniqueValues[column.columnName]?.slice(0, 50).map((val) => {
-                                          const isSelected = headerFilters[column.columnName]?.has(val);
                                           return (
                                             <div
-                                              key={val}
+                                              key={item.value}
                                               className={cn(
                                                 "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1 text-xs",
                                                 isSelected && "bg-primary/10",
                                               )}
-                                              onClick={() => toggleHeaderFilter(column.columnName, val)}
+                                              onClick={() => toggleHeaderFilter(column.columnName, item.value)}
                                             >
                                               <div
                                                 className={cn(
@@ -5831,7 +6036,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                               >
                                                 {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
                                               </div>
-                                              <span className="truncate">{val || "(빈 값)"}</span>
+                                              <span className="truncate">{item.label || "(빈 값)"}</span>
                                             </div>
                                           );
                                         })}
@@ -6004,13 +6209,17 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 const isNumeric = inputType === "number" || inputType === "decimal";
 
                                 const isFrozen = frozenColumns.includes(column.columnName);
-                                const frozenIndex = frozenColumns.indexOf(column.columnName);
                                 
-                                // 틀고정된 컬럼의 left 위치 계산
+                                // 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
+                                const visibleFrozenColumns = visibleColumns
+                                  .filter(col => frozenColumns.includes(col.columnName))
+                                  .map(col => col.columnName);
+                                const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
+
                                 let leftPosition = 0;
                                 if (isFrozen && frozenIndex > 0) {
                                   for (let i = 0; i < frozenIndex; i++) {
-                                    const frozenCol = frozenColumns[i];
+                                    const frozenCol = visibleFrozenColumns[i];
                                     // 체크박스 컬럼은 48px 고정
                                     const frozenColWidth =
                                       frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
@@ -6157,7 +6366,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             const isNumeric = inputType === "number" || inputType === "decimal";
 
                             const isFrozen = frozenColumns.includes(column.columnName);
-                            const frozenIndex = frozenColumns.indexOf(column.columnName);
+                            
+                            // 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
+                            const visibleFrozenColumns = visibleColumns
+                              .filter(col => frozenColumns.includes(col.columnName))
+                              .map(col => col.columnName);
+                            const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
 
                             // 셀 포커스 상태
                             const isCellFocused = focusedCell?.rowIndex === index && focusedCell?.colIndex === colIndex;
@@ -6171,11 +6385,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             // 🆕 검색 하이라이트 여부
                             const isSearchHighlighted = searchHighlights.has(`${index}-${colIndex}`);
 
-                            // 틀고정된 컬럼의 left 위치 계산
                             let leftPosition = 0;
                             if (isFrozen && frozenIndex > 0) {
                               for (let i = 0; i < frozenIndex; i++) {
-                                const frozenCol = frozenColumns[i];
+                                const frozenCol = visibleFrozenColumns[i];
                                 // 체크박스 컬럼은 48px 고정
                                 const frozenColWidth =
                                   frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
@@ -6335,13 +6548,17 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                       const summary = summaryData[column.columnName];
                       const columnWidth = columnWidths[column.columnName];
                       const isFrozen = frozenColumns.includes(column.columnName);
-                      const frozenIndex = frozenColumns.indexOf(column.columnName);
                       
-                      // 틀고정된 컬럼의 left 위치 계산
+                      // 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
+                      const visibleFrozenColumns = visibleColumns
+                        .filter(col => frozenColumns.includes(col.columnName))
+                        .map(col => col.columnName);
+                      const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
+
                       let leftPosition = 0;
                       if (isFrozen && frozenIndex > 0) {
                         for (let i = 0; i < frozenIndex; i++) {
-                          const frozenCol = frozenColumns[i];
+                          const frozenCol = visibleFrozenColumns[i];
                           // 체크박스 컬럼은 48px 고정
                           const frozenColWidth = frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
                           leftPosition += frozenColWidth;