@simplysm/solid 13.0.28 → 13.0.30

package/src/components/form-control/field/TextInput.tsx

@@ -1,19 +1,18 @@
 import clsx from "clsx";
-import { type Component, createEffect, type JSX, Show, splitProps } from "solid-js";
+import { type Component, createEffect, createMemo, type JSX, Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
+import type { IconProps as TablerIconProps } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { createIMEHandler } from "../../../hooks/createIMEHandler";
 import {
-  type FieldSize,
-  fieldBaseClass,
-  fieldSizeClasses,
-  fieldInsetClass,
-  fieldInsetHeightClass,
-  fieldInsetSizeHeightClasses,
-  fieldDisabledClass,
+  fieldGapClasses,
   fieldInputClass,
+  type FieldSize,
+  getFieldWrapperClass,
 } from "./Field.styles";
-import { textMuted } from "../../../styles/tokens.styles";
+import { PlaceholderFallback } from "./FieldPlaceholder";
+import { Icon } from "../../display/Icon";
+import { Invalid } from "../../form-control/Invalid";
 
 type TextInputType = "text" | "password" | "email";
 
@@ -34,7 +33,7 @@ export interface TextInputProps {
   title?: string;
 
   /** 자동완성 */
-  autocomplete?: string;
+  autocomplete?: JSX.HTMLAutocomplete;
 
   /** 비활성화 */
   disabled?: boolean;
@@ -51,6 +50,27 @@ export interface TextInputProps {
   /** 입력 포맷 (예: XXX-XXXX-XXXX) */
   format?: string;
 
+  /** 접두 아이콘 */
+  prefixIcon?: Component<TablerIconProps>;
+
+  /** 필수 입력 여부 */
+  required?: boolean;
+
+  /** 최소 길이 */
+  minLength?: number;
+
+  /** 최대 길이 */
+  maxLength?: number;
+
+  /** 입력 패턴 (정규식 문자열) */
+  pattern?: string;
+
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: string) => string | undefined;
+
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
+
   /** 커스텀 class */
   class?: string;
 
@@ -94,8 +114,7 @@ function removeFormat(formattedValue: string, format: string): string {
   let result = "";
 
   for (let i = 0; i < formattedValue.length; i++) {
-    const formatChar = format[i];
-    if (formatChar === "X") {
+    if (i >= format.length || format[i] === "X") {
       result += formattedValue[i];
     }
     // 포맷 문자가 아닌 경우 (구분자) 스킵
@@ -132,6 +151,13 @@ export const TextInput: Component<TextInputProps> = (props) => {
     "size",
     "inset",
     "format",
+    "prefixIcon",
+    "required",
+    "minLength",
+    "maxLength",
+    "pattern",
+    "validate",
+    "touchMode",
     "class",
     "style",
   ]);
@@ -186,19 +212,23 @@ export const TextInput: Component<TextInputProps> = (props) => {
 
   // wrapper 클래스 (includeCustomClass=false일 때 local.class 제외 — inset에서 outer에만 적용)
   const getWrapperClass = (includeCustomClass: boolean) =>
-    twMerge(
-      fieldBaseClass,
-      local.size && fieldSizeClasses[local.size],
-      local.disabled && fieldDisabledClass,
-      local.inset && fieldInsetClass,
-      local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),
-
-      includeCustomClass && local.class,
-    );
+    getFieldWrapperClass({
+      size: local.size,
+      disabled: local.disabled,
+      inset: local.inset,
+      includeCustomClass: includeCustomClass && local.class,
+      extra: local.prefixIcon && fieldGapClasses[local.size ?? "default"],
+    });
 
   // 편집 가능 여부
   const isEditable = () => !local.disabled && !local.readonly;
 
+  const prefixIconEl = () => (
+    <Show when={local.prefixIcon}>
+      <Icon icon={local.prefixIcon!} class="shrink-0 opacity-70" />
+    </Show>
+  );
+
   // disabled 전환 시 미커밋 조합 값 flush
   createEffect(() => {
     if (!isEditable()) {
@@ -206,76 +236,93 @@ export const TextInput: Component<TextInputProps> = (props) => {
     }
   });
 
+  // 유효성 검사 메시지 (순서대로 검사, 최초 실패 메시지 반환)
+  const errorMsg = createMemo(() => {
+    const v = value();
+    if (local.required && !v) return "필수 입력 항목입니다";
+    if (v) {
+      if (local.minLength != null && v.length < local.minLength)
+        return `최소 ${local.minLength}자 이상 입력하세요`;
+      if (local.maxLength != null && v.length > local.maxLength)
+        return `최대 ${local.maxLength}자까지 입력 가능합니다`;
+      if (local.pattern != null && !new RegExp(local.pattern).test(v))
+        return "입력 형식이 올바르지 않습니다";
+    }
+    return local.validate?.(v);
+  });
+
   return (
-    <Show
-      when={local.inset}
-      fallback={
-        // standalone 모드: 기존 Show 패턴 유지
-        <Show
-          when={isEditable()}
-          fallback={
-            <div
-              {...rest}
-              data-text-field
-              class={twMerge(getWrapperClass(true), "sd-text-field")}
-              style={local.style}
-              title={local.title}
-            >
-              {displayValue() ||
-                (local.placeholder != null && local.placeholder !== "" ? (
-                  <span class={textMuted}>{local.placeholder}</span>
-                ) : (
-                  "\u00A0"
-                ))}
-            </div>
-          }
-        >
-          <div {...rest} data-text-field class={getWrapperClass(true)} style={local.style}>
-            <input
-              type={local.type ?? "text"}
-              class={fieldInputClass}
-              value={inputValue()}
-              placeholder={local.placeholder}
-              title={local.title}
-              autocomplete={local.autocomplete}
-              onInput={handleInput}
-              onCompositionStart={handleCompositionStart}
-              onCompositionEnd={handleCompositionEnd}
-            />
-          </div>
-        </Show>
-      }
+    <Invalid
+      message={errorMsg()}
+      variant={local.inset ? "dot" : "border"}
+      touchMode={local.touchMode}
     >
-      {/* inset 모드: dual-element overlay 패턴 */}
-      <div
-        {...rest}
-        data-text-field
-        class={twMerge(getWrapperClass(false), "relative", local.class)}
-        style={local.style}
+      <Show
+        when={local.inset}
+        fallback={
+          // standalone 모드: 기존 Show 패턴 유지
+          <Show
+            when={isEditable()}
+            fallback={
+              <div
+                {...rest}
+                data-text-field
+                class={twMerge(getWrapperClass(true), "sd-text-field")}
+                style={local.style}
+                title={local.title}
+              >
+                {prefixIconEl()}
+                <PlaceholderFallback value={displayValue()} placeholder={local.placeholder} />
+              </div>
+            }
+          >
+            <div {...rest} data-text-field class={getWrapperClass(true)} style={local.style}>
+              {prefixIconEl()}
+              <input
+                type={local.type ?? "text"}
+                class={fieldInputClass}
+                value={inputValue()}
+                placeholder={local.placeholder}
+                title={local.title}
+                autocomplete={local.autocomplete}
+                onInput={handleInput}
+                onCompositionStart={handleCompositionStart}
+                onCompositionEnd={handleCompositionEnd}
+              />
+            </div>
+          </Show>
+        }
       >
-        <div data-text-field-content style={{ visibility: isEditable() ? "hidden" : undefined }}>
-          {displayValue() ||
-            (local.placeholder != null && local.placeholder !== "" ? (
-              <span class={textMuted}>{local.placeholder}</span>
-            ) : (
-              "\u00A0"
-            ))}
-        </div>
-
-        <Show when={isEditable()}>
-          <input
-            type={local.type ?? "text"}
-            class={clsx(fieldInputClass, "absolute left-0 top-0 size-full", "px-2 py-1")}
-            value={inputValue()}
-            placeholder={local.placeholder}
+        {/* inset 모드: dual-element overlay 패턴 */}
+        <div {...rest} data-text-field class={clsx("relative", local.class)} style={local.style}>
+          <div
+            data-text-field-content
+            class={getWrapperClass(false)}
+            style={{ visibility: isEditable() ? "hidden" : undefined }}
             title={local.title}
-            autocomplete={local.autocomplete}
-            onInput={handleInput}
-            onCompositionStart={handleCompositionStart}
-            onCompositionEnd={handleCompositionEnd}
-          />
-        </Show>
-      </div>
-    </Show>
+          >
+            {prefixIconEl()}
+            <PlaceholderFallback value={displayValue()} placeholder={local.placeholder} />
+          </div>
+
+          <Show when={isEditable()}>
+            <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
+              {prefixIconEl()}
+              <input
+                type={local.type ?? "text"}
+                class={fieldInputClass}
+                value={inputValue()}
+                placeholder={local.placeholder}
+                title={local.title}
+                autocomplete={local.autocomplete}
+                onInput={handleInput}
+                onCompositionStart={handleCompositionStart}
+                onCompositionEnd={handleCompositionEnd}
+              />
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </Invalid>
   );
 };

package/src/components/form-control/field/Textarea.tsx

@@ -1,16 +1,11 @@
 import clsx from "clsx";
-import { type Component, createEffect, type JSX, Show, splitProps } from "solid-js";
+import { type Component, createEffect, createMemo, type JSX, Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { createIMEHandler } from "../../../hooks/createIMEHandler";
-import {
-  type FieldSize,
-  textAreaBaseClass as fieldTextAreaBaseClass,
-  textAreaSizeClasses,
-  fieldInsetClass,
-  fieldDisabledClass,
-} from "./Field.styles";
-import { textMuted } from "../../../styles/tokens.styles";
+import { type FieldSize, textAreaSizeClasses, getTextareaWrapperClass } from "./Field.styles";
+import { PlaceholderFallback } from "./FieldPlaceholder";
+import { Invalid } from "../../form-control/Invalid";
 
 export interface TextareaProps {
   /** 입력 값 */
@@ -40,6 +35,21 @@ export interface TextareaProps {
   /** 최소 줄 수 (기본값: 1) */
   minRows?: number;
 
+  /** 필수 입력 여부 */
+  required?: boolean;
+
+  /** 최소 길이 */
+  minLength?: number;
+
+  /** 최대 길이 */
+  maxLength?: number;
+
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: string) => string | undefined;
+
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
+
   /** 커스텀 class */
   class?: string;
 
@@ -79,6 +89,11 @@ export const Textarea: Component<TextareaProps> = (props) => {
     "size",
     "inset",
     "minRows",
+    "required",
+    "minLength",
+    "maxLength",
+    "validate",
+    "touchMode",
     "class",
     "style",
   ]);
@@ -128,21 +143,20 @@ export const Textarea: Component<TextareaProps> = (props) => {
   const contentForHeight = () => {
     const rows = local.minRows ?? 1;
     const val = displayValue();
-    const content = val !== "" && val.split("\n").length >= rows ? val : "\n".repeat(rows - 1) + "\u00A0";
+    const content =
+      val !== "" && val.split("\n").length >= rows ? val : "\n".repeat(rows - 1) + "\u00A0";
     // 마지막이 줄바꿈이면 빈 줄 높이 확보를 위해 공백 추가
     return content.endsWith("\n") ? content + "\u00A0" : content;
   };
 
   // wrapper 클래스 (includeCustomClass=false일 때 local.class 제외 — inset에서 outer에만 적용)
   const getWrapperClass = (includeCustomClass: boolean) =>
-    twMerge(
-      fieldTextAreaBaseClass,
-      local.size && textAreaSizeClasses[local.size],
-      local.disabled && fieldDisabledClass,
-      local.inset && fieldInsetClass,
-
-      includeCustomClass && local.class,
-    );
+    getTextareaWrapperClass({
+      size: local.size,
+      disabled: local.disabled,
+      inset: local.inset,
+      includeCustomClass: includeCustomClass && local.class,
+    });
 
   const getTextareaClass = () =>
     twMerge(textareaBaseClass, local.size && textAreaSizeClasses[local.size], local.inset && "p-0");
@@ -157,100 +171,113 @@ export const Textarea: Component<TextareaProps> = (props) => {
     }
   });
 
+  // 유효성 검사 메시지 (순서대로 검사, 최초 실패 메시지 반환)
+  const errorMsg = createMemo(() => {
+    const v = value();
+    if (local.required && !v) return "필수 입력 항목입니다";
+    if (v) {
+      if (local.minLength != null && v.length < local.minLength)
+        return `최소 ${local.minLength}자 이상 입력하세요`;
+      if (local.maxLength != null && v.length > local.maxLength)
+        return `최대 ${local.maxLength}자까지 입력 가능합니다`;
+    }
+    return local.validate?.(v);
+  });
+
   return (
-    <Show
-      when={local.inset}
-      fallback={
-        // standalone 모드: 기존 Show 패턴 유지
-        <Show
-          when={isEditable()}
-          fallback={
+    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
+      <Show
+        when={local.inset}
+        fallback={
+          // standalone 모드: 기존 Show 패턴 유지
+          <Show
+            when={isEditable()}
+            fallback={
+              <div
+                {...rest}
+                data-textarea-field
+                class={getWrapperClass(true)}
+                style={{ "white-space": "pre-wrap", "word-break": "break-all", ...local.style }}
+                title={local.title}
+              >
+                <PlaceholderFallback value={value()} placeholder={local.placeholder} />
+              </div>
+            }
+          >
             <div
               {...rest}
               data-textarea-field
               class={getWrapperClass(true)}
-              style={{ "white-space": "pre-wrap", "word-break": "break-all", ...local.style }}
-              title={local.title}
+              style={{ position: "relative", ...local.style }}
             >
-              {value() ||
-                (local.placeholder != null && local.placeholder !== "" ? (
-                  <span class={textMuted}>{local.placeholder}</span>
-                ) : (
-                  "\u00A0"
-                ))}
+              <div
+                data-hidden-content
+                style={{
+                  "visibility": "hidden",
+                  "white-space": "pre-wrap",
+                  "word-break": "break-all",
+                }}
+              >
+                {contentForHeight()}
+              </div>
+
+              <textarea
+                class={getTextareaClass()}
+                value={value()}
+                placeholder={local.placeholder}
+                title={local.title}
+                onKeyDown={handleKeyDown}
+                onInput={handleInput}
+                onCompositionStart={handleCompositionStart}
+                onCompositionEnd={handleCompositionEnd}
+              />
             </div>
-          }
+          </Show>
+        }
+      >
+        {/* inset 모드: dual-element overlay 패턴 */}
+        <div
+          {...rest}
+          data-textarea-field
+          class={clsx("relative", local.class)}
+          style={local.style}
         >
           <div
-            {...rest}
-            data-textarea-field
-            class={getWrapperClass(true)}
-            style={{ position: "relative", ...local.style }}
+            data-textarea-field-content
+            class={getWrapperClass(false)}
+            style={{
+              "visibility": isEditable() ? "hidden" : undefined,
+              "white-space": "pre-wrap",
+              "word-break": "break-all",
+            }}
+            title={local.title}
           >
+            {isEditable() ? (
+              contentForHeight()
+            ) : (
+              <PlaceholderFallback value={value()} placeholder={local.placeholder} />
+            )}
+          </div>
+
+          <Show when={isEditable()}>
             <div
-              data-hidden-content
-              style={{
-                "visibility": "hidden",
-                "white-space": "pre-wrap",
-                "word-break": "break-all",
-              }}
+              class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}
+              style={{ position: "relative" }}
             >
-              {contentForHeight()}
+              <textarea
+                class={twMerge(textareaBaseClass, local.size && textAreaSizeClasses[local.size])}
+                value={value()}
+                placeholder={local.placeholder}
+                title={local.title}
+                onKeyDown={handleKeyDown}
+                onInput={handleInput}
+                onCompositionStart={handleCompositionStart}
+                onCompositionEnd={handleCompositionEnd}
+              />
             </div>
-
-            <textarea
-              class={getTextareaClass()}
-              value={value()}
-              placeholder={local.placeholder}
-              title={local.title}
-              onKeyDown={handleKeyDown}
-              onInput={handleInput}
-              onCompositionStart={handleCompositionStart}
-              onCompositionEnd={handleCompositionEnd}
-            />
-          </div>
-        </Show>
-      }
-    >
-      {/* inset 모드: dual-element overlay 패턴 */}
-      <div
-        {...rest}
-        data-textarea-field
-        class={twMerge(getWrapperClass(false), "relative", local.class)}
-        style={local.style}
-      >
-        <div
-          data-textarea-field-content
-          style={{
-            "visibility": isEditable() ? "hidden" : undefined,
-            "white-space": "pre-wrap",
-            "word-break": "break-all",
-          }}
-          title={local.title}
-        >
-          {isEditable()
-            ? contentForHeight()
-            : value() ||
-              (local.placeholder != null && local.placeholder !== "" ? (
-                <span class={textMuted}>{local.placeholder}</span>
-              ) : (
-                "\u00A0"
-              ))}
+          </Show>
         </div>
-
-        <Show when={isEditable()}>
-          <textarea
-            class={twMerge(textareaBaseClass, local.size && textAreaSizeClasses[local.size])}
-            value={value()}
-            placeholder={local.placeholder}
-            title={local.title}
-            onKeyDown={handleKeyDown}
-            onInput={handleInput}
-            onCompositionStart={handleCompositionStart}
-            onCompositionEnd={handleCompositionEnd}
-          />
-        </Show>
-      </div>
-    </Show>
+      </Show>
+    </Invalid>
   );
 };