kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(split-panel-layout2): 복수 검색 컬럼 지원 기능 추가 

- SearchColumnConfig 타입 추가 (types.ts)
- 좌측/우측 패널 모두 여러 검색 컬럼 설정 가능
- ConfigPanel에 검색 컬럼 추가/삭제 UI 구현
- 검색 시 OR 조건으로 여러 컬럼 동시 검색
- 기존 searchColumn 단일 설정과 하위 호환성 유지
This commit is contained in:
SeongHyun Kim 2025-12-03 18:43:01 +09:00
parent 700623aa78
commit 294c61e0e3
3 changed files with 587 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -317,13 +317,20 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
const filteredLeftData = useMemo(() => {
if (!leftSearchTerm) return leftData;
const searchColumn = config.leftPanel?.searchColumn;
if (!searchColumn) return leftData;
// 복수 검색 컬럼 지원 (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;
const filterRecursive = (items: any[]): any[] => {
return items.filter((item) => {
const value = String(item[searchColumn] || "").toLowerCase();
const matches = value.includes(leftSearchTerm.toLowerCase());
// 여러 컬럼 중 하나라도 매칭되면 포함
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);
@ -338,19 +345,26 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
};
return filterRecursive([...leftData]);
}, [leftData, leftSearchTerm, config.leftPanel?.searchColumn]);
}, [leftData, leftSearchTerm, config.leftPanel?.searchColumns, config.leftPanel?.searchColumn]);
const filteredRightData = useMemo(() => {
if (!rightSearchTerm) return rightData;
const searchColumn = config.rightPanel?.searchColumn;
if (!searchColumn) return rightData;
// 복수 검색 컬럼 지원 (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;
return rightData.filter((item) => {
const value = String(item[searchColumn] || "").toLowerCase();
return value.includes(rightSearchTerm.toLowerCase());
// 여러 컬럼 중 하나라도 매칭되면 포함
return columnsToSearch.some((col) => {
const value = String(item[col] || "").toLowerCase();
return value.includes(rightSearchTerm.toLowerCase());
});
});
}, [rightData, rightSearchTerm, config.rightPanel?.searchColumn]);
}, [rightData, rightSearchTerm, config.rightPanel?.searchColumns, config.rightPanel?.searchColumn]);
// 리사이즈 핸들러
const handleResizeStart = useCallback((e: React.MouseEvent) => {
@ -451,15 +465,19 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
const isExpanded = expandedItems.has(String(itemId));
const isSelected = selectedLeftItem && selectedLeftItem[idColumn] === item[idColumn];
// 표시할 컬럼 결정
// displayRow 설정에 따라 컬럼 분류
const displayColumns = config.leftPanel?.displayColumns || [];
const primaryColumn = displayColumns[0];
const secondaryColumn = displayColumns[1];
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 = primaryColumn
? item[primaryColumn.name]
// 이름 행의 첫 번째 값 (주요 표시 값)
const primaryValue = nameRowColumns[0]
? item[nameRowColumns[0].name]
: Object.values(item).find((v) => typeof v === "string" && v.length > 0);
const secondaryValue = secondaryColumn ? item[secondaryColumn.name] : null;
return (
<div key={itemId}>
@ -496,12 +514,38 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
{/* 내용 */}
<div className="flex-1 min-w-0">
<div className="font-medium text-base truncate">
{primaryValue || "이름 없음"}
{/* 이름 행 (Name Row) */}
<div className="flex items-center gap-2">
<span className="font-medium text-base truncate">
{primaryValue || "이름 없음"}
</span>
{/* 이름 행의 추가 컬럼들 (배지 스타일) */}
{nameRowColumns.slice(1).map((col, idx) => {
const value = item[col.name];
if (!value) return null;
return (
<span key={idx} className="text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">
{formatValue(value, col.format)}
</span>
);
})}
</div>
{secondaryValue && (
<div className="text-sm text-muted-foreground truncate">
{secondaryValue}
{/* 정보 행 (Info Row) */}
{infoRowColumns.length > 0 && (
<div className="flex items-center gap-2 text-sm text-muted-foreground truncate">
{infoRowColumns.map((col, idx) => {
const value = item[col.name];
if (!value) return null;
return (
<span key={idx}>
{formatValue(value, col.format)}
</span>
);
}).filter(Boolean).reduce((acc: React.ReactNode[], curr, idx) => {
if (idx > 0) acc.push(<span key={`sep-${idx}`} className="text-muted-foreground/50">|</span>);
acc.push(curr);
return acc;
}, [])}
</div>
)}
</div>
@ -521,53 +565,72 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
const renderRightCard = (item: any, index: number) => {
const displayColumns = config.rightPanel?.displayColumns || [];
// 첫 번째 컬럼을 이름으로 사용
const nameColumn = displayColumns[0];
const name = nameColumn ? item[nameColumn.name] : "이름 없음";
// 나머지 컬럼들
const otherColumns = displayColumns.slice(1);
// 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-3 hover:shadow-md transition-shadow">
<CardContent className="p-4">
<Card key={index} className="mb-2 py-0 hover:shadow-md transition-shadow">
<CardContent className="px-4 py-2">
<div className="flex items-start justify-between">
<div className="flex-1">
{/* 이름 */}
<div className="flex items-center gap-2 mb-2">
<span className="font-semibold text-lg">{name}</span>
{otherColumns[0] && (
<span className="text-sm bg-muted px-2 py-0.5 rounded">
{item[otherColumns[0].name]}
</span>
)}
</div>
{/* 이름 행 (Name Row) */}
{nameRowColumns.length > 0 && (
<div className="flex items-center gap-2 mb-2">
{nameRowColumns.map((col, idx) => {
const value = item[col.name];
if (!value && idx > 0) return null;
// 첫 번째 컬럼은 굵게 표시
if (idx === 0) {
return (
<span key={idx} className="font-semibold text-lg">
{formatValue(value, col.format) || "이름 없음"}
</span>
);
}
// 나머지는 배지 스타일
return (
<span key={idx} className="text-sm bg-muted px-2 py-0.5 rounded">
{formatValue(value, col.format)}
</span>
);
})}
</div>
)}
{/* 상세 정보 */}
<div className="flex flex-wrap gap-x-4 gap-y-1 text-base text-muted-foreground">
{otherColumns.slice(1).map((col, idx) => {
const value = item[col.name];
if (!value) return null;
{/* 정보 행 (Info Row) */}
{infoRowColumns.length > 0 && (
<div className="flex flex-wrap gap-x-4 gap-y-1 text-base text-muted-foreground">
{infoRowColumns.map((col, idx) => {
const value = item[col.name];
if (!value) return null;
// 아이콘 결정
let icon = null;
const colName = col.name.toLowerCase();
if (colName.includes("tel") || colName.includes("phone")) {
icon = <span className="text-sm">tel</span>;
} else if (colName.includes("email")) {
icon = <span className="text-sm">@</span>;
} else if (colName.includes("sabun") || colName.includes("id")) {
icon = <span className="text-sm">ID</span>;
}
// 아이콘 결정
let icon = null;
const colName = col.name.toLowerCase();
if (colName.includes("tel") || colName.includes("phone")) {
icon = <span className="text-sm">tel</span>;
} else if (colName.includes("email")) {
icon = <span className="text-sm">@</span>;
} else if (colName.includes("sabun") || colName.includes("id")) {
icon = <span className="text-sm">ID</span>;
}
return (
<span key={idx} className="flex items-center gap-1">
{icon}
{formatValue(value, col.format)}
</span>
);
})}
</div>
return (
<span key={idx} className="flex items-center gap-1">
{icon}
{formatValue(value, col.format)}
</span>
);
})}
</div>
)}
</div>
{/* 액션 버튼 */}

621
frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel.tsx
View File

@ -98,13 +98,35 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
const loadTables = useCallback(async () => {
setTablesLoading(true);
try {
const response = await apiClient.get("/table/list?userLang=KR");
const tableList = response.data?.data || response.data || [];
if (Array.isArray(tableList)) {
setTables(tableList);
const response = await apiClient.get("/table-management/tables");
console.log("[loadTables] API 응답:", response.data);
let tableList: any[] = [];
if (response.data?.success && Array.isArray(response.data?.data)) {
tableList = response.data.data;
} else if (Array.isArray(response.data?.data)) {
tableList = response.data.data;
} else if (Array.isArray(response.data)) {
tableList = response.data;
}
console.log("[loadTables] 추출된 테이블 목록:", tableList);
if (tableList.length > 0) {
// 백엔드에서 카멜케이스(tableName)로 반환하므로 둘 다 처리
const transformedTables = tableList.map((t: any) => ({
table_name: t.tableName ?? t.table_name ?? t.name ?? "",
table_comment: t.displayName ?? t.table_comment ?? t.description ?? "",
}));
console.log("[loadTables] 변환된 테이블 목록:", transformedTables);
setTables(transformedTables);
} else {
console.warn("[loadTables] 테이블 목록이 비어있습니다");
setTables([]);
}
} catch (error) {
console.error("테이블 목록 로드 실패:", error);
setTables([]);
} finally {
setTablesLoading(false);
}
@ -114,20 +136,38 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
const loadScreens = useCallback(async () => {
setScreensLoading(true);
try {
const response = await apiClient.get("/screen/list");
// size를 크게 설정하여 모든 화면 가져오기
const response = await apiClient.get("/screen-management/screens?size=1000");
console.log("[loadScreens] API 응답:", response.data);
const screenList = response.data?.data || response.data || [];
if (Array.isArray(screenList)) {
// API 응답 구조: { success, data: [...], total, page, size }
let screenList: any[] = [];
if (response.data?.success && Array.isArray(response.data?.data)) {
screenList = response.data.data;
} else if (Array.isArray(response.data?.data)) {
screenList = response.data.data;
} else if (Array.isArray(response.data)) {
screenList = response.data;
}
console.log("[loadScreens] 추출된 화면 목록:", screenList);
if (screenList.length > 0) {
// 백엔드에서 카멜케이스(screenId, screenName)로 반환하므로 둘 다 처리
const transformedScreens = screenList.map((s: any) => ({
screen_id: s.screen_id || s.id,
screen_name: s.screen_name || s.name,
screen_code: s.screen_code || s.code || "",
screen_id: s.screenId ?? s.screen_id ?? s.id,
screen_name: s.screenName ?? s.screen_name ?? s.name ?? `화면 ${s.screenId || s.screen_id || s.id}`,
screen_code: s.screenCode ?? s.screen_code ?? s.code ?? "",
}));
console.log("[loadScreens] 변환된 화면 목록:", transformedScreens);
setScreens(transformedScreens);
} else {
console.warn("[loadScreens] 화면 목록이 비어있습니다");
setScreens([]);
}
} catch (error) {
console.error("화면 목록 로드 실패:", error);
setScreens([]);
} finally {
setScreensLoading(false);
}
@ -137,17 +177,52 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
const loadColumns = useCallback(async (tableName: string, side: "left" | "right") => {
if (!tableName) return;
try {
const response = await apiClient.get(`/table/${tableName}/columns`);
const columnList = response.data?.data || response.data || [];
if (Array.isArray(columnList)) {
const response = await apiClient.get(`/table-management/tables/${tableName}/columns?size=200`);
console.log(`[loadColumns] ${side} API 응답:`, response.data);
// API 응답 구조: { success, data: { columns: [...], total, page, totalPages } }
let columnList: any[] = [];
if (response.data?.success && response.data?.data?.columns) {
columnList = response.data.data.columns;
} else if (Array.isArray(response.data?.data?.columns)) {
columnList = response.data.data.columns;
} else if (Array.isArray(response.data?.data)) {
columnList = response.data.data;
} else if (Array.isArray(response.data)) {
columnList = response.data;
}
console.log(`[loadColumns] ${side} 추출된 컬럼 목록:`, columnList);
if (columnList.length > 0) {
// 백엔드에서 카멜케이스(columnName)로 반환하므로 둘 다 처리
const transformedColumns = columnList.map((c: any) => ({
column_name: c.columnName ?? c.column_name ?? c.name ?? "",
data_type: c.dataType ?? c.data_type ?? c.type ?? "",
column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
}));
console.log(`[loadColumns] ${side} 변환된 컬럼 목록:`, transformedColumns);
if (side === "left") {
setLeftColumns(columnList);
setLeftColumns(transformedColumns);
} else {
setRightColumns(columnList);
setRightColumns(transformedColumns);
}
} else {
console.warn(`[loadColumns] ${side} 컬럼 목록이 비어있습니다`);
if (side === "left") {
setLeftColumns([]);
} else {
setRightColumns([]);
}
}
} catch (error) {
console.error(`${side} 컬럼 목록 로드 실패:`, error);
if (side === "left") {
setLeftColumns([]);
} else {
setRightColumns([]);
}
}
}, []);
@ -177,59 +252,63 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
placeholder: string;
open: boolean;
onOpenChange: (open: boolean) => void;
}> = ({ value, onValueChange, placeholder, open, onOpenChange }) => (
<Popover open={open} onOpenChange={onOpenChange}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
disabled={tablesLoading}
className="w-full justify-between h-9 text-sm"
>
{tablesLoading ? (
"로딩 중..."
) : value ? (
tables.find((t) => t.table_name === value)?.table_comment || value
) : (
placeholder
)}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-full p-0" align="start">
<Command>
<CommandInput placeholder="테이블 검색..." className="h-9" />
<CommandList>
<CommandEmpty>테이블이 없습니다</CommandEmpty>
<CommandGroup>
{tables.map((table) => (
<CommandItem
key={table.table_name}
value={table.table_name}
onSelect={(selectedValue) => {
onValueChange(selectedValue);
onOpenChange(false);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
value === table.table_name ? "opacity-100" : "opacity-0"
)}
/>
<span className="flex flex-col">
<span>{table.table_comment || table.table_name}</span>
<span className="text-xs text-muted-foreground">{table.table_name}</span>
</span>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
}> = ({ value, onValueChange, placeholder, open, onOpenChange }) => {
const selectedTable = tables.find((t) => t.table_name === value);
return (
<Popover open={open} onOpenChange={onOpenChange}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
disabled={tablesLoading}
className="h-9 w-full justify-between text-sm"
>
{tablesLoading
? "로딩 중..."
: selectedTable
? selectedTable.table_comment || selectedTable.table_name
: value || placeholder}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-full p-0" align="start">
<Command>
<CommandInput placeholder="테이블 검색..." className="h-9" />
<CommandList>
<CommandEmpty>
{tables.length === 0 ? "테이블 목록을 불러오는 중..." : "검색 결과가 없습니다"}
</CommandEmpty>
<CommandGroup>
{tables.map((table, index) => (
<CommandItem
key={`table-${table.table_name || index}`}
value={table.table_name}
onSelect={(selectedValue) => {
onValueChange(selectedValue);
onOpenChange(false);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
value === table.table_name ? "opacity-100" : "opacity-0"
)}
/>
<span className="flex flex-col">
<span>{table.table_comment || table.table_name}</span>
<span className="text-xs text-muted-foreground">{table.table_name}</span>
</span>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
};
// 화면 선택 컴포넌트
const ScreenSelect: React.FC<{
@ -238,64 +317,70 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
placeholder: string;
open: boolean;
onOpenChange: (open: boolean) => void;
}> = ({ value, onValueChange, placeholder, open, onOpenChange }) => (
<Popover open={open} onOpenChange={onOpenChange}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
disabled={screensLoading}
className="w-full justify-between h-9 text-sm"
>
{screensLoading ? (
"로딩 중..."
) : value ? (
screens.find((s) => s.screen_id === value)?.screen_name || `화면 ${value}`
) : (
placeholder
)}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-full p-0" align="start">
<Command>
<CommandInput placeholder="화면 검색..." className="h-9" />
<CommandList>
<CommandEmpty>화면이 없습니다</CommandEmpty>
<CommandGroup>
{screens.map((screen, index) => (
<CommandItem
key={`screen-${screen.screen_id ?? index}`}
value={`${screen.screen_id}-${screen.screen_name}`}
onSelect={(selectedValue: string) => {
const screenId = parseInt(selectedValue.split("-")[0]);
console.log("[ScreenSelect] onSelect:", { selectedValue, screenId, screen });
onValueChange(screenId);
onOpenChange(false);
}}
className="flex items-center"
>
<div className="flex items-center w-full">
<Check
className={cn(
"mr-2 h-4 w-4 flex-shrink-0",
value === screen.screen_id ? "opacity-100" : "opacity-0"
)}
/>
<span className="flex flex-col">
<span>{screen.screen_name}</span>
<span className="text-xs text-muted-foreground">{screen.screen_code}</span>
</span>
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
}> = ({ value, onValueChange, placeholder, open, onOpenChange }) => {
const selectedScreen = screens.find((s) => s.screen_id === value);
return (
<Popover open={open} onOpenChange={onOpenChange}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
disabled={screensLoading}
className="w-full justify-between h-9 text-sm"
>
{screensLoading
? "로딩 중..."
: selectedScreen
? selectedScreen.screen_name
: value
? `화면 ${value}`
: placeholder}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-full p-0" align="start">
<Command>
<CommandInput placeholder="화면 검색..." className="h-9" />
<CommandList>
<CommandEmpty>
{screens.length === 0 ? "화면 목록을 불러오는 중..." : "검색 결과가 없습니다"}
</CommandEmpty>
<CommandGroup>
{screens.map((screen, index) => (
<CommandItem
key={`screen-${screen.screen_id ?? index}`}
value={`${screen.screen_id}-${screen.screen_name}`}
onSelect={(selectedValue: string) => {
const screenId = parseInt(selectedValue.split("-")[0]);
console.log("[ScreenSelect] onSelect:", { selectedValue, screenId, screen });
onValueChange(isNaN(screenId) ? undefined : screenId);
onOpenChange(false);
}}
className="flex items-center"
>
<div className="flex items-center w-full">
<Check
className={cn(
"mr-2 h-4 w-4 shrink-0",
value === screen.screen_id ? "opacity-100" : "opacity-0"
)}
/>
<span className="flex flex-col">
<span>{screen.screen_name}</span>
<span className="text-xs text-muted-foreground">{screen.screen_code}</span>
</span>
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
};
// 컬럼 선택 컴포넌트
const ColumnSelect: React.FC<{
@ -303,20 +388,36 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
value: string;
onValueChange: (value: string) => void;
placeholder: string;
}> = ({ columns, value, onValueChange, placeholder }) => (
<Select value={value || ""} onValueChange={onValueChange}>
<SelectTrigger className="h-9 text-sm">
<SelectValue placeholder={placeholder} />
</SelectTrigger>
<SelectContent>
{columns.map((col) => (
<SelectItem key={col.column_name} value={col.column_name}>
{col.column_comment || col.column_name}
</SelectItem>
))}
</SelectContent>
</Select>
);
}> = ({ columns, value, onValueChange, placeholder }) => {
// 현재 선택된 값의 라벨 찾기
const selectedColumn = columns.find((col) => col.column_name === value);
const displayValue = selectedColumn
? selectedColumn.column_comment || selectedColumn.column_name
: value || "";
return (
<Select value={value || ""} onValueChange={onValueChange}>
<SelectTrigger className="h-9 text-sm min-w-[120px]">
<SelectValue placeholder={placeholder}>
{displayValue || placeholder}
</SelectValue>
</SelectTrigger>
<SelectContent>
{columns.length === 0 ? (
<SelectItem value="_empty" disabled>
테이블을 먼저 선택하세요
</SelectItem>
) : (
columns.map((col) => (
<SelectItem key={col.column_name} value={col.column_name}>
{col.column_comment || col.column_name}
</SelectItem>
))
)}
</SelectContent>
</Select>
);
};
// 표시 컬럼 추가
const addDisplayColumn = (side: "left" | "right") => {
@ -405,30 +506,52 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
<div className="flex items-center justify-between mb-2">
<Label className="text-xs">표시할 컬럼</Label>
<Button size="sm" variant="ghost" className="h-6 text-xs" onClick={() => addDisplayColumn("left")}>
<Plus className="h-3 w-3 mr-1" />
<Plus className="mr-1 h-3 w-3" />
추가
</Button>
</div>
<div className="space-y-2">
<div className="space-y-3">
{(config.leftPanel?.displayColumns || []).map((col, index) => (
<div key={index} className="flex gap-2 items-center">
<div key={index} className="space-y-2 rounded-md border p-3">
<div className="flex items-center justify-between">
<span className="text-xs font-medium text-muted-foreground">컬럼 {index + 1}</span>
<Button
size="sm"
variant="ghost"
className="h-6 w-6 p-0"
onClick={() => removeDisplayColumn("left", index)}
>
<X className="h-3 w-3" />
</Button>
</div>
<ColumnSelect
columns={leftColumns}
value={col.name}
onValueChange={(value) => updateDisplayColumn("left", index, "name", value)}
placeholder="컬럼"
placeholder="컬럼 선택"
/>
<Input
value={col.label || ""}
onChange={(e) => updateDisplayColumn("left", index, "label", e.target.value)}
placeholder="라벨"
className="h-9 text-sm flex-1"
/>
<Button size="sm" variant="ghost" className="h-9 w-9 p-0" onClick={() => removeDisplayColumn("left", index)}>
<X className="h-4 w-4" />
</Button>
<div>
<Label className="text-xs text-muted-foreground">표시 위치</Label>
<Select
value={col.displayRow || "name"}
onValueChange={(value) => updateDisplayColumn("left", index, "displayRow", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="name">이름 행 (Name Row)</SelectItem>
<SelectItem value="info">정보 행 (Info Row)</SelectItem>
</SelectContent>
</Select>
</div>
</div>
))}
{(config.leftPanel?.displayColumns || []).length === 0 && (
<div className="rounded-md border py-4 text-center text-xs text-muted-foreground">
표시할 컬럼을 추가하세요
</div>
)}
</div>
</div>
@ -440,6 +563,61 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
/>
</div>
{config.leftPanel?.showSearch && (
<div>
<div className="mb-2 flex items-center justify-between">
<Label className="text-xs">검색 대상 컬럼</Label>
<Button
size="sm"
variant="ghost"
className="h-6 text-xs"
onClick={() => {
const current = config.leftPanel?.searchColumns || [];
updateConfig("leftPanel.searchColumns", [...current, { columnName: "", label: "" }]);
}}
>
<Plus className="mr-1 h-3 w-3" />
추가
</Button>
</div>
<div className="space-y-2">
{(config.leftPanel?.searchColumns || []).map((searchCol, index) => (
<div key={index} className="flex items-center gap-2">
<ColumnSelect
columns={leftColumns}
value={searchCol.columnName}
onValueChange={(value) => {
const current = [...(config.leftPanel?.searchColumns || [])];
current[index] = { ...current[index], columnName: value };
updateConfig("leftPanel.searchColumns", current);
}}
placeholder="컬럼 선택"
/>
<Button
size="sm"
variant="ghost"
className="h-8 w-8 shrink-0 p-0"
onClick={() => {
const current = config.leftPanel?.searchColumns || [];
updateConfig(
"leftPanel.searchColumns",
current.filter((_, i) => i !== index)
);
}}
>
<X className="h-3 w-3" />
</Button>
</div>
))}
{(config.leftPanel?.searchColumns || []).length === 0 && (
<div className="rounded-md border py-3 text-center text-xs text-muted-foreground">
검색할 컬럼을 추가하세요
</div>
)}
</div>
</div>
)}
<div className="flex items-center justify-between">
<Label className="text-xs">추가 버튼 표시</Label>
<Switch
@ -505,30 +683,52 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
<div className="flex items-center justify-between mb-2">
<Label className="text-xs">표시할 컬럼</Label>
<Button size="sm" variant="ghost" className="h-6 text-xs" onClick={() => addDisplayColumn("right")}>
<Plus className="h-3 w-3 mr-1" />
<Plus className="mr-1 h-3 w-3" />
추가
</Button>
</div>
<div className="space-y-2">
<div className="space-y-3">
{(config.rightPanel?.displayColumns || []).map((col, index) => (
<div key={index} className="flex gap-2 items-center">
<div key={index} className="rounded-md border p-3 space-y-2">
<div className="flex items-center justify-between">
<span className="text-xs font-medium text-muted-foreground">컬럼 {index + 1}</span>
<Button
size="sm"
variant="ghost"
className="h-6 w-6 p-0"
onClick={() => removeDisplayColumn("right", index)}
>
<X className="h-3 w-3" />
</Button>
</div>
<ColumnSelect
columns={rightColumns}
value={col.name}
onValueChange={(value) => updateDisplayColumn("right", index, "name", value)}
placeholder="컬럼"
placeholder="컬럼 선택"
/>
<Input
value={col.label || ""}
onChange={(e) => updateDisplayColumn("right", index, "label", e.target.value)}
placeholder="라벨"
className="h-9 text-sm flex-1"
/>
<Button size="sm" variant="ghost" className="h-9 w-9 p-0" onClick={() => removeDisplayColumn("right", index)}>
<X className="h-4 w-4" />
</Button>
<div>
<Label className="text-xs text-muted-foreground">표시 위치</Label>
<Select
value={col.displayRow || "info"}
onValueChange={(value) => updateDisplayColumn("right", index, "displayRow", value)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="name">이름 행 (Name Row)</SelectItem>
<SelectItem value="info">정보 행 (Info Row)</SelectItem>
</SelectContent>
</Select>
</div>
</div>
))}
{(config.rightPanel?.displayColumns || []).length === 0 && (
<div className="text-center py-4 text-xs text-muted-foreground border rounded-md">
표시할 컬럼을 추가하세요
</div>
)}
</div>
</div>
@ -540,6 +740,61 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
/>
</div>
{config.rightPanel?.showSearch && (
<div>
<div className="mb-2 flex items-center justify-between">
<Label className="text-xs">검색 대상 컬럼</Label>
<Button
size="sm"
variant="ghost"
className="h-6 text-xs"
onClick={() => {
const current = config.rightPanel?.searchColumns || [];
updateConfig("rightPanel.searchColumns", [...current, { columnName: "", label: "" }]);
}}
>
<Plus className="mr-1 h-3 w-3" />
추가
</Button>
</div>
<div className="space-y-2">
{(config.rightPanel?.searchColumns || []).map((searchCol, index) => (
<div key={index} className="flex items-center gap-2">
<ColumnSelect
columns={rightColumns}
value={searchCol.columnName}
onValueChange={(value) => {
const current = [...(config.rightPanel?.searchColumns || [])];
current[index] = { ...current[index], columnName: value };
updateConfig("rightPanel.searchColumns", current);
}}
placeholder="컬럼 선택"
/>
<Button
size="sm"
variant="ghost"
className="h-8 w-8 shrink-0 p-0"
onClick={() => {
const current = config.rightPanel?.searchColumns || [];
updateConfig(
"rightPanel.searchColumns",
current.filter((_, i) => i !== index)
);
}}
>
<X className="h-3 w-3" />
</Button>
</div>
))}
{(config.rightPanel?.searchColumns || []).length === 0 && (
<div className="rounded-md border py-3 text-center text-xs text-muted-foreground">
검색할 컬럼을 추가하세요
</div>
)}
</div>
</div>
)}
<div className="flex items-center justify-between">
<Label className="text-xs">추가 버튼 표시</Label>
<Switch
@ -576,7 +831,14 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
{/* 연결 설정 */}
<div className="space-y-4">
<h4 className="font-medium text-sm border-b pb-2">연결 설정 (조인)</h4>
<h4 className="border-b pb-2 text-sm font-medium">연결 설정 (조인)</h4>
{/* 설명 */}
<div className="rounded-md bg-muted/50 p-3 text-xs text-muted-foreground">
<p className="mb-1 font-medium text-foreground">좌측 패널 선택 시 우측 패널 데이터 필터링</p>
<p>좌측에서 항목을 선택하면 좌측 조인 컬럼의 값으로 우측 테이블을 필터링합니다.</p>
<p className="mt-1 text-[10px]">예: 부서(dept_code) 선택 시 해당 부서의 사원만 표시</p>
</div>
<div className="space-y-3">
<div>
@ -604,19 +866,31 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
{/* 데이터 전달 설정 */}
<div className="space-y-4">
<div className="flex items-center justify-between border-b pb-2">
<h4 className="font-medium text-sm">데이터 전달 설정</h4>
<h4 className="text-sm font-medium">데이터 전달 설정</h4>
<Button size="sm" variant="ghost" className="h-6 text-xs" onClick={addDataTransferField}>
<Plus className="h-3 w-3 mr-1" />
<Plus className="mr-1 h-3 w-3" />
추가
</Button>
</div>
{/* 설명 */}
<div className="rounded-md bg-muted/50 p-3 text-xs text-muted-foreground">
<p className="mb-1 font-medium text-foreground">우측 패널 추가 버튼 클릭 시 모달로 데이터 전달</p>
<p>좌측에서 선택한 항목의 값을 모달 폼에 자동으로 채워줍니다.</p>
<p className="mt-1 text-[10px]">예: dept_code를 모달의 dept_code 필드에 자동 입력</p>
</div>
<div className="space-y-3">
{(config.dataTransferFields || []).map((field, index) => (
<div key={index} className="space-y-2 p-3 border rounded-md">
<div key={index} className="space-y-2 rounded-md border p-3">
<div className="flex items-center justify-between">
<span className="text-xs font-medium">필드 {index + 1}</span>
<Button size="sm" variant="ghost" className="h-6 w-6 p-0" onClick={() => removeDataTransferField(index)}>
<Button
size="sm"
variant="ghost"
className="h-6 w-6 p-0"
onClick={() => removeDataTransferField(index)}
>
<X className="h-3 w-3" />
</Button>
</div>
@ -640,6 +914,11 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
</div>
</div>
))}
{(config.dataTransferFields || []).length === 0 && (
<div className="rounded-md border py-4 text-center text-xs text-muted-foreground">
전달할 필드를 추가하세요
</div>
)}
</div>
</div>

15
frontend/lib/registry/components/split-panel-layout2/types.ts
View File

@ -9,6 +9,7 @@
export interface ColumnConfig {
name: string; // 컬럼명
label: string; // 표시 라벨
displayRow?: "name" | "info"; // 표시 위치 (name: 이름 행, info: 정보 행)
width?: number; // 너비 (px)
bold?: boolean; // 굵게 표시
format?: {
@ -30,6 +31,14 @@ export interface DataTransferField {
label?: string; // 표시용 라벨
}
/**
* 검색 컬럼 설정
*/
export interface SearchColumnConfig {
columnName: string; // 검색 대상 컬럼명
label?: string; // 표시 라벨 (없으면 컬럼명 사용)
}
/**
* 좌측 패널 설정
*/
@ -37,7 +46,8 @@ export interface LeftPanelConfig {
title?: string; // 패널 제목
tableName: string; // 테이블명
displayColumns: ColumnConfig[]; // 표시할 컬럼들
searchColumn?: string; // 검색 대상 컬럼
searchColumn?: string; // 검색 대상 컬럼 (단일, 하위 호환성)
searchColumns?: SearchColumnConfig[]; // 검색 대상 컬럼들 (복수)
showSearch?: boolean; // 검색 표시 여부
showAddButton?: boolean; // 추가 버튼 표시
addButtonLabel?: string; // 추가 버튼 라벨
@ -57,7 +67,8 @@ export interface RightPanelConfig {
title?: string; // 패널 제목
tableName: string; // 테이블명
displayColumns: ColumnConfig[]; // 표시할 컬럼들
searchColumn?: string; // 검색 대상 컬럼
searchColumn?: string; // 검색 대상 컬럼 (단일, 하위 호환성)
searchColumns?: SearchColumnConfig[]; // 검색 대상 컬럼들 (복수)
showSearch?: boolean; // 검색 표시 여부
showAddButton?: boolean; // 추가 버튼 표시
addButtonLabel?: string; // 추가 버튼 라벨