@uniai-fe/uds-templates 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -12,7 +12,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.26.2",
+  "packageManager": "pnpm@10.27.0",
   "engines": {
     "node": ">=24",
     "pnpm": ">=10"
@@ -73,9 +73,9 @@
     "eslint": "^9.39.2",
     "next": "^15.5.9",
     "prettier": "^3.7.4",
-    "react-hook-form": "^7.69.0",
+    "react-hook-form": "^7.70.0",
     "jotai": "^2.16.1",
-    "sass": "^1.97.1",
+    "sass": "^1.97.2",
     "typescript": "~5.9.3"
   }
 }

package/src/auth/signup/markup/VerificationForm.tsx

@@ -28,9 +28,38 @@ import { getSignupFieldDefaultValue } from "../utils/getSignupFieldDefaultValue"
 import CheckAgreeIcon from "../img/check-agree.svg";
 import ChevronOpenDetailIcon from "../img/chevron-open-detail.svg";
 
-const DEFAULT_SUBMIT_LABEL = "다음";
+const INITIAL_AGREEMENT_LABEL = "동의하고 진행하기";
 const REQUEST_CODE_LABEL = "인증코드 요청";
 const RESEND_CODE_LABEL = "인증번호 재요청";
+const COMPLETE_LABEL = "완료";
+
+const clampCodeLength = (length: number) =>
+  Math.max(4, Math.min(8, length ?? 6));
+
+const resolveCodeLength = (preferred?: number, fallback?: number): number => {
+  if (typeof preferred === "number" && Number.isFinite(preferred)) {
+    return clampCodeLength(preferred);
+  }
+  if (typeof fallback === "number" && Number.isFinite(fallback)) {
+    return clampCodeLength(fallback);
+  }
+  return clampCodeLength(6);
+};
+
+const resolveCodeValue = (
+  inputProps?: EmailInputProps["codeInputProps"],
+): string => {
+  if (!inputProps) {
+    return "";
+  }
+  if (typeof inputProps.value === "string") {
+    return inputProps.value;
+  }
+  if (typeof inputProps.defaultValue === "string") {
+    return inputProps.defaultValue;
+  }
+  return "";
+};
 
 /**
  * 회원가입 Step2; 약관 동의 + 이메일 인증
@@ -42,6 +71,8 @@ const RESEND_CODE_LABEL = "인증번호 재요청";
  * @param {(options?: AuthSignupAgreementToggleAllOptions) => void} props.onToggleAll 전체 동의(필수 only) 토글
  * @param {(agreementId: string) => void} [props.onOpenAgreementDetail] 약관 상세 보기
  * @param {React.FormHTMLAttributes<HTMLFormElement>} [props.formAttr] form attr
+ * @param {AuthSignupVerificationProps["verificationState"]} [props.verificationState] 수동 verify state
+ * @param {boolean} [props.verificationReady] CTA 활성화 여부 override
  * @param {import("react").ReactNode} [props.submitLabel] CTA 라벨
  */
 export function AuthSignupVerificationForm({
@@ -53,6 +84,9 @@ export function AuthSignupVerificationForm({
   onOpenAgreementDetail,
   formAttr,
   submitLabel,
+  submitDisabled,
+  verificationState,
+  verificationReady,
   onSubmit,
 }: AuthSignupVerificationProps) {
   const [openedAgreementId, setOpenedAgreementId] = useState<string | null>(
@@ -139,12 +173,66 @@ export function AuthSignupVerificationForm({
         requestButtonDisabled: undefined,
       };
 
-  const shouldRequestCode =
-    allRequiredChecked && !codeRequested && Boolean(emailRequestHandler);
-  const ctaLabel = shouldRequestCode
-    ? REQUEST_CODE_LABEL
-    : (submitLabel ?? DEFAULT_SUBMIT_LABEL);
-  const ctaDisabled = disabled || !allRequiredChecked;
+  const codeVerificationMeta = useMemo(() => {
+    const value = resolveCodeValue(normalizedEmailFieldProps.codeInputProps);
+    const length = resolveCodeLength(
+      normalizedEmailFieldProps.codeLength,
+      normalizedEmailFieldProps.codeInputProps?.length,
+    );
+    const ready =
+      Boolean(normalizedEmailFieldProps.codeVisible) && value.length === length;
+
+    return {
+      ready,
+    };
+  }, [
+    normalizedEmailFieldProps.codeInputProps,
+    normalizedEmailFieldProps.codeLength,
+    normalizedEmailFieldProps.codeVisible,
+  ]);
+
+  const isRequestStage = Boolean(emailRequestHandler) && !codeRequested;
+  const hasVerificationFlow = isRequestStage || codeRequested;
+  const requestReady = allRequiredChecked && !disabled;
+  const derivedVerificationReady = hasVerificationFlow
+    ? codeRequested
+      ? codeVerificationMeta.ready
+      : requestReady
+    : !disabled;
+  const resolvedVerificationReady =
+    typeof verificationReady === "boolean"
+      ? verificationReady
+      : derivedVerificationReady;
+  const resolvedVerificationState =
+    verificationState ??
+    (() => {
+      if (!hasVerificationFlow) {
+        return "idle";
+      }
+      if (!codeRequested) {
+        if (!allRequiredChecked) {
+          return "agreements-pending";
+        }
+        return resolvedVerificationReady ? "request-ready" : "idle";
+      }
+      return resolvedVerificationReady ? "code-ready" : "code-pending";
+    })();
+
+  const derivedCtaLabel = (() => {
+    if (!hasVerificationFlow) {
+      return INITIAL_AGREEMENT_LABEL;
+    }
+    if (codeRequested) {
+      return COMPLETE_LABEL;
+    }
+    return resolvedVerificationReady
+      ? REQUEST_CODE_LABEL
+      : INITIAL_AGREEMENT_LABEL;
+  })();
+
+  const ctaLabel = submitLabel ?? derivedCtaLabel;
+  const ctaDisabled =
+    disabled || Boolean(submitDisabled) || !resolvedVerificationReady;
 
   const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
     formAttr?.onSubmit?.(event);
@@ -152,10 +240,18 @@ export function AuthSignupVerificationForm({
       return;
     }
 
-    if (shouldRequestCode && emailRequestHandler) {
+    if (isRequestStage && emailRequestHandler) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (resolvedVerificationReady) {
+        emailRequestHandler();
+      }
+      return;
+    }
+
+    if (codeRequested && !resolvedVerificationReady) {
       event.preventDefault();
       event.stopPropagation();
-      emailRequestHandler();
       return;
     }
 
@@ -178,6 +274,8 @@ export function AuthSignupVerificationForm({
     <form
       className="auth-signup-form auth-signup-form--verification"
       {...formAttr}
+      data-verify-state={resolvedVerificationState}
+      data-verify-ready={resolvedVerificationReady ? "true" : "false"}
       onSubmit={handleFormSubmit}
     >
       <div className="auth-signup-fields">

package/src/auth/signup/types/props.ts

@@ -51,6 +51,13 @@ export type AuthSignupVerificationFields = {
 
 export type AuthSignupVerificationValues = Record<string, string>;
 
+export type AuthSignupVerificationState =
+  | "idle"
+  | "agreements-pending"
+  | "request-ready"
+  | "code-pending"
+  | "code-ready";
+
 export interface AuthSignupVerificationProps {
   fields: AuthSignupVerificationFields;
   agreements: AuthSignupAgreementOption[];
@@ -59,6 +66,9 @@ export interface AuthSignupVerificationProps {
   onToggleAll: (options?: AuthSignupAgreementToggleAllOptions) => void;
   onOpenAgreementDetail?: (agreementId: string) => void;
   submitLabel?: ReactNode;
+  submitDisabled?: boolean;
+  verificationState?: AuthSignupVerificationState;
+  verificationReady?: boolean;
   formAttr?: React.FormHTMLAttributes<HTMLFormElement>;
   onSubmit: SubmitHandler<AuthSignupVerificationValues>;
 }