@uniai-fe/uds-primitives 0.0.15 → 0.0.17

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

@@ -295,63 +295,69 @@ const Text = forwardRef<HTMLInputElement, InputProps>(
             data-size={size}
             data-block={block ? "true" : undefined}
           >
-            {shouldRenderInlineLabel ? (
-              <div
-                className="input-inline-label"
-                aria-hidden="true"
-                data-slot="inline-label"
-              >
-                {label}
-              </div>
-            ) : null}
-            {left ? (
-              <div
-                className={`${INPUT_AFFIX_CLASSNAME} ${INPUT_AFFIX_CLASSNAME}--left`}
-                data-slot="left"
-              >
-                {left}
-              </div>
-            ) : null}
-            <input
-              {...restProps}
-              id={fieldId}
-              ref={mergedRef}
-              className={inputElementClassName}
-              disabled={isDisabled}
-              aria-invalid={resolvedState === "error" ? true : undefined}
-              aria-describedby={helperElementId}
-              type={type}
-              value={value}
-              defaultValue={defaultValue}
-              name={inputName}
-              onChange={handleChange}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-            />
-            {right ? (
-              <div
-                className={`${INPUT_AFFIX_CLASSNAME} ${INPUT_AFFIX_CLASSNAME}--right`}
-                data-slot="right"
-              >
-                {right}
-              </div>
-            ) : null}
-            {showClearIcon ? (
-              <div
-                className={`${INPUT_AFFIX_CLASSNAME} ${INPUT_AFFIX_CLASSNAME}--clear`}
-                data-slot="clear"
-                data-visible="true"
-              >
-                {effectiveClearIcon}
-              </div>
-            ) : null}
-            {statusSlot ? (
-              <div
-                className={`${INPUT_AFFIX_CLASSNAME} ${INPUT_AFFIX_CLASSNAME}--status`}
-                data-slot="status"
-                data-state={resolvedState}
-              >
-                {statusSlot}
+            <div className="input-field__control">
+              {shouldRenderInlineLabel ? (
+                <div
+                  className="input-inline-label"
+                  aria-hidden="true"
+                  data-slot="inline-label"
+                >
+                  {label}
+                </div>
+              ) : null}
+              {left ? (
+                <div
+                  className={`${INPUT_AFFIX_CLASSNAME} ${INPUT_AFFIX_CLASSNAME}--left`}
+                  data-slot="left"
+                >
+                  {left}
+                </div>
+              ) : null}
+              <input
+                {...restProps}
+                id={fieldId}
+                ref={mergedRef}
+                className={inputElementClassName}
+                disabled={isDisabled}
+                aria-invalid={resolvedState === "error" ? true : undefined}
+                aria-describedby={helperElementId}
+                type={type}
+                value={value}
+                defaultValue={defaultValue}
+                name={inputName}
+                onChange={handleChange}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+              />
+            </div>
+            {right || showClearIcon || statusSlot ? (
+              <div className="input-field__utilities">
+                {right ? (
+                  <div
+                    className={`${INPUT_AFFIX_CLASSNAME} ${INPUT_AFFIX_CLASSNAME}--right`}
+                    data-slot="right"
+                  >
+                    {right}
+                  </div>
+                ) : null}
+                {showClearIcon ? (
+                  <div
+                    className={`${INPUT_AFFIX_CLASSNAME} ${INPUT_AFFIX_CLASSNAME}--clear`}
+                    data-slot="clear"
+                    data-visible="true"
+                  >
+                    {effectiveClearIcon}
+                  </div>
+                ) : null}
+                {statusSlot ? (
+                  <div
+                    className={`${INPUT_AFFIX_CLASSNAME} ${INPUT_AFFIX_CLASSNAME}--status`}
+                    data-slot="status"
+                    data-state={resolvedState}
+                  >
+                    {statusSlot}
+                  </div>
+                ) : null}
               </div>
             ) : null}
           </div>

package/src/components/input/markup/text/{EmailVerification.tsx → Email.tsx}

@@ -2,26 +2,34 @@ import type { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from "react";
 import { forwardRef, useCallback, useMemo } from "react";
 import type { InputProps, InputState } from "../../types";
 import { Text } from "./Base";
-import { IdentificationInput } from "./Identification";
+import { AuthCodeInput } from "./AuthCode";
+import type { AuthCodeInputProps } from "./AuthCode";
+import { InputUtilityButton } from "./InputUtilityButton";
+import type { InputUtilityButtonClickHandler } from "./InputUtilityButton";
 
 /**
- * EmailVerificationInput props. 이메일 입력 + 인증 요청/코드 입력 옵션을 정의한다.
+ * EmailInput props. 이메일 입력 + 인증 요청/코드 입력 옵션을 정의한다.
  * @property {string} [value] 제어형 값.
  * @property {string} [defaultValue] 비제어 초기값.
  * @property {(value: string) => void} [onValueChange] 값 변경 시 호출.
  * @property {ComponentPropsWithoutRef<"input">["onChange"]} [onChange] native onChange override.
- * @property {() => void} [onRequestCode] 인증 요청 버튼 클릭 시 호출(optional).
- * @property {string} [requestButtonLabel="인증번호 요청"] 인증 요청 버튼 라벨(optional).
+ * @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 EmailVerificationInputProps extends Omit<
+export interface EmailInputProps extends Omit<
   InputProps,
   "type" | "inputMode" | "pattern" | "onChange" | "value" | "defaultValue"
 > {
@@ -29,27 +37,32 @@ export interface EmailVerificationInputProps extends Omit<
   defaultValue?: string;
   onValueChange?: (value: string) => void;
   onChange?: ComponentPropsWithoutRef<"input">["onChange"];
-  onRequestCode?: () => void;
-  requestButtonLabel?: string;
+  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>;
 }
 
 /**
  * 이메일 인증 입력 컴포넌트; 이메일 입력 + 인증요청 버튼 + OneTimeCode 입력을 옵션으로 제공한다.
  * @component
- * @param {EmailVerificationInputProps} props 이메일 인증 props
+ * @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 {() => void} [props.onRequestCode] 인증요청 버튼 클릭 시 호출
+ * @param {InputUtilityButtonClickHandler} [props.onRequestCode] 인증요청 버튼 클릭 시 호출
  * @param {string} [props.requestButtonLabel] 인증요청 버튼 라벨
  * @param {boolean} [props.requestButtonDisabled] 인증요청 버튼 disabled
  * @param {ReactNode} [props.countdownText] 제한 시간 안내 텍스트
@@ -60,10 +73,7 @@ export interface EmailVerificationInputProps extends Omit<
  * @param {InputState} [props.codeState] 인증번호 입력 상태
  * @param {(code: string) => void} [props.onCodeComplete] 인증번호 입력 완료 시 호출
  */
-const EmailVerificationInput = forwardRef<
-  HTMLInputElement,
-  EmailVerificationInputProps
->(
+const EmailInput = forwardRef<HTMLInputElement, EmailInputProps>(
   (
     {
       value,
@@ -74,13 +84,18 @@ const EmailVerificationInput = forwardRef<
       requestButtonLabel = "인증번호 요청",
       requestButtonDisabled,
       countdownText,
+      countdownActionLabel = "시간연장",
+      onCountdownAction,
+      countdownActionDisabled,
       codeVisible,
       codeLength = 6,
       codeLabel,
       codeHelper,
       codeState,
       onCodeComplete,
+      codePlaceholder = "인증코드 입력",
       right,
+      codeInputProps,
       ...restProps
     },
     forwardedRef,
@@ -99,17 +114,32 @@ const EmailVerificationInput = forwardRef<
       }
 
       return (
-        <button
-          type="button"
-          className="input-action-button"
+        <InputUtilityButton
+          priority="primary"
           onClick={onRequestCode}
           disabled={requestButtonDisabled}
         >
           {requestButtonLabel}
-        </button>
+        </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,
+    };
+
     return (
       <div className="email-verification">
         <Text
@@ -122,23 +152,12 @@ const EmailVerificationInput = forwardRef<
           onChange={handleChange}
           right={right ?? actionButton}
         />
-        {countdownText ? (
-          <div className="email-verification__countdown">{countdownText}</div>
-        ) : null}
-        {codeVisible ? (
-          <IdentificationInput
-            length={codeLength}
-            label={codeLabel}
-            helper={codeHelper}
-            state={codeState}
-            onComplete={onCodeComplete}
-          />
-        ) : null}
+        {codeVisible ? <AuthCodeInput {...resolvedCodeProps} /> : null}
       </div>
     );
   },
 );
 
-EmailVerificationInput.displayName = "EmailVerificationInput";
+EmailInput.displayName = "EmailInput";
 
-export { EmailVerificationInput };
+export { EmailInput };

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

@@ -0,0 +1,46 @@
+import type { MouseEvent, ReactNode } from "react";
+import { Button } from "../../../button";
+import type { ButtonPriority, ButtonProps } from "../../../button/types";
+
+export type InputUtilityButtonClickHandler = (
+  event?: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLAnchorElement>,
+) => void;
+
+interface InputUtilityButtonProps {
+  children: ReactNode;
+  priority?: ButtonPriority;
+  disabled?: boolean;
+  onClick?: InputUtilityButtonClickHandler;
+}
+
+/**
+ * 입력 필드 우측에 배치되는 유틸리티 버튼; outlined-small scale을 공통으로 사용한다.
+ * @component
+ * @param {InputUtilityButtonProps} props 유틸 버튼 props
+ * @param {React.ReactNode} props.children 라벨
+ * @param {ButtonPriority} [props.priority="primary"] 색상 우선순위
+ * @param {boolean} [props.disabled] disabled 여부
+ * @param {InputUtilityButtonClickHandler} [props.onClick] onClick 핸들러
+ */
+export function InputUtilityButton({
+  children,
+  priority = "primary",
+  disabled,
+  onClick,
+}: InputUtilityButtonProps) {
+  const handleButtonClick: ButtonProps["onClick"] = event => {
+    onClick?.(event);
+  };
+
+  return (
+    <Button.Default
+      scale="outlined-small"
+      priority={priority}
+      className="input-utility-button"
+      onClick={handleButtonClick}
+      disabled={disabled}
+    >
+      {children}
+    </Button.Default>
+  );
+}

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

@@ -1,8 +1,10 @@
 import { maskPhone } from "@uniai-fe/util-functions";
-import type { ChangeEvent, ComponentPropsWithoutRef } from "react";
+import type { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from "react";
 import { forwardRef, useCallback, useMemo, useState } from "react";
-import type { InputProps } from "../../types";
+import type { InputProps, InputState } from "../../types";
 import { Text } from "./Base";
+import { AuthCodeInput } from "./AuthCode";
+import { InputUtilityButton } from "./InputUtilityButton";
 
 /**
  * PhoneInput 전용 props. Text Input 중 전화번호 UX에 필요한 필드를 정의한다.
@@ -13,6 +15,17 @@ import { Text } from "./Base";
  * @property {() => void} [onRequestCode] 인증 요청 버튼 클릭 시 호출(optional).
  * @property {string} [requestButtonLabel="인증번호 요청"] 인증 요청 버튼 라벨(optional).
  * @property {boolean} [requestButtonDisabled] 인증 요청 버튼 disabled(optional).
+ * @property {React.ReactNode} [countdownText] 인증 제한 시간 안내 텍스트(optional).
+ * @property {React.ReactNode} [countdownActionLabel="시간연장"] 제한 시간 연장 버튼(optional).
+ * @property {() => void} [onCountdownAction] 제한 시간 연장 핸들러(optional).
+ * @property {boolean} [countdownActionDisabled] 제한 시간 연장 disabled(optional).
+ * @property {boolean} [codeVisible] 인증번호 입력 UI 노출 여부(optional).
+ * @property {number} [codeLength=6] 인증번호 길이(optional).
+ * @property {React.ReactNode} [codeLabel] 인증번호 label(optional).
+ * @property {React.ReactNode} [codeHelper] 인증번호 helper 텍스트(optional).
+ * @property {InputState} [codeState] 인증번호 입력 상태(optional).
+ * @property {(code: string) => void} [onCodeComplete] 인증번호 입력 완료 콜백(optional).
+ * @property {string} [codePlaceholder="인증코드 입력"] 인증번호 placeholder(optional).
  */
 export interface PhoneInputProps extends Omit<
   InputProps,
@@ -25,6 +38,17 @@ export interface PhoneInputProps extends Omit<
   onRequestCode?: () => void;
   requestButtonLabel?: string;
   requestButtonDisabled?: boolean;
+  countdownText?: ReactNode;
+  countdownActionLabel?: ReactNode;
+  onCountdownAction?: () => void;
+  countdownActionDisabled?: boolean;
+  codeVisible?: boolean;
+  codeLength?: number;
+  codeLabel?: ReactNode;
+  codeHelper?: ReactNode;
+  codeState?: InputState;
+  onCodeComplete?: (code: string) => void;
+  codePlaceholder?: string;
 }
 
 const MAX_DIGITS = 11;
@@ -56,6 +80,17 @@ const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
       onRequestCode,
       requestButtonLabel = "인증번호 요청",
       requestButtonDisabled,
+      countdownText,
+      countdownActionLabel = "시간연장",
+      onCountdownAction,
+      countdownActionDisabled,
+      codeVisible,
+      codeLength = 6,
+      codeLabel,
+      codeHelper,
+      codeState,
+      onCodeComplete,
+      codePlaceholder = "인증코드 입력",
       right,
       ...restProps
     },
@@ -96,28 +131,51 @@ const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
       }
       // 휴대폰 인증 입력은 우측 right 슬롯에 인증 버튼을 둔다.
       return (
-        <button
-          type="button"
-          className="input-action-button"
+        <InputUtilityButton
+          priority="primary"
           onClick={onRequestCode}
           disabled={requestButtonDisabled}
         >
           {requestButtonLabel}
-        </button>
+        </InputUtilityButton>
       );
     }, [onRequestCode, requestButtonDisabled, requestButtonLabel]);
 
-    return (
+    const phoneField = (
       <Text
         {...restProps}
         ref={forwardedRef}
         type="tel"
         inputMode="tel"
+        placeholder="000-0000-0000"
         value={formattedValue}
         onChange={handleChange}
         right={right ?? actionButton}
       />
     );
+
+    // 인증번호 UI가 비활성화된 경우에는 기존 PhoneInput DOM 구조를 그대로 유지한다.
+    if (!codeVisible) {
+      return phoneField;
+    }
+
+    return (
+      <div className="phone-verification">
+        {phoneField}
+        <AuthCodeInput
+          length={codeLength}
+          label={codeLabel}
+          helper={codeHelper}
+          state={codeState}
+          placeholder={codePlaceholder}
+          countdownText={countdownText}
+          countdownActionLabel={countdownActionLabel}
+          onCountdownAction={onCountdownAction}
+          countdownActionDisabled={countdownActionDisabled}
+          onComplete={onCodeComplete}
+        />
+      </div>
+    );
   },
 );
 

package/src/components/input/markup/text/index.ts

@@ -2,11 +2,11 @@ export { Text } from "./Base";
 export { Text as Input } from "./Base";
 export { PasswordInput } from "./Password";
 export { PhoneInput } from "./Phone";
-export { EmailVerificationInput } from "./EmailVerification";
+export { EmailInput } from "./Email";
 export { SearchInput } from "./Search";
-export { IdentificationInput } from "./Identification";
+export { AuthCodeInput } from "./AuthCode";
 export type { InputPasswordProps } from "./Password";
 export type { PhoneInputProps } from "./Phone";
-export type { EmailVerificationInputProps } from "./EmailVerification";
+export type { EmailInputProps } from "./Email";
 export type { SearchInputProps } from "./Search";
-export type { IdentificationInputProps } from "./Identification";
+export type { AuthCodeInputProps } from "./AuthCode";

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

@@ -104,18 +104,52 @@
     padding-inline: 0;
     padding-block: var(--spacing-padding-4);
     background-color: transparent;
+
+    &[data-state="active"],
+    &[data-state="focused"] {
+      border-bottom-color: var(--theme-input-border-active);
+      border-bottom-width: var(--theme-input-border-width-emphasis);
+    }
+
+    &[data-state="success"] {
+      border-bottom-color: var(--theme-input-border-success);
+      border-bottom-width: var(--theme-input-border-width-emphasis);
+    }
+
+    &[data-state="error"] {
+      border-bottom-color: var(--theme-input-border-error);
+      border-bottom-width: var(--theme-input-border-width-emphasis);
+    }
+
+    &[data-state="disabled"] {
+      border-bottom-color: var(--theme-input-border-underline-disabled);
+      border-bottom-width: var(--theme-input-border-width-default);
+    }
   }
 
   &[data-priority="tertiary"] {
     border-radius: var(--theme-input-radius-tertiary);
     background-color: var(--theme-input-surface);
     min-height: var(--theme-input-height-tertiary);
-    flex-wrap: wrap;
     row-gap: var(--spacing-gap-1);
     column-gap: var(--theme-input-gap);
+    flex-wrap: wrap;
+    align-items: center;
+
+    .input-field__control {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      column-gap: var(--theme-input-gap);
+      row-gap: var(--spacing-gap-1);
+      align-items: center;
+      flex: 1 1 auto;
+      min-width: 0;
+    }
 
     .input-inline-label {
-      flex-basis: 100%;
+      grid-column: 1 / -1;
+      margin: 0;
+      align-self: flex-start;
     }
 
     .input-element {
@@ -124,9 +158,9 @@
       flex: 1 1 auto;
     }
 
-    .input-element + .input-affix {
-      // inline label 다음 줄에서 input 오른쪽 끝으로 아이콘을 밀어낸다.
-      margin-left: auto;
+    .input-field__utilities {
+      align-self: center;
+      margin-left: 0;
     }
   }
 
@@ -188,6 +222,26 @@
   }
 }
 
+.input-field__control {
+  display: flex;
+  align-items: center;
+  gap: var(--theme-input-gap);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.input-field__utilities {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-2, 8px);
+  flex-shrink: 0;
+  margin-left: var(--spacing-gap-3, 12px);
+
+  .input-affix {
+    margin-left: 0;
+  }
+}
+
 .input-inline-label {
   order: -2;
   flex-basis: 100%;
@@ -219,7 +273,7 @@
 }
 
 .input-affix {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   min-width: 20px;
@@ -313,8 +367,7 @@
   }
 }
 
-.input-password-toggle,
-.input-action-button {
+.input-password-toggle {
   border: none;
   background: transparent;
   color: var(--theme-input-label-accent-color);
@@ -374,14 +427,46 @@
   color: var(--theme-input-helper-color);
 }
 
-.email-verification {
+.email-verification,
+.phone-verification {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-gap-4);
 }
 
-.email-verification__countdown {
-  font-size: var(--font-caption-medium-size);
-  line-height: var(--font-caption-medium-line-height);
-  color: var(--theme-input-helper-color);
+.auth-code-input__actions,
+.email-verification__code-actions,
+.phone-verification__code-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-gap-3);
+  min-width: 0;
+}
+
+.auth-code-input__countdown,
+.email-verification__countdown,
+.phone-verification__countdown {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  font-style: normal;
+  font-size: 13px;
+  line-height: 1em;
+  letter-spacing: -0.0025em;
+  color: var(--color-primary-default);
+  flex-shrink: 0;
+}
+
+.button.input-utility-button {
+  min-height: 32px;
+  padding: var(--spacing-padding-2, 4px) var(--spacing-padding-6, 24px);
+  border-radius: var(--shape-rounded-1, 8px);
+
+  .button-label {
+    font-size: var(--font-body-xxsmall-size);
+    line-height: var(--font-body-xxsmall-line-height);
+    letter-spacing: var(--font-body-xxsmall-letter-spacing);
+    font-weight: var(--font-body-xxsmall-weight);
+  }
 }