@uniai-fe/uds-templates 0.1.7 → 0.1.9

package/dist/styles.css

@@ -21,7 +21,7 @@
   --modal-border-color: var(--color-border-standard-cool-gray, #e4e5e7);
   --modal-footer-border-color: var(--modal-border-color);
   --modal-stack-index: 0;
-  --modal-alert-body-color: var(--color-label-standard, #232629);
+  --modal-alert-body-color: var(--color-label-strong, #18191b);
   --modal-alert-body-font-size: var(--font-body-small-size, 14px);
   --modal-dialog-title-color: var(--color-label-strong, #090a0b);
   --modal-dialog-title-font-size: var(--font-heading-xsmall-size, 20px);
@@ -30,7 +30,7 @@
   28px
   );
   --modal-dialog-title-weight: var(--font-heading-xsmall-weight, 700);
-  --modal-dialog-body-color: var(--color-label-standard, #232629);
+  --modal-dialog-body-color: var(--color-label-strong, #18191b);
   --modal-dialog-body-font-size: var(--font-body-small-size, 14px);
   --auth-container-max-width: 335px;
   --auth-container-gap: var(--spacing-padding-7, 28px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

package/src/auth/signup/hooks/useSignupAccountForm.ts

@@ -3,6 +3,8 @@
 import { useMemo } from "react";
 import { useWatch } from "react-hook-form";
 import type { ReactNode } from "react";
+import { DEFAULT_PASSWORD_RULES } from "../../common/password/constants";
+import type { AuthPasswordRule } from "../../common/password/types";
 import type {
   AuthSignupAccountFields,
   AuthSignupAccountValues,
@@ -26,6 +28,7 @@ export function useSignupAccountForm<
   fields,
   form,
   onSubmit,
+  passwordRules,
 }: UseSignupAccountFormOptions<TFields>): UseSignupAccountFormReturn<TFields> {
   const values = useWatch({ control: form.control }) as
     | AuthSignupAccountValues
@@ -82,13 +85,45 @@ export function useSignupAccountForm<
     );
   }, [confirmFieldName, fields, form, passwordFieldName]);
 
+  const passwordValue =
+    (values?.[passwordFieldName] as string | undefined) ?? "";
+  const confirmPasswordValue =
+    (values?.[confirmFieldName] as string | undefined) ?? "";
+
+  const normalizedPasswordRules: AuthPasswordRule[] =
+    passwordRules && passwordRules.length > 0
+      ? passwordRules
+      : DEFAULT_PASSWORD_RULES;
+
+  const arePasswordRulesFulfilled =
+    normalizedPasswordRules.length > 0
+      ? normalizedPasswordRules.every(rule => {
+          if (typeof rule.fulfilled === "boolean") {
+            return rule.fulfilled;
+          }
+          if (typeof rule.predicate === "function") {
+            return rule.predicate(passwordValue);
+          }
+          return false;
+        })
+      : true;
+
+  const isConfirmMatched =
+    passwordValue.trim().length > 0 &&
+    confirmPasswordValue.trim().length > 0 &&
+    confirmPasswordValue === passwordValue;
+
   const trimmedFilled =
     values &&
     Object.values(values).every(value =>
       typeof value === "string" ? value.trim().length > 0 : false,
     );
 
-  const disabled = form.formState.isSubmitting || !trimmedFilled;
+  const disabled =
+    form.formState.isSubmitting ||
+    !trimmedFilled ||
+    !arePasswordRulesFulfilled ||
+    !isConfirmMatched;
 
   const onSubmitHandler = form.handleSubmit(onSubmit);
 

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

@@ -47,17 +47,6 @@ export function AuthSignupAccountForm({
     defaultValues,
   });
 
-  const {
-    register,
-    helpers,
-    disabled,
-    onSubmit: handleSubmit,
-  } = useSignupAccountForm({
-    fields,
-    form,
-    onSubmit,
-  });
-
   const passwordFieldName =
     (fields.password.attr?.name as keyof AuthSignupAccountValues | undefined) ??
     ("password" as keyof AuthSignupAccountValues);
@@ -71,6 +60,18 @@ export function AuthSignupAccountForm({
       ? passwordRules
       : DEFAULT_PASSWORD_RULES;
 
+  const {
+    register,
+    helpers,
+    disabled,
+    onSubmit: handleSubmit,
+  } = useSignupAccountForm({
+    fields,
+    form,
+    onSubmit,
+    passwordRules: resolvedPasswordRules,
+  });
+
   return (
     <FormProvider {...form}>
       <form

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

@@ -5,7 +5,6 @@ import type {
   AuthSignupStepIndicatorItem,
   AuthSignupTemplateProps,
 } from "../types";
-import type { AuthSignupStepId } from "../types";
 import { AuthSignupUserInfoForm } from "./UserInfoForm";
 import { AuthSignupVerificationForm } from "./VerificationForm";
 import { AuthSignupAccountForm } from "./AccountForm";
@@ -19,13 +18,6 @@ const DEFAULT_STEPS: AuthSignupStepIndicatorItem[] = [
   { id: "complete", label: "완료" },
 ];
 
-const STEP_INDEX: Record<AuthSignupStepId, number> = {
-  userInfo: 0,
-  verifyAgreement: 1,
-  generateAccount: 2,
-  complete: 3,
-};
-
 /**
  * 회원가입 템플릿; Step1~4 화면을 AuthContainer 위에서 전환한다.
  * @component

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

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import type { InputState } from "@uniai-fe/uds-primitives";
+import type { AuthPasswordRule } from "../../common/password/types";
 import type {
   AuthSignupFieldProps,
   AuthSignupUserInfoFields,
@@ -73,6 +74,7 @@ export interface UseSignupAccountFormOptions<
   fields: TFields;
   form: UseFormReturn<AuthSignupAccountValues>;
   onSubmit: SubmitHandler<AuthSignupAccountValues>;
+  passwordRules?: AuthPasswordRule[];
 }
 
 export interface UseSignupAccountFormReturn<

package/src/modal/styles/base.scss

@@ -10,7 +10,7 @@
   --modal-border-color: var(--color-border-standard-cool-gray, #e4e5e7);
   --modal-footer-border-color: var(--modal-border-color);
   --modal-stack-index: 0;
-  --modal-alert-body-color: var(--color-label-standard, #232629);
+  --modal-alert-body-color: var(--color-label-strong, #18191b);
   --modal-alert-body-font-size: var(--font-body-small-size, 14px);
   --modal-dialog-title-color: var(--color-label-strong, #090a0b);
   --modal-dialog-title-font-size: var(--font-heading-xsmall-size, 20px);
@@ -19,7 +19,7 @@
     28px
   );
   --modal-dialog-title-weight: var(--font-heading-xsmall-weight, 700);
-  --modal-dialog-body-color: var(--color-label-standard, #232629);
+  --modal-dialog-body-color: var(--color-label-strong, #18191b);
   --modal-dialog-body-font-size: var(--font-body-small-size, 14px);
 }