Compare commits

..

4 Commits
main ... ksh

Author SHA1 Message Date
SeongHyun Kim e609f624bb Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into ksh 2026-01-15 17:05:13 +09:00
SeongHyun Kim 9d5e3f7bd6 Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into ksh 2026-01-15 16:56:55 +09:00
SeongHyun Kim 6b9dc4e19d Merge branch 'main' into ksh 2026-01-15 16:56:18 +09:00
SeongHyun Kim de7fa7a71b fix: 발주/입고관리 그룹 편집 시 단건만 저장되던 문제 수정
EditModal.tsx: conditional-container 존재 시 onSave 미전달 로직 수정
ModalRepeaterTableComponent.tsx: groupedData prop 우선 사용하도록 변경
2026-01-15 14:36:00 +09:00
34 changed files with 3429 additions and 4360 deletions

View File

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

59
PLAN.MD
View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -31,11 +31,6 @@ import {
getMultipleScreenLayoutSummary, getMultipleScreenLayoutSummary,
// 화면 서브 테이블 관계 // 화면 서브 테이블 관계
getScreenSubTables, getScreenSubTables,
// 메뉴-화면그룹 동기화
syncScreenGroupsToMenuController,
syncMenuToScreenGroupsController,
getSyncStatusController,
syncAllCompaniesController,
} from "../controllers/screenGroupController"; } from "../controllers/screenGroupController";
const router = Router(); const router = Router();
@ -94,18 +89,6 @@ router.post("/layout-summary/batch", getMultipleScreenLayoutSummary);
// ============================================================ // ============================================================
router.post("/sub-tables/batch", getScreenSubTables); 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; export default router;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,73 +1,12 @@
"use client"; "use client";
import React, { useEffect, useState, Component, ErrorInfo, ReactNode } from "react"; import React from "react";
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer"; import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
import { createComponentDefinition } from "../../utils/createComponentDefinition"; import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component"; import { ComponentCategory } from "@/types/component";
import { PivotGridComponent } from "./PivotGridComponent"; import { PivotGridComponent } from "./PivotGridComponent";
import { PivotGridConfigPanel } from "./PivotGridConfigPanel"; import { PivotGridConfigPanel } from "./PivotGridConfigPanel";
import { PivotFieldConfig } from "./types"; import { PivotFieldConfig } from "./types";
import { dataApi } from "@/lib/api/data";
import { AlertCircle, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
// ==================== 에러 경계 ====================
interface ErrorBoundaryState {
hasError: boolean;
error?: Error;
}
class PivotGridErrorBoundary extends Component<
{ children: ReactNode; onReset?: () => void },
ErrorBoundaryState
> {
constructor(props: { children: ReactNode; onReset?: () => void }) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
return { hasError: true, error };
}
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
console.error("🔴 [PivotGrid] 렌더링 에러:", error);
console.error("🔴 [PivotGrid] 에러 정보:", errorInfo);
}
handleReset = () => {
this.setState({ hasError: false, error: undefined });
this.props.onReset?.();
};
render() {
if (this.state.hasError) {
return (
<div className="flex flex-col items-center justify-center p-8 text-center border border-destructive/50 rounded-lg bg-destructive/5">
<AlertCircle className="h-8 w-8 text-destructive mb-2" />
<h3 className="text-sm font-medium text-destructive mb-1">
</h3>
<p className="text-xs text-muted-foreground mb-3 max-w-md">
{this.state.error?.message || "알 수 없는 오류가 발생했습니다."}
</p>
<Button
variant="outline"
size="sm"
onClick={this.handleReset}
className="gap-2"
>
<RefreshCw className="h-3.5 w-3.5" />
</Button>
</div>
);
}
return this.props.children;
}
}
// ==================== 샘플 데이터 (미리보기용) ==================== // ==================== 샘플 데이터 (미리보기용) ====================
@ -156,63 +95,43 @@ const PivotGridWrapper: React.FC<any> = (props) => {
const configFields = componentConfig.fields || props.fields; const configFields = componentConfig.fields || props.fields;
const configData = props.data; const configData = props.data;
// 🆕 테이블에서 데이터 자동 로딩 // 디버깅 로그
const [loadedData, setLoadedData] = useState<any[]>([]); console.log("🔷 PivotGridWrapper props:", {
const [isLoading, setIsLoading] = useState(false); isDesignMode: props.isDesignMode,
isInteractive: props.isInteractive,
useEffect(() => { hasComponentConfig: !!props.componentConfig,
const loadTableData = async () => { hasConfig: !!props.config,
const tableName = componentConfig.dataSource?.tableName; hasData: !!configData,
dataLength: configData?.length,
// 데이터가 이미 있거나, 테이블명이 없으면 로딩하지 않음 hasFields: !!configFields,
if (configData || !tableName || props.isDesignMode) { fieldsLength: configFields?.length,
return; });
}
setIsLoading(true);
try {
const response = await dataApi.getTableData(tableName, {
page: 1,
size: 10000, // 피벗 분석용 대량 데이터
});
// dataApi.getTableData는 { data, total, page, size, totalPages } 구조
if (response.data && Array.isArray(response.data)) {
setLoadedData(response.data);
} else {
console.error("❌ [PivotGrid] 데이터 로딩 실패: 응답에 data 배열이 없음");
setLoadedData([]);
}
} catch (error) {
console.error("❌ [PivotGrid] 데이터 로딩 에러:", error);
} finally {
setIsLoading(false);
}
};
loadTableData();
}, [componentConfig.dataSource?.tableName, configData, props.isDesignMode]);
// 디자인 모드 판단: // 디자인 모드 판단:
// 1. isDesignMode === true // 1. isDesignMode === true
// 2. isInteractive === false (편집 모드) // 2. isInteractive === false (편집 모드)
// 3. 데이터가 없는 경우
const isDesignMode = props.isDesignMode === true || props.isInteractive === false; const isDesignMode = props.isDesignMode === true || props.isInteractive === false;
const hasValidData = configData && Array.isArray(configData) && configData.length > 0;
// 🆕 실제 데이터 우선순위: props.data > loadedData > 샘플 데이터
const actualData = configData || loadedData;
const hasValidData = actualData && Array.isArray(actualData) && actualData.length > 0;
const hasValidFields = configFields && Array.isArray(configFields) && configFields.length > 0; const hasValidFields = configFields && Array.isArray(configFields) && configFields.length > 0;
// 디자인 모드이거나 데이터가 없으면 샘플 데이터 사용 // 디자인 모드이거나 데이터가 없으면 샘플 데이터 사용
const usePreviewData = isDesignMode || (!hasValidData && !isLoading); const usePreviewData = isDesignMode || !hasValidData;
// 최종 데이터/필드 결정 // 최종 데이터/필드 결정
const finalData = usePreviewData ? SAMPLE_DATA : actualData; const finalData = usePreviewData ? SAMPLE_DATA : configData;
const finalFields = hasValidFields ? configFields : SAMPLE_FIELDS; const finalFields = hasValidFields ? configFields : SAMPLE_FIELDS;
const finalTitle = usePreviewData const finalTitle = usePreviewData
? (componentConfig.title || props.title || "피벗 그리드") + " (미리보기)" ? (componentConfig.title || props.title || "피벗 그리드") + " (미리보기)"
: (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 || { const totalsConfig = componentConfig.totals || props.totals || {
showRowGrandTotals: true, showRowGrandTotals: true,
@ -221,39 +140,24 @@ const PivotGridWrapper: React.FC<any> = (props) => {
showColumnTotals: true, showColumnTotals: true,
}; };
// 🆕 로딩 중 표시
if (isLoading) {
return (
<div className="flex items-center justify-center h-64 bg-muted/30 rounded-lg">
<div className="text-center space-y-2">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
<p className="text-sm text-muted-foreground"> ...</p>
</div>
</div>
);
}
// 에러 경계로 감싸서 렌더링 에러 시 컴포넌트가 완전히 사라지지 않도록 함
return ( return (
<PivotGridErrorBoundary> <PivotGridComponent
<PivotGridComponent title={finalTitle}
title={finalTitle} data={finalData}
data={finalData} fields={finalFields}
fields={finalFields} totals={totalsConfig}
totals={totalsConfig} style={componentConfig.style || props.style}
style={componentConfig.style || props.style} fieldChooser={componentConfig.fieldChooser || props.fieldChooser}
fieldChooser={componentConfig.fieldChooser || props.fieldChooser} chart={componentConfig.chart || props.chart}
chart={componentConfig.chart || props.chart} allowExpandAll={componentConfig.allowExpandAll !== false}
allowExpandAll={componentConfig.allowExpandAll !== false} height={componentConfig.height || props.height || "400px"}
height="100%" maxHeight={componentConfig.maxHeight || props.maxHeight}
maxHeight={componentConfig.maxHeight || props.maxHeight} exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }}
exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }} onCellClick={props.onCellClick}
onCellClick={props.onCellClick} onCellDoubleClick={props.onCellDoubleClick}
onCellDoubleClick={props.onCellDoubleClick} onFieldDrop={props.onFieldDrop}
onFieldDrop={props.onFieldDrop} onExpandChange={props.onExpandChange}
onExpandChange={props.onExpandChange} />
/>
</PivotGridErrorBoundary>
); );
}; };
@ -319,6 +223,18 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer {
const componentConfig = props.componentConfig || props.config || {}; const componentConfig = props.componentConfig || props.config || {};
const configFields = componentConfig.fields || props.fields; const configFields = componentConfig.fields || props.fields;
const configData = props.data; 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 // 1. isDesignMode === true
@ -338,6 +254,13 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer {
? (componentConfig.title || props.title || "피벗 그리드") + " (미리보기)" ? (componentConfig.title || props.title || "피벗 그리드") + " (미리보기)"
: (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 || { const totalsConfig = componentConfig.totals || props.totals || {
showRowGrandTotals: true, showRowGrandTotals: true,
@ -356,7 +279,7 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer {
fieldChooser={componentConfig.fieldChooser || props.fieldChooser} fieldChooser={componentConfig.fieldChooser || props.fieldChooser}
chart={componentConfig.chart || props.chart} chart={componentConfig.chart || props.chart}
allowExpandAll={componentConfig.allowExpandAll !== false} allowExpandAll={componentConfig.allowExpandAll !== false}
height="100%" height={componentConfig.height || props.height || "400px"}
maxHeight={componentConfig.maxHeight || props.maxHeight} maxHeight={componentConfig.maxHeight || props.maxHeight}
exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }} exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }}
onCellClick={props.onCellClick} onCellClick={props.onCellClick}

View File

@ -267,9 +267,11 @@ export const FieldChooser: React.FC<FieldChooserProps> = ({
const existingConfig = selectedFields.find((f) => f.field === field.field); const existingConfig = selectedFields.find((f) => f.field === field.field);
if (area === "none") { if (area === "none") {
// 필드 완전 제거 (visible: false 대신 배열에서 제거) // 필드 제거 또는 숨기기
if (existingConfig) { if (existingConfig) {
const newFields = selectedFields.filter((f) => f.field !== field.field); const newFields = selectedFields.map((f) =>
f.field === field.field ? { ...f, visible: false } : f
);
onFieldsChange(newFields); onFieldsChange(newFields);
} }
} else { } else {
@ -399,7 +401,7 @@ export const FieldChooser: React.FC<FieldChooserProps> = ({
</div> </div>
{/* 필드 목록 */} {/* 필드 목록 */}
<ScrollArea className="flex-1 -mx-6 px-6 max-h-[40vh] overflow-y-auto"> <ScrollArea className="flex-1 -mx-6 px-6">
<div className="space-y-2 py-2"> <div className="space-y-2 py-2">
{filteredFields.length === 0 ? ( {filteredFields.length === 0 ? (
<div className="text-center py-8 text-muted-foreground"> <div className="text-center py-8 text-muted-foreground">

View File

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

View File

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

View File

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

View File

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