90 lines
2.6 KiB
TypeScript
90 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 { ButtonPrimaryConfig } from "./types";
|
||
|
|
|
||
|
|
export interface ButtonPrimaryConfigPanelProps {
|
||
|
|
config: ButtonPrimaryConfig;
|
||
|
|
onChange: (config: Partial<ButtonPrimaryConfig>) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* ButtonPrimary 설정 패널
|
||
|
|
* 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
|
||
|
|
*/
|
||
|
|
export const ButtonPrimaryConfigPanel: React.FC<ButtonPrimaryConfigPanelProps> = ({
|
||
|
|
config,
|
||
|
|
onChange,
|
||
|
|
}) => {
|
||
|
|
const handleChange = (key: keyof ButtonPrimaryConfig, value: any) => {
|
||
|
|
onChange({ [key]: value });
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div className="text-sm font-medium">
|
||
|
|
button-primary 설정
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 버튼 관련 설정 */}
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="text">버튼 텍스트</Label>
|
||
|
|
<Input
|
||
|
|
id="text"
|
||
|
|
value={config.text || ""}
|
||
|
|
onChange={(e) => handleChange("text", e.target.value)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="actionType">액션 타입</Label>
|
||
|
|
<Select
|
||
|
|
value={config.actionType || "button"}
|
||
|
|
onValueChange={(value) => handleChange("actionType", value)}
|
||
|
|
>
|
||
|
|
<SelectTrigger>
|
||
|
|
<SelectValue />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="button">Button</SelectItem>
|
||
|
|
<SelectItem value="submit">Submit</SelectItem>
|
||
|
|
<SelectItem value="reset">Reset</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</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>
|
||
|
|
);
|
||
|
|
};
|