컬럼 세부 타입 설정

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

@@ -81,22 +81,118 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
   // DOM 안전한 props만 필터링
   const safeDomProps = filterDOMProps(domProps);
 
+  // webType에 따른 step 값 결정
+  const webType = component.componentConfig?.webType || "number";
+  const defaultStep = webType === "decimal" ? "0.01" : "1";
+  const step = componentConfig.step !== undefined ? componentConfig.step : defaultStep;
+
+  // 숫자 값 가져오기
+  const rawValue =
+    externalValue !== undefined
+      ? externalValue
+      : isInteractive && formData && component.columnName
+        ? formData[component.columnName] || ""
+        : component.value || "";
+
+  // 천 단위 구분자 추가 함수
+  const formatNumberWithCommas = (value: string | number): string => {
+    if (!value) return "";
+    const num = typeof value === "string" ? parseFloat(value) : value;
+    if (isNaN(num)) return String(value);
+    return num.toLocaleString("ko-KR");
+  };
+
+  // 천 단위 구분자 제거 함수
+  const removeCommas = (value: string): string => {
+    return value.replace(/,/g, "");
+  };
+
+  // Currency 타입 전용 UI
+  if (webType === "currency") {
+    return (
+      <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
+        {/* 라벨 렌더링 */}
+        {component.label && component.style?.labelDisplay !== false && (
+          <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
+            {component.label}
+            {component.required && <span className="text-red-500">*</span>}
+          </label>
+        )}
+
+        <div className="flex h-10 w-full items-center gap-1">
+          {/* 통화 기호 */}
+          <span className="pl-2 text-base font-semibold text-green-600">₩</span>
+
+          {/* 숫자 입력 */}
+          <input
+            type="text"
+            value={formatNumberWithCommas(rawValue)}
+            placeholder="0"
+            disabled={componentConfig.disabled || false}
+            readOnly={componentConfig.readonly || false}
+            onChange={(e) => {
+              const inputValue = removeCommas(e.target.value);
+              const numericValue = inputValue.replace(/[^0-9.]/g, "");
+
+              if (isInteractive && onFormDataChange && component.columnName) {
+                onFormDataChange(component.columnName, numericValue);
+              }
+            }}
+            className={`h-full flex-1 rounded-md border px-3 py-2 text-right text-base font-semibold transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-green-600"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  // Percentage 타입 전용 UI
+  if (webType === "percentage") {
+    return (
+      <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
+        {/* 라벨 렌더링 */}
+        {component.label && component.style?.labelDisplay !== false && (
+          <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
+            {component.label}
+            {component.required && <span className="text-red-500">*</span>}
+          </label>
+        )}
+
+        <div className="flex h-10 w-full items-center gap-1">
+          {/* 숫자 입력 */}
+          <input
+            type="text"
+            value={rawValue}
+            placeholder="0"
+            disabled={componentConfig.disabled || false}
+            readOnly={componentConfig.readonly || false}
+            onChange={(e) => {
+              const numericValue = e.target.value.replace(/[^0-9.]/g, "");
+              const num = parseFloat(numericValue);
+
+              // 0-100 범위 제한
+              if (num > 100) return;
+
+              if (isInteractive && onFormDataChange && component.columnName) {
+                onFormDataChange(component.columnName, numericValue);
+              }
+            }}
+            className={`h-full flex-1 rounded-md border px-3 py-2 text-right text-base font-semibold transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-blue-600"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+          />
+
+          {/* 퍼센트 기호 */}
+          <span className="pr-2 text-base font-semibold text-blue-600">%</span>
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <div style={componentStyle} className={className} {...safeDomProps}>
+    <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
       {/* 라벨 렌더링 */}
       {component.label && component.style?.labelDisplay !== false && (
-        <label
-          style={{
-            position: "absolute",
-            top: "-25px",
-            left: "0px",
-            fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
-            fontWeight: "500",
-          }}
-        >
+        <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
           {component.label}
-          {component.required && <span style={{ color: "#ef4444" }}>*</span>}
+          {component.required && <span className="text-red-500">*</span>}
         </label>
       )}
 
@@ -118,28 +214,8 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
         readOnly={componentConfig.readonly || false}
         min={componentConfig.min}
         max={componentConfig.max}
-        step={componentConfig.step || 1}
-        style={{
-          width: "100%",
-          height: "100%",
-          border: "1px solid #d1d5db",
-          borderRadius: "8px",
-          padding: "8px 12px",
-          fontSize: "14px",
-          outline: "none",
-          transition: "all 0.2s ease-in-out",
-          boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-          // isInteractive 모드에서는 사용자 스타일 우선 적용
-          ...(isInteractive && component.style ? component.style : {}),
-        }}
-        onFocus={(e) => {
-          e.target.style.borderColor = "#f97316";
-          e.target.style.boxShadow = "0 0 0 3px rgba(249, 115, 22, 0.1)";
-        }}
-        onBlur={(e) => {
-          e.target.style.borderColor = "#d1d5db";
-          e.target.style.boxShadow = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
-        }}
+        step={step}
+        className={`h-10 w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
         onClick={handleClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}