@uniai-fe/uds-primitives 0.1.13 → 0.2.0

package/src/components/input/markup/foundation/Utility.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import React, { useState } from "react";
+
+import type { InputUtilityProps } from "../../types";
+import { InputStatusIcon } from "./StatusIcon";
+import InputBaseSideSlot from "./SideSlot";
+
+/**
+ * Input; 오른쪽 유틸리티 영역(wrapper)
+ * @component
+ * @param {InputUtilProps} props
+ * @param {React.ReactNode} [props.right] 오른쪽 슬롯 콘텐츠
+ * @param {React.ReactNode} [props.clear] clear 버튼 아이콘
+ * @param {React.ReactNode} [props.success] success 상태 아이콘 override
+ * @param {React.ReactNode} [props.error] error 상태 아이콘 override
+ * @param {string} props.state 현재 input 상태
+ * @param {boolean} props.isDisabled disable 여부
+ * @param {boolean} props.isFocused focus 여부
+ * @param {boolean} props.hasValue 입력값 존재 여부
+ * @param {boolean} [props.readOnly] readOnly 여부
+ * @param {Function} [props.onClear] clear 버튼 클릭 핸들러
+ */
+export default function InputBaseUtil({
+  children: right,
+  clear,
+  success,
+  error,
+  state,
+  isDisabled,
+  isFocused,
+  hasValue,
+  readOnly,
+  onClear,
+}: InputUtilityProps) {
+  const [isClearInteracting, setIsClearInteracting] = useState(false);
+
+  const baseStatusIcon = InputStatusIcon[state] ?? null;
+  const statusIcon =
+    state === "success"
+      ? (success ?? baseStatusIcon)
+      : state === "error"
+        ? (error ?? baseStatusIcon)
+        : null;
+  const clearIconNode = clear ?? InputStatusIcon.reset;
+  const showClearIcon = Boolean(
+    clearIconNode &&
+    hasValue &&
+    !(isDisabled || readOnly) &&
+    (isFocused || isClearInteracting),
+  );
+
+  if (!right && !showClearIcon && !statusIcon) {
+    return null;
+  }
+
+  const handleClearPointerDown = () => {
+    setIsClearInteracting(true);
+  };
+
+  const handleClearPointerLeave = () => {
+    setIsClearInteracting(false);
+  };
+
+  const handleClearPointerUp = (
+    event: React.PointerEvent<HTMLButtonElement>,
+  ) => {
+    setIsClearInteracting(false);
+    onClear?.(event);
+  };
+
+  return (
+    // 유틸리티 영역; 오른쪽 슬롯/clear/status 정렬
+    <div className="input-field-utilities">
+      {right && <InputBaseSideSlot type="right">{right}</InputBaseSideSlot>}
+      {showClearIcon ? (
+        <button
+          type="button"
+          className="input-affix input-affix-clear"
+          data-slot="clear"
+          data-visible="true"
+          onClick={onClear}
+          onPointerDown={handleClearPointerDown}
+          onPointerLeave={handleClearPointerLeave}
+          onPointerUp={handleClearPointerUp}
+          onPointerCancel={handleClearPointerLeave}
+          aria-label="입력 내용 지우기"
+        >
+          {clearIconNode}
+        </button>
+      ) : null}
+      {statusIcon ? (
+        <div
+          className="input-affix input-affix-status"
+          data-slot="status"
+          data-state={state}
+        >
+          {statusIcon}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/input/markup/foundation/index.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import InputBase from "./Input";
+import InputBaseSideSlot from "./SideSlot";
+import InputBaseUtil from "./Utility";
+import InputBaseUtilityButton from "./Button";
+import { InputStatusIcon } from "./StatusIcon";
+
+export const InputFoundation = {
+  Base: InputBase,
+  Util: InputBaseUtil,
+  SideSlot: InputBaseSideSlot,
+  Icon: InputStatusIcon,
+  Button: InputBaseUtilityButton,
+};

package/src/components/input/markup/index.tsx

@@ -1 +1,11 @@
-export * from "./text";
+"use client";
+
+import { InputFoundation } from "./foundation";
+import { InputText } from "./text";
+import { InputCalendar } from "./calendar";
+
+export const Input = {
+  ...InputFoundation,
+  Text: InputText,
+  Calendar: InputCalendar,
+};

package/src/components/input/markup/text/AuthCode.tsx

@@ -1,51 +1,41 @@
-import type { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from "react";
-import { forwardRef, useCallback, useMemo, useState } from "react";
-import { Text } from "./Base";
-import { InputUtilityButton } from "./InputUtilityButton";
-import type { InputUtilityButtonClickHandler } from "./InputUtilityButton";
-import type { InputProps } from "../../types";
+"use client";
 
-const normalizeDigits = (value?: string) => (value ?? "").replace(/\D/g, "");
-const clampLength = (length?: number) => Math.max(4, Math.min(8, length ?? 6));
+import type { ChangeEvent } from "react";
+import { forwardRef, useCallback, useMemo } from "react";
+import InputBase from "../foundation/Input";
+import InputBaseUtilityButton from "../foundation/Button";
+import { useDigitField } from "../../hooks/useDigitField";
+import type { AuthCodeInputProps } from "../../types";
 
 /**
- * AuthCodeInput props. 이메일/휴대폰 컴포넌트와 동일한 UX로 인증코드를 입력한다.
- * @property {string} [value] 제어형 값.
- * @property {string} [defaultValue] 비제어 초기값.
- * @property {(value: string) => void} [onValueChange] 값 변경 시 호출.
- * @property {ComponentPropsWithoutRef<"input">["onChange"]} [onChange] native onChange override.
- * @property {number} [length=6] 허용 자리수(4~8 사이로 보정).
- * @property {(code: string) => void} [onComplete] length만큼 입력되면 호출.
- * @property {string} [placeholder="인증코드 입력"] placeholder 텍스트.
- * @property {ReactNode} [countdownText] 제한 시간 텍스트.
- * @property {ReactNode} [countdownActionLabel="시간연장"] 제한 시간 연장 버튼 라벨.
- * @property {InputUtilityButtonClickHandler} [onCountdownAction] 제한 시간 연장 핸들러.
- * @property {boolean} [countdownActionDisabled] 제한 시간 연장 버튼 disabled.
+ * 인증코드 길이를 4~8자 범위로 보정한다.
  */
-export interface AuthCodeInputProps extends Omit<
-  InputProps,
-  "type" | "inputMode" | "pattern" | "onChange" | "value" | "defaultValue"
-> {
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
-  onChange?: ComponentPropsWithoutRef<"input">["onChange"];
-  length?: number;
-  onComplete?: (code: string) => void;
-  placeholder?: string;
-  countdownText?: ReactNode;
-  countdownActionLabel?: ReactNode;
-  onCountdownAction?: InputUtilityButtonClickHandler;
-  countdownActionDisabled?: boolean;
-}
+const clampLength = (length?: number) => Math.max(4, Math.min(8, length ?? 6));
 
+/**
+ * AuthCode 입력 필드 기본 placeholder.
+ */
 const DEFAULT_PLACEHOLDER = "인증코드 입력";
+/**
+ * 제한 시간 연장 버튼 기본 라벨.
+ */
 const DEFAULT_COUNTDOWN_ACTION_LABEL = "시간연장";
 
 /**
  * AuthCodeInput — Text Input priority secondary 스타일로 구성된 인증번호 입력.
  * @component
  * @param {AuthCodeInputProps} props 인증코드 입력 props
+ * @property {string} [props.value] 제어형 인증코드 값
+ * @property {string} [props.defaultValue] 비제어 초기값
+ * @property {(value: string) => void} [props.onValueChange] 값 변경 콜백
+ * @property {(event: ChangeEvent<HTMLInputElement>) => void} [props.onChange] native onChange override
+ * @property {number} [props.length=6] 허용 자리수(4~8로 보정)
+ * @property {(code: string) => void} [props.onComplete] 자리수 충족 시 호출
+ * @property {string} [props.placeholder="인증코드 입력"] placeholder 텍스트
+ * @property {ReactNode} [props.countdownText] 제한 시간 표시
+ * @property {ReactNode} [props.countdownActionLabel="시간연장"] 제한 시간 연장 버튼 라벨
+ * @property {InputUtilityButtonClickHandler} [props.onCountdownAction] 연장 버튼 클릭 핸들러
+ * @property {boolean} [props.countdownActionDisabled] 연장 버튼 disabled 여부
  */
 const AuthCodeInput = forwardRef<HTMLInputElement, AuthCodeInputProps>(
   (
@@ -68,31 +58,22 @@ const AuthCodeInput = forwardRef<HTMLInputElement, AuthCodeInputProps>(
     forwardedRef,
   ) => {
     const safeLength = clampLength(length);
-    const [innerValue, setInnerValue] = useState(() =>
-      normalizeDigits(defaultValue),
-    );
-    const isControlled = value !== undefined;
-    const resolvedValue = isControlled ? normalizeDigits(value) : innerValue;
+    const { digits: resolvedValue, handleDigitsChange } = useDigitField({
+      value,
+      defaultValue,
+      maxLength: safeLength,
+    });
 
     const handleChange = useCallback(
       (event: ChangeEvent<HTMLInputElement>) => {
-        const digits = normalizeDigits(event.currentTarget.value).slice(
-          0,
-          safeLength,
-        );
-        if (!isControlled) {
-          setInnerValue(digits);
-        }
-        if (event.currentTarget.value !== digits) {
+        const digits = handleDigitsChange(event);
+        if (event.currentTarget.value !== digits)
           event.currentTarget.value = digits;
-        }
         onValueChange?.(digits);
-        if (digits.length === safeLength) {
-          onComplete?.(digits);
-        }
+        if (digits.length === safeLength) onComplete?.(digits);
         onChange?.(event);
       },
-      [isControlled, onChange, onComplete, onValueChange, safeLength],
+      [handleDigitsChange, onChange, onComplete, onValueChange, safeLength],
     );
 
     const countdownActions = useMemo(() => {
@@ -101,18 +82,19 @@ const AuthCodeInput = forwardRef<HTMLInputElement, AuthCodeInputProps>(
       }
 
       return (
-        <div className="auth-code-input__actions">
+        // 인증 타이머/액션 영역
+        <div className="auth-code-input-actions">
           {countdownText ? (
-            <span className="auth-code-input__countdown">{countdownText}</span>
+            <span className="auth-code-input-countdown">{countdownText}</span>
           ) : null}
           {onCountdownAction ? (
-            <InputUtilityButton
+            <InputBaseUtilityButton
               priority="tertiary"
               onClick={onCountdownAction}
               disabled={countdownActionDisabled}
             >
               {countdownActionLabel}
-            </InputUtilityButton>
+            </InputBaseUtilityButton>
           ) : null}
         </div>
       );
@@ -124,7 +106,7 @@ const AuthCodeInput = forwardRef<HTMLInputElement, AuthCodeInputProps>(
     ]);
 
     return (
-      <Text
+      <InputBase
         {...restProps}
         ref={forwardedRef}
         priority={priority}

package/src/components/input/markup/text/Email.tsx

@@ -1,77 +1,24 @@
-import type { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from "react";
-import { forwardRef, useCallback, useMemo } from "react";
-import type { InputProps, InputState } from "../../types";
-import { Text } from "./Base";
-import { AuthCodeInput } from "./AuthCode";
-import type { AuthCodeInputProps } from "./AuthCode";
-import { InputUtilityButton } from "./InputUtilityButton";
-import type { InputUtilityButtonClickHandler } from "./InputUtilityButton";
+"use client";
 
-/**
- * EmailInput props. 이메일 입력 + 인증 요청/코드 입력 옵션을 정의한다.
- * @property {string} [value] 제어형 값.
- * @property {string} [defaultValue] 비제어 초기값.
- * @property {(value: string) => void} [onValueChange] 값 변경 시 호출.
- * @property {ComponentPropsWithoutRef<"input">["onChange"]} [onChange] native onChange override.
- * @property {InputUtilityButtonClickHandler} [onRequestCode] 인증 요청 버튼 클릭 시 호출(optional).
- * @property {ReactNode} [requestButtonLabel="인증번호 요청"] 인증 요청 버튼 라벨(optional).
- * @property {boolean} [requestButtonDisabled] 인증 요청 버튼 disabled(optional).
- * @property {ReactNode} [countdownText] 인증 제한 시간 안내 텍스트(optional).
- * @property {ReactNode} [countdownActionLabel="시간연장"] 제한 시간 연장 버튼 라벨(optional).
- * @property {InputUtilityButtonClickHandler} [onCountdownAction] 제한 시간 연장 버튼 클릭 콜백(optional).
- * @property {boolean} [countdownActionDisabled] 제한 시간 연장 버튼 disabled(optional).
- * @property {boolean} [codeVisible] 인증번호 입력 UI 노출 여부(optional).
- * @property {number} [codeLength=6] 인증번호 길이(optional).
- * @property {ReactNode} [codeLabel] 인증번호 입력 label(optional).
- * @property {ReactNode} [codeHelper] 인증번호 helper(optional).
- * @property {InputState} [codeState] 인증번호 입력 상태(optional).
- * @property {(code: string) => void} [onCodeComplete] 인증번호 입력 완료 시 호출(optional).
- * @property {string} [codePlaceholder] 인증번호 입력 placeholder(optional).
- * @property {Partial<AuthCodeInputProps>} [codeInputProps] 인증코드 입력 추가 설정(register 등) 전달용.
- */
-export interface EmailInputProps extends Omit<
-  InputProps,
-  "type" | "inputMode" | "pattern" | "onChange" | "value" | "defaultValue"
-> {
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
-  onChange?: ComponentPropsWithoutRef<"input">["onChange"];
-  onRequestCode?: InputUtilityButtonClickHandler;
-  requestButtonLabel?: ReactNode;
-  requestButtonDisabled?: boolean;
-  countdownText?: ReactNode;
-  countdownActionLabel?: ReactNode;
-  onCountdownAction?: InputUtilityButtonClickHandler;
-  countdownActionDisabled?: boolean;
-  codeVisible?: boolean;
-  codeLength?: number;
-  codeLabel?: ReactNode;
-  codeHelper?: ReactNode;
-  codeState?: InputState;
-  onCodeComplete?: (code: string) => void;
-  codePlaceholder?: string;
-  codeInputProps?: Partial<AuthCodeInputProps>;
-}
+import type { ChangeEvent } from "react";
+import { forwardRef, useCallback } from "react";
+
+import type { EmailInputProps } from "../../types";
+import InputBase from "../foundation/Input";
+import { renderVerificationRequestButton } from "../../utils/verification";
 
 /**
- * 이메일 인증 입력 컴포넌트; 이메일 입력 + 인증요청 버튼 + OneTimeCode 입력을 옵션으로 제공한다.
+ * EmailInput — 이메일 입력과 인증요청 버튼만 제공한다.
  * @component
- * @param {EmailInputProps} props 이메일 인증 props
- * @param {string} [props.value] 제어형 이메일 값
- * @param {string} [props.defaultValue] 비제어 이메일 초기값
- * @param {(value: string) => void} [props.onValueChange] 이메일 변경 콜백
- * @param {ComponentPropsWithoutRef<"input">["onChange"]} [props.onChange] native onChange override
- * @param {InputUtilityButtonClickHandler} [props.onRequestCode] 인증요청 버튼 클릭 시 호출
- * @param {string} [props.requestButtonLabel] 인증요청 버튼 라벨
- * @param {boolean} [props.requestButtonDisabled] 인증요청 버튼 disabled
- * @param {ReactNode} [props.countdownText] 제한 시간 안내 텍스트
- * @param {boolean} [props.codeVisible] 인증번호 입력 UI 노출 여부
- * @param {number} [props.codeLength] 인증번호 길이
- * @param {ReactNode} [props.codeLabel] 인증번호 label
- * @param {ReactNode} [props.codeHelper] 인증번호 helper
- * @param {InputState} [props.codeState] 인증번호 입력 상태
- * @param {(code: string) => void} [props.onCodeComplete] 인증번호 입력 완료 시 호출
+ * @param {EmailInputProps} props 이메일 입력 props
+ * @property {string} [props.value] 제어형 이메일 값
+ * @property {string} [props.defaultValue] 비제어 초기값
+ * @property {(value: string) => void} [props.onValueChange] 값 변경 콜백
+ * @property {(event: ChangeEvent<HTMLInputElement>) => void} [props.onChange] native onChange override
+ * @property {InputUtilityButtonClickHandler} [props.onRequestCode] 인증요청 버튼 핸들러
+ * @property {ReactNode} [props.requestButtonLabel] 버튼 라벨
+ * @property {boolean} [props.requestButtonDisabled] 버튼 disabled 상태
+ * @property {ReactNode} [props.right] 기본 오른쪽 슬롯 override
  */
 const EmailInput = forwardRef<HTMLInputElement, EmailInputProps>(
   (
@@ -83,23 +30,12 @@ const EmailInput = forwardRef<HTMLInputElement, EmailInputProps>(
       onRequestCode,
       requestButtonLabel = "인증번호 요청",
       requestButtonDisabled,
-      countdownText,
-      countdownActionLabel = "시간연장",
-      onCountdownAction,
-      countdownActionDisabled,
-      codeVisible,
-      codeLength = 6,
-      codeLabel,
-      codeHelper,
-      codeState,
-      onCodeComplete,
-      codePlaceholder = "인증코드 입력",
       right,
-      codeInputProps,
       ...restProps
     },
     forwardedRef,
   ) => {
+    // 이메일 값 변경 시 상위 상태(onValueChange)와 native onChange를 모두 호출한다.
     const handleChange = useCallback(
       (event: ChangeEvent<HTMLInputElement>) => {
         onValueChange?.(event.currentTarget.value);
@@ -108,41 +44,16 @@ const EmailInput = forwardRef<HTMLInputElement, EmailInputProps>(
       [onChange, onValueChange],
     );
 
-    const actionButton = useMemo(() => {
-      if (!onRequestCode) {
-        return null;
-      }
-
-      return (
-        <InputUtilityButton
-          priority="primary"
-          onClick={onRequestCode}
-          disabled={requestButtonDisabled}
-        >
-          {requestButtonLabel}
-        </InputUtilityButton>
-      );
-    }, [onRequestCode, requestButtonDisabled, requestButtonLabel]);
-
-    const resolvedCodeProps: AuthCodeInputProps = {
-      ...(codeInputProps ?? {}),
-      length: codeLength ?? codeInputProps?.length,
-      label: codeLabel ?? codeInputProps?.label,
-      helper: codeHelper ?? codeInputProps?.helper,
-      state: codeState ?? codeInputProps?.state,
-      placeholder: codePlaceholder ?? codeInputProps?.placeholder,
-      countdownText: countdownText ?? codeInputProps?.countdownText,
-      countdownActionLabel:
-        countdownActionLabel ?? codeInputProps?.countdownActionLabel,
-      onCountdownAction: onCountdownAction ?? codeInputProps?.onCountdownAction,
-      countdownActionDisabled:
-        countdownActionDisabled ?? codeInputProps?.countdownActionDisabled,
-      onComplete: onCodeComplete ?? codeInputProps?.onComplete,
-    };
+    // 인증 요청 옵션이 있을 때만 우측 액션 버튼을 만든다.
+    const actionButton = renderVerificationRequestButton({
+      onRequestCode,
+      requestButtonDisabled,
+      requestButtonLabel,
+    });
 
     return (
       <div className="email-verification">
-        <Text
+        <InputBase
           {...restProps}
           ref={forwardedRef}
           type="email"
@@ -152,7 +63,6 @@ const EmailInput = forwardRef<HTMLInputElement, EmailInputProps>(
           onChange={handleChange}
           right={right ?? actionButton}
         />
-        {codeVisible ? <AuthCodeInput {...resolvedCodeProps} /> : null}
       </div>
     );
   },

package/src/components/input/markup/text/Password.tsx

@@ -1,29 +1,19 @@
-import { forwardRef, useMemo, useState } from "react";
-import type { InputProps } from "../../types";
-import { Text } from "./Base";
+"use client";
+
+import { forwardRef, useCallback, useState } from "react";
+import type { InputPasswordProps } from "../../types";
+import InputBase from "../foundation/Input";
 import HideOffIcon from "../../img/hide-off.svg";
 import HideOnIcon from "../../img/hide-on.svg";
 
-/**
- * PasswordInput 전용 props. Text Input props에서 type을 password 전용으로 고정하고 보기/숨김 토글 옵션을 확장한다.
- * @property {boolean} [defaultVisible=false] 초기 렌더 시 비밀번호를 드러낼지 여부.
- * @property {{show: string; hide: string}} [toggleLabel] 토글 버튼에 사용할 라벨 텍스트 집합.
- */
-export interface InputPasswordProps extends Omit<InputProps, "type"> {
-  defaultVisible?: boolean;
-  toggleLabel?: {
-    show: string;
-    hide: string;
-  };
-}
-
 /**
  * PasswordInput — 기본 Text 입력을 비밀번호 토글 UX로 확장한다.
  * @component
  * @param {InputPasswordProps} props
- * @param {boolean} [props.defaultVisible=false] 초기 노출 여부.
- * @param {{show: string; hide: string}} [props.toggleLabel={show:"보기",hide:"숨김"}] 토글 버튼 라벨.
- * 나머지 props는 Text Input과 동일하다.
+ * @property {boolean} [props.defaultVisible=false] 초기 노출 여부
+ * @property {{show: string; hide: string}} [props.toggleLabel] 토글 버튼 라벨
+ * @property {ReactNode} [props.right] 오른쪽 슬롯 override
+ * @property {string | number | readonly string[]} [props.defaultValue] 초기값
  */
 const PasswordInput = forwardRef<HTMLInputElement, InputPasswordProps>(
   (
@@ -38,33 +28,34 @@ const PasswordInput = forwardRef<HTMLInputElement, InputPasswordProps>(
   ) => {
     const [visible, setVisible] = useState(defaultVisible);
 
-    const toggleButton = useMemo(
-      () => (
-        <button
-          type="button"
-          className="input-password-toggle"
-          onClick={() => setVisible(prev => !prev)}
-          aria-pressed={visible}
-          aria-label={visible ? toggleLabel.hide : toggleLabel.show}
-        >
-          {/* 토글 상태에 따라 hide-on/off 아이콘을 교체한다. */}
-          {visible ? (
-            <HideOffIcon aria-hidden="true" />
-          ) : (
-            <HideOnIcon aria-hidden="true" />
-          )}
-        </button>
-      ),
-      [toggleLabel.hide, toggleLabel.show, visible],
+    const handleToggle = useCallback(() => {
+      setVisible(prev => !prev);
+    }, []);
+
+    const toggleButton = (
+      <button
+        type="button"
+        className="input-password-toggle"
+        onClick={handleToggle}
+        aria-pressed={visible}
+        aria-label={visible ? toggleLabel.hide : toggleLabel.show}
+      >
+        {/* 토글 상태에 따라 hide-on/off 아이콘을 교체한다. */}
+        {visible ? (
+          <HideOffIcon aria-hidden="true" />
+        ) : (
+          <HideOnIcon aria-hidden="true" />
+        )}
+      </button>
     );
 
     return (
-      <Text
-        {...restProps}
+      <InputBase
         ref={forwardedRef}
         type={visible ? "text" : "password"}
         defaultValue={defaultValue}
         right={right ?? toggleButton}
+        {...restProps}
       />
     );
   },