@uniai-fe/uds-primitives 0.1.13 → 0.2.0

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

@@ -1,74 +1,35 @@
+"use client";
+
 import { maskPhone } from "@uniai-fe/util-functions";
-import type { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from "react";
-import { forwardRef, useCallback, useMemo, useState } from "react";
-import type { InputProps, InputState } from "../../types";
-import { Text } from "./Base";
-import { AuthCodeInput } from "./AuthCode";
-import { InputUtilityButton } from "./InputUtilityButton";
+import type { ChangeEvent } from "react";
+import { forwardRef, useCallback, useMemo } from "react";
+import type { PhoneInputProps } from "../../types";
+import InputBase from "../foundation/Input";
+import { renderVerificationRequestButton } from "../../utils/verification";
+import { useDigitField } from "../../hooks/useDigitField";
 
 /**
- * PhoneInput 전용 props. Text Input 중 전화번호 UX에 필요한 필드를 정의한다.
- * @property {string} [value] 제어형 포맷팅 값.
- * @property {string} [defaultValue] 비제어 초기값(숫자/포맷 모두 허용).
- * @property {(value: string, digits: string) => void} [onValueChange] 포맷팅 값/숫자만 값을 함께 전달.
- * @property {ComponentPropsWithoutRef<"input">["onChange"]} [onChange] native onChange override.
- * @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).
+ * 휴대폰 입력에서 허용할 숫자 자리수. 국내 번호 11자 기준.
  */
-export interface PhoneInputProps extends Omit<
-  InputProps,
-  "type" | "inputMode" | "pattern" | "onChange" | "value" | "defaultValue"
-> {
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string, digits: string) => void;
-  onChange?: ComponentPropsWithoutRef<"input">["onChange"];
-  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;
 
-const normalizeDigits = (value?: string) => (value ?? "").replace(/\D/g, "");
-
-// util-functions의 maskPhone 규칙으로 자리수/패턴을 일원화한다.
+/**
+ * util-functions의 maskPhone 규칙으로 자리수/패턴을 일원화한다.
+ */
 const formatPhoneNumber = (digits: string) => maskPhone(digits);
 
 /**
- * 휴대폰 번호 입력 컴포넌트; 기본은 마스킹만 제공하고 인증 UI는 optional props로 노출한다.
+ * 휴대폰 번호 입력 컴포넌트; 마스킹 처리와 인증요청 버튼까지만 담당한다.
  * @component
  * @param {PhoneInputProps} props 휴대폰 입력 props
  * @param {string} [props.value] 제어형 포맷 값
  * @param {string} [props.defaultValue] 비제어 초기값
  * @param {(value: string, digits: string) => void} [props.onValueChange] 포맷/숫자 변경 콜백
- * @param {ComponentPropsWithoutRef<"input">["onChange"]} [props.onChange] native onChange override
- * @param {() => void} [props.onRequestCode] 인증 요청 버튼 클릭 시 호출
- * @param {string} [props.requestButtonLabel] 인증 요청 버튼 라벨
+ * @param {(event: ChangeEvent<HTMLInputElement>) => void} [props.onChange] native onChange override
+ * @param {InputUtilityButtonClickHandler} [props.onRequestCode] 인증 요청 버튼 클릭 시 호출
+ * @param {ReactNode} [props.requestButtonLabel] 인증 요청 버튼 라벨
  * @param {boolean} [props.requestButtonDisabled] 인증 요청 버튼 disabled
+ * @param {ReactNode} [props.right] 기본 오른쪽 슬롯 override
  */
 const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
   (
@@ -80,69 +41,42 @@ const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
       onRequestCode,
       requestButtonLabel = "인증번호 요청",
       requestButtonDisabled,
-      countdownText,
-      countdownActionLabel = "시간연장",
-      onCountdownAction,
-      countdownActionDisabled,
-      codeVisible,
-      codeLength = 6,
-      codeLabel,
-      codeHelper,
-      codeState,
-      onCodeComplete,
-      codePlaceholder = "인증코드 입력",
       right,
       ...restProps
     },
     forwardedRef,
   ) => {
-    const isControlled = value !== undefined;
-    const [digitsState, setDigitsState] = useState(() =>
-      normalizeDigits(defaultValue),
-    );
-    const digits = isControlled ? normalizeDigits(value) : digitsState;
-    const formattedValue = useMemo(
-      () => formatPhoneNumber(digits.slice(0, MAX_DIGITS)),
-      [digits],
-    );
+    // 제어/비제어 숫자 입력을 통합 관리한다.
+    const { digits, handleDigitsChange } = useDigitField({
+      value,
+      defaultValue,
+      maxLength: MAX_DIGITS,
+    });
+    const formattedValue = useMemo(() => formatPhoneNumber(digits), [digits]);
 
     const handleChange = useCallback(
       (event: ChangeEvent<HTMLInputElement>) => {
-        const digitsOnly = normalizeDigits(event.currentTarget.value).slice(
-          0,
-          MAX_DIGITS,
-        );
-        if (!isControlled) {
-          setDigitsState(digitsOnly);
-        }
+        const digitsOnly = handleDigitsChange(event);
         const formatted = formatPhoneNumber(digitsOnly);
         if (event.currentTarget.value !== formatted) {
           event.currentTarget.value = formatted;
         }
+        // 포맷팅된 값과 숫자만으로 분리된 값을 모두 호출자에게 전달한다.
         onValueChange?.(formatted, digitsOnly);
         onChange?.(event);
       },
-      [isControlled, onChange, onValueChange],
+      [handleDigitsChange, onChange, onValueChange],
     );
 
-    const actionButton = useMemo(() => {
-      if (!onRequestCode) {
-        return null;
-      }
-      // 휴대폰 인증 입력은 우측 right 슬롯에 인증 버튼을 둔다.
-      return (
-        <InputUtilityButton
-          priority="primary"
-          onClick={onRequestCode}
-          disabled={requestButtonDisabled}
-        >
-          {requestButtonLabel}
-        </InputUtilityButton>
-      );
-    }, [onRequestCode, requestButtonDisabled, requestButtonLabel]);
+    const actionButton = renderVerificationRequestButton({
+      onRequestCode,
+      requestButtonDisabled,
+      requestButtonLabel,
+    });
 
+    // 기본 전화 입력 필드; 인증 UI 노출 여부에 따라 래핑된다.
     const phoneField = (
-      <Text
+      <InputBase
         {...restProps}
         ref={forwardedRef}
         type="tel"
@@ -154,28 +88,7 @@ const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
       />
     );
 
-    // 인증번호 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>
-    );
+    return <div className="phone-verification">{phoneField}</div>;
   },
 );
 

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

@@ -1,29 +1,28 @@
-import { forwardRef, useMemo } from "react";
-import type { InputProps } from "../../types";
-import { Text } from "./Base";
-import SearchIcon from "../../img/search.svg";
+"use client";
 
-/**
- * SearchInput 전용 props. type을 search로 강제하고 나머지는 Text 입력과 동일하다.
- */
-export interface SearchInputProps extends Omit<InputProps, "type"> {}
+import { forwardRef } from "react";
+import type { SearchInputProps } from "../../types";
+import InputBase from "../foundation/Input";
+import SearchIcon from "../../img/search.svg";
 
 /**
- * SearchInput — 기본 Text 입력에 검색 아이콘 left 슬롯과 type="search"를 제공한다.
- * 다른 props(priority/size/helper 등)는 Text Input과 동일하다.
+ * SearchInput — 검색 아이콘(left slot)과 type="search"를 적용한 Text 입력.
+ * @component
+ * @param {SearchInputProps} props
+ * @property {ReactNode} [props.left] left 슬롯 override
+ * @property {ReactNode} [props.right] right 슬롯 override
  */
 const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
   ({ left, ...restProps }, forwardedRef) => {
-    const leftNode = useMemo(() => {
-      if (left) {
-        return left;
-      }
-      // 검색 input은 기본적으로 돋보기 아이콘을 left 슬롯에 노출한다.
-      return <SearchIcon aria-hidden="true" />;
-    }, [left]);
+    const resolvedLeft = left ?? <SearchIcon aria-hidden="true" />;
 
     return (
-      <Text {...restProps} ref={forwardedRef} type="search" left={leftNode} />
+      <InputBase
+        {...restProps}
+        ref={forwardedRef}
+        type="search"
+        left={resolvedLeft}
+      />
     );
   },
 );

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

@@ -1,12 +1,15 @@
-export { Text } from "./Base";
-export { Text as Input } from "./Base";
-export { PasswordInput } from "./Password";
-export { PhoneInput } from "./Phone";
-export { EmailInput } from "./Email";
-export { SearchInput } from "./Search";
-export { AuthCodeInput } from "./AuthCode";
-export type { InputPasswordProps } from "./Password";
-export type { PhoneInputProps } from "./Phone";
-export type { EmailInputProps } from "./Email";
-export type { SearchInputProps } from "./Search";
-export type { AuthCodeInputProps } from "./AuthCode";
+"use client";
+
+import { PasswordInput } from "./Password";
+import { PhoneInput } from "./Phone";
+import { EmailInput } from "./Email";
+import { SearchInput } from "./Search";
+import { AuthCodeInput } from "./AuthCode";
+
+export const InputText = {
+  Password: PasswordInput,
+  Phone: PhoneInput,
+  Email: EmailInput,
+  Search: SearchInput,
+  AuthCode: AuthCodeInput,
+};

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

@@ -0,0 +1,110 @@
+.input-calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-6, 20px);
+  width: 100%;
+
+  &[data-disabled="true"] {
+    opacity: 0.6;
+  }
+}
+
+.input-calendar-container {
+  background-color: var(--color-common-100, #fff);
+  border-radius: var(--theme-radius-large-3, 16px);
+  box-shadow:
+    0 4px 20px rgba(0, 0, 0, 0.16),
+    0 0 2px rgba(0, 0, 0, 0.12);
+  padding: var(--spacing-padding-10, 32px) var(--spacing-padding-6, 16px)
+    var(--spacing-padding-6, 16px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-5, 16px);
+}
+
+.input-calendar-root {
+  width: 100%;
+}
+
+.input-calendar-panel {
+  width: 100%;
+  border-radius: var(--theme-radius-large-1, 12px);
+  background-color: transparent;
+}
+
+.input-calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: var(--spacing-padding-6, 16px);
+  margin-bottom: var(--spacing-gap-4, 12px);
+}
+
+.input-calendar-header-control {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--color-label-strong, #18191b);
+}
+
+.input-calendar-header-level {
+  font-size: var(--font-heading-small-size, 19px);
+  font-weight: var(--font-heading-small-weight, 600);
+}
+
+.input-calendar-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  padding-bottom: var(--spacing-padding-2, 4px);
+}
+
+.input-calendar-weekday {
+  text-transform: none;
+  font-size: var(--font-heading-xxsmall-size, 15px);
+  color: var(--color-label-alternative, #afb1b6);
+  text-align: center;
+}
+
+.input-calendar-day {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--theme-radius-large-1, 12px);
+  justify-self: center;
+  font-size: var(--font-body-medium-size, 17px);
+  color: var(--color-label-strong, #3d3f43);
+}
+
+.input-calendar-footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-4, 12px);
+  width: 100%;
+}
+
+.input-calendar-footer-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-gap-3, 8px);
+}
+
+.input-calendar-action-button {
+  width: 100%;
+}
+
+.input-calendar-footer-actions > :first-child {
+  flex: 1 1 auto;
+}
+
+.input-calendar-footer-actions > :last-child {
+  flex: 1 1 auto;
+  justify-content: flex-end;
+}
+
+.input-calendar-apply {
+  width: 100%;
+}