테스트테이블 생성 및 오류 수정

frontend/lib/registry/components/number-input/NumberInputComponent.tsx

@@ -3,9 +3,11 @@
 import React from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { NumberInputConfig } from "./types";
+import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 
 export interface NumberInputComponentProps extends ComponentRendererProps {
   config?: NumberInputConfig;
+  value?: any; // 외부에서 전달받는 값
 }
 
 /**
@@ -25,6 +27,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
   style,
   formData,
   onFormDataChange,
+  value: externalValue, // 외부에서 전달받은 값
   ...props
 }) => {
   // 컴포넌트 설정
@@ -74,10 +77,13 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
     ...domProps
   } = props;
 
+  // DOM 안전한 props만 필터링
+  const safeDomProps = filterDOMProps(domProps);
+
   return (
-    <div style={componentStyle} className={className} {...domProps}>
+    <div style={componentStyle} className={className} {...safeDomProps}>
       {/* 라벨 렌더링 */}
-      {component.label && (
+      {component.label && component.style?.labelDisplay !== false && (
         <label
           style={{
             position: "absolute",
@@ -86,17 +92,15 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
             fontSize: component.style?.labelFontSize || "14px",
             color: component.style?.labelColor || "#374151",
             fontWeight: "500",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
           }}
         >
           {component.label}
           {component.required && (
-            <span style={{
-              color: "#ef4444",
-              // isInteractive 모드에서는 사용자 스타일 우선 적용
-              ...(isInteractive && component.style ? component.style : {}),
-            }}>
+            <span
+              style={{
+                color: "#ef4444",
+              }}
+            >
               *
             </span>
           )}
@@ -105,7 +109,16 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
 
       <input
         type="number"
-        value={component.value || ""}
+        value={
+          // 1순위: 외부에서 전달받은 value (DynamicComponentRenderer에서 전달)
+          externalValue !== undefined
+            ? externalValue
+            : // 2순위: 인터랙티브 모드에서 formData
+              isInteractive && formData && component.columnName
+              ? formData[component.columnName] || ""
+              : // 3순위: 컴포넌트 자체 값
+                component.value || ""
+        }
         placeholder={componentConfig.placeholder || ""}
         disabled={componentConfig.disabled || false}
         required={componentConfig.required || false}
@@ -113,7 +126,8 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
         min={componentConfig.min}
         max={componentConfig.max}
         step={componentConfig.step || 1}
-        style={{width: "100%",
+        style={{
+          width: "100%",
           height: "100%",
           border: "1px solid #d1d5db",
           borderRadius: "4px",
@@ -121,13 +135,36 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
           fontSize: "14px",
           outline: "none",
           // isInteractive 모드에서는 사용자 스타일 우선 적용
-          ...(isInteractive && component.style ? component.style : {}),}}
+          ...(isInteractive && component.style ? component.style : {}),
+        }}
         onClick={handleClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
         onChange={(e) => {
-          if (component.onChange) {
-            component.onChange(e.target.value);
+          const newValue = e.target.value;
+          console.log("🎯 NumberInputComponent onChange 호출:", {
+            componentId: component.id,
+            columnName: component.columnName,
+            newValue,
+            isInteractive,
+            hasOnFormDataChange: !!onFormDataChange,
+            hasOnChange: !!props.onChange,
+          });
+
+          // isInteractive 모드에서는 formData 업데이트
+          if (isInteractive && onFormDataChange && component.columnName) {
+            console.log(`📤 NumberInputComponent -> onFormDataChange 호출: ${component.columnName} = "${newValue}"`);
+            onFormDataChange(component.columnName, newValue);
+          }
+          // 디자인 모드에서는 component.onChange 호출
+          else if (component.onChange) {
+            console.log(`📤 NumberInputComponent -> component.onChange 호출: ${newValue}`);
+            component.onChange(newValue);
+          }
+          // props.onChange가 있으면 호출 (호환성)
+          else if (props.onChange) {
+            console.log(`📤 NumberInputComponent -> props.onChange 호출: ${newValue}`);
+            props.onChange(newValue);
           }
         }}
       />