컴포넌트 화면편집기에 배치

2025-09-10 14:09:32 +09:00
parent 3bf694ce24
commit 01860df8d7
56 changed files with 4572 additions and 778 deletions
--- a/frontend/components/screen/config-panels/CardConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/CardConfigPanel.tsx
@@ -0,0 +1,117 @@
+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";
+
+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>
+          <Input
+            id="background-color"
+            type="color"
+            value={config.backgroundColor || "#ffffff"}
+            onChange={(e) => handleConfigChange("backgroundColor", e.target.value)}
+          />
+        </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>
+  );
+};