chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into feature/v2-unified-renewal

Browse Source
This commit is contained in:
kjs
2026-01-21 18:26:40 +09:00
parent e3df70d0fa e14e0bd029
commit 67f00643bc
11 changed files with 873 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
backend-node/src/services/tableManagementService.ts
View File

@@ -927,11 +927,12 @@ export class TableManagementService {
...layout.properties,
widgetType: inputType,
inputType: inputType,
// componentConfig 내부의 type도 업데이트
// componentConfig 내부의 type, inputType, webType 모두 업데이트
componentConfig: {
...layout.properties?.componentConfig,
type: newComponentType,
inputType: inputType,
webType: inputType, // 프론트엔드 SelectBasicComponent에서 카테고리 로딩 여부 판단에 사용
},
};
@@ -947,7 +948,7 @@ export class TableManagementService {
);
logger.info(
`화면 레이아웃 업데이트: screen_id=${layout.screen_id}, component_id=${layout.component_id}, widgetType=${inputType}, componentType=${newComponentType}`
`화면 레이아웃 업데이트: screen_id=${layout.screen_id}, component_id=${layout.component_id}, widgetType=${inputType}, webType=${inputType}, componentType=${newComponentType}`
);
}

294
frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
View File

@@ -8,7 +8,18 @@ import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Search, Database, RefreshCw, Settings, Plus, Activity, Trash2, Copy, Check, ChevronsUpDown } from "lucide-react";
import {
Search,
Database,
RefreshCw,
Settings,
Plus,
Activity,
Trash2,
Copy,
Check,
ChevronsUpDown,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { LoadingSpinner } from "@/components/common/LoadingSpinner";
import { toast } from "sonner";
@@ -97,11 +108,16 @@ export default function TableManagementPage() {
const [referenceTableColumns, setReferenceTableColumns] = useState<Record<string, ReferenceTableColumn[]>>({});
// 🆕 Entity 타입 Combobox 열림/닫힘 상태 (컬럼별 관리)
const [entityComboboxOpen, setEntityComboboxOpen] = useState<Record<string, {
table: boolean;
joinColumn: boolean;
displayColumn: boolean;
}>>({});
const [entityComboboxOpen, setEntityComboboxOpen] = useState<
Record<
string,
{
table: boolean;
joinColumn: boolean;
displayColumn: boolean;
}
>
>({});
// DDL 기능 관련 상태
const [createTableModalOpen, setCreateTableModalOpen] = useState(false);
@@ -337,7 +353,11 @@ export default function TableManagementPage() {
if (col.detailSettings && typeof col.detailSettings === "string") {
try {
const parsed = JSON.parse(col.detailSettings);
if (parsed.hierarchyRole === "large" || parsed.hierarchyRole === "medium" || parsed.hierarchyRole === "small") {
if (
parsed.hierarchyRole === "large" ||
parsed.hierarchyRole === "medium" ||
parsed.hierarchyRole === "small"
) {
hierarchyRole = parsed.hierarchyRole;
}
if (parsed.numberingRuleId) {
@@ -437,9 +457,9 @@ export default function TableManagementPage() {
} else {
// 기존 hierarchyRole 유지하면서 JSON 형식으로 저장
const existingHierarchyRole = hierarchyRole;
newDetailSettings = JSON.stringify({
newDetailSettings = JSON.stringify({
codeCategory: value,
hierarchyRole: existingHierarchyRole
hierarchyRole: existingHierarchyRole,
});
codeCategory = value;
codeValue = value;
@@ -595,7 +615,7 @@ export default function TableManagementPage() {
numberingRuleId: column.numberingRuleId,
hasNumberingRuleId: !!column.numberingRuleId,
});
if (column.inputType === "numbering") {
let existingSettings: Record<string, unknown> = {};
if (typeof finalDetailSettings === "string" && finalDetailSettings.trim().startsWith("{")) {
@@ -1403,63 +1423,7 @@ export default function TableManagementPage() {
)}
</>
)}
{/* 입력 타입이 'category'인 경우 2레벨 메뉴 다중 선택 */}
{column.inputType === "category" && (
<div className="space-y-2">
<label className="text-muted-foreground mb-1 block text-xs">
적용할 메뉴 (2레벨)
</label>
<div className="max-h-48 space-y-2 overflow-y-auto rounded-lg border p-3">
{secondLevelMenus.length === 0 ? (
<p className="text-muted-foreground text-xs">
2레벨 메뉴가 없습니다. 메뉴를 선택하지 않으면 모든 메뉴에서 사용 가능합니다.
</p>
) : (
secondLevelMenus.map((menu) => {
// menuObjid를 숫자로 변환하여 비교
const menuObjidNum = Number(menu.menuObjid);
const isChecked = (column.categoryMenus || []).includes(menuObjidNum);
return (
<div key={menu.menuObjid} className="flex items-center gap-2">
<input
type="checkbox"
id={`category-menu-${column.columnName}-${menu.menuObjid}`}
checked={isChecked}
onChange={(e) => {
const currentMenus = column.categoryMenus || [];
const newMenus = e.target.checked
? [...currentMenus, menuObjidNum]
: currentMenus.filter((id) => id !== menuObjidNum);
setColumns((prev) =>
prev.map((col) =>
col.columnName === column.columnName
? { ...col, categoryMenus: newMenus }
: col,
),
);
}}
className="text-primary focus:ring-ring h-4 w-4 rounded border-gray-300 focus:ring-2"
/>
<label
htmlFor={`category-menu-${column.columnName}-${menu.menuObjid}`}
className="flex-1 cursor-pointer text-xs"
>
{menu.parentMenuName} → {menu.menuName}
</label>
</div>
);
})
)}
</div>
{column.categoryMenus && column.categoryMenus.length > 0 && (
<p className="text-primary text-xs">
{column.categoryMenus.length}개 메뉴 선택됨
</p>
)}
</div>
)}
{/* 카테고리 타입: 메뉴 종속성 제거됨 - 테이블/컬럼 단위로 관리 */}
{/* 입력 타입이 'entity'인 경우 참조 테이블 선택 */}
{column.inputType === "entity" && (
<>
@@ -1483,8 +1447,8 @@ export default function TableManagementPage() {
className="bg-background h-8 w-full justify-between text-xs"
>
{column.referenceTable && column.referenceTable !== "none"
? referenceTableOptions.find((opt) => opt.value === column.referenceTable)?.label ||
column.referenceTable
? referenceTableOptions.find((opt) => opt.value === column.referenceTable)
?.label || column.referenceTable
: "테이블 선택..."}
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
</Button>
@@ -1502,10 +1466,17 @@ export default function TableManagementPage() {
key={option.value}
value={`${option.label} ${option.value}`}
onSelect={() => {
handleDetailSettingsChange(column.columnName, "entity", option.value);
handleDetailSettingsChange(
column.columnName,
"entity",
option.value,
);
setEntityComboboxOpen((prev) => ({
...prev,
[column.columnName]: { ...prev[column.columnName], table: false },
[column.columnName]: {
...prev[column.columnName],
table: false,
},
}));
}}
className="text-xs"
@@ -1513,13 +1484,17 @@ export default function TableManagementPage() {
<Check
className={cn(
"mr-2 h-3 w-3",
column.referenceTable === option.value ? "opacity-100" : "opacity-0",
column.referenceTable === option.value
? "opacity-100"
: "opacity-0",
)}
/>
<div className="flex flex-col">
<span className="font-medium">{option.label}</span>
{option.value !== "none" && (
<span className="text-muted-foreground text-[10px]">{option.value}</span>
<span className="text-muted-foreground text-[10px]">
{option.value}
</span>
)}
</div>
</CommandItem>
@@ -1550,9 +1525,13 @@ export default function TableManagementPage() {
role="combobox"
aria-expanded={entityComboboxOpen[column.columnName]?.joinColumn || false}
className="bg-background h-8 w-full justify-between text-xs"
disabled={!referenceTableColumns[column.referenceTable] || referenceTableColumns[column.referenceTable].length === 0}
disabled={
!referenceTableColumns[column.referenceTable] ||
referenceTableColumns[column.referenceTable].length === 0
}
>
{!referenceTableColumns[column.referenceTable] || referenceTableColumns[column.referenceTable].length === 0 ? (
{!referenceTableColumns[column.referenceTable] ||
referenceTableColumns[column.referenceTable].length === 0 ? (
<span className="flex items-center gap-2">
<div className="border-primary h-3 w-3 animate-spin rounded-full border border-t-transparent"></div>
로딩중...
@@ -1576,10 +1555,17 @@ export default function TableManagementPage() {
<CommandItem
value="none"
onSelect={() => {
handleDetailSettingsChange(column.columnName, "entity_reference_column", "none");
handleDetailSettingsChange(
column.columnName,
"entity_reference_column",
"none",
);
setEntityComboboxOpen((prev) => ({
...prev,
[column.columnName]: { ...prev[column.columnName], joinColumn: false },
[column.columnName]: {
...prev[column.columnName],
joinColumn: false,
},
}));
}}
className="text-xs"
@@ -1587,7 +1573,9 @@ export default function TableManagementPage() {
<Check
className={cn(
"mr-2 h-3 w-3",
column.referenceColumn === "none" || !column.referenceColumn ? "opacity-100" : "opacity-0",
column.referenceColumn === "none" || !column.referenceColumn
? "opacity-100"
: "opacity-0",
)}
/>
-- 선택 안함 --
@@ -1597,10 +1585,17 @@ export default function TableManagementPage() {
key={refCol.columnName}
value={`${refCol.columnLabel || ""} ${refCol.columnName}`}
onSelect={() => {
handleDetailSettingsChange(column.columnName, "entity_reference_column", refCol.columnName);
handleDetailSettingsChange(
column.columnName,
"entity_reference_column",
refCol.columnName,
);
setEntityComboboxOpen((prev) => ({
...prev,
[column.columnName]: { ...prev[column.columnName], joinColumn: false },
[column.columnName]: {
...prev[column.columnName],
joinColumn: false,
},
}));
}}
className="text-xs"
@@ -1608,13 +1603,17 @@ export default function TableManagementPage() {
<Check
className={cn(
"mr-2 h-3 w-3",
column.referenceColumn === refCol.columnName ? "opacity-100" : "opacity-0",
column.referenceColumn === refCol.columnName
? "opacity-100"
: "opacity-0",
)}
/>
<div className="flex flex-col">
<span className="font-medium">{refCol.columnName}</span>
{refCol.columnLabel && (
<span className="text-muted-foreground text-[10px]">{refCol.columnLabel}</span>
<span className="text-muted-foreground text-[10px]">
{refCol.columnLabel}
</span>
)}
</div>
</CommandItem>
@@ -1639,7 +1638,10 @@ export default function TableManagementPage() {
onOpenChange={(open) =>
setEntityComboboxOpen((prev) => ({
...prev,
[column.columnName]: { ...prev[column.columnName], displayColumn: open },
[column.columnName]: {
...prev[column.columnName],
displayColumn: open,
},
}))
}
>
@@ -1647,11 +1649,17 @@ export default function TableManagementPage() {
<Button
variant="outline"
role="combobox"
aria-expanded={entityComboboxOpen[column.columnName]?.displayColumn || false}
aria-expanded={
entityComboboxOpen[column.columnName]?.displayColumn || false
}
className="bg-background h-8 w-full justify-between text-xs"
disabled={!referenceTableColumns[column.referenceTable] || referenceTableColumns[column.referenceTable].length === 0}
disabled={
!referenceTableColumns[column.referenceTable] ||
referenceTableColumns[column.referenceTable].length === 0
}
>
{!referenceTableColumns[column.referenceTable] || referenceTableColumns[column.referenceTable].length === 0 ? (
{!referenceTableColumns[column.referenceTable] ||
referenceTableColumns[column.referenceTable].length === 0 ? (
<span className="flex items-center gap-2">
<div className="border-primary h-3 w-3 animate-spin rounded-full border border-t-transparent"></div>
로딩중...
@@ -1675,10 +1683,17 @@ export default function TableManagementPage() {
<CommandItem
value="none"
onSelect={() => {
handleDetailSettingsChange(column.columnName, "entity_display_column", "none");
handleDetailSettingsChange(
column.columnName,
"entity_display_column",
"none",
);
setEntityComboboxOpen((prev) => ({
...prev,
[column.columnName]: { ...prev[column.columnName], displayColumn: false },
[column.columnName]: {
...prev[column.columnName],
displayColumn: false,
},
}));
}}
className="text-xs"
@@ -1686,7 +1701,9 @@ export default function TableManagementPage() {
<Check
className={cn(
"mr-2 h-3 w-3",
column.displayColumn === "none" || !column.displayColumn ? "opacity-100" : "opacity-0",
column.displayColumn === "none" || !column.displayColumn
? "opacity-100"
: "opacity-0",
)}
/>
-- 선택 안함 --
@@ -1696,10 +1713,17 @@ export default function TableManagementPage() {
key={refCol.columnName}
value={`${refCol.columnLabel || ""} ${refCol.columnName}`}
onSelect={() => {
handleDetailSettingsChange(column.columnName, "entity_display_column", refCol.columnName);
handleDetailSettingsChange(
column.columnName,
"entity_display_column",
refCol.columnName,
);
setEntityComboboxOpen((prev) => ({
...prev,
[column.columnName]: { ...prev[column.columnName], displayColumn: false },
[column.columnName]: {
...prev[column.columnName],
displayColumn: false,
},
}));
}}
className="text-xs"
@@ -1707,13 +1731,17 @@ export default function TableManagementPage() {
<Check
className={cn(
"mr-2 h-3 w-3",
column.displayColumn === refCol.columnName ? "opacity-100" : "opacity-0",
column.displayColumn === refCol.columnName
? "opacity-100"
: "opacity-0",
)}
/>
<div className="flex flex-col">
<span className="font-medium">{refCol.columnName}</span>
{refCol.columnLabel && (
<span className="text-muted-foreground text-[10px]">{refCol.columnLabel}</span>
<span className="text-muted-foreground text-[10px]">
{refCol.columnLabel}
</span>
)}
</div>
</CommandItem>
@@ -1765,8 +1793,8 @@ export default function TableManagementPage() {
{numberingRulesLoading
? "로딩 중..."
: column.numberingRuleId
? numberingRules.find((r) => r.ruleId === column.numberingRuleId)?.ruleName ||
column.numberingRuleId
? numberingRules.find((r) => r.ruleId === column.numberingRuleId)
?.ruleName || column.numberingRuleId
: "채번규칙 선택..."}
</span>
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
@@ -1783,7 +1811,9 @@ export default function TableManagementPage() {
<CommandItem
value="none"
onSelect={async () => {
const columnIndex = columns.findIndex((c) => c.columnName === column.columnName);
const columnIndex = columns.findIndex(
(c) => c.columnName === column.columnName,
);
handleColumnChange(columnIndex, "numberingRuleId", undefined);
setNumberingComboboxOpen((prev) => ({
...prev,
@@ -1798,45 +1828,49 @@ export default function TableManagementPage() {
<Check
className={cn(
"mr-2 h-3 w-3",
!column.numberingRuleId ? "opacity-100" : "opacity-0"
!column.numberingRuleId ? "opacity-100" : "opacity-0",
)}
/>
-- 선택 안함 --
</CommandItem>
{numberingRules.map((rule) => (
<CommandItem
key={rule.ruleId}
value={`${rule.ruleName} ${rule.ruleId}`}
onSelect={async () => {
const columnIndex = columns.findIndex((c) => c.columnName === column.columnName);
// 상태 업데이트
handleColumnChange(columnIndex, "numberingRuleId", rule.ruleId);
setNumberingComboboxOpen((prev) => ({
...prev,
[column.columnName]: false,
}));
// 🆕 자동 저장
const updatedColumn = { ...column, numberingRuleId: rule.ruleId };
await handleSaveColumn(updatedColumn);
}}
className="text-xs"
>
<Check
className={cn(
"mr-2 h-3 w-3",
column.numberingRuleId === rule.ruleId ? "opacity-100" : "opacity-0"
)}
/>
<div className="flex flex-col">
<span className="font-medium">{rule.ruleName}</span>
{rule.tableName && (
<span className="text-muted-foreground text-[10px]">
{rule.tableName}.{rule.columnName}
</span>
)}
</div>
</CommandItem>
))}
<CommandItem
key={rule.ruleId}
value={`${rule.ruleName} ${rule.ruleId}`}
onSelect={async () => {
const columnIndex = columns.findIndex(
(c) => c.columnName === column.columnName,
);
// 상태 업데이트
handleColumnChange(columnIndex, "numberingRuleId", rule.ruleId);
setNumberingComboboxOpen((prev) => ({
...prev,
[column.columnName]: false,
}));
// 🆕 자동 저장
const updatedColumn = { ...column, numberingRuleId: rule.ruleId };
await handleSaveColumn(updatedColumn);
}}
className="text-xs"
>
<Check
className={cn(
"mr-2 h-3 w-3",
column.numberingRuleId === rule.ruleId
? "opacity-100"
: "opacity-0",
)}
/>
<div className="flex flex-col">
<span className="font-medium">{rule.ruleName}</span>
{rule.tableName && (
<span className="text-muted-foreground text-[10px]">
{rule.tableName}.{rule.columnName}
</span>
)}
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>

7
frontend/components/screen/EditModal.tsx
View File

@@ -33,6 +33,7 @@ interface EditModalState {
dataflowConfig?: any;
dataflowTiming?: string;
}; // 🆕 모달 내부 저장 버튼의 제어로직 설정
menuObjid?: number; // 🆕 메뉴 OBJID (카테고리 스코프용)
}
interface EditModalProps {
@@ -91,6 +92,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
buttonConfig: undefined,
buttonContext: undefined,
saveButtonConfig: undefined,
menuObjid: undefined,
});
const [screenData, setScreenData] = useState<{
@@ -234,7 +236,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
// 전역 모달 이벤트 리스너
useEffect(() => {
const handleOpenEditModal = async (event: CustomEvent) => {
const { screenId, title, description, modalSize, editData, onSave, groupByColumns, tableName, isCreateMode, buttonConfig, buttonContext } = event.detail;
const { screenId, title, description, modalSize, editData, onSave, groupByColumns, tableName, isCreateMode, buttonConfig, buttonContext, menuObjid } = event.detail;
// 🆕 모달 내부 저장 버튼의 제어로직 설정 조회
let saveButtonConfig: EditModalState["saveButtonConfig"] = undefined;
@@ -258,6 +260,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
buttonConfig, // 🆕 버튼 설정
buttonContext, // 🆕 버튼 컨텍스트
saveButtonConfig, // 🆕 모달 내부 저장 버튼의 제어로직 설정
menuObjid, // 🆕 메뉴 OBJID (카테고리 스코프용)
});
// 편집 데이터로 폼 데이터 초기화
@@ -1079,6 +1082,8 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
id: modalState.screenId!,
tableName: screenData.screenInfo?.tableName,
}}
// 🆕 메뉴 OBJID 전달 (카테고리 스코프용)
menuObjid={modalState.menuObjid}
// 🆕 그룹 데이터가 있거나 UniversalFormModal이 없으면 EditModal.handleSave 사용
// groupData가 있으면 일괄 저장을 위해 반드시 EditModal.handleSave 사용
onSave={shouldUseEditModalSave ? handleSave : undefined}

4
frontend/components/screen/InteractiveDataTable.tsx
View File

@@ -1223,13 +1223,14 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
description: editModalDescription,
modalSize: "lg",
editData: initialData,
menuObjid, // 🆕 메뉴 OBJID 전달 (카테고리 스코프용)
onSave: () => {
loadData(); // 테이블 데이터 새로고침
},
},
});
window.dispatchEvent(event);
}, [selectedRows, data, getDisplayColumns, component.addModalConfig, component.editModalConfig, loadData]);
}, [selectedRows, data, getDisplayColumns, component.addModalConfig, component.editModalConfig, loadData, menuObjid]);
// 수정 폼 데이터 변경 핸들러
const handleEditFormChange = useCallback((columnName: string, value: any) => {
@@ -2730,6 +2731,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
screenId={saveModalScreenId}
modalSize={component.addModalConfig?.modalSize || "lg"}
initialData={saveModalData}
menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달 (카테고리 스코프용)
onSaveSuccess={() => {
// 저장 성공 시 테이블 새로고침
loadData(currentPage, searchValues); // 현재 페이지로 다시 로드

4
frontend/components/screen/SaveModal.tsx
View File

@@ -19,6 +19,7 @@ interface SaveModalProps {
modalSize?: "sm" | "md" | "lg" | "xl" | "full";
initialData?: any; // 수정 모드일 때 기존 데이터
onSaveSuccess?: () => void; // 저장 성공 시 콜백 (테이블 새로고침용)
menuObjid?: number; // 🆕 메뉴 OBJID (카테고리 스코프용)
}
/**
@@ -33,6 +34,7 @@ export const SaveModal: React.FC<SaveModalProps> = ({
modalSize = "lg",
initialData,
onSaveSuccess,
menuObjid,
}) => {
const { user, userName } = useAuth(); // 현재 사용자 정보 가져오기
const [formData, setFormData] = useState<Record<string, any>>(initialData || {});
@@ -373,6 +375,7 @@ export const SaveModal: React.FC<SaveModalProps> = ({
}));
}}
hideLabel={false}
menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달 (카테고리 스코프용)
/>
) : (
<DynamicComponentRenderer
@@ -385,6 +388,7 @@ export const SaveModal: React.FC<SaveModalProps> = ({
}}
screenId={screenId}
tableName={screenData.tableName}
menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달 (카테고리 스코프용)
userId={user?.userId} // ✅ 사용자 ID 전달
userName={user?.userName} // ✅ 사용자 이름 전달
companyCode={user?.companyCode} // ✅ 회사 코드 전달

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,
};
}

3
frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
View File

@@ -235,7 +235,8 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
setIsLoadingCategories(true);
import("@/lib/api/tableCategoryValue").then(({ getCategoryValues }) => {
getCategoryValues(component.tableName!, component.columnName!)
// 🆕 menuObjid를 4번째 파라미터로 전달 (카테고리 스코프 적용)
getCategoryValues(component.tableName!, component.columnName!, false, menuObjid)
.then((response) => {
if (response.success && "data" in response && response.data) {
const activeValues = response.data.filter((v: any) => v.isActive !== false);