1227 lines
51 KiB
TypeScript
1227 lines
51 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* V2 리피터 컨테이너 설정 패널
|
|
* 토스식 단계별 UX: 데이터 소스 -> 레이아웃 -> 슬롯 필드 -> 고급 설정(접힘)
|
|
*/
|
|
|
|
import React, { useState, useEffect, useMemo } from "react";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
|
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,
|
|
Type,
|
|
Settings2,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
Settings,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import type { RepeatContainerConfig, SlotComponentConfig } from "@/lib/registry/components/v2-repeat-container/types";
|
|
import { tableTypeApi } from "@/lib/api/screen";
|
|
import { tableManagementApi } from "@/lib/api/tableManagement";
|
|
import { DynamicComponentConfigPanel, hasComponentConfigPanel } from "@/lib/utils/getComponentConfigPanel";
|
|
|
|
interface V2RepeatContainerConfigPanelProps {
|
|
config: RepeatContainerConfig;
|
|
onChange: (config: Partial<RepeatContainerConfig>) => void;
|
|
screenTableName?: string;
|
|
}
|
|
|
|
export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanelProps> = ({
|
|
config,
|
|
onChange,
|
|
screenTableName,
|
|
}) => {
|
|
const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName?: string }>>([]);
|
|
const [loadingTables, setLoadingTables] = useState(false);
|
|
const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
|
|
|
|
const [availableColumns, setAvailableColumns] = useState<Array<{ columnName: string; displayName?: string }>>([]);
|
|
const [loadingColumns, setLoadingColumns] = useState(false);
|
|
|
|
const [titleColumnOpen, setTitleColumnOpen] = useState(false);
|
|
const [descriptionColumnOpen, setDescriptionColumnOpen] = useState(false);
|
|
|
|
const [styleOpen, setStyleOpen] = useState(false);
|
|
const [interactionOpen, setInteractionOpen] = useState(false);
|
|
|
|
const targetTableName = useMemo(() => {
|
|
if (config.useCustomTable && config.customTableName) {
|
|
return config.customTableName;
|
|
}
|
|
return config.tableName || screenTableName;
|
|
}, [config.useCustomTable, config.customTableName, config.tableName, screenTableName]);
|
|
|
|
useEffect(() => {
|
|
if (screenTableName && !config.tableName && !config.customTableName) {
|
|
onChange({ tableName: screenTableName });
|
|
}
|
|
}, [screenTableName, config.tableName, config.customTableName, onChange]);
|
|
|
|
useEffect(() => {
|
|
const fetchTables = async () => {
|
|
setLoadingTables(true);
|
|
try {
|
|
const response = await tableTypeApi.getTables();
|
|
setAvailableTables(
|
|
response.map((table: any) => ({
|
|
tableName: table.tableName,
|
|
displayName: table.displayName || table.tableName,
|
|
}))
|
|
);
|
|
} catch (error) {
|
|
console.error("테이블 목록 가져오기 실패:", error);
|
|
} finally {
|
|
setLoadingTables(false);
|
|
}
|
|
};
|
|
fetchTables();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!targetTableName) {
|
|
setAvailableColumns([]);
|
|
return;
|
|
}
|
|
|
|
const fetchColumns = async () => {
|
|
setLoadingColumns(true);
|
|
try {
|
|
const response = await tableManagementApi.getColumnList(targetTableName);
|
|
const columnsData = response.data?.columns || response.data;
|
|
if (response.success && columnsData && Array.isArray(columnsData)) {
|
|
const columns = columnsData.map((col: any) => ({
|
|
columnName: col.columnName,
|
|
displayName: col.displayName || col.columnLabel || col.columnName,
|
|
}));
|
|
setAvailableColumns(columns);
|
|
}
|
|
} catch (error) {
|
|
console.error("컬럼 목록 가져오기 실패:", error);
|
|
setAvailableColumns([]);
|
|
} finally {
|
|
setLoadingColumns(false);
|
|
}
|
|
};
|
|
fetchColumns();
|
|
}, [targetTableName, config.tableName, screenTableName, config.useCustomTable, config.customTableName]);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* ─── 1단계: 데이터 소스 테이블 ─── */}
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-medium">데이터 소스</p>
|
|
<p className="text-[11px] text-muted-foreground">
|
|
반복 렌더링할 데이터의 테이블을 선택해요
|
|
</p>
|
|
</div>
|
|
|
|
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
|
|
{/* 현재 선택된 테이블 카드 */}
|
|
<div className="flex items-center gap-2 rounded-md border bg-background p-2">
|
|
<Database className="h-4 w-4 text-primary" />
|
|
<div className="flex-1">
|
|
<div className="text-xs font-medium">
|
|
{config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
|
|
</div>
|
|
<div className="text-[10px] text-muted-foreground">
|
|
{config.useCustomTable ? "커스텀 테이블" : "화면 기본 테이블"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 테이블 변경 Combobox */}
|
|
<Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={tableComboboxOpen}
|
|
className="h-7 w-full justify-between text-xs"
|
|
disabled={loadingTables}
|
|
>
|
|
테이블 변경...
|
|
<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-8 text-xs" />
|
|
<CommandList>
|
|
<CommandEmpty className="py-2 text-xs">테이블을 찾을 수 없습니다</CommandEmpty>
|
|
|
|
{screenTableName && (
|
|
<CommandGroup heading="기본 (화면 테이블)">
|
|
<CommandItem
|
|
key={`default-${screenTableName}`}
|
|
value={screenTableName}
|
|
onSelect={() => {
|
|
onChange({
|
|
useCustomTable: false,
|
|
customTableName: undefined,
|
|
tableName: screenTableName,
|
|
});
|
|
setTableComboboxOpen(false);
|
|
}}
|
|
className="text-xs cursor-pointer"
|
|
>
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-3 w-3",
|
|
!config.useCustomTable ? "opacity-100" : "opacity-0"
|
|
)}
|
|
/>
|
|
<Database className="mr-2 h-3 w-3 text-primary" />
|
|
{screenTableName}
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
)}
|
|
|
|
<CommandGroup heading="전체 테이블">
|
|
{availableTables
|
|
.filter((table) => table.tableName !== screenTableName)
|
|
.map((table) => (
|
|
<CommandItem
|
|
key={table.tableName}
|
|
value={`${table.tableName} ${table.displayName || ""}`}
|
|
onSelect={() => {
|
|
onChange({
|
|
useCustomTable: true,
|
|
customTableName: table.tableName,
|
|
tableName: table.tableName,
|
|
});
|
|
setTableComboboxOpen(false);
|
|
}}
|
|
className="text-xs cursor-pointer"
|
|
>
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-3 w-3",
|
|
config.customTableName === table.tableName ? "opacity-100" : "opacity-0"
|
|
)}
|
|
/>
|
|
<Table2 className="mr-2 h-3 w-3 text-muted-foreground" />
|
|
{table.displayName || table.tableName}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
{/* 데이터 수신 방식 */}
|
|
<div className="flex items-center justify-between py-1">
|
|
<span className="text-xs text-muted-foreground">데이터 수신 방식</span>
|
|
<Select
|
|
value={config.dataSourceType || "manual"}
|
|
onValueChange={(value) => onChange({ dataSourceType: value as any })}
|
|
>
|
|
<SelectTrigger className="h-7 w-[160px] text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="manual">수동 (API 직접 조회)</SelectItem>
|
|
<SelectItem value="table-list">테이블 리스트 연동</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{config.dataSourceType === "table-list" && (
|
|
<div className="flex items-center justify-between py-1">
|
|
<div>
|
|
<span className="text-xs text-muted-foreground">연동 컴포넌트 ID</span>
|
|
<p className="text-[10px] text-muted-foreground mt-0.5">비우면 테이블명으로 자동 매칭</p>
|
|
</div>
|
|
<Input
|
|
value={config.dataSourceComponentId || ""}
|
|
onChange={(e) => onChange({ dataSourceComponentId: e.target.value })}
|
|
placeholder="자동 매칭"
|
|
className="h-7 w-[140px] text-xs"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ─── 2단계: 레이아웃 ─── */}
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-medium">레이아웃</p>
|
|
<p className="text-[11px] text-muted-foreground">
|
|
아이템의 배치 방식과 간격을 설정해요
|
|
</p>
|
|
</div>
|
|
|
|
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
|
|
{/* 배치 방식 카드 선택 */}
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{[
|
|
{ value: "vertical", label: "세로", icon: Rows3 },
|
|
{ value: "horizontal", label: "가로", icon: LayoutList },
|
|
{ value: "grid", label: "그리드", icon: LayoutGrid },
|
|
].map(({ value, label, icon: Icon }) => (
|
|
<button
|
|
key={value}
|
|
type="button"
|
|
onClick={() => onChange({ layout: value as any })}
|
|
className={cn(
|
|
"flex flex-col items-center gap-1 rounded-md border p-2 text-xs transition-colors",
|
|
config.layout === value
|
|
? "border-primary bg-primary/5 text-primary"
|
|
: "border-border bg-background text-muted-foreground hover:bg-muted/50"
|
|
)}
|
|
>
|
|
<Icon className={cn("h-4 w-4", value === "horizontal" && "rotate-90")} />
|
|
<span>{label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{config.layout === "grid" && (
|
|
<div className="flex items-center justify-between py-1">
|
|
<span className="text-xs text-muted-foreground">그리드 컬럼 수</span>
|
|
<Select
|
|
value={String(config.gridColumns || 2)}
|
|
onValueChange={(value) => onChange({ gridColumns: Number(value) })}
|
|
>
|
|
<SelectTrigger className="h-7 w-[100px] text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="2">2열</SelectItem>
|
|
<SelectItem value="3">3열</SelectItem>
|
|
<SelectItem value="4">4열</SelectItem>
|
|
<SelectItem value="5">5열</SelectItem>
|
|
<SelectItem value="6">6열</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between py-1">
|
|
<span className="text-xs text-muted-foreground">아이템 간격</span>
|
|
<Input
|
|
value={config.gap || "16px"}
|
|
onChange={(e) => onChange({ gap: e.target.value })}
|
|
placeholder="16px"
|
|
className="h-7 w-[100px] text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-1">
|
|
<span className="text-xs text-muted-foreground">최소 너비</span>
|
|
<Input
|
|
value={config.itemMinWidth || ""}
|
|
onChange={(e) => onChange({ itemMinWidth: e.target.value || undefined })}
|
|
placeholder="auto"
|
|
className="h-7 w-[100px] text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-1">
|
|
<span className="text-xs text-muted-foreground">최대 너비</span>
|
|
<Input
|
|
value={config.itemMaxWidth || ""}
|
|
onChange={(e) => onChange({ itemMaxWidth: e.target.value || undefined })}
|
|
placeholder="auto"
|
|
className="h-7 w-[100px] text-xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ─── 3단계: 반복 표시 필드 (슬롯) ─── */}
|
|
<SlotChildrenSection
|
|
config={config}
|
|
onChange={onChange}
|
|
availableColumns={availableColumns}
|
|
loadingColumns={loadingColumns}
|
|
screenTableName={screenTableName}
|
|
/>
|
|
|
|
{/* ─── 4단계: 아이템 제목/설명 ─── */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm font-medium">아이템 제목/설명</p>
|
|
<Switch
|
|
checked={config.showItemTitle ?? false}
|
|
onCheckedChange={(checked) => onChange({ showItemTitle: checked })}
|
|
/>
|
|
</div>
|
|
<p className="text-[11px] text-muted-foreground">
|
|
각 아이템에 제목과 설명을 표시할 수 있어요
|
|
</p>
|
|
</div>
|
|
|
|
{config.showItemTitle && (
|
|
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
|
|
{/* 제목 컬럼 Combobox */}
|
|
<div className="space-y-1">
|
|
<span className="text-xs text-muted-foreground">제목 컬럼</span>
|
|
<Popover open={titleColumnOpen} onOpenChange={setTitleColumnOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={titleColumnOpen}
|
|
className="h-7 w-full justify-between text-xs font-normal"
|
|
disabled={loadingColumns || availableColumns.length === 0}
|
|
>
|
|
{loadingColumns
|
|
? "로딩 중..."
|
|
: config.titleColumn
|
|
? availableColumns.find(c => c.columnName === config.titleColumn)?.displayName || config.titleColumn
|
|
: "제목 컬럼 선택..."}
|
|
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[280px] p-0" align="start">
|
|
<Command>
|
|
<CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
|
|
<CommandList>
|
|
<CommandEmpty className="py-2 text-xs text-center">컬럼을 찾을 수 없습니다</CommandEmpty>
|
|
<CommandGroup>
|
|
<CommandItem
|
|
value="__none__"
|
|
onSelect={() => {
|
|
onChange({ titleColumn: "" });
|
|
setTitleColumnOpen(false);
|
|
}}
|
|
className="text-xs"
|
|
>
|
|
<Check className={cn("mr-2 h-3 w-3", !config.titleColumn ? "opacity-100" : "opacity-0")} />
|
|
선택 안함
|
|
</CommandItem>
|
|
{availableColumns.map((col) => (
|
|
<CommandItem
|
|
key={col.columnName}
|
|
value={col.columnName}
|
|
onSelect={() => {
|
|
onChange({ titleColumn: col.columnName });
|
|
setTitleColumnOpen(false);
|
|
}}
|
|
className="text-xs"
|
|
>
|
|
<Check className={cn("mr-2 h-3 w-3", config.titleColumn === col.columnName ? "opacity-100" : "opacity-0")} />
|
|
<div className="flex flex-col">
|
|
<span>{col.displayName || col.columnName}</span>
|
|
{col.displayName && col.displayName !== col.columnName && (
|
|
<span className="text-[10px] text-muted-foreground">{col.columnName}</span>
|
|
)}
|
|
</div>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
|
|
{/* 설명 컬럼 Combobox */}
|
|
<div className="space-y-1">
|
|
<span className="text-xs text-muted-foreground">설명 컬럼 (선택)</span>
|
|
<Popover open={descriptionColumnOpen} onOpenChange={setDescriptionColumnOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={descriptionColumnOpen}
|
|
className="h-7 w-full justify-between text-xs font-normal"
|
|
disabled={loadingColumns || availableColumns.length === 0}
|
|
>
|
|
{loadingColumns
|
|
? "로딩 중..."
|
|
: config.descriptionColumn
|
|
? availableColumns.find(c => c.columnName === config.descriptionColumn)?.displayName || config.descriptionColumn
|
|
: "설명 컬럼 선택..."}
|
|
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[280px] p-0" align="start">
|
|
<Command>
|
|
<CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
|
|
<CommandList>
|
|
<CommandEmpty className="py-2 text-xs text-center">컬럼을 찾을 수 없습니다</CommandEmpty>
|
|
<CommandGroup>
|
|
<CommandItem
|
|
value="__none__"
|
|
onSelect={() => {
|
|
onChange({ descriptionColumn: "" });
|
|
setDescriptionColumnOpen(false);
|
|
}}
|
|
className="text-xs"
|
|
>
|
|
<Check className={cn("mr-2 h-3 w-3", !config.descriptionColumn ? "opacity-100" : "opacity-0")} />
|
|
선택 안함
|
|
</CommandItem>
|
|
{availableColumns.map((col) => (
|
|
<CommandItem
|
|
key={col.columnName}
|
|
value={col.columnName}
|
|
onSelect={() => {
|
|
onChange({ descriptionColumn: col.columnName });
|
|
setDescriptionColumnOpen(false);
|
|
}}
|
|
className="text-xs"
|
|
>
|
|
<Check className={cn("mr-2 h-3 w-3", config.descriptionColumn === col.columnName ? "opacity-100" : "opacity-0")} />
|
|
<div className="flex flex-col">
|
|
<span>{col.displayName || col.columnName}</span>
|
|
{col.displayName && col.displayName !== col.columnName && (
|
|
<span className="text-[10px] text-muted-foreground">{col.columnName}</span>
|
|
)}
|
|
</div>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
|
|
{/* 제목 템플릿 (titleColumn 미사용 시 대체) */}
|
|
<div className="space-y-1">
|
|
<span className="text-xs text-muted-foreground">제목 템플릿 (레거시)</span>
|
|
<Input
|
|
value={config.itemTitleTemplate || ""}
|
|
onChange={(e) => onChange({ itemTitleTemplate: e.target.value })}
|
|
placeholder="{field_name} - {field_code}"
|
|
className="h-7 text-xs"
|
|
/>
|
|
<p className="text-[10px] text-muted-foreground">
|
|
제목 컬럼 미선택 시 사용. 중괄호로 필드 참조
|
|
</p>
|
|
</div>
|
|
|
|
{/* 제목 스타일 */}
|
|
<div className="space-y-2 pt-1">
|
|
<span className="text-[10px] text-muted-foreground">제목 스타일</span>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">크기</Label>
|
|
<Select
|
|
value={config.titleFontSize || "14px"}
|
|
onValueChange={(value) => onChange({ titleFontSize: value })}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<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]">색상</Label>
|
|
<Input
|
|
type="color"
|
|
value={config.titleColor || "#374151"}
|
|
onChange={(e) => onChange({ titleColor: e.target.value })}
|
|
className="h-7"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">굵기</Label>
|
|
<Select
|
|
value={config.titleFontWeight || "600"}
|
|
onValueChange={(value) => onChange({ titleFontWeight: value })}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="400">보통</SelectItem>
|
|
<SelectItem value="500">중간</SelectItem>
|
|
<SelectItem value="600">굵게</SelectItem>
|
|
<SelectItem value="700">아주 굵게</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{config.descriptionColumn && (
|
|
<div className="space-y-2">
|
|
<span className="text-[10px] text-muted-foreground">설명 스타일</span>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">크기</Label>
|
|
<Select
|
|
value={config.descriptionFontSize || "12px"}
|
|
onValueChange={(value) => onChange({ descriptionFontSize: 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>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">색상</Label>
|
|
<Input
|
|
type="color"
|
|
value={config.descriptionColor || "#6b7280"}
|
|
onChange={(e) => onChange({ descriptionColor: e.target.value })}
|
|
className="h-7"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ─── 5단계: 카드 스타일 (Collapsible) ─── */}
|
|
<Collapsible open={styleOpen} onOpenChange={setStyleOpen}>
|
|
<CollapsibleTrigger asChild>
|
|
<button
|
|
type="button"
|
|
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Settings className="h-4 w-4 text-muted-foreground" />
|
|
<span className="text-sm font-medium">카드 스타일</span>
|
|
</div>
|
|
<ChevronDown
|
|
className={cn(
|
|
"h-4 w-4 text-muted-foreground transition-transform duration-200",
|
|
styleOpen && "rotate-180"
|
|
)}
|
|
/>
|
|
</button>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="flex items-center justify-between py-1">
|
|
<span className="text-xs text-muted-foreground">배경색</span>
|
|
<Input
|
|
type="color"
|
|
value={config.backgroundColor || "#ffffff"}
|
|
onChange={(e) => onChange({ backgroundColor: e.target.value })}
|
|
className="h-7 w-[60px]"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between py-1">
|
|
<span className="text-xs text-muted-foreground">둥글기</span>
|
|
<Input
|
|
value={config.borderRadius || "8px"}
|
|
onChange={(e) => onChange({ borderRadius: e.target.value })}
|
|
className="h-7 w-[60px] text-xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="flex items-center justify-between py-1">
|
|
<span className="text-xs text-muted-foreground">내부 패딩</span>
|
|
<Input
|
|
value={config.padding || "16px"}
|
|
onChange={(e) => onChange({ padding: e.target.value })}
|
|
className="h-7 w-[60px] text-xs"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between py-1">
|
|
<span className="text-xs text-muted-foreground">아이템 높이</span>
|
|
<Input
|
|
value={config.itemHeight || "auto"}
|
|
onChange={(e) => onChange({ itemHeight: e.target.value })}
|
|
className="h-7 w-[60px] text-xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-1">
|
|
<div>
|
|
<p className="text-sm">테두리 표시</p>
|
|
<p className="text-[11px] text-muted-foreground">각 아이템에 테두리를 표시해요</p>
|
|
</div>
|
|
<Switch
|
|
checked={config.showBorder ?? true}
|
|
onCheckedChange={(checked) => onChange({ showBorder: checked })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-1">
|
|
<div>
|
|
<p className="text-sm">그림자 표시</p>
|
|
<p className="text-[11px] text-muted-foreground">각 아이템에 그림자를 적용해요</p>
|
|
</div>
|
|
<Switch
|
|
checked={config.showShadow ?? false}
|
|
onCheckedChange={(checked) => onChange({ showShadow: checked })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
|
|
{/* ─── 6단계: 상호작용 & 페이징 (Collapsible) ─── */}
|
|
<Collapsible open={interactionOpen} onOpenChange={setInteractionOpen}>
|
|
<CollapsibleTrigger asChild>
|
|
<button
|
|
type="button"
|
|
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Settings className="h-4 w-4 text-muted-foreground" />
|
|
<span className="text-sm font-medium">상호작용 & 페이징</span>
|
|
</div>
|
|
<ChevronDown
|
|
className={cn(
|
|
"h-4 w-4 text-muted-foreground transition-transform duration-200",
|
|
interactionOpen && "rotate-180"
|
|
)}
|
|
/>
|
|
</button>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
|
|
<div className="flex items-center justify-between py-1">
|
|
<div>
|
|
<p className="text-sm">클릭 가능</p>
|
|
<p className="text-[11px] text-muted-foreground">아이템을 클릭해서 선택할 수 있어요</p>
|
|
</div>
|
|
<Switch
|
|
checked={config.clickable ?? false}
|
|
onCheckedChange={(checked) => onChange({ clickable: checked })}
|
|
/>
|
|
</div>
|
|
|
|
{config.clickable && (
|
|
<div className="ml-1 border-l-2 border-primary/20 pl-3 space-y-3">
|
|
<div className="flex items-center justify-between py-1">
|
|
<div>
|
|
<p className="text-sm">선택 상태 표시</p>
|
|
<p className="text-[11px] text-muted-foreground">선택된 아이템을 시각적으로 구분해요</p>
|
|
</div>
|
|
<Switch
|
|
checked={config.showSelectedState ?? true}
|
|
onCheckedChange={(checked) => onChange({ showSelectedState: checked })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-1">
|
|
<span className="text-xs text-muted-foreground">선택 모드</span>
|
|
<Select
|
|
value={config.selectionMode || "single"}
|
|
onValueChange={(value) => onChange({ selectionMode: value as "single" | "multiple" })}
|
|
>
|
|
<SelectTrigger className="h-7 w-[100px] text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="single">단일</SelectItem>
|
|
<SelectItem value="multiple">다중</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between py-1">
|
|
<div>
|
|
<p className="text-sm">페이징 사용</p>
|
|
<p className="text-[11px] text-muted-foreground">많은 데이터를 페이지로 나눠 표시해요</p>
|
|
</div>
|
|
<Switch
|
|
checked={config.usePaging ?? false}
|
|
onCheckedChange={(checked) => onChange({ usePaging: checked })}
|
|
/>
|
|
</div>
|
|
|
|
{config.usePaging && (
|
|
<div className="ml-1 border-l-2 border-primary/20 pl-3">
|
|
<div className="flex items-center justify-between py-1">
|
|
<span className="text-xs text-muted-foreground">페이지당 아이템 수</span>
|
|
<Select
|
|
value={String(config.pageSize || 10)}
|
|
onValueChange={(value) => onChange({ pageSize: Number(value) })}
|
|
>
|
|
<SelectTrigger className="h-7 w-[100px] text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="5">5개</SelectItem>
|
|
<SelectItem value="10">10개</SelectItem>
|
|
<SelectItem value="20">20개</SelectItem>
|
|
<SelectItem value="50">50개</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between py-1">
|
|
<span className="text-xs text-muted-foreground">빈 상태 메시지</span>
|
|
<Input
|
|
value={config.emptyMessage || "데이터가 없습니다"}
|
|
onChange={(e) => onChange({ emptyMessage: e.target.value })}
|
|
placeholder="데이터가 없습니다"
|
|
className="h-7 w-[160px] text-xs"
|
|
/>
|
|
</div>
|
|
|
|
{/* 데이터 필터링 */}
|
|
<div className="flex items-center justify-between py-1">
|
|
<div>
|
|
<p className="text-sm">필터 필드</p>
|
|
<p className="text-[11px] text-muted-foreground">formData에서 필터 값을 가져올 키</p>
|
|
</div>
|
|
<Input
|
|
value={config.filterField || ""}
|
|
onChange={(e) => onChange({ filterField: e.target.value || undefined })}
|
|
placeholder="미사용"
|
|
className="h-7 w-[120px] text-xs"
|
|
/>
|
|
</div>
|
|
|
|
{config.filterField && (
|
|
<div className="flex items-center justify-between py-1">
|
|
<div>
|
|
<p className="text-sm">필터 컬럼</p>
|
|
<p className="text-[11px] text-muted-foreground">테이블에서 필터링할 컬럼</p>
|
|
</div>
|
|
<Input
|
|
value={config.filterColumn || ""}
|
|
onChange={(e) => onChange({ filterColumn: e.target.value || undefined })}
|
|
placeholder="컬럼명"
|
|
className="h-7 w-[120px] text-xs"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 그룹핑 */}
|
|
<div className="flex items-center justify-between py-1">
|
|
<div>
|
|
<p className="text-sm">그룹핑 사용</p>
|
|
<p className="text-[11px] text-muted-foreground">특정 필드로 아이템을 그룹화해요</p>
|
|
</div>
|
|
<Switch
|
|
checked={config.useGrouping ?? false}
|
|
onCheckedChange={(checked) => onChange({ useGrouping: checked })}
|
|
/>
|
|
</div>
|
|
|
|
{config.useGrouping && (
|
|
<div className="ml-1 border-l-2 border-primary/20 pl-3">
|
|
<div className="flex items-center justify-between py-1">
|
|
<span className="text-xs text-muted-foreground">그룹핑 기준 필드</span>
|
|
<Input
|
|
value={config.groupByField || ""}
|
|
onChange={(e) => onChange({ groupByField: e.target.value || undefined })}
|
|
placeholder="필드명"
|
|
className="h-7 w-[120px] text-xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
V2RepeatContainerConfigPanel.displayName = "V2RepeatContainerConfigPanel";
|
|
|
|
// ============================================================
|
|
// 슬롯 자식 컴포넌트 관리 섹션 (기존 기능 100% 유지)
|
|
// ============================================================
|
|
|
|
interface SlotChildrenSectionProps {
|
|
config: RepeatContainerConfig;
|
|
onChange: (config: Partial<RepeatContainerConfig>) => void;
|
|
availableColumns: Array<{ columnName: string; displayName?: string }>;
|
|
loadingColumns: boolean;
|
|
screenTableName?: string;
|
|
}
|
|
|
|
function SlotChildrenSection({
|
|
config,
|
|
onChange,
|
|
availableColumns,
|
|
loadingColumns,
|
|
screenTableName,
|
|
}: SlotChildrenSectionProps) {
|
|
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 = {
|
|
id: `slot_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
|
|
componentType: "text-display",
|
|
label: displayName,
|
|
fieldName: columnName,
|
|
position: { x: 0, y: children.length * 40 },
|
|
size: { width: 200, height: 32 },
|
|
componentConfig: {},
|
|
style: {},
|
|
};
|
|
onChange({ children: [...children, newChild] });
|
|
setColumnComboboxOpen(false);
|
|
};
|
|
|
|
const removeComponent = (id: string) => {
|
|
onChange({ children: children.filter((c) => c.id !== id) });
|
|
setExpandedIds((prev) => {
|
|
const newSet = new Set(prev);
|
|
newSet.delete(id);
|
|
return newSet;
|
|
});
|
|
};
|
|
|
|
const updateComponentLabel = (id: string, label: string) => {
|
|
onChange({ children: children.map((c) => (c.id === id ? { ...c, label } : 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-2">
|
|
<p className="text-sm font-medium">반복 표시 필드</p>
|
|
<p className="text-[11px] text-muted-foreground">
|
|
데이터의 어떤 컬럼을 각 아이템에 표시할지 선택해요
|
|
</p>
|
|
</div>
|
|
|
|
{children.length > 0 ? (
|
|
<div className="space-y-2">
|
|
{children.map((child, index) => {
|
|
const isExpanded = expandedIds.has(child.id);
|
|
return (
|
|
<div
|
|
key={child.id}
|
|
className="rounded-lg border overflow-hidden"
|
|
>
|
|
<div className="flex items-center gap-2 bg-muted/30 p-2">
|
|
<div className="flex h-5 w-5 items-center justify-center rounded bg-primary/10 text-xs font-medium text-primary">
|
|
{index + 1}
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-xs font-medium">
|
|
{child.label || child.fieldName}
|
|
</div>
|
|
<div className="text-[10px] text-muted-foreground">
|
|
필드: {child.fieldName}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-5 w-5 p-0 text-primary hover:text-primary"
|
|
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-destructive/80 hover:text-destructive"
|
|
onClick={() => removeComponent(child.id)}
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
|
|
{isExpanded && (
|
|
<div className="border-t bg-background p-3 space-y-3">
|
|
{hasComponentConfigPanel(child.componentType) ? (
|
|
<SlotComponentDetailPanel
|
|
child={child}
|
|
screenTableName={screenTableName}
|
|
onConfigChange={(newConfig) => {
|
|
onChange({
|
|
children: children.map((c) =>
|
|
c.id === child.id
|
|
? { ...c, componentConfig: { ...c.componentConfig, ...newConfig } }
|
|
: c
|
|
),
|
|
});
|
|
}}
|
|
onLabelChange={(label) => updateComponentLabel(child.id, label)}
|
|
/>
|
|
) : (
|
|
<>
|
|
{child.fieldName && (
|
|
<div className="rounded-md border border-primary/20 bg-primary/5 p-2">
|
|
<div className="flex items-center gap-1.5">
|
|
<Database className="h-3 w-3 text-primary" />
|
|
<span className="text-[10px] text-primary font-medium">
|
|
바인딩: {child.fieldName}
|
|
</span>
|
|
</div>
|
|
<p className="text-[9px] text-primary/80 mt-0.5">
|
|
각 아이템의 "{child.fieldName}" 값이 자동으로 표시돼요
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between py-1">
|
|
<span className="text-xs text-muted-foreground">표시 라벨</span>
|
|
<Input
|
|
value={child.label || ""}
|
|
onChange={(e) => updateComponentLabel(child.id, e.target.value)}
|
|
placeholder="표시할 라벨"
|
|
className="h-7 w-[140px] text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px] text-muted-foreground">너비 (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-muted-foreground">높이 (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">
|
|
<span className="text-[10px] text-muted-foreground">스타일</span>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">글자 크기</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]">글자 색상</Label>
|
|
<Input
|
|
type="color"
|
|
value={child.style?.color || "#000000"}
|
|
onChange={(e) => updateComponentStyle(child.id, "color", e.target.value)}
|
|
className="h-7"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg border border-dashed border-border bg-muted/20 p-4 text-center">
|
|
<Type className="mx-auto h-6 w-6 text-muted-foreground/50" />
|
|
<div className="mt-2 text-xs text-muted-foreground">표시할 필드가 없어요</div>
|
|
<div className="text-[10px] text-muted-foreground">
|
|
아래에서 컬럼을 선택하세요
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 컬럼 추가 Combobox */}
|
|
<Popover open={columnComboboxOpen} onOpenChange={setColumnComboboxOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={columnComboboxOpen}
|
|
className="h-8 w-full justify-between text-xs"
|
|
disabled={loadingColumns || availableColumns.length === 0}
|
|
>
|
|
{loadingColumns
|
|
? "로딩 중..."
|
|
: availableColumns.length === 0
|
|
? "테이블을 먼저 선택하세요"
|
|
: "컬럼 추가..."}
|
|
<Plus 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-8 text-xs" />
|
|
<CommandList>
|
|
<CommandEmpty className="py-2 text-xs">컬럼을 찾을 수 없습니다</CommandEmpty>
|
|
<CommandGroup heading="사용 가능한 컬럼">
|
|
{availableColumns.map((col) => {
|
|
const isAdded = children.some((c) => c.fieldName === col.columnName);
|
|
return (
|
|
<CommandItem
|
|
key={col.columnName}
|
|
value={`${col.columnName} ${col.displayName || ""}`}
|
|
onSelect={() => {
|
|
if (!isAdded) {
|
|
addComponent(col.columnName, col.displayName || col.columnName);
|
|
}
|
|
}}
|
|
disabled={isAdded}
|
|
className={cn(
|
|
"text-xs cursor-pointer",
|
|
isAdded && "opacity-50 cursor-not-allowed"
|
|
)}
|
|
>
|
|
<Plus
|
|
className={cn(
|
|
"mr-2 h-3 w-3",
|
|
isAdded ? "text-primary" : "text-muted-foreground"
|
|
)}
|
|
/>
|
|
<div className="flex-1">
|
|
<div className="font-medium">{col.displayName || col.columnName}</div>
|
|
<div className="text-[10px] text-muted-foreground">
|
|
{col.columnName}
|
|
</div>
|
|
</div>
|
|
{isAdded && (
|
|
<Check className="h-3 w-3 text-primary" />
|
|
)}
|
|
</CommandItem>
|
|
);
|
|
})}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// 슬롯 컴포넌트 상세 설정 패널
|
|
interface SlotComponentDetailPanelProps {
|
|
child: SlotComponentConfig;
|
|
screenTableName?: string;
|
|
onConfigChange: (newConfig: Record<string, any>) => void;
|
|
onLabelChange: (label: string) => void;
|
|
}
|
|
|
|
function SlotComponentDetailPanel({
|
|
child,
|
|
screenTableName,
|
|
onConfigChange,
|
|
onLabelChange,
|
|
}: SlotComponentDetailPanelProps) {
|
|
return (
|
|
<div className="space-y-3">
|
|
{child.fieldName && (
|
|
<div className="rounded-md border border-primary/20 bg-primary/5 p-2">
|
|
<div className="flex items-center gap-1.5">
|
|
<Database className="h-3 w-3 text-primary" />
|
|
<span className="text-[10px] text-primary font-medium">
|
|
바인딩: {child.fieldName}
|
|
</span>
|
|
</div>
|
|
<p className="text-[9px] text-primary/80 mt-0.5">
|
|
각 아이템의 "{child.fieldName}" 값이 자동으로 표시돼요
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between py-1">
|
|
<span className="text-xs text-muted-foreground">표시 라벨</span>
|
|
<Input
|
|
value={child.label || ""}
|
|
onChange={(e) => onLabelChange(e.target.value)}
|
|
placeholder="표시할 라벨"
|
|
className="h-7 w-[140px] text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div className="border-t pt-2">
|
|
<div className="text-[10px] font-medium text-muted-foreground mb-2">
|
|
{child.componentType} 상세 설정
|
|
</div>
|
|
<DynamicComponentConfigPanel
|
|
componentId={child.componentType}
|
|
config={child.componentConfig || {}}
|
|
onChange={onConfigChange}
|
|
screenTableName={screenTableName}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default V2RepeatContainerConfigPanel;
|