새로고침해도 상태 유지하는 선택박스 만들었음
This commit is contained in:
leeheejin
@@ -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 ? (
|
||||
@@ -346,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;
|
||||
}
|
||||
|
||||
@@ -426,7 +438,53 @@ 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; // 복원 완료 전에는 무시
|
||||
|
||||
// persistState가 켜져있고 저장된 상태가 있으면 initialFields로 덮어쓰지 않음
|
||||
if (persistState && typeof window !== "undefined") {
|
||||
const savedState = localStorage.getItem(stateStorageKey);
|
||||
if (savedState) return; // 이미 저장된 상태가 있으면 무시
|
||||
}
|
||||
|
||||
if (initialFields.length > 0) {
|
||||
setFields(initialFields);
|
||||
}
|
||||
}, [initialFields, isStateRestored, persistState, stateStorageKey]);
|
||||
|
||||
// 상태 유지 설정 저장
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
localStorage.setItem(persistSettingKey, String(persistState));
|
||||
}, [persistState, persistSettingKey]);
|
||||
|
||||
// 상태 저장 (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 || [];
|
||||
@@ -1173,7 +1231,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
||||
);
|
||||
}
|
||||
|
||||
const { flatColumns, dataMatrix, grandTotals } = pivotResult;
|
||||
const { flatColumns, dataMatrix, grandTotals, columnHeaderLevels } = pivotResult;
|
||||
|
||||
// ==================== 키보드 네비게이션 ====================
|
||||
|
||||
@@ -1470,6 +1528,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 && (
|
||||
@@ -1689,137 +1763,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 && (
|
||||
|
||||
Reference in New Issue
Block a user