Compare commits
No commits in common. "main" and "feature/v2-renewal" have entirely different histories.
main
...
feature/v2
|
|
@ -140,7 +140,7 @@ if (comp.componentType === "my-new-component") {
|
|||
if (config?.title) {
|
||||
addLabel({
|
||||
id: `${comp.id}_title`,
|
||||
componentId: `${comp.id}_title`,-
|
||||
componentId: `${comp.id}_title`,
|
||||
label: config.title,
|
||||
type: "title",
|
||||
parentType: "my-new-component",
|
||||
|
|
|
|||
59
PLAN.MD
59
PLAN.MD
|
|
@ -1,7 +1,7 @@
|
|||
# 프로젝트: 화면 관리 기능 개선 (복제/삭제/그룹 관리/테이블 설정)
|
||||
# 프로젝트: 화면 관리 기능 개선 (복제/삭제/그룹 관리)
|
||||
|
||||
## 개요
|
||||
화면 관리 시스템의 복제, 삭제, 수정, 테이블 설정 기능을 전면 개선하여 효율적인 화면 관리를 지원합니다.
|
||||
화면 관리 시스템의 복제 및 삭제 기능을 전면 개선하여, 단일 화면 복제, 그룹(폴더) 전체 복제, 정렬 순서 유지, 일괄 이름 변경 등 다양한 고급 기능을 지원합니다.
|
||||
|
||||
## 핵심 기능
|
||||
|
||||
|
|
@ -15,54 +15,47 @@
|
|||
### 2. 그룹(폴더) 전체 복제
|
||||
- [x] 대분류 폴더 복제 시 모든 하위 폴더 + 화면 재귀적 복제
|
||||
- [x] 정렬 순서(display_order) 유지
|
||||
- 그룹 생성 시 원본 display_order 전달
|
||||
- 화면 추가 시 원본 display_order 유지
|
||||
- 하위 그룹들 display_order 순으로 정렬 후 복제
|
||||
- [x] 대분류(최상위 그룹) 복제 시 경고 문구 표시
|
||||
- [x] 정렬 순서 입력 필드 추가
|
||||
- [x] 복제 모드 선택: 전체(폴더+화면), 폴더만, 화면만
|
||||
- [x] 모달 스크롤 지원 (max-h-[90vh] overflow-y-auto)
|
||||
- [x] 정렬 순서 입력 필드 추가 (사용자가 직접 수정 가능)
|
||||
- [x] 원본 그룹 정보 표시 개선
|
||||
- 직접 포함 화면 수
|
||||
- 하위 그룹 수
|
||||
- 복제될 총 화면 수 (하위 그룹 포함)
|
||||
|
||||
### 3. 고급 옵션: 이름 일괄 변경
|
||||
- [x] 찾을 텍스트 / 대체할 텍스트 (Find & Replace)
|
||||
- [x] 삭제할 텍스트 지정 (모든 폴더/화면 이름에서 제거)
|
||||
- [x] 추가할 접미사 지정 (기본값: " (복제)")
|
||||
- [x] 미리보기 기능
|
||||
|
||||
### 4. 삭제 기능
|
||||
- [x] 단일 화면 삭제 (휴지통으로 이동)
|
||||
- [x] 그룹 삭제 (화면 함께 삭제 옵션)
|
||||
- [x] 삭제 시 로딩 프로그레스 바 표시
|
||||
- [x] 그룹 삭제 시 옵션 선택
|
||||
- "화면도 함께 삭제" 체크박스
|
||||
- 체크 시: 그룹 + 포함된 화면 모두 삭제
|
||||
- 미체크 시: 화면은 "미분류"로 이동
|
||||
|
||||
### 5. 화면 수정 기능
|
||||
- [x] 우클릭 "수정" 메뉴로 화면 이름/그룹/역할/정렬 순서 변경
|
||||
- [x] 그룹 추가/수정 시 상위 그룹 기반 자동 회사 코드 설정
|
||||
|
||||
### 6. 테이블 설정 기능 (TableSettingModal)
|
||||
- [x] 화면 설정 모달에 "테이블 설정" 탭 추가
|
||||
- [x] 입력 타입 변경 시 관련 참조 필드 자동 초기화
|
||||
- 엔티티→텍스트: referenceTable, referenceColumn, displayColumn 초기화
|
||||
- 코드→다른 타입: codeCategory, codeValue 초기화
|
||||
- [x] 데이터 일관성 유지 (inputType ↔ referenceTable 연동)
|
||||
- [x] 조인 배지 단일화 (FK 배지 제거, 조인 배지만 표시)
|
||||
|
||||
### 7. 회사 코드 지원 (최고 관리자)
|
||||
### 5. 회사 코드 지원 (최고 관리자)
|
||||
- [x] 대상 회사 선택 가능
|
||||
- [x] 상위 그룹 선택 시 자동 회사 코드 설정
|
||||
- [x] 복제된 그룹/화면에 선택한 회사 코드 적용
|
||||
|
||||
## 관련 파일
|
||||
- `frontend/components/screen/CopyScreenModal.tsx` - 복제 모달
|
||||
- `frontend/components/screen/CopyScreenModal.tsx` - 복제 모달 (화면/그룹 통합)
|
||||
- `frontend/components/screen/ScreenGroupTreeView.tsx` - 트리 뷰 + 컨텍스트 메뉴
|
||||
- `frontend/components/screen/TableSettingModal.tsx` - 테이블 설정 모달
|
||||
- `frontend/components/screen/ScreenSettingModal.tsx` - 화면 설정 모달 (테이블 설정 탭 포함)
|
||||
- `frontend/lib/api/screen.ts` - 화면 API
|
||||
- `frontend/lib/api/screen.ts` - 화면 API (복제, 삭제)
|
||||
- `frontend/lib/api/screenGroup.ts` - 그룹 API
|
||||
- `frontend/lib/api/tableManagement.ts` - 테이블 관리 API
|
||||
|
||||
## 진행 상태
|
||||
- [완료] 단일 화면 복제 + 새로고침
|
||||
- [완료] 그룹 전체 복제 (재귀적)
|
||||
- [완료] 고급 옵션: 이름 일괄 변경 (Find & Replace)
|
||||
- [완료] 단일 화면/그룹 삭제 + 로딩 프로그레스
|
||||
- [완료] 화면 수정 (이름/그룹/역할/순서)
|
||||
- [완료] 테이블 설정 탭 추가
|
||||
- [완료] 입력 타입 변경 시 관련 필드 초기화
|
||||
- [완료] 그룹 복제 모달 스크롤 문제 수정
|
||||
- [완료] 정렬 순서(display_order) 유지
|
||||
- [완료] 대분류 경고 문구
|
||||
- [완료] 정렬 순서 입력 필드
|
||||
- [완료] 고급 옵션: 이름 일괄 변경
|
||||
- [완료] 단일 화면 삭제
|
||||
- [완료] 그룹 삭제 (화면 함께 삭제 옵션)
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -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>(
|
||||
`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)]
|
||||
);
|
||||
|
||||
|
|
@ -1547,50 +1478,67 @@ export async function deleteMenu(
|
|||
}
|
||||
}
|
||||
|
||||
// 외래키 제약 조건이 있는 관련 테이블 데이터 먼저 정리
|
||||
const menuObjid = Number(menuId);
|
||||
|
||||
// 하위 메뉴들 재귀적으로 수집
|
||||
const childMenuIds = await collectAllChildMenuIds(menuObjid);
|
||||
const allMenuIdsToDelete = [menuObjid, ...childMenuIds];
|
||||
// 1. category_column_mapping에서 menu_objid를 NULL로 설정
|
||||
await query(
|
||||
`UPDATE category_column_mapping SET menu_objid = NULL WHERE menu_objid = $1`,
|
||||
[menuObjid]
|
||||
);
|
||||
|
||||
logger.info(`메뉴 삭제 대상: 본인(${menuObjid}) + 하위 메뉴 ${childMenuIds.length}개`, {
|
||||
menuName: currentMenu.menu_name_kor,
|
||||
totalCount: allMenuIdsToDelete.length,
|
||||
childMenuIds,
|
||||
});
|
||||
|
||||
// 모든 삭제 대상 메뉴에 대해 관련 데이터 정리
|
||||
for (const objid of allMenuIdsToDelete) {
|
||||
await cleanupMenuRelatedData(objid);
|
||||
}
|
||||
|
||||
logger.info("메뉴 관련 데이터 정리 완료", {
|
||||
menuObjid,
|
||||
totalCleaned: allMenuIdsToDelete.length
|
||||
});
|
||||
|
||||
// 하위 메뉴부터 역순으로 삭제 (외래키 제약 회피)
|
||||
// 가장 깊은 하위부터 삭제해야 하므로 역순으로
|
||||
const reversedIds = [...allMenuIdsToDelete].reverse();
|
||||
// 2. code_category에서 menu_objid를 NULL로 설정
|
||||
await query(
|
||||
`UPDATE code_category SET menu_objid = NULL WHERE menu_objid = $1`,
|
||||
[menuObjid]
|
||||
);
|
||||
|
||||
for (const objid of reversedIds) {
|
||||
await query(`DELETE FROM menu_info WHERE objid = $1`, [objid]);
|
||||
}
|
||||
// 3. code_info에서 menu_objid를 NULL로 설정
|
||||
await query(
|
||||
`UPDATE code_info SET menu_objid = NULL WHERE menu_objid = $1`,
|
||||
[menuObjid]
|
||||
);
|
||||
|
||||
// 4. numbering_rules에서 menu_objid를 NULL로 설정
|
||||
await query(
|
||||
`UPDATE numbering_rules SET menu_objid = NULL WHERE menu_objid = $1`,
|
||||
[menuObjid]
|
||||
);
|
||||
|
||||
// 5. rel_menu_auth에서 관련 권한 삭제
|
||||
await query(
|
||||
`DELETE FROM rel_menu_auth WHERE menu_objid = $1`,
|
||||
[menuObjid]
|
||||
);
|
||||
|
||||
// 6. screen_menu_assignments에서 관련 할당 삭제
|
||||
await query(
|
||||
`DELETE FROM screen_menu_assignments WHERE menu_objid = $1`,
|
||||
[menuObjid]
|
||||
);
|
||||
|
||||
logger.info("메뉴 삭제 성공", {
|
||||
deletedMenuObjid: menuObjid,
|
||||
deletedMenuName: currentMenu.menu_name_kor,
|
||||
totalDeleted: allMenuIdsToDelete.length,
|
||||
});
|
||||
logger.info("메뉴 관련 데이터 정리 완료", { menuObjid });
|
||||
|
||||
// Raw Query를 사용한 메뉴 삭제
|
||||
const [deletedMenu] = await query<any>(
|
||||
`DELETE FROM menu_info WHERE objid = $1 RETURNING *`,
|
||||
[menuObjid]
|
||||
);
|
||||
|
||||
logger.info("메뉴 삭제 성공", { deletedMenu });
|
||||
|
||||
const response: ApiResponse<any> = {
|
||||
success: true,
|
||||
message: `메뉴가 성공적으로 삭제되었습니다. (하위 메뉴 ${childMenuIds.length}개 포함)`,
|
||||
message: "메뉴가 성공적으로 삭제되었습니다.",
|
||||
data: {
|
||||
objid: menuObjid.toString(),
|
||||
menuNameKor: currentMenu.menu_name_kor,
|
||||
deletedCount: allMenuIdsToDelete.length,
|
||||
deletedChildCount: childMenuIds.length,
|
||||
objid: deletedMenu.objid.toString(),
|
||||
menuNameKor: deletedMenu.menu_name_kor,
|
||||
menuNameEng: deletedMenu.menu_name_eng,
|
||||
menuUrl: deletedMenu.menu_url,
|
||||
menuDesc: deletedMenu.menu_desc,
|
||||
status: deletedMenu.status,
|
||||
writer: deletedMenu.writer,
|
||||
regdate: new Date(deletedMenu.regdate).toISOString(),
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -1675,49 +1623,18 @@ export async function deleteMenusBatch(
|
|||
}
|
||||
}
|
||||
|
||||
// 모든 삭제 대상 메뉴 ID 수집 (하위 메뉴 포함)
|
||||
const allMenuIdsToDelete = new Set<number>();
|
||||
|
||||
for (const menuId of menuIds) {
|
||||
const objid = Number(menuId);
|
||||
allMenuIdsToDelete.add(objid);
|
||||
|
||||
// 하위 메뉴들 재귀적으로 수집
|
||||
const childMenuIds = await collectAllChildMenuIds(objid);
|
||||
childMenuIds.forEach(id => allMenuIdsToDelete.add(Number(id)));
|
||||
}
|
||||
|
||||
const allIdsArray = Array.from(allMenuIdsToDelete);
|
||||
|
||||
logger.info(`메뉴 일괄 삭제 대상: 선택 ${menuIds.length}개 + 하위 메뉴 포함 총 ${allIdsArray.length}개`, {
|
||||
selectedMenuIds: menuIds,
|
||||
totalWithChildren: allIdsArray.length,
|
||||
});
|
||||
|
||||
// 모든 삭제 대상 메뉴에 대해 관련 데이터 정리
|
||||
for (const objid of allIdsArray) {
|
||||
await cleanupMenuRelatedData(objid);
|
||||
}
|
||||
|
||||
logger.info("메뉴 관련 데이터 정리 완료", {
|
||||
totalCleaned: allIdsArray.length
|
||||
});
|
||||
|
||||
// Raw Query를 사용한 메뉴 일괄 삭제
|
||||
let deletedCount = 0;
|
||||
let failedCount = 0;
|
||||
const deletedMenus: any[] = [];
|
||||
const failedMenuIds: string[] = [];
|
||||
|
||||
// 하위 메뉴부터 삭제하기 위해 역순으로 정렬
|
||||
const reversedIds = [...allIdsArray].reverse();
|
||||
|
||||
// 각 메뉴 ID에 대해 삭제 시도
|
||||
for (const menuObjid of reversedIds) {
|
||||
for (const menuId of menuIds) {
|
||||
try {
|
||||
const result = await query<any>(
|
||||
`DELETE FROM menu_info WHERE objid = $1 RETURNING *`,
|
||||
[menuObjid]
|
||||
[Number(menuId)]
|
||||
);
|
||||
|
||||
if (result.length > 0) {
|
||||
|
|
@ -1728,20 +1645,20 @@ export async function deleteMenusBatch(
|
|||
});
|
||||
} else {
|
||||
failedCount++;
|
||||
failedMenuIds.push(String(menuObjid));
|
||||
failedMenuIds.push(menuId);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error(`메뉴 삭제 실패 (ID: ${menuObjid}):`, error);
|
||||
logger.error(`메뉴 삭제 실패 (ID: ${menuId}):`, error);
|
||||
failedCount++;
|
||||
failedMenuIds.push(String(menuObjid));
|
||||
failedMenuIds.push(menuId);
|
||||
}
|
||||
}
|
||||
|
||||
logger.info("메뉴 일괄 삭제 완료", {
|
||||
requested: menuIds.length,
|
||||
totalWithChildren: allIdsArray.length,
|
||||
total: menuIds.length,
|
||||
deletedCount,
|
||||
failedCount,
|
||||
deletedMenus,
|
||||
failedMenuIds,
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ export class EntityJoinController {
|
|||
autoFilter, // 🔒 멀티테넌시 자동 필터
|
||||
dataFilter, // 🆕 데이터 필터 (JSON 문자열)
|
||||
excludeFilter, // 🆕 제외 필터 (JSON 문자열) - 다른 테이블에 이미 존재하는 데이터 제외
|
||||
deduplication, // 🆕 중복 제거 설정 (JSON 문자열)
|
||||
userLang, // userLang은 별도로 분리하여 search에 포함되지 않도록 함
|
||||
...otherParams
|
||||
} = req.query;
|
||||
|
|
@ -49,6 +50,9 @@ export class EntityJoinController {
|
|||
// search가 문자열인 경우 JSON 파싱
|
||||
searchConditions =
|
||||
typeof search === "string" ? JSON.parse(search) : search;
|
||||
|
||||
// 🔍 디버그: 파싱된 검색 조건 로깅
|
||||
logger.info(`🔍 파싱된 검색 조건:`, JSON.stringify(searchConditions, null, 2));
|
||||
} catch (error) {
|
||||
logger.warn("검색 조건 파싱 오류:", error);
|
||||
searchConditions = {};
|
||||
|
|
@ -151,6 +155,24 @@ export class EntityJoinController {
|
|||
}
|
||||
}
|
||||
|
||||
// 🆕 중복 제거 설정 처리
|
||||
let parsedDeduplication: {
|
||||
enabled: boolean;
|
||||
groupByColumn: string;
|
||||
keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
|
||||
sortColumn?: string;
|
||||
} | undefined = undefined;
|
||||
if (deduplication) {
|
||||
try {
|
||||
parsedDeduplication =
|
||||
typeof deduplication === "string" ? JSON.parse(deduplication) : deduplication;
|
||||
logger.info("중복 제거 설정 파싱 완료:", parsedDeduplication);
|
||||
} catch (error) {
|
||||
logger.warn("중복 제거 설정 파싱 오류:", error);
|
||||
parsedDeduplication = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
const result = await tableManagementService.getTableDataWithEntityJoins(
|
||||
tableName,
|
||||
{
|
||||
|
|
@ -168,13 +190,26 @@ export class EntityJoinController {
|
|||
screenEntityConfigs: parsedScreenEntityConfigs,
|
||||
dataFilter: parsedDataFilter, // 🆕 데이터 필터 전달
|
||||
excludeFilter: parsedExcludeFilter, // 🆕 제외 필터 전달
|
||||
deduplication: parsedDeduplication, // 🆕 중복 제거 설정 전달
|
||||
}
|
||||
);
|
||||
|
||||
// 🆕 중복 제거 처리 (결과 데이터에 적용)
|
||||
let finalData = result;
|
||||
if (parsedDeduplication?.enabled && parsedDeduplication.groupByColumn && Array.isArray(result.data)) {
|
||||
logger.info(`🔄 중복 제거 시작: 기준 컬럼 = ${parsedDeduplication.groupByColumn}, 전략 = ${parsedDeduplication.keepStrategy}`);
|
||||
const originalCount = result.data.length;
|
||||
finalData = {
|
||||
...result,
|
||||
data: this.deduplicateData(result.data, parsedDeduplication),
|
||||
};
|
||||
logger.info(`✅ 중복 제거 완료: ${originalCount}개 → ${finalData.data.length}개`);
|
||||
}
|
||||
|
||||
res.status(200).json({
|
||||
success: true,
|
||||
message: "Entity 조인 데이터 조회 성공",
|
||||
data: result,
|
||||
data: finalData,
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error("Entity 조인 데이터 조회 실패", error);
|
||||
|
|
@ -549,6 +584,98 @@ export class EntityJoinController {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 중복 데이터 제거 (메모리 내 처리)
|
||||
*/
|
||||
private deduplicateData(
|
||||
data: any[],
|
||||
config: {
|
||||
groupByColumn: string;
|
||||
keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
|
||||
sortColumn?: string;
|
||||
}
|
||||
): any[] {
|
||||
if (!data || data.length === 0) return data;
|
||||
|
||||
// 그룹별로 데이터 분류
|
||||
const groups: Record<string, any[]> = {};
|
||||
|
||||
for (const row of data) {
|
||||
const groupKey = row[config.groupByColumn];
|
||||
if (groupKey === undefined || groupKey === null) continue;
|
||||
|
||||
if (!groups[groupKey]) {
|
||||
groups[groupKey] = [];
|
||||
}
|
||||
groups[groupKey].push(row);
|
||||
}
|
||||
|
||||
// 각 그룹에서 하나의 행만 선택
|
||||
const result: any[] = [];
|
||||
|
||||
for (const [groupKey, rows] of Object.entries(groups)) {
|
||||
if (rows.length === 0) continue;
|
||||
|
||||
let selectedRow: any;
|
||||
|
||||
switch (config.keepStrategy) {
|
||||
case "latest":
|
||||
// 정렬 컬럼 기준 최신 (가장 큰 값)
|
||||
if (config.sortColumn) {
|
||||
rows.sort((a, b) => {
|
||||
const aVal = a[config.sortColumn!];
|
||||
const bVal = b[config.sortColumn!];
|
||||
if (aVal === bVal) return 0;
|
||||
if (aVal > bVal) return -1;
|
||||
return 1;
|
||||
});
|
||||
}
|
||||
selectedRow = rows[0];
|
||||
break;
|
||||
|
||||
case "earliest":
|
||||
// 정렬 컬럼 기준 최초 (가장 작은 값)
|
||||
if (config.sortColumn) {
|
||||
rows.sort((a, b) => {
|
||||
const aVal = a[config.sortColumn!];
|
||||
const bVal = b[config.sortColumn!];
|
||||
if (aVal === bVal) return 0;
|
||||
if (aVal < bVal) return -1;
|
||||
return 1;
|
||||
});
|
||||
}
|
||||
selectedRow = rows[0];
|
||||
break;
|
||||
|
||||
case "base_price":
|
||||
// base_price가 true인 행 선택
|
||||
selectedRow = rows.find((r) => r.base_price === true || r.base_price === "true") || rows[0];
|
||||
break;
|
||||
|
||||
case "current_date":
|
||||
// 오늘 날짜 기준 유효 기간 내 행 선택
|
||||
const today = new Date().toISOString().split("T")[0];
|
||||
selectedRow = rows.find((r) => {
|
||||
const startDate = r.start_date;
|
||||
const endDate = r.end_date;
|
||||
if (!startDate) return true;
|
||||
if (startDate <= today && (!endDate || endDate >= today)) return true;
|
||||
return false;
|
||||
}) || rows[0];
|
||||
break;
|
||||
|
||||
default:
|
||||
selectedRow = rows[0];
|
||||
}
|
||||
|
||||
if (selectedRow) {
|
||||
result.push(selectedRow);
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
export const entityJoinController = new EntityJoinController();
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
import { Request, Response } from "express";
|
||||
import { getPool } from "../database/db";
|
||||
import { logger } from "../utils/logger";
|
||||
import { MultiLangService } from "../services/multilangService";
|
||||
import { AuthenticatedRequest } from "../types/auth";
|
||||
import {
|
||||
syncScreenGroupsToMenu,
|
||||
syncMenuToScreenGroups,
|
||||
getSyncStatus,
|
||||
syncAllCompanies,
|
||||
} from "../services/menuScreenSyncService";
|
||||
|
||||
// pool 인스턴스 가져오기
|
||||
const pool = getPool();
|
||||
|
||||
// 다국어 서비스 인스턴스
|
||||
const multiLangService = new MultiLangService();
|
||||
|
||||
// ============================================================
|
||||
// 화면 그룹 (screen_groups) CRUD
|
||||
// ============================================================
|
||||
|
|
@ -19,7 +17,7 @@ const pool = getPool();
|
|||
// 화면 그룹 목록 조회
|
||||
export const getScreenGroups = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const companyCode = req.user!.companyCode;
|
||||
const { page = 1, size = 20, searchTerm } = req.query;
|
||||
const offset = (parseInt(page as string) - 1) * parseInt(size as string);
|
||||
|
||||
|
|
@ -94,7 +92,7 @@ export const getScreenGroups = async (req: AuthenticatedRequest, res: Response)
|
|||
export const getScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const companyCode = req.user!.companyCode;
|
||||
|
||||
let query = `
|
||||
SELECT sg.*,
|
||||
|
|
@ -139,8 +137,8 @@ export const getScreenGroup = async (req: AuthenticatedRequest, res: Response) =
|
|||
// 화면 그룹 생성
|
||||
export const createScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const userCompanyCode = req.user?.companyCode || "*";
|
||||
const userId = req.user?.userId || "";
|
||||
const userCompanyCode = req.user!.companyCode;
|
||||
const userId = req.user!.userId;
|
||||
const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body;
|
||||
|
||||
if (!group_name || !group_code) {
|
||||
|
|
@ -198,6 +196,47 @@ export const createScreenGroup = async (req: AuthenticatedRequest, res: Response
|
|||
// 업데이트된 데이터 반환
|
||||
const updatedResult = await pool.query(`SELECT * FROM screen_groups WHERE id = $1`, [newGroupId]);
|
||||
|
||||
// 다국어 카테고리 자동 생성 (그룹 경로 기반)
|
||||
try {
|
||||
// 그룹 경로 조회 (상위 그룹 → 현재 그룹)
|
||||
const groupPathResult = await pool.query(
|
||||
`WITH RECURSIVE group_path AS (
|
||||
SELECT id, parent_group_id, group_name, group_level, 1 as depth
|
||||
FROM screen_groups
|
||||
WHERE id = $1
|
||||
UNION ALL
|
||||
SELECT g.id, g.parent_group_id, g.group_name, g.group_level, gp.depth + 1
|
||||
FROM screen_groups g
|
||||
INNER JOIN group_path gp ON g.id = gp.parent_group_id
|
||||
WHERE g.parent_group_id IS NOT NULL
|
||||
)
|
||||
SELECT group_name FROM group_path
|
||||
ORDER BY depth DESC`,
|
||||
[newGroupId]
|
||||
);
|
||||
|
||||
const groupPath = groupPathResult.rows.map((r: any) => r.group_name);
|
||||
|
||||
// 회사 이름 조회
|
||||
let companyName = "공통";
|
||||
if (finalCompanyCode !== "*") {
|
||||
const companyResult = await pool.query(
|
||||
`SELECT company_name FROM company_mng WHERE company_code = $1`,
|
||||
[finalCompanyCode]
|
||||
);
|
||||
if (companyResult.rows.length > 0) {
|
||||
companyName = companyResult.rows[0].company_name;
|
||||
}
|
||||
}
|
||||
|
||||
// 다국어 카테고리 생성
|
||||
await multiLangService.ensureScreenGroupCategory(finalCompanyCode, companyName, groupPath);
|
||||
logger.info("화면 그룹 다국어 카테고리 자동 생성 완료", { groupPath, companyCode: finalCompanyCode });
|
||||
} catch (multilangError: any) {
|
||||
// 다국어 카테고리 생성 실패해도 그룹 생성은 성공으로 처리
|
||||
logger.warn("화면 그룹 다국어 카테고리 생성 실패 (무시하고 계속):", multilangError.message);
|
||||
}
|
||||
|
||||
logger.info("화면 그룹 생성", { userCompanyCode, finalCompanyCode, groupId: newGroupId, groupName: group_name, parentGroupId: parent_group_id });
|
||||
|
||||
res.json({ success: true, data: updatedResult.rows[0], message: "화면 그룹이 생성되었습니다." });
|
||||
|
|
@ -214,7 +253,7 @@ export const createScreenGroup = async (req: AuthenticatedRequest, res: Response
|
|||
export const updateScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const userCompanyCode = req.user?.companyCode || "*";
|
||||
const userCompanyCode = req.user!.companyCode;
|
||||
const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body;
|
||||
|
||||
// 회사 코드 결정: 최고 관리자가 특정 회사를 선택한 경우 해당 회사로, 아니면 현재 그룹의 회사 유지
|
||||
|
|
@ -301,35 +340,10 @@ export const updateScreenGroup = async (req: AuthenticatedRequest, res: Response
|
|||
|
||||
// 화면 그룹 삭제
|
||||
export const deleteScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
|
||||
const client = await pool.connect();
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const companyCode = req.user!.companyCode;
|
||||
|
||||
await client.query('BEGIN');
|
||||
|
||||
// 1. 삭제할 그룹과 하위 그룹 ID 수집 (CASCADE 삭제 대상)
|
||||
const childGroupsResult = await client.query(`
|
||||
WITH RECURSIVE child_groups AS (
|
||||
SELECT id FROM screen_groups WHERE id = $1
|
||||
UNION ALL
|
||||
SELECT sg.id FROM screen_groups sg
|
||||
JOIN child_groups cg ON sg.parent_group_id = cg.id
|
||||
)
|
||||
SELECT id FROM child_groups
|
||||
`, [id]);
|
||||
const groupIdsToDelete = childGroupsResult.rows.map((r: any) => r.id);
|
||||
|
||||
// 2. menu_info에서 삭제될 screen_group 참조를 NULL로 정리
|
||||
if (groupIdsToDelete.length > 0) {
|
||||
await client.query(`
|
||||
UPDATE menu_info
|
||||
SET screen_group_id = NULL
|
||||
WHERE screen_group_id = ANY($1::int[])
|
||||
`, [groupIdsToDelete]);
|
||||
}
|
||||
|
||||
// 3. screen_groups 삭제
|
||||
let query = `DELETE FROM screen_groups WHERE id = $1`;
|
||||
const params: any[] = [id];
|
||||
|
||||
|
|
@ -340,24 +354,18 @@ export const deleteScreenGroup = async (req: AuthenticatedRequest, res: Response
|
|||
|
||||
query += " RETURNING id";
|
||||
|
||||
const result = await client.query(query, params);
|
||||
const result = await pool.query(query, params);
|
||||
|
||||
if (result.rows.length === 0) {
|
||||
await client.query('ROLLBACK');
|
||||
return res.status(404).json({ success: false, message: "화면 그룹을 찾을 수 없거나 권한이 없습니다." });
|
||||
}
|
||||
|
||||
await client.query('COMMIT');
|
||||
|
||||
logger.info("화면 그룹 삭제", { companyCode, groupId: id, cleanedRefs: groupIdsToDelete.length });
|
||||
logger.info("화면 그룹 삭제", { companyCode, groupId: id });
|
||||
|
||||
res.json({ success: true, message: "화면 그룹이 삭제되었습니다." });
|
||||
} catch (error: any) {
|
||||
await client.query('ROLLBACK');
|
||||
logger.error("화면 그룹 삭제 실패:", error);
|
||||
res.status(500).json({ success: false, message: "화면 그룹 삭제에 실패했습니다.", error: error.message });
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -369,8 +377,8 @@ export const deleteScreenGroup = async (req: AuthenticatedRequest, res: Response
|
|||
// 그룹에 화면 추가
|
||||
export const addScreenToGroup = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const userId = req.user?.userId || "";
|
||||
const companyCode = req.user!.companyCode;
|
||||
const userId = req.user!.userId;
|
||||
const { group_id, screen_id, screen_role, display_order, is_default } = req.body;
|
||||
|
||||
if (!group_id || !screen_id) {
|
||||
|
|
@ -410,7 +418,7 @@ export const addScreenToGroup = async (req: AuthenticatedRequest, res: Response)
|
|||
export const removeScreenFromGroup = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const companyCode = req.user!.companyCode;
|
||||
|
||||
let query = `DELETE FROM screen_group_screens WHERE id = $1`;
|
||||
const params: any[] = [id];
|
||||
|
|
@ -441,7 +449,7 @@ export const removeScreenFromGroup = async (req: AuthenticatedRequest, res: Resp
|
|||
export const updateScreenInGroup = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const companyCode = req.user!.companyCode;
|
||||
const { screen_role, display_order, is_default } = req.body;
|
||||
|
||||
let query = `
|
||||
|
|
@ -479,7 +487,7 @@ export const updateScreenInGroup = async (req: AuthenticatedRequest, res: Respon
|
|||
// 화면 필드 조인 목록 조회
|
||||
export const getFieldJoins = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const companyCode = req.user!.companyCode;
|
||||
const { screen_id } = req.query;
|
||||
|
||||
let query = `
|
||||
|
|
@ -520,8 +528,8 @@ export const getFieldJoins = async (req: AuthenticatedRequest, res: Response) =>
|
|||
// 화면 필드 조인 생성
|
||||
export const createFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const userId = req.user?.userId || "";
|
||||
const companyCode = req.user!.companyCode;
|
||||
const userId = req.user!.userId;
|
||||
const {
|
||||
screen_id, layout_id, component_id, field_name,
|
||||
save_table, save_column, join_table, join_column, display_column,
|
||||
|
|
@ -562,7 +570,7 @@ export const createFieldJoin = async (req: AuthenticatedRequest, res: Response)
|
|||
export const updateFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const companyCode = req.user!.companyCode;
|
||||
const {
|
||||
layout_id, component_id, field_name,
|
||||
save_table, save_column, join_table, join_column, display_column,
|
||||
|
|
@ -607,7 +615,7 @@ export const updateFieldJoin = async (req: AuthenticatedRequest, res: Response)
|
|||
export const deleteFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const companyCode = req.user!.companyCode;
|
||||
|
||||
let query = `DELETE FROM screen_field_joins WHERE id = $1`;
|
||||
const params: any[] = [id];
|
||||
|
|
@ -640,7 +648,7 @@ export const deleteFieldJoin = async (req: AuthenticatedRequest, res: Response)
|
|||
// 데이터 흐름 목록 조회
|
||||
export const getDataFlows = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const companyCode = req.user!.companyCode;
|
||||
const { group_id, source_screen_id } = req.query;
|
||||
|
||||
let query = `
|
||||
|
|
@ -690,8 +698,8 @@ export const getDataFlows = async (req: AuthenticatedRequest, res: Response) =>
|
|||
// 데이터 흐름 생성
|
||||
export const createDataFlow = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const userId = req.user?.userId || "";
|
||||
const companyCode = req.user!.companyCode;
|
||||
const userId = req.user!.userId;
|
||||
const {
|
||||
group_id, source_screen_id, source_action, target_screen_id, target_action,
|
||||
data_mapping, flow_type, flow_label, condition_expression, is_active
|
||||
|
|
@ -730,7 +738,7 @@ export const createDataFlow = async (req: AuthenticatedRequest, res: Response) =
|
|||
export const updateDataFlow = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const companyCode = req.user!.companyCode;
|
||||
const {
|
||||
group_id, source_screen_id, source_action, target_screen_id, target_action,
|
||||
data_mapping, flow_type, flow_label, condition_expression, is_active
|
||||
|
|
@ -773,7 +781,7 @@ export const updateDataFlow = async (req: AuthenticatedRequest, res: Response) =
|
|||
export const deleteDataFlow = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const companyCode = req.user!.companyCode;
|
||||
|
||||
let query = `DELETE FROM screen_data_flows WHERE id = $1`;
|
||||
const params: any[] = [id];
|
||||
|
|
@ -806,7 +814,7 @@ export const deleteDataFlow = async (req: AuthenticatedRequest, res: Response) =
|
|||
// 화면-테이블 관계 목록 조회
|
||||
export const getTableRelations = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const companyCode = req.user!.companyCode;
|
||||
const { screen_id, group_id } = req.query;
|
||||
|
||||
let query = `
|
||||
|
|
@ -855,8 +863,8 @@ export const getTableRelations = async (req: AuthenticatedRequest, res: Response
|
|||
// 화면-테이블 관계 생성
|
||||
export const createTableRelation = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const userId = req.user?.userId || "";
|
||||
const companyCode = req.user!.companyCode;
|
||||
const userId = req.user!.userId;
|
||||
const { group_id, screen_id, table_name, relation_type, crud_operations, description, is_active } = req.body;
|
||||
|
||||
if (!screen_id || !table_name) {
|
||||
|
|
@ -889,7 +897,7 @@ export const createTableRelation = async (req: AuthenticatedRequest, res: Respon
|
|||
export const updateTableRelation = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const companyCode = req.user!.companyCode;
|
||||
const { group_id, table_name, relation_type, crud_operations, description, is_active } = req.body;
|
||||
|
||||
let query = `
|
||||
|
|
@ -924,7 +932,7 @@ export const updateTableRelation = async (req: AuthenticatedRequest, res: Respon
|
|||
export const deleteTableRelation = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const companyCode = req.user?.companyCode || "*";
|
||||
const companyCode = req.user!.companyCode;
|
||||
|
||||
let query = `DELETE FROM screen_table_relations WHERE id = $1`;
|
||||
const params: any[] = [id];
|
||||
|
|
@ -954,7 +962,7 @@ export const deleteTableRelation = async (req: AuthenticatedRequest, res: Respon
|
|||
// ============================================================
|
||||
|
||||
// 화면 레이아웃 요약 조회 (위젯 타입별 개수, 라벨 목록)
|
||||
export const getScreenLayoutSummary = async (req: AuthenticatedRequest, res: Response) => {
|
||||
export const getScreenLayoutSummary = async (req: Request, res: Response) => {
|
||||
try {
|
||||
const { screenId } = req.params;
|
||||
|
||||
|
|
@ -1022,7 +1030,7 @@ export const getScreenLayoutSummary = async (req: AuthenticatedRequest, res: Res
|
|||
};
|
||||
|
||||
// 여러 화면의 레이아웃 요약 일괄 조회 (미니어처 렌더링용 좌표 포함)
|
||||
export const getMultipleScreenLayoutSummary = async (req: AuthenticatedRequest, res: Response) => {
|
||||
export const getMultipleScreenLayoutSummary = async (req: Request, res: Response) => {
|
||||
try {
|
||||
const { screenIds } = req.body;
|
||||
|
||||
|
|
@ -1222,7 +1230,7 @@ export const getMultipleScreenLayoutSummary = async (req: AuthenticatedRequest,
|
|||
// ============================================================
|
||||
|
||||
// 여러 화면의 서브 테이블 정보 조회 (메인 테이블 → 서브 테이블 관계)
|
||||
export const getScreenSubTables = async (req: AuthenticatedRequest, res: Response) => {
|
||||
export const getScreenSubTables = async (req: Request, res: Response) => {
|
||||
try {
|
||||
const { screenIds } = req.body;
|
||||
|
||||
|
|
@ -2052,202 +2060,3 @@ export const getScreenSubTables = async (req: AuthenticatedRequest, res: Respons
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
// ============================================================
|
||||
// 메뉴-화면그룹 동기화 API
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 화면관리 → 메뉴 동기화
|
||||
* screen_groups를 menu_info로 동기화
|
||||
*/
|
||||
export const syncScreenGroupsToMenuController = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const userCompanyCode = req.user?.companyCode || "*";
|
||||
const userId = req.user?.userId || "";
|
||||
const { targetCompanyCode } = req.body;
|
||||
|
||||
// 최고 관리자가 특정 회사를 지정한 경우 해당 회사로
|
||||
let companyCode = userCompanyCode;
|
||||
if (userCompanyCode === "*" && targetCompanyCode) {
|
||||
companyCode = targetCompanyCode;
|
||||
}
|
||||
|
||||
// 최고 관리자(*)는 회사를 지정해야 함
|
||||
if (companyCode === "*") {
|
||||
return res.status(400).json({
|
||||
success: false,
|
||||
message: "동기화할 회사를 선택해주세요.",
|
||||
});
|
||||
}
|
||||
|
||||
logger.info("화면관리 → 메뉴 동기화 요청", { companyCode, userId });
|
||||
|
||||
const result = await syncScreenGroupsToMenu(companyCode, userId);
|
||||
|
||||
if (!result.success) {
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "동기화 중 오류가 발생했습니다.",
|
||||
errors: result.errors,
|
||||
});
|
||||
}
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
message: `동기화 완료: 생성 ${result.created}개, 연결 ${result.linked}개, 스킵 ${result.skipped}개`,
|
||||
data: result,
|
||||
});
|
||||
} catch (error: any) {
|
||||
logger.error("화면관리 → 메뉴 동기화 실패:", error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "동기화에 실패했습니다.",
|
||||
error: error.message,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 메뉴 → 화면관리 동기화
|
||||
* menu_info를 screen_groups로 동기화
|
||||
*/
|
||||
export const syncMenuToScreenGroupsController = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const userCompanyCode = req.user?.companyCode || "*";
|
||||
const userId = req.user?.userId || "";
|
||||
const { targetCompanyCode } = req.body;
|
||||
|
||||
// 최고 관리자가 특정 회사를 지정한 경우 해당 회사로
|
||||
let companyCode = userCompanyCode;
|
||||
if (userCompanyCode === "*" && targetCompanyCode) {
|
||||
companyCode = targetCompanyCode;
|
||||
}
|
||||
|
||||
// 최고 관리자(*)는 회사를 지정해야 함
|
||||
if (companyCode === "*") {
|
||||
return res.status(400).json({
|
||||
success: false,
|
||||
message: "동기화할 회사를 선택해주세요.",
|
||||
});
|
||||
}
|
||||
|
||||
logger.info("메뉴 → 화면관리 동기화 요청", { companyCode, userId });
|
||||
|
||||
const result = await syncMenuToScreenGroups(companyCode, userId);
|
||||
|
||||
if (!result.success) {
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "동기화 중 오류가 발생했습니다.",
|
||||
errors: result.errors,
|
||||
});
|
||||
}
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
message: `동기화 완료: 생성 ${result.created}개, 연결 ${result.linked}개, 스킵 ${result.skipped}개`,
|
||||
data: result,
|
||||
});
|
||||
} catch (error: any) {
|
||||
logger.error("메뉴 → 화면관리 동기화 실패:", error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "동기화에 실패했습니다.",
|
||||
error: error.message,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 동기화 상태 조회
|
||||
*/
|
||||
export const getSyncStatusController = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const userCompanyCode = req.user?.companyCode || "*";
|
||||
const { targetCompanyCode } = req.query;
|
||||
|
||||
// 최고 관리자가 특정 회사를 지정한 경우 해당 회사로
|
||||
let companyCode = userCompanyCode;
|
||||
if (userCompanyCode === "*" && targetCompanyCode) {
|
||||
companyCode = targetCompanyCode as string;
|
||||
}
|
||||
|
||||
// 최고 관리자(*)는 회사를 지정해야 함
|
||||
if (companyCode === "*") {
|
||||
return res.status(400).json({
|
||||
success: false,
|
||||
message: "조회할 회사를 선택해주세요.",
|
||||
});
|
||||
}
|
||||
|
||||
const status = await getSyncStatus(companyCode);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
data: status,
|
||||
});
|
||||
} catch (error: any) {
|
||||
logger.error("동기화 상태 조회 실패:", error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "동기화 상태 조회에 실패했습니다.",
|
||||
error: error.message,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 전체 회사 동기화
|
||||
* 모든 회사에 대해 양방향 동기화 수행 (최고 관리자만)
|
||||
*/
|
||||
export const syncAllCompaniesController = async (req: AuthenticatedRequest, res: Response) => {
|
||||
try {
|
||||
const userCompanyCode = req.user?.companyCode || "*";
|
||||
const userId = req.user?.userId || "";
|
||||
|
||||
// 최고 관리자만 전체 동기화 가능
|
||||
if (userCompanyCode !== "*") {
|
||||
return res.status(403).json({
|
||||
success: false,
|
||||
message: "전체 동기화는 최고 관리자만 수행할 수 있습니다.",
|
||||
});
|
||||
}
|
||||
|
||||
logger.info("전체 회사 동기화 요청", { userId });
|
||||
|
||||
const result = await syncAllCompanies(userId);
|
||||
|
||||
if (!result.success) {
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "전체 동기화 중 오류가 발생했습니다.",
|
||||
});
|
||||
}
|
||||
|
||||
// 결과 요약
|
||||
const totalCreated = result.results.reduce((sum, r) => sum + r.created, 0);
|
||||
const totalLinked = result.results.reduce((sum, r) => sum + r.linked, 0);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
message: `전체 동기화 완료: ${result.totalCompanies}개 회사 중 ${result.successCount}개 성공`,
|
||||
data: {
|
||||
totalCompanies: result.totalCompanies,
|
||||
successCount: result.successCount,
|
||||
failedCount: result.failedCount,
|
||||
totalCreated,
|
||||
totalLinked,
|
||||
details: result.results,
|
||||
},
|
||||
});
|
||||
} catch (error: any) {
|
||||
logger.error("전체 회사 동기화 실패:", error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "전체 동기화에 실패했습니다.",
|
||||
error: error.message,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -804,6 +804,12 @@ export async function getTableData(
|
|||
}
|
||||
}
|
||||
|
||||
// 🆕 최종 검색 조건 로그
|
||||
logger.info(
|
||||
`🔍 최종 검색 조건 (enhancedSearch):`,
|
||||
JSON.stringify(enhancedSearch)
|
||||
);
|
||||
|
||||
// 데이터 조회
|
||||
const result = await tableManagementService.getTableData(tableName, {
|
||||
page: parseInt(page),
|
||||
|
|
@ -887,7 +893,10 @@ export async function addTableData(
|
|||
const companyCode = req.user?.companyCode;
|
||||
if (companyCode && !data.company_code) {
|
||||
// 테이블에 company_code 컬럼이 있는지 확인
|
||||
const hasCompanyCodeColumn = await tableManagementService.hasColumn(tableName, "company_code");
|
||||
const hasCompanyCodeColumn = await tableManagementService.hasColumn(
|
||||
tableName,
|
||||
"company_code"
|
||||
);
|
||||
if (hasCompanyCodeColumn) {
|
||||
data.company_code = companyCode;
|
||||
logger.info(`멀티테넌시: company_code 자동 추가 - ${companyCode}`);
|
||||
|
|
@ -897,7 +906,10 @@ export async function addTableData(
|
|||
// 🆕 writer 컬럼 자동 추가 (테이블에 writer 컬럼이 있고 값이 없는 경우)
|
||||
const userId = req.user?.userId;
|
||||
if (userId && !data.writer) {
|
||||
const hasWriterColumn = await tableManagementService.hasColumn(tableName, "writer");
|
||||
const hasWriterColumn = await tableManagementService.hasColumn(
|
||||
tableName,
|
||||
"writer"
|
||||
);
|
||||
if (hasWriterColumn) {
|
||||
data.writer = userId;
|
||||
logger.info(`writer 자동 추가 - ${userId}`);
|
||||
|
|
@ -905,13 +917,25 @@ export async function addTableData(
|
|||
}
|
||||
|
||||
// 데이터 추가
|
||||
await tableManagementService.addTableData(tableName, data);
|
||||
const result = await tableManagementService.addTableData(tableName, data);
|
||||
|
||||
logger.info(`테이블 데이터 추가 완료: ${tableName}`);
|
||||
|
||||
const response: ApiResponse<null> = {
|
||||
// 무시된 컬럼이 있으면 경고 정보 포함
|
||||
const response: ApiResponse<{
|
||||
skippedColumns?: string[];
|
||||
savedColumns?: string[];
|
||||
}> = {
|
||||
success: true,
|
||||
message: "테이블 데이터를 성공적으로 추가했습니다.",
|
||||
message:
|
||||
result.skippedColumns.length > 0
|
||||
? `테이블 데이터를 추가했습니다. (무시된 컬럼 ${result.skippedColumns.length}개: ${result.skippedColumns.join(", ")})`
|
||||
: "테이블 데이터를 성공적으로 추가했습니다.",
|
||||
data: {
|
||||
skippedColumns:
|
||||
result.skippedColumns.length > 0 ? result.skippedColumns : undefined,
|
||||
savedColumns: result.savedColumns,
|
||||
},
|
||||
};
|
||||
|
||||
res.status(201).json(response);
|
||||
|
|
@ -1639,10 +1663,10 @@ export async function toggleLogTable(
|
|||
|
||||
/**
|
||||
* 메뉴의 상위 메뉴들이 설정한 모든 카테고리 타입 컬럼 조회 (계층 구조 상속)
|
||||
*
|
||||
*
|
||||
* @route GET /api/table-management/menu/:menuObjid/category-columns
|
||||
* @description 현재 메뉴와 상위 메뉴들에서 설정한 category_column_mapping의 모든 카테고리 컬럼 조회
|
||||
*
|
||||
*
|
||||
* 예시:
|
||||
* - 2레벨 메뉴 "고객사관리"에서 discount_type, rounding_type 설정
|
||||
* - 3레벨 메뉴 "고객등록", "고객조회" 등에서도 동일하게 보임 (상속)
|
||||
|
|
@ -1655,7 +1679,10 @@ export async function getCategoryColumnsByMenu(
|
|||
const { menuObjid } = req.params;
|
||||
const companyCode = req.user?.companyCode;
|
||||
|
||||
logger.info("📥 메뉴별 카테고리 컬럼 조회 요청", { menuObjid, companyCode });
|
||||
logger.info("📥 메뉴별 카테고리 컬럼 조회 요청", {
|
||||
menuObjid,
|
||||
companyCode,
|
||||
});
|
||||
|
||||
if (!menuObjid) {
|
||||
res.status(400).json({
|
||||
|
|
@ -1681,8 +1708,11 @@ export async function getCategoryColumnsByMenu(
|
|||
|
||||
if (mappingTableExists) {
|
||||
// 🆕 category_column_mapping을 사용한 계층 구조 기반 조회
|
||||
logger.info("🔍 category_column_mapping 기반 카테고리 컬럼 조회 (계층 구조 상속)", { menuObjid, companyCode });
|
||||
|
||||
logger.info(
|
||||
"🔍 category_column_mapping 기반 카테고리 컬럼 조회 (계층 구조 상속)",
|
||||
{ menuObjid, companyCode }
|
||||
);
|
||||
|
||||
// 현재 메뉴와 모든 상위 메뉴의 objid 조회 (재귀)
|
||||
const ancestorMenuQuery = `
|
||||
WITH RECURSIVE menu_hierarchy AS (
|
||||
|
|
@ -1704,17 +1734,21 @@ export async function getCategoryColumnsByMenu(
|
|||
ARRAY_AGG(menu_name_kor) as menu_names
|
||||
FROM menu_hierarchy
|
||||
`;
|
||||
|
||||
const ancestorMenuResult = await pool.query(ancestorMenuQuery, [parseInt(menuObjid)]);
|
||||
const ancestorMenuObjids = ancestorMenuResult.rows[0]?.menu_objids || [parseInt(menuObjid)];
|
||||
|
||||
const ancestorMenuResult = await pool.query(ancestorMenuQuery, [
|
||||
parseInt(menuObjid),
|
||||
]);
|
||||
const ancestorMenuObjids = ancestorMenuResult.rows[0]?.menu_objids || [
|
||||
parseInt(menuObjid),
|
||||
];
|
||||
const ancestorMenuNames = ancestorMenuResult.rows[0]?.menu_names || [];
|
||||
|
||||
logger.info("✅ 상위 메뉴 계층 조회 완료", {
|
||||
ancestorMenuObjids,
|
||||
|
||||
logger.info("✅ 상위 메뉴 계층 조회 완료", {
|
||||
ancestorMenuObjids,
|
||||
ancestorMenuNames,
|
||||
hierarchyDepth: ancestorMenuObjids.length
|
||||
hierarchyDepth: ancestorMenuObjids.length,
|
||||
});
|
||||
|
||||
|
||||
// 상위 메뉴들에 설정된 모든 카테고리 컬럼 조회 (테이블 필터링 제거)
|
||||
const columnsQuery = `
|
||||
SELECT DISTINCT
|
||||
|
|
@ -1744,20 +1778,31 @@ export async function getCategoryColumnsByMenu(
|
|||
AND ttc.input_type = 'category'
|
||||
ORDER BY ttc.table_name, ccm.logical_column_name
|
||||
`;
|
||||
|
||||
columnsResult = await pool.query(columnsQuery, [companyCode, ancestorMenuObjids]);
|
||||
logger.info("✅ category_column_mapping 기반 조회 완료 (계층 구조 상속)", {
|
||||
rowCount: columnsResult.rows.length,
|
||||
columns: columnsResult.rows.map((r: any) => `${r.tableName}.${r.columnName}`)
|
||||
});
|
||||
|
||||
columnsResult = await pool.query(columnsQuery, [
|
||||
companyCode,
|
||||
ancestorMenuObjids,
|
||||
]);
|
||||
logger.info(
|
||||
"✅ category_column_mapping 기반 조회 완료 (계층 구조 상속)",
|
||||
{
|
||||
rowCount: columnsResult.rows.length,
|
||||
columns: columnsResult.rows.map(
|
||||
(r: any) => `${r.tableName}.${r.columnName}`
|
||||
),
|
||||
}
|
||||
);
|
||||
} else {
|
||||
// 🔄 레거시 방식: 형제 메뉴들의 테이블에서 모든 카테고리 컬럼 조회
|
||||
logger.info("🔍 레거시 방식: 형제 메뉴 테이블 기반 카테고리 컬럼 조회", { menuObjid, companyCode });
|
||||
|
||||
logger.info("🔍 레거시 방식: 형제 메뉴 테이블 기반 카테고리 컬럼 조회", {
|
||||
menuObjid,
|
||||
companyCode,
|
||||
});
|
||||
|
||||
// 형제 메뉴 조회
|
||||
const { getSiblingMenuObjids } = await import("../services/menuService");
|
||||
const siblingObjids = await getSiblingMenuObjids(parseInt(menuObjid));
|
||||
|
||||
|
||||
// 형제 메뉴들이 사용하는 테이블 조회
|
||||
const tablesQuery = `
|
||||
SELECT DISTINCT sd.table_name
|
||||
|
|
@ -1767,11 +1812,17 @@ export async function getCategoryColumnsByMenu(
|
|||
AND sma.company_code = $2
|
||||
AND sd.table_name IS NOT NULL
|
||||
`;
|
||||
|
||||
const tablesResult = await pool.query(tablesQuery, [siblingObjids, companyCode]);
|
||||
|
||||
const tablesResult = await pool.query(tablesQuery, [
|
||||
siblingObjids,
|
||||
companyCode,
|
||||
]);
|
||||
const tableNames = tablesResult.rows.map((row: any) => row.table_name);
|
||||
|
||||
logger.info("✅ 형제 메뉴 테이블 조회 완료", { tableNames, count: tableNames.length });
|
||||
|
||||
logger.info("✅ 형제 메뉴 테이블 조회 완료", {
|
||||
tableNames,
|
||||
count: tableNames.length,
|
||||
});
|
||||
|
||||
if (tableNames.length === 0) {
|
||||
res.json({
|
||||
|
|
@ -1781,7 +1832,7 @@ export async function getCategoryColumnsByMenu(
|
|||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const columnsQuery = `
|
||||
SELECT
|
||||
ttc.table_name AS "tableName",
|
||||
|
|
@ -1806,13 +1857,15 @@ export async function getCategoryColumnsByMenu(
|
|||
AND ttc.input_type = 'category'
|
||||
ORDER BY ttc.table_name, ttc.column_name
|
||||
`;
|
||||
|
||||
|
||||
columnsResult = await pool.query(columnsQuery, [tableNames, companyCode]);
|
||||
logger.info("✅ 레거시 방식 조회 완료", { rowCount: columnsResult.rows.length });
|
||||
logger.info("✅ 레거시 방식 조회 완료", {
|
||||
rowCount: columnsResult.rows.length,
|
||||
});
|
||||
}
|
||||
|
||||
logger.info("✅ 카테고리 컬럼 조회 완료", {
|
||||
columnCount: columnsResult.rows.length
|
||||
|
||||
logger.info("✅ 카테고리 컬럼 조회 완료", {
|
||||
columnCount: columnsResult.rows.length,
|
||||
});
|
||||
|
||||
res.json({
|
||||
|
|
@ -1837,9 +1890,9 @@ export async function getCategoryColumnsByMenu(
|
|||
|
||||
/**
|
||||
* 범용 다중 테이블 저장 API
|
||||
*
|
||||
*
|
||||
* 메인 테이블과 서브 테이블(들)에 트랜잭션으로 데이터를 저장합니다.
|
||||
*
|
||||
*
|
||||
* 요청 본문:
|
||||
* {
|
||||
* mainTable: { tableName: string, primaryKeyColumn: string },
|
||||
|
|
@ -1909,23 +1962,29 @@ export async function multiTableSave(
|
|||
}
|
||||
|
||||
let mainResult: any;
|
||||
|
||||
|
||||
if (isUpdate && pkValue) {
|
||||
// UPDATE
|
||||
const updateColumns = Object.keys(mainData)
|
||||
.filter(col => col !== pkColumn)
|
||||
.filter((col) => col !== pkColumn)
|
||||
.map((col, idx) => `"${col}" = $${idx + 1}`)
|
||||
.join(", ");
|
||||
const updateValues = Object.keys(mainData)
|
||||
.filter(col => col !== pkColumn)
|
||||
.map(col => mainData[col]);
|
||||
|
||||
.filter((col) => col !== pkColumn)
|
||||
.map((col) => mainData[col]);
|
||||
|
||||
// updated_at 컬럼 존재 여부 확인
|
||||
const hasUpdatedAt = await client.query(`
|
||||
const hasUpdatedAt = await client.query(
|
||||
`
|
||||
SELECT 1 FROM information_schema.columns
|
||||
WHERE table_name = $1 AND column_name = 'updated_at'
|
||||
`, [mainTableName]);
|
||||
const updatedAtClause = hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0 ? ", updated_at = NOW()" : "";
|
||||
`,
|
||||
[mainTableName]
|
||||
);
|
||||
const updatedAtClause =
|
||||
hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0
|
||||
? ", updated_at = NOW()"
|
||||
: "";
|
||||
|
||||
const updateQuery = `
|
||||
UPDATE "${mainTableName}"
|
||||
|
|
@ -1934,29 +1993,43 @@ export async function multiTableSave(
|
|||
${companyCode !== "*" ? `AND company_code = $${updateValues.length + 2}` : ""}
|
||||
RETURNING *
|
||||
`;
|
||||
|
||||
const updateParams = companyCode !== "*"
|
||||
? [...updateValues, pkValue, companyCode]
|
||||
: [...updateValues, pkValue];
|
||||
|
||||
logger.info("메인 테이블 UPDATE:", { query: updateQuery, paramsCount: updateParams.length });
|
||||
|
||||
const updateParams =
|
||||
companyCode !== "*"
|
||||
? [...updateValues, pkValue, companyCode]
|
||||
: [...updateValues, pkValue];
|
||||
|
||||
logger.info("메인 테이블 UPDATE:", {
|
||||
query: updateQuery,
|
||||
paramsCount: updateParams.length,
|
||||
});
|
||||
mainResult = await client.query(updateQuery, updateParams);
|
||||
} else {
|
||||
// INSERT
|
||||
const columns = Object.keys(mainData).map(col => `"${col}"`).join(", ");
|
||||
const placeholders = Object.keys(mainData).map((_, idx) => `$${idx + 1}`).join(", ");
|
||||
const columns = Object.keys(mainData)
|
||||
.map((col) => `"${col}"`)
|
||||
.join(", ");
|
||||
const placeholders = Object.keys(mainData)
|
||||
.map((_, idx) => `$${idx + 1}`)
|
||||
.join(", ");
|
||||
const values = Object.values(mainData);
|
||||
|
||||
// updated_at 컬럼 존재 여부 확인
|
||||
const hasUpdatedAt = await client.query(`
|
||||
const hasUpdatedAt = await client.query(
|
||||
`
|
||||
SELECT 1 FROM information_schema.columns
|
||||
WHERE table_name = $1 AND column_name = 'updated_at'
|
||||
`, [mainTableName]);
|
||||
const updatedAtClause = hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0 ? ", updated_at = NOW()" : "";
|
||||
`,
|
||||
[mainTableName]
|
||||
);
|
||||
const updatedAtClause =
|
||||
hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0
|
||||
? ", updated_at = NOW()"
|
||||
: "";
|
||||
|
||||
const updateSetClause = Object.keys(mainData)
|
||||
.filter(col => col !== pkColumn)
|
||||
.map(col => `"${col}" = EXCLUDED."${col}"`)
|
||||
.filter((col) => col !== pkColumn)
|
||||
.map((col) => `"${col}" = EXCLUDED."${col}"`)
|
||||
.join(", ");
|
||||
|
||||
const insertQuery = `
|
||||
|
|
@ -1967,7 +2040,10 @@ export async function multiTableSave(
|
|||
RETURNING *
|
||||
`;
|
||||
|
||||
logger.info("메인 테이블 INSERT/UPSERT:", { query: insertQuery, paramsCount: values.length });
|
||||
logger.info("메인 테이블 INSERT/UPSERT:", {
|
||||
query: insertQuery,
|
||||
paramsCount: values.length,
|
||||
});
|
||||
mainResult = await client.query(insertQuery, values);
|
||||
}
|
||||
|
||||
|
|
@ -1986,12 +2062,15 @@ export async function multiTableSave(
|
|||
const { tableName, linkColumn, items, options } = subTableConfig;
|
||||
|
||||
// saveMainAsFirst가 활성화된 경우, items가 비어있어도 메인 데이터를 서브 테이블에 저장해야 함
|
||||
const hasSaveMainAsFirst = options?.saveMainAsFirst &&
|
||||
options?.mainFieldMappings &&
|
||||
options.mainFieldMappings.length > 0;
|
||||
|
||||
const hasSaveMainAsFirst =
|
||||
options?.saveMainAsFirst &&
|
||||
options?.mainFieldMappings &&
|
||||
options.mainFieldMappings.length > 0;
|
||||
|
||||
if (!tableName || (!items?.length && !hasSaveMainAsFirst)) {
|
||||
logger.info(`서브 테이블 ${tableName} 스킵: 데이터 없음 (saveMainAsFirst: ${hasSaveMainAsFirst})`);
|
||||
logger.info(
|
||||
`서브 테이블 ${tableName} 스킵: 데이터 없음 (saveMainAsFirst: ${hasSaveMainAsFirst})`
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
|
|
@ -2004,15 +2083,20 @@ export async function multiTableSave(
|
|||
|
||||
// 기존 데이터 삭제 옵션
|
||||
if (options?.deleteExistingBefore && linkColumn?.subColumn) {
|
||||
const deleteQuery = options?.deleteOnlySubItems && options?.mainMarkerColumn
|
||||
? `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1 AND "${options.mainMarkerColumn}" = $2`
|
||||
: `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1`;
|
||||
|
||||
const deleteParams = options?.deleteOnlySubItems && options?.mainMarkerColumn
|
||||
? [savedPkValue, options.subMarkerValue ?? false]
|
||||
: [savedPkValue];
|
||||
const deleteQuery =
|
||||
options?.deleteOnlySubItems && options?.mainMarkerColumn
|
||||
? `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1 AND "${options.mainMarkerColumn}" = $2`
|
||||
: `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1`;
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -2025,7 +2109,12 @@ export async function multiTableSave(
|
|||
linkColumn,
|
||||
mainDataKeys: Object.keys(mainData),
|
||||
});
|
||||
if (options?.saveMainAsFirst && options?.mainFieldMappings && options.mainFieldMappings.length > 0 && linkColumn?.subColumn) {
|
||||
if (
|
||||
options?.saveMainAsFirst &&
|
||||
options?.mainFieldMappings &&
|
||||
options.mainFieldMappings.length > 0 &&
|
||||
linkColumn?.subColumn
|
||||
) {
|
||||
const mainSubItem: Record<string, any> = {
|
||||
[linkColumn.subColumn]: savedPkValue,
|
||||
};
|
||||
|
|
@ -2039,7 +2128,8 @@ export async function multiTableSave(
|
|||
|
||||
// 메인 마커 설정
|
||||
if (options.mainMarkerColumn) {
|
||||
mainSubItem[options.mainMarkerColumn] = options.mainMarkerValue ?? true;
|
||||
mainSubItem[options.mainMarkerColumn] =
|
||||
options.mainMarkerValue ?? true;
|
||||
}
|
||||
|
||||
// company_code 추가
|
||||
|
|
@ -2062,20 +2152,30 @@ export async function multiTableSave(
|
|||
if (companyCode !== "*") {
|
||||
checkParams.push(companyCode);
|
||||
}
|
||||
|
||||
|
||||
const existingResult = await client.query(checkQuery, checkParams);
|
||||
|
||||
|
||||
if (existingResult.rows.length > 0) {
|
||||
// UPDATE
|
||||
const updateColumns = Object.keys(mainSubItem)
|
||||
.filter(col => col !== linkColumn.subColumn && col !== options.mainMarkerColumn && col !== "company_code")
|
||||
.filter(
|
||||
(col) =>
|
||||
col !== linkColumn.subColumn &&
|
||||
col !== options.mainMarkerColumn &&
|
||||
col !== "company_code"
|
||||
)
|
||||
.map((col, idx) => `"${col}" = $${idx + 1}`)
|
||||
.join(", ");
|
||||
|
||||
|
||||
const updateValues = Object.keys(mainSubItem)
|
||||
.filter(col => col !== linkColumn.subColumn && col !== options.mainMarkerColumn && col !== "company_code")
|
||||
.map(col => mainSubItem[col]);
|
||||
|
||||
.filter(
|
||||
(col) =>
|
||||
col !== linkColumn.subColumn &&
|
||||
col !== options.mainMarkerColumn &&
|
||||
col !== "company_code"
|
||||
)
|
||||
.map((col) => mainSubItem[col]);
|
||||
|
||||
if (updateColumns) {
|
||||
const updateQuery = `
|
||||
UPDATE "${tableName}"
|
||||
|
|
@ -2094,14 +2194,26 @@ export async function multiTableSave(
|
|||
}
|
||||
|
||||
const updateResult = await client.query(updateQuery, updateParams);
|
||||
subTableResults.push({ tableName, type: "main", data: updateResult.rows[0] });
|
||||
subTableResults.push({
|
||||
tableName,
|
||||
type: "main",
|
||||
data: updateResult.rows[0],
|
||||
});
|
||||
} else {
|
||||
subTableResults.push({ tableName, type: "main", data: existingResult.rows[0] });
|
||||
subTableResults.push({
|
||||
tableName,
|
||||
type: "main",
|
||||
data: existingResult.rows[0],
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// INSERT
|
||||
const mainSubColumns = Object.keys(mainSubItem).map(col => `"${col}"`).join(", ");
|
||||
const mainSubPlaceholders = Object.keys(mainSubItem).map((_, idx) => `$${idx + 1}`).join(", ");
|
||||
const mainSubColumns = Object.keys(mainSubItem)
|
||||
.map((col) => `"${col}"`)
|
||||
.join(", ");
|
||||
const mainSubPlaceholders = Object.keys(mainSubItem)
|
||||
.map((_, idx) => `$${idx + 1}`)
|
||||
.join(", ");
|
||||
const mainSubValues = Object.values(mainSubItem);
|
||||
|
||||
const insertQuery = `
|
||||
|
|
@ -2111,7 +2223,11 @@ export async function multiTableSave(
|
|||
`;
|
||||
|
||||
const insertResult = await client.query(insertQuery, mainSubValues);
|
||||
subTableResults.push({ tableName, type: "main", data: insertResult.rows[0] });
|
||||
subTableResults.push({
|
||||
tableName,
|
||||
type: "main",
|
||||
data: insertResult.rows[0],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2127,8 +2243,12 @@ export async function multiTableSave(
|
|||
item.company_code = companyCode;
|
||||
}
|
||||
|
||||
const subColumns = Object.keys(item).map(col => `"${col}"`).join(", ");
|
||||
const subPlaceholders = Object.keys(item).map((_, idx) => `$${idx + 1}`).join(", ");
|
||||
const subColumns = Object.keys(item)
|
||||
.map((col) => `"${col}"`)
|
||||
.join(", ");
|
||||
const subPlaceholders = Object.keys(item)
|
||||
.map((_, idx) => `$${idx + 1}`)
|
||||
.join(", ");
|
||||
const subValues = Object.values(item);
|
||||
|
||||
const subInsertQuery = `
|
||||
|
|
@ -2137,9 +2257,16 @@ export async function multiTableSave(
|
|||
RETURNING *
|
||||
`;
|
||||
|
||||
logger.info(`서브 테이블 ${tableName} 아이템 저장:`, { subInsertQuery, subValuesCount: subValues.length });
|
||||
logger.info(`서브 테이블 ${tableName} 아이템 저장:`, {
|
||||
subInsertQuery,
|
||||
subValuesCount: subValues.length,
|
||||
});
|
||||
const subResult = await client.query(subInsertQuery, subValues);
|
||||
subTableResults.push({ tableName, type: "sub", data: subResult.rows[0] });
|
||||
subTableResults.push({
|
||||
tableName,
|
||||
type: "sub",
|
||||
data: subResult.rows[0],
|
||||
});
|
||||
}
|
||||
|
||||
logger.info(`서브 테이블 ${tableName} 저장 완료`);
|
||||
|
|
@ -2180,8 +2307,11 @@ export async function multiTableSave(
|
|||
}
|
||||
|
||||
/**
|
||||
* 두 테이블 간 엔티티 관계 조회
|
||||
* column_labels의 entity/category 타입 설정을 기반으로 두 테이블 간의 관계를 조회
|
||||
* 두 테이블 간의 엔티티 관계 자동 감지
|
||||
* GET /api/table-management/tables/entity-relations?leftTable=xxx&rightTable=yyy
|
||||
*
|
||||
* column_labels에서 정의된 엔티티/카테고리 타입 설정을 기반으로
|
||||
* 두 테이블 간의 외래키 관계를 자동으로 감지합니다.
|
||||
*/
|
||||
export async function getTableEntityRelations(
|
||||
req: AuthenticatedRequest,
|
||||
|
|
@ -2190,93 +2320,54 @@ export async function getTableEntityRelations(
|
|||
try {
|
||||
const { leftTable, rightTable } = req.query;
|
||||
|
||||
logger.info(
|
||||
`=== 테이블 엔티티 관계 조회 시작: ${leftTable} <-> ${rightTable} ===`
|
||||
);
|
||||
|
||||
if (!leftTable || !rightTable) {
|
||||
res.status(400).json({
|
||||
const response: ApiResponse<null> = {
|
||||
success: false,
|
||||
message: "leftTable과 rightTable 파라미터가 필요합니다.",
|
||||
});
|
||||
error: {
|
||||
code: "MISSING_PARAMETERS",
|
||||
details: "leftTable과 rightTable 쿼리 파라미터가 필요합니다.",
|
||||
},
|
||||
};
|
||||
res.status(400).json(response);
|
||||
return;
|
||||
}
|
||||
|
||||
logger.info("=== 테이블 엔티티 관계 조회 ===", { leftTable, rightTable });
|
||||
const tableManagementService = new TableManagementService();
|
||||
const relations = await tableManagementService.detectTableEntityRelations(
|
||||
String(leftTable),
|
||||
String(rightTable)
|
||||
);
|
||||
|
||||
// 두 테이블의 컬럼 라벨 정보 조회
|
||||
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')
|
||||
`;
|
||||
logger.info(`테이블 엔티티 관계 조회 완료: ${relations.length}개 발견`);
|
||||
|
||||
const result = await query(columnLabelsQuery, [leftTable, rightTable]);
|
||||
|
||||
// 관계 분석
|
||||
const relations: Array<{
|
||||
fromTable: string;
|
||||
fromColumn: string;
|
||||
toTable: string;
|
||||
toColumn: string;
|
||||
relationType: string;
|
||||
}> = [];
|
||||
|
||||
for (const row of result) {
|
||||
try {
|
||||
const detailSettings = typeof row.detail_settings === "string"
|
||||
? JSON.parse(row.detail_settings)
|
||||
: row.detail_settings;
|
||||
|
||||
if (detailSettings && detailSettings.referenceTable) {
|
||||
const refTable = detailSettings.referenceTable;
|
||||
const refColumn = detailSettings.referenceColumn || "id";
|
||||
|
||||
// leftTable과 rightTable 간의 관계인지 확인
|
||||
if (
|
||||
(row.table_name === leftTable && refTable === rightTable) ||
|
||||
(row.table_name === rightTable && refTable === leftTable)
|
||||
) {
|
||||
relations.push({
|
||||
fromTable: row.table_name,
|
||||
fromColumn: row.column_name,
|
||||
toTable: refTable,
|
||||
toColumn: refColumn,
|
||||
relationType: row.web_type,
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (parseError) {
|
||||
logger.warn("detail_settings 파싱 오류:", {
|
||||
table: row.table_name,
|
||||
column: row.column_name,
|
||||
error: parseError
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
logger.info("테이블 엔티티 관계 조회 완료", {
|
||||
leftTable,
|
||||
rightTable,
|
||||
relationsCount: relations.length
|
||||
});
|
||||
|
||||
res.json({
|
||||
const response: ApiResponse<any> = {
|
||||
success: true,
|
||||
message: `${relations.length}개의 엔티티 관계를 발견했습니다.`,
|
||||
data: {
|
||||
leftTable,
|
||||
rightTable,
|
||||
leftTable: String(leftTable),
|
||||
rightTable: String(rightTable),
|
||||
relations,
|
||||
},
|
||||
});
|
||||
} catch (error: any) {
|
||||
logger.error("테이블 엔티티 관계 조회 실패:", error);
|
||||
res.status(500).json({
|
||||
};
|
||||
|
||||
res.status(200).json(response);
|
||||
} catch (error) {
|
||||
logger.error("테이블 엔티티 관계 조회 중 오류 발생:", error);
|
||||
|
||||
const response: ApiResponse<null> = {
|
||||
success: false,
|
||||
message: "테이블 엔티티 관계 조회에 실패했습니다.",
|
||||
error: error.message,
|
||||
});
|
||||
message: "테이블 엔티티 관계 조회 중 오류가 발생했습니다.",
|
||||
error: {
|
||||
code: "ENTITY_RELATIONS_ERROR",
|
||||
details: error instanceof Error ? error.message : "Unknown error",
|
||||
},
|
||||
};
|
||||
|
||||
res.status(500).json(response);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,11 +31,6 @@ import {
|
|||
getMultipleScreenLayoutSummary,
|
||||
// 화면 서브 테이블 관계
|
||||
getScreenSubTables,
|
||||
// 메뉴-화면그룹 동기화
|
||||
syncScreenGroupsToMenuController,
|
||||
syncMenuToScreenGroupsController,
|
||||
getSyncStatusController,
|
||||
syncAllCompaniesController,
|
||||
} from "../controllers/screenGroupController";
|
||||
|
||||
const router = Router();
|
||||
|
|
@ -94,18 +89,6 @@ router.post("/layout-summary/batch", getMultipleScreenLayoutSummary);
|
|||
// ============================================================
|
||||
router.post("/sub-tables/batch", getScreenSubTables);
|
||||
|
||||
// ============================================================
|
||||
// 메뉴-화면그룹 동기화
|
||||
// ============================================================
|
||||
// 동기화 상태 조회
|
||||
router.get("/sync/status", getSyncStatusController);
|
||||
// 화면관리 → 메뉴 동기화
|
||||
router.post("/sync/screen-to-menu", syncScreenGroupsToMenuController);
|
||||
// 메뉴 → 화면관리 동기화
|
||||
router.post("/sync/menu-to-screen", syncMenuToScreenGroupsController);
|
||||
// 전체 회사 동기화 (최고 관리자만)
|
||||
router.post("/sync/all", syncAllCompaniesController);
|
||||
|
||||
export default router;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -254,10 +254,7 @@ class DataService {
|
|||
key !== "limit" &&
|
||||
key !== "offset" &&
|
||||
key !== "orderBy" &&
|
||||
key !== "userLang" &&
|
||||
key !== "page" &&
|
||||
key !== "pageSize" &&
|
||||
key !== "size"
|
||||
key !== "userLang"
|
||||
) {
|
||||
// 컬럼명 검증 (SQL 인젝션 방지)
|
||||
if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(key)) {
|
||||
|
|
|
|||
|
|
@ -2090,7 +2090,7 @@ export class MenuCopyService {
|
|||
menu.menu_url,
|
||||
menu.menu_desc,
|
||||
userId,
|
||||
'active', // 복제된 메뉴는 항상 활성화 상태
|
||||
menu.status,
|
||||
menu.system_name,
|
||||
targetCompanyCode, // 새 회사 코드
|
||||
menu.lang_key,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1314,7 +1314,7 @@ export class TableManagementService {
|
|||
// 각 값을 LIKE 또는 = 조건으로 처리
|
||||
const conditions: string[] = [];
|
||||
const values: any[] = [];
|
||||
|
||||
|
||||
value.forEach((v: any, idx: number) => {
|
||||
const safeValue = String(v).trim();
|
||||
// 정확히 일치하거나, 콤마로 구분된 값 중 하나로 포함
|
||||
|
|
@ -1323,24 +1323,17 @@ export class TableManagementService {
|
|||
// - "2," 로 시작
|
||||
// - ",2" 로 끝남
|
||||
// - ",2," 중간에 포함
|
||||
const paramBase = paramIndex + idx * 4;
|
||||
const paramBase = paramIndex + (idx * 4);
|
||||
conditions.push(`(
|
||||
${columnName}::text = $${paramBase} OR
|
||||
${columnName}::text LIKE $${paramBase + 1} OR
|
||||
${columnName}::text LIKE $${paramBase + 2} OR
|
||||
${columnName}::text LIKE $${paramBase + 3}
|
||||
)`);
|
||||
values.push(
|
||||
safeValue,
|
||||
`${safeValue},%`,
|
||||
`%,${safeValue}`,
|
||||
`%,${safeValue},%`
|
||||
);
|
||||
values.push(safeValue, `${safeValue},%`, `%,${safeValue}`, `%,${safeValue},%`);
|
||||
});
|
||||
|
||||
logger.info(
|
||||
`🔍 다중 값 배열 검색: ${columnName} IN [${value.join(", ")}]`
|
||||
);
|
||||
logger.info(`🔍 다중 값 배열 검색: ${columnName} IN [${value.join(", ")}]`);
|
||||
return {
|
||||
whereClause: `(${conditions.join(" OR ")})`,
|
||||
values,
|
||||
|
|
@ -1779,29 +1772,21 @@ export class TableManagementService {
|
|||
// contains 연산자 (기본): 참조 테이블의 표시 컬럼으로 검색
|
||||
const referenceColumn = entityTypeInfo.referenceColumn || "id";
|
||||
const referenceTable = entityTypeInfo.referenceTable;
|
||||
|
||||
|
||||
// displayColumn이 비어있거나 "none"이면 참조 테이블에서 자동 감지 (entityJoinService와 동일한 로직)
|
||||
let displayColumn = entityTypeInfo.displayColumn;
|
||||
if (
|
||||
!displayColumn ||
|
||||
displayColumn === "none" ||
|
||||
displayColumn === ""
|
||||
) {
|
||||
displayColumn = await this.findDisplayColumnForTable(
|
||||
referenceTable,
|
||||
referenceColumn
|
||||
);
|
||||
if (!displayColumn || displayColumn === "none" || displayColumn === "") {
|
||||
displayColumn = await this.findDisplayColumnForTable(referenceTable, referenceColumn);
|
||||
logger.info(
|
||||
`🔍 [buildEntitySearchCondition] displayColumn 자동 감지: ${referenceTable} -> ${displayColumn}`
|
||||
);
|
||||
}
|
||||
|
||||
// 참조 테이블의 표시 컬럼으로 검색
|
||||
// 🔧 main. 접두사 추가: EXISTS 서브쿼리에서 외부 테이블 참조 시 명시적으로 지정
|
||||
return {
|
||||
whereClause: `EXISTS (
|
||||
SELECT 1 FROM ${referenceTable} ref
|
||||
WHERE ref.${referenceColumn} = main.${columnName}
|
||||
WHERE ref.${referenceColumn} = ${columnName}
|
||||
AND ref.${displayColumn} ILIKE $${paramIndex}
|
||||
)`,
|
||||
values: [`%${value}%`],
|
||||
|
|
@ -2165,14 +2150,14 @@ export class TableManagementService {
|
|||
// 안전한 테이블명 검증
|
||||
const safeTableName = tableName.replace(/[^a-zA-Z0-9_]/g, "");
|
||||
|
||||
// 전체 개수 조회 (main 별칭 추가 - buildWhereClause가 main. 접두사를 사용하므로 필요)
|
||||
const countQuery = `SELECT COUNT(*) as count FROM ${safeTableName} main ${whereClause}`;
|
||||
// 전체 개수 조회
|
||||
const countQuery = `SELECT COUNT(*) as count FROM ${safeTableName} ${whereClause}`;
|
||||
const countResult = await query<any>(countQuery, searchValues);
|
||||
const total = parseInt(countResult[0].count);
|
||||
|
||||
// 데이터 조회 (main 별칭 추가)
|
||||
// 데이터 조회
|
||||
const dataQuery = `
|
||||
SELECT main.* FROM ${safeTableName} main
|
||||
SELECT * FROM ${safeTableName}
|
||||
${whereClause}
|
||||
${orderClause}
|
||||
LIMIT $${paramIndex} OFFSET $${paramIndex + 1}
|
||||
|
|
@ -2509,7 +2494,7 @@ export class TableManagementService {
|
|||
skippedColumns.push(column);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const dataType = columnTypeMap.get(column) || "text";
|
||||
setConditions.push(
|
||||
`"${column}" = $${paramIndex}::${this.getPostgreSQLType(dataType)}`
|
||||
|
|
@ -2521,9 +2506,7 @@ export class TableManagementService {
|
|||
});
|
||||
|
||||
if (skippedColumns.length > 0) {
|
||||
logger.info(
|
||||
`⚠️ 테이블에 존재하지 않는 컬럼 스킵: ${skippedColumns.join(", ")}`
|
||||
);
|
||||
logger.info(`⚠️ 테이블에 존재하지 않는 컬럼 스킵: ${skippedColumns.join(", ")}`);
|
||||
}
|
||||
|
||||
// WHERE 조건 생성 (PRIMARY KEY 우선, 없으면 모든 원본 데이터 사용)
|
||||
|
|
@ -2793,14 +2776,10 @@ export class TableManagementService {
|
|||
// 실제 소스 컬럼이 partner_id인데 프론트엔드가 customer_id로 추론하는 경우 대응
|
||||
if (!baseJoinConfig && (additionalColumn as any).referenceTable) {
|
||||
baseJoinConfig = joinConfigs.find(
|
||||
(config) =>
|
||||
config.referenceTable ===
|
||||
(additionalColumn as any).referenceTable
|
||||
(config) => config.referenceTable === (additionalColumn as any).referenceTable
|
||||
);
|
||||
if (baseJoinConfig) {
|
||||
logger.info(
|
||||
`🔄 referenceTable로 조인 설정 찾음: ${(additionalColumn as any).referenceTable} → ${baseJoinConfig.sourceColumn}`
|
||||
);
|
||||
logger.info(`🔄 referenceTable로 조인 설정 찾음: ${(additionalColumn as any).referenceTable} → ${baseJoinConfig.sourceColumn}`);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2808,31 +2787,25 @@ export class TableManagementService {
|
|||
// joinAlias에서 실제 컬럼명 추출
|
||||
const sourceColumn = baseJoinConfig.sourceColumn; // 실제 소스 컬럼 (예: partner_id)
|
||||
const originalJoinAlias = additionalColumn.joinAlias; // 프론트엔드가 보낸 별칭 (예: customer_id_customer_name)
|
||||
|
||||
|
||||
// 🔄 프론트엔드가 잘못된 소스 컬럼으로 추론한 경우 처리
|
||||
// customer_id_customer_name → customer_name 추출 (customer_id_ 부분 제거)
|
||||
// 또는 partner_id_customer_name → customer_name 추출 (partner_id_ 부분 제거)
|
||||
let actualColumnName: string;
|
||||
|
||||
|
||||
// 프론트엔드가 보낸 joinAlias에서 실제 컬럼명 추출
|
||||
const frontendSourceColumn = additionalColumn.sourceColumn; // 프론트엔드가 추론한 소스 컬럼 (customer_id)
|
||||
if (originalJoinAlias.startsWith(`${frontendSourceColumn}_`)) {
|
||||
// 프론트엔드가 추론한 소스 컬럼으로 시작하면 그 부분 제거
|
||||
actualColumnName = originalJoinAlias.replace(
|
||||
`${frontendSourceColumn}_`,
|
||||
""
|
||||
);
|
||||
actualColumnName = originalJoinAlias.replace(`${frontendSourceColumn}_`, "");
|
||||
} else if (originalJoinAlias.startsWith(`${sourceColumn}_`)) {
|
||||
// 실제 소스 컬럼으로 시작하면 그 부분 제거
|
||||
actualColumnName = originalJoinAlias.replace(
|
||||
`${sourceColumn}_`,
|
||||
""
|
||||
);
|
||||
actualColumnName = originalJoinAlias.replace(`${sourceColumn}_`, "");
|
||||
} else {
|
||||
// 어느 것도 아니면 원본 사용
|
||||
actualColumnName = originalJoinAlias;
|
||||
}
|
||||
|
||||
|
||||
// 🆕 올바른 joinAlias 재생성 (실제 소스 컬럼 기반)
|
||||
const correctedJoinAlias = `${sourceColumn}_${actualColumnName}`;
|
||||
|
||||
|
|
@ -3226,10 +3199,8 @@ export class TableManagementService {
|
|||
}
|
||||
|
||||
// Entity 조인 컬럼 검색이 있는지 확인 (기본 조인 + 추가 조인 컬럼 모두 포함)
|
||||
// 🔧 sourceColumn도 포함: search={"order_no":"..."} 형태도 Entity 검색으로 인식
|
||||
const allEntityColumns = [
|
||||
...joinConfigs.map((config) => config.aliasColumn),
|
||||
...joinConfigs.map((config) => config.sourceColumn), // 🔧 소스 컬럼도 포함
|
||||
// 추가 조인 컬럼들도 포함 (writer_dept_code, company_code_status 등)
|
||||
...joinConfigs.flatMap((config) => {
|
||||
const additionalColumns = [];
|
||||
|
|
@ -3635,10 +3606,8 @@ export class TableManagementService {
|
|||
});
|
||||
|
||||
// main. 접두사 추가 (조인 쿼리용)
|
||||
// 🔧 이미 접두사(. 앞)가 있는 경우는 교체하지 않음 (ref.column, main.column 등)
|
||||
// Negative lookbehind (?<!\.) 사용: 앞에 .이 없는 경우만 매칭
|
||||
condition = condition.replace(
|
||||
new RegExp(`(?<!\\.)\\b${columnName}\\b`, "g"),
|
||||
new RegExp(`\\b${columnName}\\b`, "g"),
|
||||
`main.${columnName}`
|
||||
);
|
||||
conditions.push(condition);
|
||||
|
|
@ -3840,12 +3809,9 @@ export class TableManagementService {
|
|||
// 🔒 멀티테넌시: 회사별 데이터 테이블은 캐시 사용 불가 (company_code 필터링 필요)
|
||||
const companySpecificTables = [
|
||||
"supplier_mng",
|
||||
"customer_mng",
|
||||
"customer_mng",
|
||||
"item_info",
|
||||
"dept_info",
|
||||
"sales_order_mng", // 🔧 수주관리 테이블 추가
|
||||
"sales_order_detail", // 🔧 수주상세 테이블 추가
|
||||
"partner_info", // 🔧 거래처 테이블 추가
|
||||
// 필요시 추가
|
||||
];
|
||||
|
||||
|
|
@ -4756,7 +4722,7 @@ export class TableManagementService {
|
|||
/**
|
||||
* 두 테이블 간의 엔티티 관계 자동 감지
|
||||
* column_labels에서 엔티티 타입 설정을 기반으로 테이블 간 관계를 찾습니다.
|
||||
*
|
||||
*
|
||||
* @param leftTable 좌측 테이블명
|
||||
* @param rightTable 우측 테이블명
|
||||
* @returns 감지된 엔티티 관계 배열
|
||||
|
|
@ -4764,20 +4730,16 @@ export class TableManagementService {
|
|||
async detectTableEntityRelations(
|
||||
leftTable: string,
|
||||
rightTable: string
|
||||
): Promise<
|
||||
Array<{
|
||||
leftColumn: string;
|
||||
rightColumn: string;
|
||||
direction: "left_to_right" | "right_to_left";
|
||||
inputType: string;
|
||||
displayColumn?: string;
|
||||
}>
|
||||
> {
|
||||
): Promise<Array<{
|
||||
leftColumn: string;
|
||||
rightColumn: string;
|
||||
direction: "left_to_right" | "right_to_left";
|
||||
inputType: string;
|
||||
displayColumn?: string;
|
||||
}>> {
|
||||
try {
|
||||
logger.info(
|
||||
`두 테이블 간 엔티티 관계 감지 시작: ${leftTable} <-> ${rightTable}`
|
||||
);
|
||||
|
||||
logger.info(`두 테이블 간 엔티티 관계 감지 시작: ${leftTable} <-> ${rightTable}`);
|
||||
|
||||
const relations: Array<{
|
||||
leftColumn: string;
|
||||
rightColumn: string;
|
||||
|
|
@ -4844,17 +4806,12 @@ export class TableManagementService {
|
|||
|
||||
logger.info(`엔티티 관계 감지 완료: ${relations.length}개 발견`);
|
||||
relations.forEach((rel, idx) => {
|
||||
logger.info(
|
||||
` ${idx + 1}. ${leftTable}.${rel.leftColumn} <-> ${rightTable}.${rel.rightColumn} (${rel.direction})`
|
||||
);
|
||||
logger.info(` ${idx + 1}. ${leftTable}.${rel.leftColumn} <-> ${rightTable}.${rel.rightColumn} (${rel.direction})`);
|
||||
});
|
||||
|
||||
return relations;
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
`엔티티 관계 감지 실패: ${leftTable} <-> ${rightTable}`,
|
||||
error
|
||||
);
|
||||
logger.error(`엔티티 관계 감지 실패: ${leftTable} <-> ${rightTable}`, error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -111,15 +111,10 @@ export default function ScreenManagementPage() {
|
|||
};
|
||||
|
||||
// 검색어로 필터링된 화면
|
||||
// 검색어가 여러 키워드(폴더 계층 검색)이면 화면 필터링 없이 모든 화면 표시
|
||||
// 단일 키워드면 해당 키워드로 화면 필터링
|
||||
const searchKeywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(Boolean);
|
||||
const filteredScreens = searchKeywords.length > 1
|
||||
? screens // 폴더 계층 검색 시에는 화면 필터링 없음 (폴더에서 이미 필터링됨)
|
||||
: screens.filter((screen) =>
|
||||
screen.screenName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
screen.screenCode.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
const filteredScreens = screens.filter((screen) =>
|
||||
screen.screenName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
screen.screenCode.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
// 화면 설계 모드일 때는 레이아웃 없이 전체 화면 사용
|
||||
if (isDesignMode) {
|
||||
|
|
@ -188,7 +183,6 @@ export default function ScreenManagementPage() {
|
|||
selectedScreen={selectedScreen}
|
||||
onScreenSelect={handleScreenSelect}
|
||||
onScreenDesign={handleDesignScreen}
|
||||
searchTerm={searchTerm}
|
||||
onGroupSelect={(group) => {
|
||||
setSelectedGroup(group);
|
||||
setSelectedScreen(null); // 화면 선택 해제
|
||||
|
|
@ -247,3 +241,5 @@ export default function ScreenManagementPage() {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ import { TableSearchWidgetHeightProvider, useTableSearchWidgetHeight } from "@/c
|
|||
import { ScreenContextProvider } from "@/contexts/ScreenContext"; // 컴포넌트 간 통신
|
||||
import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext"; // 분할 패널 리사이즈
|
||||
import { ActiveTabProvider } from "@/contexts/ActiveTabContext"; // 활성 탭 관리
|
||||
import { ScreenMultiLangProvider } from "@/contexts/ScreenMultiLangContext"; // 화면 다국어
|
||||
|
||||
function ScreenViewPage() {
|
||||
const params = useParams();
|
||||
|
|
@ -113,7 +114,7 @@ function ScreenViewPage() {
|
|||
// 편집 모달 이벤트 리스너 등록
|
||||
useEffect(() => {
|
||||
const handleOpenEditModal = (event: CustomEvent) => {
|
||||
console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
|
||||
// console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
|
||||
|
||||
setEditModalConfig({
|
||||
screenId: event.detail.screenId,
|
||||
|
|
@ -345,9 +346,10 @@ function ScreenViewPage() {
|
|||
|
||||
{/* 절대 위치 기반 렌더링 (화면관리와 동일한 방식) */}
|
||||
{layoutReady && layout && layout.components.length > 0 ? (
|
||||
<div
|
||||
className="bg-background relative"
|
||||
style={{
|
||||
<ScreenMultiLangProvider components={layout.components} companyCode={companyCode}>
|
||||
<div
|
||||
className="bg-background relative"
|
||||
style={{
|
||||
width: `${screenWidth}px`,
|
||||
height: `${screenHeight}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 }}>
|
||||
|
|
|
|||
|
|
@ -388,6 +388,237 @@ select {
|
|||
border-spacing: 0 !important;
|
||||
}
|
||||
|
||||
/* ===== POP (Production Operation Panel) Styles ===== */
|
||||
|
||||
/* POP 전용 다크 테마 변수 */
|
||||
.pop-dark {
|
||||
/* 배경 색상 */
|
||||
--pop-bg-deepest: 8 12 21;
|
||||
--pop-bg-deep: 10 15 28;
|
||||
--pop-bg-primary: 13 19 35;
|
||||
--pop-bg-secondary: 18 26 47;
|
||||
--pop-bg-tertiary: 25 35 60;
|
||||
--pop-bg-elevated: 32 45 75;
|
||||
|
||||
/* 네온 강조색 */
|
||||
--pop-neon-cyan: 0 212 255;
|
||||
--pop-neon-cyan-bright: 0 240 255;
|
||||
--pop-neon-cyan-dim: 0 150 190;
|
||||
--pop-neon-pink: 255 0 102;
|
||||
--pop-neon-purple: 138 43 226;
|
||||
|
||||
/* 상태 색상 */
|
||||
--pop-success: 0 255 136;
|
||||
--pop-success-dim: 0 180 100;
|
||||
--pop-warning: 255 170 0;
|
||||
--pop-warning-dim: 200 130 0;
|
||||
--pop-danger: 255 51 51;
|
||||
--pop-danger-dim: 200 40 40;
|
||||
|
||||
/* 텍스트 색상 */
|
||||
--pop-text-primary: 255 255 255;
|
||||
--pop-text-secondary: 180 195 220;
|
||||
--pop-text-muted: 100 120 150;
|
||||
|
||||
/* 테두리 색상 */
|
||||
--pop-border: 40 55 85;
|
||||
--pop-border-light: 55 75 110;
|
||||
}
|
||||
|
||||
/* POP 전용 라이트 테마 변수 */
|
||||
.pop-light {
|
||||
--pop-bg-deepest: 245 247 250;
|
||||
--pop-bg-deep: 240 243 248;
|
||||
--pop-bg-primary: 250 251 253;
|
||||
--pop-bg-secondary: 255 255 255;
|
||||
--pop-bg-tertiary: 245 247 250;
|
||||
--pop-bg-elevated: 235 238 245;
|
||||
|
||||
--pop-neon-cyan: 0 122 204;
|
||||
--pop-neon-cyan-bright: 0 140 230;
|
||||
--pop-neon-cyan-dim: 0 100 170;
|
||||
--pop-neon-pink: 220 38 127;
|
||||
--pop-neon-purple: 118 38 200;
|
||||
|
||||
--pop-success: 22 163 74;
|
||||
--pop-success-dim: 21 128 61;
|
||||
--pop-warning: 245 158 11;
|
||||
--pop-warning-dim: 217 119 6;
|
||||
--pop-danger: 220 38 38;
|
||||
--pop-danger-dim: 185 28 28;
|
||||
|
||||
--pop-text-primary: 15 23 42;
|
||||
--pop-text-secondary: 71 85 105;
|
||||
--pop-text-muted: 148 163 184;
|
||||
|
||||
--pop-border: 226 232 240;
|
||||
--pop-border-light: 203 213 225;
|
||||
}
|
||||
|
||||
/* POP 배경 그리드 패턴 */
|
||||
.pop-bg-pattern::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
|
||||
repeating-linear-gradient(0deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
|
||||
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.pop-light .pop-bg-pattern::before {
|
||||
background:
|
||||
repeating-linear-gradient(90deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
|
||||
repeating-linear-gradient(0deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
|
||||
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 122, 204, 0.05) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
/* POP 글로우 효과 */
|
||||
.pop-glow-cyan {
|
||||
box-shadow:
|
||||
0 0 20px rgba(0, 212, 255, 0.5),
|
||||
0 0 40px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.pop-glow-cyan-strong {
|
||||
box-shadow:
|
||||
0 0 10px rgba(0, 212, 255, 0.8),
|
||||
0 0 30px rgba(0, 212, 255, 0.5),
|
||||
0 0 50px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.pop-glow-success {
|
||||
box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
|
||||
}
|
||||
|
||||
.pop-glow-warning {
|
||||
box-shadow: 0 0 15px rgba(255, 170, 0, 0.5);
|
||||
}
|
||||
|
||||
.pop-glow-danger {
|
||||
box-shadow: 0 0 15px rgba(255, 51, 51, 0.5);
|
||||
}
|
||||
|
||||
/* POP 펄스 글로우 애니메이션 */
|
||||
@keyframes pop-pulse-glow {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 20px rgba(0, 212, 255, 0.8),
|
||||
0 0 30px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.pop-animate-pulse-glow {
|
||||
animation: pop-pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* POP 프로그레스 바 샤인 애니메이션 */
|
||||
@keyframes pop-progress-shine {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
|
||||
.pop-progress-shine::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
|
||||
animation: pop-progress-shine 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* POP 스크롤바 스타일 */
|
||||
.pop-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.pop-scrollbar::-webkit-scrollbar-track {
|
||||
background: rgb(var(--pop-bg-secondary));
|
||||
}
|
||||
|
||||
.pop-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgb(var(--pop-border-light));
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.pop-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(var(--pop-neon-cyan-dim));
|
||||
}
|
||||
|
||||
/* POP 스크롤바 숨기기 */
|
||||
.pop-hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pop-hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* ===== Marching Ants Animation (Excel Copy Border) ===== */
|
||||
@keyframes marching-ants-h {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes marching-ants-v {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-marching-ants-h {
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
hsl(var(--primary)) 0,
|
||||
hsl(var(--primary)) 4px,
|
||||
transparent 4px,
|
||||
transparent 8px
|
||||
);
|
||||
background-size: 16px 2px;
|
||||
animation: marching-ants-h 0.4s linear infinite;
|
||||
}
|
||||
|
||||
.animate-marching-ants-v {
|
||||
background: repeating-linear-gradient(
|
||||
180deg,
|
||||
hsl(var(--primary)) 0,
|
||||
hsl(var(--primary)) 4px,
|
||||
transparent 4px,
|
||||
transparent 8px
|
||||
);
|
||||
background-size: 2px 16px;
|
||||
animation: marching-ants-v 0.4s linear infinite;
|
||||
}
|
||||
|
||||
/* ===== 저장 테이블 막대기 애니메이션 ===== */
|
||||
@keyframes saveBarDrop {
|
||||
0% {
|
||||
|
|
|
|||
|
|
@ -927,7 +927,7 @@ export default function CopyScreenModal({
|
|||
if (mode === "group") {
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={handleClose}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
||||
{/* 로딩 오버레이 */}
|
||||
{isCopying && (
|
||||
<div className="absolute inset-0 z-50 flex flex-col items-center justify-center rounded-lg bg-background/90 backdrop-blur-sm">
|
||||
|
|
|
|||
|
|
@ -309,10 +309,17 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
|
|||
// 🆕 그룹 데이터 조회 함수
|
||||
const loadGroupData = async () => {
|
||||
if (!modalState.tableName || !modalState.groupByColumns || modalState.groupByColumns.length === 0) {
|
||||
// console.warn("테이블명 또는 그룹핑 컬럼이 없습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// console.log("🔍 그룹 데이터 조회 시작:", {
|
||||
// tableName: modalState.tableName,
|
||||
// groupByColumns: modalState.groupByColumns,
|
||||
// editData: modalState.editData,
|
||||
// });
|
||||
|
||||
// 그룹핑 컬럼 값 추출 (예: order_no = "ORD-20251124-001")
|
||||
const groupValues: Record<string, any> = {};
|
||||
modalState.groupByColumns.forEach((column) => {
|
||||
|
|
@ -322,9 +329,15 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
|
|||
});
|
||||
|
||||
if (Object.keys(groupValues).length === 0) {
|
||||
// console.warn("그룹핑 컬럼 값이 없습니다:", modalState.groupByColumns);
|
||||
return;
|
||||
}
|
||||
|
||||
// console.log("🔍 그룹 조회 요청:", {
|
||||
// tableName: modalState.tableName,
|
||||
// groupValues,
|
||||
// });
|
||||
|
||||
// 같은 그룹의 모든 레코드 조회 (entityJoinApi 사용)
|
||||
const { entityJoinApi } = await import("@/lib/api/entityJoin");
|
||||
const response = await entityJoinApi.getTableDataWithJoins(modalState.tableName, {
|
||||
|
|
@ -334,19 +347,23 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
|
|||
enableEntityJoin: true,
|
||||
});
|
||||
|
||||
// console.log("🔍 그룹 조회 응답:", response);
|
||||
|
||||
// entityJoinApi는 배열 또는 { data: [] } 형식으로 반환
|
||||
const dataArray = Array.isArray(response) ? response : response?.data || [];
|
||||
|
||||
if (dataArray.length > 0) {
|
||||
// console.log("✅ 그룹 데이터 조회 성공:", dataArray.length, "건");
|
||||
setGroupData(dataArray);
|
||||
setOriginalGroupData(JSON.parse(JSON.stringify(dataArray))); // Deep copy
|
||||
toast.info(`${dataArray.length}개의 관련 품목을 불러왔습니다.`);
|
||||
} else {
|
||||
console.warn("그룹 데이터가 없습니다:", response);
|
||||
setGroupData([modalState.editData]); // 기본값: 선택된 행만
|
||||
setOriginalGroupData([JSON.parse(JSON.stringify(modalState.editData))]);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("그룹 데이터 조회 오류:", error);
|
||||
console.error("❌ 그룹 데이터 조회 오류:", error);
|
||||
toast.error("관련 데이터를 불러오는 중 오류가 발생했습니다.");
|
||||
setGroupData([modalState.editData]); // 기본값: 선택된 행만
|
||||
setOriginalGroupData([JSON.parse(JSON.stringify(modalState.editData))]);
|
||||
|
|
@ -1026,18 +1043,17 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
|
|||
const groupedDataProp = groupData.length > 0 ? groupData : undefined;
|
||||
|
||||
// 🆕 UniversalFormModal이 있는지 확인 (자체 저장 로직 사용)
|
||||
// 최상위 컴포넌트에 universal-form-modal이 있는지 확인
|
||||
// ⚠️ 수정: conditional-container는 제외 (groupData가 있으면 EditModal.handleSave 사용)
|
||||
// 최상위 컴포넌트 또는 조건부 컨테이너 내부 화면에 universal-form-modal이 있는지 확인
|
||||
const hasUniversalFormModal = screenData.components.some(
|
||||
(c) => {
|
||||
// 최상위에 universal-form-modal이 있는 경우만 자체 저장 로직 사용
|
||||
// 최상위에 universal-form-modal이 있는 경우
|
||||
if (c.componentType === "universal-form-modal") return true;
|
||||
// 조건부 컨테이너 내부에 universal-form-modal이 있는 경우
|
||||
// (조건부 컨테이너가 있으면 내부 화면에서 universal-form-modal을 사용하는 것으로 가정)
|
||||
if (c.componentType === "conditional-container") return true;
|
||||
return false;
|
||||
}
|
||||
);
|
||||
|
||||
// 🆕 그룹 데이터가 있으면 EditModal.handleSave 사용 (일괄 저장)
|
||||
const shouldUseEditModalSave = groupData.length > 0 || !hasUniversalFormModal;
|
||||
|
||||
// 🔑 첨부파일 컴포넌트가 행(레코드) 단위로 파일을 저장할 수 있도록 tableName 추가
|
||||
const enrichedFormData = {
|
||||
|
|
@ -1079,9 +1095,9 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
|
|||
id: modalState.screenId!,
|
||||
tableName: screenData.screenInfo?.tableName,
|
||||
}}
|
||||
// 🆕 그룹 데이터가 있거나 UniversalFormModal이 없으면 EditModal.handleSave 사용
|
||||
// groupData가 있으면 일괄 저장을 위해 반드시 EditModal.handleSave 사용
|
||||
onSave={shouldUseEditModalSave ? handleSave : undefined}
|
||||
// 🆕 UniversalFormModal이 있으면 onSave 전달 안 함 (자체 저장 로직 사용)
|
||||
// ModalRepeaterTable만 있으면 기존대로 onSave 전달 (호환성 유지)
|
||||
onSave={hasUniversalFormModal ? undefined : handleSave}
|
||||
isInModal={true}
|
||||
// 🆕 그룹 데이터를 ModalRepeaterTable에 전달
|
||||
groupedData={groupedDataProp}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -365,6 +365,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
|
|||
isInteractive={true}
|
||||
formData={formData}
|
||||
originalData={originalData || undefined}
|
||||
initialData={(originalData && Object.keys(originalData).length > 0) ? originalData : formData} // 🆕 originalData가 있으면 사용, 없으면 formData 사용 (생성 모드에서 부모 데이터 전달)
|
||||
onFormDataChange={handleFormDataChange}
|
||||
screenId={screenInfo?.id}
|
||||
tableName={screenInfo?.tableName}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
ChevronRight,
|
||||
|
|
@ -16,8 +16,6 @@ import {
|
|||
Copy,
|
||||
FolderTree,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
Building2,
|
||||
} from "lucide-react";
|
||||
import { ScreenDefinition } from "@/types/screen";
|
||||
import {
|
||||
|
|
@ -26,17 +24,9 @@ import {
|
|||
deleteScreenGroup,
|
||||
addScreenToGroup,
|
||||
removeScreenFromGroup,
|
||||
getMenuScreenSyncStatus,
|
||||
syncScreenGroupsToMenu,
|
||||
syncMenuToScreenGroups,
|
||||
syncAllCompanies,
|
||||
SyncStatus,
|
||||
AllCompaniesSyncResult,
|
||||
} from "@/lib/api/screenGroup";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { getCompanyList, Company } from "@/lib/api/company";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
|
|
@ -98,7 +88,6 @@ interface ScreenGroupTreeViewProps {
|
|||
onGroupSelect?: (group: { id: number; name: string; company_code?: string } | null) => void;
|
||||
onScreenSelectInGroup?: (group: { id: number; name: string; company_code?: string }, screenId: number) => void;
|
||||
companyCode?: string;
|
||||
searchTerm?: string; // 검색어 (띄어쓰기로 구분된 여러 키워드)
|
||||
}
|
||||
|
||||
interface TreeNode {
|
||||
|
|
@ -118,7 +107,6 @@ export function ScreenGroupTreeView({
|
|||
onGroupSelect,
|
||||
onScreenSelectInGroup,
|
||||
companyCode,
|
||||
searchTerm = "",
|
||||
}: ScreenGroupTreeViewProps) {
|
||||
const [groups, setGroups] = useState<ScreenGroup[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
|
@ -167,25 +155,6 @@ export function ScreenGroupTreeView({
|
|||
const [contextMenuGroup, setContextMenuGroup] = useState<ScreenGroup | null>(null);
|
||||
const [contextMenuGroupPosition, setContextMenuGroupPosition] = useState<{ x: number; y: number } | null>(null);
|
||||
|
||||
// 메뉴-화면그룹 동기화 상태
|
||||
const [isSyncDialogOpen, setIsSyncDialogOpen] = useState(false);
|
||||
const [syncStatus, setSyncStatus] = useState<SyncStatus | null>(null);
|
||||
const [isSyncing, setIsSyncing] = useState(false);
|
||||
const [syncDirection, setSyncDirection] = useState<"screen-to-menu" | "menu-to-screen" | "all" | null>(null);
|
||||
const [syncProgress, setSyncProgress] = useState<{ message: string; detail?: string } | null>(null);
|
||||
|
||||
// 회사 선택 (최고 관리자용)
|
||||
const { user } = useAuth();
|
||||
const [companies, setCompanies] = useState<Company[]>([]);
|
||||
const [selectedCompanyCode, setSelectedCompanyCode] = useState<string>("");
|
||||
const [isSyncCompanySelectOpen, setIsSyncCompanySelectOpen] = useState(false);
|
||||
|
||||
// 현재 사용자가 최고 관리자인지 확인
|
||||
const isSuperAdmin = user?.companyCode === "*";
|
||||
|
||||
// 실제 사용할 회사 코드 (props → 선택 → 사용자 기본값)
|
||||
const effectiveCompanyCode = companyCode || selectedCompanyCode || (isSuperAdmin ? "" : user?.companyCode) || "";
|
||||
|
||||
// 그룹 목록 및 그룹별 화면 로드
|
||||
useEffect(() => {
|
||||
loadGroupsData();
|
||||
|
|
@ -273,160 +242,6 @@ export function ScreenGroupTreeView({
|
|||
setIsGroupModalOpen(true);
|
||||
};
|
||||
|
||||
// 동기화 다이얼로그 열기
|
||||
const handleOpenSyncDialog = async () => {
|
||||
setIsSyncDialogOpen(true);
|
||||
setSyncStatus(null);
|
||||
setSyncDirection(null);
|
||||
setSelectedCompanyCode("");
|
||||
|
||||
// 최고 관리자일 때 회사 목록 로드
|
||||
if (isSuperAdmin && companies.length === 0) {
|
||||
try {
|
||||
const companiesList = await getCompanyList();
|
||||
// 최고 관리자(*)용 회사는 제외
|
||||
const filteredCompanies = companiesList.filter(c => c.company_code !== "*");
|
||||
setCompanies(filteredCompanies);
|
||||
} catch (error) {
|
||||
console.error("회사 목록 로드 실패:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// 최고 관리자가 아니면 바로 상태 조회
|
||||
if (!isSuperAdmin && user?.companyCode) {
|
||||
const response = await getMenuScreenSyncStatus(user.companyCode);
|
||||
if (response.success && response.data) {
|
||||
setSyncStatus(response.data);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 회사 선택 시 상태 조회
|
||||
const handleCompanySelect = async (companyCode: string) => {
|
||||
setSelectedCompanyCode(companyCode);
|
||||
setIsSyncCompanySelectOpen(false);
|
||||
setSyncStatus(null);
|
||||
|
||||
if (companyCode) {
|
||||
const response = await getMenuScreenSyncStatus(companyCode);
|
||||
if (response.success && response.data) {
|
||||
setSyncStatus(response.data);
|
||||
} else {
|
||||
toast.error(response.error || "동기화 상태 조회 실패");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 동기화 실행
|
||||
const handleSync = async (direction: "screen-to-menu" | "menu-to-screen") => {
|
||||
// 사용할 회사 코드 결정
|
||||
const targetCompanyCode = isSuperAdmin ? selectedCompanyCode : user?.companyCode;
|
||||
|
||||
if (!targetCompanyCode) {
|
||||
toast.error("회사를 선택해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSyncing(true);
|
||||
setSyncDirection(direction);
|
||||
setSyncProgress({
|
||||
message: direction === "screen-to-menu"
|
||||
? "화면관리 → 메뉴 동기화 중..."
|
||||
: "메뉴 → 화면관리 동기화 중...",
|
||||
detail: "데이터를 분석하고 있습니다..."
|
||||
});
|
||||
|
||||
try {
|
||||
setSyncProgress({
|
||||
message: direction === "screen-to-menu"
|
||||
? "화면관리 → 메뉴 동기화 중..."
|
||||
: "메뉴 → 화면관리 동기화 중...",
|
||||
detail: "동기화 작업을 수행하고 있습니다..."
|
||||
});
|
||||
|
||||
const response = direction === "screen-to-menu"
|
||||
? await syncScreenGroupsToMenu(targetCompanyCode)
|
||||
: await syncMenuToScreenGroups(targetCompanyCode);
|
||||
|
||||
if (response.success) {
|
||||
const data = response.data;
|
||||
setSyncProgress({
|
||||
message: "동기화 완료!",
|
||||
detail: `생성 ${data?.created || 0}개, 연결 ${data?.linked || 0}개, 스킵 ${data?.skipped || 0}개`
|
||||
});
|
||||
toast.success(
|
||||
`동기화 완료: 생성 ${data?.created || 0}개, 연결 ${data?.linked || 0}개, 스킵 ${data?.skipped || 0}개`
|
||||
);
|
||||
// 그룹 데이터 새로고침
|
||||
await loadGroupsData();
|
||||
// 동기화 상태 새로고침
|
||||
const statusResponse = await getMenuScreenSyncStatus(targetCompanyCode);
|
||||
if (statusResponse.success && statusResponse.data) {
|
||||
setSyncStatus(statusResponse.data);
|
||||
}
|
||||
} else {
|
||||
setSyncProgress(null);
|
||||
toast.error(`동기화 실패: ${response.error || "알 수 없는 오류"}`);
|
||||
}
|
||||
} catch (error: any) {
|
||||
setSyncProgress(null);
|
||||
toast.error(`동기화 실패: ${error.message}`);
|
||||
} finally {
|
||||
setIsSyncing(false);
|
||||
setSyncDirection(null);
|
||||
// 3초 후 진행 메시지 초기화
|
||||
setTimeout(() => setSyncProgress(null), 3000);
|
||||
}
|
||||
};
|
||||
|
||||
// 전체 회사 동기화 (최고 관리자만)
|
||||
const handleSyncAll = async () => {
|
||||
if (!isSuperAdmin) {
|
||||
toast.error("전체 동기화는 최고 관리자만 수행할 수 있습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSyncing(true);
|
||||
setSyncDirection("all");
|
||||
setSyncProgress({
|
||||
message: "전체 회사 동기화 중...",
|
||||
detail: "모든 회사의 데이터를 분석하고 있습니다..."
|
||||
});
|
||||
|
||||
try {
|
||||
setSyncProgress({
|
||||
message: "전체 회사 동기화 중...",
|
||||
detail: "양방향 동기화 작업을 수행하고 있습니다..."
|
||||
});
|
||||
|
||||
const response = await syncAllCompanies();
|
||||
|
||||
if (response.success && response.data) {
|
||||
const data = response.data;
|
||||
setSyncProgress({
|
||||
message: "전체 동기화 완료!",
|
||||
detail: `${data.totalCompanies}개 회사, 생성 ${data.totalCreated}개, 연결 ${data.totalLinked}개`
|
||||
});
|
||||
toast.success(
|
||||
`전체 동기화 완료: ${data.totalCompanies}개 회사, 생성 ${data.totalCreated}개, 연결 ${data.totalLinked}개`
|
||||
);
|
||||
// 그룹 데이터 새로고침
|
||||
await loadGroupsData();
|
||||
} else {
|
||||
setSyncProgress(null);
|
||||
toast.error(`전체 동기화 실패: ${response.error || "알 수 없는 오류"}`);
|
||||
}
|
||||
} catch (error: any) {
|
||||
setSyncProgress(null);
|
||||
toast.error(`전체 동기화 실패: ${error.message}`);
|
||||
} finally {
|
||||
setIsSyncing(false);
|
||||
setSyncDirection(null);
|
||||
// 3초 후 진행 메시지 초기화
|
||||
setTimeout(() => setSyncProgress(null), 3000);
|
||||
}
|
||||
};
|
||||
|
||||
// 그룹 수정 버튼 클릭
|
||||
const handleEditGroup = (group: ScreenGroup, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
|
|
@ -781,191 +596,6 @@ export function ScreenGroupTreeView({
|
|||
return result;
|
||||
};
|
||||
|
||||
// 검색어로 그룹 필터링 (띄어쓰기로 구분된 여러 키워드 - 계층적 검색)
|
||||
const getFilteredGroups = useMemo(() => {
|
||||
if (!searchTerm.trim()) {
|
||||
return groups; // 검색어가 없으면 모든 그룹 반환
|
||||
}
|
||||
|
||||
// 검색어를 띄어쓰기로 분리하고 빈 문자열 제거
|
||||
const keywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(k => k.length > 0);
|
||||
|
||||
if (keywords.length === 0) {
|
||||
return groups;
|
||||
}
|
||||
|
||||
// 그룹의 조상 ID들을 가져오는 함수
|
||||
const getAncestorIds = (groupId: number): Set<number> => {
|
||||
const ancestors = new Set<number>();
|
||||
let current = groups.find(g => g.id === groupId);
|
||||
while (current?.parent_group_id) {
|
||||
ancestors.add(current.parent_group_id);
|
||||
current = groups.find(g => g.id === current!.parent_group_id);
|
||||
}
|
||||
return ancestors;
|
||||
};
|
||||
|
||||
// 첫 번째 키워드와 일치하는 그룹 찾기
|
||||
let currentMatchingIds = new Set<number>();
|
||||
for (const group of groups) {
|
||||
const groupName = group.group_name.toLowerCase();
|
||||
if (groupName.includes(keywords[0])) {
|
||||
currentMatchingIds.add(group.id);
|
||||
}
|
||||
}
|
||||
|
||||
// 일치하는 그룹이 없으면 빈 배열 반환
|
||||
if (currentMatchingIds.size === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// 나머지 키워드들을 순차적으로 처리 (계층적 검색)
|
||||
for (let i = 1; i < keywords.length; i++) {
|
||||
const keyword = keywords[i];
|
||||
const nextMatchingIds = new Set<number>();
|
||||
|
||||
for (const group of groups) {
|
||||
const groupName = group.group_name.toLowerCase();
|
||||
if (groupName.includes(keyword)) {
|
||||
// 이 그룹의 조상 중에 이전 키워드와 일치하는 그룹이 있는지 확인
|
||||
const ancestors = getAncestorIds(group.id);
|
||||
const hasMatchingAncestor = Array.from(currentMatchingIds).some(id =>
|
||||
ancestors.has(id) || id === group.id
|
||||
);
|
||||
|
||||
if (hasMatchingAncestor) {
|
||||
nextMatchingIds.add(group.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 매칭되는 게 있으면 업데이트, 없으면 이전 결과 유지
|
||||
if (nextMatchingIds.size > 0) {
|
||||
// 이전 키워드 매칭도 유지 (상위 폴더 표시를 위해)
|
||||
nextMatchingIds.forEach(id => currentMatchingIds.add(id));
|
||||
currentMatchingIds = nextMatchingIds;
|
||||
}
|
||||
}
|
||||
|
||||
// 최종 매칭 결과
|
||||
const finalMatchingIds = currentMatchingIds;
|
||||
|
||||
// 표시할 그룹 ID 집합
|
||||
const groupsToShow = new Set<number>();
|
||||
|
||||
// 일치하는 그룹의 상위 그룹들도 포함 (계층 유지를 위해)
|
||||
const addParents = (groupId: number) => {
|
||||
const group = groups.find(g => g.id === groupId);
|
||||
if (group) {
|
||||
groupsToShow.add(group.id);
|
||||
if (group.parent_group_id) {
|
||||
addParents(group.parent_group_id);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 하위 그룹들을 추가하는 함수
|
||||
const addChildren = (groupId: number) => {
|
||||
const children = groups.filter(g => g.parent_group_id === groupId);
|
||||
for (const child of children) {
|
||||
groupsToShow.add(child.id);
|
||||
addChildren(child.id);
|
||||
}
|
||||
};
|
||||
|
||||
// 최종 매칭 그룹들의 상위 추가
|
||||
for (const groupId of finalMatchingIds) {
|
||||
addParents(groupId);
|
||||
}
|
||||
|
||||
// 마지막 키워드와 일치하는 그룹의 하위만 추가
|
||||
for (const groupId of finalMatchingIds) {
|
||||
addChildren(groupId);
|
||||
}
|
||||
|
||||
// 필터링된 그룹만 반환
|
||||
return groups.filter(g => groupsToShow.has(g.id));
|
||||
}, [groups, searchTerm]);
|
||||
|
||||
// 검색 시 해당 그룹이 일치하는지 확인 (하이라이트용)
|
||||
const isGroupMatchingSearch = (groupName: string): boolean => {
|
||||
if (!searchTerm.trim()) return false;
|
||||
const keywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(k => k.length > 0);
|
||||
const name = groupName.toLowerCase();
|
||||
return keywords.some(keyword => name.includes(keyword));
|
||||
};
|
||||
|
||||
// 검색 시 해당 그룹이 자동으로 펼쳐져야 하는지 확인
|
||||
// (검색어와 일치하는 그룹의 상위 + 마지막 검색어와 일치하는 그룹도 자동 펼침)
|
||||
const shouldAutoExpandForSearch = useMemo(() => {
|
||||
if (!searchTerm.trim()) return new Set<number>();
|
||||
|
||||
const keywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(k => k.length > 0);
|
||||
if (keywords.length === 0) return new Set<number>();
|
||||
|
||||
// 그룹의 조상 ID들을 가져오는 함수
|
||||
const getAncestorIds = (groupId: number): Set<number> => {
|
||||
const ancestors = new Set<number>();
|
||||
let current = groups.find(g => g.id === groupId);
|
||||
while (current?.parent_group_id) {
|
||||
ancestors.add(current.parent_group_id);
|
||||
current = groups.find(g => g.id === current!.parent_group_id);
|
||||
}
|
||||
return ancestors;
|
||||
};
|
||||
|
||||
// 계층적 검색으로 최종 일치 그룹 찾기 (getFilteredGroups와 동일한 로직)
|
||||
let currentMatchingIds = new Set<number>();
|
||||
for (const group of groups) {
|
||||
const groupName = group.group_name.toLowerCase();
|
||||
if (groupName.includes(keywords[0])) {
|
||||
currentMatchingIds.add(group.id);
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 1; i < keywords.length; i++) {
|
||||
const keyword = keywords[i];
|
||||
const nextMatchingIds = new Set<number>();
|
||||
|
||||
for (const group of groups) {
|
||||
const groupName = group.group_name.toLowerCase();
|
||||
if (groupName.includes(keyword)) {
|
||||
const ancestors = getAncestorIds(group.id);
|
||||
const hasMatchingAncestor = Array.from(currentMatchingIds).some(id =>
|
||||
ancestors.has(id) || id === group.id
|
||||
);
|
||||
|
||||
if (hasMatchingAncestor) {
|
||||
nextMatchingIds.add(group.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (nextMatchingIds.size > 0) {
|
||||
nextMatchingIds.forEach(id => currentMatchingIds.add(id));
|
||||
currentMatchingIds = nextMatchingIds;
|
||||
}
|
||||
}
|
||||
|
||||
// 자동 펼침 대상: 일치 그룹의 상위 + 일치 그룹 자체
|
||||
const autoExpandIds = new Set<number>();
|
||||
|
||||
const addParents = (groupId: number) => {
|
||||
const group = groups.find(g => g.id === groupId);
|
||||
if (group?.parent_group_id) {
|
||||
autoExpandIds.add(group.parent_group_id);
|
||||
addParents(group.parent_group_id);
|
||||
}
|
||||
};
|
||||
|
||||
for (const groupId of currentMatchingIds) {
|
||||
autoExpandIds.add(groupId); // 일치하는 그룹 자체도 펼침 (화면 표시를 위해)
|
||||
addParents(groupId);
|
||||
}
|
||||
|
||||
return autoExpandIds;
|
||||
}, [groups, searchTerm]);
|
||||
|
||||
// 그룹 데이터 새로고침
|
||||
const loadGroupsData = async () => {
|
||||
try {
|
||||
|
|
@ -1005,8 +635,8 @@ export function ScreenGroupTreeView({
|
|||
|
||||
return (
|
||||
<div className="h-full flex flex-col overflow-hidden">
|
||||
{/* 그룹 추가 & 동기화 버튼 */}
|
||||
<div className="flex-shrink-0 border-b p-2 space-y-2">
|
||||
{/* 그룹 추가 버튼 */}
|
||||
<div className="flex-shrink-0 border-b p-2">
|
||||
<Button
|
||||
onClick={handleAddGroup}
|
||||
variant="outline"
|
||||
|
|
@ -1016,39 +646,20 @@ export function ScreenGroupTreeView({
|
|||
<Plus className="h-4 w-4" />
|
||||
그룹 추가
|
||||
</Button>
|
||||
{isSuperAdmin && (
|
||||
<Button
|
||||
onClick={handleOpenSyncDialog}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full gap-2 text-muted-foreground"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
메뉴 동기화
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 트리 목록 */}
|
||||
<div className="flex-1 overflow-auto p-2">
|
||||
{/* 검색 결과 없음 표시 */}
|
||||
{searchTerm.trim() && getFilteredGroups.length === 0 && (
|
||||
<div className="py-8 text-center text-sm text-muted-foreground">
|
||||
"{searchTerm}"와 일치하는 폴더가 없습니다
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 그룹화된 화면들 (대분류만 먼저 렌더링) */}
|
||||
{getFilteredGroups
|
||||
{groups
|
||||
.filter((g) => !(g as any).parent_group_id) // 대분류만 (parent_group_id가 null)
|
||||
.map((group) => {
|
||||
const groupId = String(group.id);
|
||||
const isExpanded = expandedGroups.has(groupId) || shouldAutoExpandForSearch.has(group.id); // 검색 시 상위 그룹만 자동 확장
|
||||
const isExpanded = expandedGroups.has(groupId);
|
||||
const groupScreens = getScreensInGroup(group.id);
|
||||
const isMatching = isGroupMatchingSearch(group.group_name); // 검색어 일치 여부
|
||||
|
||||
// 하위 그룹들 찾기 (필터링된 그룹에서만)
|
||||
const childGroups = getFilteredGroups.filter((g) => (g as any).parent_group_id === group.id);
|
||||
// 하위 그룹들 찾기
|
||||
const childGroups = groups.filter((g) => (g as any).parent_group_id === group.id);
|
||||
|
||||
return (
|
||||
<div key={groupId} className="mb-1">
|
||||
|
|
@ -1056,8 +667,7 @@ export function ScreenGroupTreeView({
|
|||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
|
||||
"text-sm font-medium group/item",
|
||||
isMatching && "bg-primary/5 dark:bg-primary/10" // 검색 일치 하이라이트 (연한 배경)
|
||||
"text-sm font-medium group/item"
|
||||
)}
|
||||
onClick={() => toggleGroup(groupId)}
|
||||
onContextMenu={(e) => handleGroupContextMenu(e, group)}
|
||||
|
|
@ -1072,7 +682,7 @@ export function ScreenGroupTreeView({
|
|||
) : (
|
||||
<Folder className="h-4 w-4 shrink-0 text-amber-500" />
|
||||
)}
|
||||
<span className={cn("truncate flex-1", isMatching && "font-medium text-primary/80")}>{group.group_name}</span>
|
||||
<span className="truncate flex-1">{group.group_name}</span>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{groupScreens.length}
|
||||
</Badge>
|
||||
|
|
@ -1109,12 +719,11 @@ export function ScreenGroupTreeView({
|
|||
<div className="ml-6 mt-1 space-y-0.5">
|
||||
{childGroups.map((childGroup) => {
|
||||
const childGroupId = String(childGroup.id);
|
||||
const isChildExpanded = expandedGroups.has(childGroupId) || shouldAutoExpandForSearch.has(childGroup.id); // 검색 시 상위 그룹만 자동 확장
|
||||
const isChildExpanded = expandedGroups.has(childGroupId);
|
||||
const childScreens = getScreensInGroup(childGroup.id);
|
||||
const isChildMatching = isGroupMatchingSearch(childGroup.group_name);
|
||||
|
||||
// 손자 그룹들 (3단계) - 필터링된 그룹에서만
|
||||
const grandChildGroups = getFilteredGroups.filter((g) => (g as any).parent_group_id === childGroup.id);
|
||||
// 손자 그룹들 (3단계)
|
||||
const grandChildGroups = groups.filter((g) => (g as any).parent_group_id === childGroup.id);
|
||||
|
||||
return (
|
||||
<div key={childGroupId}>
|
||||
|
|
@ -1122,8 +731,7 @@ export function ScreenGroupTreeView({
|
|||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
|
||||
"text-xs font-medium group/item",
|
||||
isChildMatching && "bg-primary/5 dark:bg-primary/10"
|
||||
"text-xs font-medium group/item"
|
||||
)}
|
||||
onClick={() => toggleGroup(childGroupId)}
|
||||
onContextMenu={(e) => handleGroupContextMenu(e, childGroup)}
|
||||
|
|
@ -1138,7 +746,7 @@ export function ScreenGroupTreeView({
|
|||
) : (
|
||||
<Folder className="h-3 w-3 shrink-0 text-blue-500" />
|
||||
)}
|
||||
<span className={cn("truncate flex-1", isChildMatching && "font-medium text-primary/80")}>{childGroup.group_name}</span>
|
||||
<span className="truncate flex-1">{childGroup.group_name}</span>
|
||||
<Badge variant="secondary" className="text-[10px] h-4">
|
||||
{childScreens.length}
|
||||
</Badge>
|
||||
|
|
@ -1174,9 +782,8 @@ export function ScreenGroupTreeView({
|
|||
<div className="ml-6 mt-1 space-y-0.5">
|
||||
{grandChildGroups.map((grandChild) => {
|
||||
const grandChildId = String(grandChild.id);
|
||||
const isGrandExpanded = expandedGroups.has(grandChildId) || shouldAutoExpandForSearch.has(grandChild.id); // 검색 시 상위 그룹만 자동 확장
|
||||
const isGrandExpanded = expandedGroups.has(grandChildId);
|
||||
const grandScreens = getScreensInGroup(grandChild.id);
|
||||
const isGrandMatching = isGroupMatchingSearch(grandChild.group_name);
|
||||
|
||||
return (
|
||||
<div key={grandChildId}>
|
||||
|
|
@ -1184,8 +791,7 @@ export function ScreenGroupTreeView({
|
|||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
|
||||
"text-xs group/item",
|
||||
isGrandMatching && "bg-primary/5 dark:bg-primary/10"
|
||||
"text-xs group/item"
|
||||
)}
|
||||
onClick={() => toggleGroup(grandChildId)}
|
||||
onContextMenu={(e) => handleGroupContextMenu(e, grandChild)}
|
||||
|
|
@ -1200,7 +806,7 @@ export function ScreenGroupTreeView({
|
|||
) : (
|
||||
<Folder className="h-3 w-3 shrink-0 text-green-500" />
|
||||
)}
|
||||
<span className={cn("truncate flex-1", isGrandMatching && "font-medium text-primary/80")}>{grandChild.group_name}</span>
|
||||
<span className="truncate flex-1">{grandChild.group_name}</span>
|
||||
<Badge variant="outline" className="text-[10px] h-4">
|
||||
{grandScreens.length}
|
||||
</Badge>
|
||||
|
|
@ -1853,222 +1459,6 @@ export function ScreenGroupTreeView({
|
|||
</>
|
||||
)}
|
||||
|
||||
{/* 메뉴-화면그룹 동기화 다이얼로그 */}
|
||||
<Dialog open={isSyncDialogOpen} onOpenChange={setIsSyncDialogOpen}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[500px] overflow-hidden">
|
||||
{/* 동기화 진행 중 오버레이 (삭제와 동일한 스타일) */}
|
||||
{isSyncing && (
|
||||
<div className="absolute inset-0 z-50 flex flex-col items-center justify-center rounded-lg bg-background/90 backdrop-blur-sm">
|
||||
<Loader2 className="h-10 w-10 animate-spin text-primary" />
|
||||
<p className="mt-4 text-sm font-medium">{syncProgress?.message || "동기화 중..."}</p>
|
||||
{syncProgress?.detail && (
|
||||
<p className="mt-1 text-xs text-muted-foreground">{syncProgress.detail}</p>
|
||||
)}
|
||||
<div className="mt-3 h-2 w-48 overflow-hidden rounded-full bg-secondary">
|
||||
<div
|
||||
className="h-full bg-primary animate-pulse"
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base sm:text-lg">메뉴-화면 동기화</DialogTitle>
|
||||
<DialogDescription className="text-xs sm:text-sm">
|
||||
화면관리의 폴더 구조와 메뉴관리를 연동합니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{/* 최고 관리자: 회사 선택 */}
|
||||
{isSuperAdmin && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs sm:text-sm">
|
||||
<Building2 className="inline-block h-4 w-4 mr-1" />
|
||||
동기화할 회사 선택
|
||||
</Label>
|
||||
<Popover open={isSyncCompanySelectOpen} onOpenChange={setIsSyncCompanySelectOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={isSyncCompanySelectOpen}
|
||||
className="h-10 w-full justify-between text-sm"
|
||||
>
|
||||
{selectedCompanyCode
|
||||
? companies.find((c) => c.company_code === selectedCompanyCode)?.company_name || selectedCompanyCode
|
||||
: "회사를 선택하세요"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0 w-full" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="회사 검색..." className="text-sm" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="text-sm py-2 text-center">회사를 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{companies.map((company) => (
|
||||
<CommandItem
|
||||
key={company.company_code}
|
||||
value={company.company_code}
|
||||
onSelect={() => handleCompanySelect(company.company_code)}
|
||||
className="text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
selectedCompanyCode === company.company_code ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{company.company_name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 현재 상태 표시 */}
|
||||
{syncStatus ? (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="rounded-md border p-3">
|
||||
<div className="text-xs text-muted-foreground mb-1">화면관리</div>
|
||||
<div className="text-lg font-semibold">{syncStatus.screenGroups.total}개</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
연결됨: {syncStatus.screenGroups.linked} / 미연결: {syncStatus.screenGroups.unlinked}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-md border p-3">
|
||||
<div className="text-xs text-muted-foreground mb-1">사용자 메뉴</div>
|
||||
<div className="text-lg font-semibold">{syncStatus.menuItems.total}개</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
연결됨: {syncStatus.menuItems.linked} / 미연결: {syncStatus.menuItems.unlinked}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{syncStatus.potentialMatches.length > 0 && (
|
||||
<div className="rounded-md border p-3 bg-muted/50">
|
||||
<div className="text-xs font-medium mb-2">자동 매칭 가능 ({syncStatus.potentialMatches.length}개)</div>
|
||||
<div className="text-xs text-muted-foreground space-y-1 max-h-24 overflow-auto">
|
||||
{syncStatus.potentialMatches.slice(0, 5).map((match, i) => (
|
||||
<div key={i}>
|
||||
{match.menuName} = {match.groupName}
|
||||
</div>
|
||||
))}
|
||||
{syncStatus.potentialMatches.length > 5 && (
|
||||
<div>...외 {syncStatus.potentialMatches.length - 5}개</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 동기화 버튼 */}
|
||||
<div className="space-y-2">
|
||||
<Button
|
||||
onClick={() => handleSync("screen-to-menu")}
|
||||
disabled={isSyncing}
|
||||
variant="outline"
|
||||
className="w-full justify-start gap-2 border-blue-200 bg-blue-50/50 hover:bg-blue-100/70 hover:border-blue-300"
|
||||
>
|
||||
{isSyncing && syncDirection === "screen-to-menu" ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin text-blue-600" />
|
||||
) : (
|
||||
<FolderTree className="h-4 w-4 text-blue-600" />
|
||||
)}
|
||||
<span className="flex-1 text-left text-blue-700">화면관리 → 메뉴 동기화</span>
|
||||
<span className="text-xs text-blue-500/70">
|
||||
폴더 구조를 메뉴에 반영
|
||||
</span>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleSync("menu-to-screen")}
|
||||
disabled={isSyncing}
|
||||
variant="outline"
|
||||
className="w-full justify-start gap-2 border-emerald-200 bg-emerald-50/50 hover:bg-emerald-100/70 hover:border-emerald-300"
|
||||
>
|
||||
{isSyncing && syncDirection === "menu-to-screen" ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin text-emerald-600" />
|
||||
) : (
|
||||
<FolderInput className="h-4 w-4 text-emerald-600" />
|
||||
)}
|
||||
<span className="flex-1 text-left text-emerald-700">메뉴 → 화면관리 동기화</span>
|
||||
<span className="text-xs text-emerald-500/70">
|
||||
메뉴 구조를 폴더에 반영
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 전체 동기화 (최고 관리자만) */}
|
||||
{isSuperAdmin && (
|
||||
<div className="border-t pt-3 mt-3">
|
||||
<Button
|
||||
onClick={handleSyncAll}
|
||||
disabled={isSyncing}
|
||||
variant="default"
|
||||
className="w-full justify-start gap-2"
|
||||
>
|
||||
{isSyncing && syncDirection === "all" ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
)}
|
||||
<span className="flex-1 text-left">전체 회사 동기화</span>
|
||||
<span className="text-xs text-primary-foreground/70">
|
||||
모든 회사 양방향 동기화
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : isSuperAdmin && !selectedCompanyCode ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<Building2 className="h-10 w-10 text-muted-foreground mb-3" />
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
개별 회사 동기화를 하려면 회사를 선택해주세요.
|
||||
</p>
|
||||
|
||||
{/* 전체 회사 동기화 버튼 (회사 선택 없이도 표시) */}
|
||||
<div className="w-full border-t pt-4">
|
||||
<Button
|
||||
onClick={handleSyncAll}
|
||||
disabled={isSyncing}
|
||||
variant="default"
|
||||
className="w-full justify-start gap-2"
|
||||
>
|
||||
{isSyncing && syncDirection === "all" ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
)}
|
||||
<span className="flex-1 text-left">전체 회사 동기화</span>
|
||||
<span className="text-xs text-primary-foreground/70">
|
||||
모든 회사 양방향 동기화
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setIsSyncDialogOpen(false)}
|
||||
disabled={isSyncing}
|
||||
>
|
||||
닫기
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -416,10 +416,6 @@ export function ScreenSettingModal({
|
|||
<Database className="h-3 w-3" />
|
||||
개요
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="table-setting" className="gap-1 text-xs px-2" disabled={!mainTable}>
|
||||
<Settings2 className="h-3 w-3" />
|
||||
테이블 설정
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="control-management" className="gap-1 text-xs px-2">
|
||||
<Zap className="h-3 w-3" />
|
||||
제어 관리
|
||||
|
|
@ -470,22 +466,7 @@ export function ScreenSettingModal({
|
|||
/>
|
||||
</TabsContent>
|
||||
|
||||
{/* 탭 2: 테이블 설정 */}
|
||||
<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: 제어 관리 */}
|
||||
{/* 탭 2: 제어 관리 */}
|
||||
<TabsContent value="control-management" className="mt-0 min-h-0 flex-1 overflow-auto p-3">
|
||||
<ControlManagementTab
|
||||
screenId={currentScreenId}
|
||||
|
|
@ -2217,6 +2198,17 @@ function OverviewTab({
|
|||
<Database className="h-4 w-4 text-blue-500" />
|
||||
메인 테이블
|
||||
</h3>
|
||||
{mainTable && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-7 gap-1 text-xs"
|
||||
onClick={() => onOpenTableSetting?.(mainTable, mainTableLabel)}
|
||||
>
|
||||
<Settings2 className="h-3 w-3" />
|
||||
테이블 설정
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{mainTable ? (
|
||||
<TableColumnAccordion
|
||||
|
|
@ -3057,7 +3049,6 @@ interface ButtonControlInfo {
|
|||
// 버튼 스타일
|
||||
backgroundColor?: string;
|
||||
textColor?: string;
|
||||
borderRadius?: string;
|
||||
// 모달/네비게이션 관련
|
||||
modalScreenId?: number;
|
||||
navigateScreenId?: number;
|
||||
|
|
@ -3224,7 +3215,6 @@ function ControlManagementTab({
|
|||
// 버튼 스타일 (webTypeConfig 우선)
|
||||
backgroundColor: webTypeConfig.backgroundColor || config.backgroundColor || style.backgroundColor,
|
||||
textColor: webTypeConfig.textColor || config.textColor || style.color || style.labelColor,
|
||||
borderRadius: webTypeConfig.borderRadius || config.borderRadius || style.borderRadius,
|
||||
// 모달/네비게이션 관련 (화면 디자이너는 targetScreenId 사용)
|
||||
modalScreenId: action.targetScreenId || action.modalScreenId,
|
||||
navigateScreenId: action.navigateScreenId || action.targetScreenId,
|
||||
|
|
@ -3537,11 +3527,6 @@ function ControlManagementTab({
|
|||
comp.style.color = values.textColor;
|
||||
comp.style.labelColor = values.textColor;
|
||||
}
|
||||
if (values.borderRadius !== undefined) {
|
||||
comp.webTypeConfig.borderRadius = values.borderRadius;
|
||||
comp.componentConfig.borderRadius = values.borderRadius;
|
||||
comp.style.borderRadius = values.borderRadius;
|
||||
}
|
||||
|
||||
// 액션 타입 업데이트
|
||||
if (values.actionType) {
|
||||
|
|
@ -3750,7 +3735,6 @@ function ControlManagementTab({
|
|||
const currentLabel = editedValues[btn.id]?.label ?? btn.label;
|
||||
const currentBgColor = editedValues[btn.id]?.backgroundColor ?? btn.backgroundColor ?? "#3b82f6";
|
||||
const currentTextColor = editedValues[btn.id]?.textColor ?? btn.textColor ?? "#ffffff";
|
||||
const currentBorderRadius = editedValues[btn.id]?.borderRadius ?? btn.borderRadius ?? "4px";
|
||||
|
||||
return (
|
||||
<div key={btn.id} className="py-3 px-1">
|
||||
|
|
@ -3758,11 +3742,10 @@ function ControlManagementTab({
|
|||
<div className="flex items-center gap-3 mb-3">
|
||||
{/* 버튼 프리뷰 */}
|
||||
<div
|
||||
className="flex items-center justify-center px-3 py-1.5 text-xs font-medium min-w-[60px] shrink-0"
|
||||
className="flex items-center justify-center px-3 py-1.5 rounded text-xs font-medium min-w-[60px] shrink-0"
|
||||
style={{
|
||||
backgroundColor: currentBgColor,
|
||||
color: currentTextColor,
|
||||
borderRadius: currentBorderRadius,
|
||||
}}
|
||||
>
|
||||
{currentLabel || "버튼"}
|
||||
|
|
@ -3887,34 +3870,6 @@ function ControlManagementTab({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* 버튼 모서리 (borderRadius) */}
|
||||
<div className="grid grid-cols-[80px_1fr] items-center gap-2">
|
||||
<Label className="text-xs text-muted-foreground">모서리</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Select
|
||||
value={editedValues[btn.id]?.borderRadius ?? btn.borderRadius ?? "4px"}
|
||||
onValueChange={(val) => setEditedValues(prev => ({
|
||||
...prev,
|
||||
[btn.id]: { ...prev[btn.id], borderRadius: val }
|
||||
}))}
|
||||
>
|
||||
<SelectTrigger className="h-7 w-[100px] text-xs">
|
||||
<SelectValue placeholder="선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="0px" className="text-xs">없음 (0px)</SelectItem>
|
||||
<SelectItem value="2px" className="text-xs">약간 (2px)</SelectItem>
|
||||
<SelectItem value="4px" className="text-xs">기본 (4px)</SelectItem>
|
||||
<SelectItem value="6px" className="text-xs">둥글게 (6px)</SelectItem>
|
||||
<SelectItem value="8px" className="text-xs">더 둥글게 (8px)</SelectItem>
|
||||
<SelectItem value="12px" className="text-xs">많이 (12px)</SelectItem>
|
||||
<SelectItem value="9999px" className="text-xs">원형</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<span className="text-[10px] text-muted-foreground">버튼 모서리 둥글기</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 확인 메시지 설정 (save/delete 액션에서만 표시) */}
|
||||
{((editedValues[btn.id]?.actionType || btn.actionType) === "save" ||
|
||||
(editedValues[btn.id]?.actionType || btn.actionType) === "delete") && (
|
||||
|
|
|
|||
|
|
@ -129,7 +129,6 @@ interface TableSettingModalProps {
|
|||
columns?: ColumnInfo[];
|
||||
filterColumns?: string[];
|
||||
onSaveSuccess?: () => void;
|
||||
isEmbedded?: boolean; // 탭 안에 임베드 모드로 표시
|
||||
}
|
||||
|
||||
// 검색 가능한 Select 컴포넌트
|
||||
|
|
@ -257,7 +256,6 @@ export function TableSettingModal({
|
|||
columns = [],
|
||||
filterColumns = [],
|
||||
onSaveSuccess,
|
||||
isEmbedded = false,
|
||||
}: TableSettingModalProps) {
|
||||
const [activeTab, setActiveTab] = useState("columns");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
|
@ -306,19 +304,9 @@ export function TableSettingModal({
|
|||
// 초기 편집 상태 설정
|
||||
const initialEdits: Record<string, Partial<ColumnTypeInfo>> = {};
|
||||
columnsData.forEach((col) => {
|
||||
// referenceTable이 설정되어 있으면 inputType은 entity여야 함
|
||||
let effectiveInputType = col.inputType || "direct";
|
||||
if (col.referenceTable && effectiveInputType !== "entity") {
|
||||
effectiveInputType = "entity";
|
||||
}
|
||||
// codeCategory/codeValue가 설정되어 있으면 inputType은 code여야 함
|
||||
if (col.codeCategory && effectiveInputType !== "code") {
|
||||
effectiveInputType = "code";
|
||||
}
|
||||
|
||||
initialEdits[col.columnName] = {
|
||||
displayName: col.displayName,
|
||||
inputType: effectiveInputType,
|
||||
inputType: col.inputType || "direct",
|
||||
referenceTable: col.referenceTable,
|
||||
referenceColumn: col.referenceColumn,
|
||||
displayColumn: col.displayColumn,
|
||||
|
|
@ -355,10 +343,10 @@ export function TableSettingModal({
|
|||
try {
|
||||
// 모든 화면 조회
|
||||
const screensResponse = await screenApi.getScreens({ size: 1000 });
|
||||
if (screensResponse.data) {
|
||||
if (screensResponse.items) {
|
||||
const usingScreens: ScreenUsingTable[] = [];
|
||||
|
||||
screensResponse.data.forEach((screen: any) => {
|
||||
screensResponse.items.forEach((screen: any) => {
|
||||
// 메인 테이블로 사용하는 경우
|
||||
if (screen.tableName === tableName) {
|
||||
usingScreens.push({
|
||||
|
|
@ -430,35 +418,6 @@ export function TableSettingModal({
|
|||
},
|
||||
}));
|
||||
|
||||
// 입력 타입 변경 시 관련 필드 초기화
|
||||
if (field === "inputType") {
|
||||
// 엔티티가 아닌 다른 타입으로 변경하면 참조 설정 초기화
|
||||
if (value !== "entity") {
|
||||
setEditedColumns((prev) => ({
|
||||
...prev,
|
||||
[columnName]: {
|
||||
...prev[columnName],
|
||||
inputType: value,
|
||||
referenceTable: "",
|
||||
referenceColumn: "",
|
||||
displayColumn: "",
|
||||
},
|
||||
}));
|
||||
}
|
||||
// 코드가 아닌 다른 타입으로 변경하면 코드 설정 초기화
|
||||
if (value !== "code") {
|
||||
setEditedColumns((prev) => ({
|
||||
...prev,
|
||||
[columnName]: {
|
||||
...prev[columnName],
|
||||
inputType: value,
|
||||
codeCategory: "",
|
||||
codeValue: "",
|
||||
},
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
// 참조 테이블 변경 시 참조 컬럼 초기화
|
||||
if (field === "referenceTable") {
|
||||
setEditedColumns((prev) => ({
|
||||
|
|
@ -493,18 +452,8 @@ export function TableSettingModal({
|
|||
|
||||
// detailSettings 처리 (Entity 타입인 경우)
|
||||
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를 파싱하거나 새로 생성
|
||||
let existingSettings: Record<string, unknown> = {};
|
||||
if (typeof mergedColumn.detailSettings === "string" && mergedColumn.detailSettings.trim().startsWith("{")) {
|
||||
|
|
@ -530,7 +479,7 @@ export function TableSettingModal({
|
|||
}
|
||||
|
||||
// Code 타입인 경우 hierarchyRole을 detailSettings에 포함
|
||||
if (currentInputType === "code" && (mergedColumn as any).hierarchyRole) {
|
||||
if (mergedColumn.inputType === "code" && (mergedColumn as any).hierarchyRole) {
|
||||
let existingSettings: Record<string, unknown> = {};
|
||||
if (typeof finalDetailSettings === "string" && finalDetailSettings.trim().startsWith("{")) {
|
||||
try {
|
||||
|
|
@ -553,7 +502,7 @@ export function TableSettingModal({
|
|||
const columnSetting: ColumnSettings = {
|
||||
columnName: columnName,
|
||||
columnLabel: mergedColumn.displayName || originalColumn.displayName || "",
|
||||
inputType: currentInputType || "text", // referenceTable/codeCategory가 설정된 경우 자동 보정된 값 사용
|
||||
webType: mergedColumn.inputType || originalColumn.inputType || "text",
|
||||
detailSettings: finalDetailSettings,
|
||||
codeCategory: mergedColumn.codeCategory || originalColumn.codeCategory || "",
|
||||
codeValue: mergedColumn.codeValue || originalColumn.codeValue || "",
|
||||
|
|
@ -644,158 +593,6 @@ export function TableSettingModal({
|
|||
];
|
||||
};
|
||||
|
||||
// 임베드 모드
|
||||
if (isEmbedded) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex h-full flex-col">
|
||||
{/* 헤더 */}
|
||||
<div className="flex flex-shrink-0 items-center justify-between border-b pb-2 px-3 pt-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Table2 className="h-4 w-4 text-green-500" />
|
||||
<span className="text-sm font-medium">{tableLabel || tableName}</span>
|
||||
{tableName !== tableLabel && tableName !== (tableLabel || tableName) && (
|
||||
<span className="text-xs text-muted-foreground">({tableName})</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowTableManagementModal(true)}
|
||||
className="h-7 gap-1 text-xs"
|
||||
>
|
||||
<Settings className="h-3 w-3" />
|
||||
테이블 타입 관리
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleRefresh}
|
||||
className="h-7 w-7 p-0"
|
||||
disabled={loading}
|
||||
>
|
||||
<RefreshCw className={cn("h-3 w-3", loading && "animate-spin")} />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleSaveAll}
|
||||
className="h-7 gap-1 text-xs"
|
||||
disabled={saving || loading}
|
||||
>
|
||||
{saving ? (
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
) : (
|
||||
<Save className="h-3 w-3" />
|
||||
)}
|
||||
저장
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex min-h-0 flex-1 gap-3 p-3">
|
||||
{/* 좌측: 탭 (40%) */}
|
||||
<div className="flex w-[40%] min-h-0 flex-col">
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={setActiveTab}
|
||||
className="flex min-h-0 flex-1 flex-col"
|
||||
>
|
||||
<TabsList className="h-8 flex-shrink-0">
|
||||
<TabsTrigger value="columns" className="gap-1 text-xs">
|
||||
<Columns3 className="h-3 w-3" />
|
||||
컬럼 설정
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="screens" className="gap-1 text-xs">
|
||||
<Monitor className="h-3 w-3" />
|
||||
화면 연동
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="references" className="gap-1 text-xs">
|
||||
<Eye className="h-3 w-3" />
|
||||
참조 관계
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="columns" className="mt-2 min-h-0 flex-1 overflow-hidden">
|
||||
<ColumnListTab
|
||||
columns={tableColumns.map((col) => ({
|
||||
...col,
|
||||
isPK: col.columnName === "id" || col.columnName.endsWith("_id"),
|
||||
isFK: (col.inputType as string) === "entity",
|
||||
}))}
|
||||
editedColumns={editedColumns}
|
||||
selectedColumn={selectedColumn}
|
||||
onSelectColumn={setSelectedColumn}
|
||||
loading={loading}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="screens" className="mt-2 min-h-0 flex-1 overflow-hidden">
|
||||
<ScreensTab screensUsingTable={screensUsingTable} loading={loading} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="references" className="mt-2 min-h-0 flex-1 overflow-hidden">
|
||||
<ReferenceTab
|
||||
tableName={tableName}
|
||||
tableLabel={tableLabel}
|
||||
referencedBy={referencedBy}
|
||||
joinColumnRefs={joinColumnRefs}
|
||||
loading={loading}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
{/* 우측: 상세 설정 (60%) */}
|
||||
<div className="flex w-[60%] min-h-0 flex-col rounded-lg border bg-muted/30 p-3">
|
||||
{selectedColumn && mergedColumns.find((c) => c.columnName === selectedColumn) ? (
|
||||
<ColumnDetailPanel
|
||||
columnInfo={mergedColumns.find((c) => c.columnName === selectedColumn)!}
|
||||
editedColumn={editedColumns[selectedColumn] || {}}
|
||||
tableOptions={tableOptions}
|
||||
inputTypeOptions={inputTypeOptions}
|
||||
getRefColumnOptions={getRefColumnOptions}
|
||||
loadingRefColumns={loadingRefColumns}
|
||||
onColumnChange={(field, value) => handleColumnChange(selectedColumn, field, value)}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
|
||||
<div className="text-center">
|
||||
<Columns3 className="mx-auto h-12 w-12 text-muted-foreground/30" />
|
||||
<p className="mt-2">왼쪽에서 컬럼을 선택하면</p>
|
||||
<p>상세 설정을 할 수 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 테이블 타입 관리 모달 */}
|
||||
<Dialog open={showTableManagementModal} onOpenChange={setShowTableManagementModal}>
|
||||
<DialogContent className="flex h-[90vh] max-h-[1000px] w-[95vw] max-w-[1400px] flex-col p-0">
|
||||
<div className="flex items-center justify-between border-b p-4">
|
||||
<h2 className="text-lg font-semibold">테이블 타입 관리</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setShowTableManagementModal(false);
|
||||
loadTableData();
|
||||
}}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<TableManagementPage />
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// 기존 모달 모드
|
||||
return (
|
||||
<>
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
|
|
@ -1046,7 +843,6 @@ function ColumnListTab({
|
|||
<div className="space-y-1 px-3 pb-3">
|
||||
{filteredColumns.map((col) => {
|
||||
const edited = editedColumns[col.columnName] || {};
|
||||
// editedColumns에서 inputType을 가져옴 (초기화 시 이미 보정됨)
|
||||
const inputType = (edited.inputType || col.inputType || "text") as string;
|
||||
const isSelected = selectedColumn === col.columnName;
|
||||
|
||||
|
|
@ -1077,17 +873,23 @@ function ColumnListTab({
|
|||
PK
|
||||
</Badge>
|
||||
)}
|
||||
{/* 엔티티 타입이거나 referenceTable이 설정되어 있으면 조인 배지 표시 (FK와 동일 의미) */}
|
||||
{(inputType === "entity" || edited.referenceTable || col.referenceTable) && (
|
||||
<Badge variant="outline" className="bg-blue-100 text-blue-700 text-[10px] px-1.5">
|
||||
{col.isFK && (
|
||||
<Badge variant="outline" className="bg-green-100 text-green-700 text-[10px] px-1.5">
|
||||
<Link2 className="mr-0.5 h-2.5 w-2.5" />
|
||||
FK
|
||||
</Badge>
|
||||
)}
|
||||
{(edited.referenceTable || col.referenceTable) && (
|
||||
<Badge variant="outline" className="bg-blue-100 text-blue-700 text-[10px] px-1.5">
|
||||
조인
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
<div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span className="font-mono">{col.columnName}</span>
|
||||
<span>•</span>
|
||||
<span>{col.dataType}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1123,11 +925,10 @@ function ColumnDetailPanel({
|
|||
onColumnChange,
|
||||
}: ColumnDetailPanelProps) {
|
||||
const currentLabel = editedColumn.displayName ?? columnInfo.displayName ?? "";
|
||||
const currentInputType = (editedColumn.inputType ?? columnInfo.inputType ?? "text") as string;
|
||||
const currentRefTable = editedColumn.referenceTable ?? columnInfo.referenceTable ?? "";
|
||||
const currentRefColumn = editedColumn.referenceColumn ?? columnInfo.referenceColumn ?? "";
|
||||
const currentDisplayColumn = editedColumn.displayColumn ?? columnInfo.displayColumn ?? "";
|
||||
// editedColumn에서 inputType을 가져옴 (초기화 시 이미 보정됨)
|
||||
const currentInputType = (editedColumn.inputType ?? columnInfo.inputType ?? "text") as string;
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
|
|
@ -1147,10 +948,9 @@ function ColumnDetailPanel({
|
|||
Primary Key
|
||||
</Badge>
|
||||
)}
|
||||
{/* 엔티티 타입이거나 referenceTable이 있으면 조인 배지 표시 */}
|
||||
{(currentInputType === "entity" || currentRefTable) && (
|
||||
<Badge variant="outline" className="bg-blue-100 text-blue-700 text-[10px]">
|
||||
조인
|
||||
{columnInfo.isFK && (
|
||||
<Badge variant="outline" className="bg-green-100 text-green-700 text-[10px]">
|
||||
Foreign Key
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -462,4 +462,3 @@ export default function DataFlowPanel({ groupId, screenId, screens = [] }: DataF
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -414,4 +414,3 @@ export default function FieldJoinPanel({ screenId, componentId, layoutId }: Fiel
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -77,6 +77,12 @@ export const entityJoinApi = {
|
|||
filterColumn?: string;
|
||||
filterValue?: any;
|
||||
}; // 🆕 제외 필터 (다른 테이블에 이미 존재하는 데이터 제외)
|
||||
deduplication?: {
|
||||
enabled: boolean;
|
||||
groupByColumn: string;
|
||||
keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
|
||||
sortColumn?: string;
|
||||
}; // 🆕 중복 제거 설정
|
||||
companyCodeOverride?: string; // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 사용 가능)
|
||||
} = {},
|
||||
): Promise<EntityJoinResponse> => {
|
||||
|
|
@ -110,6 +116,7 @@ export const entityJoinApi = {
|
|||
autoFilter: JSON.stringify(autoFilter), // 🔒 멀티테넌시 필터링 (오버라이드 포함)
|
||||
dataFilter: params.dataFilter ? JSON.stringify(params.dataFilter) : undefined, // 🆕 데이터 필터
|
||||
excludeFilter: params.excludeFilter ? JSON.stringify(params.excludeFilter) : undefined, // 🆕 제외 필터
|
||||
deduplication: params.deduplication ? JSON.stringify(params.deduplication) : undefined, // 🆕 중복 제거 설정
|
||||
},
|
||||
});
|
||||
return response.data.data;
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export interface ColumnTypeInfo {
|
|||
dataType: string;
|
||||
dbType: string;
|
||||
webType: string;
|
||||
inputType?: string; // text, number, entity, code, select, date, checkbox 등
|
||||
inputType?: "direct" | "auto";
|
||||
detailSettings: string;
|
||||
description?: string;
|
||||
isNullable: string;
|
||||
|
|
@ -39,11 +39,11 @@ export interface TableInfo {
|
|||
columnCount: number;
|
||||
}
|
||||
|
||||
// 컬럼 설정 타입 (백엔드 API와 동일한 필드명 사용)
|
||||
// 컬럼 설정 타입
|
||||
export interface ColumnSettings {
|
||||
columnName?: string;
|
||||
columnLabel: string;
|
||||
inputType: string; // 백엔드에서 inputType으로 받음
|
||||
webType: string;
|
||||
detailSettings: string;
|
||||
codeCategory: string;
|
||||
codeValue: string;
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ import { useScreenContextOptional } from "@/contexts/ScreenContext";
|
|||
import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext";
|
||||
import { applyMappingRules } from "@/lib/utils/dataMapping";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
|
||||
|
||||
export interface ButtonPrimaryComponentProps extends ComponentRendererProps {
|
||||
config?: ButtonPrimaryConfig;
|
||||
|
|
@ -107,6 +108,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
|
||||
const screenContext = useScreenContextOptional(); // 화면 컨텍스트
|
||||
const splitPanelContext = useSplitPanelContext(); // 분할 패널 컨텍스트
|
||||
const { getTranslatedText } = useScreenMultiLang(); // 다국어 컨텍스트
|
||||
// 🆕 ScreenContext에서 splitPanelPosition 가져오기 (중첩 화면에서도 작동)
|
||||
const splitPanelPosition = screenContext?.splitPanelPosition;
|
||||
|
||||
|
|
@ -299,6 +301,20 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
// 🆕 modalDataStore에서 선택된 데이터 확인 (분할 패널 등에서 저장됨)
|
||||
const [modalStoreData, setModalStoreData] = useState<Record<string, any[]>>({});
|
||||
|
||||
// 🆕 splitPanelContext?.selectedLeftData를 로컬 상태로 추적 (리렌더링 보장)
|
||||
const [trackedSelectedLeftData, setTrackedSelectedLeftData] = useState<Record<string, any> | null>(null);
|
||||
|
||||
// splitPanelContext?.selectedLeftData 변경 감지 및 로컬 상태 동기화
|
||||
useEffect(() => {
|
||||
const newData = splitPanelContext?.selectedLeftData ?? null;
|
||||
setTrackedSelectedLeftData(newData);
|
||||
// console.log("🔄 [ButtonPrimary] selectedLeftData 변경 감지:", {
|
||||
// label: component.label,
|
||||
// hasData: !!newData,
|
||||
// dataKeys: newData ? Object.keys(newData) : [],
|
||||
// });
|
||||
}, [splitPanelContext?.selectedLeftData, component.label]);
|
||||
|
||||
// modalDataStore 상태 구독 (실시간 업데이트)
|
||||
useEffect(() => {
|
||||
const actionConfig = component.componentConfig?.action;
|
||||
|
|
@ -357,8 +373,8 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
|
||||
// 2. 분할 패널 좌측 선택 데이터 확인
|
||||
if (rowSelectionSource === "auto" || rowSelectionSource === "splitPanelLeft") {
|
||||
// SplitPanelContext에서 확인
|
||||
if (splitPanelContext?.selectedLeftData && Object.keys(splitPanelContext.selectedLeftData).length > 0) {
|
||||
// SplitPanelContext에서 확인 (trackedSelectedLeftData 사용으로 리렌더링 보장)
|
||||
if (trackedSelectedLeftData && Object.keys(trackedSelectedLeftData).length > 0) {
|
||||
if (!hasSelection) {
|
||||
hasSelection = true;
|
||||
selectionCount = 1;
|
||||
|
|
@ -397,7 +413,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
selectionCount,
|
||||
selectionSource,
|
||||
hasSplitPanelContext: !!splitPanelContext,
|
||||
selectedLeftData: splitPanelContext?.selectedLeftData,
|
||||
trackedSelectedLeftData: trackedSelectedLeftData,
|
||||
selectedRowsData: selectedRowsData?.length,
|
||||
selectedRows: selectedRows?.length,
|
||||
flowSelectedData: flowSelectedData?.length,
|
||||
|
|
@ -429,7 +445,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
component.label,
|
||||
selectedRows,
|
||||
selectedRowsData,
|
||||
splitPanelContext?.selectedLeftData,
|
||||
trackedSelectedLeftData,
|
||||
flowSelectedData,
|
||||
splitPanelContext,
|
||||
modalStoreData,
|
||||
|
|
@ -721,61 +737,99 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
return;
|
||||
}
|
||||
|
||||
if (!screenContext) {
|
||||
toast.error("화면 컨텍스트를 찾을 수 없습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 1. 소스 컴포넌트에서 데이터 가져오기
|
||||
let sourceProvider = screenContext.getDataProvider(dataTransferConfig.sourceComponentId);
|
||||
let sourceData: any[] = [];
|
||||
|
||||
// 🆕 소스 컴포넌트를 찾을 수 없으면, 현재 화면에서 테이블 리스트 자동 탐색
|
||||
// (조건부 컨테이너의 다른 섹션으로 전환했을 때 이전 컴포넌트 ID가 남아있는 경우 대응)
|
||||
if (!sourceProvider) {
|
||||
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})`,
|
||||
);
|
||||
}
|
||||
}
|
||||
// 1. ScreenContext에서 DataProvider를 통해 데이터 가져오기 시도
|
||||
if (screenContext) {
|
||||
let sourceProvider = screenContext.getDataProvider(dataTransferConfig.sourceComponentId);
|
||||
|
||||
// 소스 컴포넌트를 찾을 수 없으면, 현재 화면에서 테이블 리스트 자동 탐색
|
||||
if (!sourceProvider) {
|
||||
toast.error("데이터를 제공할 수 있는 컴포넌트를 찾을 수 없습니다.");
|
||||
return;
|
||||
console.log(`⚠️ [ButtonPrimary] 지정된 소스 컴포넌트를 찾을 수 없음: ${dataTransferConfig.sourceComponentId}`);
|
||||
console.log(`🔍 [ButtonPrimary] 현재 화면에서 DataProvider 자동 탐색...`);
|
||||
|
||||
const allProviders = screenContext.getAllDataProviders();
|
||||
console.log(`📋 [ButtonPrimary] 등록된 DataProvider 목록:`, Array.from(allProviders.keys()));
|
||||
|
||||
// 테이블 리스트 우선 탐색
|
||||
for (const [id, provider] of allProviders) {
|
||||
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();
|
||||
|
||||
// 🆕 배열이 아닌 경우 배열로 변환
|
||||
const sourceData = Array.isArray(rawSourceData) ? rawSourceData : rawSourceData ? [rawSourceData] : [];
|
||||
|
||||
console.log("📦 소스 데이터:", { rawSourceData, sourceData, isArray: Array.isArray(rawSourceData) });
|
||||
|
||||
// 3. 여전히 데이터가 없으면 에러
|
||||
if (!sourceData || sourceData.length === 0) {
|
||||
toast.warning("선택된 데이터가 없습니다.");
|
||||
console.error("❌ [ButtonPrimary] 선택된 데이터를 찾을 수 없습니다.", {
|
||||
hasScreenContext: !!screenContext,
|
||||
sourceComponentId: dataTransferConfig.sourceComponentId,
|
||||
sourceTableName: dataTransferConfig.sourceTableName || tableName,
|
||||
});
|
||||
toast.warning("선택된 데이터가 없습니다. 항목을 먼저 선택해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("📦 [ButtonPrimary] 최종 소스 데이터:", { sourceData, count: sourceData.length });
|
||||
|
||||
// 1.5. 추가 데이터 소스 처리 (예: 조건부 컨테이너의 카테고리 값)
|
||||
let additionalData: Record<string, any> = {};
|
||||
|
||||
|
|
@ -1306,7 +1360,10 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
...userStyle,
|
||||
};
|
||||
|
||||
const buttonContent = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";
|
||||
// 다국어 적용: componentConfig.langKey가 있으면 번역 텍스트 사용
|
||||
const langKey = (component as any).componentConfig?.langKey;
|
||||
const originalButtonText = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";
|
||||
const buttonContent = getTranslatedText(langKey, originalButtonText);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -180,11 +180,8 @@ export function ModalRepeaterTableComponent({
|
|||
filterCondition: propFilterCondition,
|
||||
companyCode: propCompanyCode,
|
||||
|
||||
// 🆕 그룹 데이터 (EditModal에서 전달, 같은 그룹의 여러 품목)
|
||||
groupedData,
|
||||
|
||||
...props
|
||||
}: ModalRepeaterTableComponentProps & { groupedData?: Record<string, any>[] }) {
|
||||
}: ModalRepeaterTableComponentProps) {
|
||||
// ✅ config 또는 component.config 또는 개별 prop 우선순위로 병합
|
||||
const componentConfig = {
|
||||
...config,
|
||||
|
|
@ -211,16 +208,9 @@ export function ModalRepeaterTableComponent({
|
|||
// 모달 필터 설정
|
||||
const modalFilters = componentConfig?.modalFilters || [];
|
||||
|
||||
// ✅ value는 groupedData 우선, 없으면 formData[columnName], 없으면 prop 사용
|
||||
// ✅ value는 formData[columnName] 우선, 없으면 prop 사용
|
||||
const columnName = component?.columnName;
|
||||
|
||||
// 🆕 groupedData가 전달되면 (EditModal에서 그룹 조회 결과) 우선 사용
|
||||
const externalValue = (() => {
|
||||
if (groupedData && groupedData.length > 0) {
|
||||
return groupedData;
|
||||
}
|
||||
return (columnName && formData?.[columnName]) || componentConfig?.value || propValue || [];
|
||||
})();
|
||||
const externalValue = (columnName && formData?.[columnName]) || componentConfig?.value || propValue || [];
|
||||
|
||||
// 빈 객체 판단 함수 (수정 모달의 실제 데이터는 유지)
|
||||
const isEmptyRow = (item: any): boolean => {
|
||||
|
|
|
|||
|
|
@ -184,7 +184,7 @@ const DataCell: React.FC<DataCellProps> = ({
|
|||
onClick={onClick}
|
||||
onDoubleClick={onDoubleClick}
|
||||
>
|
||||
0
|
||||
-
|
||||
</td>
|
||||
);
|
||||
}
|
||||
|
|
@ -222,7 +222,7 @@ const DataCell: React.FC<DataCellProps> = ({
|
|||
)}
|
||||
<span className="relative z-10 flex items-center justify-end gap-1">
|
||||
{icon && <span>{icon}</span>}
|
||||
{values[0].formattedValue || (values[0].value === 0 ? '0' : values[0].formattedValue)}
|
||||
{values[0].formattedValue}
|
||||
</span>
|
||||
</td>
|
||||
);
|
||||
|
|
@ -257,7 +257,7 @@ const DataCell: React.FC<DataCellProps> = ({
|
|||
)}
|
||||
<span className="relative z-10 flex items-center justify-end gap-1">
|
||||
{icon && <span>{icon}</span>}
|
||||
{val.formattedValue || (val.value === 0 ? '0' : val.formattedValue)}
|
||||
{val.formattedValue}
|
||||
</span>
|
||||
</td>
|
||||
))}
|
||||
|
|
@ -296,6 +296,13 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
onFieldDrop,
|
||||
onExpandChange,
|
||||
}) => {
|
||||
// 디버깅 로그
|
||||
console.log("🔶 PivotGridComponent props:", {
|
||||
title,
|
||||
hasExternalData: !!externalData,
|
||||
externalDataLength: externalData?.length,
|
||||
initialFieldsLength: initialFields?.length,
|
||||
});
|
||||
// ==================== 상태 ====================
|
||||
|
||||
const [fields, setFields] = useState<PivotFieldConfig[]>(initialFields);
|
||||
|
|
@ -305,9 +312,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
sortConfig: null,
|
||||
filterConfig: {},
|
||||
});
|
||||
|
||||
// 🆕 초기 로드 시 자동 확장 (첫 레벨만)
|
||||
const [isInitialExpanded, setIsInitialExpanded] = useState(false);
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
const [showFieldPanel, setShowFieldPanel] = useState(false); // 기본적으로 접힌 상태
|
||||
const [showFieldChooser, setShowFieldChooser] = useState(false);
|
||||
|
|
@ -366,63 +370,20 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
localStorage.setItem(stateStorageKey, JSON.stringify(stateToSave));
|
||||
}, [fields, pivotState, sortConfig, columnWidths, stateStorageKey]);
|
||||
|
||||
// 상태 복원 (localStorage) - 프로덕션 안전성 강화
|
||||
// 상태 복원 (localStorage)
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
try {
|
||||
const savedState = localStorage.getItem(stateStorageKey);
|
||||
if (!savedState) return;
|
||||
|
||||
const parsed = JSON.parse(savedState);
|
||||
|
||||
// 버전 체크 - 버전이 다르면 이전 상태 무시
|
||||
if (parsed.version !== PIVOT_STATE_VERSION) {
|
||||
localStorage.removeItem(stateStorageKey);
|
||||
return;
|
||||
const savedState = localStorage.getItem(stateStorageKey);
|
||||
if (savedState) {
|
||||
try {
|
||||
const parsed = JSON.parse(savedState);
|
||||
if (parsed.fields) setFields(parsed.fields);
|
||||
if (parsed.pivotState) setPivotState(parsed.pivotState);
|
||||
if (parsed.sortConfig) setSortConfig(parsed.sortConfig);
|
||||
if (parsed.columnWidths) setColumnWidths(parsed.columnWidths);
|
||||
} catch (e) {
|
||||
console.warn("피벗 상태 복원 실패:", e);
|
||||
}
|
||||
|
||||
// 필드 복원 시 유효성 검사 (중요!)
|
||||
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]);
|
||||
|
||||
|
|
@ -457,12 +418,10 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
|
||||
// 필터 영역 필드
|
||||
const filterFields = useMemo(
|
||||
() => {
|
||||
const result = fields
|
||||
() =>
|
||||
fields
|
||||
.filter((f) => f.area === "filter" && f.visible !== false)
|
||||
.sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0));
|
||||
return result;
|
||||
},
|
||||
.sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)),
|
||||
[fields]
|
||||
);
|
||||
|
||||
|
|
@ -507,86 +466,41 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
|
||||
if (activeFilters.length === 0) return data;
|
||||
|
||||
const result = data.filter((row) => {
|
||||
return data.filter((row) => {
|
||||
return activeFilters.every((filter) => {
|
||||
const rawValue = row[filter.field];
|
||||
const value = row[filter.field];
|
||||
const filterValues = filter.filterValues || [];
|
||||
const filterType = filter.filterType || "include";
|
||||
|
||||
// 타입 안전한 비교: 값을 문자열로 변환하여 비교
|
||||
const value = rawValue === null || rawValue === undefined
|
||||
? "(빈 값)"
|
||||
: String(rawValue);
|
||||
|
||||
if (filterType === "include") {
|
||||
return filterValues.some((fv) => String(fv) === value);
|
||||
return filterValues.includes(value);
|
||||
} else {
|
||||
return filterValues.every((fv) => String(fv) !== value);
|
||||
return !filterValues.includes(value);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 모든 데이터가 필터링되면 경고 (디버깅용)
|
||||
if (result.length === 0 && data.length > 0) {
|
||||
console.warn("⚠️ [PivotGrid] 필터로 인해 모든 데이터가 제거됨");
|
||||
}
|
||||
|
||||
return result;
|
||||
}, [data, fields]);
|
||||
|
||||
// ==================== 피벗 처리 ====================
|
||||
|
||||
const pivotResult = useMemo<PivotResult | null>(() => {
|
||||
try {
|
||||
if (!filteredData || filteredData.length === 0 || fields.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// FieldChooser에서 이미 필드를 완전히 제거하므로 visible 필터링 불필요
|
||||
// 행, 열, 데이터 영역에 필드가 하나도 없으면 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);
|
||||
if (!filteredData || filteredData.length === 0 || fields.length === 0) {
|
||||
return null;
|
||||
}
|
||||
}, [filteredData, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]);
|
||||
|
||||
// 초기 로드 시 첫 레벨 자동 확장
|
||||
useEffect(() => {
|
||||
try {
|
||||
if (pivotResult && pivotResult.flatRows && pivotResult.flatRows.length > 0 && !isInitialExpanded) {
|
||||
// 첫 레벨 행들의 경로 수집 (level 0인 행들)
|
||||
const firstLevelRows = pivotResult.flatRows.filter((row) => row.level === 0 && row.hasChildren);
|
||||
|
||||
// 첫 레벨 행이 있으면 자동 확장
|
||||
if (firstLevelRows.length > 0 && firstLevelRows.length < 100) {
|
||||
const firstLevelPaths = firstLevelRows.map((row) => row.path);
|
||||
setPivotState((prev) => ({
|
||||
...prev,
|
||||
expandedRowPaths: firstLevelPaths,
|
||||
}));
|
||||
setIsInitialExpanded(true);
|
||||
} else {
|
||||
// 행이 너무 많으면 자동 확장 건너뛰기
|
||||
setIsInitialExpanded(true);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ [초기 확장] 에러:", error);
|
||||
setIsInitialExpanded(true);
|
||||
const visibleFields = fields.filter((f) => f.visible !== false);
|
||||
// 행, 열, 데이터 영역에 필드가 하나도 없으면 null 반환 (필터는 제외)
|
||||
if (visibleFields.filter((f) => ["row", "column", "data"].includes(f.area)).length === 0) {
|
||||
return null;
|
||||
}
|
||||
}, [pivotResult, isInitialExpanded]);
|
||||
|
||||
return processPivotData(
|
||||
filteredData,
|
||||
visibleFields,
|
||||
pivotState.expandedRowPaths,
|
||||
pivotState.expandedColumnPaths
|
||||
);
|
||||
}, [filteredData, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]);
|
||||
|
||||
// 조건부 서식용 전체 값 수집
|
||||
const allCellValues = useMemo(() => {
|
||||
|
|
@ -777,52 +691,23 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
[onExpandChange]
|
||||
);
|
||||
|
||||
// 전체 확장 (재귀적으로 모든 레벨 확장)
|
||||
// 전체 확장
|
||||
const handleExpandAll = useCallback(() => {
|
||||
try {
|
||||
if (!pivotResult) {
|
||||
return;
|
||||
if (!pivotResult) return;
|
||||
|
||||
const allRowPaths: string[][] = [];
|
||||
pivotResult.flatRows.forEach((row) => {
|
||||
if (row.hasChildren) {
|
||||
allRowPaths.push(row.path);
|
||||
}
|
||||
});
|
||||
|
||||
// 재귀적으로 모든 가능한 경로 생성
|
||||
const allRowPaths: string[][] = [];
|
||||
const rowFields = fields.filter((f) => f.area === "row" && f.visible !== false);
|
||||
|
||||
// 행 필드가 없으면 종료
|
||||
if (rowFields.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 데이터에서 모든 고유한 경로 추출
|
||||
const pathSet = new Set<string>();
|
||||
filteredData.forEach((item) => {
|
||||
// 마지막 레벨은 제외 (확장할 자식이 없으므로)
|
||||
for (let depth = 1; depth < rowFields.length; depth++) {
|
||||
const path = rowFields.slice(0, depth).map((f) => String(item[f.field] ?? ""));
|
||||
const pathKey = JSON.stringify(path);
|
||||
pathSet.add(pathKey);
|
||||
}
|
||||
});
|
||||
|
||||
// Set을 배열로 변환 (최대 1000개로 제한하여 성능 보호)
|
||||
const MAX_PATHS = 1000;
|
||||
let count = 0;
|
||||
pathSet.forEach((pathKey) => {
|
||||
if (count < MAX_PATHS) {
|
||||
allRowPaths.push(JSON.parse(pathKey));
|
||||
count++;
|
||||
}
|
||||
});
|
||||
|
||||
setPivotState((prev) => ({
|
||||
...prev,
|
||||
expandedRowPaths: allRowPaths,
|
||||
expandedColumnPaths: [],
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error("❌ [handleExpandAll] 에러:", error);
|
||||
}
|
||||
}, [pivotResult, fields, filteredData]);
|
||||
setPivotState((prev) => ({
|
||||
...prev,
|
||||
expandedRowPaths: allRowPaths,
|
||||
expandedColumnPaths: [],
|
||||
}));
|
||||
}, [pivotResult]);
|
||||
|
||||
// 전체 축소
|
||||
const handleCollapseAll = useCallback(() => {
|
||||
|
|
@ -945,8 +830,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
|
||||
// 인쇄 기능 (PDF 내보내기보다 먼저 정의해야 함)
|
||||
const handlePrint = useCallback(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
const printContent = tableRef.current;
|
||||
if (!printContent) return;
|
||||
|
||||
|
|
@ -1047,14 +930,10 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
console.log("피벗 상태가 저장되었습니다.");
|
||||
}, [saveStateToStorage]);
|
||||
|
||||
// 상태 초기화 (확장/축소, 정렬, 필터만 초기화, 필드 설정은 유지)
|
||||
// 상태 초기화
|
||||
const handleResetState = useCallback(() => {
|
||||
// 로컬 스토리지에서 상태 제거 (SSR 보호)
|
||||
if (typeof window !== "undefined") {
|
||||
localStorage.removeItem(stateStorageKey);
|
||||
}
|
||||
|
||||
// 확장/축소, 정렬, 필터 상태만 초기화
|
||||
localStorage.removeItem(stateStorageKey);
|
||||
setFields(initialFields);
|
||||
setPivotState({
|
||||
expandedRowPaths: [],
|
||||
expandedColumnPaths: [],
|
||||
|
|
@ -1065,7 +944,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
setColumnWidths({});
|
||||
setSelectedCell(null);
|
||||
setSelectionRange(null);
|
||||
}, [stateStorageKey]);
|
||||
}, [stateStorageKey, initialFields]);
|
||||
|
||||
// 필드 숨기기/표시 상태
|
||||
const [hiddenFields, setHiddenFields] = useState<Set<string>>(new Set());
|
||||
|
|
@ -1082,6 +961,11 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
});
|
||||
}, []);
|
||||
|
||||
// 숨겨진 필드 제외한 활성 필드들
|
||||
const visibleFields = useMemo(() => {
|
||||
return fields.filter((f) => !hiddenFields.has(f.field));
|
||||
}, [fields, hiddenFields]);
|
||||
|
||||
// 숨겨진 필드 목록
|
||||
const hiddenFieldsList = useMemo(() => {
|
||||
return fields.filter((f) => hiddenFields.has(f.field));
|
||||
|
|
@ -1449,8 +1333,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 px-2"
|
||||
onClick={handleCollapseAll}
|
||||
title="전체 축소"
|
||||
onClick={handleExpandAll}
|
||||
title="전체 확장"
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</Button>
|
||||
|
|
@ -1459,8 +1343,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 px-2"
|
||||
onClick={handleExpandAll}
|
||||
title="전체 확장"
|
||||
onClick={handleCollapseAll}
|
||||
title="전체 축소"
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
|
|
@ -1640,25 +1524,19 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
<button
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-2 py-1 rounded text-xs",
|
||||
"border transition-colors max-w-xs",
|
||||
"border transition-colors",
|
||||
isFiltered
|
||||
? "bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-200"
|
||||
: "bg-background border-border hover:bg-accent"
|
||||
)}
|
||||
title={isFiltered ? `${filterField.caption}: ${selectedValues.join(", ")}` : filterField.caption}
|
||||
>
|
||||
<span className="font-medium">{filterField.caption}:</span>
|
||||
{isFiltered ? (
|
||||
<span className="truncate">
|
||||
{selectedValues.length <= 2
|
||||
? selectedValues.join(", ")
|
||||
: `${selectedValues.slice(0, 2).join(", ")} 외 ${selectedValues.length - 2}개`
|
||||
}
|
||||
<span>{filterField.caption}</span>
|
||||
{isFiltered && (
|
||||
<span className="bg-orange-500 text-white px-1 rounded text-[10px]">
|
||||
{selectedValues.length}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">전체</span>
|
||||
)}
|
||||
<ChevronDown className="h-3 w-3 shrink-0" />
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
|
@ -1672,27 +1550,20 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
<div
|
||||
ref={tableContainerRef}
|
||||
className="flex-1 overflow-auto focus:outline-none"
|
||||
style={{
|
||||
maxHeight: enableVirtualScroll && containerHeight > 0 ? containerHeight : undefined,
|
||||
// 최소 200px 보장 + 데이터에 맞게 조정 (최대 400px)
|
||||
minHeight: Math.max(
|
||||
200, // 절대 최소값 - 블라인드 효과 방지
|
||||
Math.min(400, (sortedFlatRows.length + 3) * ROW_HEIGHT + 50)
|
||||
)
|
||||
}}
|
||||
style={{ maxHeight: enableVirtualScroll ? containerHeight : undefined }}
|
||||
tabIndex={0}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
<table ref={tableRef} className="w-full border-collapse">
|
||||
<thead>
|
||||
{/* 열 헤더 */}
|
||||
<tr className="bg-background">
|
||||
<tr className="bg-muted/50">
|
||||
{/* 좌상단 코너 (행 필드 라벨 + 필터) */}
|
||||
<th
|
||||
className={cn(
|
||||
"border-r border-b border-border",
|
||||
"px-2 py-1 text-left text-xs font-medium",
|
||||
"bg-background sticky left-0 top-0 z-20"
|
||||
"px-2 py-2 text-left text-xs font-medium",
|
||||
"bg-muted sticky left-0 top-0 z-20"
|
||||
)}
|
||||
rowSpan={columnFields.length > 0 ? 2 : 1}
|
||||
>
|
||||
|
|
@ -1736,8 +1607,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
key={idx}
|
||||
className={cn(
|
||||
"border-r border-b border-border relative group",
|
||||
"px-2 py-1 text-center text-xs font-medium",
|
||||
"bg-background sticky top-0 z-10",
|
||||
"px-2 py-1.5 text-center text-xs font-medium",
|
||||
"bg-muted/70 sticky top-0 z-10",
|
||||
dataFields.length === 1 && "cursor-pointer hover:bg-accent/50"
|
||||
)}
|
||||
colSpan={dataFields.length || 1}
|
||||
|
|
@ -1759,31 +1630,16 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
/>
|
||||
</th>
|
||||
))}
|
||||
|
||||
{/* 행 총계 헤더 */}
|
||||
{totals?.showRowGrandTotals && (
|
||||
<th
|
||||
className={cn(
|
||||
"border-b border-border",
|
||||
"px-2 py-1 text-center text-xs font-medium",
|
||||
"bg-background sticky top-0 z-10"
|
||||
)}
|
||||
colSpan={dataFields.length || 1}
|
||||
rowSpan={dataFields.length > 1 ? 2 : 1}
|
||||
>
|
||||
총계
|
||||
</th>
|
||||
)}
|
||||
|
||||
{/* 열 필드 필터 (헤더 오른쪽 끝에 표시) */}
|
||||
{/* 열 필드 필터 (헤더 왼쪽에 표시) */}
|
||||
{columnFields.length > 0 && (
|
||||
<th
|
||||
className={cn(
|
||||
"border-b border-border",
|
||||
"px-1 py-1 text-center text-xs",
|
||||
"bg-background sticky top-0 z-10"
|
||||
"px-1 py-1.5 text-center text-xs",
|
||||
"bg-muted/50 sticky top-0 z-10"
|
||||
)}
|
||||
rowSpan={dataFields.length > 1 ? 2 : 1}
|
||||
rowSpan={columnFields.length > 0 ? 2 : 1}
|
||||
>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
{columnFields.map((f) => (
|
||||
|
|
@ -1815,11 +1671,25 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
</div>
|
||||
</th>
|
||||
)}
|
||||
|
||||
{/* 행 총계 헤더 */}
|
||||
{totals?.showRowGrandTotals && (
|
||||
<th
|
||||
className={cn(
|
||||
"border-b border-border",
|
||||
"px-2 py-1.5 text-center text-xs font-medium",
|
||||
"bg-primary/10 sticky top-0 z-10"
|
||||
)}
|
||||
colSpan={dataFields.length || 1}
|
||||
>
|
||||
총계
|
||||
</th>
|
||||
)}
|
||||
</tr>
|
||||
|
||||
{/* 데이터 필드 라벨 (다중 데이터 필드인 경우) */}
|
||||
{dataFields.length > 1 && (
|
||||
<tr className="bg-background">
|
||||
<tr className="bg-muted/30">
|
||||
{flatColumns.map((col, colIdx) => (
|
||||
<React.Fragment key={colIdx}>
|
||||
{dataFields.map((df, dfIdx) => (
|
||||
|
|
@ -1827,7 +1697,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
key={`${colIdx}-${dfIdx}`}
|
||||
className={cn(
|
||||
"border-r border-b border-border",
|
||||
"px-2 py-0.5 text-center text-xs font-normal",
|
||||
"px-2 py-1 text-center text-xs font-normal",
|
||||
"text-muted-foreground cursor-pointer hover:bg-accent/50"
|
||||
)}
|
||||
onClick={() => handleSort(df.field)}
|
||||
|
|
@ -1840,6 +1710,19 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
{totals?.showRowGrandTotals &&
|
||||
dataFields.map((df, dfIdx) => (
|
||||
<th
|
||||
key={`total-${dfIdx}`}
|
||||
className={cn(
|
||||
"border-r border-b border-border",
|
||||
"px-2 py-1 text-center text-xs font-normal",
|
||||
"bg-primary/5 text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{df.caption}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
)}
|
||||
</thead>
|
||||
|
|
@ -1954,15 +1837,12 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
});
|
||||
})()}
|
||||
|
||||
{/* 가상 스크롤 하단 여백 - 음수 방지 */}
|
||||
{enableVirtualScroll && (() => {
|
||||
const bottomPadding = Math.max(0, virtualScroll.totalHeight - virtualScroll.offsetTop - (visibleFlatRows.length * ROW_HEIGHT));
|
||||
return bottomPadding > 0 ? (
|
||||
<tr style={{ height: bottomPadding }}>
|
||||
<td colSpan={rowFields.length + flatColumns.length + (totals?.showRowGrandTotals ? dataFields.length : 0)} />
|
||||
</tr>
|
||||
) : null;
|
||||
})()}
|
||||
{/* 가상 스크롤 하단 여백 */}
|
||||
{enableVirtualScroll && (
|
||||
<tr style={{ height: virtualScroll.totalHeight - virtualScroll.offsetTop - (visibleFlatRows.length * ROW_HEIGHT) }}>
|
||||
<td colSpan={rowFields.length + flatColumns.length + (totals?.showRowGrandTotals ? dataFields.length : 0)} />
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{/* 열 총계 행 (하단 위치 - 기본값) */}
|
||||
{totals?.showColumnGrandTotals && totals?.rowGrandTotalPosition !== "top" && (
|
||||
|
|
|
|||
|
|
@ -1,73 +1,12 @@
|
|||
"use client";
|
||||
|
||||
import React, { useEffect, useState, Component, ErrorInfo, ReactNode } from "react";
|
||||
import React from "react";
|
||||
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
|
||||
import { createComponentDefinition } from "../../utils/createComponentDefinition";
|
||||
import { ComponentCategory } from "@/types/component";
|
||||
import { PivotGridComponent } from "./PivotGridComponent";
|
||||
import { PivotGridConfigPanel } from "./PivotGridConfigPanel";
|
||||
import { PivotFieldConfig } from "./types";
|
||||
import { dataApi } from "@/lib/api/data";
|
||||
import { AlertCircle, RefreshCw } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
// ==================== 에러 경계 ====================
|
||||
|
||||
interface ErrorBoundaryState {
|
||||
hasError: boolean;
|
||||
error?: Error;
|
||||
}
|
||||
|
||||
class PivotGridErrorBoundary extends Component<
|
||||
{ children: ReactNode; onReset?: () => void },
|
||||
ErrorBoundaryState
|
||||
> {
|
||||
constructor(props: { children: ReactNode; onReset?: () => void }) {
|
||||
super(props);
|
||||
this.state = { hasError: false };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
console.error("🔴 [PivotGrid] 렌더링 에러:", error);
|
||||
console.error("🔴 [PivotGrid] 에러 정보:", errorInfo);
|
||||
}
|
||||
|
||||
handleReset = () => {
|
||||
this.setState({ hasError: false, error: undefined });
|
||||
this.props.onReset?.();
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center p-8 text-center border border-destructive/50 rounded-lg bg-destructive/5">
|
||||
<AlertCircle className="h-8 w-8 text-destructive mb-2" />
|
||||
<h3 className="text-sm font-medium text-destructive mb-1">
|
||||
피벗 그리드 오류
|
||||
</h3>
|
||||
<p className="text-xs text-muted-foreground mb-3 max-w-md">
|
||||
{this.state.error?.message || "알 수 없는 오류가 발생했습니다."}
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={this.handleReset}
|
||||
className="gap-2"
|
||||
>
|
||||
<RefreshCw className="h-3.5 w-3.5" />
|
||||
다시 시도
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 샘플 데이터 (미리보기용) ====================
|
||||
|
||||
|
|
@ -156,63 +95,43 @@ const PivotGridWrapper: React.FC<any> = (props) => {
|
|||
const configFields = componentConfig.fields || props.fields;
|
||||
const configData = props.data;
|
||||
|
||||
// 🆕 테이블에서 데이터 자동 로딩
|
||||
const [loadedData, setLoadedData] = useState<any[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const loadTableData = async () => {
|
||||
const tableName = componentConfig.dataSource?.tableName;
|
||||
|
||||
// 데이터가 이미 있거나, 테이블명이 없으면 로딩하지 않음
|
||||
if (configData || !tableName || props.isDesignMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const response = await dataApi.getTableData(tableName, {
|
||||
page: 1,
|
||||
size: 10000, // 피벗 분석용 대량 데이터
|
||||
});
|
||||
|
||||
// dataApi.getTableData는 { data, total, page, size, totalPages } 구조
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
setLoadedData(response.data);
|
||||
} else {
|
||||
console.error("❌ [PivotGrid] 데이터 로딩 실패: 응답에 data 배열이 없음");
|
||||
setLoadedData([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ [PivotGrid] 데이터 로딩 에러:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadTableData();
|
||||
}, [componentConfig.dataSource?.tableName, configData, props.isDesignMode]);
|
||||
// 디버깅 로그
|
||||
console.log("🔷 PivotGridWrapper props:", {
|
||||
isDesignMode: props.isDesignMode,
|
||||
isInteractive: props.isInteractive,
|
||||
hasComponentConfig: !!props.componentConfig,
|
||||
hasConfig: !!props.config,
|
||||
hasData: !!configData,
|
||||
dataLength: configData?.length,
|
||||
hasFields: !!configFields,
|
||||
fieldsLength: configFields?.length,
|
||||
});
|
||||
|
||||
// 디자인 모드 판단:
|
||||
// 1. isDesignMode === true
|
||||
// 2. isInteractive === false (편집 모드)
|
||||
// 3. 데이터가 없는 경우
|
||||
const isDesignMode = props.isDesignMode === true || props.isInteractive === false;
|
||||
|
||||
// 🆕 실제 데이터 우선순위: props.data > loadedData > 샘플 데이터
|
||||
const actualData = configData || loadedData;
|
||||
const hasValidData = actualData && Array.isArray(actualData) && actualData.length > 0;
|
||||
const hasValidData = configData && Array.isArray(configData) && configData.length > 0;
|
||||
const hasValidFields = configFields && Array.isArray(configFields) && configFields.length > 0;
|
||||
|
||||
// 디자인 모드이거나 데이터가 없으면 샘플 데이터 사용
|
||||
const usePreviewData = isDesignMode || (!hasValidData && !isLoading);
|
||||
const usePreviewData = isDesignMode || !hasValidData;
|
||||
|
||||
// 최종 데이터/필드 결정
|
||||
const finalData = usePreviewData ? SAMPLE_DATA : actualData;
|
||||
const finalData = usePreviewData ? SAMPLE_DATA : configData;
|
||||
const finalFields = hasValidFields ? configFields : SAMPLE_FIELDS;
|
||||
const finalTitle = usePreviewData
|
||||
? (componentConfig.title || props.title || "피벗 그리드") + " (미리보기)"
|
||||
: (componentConfig.title || props.title);
|
||||
|
||||
console.log("🔷 PivotGridWrapper final:", {
|
||||
isDesignMode,
|
||||
usePreviewData,
|
||||
finalDataLength: finalData?.length,
|
||||
finalFieldsLength: finalFields?.length,
|
||||
});
|
||||
|
||||
// 총계 설정
|
||||
const totalsConfig = componentConfig.totals || props.totals || {
|
||||
showRowGrandTotals: true,
|
||||
|
|
@ -221,39 +140,24 @@ const PivotGridWrapper: React.FC<any> = (props) => {
|
|||
showColumnTotals: true,
|
||||
};
|
||||
|
||||
// 🆕 로딩 중 표시
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64 bg-muted/30 rounded-lg">
|
||||
<div className="text-center space-y-2">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
|
||||
<p className="text-sm text-muted-foreground">데이터 로딩 중...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 에러 경계로 감싸서 렌더링 에러 시 컴포넌트가 완전히 사라지지 않도록 함
|
||||
return (
|
||||
<PivotGridErrorBoundary>
|
||||
<PivotGridComponent
|
||||
title={finalTitle}
|
||||
data={finalData}
|
||||
fields={finalFields}
|
||||
totals={totalsConfig}
|
||||
style={componentConfig.style || props.style}
|
||||
fieldChooser={componentConfig.fieldChooser || props.fieldChooser}
|
||||
chart={componentConfig.chart || props.chart}
|
||||
allowExpandAll={componentConfig.allowExpandAll !== false}
|
||||
height="100%"
|
||||
maxHeight={componentConfig.maxHeight || props.maxHeight}
|
||||
exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }}
|
||||
onCellClick={props.onCellClick}
|
||||
onCellDoubleClick={props.onCellDoubleClick}
|
||||
onFieldDrop={props.onFieldDrop}
|
||||
onExpandChange={props.onExpandChange}
|
||||
/>
|
||||
</PivotGridErrorBoundary>
|
||||
<PivotGridComponent
|
||||
title={finalTitle}
|
||||
data={finalData}
|
||||
fields={finalFields}
|
||||
totals={totalsConfig}
|
||||
style={componentConfig.style || props.style}
|
||||
fieldChooser={componentConfig.fieldChooser || props.fieldChooser}
|
||||
chart={componentConfig.chart || props.chart}
|
||||
allowExpandAll={componentConfig.allowExpandAll !== false}
|
||||
height={componentConfig.height || props.height || "400px"}
|
||||
maxHeight={componentConfig.maxHeight || props.maxHeight}
|
||||
exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }}
|
||||
onCellClick={props.onCellClick}
|
||||
onCellDoubleClick={props.onCellDoubleClick}
|
||||
onFieldDrop={props.onFieldDrop}
|
||||
onExpandChange={props.onExpandChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -319,6 +223,18 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer {
|
|||
const componentConfig = props.componentConfig || props.config || {};
|
||||
const configFields = componentConfig.fields || props.fields;
|
||||
const configData = props.data;
|
||||
|
||||
// 디버깅 로그
|
||||
console.log("🔷 PivotGridRenderer props:", {
|
||||
isDesignMode: props.isDesignMode,
|
||||
isInteractive: props.isInteractive,
|
||||
hasComponentConfig: !!props.componentConfig,
|
||||
hasConfig: !!props.config,
|
||||
hasData: !!configData,
|
||||
dataLength: configData?.length,
|
||||
hasFields: !!configFields,
|
||||
fieldsLength: configFields?.length,
|
||||
});
|
||||
|
||||
// 디자인 모드 판단:
|
||||
// 1. isDesignMode === true
|
||||
|
|
@ -338,6 +254,13 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer {
|
|||
? (componentConfig.title || props.title || "피벗 그리드") + " (미리보기)"
|
||||
: (componentConfig.title || props.title);
|
||||
|
||||
console.log("🔷 PivotGridRenderer final:", {
|
||||
isDesignMode,
|
||||
usePreviewData,
|
||||
finalDataLength: finalData?.length,
|
||||
finalFieldsLength: finalFields?.length,
|
||||
});
|
||||
|
||||
// 총계 설정
|
||||
const totalsConfig = componentConfig.totals || props.totals || {
|
||||
showRowGrandTotals: true,
|
||||
|
|
@ -356,7 +279,7 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer {
|
|||
fieldChooser={componentConfig.fieldChooser || props.fieldChooser}
|
||||
chart={componentConfig.chart || props.chart}
|
||||
allowExpandAll={componentConfig.allowExpandAll !== false}
|
||||
height="100%"
|
||||
height={componentConfig.height || props.height || "400px"}
|
||||
maxHeight={componentConfig.maxHeight || props.maxHeight}
|
||||
exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }}
|
||||
onCellClick={props.onCellClick}
|
||||
|
|
|
|||
|
|
@ -267,9 +267,11 @@ export const FieldChooser: React.FC<FieldChooserProps> = ({
|
|||
const existingConfig = selectedFields.find((f) => f.field === field.field);
|
||||
|
||||
if (area === "none") {
|
||||
// 필드 완전 제거 (visible: false 대신 배열에서 제거)
|
||||
// 필드 제거 또는 숨기기
|
||||
if (existingConfig) {
|
||||
const newFields = selectedFields.filter((f) => f.field !== field.field);
|
||||
const newFields = selectedFields.map((f) =>
|
||||
f.field === field.field ? { ...f, visible: false } : f
|
||||
);
|
||||
onFieldsChange(newFields);
|
||||
}
|
||||
} else {
|
||||
|
|
@ -399,7 +401,7 @@ export const FieldChooser: React.FC<FieldChooserProps> = ({
|
|||
</div>
|
||||
|
||||
{/* 필드 목록 */}
|
||||
<ScrollArea className="flex-1 -mx-6 px-6 max-h-[40vh] overflow-y-auto">
|
||||
<ScrollArea className="flex-1 -mx-6 px-6">
|
||||
<div className="space-y-2 py-2">
|
||||
{filteredFields.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@ import {
|
|||
horizontalListSortingStrategy,
|
||||
useSortable,
|
||||
} from "@dnd-kit/sortable";
|
||||
import { useDroppable } from "@dnd-kit/core";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { PivotFieldConfig, PivotAreaType } from "../types";
|
||||
|
|
@ -245,31 +244,22 @@ const DroppableArea: React.FC<DroppableAreaProps> = ({
|
|||
const areaFields = fields.filter((f) => f.area === area && f.visible !== false);
|
||||
const fieldIds = areaFields.map((f) => `${area}-${f.field}`);
|
||||
|
||||
// 🆕 드롭 가능 영역 설정
|
||||
const { setNodeRef, isOver: isOverDroppable } = useDroppable({
|
||||
id: area, // "filter", "column", "row", "data"
|
||||
});
|
||||
|
||||
const finalIsOver = isOver || isOverDroppable;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
className={cn(
|
||||
"flex-1 min-h-[60px] rounded border-2 border-dashed p-2",
|
||||
"transition-all duration-200",
|
||||
"flex-1 min-h-[44px] rounded border border-dashed p-1.5",
|
||||
"transition-colors duration-200",
|
||||
config.color,
|
||||
finalIsOver && "border-primary bg-primary/10 scale-[1.02]",
|
||||
areaFields.length === 0 && "border-2" // 빈 영역일 때 테두리 강조
|
||||
isOver && "border-primary bg-primary/5"
|
||||
)}
|
||||
data-area={area}
|
||||
>
|
||||
{/* 영역 헤더 */}
|
||||
<div className="flex items-center gap-1 mb-1.5 text-xs font-semibold text-muted-foreground">
|
||||
<div className="flex items-center gap-1 mb-1 text-[11px] font-medium text-muted-foreground">
|
||||
{icon}
|
||||
<span>{title}</span>
|
||||
{areaFields.length > 0 && (
|
||||
<span className="text-[10px] bg-muted px-1.5 py-0.5 rounded">
|
||||
<span className="text-[10px] bg-muted px-1 rounded">
|
||||
{areaFields.length}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -277,16 +267,11 @@ const DroppableArea: React.FC<DroppableAreaProps> = ({
|
|||
|
||||
{/* 필드 목록 */}
|
||||
<SortableContext items={fieldIds} strategy={horizontalListSortingStrategy}>
|
||||
<div className="flex flex-wrap gap-1 min-h-[28px] relative">
|
||||
<div className="flex flex-wrap gap-1 min-h-[22px]">
|
||||
{areaFields.length === 0 ? (
|
||||
<div
|
||||
className="flex items-center justify-center w-full py-1 pointer-events-none"
|
||||
style={{ pointerEvents: 'none' }}
|
||||
>
|
||||
<span className="text-xs text-muted-foreground/70 italic font-medium">
|
||||
← 필드를 여기로 드래그하세요
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[10px] text-muted-foreground/50 italic">
|
||||
필드를 여기로 드래그
|
||||
</span>
|
||||
) : (
|
||||
areaFields.map((field) => (
|
||||
<SortableFieldChip
|
||||
|
|
@ -354,16 +339,8 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
|
|||
return;
|
||||
}
|
||||
|
||||
// 드롭 영역 감지 (영역 자체의 ID를 우선 확인)
|
||||
// 드롭 영역 감지
|
||||
const overId = over.id as string;
|
||||
|
||||
// 1. overId가 영역 자체인 경우 (filter, column, row, data)
|
||||
if (["filter", "column", "row", "data"].includes(overId)) {
|
||||
setOverArea(overId as PivotAreaType);
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. overId가 필드인 경우 (예: row-part_name)
|
||||
const targetArea = overId.split("-")[0] as PivotAreaType;
|
||||
if (["filter", "column", "row", "data"].includes(targetArea)) {
|
||||
setOverArea(targetArea);
|
||||
|
|
@ -373,13 +350,10 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
|
|||
// 드래그 종료
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
const currentOverArea = overArea; // handleDragOver에서 감지한 영역 저장
|
||||
setActiveId(null);
|
||||
setOverArea(null);
|
||||
|
||||
if (!over) {
|
||||
return;
|
||||
}
|
||||
if (!over) return;
|
||||
|
||||
const activeId = active.id as string;
|
||||
const overId = over.id as string;
|
||||
|
|
@ -389,16 +363,7 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
|
|||
PivotAreaType,
|
||||
string
|
||||
];
|
||||
|
||||
// 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;
|
||||
}
|
||||
const [targetArea] = overId.split("-") as [PivotAreaType, string];
|
||||
|
||||
// 같은 영역 내 정렬
|
||||
if (sourceArea === targetArea) {
|
||||
|
|
@ -441,7 +406,6 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
|
|||
}
|
||||
return f;
|
||||
});
|
||||
|
||||
onFieldsChange(newFields);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -51,18 +51,14 @@ export function useVirtualScroll(options: VirtualScrollOptions): VirtualScrollRe
|
|||
// 보이는 아이템 수
|
||||
const visibleCount = Math.ceil(containerHeight / itemHeight);
|
||||
|
||||
// 시작/끝 인덱스 계산 (음수 방지)
|
||||
// 시작/끝 인덱스 계산
|
||||
const { startIndex, endIndex } = useMemo(() => {
|
||||
// itemCount가 0이면 빈 배열
|
||||
if (itemCount === 0) {
|
||||
return { startIndex: 0, endIndex: -1 };
|
||||
}
|
||||
const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
|
||||
const end = Math.min(
|
||||
itemCount - 1,
|
||||
Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
|
||||
);
|
||||
return { startIndex: start, endIndex: Math.max(start, end) }; // end가 start보다 작지 않도록
|
||||
return { startIndex: start, endIndex: end };
|
||||
}, [scrollTop, itemHeight, containerHeight, itemCount, overscan]);
|
||||
|
||||
// 전체 높이
|
||||
|
|
|
|||
|
|
@ -710,19 +710,27 @@ export function processPivotData(
|
|||
.filter((f) => f.area === "data" && f.visible !== false)
|
||||
.sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0));
|
||||
|
||||
// 참고: 필터링은 PivotGridComponent에서 이미 처리됨
|
||||
// 여기서는 추가 필터링 없이 전달받은 데이터 사용
|
||||
const filteredData = data;
|
||||
const filterFields = fields.filter(
|
||||
(f) => f.area === "filter" && f.visible !== false
|
||||
);
|
||||
|
||||
// 확장 경로 Set 변환 (잘못된 형식 필터링)
|
||||
const validRowPaths = (expandedRowPaths || []).filter(
|
||||
(p): p is string[] => Array.isArray(p) && p.length > 0 && p.every(item => typeof item === "string")
|
||||
);
|
||||
const validColPaths = (expandedColumnPaths || []).filter(
|
||||
(p): p is string[] => Array.isArray(p) && p.length > 0 && p.every(item => typeof item === "string")
|
||||
);
|
||||
const expandedRowSet = new Set(validRowPaths.map(pathToKey));
|
||||
const expandedColSet = new Set(validColPaths.map(pathToKey));
|
||||
// 필터 적용
|
||||
let filteredData = data;
|
||||
for (const filterField of filterFields) {
|
||||
if (filterField.filterValues && filterField.filterValues.length > 0) {
|
||||
filteredData = filteredData.filter((row) => {
|
||||
const value = getFieldValue(row, filterField);
|
||||
if (filterField.filterType === "exclude") {
|
||||
return !filterField.filterValues!.includes(value);
|
||||
}
|
||||
return filterField.filterValues!.includes(value);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 확장 경로 Set 변환
|
||||
const expandedRowSet = new Set(expandedRowPaths.map(pathToKey));
|
||||
const expandedColSet = new Set(expandedColumnPaths.map(pathToKey));
|
||||
|
||||
// 기본 확장: 첫 번째 레벨 모두 확장
|
||||
if (expandedRowPaths.length === 0 && rowFields.length > 0) {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -6,6 +6,7 @@ import { WebType } from "@/types/common";
|
|||
import { tableTypeApi } from "@/lib/api/screen";
|
||||
import { entityJoinApi } from "@/lib/api/entityJoin";
|
||||
import { codeCache } from "@/lib/caching/codeCache";
|
||||
import { getCategoryLabelsByCodes } from "@/lib/api/tableCategoryValue";
|
||||
import { useEntityJoinOptimization } from "@/lib/hooks/useEntityJoinOptimization";
|
||||
import { getFullImageUrl } from "@/lib/api/client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
|
@ -41,7 +42,7 @@ import {
|
|||
Lock,
|
||||
} from "lucide-react";
|
||||
import * as XLSX from "xlsx";
|
||||
import { FileText, ChevronRightIcon, Search } from "lucide-react";
|
||||
import { FileText, ChevronRightIcon } from "lucide-react";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { toast } from "sonner";
|
||||
|
|
@ -66,6 +67,7 @@ import { useAuth } from "@/hooks/useAuth";
|
|||
import { useScreenContextOptional } from "@/contexts/ScreenContext";
|
||||
import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext";
|
||||
import type { DataProvidable, DataReceivable, DataReceiverConfig } from "@/types/data-transfer";
|
||||
import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
|
||||
|
||||
// ========================================
|
||||
// 인터페이스
|
||||
|
|
@ -242,6 +244,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
parentTabsComponentId,
|
||||
companyCode,
|
||||
}) => {
|
||||
// ========================================
|
||||
// 다국어 번역 훅
|
||||
// ========================================
|
||||
const { getTranslatedText } = useScreenMultiLang();
|
||||
|
||||
// ========================================
|
||||
// 설정 및 스타일
|
||||
// ========================================
|
||||
|
|
@ -455,7 +462,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
|
||||
// 🆕 컬럼 헤더 필터 상태 (상단에서 선언)
|
||||
const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
|
||||
const [headerLikeFilters, setHeaderLikeFilters] = useState<Record<string, string>>({}); // LIKE 검색용
|
||||
const [openFilterColumn, setOpenFilterColumn] = useState<string | null>(null);
|
||||
|
||||
// 🆕 Filter Builder (고급 필터) 관련 상태 - filteredData보다 먼저 정의해야 함
|
||||
|
|
@ -475,6 +481,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
}
|
||||
|
||||
// 2. 헤더 필터 적용 (joinColumnMapping 사용 안 함 - 직접 컬럼명 사용)
|
||||
// 🆕 다중 값 지원: 셀 값이 "A,B,C" 형태일 때, 필터에서 "A"를 선택하면 해당 행도 표시
|
||||
if (Object.keys(headerFilters).length > 0) {
|
||||
result = result.filter((row) => {
|
||||
return Object.entries(headerFilters).every(([columnName, values]) => {
|
||||
|
|
@ -484,23 +491,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
const cellValue = row[columnName] ?? row[columnName.toLowerCase()] ?? row[columnName.toUpperCase()];
|
||||
const cellStr = cellValue !== null && cellValue !== undefined ? String(cellValue) : "";
|
||||
|
||||
return values.has(cellStr);
|
||||
});
|
||||
});
|
||||
}
|
||||
// 정확히 일치하는 경우
|
||||
if (values.has(cellStr)) return true;
|
||||
|
||||
// 2-1. 🆕 LIKE 검색 필터 적용
|
||||
if (Object.keys(headerLikeFilters).length > 0) {
|
||||
result = result.filter((row) => {
|
||||
return Object.entries(headerLikeFilters).every(([columnName, searchText]) => {
|
||||
if (!searchText || searchText.trim() === "") return true;
|
||||
// 다중 값인 경우: 콤마로 분리해서 하나라도 포함되면 true
|
||||
if (cellStr.includes(",")) {
|
||||
const cellValues = cellStr.split(",").map(v => v.trim());
|
||||
return cellValues.some(v => values.has(v));
|
||||
}
|
||||
|
||||
// 여러 가능한 컬럼명 시도
|
||||
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());
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -558,7 +558,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
}
|
||||
|
||||
return result;
|
||||
}, [data, splitPanelPosition, splitPanelContext?.addedItemIds, headerFilters, headerLikeFilters, filterGroups]);
|
||||
}, [data, splitPanelPosition, splitPanelContext?.addedItemIds, headerFilters, filterGroups]);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(0);
|
||||
|
|
@ -871,17 +871,55 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
};
|
||||
|
||||
// 화면 컨텍스트에 데이터 제공자/수신자로 등록
|
||||
// 🔧 dataProvider와 dataReceiver를 의존성에 포함하지 않고,
|
||||
// 대신 data와 selectedRows가 변경될 때마다 재등록하여 최신 클로저 참조
|
||||
useEffect(() => {
|
||||
if (screenContext && component.id) {
|
||||
screenContext.registerDataProvider(component.id, dataProvider);
|
||||
screenContext.registerDataReceiver(component.id, dataReceiver);
|
||||
// 🔧 매번 새로운 dataProvider를 등록하여 최신 selectedRows 참조
|
||||
const currentDataProvider: DataProvidable = {
|
||||
componentId: component.id,
|
||||
componentType: "table-list",
|
||||
getSelectedData: () => {
|
||||
const selectedData = filteredData.filter((row) => {
|
||||
const rowId = String(row.id || row[tableConfig.selectedTable + "_id"] || "");
|
||||
return selectedRows.has(rowId);
|
||||
});
|
||||
console.log("📊 [TableList] getSelectedData 호출:", {
|
||||
componentId: component.id,
|
||||
selectedRowsSize: selectedRows.size,
|
||||
filteredDataLength: filteredData.length,
|
||||
resultLength: selectedData.length,
|
||||
});
|
||||
return selectedData;
|
||||
},
|
||||
getAllData: () => filteredData,
|
||||
clearSelection: () => {
|
||||
setSelectedRows(new Set());
|
||||
setIsAllSelected(false);
|
||||
},
|
||||
};
|
||||
|
||||
const currentDataReceiver: DataReceivable = {
|
||||
componentId: component.id,
|
||||
componentType: "table",
|
||||
receiveData: dataReceiver.receiveData,
|
||||
getData: () => data,
|
||||
};
|
||||
|
||||
screenContext.registerDataProvider(component.id, currentDataProvider);
|
||||
screenContext.registerDataReceiver(component.id, currentDataReceiver);
|
||||
|
||||
console.log("✅ [TableList] ScreenContext에 등록:", {
|
||||
componentId: component.id,
|
||||
selectedRowsSize: selectedRows.size,
|
||||
});
|
||||
|
||||
return () => {
|
||||
screenContext.unregisterDataProvider(component.id);
|
||||
screenContext.unregisterDataReceiver(component.id);
|
||||
};
|
||||
}
|
||||
}, [screenContext, component.id, data, selectedRows]);
|
||||
}, [screenContext, component.id, data, selectedRows, filteredData, tableConfig.selectedTable]);
|
||||
|
||||
// 분할 패널 컨텍스트에 데이터 수신자로 등록
|
||||
// useSplitPanelPosition 훅으로 위치 가져오기 (중첩된 화면에서도 작동)
|
||||
|
|
@ -1048,14 +1086,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
onGroupSumChange: setGroupSumConfig, // 그룹별 합산 설정
|
||||
// 틀고정 컬럼 관련
|
||||
frozenColumnCount, // 현재 틀고정 컬럼 수
|
||||
onFrozenColumnCountChange: (count: number) => {
|
||||
onFrozenColumnCountChange: (count: number, updatedColumns?: Array<{ columnName: string; visible: boolean }>) => {
|
||||
setFrozenColumnCount(count);
|
||||
// 체크박스 컬럼은 항상 틀고정에 포함
|
||||
const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : [];
|
||||
// 표시 가능한 컬럼 중 처음 N개를 틀고정 컬럼으로 설정
|
||||
const visibleCols = columnsToRegister
|
||||
// updatedColumns가 전달되면 그것을 사용, 아니면 columnsToRegister 사용
|
||||
const colsToUse = updatedColumns || columnsToRegister;
|
||||
const visibleCols = colsToUse
|
||||
.filter((col) => col.visible !== false)
|
||||
.map((col) => col.columnName || col.field);
|
||||
.map((col) => col.columnName || (col as any).field);
|
||||
const newFrozenColumns = [...checkboxColumn, ...visibleCols.slice(0, count)];
|
||||
setFrozenColumns(newFrozenColumns);
|
||||
},
|
||||
|
|
@ -2066,7 +2106,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
return row.id || row.uuid || `row-${index}`;
|
||||
};
|
||||
|
||||
const handleRowSelection = (rowKey: string, checked: boolean) => {
|
||||
const handleRowSelection = (rowKey: string, checked: boolean, rowData?: any) => {
|
||||
const newSelectedRows = new Set(selectedRows);
|
||||
if (checked) {
|
||||
newSelectedRows.add(rowKey);
|
||||
|
|
@ -2109,6 +2149,31 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
});
|
||||
}
|
||||
|
||||
// 🆕 분할 패널 컨텍스트에 선택된 데이터 저장/해제 (체크박스 선택 시에도 작동)
|
||||
const effectiveSplitPosition = splitPanelPosition || currentSplitPosition;
|
||||
if (splitPanelContext && effectiveSplitPosition === "left" && !splitPanelContext.disableAutoDataTransfer) {
|
||||
if (checked && selectedRowsData.length > 0) {
|
||||
// 선택된 경우: 첫 번째 선택된 데이터 저장 (또는 전달된 rowData)
|
||||
const dataToStore = rowData || selectedRowsData[selectedRowsData.length - 1];
|
||||
splitPanelContext.setSelectedLeftData(dataToStore);
|
||||
console.log("🔗 [TableList] handleRowSelection - 분할 패널 좌측 데이터 저장:", {
|
||||
rowKey,
|
||||
dataToStore,
|
||||
});
|
||||
} else if (!checked && selectedRowsData.length === 0) {
|
||||
// 모든 선택이 해제된 경우: 데이터 초기화
|
||||
splitPanelContext.setSelectedLeftData(null);
|
||||
console.log("🔗 [TableList] handleRowSelection - 분할 패널 좌측 데이터 초기화");
|
||||
} else if (selectedRowsData.length > 0) {
|
||||
// 일부 선택 해제된 경우: 남은 첫 번째 데이터로 업데이트
|
||||
splitPanelContext.setSelectedLeftData(selectedRowsData[0]);
|
||||
console.log("🔗 [TableList] handleRowSelection - 분할 패널 좌측 데이터 업데이트:", {
|
||||
remainingCount: selectedRowsData.length,
|
||||
firstData: selectedRowsData[0],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const allRowsSelected = filteredData.every((row, index) => newSelectedRows.has(getRowKey(row, index)));
|
||||
setIsAllSelected(allRowsSelected && filteredData.length > 0);
|
||||
};
|
||||
|
|
@ -2178,35 +2243,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
const rowKey = getRowKey(row, index);
|
||||
const isCurrentlySelected = selectedRows.has(rowKey);
|
||||
|
||||
handleRowSelection(rowKey, !isCurrentlySelected);
|
||||
|
||||
// 🆕 분할 패널 컨텍스트에 선택된 데이터 저장 (좌측 화면인 경우)
|
||||
// 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] 분할 패널 좌측 데이터 초기화");
|
||||
}
|
||||
}
|
||||
// handleRowSelection에서 분할 패널 데이터 처리도 함께 수행됨
|
||||
handleRowSelection(rowKey, !isCurrentlySelected, row);
|
||||
|
||||
console.log("행 클릭:", { row, index, isSelected: !isCurrentlySelected });
|
||||
};
|
||||
|
|
@ -2273,30 +2311,176 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
// 🆕 편집 모드 진입 placeholder (실제 구현은 visibleColumns 정의 후)
|
||||
const startEditingRef = useRef<() => void>(() => {});
|
||||
|
||||
// 🆕 각 컬럼의 고유값 목록 계산
|
||||
// 🆕 카테고리 라벨 매핑 (API에서 가져온 것)
|
||||
const [categoryLabelCache, setCategoryLabelCache] = useState<Record<string, string>>({});
|
||||
|
||||
// 🆕 각 컬럼의 고유값 목록 계산 (라벨 포함)
|
||||
const columnUniqueValues = useMemo(() => {
|
||||
const result: Record<string, string[]> = {};
|
||||
const result: Record<string, Array<{ value: string; label: string }>> = {};
|
||||
|
||||
if (data.length === 0) return result;
|
||||
|
||||
// 🆕 전체 데이터에서 개별 값 -> 라벨 매핑 테이블 구축 (다중 값 처리용)
|
||||
const globalLabelMap: Record<string, Map<string, string>> = {};
|
||||
|
||||
(tableConfig.columns || []).forEach((column: { columnName: string }) => {
|
||||
if (column.columnName === "__checkbox__") return;
|
||||
|
||||
const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
|
||||
const values = new Set<string>();
|
||||
// 라벨 컬럼 후보들 (백엔드에서 _name, _label, _value_label 등으로 반환할 수 있음)
|
||||
const labelColumnCandidates = [
|
||||
`${column.columnName}_name`, // 예: division_name
|
||||
`${column.columnName}_label`, // 예: division_label
|
||||
`${column.columnName}_value_label`, // 예: division_value_label
|
||||
];
|
||||
const valuesMap = new Map<string, string>(); // value -> label
|
||||
const singleValueLabelMap = new Map<string, string>(); // 개별 값 -> 라벨 (다중값 처리용)
|
||||
|
||||
// 1차: 모든 데이터에서 개별 값 -> 라벨 매핑 수집 (단일값 + 다중값 모두)
|
||||
data.forEach((row) => {
|
||||
const val = row[mappedColumnName];
|
||||
if (val !== null && val !== undefined && val !== "") {
|
||||
values.add(String(val));
|
||||
const valueStr = String(val);
|
||||
|
||||
// 라벨 컬럼에서 라벨 찾기
|
||||
let labelStr = "";
|
||||
for (const labelCol of labelColumnCandidates) {
|
||||
if (row[labelCol] && row[labelCol] !== "") {
|
||||
labelStr = String(row[labelCol]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 단일 값인 경우
|
||||
if (!valueStr.includes(",")) {
|
||||
if (labelStr) {
|
||||
singleValueLabelMap.set(valueStr, labelStr);
|
||||
}
|
||||
} else {
|
||||
// 다중 값인 경우: 값과 라벨을 각각 분리해서 매핑
|
||||
const individualValues = valueStr.split(",").map(v => v.trim());
|
||||
const individualLabels = labelStr ? labelStr.split(",").map(l => l.trim()) : [];
|
||||
|
||||
// 값과 라벨 개수가 같으면 1:1 매핑
|
||||
if (individualValues.length === individualLabels.length) {
|
||||
individualValues.forEach((v, idx) => {
|
||||
if (individualLabels[idx] && !singleValueLabelMap.has(v)) {
|
||||
singleValueLabelMap.set(v, individualLabels[idx]);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
result[column.columnName] = Array.from(values).sort();
|
||||
// 2차: 모든 값 처리 (다중 값 포함) - 필터 목록용
|
||||
data.forEach((row) => {
|
||||
const val = row[mappedColumnName];
|
||||
if (val !== null && val !== undefined && val !== "") {
|
||||
const valueStr = String(val);
|
||||
|
||||
// 콤마로 구분된 다중 값인지 확인
|
||||
if (valueStr.includes(",")) {
|
||||
// 다중 값: 각각 분리해서 개별 라벨 찾기
|
||||
const individualValues = valueStr.split(",").map(v => v.trim());
|
||||
// 🆕 singleValueLabelMap → categoryLabelCache 순으로 라벨 찾기
|
||||
const individualLabels = individualValues.map(v =>
|
||||
singleValueLabelMap.get(v) || categoryLabelCache[v] || v
|
||||
);
|
||||
valuesMap.set(valueStr, individualLabels.join(", "));
|
||||
} else {
|
||||
// 단일 값: 매핑에서 찾거나 캐시에서 찾거나 원본 사용
|
||||
const label = singleValueLabelMap.get(valueStr) || categoryLabelCache[valueStr] || valueStr;
|
||||
valuesMap.set(valueStr, label);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
globalLabelMap[column.columnName] = singleValueLabelMap;
|
||||
|
||||
// value-label 쌍으로 저장하고 라벨 기준 정렬
|
||||
result[column.columnName] = Array.from(valuesMap.entries())
|
||||
.map(([value, label]) => ({ value, label }))
|
||||
.sort((a, b) => a.label.localeCompare(b.label));
|
||||
});
|
||||
|
||||
return result;
|
||||
}, [data, tableConfig.columns, joinColumnMapping]);
|
||||
}, [data, tableConfig.columns, joinColumnMapping, categoryLabelCache]);
|
||||
|
||||
// 🆕 라벨을 못 찾은 CATEGORY_ 코드들을 API로 조회
|
||||
useEffect(() => {
|
||||
const unlabeledCodes = new Set<string>();
|
||||
|
||||
// columnUniqueValues에서 라벨이 코드 그대로인 항목 찾기
|
||||
Object.values(columnUniqueValues).forEach(items => {
|
||||
items.forEach(item => {
|
||||
// 라벨에 CATEGORY_가 포함되어 있으면 라벨을 못 찾은 것
|
||||
if (item.label.includes("CATEGORY_")) {
|
||||
// 콤마로 분리해서 개별 코드 추출
|
||||
const codes = item.label.split(",").map(c => c.trim());
|
||||
codes.forEach(code => {
|
||||
if (code.startsWith("CATEGORY_") && !categoryLabelCache[code]) {
|
||||
unlabeledCodes.add(code);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (unlabeledCodes.size === 0) return;
|
||||
|
||||
// API로 라벨 조회
|
||||
const fetchLabels = async () => {
|
||||
try {
|
||||
const response = await getCategoryLabelsByCodes(Array.from(unlabeledCodes));
|
||||
if (response.success && response.data) {
|
||||
setCategoryLabelCache(prev => ({ ...prev, ...response.data }));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("카테고리 라벨 조회 실패:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchLabels();
|
||||
}, [columnUniqueValues, categoryLabelCache]);
|
||||
|
||||
// 🆕 데이터에서 CATEGORY_ 코드를 찾아 라벨 미리 로드 (테이블 셀 렌더링용)
|
||||
useEffect(() => {
|
||||
if (data.length === 0) return;
|
||||
|
||||
const categoryCodesToFetch = new Set<string>();
|
||||
|
||||
// 모든 데이터 행에서 CATEGORY_ 코드 수집
|
||||
data.forEach((row) => {
|
||||
Object.entries(row).forEach(([key, value]) => {
|
||||
if (value && typeof value === "string") {
|
||||
// 콤마로 구분된 다중 값도 처리
|
||||
const codes = value.split(",").map((v) => v.trim());
|
||||
codes.forEach((code) => {
|
||||
if (code.startsWith("CATEGORY_") && !categoryLabelCache[code]) {
|
||||
categoryCodesToFetch.add(code);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (categoryCodesToFetch.size === 0) return;
|
||||
|
||||
// API로 라벨 조회
|
||||
const fetchLabels = async () => {
|
||||
try {
|
||||
const response = await getCategoryLabelsByCodes(Array.from(categoryCodesToFetch));
|
||||
if (response.success && response.data && Object.keys(response.data).length > 0) {
|
||||
setCategoryLabelCache((prev) => ({ ...prev, ...response.data }));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("CATEGORY_ 라벨 조회 실패:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchLabels();
|
||||
}, [data, categoryLabelCache]);
|
||||
|
||||
// 🆕 헤더 필터 토글
|
||||
const toggleHeaderFilter = useCallback((columnName: string, value: string) => {
|
||||
|
|
@ -2952,7 +3136,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
headerFilters: Object.fromEntries(
|
||||
Object.entries(headerFilters).map(([key, set]) => [key, Array.from(set as Set<string>)]),
|
||||
),
|
||||
headerLikeFilters, // LIKE 검색 필터 저장
|
||||
pageSize: localPageSize,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
|
@ -2973,7 +3156,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
frozenColumnCount,
|
||||
showGridLines,
|
||||
headerFilters,
|
||||
headerLikeFilters,
|
||||
localPageSize,
|
||||
]);
|
||||
|
||||
|
|
@ -3010,9 +3192,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
});
|
||||
setHeaderFilters(filters);
|
||||
}
|
||||
if (state.headerLikeFilters) {
|
||||
setHeaderLikeFilters(state.headerLikeFilters);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ 테이블 상태 복원 실패:", error);
|
||||
}
|
||||
|
|
@ -3946,7 +4125,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
if (enterRow) {
|
||||
const rowKey = getRowKey(enterRow, rowIndex);
|
||||
const isCurrentlySelected = selectedRows.has(rowKey);
|
||||
handleRowSelection(rowKey, !isCurrentlySelected);
|
||||
handleRowSelection(rowKey, !isCurrentlySelected, enterRow);
|
||||
}
|
||||
break;
|
||||
case " ": // Space
|
||||
|
|
@ -3956,7 +4135,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
if (spaceRow) {
|
||||
const currentRowKey = getRowKey(spaceRow, rowIndex);
|
||||
const isChecked = selectedRows.has(currentRowKey);
|
||||
handleRowSelection(currentRowKey, !isChecked);
|
||||
handleRowSelection(currentRowKey, !isChecked, spaceRow);
|
||||
}
|
||||
break;
|
||||
case "F2":
|
||||
|
|
@ -4170,7 +4349,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
return (
|
||||
<Checkbox
|
||||
checked={isChecked}
|
||||
onCheckedChange={(checked) => handleRowSelection(rowKey, checked as boolean)}
|
||||
onCheckedChange={(checked) => handleRowSelection(rowKey, checked as boolean, row)}
|
||||
aria-label={`행 ${index + 1} 선택`}
|
||||
/>
|
||||
);
|
||||
|
|
@ -4459,10 +4638,36 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
case "boolean":
|
||||
return value ? "예" : "아니오";
|
||||
default:
|
||||
return String(value);
|
||||
// 🆕 CATEGORY_ 코드 자동 변환 (inputType이 category가 아니어도)
|
||||
const strValue = String(value);
|
||||
if (strValue.startsWith("CATEGORY_")) {
|
||||
// rowData에서 _label 필드 찾기
|
||||
if (rowData) {
|
||||
const labelFieldCandidates = [
|
||||
`${column.columnName}_label`,
|
||||
`${column.columnName}_name`,
|
||||
`${column.columnName}_value_label`,
|
||||
];
|
||||
for (const labelField of labelFieldCandidates) {
|
||||
if (rowData[labelField] && rowData[labelField] !== "") {
|
||||
return String(rowData[labelField]);
|
||||
}
|
||||
}
|
||||
}
|
||||
// categoryMappings에서 찾기
|
||||
const mapping = categoryMappings[column.columnName];
|
||||
if (mapping && mapping[strValue]) {
|
||||
return mapping[strValue].label;
|
||||
}
|
||||
// categoryLabelCache에서 찾기 (필터용 캐시)
|
||||
if (categoryLabelCache[strValue]) {
|
||||
return categoryLabelCache[strValue];
|
||||
}
|
||||
}
|
||||
return strValue;
|
||||
}
|
||||
},
|
||||
[columnMeta, joinedColumnMeta, optimizedConvertCode, categoryMappings],
|
||||
[columnMeta, joinedColumnMeta, optimizedConvertCode, categoryMappings, categoryLabelCache],
|
||||
);
|
||||
|
||||
// ========================================
|
||||
|
|
@ -4601,9 +4806,22 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
});
|
||||
setColumnWidths(newWidths);
|
||||
|
||||
// 틀고정 컬럼 업데이트
|
||||
const newFrozenColumns = config.columns.filter((col) => col.frozen).map((col) => col.columnName);
|
||||
// 틀고정 컬럼 업데이트 (보이는 컬럼 기준으로 처음 N개를 틀고정)
|
||||
// 기존 frozen 개수를 유지하면서, 숨겨진 컬럼을 제외한 보이는 컬럼 중 처음 N개를 틀고정
|
||||
const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : [];
|
||||
const visibleCols = config.columns
|
||||
.filter((col) => col.visible && col.columnName !== "__checkbox__")
|
||||
.map((col) => col.columnName);
|
||||
|
||||
// 현재 설정된 frozen 컬럼 개수 (체크박스 제외)
|
||||
const currentFrozenCount = config.columns.filter(
|
||||
(col) => col.frozen && col.columnName !== "__checkbox__"
|
||||
).length;
|
||||
|
||||
// 보이는 컬럼 중 처음 currentFrozenCount개를 틀고정으로 설정
|
||||
const newFrozenColumns = [...checkboxColumn, ...visibleCols.slice(0, currentFrozenCount)];
|
||||
setFrozenColumns(newFrozenColumns);
|
||||
setFrozenColumnCount(currentFrozenCount);
|
||||
|
||||
// 그리드선 표시 업데이트
|
||||
setShowGridLines(config.showGridLines);
|
||||
|
|
@ -5647,7 +5865,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
rowSpan={2}
|
||||
className="border-primary/10 border-r px-2 py-1 text-center text-xs font-semibold sm:px-4 sm:text-sm"
|
||||
>
|
||||
{columnLabels[column.columnName] || column.columnName}
|
||||
{/* langKey가 있으면 다국어 번역 사용 */}
|
||||
{(column as any).langKey
|
||||
? getTranslatedText((column as any).langKey, columnLabels[column.columnName] || column.columnName)
|
||||
: columnLabels[column.columnName] || column.columnName}
|
||||
</th>
|
||||
);
|
||||
}
|
||||
|
|
@ -5666,13 +5887,18 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
{visibleColumns.map((column, columnIndex) => {
|
||||
const columnWidth = columnWidths[column.columnName];
|
||||
const isFrozen = frozenColumns.includes(column.columnName);
|
||||
const frozenIndex = frozenColumns.indexOf(column.columnName);
|
||||
|
||||
// 틀고정된 컬럼의 left 위치 계산
|
||||
|
||||
// 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
|
||||
// 숨겨진 컬럼은 제외하고 보이는 틀고정 컬럼만 포함
|
||||
const visibleFrozenColumns = visibleColumns
|
||||
.filter(col => frozenColumns.includes(col.columnName))
|
||||
.map(col => col.columnName);
|
||||
const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
|
||||
|
||||
let leftPosition = 0;
|
||||
if (isFrozen && frozenIndex > 0) {
|
||||
for (let i = 0; i < frozenIndex; i++) {
|
||||
const frozenCol = frozenColumns[i];
|
||||
const frozenCol = visibleFrozenColumns[i];
|
||||
// 체크박스 컬럼은 48px 고정
|
||||
const frozenColWidth = frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
|
||||
leftPosition += frozenColWidth;
|
||||
|
|
@ -5738,7 +5964,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
<Lock className="text-muted-foreground h-3 w-3" />
|
||||
</span>
|
||||
)}
|
||||
<span>{columnLabels[column.columnName] || column.displayName}</span>
|
||||
<span>
|
||||
{/* langKey가 있으면 다국어 번역 사용 */}
|
||||
{(column as any).langKey
|
||||
? getTranslatedText((column as any).langKey, columnLabels[column.columnName] || column.displayName || column.columnName)
|
||||
: columnLabels[column.columnName] || column.displayName}
|
||||
</span>
|
||||
{column.sortable !== false && sortColumn === column.columnName && (
|
||||
<span>{sortDirection === "asc" ? "↑" : "↓"}</span>
|
||||
)}
|
||||
|
|
@ -5759,7 +5990,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
}}
|
||||
className={cn(
|
||||
"hover:bg-primary/20 ml-1 rounded p-0.5 transition-colors",
|
||||
(headerFilters[column.columnName]?.size > 0 || headerLikeFilters[column.columnName]) && "text-primary bg-primary/10",
|
||||
headerFilters[column.columnName]?.size > 0 && "text-primary bg-primary/10",
|
||||
)}
|
||||
title="필터"
|
||||
>
|
||||
|
|
@ -5767,7 +5998,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-56 p-2"
|
||||
className="w-48 p-2"
|
||||
align="start"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
|
|
@ -5776,52 +6007,26 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
<span className="text-xs font-medium">
|
||||
필터: {columnLabels[column.columnName] || column.displayName}
|
||||
</span>
|
||||
{(headerFilters[column.columnName]?.size > 0 || headerLikeFilters[column.columnName]) && (
|
||||
{headerFilters[column.columnName]?.size > 0 && (
|
||||
<button
|
||||
onClick={() => {
|
||||
clearHeaderFilter(column.columnName);
|
||||
setHeaderLikeFilters((prev) => {
|
||||
const newFilters = { ...prev };
|
||||
delete newFilters[column.columnName];
|
||||
return newFilters;
|
||||
});
|
||||
}}
|
||||
onClick={() => clearHeaderFilter(column.columnName)}
|
||||
className="text-destructive text-xs hover:underline"
|
||||
>
|
||||
초기화
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{/* LIKE 검색 입력 필드 */}
|
||||
<div className="relative">
|
||||
<Search className="text-muted-foreground absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="검색어 입력 (포함)"
|
||||
value={headerLikeFilters[column.columnName] || ""}
|
||||
onChange={(e) => {
|
||||
setHeaderLikeFilters((prev) => ({
|
||||
...prev,
|
||||
[column.columnName]: e.target.value,
|
||||
}));
|
||||
}}
|
||||
className="border-input bg-background placeholder:text-muted-foreground h-7 w-full rounded-md border pl-7 pr-2 text-xs focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</div>
|
||||
{/* 구분선 */}
|
||||
<div className="text-muted-foreground border-t pt-2 text-[10px]">또는 값 선택:</div>
|
||||
<div className="max-h-40 space-y-1 overflow-y-auto">
|
||||
{columnUniqueValues[column.columnName]?.slice(0, 50).map((val) => {
|
||||
const isSelected = headerFilters[column.columnName]?.has(val);
|
||||
<div className="max-h-48 space-y-1 overflow-y-auto">
|
||||
{columnUniqueValues[column.columnName]?.slice(0, 50).map((item) => {
|
||||
const isSelected = headerFilters[column.columnName]?.has(item.value);
|
||||
return (
|
||||
<div
|
||||
key={val}
|
||||
key={item.value}
|
||||
className={cn(
|
||||
"hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1 text-xs",
|
||||
isSelected && "bg-primary/10",
|
||||
)}
|
||||
onClick={() => toggleHeaderFilter(column.columnName, val)}
|
||||
onClick={() => toggleHeaderFilter(column.columnName, item.value)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
|
|
@ -5831,7 +6036,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
>
|
||||
{isSelected && <Check className="text-primary-foreground h-3 w-3" />}
|
||||
</div>
|
||||
<span className="truncate">{val || "(빈 값)"}</span>
|
||||
<span className="truncate">{item.label || "(빈 값)"}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
@ -6004,13 +6209,17 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
const isNumeric = inputType === "number" || inputType === "decimal";
|
||||
|
||||
const isFrozen = frozenColumns.includes(column.columnName);
|
||||
const frozenIndex = frozenColumns.indexOf(column.columnName);
|
||||
|
||||
// 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
|
||||
const visibleFrozenColumns = visibleColumns
|
||||
.filter(col => frozenColumns.includes(col.columnName))
|
||||
.map(col => col.columnName);
|
||||
const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
|
||||
|
||||
// 틀고정된 컬럼의 left 위치 계산
|
||||
let leftPosition = 0;
|
||||
if (isFrozen && frozenIndex > 0) {
|
||||
for (let i = 0; i < frozenIndex; i++) {
|
||||
const frozenCol = frozenColumns[i];
|
||||
const frozenCol = visibleFrozenColumns[i];
|
||||
// 체크박스 컬럼은 48px 고정
|
||||
const frozenColWidth =
|
||||
frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
|
||||
|
|
@ -6157,7 +6366,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
const isNumeric = inputType === "number" || inputType === "decimal";
|
||||
|
||||
const isFrozen = frozenColumns.includes(column.columnName);
|
||||
const frozenIndex = frozenColumns.indexOf(column.columnName);
|
||||
|
||||
// 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
|
||||
const visibleFrozenColumns = visibleColumns
|
||||
.filter(col => frozenColumns.includes(col.columnName))
|
||||
.map(col => col.columnName);
|
||||
const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
|
||||
|
||||
// 셀 포커스 상태
|
||||
const isCellFocused = focusedCell?.rowIndex === index && focusedCell?.colIndex === colIndex;
|
||||
|
|
@ -6171,11 +6385,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
// 🆕 검색 하이라이트 여부
|
||||
const isSearchHighlighted = searchHighlights.has(`${index}-${colIndex}`);
|
||||
|
||||
// 틀고정된 컬럼의 left 위치 계산
|
||||
let leftPosition = 0;
|
||||
if (isFrozen && frozenIndex > 0) {
|
||||
for (let i = 0; i < frozenIndex; i++) {
|
||||
const frozenCol = frozenColumns[i];
|
||||
const frozenCol = visibleFrozenColumns[i];
|
||||
// 체크박스 컬럼은 48px 고정
|
||||
const frozenColWidth =
|
||||
frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
|
||||
|
|
@ -6335,13 +6548,17 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
const summary = summaryData[column.columnName];
|
||||
const columnWidth = columnWidths[column.columnName];
|
||||
const isFrozen = frozenColumns.includes(column.columnName);
|
||||
const frozenIndex = frozenColumns.indexOf(column.columnName);
|
||||
|
||||
// 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
|
||||
const visibleFrozenColumns = visibleColumns
|
||||
.filter(col => frozenColumns.includes(col.columnName))
|
||||
.map(col => col.columnName);
|
||||
const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
|
||||
|
||||
// 틀고정된 컬럼의 left 위치 계산
|
||||
let leftPosition = 0;
|
||||
if (isFrozen && frozenIndex > 0) {
|
||||
for (let i = 0; i < frozenIndex; i++) {
|
||||
const frozenCol = frozenColumns[i];
|
||||
const frozenCol = visibleFrozenColumns[i];
|
||||
// 체크박스 컬럼은 48px 고정
|
||||
const frozenColWidth = frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
|
||||
leftPosition += frozenColWidth;
|
||||
|
|
|
|||
|
|
@ -708,47 +708,6 @@ export class ButtonActionExecutor {
|
|||
if (repeaterJsonKeys.length > 0) {
|
||||
console.log("🔄 [handleSave] RepeaterFieldGroup JSON 문자열 감지:", repeaterJsonKeys);
|
||||
|
||||
// 🎯 채번 규칙 할당 처리 (RepeaterFieldGroup 저장 전에 실행)
|
||||
console.log("🔍 [handleSave-RepeaterFieldGroup] 채번 규칙 할당 체크 시작");
|
||||
|
||||
const fieldsWithNumberingRepeater: Record<string, string> = {};
|
||||
|
||||
// formData에서 채번 규칙이 설정된 필드 찾기
|
||||
for (const [key, value] of Object.entries(context.formData)) {
|
||||
if (key.endsWith("_numberingRuleId") && value) {
|
||||
const fieldName = key.replace("_numberingRuleId", "");
|
||||
fieldsWithNumberingRepeater[fieldName] = value as string;
|
||||
console.log(`🎯 [handleSave-RepeaterFieldGroup] 채번 필드 발견: ${fieldName} → 규칙 ${value}`);
|
||||
}
|
||||
}
|
||||
|
||||
console.log("📋 [handleSave-RepeaterFieldGroup] 채번 규칙이 설정된 필드:", fieldsWithNumberingRepeater);
|
||||
|
||||
// 채번 규칙이 있는 필드에 대해 allocateCode 호출
|
||||
if (Object.keys(fieldsWithNumberingRepeater).length > 0) {
|
||||
console.log("🎯 [handleSave-RepeaterFieldGroup] 채번 규칙 할당 시작 (allocateCode 호출)");
|
||||
const { allocateNumberingCode } = await import("@/lib/api/numberingRule");
|
||||
|
||||
for (const [fieldName, ruleId] of Object.entries(fieldsWithNumberingRepeater)) {
|
||||
try {
|
||||
console.log(`🔄 [handleSave-RepeaterFieldGroup] ${fieldName} 필드에 대해 allocateCode 호출: ${ruleId}`);
|
||||
const allocateResult = await allocateNumberingCode(ruleId);
|
||||
|
||||
if (allocateResult.success && allocateResult.data?.generatedCode) {
|
||||
const newCode = allocateResult.data.generatedCode;
|
||||
console.log(`✅ [handleSave-RepeaterFieldGroup] ${fieldName} 새 코드 할당: ${context.formData[fieldName]} → ${newCode}`);
|
||||
context.formData[fieldName] = newCode;
|
||||
} else {
|
||||
console.warn(`⚠️ [handleSave-RepeaterFieldGroup] ${fieldName} 코드 할당 실패:`, allocateResult.error);
|
||||
}
|
||||
} catch (allocateError) {
|
||||
console.error(`❌ [handleSave-RepeaterFieldGroup] ${fieldName} 코드 할당 오류:`, allocateError);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log("✅ [handleSave-RepeaterFieldGroup] 채번 규칙 할당 완료");
|
||||
|
||||
// 🆕 상단 폼 데이터(마스터 정보) 추출
|
||||
// RepeaterFieldGroup JSON과 컴포넌트 키를 제외한 나머지가 마스터 정보
|
||||
const masterFields: Record<string, any> = {};
|
||||
|
|
|
|||
Loading…
Reference in New Issue