@simplysm/solid 13.0.29 → 13.0.31

package/src/components/form-control/field/DatePicker.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 { DateOnly } 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 DatePickerUnit = "year" | "month" | "date";
 
@@ -52,13 +44,22 @@ export interface DatePickerProps {
 
   /** 커스텀 style */
   style?: JSX.CSSProperties;
+
+  /** 필수 입력 여부 */
+  required?: boolean;
+
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: DateOnly | undefined) => string | undefined;
+
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
 }
 
 /**
- * DateOnly 값을 input value용 문자열로 변환 (ISO 형식)
+ * DateOnly 값을 타입에 맞는 문자열로 변환
  */
-function formatValue(value: DateOnly | undefined, type: DatePickerUnit): string {
-  if (value == null) return "";
+function formatDateValue(value: DateOnly | undefined, type: DatePickerUnit): string | undefined {
+  if (value == null) return undefined;
 
   switch (type) {
     case "year":
@@ -109,22 +110,6 @@ function getInputType(type: DatePickerUnit): string {
   }
 }
 
-/**
- * min/max 속성을 타입에 맞는 문자열로 변환
- */
-function formatMinMax(value: DateOnly | undefined, type: DatePickerUnit): string | undefined {
-  if (value == null) return undefined;
-
-  switch (type) {
-    case "year":
-      return value.toFormatString("yyyy");
-    case "month":
-      return value.toFormatString("yyyy-MM");
-    case "date":
-      return value.toFormatString("yyyy-MM-dd");
-  }
-}
-
 /**
  * DatePicker 컴포넌트
  *
@@ -165,6 +150,9 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
     "inset",
     "class",
     "style",
+    "required",
+    "validate",
+    "touchMode",
   ]);
 
   // 기본 단위는 date
@@ -177,7 +165,7 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
   });
 
   // 표시 값
-  const displayValue = () => formatValue(value(), fieldType());
+  const displayValue = () => formatDateValue(value(), fieldType()) ?? "";
 
   // 값 확정 핸들러 (포커스 아웃 또는 Enter 시)
   const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {
@@ -188,79 +176,93 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
 
   // wrapper 클래스 (includeCustomClass: 외부 class를 포함할지 여부)
   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;
 
+  // 유효성 검사 메시지 (순서대로 검사, 최초 실패 메시지 반환)
+  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}보다 크거나 같아야 합니다`;
+      if (local.max !== undefined && v.tick > local.max.tick)
+        return `${local.max}보다 작거나 같아야 합니다`;
+    }
+    return local.validate?.(v);
+  });
+
   return (
-    <Show
-      when={local.inset}
-      fallback={
-        // standalone 모드: 기존 Show 패턴 유지
-        <Show
-          when={isEditable()}
-          fallback={
-            <div
-              {...rest}
-              data-date-field
-              class={twMerge(getWrapperClass(true), "sd-date-field")}
-              style={local.style}
-              title={local.title}
-            >
-              {displayValue() || "\u00A0"}
-            </div>
-          }
-        >
-          <div {...rest} data-date-field class={getWrapperClass(true)} style={local.style}>
-            <input
-              type={getInputType(fieldType())}
-              class={fieldInputClass}
-              value={displayValue()}
-              title={local.title}
-              min={formatMinMax(local.min, fieldType())}
-              max={formatMinMax(local.max, fieldType())}
-              onChange={handleChange}
-            />
-          </div>
-        </Show>
-      }
+    <Invalid
+      message={errorMsg()}
+      variant={local.inset ? "dot" : "border"}
+      touchMode={local.touchMode}
     >
-      {/* inset 모드: dual-element overlay 패턴 */}
-      <div
-        {...rest}
-        data-date-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-date-field
+                class={twMerge(getWrapperClass(true), "sd-date-field")}
+                style={local.style}
+                title={local.title}
+              >
+                {displayValue() || "\u00A0"}
+              </div>
+            }
+          >
+            <div {...rest} data-date-field class={getWrapperClass(true)} style={local.style}>
+              <input
+                type={getInputType(fieldType())}
+                class={fieldInputClass}
+                value={displayValue()}
+                title={local.title}
+                min={formatDateValue(local.min, fieldType())}
+                max={formatDateValue(local.max, fieldType())}
+                onChange={handleChange}
+              />
+            </div>
+          </Show>
+        }
       >
-        <div
-          data-date-field-content
-          style={{ visibility: isEditable() ? "hidden" : undefined }}
-          title={local.title}
-        >
-          {displayValue() || "\u00A0"}
-        </div>
-
-        <Show when={isEditable()}>
-          <input
-            type={getInputType(fieldType())}
-            class={clsx(fieldInputClass, "absolute left-0 top-0 size-full", "px-2 py-1")}
-            value={displayValue()}
+        {/* inset 모드: dual-element overlay 패턴 */}
+        <div {...rest} data-date-field class={clsx("relative", local.class)} style={local.style}>
+          <div
+            data-date-field-content
+            class={getWrapperClass(false)}
+            style={{ visibility: isEditable() ? "hidden" : undefined }}
             title={local.title}
-            min={formatMinMax(local.min, fieldType())}
-            max={formatMinMax(local.max, fieldType())}
-            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={getInputType(fieldType())}
+                class={fieldInputClass}
+                value={displayValue()}
+                title={local.title}
+                min={formatDateValue(local.min, fieldType())}
+                max={formatDateValue(local.max, fieldType())}
+                onChange={handleChange}
+              />
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </Invalid>
   );
 };

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":
@@ -104,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 컴포넌트
  *
@@ -155,6 +145,9 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
     "inset",
     "class",
     "style",
+    "required",
+    "validate",
+    "touchMode",
   ]);
 
   // 기본 단위는 minute
@@ -167,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) => {
@@ -178,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;
@@ -194,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,4 +1,5 @@
 import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
 import { type ComponentSize, paddingLg, paddingSm, paddingXl } from "../../../styles/tokens.styles";
 import {
   fieldSurface,
@@ -54,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>
+  </>
+);