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

frontend/lib/registry/components/BadgeRenderer.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import React from "react";
+import { ComponentData } from "@/types/screen";
+import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
+import { Badge } from "@/components/ui/badge";
+
+// 뱃지 컴포넌트 렌더러
+const BadgeRenderer: ComponentRenderer = ({ component, ...props }) => {
+  const config = component.componentConfig || {};
+  const {
+    text = "상태",
+    variant = "default", // default, secondary, destructive, outline
+    size = "default",
+    style = {},
+  } = config;
+
+  const badgeVariant = variant as "default" | "secondary" | "destructive" | "outline";
+
+  return (
+    <div className="flex h-full w-full items-center justify-center" style={style}>
+      <Badge variant={badgeVariant} className="pointer-events-none">
+        {text}
+      </Badge>
+    </div>
+  );
+};
+
+// 레지스트리에 등록
+componentRegistry.register("badge", BadgeRenderer);
+componentRegistry.register("badge-status", BadgeRenderer);
+
+export { BadgeRenderer };