@uniai-fe/uds-primitives 0.6.4 → 0.6.6

package/src/components/input/markup/date/range/Template.tsx

@@ -0,0 +1,261 @@
+"use client";
+
+import type { ChangeEvent, MouseEvent as ReactMouseEvent } from "react";
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import { useUncontrolled } from "@mantine/hooks";
+import { Calendar } from "../../../../calendar";
+import type {
+  InputCalendarRangeProps,
+  InputCalendarTriggerRenderProps,
+} from "../../../types";
+import type { CalendarRangeValue, CalendarValue } from "../../../../calendar";
+import {
+  createEmptyRangeValue,
+  formatRangeTriggerValue,
+  getTodayValue,
+  serializeCalendarValue,
+} from "../../../utils/date";
+import InputDateApplyButton from "../button/ApplyButton";
+import InputDateClearButton from "../button/ClearButton";
+import InputDateTodayButton from "../button/TodayButton";
+import InputDateFooterTemplateContainer from "../footer/Container";
+import InputDateFooterUtilContainer from "../footer/UtilContainer";
+import InputDateTrigger from "../Trigger";
+
+const INPUT_DATE_RANGE_TABLE_FORMAT = "YY-MM-DD";
+
+/**
+ * Input Date Range Template; trigger + Calendar.Range 조합.
+ * priority가 table이면 trigger 표시 포맷을 `YY-MM-DD ~ YY-MM-DD`로 맞춘다.
+ * form 저장은 start/end hidden input 2개로 분리한다.
+ * @component
+ * @param {InputCalendarRangeProps} props range date props
+ * @param {CalendarRangeValue} [props.value] 제어형 range 값
+ * @param {CalendarRangeValue} [props.defaultValue] 비제어 range 초기값
+ * @param {CalendarRangeOnChange} [props.onChange] range 값 변경 이벤트
+ * @param {CalendarRangeOnChange} [props.onValueChange] onChange alias
+ * @param {boolean} [props.readOnly] 읽기 전용 여부
+ * @param {boolean} [props.disabled] 비활성화 여부
+ * @param {CalendarRangeDatePickerProps} [props.datePickerProps] Mantine range DatePicker 옵션
+ * @param {string} [props.startName] 시작일 hidden input name
+ * @param {string} [props.endName] 종료일 hidden input name
+ * @param {UseFormRegisterReturn} [props.startRegister] 시작일 RHF register
+ * @param {UseFormRegisterReturn} [props.endRegister] 종료일 RHF register
+ * @param {string} [props.placeholder="YYYY-MM-DD ~ YYYY-MM-DD"] placeholder
+ * @param {"primary" | "secondary" | "tertiary" | "table"} [props.priority="primary"] trigger input priority
+ * @param {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} [props.state="default"] trigger input state
+ * @param {ReactNode} [props.header] 패널 header 콘텐츠
+ * @param {ReactNode} [props.footer] 패널 footer 콘텐츠
+ * @param {boolean} [props.calendarOpened] calendar 열림 제어 상태
+ * @param {string} [props.id] trigger id
+ * @param {ReactNode} [props.trigger] 커스텀 trigger 슬롯
+ * @param {(props: InputCalendarTriggerRenderProps) => ReactNode} [props.renderTrigger] 커스텀 trigger 렌더 함수
+ * @param {(event: MouseEvent<Element>) => void} [props.onClick] trigger 클릭 핸들러
+ * @example
+ * <Input.Date.Range.Template
+ *   startName="start_date"
+ *   endName="end_date"
+ *   value={range}
+ *   onChange={setRange}
+ * />
+ */
+const InputDateRangeTemplate = forwardRef<HTMLElement, InputCalendarRangeProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onChange,
+      onValueChange,
+      readOnly,
+      disabled,
+      datePickerProps,
+      startName,
+      endName,
+      startRegister,
+      endRegister,
+      placeholder = "YYYY-MM-DD ~ YYYY-MM-DD",
+      priority = "primary",
+      state = "default",
+      header,
+      footer,
+      calendarOpened,
+      onClick: triggerOnClick,
+      id,
+      trigger,
+      renderTrigger,
+    },
+    ref,
+  ) => {
+    // 기본(비제어) range calendar open 상태를 관리한다.
+    const [internalCalendarOpen, setInternalCalendarOpen] = useState(false);
+    const resolvedCalendarOpen = calendarOpened ?? internalCalendarOpen;
+
+    // Calendar.Range tuple 계약을 그대로 유지하며 제어형/비제어 값을 모두 허용한다.
+    const [calendarValue, setCalendarValue] =
+      useUncontrolled<CalendarRangeValue>({
+        value,
+        defaultValue,
+        finalValue: createEmptyRangeValue(),
+        onChange: next => {
+          onChange?.(next as CalendarRangeValue);
+          onValueChange?.(next as CalendarRangeValue);
+        },
+      });
+
+    // react-hook-form register onChange를 start/end 각각 호출해 hidden input 저장값을 맞춘다.
+    const emitRegisterChange = useCallback(
+      (nextValue: CalendarRangeValue) => {
+        const emit = (
+          register: typeof startRegister | typeof endRegister | undefined,
+          nextCalendarValue: CalendarValue,
+        ) => {
+          if (!register?.onChange) {
+            return;
+          }
+
+          const serialized = serializeCalendarValue(nextCalendarValue);
+          const syntheticEvent = {
+            target: {
+              name: register.name,
+              value: serialized,
+            },
+            currentTarget: {
+              name: register.name,
+              value: serialized,
+            },
+          } as unknown as ChangeEvent<HTMLInputElement>;
+
+          register.onChange(syntheticEvent);
+        };
+
+        emit(startRegister, nextValue[0]);
+        emit(endRegister, nextValue[1]);
+      },
+      [endRegister, startRegister],
+    );
+
+    const updateValue = useCallback(
+      (nextValue: CalendarRangeValue) => {
+        setCalendarValue(nextValue);
+        emitRegisterChange(nextValue);
+      },
+      [emitRegisterChange, setCalendarValue],
+    );
+
+    const triggerValue = useMemo(
+      () =>
+        formatRangeTriggerValue(
+          calendarValue,
+          priority === "table" ? INPUT_DATE_RANGE_TABLE_FORMAT : undefined,
+        ),
+      [calendarValue, priority],
+    );
+    const serializedStartValue = serializeCalendarValue(calendarValue[0]);
+    const serializedEndValue = serializeCalendarValue(calendarValue[1]);
+
+    const handleTriggerClick = (event: ReactMouseEvent<Element>) => {
+      triggerOnClick?.(event);
+    };
+
+    const handleCalendarChange = (nextValue: CalendarRangeValue) => {
+      updateValue(nextValue);
+    };
+
+    // range 기본 footer는 Today row와 Clear/Apply row를 분리해 Figma range footer 구조를 유지한다.
+    const footerContent = footer ?? (
+      <InputDateFooterTemplateContainer className="input-date-range-footer-template">
+        <InputDateFooterUtilContainer className="input-date-range-today-row">
+          <InputDateTodayButton
+            disabled={disabled}
+            onClick={() => {
+              const today = getTodayValue();
+              updateValue([today, today]);
+            }}
+          />
+        </InputDateFooterUtilContainer>
+        <InputDateFooterUtilContainer className="input-date-range-footer-row">
+          <InputDateClearButton
+            className="input-date-range-clear-button"
+            disabled={disabled}
+            onClick={() => updateValue(createEmptyRangeValue())}
+          >
+            삭제하기
+          </InputDateClearButton>
+          {/* 변경: range footer는 삭제/적용을 같은 row에 두고 Apply 폭을 content 기준으로 줄인다. */}
+          <InputDateApplyButton
+            className="input-date-range-apply-button"
+            disabled={disabled}
+            onClick={() => setInternalCalendarOpen(false)}
+          />
+        </InputDateFooterUtilContainer>
+      </InputDateFooterTemplateContainer>
+    );
+
+    const triggerRenderProps: InputCalendarTriggerRenderProps = {
+      id,
+      name: startRegister?.name ?? startName,
+      placeholder,
+      displayValue: triggerValue,
+      disabled,
+      readOnly,
+      onClick: handleTriggerClick,
+      priority,
+      state,
+    };
+
+    const triggerNode = trigger ?? renderTrigger?.(triggerRenderProps) ?? (
+      <InputDateTrigger
+        id={id}
+        placeholder={placeholder}
+        displayValue={triggerValue}
+        disabled={disabled}
+        state={state}
+        readOnly={readOnly}
+        onClick={handleTriggerClick}
+        priority={priority}
+      />
+    );
+
+    return (
+      <>
+        <Calendar.Range.Root
+          ref={ref}
+          className="input-date-field"
+          disabled={disabled}
+          readOnly={readOnly}
+          value={calendarValue}
+          onChange={handleCalendarChange}
+          datePickerProps={datePickerProps}
+          header={header}
+          footer={footerContent}
+          open={resolvedCalendarOpen}
+          onOpenChange={setInternalCalendarOpen}
+        >
+          {triggerNode}
+        </Calendar.Range.Root>
+        {(startRegister?.name || startName) && (
+          <input
+            // 변경: range 시작일 저장값은 trigger 표시와 분리해 hidden input이 담당한다.
+            type="hidden"
+            value={serializedStartValue}
+            name={startRegister?.name ?? startName}
+            {...startRegister}
+          />
+        )}
+        {(endRegister?.name || endName) && (
+          <input
+            // 변경: range 종료일 저장값은 trigger 표시와 분리해 hidden input이 담당한다.
+            type="hidden"
+            value={serializedEndValue}
+            name={endRegister?.name ?? endName}
+            {...endRegister}
+          />
+        )}
+      </>
+    );
+  },
+);
+
+InputDateRangeTemplate.displayName = "InputDateRangeTemplate";
+
+export default InputDateRangeTemplate;

package/src/components/input/styles/date.scss

@@ -64,3 +64,47 @@
 .input-date-apply-button {
   width: 100%;
 }
+
+.input-date-range-footer-template {
+  gap: var(--spacing-gap-6);
+}
+
+.input-date-range-today-row {
+  justify-content: flex-end;
+}
+
+.input-date-range-footer-row {
+  justify-content: space-between;
+}
+
+.input-date-range-clear-button {
+  // range footer의 삭제 액션은 Figma Button/Text node처럼 border 없는 error text로 표현한다.
+  min-height: 20px;
+  padding-inline: var(--spacing-padding-5);
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--color-feedback-error);
+
+  &:hover:not(:disabled):not([aria-disabled="true"]),
+  &:active:not(:disabled):not([aria-disabled="true"]) {
+    border-color: transparent;
+    background-color: transparent;
+    color: var(--color-feedback-error);
+    box-shadow: none;
+  }
+
+  .button-label {
+    font-size: var(--font-body-xxsmall-size);
+    line-height: 1.4;
+    font-weight: var(--font-body-medium-weight);
+    letter-spacing: 0;
+  }
+}
+
+.input-date-range-apply-button {
+  // range footer의 적용 버튼은 full width가 아니라 Figma CTA 크기처럼 content 폭만 사용한다.
+  width: fit-content;
+  flex: 0 0 auto;
+  --button-width: fit-content;
+  --button-flex: 0 0 auto;
+}

package/src/components/input/types/date.ts

@@ -5,6 +5,9 @@ import type {
   CalendarDatePickerProps,
   CalendarMode,
   CalendarOnChange,
+  CalendarRangeDatePickerProps,
+  CalendarRangeOnChange,
+  CalendarRangeValue,
   CalendarValue,
 } from "../../calendar";
 import type { InputPriority, InputState } from "./foundation";
@@ -147,7 +150,6 @@ export interface InputCalendarTriggerRenderProps {
  * @property {ReactNode} [footer] 커스텀 footer 콘텐츠
  * @property {unknown} [timePicker] TimePicker 확장용 예약 슬롯(현재 미구현)
  * @property {boolean} [calendarOpened] calendar 열림 제어 여부
- * @property {string} [className] root className
  * @property {ReactNode} [trigger] 커스텀 trigger 슬롯
  * @property {(props: InputCalendarTriggerRenderProps) => ReactNode} [renderTrigger] 커스텀 trigger 렌더 함수
  */
@@ -207,9 +209,114 @@ export interface InputCalendarProps extends InputCalendarTriggerProps {
    */
   calendarOpened?: boolean;
   /**
-   * root className
+   * 커스텀 trigger 슬롯
    */
-  className?: string;
+  trigger?: ReactNode;
+  /**
+   * 커스텀 trigger 렌더 함수
+   */
+  renderTrigger?: (props: InputCalendarTriggerRenderProps) => ReactNode;
+}
+
+/**
+ * Input Calendar Range Template props.
+ * @property {CalendarRangeValue} [value] 제어형 range 값
+ * @property {CalendarRangeValue} [defaultValue] 비제어 range 초기값
+ * @property {CalendarRangeOnChange} [onChange] range 값 변경 핸들러
+ * @property {CalendarRangeOnChange} [onValueChange] onChange 별칭
+ * @property {boolean} [readOnly] 읽기 전용 여부
+ * @property {boolean} [disabled] disabled 여부
+ * @property {CalendarRangeDatePickerProps} [datePickerProps] Mantine range DatePicker 옵션
+ * @property {string} [startName] 시작일 hidden input name
+ * @property {string} [endName] 종료일 hidden input name
+ * @property {UseFormRegisterReturn} [startRegister] 시작일 react-hook-form register 결과
+ * @property {UseFormRegisterReturn} [endRegister] 종료일 react-hook-form register 결과
+ * @property {string} [placeholder] trigger 내부 placeholder
+ * @property {InputPriority} [priority] trigger input priority
+ * @property {InputState} [state] trigger input state
+ * @property {ReactNode} [header] 커스텀 header 콘텐츠
+ * @property {ReactNode} [footer] 커스텀 footer 콘텐츠
+ * @property {boolean} [calendarOpened] calendar 열림 제어 여부
+ * @property {string} [id] trigger id
+ * @property {ReactNode} [trigger] 커스텀 trigger 슬롯
+ * @property {(props: InputCalendarTriggerRenderProps) => ReactNode} [renderTrigger] 커스텀 trigger 렌더 함수
+ * @property {(event: MouseEvent<Element>) => void} [onClick] trigger 클릭 핸들러
+ */
+export interface InputCalendarRangeProps {
+  /**
+   * 제어형 range 값
+   */
+  value?: CalendarRangeValue;
+  /**
+   * 비제어 range 초기값
+   */
+  defaultValue?: CalendarRangeValue;
+  /**
+   * range 값 변경 핸들러
+   */
+  onChange?: CalendarRangeOnChange;
+  /**
+   * onChange 별칭; 외부 파이프라인 시 사용
+   */
+  onValueChange?: CalendarRangeOnChange;
+  /**
+   * 읽기 전용 여부
+   */
+  readOnly?: boolean;
+  /**
+   * disabled 여부
+   */
+  disabled?: boolean;
+  /**
+   * Mantine range DatePicker 옵션
+   */
+  datePickerProps?: CalendarRangeDatePickerProps;
+  /**
+   * 시작일 hidden input name
+   */
+  startName?: string;
+  /**
+   * 종료일 hidden input name
+   */
+  endName?: string;
+  /**
+   * 시작일 react-hook-form register 결과
+   */
+  startRegister?: UseFormRegisterReturn;
+  /**
+   * 종료일 react-hook-form register 결과
+   */
+  endRegister?: UseFormRegisterReturn;
+  /**
+   * trigger 내부 placeholder
+   */
+  placeholder?: string;
+  /**
+   * trigger input priority
+   * - table일 때 Trigger는 left icon 배치를 사용한다.
+   */
+  priority?: InputPriority;
+  /**
+   * trigger input state
+   */
+  state?: InputState;
+  /**
+   * 커스텀 header 콘텐츠
+   */
+  header?: ReactNode;
+  /**
+   * 커스텀 footer 콘텐츠
+   */
+  footer?: ReactNode;
+  /**
+   * calendar 열림 제어 여부
+   * - 지정되면 제어형(open state controlled)으로 동작한다.
+   */
+  calendarOpened?: boolean;
+  /**
+   * trigger id
+   */
+  id?: string;
   /**
    * 커스텀 trigger 슬롯
    */
@@ -218,6 +325,10 @@ export interface InputCalendarProps extends InputCalendarTriggerProps {
    * 커스텀 trigger 렌더 함수
    */
   renderTrigger?: (props: InputCalendarTriggerRenderProps) => ReactNode;
+  /**
+   * trigger 클릭 핸들러
+   */
+  onClick?: (event: MouseEvent<Element>) => void;
 }
 
 /**

package/src/components/input/utils/date.ts

@@ -1,5 +1,9 @@
 import { dayjs } from "../../../init/dayjs";
-import type { CalendarColumns, CalendarValue } from "../../calendar";
+import type {
+  CalendarColumns,
+  CalendarRangeValue,
+  CalendarValue,
+} from "../../calendar";
 
 const DATE_FORMAT = "YYYY-MM-DD";
 
@@ -9,6 +13,12 @@ const DATE_FORMAT = "YYYY-MM-DD";
  */
 export const createEmptyValue = (): CalendarValue => null;
 
+/**
+ * Calendar range에 빈 값을 선언한다.
+ * @returns {CalendarRangeValue} 시작/종료가 모두 비어 있는 range tuple
+ */
+export const createEmptyRangeValue = (): CalendarRangeValue => [null, null];
+
 /**
  * Date 객체를 YYYY-MM-DD 문자열로 포맷한다.
  * @param {Date | string | null} date 포맷 대상
@@ -67,6 +77,36 @@ export const formatTriggerValue = (
   return parsed.format(format);
 };
 
+/**
+ * range trigger에 표시할 문자열을 계산한다.
+ * @param {CalendarRangeValue} value 현재 range tuple
+ * @param {string} [format="YYYY-MM-DD"] dayjs 표시 포맷
+ * @returns {string} range trigger 표시 문자열
+ * @example
+ * formatRangeTriggerValue(["2026-02-23", "2026-02-27"]);
+ */
+export const formatRangeTriggerValue = (
+  value: CalendarRangeValue,
+  format = DATE_FORMAT,
+) => {
+  const start = formatTriggerValue(value[0], format);
+  const end = formatTriggerValue(value[1], format);
+
+  if (!start && !end) {
+    return "";
+  }
+
+  if (!end) {
+    return `${start} ~`;
+  }
+
+  if (!start) {
+    return `~ ${end}`;
+  }
+
+  return `${start} ~ ${end}`;
+};
+
 /**
  * columns 값을 Mantine numberOfColumns와 맞춘다.
  * @param {CalendarColumns} columns 열 개수