chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

슬롯 컴포넌트 상세 설정 패널 추가: RepeatContainerConfigPanel에 슬롯 컴포넌트의 필드 바인딩, 라벨 설정, 크기 및 스타일 변경 기능을 포함한 상세 설정 패널을 구현하였습니다. 또한, 동적 컴포넌트 설정 패널을 통해 각 컴포넌트의 전용 설정을 관리할 수 있도록 개선하였습니다.

Browse Source
This commit is contained in:
kjs
2026-01-19 09:37:02 +09:00
parent b4bfb9964f
commit 6ea3aef396
2 changed files with 488 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

425
frontend/lib/registry/components/repeat-container/RepeatContainerConfigPanel.tsx
View File

@@ -14,11 +14,12 @@ import {
} from "@/components/ui/select";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Database, Table2, ChevronsUpDown, Check, LayoutGrid, LayoutList, Rows3, Plus, X, GripVertical, Trash2, Type } from "lucide-react";
import { Database, Table2, ChevronsUpDown, Check, LayoutGrid, LayoutList, Rows3, Plus, X, GripVertical, Trash2, Type, Settings2, ChevronDown, ChevronUp } from "lucide-react";
import { cn } from "@/lib/utils";
import { RepeatContainerConfig, SlotComponentConfig } from "./types";
import { tableTypeApi } from "@/lib/api/screen";
import { tableManagementApi } from "@/lib/api/tableManagement";
import { DynamicComponentConfigPanel, hasComponentConfigPanel } from "@/lib/utils/getComponentConfigPanel";
interface RepeatContainerConfigPanelProps {
config: RepeatContainerConfig;
@@ -263,6 +264,7 @@ export function RepeatContainerConfigPanel({
onChange={onChange}
availableColumns={availableColumns}
loadingColumns={loadingColumns}
screenTableName={screenTableName}
/>
{/* 레이아웃 설정 */}
@@ -597,11 +599,89 @@ export function RepeatContainerConfigPanel({
// ============================================================
// 슬롯 자식 컴포넌트 관리 섹션
// ============================================================
// 슬롯 컴포넌트의 전체 설정 패널을 표시하는 컴포넌트
interface SlotComponentDetailPanelProps {
child: SlotComponentConfig;
screenTableName?: string;
availableColumns: Array<{ columnName: string; displayName?: string }>;
onConfigChange: (newConfig: Record<string, any>) => void;
onFieldNameChange: (fieldName: string) => void;
onLabelChange: (label: string) => void;
}
function SlotComponentDetailPanel({
child,
screenTableName,
availableColumns,
onConfigChange,
onFieldNameChange,
onLabelChange,
}: SlotComponentDetailPanelProps) {
return (
<div className="space-y-3">
{/* 데이터 필드 바인딩 - 모든 컴포넌트에서 사용 가능 */}
<div className="space-y-1 p-2 bg-blue-50 rounded-md border border-blue-200">
<Label className="text-[10px] text-blue-700 font-medium flex items-center gap-1">
<Database className="h-3 w-3" />
데이터 필드 바인딩
</Label>
<Select
value={child.fieldName || ""}
onValueChange={onFieldNameChange}
>
<SelectTrigger className="h-7 text-xs bg-white">
<SelectValue placeholder="표시할 필드 선택..." />
</SelectTrigger>
<SelectContent>
<SelectItem value="">선택 안함</SelectItem>
{availableColumns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName || col.columnName}
</SelectItem>
))}
</SelectContent>
</Select>
{child.fieldName && (
<p className="text-[9px] text-blue-600">
각 아이템의 "{child.fieldName}" 값이 이 컴포넌트에 표시됩니다
</p>
)}
</div>
{/* 라벨 설정 */}
<div className="space-y-1">
<Label className="text-[10px] text-slate-500">표시 라벨</Label>
<Input
value={child.label || ""}
onChange={(e) => onLabelChange(e.target.value)}
placeholder="표시할 라벨"
className="h-7 text-xs"
/>
</div>
{/* 컴포넌트 전용 설정 */}
<div className="border-t pt-2">
<div className="text-[10px] font-medium text-slate-600 mb-2">
{child.componentType} 상세 설정
</div>
<DynamicComponentConfigPanel
componentId={child.componentType}
config={child.componentConfig || {}}
onChange={onConfigChange}
screenTableName={screenTableName}
/>
</div>
</div>
);
}
interface SlotChildrenSectionProps {
config: RepeatContainerConfig;
onChange: (config: Partial<RepeatContainerConfig>) => void;
availableColumns: Array<{ columnName: string; displayName?: string }>;
loadingColumns: boolean;
screenTableName?: string;
}
function SlotChildrenSection({
@@ -609,12 +689,28 @@ function SlotChildrenSection({
onChange,
availableColumns,
loadingColumns,
screenTableName,
}: SlotChildrenSectionProps) {
const [selectedColumn, setSelectedColumn] = useState<string>("");
const [columnComboboxOpen, setColumnComboboxOpen] = useState(false);
// 각 컴포넌트별 상세 설정 열림 상태
const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
const children = config.children || [];
// 상세 설정 열기/닫기 토글
const toggleExpanded = (id: string) => {
setExpandedIds((prev) => {
const newSet = new Set(prev);
if (newSet.has(id)) {
newSet.delete(id);
} else {
newSet.add(id);
}
return newSet;
});
};
// 컴포넌트 추가
const addComponent = (columnName: string, displayName: string) => {
const newChild: SlotComponentConfig = {
@@ -625,6 +721,7 @@ function SlotChildrenSection({
position: { x: 0, y: children.length * 40 },
size: { width: 200, height: 32 },
componentConfig: {},
style: {},
};
onChange({
@@ -639,6 +736,11 @@ function SlotChildrenSection({
onChange({
children: children.filter((c) => c.id !== id),
});
setExpandedIds((prev) => {
const newSet = new Set(prev);
newSet.delete(id);
return newSet;
});
};
// 컴포넌트 라벨 변경
@@ -655,6 +757,46 @@ function SlotChildrenSection({
});
};
// 컴포넌트 필드 바인딩 변경
const updateComponentFieldName = (id: string, fieldName: string) => {
onChange({
children: children.map((c) => (c.id === id ? { ...c, fieldName } : c)),
});
};
// 컴포넌트 설정 변경 (componentConfig)
const updateComponentConfig = (id: string, key: string, value: any) => {
onChange({
children: children.map((c) =>
c.id === id
? { ...c, componentConfig: { ...c.componentConfig, [key]: value } }
: c
),
});
};
// 컴포넌트 스타일 변경
const updateComponentStyle = (id: string, key: string, value: any) => {
onChange({
children: children.map((c) =>
c.id === id
? { ...c, style: { ...c.style, [key]: value } }
: c
),
});
};
// 컴포넌트 크기 변경
const updateComponentSize = (id: string, width: number | undefined, height: number | undefined) => {
onChange({
children: children.map((c) =>
c.id === id
? { ...c, size: { width: width ?? c.size?.width ?? 200, height: height ?? c.size?.height ?? 32 } }
: c
),
});
};
return (
<div className="space-y-3">
<div>
@@ -668,16 +810,18 @@ function SlotChildrenSection({
{/* 추가된 필드 목록 */}
{children.length > 0 ? (
<div className="space-y-2">
{children.map((child, index) => (
<div
key={child.id}
className="flex items-center gap-2 rounded-md border border-green-200 bg-green-50 p-2"
>
<div className="flex h-5 w-5 items-center justify-center rounded bg-green-200 text-xs font-medium text-green-700">
{index + 1}
</div>
<div className="flex-1 space-y-1">
<div className="flex items-center gap-2">
{children.map((child, index) => {
const isExpanded = expandedIds.has(child.id);
return (
<div
key={child.id}
className="rounded-md border border-green-200 bg-green-50 overflow-hidden"
>
{/* 기본 정보 헤더 */}
<div className="flex items-center gap-2 p-2">
<div className="flex h-5 w-5 items-center justify-center rounded bg-green-200 text-xs font-medium text-green-700">
{index + 1}
</div>
<div className="flex-1">
<div className="text-xs font-medium text-green-700">
{child.label || child.fieldName}
@@ -700,18 +844,257 @@ function SlotChildrenSection({
<SelectItem value="date-display">날짜</SelectItem>
</SelectContent>
</Select>
<Button
variant="ghost"
size="sm"
className="h-5 w-5 p-0 text-blue-500 hover:text-blue-700"
onClick={() => toggleExpanded(child.id)}
title="상세 설정"
>
{isExpanded ? (
<ChevronUp className="h-3 w-3" />
) : (
<Settings2 className="h-3 w-3" />
)}
</Button>
<Button
variant="ghost"
size="sm"
className="h-5 w-5 p-0 text-red-400 hover:text-red-600"
onClick={() => removeComponent(child.id)}
>
<X className="h-3 w-3" />
</Button>
</div>
{/* 상세 설정 패널 (펼침) */}
{isExpanded && (
<div className="border-t border-green-200 bg-white p-3 space-y-3">
{/* 전용 ConfigPanel이 있는 복잡한 컴포넌트인 경우 */}
{hasComponentConfigPanel(child.componentType) ? (
<SlotComponentDetailPanel
child={child}
screenTableName={screenTableName}
availableColumns={availableColumns}
onConfigChange={(newConfig) => {
onChange({
children: children.map((c) =>
c.id === child.id
? { ...c, componentConfig: { ...c.componentConfig, ...newConfig } }
: c
),
});
}}
onFieldNameChange={(fieldName) => updateComponentFieldName(child.id, fieldName)}
onLabelChange={(label) => updateComponentLabel(child.id, label)}
/>
) : (
<>
{/* 데이터 필드 바인딩 - 가장 중요! */}
<div className="space-y-1">
<Label className="text-[10px] text-slate-500 font-medium flex items-center gap-1">
<Database className="h-3 w-3 text-blue-500" />
데이터 필드
</Label>
<Select
value={child.fieldName || ""}
onValueChange={(value) => updateComponentFieldName(child.id, value)}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue placeholder="표시할 필드 선택..." />
</SelectTrigger>
<SelectContent>
<SelectItem value="">선택 안함</SelectItem>
{availableColumns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.displayName || col.columnName}
</SelectItem>
))}
</SelectContent>
</Select>
{child.fieldName && (
<p className="text-[9px] text-green-600">
각 아이템의 "{child.fieldName}" 값이 표시됩니다
</p>
)}
</div>
{/* 라벨 설정 */}
<div className="space-y-1">
<Label className="text-[10px] text-slate-500">표시 라벨</Label>
<Input
value={child.label || ""}
onChange={(e) => updateComponentLabel(child.id, e.target.value)}
placeholder="표시할 라벨"
className="h-7 text-xs"
/>
</div>
{/* 크기 설정 */}
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<Label className="text-[10px] text-slate-500">너비 (px)</Label>
<Input
type="number"
value={child.size?.width || 200}
onChange={(e) =>
updateComponentSize(child.id, parseInt(e.target.value) || 200, undefined)
}
className="h-7 text-xs"
/>
</div>
<div className="space-y-1">
<Label className="text-[10px] text-slate-500">높이 (px)</Label>
<Input
type="number"
value={child.size?.height || 32}
onChange={(e) =>
updateComponentSize(child.id, undefined, parseInt(e.target.value) || 32)
}
className="h-7 text-xs"
/>
</div>
</div>
{/* 스타일 설정 */}
<div className="space-y-2">
<Label className="text-[10px] text-slate-500 font-medium">스타일</Label>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<Label className="text-[10px] text-slate-400">글자 크기</Label>
<Select
value={child.style?.fontSize || "14px"}
onValueChange={(value) => updateComponentStyle(child.id, "fontSize", value)}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="10px">10px (아주 작게)</SelectItem>
<SelectItem value="12px">12px (작게)</SelectItem>
<SelectItem value="14px">14px (보통)</SelectItem>
<SelectItem value="16px">16px (크게)</SelectItem>
<SelectItem value="18px">18px (아주 크게)</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-1">
<Label className="text-[10px] text-slate-400">글자 굵기</Label>
<Select
value={child.style?.fontWeight || "normal"}
onValueChange={(value) => updateComponentStyle(child.id, "fontWeight", value)}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="normal">보통</SelectItem>
<SelectItem value="500">중간</SelectItem>
<SelectItem value="600">약간 굵게</SelectItem>
<SelectItem value="bold">굵게</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<Label className="text-[10px] text-slate-400">글자 정렬</Label>
<Select
value={child.style?.textAlign || "left"}
onValueChange={(value) => updateComponentStyle(child.id, "textAlign", value)}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="left">왼쪽</SelectItem>
<SelectItem value="center">가운데</SelectItem>
<SelectItem value="right">오른쪽</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-1">
<Label className="text-[10px] text-slate-400">글자 색상</Label>
<div className="flex gap-1">
<Input
type="color"
value={child.style?.color || "#000000"}
onChange={(e) => updateComponentStyle(child.id, "color", e.target.value)}
className="h-7 w-10 p-0.5 cursor-pointer"
/>
<Input
value={child.style?.color || "#000000"}
onChange={(e) => updateComponentStyle(child.id, "color", e.target.value)}
className="h-7 flex-1 text-xs"
placeholder="#000000"
/>
</div>
</div>
</div>
</div>
{/* 컴포넌트 타입별 추가 설정 */}
{(child.componentType === "number-display" || child.componentType === "number-input") && (
<div className="space-y-2">
<Label className="text-[10px] text-slate-500 font-medium">숫자 형식</Label>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<Label className="text-[10px] text-slate-400">소수점 자릿수</Label>
<Input
type="number"
min={0}
max={10}
value={child.componentConfig?.decimalPlaces ?? 0}
onChange={(e) =>
updateComponentConfig(child.id, "decimalPlaces", parseInt(e.target.value) || 0)
}
className="h-7 text-xs"
/>
</div>
<div className="flex items-center gap-2 pt-4">
<Checkbox
id={`thousandSep_${child.id}`}
checked={child.componentConfig?.thousandSeparator ?? true}
onCheckedChange={(checked) =>
updateComponentConfig(child.id, "thousandSeparator", checked)
}
/>
<Label htmlFor={`thousandSep_${child.id}`} className="text-[10px]">
천 단위 구분
</Label>
</div>
</div>
</div>
)}
{(child.componentType === "date-display" || child.componentType === "date-input") && (
<div className="space-y-2">
<Label className="text-[10px] text-slate-500 font-medium">날짜 형식</Label>
<Select
value={child.componentConfig?.dateFormat || "YYYY-MM-DD"}
onValueChange={(value) => updateComponentConfig(child.id, "dateFormat", value)}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="YYYY-MM-DD">2024-01-15</SelectItem>
<SelectItem value="YYYY.MM.DD">2024.01.15</SelectItem>
<SelectItem value="YYYY/MM/DD">2024/01/15</SelectItem>
<SelectItem value="MM/DD/YYYY">01/15/2024</SelectItem>
<SelectItem value="DD-MM-YYYY">15-01-2024</SelectItem>
<SelectItem value="YYYY-MM-DD HH:mm">2024-01-15 14:30</SelectItem>
</SelectContent>
</Select>
</div>
)}
</>
)}
</div>
)}
</div>
<Button
variant="ghost"
size="sm"
className="h-5 w-5 p-0 text-red-400 hover:text-red-600"
onClick={() => removeComponent(child.id)}
>
<X className="h-3 w-3" />
</Button>
</div>
))}
);
})}
</div>
) : (
<div className="rounded-md border border-dashed border-slate-300 bg-slate-50 p-4 text-center">