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

frontend/lib/registry/components/ProgressBarRenderer.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React from "react";
+import { ComponentData } from "@/types/screen";
+import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
+import { Progress } from "@/components/ui/progress";
+
+// 진행률 바 컴포넌트 렌더러
+const ProgressBarRenderer: ComponentRenderer = ({ component, ...props }) => {
+  const config = component.componentConfig || {};
+  const {
+    label = "진행률",
+    value = 65,
+    max = 100,
+    showPercentage = true,
+    showValue = true,
+    color = "#3b82f6",
+    style = {},
+  } = config;
+
+  const percentage = Math.round((value / max) * 100);
+
+  return (
+    <div className="flex h-full w-full flex-col justify-center p-4" style={style}>
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium text-gray-700">{label}</span>
+          <div className="flex items-center gap-2 text-sm text-gray-600">
+            {showValue && (
+              <span>
+                {value}/{max}
+              </span>
+            )}
+            {showPercentage && <span>({percentage}%)</span>}
+          </div>
+        </div>
+        <Progress
+          value={percentage}
+          className="h-2"
+          style={
+            {
+              "--progress-background": color,
+            } as React.CSSProperties
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+// 레지스트리에 등록
+componentRegistry.register("progress", ProgressBarRenderer);
+componentRegistry.register("progress-bar", ProgressBarRenderer);
+
+export { ProgressBarRenderer };