컬럼 세부 타입 설정

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

@@ -6,6 +6,7 @@ import { AutoGenerationConfig } from "@/types/screen";
 import { TextInputConfig } from "./types";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
+import { INPUT_CLASSES, cn, getInputClasses } from "../common/inputStyles";
 
 export interface TextInputComponentProps extends ComponentRendererProps {
   config?: TextInputConfig;
@@ -181,27 +182,431 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
   // DOM 안전한 props만 필터링
   const safeDomProps = filterDOMProps(domProps);
 
+  // webType에 따른 실제 input type 및 검증 규칙 결정
+  const webType = component.componentConfig?.webType || "text";
+  const inputType = (() => {
+    switch (webType) {
+      case "email":
+        return "email";
+      case "tel":
+        return "tel";
+      case "url":
+        return "url";
+      case "password":
+        return "password";
+      case "textarea":
+        return "text"; // textarea는 별도 처리
+      case "text":
+      default:
+        return "text";
+    }
+  })();
+
+  // webType별 검증 패턴
+  const validationPattern = (() => {
+    switch (webType) {
+      case "tel":
+        // 한국 전화번호 형식: 010-1234-5678, 02-1234-5678 등
+        return "[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}";
+      default:
+        return undefined;
+    }
+  })();
+
+  // webType별 placeholder
+  const defaultPlaceholder = (() => {
+    switch (webType) {
+      case "email":
+        return "example@email.com";
+      case "tel":
+        return "010-1234-5678";
+      case "url":
+        return "https://example.com";
+      case "password":
+        return "비밀번호를 입력하세요";
+      case "textarea":
+        return "내용을 입력하세요";
+      default:
+        return "텍스트를 입력하세요";
+    }
+  })();
+
+  // 이메일 입력 상태 (username@domain 분리)
+  const [emailUsername, setEmailUsername] = React.useState("");
+  const [emailDomain, setEmailDomain] = React.useState("gmail.com");
+  const [isCustomDomain, setIsCustomDomain] = React.useState(false);
+
+  // 전화번호 입력 상태 (3개 부분으로 분리)
+  const [telPart1, setTelPart1] = React.useState("");
+  const [telPart2, setTelPart2] = React.useState("");
+  const [telPart3, setTelPart3] = React.useState("");
+
+  // URL 입력 상태 (프로토콜 + 도메인)
+  const [urlProtocol, setUrlProtocol] = React.useState("https://");
+  const [urlDomain, setUrlDomain] = React.useState("");
+
+  // 이메일 도메인 목록
+  const emailDomains = ["gmail.com", "naver.com", "daum.net", "kakao.com", "직접입력"];
+
+  // 이메일 값 동기화
+  React.useEffect(() => {
+    if (webType === "email") {
+      const currentValue =
+        isInteractive && formData && component.columnName ? formData[component.columnName] : component.value || "";
+
+      if (currentValue && typeof currentValue === "string" && currentValue.includes("@")) {
+        const [username, domain] = currentValue.split("@");
+        setEmailUsername(username || "");
+        if (domain && emailDomains.includes(domain)) {
+          setEmailDomain(domain);
+          setIsCustomDomain(false);
+        } else {
+          setEmailDomain(domain || "");
+          setIsCustomDomain(true);
+        }
+      }
+    }
+  }, [webType, component.value, formData, component.columnName, isInteractive]);
+
+  // 전화번호 값 동기화
+  React.useEffect(() => {
+    if (webType === "tel") {
+      const currentValue =
+        isInteractive && formData && component.columnName ? formData[component.columnName] : component.value || "";
+
+      if (currentValue && typeof currentValue === "string") {
+        const parts = currentValue.split("-");
+        setTelPart1(parts[0] || "");
+        setTelPart2(parts[1] || "");
+        setTelPart3(parts[2] || "");
+      }
+    }
+  }, [webType, component.value, formData, component.columnName, isInteractive]);
+
+  // URL 값 동기화
+  React.useEffect(() => {
+    if (webType === "url") {
+      const currentValue =
+        isInteractive && formData && component.columnName ? formData[component.columnName] : component.value || "";
+
+      if (currentValue && typeof currentValue === "string") {
+        if (currentValue.startsWith("https://")) {
+          setUrlProtocol("https://");
+          setUrlDomain(currentValue.substring(8));
+        } else if (currentValue.startsWith("http://")) {
+          setUrlProtocol("http://");
+          setUrlDomain(currentValue.substring(7));
+        } else {
+          setUrlDomain(currentValue);
+        }
+      }
+    }
+  }, [webType, component.value, formData, component.columnName, isInteractive]);
+
+  // 이메일 타입 전용 UI
+  if (webType === "email") {
+    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-2">
+          {/* 사용자명 입력 */}
+          <input
+            type="text"
+            value={emailUsername}
+            placeholder="사용자명"
+            disabled={componentConfig.disabled || false}
+            readOnly={componentConfig.readonly || false}
+            onChange={(e) => {
+              const newUsername = e.target.value;
+              setEmailUsername(newUsername);
+              const fullEmail = `${newUsername}@${emailDomain}`;
+
+              if (isInteractive && formData && onFormDataChange && component.columnName) {
+                onFormDataChange({
+                  ...formData,
+                  [component.columnName]: fullEmail,
+                });
+              }
+            }}
+            className={`h-full flex-1 rounded-md border px-3 py-2 text-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"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+          />
+
+          {/* @ 구분자 */}
+          <span className="text-base font-medium text-gray-500">@</span>
+
+          {/* 도메인 선택/입력 */}
+          {isCustomDomain ? (
+            <input
+              type="text"
+              value={emailDomain}
+              placeholder="도메인"
+              disabled={componentConfig.disabled || false}
+              readOnly={componentConfig.readonly || false}
+              onChange={(e) => {
+                const newDomain = e.target.value;
+                setEmailDomain(newDomain);
+                const fullEmail = `${emailUsername}@${newDomain}`;
+
+                if (isInteractive && formData && onFormDataChange && component.columnName) {
+                  onFormDataChange({
+                    ...formData,
+                    [component.columnName]: fullEmail,
+                  });
+                }
+              }}
+              className={`h-full flex-1 rounded-md border px-3 py-2 text-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"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+            />
+          ) : (
+            <select
+              value={emailDomain}
+              disabled={componentConfig.disabled || false}
+              onChange={(e) => {
+                const newDomain = e.target.value;
+                if (newDomain === "직접입력") {
+                  setIsCustomDomain(true);
+                  setEmailDomain("");
+                } else {
+                  setEmailDomain(newDomain);
+                  const fullEmail = `${emailUsername}@${newDomain}`;
+
+                  if (isInteractive && formData && onFormDataChange && component.columnName) {
+                    onFormDataChange({
+                      ...formData,
+                      [component.columnName]: fullEmail,
+                    });
+                  }
+                }
+              }}
+              className={`h-full flex-1 cursor-pointer rounded-md border px-3 py-2 text-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"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+            >
+              {emailDomains.map((domain) => (
+                <option key={domain} value={domain}>
+                  {domain}
+                </option>
+              ))}
+            </select>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // 전화번호 타입 전용 UI
+  if (webType === "tel") {
+    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.5">
+          {/* 첫 번째 부분 (지역번호) */}
+          <input
+            type="text"
+            value={telPart1}
+            placeholder="010"
+            maxLength={3}
+            disabled={componentConfig.disabled || false}
+            readOnly={componentConfig.readonly || false}
+            onChange={(e) => {
+              const value = e.target.value.replace(/[^0-9]/g, "");
+              setTelPart1(value);
+              const fullTel = `${value}-${telPart2}-${telPart3}`;
+
+              if (isInteractive && formData && onFormDataChange && component.columnName) {
+                onFormDataChange({
+                  ...formData,
+                  [component.columnName]: fullTel,
+                });
+              }
+            }}
+            className={`h-full flex-1 rounded-md border px-3 py-2 text-center text-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"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+          />
+
+          <span className="text-base font-medium text-gray-500">-</span>
+
+          {/* 두 번째 부분 */}
+          <input
+            type="text"
+            value={telPart2}
+            placeholder="1234"
+            maxLength={4}
+            disabled={componentConfig.disabled || false}
+            readOnly={componentConfig.readonly || false}
+            onChange={(e) => {
+              const value = e.target.value.replace(/[^0-9]/g, "");
+              setTelPart2(value);
+              const fullTel = `${telPart1}-${value}-${telPart3}`;
+
+              if (isInteractive && formData && onFormDataChange && component.columnName) {
+                onFormDataChange({
+                  ...formData,
+                  [component.columnName]: fullTel,
+                });
+              }
+            }}
+            className={`h-full flex-1 rounded-md border px-3 py-2 text-center text-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"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+          />
+
+          <span className="text-base font-medium text-gray-500">-</span>
+
+          {/* 세 번째 부분 */}
+          <input
+            type="text"
+            value={telPart3}
+            placeholder="5678"
+            maxLength={4}
+            disabled={componentConfig.disabled || false}
+            readOnly={componentConfig.readonly || false}
+            onChange={(e) => {
+              const value = e.target.value.replace(/[^0-9]/g, "");
+              setTelPart3(value);
+              const fullTel = `${telPart1}-${telPart2}-${value}`;
+
+              if (isInteractive && formData && onFormDataChange && component.columnName) {
+                onFormDataChange({
+                  ...formData,
+                  [component.columnName]: fullTel,
+                });
+              }
+            }}
+            className={`h-full flex-1 rounded-md border px-3 py-2 text-center text-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"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  // URL 타입 전용 UI
+  if (webType === "url") {
+    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">
+          {/* 프로토콜 선택 */}
+          <select
+            value={urlProtocol}
+            disabled={componentConfig.disabled || false}
+            onChange={(e) => {
+              const newProtocol = e.target.value;
+              setUrlProtocol(newProtocol);
+              const fullUrl = `${newProtocol}${urlDomain}`;
+
+              if (isInteractive && formData && onFormDataChange && component.columnName) {
+                onFormDataChange({
+                  ...formData,
+                  [component.columnName]: fullUrl,
+                });
+              }
+            }}
+            className={`h-full w-[100px] cursor-pointer rounded-md border px-2 py-2 text-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"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+          >
+            <option value="https://">https://</option>
+            <option value="http://">http://</option>
+          </select>
+
+          {/* 도메인 입력 */}
+          <input
+            type="text"
+            value={urlDomain}
+            placeholder="www.example.com"
+            disabled={componentConfig.disabled || false}
+            readOnly={componentConfig.readonly || false}
+            onChange={(e) => {
+              const newDomain = e.target.value;
+              setUrlDomain(newDomain);
+              const fullUrl = `${urlProtocol}${newDomain}`;
+
+              if (isInteractive && formData && onFormDataChange && component.columnName) {
+                onFormDataChange({
+                  ...formData,
+                  [component.columnName]: fullUrl,
+                });
+              }
+            }}
+            className={`h-full flex-1 rounded-md border px-3 py-2 text-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"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  // textarea 타입인 경우 별도 렌더링
+  if (webType === "textarea") {
+    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>
+        )}
+
+        <textarea
+          value={(() => {
+            let displayValue = "";
+
+            if (isInteractive && formData && component.columnName) {
+              displayValue = formData[component.columnName] || autoGeneratedValue || "";
+            } else {
+              displayValue = component.value || autoGeneratedValue || "";
+            }
+
+            return displayValue;
+          })()}
+          placeholder={
+            testAutoGeneration.enabled && testAutoGeneration.type !== "none"
+              ? `자동생성: ${AutoGenerationUtils.getTypeDescription(testAutoGeneration.type)}`
+              : componentConfig.placeholder || defaultPlaceholder
+          }
+          disabled={componentConfig.disabled || false}
+          required={componentConfig.required || false}
+          readOnly={componentConfig.readonly || false}
+          onChange={(e) => {
+            if (isInteractive && formData && onFormDataChange && component.columnName) {
+              onFormDataChange({
+                ...formData,
+                [component.columnName]: e.target.value,
+              });
+            }
+          }}
+          className={`min-h-[80px] w-full resize-y rounded-md border px-3 py-2 text-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`}
+        />
+      </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>
       )}
 
       <input
-        type="text"
+        type={inputType}
         value={(() => {
           let displayValue = "";
 
@@ -228,32 +633,14 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
         placeholder={
           testAutoGeneration.enabled && testAutoGeneration.type !== "none"
             ? `자동생성: ${AutoGenerationUtils.getTypeDescription(testAutoGeneration.type)}`
-            : componentConfig.placeholder || ""
+            : componentConfig.placeholder || defaultPlaceholder
         }
+        pattern={validationPattern}
+        title={webType === "tel" ? "전화번호 형식: 010-1234-5678" : undefined}
         disabled={componentConfig.disabled || false}
         required={componentConfig.required || false}
         readOnly={componentConfig.readonly || (testAutoGeneration.enabled && testAutoGeneration.type !== "none")}
-        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)";
-        }}
+        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}