테이블 템플릿 제작

frontend/components/screen/InteractiveScreenViewer.tsx

@@ -14,6 +14,7 @@ import { ko } from "date-fns/locale";
 import {
   ComponentData,
   WidgetComponent,
+  DataTableComponent,
   TextTypeConfig,
   NumberTypeConfig,
   DateTypeConfig,
@@ -25,6 +26,7 @@ import {
   CodeTypeConfig,
   EntityTypeConfig,
 } from "@/types/screen";
+import { InteractiveDataTable } from "./InteractiveDataTable";
 
 interface InteractiveScreenViewerProps {
   component: ComponentData;
@@ -70,6 +72,20 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
   // 실제 사용 가능한 위젯 렌더링
   const renderInteractiveWidget = (comp: ComponentData) => {
+    // 데이터 테이블 컴포넌트 처리
+    if (comp.type === "datatable") {
+      return (
+        <InteractiveDataTable
+          component={comp as DataTableComponent}
+          className="h-full w-full"
+          style={{
+            width: "100%",
+            height: "100%",
+          }}
+        />
+      );
+    }
+
     const { widgetType, label, placeholder, required, readonly, columnName } = comp;
     const fieldName = columnName || comp.id;
     const currentValue = formData[fieldName] || "";
@@ -686,18 +702,40 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
   }
 
   // 일반 위젯 컴포넌트
+  // 템플릿 컴포넌트 목록 (자체적으로 제목을 가지므로 라벨 불필요)
+  const templateTypes = ["datatable"];
+
+  // 라벨 표시 여부 계산
+  const shouldShowLabel =
+    component.style?.labelDisplay !== false &&
+    (component.label || component.style?.labelText) &&
+    !templateTypes.includes(component.type); // 템플릿 컴포넌트는 라벨 표시 안함
+
+  const labelText = component.style?.labelText || component.label || "";
+
+  // 라벨 스타일 적용
+  const labelStyle = {
+    fontSize: component.style?.labelFontSize || "14px",
+    color: component.style?.labelColor || "#374151",
+    fontWeight: component.style?.labelFontWeight || "500",
+    backgroundColor: component.style?.labelBackgroundColor || "transparent",
+    padding: component.style?.labelPadding || "0",
+    borderRadius: component.style?.labelBorderRadius || "0",
+    marginBottom: component.style?.labelMarginBottom || "4px",
+  };
+
   return (
     <div className="h-full w-full">
-      {/* 라벨이 있는 경우 표시 */}
-      {component.label && (
-        <label className="mb-1 block text-sm font-medium text-gray-700">
-          {component.label}
-          {component.required && <span className="ml-1 text-red-500">*</span>}
-        </label>
+      {/* 라벨이 있는 경우 표시 (데이터 테이블 제외) */}
+      {shouldShowLabel && (
+        <div className="block" style={labelStyle}>
+          {labelText}
+          {component.required && <span style={{ color: "#f97316", marginLeft: "2px" }}>*</span>}
+        </div>
       )}
 
       {/* 실제 위젯 */}
-      <div className={component.label ? "flex-1" : "h-full w-full"}>{renderInteractiveWidget(component)}</div>
+      <div className={shouldShowLabel ? "flex-1" : "h-full w-full"}>{renderInteractiveWidget(component)}</div>
     </div>
   );
 };