2369 lines
91 KiB
TypeScript
2369 lines
91 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|
import { ComponentRendererProps } from "@/types/component";
|
|
import { SplitPanelLayout2Config, ColumnConfig, DataTransferField, ActionButtonConfig, JoinTableConfig, GroupingConfig, ColumnDisplayConfig, TabConfig } from "./types";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { defaultConfig } from "./config";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
Search,
|
|
Plus,
|
|
ChevronRight,
|
|
ChevronDown,
|
|
Edit,
|
|
Trash2,
|
|
Users,
|
|
Building2,
|
|
Check,
|
|
MoreHorizontal,
|
|
} from "lucide-react";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { toast } from "sonner";
|
|
import { useScreenContextOptional } from "@/contexts/ScreenContext";
|
|
import { apiClient } from "@/lib/api/client";
|
|
|
|
export interface SplitPanelLayout2ComponentProps extends ComponentRendererProps {
|
|
// 추가 props
|
|
}
|
|
|
|
/**
|
|
* SplitPanelLayout2 컴포넌트
|
|
* 마스터-디테일 패턴의 좌우 분할 레이아웃 (개선 버전)
|
|
*/
|
|
export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProps> = ({
|
|
component,
|
|
isDesignMode = false,
|
|
isSelected = false,
|
|
isPreview = false,
|
|
onClick,
|
|
...props
|
|
}) => {
|
|
const config = useMemo(() => {
|
|
return {
|
|
...defaultConfig,
|
|
...component.componentConfig,
|
|
} as SplitPanelLayout2Config;
|
|
}, [component.componentConfig]);
|
|
|
|
// ScreenContext (데이터 전달용)
|
|
const screenContext = useScreenContextOptional();
|
|
|
|
// 상태 관리
|
|
const [leftData, setLeftData] = useState<any[]>([]);
|
|
const [rightData, setRightData] = useState<any[]>([]);
|
|
const [selectedLeftItem, setSelectedLeftItem] = useState<any>(null);
|
|
const [leftSearchTerm, setLeftSearchTerm] = useState("");
|
|
const [rightSearchTerm, setRightSearchTerm] = useState("");
|
|
const [leftLoading, setLeftLoading] = useState(false);
|
|
const [rightLoading, setRightLoading] = useState(false);
|
|
const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
|
|
const [splitPosition, setSplitPosition] = useState(config.splitRatio || 30);
|
|
const [isResizing, setIsResizing] = useState(false);
|
|
|
|
// 좌측 패널 컬럼 라벨 매핑
|
|
const [leftColumnLabels, setLeftColumnLabels] = useState<Record<string, string>>({});
|
|
const [rightColumnLabels, setRightColumnLabels] = useState<Record<string, string>>({});
|
|
|
|
// 우측 패널 선택 상태 (체크박스용)
|
|
const [selectedRightItems, setSelectedRightItems] = useState<Set<string | number>>(new Set());
|
|
|
|
// 삭제 확인 다이얼로그 상태
|
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
|
const [itemToDelete, setItemToDelete] = useState<any>(null);
|
|
const [isBulkDelete, setIsBulkDelete] = useState(false);
|
|
const [deleteTargetPanel, setDeleteTargetPanel] = useState<"left" | "right">("right");
|
|
|
|
// 탭 상태 (좌측/우측 각각)
|
|
const [leftActiveTab, setLeftActiveTab] = useState<string | null>(null);
|
|
const [rightActiveTab, setRightActiveTab] = useState<string | null>(null);
|
|
|
|
// 프론트엔드 그룹핑 함수
|
|
const groupData = useCallback(
|
|
(data: Record<string, any>[], groupingConfig: GroupingConfig, columns: ColumnConfig[]): Record<string, any>[] => {
|
|
if (!groupingConfig.enabled || !groupingConfig.groupByColumn) {
|
|
return data;
|
|
}
|
|
|
|
const groupByColumn = groupingConfig.groupByColumn;
|
|
const groupMap = new Map<string, Record<string, any>>();
|
|
|
|
// 데이터를 그룹별로 수집
|
|
data.forEach((item) => {
|
|
const groupKey = String(item[groupByColumn] ?? "");
|
|
|
|
if (!groupMap.has(groupKey)) {
|
|
// 첫 번째 항목을 기준으로 그룹 초기화
|
|
const groupedItem: Record<string, any> = { ...item };
|
|
|
|
// 각 컬럼의 displayConfig 확인하여 집계 준비
|
|
columns.forEach((col) => {
|
|
if (col.displayConfig?.aggregate?.enabled) {
|
|
// 집계가 활성화된 컬럼은 배열로 초기화
|
|
groupedItem[`__agg_${col.name}`] = [item[col.name]];
|
|
}
|
|
});
|
|
|
|
groupMap.set(groupKey, groupedItem);
|
|
} else {
|
|
// 기존 그룹에 값 추가
|
|
const existingGroup = groupMap.get(groupKey)!;
|
|
|
|
columns.forEach((col) => {
|
|
if (col.displayConfig?.aggregate?.enabled) {
|
|
const aggKey = `__agg_${col.name}`;
|
|
if (!existingGroup[aggKey]) {
|
|
existingGroup[aggKey] = [];
|
|
}
|
|
existingGroup[aggKey].push(item[col.name]);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// 집계 처리 및 결과 변환
|
|
const result: Record<string, any>[] = [];
|
|
|
|
groupMap.forEach((groupedItem) => {
|
|
columns.forEach((col) => {
|
|
if (col.displayConfig?.aggregate?.enabled) {
|
|
const aggKey = `__agg_${col.name}`;
|
|
const values = groupedItem[aggKey] || [];
|
|
|
|
if (col.displayConfig.aggregate.function === "DISTINCT") {
|
|
// 중복 제거 후 배열로 저장
|
|
const uniqueValues = [...new Set(values.filter((v: any) => v !== null && v !== undefined))];
|
|
groupedItem[col.name] = uniqueValues;
|
|
} else if (col.displayConfig.aggregate.function === "COUNT") {
|
|
// 개수를 숫자로 저장
|
|
groupedItem[col.name] = values.filter((v: any) => v !== null && v !== undefined).length;
|
|
}
|
|
|
|
// 임시 집계 키 제거
|
|
delete groupedItem[aggKey];
|
|
}
|
|
});
|
|
|
|
result.push(groupedItem);
|
|
});
|
|
|
|
console.log(`[SplitPanelLayout2] 그룹핑 완료: ${data.length}건 → ${result.length}개 그룹`);
|
|
return result;
|
|
},
|
|
[],
|
|
);
|
|
|
|
// 탭 목록 생성 함수 (데이터에서 고유값 추출)
|
|
const generateTabs = useCallback(
|
|
(data: Record<string, unknown>[], tabConfig: TabConfig | undefined): { id: string; label: string; count: number }[] => {
|
|
if (!tabConfig?.enabled || !tabConfig.tabSourceColumn) {
|
|
return [];
|
|
}
|
|
|
|
const sourceColumn = tabConfig.tabSourceColumn;
|
|
|
|
// 데이터에서 고유값 추출 및 개수 카운트
|
|
const valueCount = new Map<string, number>();
|
|
data.forEach((item) => {
|
|
const value = String(item[sourceColumn] ?? "");
|
|
if (value) {
|
|
valueCount.set(value, (valueCount.get(value) || 0) + 1);
|
|
}
|
|
});
|
|
|
|
// 탭 목록 생성
|
|
const tabs = Array.from(valueCount.entries()).map(([value, count]) => ({
|
|
id: value,
|
|
label: value,
|
|
count: tabConfig.showCount ? count : 0,
|
|
}));
|
|
|
|
console.log(`[SplitPanelLayout2] 탭 생성: ${tabs.length}개 탭 (컬럼: ${sourceColumn})`);
|
|
return tabs;
|
|
},
|
|
[],
|
|
);
|
|
|
|
// 탭으로 필터링된 데이터 반환
|
|
const filterDataByTab = useCallback(
|
|
(data: Record<string, unknown>[], activeTab: string | null, tabConfig: TabConfig | undefined): Record<string, unknown>[] => {
|
|
if (!tabConfig?.enabled || !activeTab || !tabConfig.tabSourceColumn) {
|
|
return data;
|
|
}
|
|
|
|
const sourceColumn = tabConfig.tabSourceColumn;
|
|
return data.filter((item) => String(item[sourceColumn] ?? "") === activeTab);
|
|
},
|
|
[],
|
|
);
|
|
|
|
// 좌측 패널 탭 목록 (메모이제이션)
|
|
const leftTabs = useMemo(() => {
|
|
if (!config.leftPanel?.tabConfig?.enabled || !config.leftPanel?.tabConfig?.tabSourceColumn) {
|
|
return [];
|
|
}
|
|
return generateTabs(leftData, config.leftPanel.tabConfig);
|
|
}, [leftData, config.leftPanel?.tabConfig, generateTabs]);
|
|
|
|
// 우측 패널 탭 목록 (메모이제이션)
|
|
const rightTabs = useMemo(() => {
|
|
if (!config.rightPanel?.tabConfig?.enabled || !config.rightPanel?.tabConfig?.tabSourceColumn) {
|
|
return [];
|
|
}
|
|
return generateTabs(rightData, config.rightPanel.tabConfig);
|
|
}, [rightData, config.rightPanel?.tabConfig, generateTabs]);
|
|
|
|
// 탭 기본값 설정 (탭 목록이 변경되면 기본 탭 선택)
|
|
useEffect(() => {
|
|
if (leftTabs.length > 0 && !leftActiveTab) {
|
|
const defaultTab = config.leftPanel?.tabConfig?.defaultTab;
|
|
if (defaultTab && leftTabs.some((t) => t.id === defaultTab)) {
|
|
setLeftActiveTab(defaultTab);
|
|
} else {
|
|
setLeftActiveTab(leftTabs[0].id);
|
|
}
|
|
}
|
|
}, [leftTabs, leftActiveTab, config.leftPanel?.tabConfig?.defaultTab]);
|
|
|
|
useEffect(() => {
|
|
if (rightTabs.length > 0 && !rightActiveTab) {
|
|
const defaultTab = config.rightPanel?.tabConfig?.defaultTab;
|
|
if (defaultTab && rightTabs.some((t) => t.id === defaultTab)) {
|
|
setRightActiveTab(defaultTab);
|
|
} else {
|
|
setRightActiveTab(rightTabs[0].id);
|
|
}
|
|
}
|
|
}, [rightTabs, rightActiveTab, config.rightPanel?.tabConfig?.defaultTab]);
|
|
|
|
// 탭 필터링된 데이터 (메모이제이션)
|
|
const filteredLeftDataByTab = useMemo(() => {
|
|
return filterDataByTab(leftData, leftActiveTab, config.leftPanel?.tabConfig);
|
|
}, [leftData, leftActiveTab, config.leftPanel?.tabConfig, filterDataByTab]);
|
|
|
|
const filteredRightDataByTab = useMemo(() => {
|
|
return filterDataByTab(rightData, rightActiveTab, config.rightPanel?.tabConfig);
|
|
}, [rightData, rightActiveTab, config.rightPanel?.tabConfig, filterDataByTab]);
|
|
|
|
// 좌측 데이터 로드
|
|
const loadLeftData = useCallback(async () => {
|
|
if (!config.leftPanel?.tableName || isDesignMode) return;
|
|
|
|
setLeftLoading(true);
|
|
try {
|
|
const response = await apiClient.post(`/table-management/tables/${config.leftPanel.tableName}/data`, {
|
|
page: 1,
|
|
size: 1000, // 전체 데이터 로드
|
|
// 멀티테넌시: 자동으로 company_code 필터링 적용
|
|
autoFilter: {
|
|
enabled: true,
|
|
filterColumn: "company_code",
|
|
filterType: "company",
|
|
},
|
|
});
|
|
if (response.data.success) {
|
|
// API 응답 구조: { success: true, data: { data: [...], total, page, ... } }
|
|
let data = response.data.data?.data || [];
|
|
|
|
// 계층 구조 처리
|
|
if (config.leftPanel.hierarchyConfig?.enabled) {
|
|
data = buildHierarchy(
|
|
data,
|
|
config.leftPanel.hierarchyConfig.idColumn,
|
|
config.leftPanel.hierarchyConfig.parentColumn,
|
|
);
|
|
}
|
|
|
|
// 조인 테이블 처리 (좌측 패널) - 인라인 처리
|
|
if (config.leftPanel.joinTables && config.leftPanel.joinTables.length > 0) {
|
|
for (const joinTableConfig of config.leftPanel.joinTables) {
|
|
if (!joinTableConfig.joinTable || !joinTableConfig.mainColumn || !joinTableConfig.joinColumn) {
|
|
continue;
|
|
}
|
|
// 메인 데이터에서 조인할 키 값들 추출
|
|
const joinKeys = [
|
|
...new Set(data.map((item: Record<string, unknown>) => item[joinTableConfig.mainColumn]).filter(Boolean)),
|
|
];
|
|
if (joinKeys.length === 0) continue;
|
|
|
|
try {
|
|
const joinResponse = await apiClient.post(`/table-management/tables/${joinTableConfig.joinTable}/data`, {
|
|
page: 1,
|
|
size: 1000,
|
|
dataFilter: {
|
|
enabled: true,
|
|
matchType: "any",
|
|
filters: joinKeys.map((key, idx) => ({
|
|
id: `join_key_${idx}`,
|
|
columnName: joinTableConfig.joinColumn,
|
|
operator: "equals",
|
|
value: String(key),
|
|
valueType: "static",
|
|
})),
|
|
},
|
|
autoFilter: {
|
|
enabled: true,
|
|
filterColumn: "company_code",
|
|
filterType: "company",
|
|
},
|
|
});
|
|
|
|
if (joinResponse.data.success) {
|
|
const joinDataArray = joinResponse.data.data?.data || [];
|
|
const joinDataMap = new Map<string, Record<string, unknown>>();
|
|
joinDataArray.forEach((item: Record<string, unknown>) => {
|
|
const key = item[joinTableConfig.joinColumn];
|
|
if (key) joinDataMap.set(String(key), item);
|
|
});
|
|
|
|
if (joinDataMap.size > 0) {
|
|
data = data.map((item: Record<string, unknown>) => {
|
|
const joinKey = item[joinTableConfig.mainColumn];
|
|
const joinData = joinDataMap.get(String(joinKey));
|
|
if (joinData) {
|
|
const mergedData = { ...item };
|
|
joinTableConfig.selectColumns.forEach((col) => {
|
|
// 테이블.컬럼명 형식으로 저장
|
|
mergedData[`${joinTableConfig.joinTable}.${col}`] = joinData[col];
|
|
// 컬럼명만으로도 저장 (기존 값이 없을 때)
|
|
if (!(col in mergedData)) {
|
|
mergedData[col] = joinData[col];
|
|
}
|
|
});
|
|
return mergedData;
|
|
}
|
|
return item;
|
|
});
|
|
}
|
|
console.log(`[SplitPanelLayout2] 좌측 조인 테이블 로드: ${joinTableConfig.joinTable}, ${joinDataArray.length}건`);
|
|
}
|
|
} catch (error) {
|
|
console.error(`[SplitPanelLayout2] 좌측 조인 테이블 로드 실패 (${joinTableConfig.joinTable}):`, error);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 그룹핑 처리
|
|
if (config.leftPanel.grouping?.enabled && config.leftPanel.grouping.groupByColumn) {
|
|
data = groupData(data, config.leftPanel.grouping, config.leftPanel.displayColumns || []);
|
|
}
|
|
|
|
setLeftData(data);
|
|
console.log(`[SplitPanelLayout2] 좌측 데이터 로드: ${data.length}건 (company_code 필터 적용)`);
|
|
}
|
|
} catch (error) {
|
|
console.error("[SplitPanelLayout2] 좌측 데이터 로드 실패:", error);
|
|
toast.error("좌측 패널 데이터를 불러오는데 실패했습니다.");
|
|
} finally {
|
|
setLeftLoading(false);
|
|
}
|
|
}, [config.leftPanel?.tableName, config.leftPanel?.hierarchyConfig, config.leftPanel?.grouping, config.leftPanel?.displayColumns, config.leftPanel?.joinTables, isDesignMode, groupData]);
|
|
|
|
// 조인 테이블 데이터 로드 (단일 테이블)
|
|
const loadJoinTableData = useCallback(
|
|
async (joinConfig: JoinTableConfig, mainData: any[]): Promise<Map<string, any>> => {
|
|
const resultMap = new Map<string, any>();
|
|
if (!joinConfig.joinTable || !joinConfig.mainColumn || !joinConfig.joinColumn || mainData.length === 0) {
|
|
return resultMap;
|
|
}
|
|
|
|
// 메인 데이터에서 조인할 키 값들 추출
|
|
const joinKeys = [...new Set(mainData.map((item) => item[joinConfig.mainColumn]).filter(Boolean))];
|
|
if (joinKeys.length === 0) return resultMap;
|
|
|
|
try {
|
|
console.log(`[SplitPanelLayout2] 조인 테이블 로드: ${joinConfig.joinTable}, 키: ${joinKeys.length}개`);
|
|
|
|
const response = await apiClient.post(`/table-management/tables/${joinConfig.joinTable}/data`, {
|
|
page: 1,
|
|
size: 1000,
|
|
// 조인 키 값들로 필터링
|
|
dataFilter: {
|
|
enabled: true,
|
|
matchType: "any", // OR 조건으로 여러 키 매칭
|
|
filters: joinKeys.map((key, idx) => ({
|
|
id: `join_key_${idx}`,
|
|
columnName: joinConfig.joinColumn,
|
|
operator: "equals",
|
|
value: String(key),
|
|
valueType: "static",
|
|
})),
|
|
},
|
|
autoFilter: {
|
|
enabled: true,
|
|
filterColumn: "company_code",
|
|
filterType: "company",
|
|
},
|
|
});
|
|
|
|
if (response.data.success) {
|
|
const joinData = response.data.data?.data || [];
|
|
// 조인 컬럼 값을 키로 하는 Map 생성
|
|
joinData.forEach((item: any) => {
|
|
const key = item[joinConfig.joinColumn];
|
|
if (key) {
|
|
resultMap.set(String(key), item);
|
|
}
|
|
});
|
|
console.log(`[SplitPanelLayout2] 조인 테이블 로드 완료: ${joinData.length}건`);
|
|
}
|
|
} catch (error) {
|
|
console.error(`[SplitPanelLayout2] 조인 테이블 로드 실패 (${joinConfig.joinTable}):`, error);
|
|
}
|
|
|
|
return resultMap;
|
|
},
|
|
[],
|
|
);
|
|
|
|
// 메인 데이터에 조인 테이블 데이터 병합
|
|
const mergeJoinData = useCallback(
|
|
(mainData: any[], joinConfig: JoinTableConfig, joinDataMap: Map<string, any>): any[] => {
|
|
return mainData.map((item) => {
|
|
const joinKey = item[joinConfig.mainColumn];
|
|
const joinRow = joinDataMap.get(String(joinKey));
|
|
|
|
if (joinRow && joinConfig.selectColumns) {
|
|
// 선택된 컬럼만 병합
|
|
const mergedItem = { ...item };
|
|
joinConfig.selectColumns.forEach((col) => {
|
|
// 조인 테이블명.컬럼명 형식으로 저장 (sourceTable 참조용)
|
|
const tableColumnKey = `${joinConfig.joinTable}.${col}`;
|
|
mergedItem[tableColumnKey] = joinRow[col];
|
|
|
|
// alias가 있으면 alias_컬럼명, 없으면 그냥 컬럼명으로도 저장 (하위 호환성)
|
|
const targetKey = joinConfig.alias ? `${joinConfig.alias}_${col}` : col;
|
|
// 메인 테이블에 같은 컬럼이 없으면 추가
|
|
if (!(col in mergedItem)) {
|
|
mergedItem[col] = joinRow[col];
|
|
} else if (joinConfig.alias) {
|
|
// 메인 테이블에 같은 컬럼이 있으면 alias로 추가
|
|
mergedItem[targetKey] = joinRow[col];
|
|
}
|
|
});
|
|
console.log(`[SplitPanelLayout2] 조인 데이터 병합:`, {
|
|
mainKey: joinKey,
|
|
mergedKeys: Object.keys(mergedItem),
|
|
});
|
|
return mergedItem;
|
|
}
|
|
|
|
return item;
|
|
});
|
|
},
|
|
[],
|
|
);
|
|
|
|
// 우측 데이터 로드 (좌측 선택 항목 기반)
|
|
const loadRightData = useCallback(
|
|
async (selectedItem: any) => {
|
|
if (!config.rightPanel?.tableName || !selectedItem) {
|
|
setRightData([]);
|
|
return;
|
|
}
|
|
|
|
// 복합키 또는 단일키 처리
|
|
const joinKeys = config.joinConfig?.keys || [];
|
|
const hasCompositeKeys = joinKeys.length > 0;
|
|
const hasSingleKey = config.joinConfig?.leftColumn && config.joinConfig?.rightColumn;
|
|
|
|
if (!hasCompositeKeys && !hasSingleKey) {
|
|
console.log(`[SplitPanelLayout2] 조인 설정이 없음`);
|
|
setRightData([]);
|
|
return;
|
|
}
|
|
|
|
// 필터 배열 생성
|
|
const filters: any[] = [];
|
|
|
|
if (hasCompositeKeys) {
|
|
// 복합키 처리
|
|
for (let i = 0; i < joinKeys.length; i++) {
|
|
const key = joinKeys[i];
|
|
const joinValue = selectedItem[key.leftColumn];
|
|
if (joinValue === undefined || joinValue === null) {
|
|
console.log(`[SplitPanelLayout2] 복합키 조인 값이 없음: ${key.leftColumn}`);
|
|
setRightData([]);
|
|
return;
|
|
}
|
|
filters.push({
|
|
id: `join_filter_${i}`,
|
|
columnName: key.rightColumn,
|
|
operator: "equals",
|
|
value: String(joinValue),
|
|
valueType: "static",
|
|
});
|
|
}
|
|
console.log(
|
|
`[SplitPanelLayout2] 복합키 조인: ${joinKeys.map((k) => `${k.leftColumn}→${k.rightColumn}`).join(", ")}`,
|
|
);
|
|
} else {
|
|
// 단일키 처리 (하위 호환성)
|
|
const joinValue = selectedItem[config.joinConfig!.leftColumn!];
|
|
if (joinValue === undefined || joinValue === null) {
|
|
console.log(`[SplitPanelLayout2] 조인 값이 없음: ${config.joinConfig!.leftColumn}`);
|
|
setRightData([]);
|
|
return;
|
|
}
|
|
filters.push({
|
|
id: "join_filter",
|
|
columnName: config.joinConfig!.rightColumn,
|
|
operator: "equals",
|
|
value: String(joinValue),
|
|
valueType: "static",
|
|
});
|
|
}
|
|
|
|
setRightLoading(true);
|
|
try {
|
|
console.log(
|
|
`[SplitPanelLayout2] 우측 데이터 로드 시작: ${config.rightPanel.tableName}, 필터 ${filters.length}개`,
|
|
);
|
|
|
|
const response = await apiClient.post(`/table-management/tables/${config.rightPanel.tableName}/data`, {
|
|
page: 1,
|
|
size: 1000, // 전체 데이터 로드
|
|
// dataFilter를 사용하여 정확한 값 매칭 (Entity 타입 검색 문제 회피)
|
|
dataFilter: {
|
|
enabled: true,
|
|
matchType: "all",
|
|
filters,
|
|
},
|
|
// 멀티테넌시: 자동으로 company_code 필터링 적용
|
|
autoFilter: {
|
|
enabled: true,
|
|
filterColumn: "company_code",
|
|
filterType: "company",
|
|
},
|
|
});
|
|
|
|
if (response.data.success) {
|
|
// API 응답 구조: { success: true, data: { data: [...], total, page, ... } }
|
|
let data = response.data.data?.data || [];
|
|
console.log(`[SplitPanelLayout2] 메인 데이터 로드 완료: ${data.length}건`);
|
|
|
|
// 추가 조인 테이블 처리
|
|
const joinTables = config.rightPanel?.joinTables || [];
|
|
if (joinTables.length > 0 && data.length > 0) {
|
|
console.log(`[SplitPanelLayout2] 조인 테이블 처리 시작: ${joinTables.length}개`);
|
|
|
|
for (const joinTableConfig of joinTables) {
|
|
const joinDataMap = await loadJoinTableData(joinTableConfig, data);
|
|
if (joinDataMap.size > 0) {
|
|
data = mergeJoinData(data, joinTableConfig, joinDataMap);
|
|
}
|
|
}
|
|
|
|
console.log(`[SplitPanelLayout2] 조인 데이터 병합 완료`);
|
|
}
|
|
|
|
setRightData(data);
|
|
console.log(`[SplitPanelLayout2] 우측 데이터 로드 완료: ${data.length}건`);
|
|
} else {
|
|
console.error("[SplitPanelLayout2] 우측 데이터 로드 실패:", response.data.message);
|
|
setRightData([]);
|
|
}
|
|
} catch (error: any) {
|
|
console.error("[SplitPanelLayout2] 우측 데이터 로드 에러:", {
|
|
message: error?.message,
|
|
status: error?.response?.status,
|
|
statusText: error?.response?.statusText,
|
|
data: error?.response?.data,
|
|
config: {
|
|
url: error?.config?.url,
|
|
method: error?.config?.method,
|
|
data: error?.config?.data,
|
|
},
|
|
});
|
|
setRightData([]);
|
|
} finally {
|
|
setRightLoading(false);
|
|
}
|
|
},
|
|
[config.rightPanel?.tableName, config.rightPanel?.joinTables, config.joinConfig, loadJoinTableData, mergeJoinData],
|
|
);
|
|
|
|
// 좌측 패널 추가 버튼 클릭
|
|
const handleLeftAddClick = useCallback(() => {
|
|
if (!config.leftPanel?.addModalScreenId) {
|
|
toast.error("연결된 모달 화면이 없습니다.");
|
|
return;
|
|
}
|
|
|
|
// EditModal 열기 이벤트 발생
|
|
const event = new CustomEvent("openEditModal", {
|
|
detail: {
|
|
screenId: config.leftPanel.addModalScreenId,
|
|
title: config.leftPanel?.addButtonLabel || "추가",
|
|
modalSize: "lg",
|
|
editData: {},
|
|
isCreateMode: true, // 생성 모드
|
|
onSave: () => {
|
|
loadLeftData();
|
|
},
|
|
},
|
|
});
|
|
window.dispatchEvent(event);
|
|
console.log("[SplitPanelLayout2] 좌측 추가 모달 열기:", config.leftPanel.addModalScreenId);
|
|
}, [config.leftPanel?.addModalScreenId, config.leftPanel?.addButtonLabel, loadLeftData]);
|
|
|
|
// 우측 패널 추가 버튼 클릭
|
|
const handleRightAddClick = useCallback(() => {
|
|
if (!config.rightPanel?.addModalScreenId) {
|
|
toast.error("연결된 모달 화면이 없습니다.");
|
|
return;
|
|
}
|
|
|
|
// 데이터 전달 필드 설정
|
|
const initialData: Record<string, any> = {};
|
|
if (selectedLeftItem && config.dataTransferFields) {
|
|
for (const field of config.dataTransferFields) {
|
|
if (field.sourceColumn && field.targetColumn) {
|
|
initialData[field.targetColumn] = selectedLeftItem[field.sourceColumn];
|
|
}
|
|
}
|
|
}
|
|
|
|
// EditModal 열기 이벤트 발생
|
|
const event = new CustomEvent("openEditModal", {
|
|
detail: {
|
|
screenId: config.rightPanel.addModalScreenId,
|
|
title: config.rightPanel?.addButtonLabel || "추가",
|
|
modalSize: "lg",
|
|
editData: initialData,
|
|
isCreateMode: true, // 생성 모드
|
|
onSave: () => {
|
|
if (selectedLeftItem) {
|
|
loadRightData(selectedLeftItem);
|
|
}
|
|
},
|
|
},
|
|
});
|
|
window.dispatchEvent(event);
|
|
}, [
|
|
config.rightPanel?.addModalScreenId,
|
|
config.rightPanel?.addButtonLabel,
|
|
config.dataTransferFields,
|
|
selectedLeftItem,
|
|
loadRightData,
|
|
]);
|
|
|
|
// 기본키 컬럼명 가져오기 (우측 패널)
|
|
const getPrimaryKeyColumn = useCallback(() => {
|
|
return config.rightPanel?.primaryKeyColumn || "id";
|
|
}, [config.rightPanel?.primaryKeyColumn]);
|
|
|
|
// 기본키 컬럼명 가져오기 (좌측 패널)
|
|
const getLeftPrimaryKeyColumn = useCallback(() => {
|
|
return config.leftPanel?.primaryKeyColumn || config.leftPanel?.hierarchyConfig?.idColumn || "id";
|
|
}, [config.leftPanel?.primaryKeyColumn, config.leftPanel?.hierarchyConfig?.idColumn]);
|
|
|
|
// 우측 패널 수정 버튼 클릭
|
|
const handleEditItem = useCallback(
|
|
async (item: any) => {
|
|
// 수정용 모달 화면 ID 결정 (editModalScreenId 우선, 없으면 addModalScreenId 사용)
|
|
const modalScreenId = config.rightPanel?.editModalScreenId || config.rightPanel?.addModalScreenId;
|
|
|
|
if (!modalScreenId) {
|
|
toast.error("연결된 모달 화면이 없습니다.");
|
|
return;
|
|
}
|
|
|
|
// 메인 테이블 데이터 조회 (우측 패널이 서브 테이블인 경우)
|
|
let editData = { ...item };
|
|
|
|
// 연결 설정이 있고, 메인 테이블이 설정되어 있으면 메인 테이블 데이터도 조회
|
|
if (config.rightPanel?.mainTableForEdit) {
|
|
const { tableName, linkColumn } = config.rightPanel.mainTableForEdit;
|
|
const linkValue = item[linkColumn?.subColumn || ""];
|
|
|
|
if (tableName && linkValue) {
|
|
try {
|
|
const response = await apiClient.get(`/table-management/tables/${tableName}/data`, {
|
|
params: {
|
|
filters: JSON.stringify({ [linkColumn?.mainColumn || linkColumn?.subColumn || ""]: linkValue }),
|
|
page: 1,
|
|
pageSize: 1,
|
|
},
|
|
});
|
|
|
|
if (response.data?.success && response.data?.data?.items?.[0]) {
|
|
// 메인 테이블 데이터를 editData에 병합 (서브 테이블 데이터 우선)
|
|
editData = { ...response.data.data.items[0], ...item };
|
|
console.log("[SplitPanelLayout2] 메인 테이블 데이터 병합:", editData);
|
|
}
|
|
} catch (error) {
|
|
console.error("[SplitPanelLayout2] 메인 테이블 데이터 조회 실패:", error);
|
|
}
|
|
}
|
|
}
|
|
|
|
// EditModal 열기 이벤트 발생 (수정 모드)
|
|
const event = new CustomEvent("openEditModal", {
|
|
detail: {
|
|
screenId: modalScreenId,
|
|
title: "수정",
|
|
modalSize: "lg",
|
|
editData: editData, // 병합된 데이터 전달
|
|
isCreateMode: false, // 수정 모드
|
|
onSave: () => {
|
|
if (selectedLeftItem) {
|
|
loadRightData(selectedLeftItem);
|
|
}
|
|
},
|
|
},
|
|
});
|
|
window.dispatchEvent(event);
|
|
console.log("[SplitPanelLayout2] 우측 수정 모달 열기:", editData);
|
|
},
|
|
[config.rightPanel?.editModalScreenId, config.rightPanel?.addModalScreenId, config.rightPanel?.mainTableForEdit, selectedLeftItem, loadRightData],
|
|
);
|
|
|
|
// 좌측 패널 수정 버튼 클릭
|
|
const handleLeftEditItem = useCallback(
|
|
(item: any) => {
|
|
// 수정용 모달 화면 ID 결정 (editModalScreenId 우선, 없으면 addModalScreenId 사용)
|
|
const modalScreenId = config.leftPanel?.editModalScreenId || config.leftPanel?.addModalScreenId;
|
|
|
|
if (!modalScreenId) {
|
|
toast.error("연결된 모달 화면이 없습니다.");
|
|
return;
|
|
}
|
|
|
|
// EditModal 열기 이벤트 발생 (수정 모드)
|
|
const event = new CustomEvent("openEditModal", {
|
|
detail: {
|
|
screenId: modalScreenId,
|
|
title: "수정",
|
|
modalSize: "lg",
|
|
editData: item, // 기존 데이터 전달
|
|
isCreateMode: false, // 수정 모드
|
|
onSave: () => {
|
|
loadLeftData();
|
|
},
|
|
},
|
|
});
|
|
window.dispatchEvent(event);
|
|
console.log("[SplitPanelLayout2] 좌측 수정 모달 열기:", item);
|
|
},
|
|
[config.leftPanel?.editModalScreenId, config.leftPanel?.addModalScreenId, loadLeftData],
|
|
);
|
|
|
|
// 우측 패널 삭제 버튼 클릭 (확인 다이얼로그 표시)
|
|
const handleDeleteClick = useCallback((item: any) => {
|
|
setItemToDelete(item);
|
|
setIsBulkDelete(false);
|
|
setDeleteTargetPanel("right");
|
|
setDeleteDialogOpen(true);
|
|
}, []);
|
|
|
|
// 좌측 패널 삭제 버튼 클릭 (확인 다이얼로그 표시)
|
|
const handleLeftDeleteClick = useCallback((item: any) => {
|
|
setItemToDelete(item);
|
|
setIsBulkDelete(false);
|
|
setDeleteTargetPanel("left");
|
|
setDeleteDialogOpen(true);
|
|
}, []);
|
|
|
|
// 일괄 삭제 버튼 클릭 (확인 다이얼로그 표시)
|
|
const handleBulkDeleteClick = useCallback(() => {
|
|
if (selectedRightItems.size === 0) {
|
|
toast.error("삭제할 항목을 선택해주세요.");
|
|
return;
|
|
}
|
|
setIsBulkDelete(true);
|
|
setDeleteTargetPanel("right");
|
|
setDeleteDialogOpen(true);
|
|
}, [selectedRightItems.size]);
|
|
|
|
// 실제 삭제 실행
|
|
const executeDelete = useCallback(async () => {
|
|
// 대상 패널에 따라 테이블명과 기본키 컬럼 결정
|
|
const tableName = deleteTargetPanel === "left"
|
|
? config.leftPanel?.tableName
|
|
: config.rightPanel?.tableName;
|
|
const pkColumn = deleteTargetPanel === "left"
|
|
? getLeftPrimaryKeyColumn()
|
|
: getPrimaryKeyColumn();
|
|
|
|
if (!tableName) {
|
|
toast.error("테이블 설정이 없습니다.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
if (isBulkDelete) {
|
|
// 일괄 삭제 - 선택된 항목들의 데이터를 body로 전달
|
|
const itemsToDelete = rightData.filter((item) => selectedRightItems.has(item[pkColumn] as string | number));
|
|
console.log("[SplitPanelLayout2] 일괄 삭제:", itemsToDelete);
|
|
|
|
// 백엔드 API는 body로 삭제할 데이터를 받음
|
|
await apiClient.delete(`/table-management/tables/${tableName}/delete`, {
|
|
data: itemsToDelete,
|
|
});
|
|
|
|
toast.success(`${itemsToDelete.length}개 항목이 삭제되었습니다.`);
|
|
setSelectedRightItems(new Set<string | number>());
|
|
} else if (itemToDelete) {
|
|
// 단일 삭제 - 해당 항목 데이터를 배열로 감싸서 body로 전달 (백엔드가 배열을 기대함)
|
|
console.log(`[SplitPanelLayout2] ${deleteTargetPanel === "left" ? "좌측" : "우측"} 단일 삭제:`, itemToDelete);
|
|
|
|
await apiClient.delete(`/table-management/tables/${tableName}/delete`, {
|
|
data: [itemToDelete],
|
|
});
|
|
toast.success("항목이 삭제되었습니다.");
|
|
}
|
|
|
|
// 데이터 새로고침
|
|
if (deleteTargetPanel === "left") {
|
|
loadLeftData();
|
|
setSelectedLeftItem(null); // 좌측 선택 초기화
|
|
setRightData([]); // 우측 데이터도 초기화
|
|
} else if (selectedLeftItem) {
|
|
loadRightData(selectedLeftItem);
|
|
}
|
|
} catch (error: any) {
|
|
console.error("[SplitPanelLayout2] 삭제 실패:", error);
|
|
toast.error(`삭제 실패: ${error.message}`);
|
|
} finally {
|
|
setDeleteDialogOpen(false);
|
|
setItemToDelete(null);
|
|
setIsBulkDelete(false);
|
|
}
|
|
}, [
|
|
deleteTargetPanel,
|
|
config.leftPanel?.tableName,
|
|
config.rightPanel?.tableName,
|
|
getLeftPrimaryKeyColumn,
|
|
getPrimaryKeyColumn,
|
|
isBulkDelete,
|
|
selectedRightItems,
|
|
itemToDelete,
|
|
selectedLeftItem,
|
|
loadLeftData,
|
|
loadRightData,
|
|
rightData,
|
|
]);
|
|
|
|
// 개별 체크박스 선택/해제
|
|
const handleSelectItem = useCallback((itemId: string | number, checked: boolean) => {
|
|
setSelectedRightItems((prev) => {
|
|
const newSet = new Set(prev);
|
|
if (checked) {
|
|
newSet.add(itemId);
|
|
} else {
|
|
newSet.delete(itemId);
|
|
}
|
|
return newSet;
|
|
});
|
|
}, []);
|
|
|
|
// 액션 버튼 클릭 핸들러
|
|
const handleActionButton = useCallback(
|
|
(btn: ActionButtonConfig) => {
|
|
switch (btn.action) {
|
|
case "add":
|
|
if (btn.modalScreenId) {
|
|
// 데이터 전달 필드 설정
|
|
const initialData: Record<string, any> = {};
|
|
if (selectedLeftItem && config.dataTransferFields) {
|
|
for (const field of config.dataTransferFields) {
|
|
if (field.sourceColumn && field.targetColumn) {
|
|
initialData[field.targetColumn] = selectedLeftItem[field.sourceColumn];
|
|
}
|
|
}
|
|
}
|
|
|
|
const event = new CustomEvent("openEditModal", {
|
|
detail: {
|
|
screenId: btn.modalScreenId,
|
|
title: btn.label || "추가",
|
|
modalSize: "lg",
|
|
editData: initialData,
|
|
isCreateMode: true,
|
|
onSave: () => {
|
|
if (selectedLeftItem) {
|
|
loadRightData(selectedLeftItem);
|
|
}
|
|
},
|
|
},
|
|
});
|
|
window.dispatchEvent(event);
|
|
}
|
|
break;
|
|
|
|
case "edit":
|
|
// 선택된 항목이 1개일 때만 수정
|
|
if (selectedRightItems.size === 1) {
|
|
const pkColumn = getPrimaryKeyColumn();
|
|
const selectedId = Array.from(selectedRightItems)[0];
|
|
const item = rightData.find((d) => d[pkColumn] === selectedId);
|
|
if (item) {
|
|
// 액션 버튼에 모달 화면이 설정되어 있으면 해당 화면 사용
|
|
const modalScreenId = btn.modalScreenId || config.rightPanel?.editModalScreenId || config.rightPanel?.addModalScreenId;
|
|
|
|
if (!modalScreenId) {
|
|
toast.error("연결된 모달 화면이 없습니다.");
|
|
return;
|
|
}
|
|
|
|
const event = new CustomEvent("openEditModal", {
|
|
detail: {
|
|
screenId: modalScreenId,
|
|
title: btn.label || "수정",
|
|
modalSize: "lg",
|
|
editData: item,
|
|
isCreateMode: false,
|
|
onSave: () => {
|
|
if (selectedLeftItem) {
|
|
loadRightData(selectedLeftItem);
|
|
}
|
|
},
|
|
},
|
|
});
|
|
window.dispatchEvent(event);
|
|
}
|
|
} else if (selectedRightItems.size > 1) {
|
|
toast.error("수정할 항목을 1개만 선택해주세요.");
|
|
} else {
|
|
toast.error("수정할 항목을 선택해주세요.");
|
|
}
|
|
break;
|
|
|
|
case "delete":
|
|
case "bulk-delete":
|
|
handleBulkDeleteClick();
|
|
break;
|
|
|
|
case "custom":
|
|
// 커스텀 액션 (추후 확장)
|
|
console.log("[SplitPanelLayout2] 커스텀 액션:", btn);
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
[
|
|
selectedLeftItem,
|
|
config.dataTransferFields,
|
|
loadRightData,
|
|
selectedRightItems,
|
|
getPrimaryKeyColumn,
|
|
rightData,
|
|
handleEditItem,
|
|
handleBulkDeleteClick,
|
|
],
|
|
);
|
|
|
|
// 좌측 패널 액션 버튼 클릭 핸들러
|
|
const handleLeftActionButton = useCallback(
|
|
(btn: ActionButtonConfig) => {
|
|
switch (btn.action) {
|
|
case "add":
|
|
// 액션 버튼에 설정된 modalScreenId 우선 사용
|
|
const modalScreenId = btn.modalScreenId || config.leftPanel?.addModalScreenId;
|
|
|
|
if (!modalScreenId) {
|
|
toast.error("연결된 모달 화면이 없습니다.");
|
|
return;
|
|
}
|
|
|
|
// EditModal 열기 이벤트 발생
|
|
const event = new CustomEvent("openEditModal", {
|
|
detail: {
|
|
screenId: modalScreenId,
|
|
title: btn.label || "추가",
|
|
modalSize: "lg",
|
|
editData: {},
|
|
isCreateMode: true,
|
|
onSave: () => {
|
|
loadLeftData();
|
|
},
|
|
},
|
|
});
|
|
window.dispatchEvent(event);
|
|
console.log("[SplitPanelLayout2] 좌측 액션 버튼 모달 열기:", modalScreenId);
|
|
break;
|
|
|
|
case "edit":
|
|
// 좌측 패널에서 수정 (필요시 구현)
|
|
console.log("[SplitPanelLayout2] 좌측 수정 액션:", btn);
|
|
break;
|
|
|
|
case "delete":
|
|
// 좌측 패널에서 삭제 (필요시 구현)
|
|
console.log("[SplitPanelLayout2] 좌측 삭제 액션:", btn);
|
|
break;
|
|
|
|
case "custom":
|
|
console.log("[SplitPanelLayout2] 좌측 커스텀 액션:", btn);
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
[config.leftPanel?.addModalScreenId, loadLeftData],
|
|
);
|
|
|
|
// 컬럼 라벨 로드
|
|
const loadColumnLabels = useCallback(
|
|
async (tableName: string, setLabels: (labels: Record<string, string>) => void) => {
|
|
if (!tableName) return;
|
|
|
|
try {
|
|
const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
|
|
if (response.data.success) {
|
|
const labels: Record<string, string> = {};
|
|
// API 응답 구조: { success: true, data: { columns: [...] } }
|
|
const columns = response.data.data?.columns || [];
|
|
columns.forEach((col: any) => {
|
|
const colName = col.column_name || col.columnName;
|
|
const colLabel = col.column_label || col.columnLabel || colName;
|
|
if (colName) {
|
|
labels[colName] = colLabel;
|
|
}
|
|
});
|
|
setLabels(labels);
|
|
}
|
|
} catch (error) {
|
|
console.error("[SplitPanelLayout2] 컬럼 라벨 로드 실패:", error);
|
|
}
|
|
},
|
|
[],
|
|
);
|
|
|
|
// 계층 구조 빌드
|
|
const buildHierarchy = (data: any[], idColumn: string, parentColumn: string): any[] => {
|
|
const itemMap = new Map<string, any>();
|
|
const roots: any[] = [];
|
|
|
|
// 모든 항목을 맵에 저장
|
|
data.forEach((item) => {
|
|
itemMap.set(item[idColumn], { ...item, children: [] });
|
|
});
|
|
|
|
// 부모-자식 관계 설정
|
|
data.forEach((item) => {
|
|
const current = itemMap.get(item[idColumn]);
|
|
const parentId = item[parentColumn];
|
|
|
|
if (parentId && itemMap.has(parentId)) {
|
|
itemMap.get(parentId).children.push(current);
|
|
} else {
|
|
roots.push(current);
|
|
}
|
|
});
|
|
|
|
return roots;
|
|
};
|
|
|
|
// 좌측 항목 선택 핸들러
|
|
const handleLeftItemSelect = useCallback(
|
|
(item: any) => {
|
|
setSelectedLeftItem(item);
|
|
loadRightData(item);
|
|
|
|
// ScreenContext DataProvider 등록 (버튼에서 접근 가능하도록)
|
|
if (screenContext && !isDesignMode) {
|
|
screenContext.registerDataProvider(component.id, {
|
|
componentId: component.id,
|
|
componentType: "split-panel-layout2",
|
|
getSelectedData: () => [item],
|
|
getAllData: () => leftData,
|
|
clearSelection: () => setSelectedLeftItem(null),
|
|
});
|
|
console.log(`[SplitPanelLayout2] DataProvider 등록: ${component.id}`);
|
|
}
|
|
},
|
|
[isDesignMode, screenContext, component.id, leftData, loadRightData],
|
|
);
|
|
|
|
// 항목 확장/축소 토글
|
|
const toggleExpand = useCallback((itemId: string) => {
|
|
setExpandedItems((prev) => {
|
|
const newSet = new Set(prev);
|
|
if (newSet.has(itemId)) {
|
|
newSet.delete(itemId);
|
|
} else {
|
|
newSet.add(itemId);
|
|
}
|
|
return newSet;
|
|
});
|
|
}, []);
|
|
|
|
// 검색 필터링 (탭 필터링 후 적용)
|
|
const filteredLeftData = useMemo(() => {
|
|
// 1. 먼저 탭 필터링 적용
|
|
const data = filteredLeftDataByTab;
|
|
|
|
// 2. 검색어가 없으면 탭 필터링된 데이터 반환
|
|
if (!leftSearchTerm) return data;
|
|
|
|
// 복수 검색 컬럼 지원 (searchColumns 우선, 없으면 searchColumn 사용)
|
|
const searchColumns = config.leftPanel?.searchColumns?.map((c) => c.columnName).filter(Boolean) || [];
|
|
const legacyColumn = config.leftPanel?.searchColumn;
|
|
const columnsToSearch = searchColumns.length > 0 ? searchColumns : legacyColumn ? [legacyColumn] : [];
|
|
|
|
if (columnsToSearch.length === 0) return data;
|
|
|
|
const filterRecursive = (items: any[]): any[] => {
|
|
return items.filter((item) => {
|
|
// 여러 컬럼 중 하나라도 매칭되면 포함
|
|
const matches = columnsToSearch.some((col) => {
|
|
const value = String(item[col] || "").toLowerCase();
|
|
return value.includes(leftSearchTerm.toLowerCase());
|
|
});
|
|
|
|
if (item.children?.length > 0) {
|
|
const filteredChildren = filterRecursive(item.children);
|
|
if (filteredChildren.length > 0) {
|
|
item.children = filteredChildren;
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return matches;
|
|
});
|
|
};
|
|
|
|
return filterRecursive([...data]);
|
|
}, [filteredLeftDataByTab, leftSearchTerm, config.leftPanel?.searchColumns, config.leftPanel?.searchColumn]);
|
|
|
|
const filteredRightData = useMemo(() => {
|
|
// 1. 먼저 탭 필터링 적용
|
|
const data = filteredRightDataByTab;
|
|
|
|
// 2. 검색어가 없으면 탭 필터링된 데이터 반환
|
|
if (!rightSearchTerm) return data;
|
|
|
|
// 복수 검색 컬럼 지원 (searchColumns 우선, 없으면 searchColumn 사용)
|
|
const searchColumns = config.rightPanel?.searchColumns?.map((c) => c.columnName).filter(Boolean) || [];
|
|
const legacyColumn = config.rightPanel?.searchColumn;
|
|
const columnsToSearch = searchColumns.length > 0 ? searchColumns : legacyColumn ? [legacyColumn] : [];
|
|
|
|
if (columnsToSearch.length === 0) return data;
|
|
|
|
return data.filter((item) => {
|
|
// 여러 컬럼 중 하나라도 매칭되면 포함
|
|
return columnsToSearch.some((col) => {
|
|
const value = String(item[col] || "").toLowerCase();
|
|
return value.includes(rightSearchTerm.toLowerCase());
|
|
});
|
|
});
|
|
}, [filteredRightDataByTab, rightSearchTerm, config.rightPanel?.searchColumns, config.rightPanel?.searchColumn]);
|
|
|
|
// 체크박스 전체 선택/해제 (filteredRightData 정의 이후에 위치해야 함)
|
|
const handleSelectAll = useCallback(
|
|
(checked: boolean) => {
|
|
if (checked) {
|
|
const pkColumn = getPrimaryKeyColumn();
|
|
const allIds = new Set<string | number>(filteredRightData.map((item) => item[pkColumn] as string | number));
|
|
setSelectedRightItems(allIds);
|
|
} else {
|
|
setSelectedRightItems(new Set<string | number>());
|
|
}
|
|
},
|
|
[filteredRightData, getPrimaryKeyColumn],
|
|
);
|
|
|
|
// 리사이즈 핸들러
|
|
const handleResizeStart = useCallback(
|
|
(e: React.MouseEvent) => {
|
|
if (!config.resizable) return;
|
|
e.preventDefault();
|
|
setIsResizing(true);
|
|
},
|
|
[config.resizable],
|
|
);
|
|
|
|
const handleResizeMove = useCallback(
|
|
(e: MouseEvent) => {
|
|
if (!isResizing) return;
|
|
|
|
const container = document.getElementById(`split-panel-${component.id}`);
|
|
if (!container) return;
|
|
|
|
const rect = container.getBoundingClientRect();
|
|
const newPosition = ((e.clientX - rect.left) / rect.width) * 100;
|
|
const minLeft = ((config.minLeftWidth || 200) / rect.width) * 100;
|
|
const minRight = ((config.minRightWidth || 300) / rect.width) * 100;
|
|
|
|
setSplitPosition(Math.max(minLeft, Math.min(100 - minRight, newPosition)));
|
|
},
|
|
[isResizing, component.id, config.minLeftWidth, config.minRightWidth],
|
|
);
|
|
|
|
const handleResizeEnd = useCallback(() => {
|
|
setIsResizing(false);
|
|
}, []);
|
|
|
|
// 리사이즈 이벤트 리스너
|
|
useEffect(() => {
|
|
if (isResizing) {
|
|
window.addEventListener("mousemove", handleResizeMove);
|
|
window.addEventListener("mouseup", handleResizeEnd);
|
|
}
|
|
return () => {
|
|
window.removeEventListener("mousemove", handleResizeMove);
|
|
window.removeEventListener("mouseup", handleResizeEnd);
|
|
};
|
|
}, [isResizing, handleResizeMove, handleResizeEnd]);
|
|
|
|
// 초기 데이터 로드
|
|
useEffect(() => {
|
|
if (config.autoLoad && !isDesignMode) {
|
|
loadLeftData();
|
|
loadColumnLabels(config.leftPanel?.tableName || "", setLeftColumnLabels);
|
|
loadColumnLabels(config.rightPanel?.tableName || "", setRightColumnLabels);
|
|
}
|
|
}, [
|
|
config.autoLoad,
|
|
isDesignMode,
|
|
loadLeftData,
|
|
loadColumnLabels,
|
|
config.leftPanel?.tableName,
|
|
config.rightPanel?.tableName,
|
|
]);
|
|
|
|
// 컴포넌트 언마운트 시 DataProvider 해제
|
|
useEffect(() => {
|
|
return () => {
|
|
if (screenContext) {
|
|
screenContext.unregisterDataProvider(component.id);
|
|
}
|
|
};
|
|
}, [screenContext, component.id]);
|
|
|
|
// 컬럼 값 가져오기 (sourceTable 및 엔티티 참조 고려)
|
|
const getColumnValue = useCallback(
|
|
(item: any, col: ColumnConfig): any => {
|
|
// col.name이 "테이블명.컬럼명" 형식인 경우 처리
|
|
const actualColName = col.name.includes(".") ? col.name.split(".")[1] : col.name;
|
|
const tableFromName = col.name.includes(".") ? col.name.split(".")[0] : null;
|
|
const effectiveSourceTable = col.sourceTable || tableFromName;
|
|
|
|
// 기본 값 가져오기
|
|
let baseValue: any;
|
|
|
|
// sourceTable이 설정되어 있고, 메인 테이블이 아닌 경우
|
|
if (effectiveSourceTable && effectiveSourceTable !== config.rightPanel?.tableName) {
|
|
// 1. 테이블명.컬럼명 형식으로 먼저 시도 (mergeJoinData에서 저장한 형식)
|
|
const tableColumnKey = `${effectiveSourceTable}.${actualColName}`;
|
|
if (item[tableColumnKey] !== undefined) {
|
|
baseValue = item[tableColumnKey];
|
|
} else {
|
|
// 2. 조인 테이블의 alias가 설정된 경우 alias_컬럼명으로 시도
|
|
const joinTable = config.rightPanel?.joinTables?.find((jt) => jt.joinTable === effectiveSourceTable);
|
|
if (joinTable?.alias) {
|
|
const aliasKey = `${joinTable.alias}_${actualColName}`;
|
|
if (item[aliasKey] !== undefined) {
|
|
baseValue = item[aliasKey];
|
|
}
|
|
}
|
|
// 3. 그냥 컬럼명으로 시도 (메인 테이블에 없는 경우 조인 데이터가 직접 들어감)
|
|
if (baseValue === undefined && item[actualColName] !== undefined) {
|
|
baseValue = item[actualColName];
|
|
}
|
|
}
|
|
} else {
|
|
// 4. 기본: 컬럼명으로 직접 접근
|
|
baseValue = item[actualColName];
|
|
}
|
|
|
|
// 엔티티 참조 설정이 있는 경우 - 선택된 컬럼들의 값을 결합
|
|
if (col.entityReference?.displayColumns && col.entityReference.displayColumns.length > 0) {
|
|
// 엔티티 참조 컬럼들의 값을 수집
|
|
// 백엔드에서 entity 조인을 통해 "컬럼명_참조테이블컬럼" 형태로 데이터가 들어옴
|
|
const entityValues: string[] = [];
|
|
|
|
for (const displayCol of col.entityReference.displayColumns) {
|
|
// 다양한 형식으로 값을 찾아봄
|
|
// 1. 직접 컬럼명 (entity 조인 결과)
|
|
if (item[displayCol] !== undefined && item[displayCol] !== null) {
|
|
entityValues.push(String(item[displayCol]));
|
|
}
|
|
// 2. 컬럼명_참조컬럼 형식
|
|
else if (item[`${actualColName}_${displayCol}`] !== undefined) {
|
|
entityValues.push(String(item[`${actualColName}_${displayCol}`]));
|
|
}
|
|
// 3. 참조테이블.컬럼 형식
|
|
else if (col.entityReference.entityId) {
|
|
const refTableCol = `${col.entityReference.entityId}.${displayCol}`;
|
|
if (item[refTableCol] !== undefined && item[refTableCol] !== null) {
|
|
entityValues.push(String(item[refTableCol]));
|
|
}
|
|
}
|
|
}
|
|
|
|
// 엔티티 값들이 있으면 결합하여 반환
|
|
if (entityValues.length > 0) {
|
|
return entityValues.join(" - ");
|
|
}
|
|
}
|
|
|
|
return baseValue;
|
|
},
|
|
[config.rightPanel?.tableName, config.rightPanel?.joinTables],
|
|
);
|
|
|
|
// 값 포맷팅
|
|
const formatValue = (value: any, format?: ColumnConfig["format"]): string => {
|
|
if (value === null || value === undefined) return "-";
|
|
if (!format) return String(value);
|
|
|
|
switch (format.type) {
|
|
case "number":
|
|
const num = Number(value);
|
|
if (isNaN(num)) return String(value);
|
|
let formatted = format.decimalPlaces !== undefined ? num.toFixed(format.decimalPlaces) : String(num);
|
|
if (format.thousandSeparator) {
|
|
formatted = formatted.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
}
|
|
return `${format.prefix || ""}${formatted}${format.suffix || ""}`;
|
|
|
|
case "currency":
|
|
const currency = Number(value);
|
|
if (isNaN(currency)) return String(value);
|
|
const currencyFormatted = currency.toLocaleString("ko-KR");
|
|
return `${format.prefix || ""}${currencyFormatted}${format.suffix || "원"}`;
|
|
|
|
case "date":
|
|
try {
|
|
const date = new Date(value);
|
|
return date.toLocaleDateString("ko-KR");
|
|
} catch {
|
|
return String(value);
|
|
}
|
|
|
|
default:
|
|
return String(value);
|
|
}
|
|
};
|
|
|
|
// 좌측 패널 항목 렌더링
|
|
const renderLeftItem = (item: any, level: number = 0, index: number = 0) => {
|
|
// ID 컬럼 결정: 설정값 > 데이터에 존재하는 일반적인 ID 컬럼 > 폴백
|
|
const configIdColumn = config.leftPanel?.hierarchyConfig?.idColumn;
|
|
const idColumn = configIdColumn ||
|
|
(item["id"] !== undefined ? "id" :
|
|
item["dept_code"] !== undefined ? "dept_code" :
|
|
item["code"] !== undefined ? "code" : "id");
|
|
const itemId = item[idColumn] ?? `item-${level}-${index}`;
|
|
const hasChildren = item.children?.length > 0;
|
|
const isExpanded = expandedItems.has(String(itemId));
|
|
// 선택 상태 확인: 동일한 객체이거나 idColumn 값이 일치해야 함
|
|
const isSelected = selectedLeftItem && (
|
|
selectedLeftItem === item ||
|
|
(item[idColumn] !== undefined &&
|
|
selectedLeftItem[idColumn] !== undefined &&
|
|
selectedLeftItem[idColumn] === item[idColumn])
|
|
);
|
|
|
|
// displayRow 설정에 따라 컬럼 분류
|
|
const displayColumns = config.leftPanel?.displayColumns || [];
|
|
const nameRowColumns = displayColumns.filter(
|
|
(col, idx) => col.displayRow === "name" || (!col.displayRow && idx === 0),
|
|
);
|
|
const infoRowColumns = displayColumns.filter(
|
|
(col, idx) => col.displayRow === "info" || (!col.displayRow && idx > 0),
|
|
);
|
|
|
|
// 이름 행의 첫 번째 값 (주요 표시 값)
|
|
const primaryValue = nameRowColumns[0]
|
|
? item[nameRowColumns[0].name]
|
|
: Object.values(item).find((v) => typeof v === "string" && v.length > 0);
|
|
|
|
return (
|
|
<div key={itemId}>
|
|
<div
|
|
className={cn(
|
|
"flex cursor-pointer items-center gap-3 rounded-md px-4 py-3 transition-colors",
|
|
"hover:bg-accent",
|
|
isSelected && "bg-primary/10 border-primary border-l-2",
|
|
)}
|
|
style={{ paddingLeft: `${level * 16 + 16}px` }}
|
|
onClick={() => handleLeftItemSelect(item)}
|
|
>
|
|
{/* 확장/축소 버튼 */}
|
|
{hasChildren ? (
|
|
<button
|
|
className="hover:bg-accent rounded p-0.5"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
toggleExpand(String(itemId));
|
|
}}
|
|
>
|
|
{isExpanded ? (
|
|
<ChevronDown className="text-muted-foreground h-4 w-4" />
|
|
) : (
|
|
<ChevronRight className="text-muted-foreground h-4 w-4" />
|
|
)}
|
|
</button>
|
|
) : (
|
|
<div className="w-5" />
|
|
)}
|
|
|
|
{/* 아이콘 */}
|
|
<Building2 className="text-muted-foreground h-5 w-5" />
|
|
|
|
{/* 내용 */}
|
|
<div className="min-w-0 flex-1">
|
|
{/* 이름 행 (Name Row) */}
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="truncate text-base font-medium">{primaryValue || "이름 없음"}</span>
|
|
{/* 이름 행의 추가 컬럼들 */}
|
|
{nameRowColumns.slice(1).map((col, idx) => {
|
|
const value = item[col.name];
|
|
if (value === null || value === undefined) return null;
|
|
|
|
// 배지 타입이고 배열인 경우
|
|
if (col.displayConfig?.displayType === "badge" && Array.isArray(value)) {
|
|
return (
|
|
<div key={idx} className="flex flex-wrap gap-1">
|
|
{value.map((v, vIdx) => (
|
|
<Badge key={vIdx} variant="secondary" className="shrink-0 text-xs">
|
|
{formatValue(v, col.format)}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 배지 타입이지만 단일 값인 경우
|
|
if (col.displayConfig?.displayType === "badge") {
|
|
return (
|
|
<Badge key={idx} variant="secondary" className="shrink-0 text-xs">
|
|
{formatValue(value, col.format)}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
// 기본 텍스트 스타일
|
|
return (
|
|
<span key={idx} className="bg-muted shrink-0 rounded px-1.5 py-0.5 text-xs">
|
|
{formatValue(value, col.format)}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
{/* 정보 행 (Info Row) */}
|
|
{infoRowColumns.length > 0 && (
|
|
<div className="text-muted-foreground flex flex-wrap items-center gap-2 text-sm">
|
|
{infoRowColumns
|
|
.map((col, idx) => {
|
|
const value = item[col.name];
|
|
if (value === null || value === undefined) return null;
|
|
|
|
// 배지 타입이고 배열인 경우
|
|
if (col.displayConfig?.displayType === "badge" && Array.isArray(value)) {
|
|
return (
|
|
<div key={idx} className="flex flex-wrap gap-1">
|
|
{value.map((v, vIdx) => (
|
|
<Badge key={vIdx} variant="outline" className="text-xs">
|
|
{formatValue(v, col.format)}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 배지 타입이지만 단일 값인 경우
|
|
if (col.displayConfig?.displayType === "badge") {
|
|
return (
|
|
<Badge key={idx} variant="outline" className="text-xs">
|
|
{formatValue(value, col.format)}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
// 기본 텍스트
|
|
return <span key={idx}>{formatValue(value, col.format)}</span>;
|
|
})
|
|
.filter(Boolean)
|
|
.reduce((acc: React.ReactNode[], curr, idx) => {
|
|
if (idx > 0 && !React.isValidElement(curr))
|
|
acc.push(
|
|
<span key={`sep-${idx}`} className="text-muted-foreground/50">
|
|
|
|
|
</span>,
|
|
);
|
|
acc.push(curr);
|
|
return acc;
|
|
}, [])}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 좌측 패널 수정/삭제 버튼 */}
|
|
{(config.leftPanel?.showEditButton || config.leftPanel?.showDeleteButton) && (
|
|
<div className="flex gap-1" onClick={(e) => e.stopPropagation()}>
|
|
{config.leftPanel?.showEditButton && (
|
|
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => handleLeftEditItem(item)}>
|
|
<Edit className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
{config.leftPanel?.showDeleteButton && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-destructive hover:text-destructive h-8 w-8"
|
|
onClick={() => handleLeftDeleteClick(item)}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 자식 항목 */}
|
|
{hasChildren && isExpanded && (
|
|
<div>
|
|
{item.children.map((child: any, childIndex: number) => renderLeftItem(child, level + 1, childIndex))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 왼쪽 패널 테이블 렌더링
|
|
const renderLeftTable = () => {
|
|
const displayColumns = config.leftPanel?.displayColumns || [];
|
|
const pkColumn = getLeftPrimaryKeyColumn();
|
|
|
|
// 값 렌더링 (배지 지원)
|
|
const renderCellValue = (item: any, col: ColumnConfig) => {
|
|
const value = item[col.name];
|
|
if (value === null || value === undefined) return "-";
|
|
|
|
// 배지 타입이고 배열인 경우
|
|
if (col.displayConfig?.displayType === "badge" && Array.isArray(value)) {
|
|
return (
|
|
<div className="flex flex-wrap gap-1">
|
|
{value.map((v, vIdx) => (
|
|
<Badge key={vIdx} variant="secondary" className="text-xs">
|
|
{formatValue(v, col.format)}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 배지 타입이지만 단일 값인 경우
|
|
if (col.displayConfig?.displayType === "badge") {
|
|
return (
|
|
<Badge variant="secondary" className="text-xs">
|
|
{formatValue(value, col.format)}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
// 기본 텍스트
|
|
return formatValue(value, col.format);
|
|
};
|
|
|
|
return (
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
{displayColumns.map((col, idx) => (
|
|
<TableHead key={idx} style={{ width: col.width ? `${col.width}px` : "auto" }}>
|
|
{col.label || col.name}
|
|
</TableHead>
|
|
))}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredLeftData.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={displayColumns.length} className="text-muted-foreground h-24 text-center">
|
|
데이터가 없습니다
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredLeftData.map((item, index) => {
|
|
const itemId = item[pkColumn];
|
|
const isItemSelected =
|
|
selectedLeftItem &&
|
|
(selectedLeftItem === item ||
|
|
(item[pkColumn] !== undefined &&
|
|
selectedLeftItem[pkColumn] !== undefined &&
|
|
selectedLeftItem[pkColumn] === item[pkColumn]));
|
|
|
|
return (
|
|
<TableRow
|
|
key={itemId ?? index}
|
|
className={cn("cursor-pointer hover:bg-muted/50", isItemSelected && "bg-primary/10")}
|
|
onClick={() => handleLeftItemSelect(item)}
|
|
>
|
|
{displayColumns.map((col, colIdx) => (
|
|
<TableCell key={colIdx}>{renderCellValue(item, col)}</TableCell>
|
|
))}
|
|
</TableRow>
|
|
);
|
|
})
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 우측 패널 카드 렌더링
|
|
const renderRightCard = (item: any, index: number) => {
|
|
const displayColumns = config.rightPanel?.displayColumns || [];
|
|
const showLabels = config.rightPanel?.showLabels ?? false;
|
|
const showCheckbox = config.rightPanel?.showCheckbox ?? false;
|
|
const pkColumn = getPrimaryKeyColumn();
|
|
const itemId = item[pkColumn];
|
|
|
|
// displayRow 설정에 따라 컬럼 분류
|
|
// displayRow가 "name"이면 이름 행, "info"이면 정보 행 (기본값: 첫 번째는 name, 나머지는 info)
|
|
const nameRowColumns = displayColumns.filter(
|
|
(col, idx) => col.displayRow === "name" || (!col.displayRow && idx === 0),
|
|
);
|
|
const infoRowColumns = displayColumns.filter(
|
|
(col, idx) => col.displayRow === "info" || (!col.displayRow && idx > 0),
|
|
);
|
|
|
|
return (
|
|
<Card key={index} className="mb-2 py-0 transition-shadow hover:shadow-md">
|
|
<CardContent className="px-4 py-2">
|
|
<div className="flex items-start gap-3">
|
|
{/* 체크박스 */}
|
|
{showCheckbox && (
|
|
<Checkbox
|
|
checked={selectedRightItems.has(itemId)}
|
|
onCheckedChange={(checked) => handleSelectItem(itemId, !!checked)}
|
|
className="mt-1"
|
|
/>
|
|
)}
|
|
|
|
<div className="flex-1">
|
|
{/* showLabels가 true이면 라벨: 값 형식으로 가로 배치 */}
|
|
{showLabels ? (
|
|
<div className="space-y-1">
|
|
{/* 이름 행: 라벨: 값, 라벨: 값 형식으로 가로 배치 */}
|
|
{nameRowColumns.length > 0 && (
|
|
<div className="flex flex-wrap items-center gap-x-4 gap-y-1">
|
|
{nameRowColumns.map((col, idx) => {
|
|
const value = getColumnValue(item, col);
|
|
if (value === null || value === undefined) return null;
|
|
return (
|
|
<span key={idx} className="flex items-center gap-1">
|
|
<span className="text-muted-foreground text-sm">{col.label || col.name}:</span>
|
|
<span className="text-sm font-semibold">{formatValue(value, col.format)}</span>
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
{/* 정보 행: 라벨: 값, 라벨: 값 형식으로 가로 배치 */}
|
|
{infoRowColumns.length > 0 && (
|
|
<div className="text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1">
|
|
{infoRowColumns.map((col, idx) => {
|
|
const value = getColumnValue(item, col);
|
|
if (value === null || value === undefined) return null;
|
|
return (
|
|
<span key={idx} className="flex items-center gap-1">
|
|
<span className="text-sm">{col.label || col.name}:</span>
|
|
<span className="text-sm">{formatValue(value, col.format)}</span>
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
// showLabels가 false일 때 기존 방식 유지 (라벨 없이 값만)
|
|
<div className="space-y-1">
|
|
{/* 이름 행 */}
|
|
{nameRowColumns.length > 0 && (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{nameRowColumns.map((col, idx) => {
|
|
const value = getColumnValue(item, col);
|
|
if (value === null || value === undefined) return null;
|
|
if (idx === 0) {
|
|
return (
|
|
<span key={idx} className="text-base font-semibold">
|
|
{formatValue(value, col.format)}
|
|
</span>
|
|
);
|
|
}
|
|
return (
|
|
<span key={idx} className="bg-muted rounded px-2 py-0.5 text-sm">
|
|
{formatValue(value, col.format)}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
{/* 정보 행 */}
|
|
{infoRowColumns.length > 0 && (
|
|
<div className="text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1">
|
|
{infoRowColumns.map((col, idx) => {
|
|
const value = getColumnValue(item, col);
|
|
if (value === null || value === undefined) return null;
|
|
return (
|
|
<span key={idx} className="text-sm">
|
|
{formatValue(value, col.format)}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 액션 버튼 (개별 수정/삭제) */}
|
|
<div className="flex gap-1">
|
|
{config.rightPanel?.showEditButton && (
|
|
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => handleEditItem(item)}>
|
|
<Edit className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
{config.rightPanel?.showDeleteButton && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-destructive hover:text-destructive h-8 w-8"
|
|
onClick={() => handleDeleteClick(item)}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
// 우측 패널 테이블 렌더링
|
|
const renderRightTable = () => {
|
|
const displayColumns = config.rightPanel?.displayColumns || [];
|
|
const showCheckbox = config.rightPanel?.showCheckbox ?? true; // 테이블 모드는 기본 체크박스 표시
|
|
const pkColumn = getPrimaryKeyColumn();
|
|
const allSelected =
|
|
filteredRightData.length > 0 && filteredRightData.every((item) => selectedRightItems.has(item[pkColumn] as string | number));
|
|
const someSelected = filteredRightData.some((item) => selectedRightItems.has(item[pkColumn] as string | number));
|
|
|
|
return (
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
{showCheckbox && (
|
|
<TableHead className="w-12">
|
|
<Checkbox
|
|
checked={allSelected}
|
|
ref={(el) => {
|
|
if (el) {
|
|
(el as any).indeterminate = someSelected && !allSelected;
|
|
}
|
|
}}
|
|
onCheckedChange={handleSelectAll}
|
|
/>
|
|
</TableHead>
|
|
)}
|
|
{displayColumns.map((col, idx) => (
|
|
<TableHead key={idx} style={{ width: col.width ? `${col.width}px` : "auto" }}>
|
|
{col.label || col.name}
|
|
</TableHead>
|
|
))}
|
|
{(config.rightPanel?.showEditButton || config.rightPanel?.showDeleteButton) && (
|
|
<TableHead className="w-24 text-center">작업</TableHead>
|
|
)}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredRightData.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={
|
|
displayColumns.length +
|
|
(showCheckbox ? 1 : 0) +
|
|
(config.rightPanel?.showEditButton || config.rightPanel?.showDeleteButton ? 1 : 0)
|
|
}
|
|
className="text-muted-foreground h-24 text-center"
|
|
>
|
|
등록된 항목이 없습니다
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredRightData.map((item, index) => {
|
|
const itemId = item[pkColumn] as string | number;
|
|
return (
|
|
<TableRow key={index} className="hover:bg-muted/50">
|
|
{showCheckbox && (
|
|
<TableCell>
|
|
<Checkbox
|
|
checked={selectedRightItems.has(itemId)}
|
|
onCheckedChange={(checked) => handleSelectItem(itemId, !!checked)}
|
|
/>
|
|
</TableCell>
|
|
)}
|
|
{displayColumns.map((col, colIdx) => (
|
|
<TableCell key={colIdx}>{formatValue(getColumnValue(item, col), col.format)}</TableCell>
|
|
))}
|
|
{(config.rightPanel?.showEditButton || config.rightPanel?.showDeleteButton) && (
|
|
<TableCell className="text-center">
|
|
<div className="flex justify-center gap-1">
|
|
{config.rightPanel?.showEditButton && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-7 w-7"
|
|
onClick={() => handleEditItem(item)}
|
|
>
|
|
<Edit className="h-3.5 w-3.5" />
|
|
</Button>
|
|
)}
|
|
{config.rightPanel?.showDeleteButton && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-destructive hover:text-destructive h-7 w-7"
|
|
onClick={() => handleDeleteClick(item)}
|
|
>
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
)}
|
|
</TableRow>
|
|
);
|
|
})
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 액션 버튼 렌더링
|
|
const renderActionButtons = () => {
|
|
const actionButtons = config.rightPanel?.actionButtons;
|
|
if (!actionButtons || actionButtons.length === 0) return null;
|
|
|
|
return (
|
|
<div className="flex gap-2">
|
|
{actionButtons.map((btn) => (
|
|
<Button
|
|
key={btn.id}
|
|
variant={btn.variant || "default"}
|
|
size="sm"
|
|
className="h-8 text-sm"
|
|
onClick={() => handleActionButton(btn)}
|
|
disabled={
|
|
// 일괄 삭제 버튼은 선택된 항목이 없으면 비활성화
|
|
(btn.action === "bulk-delete" || btn.action === "delete") && selectedRightItems.size === 0
|
|
}
|
|
>
|
|
{btn.icon === "Plus" && <Plus className="mr-1 h-4 w-4" />}
|
|
{btn.icon === "Edit" && <Edit className="mr-1 h-4 w-4" />}
|
|
{btn.icon === "Trash2" && <Trash2 className="mr-1 h-4 w-4" />}
|
|
{btn.label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 디자인 모드 렌더링
|
|
if (isDesignMode) {
|
|
const leftButtons = config.leftPanel?.actionButtons || [];
|
|
const rightButtons = config.rightPanel?.actionButtons || [];
|
|
const leftDisplayColumns = config.leftPanel?.displayColumns || [];
|
|
const rightDisplayColumns = config.rightPanel?.displayColumns || [];
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex h-full w-full rounded-lg border-2 border-dashed",
|
|
isSelected ? "border-primary" : "border-muted-foreground/30",
|
|
)}
|
|
onClick={onClick}
|
|
style={{ minHeight: "300px" }}
|
|
>
|
|
{/* 좌측 패널 미리보기 */}
|
|
<div className="bg-muted/20 flex flex-col border-r" style={{ width: `${splitPosition}%` }}>
|
|
{/* 헤더 */}
|
|
<div className="flex items-center justify-between border-b px-3 py-2">
|
|
<div>
|
|
<div className="text-sm font-medium">{config.leftPanel?.title || "좌측 패널"}</div>
|
|
<div className="text-muted-foreground text-[10px]">
|
|
{config.leftPanel?.tableName || "테이블 미설정"}
|
|
</div>
|
|
</div>
|
|
{leftButtons.length > 0 && (
|
|
<div className="flex gap-1">
|
|
{leftButtons.slice(0, 2).map((btn) => (
|
|
<div
|
|
key={btn.id}
|
|
className="bg-primary/10 text-primary rounded px-2 py-0.5 text-[10px]"
|
|
>
|
|
{btn.label}
|
|
</div>
|
|
))}
|
|
{leftButtons.length > 2 && (
|
|
<div className="text-muted-foreground text-[10px]">+{leftButtons.length - 2}</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 검색 표시 */}
|
|
{config.leftPanel?.showSearch && (
|
|
<div className="border-b px-3 py-2">
|
|
<div className="bg-muted h-7 w-full rounded text-[10px] leading-7 text-center text-muted-foreground">
|
|
검색
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 컬럼 미리보기 */}
|
|
<div className="flex-1 overflow-hidden p-3">
|
|
{leftDisplayColumns.length > 0 ? (
|
|
<div className="space-y-2">
|
|
{/* 샘플 카드 */}
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="rounded-md border bg-background/50 p-2">
|
|
<div className="flex items-center gap-2">
|
|
{leftDisplayColumns
|
|
.filter((col) => col.displayRow === "name" || !col.displayRow)
|
|
.slice(0, 2)
|
|
.map((col, idx) => (
|
|
<div
|
|
key={col.name}
|
|
className={cn(
|
|
"text-[10px]",
|
|
idx === 0 ? "font-medium" : "text-muted-foreground"
|
|
)}
|
|
>
|
|
{col.label || col.name}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{leftDisplayColumns.filter((col) => col.displayRow === "info").length > 0 && (
|
|
<div className="text-muted-foreground mt-1 flex gap-2 text-[10px]">
|
|
{leftDisplayColumns
|
|
.filter((col) => col.displayRow === "info")
|
|
.slice(0, 3)
|
|
.map((col) => (
|
|
<span key={col.name}>{col.label || col.name}</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="flex h-full items-center justify-center">
|
|
<div className="text-muted-foreground text-xs">컬럼 미설정</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 우측 패널 미리보기 */}
|
|
<div className="flex flex-1 flex-col">
|
|
{/* 헤더 */}
|
|
<div className="flex items-center justify-between border-b px-3 py-2">
|
|
<div>
|
|
<div className="text-sm font-medium">{config.rightPanel?.title || "우측 패널"}</div>
|
|
<div className="text-muted-foreground text-[10px]">
|
|
{config.rightPanel?.tableName || "테이블 미설정"}
|
|
</div>
|
|
</div>
|
|
{rightButtons.length > 0 && (
|
|
<div className="flex gap-1">
|
|
{rightButtons.slice(0, 2).map((btn) => (
|
|
<div
|
|
key={btn.id}
|
|
className={cn(
|
|
"rounded px-2 py-0.5 text-[10px]",
|
|
btn.variant === "destructive"
|
|
? "bg-destructive/10 text-destructive"
|
|
: "bg-primary/10 text-primary"
|
|
)}
|
|
>
|
|
{btn.label}
|
|
</div>
|
|
))}
|
|
{rightButtons.length > 2 && (
|
|
<div className="text-muted-foreground text-[10px]">+{rightButtons.length - 2}</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 검색 표시 */}
|
|
{config.rightPanel?.showSearch && (
|
|
<div className="border-b px-3 py-2">
|
|
<div className="bg-muted h-7 w-full rounded text-[10px] leading-7 text-center text-muted-foreground">
|
|
검색
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 컬럼 미리보기 */}
|
|
<div className="flex-1 overflow-hidden p-3">
|
|
{rightDisplayColumns.length > 0 ? (
|
|
config.rightPanel?.displayMode === "table" ? (
|
|
// 테이블 모드 미리보기
|
|
<div className="rounded-md border">
|
|
<div className="bg-muted/50 flex border-b px-2 py-1">
|
|
{config.rightPanel?.showCheckbox && (
|
|
<div className="w-8 text-[10px]"></div>
|
|
)}
|
|
{rightDisplayColumns.slice(0, 4).map((col) => (
|
|
<div key={col.name} className="flex-1 text-[10px] font-medium">
|
|
{col.label || col.name}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="flex border-b px-2 py-1 last:border-b-0">
|
|
{config.rightPanel?.showCheckbox && (
|
|
<div className="w-8">
|
|
<div className="border h-3 w-3 rounded-sm"></div>
|
|
</div>
|
|
)}
|
|
{rightDisplayColumns.slice(0, 4).map((col) => (
|
|
<div key={col.name} className="text-muted-foreground flex-1 text-[10px]">
|
|
---
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
// 카드 모드 미리보기
|
|
<div className="space-y-2">
|
|
{[1, 2].map((i) => (
|
|
<div key={i} className="rounded-md border bg-background/50 p-2">
|
|
<div className="flex items-center gap-2">
|
|
{rightDisplayColumns
|
|
.filter((col) => col.displayRow === "name" || !col.displayRow)
|
|
.slice(0, 2)
|
|
.map((col, idx) => (
|
|
<div
|
|
key={col.name}
|
|
className={cn(
|
|
"text-[10px]",
|
|
idx === 0 ? "font-medium" : "text-muted-foreground"
|
|
)}
|
|
>
|
|
{col.label || col.name}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{rightDisplayColumns.filter((col) => col.displayRow === "info").length > 0 && (
|
|
<div className="text-muted-foreground mt-1 flex gap-2 text-[10px]">
|
|
{rightDisplayColumns
|
|
.filter((col) => col.displayRow === "info")
|
|
.slice(0, 3)
|
|
.map((col) => (
|
|
<span key={col.name}>{col.label || col.name}</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
) : (
|
|
<div className="flex h-full items-center justify-center">
|
|
<div className="text-muted-foreground text-xs">컬럼 미설정</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 연결 설정 표시 */}
|
|
{(config.joinConfig?.leftColumn || config.joinConfig?.keys?.length) && (
|
|
<div className="border-t px-3 py-1">
|
|
<div className="text-muted-foreground text-[10px]">
|
|
연결: {config.joinConfig?.leftColumn || config.joinConfig?.keys?.[0]?.leftColumn} →{" "}
|
|
{config.joinConfig?.rightColumn || config.joinConfig?.keys?.[0]?.rightColumn}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
id={`split-panel-${component.id}`}
|
|
className="bg-background flex h-full w-full overflow-hidden rounded-lg border"
|
|
style={{ minHeight: "400px" }}
|
|
>
|
|
{/* 좌측 패널 */}
|
|
<div
|
|
className="bg-card flex flex-col border-r"
|
|
style={{ width: `${splitPosition}%`, minWidth: config.minLeftWidth }}
|
|
>
|
|
{/* 헤더 */}
|
|
<div className="bg-muted/30 border-b p-4">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h3 className="text-base font-semibold">{config.leftPanel?.title || "목록"}</h3>
|
|
{/* actionButtons 배열이 정의되어 있으면(빈 배열 포함) 해당 배열 사용, undefined면 기존 showAddButton 사용 (하위호환) */}
|
|
{config.leftPanel?.actionButtons !== undefined ? (
|
|
// 새로운 actionButtons 배열 기반 렌더링 (빈 배열이면 버튼 없음)
|
|
config.leftPanel.actionButtons.length > 0 && (
|
|
<div className="flex items-center gap-2">
|
|
{config.leftPanel.actionButtons.map((btn, idx) => (
|
|
<Button
|
|
key={idx}
|
|
size="sm"
|
|
variant={btn.variant || "default"}
|
|
className="h-8 text-sm"
|
|
onClick={() => handleLeftActionButton(btn)}
|
|
>
|
|
{btn.icon && <span className="mr-1">{btn.icon}</span>}
|
|
{btn.label || "버튼"}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
)
|
|
) : config.leftPanel?.showAddButton ? (
|
|
// 기존 showAddButton 기반 렌더링 (하위호환 - actionButtons가 undefined일 때만)
|
|
<Button size="sm" variant="default" className="h-8 text-sm" onClick={handleLeftAddClick}>
|
|
<Plus className="mr-1 h-4 w-4" />
|
|
{config.leftPanel?.addButtonLabel || "추가"}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
|
|
{/* 검색 */}
|
|
{config.leftPanel?.showSearch && (
|
|
<div className="relative">
|
|
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
|
<Input
|
|
placeholder="검색..."
|
|
value={leftSearchTerm}
|
|
onChange={(e) => setLeftSearchTerm(e.target.value)}
|
|
className="h-9 pl-9 text-sm"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 좌측 패널 탭 */}
|
|
{config.leftPanel?.tabConfig?.enabled && leftTabs.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 border-b px-4 py-3">
|
|
{leftTabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setLeftActiveTab(tab.id)}
|
|
className={cn(
|
|
"inline-flex items-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-medium transition-all",
|
|
leftActiveTab === tab.id
|
|
? "border-primary bg-primary/5 text-primary"
|
|
: "border-muted bg-background text-muted-foreground hover:border-primary/50 hover:text-foreground"
|
|
)}
|
|
>
|
|
<span>{tab.label}</span>
|
|
{config.leftPanel?.tabConfig?.showCount && (
|
|
<span
|
|
className={cn(
|
|
"rounded-full px-2 py-0.5 text-xs",
|
|
leftActiveTab === tab.id ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
|
|
)}
|
|
>
|
|
{tab.count}
|
|
</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 목록 */}
|
|
<div className="flex-1 overflow-auto p-2">
|
|
{leftLoading ? (
|
|
<div className="text-muted-foreground flex h-full items-center justify-center text-base">로딩 중...</div>
|
|
) : (config.leftPanel?.displayMode || "card") === "table" ? (
|
|
// 테이블 모드
|
|
renderLeftTable()
|
|
) : filteredLeftData.length === 0 ? (
|
|
<div className="text-muted-foreground flex h-full items-center justify-center text-base">
|
|
데이터가 없습니다
|
|
</div>
|
|
) : (
|
|
// 카드 모드 (기본)
|
|
<div className="py-1">{filteredLeftData.map((item, index) => renderLeftItem(item, 0, index))}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 리사이저 */}
|
|
{config.resizable && (
|
|
<div
|
|
className={cn("hover:bg-primary/50 w-1 cursor-col-resize transition-colors", isResizing && "bg-primary/50")}
|
|
onMouseDown={handleResizeStart}
|
|
/>
|
|
)}
|
|
|
|
{/* 우측 패널 */}
|
|
<div className="bg-card flex flex-1 flex-col">
|
|
{/* 헤더 */}
|
|
<div className="bg-muted/30 border-b p-4">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<h3 className="text-base font-semibold">
|
|
{selectedLeftItem
|
|
? config.leftPanel?.displayColumns?.[0]
|
|
? selectedLeftItem[config.leftPanel.displayColumns[0].name]
|
|
: config.rightPanel?.title || "상세"
|
|
: config.rightPanel?.title || "상세"}
|
|
</h3>
|
|
{selectedLeftItem && <span className="text-muted-foreground text-sm">({rightData.length}건)</span>}
|
|
{/* 선택된 항목 수 표시 */}
|
|
{selectedRightItems.size > 0 && (
|
|
<span className="text-primary text-sm font-medium">{selectedRightItems.size}개 선택됨</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{/* actionButtons 배열이 정의되어 있으면(빈 배열 포함) 해당 배열 사용, undefined면 기존 showAddButton 사용 (하위호환) */}
|
|
{selectedLeftItem && (
|
|
config.rightPanel?.actionButtons !== undefined ? (
|
|
// 새로운 actionButtons 배열 기반 렌더링 (빈 배열이면 버튼 없음)
|
|
config.rightPanel.actionButtons.length > 0 && renderActionButtons()
|
|
) : config.rightPanel?.showAddButton ? (
|
|
// 기존 showAddButton 기반 렌더링 (하위호환 - actionButtons가 undefined일 때만)
|
|
<Button size="sm" variant="default" className="h-8 text-sm" onClick={handleRightAddClick}>
|
|
<Plus className="mr-1 h-4 w-4" />
|
|
{config.rightPanel?.addButtonLabel || "추가"}
|
|
</Button>
|
|
) : null
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 검색 */}
|
|
{config.rightPanel?.showSearch && selectedLeftItem && (
|
|
<div className="relative">
|
|
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
|
<Input
|
|
placeholder="검색..."
|
|
value={rightSearchTerm}
|
|
onChange={(e) => setRightSearchTerm(e.target.value)}
|
|
className="h-9 pl-9 text-sm"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 우측 패널 탭 */}
|
|
{config.rightPanel?.tabConfig?.enabled && rightTabs.length > 0 && selectedLeftItem && (
|
|
<div className="flex flex-wrap gap-2 border-b px-4 py-3">
|
|
{rightTabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setRightActiveTab(tab.id)}
|
|
className={cn(
|
|
"inline-flex items-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-medium transition-all",
|
|
rightActiveTab === tab.id
|
|
? "border-primary bg-primary/5 text-primary"
|
|
: "border-muted bg-background text-muted-foreground hover:border-primary/50 hover:text-foreground"
|
|
)}
|
|
>
|
|
<span>{tab.label}</span>
|
|
{config.rightPanel?.tabConfig?.showCount && (
|
|
<span
|
|
className={cn(
|
|
"rounded-full px-2 py-0.5 text-xs",
|
|
rightActiveTab === tab.id ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
|
|
)}
|
|
>
|
|
{tab.count}
|
|
</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 내용 */}
|
|
<div className="flex-1 overflow-auto p-4">
|
|
{!selectedLeftItem ? (
|
|
<div className="text-muted-foreground flex h-full flex-col items-center justify-center">
|
|
<Users className="mb-3 h-16 w-16 opacity-30" />
|
|
<span className="text-base">{config.rightPanel?.emptyMessage || "좌측에서 항목을 선택해주세요"}</span>
|
|
</div>
|
|
) : rightLoading ? (
|
|
<div className="text-muted-foreground flex h-full items-center justify-center text-base">로딩 중...</div>
|
|
) : (
|
|
<>
|
|
{/* displayMode에 따라 카드 또는 테이블 렌더링 */}
|
|
{config.rightPanel?.displayMode === "table" ? (
|
|
renderRightTable()
|
|
) : filteredRightData.length === 0 ? (
|
|
<div className="text-muted-foreground flex h-full flex-col items-center justify-center">
|
|
<Users className="mb-3 h-16 w-16 opacity-30" />
|
|
<span className="text-base">등록된 항목이 없습니다</span>
|
|
</div>
|
|
) : (
|
|
<div>{filteredRightData.map((item, index) => renderRightCard(item, index))}</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 삭제 확인 다이얼로그 */}
|
|
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>삭제 확인</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
{isBulkDelete
|
|
? `선택한 ${selectedRightItems.size}개 항목을 삭제하시겠습니까?`
|
|
: "이 항목을 삭제하시겠습니까?"}
|
|
<br />이 작업은 되돌릴 수 없습니다.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>취소</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={executeDelete}
|
|
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
|
>
|
|
삭제
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* SplitPanelLayout2 래퍼 컴포넌트
|
|
*/
|
|
export const SplitPanelLayout2Wrapper: React.FC<SplitPanelLayout2ComponentProps> = (props) => {
|
|
return <SplitPanelLayout2Component {...props} />;
|
|
};
|