jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(split-panel-layout2): 그룹핑, 탭 필터링, 설정 모달 기능 추가

Browse Source 
- types.ts: GroupingConfig, TabConfig, ColumnDisplayConfig 등 타입 확장
- Component: groupData, generateTabs, filterDataByTab 함수 추가
- ConfigPanel: SearchableColumnSelect, 설정 모달 상태 관리 추가
- 신규 모달: ActionButtonConfigModal, ColumnConfigModal, DataTransferConfigModal
- UniversalFormModal: 연결필드 소스 테이블 Combobox로 변경
This commit is contained in:
SeongHyun Kim
2025-12-24 09:08:16 +09:00
parent 718788110a
commit 3396834417
11 changed files with 4189 additions and 869 deletions
Download Patch File Download Diff File Expand all files Collapse all files

821
frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Component.tsx
View File

@@ -2,7 +2,8 @@
import React, { useState, useEffect, useCallback, useMemo } from "react";
import { ComponentRendererProps } from "@/types/component";
import { SplitPanelLayout2Config, ColumnConfig, DataTransferField, ActionButtonConfig, JoinTableConfig } from "./types";
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 {
@@ -86,6 +87,177 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
const [itemToDelete, setItemToDelete] = useState<any>(null);
const [isBulkDelete, setIsBulkDelete] = useState(false);
// 탭 상태 (좌측/우측 각각)
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;
@@ -115,6 +287,80 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
);
}
// 조인 테이블 처리 (좌측 패널) - 인라인 처리
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 필터 적용)`);
}
@@ -124,7 +370,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
} finally {
setLeftLoading(false);
}
}, [config.leftPanel?.tableName, config.leftPanel?.hierarchyConfig, isDesignMode]);
}, [config.leftPanel?.tableName, config.leftPanel?.hierarchyConfig, config.leftPanel?.grouping, config.leftPanel?.displayColumns, config.leftPanel?.joinTables, isDesignMode, groupData]);
// 조인 테이블 데이터 로드 (단일 테이블)
const loadJoinTableData = useCallback(
@@ -700,16 +946,20 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
});
}, []);
// 검색 필터링
// 검색 필터링 (탭 필터링 후 적용)
const filteredLeftData = useMemo(() => {
if (!leftSearchTerm) return leftData;
// 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 leftData;
if (columnsToSearch.length === 0) return data;
const filterRecursive = (items: any[]): any[] => {
return items.filter((item) => {
@@ -731,27 +981,31 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
});
};
return filterRecursive([...leftData]);
}, [leftData, leftSearchTerm, config.leftPanel?.searchColumns, config.leftPanel?.searchColumn]);
return filterRecursive([...data]);
}, [filteredLeftDataByTab, leftSearchTerm, config.leftPanel?.searchColumns, config.leftPanel?.searchColumn]);
const filteredRightData = useMemo(() => {
if (!rightSearchTerm) return rightData;
// 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 rightData;
if (columnsToSearch.length === 0) return data;
return rightData.filter((item) => {
return data.filter((item) => {
// 여러 컬럼 중 하나라도 매칭되면 포함
return columnsToSearch.some((col) => {
const value = String(item[col] || "").toLowerCase();
return value.includes(rightSearchTerm.toLowerCase());
});
});
}, [rightData, rightSearchTerm, config.rightPanel?.searchColumns, config.rightPanel?.searchColumn]);
}, [filteredRightDataByTab, rightSearchTerm, config.rightPanel?.searchColumns, config.rightPanel?.searchColumn]);
// 체크박스 전체 선택/해제 (filteredRightData 정의 이후에 위치해야 함)
const handleSelectAll = useCallback(
@@ -835,7 +1089,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
};
}, [screenContext, component.id]);
// 컬럼 값 가져오기 (sourceTable 고려)
// 컬럼 값 가져오기 (sourceTable 및 엔티티 참조 고려)
const getColumnValue = useCallback(
(item: any, col: ColumnConfig): any => {
// col.name이 "테이블명.컬럼명" 형식인 경우 처리
@@ -843,28 +1097,66 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
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) {
return item[tableColumnKey];
}
// 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) {
return item[aliasKey];
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];
}
}
// 3. 그냥 컬럼명으로 시도 (메인 테이블에 없는 경우 조인 데이터가 직접 들어감)
if (item[actualColName] !== undefined) {
return 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(" - ");
}
}
// 4. 기본: 컬럼명으로 직접 접근
return item[actualColName];
return baseValue;
},
[config.rightPanel?.tableName, config.rightPanel?.joinTables],
);
@@ -969,15 +1261,39 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
{/* 아이콘 */}
<Building2 className="text-muted-foreground h-5 w-5" />
{/* 내용 */}
{/* 내용 */}
<div className="min-w-0 flex-1">
{/* 이름 행 (Name Row) */}
<div className="flex items-center gap-2">
<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) return null;
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)}
@@ -987,16 +1303,40 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
</div>
{/* 정보 행 (Info Row) */}
{infoRowColumns.length > 0 && (
<div className="text-muted-foreground flex items-center gap-2 truncate text-sm">
<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) return null;
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)
if (idx > 0 && !React.isValidElement(curr))
acc.push(
<span key={`sep-${idx}`} className="text-muted-foreground/50">
|
@@ -1020,6 +1360,95 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
);
};
// 왼쪽 패널 기본키 컬럼명 가져오기
const getLeftPrimaryKeyColumn = useCallback(() => {
return config.leftPanel?.primaryKeyColumn || config.leftPanel?.hierarchyConfig?.idColumn || "id";
}, [config.leftPanel?.primaryKeyColumn, config.leftPanel?.hierarchyConfig?.idColumn]);
// 왼쪽 패널 테이블 렌더링
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 || [];
@@ -1285,6 +1714,11 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
// 디자인 모드 렌더링
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(
@@ -1292,19 +1726,211 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
isSelected ? "border-primary" : "border-muted-foreground/30",
)}
onClick={onClick}
style={{ minHeight: "300px" }}
>
{/* 좌측 패널 미리보기 */}
<div className="bg-muted/30 flex flex-col border-r p-4" style={{ width: `${splitPosition}%` }}>
<div className="mb-2 text-sm font-medium">{config.leftPanel?.title || "좌측 패널"}</div>
<div className="text-muted-foreground mb-2 text-xs">테이블: {config.leftPanel?.tableName || "미설정"}</div>
<div className="text-muted-foreground flex flex-1 items-center justify-center text-xs">좌측 목록 영역</div>
<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 p-4">
<div className="mb-2 text-sm font-medium">{config.rightPanel?.title || "우측 패널"}</div>
<div className="text-muted-foreground mb-2 text-xs">테이블: {config.rightPanel?.tableName || "미설정"}</div>
<div className="text-muted-foreground flex flex-1 items-center justify-center text-xs">우측 상세 영역</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>
);
@@ -1325,12 +1951,36 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
<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>
{config.leftPanel?.showAddButton && (
{/* 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={() => {
if (btn.action === "add") {
handleLeftAddClick();
}
}}
>
{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>
{/* 검색 */}
@@ -1347,15 +1997,49 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
)}
</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">
<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>
@@ -1389,15 +2073,18 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
)}
</div>
<div className="flex items-center gap-2">
{/* 복수 액션 버튼 (actionButtons 설정 시) */}
{selectedLeftItem && renderActionButtons()}
{/* 기존 단일 추가 버튼 (하위 호환성) */}
{config.rightPanel?.showAddButton && selectedLeftItem && !config.rightPanel?.actionButtons?.length && (
<Button size="sm" variant="default" className="h-8 text-sm" onClick={handleRightAddClick}>
<Plus className="mr-1 h-4 w-4" />
{config.rightPanel?.addButtonLabel || "추가"}
</Button>
{/* 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>
@@ -1416,6 +2103,36 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
)}
</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 ? (