73 lines
2.1 KiB
TypeScript
73 lines
2.1 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 { ImageDisplayConfig } from "./types";
|
|
|
|
export interface ImageDisplayConfigPanelProps {
|
|
config: ImageDisplayConfig;
|
|
onChange: (config: Partial<ImageDisplayConfig>) => void;
|
|
}
|
|
|
|
/**
|
|
* ImageDisplay 설정 패널
|
|
* 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
|
|
*/
|
|
export const ImageDisplayConfigPanel: React.FC<ImageDisplayConfigPanelProps> = ({
|
|
config,
|
|
onChange,
|
|
}) => {
|
|
const handleChange = (key: keyof ImageDisplayConfig, value: any) => {
|
|
onChange({ [key]: value });
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="text-sm font-medium">
|
|
image-display 설정
|
|
</div>
|
|
|
|
{/* file 관련 설정 */}
|
|
<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>
|
|
);
|
|
};
|