Merge pull request 'lhj' (#364) from lhj into main
Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/364
This commit is contained in:
commit
160ad87395
|
|
@ -432,10 +432,20 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
|
||||
// 필터 영역 필드
|
||||
const filterFields = useMemo(
|
||||
() =>
|
||||
fields
|
||||
() => {
|
||||
const result = fields
|
||||
.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]
|
||||
);
|
||||
|
||||
|
|
@ -526,11 +536,16 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
});
|
||||
|
||||
return result;
|
||||
}, [filteredData, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]);
|
||||
}, [
|
||||
filteredData,
|
||||
fields,
|
||||
JSON.stringify(pivotState.expandedRowPaths),
|
||||
JSON.stringify(pivotState.expandedColumnPaths)
|
||||
]);
|
||||
|
||||
// 🆕 초기 로드 시 첫 레벨 자동 확장
|
||||
useEffect(() => {
|
||||
if (pivotResult && pivotResult.flatRows.length > 0) {
|
||||
if (pivotResult && pivotResult.flatRows.length > 0 && !isInitialExpanded) {
|
||||
console.log("🔶 피벗 결과 생성됨:", {
|
||||
flatRowsCount: pivotResult.flatRows.length,
|
||||
expandedRowPaths: pivotState.expandedRowPaths.length,
|
||||
|
|
@ -542,10 +557,10 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
|
||||
console.log("🔶 첫 레벨 행 (level 0, hasChildren):", firstLevelRows.map(r => ({ path: r.path, caption: r.caption })));
|
||||
|
||||
// 초기 확장이 안 되어 있고, 첫 레벨 행이 있으면 자동 확장
|
||||
if (!isInitialExpanded && firstLevelRows.length > 0) {
|
||||
// 첫 레벨 행이 있으면 자동 확장
|
||||
if (firstLevelRows.length > 0) {
|
||||
const firstLevelPaths = firstLevelRows.map(row => row.path);
|
||||
console.log("🔶 초기 자동 확장 실행:", firstLevelPaths);
|
||||
console.log("🔶 초기 자동 확장 실행 (한 번만):", firstLevelPaths);
|
||||
setPivotState(prev => ({
|
||||
...prev,
|
||||
expandedRowPaths: firstLevelPaths,
|
||||
|
|
@ -553,7 +568,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
setIsInitialExpanded(true);
|
||||
}
|
||||
}
|
||||
}, [pivotResult, isInitialExpanded, pivotState.expandedRowPaths.length]);
|
||||
}, [pivotResult, isInitialExpanded]);
|
||||
|
||||
// 조건부 서식용 전체 값 수집
|
||||
const allCellValues = useMemo(() => {
|
||||
|
|
@ -710,7 +725,15 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
// 필드 변경
|
||||
const handleFieldsChange = useCallback(
|
||||
(newFields: PivotFieldConfig[]) => {
|
||||
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),
|
||||
changedFields: newFields.filter(f => f.area === "filter"),
|
||||
});
|
||||
console.log("🔷 [handleFieldsChange] setFields 호출 전");
|
||||
setFields(newFields);
|
||||
console.log("🔷 [handleFieldsChange] setFields 호출 후");
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
|
@ -749,15 +772,36 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
[onExpandChange]
|
||||
);
|
||||
|
||||
// 전체 확장
|
||||
// 전체 확장 (재귀적으로 모든 레벨 확장)
|
||||
const handleExpandAll = useCallback(() => {
|
||||
if (!pivotResult) return;
|
||||
|
||||
const allRowPaths: string[][] = [];
|
||||
pivotResult.flatRows.forEach((row) => {
|
||||
if (row.hasChildren) {
|
||||
allRowPaths.push(row.path);
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
// 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) => ({
|
||||
|
|
@ -765,15 +809,24 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
expandedRowPaths: allRowPaths,
|
||||
expandedColumnPaths: [],
|
||||
}));
|
||||
}, [pivotResult]);
|
||||
}, [pivotResult, fields, filteredData]);
|
||||
|
||||
// 전체 축소
|
||||
const handleCollapseAll = useCallback(() => {
|
||||
setPivotState((prev) => ({
|
||||
console.log("🔷 [handleCollapseAll] 전체 축소 실행");
|
||||
|
||||
setPivotState((prev) => {
|
||||
console.log("🔷 [handleCollapseAll] 이전 상태:", {
|
||||
expandedRowPaths: prev.expandedRowPaths.length,
|
||||
expandedColumnPaths: prev.expandedColumnPaths.length,
|
||||
});
|
||||
|
||||
return {
|
||||
...prev,
|
||||
expandedRowPaths: [],
|
||||
expandedColumnPaths: [],
|
||||
}));
|
||||
};
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 셀 클릭
|
||||
|
|
@ -988,10 +1041,12 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
console.log("피벗 상태가 저장되었습니다.");
|
||||
}, [saveStateToStorage]);
|
||||
|
||||
// 상태 초기화
|
||||
// 상태 초기화 (확장/축소, 정렬, 필터만 초기화, 필드 설정은 유지)
|
||||
const handleResetState = useCallback(() => {
|
||||
// 로컬 스토리지에서 상태 제거
|
||||
localStorage.removeItem(stateStorageKey);
|
||||
setFields(initialFields);
|
||||
|
||||
// 확장/축소, 정렬, 필터 상태만 초기화
|
||||
setPivotState({
|
||||
expandedRowPaths: [],
|
||||
expandedColumnPaths: [],
|
||||
|
|
@ -1002,7 +1057,10 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
setColumnWidths({});
|
||||
setSelectedCell(null);
|
||||
setSelectionRange(null);
|
||||
}, [stateStorageKey, initialFields]);
|
||||
|
||||
// 🆕 필드 설정은 유지 (initialFields로 되돌리지 않음)
|
||||
console.log("🔷 피벗 상태가 초기화되었습니다 (필드 설정은 유지)");
|
||||
}, [stateStorageKey]);
|
||||
|
||||
// 필드 숨기기/표시 상태
|
||||
const [hiddenFields, setHiddenFields] = useState<Set<string>>(new Set());
|
||||
|
|
@ -1391,8 +1449,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 px-2"
|
||||
onClick={handleExpandAll}
|
||||
title="전체 확장"
|
||||
onClick={handleCollapseAll}
|
||||
title="전체 축소"
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</Button>
|
||||
|
|
@ -1401,8 +1459,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 px-2"
|
||||
onClick={handleCollapseAll}
|
||||
title="전체 축소"
|
||||
onClick={handleExpandAll}
|
||||
title="전체 확장"
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
|
|
@ -1582,19 +1640,25 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
<button
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-2 py-1 rounded text-xs",
|
||||
"border transition-colors",
|
||||
"border transition-colors max-w-xs",
|
||||
isFiltered
|
||||
? "bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-200"
|
||||
: "bg-background border-border hover:bg-accent"
|
||||
)}
|
||||
title={isFiltered ? `${filterField.caption}: ${selectedValues.join(", ")}` : filterField.caption}
|
||||
>
|
||||
<span>{filterField.caption}</span>
|
||||
{isFiltered && (
|
||||
<span className="bg-orange-500 text-white px-1 rounded text-[10px]">
|
||||
{selectedValues.length}
|
||||
<span className="font-medium">{filterField.caption}:</span>
|
||||
{isFiltered ? (
|
||||
<span className="truncate">
|
||||
{selectedValues.length <= 2
|
||||
? selectedValues.join(", ")
|
||||
: `${selectedValues.slice(0, 2).join(", ")} 외 ${selectedValues.length - 2}개`
|
||||
}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">전체</span>
|
||||
)}
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
<ChevronDown className="h-3 w-3 shrink-0" />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ import {
|
|||
horizontalListSortingStrategy,
|
||||
useSortable,
|
||||
} from "@dnd-kit/sortable";
|
||||
import { useDroppable } from "@dnd-kit/core";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { PivotFieldConfig, PivotAreaType } from "../types";
|
||||
|
|
@ -244,22 +245,31 @@ const DroppableArea: React.FC<DroppableAreaProps> = ({
|
|||
const areaFields = fields.filter((f) => f.area === area && f.visible !== false);
|
||||
const fieldIds = areaFields.map((f) => `${area}-${f.field}`);
|
||||
|
||||
// 🆕 드롭 가능 영역 설정
|
||||
const { setNodeRef, isOver: isOverDroppable } = useDroppable({
|
||||
id: area, // "filter", "column", "row", "data"
|
||||
});
|
||||
|
||||
const finalIsOver = isOver || isOverDroppable;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
className={cn(
|
||||
"flex-1 min-h-[44px] rounded border border-dashed p-1.5",
|
||||
"transition-colors duration-200",
|
||||
"flex-1 min-h-[60px] rounded border-2 border-dashed p-2",
|
||||
"transition-all duration-200",
|
||||
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}
|
||||
>
|
||||
{/* 영역 헤더 */}
|
||||
<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}
|
||||
<span>{title}</span>
|
||||
{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}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -267,11 +277,16 @@ const DroppableArea: React.FC<DroppableAreaProps> = ({
|
|||
|
||||
{/* 필드 목록 */}
|
||||
<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 ? (
|
||||
<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>
|
||||
</div>
|
||||
) : (
|
||||
areaFields.map((field) => (
|
||||
<SortableFieldChip
|
||||
|
|
@ -339,31 +354,67 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
|
|||
return;
|
||||
}
|
||||
|
||||
// 드롭 영역 감지
|
||||
// 드롭 영역 감지 (영역 자체의 ID를 우선 확인)
|
||||
const overId = over.id as string;
|
||||
|
||||
// 1. overId가 영역 자체인 경우 (filter, column, row, data)
|
||||
if (["filter", "column", "row", "data"].includes(overId)) {
|
||||
setOverArea(overId as PivotAreaType);
|
||||
console.log("🔷 [handleDragOver] 영역 감지:", overId);
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. overId가 필드인 경우 (예: row-part_name)
|
||||
const targetArea = overId.split("-")[0] as PivotAreaType;
|
||||
if (["filter", "column", "row", "data"].includes(targetArea)) {
|
||||
setOverArea(targetArea);
|
||||
console.log("🔷 [handleDragOver] 필드 영역 감지:", targetArea);
|
||||
}
|
||||
};
|
||||
|
||||
// 드래그 종료
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
const currentOverArea = overArea; // handleDragOver에서 감지한 영역 저장
|
||||
setActiveId(null);
|
||||
setOverArea(null);
|
||||
|
||||
if (!over) return;
|
||||
if (!over) {
|
||||
console.log("🔷 [FieldPanel] 드롭 대상 없음");
|
||||
return;
|
||||
}
|
||||
|
||||
const activeId = active.id as string;
|
||||
const overId = over.id as string;
|
||||
|
||||
console.log("🔷 [FieldPanel] 드래그 종료:", {
|
||||
activeId,
|
||||
overId,
|
||||
detectedOverArea: currentOverArea,
|
||||
});
|
||||
|
||||
// 필드 정보 파싱
|
||||
const [sourceArea, sourceField] = activeId.split("-") as [
|
||||
PivotAreaType,
|
||||
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) {
|
||||
|
|
@ -396,6 +447,12 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
|
|||
|
||||
// 다른 영역으로 이동
|
||||
if (["filter", "column", "row", "data"].includes(targetArea)) {
|
||||
console.log("🔷 [FieldPanel] 영역 이동:", {
|
||||
field: sourceField,
|
||||
from: sourceArea,
|
||||
to: targetArea,
|
||||
});
|
||||
|
||||
const newFields = fields.map((f) => {
|
||||
if (f.field === sourceField && f.area === sourceArea) {
|
||||
return {
|
||||
|
|
@ -406,6 +463,13 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
|
|||
}
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue