94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { ComponentData } from "@/types/screen";
|
|
|
|
interface ButtonConfigPanelProps {
|
|
component: ComponentData;
|
|
onUpdateProperty: (path: string, value: any) => void;
|
|
}
|
|
|
|
export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component, onUpdateProperty }) => {
|
|
const config = component.componentConfig || {};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label htmlFor="button-text">버튼 텍스트</Label>
|
|
<Input
|
|
id="button-text"
|
|
value={config.text || "버튼"}
|
|
onChange={(e) => onUpdateProperty("componentConfig.text", e.target.value)}
|
|
placeholder="버튼 텍스트를 입력하세요"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="button-variant">버튼 스타일</Label>
|
|
<Select
|
|
value={config.variant || "default"}
|
|
onValueChange={(value) => onUpdateProperty("componentConfig.variant", value)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="버튼 스타일 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="primary">기본 (Primary)</SelectItem>
|
|
<SelectItem value="secondary">보조 (Secondary)</SelectItem>
|
|
<SelectItem value="danger">위험 (Danger)</SelectItem>
|
|
<SelectItem value="success">성공 (Success)</SelectItem>
|
|
<SelectItem value="outline">외곽선 (Outline)</SelectItem>
|
|
<SelectItem value="ghost">고스트 (Ghost)</SelectItem>
|
|
<SelectItem value="link">링크 (Link)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="button-size">버튼 크기</Label>
|
|
<Select
|
|
value={config.size || "default"}
|
|
onValueChange={(value) => onUpdateProperty("componentConfig.size", value)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="버튼 크기 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="small">작음 (Small)</SelectItem>
|
|
<SelectItem value="default">기본 (Default)</SelectItem>
|
|
<SelectItem value="large">큼 (Large)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="button-action">버튼 액션</Label>
|
|
<Select
|
|
value={config.action || "custom"}
|
|
onValueChange={(value) => onUpdateProperty("componentConfig.action", value)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="버튼 액션 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="save">저장</SelectItem>
|
|
<SelectItem value="cancel">취소</SelectItem>
|
|
<SelectItem value="delete">삭제</SelectItem>
|
|
<SelectItem value="edit">수정</SelectItem>
|
|
<SelectItem value="add">추가</SelectItem>
|
|
<SelectItem value="search">검색</SelectItem>
|
|
<SelectItem value="reset">초기화</SelectItem>
|
|
<SelectItem value="submit">제출</SelectItem>
|
|
<SelectItem value="close">닫기</SelectItem>
|
|
<SelectItem value="custom">사용자 정의</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|