84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { SelectBasicConfig } from "./types";
|
|
|
|
export interface SelectBasicConfigPanelProps {
|
|
config: SelectBasicConfig;
|
|
onChange: (config: Partial<SelectBasicConfig>) => void;
|
|
}
|
|
|
|
/**
|
|
* SelectBasic 설정 패널
|
|
* 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
|
|
*/
|
|
export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|
config,
|
|
onChange,
|
|
}) => {
|
|
const handleChange = (key: keyof SelectBasicConfig, value: any) => {
|
|
// 기존 config와 병합하여 전체 객체 전달 (다른 속성 보호)
|
|
const newConfig = { ...config, [key]: value };
|
|
onChange(newConfig);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="text-sm font-medium">
|
|
select-basic 설정
|
|
</div>
|
|
|
|
{/* select 관련 설정 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="placeholder">플레이스홀더</Label>
|
|
<Input
|
|
id="placeholder"
|
|
value={config.placeholder || ""}
|
|
onChange={(e) => handleChange("placeholder", e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* 공통 설정 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="disabled">비활성화</Label>
|
|
<Checkbox
|
|
id="disabled"
|
|
checked={config.disabled || false}
|
|
onCheckedChange={(checked) => handleChange("disabled", checked)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="required">필수 입력</Label>
|
|
<Checkbox
|
|
id="required"
|
|
checked={config.required || false}
|
|
onCheckedChange={(checked) => handleChange("required", checked)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="readonly">읽기 전용</Label>
|
|
<Checkbox
|
|
id="readonly"
|
|
checked={config.readonly || false}
|
|
onCheckedChange={(checked) => handleChange("readonly", checked)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="multiple">다중 선택</Label>
|
|
<Checkbox
|
|
id="multiple"
|
|
checked={config.multiple || false}
|
|
onCheckedChange={(checked) => handleChange("multiple", checked)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|