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(() => { const filteredLeftData = useMemo(() => {
if (!leftSearchTerm) return leftData; if (!leftSearchTerm) return leftData;
const searchColumn = config.leftPanel?.searchColumn; // 복수 검색 컬럼 지원 (searchColumns 우선, 없으면 searchColumn 사용)
if (!searchColumn) return leftData; 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[] => { const filterRecursive = (items: any[]): any[] => {
return items.filter((item) => { 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) { if (item.children?.length > 0) {
const filteredChildren = filterRecursive(item.children); const filteredChildren = filterRecursive(item.children);
@ -338,19 +345,26 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
}; };
return filterRecursive([...leftData]); return filterRecursive([...leftData]);
}, [leftData, leftSearchTerm, config.leftPanel?.searchColumn]); }, [leftData, leftSearchTerm, config.leftPanel?.searchColumns, config.leftPanel?.searchColumn]);
const filteredRightData = useMemo(() => { const filteredRightData = useMemo(() => {
if (!rightSearchTerm) return rightData; if (!rightSearchTerm) return rightData;
const searchColumn = config.rightPanel?.searchColumn; // 복수 검색 컬럼 지원 (searchColumns 우선, 없으면 searchColumn 사용)
if (!searchColumn) return rightData; 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) => { 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) => { const handleResizeStart = useCallback((e: React.MouseEvent) => {
@ -451,15 +465,19 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
const isExpanded = expandedItems.has(String(itemId)); const isExpanded = expandedItems.has(String(itemId));
const isSelected = selectedLeftItem && selectedLeftItem[idColumn] === item[idColumn]; const isSelected = selectedLeftItem && selectedLeftItem[idColumn] === item[idColumn];
// 표시할 컬럼 결정 // displayRow 설정에 따라 컬럼 분류
const displayColumns = config.leftPanel?.displayColumns || []; const displayColumns = config.leftPanel?.displayColumns || [];
const primaryColumn = displayColumns[0]; const nameRowColumns = displayColumns.filter((col, idx) =>
const secondaryColumn = displayColumns[1]; 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); : Object.values(item).find((v) => typeof v === "string" && v.length > 0);
const secondaryValue = secondaryColumn ? item[secondaryColumn.name] : null;
return ( return (
<div key={itemId}> <div key={itemId}>
@ -496,12 +514,38 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
{/* 내용 */} {/* 내용 */}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="font-medium text-base truncate"> {/* 이름 행 (Name Row) */}
{primaryValue || "이름 없음"} <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> </div>
{secondaryValue && ( {/* 정보 행 (Info Row) */}
<div className="text-sm text-muted-foreground truncate"> {infoRowColumns.length > 0 && (
{secondaryValue} <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>
)} )}
</div> </div>
@ -521,53 +565,72 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
const renderRightCard = (item: any, index: number) => { const renderRightCard = (item: any, index: number) => {
const displayColumns = config.rightPanel?.displayColumns || []; const displayColumns = config.rightPanel?.displayColumns || [];
// 첫 번째 컬럼을 이름으로 사용 // displayRow 설정에 따라 컬럼 분류
const nameColumn = displayColumns[0]; // displayRow가 "name"이면 이름 행, "info"이면 정보 행 (기본값: 첫 번째는 name, 나머지는 info)
const name = nameColumn ? item[nameColumn.name] : "이름 없음"; const nameRowColumns = displayColumns.filter((col, idx) =>
col.displayRow === "name" || (!col.displayRow && idx === 0)
// 나머지 컬럼들 );
const otherColumns = displayColumns.slice(1); const infoRowColumns = displayColumns.filter((col, idx) =>
col.displayRow === "info" || (!col.displayRow && idx > 0)
);
return ( return (
<Card key={index} className="mb-3 hover:shadow-md transition-shadow"> <Card key={index} className="mb-2 py-0 hover:shadow-md transition-shadow">
<CardContent className="p-4"> <CardContent className="px-4 py-2">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex-1"> <div className="flex-1">
{/* 이름 */} {/* 이름 행 (Name Row) */}
<div className="flex items-center gap-2 mb-2"> {nameRowColumns.length > 0 && (
<span className="font-semibold text-lg">{name}</span> <div className="flex items-center gap-2 mb-2">
{otherColumns[0] && ( {nameRowColumns.map((col, idx) => {
<span className="text-sm bg-muted px-2 py-0.5 rounded"> const value = item[col.name];
{item[otherColumns[0].name]} if (!value && idx > 0) return null;
</span>
)} // 첫 번째 컬럼은 굵게 표시
</div> 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>
)}
{/* 상세 정보 */} {/* 정보 행 (Info Row) */}
<div className="flex flex-wrap gap-x-4 gap-y-1 text-base text-muted-foreground"> {infoRowColumns.length > 0 && (
{otherColumns.slice(1).map((col, idx) => { <div className="flex flex-wrap gap-x-4 gap-y-1 text-base text-muted-foreground">
const value = item[col.name]; {infoRowColumns.map((col, idx) => {
if (!value) return null; const value = item[col.name];
if (!value) return null;
// 아이콘 결정 // 아이콘 결정
let icon = null; let icon = null;
const colName = col.name.toLowerCase(); const colName = col.name.toLowerCase();
if (colName.includes("tel") || colName.includes("phone")) { if (colName.includes("tel") || colName.includes("phone")) {
icon = <span className="text-sm">tel</span>; icon = <span className="text-sm">tel</span>;
} else if (colName.includes("email")) { } else if (colName.includes("email")) {
icon = <span className="text-sm">@</span>; icon = <span className="text-sm">@</span>;
} else if (colName.includes("sabun") || colName.includes("id")) { } else if (colName.includes("sabun") || colName.includes("id")) {
icon = <span className="text-sm">ID</span>; icon = <span className="text-sm">ID</span>;
} }
return ( return (
<span key={idx} className="flex items-center gap-1"> <span key={idx} className="flex items-center gap-1">
{icon} {icon}
{formatValue(value, col.format)} {formatValue(value, col.format)}
</span> </span>
); );
})} })}
</div> </div>
)}
</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 () => { const loadTables = useCallback(async () => {
setTablesLoading(true); setTablesLoading(true);
try { try {
const response = await apiClient.get("/table/list?userLang=KR"); const response = await apiClient.get("/table-management/tables");
const tableList = response.data?.data || response.data || []; console.log("[loadTables] API 응답:", response.data);
if (Array.isArray(tableList)) {
setTables(tableList); 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) { } catch (error) {
console.error("테이블 목록 로드 실패:", error); console.error("테이블 목록 로드 실패:", error);
setTables([]);
} finally { } finally {
setTablesLoading(false); setTablesLoading(false);
} }
@ -114,20 +136,38 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
const loadScreens = useCallback(async () => { const loadScreens = useCallback(async () => {
setScreensLoading(true); setScreensLoading(true);
try { 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); 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) => ({ const transformedScreens = screenList.map((s: any) => ({
screen_id: s.screen_id || s.id, screen_id: s.screenId ?? s.screen_id ?? s.id,
screen_name: s.screen_name || s.name, screen_name: s.screenName ?? s.screen_name ?? s.name ?? `화면 ${s.screenId || s.screen_id || s.id}`,
screen_code: s.screen_code || s.code || "", screen_code: s.screenCode ?? s.screen_code ?? s.code ?? "",
})); }));
console.log("[loadScreens] 변환된 화면 목록:", transformedScreens); console.log("[loadScreens] 변환된 화면 목록:", transformedScreens);
setScreens(transformedScreens); setScreens(transformedScreens);
} else {
console.warn("[loadScreens] 화면 목록이 비어있습니다");
setScreens([]);
} }
} catch (error) { } catch (error) {
console.error("화면 목록 로드 실패:", error); console.error("화면 목록 로드 실패:", error);
setScreens([]);
} finally { } finally {
setScreensLoading(false); setScreensLoading(false);
} }
@ -137,17 +177,52 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
const loadColumns = useCallback(async (tableName: string, side: "left" | "right") => { const loadColumns = useCallback(async (tableName: string, side: "left" | "right") => {
if (!tableName) return; if (!tableName) return;
try { try {
const response = await apiClient.get(`/table/${tableName}/columns`); const response = await apiClient.get(`/table-management/tables/${tableName}/columns?size=200`);
const columnList = response.data?.data || response.data || []; console.log(`[loadColumns] ${side} API 응답:`, response.data);
if (Array.isArray(columnList)) {
// 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") { if (side === "left") {
setLeftColumns(columnList); setLeftColumns(transformedColumns);
} else { } else {
setRightColumns(columnList); setRightColumns(transformedColumns);
}
} else {
console.warn(`[loadColumns] ${side} 컬럼 목록이 비어있습니다`);
if (side === "left") {
setLeftColumns([]);
} else {
setRightColumns([]);
} }
} }
} catch (error) { } catch (error) {
console.error(`${side} 컬럼 목록 로드 실패:`, error); console.error(`${side} 컬럼 목록 로드 실패:`, error);
if (side === "left") {
setLeftColumns([]);
} else {
setRightColumns([]);
}
} }
}, []); }, []);
@ -177,59 +252,63 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
placeholder: string; placeholder: string;
open: boolean; open: boolean;
onOpenChange: (open: boolean) => void; onOpenChange: (open: boolean) => void;
}> = ({ value, onValueChange, placeholder, open, onOpenChange }) => ( }> = ({ value, onValueChange, placeholder, open, onOpenChange }) => {
<Popover open={open} onOpenChange={onOpenChange}> const selectedTable = tables.find((t) => t.table_name === value);
<PopoverTrigger asChild>
<Button return (
variant="outline" <Popover open={open} onOpenChange={onOpenChange}>
role="combobox" <PopoverTrigger asChild>
aria-expanded={open} <Button
disabled={tablesLoading} variant="outline"
className="w-full justify-between h-9 text-sm" role="combobox"
> aria-expanded={open}
{tablesLoading ? ( disabled={tablesLoading}
"로딩 중..." className="h-9 w-full justify-between text-sm"
) : value ? ( >
tables.find((t) => t.table_name === value)?.table_comment || value {tablesLoading
) : ( ? "로딩 중..."
placeholder : selectedTable
)} ? selectedTable.table_comment || selectedTable.table_name
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> : value || placeholder}
</Button> <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</PopoverTrigger> </Button>
<PopoverContent className="w-full p-0" align="start"> </PopoverTrigger>
<Command> <PopoverContent className="w-full p-0" align="start">
<CommandInput placeholder="테이블 검색..." className="h-9" /> <Command>
<CommandList> <CommandInput placeholder="테이블 검색..." className="h-9" />
<CommandEmpty>테이블이 없습니다</CommandEmpty> <CommandList>
<CommandGroup> <CommandEmpty>
{tables.map((table) => ( {tables.length === 0 ? "테이블 목록을 불러오는 중..." : "검색 결과가 없습니다"}
<CommandItem </CommandEmpty>
key={table.table_name} <CommandGroup>
value={table.table_name} {tables.map((table, index) => (
onSelect={(selectedValue) => { <CommandItem
onValueChange(selectedValue); key={`table-${table.table_name || index}`}
onOpenChange(false); value={table.table_name}
}} onSelect={(selectedValue) => {
> onValueChange(selectedValue);
<Check onOpenChange(false);
className={cn( }}
"mr-2 h-4 w-4", >
value === table.table_name ? "opacity-100" : "opacity-0" <Check
)} className={cn(
/> "mr-2 h-4 w-4",
<span className="flex flex-col"> value === table.table_name ? "opacity-100" : "opacity-0"
<span>{table.table_comment || table.table_name}</span> )}
<span className="text-xs text-muted-foreground">{table.table_name}</span> />
</span> <span className="flex flex-col">
</CommandItem> <span>{table.table_comment || table.table_name}</span>
))} <span className="text-xs text-muted-foreground">{table.table_name}</span>
</CommandGroup> </span>
</CommandList> </CommandItem>
</Command> ))}
</PopoverContent> </CommandGroup>
</Popover> </CommandList>
); </Command>
</PopoverContent>
</Popover>
);
};
// 화면 선택 컴포넌트 // 화면 선택 컴포넌트
const ScreenSelect: React.FC<{ const ScreenSelect: React.FC<{
@ -238,64 +317,70 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
placeholder: string; placeholder: string;
open: boolean; open: boolean;
onOpenChange: (open: boolean) => void; onOpenChange: (open: boolean) => void;
}> = ({ value, onValueChange, placeholder, open, onOpenChange }) => ( }> = ({ value, onValueChange, placeholder, open, onOpenChange }) => {
<Popover open={open} onOpenChange={onOpenChange}> const selectedScreen = screens.find((s) => s.screen_id === value);
<PopoverTrigger asChild>
<Button return (
variant="outline" <Popover open={open} onOpenChange={onOpenChange}>
role="combobox" <PopoverTrigger asChild>
aria-expanded={open} <Button
disabled={screensLoading} variant="outline"
className="w-full justify-between h-9 text-sm" role="combobox"
> aria-expanded={open}
{screensLoading ? ( disabled={screensLoading}
"로딩 중..." className="w-full justify-between h-9 text-sm"
) : value ? ( >
screens.find((s) => s.screen_id === value)?.screen_name || `화면 ${value}` {screensLoading
) : ( ? "로딩 중..."
placeholder : selectedScreen
)} ? selectedScreen.screen_name
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> : value
</Button> ? `화면 ${value}`
</PopoverTrigger> : placeholder}
<PopoverContent className="w-full p-0" align="start"> <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
<Command> </Button>
<CommandInput placeholder="화면 검색..." className="h-9" /> </PopoverTrigger>
<CommandList> <PopoverContent className="w-full p-0" align="start">
<CommandEmpty>화면이 없습니다</CommandEmpty> <Command>
<CommandGroup> <CommandInput placeholder="화면 검색..." className="h-9" />
{screens.map((screen, index) => ( <CommandList>
<CommandItem <CommandEmpty>
key={`screen-${screen.screen_id ?? index}`} {screens.length === 0 ? "화면 목록을 불러오는 중..." : "검색 결과가 없습니다"}
value={`${screen.screen_id}-${screen.screen_name}`} </CommandEmpty>
onSelect={(selectedValue: string) => { <CommandGroup>
const screenId = parseInt(selectedValue.split("-")[0]); {screens.map((screen, index) => (
console.log("[ScreenSelect] onSelect:", { selectedValue, screenId, screen }); <CommandItem
onValueChange(screenId); key={`screen-${screen.screen_id ?? index}`}
onOpenChange(false); value={`${screen.screen_id}-${screen.screen_name}`}
}} onSelect={(selectedValue: string) => {
className="flex items-center" const screenId = parseInt(selectedValue.split("-")[0]);
> console.log("[ScreenSelect] onSelect:", { selectedValue, screenId, screen });
<div className="flex items-center w-full"> onValueChange(isNaN(screenId) ? undefined : screenId);
<Check onOpenChange(false);
className={cn( }}
"mr-2 h-4 w-4 flex-shrink-0", className="flex items-center"
value === screen.screen_id ? "opacity-100" : "opacity-0" >
)} <div className="flex items-center w-full">
/> <Check
<span className="flex flex-col"> className={cn(
<span>{screen.screen_name}</span> "mr-2 h-4 w-4 shrink-0",
<span className="text-xs text-muted-foreground">{screen.screen_code}</span> value === screen.screen_id ? "opacity-100" : "opacity-0"
</span> )}
</div> />
</CommandItem> <span className="flex flex-col">
))} <span>{screen.screen_name}</span>
</CommandGroup> <span className="text-xs text-muted-foreground">{screen.screen_code}</span>
</CommandList> </span>
</Command> </div>
</PopoverContent> </CommandItem>
</Popover> ))}
); </CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
};
// 컬럼 선택 컴포넌트 // 컬럼 선택 컴포넌트
const ColumnSelect: React.FC<{ const ColumnSelect: React.FC<{
@ -303,20 +388,36 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
value: string; value: string;
onValueChange: (value: string) => void; onValueChange: (value: string) => void;
placeholder: string; placeholder: string;
}> = ({ columns, value, onValueChange, placeholder }) => ( }> = ({ columns, value, onValueChange, placeholder }) => {
<Select value={value || ""} onValueChange={onValueChange}> // 현재 선택된 값의 라벨 찾기
<SelectTrigger className="h-9 text-sm"> const selectedColumn = columns.find((col) => col.column_name === value);
<SelectValue placeholder={placeholder} /> const displayValue = selectedColumn
</SelectTrigger> ? selectedColumn.column_comment || selectedColumn.column_name
<SelectContent> : value || "";
{columns.map((col) => (
<SelectItem key={col.column_name} value={col.column_name}> return (
{col.column_comment || col.column_name} <Select value={value || ""} onValueChange={onValueChange}>
</SelectItem> <SelectTrigger className="h-9 text-sm min-w-[120px]">
))} <SelectValue placeholder={placeholder}>
</SelectContent> {displayValue || placeholder}
</Select> </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") => { const addDisplayColumn = (side: "left" | "right") => {
@ -405,30 +506,52 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<Label className="text-xs">표시할 컬럼</Label> <Label className="text-xs">표시할 컬럼</Label>
<Button size="sm" variant="ghost" className="h-6 text-xs" onClick={() => addDisplayColumn("left")}> <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> </Button>
</div> </div>
<div className="space-y-2"> <div className="space-y-3">
{(config.leftPanel?.displayColumns || []).map((col, index) => ( {(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 <ColumnSelect
columns={leftColumns} columns={leftColumns}
value={col.name} value={col.name}
onValueChange={(value) => updateDisplayColumn("left", index, "name", value)} onValueChange={(value) => updateDisplayColumn("left", index, "name", value)}
placeholder="컬럼" placeholder="컬럼 선택"
/> />
<Input <div>
value={col.label || ""} <Label className="text-xs text-muted-foreground">표시 위치</Label>
onChange={(e) => updateDisplayColumn("left", index, "label", e.target.value)} <Select
placeholder="라벨" value={col.displayRow || "name"}
className="h-9 text-sm flex-1" onValueChange={(value) => updateDisplayColumn("left", index, "displayRow", value)}
/> >
<Button size="sm" variant="ghost" className="h-9 w-9 p-0" onClick={() => removeDisplayColumn("left", index)}> <SelectTrigger className="h-8 text-xs">
<X className="h-4 w-4" /> <SelectValue />
</Button> </SelectTrigger>
<SelectContent>
<SelectItem value="name">이름 행 (Name Row)</SelectItem>
<SelectItem value="info">정보 행 (Info Row)</SelectItem>
</SelectContent>
</Select>
</div>
</div> </div>
))} ))}
{(config.leftPanel?.displayColumns || []).length === 0 && (
<div className="rounded-md border py-4 text-center text-xs text-muted-foreground">
표시할 컬럼을 추가하세요
</div>
)}
</div> </div>
</div> </div>
@ -440,6 +563,61 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
/> />
</div> </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"> <div className="flex items-center justify-between">
<Label className="text-xs">추가 버튼 표시</Label> <Label className="text-xs">추가 버튼 표시</Label>
<Switch <Switch
@ -505,30 +683,52 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<Label className="text-xs">표시할 컬럼</Label> <Label className="text-xs">표시할 컬럼</Label>
<Button size="sm" variant="ghost" className="h-6 text-xs" onClick={() => addDisplayColumn("right")}> <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> </Button>
</div> </div>
<div className="space-y-2"> <div className="space-y-3">
{(config.rightPanel?.displayColumns || []).map((col, index) => ( {(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 <ColumnSelect
columns={rightColumns} columns={rightColumns}
value={col.name} value={col.name}
onValueChange={(value) => updateDisplayColumn("right", index, "name", value)} onValueChange={(value) => updateDisplayColumn("right", index, "name", value)}
placeholder="컬럼" placeholder="컬럼 선택"
/> />
<Input <div>
value={col.label || ""} <Label className="text-xs text-muted-foreground">표시 위치</Label>
onChange={(e) => updateDisplayColumn("right", index, "label", e.target.value)} <Select
placeholder="라벨" value={col.displayRow || "info"}
className="h-9 text-sm flex-1" onValueChange={(value) => updateDisplayColumn("right", index, "displayRow", value)}
/> >
<Button size="sm" variant="ghost" className="h-9 w-9 p-0" onClick={() => removeDisplayColumn("right", index)}> <SelectTrigger className="h-8 text-xs">
<X className="h-4 w-4" /> <SelectValue />
</Button> </SelectTrigger>
<SelectContent>
<SelectItem value="name">이름 행 (Name Row)</SelectItem>
<SelectItem value="info">정보 행 (Info Row)</SelectItem>
</SelectContent>
</Select>
</div>
</div> </div>
))} ))}
{(config.rightPanel?.displayColumns || []).length === 0 && (
<div className="text-center py-4 text-xs text-muted-foreground border rounded-md">
표시할 컬럼을 추가하세요
</div>
)}
</div> </div>
</div> </div>
@ -540,6 +740,61 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
/> />
</div> </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"> <div className="flex items-center justify-between">
<Label className="text-xs">추가 버튼 표시</Label> <Label className="text-xs">추가 버튼 표시</Label>
<Switch <Switch
@ -576,7 +831,14 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
{/* 연결 설정 */} {/* 연결 설정 */}
<div className="space-y-4"> <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 className="space-y-3">
<div> <div>
@ -604,19 +866,31 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
{/* 데이터 전달 설정 */} {/* 데이터 전달 설정 */}
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between border-b pb-2"> <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}> <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> </Button>
</div> </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"> <div className="space-y-3">
{(config.dataTransferFields || []).map((field, index) => ( {(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"> <div className="flex items-center justify-between">
<span className="text-xs font-medium">필드 {index + 1}</span> <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" /> <X className="h-3 w-3" />
</Button> </Button>
</div> </div>
@ -640,6 +914,11 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
</div> </div>
</div> </div>
))} ))}
{(config.dataTransferFields || []).length === 0 && (
<div className="rounded-md border py-4 text-center text-xs text-muted-foreground">
전달할 필드를 추가하세요
</div>
)}
</div> </div>
</div> </div>

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

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