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

frontend/components/screen/config-panels/ProgressBarConfigPanel.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import React from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { ComponentData } from "@/types/screen";
+
+interface ProgressBarConfigPanelProps {
+  component: ComponentData;
+  onUpdateProperty: (path: string, value: any) => void;
+}
+
+export const ProgressBarConfigPanel: React.FC<ProgressBarConfigPanelProps> = ({ component, onUpdateProperty }) => {
+  const config = component.componentConfig || {};
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <Label htmlFor="progress-label">라벨</Label>
+        <Input
+          id="progress-label"
+          value={config.label || "진행률"}
+          onChange={(e) => onUpdateProperty("componentConfig.label", e.target.value)}
+          placeholder="진행률 라벨을 입력하세요"
+        />
+      </div>
+
+      <div>
+        <Label htmlFor="progress-value">현재 값</Label>
+        <Input
+          id="progress-value"
+          type="number"
+          value={config.value || 65}
+          onChange={(e) => onUpdateProperty("componentConfig.value", parseInt(e.target.value) || 0)}
+          placeholder="현재 값"
+          min="0"
+        />
+      </div>
+
+      <div>
+        <Label htmlFor="progress-max">최대 값</Label>
+        <Input
+          id="progress-max"
+          type="number"
+          value={config.max || 100}
+          onChange={(e) => onUpdateProperty("componentConfig.max", parseInt(e.target.value) || 100)}
+          placeholder="최대 값"
+          min="1"
+        />
+      </div>
+
+      <div>
+        <Label htmlFor="progress-color">진행률 색상</Label>
+        <Input
+          id="progress-color"
+          type="color"
+          value={config.color || "#3b82f6"}
+          onChange={(e) => onUpdateProperty("componentConfig.color", e.target.value)}
+        />
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <Switch
+          id="show-percentage"
+          checked={config.showPercentage ?? true}
+          onCheckedChange={(checked) => onUpdateProperty("componentConfig.showPercentage", checked)}
+        />
+        <Label htmlFor="show-percentage">퍼센트 표시</Label>
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <Switch
+          id="show-value"
+          checked={config.showValue ?? true}
+          onCheckedChange={(checked) => onUpdateProperty("componentConfig.showValue", checked)}
+        />
+        <Label htmlFor="show-value">값 표시</Label>
+      </div>
+    </div>
+  );
+};