플로우 구현

frontend/lib/registry/components/flow-widget/index.ts

@@ -0,0 +1,40 @@
+"use client";
+
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import { FlowWidget } from "@/components/screen/widgets/FlowWidget";
+import { FlowWidgetConfigPanel } from "@/components/screen/config-panels/FlowWidgetConfigPanel";
+
+/**
+ * FlowWidget 컴포넌트 정의
+ * 플로우 관리 시스템의 플로우를 화면에 표시
+ */
+export const FlowWidgetDefinition = createComponentDefinition({
+  id: "flow-widget",
+  name: "플로우 위젯",
+  nameEng: "Flow Widget",
+  description: "플로우 관리 시스템의 플로우를 화면에 표시합니다",
+  category: ComponentCategory.DISPLAY,
+  webType: "text", // 기본 웹타입 (필수)
+  component: FlowWidget,
+  defaultConfig: {
+    flowId: undefined,
+    flowName: undefined,
+    showStepCount: true,
+    allowDataMove: false,
+    displayMode: "horizontal",
+  },
+  defaultSize: {
+    width: 1200,
+    height: 120,
+    gridColumnSpan: "full", // 전체 너비 사용
+  },
+  configPanel: FlowWidgetConfigPanel,
+  icon: "Workflow",
+  tags: ["플로우", "워크플로우", "프로세스", "상태"],
+  version: "1.0.0",
+  author: "개발팀",
+  documentation: "",
+});
+
+// 컴포넌트는 FlowWidgetRenderer에서 자동 등록됩니다