feat(split-panel-layout2): 그룹핑, 탭 필터링, 설정 모달 기능 추가
- types.ts: GroupingConfig, TabConfig, ColumnDisplayConfig 등 타입 확장 - Component: groupData, generateTabs, filterDataByTab 함수 추가 - ConfigPanel: SearchableColumnSelect, 설정 모달 상태 관리 추가 - 신규 모달: ActionButtonConfigModal, ColumnConfigModal, DataTransferConfigModal - UniversalFormModal: 연결필드 소스 테이블 Combobox로 변경
This commit is contained in:
SeongHyun Kim
parent
718788110a
commit
3396834417
|
|
@ -0,0 +1,674 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState, useEffect, useCallback } from "react";
|
||||||
|
import {
|
||||||
|
DndContext,
|
||||||
|
closestCenter,
|
||||||
|
KeyboardSensor,
|
||||||
|
PointerSensor,
|
||||||
|
useSensor,
|
||||||
|
useSensors,
|
||||||
|
type DragEndEvent,
|
||||||
|
} from "@dnd-kit/core";
|
||||||
|
import {
|
||||||
|
arrayMove,
|
||||||
|
SortableContext,
|
||||||
|
sortableKeyboardCoordinates,
|
||||||
|
verticalListSortingStrategy,
|
||||||
|
useSortable,
|
||||||
|
} from "@dnd-kit/sortable";
|
||||||
|
import { CSS } from "@dnd-kit/utilities";
|
||||||
|
import { Plus, GripVertical, Settings, X, Check, ChevronsUpDown } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
} from "@/components/ui/command";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { apiClient } from "@/lib/api/client";
|
||||||
|
import type { ActionButtonConfig, ModalParamMapping, ColumnConfig } from "./types";
|
||||||
|
|
||||||
|
interface ScreenInfo {
|
||||||
|
screen_id: number;
|
||||||
|
screen_name: string;
|
||||||
|
screen_code: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 정렬 가능한 버튼 아이템
|
||||||
|
const SortableButtonItem: React.FC<{
|
||||||
|
id: string;
|
||||||
|
button: ActionButtonConfig;
|
||||||
|
index: number;
|
||||||
|
onSettingsClick: () => void;
|
||||||
|
onRemove: () => void;
|
||||||
|
}> = ({ id, button, index, onSettingsClick, onRemove }) => {
|
||||||
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
|
||||||
|
|
||||||
|
const style = {
|
||||||
|
transform: CSS.Transform.toString(transform),
|
||||||
|
transition,
|
||||||
|
};
|
||||||
|
|
||||||
|
const getVariantColor = (variant?: string) => {
|
||||||
|
switch (variant) {
|
||||||
|
case "destructive":
|
||||||
|
return "bg-destructive/10 text-destructive";
|
||||||
|
case "outline":
|
||||||
|
return "bg-background border";
|
||||||
|
case "ghost":
|
||||||
|
return "bg-muted/50";
|
||||||
|
case "secondary":
|
||||||
|
return "bg-secondary text-secondary-foreground";
|
||||||
|
default:
|
||||||
|
return "bg-primary/10 text-primary";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getActionLabel = (action?: string) => {
|
||||||
|
switch (action) {
|
||||||
|
case "add":
|
||||||
|
return "추가";
|
||||||
|
case "edit":
|
||||||
|
return "수정";
|
||||||
|
case "delete":
|
||||||
|
return "삭제";
|
||||||
|
case "bulk-delete":
|
||||||
|
return "일괄삭제";
|
||||||
|
case "api":
|
||||||
|
return "API";
|
||||||
|
case "custom":
|
||||||
|
return "커스텀";
|
||||||
|
default:
|
||||||
|
return "추가";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={setNodeRef}
|
||||||
|
style={style}
|
||||||
|
className={cn("flex items-center gap-2 rounded-md border bg-card p-3", isDragging && "opacity-50 shadow-lg")}
|
||||||
|
>
|
||||||
|
{/* 드래그 핸들 */}
|
||||||
|
<div {...attributes} {...listeners} className="cursor-grab touch-none text-muted-foreground hover:text-foreground">
|
||||||
|
<GripVertical className="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 버튼 정보 */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className={cn("px-2 py-0.5 rounded text-xs font-medium", getVariantColor(button.variant))}>
|
||||||
|
{button.label || `버튼 ${index + 1}`}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-1 mt-1">
|
||||||
|
<Badge variant="outline" className="text-[10px] h-4">
|
||||||
|
{getActionLabel(button.action)}
|
||||||
|
</Badge>
|
||||||
|
{button.icon && (
|
||||||
|
<Badge variant="secondary" className="text-[10px] h-4">
|
||||||
|
{button.icon}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{button.showCondition && button.showCondition !== "always" && (
|
||||||
|
<Badge variant="secondary" className="text-[10px] h-4">
|
||||||
|
{button.showCondition === "selected" ? "선택시만" : "미선택시만"}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 액션 버튼들 */}
|
||||||
|
<div className="flex items-center gap-1 shrink-0">
|
||||||
|
<Button size="sm" variant="ghost" className="h-7 w-7 p-0" onClick={onSettingsClick} title="세부설정">
|
||||||
|
<Settings className="h-3.5 w-3.5" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
className="h-7 w-7 p-0 text-destructive hover:text-destructive"
|
||||||
|
onClick={onRemove}
|
||||||
|
title="삭제"
|
||||||
|
>
|
||||||
|
<X className="h-3.5 w-3.5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface ActionButtonConfigModalProps {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
actionButtons: ActionButtonConfig[];
|
||||||
|
displayColumns?: ColumnConfig[]; // 모달 파라미터 매핑용
|
||||||
|
onSave: (buttons: ActionButtonConfig[]) => void;
|
||||||
|
side: "left" | "right";
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ActionButtonConfigModal: React.FC<ActionButtonConfigModalProps> = ({
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
actionButtons: initialButtons,
|
||||||
|
displayColumns = [],
|
||||||
|
onSave,
|
||||||
|
side,
|
||||||
|
}) => {
|
||||||
|
// 로컬 상태
|
||||||
|
const [buttons, setButtons] = useState<ActionButtonConfig[]>([]);
|
||||||
|
|
||||||
|
// 버튼 세부설정 모달
|
||||||
|
const [detailModalOpen, setDetailModalOpen] = useState(false);
|
||||||
|
const [editingButtonIndex, setEditingButtonIndex] = useState<number | null>(null);
|
||||||
|
const [editingButton, setEditingButton] = useState<ActionButtonConfig | null>(null);
|
||||||
|
|
||||||
|
// 화면 목록
|
||||||
|
const [screens, setScreens] = useState<ScreenInfo[]>([]);
|
||||||
|
const [screensLoading, setScreensLoading] = useState(false);
|
||||||
|
const [screenSelectOpen, setScreenSelectOpen] = useState(false);
|
||||||
|
|
||||||
|
// 드래그 센서
|
||||||
|
const sensors = useSensors(
|
||||||
|
useSensor(PointerSensor, {
|
||||||
|
activationConstraint: {
|
||||||
|
distance: 8,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
useSensor(KeyboardSensor, {
|
||||||
|
coordinateGetter: sortableKeyboardCoordinates,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// 초기값 설정
|
||||||
|
useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
setButtons(initialButtons || []);
|
||||||
|
}
|
||||||
|
}, [open, initialButtons]);
|
||||||
|
|
||||||
|
// 화면 목록 로드
|
||||||
|
const loadScreens = useCallback(async () => {
|
||||||
|
setScreensLoading(true);
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get("/screen-management/screens?size=1000");
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
const transformedScreens = screenList.map((s: any) => ({
|
||||||
|
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 ?? "",
|
||||||
|
}));
|
||||||
|
|
||||||
|
setScreens(transformedScreens);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("화면 목록 로드 실패:", error);
|
||||||
|
setScreens([]);
|
||||||
|
} finally {
|
||||||
|
setScreensLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
loadScreens();
|
||||||
|
}
|
||||||
|
}, [open, loadScreens]);
|
||||||
|
|
||||||
|
// 드래그 종료 핸들러
|
||||||
|
const handleDragEnd = (event: DragEndEvent) => {
|
||||||
|
const { active, over } = event;
|
||||||
|
|
||||||
|
if (over && active.id !== over.id) {
|
||||||
|
const oldIndex = buttons.findIndex((btn) => btn.id === active.id);
|
||||||
|
const newIndex = buttons.findIndex((btn) => btn.id === over.id);
|
||||||
|
|
||||||
|
if (oldIndex !== -1 && newIndex !== -1) {
|
||||||
|
setButtons(arrayMove(buttons, oldIndex, newIndex));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 버튼 추가
|
||||||
|
const handleAddButton = () => {
|
||||||
|
const newButton: ActionButtonConfig = {
|
||||||
|
id: `btn-${Date.now()}`,
|
||||||
|
label: "새 버튼",
|
||||||
|
variant: "default",
|
||||||
|
action: "add",
|
||||||
|
showCondition: "always",
|
||||||
|
};
|
||||||
|
setButtons([...buttons, newButton]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 버튼 삭제
|
||||||
|
const handleRemoveButton = (index: number) => {
|
||||||
|
setButtons(buttons.filter((_, i) => i !== index));
|
||||||
|
};
|
||||||
|
|
||||||
|
// 버튼 업데이트
|
||||||
|
const handleUpdateButton = (index: number, updates: Partial<ActionButtonConfig>) => {
|
||||||
|
const newButtons = [...buttons];
|
||||||
|
newButtons[index] = { ...newButtons[index], ...updates };
|
||||||
|
setButtons(newButtons);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 버튼 세부설정 열기
|
||||||
|
const handleOpenDetailSettings = (index: number) => {
|
||||||
|
setEditingButtonIndex(index);
|
||||||
|
setEditingButton({ ...buttons[index] });
|
||||||
|
setDetailModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 버튼 세부설정 저장
|
||||||
|
const handleSaveDetailSettings = () => {
|
||||||
|
if (editingButtonIndex !== null && editingButton) {
|
||||||
|
handleUpdateButton(editingButtonIndex, editingButton);
|
||||||
|
}
|
||||||
|
setDetailModalOpen(false);
|
||||||
|
setEditingButtonIndex(null);
|
||||||
|
setEditingButton(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 저장
|
||||||
|
const handleSave = () => {
|
||||||
|
onSave(buttons);
|
||||||
|
onOpenChange(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 선택된 화면 정보
|
||||||
|
const getScreenInfo = (screenId?: number) => {
|
||||||
|
return screens.find((s) => s.screen_id === screenId);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[90vh] flex flex-col">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>
|
||||||
|
{side === "left" ? "좌측" : "우측"} 패널 액션 버튼 설정
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
버튼을 추가하고 순서를 드래그로 변경할 수 있습니다.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="flex-1 overflow-hidden flex flex-col">
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<Label className="text-sm font-medium">
|
||||||
|
액션 버튼 ({buttons.length}개)
|
||||||
|
</Label>
|
||||||
|
<Button size="sm" variant="outline" onClick={handleAddButton}>
|
||||||
|
<Plus className="mr-1 h-4 w-4" />
|
||||||
|
버튼 추가
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ScrollArea className="flex-1 pr-4">
|
||||||
|
{buttons.length === 0 ? (
|
||||||
|
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||||
|
<p className="text-muted-foreground text-sm mb-2">
|
||||||
|
액션 버튼이 없습니다
|
||||||
|
</p>
|
||||||
|
<Button size="sm" variant="outline" onClick={handleAddButton}>
|
||||||
|
<Plus className="mr-1 h-4 w-4" />
|
||||||
|
첫 번째 버튼 추가
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<DndContext
|
||||||
|
sensors={sensors}
|
||||||
|
collisionDetection={closestCenter}
|
||||||
|
onDragEnd={handleDragEnd}
|
||||||
|
>
|
||||||
|
<SortableContext
|
||||||
|
items={buttons.map((btn) => btn.id)}
|
||||||
|
strategy={verticalListSortingStrategy}
|
||||||
|
>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{buttons.map((btn, index) => (
|
||||||
|
<SortableButtonItem
|
||||||
|
key={btn.id}
|
||||||
|
id={btn.id}
|
||||||
|
button={btn}
|
||||||
|
index={index}
|
||||||
|
onSettingsClick={() => handleOpenDetailSettings(index)}
|
||||||
|
onRemove={() => handleRemoveButton(index)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</SortableContext>
|
||||||
|
</DndContext>
|
||||||
|
)}
|
||||||
|
</ScrollArea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter className="mt-4">
|
||||||
|
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||||
|
취소
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleSave}>저장</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* 버튼 세부설정 모달 */}
|
||||||
|
<Dialog open={detailModalOpen} onOpenChange={setDetailModalOpen}>
|
||||||
|
<DialogContent className="max-w-[95vw] sm:max-w-[500px] max-h-[85vh]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>버튼 세부설정</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
{editingButton?.label || "버튼"}의 동작을 설정합니다.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{editingButton && (
|
||||||
|
<ScrollArea className="max-h-[60vh]">
|
||||||
|
<div className="space-y-4 pr-4">
|
||||||
|
{/* 기본 설정 */}
|
||||||
|
<div className="space-y-3 p-3 border rounded-lg">
|
||||||
|
<h4 className="text-sm font-medium">기본 설정</h4>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">버튼 라벨</Label>
|
||||||
|
<Input
|
||||||
|
value={editingButton.label}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditingButton({ ...editingButton, label: e.target.value })
|
||||||
|
}
|
||||||
|
placeholder="버튼 라벨"
|
||||||
|
className="mt-1 h-9"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">버튼 스타일</Label>
|
||||||
|
<Select
|
||||||
|
value={editingButton.variant || "default"}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
setEditingButton({
|
||||||
|
...editingButton,
|
||||||
|
variant: value as ActionButtonConfig["variant"],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="mt-1 h-9">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="default">기본 (Primary)</SelectItem>
|
||||||
|
<SelectItem value="secondary">보조 (Secondary)</SelectItem>
|
||||||
|
<SelectItem value="outline">외곽선</SelectItem>
|
||||||
|
<SelectItem value="ghost">투명</SelectItem>
|
||||||
|
<SelectItem value="destructive">삭제 (빨간색)</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">아이콘</Label>
|
||||||
|
<Select
|
||||||
|
value={editingButton.icon || "none"}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
setEditingButton({
|
||||||
|
...editingButton,
|
||||||
|
icon: value === "none" ? undefined : value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="mt-1 h-9">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="none">없음</SelectItem>
|
||||||
|
<SelectItem value="Plus">+ (추가)</SelectItem>
|
||||||
|
<SelectItem value="Edit">수정</SelectItem>
|
||||||
|
<SelectItem value="Trash2">삭제</SelectItem>
|
||||||
|
<SelectItem value="Download">다운로드</SelectItem>
|
||||||
|
<SelectItem value="Upload">업로드</SelectItem>
|
||||||
|
<SelectItem value="RefreshCw">새로고침</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">표시 조건</Label>
|
||||||
|
<Select
|
||||||
|
value={editingButton.showCondition || "always"}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
setEditingButton({
|
||||||
|
...editingButton,
|
||||||
|
showCondition: value as ActionButtonConfig["showCondition"],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="mt-1 h-9">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="always">항상 표시</SelectItem>
|
||||||
|
<SelectItem value="selected">선택 시만 표시</SelectItem>
|
||||||
|
<SelectItem value="notSelected">미선택 시만 표시</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 동작 설정 */}
|
||||||
|
<div className="space-y-3 p-3 border rounded-lg">
|
||||||
|
<h4 className="text-sm font-medium">동작 설정</h4>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">동작 유형</Label>
|
||||||
|
<Select
|
||||||
|
value={editingButton.action || "add"}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
setEditingButton({
|
||||||
|
...editingButton,
|
||||||
|
action: value as ActionButtonConfig["action"],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="mt-1 h-9">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="add">추가 (모달 열기)</SelectItem>
|
||||||
|
<SelectItem value="edit">수정 (선택 항목)</SelectItem>
|
||||||
|
<SelectItem value="delete">삭제 (선택 항목)</SelectItem>
|
||||||
|
<SelectItem value="bulk-delete">일괄 삭제 (체크된 항목)</SelectItem>
|
||||||
|
<SelectItem value="api">API 호출</SelectItem>
|
||||||
|
<SelectItem value="custom">커스텀 액션</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 모달 설정 (add, edit 액션) */}
|
||||||
|
{(editingButton.action === "add" || editingButton.action === "edit") && (
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">모달 화면</Label>
|
||||||
|
<Popover open={screenSelectOpen} onOpenChange={setScreenSelectOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
role="combobox"
|
||||||
|
className="mt-1 h-9 w-full justify-between"
|
||||||
|
disabled={screensLoading}
|
||||||
|
>
|
||||||
|
{screensLoading
|
||||||
|
? "로딩 중..."
|
||||||
|
: editingButton.modalScreenId
|
||||||
|
? getScreenInfo(editingButton.modalScreenId)?.screen_name ||
|
||||||
|
`화면 ${editingButton.modalScreenId}`
|
||||||
|
: "화면 선택"}
|
||||||
|
<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) => (
|
||||||
|
<CommandItem
|
||||||
|
key={screen.screen_id}
|
||||||
|
value={`${screen.screen_id}-${screen.screen_name}`}
|
||||||
|
onSelect={() => {
|
||||||
|
setEditingButton({
|
||||||
|
...editingButton,
|
||||||
|
modalScreenId: screen.screen_id,
|
||||||
|
});
|
||||||
|
setScreenSelectOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
"mr-2 h-4 w-4",
|
||||||
|
editingButton.modalScreenId === 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>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* API 설정 */}
|
||||||
|
{editingButton.action === "api" && (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">API 엔드포인트</Label>
|
||||||
|
<Input
|
||||||
|
value={editingButton.apiEndpoint || ""}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditingButton({
|
||||||
|
...editingButton,
|
||||||
|
apiEndpoint: e.target.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
placeholder="/api/example"
|
||||||
|
className="mt-1 h-9"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">HTTP 메서드</Label>
|
||||||
|
<Select
|
||||||
|
value={editingButton.apiMethod || "POST"}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
setEditingButton({
|
||||||
|
...editingButton,
|
||||||
|
apiMethod: value as ActionButtonConfig["apiMethod"],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="mt-1 h-9">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="GET">GET</SelectItem>
|
||||||
|
<SelectItem value="POST">POST</SelectItem>
|
||||||
|
<SelectItem value="PUT">PUT</SelectItem>
|
||||||
|
<SelectItem value="DELETE">DELETE</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 확인 메시지 (삭제 계열) */}
|
||||||
|
{(editingButton.action === "delete" ||
|
||||||
|
editingButton.action === "bulk-delete" ||
|
||||||
|
(editingButton.action === "api" && editingButton.apiMethod === "DELETE")) && (
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">확인 메시지</Label>
|
||||||
|
<Input
|
||||||
|
value={editingButton.confirmMessage || ""}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditingButton({
|
||||||
|
...editingButton,
|
||||||
|
confirmMessage: e.target.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
placeholder="정말 삭제하시겠습니까?"
|
||||||
|
className="mt-1 h-9"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 커스텀 액션 ID */}
|
||||||
|
{editingButton.action === "custom" && (
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">커스텀 액션 ID</Label>
|
||||||
|
<Input
|
||||||
|
value={editingButton.customActionId || ""}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditingButton({
|
||||||
|
...editingButton,
|
||||||
|
customActionId: e.target.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
placeholder="customAction1"
|
||||||
|
className="mt-1 h-9"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
커스텀 이벤트 핸들러에서 이 ID로 버튼을 구분합니다
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setDetailModalOpen(false)}>
|
||||||
|
취소
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleSaveDetailSettings}>적용</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ActionButtonConfigModal;
|
||||||
|
|
||||||
|
|
@ -0,0 +1,805 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState, useEffect, useCallback } from "react";
|
||||||
|
import {
|
||||||
|
DndContext,
|
||||||
|
closestCenter,
|
||||||
|
KeyboardSensor,
|
||||||
|
PointerSensor,
|
||||||
|
useSensor,
|
||||||
|
useSensors,
|
||||||
|
type DragEndEvent,
|
||||||
|
} from "@dnd-kit/core";
|
||||||
|
import {
|
||||||
|
arrayMove,
|
||||||
|
SortableContext,
|
||||||
|
sortableKeyboardCoordinates,
|
||||||
|
verticalListSortingStrategy,
|
||||||
|
} from "@dnd-kit/sortable";
|
||||||
|
import { Plus, Settings2 } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { apiClient } from "@/lib/api/client";
|
||||||
|
import { entityJoinApi } from "@/lib/api/entityJoin";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import type { ColumnConfig, SearchColumnConfig, GroupingConfig, ColumnDisplayConfig, EntityReferenceConfig } from "./types";
|
||||||
|
import { SortableColumnItem } from "./components/SortableColumnItem";
|
||||||
|
import { SearchableColumnSelect } from "./components/SearchableColumnSelect";
|
||||||
|
|
||||||
|
interface ColumnInfo {
|
||||||
|
column_name: string;
|
||||||
|
data_type: string;
|
||||||
|
column_comment?: string;
|
||||||
|
input_type?: string;
|
||||||
|
web_type?: string;
|
||||||
|
reference_table?: string;
|
||||||
|
reference_column?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 참조 테이블 컬럼 정보
|
||||||
|
interface ReferenceColumnInfo {
|
||||||
|
columnName: string;
|
||||||
|
displayName: string;
|
||||||
|
dataType: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ColumnConfigModalProps {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
tableName: string;
|
||||||
|
displayColumns: ColumnConfig[];
|
||||||
|
searchColumns?: SearchColumnConfig[];
|
||||||
|
grouping?: GroupingConfig;
|
||||||
|
showSearch?: boolean;
|
||||||
|
onSave: (config: {
|
||||||
|
displayColumns: ColumnConfig[];
|
||||||
|
searchColumns: SearchColumnConfig[];
|
||||||
|
grouping: GroupingConfig;
|
||||||
|
showSearch: boolean;
|
||||||
|
}) => void;
|
||||||
|
side: "left" | "right"; // 좌측/우측 패널 구분
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ColumnConfigModal: React.FC<ColumnConfigModalProps> = ({
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
tableName,
|
||||||
|
displayColumns: initialDisplayColumns,
|
||||||
|
searchColumns: initialSearchColumns,
|
||||||
|
grouping: initialGrouping,
|
||||||
|
showSearch: initialShowSearch,
|
||||||
|
onSave,
|
||||||
|
side,
|
||||||
|
}) => {
|
||||||
|
// 로컬 상태 (모달 내에서만 사용, 저장 시 부모로 전달)
|
||||||
|
const [displayColumns, setDisplayColumns] = useState<ColumnConfig[]>([]);
|
||||||
|
const [searchColumns, setSearchColumns] = useState<SearchColumnConfig[]>([]);
|
||||||
|
const [grouping, setGrouping] = useState<GroupingConfig>({ enabled: false, groupByColumn: "" });
|
||||||
|
const [showSearch, setShowSearch] = useState(false);
|
||||||
|
|
||||||
|
// 컬럼 세부설정 모달
|
||||||
|
const [detailModalOpen, setDetailModalOpen] = useState(false);
|
||||||
|
const [editingColumnIndex, setEditingColumnIndex] = useState<number | null>(null);
|
||||||
|
const [editingColumn, setEditingColumn] = useState<ColumnConfig | null>(null);
|
||||||
|
|
||||||
|
// 테이블 컬럼 목록
|
||||||
|
const [columns, setColumns] = useState<ColumnInfo[]>([]);
|
||||||
|
const [columnsLoading, setColumnsLoading] = useState(false);
|
||||||
|
|
||||||
|
// 엔티티 참조 관련 상태
|
||||||
|
const [entityReferenceColumns, setEntityReferenceColumns] = useState<Map<string, ReferenceColumnInfo[]>>(new Map());
|
||||||
|
const [loadingEntityColumns, setLoadingEntityColumns] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
|
// 드래그 센서
|
||||||
|
const sensors = useSensors(
|
||||||
|
useSensor(PointerSensor, {
|
||||||
|
activationConstraint: {
|
||||||
|
distance: 8,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
useSensor(KeyboardSensor, {
|
||||||
|
coordinateGetter: sortableKeyboardCoordinates,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// 초기값 설정
|
||||||
|
useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
setDisplayColumns(initialDisplayColumns || []);
|
||||||
|
setSearchColumns(initialSearchColumns || []);
|
||||||
|
setGrouping(initialGrouping || { enabled: false, groupByColumn: "" });
|
||||||
|
setShowSearch(initialShowSearch || false);
|
||||||
|
}
|
||||||
|
}, [open, initialDisplayColumns, initialSearchColumns, initialGrouping, initialShowSearch]);
|
||||||
|
|
||||||
|
// 테이블 컬럼 로드 (entity 타입 정보 포함)
|
||||||
|
const loadColumns = useCallback(async () => {
|
||||||
|
if (!tableName) {
|
||||||
|
setColumns([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setColumnsLoading(true);
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get(`/table-management/tables/${tableName}/columns?size=200`);
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// entity 타입 정보를 포함하여 변환
|
||||||
|
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 ?? "",
|
||||||
|
input_type: c.inputType ?? c.input_type ?? "",
|
||||||
|
web_type: c.webType ?? c.web_type ?? "",
|
||||||
|
reference_table: c.referenceTable ?? c.reference_table ?? "",
|
||||||
|
reference_column: c.referenceColumn ?? c.reference_column ?? "",
|
||||||
|
}));
|
||||||
|
|
||||||
|
setColumns(transformedColumns);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("컬럼 목록 로드 실패:", error);
|
||||||
|
setColumns([]);
|
||||||
|
} finally {
|
||||||
|
setColumnsLoading(false);
|
||||||
|
}
|
||||||
|
}, [tableName]);
|
||||||
|
|
||||||
|
// 엔티티 참조 테이블의 컬럼 목록 로드
|
||||||
|
const loadEntityReferenceColumns = useCallback(async (columnName: string, referenceTable: string) => {
|
||||||
|
if (!referenceTable || entityReferenceColumns.has(columnName)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoadingEntityColumns(prev => new Set(prev).add(columnName));
|
||||||
|
try {
|
||||||
|
const result = await entityJoinApi.getReferenceTableColumns(referenceTable);
|
||||||
|
if (result?.columns) {
|
||||||
|
setEntityReferenceColumns(prev => {
|
||||||
|
const newMap = new Map(prev);
|
||||||
|
newMap.set(columnName, result.columns);
|
||||||
|
return newMap;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`엔티티 참조 컬럼 로드 실패 (${referenceTable}):`, error);
|
||||||
|
} finally {
|
||||||
|
setLoadingEntityColumns(prev => {
|
||||||
|
const newSet = new Set(prev);
|
||||||
|
newSet.delete(columnName);
|
||||||
|
return newSet;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [entityReferenceColumns]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (open && tableName) {
|
||||||
|
loadColumns();
|
||||||
|
}
|
||||||
|
}, [open, tableName, loadColumns]);
|
||||||
|
|
||||||
|
// 드래그 종료 핸들러
|
||||||
|
const handleDragEnd = (event: DragEndEvent) => {
|
||||||
|
const { active, over } = event;
|
||||||
|
|
||||||
|
if (over && active.id !== over.id) {
|
||||||
|
const oldIndex = displayColumns.findIndex((col, idx) => `col-${idx}` === active.id);
|
||||||
|
const newIndex = displayColumns.findIndex((col, idx) => `col-${idx}` === over.id);
|
||||||
|
|
||||||
|
if (oldIndex !== -1 && newIndex !== -1) {
|
||||||
|
setDisplayColumns(arrayMove(displayColumns, oldIndex, newIndex));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 컬럼 추가
|
||||||
|
const handleAddColumn = () => {
|
||||||
|
setDisplayColumns([
|
||||||
|
...displayColumns,
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
label: "",
|
||||||
|
displayRow: side === "left" ? "name" : "info",
|
||||||
|
sourceTable: tableName,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 컬럼 삭제
|
||||||
|
const handleRemoveColumn = (index: number) => {
|
||||||
|
setDisplayColumns(displayColumns.filter((_, i) => i !== index));
|
||||||
|
};
|
||||||
|
|
||||||
|
// 컬럼 업데이트 (entity 타입이면 참조 테이블 컬럼도 로드)
|
||||||
|
const handleUpdateColumn = (index: number, updates: Partial<ColumnConfig>) => {
|
||||||
|
const newColumns = [...displayColumns];
|
||||||
|
newColumns[index] = { ...newColumns[index], ...updates };
|
||||||
|
setDisplayColumns(newColumns);
|
||||||
|
|
||||||
|
// 컬럼명이 변경된 경우 entity 타입인지 확인하고 참조 테이블 컬럼 로드
|
||||||
|
if (updates.name) {
|
||||||
|
const columnInfo = columns.find(c => c.column_name === updates.name);
|
||||||
|
if (columnInfo && (columnInfo.input_type === 'entity' || columnInfo.web_type === 'entity')) {
|
||||||
|
if (columnInfo.reference_table) {
|
||||||
|
loadEntityReferenceColumns(updates.name, columnInfo.reference_table);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 컬럼 세부설정 열기 (entity 타입이면 참조 테이블 컬럼도 로드)
|
||||||
|
const handleOpenDetailSettings = (index: number) => {
|
||||||
|
const column = displayColumns[index];
|
||||||
|
setEditingColumnIndex(index);
|
||||||
|
setEditingColumn({ ...column });
|
||||||
|
setDetailModalOpen(true);
|
||||||
|
|
||||||
|
// entity 타입인지 확인하고 참조 테이블 컬럼 로드
|
||||||
|
if (column.name) {
|
||||||
|
const columnInfo = columns.find(c => c.column_name === column.name);
|
||||||
|
if (columnInfo && (columnInfo.input_type === 'entity' || columnInfo.web_type === 'entity')) {
|
||||||
|
if (columnInfo.reference_table) {
|
||||||
|
loadEntityReferenceColumns(column.name, columnInfo.reference_table);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 컬럼 세부설정 저장
|
||||||
|
const handleSaveDetailSettings = () => {
|
||||||
|
if (editingColumnIndex !== null && editingColumn) {
|
||||||
|
handleUpdateColumn(editingColumnIndex, editingColumn);
|
||||||
|
}
|
||||||
|
setDetailModalOpen(false);
|
||||||
|
setEditingColumnIndex(null);
|
||||||
|
setEditingColumn(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 검색 컬럼 추가
|
||||||
|
const handleAddSearchColumn = () => {
|
||||||
|
setSearchColumns([...searchColumns, { columnName: "", label: "" }]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 검색 컬럼 삭제
|
||||||
|
const handleRemoveSearchColumn = (index: number) => {
|
||||||
|
setSearchColumns(searchColumns.filter((_, i) => i !== index));
|
||||||
|
};
|
||||||
|
|
||||||
|
// 검색 컬럼 업데이트
|
||||||
|
const handleUpdateSearchColumn = (index: number, columnName: string) => {
|
||||||
|
const newColumns = [...searchColumns];
|
||||||
|
newColumns[index] = { ...newColumns[index], columnName };
|
||||||
|
setSearchColumns(newColumns);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 저장
|
||||||
|
const handleSave = () => {
|
||||||
|
onSave({
|
||||||
|
displayColumns,
|
||||||
|
searchColumns,
|
||||||
|
grouping,
|
||||||
|
showSearch,
|
||||||
|
});
|
||||||
|
onOpenChange(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 엔티티 표시 컬럼 토글
|
||||||
|
const toggleEntityDisplayColumn = (selectedColumn: string) => {
|
||||||
|
if (!editingColumn) return;
|
||||||
|
|
||||||
|
const currentDisplayColumns = editingColumn.entityReference?.displayColumns || [];
|
||||||
|
const newDisplayColumns = currentDisplayColumns.includes(selectedColumn)
|
||||||
|
? currentDisplayColumns.filter(col => col !== selectedColumn)
|
||||||
|
: [...currentDisplayColumns, selectedColumn];
|
||||||
|
|
||||||
|
setEditingColumn({
|
||||||
|
...editingColumn,
|
||||||
|
entityReference: {
|
||||||
|
...editingColumn.entityReference,
|
||||||
|
displayColumns: newDisplayColumns,
|
||||||
|
} as EntityReferenceConfig,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 현재 편집 중인 컬럼이 entity 타입인지 확인
|
||||||
|
const getEditingColumnEntityInfo = useCallback(() => {
|
||||||
|
if (!editingColumn?.name) return null;
|
||||||
|
const columnInfo = columns.find(c => c.column_name === editingColumn.name);
|
||||||
|
if (!columnInfo) return null;
|
||||||
|
if (columnInfo.input_type !== 'entity' && columnInfo.web_type !== 'entity') return null;
|
||||||
|
return {
|
||||||
|
referenceTable: columnInfo.reference_table || '',
|
||||||
|
referenceColumns: entityReferenceColumns.get(editingColumn.name) || [],
|
||||||
|
isLoading: loadingEntityColumns.has(editingColumn.name),
|
||||||
|
};
|
||||||
|
}, [editingColumn, columns, entityReferenceColumns, loadingEntityColumns]);
|
||||||
|
|
||||||
|
// 이미 선택된 컬럼명 목록 (중복 선택 방지용)
|
||||||
|
const selectedColumnNames = displayColumns.map((col) => col.name).filter(Boolean);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className="flex h-[80vh] max-w-[95vw] flex-col overflow-hidden sm:max-w-[700px]">
|
||||||
|
<DialogHeader className="shrink-0">
|
||||||
|
<DialogTitle className="flex items-center gap-2">
|
||||||
|
<Settings2 className="h-5 w-5" />
|
||||||
|
{side === "left" ? "좌측" : "우측"} 패널 컬럼 설정
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
표시할 컬럼을 추가하고 순서를 드래그로 변경할 수 있습니다.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<Tabs defaultValue="columns" className="flex min-h-0 flex-1 flex-col overflow-hidden">
|
||||||
|
<TabsList className="grid w-full shrink-0 grid-cols-3">
|
||||||
|
<TabsTrigger value="columns">표시 컬럼</TabsTrigger>
|
||||||
|
<TabsTrigger value="grouping" disabled={side === "right"}>
|
||||||
|
그룹핑
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="search">검색</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
{/* 표시 컬럼 탭 */}
|
||||||
|
<TabsContent value="columns" className="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden">
|
||||||
|
<div className="flex shrink-0 items-center justify-between mb-3">
|
||||||
|
<Label className="text-sm font-medium">
|
||||||
|
표시할 컬럼 ({displayColumns.length}개)
|
||||||
|
</Label>
|
||||||
|
<Button size="sm" variant="outline" onClick={handleAddColumn}>
|
||||||
|
<Plus className="mr-1 h-4 w-4" />
|
||||||
|
컬럼 추가
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ScrollArea className="min-h-0 flex-1">
|
||||||
|
<div className="pr-4">
|
||||||
|
{displayColumns.length === 0 ? (
|
||||||
|
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||||
|
<p className="text-muted-foreground text-sm mb-2">
|
||||||
|
표시할 컬럼이 없습니다
|
||||||
|
</p>
|
||||||
|
<Button size="sm" variant="outline" onClick={handleAddColumn}>
|
||||||
|
<Plus className="mr-1 h-4 w-4" />
|
||||||
|
첫 번째 컬럼 추가
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<DndContext
|
||||||
|
sensors={sensors}
|
||||||
|
collisionDetection={closestCenter}
|
||||||
|
onDragEnd={handleDragEnd}
|
||||||
|
>
|
||||||
|
<SortableContext
|
||||||
|
items={displayColumns.map((_, idx) => `col-${idx}`)}
|
||||||
|
strategy={verticalListSortingStrategy}
|
||||||
|
>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{displayColumns.map((col, index) => (
|
||||||
|
<div key={`col-${index}`} className="space-y-2">
|
||||||
|
<SortableColumnItem
|
||||||
|
id={`col-${index}`}
|
||||||
|
column={col}
|
||||||
|
index={index}
|
||||||
|
onSettingsClick={() => handleOpenDetailSettings(index)}
|
||||||
|
onRemove={() => handleRemoveColumn(index)}
|
||||||
|
showGroupingSettings={grouping.enabled}
|
||||||
|
/>
|
||||||
|
{/* 컬럼 빠른 선택 (인라인) */}
|
||||||
|
{!col.name && (
|
||||||
|
<div className="ml-6 pl-2 border-l-2 border-muted">
|
||||||
|
<SearchableColumnSelect
|
||||||
|
tableName={tableName}
|
||||||
|
value={col.name}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
const colInfo = columns.find((c) => c.column_name === value);
|
||||||
|
handleUpdateColumn(index, {
|
||||||
|
name: value,
|
||||||
|
label: colInfo?.column_comment || "",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
excludeColumns={selectedColumnNames}
|
||||||
|
placeholder="컬럼을 선택하세요"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</SortableContext>
|
||||||
|
</DndContext>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* 그룹핑 탭 (좌측 패널만) */}
|
||||||
|
<TabsContent value="grouping" className="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden">
|
||||||
|
<ScrollArea className="min-h-0 flex-1">
|
||||||
|
<div className="space-y-4 pr-4">
|
||||||
|
<div className="flex items-center justify-between rounded-lg border p-4">
|
||||||
|
<div>
|
||||||
|
<Label className="text-sm font-medium">그룹핑 사용</Label>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
동일한 값을 가진 행들을 하나로 그룹화합니다
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={grouping.enabled}
|
||||||
|
onCheckedChange={(checked) =>
|
||||||
|
setGrouping({ ...grouping, enabled: checked })
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{grouping.enabled && (
|
||||||
|
<div className="space-y-3 p-4 border rounded-lg bg-muted/30">
|
||||||
|
<div>
|
||||||
|
<Label className="text-sm">그룹 기준 컬럼</Label>
|
||||||
|
<SearchableColumnSelect
|
||||||
|
tableName={tableName}
|
||||||
|
value={grouping.groupByColumn}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
setGrouping({ ...grouping, groupByColumn: value })
|
||||||
|
}
|
||||||
|
placeholder="그룹 기준 컬럼 선택"
|
||||||
|
className="mt-1"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
예: item_id로 그룹핑하면 같은 품목의 데이터를 하나로 표시합니다
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* 검색 탭 */}
|
||||||
|
<TabsContent value="search" className="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden">
|
||||||
|
<ScrollArea className="min-h-0 flex-1">
|
||||||
|
<div className="space-y-4 pr-4">
|
||||||
|
<div className="flex items-center justify-between rounded-lg border p-4">
|
||||||
|
<div>
|
||||||
|
<Label className="text-sm font-medium">검색 표시</Label>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
검색 입력창을 표시합니다
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch checked={showSearch} onCheckedChange={setShowSearch} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showSearch && (
|
||||||
|
<div className="space-y-3 p-4 border rounded-lg bg-muted/30">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Label className="text-sm">검색 대상 컬럼</Label>
|
||||||
|
<Button size="sm" variant="ghost" onClick={handleAddSearchColumn}>
|
||||||
|
<Plus className="mr-1 h-3 w-3" />
|
||||||
|
추가
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{searchColumns.length === 0 ? (
|
||||||
|
<div className="text-center py-4 text-muted-foreground text-sm border rounded-md">
|
||||||
|
검색할 컬럼을 추가하세요
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{searchColumns.map((searchCol, index) => (
|
||||||
|
<div key={index} className="flex items-center gap-2">
|
||||||
|
<SearchableColumnSelect
|
||||||
|
tableName={tableName}
|
||||||
|
value={searchCol.columnName}
|
||||||
|
onValueChange={(value) => handleUpdateSearchColumn(index, value)}
|
||||||
|
placeholder="검색 컬럼 선택"
|
||||||
|
className="flex-1"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
className="h-9 w-9 p-0 text-destructive"
|
||||||
|
onClick={() => handleRemoveSearchColumn(index)}
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
<DialogFooter className="mt-4 shrink-0">
|
||||||
|
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||||
|
취소
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleSave}>저장</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* 컬럼 세부설정 모달 */}
|
||||||
|
<Dialog open={detailModalOpen} onOpenChange={setDetailModalOpen}>
|
||||||
|
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>컬럼 세부설정</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
{editingColumn?.label || editingColumn?.name || "컬럼"}의 표시 설정을 변경합니다.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{editingColumn && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* 기본 설정 */}
|
||||||
|
<div className="space-y-3 p-3 border rounded-lg">
|
||||||
|
<h4 className="text-sm font-medium">기본 설정</h4>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">컬럼 선택</Label>
|
||||||
|
<SearchableColumnSelect
|
||||||
|
tableName={tableName}
|
||||||
|
value={editingColumn.name}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
const colInfo = columns.find((c) => c.column_name === value);
|
||||||
|
setEditingColumn({
|
||||||
|
...editingColumn,
|
||||||
|
name: value,
|
||||||
|
label: colInfo?.column_comment || editingColumn.label,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
className="mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">표시 라벨</Label>
|
||||||
|
<Input
|
||||||
|
value={editingColumn.label || ""}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditingColumn({ ...editingColumn, label: e.target.value })
|
||||||
|
}
|
||||||
|
placeholder="라벨명 (미입력 시 컬럼명 사용)"
|
||||||
|
className="mt-1 h-9"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">표시 위치</Label>
|
||||||
|
<Select
|
||||||
|
value={editingColumn.displayRow || "name"}
|
||||||
|
onValueChange={(value: "name" | "info") =>
|
||||||
|
setEditingColumn({ ...editingColumn, displayRow: value })
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="mt-1 h-9">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="name">이름 행 (Name Row)</SelectItem>
|
||||||
|
<SelectItem value="info">정보 행 (Info Row)</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">컬럼 너비 (px)</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={editingColumn.width || ""}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditingColumn({
|
||||||
|
...editingColumn,
|
||||||
|
width: e.target.value ? parseInt(e.target.value) : undefined,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
placeholder="자동"
|
||||||
|
className="mt-1 h-9"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 그룹핑/집계 설정 (그룹핑 활성화 시만) */}
|
||||||
|
{grouping.enabled && (
|
||||||
|
<div className="space-y-3 p-3 border rounded-lg">
|
||||||
|
<h4 className="text-sm font-medium">그룹핑/집계 설정</h4>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">표시 방식</Label>
|
||||||
|
<Select
|
||||||
|
value={editingColumn.displayConfig?.displayType || "text"}
|
||||||
|
onValueChange={(value: "text" | "badge") =>
|
||||||
|
setEditingColumn({
|
||||||
|
...editingColumn,
|
||||||
|
displayConfig: {
|
||||||
|
...editingColumn.displayConfig,
|
||||||
|
displayType: value,
|
||||||
|
} as ColumnDisplayConfig,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="mt-1 h-9">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="text">텍스트 (기본)</SelectItem>
|
||||||
|
<SelectItem value="badge">배지 (태그 형태)</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
배지는 여러 값을 태그 형태로 나란히 표시합니다
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">집계 사용</Label>
|
||||||
|
<p className="text-[10px] text-muted-foreground">
|
||||||
|
그룹핑 시 값을 집계합니다
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={editingColumn.displayConfig?.aggregate?.enabled || false}
|
||||||
|
onCheckedChange={(checked) =>
|
||||||
|
setEditingColumn({
|
||||||
|
...editingColumn,
|
||||||
|
displayConfig: {
|
||||||
|
displayType: editingColumn.displayConfig?.displayType || "text",
|
||||||
|
aggregate: {
|
||||||
|
enabled: checked,
|
||||||
|
function: editingColumn.displayConfig?.aggregate?.function || "DISTINCT",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{editingColumn.displayConfig?.aggregate?.enabled && (
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">집계 방식</Label>
|
||||||
|
<Select
|
||||||
|
value={editingColumn.displayConfig?.aggregate?.function || "DISTINCT"}
|
||||||
|
onValueChange={(value: "DISTINCT" | "COUNT") =>
|
||||||
|
setEditingColumn({
|
||||||
|
...editingColumn,
|
||||||
|
displayConfig: {
|
||||||
|
displayType: editingColumn.displayConfig?.displayType || "text",
|
||||||
|
aggregate: {
|
||||||
|
enabled: true,
|
||||||
|
function: value,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="mt-1 h-9">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="DISTINCT">중복제거 (고유값만)</SelectItem>
|
||||||
|
<SelectItem value="COUNT">개수</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 엔티티 참조 설정 (entity 타입 컬럼일 때만 표시) */}
|
||||||
|
{(() => {
|
||||||
|
const entityInfo = getEditingColumnEntityInfo();
|
||||||
|
if (!entityInfo) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-3 p-3 border rounded-lg">
|
||||||
|
<h4 className="text-sm font-medium">엔티티 표시 컬럼</h4>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
참조 테이블: <span className="font-medium">{entityInfo.referenceTable}</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{entityInfo.isLoading ? (
|
||||||
|
<div className="flex items-center justify-center py-4">
|
||||||
|
<span className="text-sm text-muted-foreground">컬럼 정보 로딩 중...</span>
|
||||||
|
</div>
|
||||||
|
) : entityInfo.referenceColumns.length === 0 ? (
|
||||||
|
<div className="text-center py-4 text-muted-foreground text-sm border rounded-md">
|
||||||
|
참조 테이블의 컬럼 정보를 불러올 수 없습니다
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<ScrollArea className="max-h-40">
|
||||||
|
<div className="space-y-2 pr-4">
|
||||||
|
{entityInfo.referenceColumns.map((col) => {
|
||||||
|
const isSelected = (editingColumn.entityReference?.displayColumns || []).includes(col.columnName);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={col.columnName}
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-2 p-2 rounded-md cursor-pointer hover:bg-muted/50 transition-colors",
|
||||||
|
isSelected && "bg-muted"
|
||||||
|
)}
|
||||||
|
onClick={() => toggleEntityDisplayColumn(col.columnName)}
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
checked={isSelected}
|
||||||
|
onCheckedChange={() => toggleEntityDisplayColumn(col.columnName)}
|
||||||
|
/>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<span className="text-sm font-medium truncate block">
|
||||||
|
{col.displayName || col.columnName}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-muted-foreground truncate block">
|
||||||
|
{col.columnName} ({col.dataType})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(editingColumn.entityReference?.displayColumns || []).length > 0 && (
|
||||||
|
<div className="mt-2 pt-2 border-t">
|
||||||
|
<p className="text-xs text-muted-foreground mb-1">
|
||||||
|
선택됨: {(editingColumn.entityReference?.displayColumns || []).length}개
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{(editingColumn.entityReference?.displayColumns || []).map((colName) => {
|
||||||
|
const colInfo = entityInfo.referenceColumns.find(c => c.columnName === colName);
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
key={colName}
|
||||||
|
className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-primary/10 text-primary"
|
||||||
|
>
|
||||||
|
{colInfo?.displayName || colName}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setDetailModalOpen(false)}>
|
||||||
|
취소
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleSaveDetailSettings}>적용</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ColumnConfigModal;
|
||||||
|
|
||||||
|
|
@ -0,0 +1,423 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { Plus, X, Settings, ArrowRight } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import type { DataTransferField } from "./types";
|
||||||
|
|
||||||
|
interface ColumnInfo {
|
||||||
|
column_name: string;
|
||||||
|
column_comment?: string;
|
||||||
|
data_type?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DataTransferConfigModalProps {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
dataTransferFields: DataTransferField[];
|
||||||
|
onChange: (fields: DataTransferField[]) => void;
|
||||||
|
leftColumns: ColumnInfo[];
|
||||||
|
rightColumns: ColumnInfo[];
|
||||||
|
leftTableName?: string;
|
||||||
|
rightTableName?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 컬럼 선택 컴포넌트
|
||||||
|
const ColumnSelect: React.FC<{
|
||||||
|
columns: ColumnInfo[];
|
||||||
|
value: string;
|
||||||
|
onValueChange: (value: string) => void;
|
||||||
|
placeholder: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
}> = ({ columns, value, onValueChange, placeholder, disabled = false }) => {
|
||||||
|
return (
|
||||||
|
<Select value={value} onValueChange={onValueChange} disabled={disabled}>
|
||||||
|
<SelectTrigger className="h-8 text-xs">
|
||||||
|
<SelectValue placeholder={placeholder} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{columns.map((col) => (
|
||||||
|
<SelectItem key={col.column_name} value={col.column_name}>
|
||||||
|
{col.column_comment || col.column_name}
|
||||||
|
<span className="text-muted-foreground ml-1 text-[10px]">({col.column_name})</span>
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 개별 필드 편집 모달
|
||||||
|
const FieldEditModal: React.FC<{
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
field: DataTransferField | null;
|
||||||
|
onSave: (field: DataTransferField) => void;
|
||||||
|
leftColumns: ColumnInfo[];
|
||||||
|
rightColumns: ColumnInfo[];
|
||||||
|
leftTableName?: string;
|
||||||
|
rightTableName?: string;
|
||||||
|
isNew?: boolean;
|
||||||
|
}> = ({
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
field,
|
||||||
|
onSave,
|
||||||
|
leftColumns,
|
||||||
|
rightColumns,
|
||||||
|
leftTableName,
|
||||||
|
rightTableName,
|
||||||
|
isNew = false,
|
||||||
|
}) => {
|
||||||
|
const [editingField, setEditingField] = useState<DataTransferField>({
|
||||||
|
id: "",
|
||||||
|
panel: "left",
|
||||||
|
sourceColumn: "",
|
||||||
|
targetColumn: "",
|
||||||
|
label: "",
|
||||||
|
description: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (field) {
|
||||||
|
setEditingField({ ...field });
|
||||||
|
} else {
|
||||||
|
setEditingField({
|
||||||
|
id: `field_${Date.now()}`,
|
||||||
|
panel: "left",
|
||||||
|
sourceColumn: "",
|
||||||
|
targetColumn: "",
|
||||||
|
label: "",
|
||||||
|
description: "",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [field, open]);
|
||||||
|
|
||||||
|
const handleSave = () => {
|
||||||
|
if (!editingField.sourceColumn || !editingField.targetColumn) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
onSave(editingField);
|
||||||
|
onOpenChange(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentColumns = editingField.panel === "left" ? leftColumns : rightColumns;
|
||||||
|
const currentTableName = editingField.panel === "left" ? leftTableName : rightTableName;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className="max-w-[95vw] sm:max-w-[450px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="text-base">{isNew ? "데이터 전달 필드 추가" : "데이터 전달 필드 편집"}</DialogTitle>
|
||||||
|
<DialogDescription className="text-xs">
|
||||||
|
선택한 항목의 데이터를 모달에 자동으로 전달합니다.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4 py-2">
|
||||||
|
{/* 패널 선택 */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">소스 패널</Label>
|
||||||
|
<Select
|
||||||
|
value={editingField.panel}
|
||||||
|
onValueChange={(value: "left" | "right") => {
|
||||||
|
setEditingField({ ...editingField, panel: value, sourceColumn: "" });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="mt-1 h-9">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="left">
|
||||||
|
좌측 패널 {leftTableName && <span className="text-muted-foreground">({leftTableName})</span>}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="right">
|
||||||
|
우측 패널 {rightTableName && <span className="text-muted-foreground">({rightTableName})</span>}
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<p className="text-muted-foreground mt-1 text-[10px]">데이터를 가져올 패널을 선택합니다.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 소스 컬럼 */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">
|
||||||
|
소스 컬럼 <span className="text-destructive">*</span>
|
||||||
|
</Label>
|
||||||
|
<div className="mt-1">
|
||||||
|
<ColumnSelect
|
||||||
|
columns={currentColumns}
|
||||||
|
value={editingField.sourceColumn}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
const col = currentColumns.find((c) => c.column_name === value);
|
||||||
|
setEditingField({
|
||||||
|
...editingField,
|
||||||
|
sourceColumn: value,
|
||||||
|
// 타겟 컬럼이 비어있으면 소스와 동일하게 설정
|
||||||
|
targetColumn: editingField.targetColumn || value,
|
||||||
|
// 라벨이 비어있으면 컬럼 코멘트 사용
|
||||||
|
label: editingField.label || col?.column_comment || "",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
placeholder="컬럼 선택..."
|
||||||
|
disabled={currentColumns.length === 0}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{currentColumns.length === 0 && (
|
||||||
|
<p className="text-destructive mt-1 text-[10px]">
|
||||||
|
{currentTableName ? "테이블에 컬럼이 없습니다." : "테이블을 먼저 선택해주세요."}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 타겟 컬럼 */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">
|
||||||
|
타겟 컬럼 (모달 필드명) <span className="text-destructive">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
value={editingField.targetColumn}
|
||||||
|
onChange={(e) => setEditingField({ ...editingField, targetColumn: e.target.value })}
|
||||||
|
placeholder="모달에서 사용할 필드명"
|
||||||
|
className="mt-1 h-9 text-sm"
|
||||||
|
/>
|
||||||
|
<p className="text-muted-foreground mt-1 text-[10px]">모달 폼에서 이 값을 받을 필드명입니다.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 라벨 (선택) */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">표시 라벨 (선택)</Label>
|
||||||
|
<Input
|
||||||
|
value={editingField.label || ""}
|
||||||
|
onChange={(e) => setEditingField({ ...editingField, label: e.target.value })}
|
||||||
|
placeholder="표시용 이름"
|
||||||
|
className="mt-1 h-9 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 설명 (선택) */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">설명 (선택)</Label>
|
||||||
|
<Input
|
||||||
|
value={editingField.description || ""}
|
||||||
|
onChange={(e) => setEditingField({ ...editingField, description: e.target.value })}
|
||||||
|
placeholder="이 필드에 대한 설명"
|
||||||
|
className="mt-1 h-9 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 미리보기 */}
|
||||||
|
{editingField.sourceColumn && editingField.targetColumn && (
|
||||||
|
<div className="bg-muted/50 rounded-md p-3">
|
||||||
|
<p className="mb-2 text-xs font-medium">미리보기</p>
|
||||||
|
<div className="flex items-center gap-2 text-xs">
|
||||||
|
<Badge variant="outline" className="text-[10px]">
|
||||||
|
{editingField.panel === "left" ? "좌측" : "우측"}
|
||||||
|
</Badge>
|
||||||
|
<span className="font-mono">{editingField.sourceColumn}</span>
|
||||||
|
<ArrowRight className="h-3 w-3" />
|
||||||
|
<span className="font-mono">{editingField.targetColumn}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter className="gap-2 sm:gap-0">
|
||||||
|
<Button variant="outline" onClick={() => onOpenChange(false)} className="h-9 text-sm">
|
||||||
|
취소
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={!editingField.sourceColumn || !editingField.targetColumn}
|
||||||
|
className="h-9 text-sm"
|
||||||
|
>
|
||||||
|
{isNew ? "추가" : "저장"}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 메인 모달 컴포넌트
|
||||||
|
const DataTransferConfigModal: React.FC<DataTransferConfigModalProps> = ({
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
dataTransferFields,
|
||||||
|
onChange,
|
||||||
|
leftColumns,
|
||||||
|
rightColumns,
|
||||||
|
leftTableName,
|
||||||
|
rightTableName,
|
||||||
|
}) => {
|
||||||
|
const [fields, setFields] = useState<DataTransferField[]>([]);
|
||||||
|
const [editModalOpen, setEditModalOpen] = useState(false);
|
||||||
|
const [editingField, setEditingField] = useState<DataTransferField | null>(null);
|
||||||
|
const [isNewField, setIsNewField] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
// 기존 필드에 panel이 없으면 left로 기본 설정 (하위 호환성)
|
||||||
|
const normalizedFields = (dataTransferFields || []).map((field, idx) => ({
|
||||||
|
...field,
|
||||||
|
id: field.id || `field_${idx}`,
|
||||||
|
panel: field.panel || ("left" as const),
|
||||||
|
}));
|
||||||
|
setFields(normalizedFields);
|
||||||
|
}
|
||||||
|
}, [open, dataTransferFields]);
|
||||||
|
|
||||||
|
const handleAddField = () => {
|
||||||
|
setEditingField(null);
|
||||||
|
setIsNewField(true);
|
||||||
|
setEditModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditField = (field: DataTransferField) => {
|
||||||
|
setEditingField(field);
|
||||||
|
setIsNewField(false);
|
||||||
|
setEditModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSaveField = (field: DataTransferField) => {
|
||||||
|
if (isNewField) {
|
||||||
|
setFields([...fields, field]);
|
||||||
|
} else {
|
||||||
|
setFields(fields.map((f) => (f.id === field.id ? field : f)));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveField = (id: string) => {
|
||||||
|
setFields(fields.filter((f) => f.id !== id));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = () => {
|
||||||
|
onChange(fields);
|
||||||
|
onOpenChange(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getColumnLabel = (panel: "left" | "right", columnName: string) => {
|
||||||
|
const columns = panel === "left" ? leftColumns : rightColumns;
|
||||||
|
const col = columns.find((c) => c.column_name === columnName);
|
||||||
|
return col?.column_comment || columnName;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className="flex max-h-[85vh] max-w-[95vw] flex-col sm:max-w-[550px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="text-base">데이터 전달 설정</DialogTitle>
|
||||||
|
<DialogDescription className="text-xs">
|
||||||
|
버튼 클릭 시 모달에 자동으로 전달할 데이터를 설정합니다.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="min-h-0 flex-1 overflow-hidden">
|
||||||
|
<div className="mb-3 flex items-center justify-between">
|
||||||
|
<span className="text-muted-foreground text-xs">전달 필드 ({fields.length}개)</span>
|
||||||
|
<Button size="sm" variant="outline" className="h-7 text-xs" onClick={handleAddField}>
|
||||||
|
<Plus className="mr-1 h-3 w-3" />
|
||||||
|
추가
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ScrollArea className="h-[300px]">
|
||||||
|
<div className="space-y-2 pr-2">
|
||||||
|
{fields.length === 0 ? (
|
||||||
|
<div className="text-muted-foreground rounded-md border py-8 text-center text-xs">
|
||||||
|
<p className="mb-2">전달할 필드가 없습니다</p>
|
||||||
|
<Button size="sm" variant="ghost" className="h-7 text-xs" onClick={handleAddField}>
|
||||||
|
<Plus className="mr-1 h-3 w-3" />
|
||||||
|
필드 추가
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
fields.map((field) => (
|
||||||
|
<div
|
||||||
|
key={field.id}
|
||||||
|
className="hover:bg-muted/50 flex items-center gap-2 rounded-md border p-2 transition-colors"
|
||||||
|
>
|
||||||
|
<Badge variant={field.panel === "left" ? "default" : "secondary"} className="shrink-0 text-[10px]">
|
||||||
|
{field.panel === "left" ? "좌측" : "우측"}
|
||||||
|
</Badge>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="flex items-center gap-1 text-xs">
|
||||||
|
<span className="font-mono">{getColumnLabel(field.panel, field.sourceColumn)}</span>
|
||||||
|
<ArrowRight className="text-muted-foreground h-3 w-3 shrink-0" />
|
||||||
|
<span className="font-mono truncate">{field.targetColumn}</span>
|
||||||
|
</div>
|
||||||
|
{field.description && (
|
||||||
|
<p className="text-muted-foreground mt-0.5 truncate text-[10px]">{field.description}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex shrink-0 items-center gap-1">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
className="h-6 w-6 p-0"
|
||||||
|
onClick={() => handleEditField(field)}
|
||||||
|
>
|
||||||
|
<Settings className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
className="text-destructive hover:text-destructive h-6 w-6 p-0"
|
||||||
|
onClick={() => handleRemoveField(field.id || "")}
|
||||||
|
>
|
||||||
|
<X className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-muted/50 text-muted-foreground rounded-md p-2 text-[10px]">
|
||||||
|
<p>버튼별로 개별 데이터 전달 설정이 있으면 해당 설정이 우선 적용됩니다.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter className="gap-2 sm:gap-0">
|
||||||
|
<Button variant="outline" onClick={() => onOpenChange(false)} className="h-9 text-sm">
|
||||||
|
취소
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleSave} className="h-9 text-sm">
|
||||||
|
저장
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* 필드 편집 모달 */}
|
||||||
|
<FieldEditModal
|
||||||
|
open={editModalOpen}
|
||||||
|
onOpenChange={setEditModalOpen}
|
||||||
|
field={editingField}
|
||||||
|
onSave={handleSaveField}
|
||||||
|
leftColumns={leftColumns}
|
||||||
|
rightColumns={rightColumns}
|
||||||
|
leftTableName={leftTableName}
|
||||||
|
rightTableName={rightTableName}
|
||||||
|
isNew={isNewField}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DataTransferConfigModal;
|
||||||
|
|
@ -2,7 +2,8 @@
|
||||||
|
|
||||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||||
import { ComponentRendererProps } from "@/types/component";
|
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 { defaultConfig } from "./config";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import {
|
import {
|
||||||
|
|
@ -86,6 +87,177 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
|
||||||
const [itemToDelete, setItemToDelete] = useState<any>(null);
|
const [itemToDelete, setItemToDelete] = useState<any>(null);
|
||||||
const [isBulkDelete, setIsBulkDelete] = useState(false);
|
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 () => {
|
const loadLeftData = useCallback(async () => {
|
||||||
if (!config.leftPanel?.tableName || isDesignMode) return;
|
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);
|
setLeftData(data);
|
||||||
console.log(`[SplitPanelLayout2] 좌측 데이터 로드: ${data.length}건 (company_code 필터 적용)`);
|
console.log(`[SplitPanelLayout2] 좌측 데이터 로드: ${data.length}건 (company_code 필터 적용)`);
|
||||||
}
|
}
|
||||||
|
|
@ -124,7 +370,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
|
||||||
} finally {
|
} finally {
|
||||||
setLeftLoading(false);
|
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(
|
const loadJoinTableData = useCallback(
|
||||||
|
|
@ -700,16 +946,20 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
|
||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// 검색 필터링
|
// 검색 필터링 (탭 필터링 후 적용)
|
||||||
const filteredLeftData = useMemo(() => {
|
const filteredLeftData = useMemo(() => {
|
||||||
if (!leftSearchTerm) return leftData;
|
// 1. 먼저 탭 필터링 적용
|
||||||
|
const data = filteredLeftDataByTab;
|
||||||
|
|
||||||
|
// 2. 검색어가 없으면 탭 필터링된 데이터 반환
|
||||||
|
if (!leftSearchTerm) return data;
|
||||||
|
|
||||||
// 복수 검색 컬럼 지원 (searchColumns 우선, 없으면 searchColumn 사용)
|
// 복수 검색 컬럼 지원 (searchColumns 우선, 없으면 searchColumn 사용)
|
||||||
const searchColumns = config.leftPanel?.searchColumns?.map((c) => c.columnName).filter(Boolean) || [];
|
const searchColumns = config.leftPanel?.searchColumns?.map((c) => c.columnName).filter(Boolean) || [];
|
||||||
const legacyColumn = config.leftPanel?.searchColumn;
|
const legacyColumn = config.leftPanel?.searchColumn;
|
||||||
const columnsToSearch = searchColumns.length > 0 ? searchColumns : legacyColumn ? [legacyColumn] : [];
|
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[] => {
|
const filterRecursive = (items: any[]): any[] => {
|
||||||
return items.filter((item) => {
|
return items.filter((item) => {
|
||||||
|
|
@ -731,27 +981,31 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
return filterRecursive([...leftData]);
|
return filterRecursive([...data]);
|
||||||
}, [leftData, leftSearchTerm, config.leftPanel?.searchColumns, config.leftPanel?.searchColumn]);
|
}, [filteredLeftDataByTab, leftSearchTerm, config.leftPanel?.searchColumns, config.leftPanel?.searchColumn]);
|
||||||
|
|
||||||
const filteredRightData = useMemo(() => {
|
const filteredRightData = useMemo(() => {
|
||||||
if (!rightSearchTerm) return rightData;
|
// 1. 먼저 탭 필터링 적용
|
||||||
|
const data = filteredRightDataByTab;
|
||||||
|
|
||||||
|
// 2. 검색어가 없으면 탭 필터링된 데이터 반환
|
||||||
|
if (!rightSearchTerm) return data;
|
||||||
|
|
||||||
// 복수 검색 컬럼 지원 (searchColumns 우선, 없으면 searchColumn 사용)
|
// 복수 검색 컬럼 지원 (searchColumns 우선, 없으면 searchColumn 사용)
|
||||||
const searchColumns = config.rightPanel?.searchColumns?.map((c) => c.columnName).filter(Boolean) || [];
|
const searchColumns = config.rightPanel?.searchColumns?.map((c) => c.columnName).filter(Boolean) || [];
|
||||||
const legacyColumn = config.rightPanel?.searchColumn;
|
const legacyColumn = config.rightPanel?.searchColumn;
|
||||||
const columnsToSearch = searchColumns.length > 0 ? searchColumns : legacyColumn ? [legacyColumn] : [];
|
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) => {
|
return columnsToSearch.some((col) => {
|
||||||
const value = String(item[col] || "").toLowerCase();
|
const value = String(item[col] || "").toLowerCase();
|
||||||
return value.includes(rightSearchTerm.toLowerCase());
|
return value.includes(rightSearchTerm.toLowerCase());
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}, [rightData, rightSearchTerm, config.rightPanel?.searchColumns, config.rightPanel?.searchColumn]);
|
}, [filteredRightDataByTab, rightSearchTerm, config.rightPanel?.searchColumns, config.rightPanel?.searchColumn]);
|
||||||
|
|
||||||
// 체크박스 전체 선택/해제 (filteredRightData 정의 이후에 위치해야 함)
|
// 체크박스 전체 선택/해제 (filteredRightData 정의 이후에 위치해야 함)
|
||||||
const handleSelectAll = useCallback(
|
const handleSelectAll = useCallback(
|
||||||
|
|
@ -835,7 +1089,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
|
||||||
};
|
};
|
||||||
}, [screenContext, component.id]);
|
}, [screenContext, component.id]);
|
||||||
|
|
||||||
// 컬럼 값 가져오기 (sourceTable 고려)
|
// 컬럼 값 가져오기 (sourceTable 및 엔티티 참조 고려)
|
||||||
const getColumnValue = useCallback(
|
const getColumnValue = useCallback(
|
||||||
(item: any, col: ColumnConfig): any => {
|
(item: any, col: ColumnConfig): any => {
|
||||||
// col.name이 "테이블명.컬럼명" 형식인 경우 처리
|
// col.name이 "테이블명.컬럼명" 형식인 경우 처리
|
||||||
|
|
@ -843,28 +1097,66 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
|
||||||
const tableFromName = col.name.includes(".") ? col.name.split(".")[0] : null;
|
const tableFromName = col.name.includes(".") ? col.name.split(".")[0] : null;
|
||||||
const effectiveSourceTable = col.sourceTable || tableFromName;
|
const effectiveSourceTable = col.sourceTable || tableFromName;
|
||||||
|
|
||||||
|
// 기본 값 가져오기
|
||||||
|
let baseValue: any;
|
||||||
|
|
||||||
// sourceTable이 설정되어 있고, 메인 테이블이 아닌 경우
|
// sourceTable이 설정되어 있고, 메인 테이블이 아닌 경우
|
||||||
if (effectiveSourceTable && effectiveSourceTable !== config.rightPanel?.tableName) {
|
if (effectiveSourceTable && effectiveSourceTable !== config.rightPanel?.tableName) {
|
||||||
// 1. 테이블명.컬럼명 형식으로 먼저 시도 (mergeJoinData에서 저장한 형식)
|
// 1. 테이블명.컬럼명 형식으로 먼저 시도 (mergeJoinData에서 저장한 형식)
|
||||||
const tableColumnKey = `${effectiveSourceTable}.${actualColName}`;
|
const tableColumnKey = `${effectiveSourceTable}.${actualColName}`;
|
||||||
if (item[tableColumnKey] !== undefined) {
|
if (item[tableColumnKey] !== undefined) {
|
||||||
return item[tableColumnKey];
|
baseValue = item[tableColumnKey];
|
||||||
}
|
} else {
|
||||||
// 2. 조인 테이블의 alias가 설정된 경우 alias_컬럼명으로 시도
|
// 2. 조인 테이블의 alias가 설정된 경우 alias_컬럼명으로 시도
|
||||||
const joinTable = config.rightPanel?.joinTables?.find((jt) => jt.joinTable === effectiveSourceTable);
|
const joinTable = config.rightPanel?.joinTables?.find((jt) => jt.joinTable === effectiveSourceTable);
|
||||||
if (joinTable?.alias) {
|
if (joinTable?.alias) {
|
||||||
const aliasKey = `${joinTable.alias}_${actualColName}`;
|
const aliasKey = `${joinTable.alias}_${actualColName}`;
|
||||||
if (item[aliasKey] !== undefined) {
|
if (item[aliasKey] !== undefined) {
|
||||||
return item[aliasKey];
|
baseValue = item[aliasKey];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 3. 그냥 컬럼명으로 시도 (메인 테이블에 없는 경우 조인 데이터가 직접 들어감)
|
||||||
|
if (baseValue === undefined && item[actualColName] !== undefined) {
|
||||||
|
baseValue = item[actualColName];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 3. 그냥 컬럼명으로 시도 (메인 테이블에 없는 경우 조인 데이터가 직접 들어감)
|
} else {
|
||||||
if (item[actualColName] !== undefined) {
|
// 4. 기본: 컬럼명으로 직접 접근
|
||||||
return item[actualColName];
|
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],
|
[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" />
|
<Building2 className="text-muted-foreground h-5 w-5" />
|
||||||
|
|
||||||
{/* 내용 */}
|
{/* 내용 */}
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
{/* 이름 행 (Name Row) */}
|
{/* 이름 행 (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>
|
<span className="truncate text-base font-medium">{primaryValue || "이름 없음"}</span>
|
||||||
{/* 이름 행의 추가 컬럼들 (배지 스타일) */}
|
{/* 이름 행의 추가 컬럼들 */}
|
||||||
{nameRowColumns.slice(1).map((col, idx) => {
|
{nameRowColumns.slice(1).map((col, idx) => {
|
||||||
const value = item[col.name];
|
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 (
|
return (
|
||||||
<span key={idx} className="bg-muted shrink-0 rounded px-1.5 py-0.5 text-xs">
|
<span key={idx} className="bg-muted shrink-0 rounded px-1.5 py-0.5 text-xs">
|
||||||
{formatValue(value, col.format)}
|
{formatValue(value, col.format)}
|
||||||
|
|
@ -987,16 +1303,40 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
|
||||||
</div>
|
</div>
|
||||||
{/* 정보 행 (Info Row) */}
|
{/* 정보 행 (Info Row) */}
|
||||||
{infoRowColumns.length > 0 && (
|
{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
|
{infoRowColumns
|
||||||
.map((col, idx) => {
|
.map((col, idx) => {
|
||||||
const value = item[col.name];
|
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>;
|
return <span key={idx}>{formatValue(value, col.format)}</span>;
|
||||||
})
|
})
|
||||||
.filter(Boolean)
|
.filter(Boolean)
|
||||||
.reduce((acc: React.ReactNode[], curr, idx) => {
|
.reduce((acc: React.ReactNode[], curr, idx) => {
|
||||||
if (idx > 0)
|
if (idx > 0 && !React.isValidElement(curr))
|
||||||
acc.push(
|
acc.push(
|
||||||
<span key={`sep-${idx}`} className="text-muted-foreground/50">
|
<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 renderRightCard = (item: any, index: number) => {
|
||||||
const displayColumns = config.rightPanel?.displayColumns || [];
|
const displayColumns = config.rightPanel?.displayColumns || [];
|
||||||
|
|
@ -1285,6 +1714,11 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
|
||||||
|
|
||||||
// 디자인 모드 렌더링
|
// 디자인 모드 렌더링
|
||||||
if (isDesignMode) {
|
if (isDesignMode) {
|
||||||
|
const leftButtons = config.leftPanel?.actionButtons || [];
|
||||||
|
const rightButtons = config.rightPanel?.actionButtons || [];
|
||||||
|
const leftDisplayColumns = config.leftPanel?.displayColumns || [];
|
||||||
|
const rightDisplayColumns = config.rightPanel?.displayColumns || [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
|
|
@ -1292,19 +1726,211 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
|
||||||
isSelected ? "border-primary" : "border-muted-foreground/30",
|
isSelected ? "border-primary" : "border-muted-foreground/30",
|
||||||
)}
|
)}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
|
style={{ minHeight: "300px" }}
|
||||||
>
|
>
|
||||||
{/* 좌측 패널 미리보기 */}
|
{/* 좌측 패널 미리보기 */}
|
||||||
<div className="bg-muted/30 flex flex-col border-r p-4" style={{ width: `${splitPosition}%` }}>
|
<div className="bg-muted/20 flex flex-col border-r" 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="flex items-center justify-between border-b px-3 py-2">
|
||||||
<div className="text-muted-foreground flex flex-1 items-center justify-center text-xs">좌측 목록 영역</div>
|
<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>
|
||||||
|
|
||||||
{/* 우측 패널 미리보기 */}
|
{/* 우측 패널 미리보기 */}
|
||||||
<div className="flex flex-1 flex-col p-4">
|
<div className="flex flex-1 flex-col">
|
||||||
<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="flex items-center justify-between border-b px-3 py-2">
|
||||||
<div className="text-muted-foreground flex flex-1 items-center justify-center text-xs">우측 상세 영역</div>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
@ -1325,12 +1951,36 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
|
||||||
<div className="bg-muted/30 border-b p-4">
|
<div className="bg-muted/30 border-b p-4">
|
||||||
<div className="mb-3 flex items-center justify-between">
|
<div className="mb-3 flex items-center justify-between">
|
||||||
<h3 className="text-base font-semibold">{config.leftPanel?.title || "목록"}</h3>
|
<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}>
|
<Button size="sm" variant="default" className="h-8 text-sm" onClick={handleLeftAddClick}>
|
||||||
<Plus className="mr-1 h-4 w-4" />
|
<Plus className="mr-1 h-4 w-4" />
|
||||||
{config.leftPanel?.addButtonLabel || "추가"}
|
{config.leftPanel?.addButtonLabel || "추가"}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 검색 */}
|
{/* 검색 */}
|
||||||
|
|
@ -1347,15 +1997,49 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* 좌측 패널 탭 */}
|
||||||
|
{config.leftPanel?.tabConfig?.enabled && leftTabs.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-2 border-b px-4 py-3">
|
||||||
|
{leftTabs.map((tab) => (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => setLeftActiveTab(tab.id)}
|
||||||
|
className={cn(
|
||||||
|
"inline-flex items-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-medium transition-all",
|
||||||
|
leftActiveTab === tab.id
|
||||||
|
? "border-primary bg-primary/5 text-primary"
|
||||||
|
: "border-muted bg-background text-muted-foreground hover:border-primary/50 hover:text-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span>{tab.label}</span>
|
||||||
|
{config.leftPanel?.tabConfig?.showCount && (
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"rounded-full px-2 py-0.5 text-xs",
|
||||||
|
leftActiveTab === tab.id ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{tab.count}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* 목록 */}
|
{/* 목록 */}
|
||||||
<div className="flex-1 overflow-auto">
|
<div className="flex-1 overflow-auto p-2">
|
||||||
{leftLoading ? (
|
{leftLoading ? (
|
||||||
<div className="text-muted-foreground flex h-full items-center justify-center text-base">로딩 중...</div>
|
<div className="text-muted-foreground flex h-full items-center justify-center text-base">로딩 중...</div>
|
||||||
|
) : (config.leftPanel?.displayMode || "card") === "table" ? (
|
||||||
|
// 테이블 모드
|
||||||
|
renderLeftTable()
|
||||||
) : filteredLeftData.length === 0 ? (
|
) : filteredLeftData.length === 0 ? (
|
||||||
<div className="text-muted-foreground flex h-full items-center justify-center text-base">
|
<div className="text-muted-foreground flex h-full items-center justify-center text-base">
|
||||||
데이터가 없습니다
|
데이터가 없습니다
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
|
// 카드 모드 (기본)
|
||||||
<div className="py-1">{filteredLeftData.map((item, index) => renderLeftItem(item, 0, index))}</div>
|
<div className="py-1">{filteredLeftData.map((item, index) => renderLeftItem(item, 0, index))}</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1389,15 +2073,18 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{/* 복수 액션 버튼 (actionButtons 설정 시) */}
|
{/* actionButtons 배열이 정의되어 있으면(빈 배열 포함) 해당 배열 사용, undefined면 기존 showAddButton 사용 (하위호환) */}
|
||||||
{selectedLeftItem && renderActionButtons()}
|
{selectedLeftItem && (
|
||||||
|
config.rightPanel?.actionButtons !== undefined ? (
|
||||||
{/* 기존 단일 추가 버튼 (하위 호환성) */}
|
// 새로운 actionButtons 배열 기반 렌더링 (빈 배열이면 버튼 없음)
|
||||||
{config.rightPanel?.showAddButton && selectedLeftItem && !config.rightPanel?.actionButtons?.length && (
|
config.rightPanel.actionButtons.length > 0 && renderActionButtons()
|
||||||
<Button size="sm" variant="default" className="h-8 text-sm" onClick={handleRightAddClick}>
|
) : config.rightPanel?.showAddButton ? (
|
||||||
<Plus className="mr-1 h-4 w-4" />
|
// 기존 showAddButton 기반 렌더링 (하위호환 - actionButtons가 undefined일 때만)
|
||||||
{config.rightPanel?.addButtonLabel || "추가"}
|
<Button size="sm" variant="default" className="h-8 text-sm" onClick={handleRightAddClick}>
|
||||||
</Button>
|
<Plus className="mr-1 h-4 w-4" />
|
||||||
|
{config.rightPanel?.addButtonLabel || "추가"}
|
||||||
|
</Button>
|
||||||
|
) : null
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1416,6 +2103,36 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* 우측 패널 탭 */}
|
||||||
|
{config.rightPanel?.tabConfig?.enabled && rightTabs.length > 0 && selectedLeftItem && (
|
||||||
|
<div className="flex flex-wrap gap-2 border-b px-4 py-3">
|
||||||
|
{rightTabs.map((tab) => (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => setRightActiveTab(tab.id)}
|
||||||
|
className={cn(
|
||||||
|
"inline-flex items-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-medium transition-all",
|
||||||
|
rightActiveTab === tab.id
|
||||||
|
? "border-primary bg-primary/5 text-primary"
|
||||||
|
: "border-muted bg-background text-muted-foreground hover:border-primary/50 hover:text-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span>{tab.label}</span>
|
||||||
|
{config.rightPanel?.tabConfig?.showCount && (
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"rounded-full px-2 py-0.5 text-xs",
|
||||||
|
rightActiveTab === tab.id ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{tab.count}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* 내용 */}
|
{/* 내용 */}
|
||||||
<div className="flex-1 overflow-auto p-4">
|
<div className="flex-1 overflow-auto p-4">
|
||||||
{!selectedLeftItem ? (
|
{!selectedLeftItem ? (
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,163 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState, useEffect, useCallback } from "react";
|
||||||
|
import { Check, ChevronsUpDown, Search } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
} from "@/components/ui/command";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { apiClient } from "@/lib/api/client";
|
||||||
|
|
||||||
|
export interface ColumnInfo {
|
||||||
|
column_name: string;
|
||||||
|
data_type: string;
|
||||||
|
column_comment?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SearchableColumnSelectProps {
|
||||||
|
tableName: string;
|
||||||
|
value: string;
|
||||||
|
onValueChange: (value: string) => void;
|
||||||
|
placeholder?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
excludeColumns?: string[]; // 이미 선택된 컬럼 제외
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SearchableColumnSelect: React.FC<SearchableColumnSelectProps> = ({
|
||||||
|
tableName,
|
||||||
|
value,
|
||||||
|
onValueChange,
|
||||||
|
placeholder = "컬럼 선택",
|
||||||
|
disabled = false,
|
||||||
|
excludeColumns = [],
|
||||||
|
className,
|
||||||
|
}) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [columns, setColumns] = useState<ColumnInfo[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
// 컬럼 목록 로드
|
||||||
|
const loadColumns = useCallback(async () => {
|
||||||
|
if (!tableName) {
|
||||||
|
setColumns([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get(`/table-management/tables/${tableName}/columns?size=200`);
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 ?? "",
|
||||||
|
}));
|
||||||
|
|
||||||
|
setColumns(transformedColumns);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("컬럼 목록 로드 실패:", error);
|
||||||
|
setColumns([]);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [tableName]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadColumns();
|
||||||
|
}, [loadColumns]);
|
||||||
|
|
||||||
|
// 선택된 컬럼 정보 가져오기
|
||||||
|
const selectedColumn = columns.find((col) => col.column_name === value);
|
||||||
|
const displayValue = selectedColumn
|
||||||
|
? selectedColumn.column_comment || selectedColumn.column_name
|
||||||
|
: value || "";
|
||||||
|
|
||||||
|
// 필터링된 컬럼 목록 (이미 선택된 컬럼 제외)
|
||||||
|
const filteredColumns = columns.filter(
|
||||||
|
(col) => !excludeColumns.includes(col.column_name) || col.column_name === value
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
role="combobox"
|
||||||
|
aria-expanded={open}
|
||||||
|
disabled={disabled || loading || !tableName}
|
||||||
|
className={cn("w-full justify-between h-9 text-sm", className)}
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
"로딩 중..."
|
||||||
|
) : !tableName ? (
|
||||||
|
"테이블을 먼저 선택하세요"
|
||||||
|
) : (
|
||||||
|
<span className="truncate">
|
||||||
|
{displayValue || placeholder}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-full p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder="컬럼명 또는 라벨 검색..." className="h-9" />
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>
|
||||||
|
{filteredColumns.length === 0 ? "선택 가능한 컬럼이 없습니다" : "검색 결과가 없습니다"}
|
||||||
|
</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{filteredColumns.map((col) => (
|
||||||
|
<CommandItem
|
||||||
|
key={col.column_name}
|
||||||
|
value={`${col.column_name} ${col.column_comment || ""}`}
|
||||||
|
onSelect={() => {
|
||||||
|
onValueChange(col.column_name);
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
"mr-2 h-4 w-4 shrink-0",
|
||||||
|
value === col.column_name ? "opacity-100" : "opacity-0"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col min-w-0">
|
||||||
|
<span className="truncate font-medium">
|
||||||
|
{col.column_comment || col.column_name}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-muted-foreground truncate">
|
||||||
|
{col.column_name} ({col.data_type})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SearchableColumnSelect;
|
||||||
|
|
||||||
|
|
@ -0,0 +1,118 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { useSortable } from "@dnd-kit/sortable";
|
||||||
|
import { CSS } from "@dnd-kit/utilities";
|
||||||
|
import { GripVertical, Settings, X } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import type { ColumnConfig } from "../types";
|
||||||
|
|
||||||
|
interface SortableColumnItemProps {
|
||||||
|
id: string;
|
||||||
|
column: ColumnConfig;
|
||||||
|
index: number;
|
||||||
|
onSettingsClick: () => void;
|
||||||
|
onRemove: () => void;
|
||||||
|
showGroupingSettings?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SortableColumnItem: React.FC<SortableColumnItemProps> = ({
|
||||||
|
id,
|
||||||
|
column,
|
||||||
|
index,
|
||||||
|
onSettingsClick,
|
||||||
|
onRemove,
|
||||||
|
showGroupingSettings = false,
|
||||||
|
}) => {
|
||||||
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
|
||||||
|
|
||||||
|
const style = {
|
||||||
|
transform: CSS.Transform.toString(transform),
|
||||||
|
transition,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={setNodeRef}
|
||||||
|
style={style}
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-2 rounded-md border bg-card p-2",
|
||||||
|
isDragging && "opacity-50 shadow-lg"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{/* 드래그 핸들 */}
|
||||||
|
<div
|
||||||
|
{...attributes}
|
||||||
|
{...listeners}
|
||||||
|
className="cursor-grab touch-none text-muted-foreground hover:text-foreground"
|
||||||
|
>
|
||||||
|
<GripVertical className="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 컬럼 정보 */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm font-medium truncate">
|
||||||
|
{column.label || column.name || `컬럼 ${index + 1}`}
|
||||||
|
</span>
|
||||||
|
{column.name && column.label && (
|
||||||
|
<span className="text-xs text-muted-foreground truncate">
|
||||||
|
({column.name})
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 설정 요약 뱃지 */}
|
||||||
|
<div className="flex flex-wrap gap-1 mt-1">
|
||||||
|
{column.displayRow && (
|
||||||
|
<Badge variant="outline" className="text-[10px] h-4">
|
||||||
|
{column.displayRow === "name" ? "이름행" : "정보행"}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{showGroupingSettings && column.displayConfig?.displayType === "badge" && (
|
||||||
|
<Badge variant="secondary" className="text-[10px] h-4">
|
||||||
|
배지
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{showGroupingSettings && column.displayConfig?.aggregate?.enabled && (
|
||||||
|
<Badge variant="secondary" className="text-[10px] h-4">
|
||||||
|
{column.displayConfig.aggregate.function === "DISTINCT" ? "중복제거" : "개수"}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{column.sourceTable && (
|
||||||
|
<Badge variant="outline" className="text-[10px] h-4">
|
||||||
|
{column.sourceTable}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 액션 버튼들 */}
|
||||||
|
<div className="flex items-center gap-1 shrink-0">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
className="h-7 w-7 p-0"
|
||||||
|
onClick={onSettingsClick}
|
||||||
|
title="세부설정"
|
||||||
|
>
|
||||||
|
<Settings className="h-3.5 w-3.5" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
className="h-7 w-7 p-0 text-destructive hover:text-destructive"
|
||||||
|
onClick={onRemove}
|
||||||
|
title="삭제"
|
||||||
|
>
|
||||||
|
<X className="h-3.5 w-3.5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SortableColumnItem;
|
||||||
|
|
||||||
|
|
@ -37,5 +37,13 @@ export type {
|
||||||
JoinConfig,
|
JoinConfig,
|
||||||
DataTransferField,
|
DataTransferField,
|
||||||
ColumnConfig,
|
ColumnConfig,
|
||||||
|
ActionButtonConfig,
|
||||||
|
ValueSourceConfig,
|
||||||
|
EntityReferenceConfig,
|
||||||
|
ModalParamMapping,
|
||||||
} from "./types";
|
} from "./types";
|
||||||
|
|
||||||
|
// 모달 컴포넌트 내보내기 (별도 사용 필요시)
|
||||||
|
export { ColumnConfigModal } from "./ColumnConfigModal";
|
||||||
|
export { ActionButtonConfigModal } from "./ActionButtonConfigModal";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,65 @@
|
||||||
* 마스터-디테일 패턴의 좌우 분할 레이아웃 (개선 버전)
|
* 마스터-디테일 패턴의 좌우 분할 레이아웃 (개선 버전)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// 값 소스 및 연동 설정
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 값 소스 설정 (화면 내 필드/폼에서 값 가져오기)
|
||||||
|
*/
|
||||||
|
export interface ValueSourceConfig {
|
||||||
|
type: "none" | "field" | "dataForm" | "component"; // 소스 유형
|
||||||
|
fieldId?: string; // 필드 컴포넌트 ID
|
||||||
|
formId?: string; // 데이터폼 ID
|
||||||
|
formFieldName?: string; // 데이터폼 내 필드명
|
||||||
|
componentId?: string; // 다른 컴포넌트 ID
|
||||||
|
componentColumn?: string; // 컴포넌트에서 참조할 컬럼
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 엔티티 참조 설정 (엔티티에서 표시할 값 선택)
|
||||||
|
*/
|
||||||
|
export interface EntityReferenceConfig {
|
||||||
|
entityId?: string; // 연결된 엔티티 ID
|
||||||
|
displayColumns?: string[]; // 표시할 엔티티 컬럼들 (체크박스 선택)
|
||||||
|
primaryDisplayColumn?: string; // 주 표시 컬럼
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// 컬럼 표시 설정
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 컬럼별 표시 설정 (그룹핑 시 사용)
|
||||||
|
*/
|
||||||
|
export interface ColumnDisplayConfig {
|
||||||
|
displayType: "text" | "badge"; // 표시 방식 (텍스트 또는 배지)
|
||||||
|
aggregate?: {
|
||||||
|
enabled: boolean; // 집계 사용 여부
|
||||||
|
function: "DISTINCT" | "COUNT"; // 집계 방식 (중복제거 또는 개수)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 그룹핑 설정 (왼쪽 패널용)
|
||||||
|
*/
|
||||||
|
export interface GroupingConfig {
|
||||||
|
enabled: boolean; // 그룹핑 사용 여부
|
||||||
|
groupByColumn: string; // 그룹 기준 컬럼 (예: item_id)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 탭 설정
|
||||||
|
*/
|
||||||
|
export interface TabConfig {
|
||||||
|
enabled: boolean; // 탭 사용 여부
|
||||||
|
mode?: "auto" | "manual"; // 하위 호환성용 (실제로는 manual만 사용)
|
||||||
|
tabSourceColumn?: string; // 탭 생성 기준 컬럼
|
||||||
|
showCount?: boolean; // 탭에 항목 개수 표시 여부
|
||||||
|
defaultTab?: string; // 기본 선택 탭 (값 또는 ID)
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 컬럼 설정
|
* 컬럼 설정
|
||||||
*/
|
*/
|
||||||
|
|
@ -13,6 +72,9 @@ export interface ColumnConfig {
|
||||||
displayRow?: "name" | "info"; // 표시 위치 (name: 이름 행, info: 정보 행)
|
displayRow?: "name" | "info"; // 표시 위치 (name: 이름 행, info: 정보 행)
|
||||||
width?: number; // 너비 (px)
|
width?: number; // 너비 (px)
|
||||||
bold?: boolean; // 굵게 표시
|
bold?: boolean; // 굵게 표시
|
||||||
|
displayConfig?: ColumnDisplayConfig; // 컬럼별 표시 설정 (그룹핑 시)
|
||||||
|
entityReference?: EntityReferenceConfig; // 엔티티 참조 설정
|
||||||
|
valueSource?: ValueSourceConfig; // 값 소스 설정 (화면 내 연동)
|
||||||
format?: {
|
format?: {
|
||||||
type?: "text" | "number" | "currency" | "date";
|
type?: "text" | "number" | "currency" | "date";
|
||||||
thousandSeparator?: boolean;
|
thousandSeparator?: boolean;
|
||||||
|
|
@ -23,27 +85,58 @@ export interface ColumnConfig {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 모달 파라미터 매핑 설정
|
||||||
|
*/
|
||||||
|
export interface ModalParamMapping {
|
||||||
|
sourceColumn: string; // 선택된 항목에서 가져올 컬럼
|
||||||
|
targetParam: string; // 모달에 전달할 파라미터명
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 액션 버튼 설정
|
* 액션 버튼 설정
|
||||||
*/
|
*/
|
||||||
export interface ActionButtonConfig {
|
export interface ActionButtonConfig {
|
||||||
id: string; // 고유 ID
|
id: string; // 고유 ID
|
||||||
label: string; // 버튼 라벨
|
label: string; // 버튼 라벨
|
||||||
variant?: "default" | "outline" | "destructive" | "ghost"; // 버튼 스타일
|
variant?: "default" | "secondary" | "outline" | "destructive" | "ghost"; // 버튼 스타일
|
||||||
icon?: string; // lucide 아이콘명 (예: "Plus", "Edit", "Trash2")
|
icon?: string; // lucide 아이콘명 (예: "Plus", "Edit", "Trash2")
|
||||||
|
showCondition?: "always" | "selected" | "notSelected"; // 표시 조건
|
||||||
|
action?: "add" | "edit" | "delete" | "bulk-delete" | "api" | "custom"; // 버튼 동작 유형
|
||||||
|
|
||||||
|
// 모달 관련
|
||||||
modalScreenId?: number; // 연결할 모달 화면 ID
|
modalScreenId?: number; // 연결할 모달 화면 ID
|
||||||
action?: "add" | "edit" | "delete" | "bulk-delete" | "custom"; // 버튼 동작 유형
|
modalParams?: ModalParamMapping[]; // 모달에 전달할 파라미터 매핑
|
||||||
|
|
||||||
|
// API 호출 관련
|
||||||
|
apiEndpoint?: string; // API 엔드포인트
|
||||||
|
apiMethod?: "GET" | "POST" | "PUT" | "DELETE"; // HTTP 메서드
|
||||||
|
confirmMessage?: string; // 확인 메시지 (삭제 등)
|
||||||
|
|
||||||
|
// 커스텀 액션
|
||||||
|
customActionId?: string; // 커스텀 액션 식별자
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 데이터 전달 필드 설정
|
* 데이터 전달 필드 설정
|
||||||
*/
|
*/
|
||||||
export interface DataTransferField {
|
export interface DataTransferField {
|
||||||
sourceColumn: string; // 좌측 패널의 컬럼명
|
sourceColumn: string; // 소스 패널의 컬럼명
|
||||||
targetColumn: string; // 모달로 전달할 컬럼명
|
targetColumn: string; // 모달로 전달할 컬럼명
|
||||||
label?: string; // 표시용 라벨
|
label?: string; // 표시용 라벨
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 버튼별 데이터 전달 설정
|
||||||
|
* 특정 패널의 특정 버튼에 어떤 데이터를 전달할지 설정
|
||||||
|
*/
|
||||||
|
export interface ButtonDataTransferConfig {
|
||||||
|
id: string; // 고유 ID
|
||||||
|
targetPanel: "left" | "right"; // 대상 패널
|
||||||
|
targetButtonId: string; // 대상 버튼 ID
|
||||||
|
fields: DataTransferField[]; // 전달할 필드 목록
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 검색 컬럼 설정
|
* 검색 컬럼 설정
|
||||||
*/
|
*/
|
||||||
|
|
@ -62,15 +155,24 @@ export interface LeftPanelConfig {
|
||||||
searchColumn?: string; // 검색 대상 컬럼 (단일, 하위 호환성)
|
searchColumn?: string; // 검색 대상 컬럼 (단일, 하위 호환성)
|
||||||
searchColumns?: SearchColumnConfig[]; // 검색 대상 컬럼들 (복수)
|
searchColumns?: SearchColumnConfig[]; // 검색 대상 컬럼들 (복수)
|
||||||
showSearch?: boolean; // 검색 표시 여부
|
showSearch?: boolean; // 검색 표시 여부
|
||||||
showAddButton?: boolean; // 추가 버튼 표시
|
showAddButton?: boolean; // 추가 버튼 표시 (하위 호환성)
|
||||||
addButtonLabel?: string; // 추가 버튼 라벨
|
addButtonLabel?: string; // 추가 버튼 라벨 (하위 호환성)
|
||||||
addModalScreenId?: number; // 추가 모달 화면 ID
|
addModalScreenId?: number; // 추가 모달 화면 ID (하위 호환성)
|
||||||
|
actionButtons?: ActionButtonConfig[]; // 복수 액션 버튼 배열
|
||||||
|
displayMode?: "card" | "table"; // 표시 모드 (card: 카드형, table: 테이블형)
|
||||||
|
primaryKeyColumn?: string; // 기본키 컬럼명 (선택용, 기본: id)
|
||||||
// 계층 구조 설정
|
// 계층 구조 설정
|
||||||
hierarchyConfig?: {
|
hierarchyConfig?: {
|
||||||
enabled: boolean;
|
enabled: boolean;
|
||||||
parentColumn: string; // 부모 참조 컬럼 (예: parent_dept_code)
|
parentColumn: string; // 부모 참조 컬럼 (예: parent_dept_code)
|
||||||
idColumn: string; // ID 컬럼 (예: dept_code)
|
idColumn: string; // ID 컬럼 (예: dept_code)
|
||||||
};
|
};
|
||||||
|
// 그룹핑 설정
|
||||||
|
grouping?: GroupingConfig;
|
||||||
|
// 탭 설정
|
||||||
|
tabConfig?: TabConfig;
|
||||||
|
// 추가 조인 테이블 설정 (다른 테이블 참조하여 컬럼 추가 표시)
|
||||||
|
joinTables?: JoinTableConfig[];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -106,6 +208,8 @@ export interface RightPanelConfig {
|
||||||
* - 결과: 부서별 사원 목록에 이메일, 전화번호 등 개인정보 함께 표시
|
* - 결과: 부서별 사원 목록에 이메일, 전화번호 등 개인정보 함께 표시
|
||||||
*/
|
*/
|
||||||
joinTables?: JoinTableConfig[];
|
joinTables?: JoinTableConfig[];
|
||||||
|
// 탭 설정
|
||||||
|
tabConfig?: TabConfig;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -157,9 +261,12 @@ export interface SplitPanelLayout2Config {
|
||||||
// 조인 설정
|
// 조인 설정
|
||||||
joinConfig: JoinConfig;
|
joinConfig: JoinConfig;
|
||||||
|
|
||||||
// 데이터 전달 설정 (모달로 전달할 필드)
|
// 데이터 전달 설정 (하위 호환성 - 기본 설정)
|
||||||
dataTransferFields?: DataTransferField[];
|
dataTransferFields?: DataTransferField[];
|
||||||
|
|
||||||
|
// 버튼별 데이터 전달 설정 (신규)
|
||||||
|
buttonDataTransfers?: ButtonDataTransferConfig[];
|
||||||
|
|
||||||
// 레이아웃 설정
|
// 레이아웃 설정
|
||||||
splitRatio?: number; // 좌우 비율 (0-100, 기본 30)
|
splitRatio?: number; // 좌우 비율 (0-100, 기본 30)
|
||||||
resizable?: boolean; // 크기 조절 가능 여부
|
resizable?: boolean; // 크기 조절 가능 여부
|
||||||
|
|
|
||||||
|
|
@ -865,6 +865,8 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
|
||||||
numberingRules={numberingRules}
|
numberingRules={numberingRules}
|
||||||
onLoadTableColumns={loadTableColumns}
|
onLoadTableColumns={loadTableColumns}
|
||||||
availableParentFields={availableParentFields}
|
availableParentFields={availableParentFields}
|
||||||
|
targetTableName={config.saveConfig?.tableName}
|
||||||
|
targetTableColumns={config.saveConfig?.tableName ? tableColumns[config.saveConfig.tableName] || [] : []}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,16 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Di
|
||||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
import { Separator } from "@/components/ui/separator";
|
import { Separator } from "@/components/ui/separator";
|
||||||
import { Plus, Trash2, Settings as SettingsIcon } from "lucide-react";
|
import { Plus, Trash2, Settings as SettingsIcon, Check, ChevronsUpDown } from "lucide-react";
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
} from "@/components/ui/command";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import {
|
import {
|
||||||
FormFieldConfig,
|
FormFieldConfig,
|
||||||
|
|
@ -58,6 +67,9 @@ interface FieldDetailSettingsModalProps {
|
||||||
onLoadTableColumns: (tableName: string) => void;
|
onLoadTableColumns: (tableName: string) => void;
|
||||||
// 부모 화면에서 전달 가능한 필드 목록 (선택사항)
|
// 부모 화면에서 전달 가능한 필드 목록 (선택사항)
|
||||||
availableParentFields?: AvailableParentField[];
|
availableParentFields?: AvailableParentField[];
|
||||||
|
// 저장 테이블 정보 (타겟 컬럼 선택용)
|
||||||
|
targetTableName?: string;
|
||||||
|
targetTableColumns?: { name: string; type: string; label: string }[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export function FieldDetailSettingsModal({
|
export function FieldDetailSettingsModal({
|
||||||
|
|
@ -70,13 +82,22 @@ export function FieldDetailSettingsModal({
|
||||||
numberingRules,
|
numberingRules,
|
||||||
onLoadTableColumns,
|
onLoadTableColumns,
|
||||||
availableParentFields = [],
|
availableParentFields = [],
|
||||||
|
// targetTableName은 타겟 컬럼 선택 시 참고용으로 전달됨 (현재 targetTableColumns만 사용)
|
||||||
|
targetTableName: _targetTableName,
|
||||||
|
targetTableColumns = [],
|
||||||
}: FieldDetailSettingsModalProps) {
|
}: FieldDetailSettingsModalProps) {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
void _targetTableName; // 향후 사용 가능성을 위해 유지
|
||||||
// 로컬 상태로 필드 설정 관리
|
// 로컬 상태로 필드 설정 관리
|
||||||
const [localField, setLocalField] = useState<FormFieldConfig>(field);
|
const [localField, setLocalField] = useState<FormFieldConfig>(field);
|
||||||
|
|
||||||
// 전체 카테고리 컬럼 목록 상태
|
// 전체 카테고리 컬럼 목록 상태
|
||||||
const [categoryColumns, setCategoryColumns] = useState<CategoryColumnOption[]>([]);
|
const [categoryColumns, setCategoryColumns] = useState<CategoryColumnOption[]>([]);
|
||||||
const [loadingCategoryColumns, setLoadingCategoryColumns] = useState(false);
|
const [loadingCategoryColumns, setLoadingCategoryColumns] = useState(false);
|
||||||
|
|
||||||
|
// Combobox 열림 상태
|
||||||
|
const [sourceTableOpen, setSourceTableOpen] = useState(false);
|
||||||
|
const [targetColumnOpenMap, setTargetColumnOpenMap] = useState<Record<number, boolean>>({});
|
||||||
|
|
||||||
// open이 변경될 때마다 필드 데이터 동기화
|
// open이 변경될 때마다 필드 데이터 동기화
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -649,29 +670,68 @@ export function FieldDetailSettingsModal({
|
||||||
<div className="space-y-3 pt-2 border-t">
|
<div className="space-y-3 pt-2 border-t">
|
||||||
<div>
|
<div>
|
||||||
<Label className="text-[10px]">소스 테이블</Label>
|
<Label className="text-[10px]">소스 테이블</Label>
|
||||||
<Select
|
<Popover open={sourceTableOpen} onOpenChange={setSourceTableOpen}>
|
||||||
value={localField.linkedFieldGroup?.sourceTable || ""}
|
<PopoverTrigger asChild>
|
||||||
onValueChange={(value) => {
|
<Button
|
||||||
updateField({
|
variant="outline"
|
||||||
linkedFieldGroup: {
|
role="combobox"
|
||||||
...localField.linkedFieldGroup,
|
aria-expanded={sourceTableOpen}
|
||||||
sourceTable: value,
|
className="h-7 w-full justify-between text-xs mt-1 font-normal"
|
||||||
},
|
>
|
||||||
});
|
{localField.linkedFieldGroup?.sourceTable
|
||||||
onLoadTableColumns(value);
|
? (() => {
|
||||||
}}
|
const selectedTable = tables.find(
|
||||||
>
|
(t) => t.name === localField.linkedFieldGroup?.sourceTable
|
||||||
<SelectTrigger className="h-7 text-xs mt-1">
|
);
|
||||||
<SelectValue placeholder="테이블 선택" />
|
return selectedTable
|
||||||
</SelectTrigger>
|
? `${selectedTable.label || selectedTable.name} (${selectedTable.name})`
|
||||||
<SelectContent>
|
: localField.linkedFieldGroup?.sourceTable;
|
||||||
{tables.map((t) => (
|
})()
|
||||||
<SelectItem key={t.name} value={t.name}>
|
: "테이블 선택..."}
|
||||||
{t.label || t.name}
|
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||||||
</SelectItem>
|
</Button>
|
||||||
))}
|
</PopoverTrigger>
|
||||||
</SelectContent>
|
<PopoverContent className="w-[300px] p-0" align="start">
|
||||||
</Select>
|
<Command>
|
||||||
|
<CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty className="py-2 text-xs text-center">
|
||||||
|
테이블을 찾을 수 없습니다.
|
||||||
|
</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{tables.map((t) => (
|
||||||
|
<CommandItem
|
||||||
|
key={t.name}
|
||||||
|
value={`${t.name} ${t.label || ""}`}
|
||||||
|
onSelect={() => {
|
||||||
|
updateField({
|
||||||
|
linkedFieldGroup: {
|
||||||
|
...localField.linkedFieldGroup,
|
||||||
|
sourceTable: t.name,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
onLoadTableColumns(t.name);
|
||||||
|
setSourceTableOpen(false);
|
||||||
|
}}
|
||||||
|
className="text-xs"
|
||||||
|
>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
"mr-2 h-3 w-3",
|
||||||
|
localField.linkedFieldGroup?.sourceTable === t.name
|
||||||
|
? "opacity-100"
|
||||||
|
: "opacity-0"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<span className="font-medium">{t.label || t.name}</span>
|
||||||
|
<span className="ml-1 text-muted-foreground">({t.name})</span>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
<HelpText>값을 가져올 소스 테이블 (예: customer_mng)</HelpText>
|
<HelpText>값을 가져올 소스 테이블 (예: customer_mng)</HelpText>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -820,14 +880,78 @@ export function FieldDetailSettingsModal({
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<Label className="text-[9px]">타겟 컬럼 (저장할 위치)</Label>
|
<Label className="text-[9px]">타겟 컬럼 (저장할 위치)</Label>
|
||||||
<Input
|
{targetTableColumns.length > 0 ? (
|
||||||
value={mapping.targetColumn || ""}
|
<Popover
|
||||||
onChange={(e) =>
|
open={targetColumnOpenMap[index] || false}
|
||||||
updateLinkedFieldMapping(index, { targetColumn: e.target.value })
|
onOpenChange={(open) =>
|
||||||
}
|
setTargetColumnOpenMap((prev) => ({ ...prev, [index]: open }))
|
||||||
placeholder="partner_id"
|
}
|
||||||
className="h-6 text-[9px] mt-0.5"
|
>
|
||||||
/>
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
role="combobox"
|
||||||
|
aria-expanded={targetColumnOpenMap[index] || false}
|
||||||
|
className="h-6 w-full justify-between text-[9px] mt-0.5 font-normal"
|
||||||
|
>
|
||||||
|
{mapping.targetColumn
|
||||||
|
? (() => {
|
||||||
|
const selectedCol = targetTableColumns.find(
|
||||||
|
(c) => c.name === mapping.targetColumn
|
||||||
|
);
|
||||||
|
return selectedCol
|
||||||
|
? `${selectedCol.name} (${selectedCol.label})`
|
||||||
|
: mapping.targetColumn;
|
||||||
|
})()
|
||||||
|
: "컬럼 선택..."}
|
||||||
|
<ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-[250px] p-0" align="start">
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder="컬럼 검색..." className="h-7 text-[9px]" />
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty className="py-2 text-[9px] text-center">
|
||||||
|
컬럼을 찾을 수 없습니다.
|
||||||
|
</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{targetTableColumns.map((col) => (
|
||||||
|
<CommandItem
|
||||||
|
key={col.name}
|
||||||
|
value={`${col.name} ${col.label}`}
|
||||||
|
onSelect={() => {
|
||||||
|
updateLinkedFieldMapping(index, { targetColumn: col.name });
|
||||||
|
setTargetColumnOpenMap((prev) => ({ ...prev, [index]: false }));
|
||||||
|
}}
|
||||||
|
className="text-[9px]"
|
||||||
|
>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
"mr-2 h-3 w-3",
|
||||||
|
mapping.targetColumn === col.name
|
||||||
|
? "opacity-100"
|
||||||
|
: "opacity-0"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<span className="font-medium">{col.name}</span>
|
||||||
|
<span className="ml-1 text-muted-foreground">({col.label})</span>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
) : (
|
||||||
|
<Input
|
||||||
|
value={mapping.targetColumn || ""}
|
||||||
|
onChange={(e) =>
|
||||||
|
updateLinkedFieldMapping(index, { targetColumn: e.target.value })
|
||||||
|
}
|
||||||
|
placeholder="partner_id"
|
||||||
|
className="h-6 text-[9px] mt-0.5"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
@ -966,3 +1090,4 @@ export function FieldDetailSettingsModal({
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue