94 lines
2.6 KiB
TypeScript
94 lines
2.6 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 { NumberInputConfig } from "./types";
|
|
|
|
export interface NumberInputConfigPanelProps {
|
|
config: NumberInputConfig;
|
|
onChange: (config: Partial<NumberInputConfig>) => void;
|
|
}
|
|
|
|
/**
|
|
* NumberInput 설정 패널
|
|
* 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
|
|
*/
|
|
export const NumberInputConfigPanel: React.FC<NumberInputConfigPanelProps> = ({
|
|
config,
|
|
onChange,
|
|
}) => {
|
|
const handleChange = (key: keyof NumberInputConfig, value: any) => {
|
|
onChange({ [key]: value });
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="text-sm font-medium">
|
|
number-input 설정
|
|
</div>
|
|
|
|
{/* 숫자 관련 설정 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="min">최소값</Label>
|
|
<Input
|
|
id="min"
|
|
type="number"
|
|
value={config.min || ""}
|
|
onChange={(e) => handleChange("min", parseFloat(e.target.value) || undefined)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="max">최대값</Label>
|
|
<Input
|
|
id="max"
|
|
type="number"
|
|
value={config.max || ""}
|
|
onChange={(e) => handleChange("max", parseFloat(e.target.value) || undefined)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="step">단계</Label>
|
|
<Input
|
|
id="step"
|
|
type="number"
|
|
value={config.step || 1}
|
|
onChange={(e) => handleChange("step", parseFloat(e.target.value) || 1)}
|
|
/>
|
|
</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>
|
|
);
|
|
};
|