@simplysm/solid 13.0.28 → 13.0.30

package/src/components/form-control/combobox/Combobox.tsx

@@ -1,4 +1,13 @@
-import { children, createSignal, For, type JSX, onCleanup, Show, splitProps } from "solid-js";
+import {
+  children,
+  createMemo,
+  createSignal,
+  For,
+  type JSX,
+  onCleanup,
+  Show,
+  splitProps,
+} from "solid-js";
 import clsx from "clsx";
 import { IconChevronDown, IconLoader2 } from "@tabler/icons-solidjs";
 import { DebounceQueue } from "@simplysm/core-common";
@@ -9,9 +18,11 @@ import { ComboboxContext, type ComboboxContextValue } from "./ComboboxContext";
 import { ComboboxItem } from "./ComboboxItem";
 import { ripple } from "../../../directives/ripple";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { createItemTemplate } from "../../../hooks/createItemTemplate";
 import { splitSlots } from "../../../helpers/splitSlots";
 import { type ComponentSize, textMuted } from "../../../styles/tokens.styles";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
+import { Invalid } from "../Invalid";
 
 void ripple;
 
@@ -25,25 +36,8 @@ const inputClass = clsx(
 
 const noResultsClass = clsx("px-3 py-2", textMuted);
 
-/**
- * Combobox 아이템 렌더링 템플릿
- */
-interface ComboboxItemTemplateProps<TItem> {
-  children: (item: TItem, index: number) => JSX.Element;
-}
-
-// 템플릿 함수를 저장하는 전역 WeakMap
-const templateFnMap = new WeakMap<HTMLElement, (item: unknown, index: number) => JSX.Element>();
-
-const ComboboxItemTemplate = <T,>(props: ComboboxItemTemplateProps<T>) => (
-  <span
-    ref={(el) => {
-      templateFnMap.set(el, props.children as (item: unknown, index: number) => JSX.Element);
-    }}
-    data-combobox-item-template
-    style={{ display: "none" }}
-  />
-);
+const { TemplateSlot: ComboboxItemTemplate, getTemplate: getComboboxItemTemplate } =
+  createItemTemplate<[item: unknown, index: number]>("data-combobox-item-template");
 
 // Props 정의
 export interface ComboboxProps<TValue = unknown> {
@@ -54,7 +48,7 @@ export interface ComboboxProps<TValue = unknown> {
   onValueChange?: (value: TValue) => void;
 
   /** 아이템 로드 함수 (필수) */
-  loadItems: (query: string) => Promise<TValue[]>;
+  loadItems: (query: string) => TValue[] | Promise<TValue[]>;
 
   /** 디바운스 딜레이 (기본값: 300ms) */
   debounceMs?: number;
@@ -74,6 +68,12 @@ export interface ComboboxProps<TValue = unknown> {
   /** 필수 입력 */
   required?: boolean;
 
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: TValue | undefined) => string | undefined;
+
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
+
   /** 플레이스홀더 */
   placeholder?: string;
 
@@ -146,6 +146,8 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     "placeholder",
     "size",
     "inset",
+    "validate",
+    "touchMode",
   ]);
 
   let triggerRef!: HTMLDivElement;
@@ -154,7 +156,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
   const [open, setOpen] = createSignal(false);
   const [query, setQuery] = createSignal("");
   const [items, setItems] = createSignal<T[]>([]);
-  const [loading, setLoading] = createSignal(false);
+  const [busyCount, setBusyCount] = createSignal(0);
 
   // 선택된 값 관리 (controlled/uncontrolled 패턴)
   const [getValue, setInternalValue] = createControllableSignal<T | undefined>({
@@ -200,12 +202,12 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     // loadItems 함수 참조를 캡처하여 사용
     const loadItemsFn = local.loadItems;
     debounceQueue.run(async () => {
-      setLoading(true);
+      setBusyCount((c) => c + 1);
       try {
-        const result = await loadItemsFn(searchQuery);
+        const result = await Promise.resolve(loadItemsFn(searchQuery));
         setItems(result);
       } finally {
-        setLoading(false);
+        setBusyCount((c) => c - 1);
       }
     });
   };
@@ -261,6 +263,14 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     }
   };
 
+  // 유효성 검사 메시지
+  const errorMsg = createMemo(() => {
+    const v = getValue();
+    if (local.required && (v === undefined || v === null || v === ""))
+      return "필수 입력 항목입니다";
+    return local.validate?.(v);
+  });
+
   // 트리거 클래스
   const getTriggerClassName = () =>
     getTriggerClass({
@@ -280,9 +290,9 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
 
     // itemTemplate 함수 추출
     const getItemTemplate = (): ((item: T, index: number) => JSX.Element) | undefined => {
-      const templateSlots = slots().comboboxItemTemplate;
-      if (templateSlots.length === 0) return undefined;
-      return templateFnMap.get(templateSlots[0]) as ((item: T, index: number) => JSX.Element) | undefined;
+      return getComboboxItemTemplate(slots().comboboxItemTemplate) as
+        | ((item: T, index: number) => JSX.Element)
+        | undefined;
     };
 
     // 선택된 값 또는 입력 표시
@@ -318,7 +328,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
       const itemTemplate = getItemTemplate();
 
       // 로딩 중
-      if (loading()) {
+      if (busyCount() > 0) {
         return <div class={noResultsClass}>검색 중...</div>;
       }
 
@@ -337,13 +347,19 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
       if (itemTemplate) {
         return (
           <For each={items()}>
-            {(item, index) => <ComboboxItem value={item}>{itemTemplate(item, index())}</ComboboxItem>}
+            {(item, index) => (
+              <ComboboxItem value={item}>{itemTemplate(item, index())}</ComboboxItem>
+            )}
           </For>
         );
       }
 
       // 기본 렌더링
-      return <For each={items()}>{(item) => <ComboboxItem value={item}>{String(item)}</ComboboxItem>}</For>;
+      return (
+        <For each={items()}>
+          {(item) => <ComboboxItem value={item}>{String(item)}</ComboboxItem>}
+        </For>
+      );
     };
 
     return (
@@ -364,7 +380,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
         >
           <div class={selectedValueClass}>{renderDisplayContent()}</div>
           <div class={chevronWrapperClass}>
-            <Show when={loading()} fallback={<Icon icon={IconChevronDown} size="1em" />}>
+            <Show when={busyCount() > 0} fallback={<Icon icon={IconChevronDown} size="1em" />}>
               <Icon icon={IconLoader2} size="1em" class="animate-spin" />
             </Show>
           </div>
@@ -380,9 +396,11 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
   };
 
   return (
-    <ComboboxContext.Provider value={contextValue as ComboboxContextValue}>
-      <ComboboxInner>{local.children}</ComboboxInner>
-    </ComboboxContext.Provider>
+    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
+      <ComboboxContext.Provider value={contextValue as ComboboxContextValue}>
+        <ComboboxInner>{local.children}</ComboboxInner>
+      </ComboboxContext.Provider>
+    </Invalid>
   );
 };
 

package/src/components/form-control/editor/EditorToolbar.tsx

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import type { Editor } from "@tiptap/core";
 import { createEditorTransaction } from "solid-tiptap";
+import { iconButtonBase } from "../../../styles/patterns.styles";
 import {
   IconBold,
   IconItalic,
@@ -39,28 +40,19 @@ const toolbarClass = clsx(
 );
 
 // 툴바 버튼 기본 스타일
-const toolbarBtnClass = clsx(
-  "inline-flex items-center justify-center",
-  "size-7 rounded",
-  "text-base-600 dark:text-base-400",
-  "hover:bg-base-100 dark:hover:bg-base-800",
-  "transition-colors",
-);
+const toolbarBtnClass = twMerge(iconButtonBase, "size-7");
 
 // 툴바 버튼 활성 스타일
-const toolbarBtnActiveClass = clsx("bg-primary-100 text-primary-700", "dark:bg-primary-900/40 dark:text-primary-300");
+const toolbarBtnActiveClass = clsx(
+  "bg-primary-100 text-primary-700",
+  "dark:bg-primary-900/40 dark:text-primary-300",
+);
 
 // 구분선 스타일
 const separatorClass = clsx("mx-1 h-5 w-px", "bg-base-300 dark:bg-base-700");
 
 // 색상 선택 label 스타일
-const colorLabelClass = clsx(
-  "relative inline-flex items-center justify-center",
-  "size-7 cursor-pointer rounded",
-  "text-base-600 dark:text-base-400",
-  "hover:bg-base-100 dark:hover:bg-base-800",
-  "transition-colors",
-);
+const colorLabelClass = twMerge(iconButtonBase, "relative", "size-7");
 
 // 색상 input 숨기기 스타일
 const colorInputClass = clsx("absolute opacity-0", "size-0");
@@ -107,7 +99,8 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
     (editor) => (editor.getAttributes("highlight")["color"] as string | undefined) ?? "#ffff00",
   );
 
-  const btnClass = (active: () => boolean) => twMerge(toolbarBtnClass, active() && toolbarBtnActiveClass);
+  const btnClass = (active: () => boolean) =>
+    twMerge(toolbarBtnClass, active() && toolbarBtnActiveClass);
 
   // 이미지 삽입 핸들러
   const handleImageInsert = () => {
@@ -202,14 +195,19 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
         />
       </label>
       <label class={colorLabelClass} title="배경색">
-        <span class={clsx("rounded px-0.5 text-sm font-bold")} style={{ "background-color": currentHighlight() }}>
+        <span
+          class={clsx("rounded px-0.5 text-sm font-bold")}
+          style={{ "background-color": currentHighlight() }}
+        >
           A
         </span>
         <input
           type="color"
           class={colorInputClass}
           value={currentHighlight()}
-          onInput={(ev) => props.editor.chain().focus().toggleHighlight({ color: ev.currentTarget.value }).run()}
+          onInput={(ev) =>
+            props.editor.chain().focus().toggleHighlight({ color: ev.currentTarget.value }).run()
+          }
         />
       </label>
 
@@ -321,7 +319,9 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
         type="button"
         class={toolbarBtnClass}
         title="테이블 삽입"
-        onClick={() => props.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}
+        onClick={() =>
+          props.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+        }
       >
         <Icon icon={IconTablePlus} size="1em" />
       </button>

package/src/components/form-control/editor/RichTextEditor.tsx

@@ -1,4 +1,13 @@
-import { type Component, type JSX, Show, createEffect, on, onCleanup, splitProps, untrack } from "solid-js";
+import {
+  type Component,
+  type JSX,
+  Show,
+  createEffect,
+  on,
+  onCleanup,
+  splitProps,
+  untrack,
+} from "solid-js";
 import clsx from "clsx";
 import "./editor.css";
 import { twMerge } from "tailwind-merge";
@@ -67,7 +76,14 @@ const editorContentSizeClasses: Record<FieldSize, string> = {
 };
 
 export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
-  const [local, rest] = splitProps(props, ["value", "onValueChange", "disabled", "size", "class", "style"]);
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "disabled",
+    "size",
+    "class",
+    "style",
+  ]);
 
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? "",
@@ -148,9 +164,11 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
     editor()?.destroy();
   });
 
-  const getWrapperClass = () => twMerge(editorWrapperClass, local.disabled && editorDisabledClass, local.class);
+  const getWrapperClass = () =>
+    twMerge(editorWrapperClass, local.disabled && editorDisabledClass, local.class);
 
-  const getContentClass = () => twMerge(editorContentClass, local.size && editorContentSizeClasses[local.size]);
+  const getContentClass = () =>
+    twMerge(editorContentClass, local.size && editorContentSizeClasses[local.size]);
 
   return (
     <div {...rest} data-rich-text-editor class={getWrapperClass()} style={local.style}>

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,75 +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>
   );
 };