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

lhj #376

Merged
hjlee merged 5 commits from lhj into main 2026-01-21 17:15:48 +09:00
Conversation 0 Commits 5 Files Changed 5 +691 -162
5 changed files with 691 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,8 @@
import React, { useState, useMemo, useCallback, useEffect, useRef } from "react";
import { cn } from "@/lib/utils";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import {
PivotGridProps,
PivotResult,
@ -50,6 +52,10 @@ import {
} from "lucide-react";
import { Button } from "@/components/ui/button";
// ==================== 상수 ====================
const PIVOT_STATE_VERSION = "1.0"; // 상태 저장 버전 (호환성 체크용)
// ==================== 유틸리티 함수 ====================
// 셀 병합 정보 계산
@ -128,7 +134,10 @@ const RowHeaderCell: React.FC<RowHeaderCellProps> = ({
<div className="flex items-center gap-1">
{row.hasChildren && (
<button
onClick={() => onToggleExpand(row.path)}
onClick={(e) => {
e.stopPropagation();
onToggleExpand(row.path);
}}
className="p-0.5 hover:bg-accent rounded"
>
{row.isExpanded ? (
@ -299,6 +308,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
// ==================== 상태 ====================
const [fields, setFields] = useState<PivotFieldConfig[]>(initialFields);
// 초기 필드 설정 저장 (초기화용)
const initialFieldsRef = useRef<PivotFieldConfig[]>(initialFields);
const [pivotState, setPivotState] = useState<PivotGridState>({
expandedRowPaths: [],
expandedColumnPaths: [],
@ -344,41 +355,44 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
const [resizeStartX, setResizeStartX] = useState<number>(0);
const [resizeStartWidth, setResizeStartWidth] = useState<number>(0);
// 외부 fields 변경 시 동기화
useEffect(() => {
if (initialFields.length > 0) {
setFields(initialFields);
}
}, [initialFields]);
// 상태 저장 키
const stateStorageKey = `pivot-state-${title || "default"}`;
const persistSettingKey = `pivot-persist-${title || "default"}`;
// 상태 저장 (localStorage)
const saveStateToStorage = useCallback(() => {
if (typeof window === "undefined") return;
const stateToSave = {
fields,
pivotState,
sortConfig,
columnWidths,
};
localStorage.setItem(stateStorageKey, JSON.stringify(stateToSave));
}, [fields, pivotState, sortConfig, columnWidths, stateStorageKey]);
// 상태 유지 설정 (체크박스용)
const [persistState, setPersistState] = useState<boolean>(() => {
if (typeof window === "undefined") return true;
const saved = localStorage.getItem(persistSettingKey);
return saved !== null ? saved === "true" : true; // 기본값 true
});
// 상태 복원 (localStorage) - 프로덕션 안전성 강화
// 복원 완료 여부 (initialFields 덮어쓰기 방지)
const [isStateRestored, setIsStateRestored] = useState(false);
// 상태 복원 (localStorage) - 마운트 시 한 번만 실행
useEffect(() => {
if (typeof window === "undefined") return;
// 상태 유지가 꺼져 있으면 복원하지 않음
if (!persistState) {
localStorage.removeItem(stateStorageKey);
setIsStateRestored(true);
return;
}
try {
const savedState = localStorage.getItem(stateStorageKey);
if (!savedState) return;
if (!savedState) {
setIsStateRestored(true);
return;
}
const parsed = JSON.parse(savedState);
// 버전 체크 - 버전이 다르면 이전 상태 무시
if (parsed.version !== PIVOT_STATE_VERSION) {
localStorage.removeItem(stateStorageKey);
setIsStateRestored(true);
return;
}
@ -424,7 +438,72 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
// 손상된 상태는 제거
localStorage.removeItem(stateStorageKey);
}
}, [stateStorageKey]);
setIsStateRestored(true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // 마운트 시 한 번만 실행
// 외부 fields 변경 시 동기화 (복원이 완료된 후에만, 저장된 상태가 없을 때만)
useEffect(() => {
if (!isStateRestored) return; // 복원 완료 전에는 무시
// 저장된 상태가 있으면 initialFields로 덮어쓰지 않음
if (typeof window !== "undefined") {
const savedState = localStorage.getItem(stateStorageKey);
if (savedState) return; // 이미 저장된 상태가 있으면 무시
}
if (initialFields.length > 0) {
setFields(initialFields);
}
// persistState는 의존성에서 제외 - 체크박스 변경 시 현재 상태 유지
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [initialFields, isStateRestored, stateStorageKey]);
// 상태 유지 설정 저장 + 켜질 때 현재 상태 즉시 저장
useEffect(() => {
if (typeof window === "undefined") return;
localStorage.setItem(persistSettingKey, String(persistState));
// 상태 유지를 켜면 현재 상태를 즉시 저장
if (persistState && isStateRestored && fields.length > 0) {
const stateToSave = {
version: PIVOT_STATE_VERSION,
fields,
pivotState,
sortConfig,
columnWidths,
};
localStorage.setItem(stateStorageKey, JSON.stringify(stateToSave));
}
// 상태 유지를 끄면 저장된 상태 삭제
if (!persistState) {
localStorage.removeItem(stateStorageKey);
}
}, [persistState, persistSettingKey, isStateRestored, fields, pivotState, sortConfig, columnWidths, stateStorageKey]);
// 상태 저장 (localStorage)
const saveStateToStorage = useCallback(() => {
if (typeof window === "undefined" || !persistState) return;
const stateToSave = {
version: PIVOT_STATE_VERSION,
fields,
pivotState,
sortConfig,
columnWidths,
};
localStorage.setItem(stateStorageKey, JSON.stringify(stateToSave));
}, [fields, pivotState, sortConfig, columnWidths, stateStorageKey, persistState]);
// 상태 변경 시 자동 저장 (복원 완료 후에만)
useEffect(() => {
if (!persistState || !isStateRestored) return;
// 초기 로드 후에만 저장 (빈 필드일 때는 저장 안 함)
if (fields.length > 0) {
saveStateToStorage();
}
}, [fields, pivotState, sortConfig, columnWidths, persistState, isStateRestored, saveStateToStorage]);
// 데이터
const data = externalData || [];
@ -500,9 +579,9 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
const filteredData = useMemo(() => {
if (!data || data.length === 0) return data;
// 필터 영역의 필드들로 데이터 필터링
// 모든 영역(행/열/필터)의 필터 값이 있는 필드로 데이터 필터링
const activeFilters = fields.filter(
(f) => f.area === "filter" && f.filterValues && f.filterValues.length > 0
(f) => f.filterValues && f.filterValues.length > 0
);
if (activeFilters.length === 0) return data;
@ -1129,6 +1208,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
onFieldsChange={handleFieldsChange}
collapsed={!showFieldPanel}
onToggleCollapse={() => setShowFieldPanel(!showFieldPanel)}
initialFields={initialFieldsRef.current}
/>
{/* 안내 메시지 */}
@ -1170,7 +1250,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
);
}
const { flatColumns, dataMatrix, grandTotals } = pivotResult;
const { flatColumns, dataMatrix, grandTotals, columnHeaderLevels } = pivotResult;
// ==================== 키보드 네비게이션 ====================
@ -1405,6 +1485,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
onFieldsChange={handleFieldsChange}
collapsed={!showFieldPanel}
onToggleCollapse={() => setShowFieldPanel(!showFieldPanel)}
initialFields={initialFieldsRef.current}
/>
{/* 헤더 툴바 */}
@ -1466,6 +1547,22 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
</Button>
</>
)}
{/* 상태 유지 체크박스 */}
<div className="flex items-center gap-1.5 ml-2 pl-2 border-l">
<Checkbox
id="persist-state"
checked={persistState}
onCheckedChange={(checked) => setPersistState(checked === true)}
className="h-3.5 w-3.5"
/>
<Label
htmlFor="persist-state"
className="text-xs text-muted-foreground cursor-pointer whitespace-nowrap"
>
상태 유지
</Label>
</div>
{/* 차트 토글 */}
{chartConfig && (
@ -1685,137 +1782,224 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
>
<table ref={tableRef} className="w-full border-collapse">
<thead>
{/* 열 헤더 */}
<tr className="bg-background">
{/* 좌상단 코너 (행 필드 라벨 + 필터) */}
<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"
)}
rowSpan={columnFields.length > 0 ? 2 : 1}
>
<div className="flex items-center gap-1 flex-wrap">
{rowFields.map((f, idx) => (
<div key={f.field} className="flex items-center gap-0.5 group">
<span>{f.caption}</span>
<FilterPopup
field={f}
data={data}
onFilterChange={(field, values, type) => {
const newFields = fields.map((fld) =>
fld.field === field.field && fld.area === "row"
? { ...fld, filterValues: values, filterType: type }
: fld
);
handleFieldsChange(newFields);
}}
trigger={
<button
className={cn(
"p-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity",
"hover:bg-accent",
f.filterValues && f.filterValues.length > 0 && "opacity-100 text-primary"
)}
>
<Filter className="h-3 w-3" />
</button>
}
/>
{idx < rowFields.length - 1 && <span className="mx-0.5 text-muted-foreground">/</span>}
</div>
{/* 다중 행 열 헤더 */}
{columnHeaderLevels.length > 0 ? (
// 열 필드가 있는 경우: 각 레벨별로 행 생성
columnHeaderLevels.map((levelCells, levelIdx) => (
<tr key={`col-level-${levelIdx}`} className="bg-background">
{/* 좌상단 코너 (첫 번째 레벨에만 표시) */}
{levelIdx === 0 && (
<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"
)}
rowSpan={columnHeaderLevels.length + (dataFields.length > 1 ? 1 : 0)}
>
<div className="flex items-center gap-1 flex-wrap">
{rowFields.map((f, idx) => (
<div key={f.field} className="flex items-center gap-0.5 group">
<span>{f.caption}</span>
<FilterPopup
field={f}
data={data}
onFilterChange={(field, values, type) => {
const newFields = fields.map((fld) =>
fld.field === field.field && fld.area === "row"
? { ...fld, filterValues: values, filterType: type }
: fld
);
handleFieldsChange(newFields);
}}
trigger={
<button
className={cn(
"p-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity",
"hover:bg-accent",
f.filterValues && f.filterValues.length > 0 && "opacity-100 text-primary"
)}
>
<Filter className="h-3 w-3" />
</button>
}
/>
{idx < rowFields.length - 1 && <span className="mx-0.5 text-muted-foreground">/</span>}
</div>
))}
{rowFields.length === 0 && <span>항목</span>}
</div>
</th>
)}
{/* 열 헤더 셀 - 해당 레벨 */}
{levelCells.map((cell, cellIdx) => (
<th
key={`${levelIdx}-${cellIdx}`}
className={cn(
"border-r border-b border-border relative",
"px-2 py-1 text-center text-xs font-medium",
"bg-background sticky top-0 z-10",
levelIdx === columnHeaderLevels.length - 1 && dataFields.length === 1 && "cursor-pointer hover:bg-accent/50"
)}
colSpan={cell.colSpan * (dataFields.length || 1)}
>
<div className="flex items-center justify-center gap-1">
<span>{cell.caption || "(전체)"}</span>
{levelIdx === columnHeaderLevels.length - 1 && dataFields.length === 1 && (
<SortIcon field={dataFields[0].field} />
)}
</div>
</th>
))}
{rowFields.length === 0 && <span>항목</span>}
</div>
</th>
{/* 열 헤더 셀 */}
{flatColumns.map((col, idx) => (
<th
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",
dataFields.length === 1 && "cursor-pointer hover:bg-accent/50"
{/* 행 총계 헤더 (첫 번째 레벨에만 표시) */}
{levelIdx === 0 && 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={columnHeaderLevels.length + (dataFields.length > 1 ? 1 : 0)}
>
총계
</th>
)}
colSpan={dataFields.length || 1}
style={{ width: columnWidths[idx] || "auto", minWidth: 50 }}
onClick={dataFields.length === 1 ? () => handleSort(dataFields[0].field) : undefined}
>
<div className="flex items-center justify-center gap-1">
<span>{col.caption || "(전체)"}</span>
{dataFields.length === 1 && <SortIcon field={dataFields[0].field} />}
</div>
{/* 열 리사이즈 핸들 */}
<div
className={cn(
"absolute right-0 top-0 bottom-0 w-1 cursor-col-resize",
"hover:bg-primary/50 transition-colors",
resizingColumn === idx && "bg-primary"
)}
onMouseDown={(e) => handleResizeStart(idx, e)}
/>
</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"
{/* 열 필드 필터 (첫 번째 레벨에만 표시) */}
{levelIdx === 0 && 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"
)}
rowSpan={columnHeaderLevels.length + (dataFields.length > 1 ? 1 : 0)}
>
<div className="flex flex-col gap-0.5">
{columnFields.map((f) => (
<FilterPopup
key={f.field}
field={f}
data={data}
onFilterChange={(field, values, type) => {
const newFields = fields.map((fld) =>
fld.field === field.field && fld.area === "column"
? { ...fld, filterValues: values, filterType: type }
: fld
);
handleFieldsChange(newFields);
}}
trigger={
<button
className={cn(
"p-0.5 rounded hover:bg-accent",
f.filterValues && f.filterValues.length > 0 && "text-primary"
)}
title={`${f.caption} 필터`}
>
<Filter className="h-3 w-3" />
</button>
}
/>
))}
</div>
</th>
)}
colSpan={dataFields.length || 1}
rowSpan={dataFields.length > 1 ? 2 : 1}
>
총계
</th>
)}
{/* 열 필드 필터 (헤더 오른쪽 끝에 표시) */}
{columnFields.length > 0 && (
</tr>
))
) : (
// 열 필드가 없는 경우: 단일 행
<tr className="bg-background">
<th
className={cn(
"border-b border-border",
"px-1 py-1 text-center text-xs",
"bg-background sticky top-0 z-10"
"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"
)}
rowSpan={dataFields.length > 1 ? 2 : 1}
>
<div className="flex flex-col gap-0.5">
{columnFields.map((f) => (
<FilterPopup
key={f.field}
field={f}
data={data}
onFilterChange={(field, values, type) => {
const newFields = fields.map((fld) =>
fld.field === field.field && fld.area === "column"
? { ...fld, filterValues: values, filterType: type }
: fld
);
handleFieldsChange(newFields);
}}
trigger={
<button
className={cn(
"p-0.5 rounded hover:bg-accent",
f.filterValues && f.filterValues.length > 0 && "text-primary"
)}
title={`${f.caption} 필터`}
>
<Filter className="h-3 w-3" />
</button>
}
/>
<div className="flex items-center gap-1 flex-wrap">
{rowFields.map((f, idx) => (
<div key={f.field} className="flex items-center gap-0.5 group">
<span>{f.caption}</span>
<FilterPopup
field={f}
data={data}
onFilterChange={(field, values, type) => {
const newFields = fields.map((fld) =>
fld.field === field.field && fld.area === "row"
? { ...fld, filterValues: values, filterType: type }
: fld
);
handleFieldsChange(newFields);
}}
trigger={
<button
className={cn(
"p-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity",
"hover:bg-accent",
f.filterValues && f.filterValues.length > 0 && "opacity-100 text-primary"
)}
>
<Filter className="h-3 w-3" />
</button>
}
/>
{idx < rowFields.length - 1 && <span className="mx-0.5 text-muted-foreground">/</span>}
</div>
))}
{rowFields.length === 0 && <span>항목</span>}
</div>
</th>
)}
</tr>
{/* 열 헤더 셀 (열 필드 없을 때) */}
{flatColumns.map((col, idx) => (
<th
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",
dataFields.length === 1 && "cursor-pointer hover:bg-accent/50"
)}
colSpan={dataFields.length || 1}
style={{ width: columnWidths[idx] || "auto", minWidth: 50 }}
onClick={dataFields.length === 1 ? () => handleSort(dataFields[0].field) : undefined}
>
<div className="flex items-center justify-center gap-1">
<span>{col.caption || "(전체)"}</span>
{dataFields.length === 1 && <SortIcon field={dataFields[0].field} />}
</div>
<div
className={cn(
"absolute right-0 top-0 bottom-0 w-1 cursor-col-resize",
"hover:bg-primary/50 transition-colors",
resizingColumn === idx && "bg-primary"
)}
onMouseDown={(e) => handleResizeStart(idx, e)}
/>
</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>
)}
</tr>
)}
{/* 데이터 필드 라벨 (다중 데이터 필드인 경우) */}
{dataFields.length > 1 && (

26
frontend/lib/registry/components/pivot-grid/PivotGridConfigPanel.tsx
View File

@ -16,6 +16,7 @@ import {
PivotAreaType,
AggregationType,
FieldDataType,
DateGroupInterval,
} from "./types";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
@ -202,6 +203,28 @@ const AreaDropZone: React.FC<AreaDropZoneProps> = ({
</Select>
)}
{/* 행/열 영역에서 날짜 타입일 때 그룹화 옵션 */}
{(area === "row" || area === "column") && field.dataType === "date" && (
<Select
value={field.groupInterval || "__none__"}
onValueChange={(v) => onUpdateField(idx, {
groupInterval: v === "__none__" ? undefined : v as DateGroupInterval
})}
>
<SelectTrigger className="h-6 w-16 text-xs">
<SelectValue placeholder="그룹" />
</SelectTrigger>
<SelectContent>
<SelectItem value="__none__">없음</SelectItem>
<SelectItem value="year">년</SelectItem>
<SelectItem value="quarter">분기</SelectItem>
<SelectItem value="month">월</SelectItem>
<SelectItem value="week">주</SelectItem>
<SelectItem value="day">일</SelectItem>
</SelectContent>
</Select>
)}
<Button
variant="ghost"
size="icon"
@ -295,7 +318,8 @@ export const PivotGridConfigPanel: React.FC<PivotGridConfigPanelProps> = ({
const mappedColumns: ColumnInfo[] = columnList.map((c: any) => ({
column_name: c.columnName || c.column_name,
data_type: c.dataType || c.data_type || "text",
column_comment: c.columnLabel || c.column_label || c.columnName || c.column_name,
// 라벨 우선순위: displayName > comment > columnLabel > columnName
column_comment: c.displayName || c.comment || c.columnLabel || c.column_label || c.columnName || c.column_name,
}));
setColumns(mappedColumns);
} catch (error) {

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

@ -37,6 +37,12 @@ import {
BarChart3,
GripVertical,
ChevronDown,
RotateCcw,
FilterX,
LayoutGrid,
Trash2,
Calendar,
Check,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
@ -56,6 +62,8 @@ interface FieldPanelProps {
onFieldSettingsChange?: (field: PivotFieldConfig) => void;
collapsed?: boolean;
onToggleCollapse?: () => void;
/** 초기 필드 설정 (필드 배치 초기화용) */
initialFields?: PivotFieldConfig[];
}
interface FieldChipProps {
@ -123,15 +131,33 @@ const SortableFieldChip: React.FC<FieldChipProps> = ({
transition,
};
// 필터 적용 여부 확인
const hasFilter = field.filterValues && field.filterValues.length > 0;
const filterCount = field.filterValues?.length || 0;
// 그룹화 상태 확인
const hasGrouping = field.groupInterval && field.dataType === "date";
const groupLabels: Record<string, string> = {
year: "연도",
quarter: "분기",
month: "월",
week: "주",
day: "일",
};
return (
<div
ref={setNodeRef}
style={style}
className={cn(
"inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs",
"bg-background border border-border shadow-sm",
"bg-background border shadow-sm",
"hover:bg-accent/50 transition-colors",
isDragging && "opacity-50 shadow-lg"
isDragging && "opacity-50 shadow-lg",
// 필터 적용 시 강조 표시
hasFilter
? "border-primary bg-primary/5"
: "border-border"
)}
>
{/* 드래그 핸들 */}
@ -143,11 +169,30 @@ const SortableFieldChip: React.FC<FieldChipProps> = ({
<GripVertical className="h-3 w-3" />
</button>
{/* 필터 아이콘 (필터 적용 시) */}
{hasFilter && (
<Filter className="h-3 w-3 text-primary" />
)}
{/* 필드 라벨 */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="flex items-center gap-1 hover:text-primary">
<span className="font-medium">{field.caption}</span>
<span className={cn("font-medium", hasFilter && "text-primary")}>
{field.caption}
</span>
{/* 그룹화 적용 표시 */}
{hasGrouping && (
<span className="bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 text-[10px] px-1 rounded">
{groupLabels[field.groupInterval!]}
</span>
)}
{/* 필터 적용 개수 배지 */}
{hasFilter && (
<span className="bg-primary text-primary-foreground text-[10px] px-1 rounded">
{filterCount}
</span>
)}
{field.area === "data" && field.summaryType && (
<span className="text-muted-foreground">
({getSummaryLabel(field.summaryType)})
@ -197,6 +242,59 @@ const SortableFieldChip: React.FC<FieldChipProps> = ({
<DropdownMenuSeparator />
</>
)}
{/* 날짜 그룹화 옵션 (행/열 영역의 날짜 타입 필드만) */}
{(field.area === "row" || field.area === "column") &&
field.dataType === "date" && (
<>
<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground flex items-center gap-1">
<Calendar className="h-3 w-3" />
날짜 그룹화
</div>
<DropdownMenuItem
onClick={() => onSettingsChange?.({ ...field, groupInterval: undefined })}
className="pl-6"
>
{!field.groupInterval && <Check className="h-3 w-3 mr-2" />}
<span className={!field.groupInterval ? "font-medium" : ""}>그룹화 없음</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => onSettingsChange?.({ ...field, groupInterval: "year" })}
className="pl-6"
>
{field.groupInterval === "year" && <Check className="h-3 w-3 mr-2" />}
<span className={field.groupInterval === "year" ? "font-medium" : ""}>연도별</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => onSettingsChange?.({ ...field, groupInterval: "quarter" })}
className="pl-6"
>
{field.groupInterval === "quarter" && <Check className="h-3 w-3 mr-2" />}
<span className={field.groupInterval === "quarter" ? "font-medium" : ""}>분기별</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => onSettingsChange?.({ ...field, groupInterval: "month" })}
className="pl-6"
>
{field.groupInterval === "month" && <Check className="h-3 w-3 mr-2" />}
<span className={field.groupInterval === "month" ? "font-medium" : ""}>월별</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => onSettingsChange?.({ ...field, groupInterval: "week" })}
className="pl-6"
>
{field.groupInterval === "week" && <Check className="h-3 w-3 mr-2" />}
<span className={field.groupInterval === "week" ? "font-medium" : ""}>주별</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => onSettingsChange?.({ ...field, groupInterval: "day" })}
className="pl-6"
>
{field.groupInterval === "day" && <Check className="h-3 w-3 mr-2" />}
<span className={field.groupInterval === "day" ? "font-medium" : ""}>일별</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
</>
)}
<DropdownMenuItem
onClick={() =>
onSettingsChange?.({
@ -208,6 +306,19 @@ const SortableFieldChip: React.FC<FieldChipProps> = ({
{field.sortOrder === "asc" ? "내림차순 정렬" : "오름차순 정렬"}
</DropdownMenuItem>
<DropdownMenuSeparator />
{/* 필터 초기화 (필터가 적용된 경우에만 표시) */}
{hasFilter && (
<>
<DropdownMenuItem
onClick={() => onSettingsChange?.({ ...field, filterValues: [] })}
className="text-orange-600"
>
<Filter className="h-3 w-3 mr-2" />
필터 초기화 ({filterCount}개 선택됨)
</DropdownMenuItem>
<DropdownMenuSeparator />
</>
)}
<DropdownMenuItem
onClick={() => onSettingsChange?.({ ...field, visible: false })}
>
@ -326,10 +437,73 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
onFieldSettingsChange,
collapsed = false,
onToggleCollapse,
initialFields,
}) => {
const [activeId, setActiveId] = useState<string | null>(null);
const [overArea, setOverArea] = useState<PivotAreaType | null>(null);
// 필터만 초기화
const handleResetFilters = () => {
const newFields = fields.map((f) => ({
...f,
filterValues: [],
filterType: "include" as const,
}));
onFieldsChange(newFields);
};
// 필드 배치 초기화 (initialFields가 있으면 사용, 없으면 모든 필드를 row로)
const handleResetLayout = () => {
if (initialFields && initialFields.length > 0) {
// initialFields의 영역 배치를 복원하되 현재 필터 값은 유지
const newFields = fields.map((f) => {
const initial = initialFields.find((i) => i.field === f.field);
if (initial) {
return {
...f,
area: initial.area,
areaIndex: initial.areaIndex,
};
}
return f;
});
onFieldsChange(newFields);
} else {
// 기본값: 숫자는 data, 나머지는 row로
const newFields = fields.map((f, idx) => ({
...f,
area: f.dataType === "number" ? "data" : "row" as PivotAreaType,
areaIndex: idx,
visible: true,
}));
onFieldsChange(newFields);
}
};
// 전체 초기화 (필드 배치 + 필터)
const handleResetAll = () => {
if (initialFields && initialFields.length > 0) {
// initialFields로 완전히 복원
onFieldsChange([...initialFields]);
} else {
// 기본값으로 초기화
const newFields = fields.map((f, idx) => ({
...f,
area: f.dataType === "number" ? "data" : "row" as PivotAreaType,
areaIndex: idx,
visible: true,
filterValues: [],
filterType: "include" as const,
}));
onFieldsChange(newFields);
}
};
// 필터가 적용된 필드 개수
const filteredFieldCount = fields.filter(
(f) => f.filterValues && f.filterValues.length > 0
).length;
const sensors = useSensors(
useSensor(PointerSensor, {
activationConstraint: {
@ -576,19 +750,60 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
/>
</div>
{/* 접기 버튼 */}
{onToggleCollapse && (
<div className="flex justify-center mt-1.5">
{/* 하단 버튼 영역 */}
<div className="flex items-center justify-between mt-1.5">
{/* 초기화 드롭다운 */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="sm"
className="text-xs h-6 px-2 text-muted-foreground hover:text-foreground"
>
<RotateCcw className="h-3 w-3 mr-1" />
초기화
{filteredFieldCount > 0 && (
<span className="ml-1 bg-orange-500 text-white text-[10px] px-1 rounded">
{filteredFieldCount}
</span>
)}
<ChevronDown className="h-3 w-3 ml-1" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-48">
<DropdownMenuItem onClick={handleResetFilters}>
<FilterX className="h-3.5 w-3.5 mr-2 text-orange-500" />
필터만 초기화
{filteredFieldCount > 0 && (
<span className="ml-auto text-xs text-muted-foreground">
({filteredFieldCount}개)
</span>
)}
</DropdownMenuItem>
<DropdownMenuItem onClick={handleResetLayout}>
<LayoutGrid className="h-3.5 w-3.5 mr-2 text-blue-500" />
필드 배치 초기화
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={handleResetAll} className="text-destructive">
<Trash2 className="h-3.5 w-3.5 mr-2" />
전체 초기화
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
{/* 접기 버튼 */}
{onToggleCollapse && (
<Button
variant="ghost"
size="sm"
onClick={onToggleCollapse}
className="text-xs h-5 px-2"
className="text-xs h-6 px-2"
>
필드 패널 접기
</Button>
</div>
)}
)}
</div>
</div>
{/* 드래그 오버레이 */}

14
frontend/lib/registry/components/pivot-grid/types.ts
View File

@ -304,6 +304,7 @@ export interface PivotHeaderNode {
level: number; // 깊이
children?: PivotHeaderNode[]; // 자식 노드
isExpanded: boolean; // 확장 상태
hasChildren: boolean; // 자식 존재 가능 여부 (다음 레벨 필드 있음)
path: string[]; // 경로 (드릴다운용)
subtotal?: PivotCellValue[]; // 소계
span?: number; // colspan/rowspan
@ -330,8 +331,11 @@ export interface PivotResult {
// 플랫 행 목록 (렌더링용)
flatRows: PivotFlatRow[];
// 플랫 열 목록 (렌더링용)
// 플랫 열 목록 (렌더링용) - 리프 노드만
flatColumns: PivotFlatColumn[];
// 열 헤더 레벨별 (다중 행 헤더용)
columnHeaderLevels: PivotColumnHeaderCell[][];
// 총합계
grandTotals: {
@ -360,6 +364,14 @@ export interface PivotFlatColumn {
isTotal?: boolean;
}
// 열 헤더 셀 (다중 행 헤더용)
export interface PivotColumnHeaderCell {
caption: string; // 표시 텍스트
colSpan: number; // 병합할 열 수
path: string[]; // 전체 경로
level: number; // 레벨 (0부터 시작)
}
// ==================== 상태 관리 ====================
export interface PivotGridState {

108
frontend/lib/registry/components/pivot-grid/utils/pivotEngine.ts
View File

@ -10,6 +10,7 @@ import {
PivotFlatRow,
PivotFlatColumn,
PivotCellValue,
PivotColumnHeaderCell,
DateGroupInterval,
AggregationType,
SummaryDisplayMode,
@ -76,6 +77,31 @@ export function pathToKey(path: string[]): string {
return path.join("||");
}
/**
* 모든 가능한 경로 생성 (열 전체 확장용)
*/
function generateAllPaths(
data: Record<string, any>[],
fields: PivotFieldConfig[]
): string[] {
const allPaths: string[] = [];
// 각 레벨까지의 고유 경로 수집
for (let depth = 1; depth <= fields.length; depth++) {
const fieldsAtDepth = fields.slice(0, depth);
const pathSet = new Set<string>();
data.forEach((row) => {
const path = fieldsAtDepth.map((f) => getFieldValue(row, f));
pathSet.add(pathToKey(path));
});
pathSet.forEach((pathKey) => allPaths.push(pathKey));
}
return allPaths;
}
/**
* 키를 경로로 변환
*/
@ -129,6 +155,7 @@ function buildHeaderTree(
caption: key,
level: 0,
isExpanded: expandedPaths.has(pathKey),
hasChildren: remainingFields.length > 0, // 다음 레벨 필드가 있으면 자식 있음
path: path,
span: 1,
};
@ -195,6 +222,7 @@ function buildChildNodes(
caption: key,
level: level,
isExpanded: expandedPaths.has(pathKey),
hasChildren: remainingFields.length > 0, // 다음 레벨 필드가 있으면 자식 있음
path: path,
span: 1,
};
@ -238,7 +266,7 @@ function flattenRows(nodes: PivotHeaderNode[]): PivotFlatRow[] {
level: node.level,
caption: node.caption,
isExpanded: node.isExpanded,
hasChildren: !!(node.children && node.children.length > 0),
hasChildren: node.hasChildren, // 노드에서 직접 가져옴 (다음 레벨 필드 존재 여부 기준)
});
if (node.isExpanded && node.children) {
@ -324,6 +352,66 @@ function getMaxColumnLevel(
return Math.min(maxLevel, totalFields - 1);
}
/**
* 다중 행 열 헤더 생성
* 각 레벨별로 셀과 colSpan 정보를 반환
*/
function buildColumnHeaderLevels(
nodes: PivotHeaderNode[],
totalLevels: number
): PivotColumnHeaderCell[][] {
if (totalLevels === 0 || nodes.length === 0) {
return [];
}
const levels: PivotColumnHeaderCell[][] = Array.from(
{ length: totalLevels },
() => []
);
// 리프 노드 수 계산 (colSpan 계산용)
function countLeaves(node: PivotHeaderNode): number {
if (!node.children || node.children.length === 0 || !node.isExpanded) {
return 1;
}
return node.children.reduce((sum, child) => sum + countLeaves(child), 0);
}
// 트리 순회하며 각 레벨에 셀 추가
function traverse(node: PivotHeaderNode, level: number) {
const colSpan = countLeaves(node);
levels[level].push({
caption: node.caption,
colSpan,
path: node.path,
level,
});
if (node.children && node.isExpanded) {
for (const child of node.children) {
traverse(child, level + 1);
}
} else if (level < totalLevels - 1) {
// 확장되지 않은 노드는 다음 레벨들에 빈 셀로 채움
for (let i = level + 1; i < totalLevels; i++) {
levels[i].push({
caption: "",
colSpan,
path: node.path,
level: i,
});
}
}
}
for (const node of nodes) {
traverse(node, 0);
}
return levels;
}
// ==================== 데이터 매트릭스 생성 ====================
/**
@ -733,12 +821,11 @@ export function processPivotData(
uniqueValues.forEach((val) => expandedRowSet.add(val));
}
if (expandedColumnPaths.length === 0 && columnFields.length > 0) {
const firstField = columnFields[0];
const uniqueValues = new Set(
filteredData.map((row) => getFieldValue(row, firstField))
);
uniqueValues.forEach((val) => expandedColSet.add(val));
// 열은 항상 전체 확장 (열 헤더는 확장/축소 UI가 없음)
// 모든 가능한 열 경로를 확장 상태로 설정
if (columnFields.length > 0) {
const allColumnPaths = generateAllPaths(filteredData, columnFields);
allColumnPaths.forEach((pathKey) => expandedColSet.add(pathKey));
}
// 헤더 트리 생성
@ -786,6 +873,12 @@ export function processPivotData(
grandTotals.grand
);
// 다중 행 열 헤더 생성
const columnHeaderLevels = buildColumnHeaderLevels(
columnHeaders,
columnFields.length
);
return {
rowHeaders,
columnHeaders,
@ -797,6 +890,7 @@ export function processPivotData(
caption: path[path.length - 1] || "",
span: 1,
})),
columnHeaderLevels,
grandTotals,
};
}