120 lines
4.5 KiB
TypeScript
120 lines
4.5 KiB
TypeScript
import React from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { ComponentData } from "@/types/screen";
|
|
import { ColorPickerWithTransparent } from "../common/ColorPickerWithTransparent";
|
|
|
|
interface CardConfigPanelProps {
|
|
component: ComponentData;
|
|
onUpdateProperty: (path: string, value: any) => void;
|
|
}
|
|
|
|
export const CardConfigPanel: React.FC<CardConfigPanelProps> = ({ component, onUpdateProperty }) => {
|
|
const config = component.componentConfig || {};
|
|
|
|
const handleConfigChange = (key: string, value: any) => {
|
|
onUpdateProperty(`componentConfig.${key}`, value);
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-sm font-medium">카드 설정</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{/* 카드 제목 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="card-title">카드 제목</Label>
|
|
<Input
|
|
id="card-title"
|
|
placeholder="카드 제목을 입력하세요"
|
|
value={config.title || "카드 제목"}
|
|
onChange={(e) => handleConfigChange("title", e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* 카드 내용 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="card-content">카드 내용</Label>
|
|
<Textarea
|
|
id="card-content"
|
|
placeholder="카드 내용을 입력하세요"
|
|
value={config.content || "카드 내용 영역"}
|
|
onChange={(e) => handleConfigChange("content", e.target.value)}
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
|
|
{/* 카드 스타일 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="card-variant">카드 스타일</Label>
|
|
<Select value={config.variant || "default"} onValueChange={(value) => handleConfigChange("variant", value)}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="카드 스타일 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="default">기본 (Default)</SelectItem>
|
|
<SelectItem value="outlined">테두리 (Outlined)</SelectItem>
|
|
<SelectItem value="elevated">그림자 (Elevated)</SelectItem>
|
|
<SelectItem value="filled">채움 (Filled)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 헤더 표시 여부 */}
|
|
<div className="flex items-center space-x-2">
|
|
<Switch
|
|
id="show-header"
|
|
checked={config.showHeader !== false}
|
|
onCheckedChange={(checked) => handleConfigChange("showHeader", checked)}
|
|
/>
|
|
<Label htmlFor="show-header">헤더 표시</Label>
|
|
</div>
|
|
|
|
{/* 패딩 설정 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="card-padding">패딩</Label>
|
|
<Select value={config.padding || "default"} onValueChange={(value) => handleConfigChange("padding", value)}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="패딩 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="none">없음 (None)</SelectItem>
|
|
<SelectItem value="small">작게 (Small)</SelectItem>
|
|
<SelectItem value="default">기본 (Default)</SelectItem>
|
|
<SelectItem value="large">크게 (Large)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 배경색 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="background-color">배경색</Label>
|
|
<ColorPickerWithTransparent
|
|
id="background-color"
|
|
value={config.backgroundColor}
|
|
onChange={(value) => handleConfigChange("backgroundColor", value)}
|
|
defaultColor="#ffffff"
|
|
placeholder="#ffffff"
|
|
/>
|
|
</div>
|
|
|
|
{/* 테두리 반경 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="border-radius">테두리 반경</Label>
|
|
<Input
|
|
id="border-radius"
|
|
placeholder="8px"
|
|
value={config.borderRadius || "8px"}
|
|
onChange={(e) => handleConfigChange("borderRadius", e.target.value)}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|