123 lines
3.5 KiB
TypeScript
123 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
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";
|
|
|
|
interface RepeatScreenModalConfigPanelProps {
|
|
config: any;
|
|
onChange: (config: any) => void;
|
|
}
|
|
|
|
/**
|
|
* RepeatScreenModal 설정 패널
|
|
*/
|
|
export function RepeatScreenModalConfigPanel({
|
|
config,
|
|
onChange,
|
|
}: RepeatScreenModalConfigPanelProps) {
|
|
const handleChange = (key: string, value: any) => {
|
|
onChange({
|
|
...config,
|
|
[key]: value,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label>카드 모드</Label>
|
|
<Select
|
|
value={config?.cardMode || "simple"}
|
|
onValueChange={(value) => handleChange("cardMode", value)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="카드 모드 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="simple">심플</SelectItem>
|
|
<SelectItem value="detailed">상세</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>카드 간격</Label>
|
|
<Input
|
|
value={config?.cardSpacing || "24px"}
|
|
onChange={(e) => handleChange("cardSpacing", e.target.value)}
|
|
placeholder="예: 24px"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>카드 제목</Label>
|
|
<Input
|
|
value={config?.cardTitle || ""}
|
|
onChange={(e) => handleChange("cardTitle", e.target.value)}
|
|
placeholder="카드 제목 (변수 사용 가능: {field_name})"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>저장 모드</Label>
|
|
<Select
|
|
value={config?.saveMode || "all"}
|
|
onValueChange={(value) => handleChange("saveMode", value)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="저장 모드 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">전체 저장</SelectItem>
|
|
<SelectItem value="single">개별 저장</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<Label>카드 테두리 표시</Label>
|
|
<Switch
|
|
checked={config?.showCardBorder !== false}
|
|
onCheckedChange={(checked) => handleChange("showCardBorder", checked)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<Label>카드 제목 표시</Label>
|
|
<Switch
|
|
checked={config?.showCardTitle !== false}
|
|
onCheckedChange={(checked) => handleChange("showCardTitle", checked)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<Label>그룹핑 활성화</Label>
|
|
<Switch
|
|
checked={config?.grouping?.enabled || false}
|
|
onCheckedChange={(checked) =>
|
|
handleChange("grouping", { ...config?.grouping, enabled: checked })
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className="rounded-md bg-muted p-3 text-xs text-muted-foreground">
|
|
<p className="font-medium">데이터 소스 설정</p>
|
|
<p className="mt-1">
|
|
소스 테이블: {config?.dataSource?.sourceTable || "미설정"}
|
|
</p>
|
|
<p>필터 필드: {config?.dataSource?.filterField || "미설정"}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|