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

frontend/lib/registry/components/DataTableRenderer.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import React from "react";
+import { ComponentData } from "@/types/screen";
+import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
+import { DataTableTemplate } from "@/components/screen/templates/DataTableTemplate";
+
+// 데이터 테이블 컴포넌트 렌더러
+const DataTableRenderer: ComponentRenderer = ({ component, ...props }) => {
+  const dataTableComponent = component as any; // DataTableComponent 타입
+
+  return (
+    <DataTableTemplate
+      title={dataTableComponent.title || dataTableComponent.label}
+      description={`${dataTableComponent.label}을 표시하는 데이터 테이블`}
+      columns={dataTableComponent.columns}
+      filters={dataTableComponent.filters}
+      pagination={dataTableComponent.pagination}
+      actions={
+        dataTableComponent.actions || {
+          showSearchButton: dataTableComponent.showSearchButton ?? true,
+          searchButtonText: dataTableComponent.searchButtonText || "검색",
+          enableExport: dataTableComponent.enableExport ?? true,
+          enableRefresh: dataTableComponent.enableRefresh ?? true,
+          enableAdd: dataTableComponent.enableAdd ?? true,
+          enableEdit: dataTableComponent.enableEdit ?? true,
+          enableDelete: dataTableComponent.enableDelete ?? true,
+          addButtonText: dataTableComponent.addButtonText || "추가",
+          editButtonText: dataTableComponent.editButtonText || "수정",
+          deleteButtonText: dataTableComponent.deleteButtonText || "삭제",
+        }
+      }
+      style={component.style}
+      className="h-full w-full"
+      isPreview={true}
+    />
+  );
+};
+
+// 레지스트리에 등록
+componentRegistry.register("datatable", DataTableRenderer);
+
+export { DataTableRenderer };