jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

피벗수정오늘최종

Browse Source
This commit is contained in:
leeheejin
2026-01-16 18:14:55 +09:00
parent ad3b853d04
commit 49f67451eb
5 changed files with 200 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -296,24 +296,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
onFieldDrop,
onExpandChange,
}) => {
// 디버깅 로그
console.log("🔶 PivotGridComponent props:", {
title,
hasExternalData: !!externalData,
externalDataLength: externalData?.length,
initialFieldsLength: initialFields?.length,
});
// 🆕 데이터 샘플 확인
if (externalData && externalData.length > 0) {
console.log("🔶 첫 번째 데이터 샘플:", externalData[0]);
console.log("🔶 전체 데이터 개수:", externalData.length);
}
// 🆕 필드 설정 확인
if (initialFields && initialFields.length > 0) {
console.log("🔶 필드 설정:", initialFields);
}
// ==================== 상태 ====================
const [fields, setFields] = useState<PivotFieldConfig[]>(initialFields);
@@ -406,10 +388,31 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
}
}
// 나머지 상태 복원
if (parsed.pivotState) setPivotState(parsed.pivotState);
// 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) setColumnWidths(parsed.columnWidths);
if (parsed.columnWidths && typeof parsed.columnWidths === "object") {
setColumnWidths(parsed.columnWidths);
}
} catch (e) {
console.warn("피벗 상태 복원 실패, localStorage 초기화:", e);
// 손상된 상태는 제거
@@ -452,14 +455,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
const result = fields
.filter((f) => f.area === "filter" && f.visible !== false)
.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]
@@ -524,51 +519,54 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
// ==================== 피벗 처리 ====================
const pivotResult = useMemo<PivotResult | null>(() => {
if (!filteredData || filteredData.length === 0 || fields.length === 0) {
try {
if (!filteredData || filteredData.length === 0 || fields.length === 0) {
return null;
}
// FieldChooser에서 이미 필드를 완전히 제거하므로 visible 필터링 불필요
// 행, 열, 데이터 영역에 필드가 하나도 없으면 null 반환 (필터는 제외)
if (fields.filter((f) => ["row", "column", "data"].includes(f.area)).length === 0) {
return null;
}
const result = processPivotData(
filteredData,
fields,
pivotState.expandedRowPaths,
pivotState.expandedColumnPaths
);
return result;
} catch (error) {
console.error("❌ [pivotResult] 피벗 처리 에러:", error);
return null;
}
// 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
);
// 🆕 피벗 결과 확인
console.log("🔶 피벗 처리 결과:", {
hasResult: !!result,
flatRowsCount: result?.flatRows?.length,
flatColumnsCount: result?.flatColumns?.length,
dataMatrixSize: result?.dataMatrix?.size,
expandedRowPaths: pivotState.expandedRowPaths.length,
expandedColumnPaths: pivotState.expandedColumnPaths.length,
});
return result;
}, [filteredData, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]);
// 초기 로드 시 첫 레벨 자동 확장
useEffect(() => {
if (pivotResult && pivotResult.flatRows.length > 0 && !isInitialExpanded) {
// 첫 레벨 행들의 경로 수집 (level 0인 행들)
const firstLevelRows = pivotResult.flatRows.filter((row) => row.level === 0 && row.hasChildren);
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) {
const firstLevelPaths = firstLevelRows.map((row) => row.path);
setPivotState((prev) => ({
...prev,
expandedRowPaths: firstLevelPaths,
}));
setIsInitialExpanded(true);
// 첫 레벨 행이 있으면 자동 확장
if (firstLevelRows.length > 0 && firstLevelRows.length < 100) {
const firstLevelPaths = firstLevelRows.map((row) => row.path);
setPivotState((prev) => ({
...prev,
expandedRowPaths: firstLevelPaths,
}));
setIsInitialExpanded(true);
} else {
// 행이 너무 많으면 자동 확장 건너뛰기
setIsInitialExpanded(true);
}
}
} catch (error) {
console.error("❌ [초기 확장] 에러:", error);
setIsInitialExpanded(true);
}
}, [pivotResult, isInitialExpanded]);
@@ -727,15 +725,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
// 필드 변경
const handleFieldsChange = useCallback(
(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);
},
[]
@@ -744,8 +733,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
// 행 확장/축소
const handleToggleRowExpand = useCallback(
(path: string[]) => {
console.log("🔶 행 확장/축소 클릭:", path);
setPivotState((prev) => {
const pathKey = pathToKey(path);
const existingIndex = prev.expandedRowPaths.findIndex(
@@ -754,16 +741,13 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
let newPaths: string[][];
if (existingIndex >= 0) {
console.log("🔶 행 축소:", path);
newPaths = prev.expandedRowPaths.filter(
(_, i) => i !== existingIndex
);
} else {
console.log("🔶 행 확장:", path);
newPaths = [...prev.expandedRowPaths, path];
}
console.log("🔶 새로운 확장 경로:", newPaths);
onExpandChange?.(newPaths);
return {
@@ -777,59 +761,58 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
// 전체 확장 (재귀적으로 모든 레벨 확장)
const handleExpandAll = useCallback(() => {
if (!pivotResult) {
console.log("❌ [handleExpandAll] pivotResult가 없음");
return;
}
// 🆕 재귀적으로 모든 가능한 경로 생성
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);
try {
if (!pivotResult) {
return;
}
});
// Set을 배열로 변환
pathSet.forEach((pathKey) => {
allRowPaths.push(JSON.parse(pathKey));
});
// 재귀적으로 모든 가능한 경로 생성
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);
}
});
console.log("🔷 [handleExpandAll] 확장할 행:", {
totalRows: pivotResult.flatRows.length,
rowsWithChildren: allRowPaths.length,
paths: allRowPaths.slice(0, 5), // 처음 5개만 로그
});
// 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: [],
}));
setPivotState((prev) => ({
...prev,
expandedRowPaths: allRowPaths,
expandedColumnPaths: [],
}));
} catch (error) {
console.error("❌ [handleExpandAll] 에러:", error);
}
}, [pivotResult, fields, filteredData]);
// 전체 축소
const handleCollapseAll = useCallback(() => {
console.log("🔷 [handleCollapseAll] 전체 축소 실행");
setPivotState((prev) => {
console.log("🔷 [handleCollapseAll] 이전 상태:", {
expandedRowPaths: prev.expandedRowPaths.length,
expandedColumnPaths: prev.expandedColumnPaths.length,
});
return {
...prev,
expandedRowPaths: [],
expandedColumnPaths: [],
};
});
setPivotState((prev) => ({
...prev,
expandedRowPaths: [],
expandedColumnPaths: [],
}));
}, []);
// 셀 클릭