kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
DDD1542 2026-01-16 17:41:21 +09:00
parent df8065503d 0a85146564
commit e3852aca5d
4 changed files with 277 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
backend-node/src/controllers/screenGroupController.ts
View File

@ -1,6 +1,7 @@
import { Request, Response } from "express"; import { Request, Response } from "express";
import { getPool } from "../database/db"; import { getPool } from "../database/db";
import { logger } from "../utils/logger"; import { logger } from "../utils/logger";
import { AuthenticatedRequest } from "../types/auth";
import { import {
syncScreenGroupsToMenu, syncScreenGroupsToMenu,
syncMenuToScreenGroups, syncMenuToScreenGroups,
@ -16,9 +17,9 @@ const pool = getPool();
// ============================================================ // ============================================================
// 화면 그룹 목록 조회 // 화면 그룹 목록 조회
export const getScreenGroups = async (req: Request, res: Response) => { export const getScreenGroups = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
const { page = 1, size = 20, searchTerm } = req.query; const { page = 1, size = 20, searchTerm } = req.query;
const offset = (parseInt(page as string) - 1) * parseInt(size as string); const offset = (parseInt(page as string) - 1) * parseInt(size as string);
@ -90,10 +91,10 @@ export const getScreenGroups = async (req: Request, res: Response) => {
}; };
// 화면 그룹 상세 조회 // 화면 그룹 상세 조회
export const getScreenGroup = async (req: Request, res: Response) => { export const getScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
let query = ` let query = `
SELECT sg.*, SELECT sg.*,
@ -136,10 +137,10 @@ export const getScreenGroup = async (req: Request, res: Response) => {
}; };
// 화면 그룹 생성 // 화면 그룹 생성
export const createScreenGroup = async (req: Request, res: Response) => { export const createScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const userCompanyCode = (req.user as any).companyCode; const userCompanyCode = req.user?.companyCode || "*";
const userId = (req.user as any).userId; const userId = req.user?.userId || "";
const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body; const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body;
if (!group_name || !group_code) { if (!group_name || !group_code) {
@ -210,10 +211,10 @@ export const createScreenGroup = async (req: Request, res: Response) => {
}; };
// 화면 그룹 수정 // 화면 그룹 수정
export const updateScreenGroup = async (req: Request, res: Response) => { export const updateScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const userCompanyCode = (req.user as any).companyCode; const userCompanyCode = req.user?.companyCode || "*";
const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body; const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body;
// 회사 코드 결정: 최고 관리자가 특정 회사를 선택한 경우 해당 회사로, 아니면 현재 그룹의 회사 유지 // 회사 코드 결정: 최고 관리자가 특정 회사를 선택한 경우 해당 회사로, 아니면 현재 그룹의 회사 유지
@ -299,11 +300,11 @@ export const updateScreenGroup = async (req: Request, res: Response) => {
}; };
// 화면 그룹 삭제 // 화면 그룹 삭제
export const deleteScreenGroup = async (req: Request, res: Response) => { export const deleteScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
const client = await pool.connect(); const client = await pool.connect();
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
await client.query('BEGIN'); await client.query('BEGIN');
@ -366,10 +367,10 @@ export const deleteScreenGroup = async (req: Request, res: Response) => {
// ============================================================ // ============================================================
// 그룹에 화면 추가 // 그룹에 화면 추가
export const addScreenToGroup = async (req: Request, res: Response) => { export const addScreenToGroup = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
const userId = (req.user as any).userId; const userId = req.user?.userId || "";
const { group_id, screen_id, screen_role, display_order, is_default } = req.body; const { group_id, screen_id, screen_role, display_order, is_default } = req.body;
if (!group_id || !screen_id) { if (!group_id || !screen_id) {
@ -406,10 +407,10 @@ export const addScreenToGroup = async (req: Request, res: Response) => {
}; };
// 그룹에서 화면 제거 // 그룹에서 화면 제거
export const removeScreenFromGroup = async (req: Request, res: Response) => { export const removeScreenFromGroup = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
let query = `DELETE FROM screen_group_screens WHERE id = $1`; let query = `DELETE FROM screen_group_screens WHERE id = $1`;
const params: any[] = [id]; const params: any[] = [id];
@ -437,10 +438,10 @@ export const removeScreenFromGroup = async (req: Request, res: Response) => {
}; };
// 그룹 내 화면 순서/역할 수정 // 그룹 내 화면 순서/역할 수정
export const updateScreenInGroup = async (req: Request, res: Response) => { export const updateScreenInGroup = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
const { screen_role, display_order, is_default } = req.body; const { screen_role, display_order, is_default } = req.body;
let query = ` let query = `
@ -476,9 +477,9 @@ export const updateScreenInGroup = async (req: Request, res: Response) => {
// ============================================================ // ============================================================
// 화면 필드 조인 목록 조회 // 화면 필드 조인 목록 조회
export const getFieldJoins = async (req: Request, res: Response) => { export const getFieldJoins = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
const { screen_id } = req.query; const { screen_id } = req.query;
let query = ` let query = `
@ -517,10 +518,10 @@ export const getFieldJoins = async (req: Request, res: Response) => {
}; };
// 화면 필드 조인 생성 // 화면 필드 조인 생성
export const createFieldJoin = async (req: Request, res: Response) => { export const createFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
const userId = (req.user as any).userId; const userId = req.user?.userId || "";
const { const {
screen_id, layout_id, component_id, field_name, screen_id, layout_id, component_id, field_name,
save_table, save_column, join_table, join_column, display_column, save_table, save_column, join_table, join_column, display_column,
@ -558,10 +559,10 @@ export const createFieldJoin = async (req: Request, res: Response) => {
}; };
// 화면 필드 조인 수정 // 화면 필드 조인 수정
export const updateFieldJoin = async (req: Request, res: Response) => { export const updateFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
const { const {
layout_id, component_id, field_name, layout_id, component_id, field_name,
save_table, save_column, join_table, join_column, display_column, save_table, save_column, join_table, join_column, display_column,
@ -603,10 +604,10 @@ export const updateFieldJoin = async (req: Request, res: Response) => {
}; };
// 화면 필드 조인 삭제 // 화면 필드 조인 삭제
export const deleteFieldJoin = async (req: Request, res: Response) => { export const deleteFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
let query = `DELETE FROM screen_field_joins WHERE id = $1`; let query = `DELETE FROM screen_field_joins WHERE id = $1`;
const params: any[] = [id]; const params: any[] = [id];
@ -637,9 +638,9 @@ export const deleteFieldJoin = async (req: Request, res: Response) => {
// ============================================================ // ============================================================
// 데이터 흐름 목록 조회 // 데이터 흐름 목록 조회
export const getDataFlows = async (req: Request, res: Response) => { export const getDataFlows = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
const { group_id, source_screen_id } = req.query; const { group_id, source_screen_id } = req.query;
let query = ` let query = `
@ -687,10 +688,10 @@ export const getDataFlows = async (req: Request, res: Response) => {
}; };
// 데이터 흐름 생성 // 데이터 흐름 생성
export const createDataFlow = async (req: Request, res: Response) => { export const createDataFlow = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
const userId = (req.user as any).userId; const userId = req.user?.userId || "";
const { const {
group_id, source_screen_id, source_action, target_screen_id, target_action, group_id, source_screen_id, source_action, target_screen_id, target_action,
data_mapping, flow_type, flow_label, condition_expression, is_active data_mapping, flow_type, flow_label, condition_expression, is_active
@ -726,10 +727,10 @@ export const createDataFlow = async (req: Request, res: Response) => {
}; };
// 데이터 흐름 수정 // 데이터 흐름 수정
export const updateDataFlow = async (req: Request, res: Response) => { export const updateDataFlow = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
const { const {
group_id, source_screen_id, source_action, target_screen_id, target_action, group_id, source_screen_id, source_action, target_screen_id, target_action,
data_mapping, flow_type, flow_label, condition_expression, is_active data_mapping, flow_type, flow_label, condition_expression, is_active
@ -769,10 +770,10 @@ export const updateDataFlow = async (req: Request, res: Response) => {
}; };
// 데이터 흐름 삭제 // 데이터 흐름 삭제
export const deleteDataFlow = async (req: Request, res: Response) => { export const deleteDataFlow = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
let query = `DELETE FROM screen_data_flows WHERE id = $1`; let query = `DELETE FROM screen_data_flows WHERE id = $1`;
const params: any[] = [id]; const params: any[] = [id];
@ -803,9 +804,9 @@ export const deleteDataFlow = async (req: Request, res: Response) => {
// ============================================================ // ============================================================
// 화면-테이블 관계 목록 조회 // 화면-테이블 관계 목록 조회
export const getTableRelations = async (req: Request, res: Response) => { export const getTableRelations = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
const { screen_id, group_id } = req.query; const { screen_id, group_id } = req.query;
let query = ` let query = `
@ -852,10 +853,10 @@ export const getTableRelations = async (req: Request, res: Response) => {
}; };
// 화면-테이블 관계 생성 // 화면-테이블 관계 생성
export const createTableRelation = async (req: Request, res: Response) => { export const createTableRelation = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
const userId = (req.user as any).userId; const userId = req.user?.userId || "";
const { group_id, screen_id, table_name, relation_type, crud_operations, description, is_active } = req.body; const { group_id, screen_id, table_name, relation_type, crud_operations, description, is_active } = req.body;
if (!screen_id || !table_name) { if (!screen_id || !table_name) {
@ -885,10 +886,10 @@ export const createTableRelation = async (req: Request, res: Response) => {
}; };
// 화면-테이블 관계 수정 // 화면-테이블 관계 수정
export const updateTableRelation = async (req: Request, res: Response) => { export const updateTableRelation = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
const { group_id, table_name, relation_type, crud_operations, description, is_active } = req.body; const { group_id, table_name, relation_type, crud_operations, description, is_active } = req.body;
let query = ` let query = `
@ -920,10 +921,10 @@ export const updateTableRelation = async (req: Request, res: Response) => {
}; };
// 화면-테이블 관계 삭제 // 화면-테이블 관계 삭제
export const deleteTableRelation = async (req: Request, res: Response) => { export const deleteTableRelation = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = (req.user as any).companyCode; const companyCode = req.user?.companyCode || "*";
let query = `DELETE FROM screen_table_relations WHERE id = $1`; let query = `DELETE FROM screen_table_relations WHERE id = $1`;
const params: any[] = [id]; const params: any[] = [id];
@ -953,7 +954,7 @@ export const deleteTableRelation = async (req: Request, res: Response) => {
// ============================================================ // ============================================================
// 화면 레이아웃 요약 조회 (위젯 타입별 개수, 라벨 목록) // 화면 레이아웃 요약 조회 (위젯 타입별 개수, 라벨 목록)
export const getScreenLayoutSummary = async (req: Request, res: Response) => { export const getScreenLayoutSummary = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const { screenId } = req.params; const { screenId } = req.params;
@ -1021,7 +1022,7 @@ export const getScreenLayoutSummary = async (req: Request, res: Response) => {
}; };
// 여러 화면의 레이아웃 요약 일괄 조회 (미니어처 렌더링용 좌표 포함) // 여러 화면의 레이아웃 요약 일괄 조회 (미니어처 렌더링용 좌표 포함)
export const getMultipleScreenLayoutSummary = async (req: Request, res: Response) => { export const getMultipleScreenLayoutSummary = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const { screenIds } = req.body; const { screenIds } = req.body;
@ -1221,7 +1222,7 @@ export const getMultipleScreenLayoutSummary = async (req: Request, res: Response
// ============================================================ // ============================================================
// 여러 화면의 서브 테이블 정보 조회 (메인 테이블 → 서브 테이블 관계) // 여러 화면의 서브 테이블 정보 조회 (메인 테이블 → 서브 테이블 관계)
export const getScreenSubTables = async (req: Request, res: Response) => { export const getScreenSubTables = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const { screenIds } = req.body; const { screenIds } = req.body;
@ -2060,10 +2061,10 @@ export const getScreenSubTables = async (req: Request, res: Response) => {
* 화면관리 → 메뉴 동기화 * 화면관리 → 메뉴 동기화
* screen_groups를 menu_info로 동기화 * screen_groups를 menu_info로 동기화
*/ */
export const syncScreenGroupsToMenuController = async (req: Request, res: Response) => { export const syncScreenGroupsToMenuController = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const userCompanyCode = (req.user as any).companyCode; const userCompanyCode = req.user?.companyCode || "*";
const userId = (req.user as any).userId; const userId = req.user?.userId || "";
const { targetCompanyCode } = req.body; const { targetCompanyCode } = req.body;
// 최고 관리자가 특정 회사를 지정한 경우 해당 회사로 // 최고 관리자가 특정 회사를 지정한 경우 해당 회사로
@ -2111,10 +2112,10 @@ export const syncScreenGroupsToMenuController = async (req: Request, res: Respon
* 메뉴 → 화면관리 동기화 * 메뉴 → 화면관리 동기화
* menu_info를 screen_groups로 동기화 * menu_info를 screen_groups로 동기화
*/ */
export const syncMenuToScreenGroupsController = async (req: Request, res: Response) => { export const syncMenuToScreenGroupsController = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const userCompanyCode = (req.user as any).companyCode; const userCompanyCode = req.user?.companyCode || "*";
const userId = (req.user as any).userId; const userId = req.user?.userId || "";
const { targetCompanyCode } = req.body; const { targetCompanyCode } = req.body;
// 최고 관리자가 특정 회사를 지정한 경우 해당 회사로 // 최고 관리자가 특정 회사를 지정한 경우 해당 회사로
@ -2161,9 +2162,9 @@ export const syncMenuToScreenGroupsController = async (req: Request, res: Respon
/** /**
* 동기화 상태 조회 * 동기화 상태 조회
*/ */
export const getSyncStatusController = async (req: Request, res: Response) => { export const getSyncStatusController = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const userCompanyCode = (req.user as any).companyCode; const userCompanyCode = req.user?.companyCode || "*";
const { targetCompanyCode } = req.query; const { targetCompanyCode } = req.query;
// 최고 관리자가 특정 회사를 지정한 경우 해당 회사로 // 최고 관리자가 특정 회사를 지정한 경우 해당 회사로
@ -2200,10 +2201,10 @@ export const getSyncStatusController = async (req: Request, res: Response) => {
* 전체 회사 동기화 * 전체 회사 동기화
* 모든 회사에 대해 양방향 동기화 수행 (최고 관리자만) * 모든 회사에 대해 양방향 동기화 수행 (최고 관리자만)
*/ */
export const syncAllCompaniesController = async (req: Request, res: Response) => { export const syncAllCompaniesController = async (req: AuthenticatedRequest, res: Response) => {
try { try {
const userCompanyCode = (req.user as any).companyCode; const userCompanyCode = req.user?.companyCode || "*";
const userId = (req.user as any).userId; const userId = req.user?.userId || "";
// 최고 관리자만 전체 동기화 가능 // 최고 관리자만 전체 동기화 가능
if (userCompanyCode !== "*") { if (userCompanyCode !== "*") {

177
frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx
View File

@ -384,20 +384,36 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
localStorage.setItem(stateStorageKey, JSON.stringify(stateToSave)); localStorage.setItem(stateStorageKey, JSON.stringify(stateToSave));
}, [fields, pivotState, sortConfig, columnWidths, stateStorageKey]); }, [fields, pivotState, sortConfig, columnWidths, stateStorageKey]);
// 상태 복원 (localStorage) // 상태 복원 (localStorage) - 프로덕션 안전성 강화
useEffect(() => { useEffect(() => {
if (typeof window === "undefined") return; if (typeof window === "undefined") return;
const savedState = localStorage.getItem(stateStorageKey);
if (savedState) {
try { try {
const savedState = localStorage.getItem(stateStorageKey);
if (!savedState) return;
const parsed = JSON.parse(savedState); const parsed = JSON.parse(savedState);
if (parsed.fields) setFields(parsed.fields);
// 필드 복원 시 유효성 검사 (중요!)
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);
}
}
// 나머지 상태 복원
if (parsed.pivotState) setPivotState(parsed.pivotState); if (parsed.pivotState) setPivotState(parsed.pivotState);
if (parsed.sortConfig) setSortConfig(parsed.sortConfig); if (parsed.sortConfig) setSortConfig(parsed.sortConfig);
if (parsed.columnWidths) setColumnWidths(parsed.columnWidths); if (parsed.columnWidths) setColumnWidths(parsed.columnWidths);
} catch (e) { } catch (e) {
console.warn("피벗 상태 복원 실패:", e); console.warn("피벗 상태 복원 실패, localStorage 초기화:", e);
} // 손상된 상태는 제거
localStorage.removeItem(stateStorageKey);
} }
}, [stateStorageKey]); }, [stateStorageKey]);
@ -432,10 +448,20 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
// 필터 영역 필드 // 필터 영역 필드
const filterFields = useMemo( const filterFields = useMemo(
() => () => {
fields const result = fields
.filter((f) => f.area === "filter" && f.visible !== false) .filter((f) => f.area === "filter" && f.visible !== false)
.sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)), .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0));
console.log("🔷 [filterFields] 필터 필드 계산:", {
totalFields: fields.length,
filterFieldsCount: result.length,
filterFieldNames: result.map(f => f.field),
allFieldAreas: fields.map(f => ({ field: f.field, area: f.area, visible: f.visible })),
});
return result;
},
[fields] [fields]
); );
@ -502,15 +528,15 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
return null; return null;
} }
const visibleFields = fields.filter((f) => f.visible !== false); // FieldChooser에서 이미 필드를 완전히 제거하므로 visible 필터링 불필요
// 행, 열, 데이터 영역에 필드가 하나도 없으면 null 반환 (필터는 제외) // 행, 열, 데이터 영역에 필드가 하나도 없으면 null 반환 (필터는 제외)
if (visibleFields.filter((f) => ["row", "column", "data"].includes(f.area)).length === 0) { if (fields.filter((f) => ["row", "column", "data"].includes(f.area)).length === 0) {
return null; return null;
} }
const result = processPivotData( const result = processPivotData(
filteredData, filteredData,
visibleFields, fields,
pivotState.expandedRowPaths, pivotState.expandedRowPaths,
pivotState.expandedColumnPaths pivotState.expandedColumnPaths
); );
@ -528,32 +554,23 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
return result; return result;
}, [filteredData, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]); }, [filteredData, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]);
// 🆕 초기 로드 시 첫 레벨 자동 확장 // 초기 로드 시 첫 레벨 자동 확장
useEffect(() => { useEffect(() => {
if (pivotResult && pivotResult.flatRows.length > 0) { if (pivotResult && pivotResult.flatRows.length > 0 && !isInitialExpanded) {
console.log("🔶 피벗 결과 생성됨:", {
flatRowsCount: pivotResult.flatRows.length,
expandedRowPaths: pivotState.expandedRowPaths.length,
isInitialExpanded,
});
// 첫 레벨 행들의 경로 수집 (level 0인 행들) // 첫 레벨 행들의 경로 수집 (level 0인 행들)
const firstLevelRows = pivotResult.flatRows.filter(row => row.level === 0 && row.hasChildren); const firstLevelRows = pivotResult.flatRows.filter((row) => row.level === 0 && row.hasChildren);
console.log("🔶 첫 레벨 행 (level 0, hasChildren):", firstLevelRows.map(r => ({ path: r.path, caption: r.caption }))); // 첫 레벨 행이 있으면 자동 확장
if (firstLevelRows.length > 0) {
// 초기 확장이 안 되어 있고, 첫 레벨 행이 있으면 자동 확장 const firstLevelPaths = firstLevelRows.map((row) => row.path);
if (!isInitialExpanded && firstLevelRows.length > 0) { setPivotState((prev) => ({
const firstLevelPaths = firstLevelRows.map(row => row.path);
console.log("🔶 초기 자동 확장 실행:", firstLevelPaths);
setPivotState(prev => ({
...prev, ...prev,
expandedRowPaths: firstLevelPaths, expandedRowPaths: firstLevelPaths,
})); }));
setIsInitialExpanded(true); setIsInitialExpanded(true);
} }
} }
}, [pivotResult, isInitialExpanded, pivotState.expandedRowPaths.length]); }, [pivotResult, isInitialExpanded]);
// 조건부 서식용 전체 값 수집 // 조건부 서식용 전체 값 수집
const allCellValues = useMemo(() => { const allCellValues = useMemo(() => {
@ -710,6 +727,15 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
// 필드 변경 // 필드 변경
const handleFieldsChange = useCallback( const handleFieldsChange = useCallback(
(newFields: PivotFieldConfig[]) => { (newFields: PivotFieldConfig[]) => {
// FieldChooser에서 이미 필드를 완전히 제거하므로 추가 필터링 불필요
console.log("🔷 [handleFieldsChange] 필드 변경:", {
totalFields: newFields.length,
filterFields: newFields.filter(f => f.area === "filter").length,
filterFieldNames: newFields.filter(f => f.area === "filter").map(f => f.field),
rowFields: newFields.filter(f => f.area === "row").length,
columnFields: newFields.filter(f => f.area === "column").length,
dataFields: newFields.filter(f => f.area === "data").length,
});
setFields(newFields); setFields(newFields);
}, },
[] []
@ -749,15 +775,36 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
[onExpandChange] [onExpandChange]
); );
// 전체 확장 // 전체 확장 (재귀적으로 모든 레벨 확장)
const handleExpandAll = useCallback(() => { const handleExpandAll = useCallback(() => {
if (!pivotResult) return; if (!pivotResult) {
console.log("❌ [handleExpandAll] pivotResult가 없음");
const allRowPaths: string[][] = []; return;
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);
// 데이터에서 모든 고유한 경로 추출
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을 배열로 변환
pathSet.forEach((pathKey) => {
allRowPaths.push(JSON.parse(pathKey));
});
console.log("🔷 [handleExpandAll] 확장할 행:", {
totalRows: pivotResult.flatRows.length,
rowsWithChildren: allRowPaths.length,
paths: allRowPaths.slice(0, 5), // 처음 5개만 로그
}); });
setPivotState((prev) => ({ setPivotState((prev) => ({
@ -765,15 +812,24 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
expandedRowPaths: allRowPaths, expandedRowPaths: allRowPaths,
expandedColumnPaths: [], expandedColumnPaths: [],
})); }));
}, [pivotResult]); }, [pivotResult, fields, filteredData]);
// 전체 축소 // 전체 축소
const handleCollapseAll = useCallback(() => { const handleCollapseAll = useCallback(() => {
setPivotState((prev) => ({ console.log("🔷 [handleCollapseAll] 전체 축소 실행");
setPivotState((prev) => {
console.log("🔷 [handleCollapseAll] 이전 상태:", {
expandedRowPaths: prev.expandedRowPaths.length,
expandedColumnPaths: prev.expandedColumnPaths.length,
});
return {
...prev, ...prev,
expandedRowPaths: [], expandedRowPaths: [],
expandedColumnPaths: [], expandedColumnPaths: [],
})); };
});
}, []); }, []);
// 셀 클릭 // 셀 클릭
@ -888,6 +944,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
// 인쇄 기능 (PDF 내보내기보다 먼저 정의해야 함) // 인쇄 기능 (PDF 내보내기보다 먼저 정의해야 함)
const handlePrint = useCallback(() => { const handlePrint = useCallback(() => {
if (typeof window === "undefined") return;
const printContent = tableRef.current; const printContent = tableRef.current;
if (!printContent) return; if (!printContent) return;
@ -988,10 +1046,14 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
console.log("피벗 상태가 저장되었습니다."); console.log("피벗 상태가 저장되었습니다.");
}, [saveStateToStorage]); }, [saveStateToStorage]);
// 상태 초기화 // 상태 초기화 (확장/축소, 정렬, 필터만 초기화, 필드 설정은 유지)
const handleResetState = useCallback(() => { const handleResetState = useCallback(() => {
// 로컬 스토리지에서 상태 제거 (SSR 보호)
if (typeof window !== "undefined") {
localStorage.removeItem(stateStorageKey); localStorage.removeItem(stateStorageKey);
setFields(initialFields); }
// 확장/축소, 정렬, 필터 상태만 초기화
setPivotState({ setPivotState({
expandedRowPaths: [], expandedRowPaths: [],
expandedColumnPaths: [], expandedColumnPaths: [],
@ -1002,7 +1064,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
setColumnWidths({}); setColumnWidths({});
setSelectedCell(null); setSelectedCell(null);
setSelectionRange(null); setSelectionRange(null);
}, [stateStorageKey, initialFields]); }, [stateStorageKey]);
// 필드 숨기기/표시 상태 // 필드 숨기기/표시 상태
const [hiddenFields, setHiddenFields] = useState<Set<string>>(new Set()); const [hiddenFields, setHiddenFields] = useState<Set<string>>(new Set());
@ -1019,11 +1081,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
}); });
}, []); }, []);
// 숨겨진 필드 제외한 활성 필드들
const visibleFields = useMemo(() => {
return fields.filter((f) => !hiddenFields.has(f.field));
}, [fields, hiddenFields]);
// 숨겨진 필드 목록 // 숨겨진 필드 목록
const hiddenFieldsList = useMemo(() => { const hiddenFieldsList = useMemo(() => {
return fields.filter((f) => hiddenFields.has(f.field)); return fields.filter((f) => hiddenFields.has(f.field));
@ -1391,8 +1448,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
variant="ghost" variant="ghost"
size="sm" size="sm"
className="h-7 px-2" className="h-7 px-2"
onClick={handleExpandAll} onClick={handleCollapseAll}
title="전체 확장" title="전체 축소"
> >
<ChevronDown className="h-4 w-4" /> <ChevronDown className="h-4 w-4" />
</Button> </Button>
@ -1401,8 +1458,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
variant="ghost" variant="ghost"
size="sm" size="sm"
className="h-7 px-2" className="h-7 px-2"
onClick={handleCollapseAll} onClick={handleExpandAll}
title="전체 축소" title="전체 확장"
> >
<ChevronRight className="h-4 w-4" /> <ChevronRight className="h-4 w-4" />
</Button> </Button>
@ -1582,19 +1639,25 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
<button <button
className={cn( className={cn(
"flex items-center gap-1.5 px-2 py-1 rounded text-xs", "flex items-center gap-1.5 px-2 py-1 rounded text-xs",
"border transition-colors", "border transition-colors max-w-xs",
isFiltered isFiltered
? "bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-200" ? "bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-200"
: "bg-background border-border hover:bg-accent" : "bg-background border-border hover:bg-accent"
)} )}
title={isFiltered ? `${filterField.caption}: ${selectedValues.join(", ")}` : filterField.caption}
> >
<span>{filterField.caption}</span> <span className="font-medium">{filterField.caption}:</span>
{isFiltered && ( {isFiltered ? (
<span className="bg-orange-500 text-white px-1 rounded text-[10px]"> <span className="truncate">
{selectedValues.length} {selectedValues.length <= 2
? selectedValues.join(", ")
: `${selectedValues.slice(0, 2).join(", ")} 외 ${selectedValues.length - 2}개`
}
</span> </span>
) : (
<span className="text-muted-foreground">전체</span>
)} )}
<ChevronDown className="h-3 w-3" /> <ChevronDown className="h-3 w-3 shrink-0" />
</button> </button>
} }
/> />

18
frontend/lib/registry/components/pivot-grid/components/FieldChooser.tsx
View File

@ -267,11 +267,13 @@ export const FieldChooser: React.FC<FieldChooserProps> = ({
const existingConfig = selectedFields.find((f) => f.field === field.field); const existingConfig = selectedFields.find((f) => f.field === field.field);
if (area === "none") { if (area === "none") {
// 필드 제거 또는 숨기기 // 🆕 필드 완전 제거 (visible: false 대신 배열에서 제거)
if (existingConfig) { if (existingConfig) {
const newFields = selectedFields.map((f) => const newFields = selectedFields.filter((f) => f.field !== field.field);
f.field === field.field ? { ...f, visible: false } : f console.log("🔷 [FieldChooser] 필드 제거:", {
); removedField: field.field,
remainingFields: newFields.length,
});
onFieldsChange(newFields); onFieldsChange(newFields);
} }
} else { } else {
@ -282,6 +284,10 @@ export const FieldChooser: React.FC<FieldChooserProps> = ({
? { ...f, area, visible: true } ? { ...f, area, visible: true }
: f : f
); );
console.log("🔷 [FieldChooser] 필드 영역 변경:", {
field: field.field,
newArea: area,
});
onFieldsChange(newFields); onFieldsChange(newFields);
} else { } else {
// 새 필드 추가 // 새 필드 추가
@ -294,6 +300,10 @@ export const FieldChooser: React.FC<FieldChooserProps> = ({
summaryType: area === "data" ? "sum" : undefined, summaryType: area === "data" ? "sum" : undefined,
areaIndex: selectedFields.filter((f) => f.area === area).length, areaIndex: selectedFields.filter((f) => f.area === area).length,
}; };
console.log("🔷 [FieldChooser] 필드 추가:", {
field: field.field,
area,
});
onFieldsChange([...selectedFields, newField]); onFieldsChange([...selectedFields, newField]);
} }
} }

86
frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx
View File

@ -25,6 +25,7 @@ import {
horizontalListSortingStrategy, horizontalListSortingStrategy,
useSortable, useSortable,
} from "@dnd-kit/sortable"; } from "@dnd-kit/sortable";
import { useDroppable } from "@dnd-kit/core";
import { CSS } from "@dnd-kit/utilities"; import { CSS } from "@dnd-kit/utilities";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { PivotFieldConfig, PivotAreaType } from "../types"; import { PivotFieldConfig, PivotAreaType } from "../types";
@ -244,22 +245,31 @@ const DroppableArea: React.FC<DroppableAreaProps> = ({
const areaFields = fields.filter((f) => f.area === area && f.visible !== false); const areaFields = fields.filter((f) => f.area === area && f.visible !== false);
const fieldIds = areaFields.map((f) => `${area}-${f.field}`); const fieldIds = areaFields.map((f) => `${area}-${f.field}`);
// 🆕 드롭 가능 영역 설정
const { setNodeRef, isOver: isOverDroppable } = useDroppable({
id: area, // "filter", "column", "row", "data"
});
const finalIsOver = isOver || isOverDroppable;
return ( return (
<div <div
ref={setNodeRef}
className={cn( className={cn(
"flex-1 min-h-[44px] rounded border border-dashed p-1.5", "flex-1 min-h-[60px] rounded border-2 border-dashed p-2",
"transition-colors duration-200", "transition-all duration-200",
config.color, config.color,
isOver && "border-primary bg-primary/5" finalIsOver && "border-primary bg-primary/10 scale-[1.02]",
areaFields.length === 0 && "border-2" // 빈 영역일 때 테두리 강조
)} )}
data-area={area} data-area={area}
> >
{/* 영역 헤더 */} {/* 영역 헤더 */}
<div className="flex items-center gap-1 mb-1 text-[11px] font-medium text-muted-foreground"> <div className="flex items-center gap-1 mb-1.5 text-xs font-semibold text-muted-foreground">
{icon} {icon}
<span>{title}</span> <span>{title}</span>
{areaFields.length > 0 && ( {areaFields.length > 0 && (
<span className="text-[10px] bg-muted px-1 rounded"> <span className="text-[10px] bg-muted px-1.5 py-0.5 rounded">
{areaFields.length} {areaFields.length}
</span> </span>
)} )}
@ -267,11 +277,16 @@ const DroppableArea: React.FC<DroppableAreaProps> = ({
{/* 필드 목록 */} {/* 필드 목록 */}
<SortableContext items={fieldIds} strategy={horizontalListSortingStrategy}> <SortableContext items={fieldIds} strategy={horizontalListSortingStrategy}>
<div className="flex flex-wrap gap-1 min-h-[22px]"> <div className="flex flex-wrap gap-1 min-h-[28px] relative">
{areaFields.length === 0 ? ( {areaFields.length === 0 ? (
<span className="text-[10px] text-muted-foreground/50 italic"> <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> </span>
</div>
) : ( ) : (
areaFields.map((field) => ( areaFields.map((field) => (
<SortableFieldChip <SortableFieldChip
@ -339,31 +354,67 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
return; return;
} }
// 드롭 영역 감지 // 드롭 영역 감지 (영역 자체의 ID를 우선 확인)
const overId = over.id as string; const overId = over.id as string;
// 1. overId가 영역 자체인 경우 (filter, column, row, data)
if (["filter", "column", "row", "data"].includes(overId)) {
setOverArea(overId as PivotAreaType);
console.log("🔷 [handleDragOver] 영역 감지:", overId);
return;
}
// 2. overId가 필드인 경우 (예: row-part_name)
const targetArea = overId.split("-")[0] as PivotAreaType; const targetArea = overId.split("-")[0] as PivotAreaType;
if (["filter", "column", "row", "data"].includes(targetArea)) { if (["filter", "column", "row", "data"].includes(targetArea)) {
setOverArea(targetArea); setOverArea(targetArea);
console.log("🔷 [handleDragOver] 필드 영역 감지:", targetArea);
} }
}; };
// 드래그 종료 // 드래그 종료
const handleDragEnd = (event: DragEndEvent) => { const handleDragEnd = (event: DragEndEvent) => {
const { active, over } = event; const { active, over } = event;
const currentOverArea = overArea; // handleDragOver에서 감지한 영역 저장
setActiveId(null); setActiveId(null);
setOverArea(null); setOverArea(null);
if (!over) return; if (!over) {
console.log("🔷 [FieldPanel] 드롭 대상 없음");
return;
}
const activeId = active.id as string; const activeId = active.id as string;
const overId = over.id as string; const overId = over.id as string;
console.log("🔷 [FieldPanel] 드래그 종료:", {
activeId,
overId,
detectedOverArea: currentOverArea,
});
// 필드 정보 파싱 // 필드 정보 파싱
const [sourceArea, sourceField] = activeId.split("-") as [ const [sourceArea, sourceField] = activeId.split("-") as [
PivotAreaType, PivotAreaType,
string string
]; ];
const [targetArea] = overId.split("-") as [PivotAreaType, string];
// targetArea 결정: handleDragOver에서 감지한 영역 우선 사용
let targetArea: PivotAreaType;
if (currentOverArea) {
targetArea = currentOverArea;
} else if (["filter", "column", "row", "data"].includes(overId)) {
targetArea = overId as PivotAreaType;
} else {
targetArea = overId.split("-")[0] as PivotAreaType;
}
console.log("🔷 [FieldPanel] 파싱 결과:", {
sourceArea,
sourceField,
targetArea,
usedOverArea: !!currentOverArea,
});
// 같은 영역 내 정렬 // 같은 영역 내 정렬
if (sourceArea === targetArea) { if (sourceArea === targetArea) {
@ -396,6 +447,12 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
// 다른 영역으로 이동 // 다른 영역으로 이동
if (["filter", "column", "row", "data"].includes(targetArea)) { if (["filter", "column", "row", "data"].includes(targetArea)) {
console.log("🔷 [FieldPanel] 영역 이동:", {
field: sourceField,
from: sourceArea,
to: targetArea,
});
const newFields = fields.map((f) => { const newFields = fields.map((f) => {
if (f.field === sourceField && f.area === sourceArea) { if (f.field === sourceField && f.area === sourceArea) {
return { return {
@ -406,6 +463,13 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
} }
return f; return f;
}); });
console.log("🔷 [FieldPanel] 변경된 필드:", {
totalFields: newFields.length,
filterFields: newFields.filter(f => f.area === "filter").length,
changedField: newFields.find(f => f.field === sourceField),
});
onFieldsChange(newFields); onFieldsChange(newFields);
} }
}; };