버튼 기능구현

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

@@ -16,12 +16,15 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
   component,
   isDesignMode = false,
   isSelected = false,
+  isInteractive = false,
   onClick,
   onDragStart,
   onDragEnd,
   config,
   className,
   style,
+  formData,
+  onFormDataChange,
   ...props
 }) => {
   // 컴포넌트 설정
@@ -30,6 +33,12 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
     ...component.config,
   } as TextInputConfig;
 
+  console.log("🔧 텍스트 입력 컴포넌트 설정:", {
+    config,
+    componentConfig,
+    component: component,
+  });
+
   // 스타일 계산 (위치는 RealtimePreviewDynamic에서 처리하므로 제외)
   const componentStyle: React.CSSProperties = {
     width: "100%",
@@ -64,6 +73,10 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
     size: _size,
     position: _position,
     style: _style,
+    screenId: _screenId,
+    tableName: _tableName,
+    onRefresh: _onRefresh,
+    onClose: _onClose,
     ...domProps
   } = props;
 
@@ -88,7 +101,11 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
 
       <input
         type="text"
-        value={component.value || ""}
+        value={
+          isInteractive && formData && component.columnName
+            ? formData[component.columnName] || ""
+            : component.value || ""
+        }
         placeholder={componentConfig.placeholder || ""}
         disabled={componentConfig.disabled || false}
         required={componentConfig.required || false}
@@ -101,13 +118,23 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
           padding: "8px 12px",
           fontSize: "14px",
           outline: "none",
+          // isInteractive 모드에서는 사용자 스타일 우선 적용
+          ...(isInteractive && component.style ? component.style : {}),
         }}
         onClick={handleClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
         onChange={(e) => {
+          const newValue = e.target.value;
+
+          // isInteractive 모드에서는 formData 업데이트
+          if (isInteractive && onFormDataChange && component.columnName) {
+            onFormDataChange(component.columnName, newValue);
+          }
+
+          // 기존 onChange 핸들러도 호출
           if (props.onChange) {
-            props.onChange(e.target.value);
+            props.onChange(newValue);
           }
         }}
       />