@simplysm/solid 13.0.28 → 13.0.30

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

@@ -1,18 +1,10 @@
 import clsx from "clsx";
-import { type Component, type JSX, Show, splitProps } from "solid-js";
+import { type Component, createMemo, type JSX, Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { DateTime } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import {
-  type FieldSize,
-  fieldBaseClass,
-  fieldSizeClasses,
-  fieldInsetClass,
-  fieldInsetHeightClass,
-  fieldInsetSizeHeightClasses,
-  fieldDisabledClass,
-  fieldInputClass,
-} from "./Field.styles";
+import { type FieldSize, fieldInputClass, getFieldWrapperClass } from "./Field.styles";
+import { Invalid } from "../../form-control/Invalid";
 
 type DateTimePickerUnit = "minute" | "second";
 
@@ -52,13 +44,25 @@ export interface DateTimePickerProps {
 
   /** 커스텀 style */
   style?: JSX.CSSProperties;
+
+  /** 필수 입력 여부 */
+  required?: boolean;
+
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: DateTime | undefined) => string | undefined;
+
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
 }
 
 /**
- * DateTime 값을 input value용 문자열로 변환 (ISO 형식)
+ * DateTime 값을 타입에 맞는 문자열로 변환
  */
-function formatValue(value: DateTime | undefined, unit: DateTimePickerUnit): string {
-  if (value == null) return "";
+function formatDateTimeValue(
+  value: DateTime | undefined,
+  unit: DateTimePickerUnit,
+): string | undefined {
+  if (value == null) return undefined;
 
   switch (unit) {
     case "minute":
@@ -79,7 +83,14 @@ function parseValue(str: string, unit: DateTimePickerUnit): DateTime | undefined
       // yyyy-MM-ddTHH:mm 형식
       const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(str);
       if (match == null) return undefined;
-      return new DateTime(Number(match[1]), Number(match[2]), Number(match[3]), Number(match[4]), Number(match[5]), 0);
+      return new DateTime(
+        Number(match[1]),
+        Number(match[2]),
+        Number(match[3]),
+        Number(match[4]),
+        Number(match[5]),
+        0,
+      );
     }
     case "second": {
       // yyyy-MM-ddTHH:mm:ss 형식
@@ -97,20 +108,6 @@ function parseValue(str: string, unit: DateTimePickerUnit): DateTime | undefined
   }
 }
 
-/**
- * min/max 속성을 타입에 맞는 문자열로 변환
- */
-function formatMinMax(value: DateTime | undefined, unit: DateTimePickerUnit): string | undefined {
-  if (value == null) return undefined;
-
-  switch (unit) {
-    case "minute":
-      return value.toFormatString("yyyy-MM-ddTHH:mm");
-    case "second":
-      return value.toFormatString("yyyy-MM-ddTHH:mm:ss");
-  }
-}
-
 /**
  * DateTimePicker 컴포넌트
  *
@@ -148,6 +145,9 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
     "inset",
     "class",
     "style",
+    "required",
+    "validate",
+    "touchMode",
   ]);
 
   // 기본 단위는 minute
@@ -160,7 +160,7 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
   });
 
   // 표시 값
-  const displayValue = () => formatValue(value(), fieldType());
+  const displayValue = () => formatDateTimeValue(value(), fieldType()) ?? "";
 
   // 값 확정 핸들러 (포커스 아웃 또는 Enter 시)
   const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {
@@ -171,15 +171,12 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
 
   // wrapper 클래스 (includeCustomClass: inset 모드에서는 커스텀 class를 외부 div에 적용)
   const getWrapperClass = (includeCustomClass: boolean) =>
-    twMerge(
-      fieldBaseClass,
-      local.size && fieldSizeClasses[local.size],
-      local.disabled && fieldDisabledClass,
-      local.inset && fieldInsetClass + " block",
-      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,
+    });
 
   // 편집 가능 여부
   const isEditable = () => !local.disabled && !local.readonly;
@@ -187,68 +184,90 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
   // step 속성 (second일 때 1)
   const getStep = () => (fieldType() === "second" ? "1" : undefined);
 
+  // 유효성 검사 메시지 (순서대로 검사, 최초 실패 메시지 반환)
+  const errorMsg = createMemo(() => {
+    const v = value();
+    if (local.required && v === undefined) return "필수 입력 항목입니다";
+    if (v !== undefined) {
+      if (local.min !== undefined && v.tick < local.min.tick)
+        return `${local.min.toFormatString("yyyy-MM-dd HH:mm:ss")}보다 크거나 같아야 합니다`;
+      if (local.max !== undefined && v.tick > local.max.tick)
+        return `${local.max.toFormatString("yyyy-MM-dd HH:mm:ss")}보다 작거나 같아야 합니다`;
+    }
+    return local.validate?.(v);
+  });
+
   return (
-    <Show
-      when={local.inset}
-      fallback={
-        // standalone 모드
-        <Show
-          when={isEditable()}
-          fallback={
-            <div
-              {...rest}
-              data-datetime-field
-              class={twMerge(getWrapperClass(true), "sd-datetime-field")}
-              style={local.style}
-              title={local.title}
-            >
-              {displayValue() || "\u00A0"}
-            </div>
-          }
-        >
-          <div {...rest} data-datetime-field class={getWrapperClass(true)} style={local.style}>
-            <input
-              type="datetime-local"
-              class={fieldInputClass}
-              value={displayValue()}
-              title={local.title}
-              min={formatMinMax(local.min, fieldType())}
-              max={formatMinMax(local.max, fieldType())}
-              step={getStep()}
-              onChange={handleChange}
-            />
-          </div>
-        </Show>
-      }
+    <Invalid
+      message={errorMsg()}
+      variant={local.inset ? "dot" : "border"}
+      touchMode={local.touchMode}
     >
-      {/* inset 모드: dual-element overlay 패턴 */}
-      <div
-        {...rest}
-        data-datetime-field
-        class={twMerge(getWrapperClass(false), "relative", local.class)}
-        style={local.style}
+      <Show
+        when={local.inset}
+        fallback={
+          // standalone 모드
+          <Show
+            when={isEditable()}
+            fallback={
+              <div
+                {...rest}
+                data-datetime-field
+                class={twMerge(getWrapperClass(true), "sd-datetime-field")}
+                style={local.style}
+                title={local.title}
+              >
+                {displayValue() || "\u00A0"}
+              </div>
+            }
+          >
+            <div {...rest} data-datetime-field class={getWrapperClass(true)} style={local.style}>
+              <input
+                type="datetime-local"
+                class={fieldInputClass}
+                value={displayValue()}
+                title={local.title}
+                min={formatDateTimeValue(local.min, fieldType())}
+                max={formatDateTimeValue(local.max, fieldType())}
+                step={getStep()}
+                onChange={handleChange}
+              />
+            </div>
+          </Show>
+        }
       >
+        {/* inset 모드: dual-element overlay 패턴 */}
         <div
-          data-datetime-field-content
-          style={{ visibility: isEditable() ? "hidden" : undefined }}
-          title={local.title}
+          {...rest}
+          data-datetime-field
+          class={clsx("relative", local.class)}
+          style={local.style}
         >
-          {displayValue() || "\u00A0"}
-        </div>
-
-        <Show when={isEditable()}>
-          <input
-            type="datetime-local"
-            class={clsx(fieldInputClass, "absolute left-0 top-0 size-full", "px-2 py-1")}
-            value={displayValue()}
+          <div
+            data-datetime-field-content
+            class={getWrapperClass(false)}
+            style={{ visibility: isEditable() ? "hidden" : undefined }}
             title={local.title}
-            min={formatMinMax(local.min, fieldType())}
-            max={formatMinMax(local.max, fieldType())}
-            step={getStep()}
-            onChange={handleChange}
-          />
-        </Show>
-      </div>
-    </Show>
+          >
+            {displayValue() || "\u00A0"}
+          </div>
+
+          <Show when={isEditable()}>
+            <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
+              <input
+                type="datetime-local"
+                class={fieldInputClass}
+                value={displayValue()}
+                title={local.title}
+                min={formatDateTimeValue(local.min, fieldType())}
+                max={formatDateTimeValue(local.max, fieldType())}
+                step={getStep()}
+                onChange={handleChange}
+              />
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </Invalid>
   );
 };

package/src/components/form-control/field/Field.styles.ts

@@ -1,11 +1,22 @@
 import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
 import { type ComponentSize, paddingLg, paddingSm, paddingXl } from "../../../styles/tokens.styles";
-import { fieldSurface, insetBase, insetFocusOutline, inputBase } from "../../../styles/patterns.styles";
+import {
+  fieldSurface,
+  insetBase,
+  insetFocusOutline,
+  inputBase,
+} from "../../../styles/patterns.styles";
 
 export type FieldSize = ComponentSize;
 
 // 기본 wrapper 스타일
-export const fieldBaseClass = clsx("inline-flex items-center", fieldSurface, "px-2 py-1", "h-field");
+export const fieldBaseClass = clsx(
+  "inline-flex items-center",
+  fieldSurface,
+  "px-2 py-1",
+  "h-field",
+);
 
 // 사이즈별 스타일
 export const fieldSizeClasses: Record<FieldSize, string> = {
@@ -15,7 +26,11 @@ export const fieldSizeClasses: Record<FieldSize, string> = {
 };
 
 // inset 스타일
-export const fieldInsetClass = clsx(insetBase, "bg-primary-50 dark:bg-primary-950/30", insetFocusOutline);
+export const fieldInsetClass = clsx(
+  insetBase,
+  "bg-primary-50 dark:bg-primary-950/30",
+  insetFocusOutline,
+);
 
 // inset 높이 (border 2px 제외)
 export const fieldInsetHeightClass = "h-field-inset";
@@ -40,3 +55,47 @@ export const textAreaSizeClasses: Record<FieldSize, string> = {
 
 // input 스타일
 export const fieldInputClass = inputBase;
+
+// prefixIcon gap 클래스 (nested ternary 대체)
+export const fieldGapClasses: Record<FieldSize | "default", string> = {
+  default: "gap-2",
+  sm: "gap-1.5",
+  lg: "gap-3",
+  xl: "gap-4",
+};
+
+// 공유 wrapper 클래스 생성 함수
+export function getFieldWrapperClass(options: {
+  size?: FieldSize;
+  disabled?: boolean;
+  inset?: boolean;
+  includeCustomClass?: string | false;
+  extra?: string | false;
+}): string {
+  return twMerge(
+    fieldBaseClass,
+    options.extra,
+    options.size && fieldSizeClasses[options.size],
+    options.disabled && fieldDisabledClass,
+    options.inset && fieldInsetClass,
+    options.inset &&
+      (options.size ? fieldInsetSizeHeightClasses[options.size] : fieldInsetHeightClass),
+    options.includeCustomClass,
+  );
+}
+
+// Textarea 전용 wrapper 클래스 생성 함수
+export function getTextareaWrapperClass(options: {
+  size?: FieldSize;
+  disabled?: boolean;
+  inset?: boolean;
+  includeCustomClass?: string | false;
+}): string {
+  return twMerge(
+    textAreaBaseClass,
+    options.size && textAreaSizeClasses[options.size],
+    options.disabled && fieldDisabledClass,
+    options.inset && fieldInsetClass,
+    options.includeCustomClass,
+  );
+}

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

@@ -0,0 +1,18 @@
+import { type Component, Show } from "solid-js";
+import { textMuted } from "../../../styles/tokens.styles";
+
+/** 값이 없을 때 placeholder 또는 NBSP를 표시하는 공유 컴포넌트 */
+export const PlaceholderFallback: Component<{ value?: string; placeholder?: string }> = (props) => (
+  <>
+    <Show
+      when={props.value}
+      fallback={
+        <Show when={props.placeholder != null && props.placeholder !== ""} fallback={"\u00A0"}>
+          <span class={textMuted}>{props.placeholder}</span>
+        </Show>
+      }
+    >
+      {props.value}
+    </Show>
+  </>
+);

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

@@ -1,18 +1,25 @@
-import { type Component, type JSX, Show, splitProps, createSignal, createEffect } from "solid-js";
+import {
+  type Component,
+  createEffect,
+  createMemo,
+  type JSX,
+  Show,
+  splitProps,
+  createSignal,
+} from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
+import type { IconProps as TablerIconProps } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import {
   type FieldSize,
-  fieldBaseClass,
-  fieldSizeClasses,
-  fieldInsetClass,
-  fieldInsetHeightClass,
-  fieldInsetSizeHeightClasses,
-  fieldDisabledClass,
   fieldInputClass,
+  fieldGapClasses,
+  getFieldWrapperClass,
 } from "./Field.styles";
-import { textMuted } from "../../../styles/tokens.styles";
+import { Icon } from "../../display/Icon";
+import { PlaceholderFallback } from "./FieldPlaceholder";
+import { Invalid } from "../../form-control/Invalid";
 
 // NumberInput 전용 input 스타일 (우측 정렬 + 스피너 숨김)
 const numberInputClass = clsx(
@@ -58,6 +65,24 @@ export interface NumberInputProps {
 
   /** 커스텀 style */
   style?: JSX.CSSProperties;
+
+  /** 접두 아이콘 */
+  prefixIcon?: Component<TablerIconProps>;
+
+  /** 필수 입력 여부 */
+  required?: boolean;
+
+  /** 최솟값 */
+  min?: number;
+
+  /** 최댓값 */
+  max?: number;
+
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: number | undefined) => string | undefined;
+
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
 }
 
 /**
@@ -163,6 +188,12 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
     "readonly",
     "size",
     "inset",
+    "prefixIcon",
+    "required",
+    "min",
+    "max",
+    "validate",
+    "touchMode",
     "class",
     "style",
   ]);
@@ -233,90 +264,111 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
 
   // wrapper 클래스 (inset 분기에서는 local.class 제외)
   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>
+  );
+
+  // 유효성 검사 메시지 (순서대로 검사, 최초 실패 메시지 반환)
+  const errorMsg = createMemo(() => {
+    const v = value();
+    if (local.required && v === undefined) return "필수 입력 항목입니다";
+    if (v !== undefined) {
+      if (local.min !== undefined && v < local.min) return `최솟값은 ${local.min}입니다`;
+      if (local.max !== undefined && v > local.max) return `최댓값은 ${local.max}입니다`;
+    }
+    return local.validate?.(v);
+  });
+
   return (
-    <Show
-      when={local.inset}
-      fallback={
-        // standalone 모드: 기존 Show 패턴 유지
-        <Show
-          when={isEditable()}
-          fallback={
-            <div
-              {...rest}
-              data-number-field
-              class={twMerge(getWrapperClass(true), "sd-number-field", "justify-end")}
-              style={local.style}
-              title={local.title}
-            >
-              {formatNumber(value(), local.comma ?? true, local.minDigits) ||
-                (local.placeholder != null && local.placeholder !== "" ? (
-                  <span class={textMuted}>{local.placeholder}</span>
-                ) : (
-                  "\u00A0"
-                ))}
+    <Invalid
+      message={errorMsg()}
+      variant={local.inset ? "dot" : "border"}
+      touchMode={local.touchMode}
+    >
+      <Show
+        when={local.inset}
+        fallback={
+          // standalone 모드: 기존 Show 패턴 유지
+          <Show
+            when={isEditable()}
+            fallback={
+              <div
+                {...rest}
+                data-number-field
+                class={twMerge(getWrapperClass(true), "sd-number-field", "justify-end")}
+                style={local.style}
+                title={local.title}
+              >
+                {prefixIconEl()}
+                <PlaceholderFallback
+                  value={formatNumber(value(), local.comma ?? true, local.minDigits)}
+                  placeholder={local.placeholder}
+                />
+              </div>
+            }
+          >
+            <div {...rest} data-number-field class={getWrapperClass(true)} style={local.style}>
+              {prefixIconEl()}
+              <input
+                type="text"
+                inputmode="numeric"
+                class={numberInputClass}
+                value={displayValue()}
+                placeholder={local.placeholder}
+                title={local.title}
+                onInput={handleInput}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+              />
             </div>
-          }
-        >
-          <div {...rest} data-number-field class={getWrapperClass(true)} style={local.style}>
-            <input
-              type="text"
-              inputmode="numeric"
-              class={numberInputClass}
-              value={displayValue()}
+          </Show>
+        }
+      >
+        {/* inset 모드: dual-element overlay 패턴 */}
+        <div {...rest} data-number-field class={clsx("relative", local.class)} style={local.style}>
+          <div
+            data-number-field-content
+            class={twMerge(getWrapperClass(false), "justify-end")}
+            style={{ visibility: isEditable() ? "hidden" : undefined }}
+            title={local.title}
+          >
+            {prefixIconEl()}
+            <PlaceholderFallback
+              value={formatNumber(value(), local.comma ?? true, local.minDigits)}
               placeholder={local.placeholder}
-              title={local.title}
-              onInput={handleInput}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
             />
           </div>
-        </Show>
-      }
-    >
-      {/* inset 모드: dual-element overlay 패턴 */}
-      <div {...rest} data-number-field class={clsx("relative", local.class)} style={local.style}>
-        <div
-          data-number-field-content
-          class={twMerge(getWrapperClass(false), "justify-end")}
-          style={{ visibility: isEditable() ? "hidden" : undefined }}
-          title={local.title}
-        >
-          {formatNumber(value(), local.comma ?? true, local.minDigits) ||
-            (local.placeholder != null && local.placeholder !== "" ? (
-              <span class={textMuted}>{local.placeholder}</span>
-            ) : (
-              "\u00A0"
-            ))}
-        </div>
 
-        <Show when={isEditable()}>
-          <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
-            <input
-              type="text"
-              inputmode="numeric"
-              class={numberInputClass}
-              value={displayValue()}
-              placeholder={local.placeholder}
-              title={local.title}
-              onInput={handleInput}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-            />
-          </div>
-        </Show>
-      </div>
-    </Show>
+          <Show when={isEditable()}>
+            <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
+              {prefixIconEl()}
+              <input
+                type="text"
+                inputmode="numeric"
+                class={numberInputClass}
+                value={displayValue()}
+                placeholder={local.placeholder}
+                title={local.title}
+                onInput={handleInput}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+              />
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </Invalid>
   );
 };