테스트 프로젝트 테이블 생성 및 오류들 수정

frontend/lib/registry/components/text-input/TextInputComponent.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { ComponentRendererProps } from "@/types/component";
+import { AutoGenerationConfig } from "@/types/screen";
 import { TextInputConfig } from "./types";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
+import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
 
 export interface TextInputComponentProps extends ComponentRendererProps {
   config?: TextInputConfig;
@@ -34,18 +36,112 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
     ...component.config,
   } as TextInputConfig;
 
+  // 자동생성 설정 (props에서 전달받은 값 우선 사용)
+  const autoGeneration: AutoGenerationConfig = props.autoGeneration ||
+    component.autoGeneration ||
+    componentConfig.autoGeneration || {
+      type: "none",
+      enabled: false,
+    };
+
+  // 숨김 상태 (props에서 전달받은 값 우선 사용)
+  const isHidden = props.hidden !== undefined ? props.hidden : component.hidden || componentConfig.hidden || false;
+
+  // 자동생성된 값 상태
+  const [autoGeneratedValue, setAutoGeneratedValue] = useState<string>("");
+
+  // 테스트용: 컴포넌트 라벨에 "test"가 포함되면 강제로 UUID 자동생성 활성화
+  const testAutoGeneration = component.label?.toLowerCase().includes("test")
+    ? {
+        type: "uuid" as AutoGenerationType,
+        enabled: true,
+      }
+    : autoGeneration;
+
   console.log("🔧 텍스트 입력 컴포넌트 설정:", {
     config,
     componentConfig,
     component: component,
+    autoGeneration,
+    testAutoGeneration,
+    isTestMode: component.label?.toLowerCase().includes("test"),
+    isHidden,
+    isInteractive,
+    formData,
+    columnName: component.columnName,
+    currentFormValue: formData?.[component.columnName],
+    componentValue: component.value,
+    autoGeneratedValue,
   });
 
+  // 자동생성 값 생성 (컴포넌트 마운트 시 또는 폼 데이터 변경 시)
+  useEffect(() => {
+    console.log("🔄 자동생성 useEffect 실행:", {
+      enabled: testAutoGeneration.enabled,
+      type: testAutoGeneration.type,
+      isInteractive,
+      columnName: component.columnName,
+      hasFormData: !!formData,
+      hasOnFormDataChange: !!onFormDataChange,
+    });
+
+    if (testAutoGeneration.enabled && testAutoGeneration.type !== "none") {
+      // 폼 데이터에 이미 값이 있으면 자동생성하지 않음
+      const currentFormValue = formData?.[component.columnName];
+      const currentComponentValue = component.value;
+
+      console.log("🔍 자동생성 조건 확인:", {
+        currentFormValue,
+        currentComponentValue,
+        hasCurrentValue: !!(currentFormValue || currentComponentValue),
+        autoGeneratedValue,
+      });
+
+      // 자동생성된 값이 없고, 현재 값도 없을 때만 생성
+      if (!autoGeneratedValue && !currentFormValue && !currentComponentValue) {
+        const generatedValue = AutoGenerationUtils.generateValue(testAutoGeneration, component.columnName);
+        console.log("✨ 자동생성된 값:", generatedValue);
+
+        if (generatedValue) {
+          setAutoGeneratedValue(generatedValue);
+
+          // 폼 데이터에 자동생성된 값 설정 (인터랙티브 모드에서만)
+          if (isInteractive && onFormDataChange && component.columnName) {
+            console.log("📝 폼 데이터에 자동생성 값 설정:", {
+              columnName: component.columnName,
+              value: generatedValue,
+            });
+            onFormDataChange(component.columnName, generatedValue);
+          }
+        }
+      } else if (!autoGeneratedValue && testAutoGeneration.type !== "none") {
+        // 디자인 모드에서도 미리보기용 자동생성 값 표시
+        const previewValue = AutoGenerationUtils.generatePreviewValue(testAutoGeneration);
+        console.log("🎨 디자인 모드 미리보기 값:", previewValue);
+        setAutoGeneratedValue(previewValue);
+      } else {
+        console.log("⏭️ 이미 값이 있어서 자동생성 건너뜀:", {
+          hasAutoGenerated: !!autoGeneratedValue,
+          hasFormValue: !!currentFormValue,
+          hasComponentValue: !!currentComponentValue,
+        });
+      }
+    }
+  }, [testAutoGeneration, isInteractive, component.columnName, component.value, formData, onFormDataChange]);
+
   // 스타일 계산 (위치는 RealtimePreviewDynamic에서 처리하므로 제외)
   const componentStyle: React.CSSProperties = {
     width: "100%",
     height: "100%",
     ...component.style,
     ...style,
+    // 숨김 기능: 디자인 모드에서는 연하게, 실제 화면에서는 완전히 숨김
+    ...(isHidden && {
+      opacity: isDesignMode ? 0.4 : 0,
+      backgroundColor: isDesignMode ? "#f3f4f6" : "transparent",
+      pointerEvents: isDesignMode ? "auto" : "none",
+      display: isDesignMode ? "block" : "none",
+    }),
   };
 
   // 디자인 모드 스타일
@@ -105,15 +201,37 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
 
       <input
         type="text"
-        value={
-          isInteractive && formData && component.columnName
-            ? formData[component.columnName] || ""
-            : component.value || ""
+        value={(() => {
+          let displayValue = "";
+
+          if (isInteractive && formData && component.columnName) {
+            // 인터랙티브 모드: formData 우선, 없으면 자동생성 값
+            displayValue = formData[component.columnName] || autoGeneratedValue || "";
+          } else {
+            // 디자인 모드: component.value 우선, 없으면 자동생성 값
+            displayValue = component.value || autoGeneratedValue || "";
+          }
+
+          console.log("📄 Input 값 계산:", {
+            isInteractive,
+            hasFormData: !!formData,
+            columnName: component.columnName,
+            formDataValue: formData?.[component.columnName],
+            componentValue: component.value,
+            autoGeneratedValue,
+            finalDisplayValue: displayValue,
+          });
+
+          return displayValue;
+        })()}
+        placeholder={
+          testAutoGeneration.enabled && testAutoGeneration.type !== "none"
+            ? `자동생성: ${AutoGenerationUtils.getTypeDescription(testAutoGeneration.type)}`
+            : componentConfig.placeholder || ""
         }
-        placeholder={componentConfig.placeholder || ""}
         disabled={componentConfig.disabled || false}
         required={componentConfig.required || false}
-        readOnly={componentConfig.readonly || false}
+        readOnly={componentConfig.readonly || (testAutoGeneration.enabled && testAutoGeneration.type !== "none")}
         style={{
           width: "100%",
           height: "100%",