diff --git a/PLAN.MD b/PLAN.MD index 0ca6521d..271d0af1 100644 --- a/PLAN.MD +++ b/PLAN.MD @@ -1,7 +1,7 @@ -# 프로젝트: 화면 관리 기능 개선 (복제/삭제/그룹 관리) +# 프로젝트: 화면 관리 기능 개선 (복제/삭제/그룹 관리/테이블 설정) ## 개요 -화면 관리 시스템의 복제 및 삭제 기능을 전면 개선하여, 단일 화면 복제, 그룹(폴더) 전체 복제, 정렬 순서 유지, 일괄 이름 변경 등 다양한 고급 기능을 지원합니다. +화면 관리 시스템의 복제, 삭제, 수정, 테이블 설정 기능을 전면 개선하여 효율적인 화면 관리를 지원합니다. ## 핵심 기능 @@ -15,47 +15,54 @@ ### 2. 그룹(폴더) 전체 복제 - [x] 대분류 폴더 복제 시 모든 하위 폴더 + 화면 재귀적 복제 - [x] 정렬 순서(display_order) 유지 - - 그룹 생성 시 원본 display_order 전달 - - 화면 추가 시 원본 display_order 유지 - - 하위 그룹들 display_order 순으로 정렬 후 복제 - [x] 대분류(최상위 그룹) 복제 시 경고 문구 표시 -- [x] 정렬 순서 입력 필드 추가 (사용자가 직접 수정 가능) -- [x] 원본 그룹 정보 표시 개선 - - 직접 포함 화면 수 - - 하위 그룹 수 - - 복제될 총 화면 수 (하위 그룹 포함) +- [x] 정렬 순서 입력 필드 추가 +- [x] 복제 모드 선택: 전체(폴더+화면), 폴더만, 화면만 +- [x] 모달 스크롤 지원 (max-h-[90vh] overflow-y-auto) ### 3. 고급 옵션: 이름 일괄 변경 -- [x] 삭제할 텍스트 지정 (모든 폴더/화면 이름에서 제거) -- [x] 추가할 접미사 지정 (기본값: " (복제)") +- [x] 찾을 텍스트 / 대체할 텍스트 (Find & Replace) - [x] 미리보기 기능 ### 4. 삭제 기능 - [x] 단일 화면 삭제 (휴지통으로 이동) -- [x] 그룹 삭제 시 옵션 선택 - - "화면도 함께 삭제" 체크박스 - - 체크 시: 그룹 + 포함된 화면 모두 삭제 - - 미체크 시: 화면은 "미분류"로 이동 +- [x] 그룹 삭제 (화면 함께 삭제 옵션) +- [x] 삭제 시 로딩 프로그레스 바 표시 -### 5. 회사 코드 지원 (최고 관리자) +### 5. 화면 수정 기능 +- [x] 우클릭 "수정" 메뉴로 화면 이름/그룹/역할/정렬 순서 변경 +- [x] 그룹 추가/수정 시 상위 그룹 기반 자동 회사 코드 설정 + +### 6. 테이블 설정 기능 (TableSettingModal) +- [x] 화면 설정 모달에 "테이블 설정" 탭 추가 +- [x] 입력 타입 변경 시 관련 참조 필드 자동 초기화 + - 엔티티→텍스트: referenceTable, referenceColumn, displayColumn 초기화 + - 코드→다른 타입: codeCategory, codeValue 초기화 +- [x] 데이터 일관성 유지 (inputType ↔ referenceTable 연동) +- [x] 조인 배지 단일화 (FK 배지 제거, 조인 배지만 표시) + +### 7. 회사 코드 지원 (최고 관리자) - [x] 대상 회사 선택 가능 -- [x] 복제된 그룹/화면에 선택한 회사 코드 적용 +- [x] 상위 그룹 선택 시 자동 회사 코드 설정 ## 관련 파일 -- `frontend/components/screen/CopyScreenModal.tsx` - 복제 모달 (화면/그룹 통합) +- `frontend/components/screen/CopyScreenModal.tsx` - 복제 모달 - `frontend/components/screen/ScreenGroupTreeView.tsx` - 트리 뷰 + 컨텍스트 메뉴 -- `frontend/lib/api/screen.ts` - 화면 API (복제, 삭제) +- `frontend/components/screen/TableSettingModal.tsx` - 테이블 설정 모달 +- `frontend/components/screen/ScreenSettingModal.tsx` - 화면 설정 모달 (테이블 설정 탭 포함) +- `frontend/lib/api/screen.ts` - 화면 API - `frontend/lib/api/screenGroup.ts` - 그룹 API +- `frontend/lib/api/tableManagement.ts` - 테이블 관리 API ## 진행 상태 - [완료] 단일 화면 복제 + 새로고침 - [완료] 그룹 전체 복제 (재귀적) -- [완료] 정렬 순서(display_order) 유지 -- [완료] 대분류 경고 문구 -- [완료] 정렬 순서 입력 필드 -- [완료] 고급 옵션: 이름 일괄 변경 -- [완료] 단일 화면 삭제 -- [완료] 그룹 삭제 (화면 함께 삭제 옵션) +- [완료] 고급 옵션: 이름 일괄 변경 (Find & Replace) +- [완료] 단일 화면/그룹 삭제 + 로딩 프로그레스 +- [완료] 화면 수정 (이름/그룹/역할/순서) +- [완료] 테이블 설정 탭 추가 +- [완료] 입력 타입 변경 시 관련 필드 초기화 +- [완료] 그룹 복제 모달 스크롤 문제 수정 --- diff --git a/backend-node/src/controllers/adminController.ts b/backend-node/src/controllers/adminController.ts index ce7b9c7f..c86b0064 100644 --- a/backend-node/src/controllers/adminController.ts +++ b/backend-node/src/controllers/adminController.ts @@ -1417,6 +1417,75 @@ export async function updateMenu( } } +/** + * 재귀적으로 모든 하위 메뉴 ID를 수집하는 헬퍼 함수 + */ +async function collectAllChildMenuIds(parentObjid: number): Promise { + const allIds: number[] = []; + + // 직접 자식 메뉴들 조회 + const children = await query( + `SELECT objid FROM menu_info WHERE parent_obj_id = $1`, + [parentObjid] + ); + + for (const child of children) { + allIds.push(child.objid); + // 자식의 자식들도 재귀적으로 수집 + const grandChildren = await collectAllChildMenuIds(child.objid); + allIds.push(...grandChildren); + } + + return allIds; +} + +/** + * 메뉴 및 관련 데이터 정리 헬퍼 함수 + */ +async function cleanupMenuRelatedData(menuObjid: number): Promise { + // 1. category_column_mapping에서 menu_objid를 NULL로 설정 + await query( + `UPDATE category_column_mapping SET menu_objid = NULL WHERE menu_objid = $1`, + [menuObjid] + ); + + // 2. code_category에서 menu_objid를 NULL로 설정 + await query( + `UPDATE code_category SET menu_objid = NULL WHERE menu_objid = $1`, + [menuObjid] + ); + + // 3. code_info에서 menu_objid를 NULL로 설정 + await query( + `UPDATE code_info SET menu_objid = NULL WHERE menu_objid = $1`, + [menuObjid] + ); + + // 4. numbering_rules에서 menu_objid를 NULL로 설정 + await query( + `UPDATE numbering_rules SET menu_objid = NULL WHERE menu_objid = $1`, + [menuObjid] + ); + + // 5. rel_menu_auth에서 관련 권한 삭제 + await query( + `DELETE FROM rel_menu_auth WHERE menu_objid = $1`, + [menuObjid] + ); + + // 6. screen_menu_assignments에서 관련 할당 삭제 + await query( + `DELETE FROM screen_menu_assignments WHERE menu_objid = $1`, + [menuObjid] + ); + + // 7. screen_groups에서 menu_objid를 NULL로 설정 + await query( + `UPDATE screen_groups SET menu_objid = NULL WHERE menu_objid = $1`, + [menuObjid] + ); +} + /** * 메뉴 삭제 */ @@ -1443,7 +1512,7 @@ export async function deleteMenu( // 삭제하려는 메뉴 조회 const currentMenu = await queryOne( - `SELECT objid, company_code FROM menu_info WHERE objid = $1`, + `SELECT objid, company_code, menu_name_kor FROM menu_info WHERE objid = $1`, [Number(menuId)] ); @@ -1478,67 +1547,50 @@ export async function deleteMenu( } } - // 외래키 제약 조건이 있는 관련 테이블 데이터 먼저 정리 const menuObjid = Number(menuId); - // 1. category_column_mapping에서 menu_objid를 NULL로 설정 - await query( - `UPDATE category_column_mapping SET menu_objid = NULL WHERE menu_objid = $1`, - [menuObjid] - ); + // 하위 메뉴들 재귀적으로 수집 + const childMenuIds = await collectAllChildMenuIds(menuObjid); + const allMenuIdsToDelete = [menuObjid, ...childMenuIds]; - // 2. code_category에서 menu_objid를 NULL로 설정 - await query( - `UPDATE code_category SET menu_objid = NULL WHERE menu_objid = $1`, - [menuObjid] - ); - - // 3. code_info에서 menu_objid를 NULL로 설정 - await query( - `UPDATE code_info SET menu_objid = NULL WHERE menu_objid = $1`, - [menuObjid] - ); - - // 4. numbering_rules에서 menu_objid를 NULL로 설정 - await query( - `UPDATE numbering_rules SET menu_objid = NULL WHERE menu_objid = $1`, - [menuObjid] - ); - - // 5. rel_menu_auth에서 관련 권한 삭제 - await query( - `DELETE FROM rel_menu_auth WHERE menu_objid = $1`, - [menuObjid] - ); - - // 6. screen_menu_assignments에서 관련 할당 삭제 - await query( - `DELETE FROM screen_menu_assignments WHERE menu_objid = $1`, - [menuObjid] - ); + logger.info(`메뉴 삭제 대상: 본인(${menuObjid}) + 하위 메뉴 ${childMenuIds.length}개`, { + menuName: currentMenu.menu_name_kor, + totalCount: allMenuIdsToDelete.length, + childMenuIds, + }); - logger.info("메뉴 관련 데이터 정리 완료", { menuObjid }); + // 모든 삭제 대상 메뉴에 대해 관련 데이터 정리 + for (const objid of allMenuIdsToDelete) { + await cleanupMenuRelatedData(objid); + } - // Raw Query를 사용한 메뉴 삭제 - const [deletedMenu] = await query( - `DELETE FROM menu_info WHERE objid = $1 RETURNING *`, - [menuObjid] - ); + logger.info("메뉴 관련 데이터 정리 완료", { + menuObjid, + totalCleaned: allMenuIdsToDelete.length + }); - logger.info("메뉴 삭제 성공", { deletedMenu }); + // 하위 메뉴부터 역순으로 삭제 (외래키 제약 회피) + // 가장 깊은 하위부터 삭제해야 하므로 역순으로 + const reversedIds = [...allMenuIdsToDelete].reverse(); + + for (const objid of reversedIds) { + await query(`DELETE FROM menu_info WHERE objid = $1`, [objid]); + } + + logger.info("메뉴 삭제 성공", { + deletedMenuObjid: menuObjid, + deletedMenuName: currentMenu.menu_name_kor, + totalDeleted: allMenuIdsToDelete.length, + }); const response: ApiResponse = { success: true, - message: "메뉴가 성공적으로 삭제되었습니다.", + message: `메뉴가 성공적으로 삭제되었습니다. (하위 메뉴 ${childMenuIds.length}개 포함)`, data: { - objid: deletedMenu.objid.toString(), - menuNameKor: deletedMenu.menu_name_kor, - menuNameEng: deletedMenu.menu_name_eng, - menuUrl: deletedMenu.menu_url, - menuDesc: deletedMenu.menu_desc, - status: deletedMenu.status, - writer: deletedMenu.writer, - regdate: new Date(deletedMenu.regdate).toISOString(), + objid: menuObjid.toString(), + menuNameKor: currentMenu.menu_name_kor, + deletedCount: allMenuIdsToDelete.length, + deletedChildCount: childMenuIds.length, }, }; @@ -1623,18 +1675,49 @@ export async function deleteMenusBatch( } } + // 모든 삭제 대상 메뉴 ID 수집 (하위 메뉴 포함) + const allMenuIdsToDelete = new Set(); + + for (const menuId of menuIds) { + const objid = Number(menuId); + allMenuIdsToDelete.add(objid); + + // 하위 메뉴들 재귀적으로 수집 + const childMenuIds = await collectAllChildMenuIds(objid); + childMenuIds.forEach(id => allMenuIdsToDelete.add(Number(id))); + } + + const allIdsArray = Array.from(allMenuIdsToDelete); + + logger.info(`메뉴 일괄 삭제 대상: 선택 ${menuIds.length}개 + 하위 메뉴 포함 총 ${allIdsArray.length}개`, { + selectedMenuIds: menuIds, + totalWithChildren: allIdsArray.length, + }); + + // 모든 삭제 대상 메뉴에 대해 관련 데이터 정리 + for (const objid of allIdsArray) { + await cleanupMenuRelatedData(objid); + } + + logger.info("메뉴 관련 데이터 정리 완료", { + totalCleaned: allIdsArray.length + }); + // Raw Query를 사용한 메뉴 일괄 삭제 let deletedCount = 0; let failedCount = 0; const deletedMenus: any[] = []; const failedMenuIds: string[] = []; + // 하위 메뉴부터 삭제하기 위해 역순으로 정렬 + const reversedIds = [...allIdsArray].reverse(); + // 각 메뉴 ID에 대해 삭제 시도 - for (const menuId of menuIds) { + for (const menuObjid of reversedIds) { try { const result = await query( `DELETE FROM menu_info WHERE objid = $1 RETURNING *`, - [Number(menuId)] + [menuObjid] ); if (result.length > 0) { @@ -1645,20 +1728,20 @@ export async function deleteMenusBatch( }); } else { failedCount++; - failedMenuIds.push(menuId); + failedMenuIds.push(String(menuObjid)); } } catch (error) { - logger.error(`메뉴 삭제 실패 (ID: ${menuId}):`, error); + logger.error(`메뉴 삭제 실패 (ID: ${menuObjid}):`, error); failedCount++; - failedMenuIds.push(menuId); + failedMenuIds.push(String(menuObjid)); } } logger.info("메뉴 일괄 삭제 완료", { - total: menuIds.length, + requested: menuIds.length, + totalWithChildren: allIdsArray.length, deletedCount, failedCount, - deletedMenus, failedMenuIds, }); diff --git a/backend-node/src/controllers/screenGroupController.ts b/backend-node/src/controllers/screenGroupController.ts index 569fe793..43ccce32 100644 --- a/backend-node/src/controllers/screenGroupController.ts +++ b/backend-node/src/controllers/screenGroupController.ts @@ -1,6 +1,13 @@ import { Request, Response } from "express"; import { getPool } from "../database/db"; import { logger } from "../utils/logger"; +import { AuthenticatedRequest } from "../types/auth"; +import { + syncScreenGroupsToMenu, + syncMenuToScreenGroups, + getSyncStatus, + syncAllCompanies, +} from "../services/menuScreenSyncService"; // pool 인스턴스 가져오기 const pool = getPool(); @@ -10,9 +17,9 @@ const pool = getPool(); // ============================================================ // 화면 그룹 목록 조회 -export const getScreenGroups = async (req: Request, res: Response) => { +export const getScreenGroups = async (req: AuthenticatedRequest, res: Response) => { try { - const companyCode = (req.user as any).companyCode; + const companyCode = req.user?.companyCode || "*"; const { page = 1, size = 20, searchTerm } = req.query; const offset = (parseInt(page as string) - 1) * parseInt(size as string); @@ -84,10 +91,10 @@ export const getScreenGroups = async (req: Request, res: Response) => { }; // 화면 그룹 상세 조회 -export const getScreenGroup = async (req: Request, res: Response) => { +export const getScreenGroup = async (req: AuthenticatedRequest, res: Response) => { try { const { id } = req.params; - const companyCode = (req.user as any).companyCode; + const companyCode = req.user?.companyCode || "*"; let query = ` SELECT sg.*, @@ -130,10 +137,10 @@ export const getScreenGroup = async (req: Request, res: Response) => { }; // 화면 그룹 생성 -export const createScreenGroup = async (req: Request, res: Response) => { +export const createScreenGroup = async (req: AuthenticatedRequest, res: Response) => { try { - const userCompanyCode = (req.user as any).companyCode; - const userId = (req.user as any).userId; + const userCompanyCode = req.user?.companyCode || "*"; + const userId = req.user?.userId || ""; const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body; if (!group_name || !group_code) { @@ -204,10 +211,10 @@ export const createScreenGroup = async (req: Request, res: Response) => { }; // 화면 그룹 수정 -export const updateScreenGroup = async (req: Request, res: Response) => { +export const updateScreenGroup = async (req: AuthenticatedRequest, res: Response) => { try { const { id } = req.params; - const userCompanyCode = (req.user as any).companyCode; + const userCompanyCode = req.user?.companyCode || "*"; const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body; // 회사 코드 결정: 최고 관리자가 특정 회사를 선택한 경우 해당 회사로, 아니면 현재 그룹의 회사 유지 @@ -293,11 +300,36 @@ export const updateScreenGroup = async (req: Request, res: Response) => { }; // 화면 그룹 삭제 -export const deleteScreenGroup = async (req: Request, res: Response) => { +export const deleteScreenGroup = async (req: AuthenticatedRequest, res: Response) => { + const client = await pool.connect(); try { const { id } = req.params; - const companyCode = (req.user as any).companyCode; + const companyCode = req.user?.companyCode || "*"; + await client.query('BEGIN'); + + // 1. 삭제할 그룹과 하위 그룹 ID 수집 (CASCADE 삭제 대상) + const childGroupsResult = await client.query(` + WITH RECURSIVE child_groups AS ( + SELECT id FROM screen_groups WHERE id = $1 + UNION ALL + SELECT sg.id FROM screen_groups sg + JOIN child_groups cg ON sg.parent_group_id = cg.id + ) + SELECT id FROM child_groups + `, [id]); + const groupIdsToDelete = childGroupsResult.rows.map((r: any) => r.id); + + // 2. menu_info에서 삭제될 screen_group 참조를 NULL로 정리 + if (groupIdsToDelete.length > 0) { + await client.query(` + UPDATE menu_info + SET screen_group_id = NULL + WHERE screen_group_id = ANY($1::int[]) + `, [groupIdsToDelete]); + } + + // 3. screen_groups 삭제 let query = `DELETE FROM screen_groups WHERE id = $1`; const params: any[] = [id]; @@ -308,18 +340,24 @@ export const deleteScreenGroup = async (req: Request, res: Response) => { query += " RETURNING id"; - const result = await pool.query(query, params); + const result = await client.query(query, params); if (result.rows.length === 0) { + await client.query('ROLLBACK'); return res.status(404).json({ success: false, message: "화면 그룹을 찾을 수 없거나 권한이 없습니다." }); } - logger.info("화면 그룹 삭제", { companyCode, groupId: id }); + await client.query('COMMIT'); + + logger.info("화면 그룹 삭제", { companyCode, groupId: id, cleanedRefs: groupIdsToDelete.length }); res.json({ success: true, message: "화면 그룹이 삭제되었습니다." }); } catch (error: any) { + await client.query('ROLLBACK'); logger.error("화면 그룹 삭제 실패:", error); res.status(500).json({ success: false, message: "화면 그룹 삭제에 실패했습니다.", error: error.message }); + } finally { + client.release(); } }; @@ -329,10 +367,10 @@ export const deleteScreenGroup = async (req: Request, res: Response) => { // ============================================================ // 그룹에 화면 추가 -export const addScreenToGroup = async (req: Request, res: Response) => { +export const addScreenToGroup = async (req: AuthenticatedRequest, res: Response) => { try { - const companyCode = (req.user as any).companyCode; - const userId = (req.user as any).userId; + const companyCode = req.user?.companyCode || "*"; + const userId = req.user?.userId || ""; const { group_id, screen_id, screen_role, display_order, is_default } = req.body; if (!group_id || !screen_id) { @@ -369,10 +407,10 @@ export const addScreenToGroup = async (req: Request, res: Response) => { }; // 그룹에서 화면 제거 -export const removeScreenFromGroup = async (req: Request, res: Response) => { +export const removeScreenFromGroup = async (req: AuthenticatedRequest, res: Response) => { try { const { id } = req.params; - const companyCode = (req.user as any).companyCode; + const companyCode = req.user?.companyCode || "*"; let query = `DELETE FROM screen_group_screens WHERE id = $1`; const params: any[] = [id]; @@ -400,10 +438,10 @@ export const removeScreenFromGroup = async (req: Request, res: Response) => { }; // 그룹 내 화면 순서/역할 수정 -export const updateScreenInGroup = async (req: Request, res: Response) => { +export const updateScreenInGroup = async (req: AuthenticatedRequest, res: Response) => { try { const { id } = req.params; - const companyCode = (req.user as any).companyCode; + const companyCode = req.user?.companyCode || "*"; const { screen_role, display_order, is_default } = req.body; let query = ` @@ -439,9 +477,9 @@ export const updateScreenInGroup = async (req: Request, res: Response) => { // ============================================================ // 화면 필드 조인 목록 조회 -export const getFieldJoins = async (req: Request, res: Response) => { +export const getFieldJoins = async (req: AuthenticatedRequest, res: Response) => { try { - const companyCode = (req.user as any).companyCode; + const companyCode = req.user?.companyCode || "*"; const { screen_id } = req.query; let query = ` @@ -480,10 +518,10 @@ export const getFieldJoins = async (req: Request, res: Response) => { }; // 화면 필드 조인 생성 -export const createFieldJoin = async (req: Request, res: Response) => { +export const createFieldJoin = async (req: AuthenticatedRequest, res: Response) => { try { - const companyCode = (req.user as any).companyCode; - const userId = (req.user as any).userId; + const companyCode = req.user?.companyCode || "*"; + const userId = req.user?.userId || ""; const { screen_id, layout_id, component_id, field_name, save_table, save_column, join_table, join_column, display_column, @@ -521,10 +559,10 @@ export const createFieldJoin = async (req: Request, res: Response) => { }; // 화면 필드 조인 수정 -export const updateFieldJoin = async (req: Request, res: Response) => { +export const updateFieldJoin = async (req: AuthenticatedRequest, res: Response) => { try { const { id } = req.params; - const companyCode = (req.user as any).companyCode; + const companyCode = req.user?.companyCode || "*"; const { layout_id, component_id, field_name, save_table, save_column, join_table, join_column, display_column, @@ -566,10 +604,10 @@ export const updateFieldJoin = async (req: Request, res: Response) => { }; // 화면 필드 조인 삭제 -export const deleteFieldJoin = async (req: Request, res: Response) => { +export const deleteFieldJoin = async (req: AuthenticatedRequest, res: Response) => { try { const { id } = req.params; - const companyCode = (req.user as any).companyCode; + const companyCode = req.user?.companyCode || "*"; let query = `DELETE FROM screen_field_joins WHERE id = $1`; const params: any[] = [id]; @@ -600,9 +638,9 @@ export const deleteFieldJoin = async (req: Request, res: Response) => { // ============================================================ // 데이터 흐름 목록 조회 -export const getDataFlows = async (req: Request, res: Response) => { +export const getDataFlows = async (req: AuthenticatedRequest, res: Response) => { try { - const companyCode = (req.user as any).companyCode; + const companyCode = req.user?.companyCode || "*"; const { group_id, source_screen_id } = req.query; let query = ` @@ -650,10 +688,10 @@ export const getDataFlows = async (req: Request, res: Response) => { }; // 데이터 흐름 생성 -export const createDataFlow = async (req: Request, res: Response) => { +export const createDataFlow = async (req: AuthenticatedRequest, res: Response) => { try { - const companyCode = (req.user as any).companyCode; - const userId = (req.user as any).userId; + const companyCode = req.user?.companyCode || "*"; + const userId = req.user?.userId || ""; const { group_id, source_screen_id, source_action, target_screen_id, target_action, data_mapping, flow_type, flow_label, condition_expression, is_active @@ -689,10 +727,10 @@ export const createDataFlow = async (req: Request, res: Response) => { }; // 데이터 흐름 수정 -export const updateDataFlow = async (req: Request, res: Response) => { +export const updateDataFlow = async (req: AuthenticatedRequest, res: Response) => { try { const { id } = req.params; - const companyCode = (req.user as any).companyCode; + const companyCode = req.user?.companyCode || "*"; const { group_id, source_screen_id, source_action, target_screen_id, target_action, data_mapping, flow_type, flow_label, condition_expression, is_active @@ -732,10 +770,10 @@ export const updateDataFlow = async (req: Request, res: Response) => { }; // 데이터 흐름 삭제 -export const deleteDataFlow = async (req: Request, res: Response) => { +export const deleteDataFlow = async (req: AuthenticatedRequest, res: Response) => { try { const { id } = req.params; - const companyCode = (req.user as any).companyCode; + const companyCode = req.user?.companyCode || "*"; let query = `DELETE FROM screen_data_flows WHERE id = $1`; const params: any[] = [id]; @@ -766,9 +804,9 @@ export const deleteDataFlow = async (req: Request, res: Response) => { // ============================================================ // 화면-테이블 관계 목록 조회 -export const getTableRelations = async (req: Request, res: Response) => { +export const getTableRelations = async (req: AuthenticatedRequest, res: Response) => { try { - const companyCode = (req.user as any).companyCode; + const companyCode = req.user?.companyCode || "*"; const { screen_id, group_id } = req.query; let query = ` @@ -815,10 +853,10 @@ export const getTableRelations = async (req: Request, res: Response) => { }; // 화면-테이블 관계 생성 -export const createTableRelation = async (req: Request, res: Response) => { +export const createTableRelation = async (req: AuthenticatedRequest, res: Response) => { try { - const companyCode = (req.user as any).companyCode; - const userId = (req.user as any).userId; + const companyCode = req.user?.companyCode || "*"; + const userId = req.user?.userId || ""; const { group_id, screen_id, table_name, relation_type, crud_operations, description, is_active } = req.body; if (!screen_id || !table_name) { @@ -848,10 +886,10 @@ export const createTableRelation = async (req: Request, res: Response) => { }; // 화면-테이블 관계 수정 -export const updateTableRelation = async (req: Request, res: Response) => { +export const updateTableRelation = async (req: AuthenticatedRequest, res: Response) => { try { const { id } = req.params; - const companyCode = (req.user as any).companyCode; + const companyCode = req.user?.companyCode || "*"; const { group_id, table_name, relation_type, crud_operations, description, is_active } = req.body; let query = ` @@ -883,10 +921,10 @@ export const updateTableRelation = async (req: Request, res: Response) => { }; // 화면-테이블 관계 삭제 -export const deleteTableRelation = async (req: Request, res: Response) => { +export const deleteTableRelation = async (req: AuthenticatedRequest, res: Response) => { try { const { id } = req.params; - const companyCode = (req.user as any).companyCode; + const companyCode = req.user?.companyCode || "*"; let query = `DELETE FROM screen_table_relations WHERE id = $1`; const params: any[] = [id]; @@ -916,7 +954,7 @@ export const deleteTableRelation = async (req: Request, res: Response) => { // ============================================================ // 화면 레이아웃 요약 조회 (위젯 타입별 개수, 라벨 목록) -export const getScreenLayoutSummary = async (req: Request, res: Response) => { +export const getScreenLayoutSummary = async (req: AuthenticatedRequest, res: Response) => { try { const { screenId } = req.params; @@ -984,7 +1022,7 @@ export const getScreenLayoutSummary = async (req: Request, res: Response) => { }; // 여러 화면의 레이아웃 요약 일괄 조회 (미니어처 렌더링용 좌표 포함) -export const getMultipleScreenLayoutSummary = async (req: Request, res: Response) => { +export const getMultipleScreenLayoutSummary = async (req: AuthenticatedRequest, res: Response) => { try { const { screenIds } = req.body; @@ -1184,7 +1222,7 @@ export const getMultipleScreenLayoutSummary = async (req: Request, res: Response // ============================================================ // 여러 화면의 서브 테이블 정보 조회 (메인 테이블 → 서브 테이블 관계) -export const getScreenSubTables = async (req: Request, res: Response) => { +export const getScreenSubTables = async (req: AuthenticatedRequest, res: Response) => { try { const { screenIds } = req.body; @@ -2014,3 +2052,202 @@ export const getScreenSubTables = async (req: Request, res: Response) => { } }; + +// ============================================================ +// 메뉴-화면그룹 동기화 API +// ============================================================ + +/** + * 화면관리 → 메뉴 동기화 + * screen_groups를 menu_info로 동기화 + */ +export const syncScreenGroupsToMenuController = async (req: AuthenticatedRequest, res: Response) => { + try { + const userCompanyCode = req.user?.companyCode || "*"; + const userId = req.user?.userId || ""; + const { targetCompanyCode } = req.body; + + // 최고 관리자가 특정 회사를 지정한 경우 해당 회사로 + let companyCode = userCompanyCode; + if (userCompanyCode === "*" && targetCompanyCode) { + companyCode = targetCompanyCode; + } + + // 최고 관리자(*)는 회사를 지정해야 함 + if (companyCode === "*") { + return res.status(400).json({ + success: false, + message: "동기화할 회사를 선택해주세요.", + }); + } + + logger.info("화면관리 → 메뉴 동기화 요청", { companyCode, userId }); + + const result = await syncScreenGroupsToMenu(companyCode, userId); + + if (!result.success) { + return res.status(500).json({ + success: false, + message: "동기화 중 오류가 발생했습니다.", + errors: result.errors, + }); + } + + res.json({ + success: true, + message: `동기화 완료: 생성 ${result.created}개, 연결 ${result.linked}개, 스킵 ${result.skipped}개`, + data: result, + }); + } catch (error: any) { + logger.error("화면관리 → 메뉴 동기화 실패:", error); + res.status(500).json({ + success: false, + message: "동기화에 실패했습니다.", + error: error.message, + }); + } +}; + +/** + * 메뉴 → 화면관리 동기화 + * menu_info를 screen_groups로 동기화 + */ +export const syncMenuToScreenGroupsController = async (req: AuthenticatedRequest, res: Response) => { + try { + const userCompanyCode = req.user?.companyCode || "*"; + const userId = req.user?.userId || ""; + const { targetCompanyCode } = req.body; + + // 최고 관리자가 특정 회사를 지정한 경우 해당 회사로 + let companyCode = userCompanyCode; + if (userCompanyCode === "*" && targetCompanyCode) { + companyCode = targetCompanyCode; + } + + // 최고 관리자(*)는 회사를 지정해야 함 + if (companyCode === "*") { + return res.status(400).json({ + success: false, + message: "동기화할 회사를 선택해주세요.", + }); + } + + logger.info("메뉴 → 화면관리 동기화 요청", { companyCode, userId }); + + const result = await syncMenuToScreenGroups(companyCode, userId); + + if (!result.success) { + return res.status(500).json({ + success: false, + message: "동기화 중 오류가 발생했습니다.", + errors: result.errors, + }); + } + + res.json({ + success: true, + message: `동기화 완료: 생성 ${result.created}개, 연결 ${result.linked}개, 스킵 ${result.skipped}개`, + data: result, + }); + } catch (error: any) { + logger.error("메뉴 → 화면관리 동기화 실패:", error); + res.status(500).json({ + success: false, + message: "동기화에 실패했습니다.", + error: error.message, + }); + } +}; + +/** + * 동기화 상태 조회 + */ +export const getSyncStatusController = async (req: AuthenticatedRequest, res: Response) => { + try { + const userCompanyCode = req.user?.companyCode || "*"; + const { targetCompanyCode } = req.query; + + // 최고 관리자가 특정 회사를 지정한 경우 해당 회사로 + let companyCode = userCompanyCode; + if (userCompanyCode === "*" && targetCompanyCode) { + companyCode = targetCompanyCode as string; + } + + // 최고 관리자(*)는 회사를 지정해야 함 + if (companyCode === "*") { + return res.status(400).json({ + success: false, + message: "조회할 회사를 선택해주세요.", + }); + } + + const status = await getSyncStatus(companyCode); + + res.json({ + success: true, + data: status, + }); + } catch (error: any) { + logger.error("동기화 상태 조회 실패:", error); + res.status(500).json({ + success: false, + message: "동기화 상태 조회에 실패했습니다.", + error: error.message, + }); + } +}; + +/** + * 전체 회사 동기화 + * 모든 회사에 대해 양방향 동기화 수행 (최고 관리자만) + */ +export const syncAllCompaniesController = async (req: AuthenticatedRequest, res: Response) => { + try { + const userCompanyCode = req.user?.companyCode || "*"; + const userId = req.user?.userId || ""; + + // 최고 관리자만 전체 동기화 가능 + if (userCompanyCode !== "*") { + return res.status(403).json({ + success: false, + message: "전체 동기화는 최고 관리자만 수행할 수 있습니다.", + }); + } + + logger.info("전체 회사 동기화 요청", { userId }); + + const result = await syncAllCompanies(userId); + + if (!result.success) { + return res.status(500).json({ + success: false, + message: "전체 동기화 중 오류가 발생했습니다.", + }); + } + + // 결과 요약 + const totalCreated = result.results.reduce((sum, r) => sum + r.created, 0); + const totalLinked = result.results.reduce((sum, r) => sum + r.linked, 0); + + res.json({ + success: true, + message: `전체 동기화 완료: ${result.totalCompanies}개 회사 중 ${result.successCount}개 성공`, + data: { + totalCompanies: result.totalCompanies, + successCount: result.successCount, + failedCount: result.failedCount, + totalCreated, + totalLinked, + details: result.results, + }, + }); + } catch (error: any) { + logger.error("전체 회사 동기화 실패:", error); + res.status(500).json({ + success: false, + message: "전체 동기화에 실패했습니다.", + error: error.message, + }); + } +}; + diff --git a/backend-node/src/routes/screenGroupRoutes.ts b/backend-node/src/routes/screenGroupRoutes.ts index d4980fe8..614e6d61 100644 --- a/backend-node/src/routes/screenGroupRoutes.ts +++ b/backend-node/src/routes/screenGroupRoutes.ts @@ -31,6 +31,11 @@ import { getMultipleScreenLayoutSummary, // 화면 서브 테이블 관계 getScreenSubTables, + // 메뉴-화면그룹 동기화 + syncScreenGroupsToMenuController, + syncMenuToScreenGroupsController, + getSyncStatusController, + syncAllCompaniesController, } from "../controllers/screenGroupController"; const router = Router(); @@ -89,6 +94,18 @@ router.post("/layout-summary/batch", getMultipleScreenLayoutSummary); // ============================================================ router.post("/sub-tables/batch", getScreenSubTables); +// ============================================================ +// 메뉴-화면그룹 동기화 +// ============================================================ +// 동기화 상태 조회 +router.get("/sync/status", getSyncStatusController); +// 화면관리 → 메뉴 동기화 +router.post("/sync/screen-to-menu", syncScreenGroupsToMenuController); +// 메뉴 → 화면관리 동기화 +router.post("/sync/menu-to-screen", syncMenuToScreenGroupsController); +// 전체 회사 동기화 (최고 관리자만) +router.post("/sync/all", syncAllCompaniesController); + export default router; diff --git a/backend-node/src/services/menuCopyService.ts b/backend-node/src/services/menuCopyService.ts index a163f30c..f8b808d3 100644 --- a/backend-node/src/services/menuCopyService.ts +++ b/backend-node/src/services/menuCopyService.ts @@ -2090,7 +2090,7 @@ export class MenuCopyService { menu.menu_url, menu.menu_desc, userId, - menu.status, + 'active', // 복제된 메뉴는 항상 활성화 상태 menu.system_name, targetCompanyCode, // 새 회사 코드 menu.lang_key, diff --git a/backend-node/src/services/menuScreenSyncService.ts b/backend-node/src/services/menuScreenSyncService.ts new file mode 100644 index 00000000..d6f27e07 --- /dev/null +++ b/backend-node/src/services/menuScreenSyncService.ts @@ -0,0 +1,969 @@ +import { getPool } from "../database/db"; +import { logger } from "../utils/logger"; + +const pool = getPool(); + +/** + * 메뉴-화면그룹 동기화 서비스 + * + * 양방향 동기화: + * 1. screen_groups → menu_info: 화면관리 폴더 구조를 메뉴로 동기화 + * 2. menu_info → screen_groups: 사용자 메뉴를 화면관리 폴더로 동기화 + */ + +// ============================================================ +// 타입 정의 +// ============================================================ + +interface SyncResult { + success: boolean; + created: number; + linked: number; + skipped: number; + errors: string[]; + details: SyncDetail[]; +} + +interface SyncDetail { + action: 'created' | 'linked' | 'skipped' | 'error'; + sourceName: string; + sourceId: number | string; + targetId?: number | string; + reason?: string; +} + +// ============================================================ +// 화면관리 → 메뉴 동기화 +// ============================================================ + +/** + * screen_groups를 menu_info로 동기화 + * + * 로직: + * 1. 해당 회사의 screen_groups 조회 (폴더 구조) + * 2. 이미 menu_objid가 연결된 것은 제외 + * 3. 이름으로 기존 menu_info 매칭 시도 + * - 매칭되면: 양쪽에 연결 ID 업데이트 + * - 매칭 안되면: menu_info에 새로 생성 + * 4. 계층 구조(parent) 유지 + */ +export async function syncScreenGroupsToMenu( + companyCode: string, + userId: string +): Promise { + 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 = new Map(); + const menuByName: Map = 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 = new Map(); + + // screen_groups의 부모 이름 조회를 위한 매핑 + const groupIdToName: Map = 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(); + 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 { + 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 = new Map(); + const groupByName: Map = 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 = 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 { + 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; + } +} + diff --git a/backend-node/src/services/tableManagementService.ts b/backend-node/src/services/tableManagementService.ts index 3e3414a3..8136426b 100644 --- a/backend-node/src/services/tableManagementService.ts +++ b/backend-node/src/services/tableManagementService.ts @@ -1320,7 +1320,7 @@ export class TableManagementService { // 각 값을 LIKE 또는 = 조건으로 처리 const conditions: string[] = []; const values: any[] = []; - + value.forEach((v: any, idx: number) => { const safeValue = String(v).trim(); // 정확히 일치하거나, 콤마로 구분된 값 중 하나로 포함 @@ -1329,17 +1329,24 @@ export class TableManagementService { // - "2," 로 시작 // - ",2" 로 끝남 // - ",2," 중간에 포함 - const paramBase = paramIndex + (idx * 4); + const paramBase = paramIndex + idx * 4; conditions.push(`( ${columnName}::text = $${paramBase} OR ${columnName}::text LIKE $${paramBase + 1} OR ${columnName}::text LIKE $${paramBase + 2} OR ${columnName}::text LIKE $${paramBase + 3} )`); - values.push(safeValue, `${safeValue},%`, `%,${safeValue}`, `%,${safeValue},%`); + values.push( + safeValue, + `${safeValue},%`, + `%,${safeValue}`, + `%,${safeValue},%` + ); }); - logger.info(`🔍 다중 값 배열 검색: ${columnName} IN [${value.join(", ")}]`); + logger.info( + `🔍 다중 값 배열 검색: ${columnName} IN [${value.join(", ")}]` + ); return { whereClause: `(${conditions.join(" OR ")})`, values, @@ -1778,21 +1785,29 @@ export class TableManagementService { // contains 연산자 (기본): 참조 테이블의 표시 컬럼으로 검색 const referenceColumn = entityTypeInfo.referenceColumn || "id"; const referenceTable = entityTypeInfo.referenceTable; - + // displayColumn이 비어있거나 "none"이면 참조 테이블에서 자동 감지 (entityJoinService와 동일한 로직) let displayColumn = entityTypeInfo.displayColumn; - if (!displayColumn || displayColumn === "none" || displayColumn === "") { - displayColumn = await this.findDisplayColumnForTable(referenceTable, referenceColumn); + if ( + !displayColumn || + displayColumn === "none" || + displayColumn === "" + ) { + displayColumn = await this.findDisplayColumnForTable( + referenceTable, + referenceColumn + ); logger.info( `🔍 [buildEntitySearchCondition] displayColumn 자동 감지: ${referenceTable} -> ${displayColumn}` ); } // 참조 테이블의 표시 컬럼으로 검색 + // 🔧 main. 접두사 추가: EXISTS 서브쿼리에서 외부 테이블 참조 시 명시적으로 지정 return { whereClause: `EXISTS ( SELECT 1 FROM ${referenceTable} ref - WHERE ref.${referenceColumn} = ${columnName} + WHERE ref.${referenceColumn} = main.${columnName} AND ref.${displayColumn} ILIKE $${paramIndex} )`, values: [`%${value}%`], @@ -2156,14 +2171,14 @@ export class TableManagementService { // 안전한 테이블명 검증 const safeTableName = tableName.replace(/[^a-zA-Z0-9_]/g, ""); - // 전체 개수 조회 - const countQuery = `SELECT COUNT(*) as count FROM ${safeTableName} ${whereClause}`; + // 전체 개수 조회 (main 별칭 추가 - buildWhereClause가 main. 접두사를 사용하므로 필요) + const countQuery = `SELECT COUNT(*) as count FROM ${safeTableName} main ${whereClause}`; const countResult = await query(countQuery, searchValues); const total = parseInt(countResult[0].count); - // 데이터 조회 + // 데이터 조회 (main 별칭 추가) const dataQuery = ` - SELECT * FROM ${safeTableName} + SELECT main.* FROM ${safeTableName} main ${whereClause} ${orderClause} LIMIT $${paramIndex} OFFSET $${paramIndex + 1} @@ -2500,7 +2515,7 @@ export class TableManagementService { skippedColumns.push(column); return; } - + const dataType = columnTypeMap.get(column) || "text"; setConditions.push( `"${column}" = $${paramIndex}::${this.getPostgreSQLType(dataType)}` @@ -2512,7 +2527,9 @@ export class TableManagementService { }); if (skippedColumns.length > 0) { - logger.info(`⚠️ 테이블에 존재하지 않는 컬럼 스킵: ${skippedColumns.join(", ")}`); + logger.info( + `⚠️ 테이블에 존재하지 않는 컬럼 스킵: ${skippedColumns.join(", ")}` + ); } // WHERE 조건 생성 (PRIMARY KEY 우선, 없으면 모든 원본 데이터 사용) @@ -2782,10 +2799,14 @@ export class TableManagementService { // 실제 소스 컬럼이 partner_id인데 프론트엔드가 customer_id로 추론하는 경우 대응 if (!baseJoinConfig && (additionalColumn as any).referenceTable) { baseJoinConfig = joinConfigs.find( - (config) => config.referenceTable === (additionalColumn as any).referenceTable + (config) => + config.referenceTable === + (additionalColumn as any).referenceTable ); if (baseJoinConfig) { - logger.info(`🔄 referenceTable로 조인 설정 찾음: ${(additionalColumn as any).referenceTable} → ${baseJoinConfig.sourceColumn}`); + logger.info( + `🔄 referenceTable로 조인 설정 찾음: ${(additionalColumn as any).referenceTable} → ${baseJoinConfig.sourceColumn}` + ); } } @@ -2793,25 +2814,31 @@ export class TableManagementService { // joinAlias에서 실제 컬럼명 추출 const sourceColumn = baseJoinConfig.sourceColumn; // 실제 소스 컬럼 (예: partner_id) const originalJoinAlias = additionalColumn.joinAlias; // 프론트엔드가 보낸 별칭 (예: customer_id_customer_name) - + // 🔄 프론트엔드가 잘못된 소스 컬럼으로 추론한 경우 처리 // customer_id_customer_name → customer_name 추출 (customer_id_ 부분 제거) // 또는 partner_id_customer_name → customer_name 추출 (partner_id_ 부분 제거) let actualColumnName: string; - + // 프론트엔드가 보낸 joinAlias에서 실제 컬럼명 추출 const frontendSourceColumn = additionalColumn.sourceColumn; // 프론트엔드가 추론한 소스 컬럼 (customer_id) if (originalJoinAlias.startsWith(`${frontendSourceColumn}_`)) { // 프론트엔드가 추론한 소스 컬럼으로 시작하면 그 부분 제거 - actualColumnName = originalJoinAlias.replace(`${frontendSourceColumn}_`, ""); + actualColumnName = originalJoinAlias.replace( + `${frontendSourceColumn}_`, + "" + ); } else if (originalJoinAlias.startsWith(`${sourceColumn}_`)) { // 실제 소스 컬럼으로 시작하면 그 부분 제거 - actualColumnName = originalJoinAlias.replace(`${sourceColumn}_`, ""); + actualColumnName = originalJoinAlias.replace( + `${sourceColumn}_`, + "" + ); } else { // 어느 것도 아니면 원본 사용 actualColumnName = originalJoinAlias; } - + // 🆕 올바른 joinAlias 재생성 (실제 소스 컬럼 기반) const correctedJoinAlias = `${sourceColumn}_${actualColumnName}`; @@ -3205,8 +3232,10 @@ export class TableManagementService { } // Entity 조인 컬럼 검색이 있는지 확인 (기본 조인 + 추가 조인 컬럼 모두 포함) + // 🔧 sourceColumn도 포함: search={"order_no":"..."} 형태도 Entity 검색으로 인식 const allEntityColumns = [ ...joinConfigs.map((config) => config.aliasColumn), + ...joinConfigs.map((config) => config.sourceColumn), // 🔧 소스 컬럼도 포함 // 추가 조인 컬럼들도 포함 (writer_dept_code, company_code_status 등) ...joinConfigs.flatMap((config) => { const additionalColumns = []; @@ -3612,8 +3641,10 @@ export class TableManagementService { }); // main. 접두사 추가 (조인 쿼리용) + // 🔧 이미 접두사(. 앞)가 있는 경우는 교체하지 않음 (ref.column, main.column 등) + // Negative lookbehind (?> { + ): Promise< + Array<{ + leftColumn: string; + rightColumn: string; + direction: "left_to_right" | "right_to_left"; + inputType: string; + displayColumn?: string; + }> + > { try { - logger.info(`두 테이블 간 엔티티 관계 감지 시작: ${leftTable} <-> ${rightTable}`); - + logger.info( + `두 테이블 간 엔티티 관계 감지 시작: ${leftTable} <-> ${rightTable}` + ); + const relations: Array<{ leftColumn: string; rightColumn: string; @@ -4817,12 +4855,17 @@ export class TableManagementService { logger.info(`엔티티 관계 감지 완료: ${relations.length}개 발견`); relations.forEach((rel, idx) => { - logger.info(` ${idx + 1}. ${leftTable}.${rel.leftColumn} <-> ${rightTable}.${rel.rightColumn} (${rel.direction})`); + logger.info( + ` ${idx + 1}. ${leftTable}.${rel.leftColumn} <-> ${rightTable}.${rel.rightColumn} (${rel.direction})` + ); }); return relations; } catch (error) { - logger.error(`엔티티 관계 감지 실패: ${leftTable} <-> ${rightTable}`, error); + logger.error( + `엔티티 관계 감지 실패: ${leftTable} <-> ${rightTable}`, + error + ); return []; } } diff --git a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx index eb8b1c8e..bac3ae54 100644 --- a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx +++ b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx @@ -112,10 +112,15 @@ export default function ScreenManagementPage() { }; // 검색어로 필터링된 화면 - const filteredScreens = screens.filter((screen) => - screen.screenName.toLowerCase().includes(searchTerm.toLowerCase()) || - screen.screenCode.toLowerCase().includes(searchTerm.toLowerCase()) - ); + // 검색어가 여러 키워드(폴더 계층 검색)이면 화면 필터링 없이 모든 화면 표시 + // 단일 키워드면 해당 키워드로 화면 필터링 + const searchKeywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(Boolean); + const filteredScreens = searchKeywords.length > 1 + ? screens // 폴더 계층 검색 시에는 화면 필터링 없음 (폴더에서 이미 필터링됨) + : screens.filter((screen) => + screen.screenName.toLowerCase().includes(searchTerm.toLowerCase()) || + screen.screenCode.toLowerCase().includes(searchTerm.toLowerCase()) + ); // 화면 설계 모드일 때는 레이아웃 없이 전체 화면 사용 if (isDesignMode) { @@ -202,6 +207,7 @@ export default function ScreenManagementPage() { selectedScreen={selectedScreen} onScreenSelect={handleScreenSelect} onScreenDesign={handleDesignScreen} + searchTerm={searchTerm} onGroupSelect={(group) => { setSelectedGroup(group); setSelectedScreen(null); // 화면 선택 해제 diff --git a/frontend/components/screen/CopyScreenModal.tsx b/frontend/components/screen/CopyScreenModal.tsx index 5590cef4..a5207b96 100644 --- a/frontend/components/screen/CopyScreenModal.tsx +++ b/frontend/components/screen/CopyScreenModal.tsx @@ -927,7 +927,7 @@ export default function CopyScreenModal({ if (mode === "group") { return ( - + {/* 로딩 오버레이 */} {isCopying && (
diff --git a/frontend/components/screen/ScreenGroupTreeView.tsx b/frontend/components/screen/ScreenGroupTreeView.tsx index b171bbe1..7cd1310f 100644 --- a/frontend/components/screen/ScreenGroupTreeView.tsx +++ b/frontend/components/screen/ScreenGroupTreeView.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useMemo } from "react"; import { cn } from "@/lib/utils"; import { ChevronRight, @@ -16,6 +16,8 @@ import { Copy, FolderTree, Loader2, + RefreshCw, + Building2, } from "lucide-react"; import { ScreenDefinition } from "@/types/screen"; import { @@ -24,9 +26,17 @@ import { deleteScreenGroup, addScreenToGroup, removeScreenFromGroup, + getMenuScreenSyncStatus, + syncScreenGroupsToMenu, + syncMenuToScreenGroups, + syncAllCompanies, + SyncStatus, + AllCompaniesSyncResult, } from "@/lib/api/screenGroup"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; +import { useAuth } from "@/hooks/useAuth"; +import { getCompanyList, Company } from "@/lib/api/company"; import { DropdownMenu, DropdownMenuContent, @@ -88,6 +98,7 @@ interface ScreenGroupTreeViewProps { onGroupSelect?: (group: { id: number; name: string; company_code?: string } | null) => void; onScreenSelectInGroup?: (group: { id: number; name: string; company_code?: string }, screenId: number) => void; companyCode?: string; + searchTerm?: string; // 검색어 (띄어쓰기로 구분된 여러 키워드) } interface TreeNode { @@ -107,6 +118,7 @@ export function ScreenGroupTreeView({ onGroupSelect, onScreenSelectInGroup, companyCode, + searchTerm = "", }: ScreenGroupTreeViewProps) { const [groups, setGroups] = useState([]); const [loading, setLoading] = useState(true); @@ -155,6 +167,25 @@ export function ScreenGroupTreeView({ const [contextMenuGroup, setContextMenuGroup] = useState(null); const [contextMenuGroupPosition, setContextMenuGroupPosition] = useState<{ x: number; y: number } | null>(null); + // 메뉴-화면그룹 동기화 상태 + const [isSyncDialogOpen, setIsSyncDialogOpen] = useState(false); + const [syncStatus, setSyncStatus] = useState(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([]); + const [selectedCompanyCode, setSelectedCompanyCode] = useState(""); + const [isSyncCompanySelectOpen, setIsSyncCompanySelectOpen] = useState(false); + + // 현재 사용자가 최고 관리자인지 확인 + const isSuperAdmin = user?.companyCode === "*"; + + // 실제 사용할 회사 코드 (props → 선택 → 사용자 기본값) + const effectiveCompanyCode = companyCode || selectedCompanyCode || (isSuperAdmin ? "" : user?.companyCode) || ""; + // 그룹 목록 및 그룹별 화면 로드 useEffect(() => { loadGroupsData(); @@ -242,6 +273,160 @@ export function ScreenGroupTreeView({ setIsGroupModalOpen(true); }; + // 동기화 다이얼로그 열기 + const handleOpenSyncDialog = async () => { + setIsSyncDialogOpen(true); + setSyncStatus(null); + setSyncDirection(null); + setSelectedCompanyCode(""); + + // 최고 관리자일 때 회사 목록 로드 + if (isSuperAdmin && companies.length === 0) { + try { + const companiesList = await getCompanyList(); + // 최고 관리자(*)용 회사는 제외 + const filteredCompanies = companiesList.filter(c => c.company_code !== "*"); + setCompanies(filteredCompanies); + } catch (error) { + console.error("회사 목록 로드 실패:", error); + } + } + + // 최고 관리자가 아니면 바로 상태 조회 + if (!isSuperAdmin && user?.companyCode) { + const response = await getMenuScreenSyncStatus(user.companyCode); + if (response.success && response.data) { + setSyncStatus(response.data); + } + } + }; + + // 회사 선택 시 상태 조회 + const handleCompanySelect = async (companyCode: string) => { + setSelectedCompanyCode(companyCode); + setIsSyncCompanySelectOpen(false); + setSyncStatus(null); + + if (companyCode) { + const response = await getMenuScreenSyncStatus(companyCode); + if (response.success && response.data) { + setSyncStatus(response.data); + } else { + toast.error(response.error || "동기화 상태 조회 실패"); + } + } + }; + + // 동기화 실행 + const handleSync = async (direction: "screen-to-menu" | "menu-to-screen") => { + // 사용할 회사 코드 결정 + const targetCompanyCode = isSuperAdmin ? selectedCompanyCode : user?.companyCode; + + if (!targetCompanyCode) { + toast.error("회사를 선택해주세요."); + return; + } + + setIsSyncing(true); + setSyncDirection(direction); + setSyncProgress({ + message: direction === "screen-to-menu" + ? "화면관리 → 메뉴 동기화 중..." + : "메뉴 → 화면관리 동기화 중...", + detail: "데이터를 분석하고 있습니다..." + }); + + try { + setSyncProgress({ + message: direction === "screen-to-menu" + ? "화면관리 → 메뉴 동기화 중..." + : "메뉴 → 화면관리 동기화 중...", + detail: "동기화 작업을 수행하고 있습니다..." + }); + + const response = direction === "screen-to-menu" + ? await syncScreenGroupsToMenu(targetCompanyCode) + : await syncMenuToScreenGroups(targetCompanyCode); + + if (response.success) { + const data = response.data; + setSyncProgress({ + message: "동기화 완료!", + detail: `생성 ${data?.created || 0}개, 연결 ${data?.linked || 0}개, 스킵 ${data?.skipped || 0}개` + }); + toast.success( + `동기화 완료: 생성 ${data?.created || 0}개, 연결 ${data?.linked || 0}개, 스킵 ${data?.skipped || 0}개` + ); + // 그룹 데이터 새로고침 + await loadGroupsData(); + // 동기화 상태 새로고침 + const statusResponse = await getMenuScreenSyncStatus(targetCompanyCode); + if (statusResponse.success && statusResponse.data) { + setSyncStatus(statusResponse.data); + } + } else { + setSyncProgress(null); + toast.error(`동기화 실패: ${response.error || "알 수 없는 오류"}`); + } + } catch (error: any) { + setSyncProgress(null); + toast.error(`동기화 실패: ${error.message}`); + } finally { + setIsSyncing(false); + setSyncDirection(null); + // 3초 후 진행 메시지 초기화 + setTimeout(() => setSyncProgress(null), 3000); + } + }; + + // 전체 회사 동기화 (최고 관리자만) + const handleSyncAll = async () => { + if (!isSuperAdmin) { + toast.error("전체 동기화는 최고 관리자만 수행할 수 있습니다."); + return; + } + + setIsSyncing(true); + setSyncDirection("all"); + setSyncProgress({ + message: "전체 회사 동기화 중...", + detail: "모든 회사의 데이터를 분석하고 있습니다..." + }); + + try { + setSyncProgress({ + message: "전체 회사 동기화 중...", + detail: "양방향 동기화 작업을 수행하고 있습니다..." + }); + + const response = await syncAllCompanies(); + + if (response.success && response.data) { + const data = response.data; + setSyncProgress({ + message: "전체 동기화 완료!", + detail: `${data.totalCompanies}개 회사, 생성 ${data.totalCreated}개, 연결 ${data.totalLinked}개` + }); + toast.success( + `전체 동기화 완료: ${data.totalCompanies}개 회사, 생성 ${data.totalCreated}개, 연결 ${data.totalLinked}개` + ); + // 그룹 데이터 새로고침 + await loadGroupsData(); + } else { + setSyncProgress(null); + toast.error(`전체 동기화 실패: ${response.error || "알 수 없는 오류"}`); + } + } catch (error: any) { + setSyncProgress(null); + toast.error(`전체 동기화 실패: ${error.message}`); + } finally { + setIsSyncing(false); + setSyncDirection(null); + // 3초 후 진행 메시지 초기화 + setTimeout(() => setSyncProgress(null), 3000); + } + }; + // 그룹 수정 버튼 클릭 const handleEditGroup = (group: ScreenGroup, e: React.MouseEvent) => { e.stopPropagation(); @@ -596,6 +781,191 @@ export function ScreenGroupTreeView({ return result; }; + // 검색어로 그룹 필터링 (띄어쓰기로 구분된 여러 키워드 - 계층적 검색) + const getFilteredGroups = useMemo(() => { + if (!searchTerm.trim()) { + return groups; // 검색어가 없으면 모든 그룹 반환 + } + + // 검색어를 띄어쓰기로 분리하고 빈 문자열 제거 + const keywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(k => k.length > 0); + + if (keywords.length === 0) { + return groups; + } + + // 그룹의 조상 ID들을 가져오는 함수 + const getAncestorIds = (groupId: number): Set => { + const ancestors = new Set(); + 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(); + 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(); + + 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(); + + // 일치하는 그룹의 상위 그룹들도 포함 (계층 유지를 위해) + 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(); + + const keywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(k => k.length > 0); + if (keywords.length === 0) return new Set(); + + // 그룹의 조상 ID들을 가져오는 함수 + const getAncestorIds = (groupId: number): Set => { + const ancestors = new Set(); + 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(); + 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(); + + 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(); + + const addParents = (groupId: number) => { + const group = groups.find(g => g.id === groupId); + if (group?.parent_group_id) { + autoExpandIds.add(group.parent_group_id); + addParents(group.parent_group_id); + } + }; + + for (const groupId of currentMatchingIds) { + autoExpandIds.add(groupId); // 일치하는 그룹 자체도 펼침 (화면 표시를 위해) + addParents(groupId); + } + + return autoExpandIds; + }, [groups, searchTerm]); + // 그룹 데이터 새로고침 const loadGroupsData = async () => { try { @@ -635,8 +1005,8 @@ export function ScreenGroupTreeView({ return (
- {/* 그룹 추가 버튼 */} -
+ {/* 그룹 추가 & 동기화 버튼 */} +
+{isSuperAdmin && ( + + )}
{/* 트리 목록 */}
+ {/* 검색 결과 없음 표시 */} + {searchTerm.trim() && getFilteredGroups.length === 0 && ( +
+ "{searchTerm}"와 일치하는 폴더가 없습니다 +
+ )} + {/* 그룹화된 화면들 (대분류만 먼저 렌더링) */} - {groups + {getFilteredGroups .filter((g) => !(g as any).parent_group_id) // 대분류만 (parent_group_id가 null) .map((group) => { const groupId = String(group.id); - const isExpanded = expandedGroups.has(groupId); + const isExpanded = expandedGroups.has(groupId) || shouldAutoExpandForSearch.has(group.id); // 검색 시 상위 그룹만 자동 확장 const groupScreens = getScreensInGroup(group.id); + const isMatching = isGroupMatchingSearch(group.group_name); // 검색어 일치 여부 - // 하위 그룹들 찾기 - const childGroups = groups.filter((g) => (g as any).parent_group_id === group.id); + // 하위 그룹들 찾기 (필터링된 그룹에서만) + const childGroups = getFilteredGroups.filter((g) => (g as any).parent_group_id === group.id); return (
@@ -667,7 +1056,8 @@ export function ScreenGroupTreeView({
toggleGroup(groupId)} onContextMenu={(e) => handleGroupContextMenu(e, group)} @@ -682,7 +1072,7 @@ export function ScreenGroupTreeView({ ) : ( )} - {group.group_name} + {group.group_name} {groupScreens.length} @@ -719,11 +1109,12 @@ export function ScreenGroupTreeView({
{childGroups.map((childGroup) => { const childGroupId = String(childGroup.id); - const isChildExpanded = expandedGroups.has(childGroupId); + const isChildExpanded = expandedGroups.has(childGroupId) || shouldAutoExpandForSearch.has(childGroup.id); // 검색 시 상위 그룹만 자동 확장 const childScreens = getScreensInGroup(childGroup.id); + const isChildMatching = isGroupMatchingSearch(childGroup.group_name); - // 손자 그룹들 (3단계) - const grandChildGroups = groups.filter((g) => (g as any).parent_group_id === childGroup.id); + // 손자 그룹들 (3단계) - 필터링된 그룹에서만 + const grandChildGroups = getFilteredGroups.filter((g) => (g as any).parent_group_id === childGroup.id); return (
@@ -731,7 +1122,8 @@ export function ScreenGroupTreeView({
toggleGroup(childGroupId)} onContextMenu={(e) => handleGroupContextMenu(e, childGroup)} @@ -746,7 +1138,7 @@ export function ScreenGroupTreeView({ ) : ( )} - {childGroup.group_name} + {childGroup.group_name} {childScreens.length} @@ -782,8 +1174,9 @@ export function ScreenGroupTreeView({
{grandChildGroups.map((grandChild) => { const grandChildId = String(grandChild.id); - const isGrandExpanded = expandedGroups.has(grandChildId); + const isGrandExpanded = expandedGroups.has(grandChildId) || shouldAutoExpandForSearch.has(grandChild.id); // 검색 시 상위 그룹만 자동 확장 const grandScreens = getScreensInGroup(grandChild.id); + const isGrandMatching = isGroupMatchingSearch(grandChild.group_name); return (
@@ -791,7 +1184,8 @@ export function ScreenGroupTreeView({
toggleGroup(grandChildId)} onContextMenu={(e) => handleGroupContextMenu(e, grandChild)} @@ -806,7 +1200,7 @@ export function ScreenGroupTreeView({ ) : ( )} - {grandChild.group_name} + {grandChild.group_name} {grandScreens.length} @@ -1459,6 +1853,222 @@ export function ScreenGroupTreeView({ )} + {/* 메뉴-화면그룹 동기화 다이얼로그 */} + + + {/* 동기화 진행 중 오버레이 (삭제와 동일한 스타일) */} + {isSyncing && ( +
+ +

{syncProgress?.message || "동기화 중..."}

+ {syncProgress?.detail && ( +

{syncProgress.detail}

+ )} +
+
+
+
+ )} + + 메뉴-화면 동기화 + + 화면관리의 폴더 구조와 메뉴관리를 연동합니다. + + + + {/* 최고 관리자: 회사 선택 */} + {isSuperAdmin && ( +
+ + + + + + + + + + 회사를 찾을 수 없습니다. + + {companies.map((company) => ( + handleCompanySelect(company.company_code)} + className="text-sm" + > + + {company.company_name} + + ))} + + + + + +
+ )} + + {/* 현재 상태 표시 */} + {syncStatus ? ( +
+
+
+
화면관리
+
{syncStatus.screenGroups.total}개
+
+ 연결됨: {syncStatus.screenGroups.linked} / 미연결: {syncStatus.screenGroups.unlinked} +
+
+
+
사용자 메뉴
+
{syncStatus.menuItems.total}개
+
+ 연결됨: {syncStatus.menuItems.linked} / 미연결: {syncStatus.menuItems.unlinked} +
+
+
+ + {syncStatus.potentialMatches.length > 0 && ( +
+
자동 매칭 가능 ({syncStatus.potentialMatches.length}개)
+
+ {syncStatus.potentialMatches.slice(0, 5).map((match, i) => ( +
+ {match.menuName} = {match.groupName} +
+ ))} + {syncStatus.potentialMatches.length > 5 && ( +
...외 {syncStatus.potentialMatches.length - 5}개
+ )} +
+
+ )} + + {/* 동기화 버튼 */} +
+ + +
+ + {/* 전체 동기화 (최고 관리자만) */} + {isSuperAdmin && ( +
+ +
+ )} +
+ ) : isSuperAdmin && !selectedCompanyCode ? ( +
+ +

+ 개별 회사 동기화를 하려면 회사를 선택해주세요. +

+ + {/* 전체 회사 동기화 버튼 (회사 선택 없이도 표시) */} +
+ +
+
+ ) : ( +
+ +
+ )} + + + + + +
+
); } \ No newline at end of file diff --git a/frontend/components/screen/panels/DataFlowPanel.tsx b/frontend/components/screen/panels/DataFlowPanel.tsx index 4b31d1a9..1fdf0ec8 100644 --- a/frontend/components/screen/panels/DataFlowPanel.tsx +++ b/frontend/components/screen/panels/DataFlowPanel.tsx @@ -462,3 +462,4 @@ export default function DataFlowPanel({ groupId, screenId, screens = [] }: DataF + diff --git a/frontend/components/screen/panels/FieldJoinPanel.tsx b/frontend/components/screen/panels/FieldJoinPanel.tsx index 884ac69b..29891228 100644 --- a/frontend/components/screen/panels/FieldJoinPanel.tsx +++ b/frontend/components/screen/panels/FieldJoinPanel.tsx @@ -414,3 +414,4 @@ export default function FieldJoinPanel({ screenId, componentId, layoutId }: Fiel + diff --git a/frontend/lib/api/screenGroup.ts b/frontend/lib/api/screenGroup.ts index 65294444..0a91f907 100644 --- a/frontend/lib/api/screenGroup.ts +++ b/frontend/lib/api/screenGroup.ts @@ -498,3 +498,97 @@ export async function getScreenSubTables( } } + +// ============================================================ +// 메뉴-화면그룹 동기화 API +// ============================================================ + +export interface SyncDetail { + action: 'created' | 'linked' | 'skipped' | 'error'; + sourceName: string; + sourceId: number | string; + targetId?: number | string; + reason?: string; +} + +export interface SyncResult { + success: boolean; + created: number; + linked: number; + skipped: number; + errors: string[]; + details: SyncDetail[]; +} + +export interface SyncStatus { + screenGroups: { total: number; linked: number; unlinked: number }; + menuItems: { total: number; linked: number; unlinked: number }; + potentialMatches: Array<{ menuName: string; groupName: string; similarity: string }>; +} + +// 동기화 상태 조회 +export async function getMenuScreenSyncStatus( + targetCompanyCode?: string +): Promise> { + 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> { + 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> { + 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> { + try { + const response = await apiClient.post("/screen-groups/sync/all"); + return response.data; + } catch (error: any) { + return { success: false, error: error.message }; + } +} + diff --git a/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx b/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx index b55907a4..53ad204d 100644 --- a/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx +++ b/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx @@ -184,7 +184,7 @@ const DataCell: React.FC = ({ onClick={onClick} onDoubleClick={onDoubleClick} > - - + 0 ); } @@ -222,7 +222,7 @@ const DataCell: React.FC = ({ )} {icon && {icon}} - {values[0].formattedValue} + {values[0].formattedValue || (values[0].value === 0 ? '0' : values[0].formattedValue)} ); @@ -257,7 +257,7 @@ const DataCell: React.FC = ({ )} {icon && {icon}} - {val.formattedValue} + {val.formattedValue || (val.value === 0 ? '0' : val.formattedValue)} ))} @@ -296,24 +296,6 @@ export const PivotGridComponent: React.FC = ({ onFieldDrop, onExpandChange, }) => { - // 디버깅 로그 - console.log("🔶 PivotGridComponent props:", { - title, - hasExternalData: !!externalData, - externalDataLength: externalData?.length, - initialFieldsLength: initialFields?.length, - }); - - // 🆕 데이터 샘플 확인 - if (externalData && externalData.length > 0) { - console.log("🔶 첫 번째 데이터 샘플:", externalData[0]); - console.log("🔶 전체 데이터 개수:", externalData.length); - } - - // 🆕 필드 설정 확인 - if (initialFields && initialFields.length > 0) { - console.log("🔶 필드 설정:", initialFields); - } // ==================== 상태 ==================== const [fields, setFields] = useState(initialFields); @@ -384,20 +366,63 @@ export const PivotGridComponent: React.FC = ({ localStorage.setItem(stateStorageKey, JSON.stringify(stateToSave)); }, [fields, pivotState, sortConfig, columnWidths, stateStorageKey]); - // 상태 복원 (localStorage) + // 상태 복원 (localStorage) - 프로덕션 안전성 강화 useEffect(() => { if (typeof window === "undefined") return; - const savedState = localStorage.getItem(stateStorageKey); - if (savedState) { - try { - const parsed = JSON.parse(savedState); - if (parsed.fields) setFields(parsed.fields); - if (parsed.pivotState) setPivotState(parsed.pivotState); - if (parsed.sortConfig) setSortConfig(parsed.sortConfig); - if (parsed.columnWidths) setColumnWidths(parsed.columnWidths); - } catch (e) { - console.warn("피벗 상태 복원 실패:", e); + + try { + const savedState = localStorage.getItem(stateStorageKey); + if (!savedState) return; + + const parsed = JSON.parse(savedState); + + // 버전 체크 - 버전이 다르면 이전 상태 무시 + if (parsed.version !== PIVOT_STATE_VERSION) { + localStorage.removeItem(stateStorageKey); + return; } + + // 필드 복원 시 유효성 검사 (중요!) + if (parsed.fields && Array.isArray(parsed.fields) && parsed.fields.length > 0) { + // 저장된 필드가 현재 데이터와 호환되는지 확인 + const validFields = parsed.fields.filter((f: PivotFieldConfig) => + f && typeof f.field === "string" && typeof f.area === "string" + ); + + if (validFields.length > 0) { + setFields(validFields); + } + } + + // pivotState 복원 시 유효성 검사 (확장 경로 검증) + if (parsed.pivotState && typeof parsed.pivotState === "object") { + const restoredState: PivotGridState = { + // expandedRowPaths는 배열의 배열이어야 함 + expandedRowPaths: Array.isArray(parsed.pivotState.expandedRowPaths) + ? parsed.pivotState.expandedRowPaths.filter( + (p: unknown) => Array.isArray(p) && p.every(item => typeof item === "string") + ) + : [], + // expandedColumnPaths도 동일하게 검증 + expandedColumnPaths: Array.isArray(parsed.pivotState.expandedColumnPaths) + ? parsed.pivotState.expandedColumnPaths.filter( + (p: unknown) => Array.isArray(p) && p.every(item => typeof item === "string") + ) + : [], + sortConfig: parsed.pivotState.sortConfig || null, + filterConfig: parsed.pivotState.filterConfig || {}, + }; + setPivotState(restoredState); + } + + if (parsed.sortConfig) setSortConfig(parsed.sortConfig); + if (parsed.columnWidths && typeof parsed.columnWidths === "object") { + setColumnWidths(parsed.columnWidths); + } + } catch (e) { + console.warn("피벗 상태 복원 실패, localStorage 초기화:", e); + // 손상된 상태는 제거 + localStorage.removeItem(stateStorageKey); } }, [stateStorageKey]); @@ -432,10 +457,12 @@ export const PivotGridComponent: React.FC = ({ // 필터 영역 필드 const filterFields = useMemo( - () => - fields + () => { + const result = fields .filter((f) => f.area === "filter" && f.visible !== false) - .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)), + .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)); + return result; + }, [fields] ); @@ -480,70 +507,84 @@ export const PivotGridComponent: React.FC = ({ if (activeFilters.length === 0) return data; - return data.filter((row) => { + const result = data.filter((row) => { return activeFilters.every((filter) => { - const value = row[filter.field]; + const rawValue = row[filter.field]; const filterValues = filter.filterValues || []; const filterType = filter.filterType || "include"; + // 타입 안전한 비교: 값을 문자열로 변환하여 비교 + const value = rawValue === null || rawValue === undefined + ? "(빈 값)" + : String(rawValue); + if (filterType === "include") { - return filterValues.includes(value); + return filterValues.some((fv) => String(fv) === value); } else { - return !filterValues.includes(value); + return filterValues.every((fv) => String(fv) !== value); } }); }); + + // 모든 데이터가 필터링되면 경고 (디버깅용) + if (result.length === 0 && data.length > 0) { + console.warn("⚠️ [PivotGrid] 필터로 인해 모든 데이터가 제거됨"); + } + + return result; }, [data, fields]); // ==================== 피벗 처리 ==================== const pivotResult = useMemo(() => { - if (!filteredData || filteredData.length === 0 || fields.length === 0) { + try { + if (!filteredData || filteredData.length === 0 || fields.length === 0) { + return null; + } + + // FieldChooser에서 이미 필드를 완전히 제거하므로 visible 필터링 불필요 + // 행, 열, 데이터 영역에 필드가 하나도 없으면 null 반환 (필터는 제외) + if (fields.filter((f) => ["row", "column", "data"].includes(f.area)).length === 0) { + return null; + } + + const result = processPivotData( + filteredData, + fields, + pivotState.expandedRowPaths, + pivotState.expandedColumnPaths + ); + + return result; + } catch (error) { + console.error("❌ [pivotResult] 피벗 처리 에러:", error); return null; } - - const visibleFields = fields.filter((f) => f.visible !== false); - // 행, 열, 데이터 영역에 필드가 하나도 없으면 null 반환 (필터는 제외) - if (visibleFields.filter((f) => ["row", "column", "data"].includes(f.area)).length === 0) { - return null; - } - - const result = processPivotData( - filteredData, - visibleFields, - pivotState.expandedRowPaths, - pivotState.expandedColumnPaths - ); - - // 🆕 피벗 결과 확인 - console.log("🔶 피벗 처리 결과:", { - hasResult: !!result, - flatRowsCount: result?.flatRows?.length, - flatColumnsCount: result?.flatColumns?.length, - dataMatrixSize: result?.dataMatrix?.size, - expandedRowPaths: pivotState.expandedRowPaths.length, - expandedColumnPaths: pivotState.expandedColumnPaths.length, - }); - - return result; }, [filteredData, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]); - // 🆕 초기 로드 시 첫 레벨 자동 확장 + // 초기 로드 시 첫 레벨 자동 확장 useEffect(() => { - if (!isInitialExpanded && pivotResult && pivotResult.flatRows.length > 0) { - // 첫 레벨 행들의 경로 수집 (level 0인 행들) - const firstLevelPaths = pivotResult.flatRows - .filter(row => row.level === 0 && row.hasChildren) - .map(row => row.path); - - if (firstLevelPaths.length > 0) { - console.log("🔶 초기 자동 확장:", firstLevelPaths); - setPivotState(prev => ({ - ...prev, - expandedRowPaths: firstLevelPaths, - })); - setIsInitialExpanded(true); + try { + if (pivotResult && pivotResult.flatRows && pivotResult.flatRows.length > 0 && !isInitialExpanded) { + // 첫 레벨 행들의 경로 수집 (level 0인 행들) + const firstLevelRows = pivotResult.flatRows.filter((row) => row.level === 0 && row.hasChildren); + + // 첫 레벨 행이 있으면 자동 확장 + if (firstLevelRows.length > 0 && firstLevelRows.length < 100) { + const firstLevelPaths = firstLevelRows.map((row) => row.path); + setPivotState((prev) => ({ + ...prev, + expandedRowPaths: firstLevelPaths, + })); + setIsInitialExpanded(true); + } else { + // 행이 너무 많으면 자동 확장 건너뛰기 + setIsInitialExpanded(true); + } } + } catch (error) { + console.error("❌ [초기 확장] 에러:", error); + setIsInitialExpanded(true); } }, [pivotResult, isInitialExpanded]); @@ -710,8 +751,6 @@ export const PivotGridComponent: React.FC = ({ // 행 확장/축소 const handleToggleRowExpand = useCallback( (path: string[]) => { - console.log("🔶 행 확장/축소 클릭:", path); - setPivotState((prev) => { const pathKey = pathToKey(path); const existingIndex = prev.expandedRowPaths.findIndex( @@ -720,16 +759,13 @@ export const PivotGridComponent: React.FC = ({ let newPaths: string[][]; if (existingIndex >= 0) { - console.log("🔶 행 축소:", path); newPaths = prev.expandedRowPaths.filter( (_, i) => i !== existingIndex ); } else { - console.log("🔶 행 확장:", path); newPaths = [...prev.expandedRowPaths, path]; } - console.log("🔶 새로운 확장 경로:", newPaths); onExpandChange?.(newPaths); return { @@ -741,23 +777,52 @@ export const PivotGridComponent: React.FC = ({ [onExpandChange] ); - // 전체 확장 + // 전체 확장 (재귀적으로 모든 레벨 확장) const handleExpandAll = useCallback(() => { - if (!pivotResult) return; - - const allRowPaths: string[][] = []; - pivotResult.flatRows.forEach((row) => { - if (row.hasChildren) { - allRowPaths.push(row.path); + try { + if (!pivotResult) { + return; } - }); - setPivotState((prev) => ({ - ...prev, - expandedRowPaths: allRowPaths, - expandedColumnPaths: [], - })); - }, [pivotResult]); + // 재귀적으로 모든 가능한 경로 생성 + const allRowPaths: string[][] = []; + const rowFields = fields.filter((f) => f.area === "row" && f.visible !== false); + + // 행 필드가 없으면 종료 + if (rowFields.length === 0) { + return; + } + + // 데이터에서 모든 고유한 경로 추출 + const pathSet = new Set(); + filteredData.forEach((item) => { + // 마지막 레벨은 제외 (확장할 자식이 없으므로) + for (let depth = 1; depth < rowFields.length; depth++) { + const path = rowFields.slice(0, depth).map((f) => String(item[f.field] ?? "")); + const pathKey = JSON.stringify(path); + pathSet.add(pathKey); + } + }); + + // Set을 배열로 변환 (최대 1000개로 제한하여 성능 보호) + const MAX_PATHS = 1000; + let count = 0; + pathSet.forEach((pathKey) => { + if (count < MAX_PATHS) { + allRowPaths.push(JSON.parse(pathKey)); + count++; + } + }); + + setPivotState((prev) => ({ + ...prev, + expandedRowPaths: allRowPaths, + expandedColumnPaths: [], + })); + } catch (error) { + console.error("❌ [handleExpandAll] 에러:", error); + } + }, [pivotResult, fields, filteredData]); // 전체 축소 const handleCollapseAll = useCallback(() => { @@ -880,6 +945,8 @@ export const PivotGridComponent: React.FC = ({ // 인쇄 기능 (PDF 내보내기보다 먼저 정의해야 함) const handlePrint = useCallback(() => { + if (typeof window === "undefined") return; + const printContent = tableRef.current; if (!printContent) return; @@ -980,10 +1047,14 @@ export const PivotGridComponent: React.FC = ({ console.log("피벗 상태가 저장되었습니다."); }, [saveStateToStorage]); - // 상태 초기화 + // 상태 초기화 (확장/축소, 정렬, 필터만 초기화, 필드 설정은 유지) const handleResetState = useCallback(() => { - localStorage.removeItem(stateStorageKey); - setFields(initialFields); + // 로컬 스토리지에서 상태 제거 (SSR 보호) + if (typeof window !== "undefined") { + localStorage.removeItem(stateStorageKey); + } + + // 확장/축소, 정렬, 필터 상태만 초기화 setPivotState({ expandedRowPaths: [], expandedColumnPaths: [], @@ -994,7 +1065,7 @@ export const PivotGridComponent: React.FC = ({ setColumnWidths({}); setSelectedCell(null); setSelectionRange(null); - }, [stateStorageKey, initialFields]); + }, [stateStorageKey]); // 필드 숨기기/표시 상태 const [hiddenFields, setHiddenFields] = useState>(new Set()); @@ -1011,11 +1082,6 @@ export const PivotGridComponent: React.FC = ({ }); }, []); - // 숨겨진 필드 제외한 활성 필드들 - const visibleFields = useMemo(() => { - return fields.filter((f) => !hiddenFields.has(f.field)); - }, [fields, hiddenFields]); - // 숨겨진 필드 목록 const hiddenFieldsList = useMemo(() => { return fields.filter((f) => hiddenFields.has(f.field)); @@ -1383,8 +1449,8 @@ export const PivotGridComponent: React.FC = ({ variant="ghost" size="sm" className="h-7 px-2" - onClick={handleExpandAll} - title="전체 확장" + onClick={handleCollapseAll} + title="전체 축소" > @@ -1393,8 +1459,8 @@ export const PivotGridComponent: React.FC = ({ variant="ghost" size="sm" className="h-7 px-2" - onClick={handleCollapseAll} - title="전체 축소" + onClick={handleExpandAll} + title="전체 확장" > @@ -1574,19 +1640,25 @@ export const PivotGridComponent: React.FC = ({ } /> @@ -1600,20 +1672,27 @@ export const PivotGridComponent: React.FC = ({
0 ? containerHeight : undefined, + // 최소 200px 보장 + 데이터에 맞게 조정 (최대 400px) + minHeight: Math.max( + 200, // 절대 최소값 - 블라인드 효과 방지 + Math.min(400, (sortedFlatRows.length + 3) * ROW_HEIGHT + 50) + ) + }} tabIndex={0} onKeyDown={handleKeyDown} > {/* 열 헤더 */} - + {/* 좌상단 코너 (행 필드 라벨 + 필터) */} ))} + + {/* 행 총계 헤더 */} + {totals?.showRowGrandTotals && ( + + )} - {/* 열 필드 필터 (헤더 왼쪽에 표시) */} + {/* 열 필드 필터 (헤더 오른쪽 끝에 표시) */} {columnFields.length > 0 && ( )} - - {/* 행 총계 헤더 */} - {totals?.showRowGrandTotals && ( - - )} {/* 데이터 필드 라벨 (다중 데이터 필드인 경우) */} {dataFields.length > 1 && ( - + {flatColumns.map((col, colIdx) => ( {dataFields.map((df, dfIdx) => ( @@ -1747,7 +1827,7 @@ export const PivotGridComponent: React.FC = ({ key={`${colIdx}-${dfIdx}`} className={cn( "border-r border-b border-border", - "px-2 py-1 text-center text-xs font-normal", + "px-2 py-0.5 text-center text-xs font-normal", "text-muted-foreground cursor-pointer hover:bg-accent/50" )} onClick={() => handleSort(df.field)} @@ -1760,19 +1840,6 @@ export const PivotGridComponent: React.FC = ({ ))} ))} - {totals?.showRowGrandTotals && - dataFields.map((df, dfIdx) => ( - - ))} )} @@ -1887,12 +1954,15 @@ export const PivotGridComponent: React.FC = ({ }); })()} - {/* 가상 스크롤 하단 여백 */} - {enableVirtualScroll && ( - - - )} + {/* 가상 스크롤 하단 여백 - 음수 방지 */} + {enableVirtualScroll && (() => { + const bottomPadding = Math.max(0, virtualScroll.totalHeight - virtualScroll.offsetTop - (visibleFlatRows.length * ROW_HEIGHT)); + return bottomPadding > 0 ? ( + + + ) : null; + })()} {/* 열 총계 행 (하단 위치 - 기본값) */} {totals?.showColumnGrandTotals && totals?.rowGrandTotalPosition !== "top" && ( diff --git a/frontend/lib/registry/components/pivot-grid/PivotGridRenderer.tsx b/frontend/lib/registry/components/pivot-grid/PivotGridRenderer.tsx index 5ee4bac6..2ef0df14 100644 --- a/frontend/lib/registry/components/pivot-grid/PivotGridRenderer.tsx +++ b/frontend/lib/registry/components/pivot-grid/PivotGridRenderer.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, Component, ErrorInfo, ReactNode } from "react"; import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer"; import { createComponentDefinition } from "../../utils/createComponentDefinition"; import { ComponentCategory } from "@/types/component"; @@ -8,6 +8,66 @@ import { PivotGridComponent } from "./PivotGridComponent"; import { PivotGridConfigPanel } from "./PivotGridConfigPanel"; import { PivotFieldConfig } from "./types"; import { dataApi } from "@/lib/api/data"; +import { AlertCircle, RefreshCw } from "lucide-react"; +import { Button } from "@/components/ui/button"; + +// ==================== 에러 경계 ==================== + +interface ErrorBoundaryState { + hasError: boolean; + error?: Error; +} + +class PivotGridErrorBoundary extends Component< + { children: ReactNode; onReset?: () => void }, + ErrorBoundaryState +> { + constructor(props: { children: ReactNode; onReset?: () => void }) { + super(props); + this.state = { hasError: false }; + } + + static getDerivedStateFromError(error: Error): ErrorBoundaryState { + return { hasError: true, error }; + } + + componentDidCatch(error: Error, errorInfo: ErrorInfo) { + console.error("🔴 [PivotGrid] 렌더링 에러:", error); + console.error("🔴 [PivotGrid] 에러 정보:", errorInfo); + } + + handleReset = () => { + this.setState({ hasError: false, error: undefined }); + this.props.onReset?.(); + }; + + render() { + if (this.state.hasError) { + return ( +
+ +

+ 피벗 그리드 오류 +

+

+ {this.state.error?.message || "알 수 없는 오류가 발생했습니다."} +

+ +
+ ); + } + + return this.props.children; + } +} // ==================== 샘플 데이터 (미리보기용) ==================== @@ -111,19 +171,14 @@ const PivotGridWrapper: React.FC = (props) => { setIsLoading(true); try { - console.log("🔷 [PivotGrid] 테이블 데이터 로딩 시작:", tableName); - const response = await dataApi.getTableData(tableName, { page: 1, - size: 10000, // 피벗 분석용 대량 데이터 (pageSize → size) + size: 10000, // 피벗 분석용 대량 데이터 }); - console.log("🔷 [PivotGrid] API 응답:", response); - // dataApi.getTableData는 { data, total, page, size, totalPages } 구조 if (response.data && Array.isArray(response.data)) { setLoadedData(response.data); - console.log("✅ [PivotGrid] 데이터 로딩 완료:", response.data.length, "건"); } else { console.error("❌ [PivotGrid] 데이터 로딩 실패: 응답에 data 배열이 없음"); setLoadedData([]); @@ -137,21 +192,6 @@ const PivotGridWrapper: React.FC = (props) => { loadTableData(); }, [componentConfig.dataSource?.tableName, configData, props.isDesignMode]); - - // 디버깅 로그 - console.log("🔷 PivotGridWrapper props:", { - isDesignMode: props.isDesignMode, - isInteractive: props.isInteractive, - hasComponentConfig: !!props.componentConfig, - hasConfig: !!props.config, - hasData: !!configData, - dataLength: configData?.length, - hasLoadedData: loadedData.length > 0, - loadedDataLength: loadedData.length, - hasFields: !!configFields, - fieldsLength: configFields?.length, - isLoading, - }); // 디자인 모드 판단: // 1. isDesignMode === true @@ -173,13 +213,6 @@ const PivotGridWrapper: React.FC = (props) => { ? (componentConfig.title || props.title || "피벗 그리드") + " (미리보기)" : (componentConfig.title || props.title); - console.log("🔷 PivotGridWrapper final:", { - isDesignMode, - usePreviewData, - finalDataLength: finalData?.length, - finalFieldsLength: finalFields?.length, - }); - // 총계 설정 const totalsConfig = componentConfig.totals || props.totals || { showRowGrandTotals: true, @@ -200,24 +233,27 @@ const PivotGridWrapper: React.FC = (props) => { ); } + // 에러 경계로 감싸서 렌더링 에러 시 컴포넌트가 완전히 사라지지 않도록 함 return ( - + + + ); }; @@ -284,18 +320,6 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer { const componentConfig = props.componentConfig || props.config || {}; const configFields = componentConfig.fields || props.fields; const configData = props.data; - - // 디버깅 로그 - console.log("🔷 PivotGridRenderer props:", { - isDesignMode: props.isDesignMode, - isInteractive: props.isInteractive, - hasComponentConfig: !!props.componentConfig, - hasConfig: !!props.config, - hasData: !!configData, - dataLength: configData?.length, - hasFields: !!configFields, - fieldsLength: configFields?.length, - }); // 디자인 모드 판단: // 1. isDesignMode === true @@ -315,13 +339,6 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer { ? (componentConfig.title || props.title || "피벗 그리드") + " (미리보기)" : (componentConfig.title || props.title); - console.log("🔷 PivotGridRenderer final:", { - isDesignMode, - usePreviewData, - finalDataLength: finalData?.length, - finalFieldsLength: finalFields?.length, - }); - // 총계 설정 const totalsConfig = componentConfig.totals || props.totals || { showRowGrandTotals: true, @@ -340,7 +357,7 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer { fieldChooser={componentConfig.fieldChooser || props.fieldChooser} chart={componentConfig.chart || props.chart} allowExpandAll={componentConfig.allowExpandAll !== false} - height={componentConfig.height || props.height || "400px"} + height="100%" maxHeight={componentConfig.maxHeight || props.maxHeight} exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }} onCellClick={props.onCellClick} diff --git a/frontend/lib/registry/components/pivot-grid/components/FieldChooser.tsx b/frontend/lib/registry/components/pivot-grid/components/FieldChooser.tsx index 89fe5128..fba64e65 100644 --- a/frontend/lib/registry/components/pivot-grid/components/FieldChooser.tsx +++ b/frontend/lib/registry/components/pivot-grid/components/FieldChooser.tsx @@ -267,11 +267,9 @@ export const FieldChooser: React.FC = ({ const existingConfig = selectedFields.find((f) => f.field === field.field); if (area === "none") { - // 필드 제거 또는 숨기기 + // 필드 완전 제거 (visible: false 대신 배열에서 제거) if (existingConfig) { - const newFields = selectedFields.map((f) => - f.field === field.field ? { ...f, visible: false } : f - ); + const newFields = selectedFields.filter((f) => f.field !== field.field); onFieldsChange(newFields); } } else { diff --git a/frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx b/frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx index fed43afb..967afd08 100644 --- a/frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx +++ b/frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx @@ -25,6 +25,7 @@ import { horizontalListSortingStrategy, useSortable, } from "@dnd-kit/sortable"; +import { useDroppable } from "@dnd-kit/core"; import { CSS } from "@dnd-kit/utilities"; import { cn } from "@/lib/utils"; import { PivotFieldConfig, PivotAreaType } from "../types"; @@ -244,22 +245,31 @@ const DroppableArea: React.FC = ({ 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 (
{/* 영역 헤더 */} -
+
{icon} {title} {areaFields.length > 0 && ( - + {areaFields.length} )} @@ -267,11 +277,16 @@ const DroppableArea: React.FC = ({ {/* 필드 목록 */} -
+
{areaFields.length === 0 ? ( - - 필드를 여기로 드래그 - +
+ + ← 필드를 여기로 드래그하세요 + +
) : ( areaFields.map((field) => ( = ({ return; } - // 드롭 영역 감지 + // 드롭 영역 감지 (영역 자체의 ID를 우선 확인) const overId = over.id as string; + + // 1. overId가 영역 자체인 경우 (filter, column, row, data) + if (["filter", "column", "row", "data"].includes(overId)) { + setOverArea(overId as PivotAreaType); + return; + } + + // 2. overId가 필드인 경우 (예: row-part_name) const targetArea = overId.split("-")[0] as PivotAreaType; if (["filter", "column", "row", "data"].includes(targetArea)) { setOverArea(targetArea); @@ -350,10 +373,13 @@ export const FieldPanel: React.FC = ({ // 드래그 종료 const handleDragEnd = (event: DragEndEvent) => { const { active, over } = event; + const currentOverArea = overArea; // handleDragOver에서 감지한 영역 저장 setActiveId(null); setOverArea(null); - if (!over) return; + if (!over) { + return; + } const activeId = active.id as string; const overId = over.id as string; @@ -363,7 +389,16 @@ export const FieldPanel: React.FC = ({ PivotAreaType, string ]; - const [targetArea] = overId.split("-") as [PivotAreaType, string]; + + // targetArea 결정: handleDragOver에서 감지한 영역 우선 사용 + let targetArea: PivotAreaType; + if (currentOverArea) { + targetArea = currentOverArea; + } else if (["filter", "column", "row", "data"].includes(overId)) { + targetArea = overId as PivotAreaType; + } else { + targetArea = overId.split("-")[0] as PivotAreaType; + } // 같은 영역 내 정렬 if (sourceArea === targetArea) { @@ -406,6 +441,7 @@ export const FieldPanel: React.FC = ({ } return f; }); + onFieldsChange(newFields); } }; diff --git a/frontend/lib/registry/components/pivot-grid/hooks/useVirtualScroll.ts b/frontend/lib/registry/components/pivot-grid/hooks/useVirtualScroll.ts index 152cb2df..6557dee3 100644 --- a/frontend/lib/registry/components/pivot-grid/hooks/useVirtualScroll.ts +++ b/frontend/lib/registry/components/pivot-grid/hooks/useVirtualScroll.ts @@ -51,14 +51,18 @@ export function useVirtualScroll(options: VirtualScrollOptions): VirtualScrollRe // 보이는 아이템 수 const visibleCount = Math.ceil(containerHeight / itemHeight); - // 시작/끝 인덱스 계산 + // 시작/끝 인덱스 계산 (음수 방지) const { startIndex, endIndex } = useMemo(() => { + // itemCount가 0이면 빈 배열 + if (itemCount === 0) { + return { startIndex: 0, endIndex: -1 }; + } const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan); const end = Math.min( itemCount - 1, Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan ); - return { startIndex: start, endIndex: end }; + return { startIndex: start, endIndex: Math.max(start, end) }; // end가 start보다 작지 않도록 }, [scrollTop, itemHeight, containerHeight, itemCount, overscan]); // 전체 높이 diff --git a/frontend/lib/registry/components/pivot-grid/utils/pivotEngine.ts b/frontend/lib/registry/components/pivot-grid/utils/pivotEngine.ts index 4d3fecfd..02dd4608 100644 --- a/frontend/lib/registry/components/pivot-grid/utils/pivotEngine.ts +++ b/frontend/lib/registry/components/pivot-grid/utils/pivotEngine.ts @@ -710,27 +710,19 @@ export function processPivotData( .filter((f) => f.area === "data" && f.visible !== false) .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)); - const filterFields = fields.filter( - (f) => f.area === "filter" && f.visible !== false + // 참고: 필터링은 PivotGridComponent에서 이미 처리됨 + // 여기서는 추가 필터링 없이 전달받은 데이터 사용 + const filteredData = data; + + // 확장 경로 Set 변환 (잘못된 형식 필터링) + const validRowPaths = (expandedRowPaths || []).filter( + (p): p is string[] => Array.isArray(p) && p.length > 0 && p.every(item => typeof item === "string") ); - - // 필터 적용 - let filteredData = data; - for (const filterField of filterFields) { - if (filterField.filterValues && filterField.filterValues.length > 0) { - filteredData = filteredData.filter((row) => { - const value = getFieldValue(row, filterField); - if (filterField.filterType === "exclude") { - return !filterField.filterValues!.includes(value); - } - return filterField.filterValues!.includes(value); - }); - } - } - - // 확장 경로 Set 변환 - const expandedRowSet = new Set(expandedRowPaths.map(pathToKey)); - const expandedColSet = new Set(expandedColumnPaths.map(pathToKey)); + const validColPaths = (expandedColumnPaths || []).filter( + (p): p is string[] => Array.isArray(p) && p.length > 0 && p.every(item => typeof item === "string") + ); + const expandedRowSet = new Set(validRowPaths.map(pathToKey)); + const expandedColSet = new Set(validColPaths.map(pathToKey)); // 기본 확장: 첫 번째 레벨 모두 확장 if (expandedRowPaths.length === 0 && rowFields.length > 0) { diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx index 0597ac68..25f522cb 100644 --- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx +++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx @@ -917,10 +917,15 @@ export const SplitPanelLayoutComponent: React.FC const { entityJoinApi } = await import("@/lib/api/entityJoin"); // 복합키 조건 생성 + // 🔧 관계 필터링은 정확한 값 매칭이 필요하므로 equals 연산자 사용 + // (entity 타입 컬럼의 경우 기본 contains 연산자가 참조 테이블의 표시 컬럼으로 검색하여 실패함) const searchConditions: Record = {}; keys.forEach((key) => { if (key.leftColumn && key.rightColumn && leftItem[key.leftColumn] !== undefined) { - searchConditions[key.rightColumn] = leftItem[key.leftColumn]; + searchConditions[key.rightColumn] = { + value: leftItem[key.leftColumn], + operator: "equals", + }; } }); diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx index 910babc5..72fd5330 100644 --- a/frontend/lib/registry/components/table-list/TableListComponent.tsx +++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx @@ -41,7 +41,7 @@ import { Lock, } from "lucide-react"; import * as XLSX from "xlsx"; -import { FileText, ChevronRightIcon } from "lucide-react"; +import { FileText, ChevronRightIcon, Search } from "lucide-react"; import { Checkbox } from "@/components/ui/checkbox"; import { cn } from "@/lib/utils"; import { toast } from "sonner"; @@ -460,6 +460,7 @@ export const TableListComponent: React.FC = ({ // 🆕 컬럼 헤더 필터 상태 (상단에서 선언) const [headerFilters, setHeaderFilters] = useState>>({}); + const [headerLikeFilters, setHeaderLikeFilters] = useState>({}); // LIKE 검색용 const [openFilterColumn, setOpenFilterColumn] = useState(null); // 🆕 Filter Builder (고급 필터) 관련 상태 - filteredData보다 먼저 정의해야 함 @@ -493,6 +494,22 @@ export const TableListComponent: React.FC = ({ }); } + // 2-1. 🆕 LIKE 검색 필터 적용 + if (Object.keys(headerLikeFilters).length > 0) { + result = result.filter((row) => { + return Object.entries(headerLikeFilters).every(([columnName, searchText]) => { + if (!searchText || searchText.trim() === "") return true; + + // 여러 가능한 컬럼명 시도 + const cellValue = row[columnName] ?? row[columnName.toLowerCase()] ?? row[columnName.toUpperCase()]; + const cellStr = cellValue !== null && cellValue !== undefined ? String(cellValue).toLowerCase() : ""; + + // LIKE 검색 (대소문자 무시) + return cellStr.includes(searchText.toLowerCase()); + }); + }); + } + // 3. 🆕 Filter Builder 적용 if (filterGroups.length > 0) { result = result.filter((row) => { @@ -546,7 +563,7 @@ export const TableListComponent: React.FC = ({ } return result; - }, [data, splitPanelPosition, splitPanelContext?.addedItemIds, headerFilters, filterGroups]); + }, [data, splitPanelPosition, splitPanelContext?.addedItemIds, headerFilters, headerLikeFilters, filterGroups]); const [currentPage, setCurrentPage] = useState(1); const [totalPages, setTotalPages] = useState(0); @@ -2968,6 +2985,7 @@ export const TableListComponent: React.FC = ({ headerFilters: Object.fromEntries( Object.entries(headerFilters).map(([key, set]) => [key, Array.from(set as Set)]), ), + headerLikeFilters, // LIKE 검색 필터 저장 pageSize: localPageSize, timestamp: Date.now(), }; @@ -2988,6 +3006,7 @@ export const TableListComponent: React.FC = ({ frozenColumnCount, showGridLines, headerFilters, + headerLikeFilters, localPageSize, ]); @@ -3024,6 +3043,9 @@ export const TableListComponent: React.FC = ({ }); setHeaderFilters(filters); } + if (state.headerLikeFilters) { + setHeaderLikeFilters(state.headerLikeFilters); + } } catch (error) { console.error("❌ 테이블 상태 복원 실패:", error); } @@ -5827,7 +5849,7 @@ export const TableListComponent: React.FC = ({ }} className={cn( "hover:bg-primary/20 ml-1 rounded p-0.5 transition-colors", - headerFilters[column.columnName]?.size > 0 && "text-primary bg-primary/10", + (headerFilters[column.columnName]?.size > 0 || headerLikeFilters[column.columnName]) && "text-primary bg-primary/10", )} title="필터" > @@ -5835,7 +5857,7 @@ export const TableListComponent: React.FC = ({ e.stopPropagation()} > @@ -5844,16 +5866,42 @@ export const TableListComponent: React.FC = ({ 필터: {columnLabels[column.columnName] || column.displayName} - {headerFilters[column.columnName]?.size > 0 && ( + {(headerFilters[column.columnName]?.size > 0 || headerLikeFilters[column.columnName]) && ( )}
-
+ {/* LIKE 검색 입력 필드 */} +
+ + { + 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()} + /> +
+ {/* 구분선 */} +
또는 값 선택:
+
{columnUniqueValues[column.columnName]?.slice(0, 50).map((val) => { const isSelected = headerFilters[column.columnName]?.has(val); return (
0 ? 2 : 1} > @@ -1657,8 +1736,8 @@ export const PivotGridComponent: React.FC = ({ key={idx} className={cn( "border-r border-b border-border relative group", - "px-2 py-1.5 text-center text-xs font-medium", - "bg-muted/70 sticky top-0 z-10", + "px-2 py-1 text-center text-xs font-medium", + "bg-background sticky top-0 z-10", dataFields.length === 1 && "cursor-pointer hover:bg-accent/50" )} colSpan={dataFields.length || 1} @@ -1680,16 +1759,31 @@ export const PivotGridComponent: React.FC = ({ /> 1 ? 2 : 1} + > + 총계 + 0 ? 2 : 1} + rowSpan={dataFields.length > 1 ? 2 : 1} >
{columnFields.map((f) => ( @@ -1721,25 +1815,11 @@ export const PivotGridComponent: React.FC = ({
- 총계 -
- {df.caption} -
-
+