@uniai-fe/uds-templates 0.0.11 → 0.0.13

package/src/auth/find-id/types/index.ts

@@ -0,0 +1,66 @@
+import type React from "react";
+import type { AuthContainerProps } from "../../common/container";
+import type { SubmitHandler } from "react-hook-form";
+import type {
+  InputFieldProps,
+  InputPasswordProps,
+} from "@uniai-fe/uds-primitives";
+import type { FindAccountCTAProps } from "../../common/find/types";
+import type { AuthPasswordRule } from "../../common/password/types";
+
+export type * from "../../common/find/types";
+
+export type FindAccountIdSummaryProps = {
+  label?: React.ReactNode;
+  userId: React.ReactNode;
+  userIdLabel?: React.ReactNode;
+  registeredAt?: React.ReactNode;
+  registeredAtLabel?: React.ReactNode;
+  helper?: React.ReactNode;
+};
+
+export type FindAccountIdCompleteProps = Omit<
+  AuthContainerProps,
+  "children"
+> & {
+  title?: React.ReactNode;
+  summary: FindAccountIdSummaryProps;
+  description?: React.ReactNode;
+  cta?: FindAccountCTAProps;
+};
+
+export type FindAccountPasswordValues = Record<string, string>;
+
+export type FindAccountPasswordFields = {
+  password: InputFieldProps<InputPasswordProps>;
+  confirm: InputFieldProps<InputPasswordProps>;
+};
+
+export type FindAccountPasswordFieldOptions<
+  TFields extends FindAccountPasswordFields = FindAccountPasswordFields,
+> = {
+  fields: TFields;
+  formAttr?: React.FormHTMLAttributes<HTMLFormElement>;
+  onSubmit: SubmitHandler<FindAccountPasswordValues>;
+  isSubmittable?: (values?: FindAccountPasswordValues) => boolean;
+};
+
+export type FindAccountPasswordRule = AuthPasswordRule;
+
+export type FindAccountPasswordFormProps<
+  TFields extends FindAccountPasswordFields = FindAccountPasswordFields,
+> = Omit<AuthContainerProps, "children"> & {
+  fieldOptions: FindAccountPasswordFieldOptions<TFields>;
+  rules?: FindAccountPasswordRule[];
+  helper?: React.ReactNode;
+  cta?: FindAccountCTAProps;
+};
+
+export type FindAccountPasswordCompleteProps = Omit<
+  AuthContainerProps,
+  "children"
+> & {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  cta?: FindAccountCTAProps;
+};

package/src/auth/find-password/index.scss

@@ -0,0 +1 @@
+@use "../common/find/styles/find-account.scss";

package/src/auth/find-password/index.ts

@@ -0,0 +1,30 @@
+import "./index.scss";
+import FindPasswordStepIdentify from "./markup/StepIdentify";
+import FindPasswordStepVerifyCode from "./markup/StepVerifyCode";
+import FindPasswordStepReset from "./markup/StepResetPassword";
+import FindPasswordStepComplete from "./markup/StepComplete";
+
+export type {
+  FindAccountPasswordFormProps,
+  FindAccountPasswordValues,
+  FindAccountPasswordCompleteProps,
+} from "../find-id/types";
+
+export const FindAccountPasswordForm = FindPasswordStepReset;
+export const FindAccountPasswordComplete = FindPasswordStepComplete;
+
+export {
+  FindPasswordStepIdentify,
+  FindPasswordStepVerifyCode,
+  FindPasswordStepReset,
+  FindPasswordStepComplete,
+};
+
+export const FindPassword = {
+  StepIdentify: FindPasswordStepIdentify,
+  StepVerifyCode: FindPasswordStepVerifyCode,
+  StepReset: FindPasswordStepReset,
+  StepComplete: FindPasswordStepComplete,
+  Form: FindAccountPasswordForm,
+  Complete: FindAccountPasswordComplete,
+};

package/src/auth/find-password/markup/StepComplete.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx";
+import type { FindAccountPasswordCompleteProps } from "../../find-id/types";
+import AuthCompleteTemplate from "../../common/complete/Template";
+
+const DEFAULT_TITLE = "비밀번호 변경 완료";
+const DEFAULT_DESCRIPTION = "로그인 페이지로 이동하여 로그인해 주세요.";
+const DEFAULT_CTA_LABEL = "로그인하기";
+
+/**
+ * 비밀번호 변경 완료 화면
+ * @component
+ */
+export default function FindPasswordStepComplete({
+  className,
+  title,
+  description,
+  cta,
+}: FindAccountPasswordCompleteProps) {
+  return (
+    <AuthCompleteTemplate
+      className={clsx("auth-find-account-container", className)}
+      title={title ?? DEFAULT_TITLE}
+      description={description ?? DEFAULT_DESCRIPTION}
+      cta={{
+        label: cta?.label ?? DEFAULT_CTA_LABEL,
+        buttonProps: cta?.buttonProps,
+      }}
+    />
+  );
+}

package/src/auth/find-password/markup/StepIdentify.tsx

@@ -0,0 +1,45 @@
+import FindAccountInfoStep from "../../common/find/markup/InfoStep";
+import type { FindAccountInfoStepProps } from "../../common/find/types";
+
+const DEFAULT_NAVIGATION = {
+  title: "비밀번호 찾기",
+};
+
+const DEFAULT_HEADLINE = {
+  progress: { total: 3, current: 1 },
+  title: (
+    <>
+      가입한 이름과 메일 주소를
+      <br />
+      입력해 주세요
+    </>
+  ),
+};
+
+const DEFAULT_CTA_LABEL = "인증코드 요청";
+
+export type FindPasswordStepIdentifyProps = FindAccountInfoStepProps;
+
+/**
+ * Find Password Step1 — 이름/메일 입력
+ * @component
+ */
+export default function FindPasswordStepIdentify({
+  navigation,
+  headline,
+  cta,
+  ...rest
+}: FindPasswordStepIdentifyProps) {
+  const resolvedNavigation = navigation ?? DEFAULT_NAVIGATION;
+  const resolvedHeadline = headline ?? DEFAULT_HEADLINE;
+  const resolvedCTA = cta ?? { label: DEFAULT_CTA_LABEL };
+
+  return (
+    <FindAccountInfoStep
+      {...rest}
+      navigation={resolvedNavigation}
+      headline={resolvedHeadline}
+      cta={resolvedCTA}
+    />
+  );
+}

package/src/auth/find-password/markup/StepResetPassword.tsx

@@ -0,0 +1,150 @@
+import clsx from "clsx";
+import { useMemo } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { AuthContainer } from "../../common/container";
+import { AuthStageHeader } from "../../common/container/header";
+import { Button, type InputPasswordProps } from "@uniai-fe/uds-primitives";
+import AuthPasswordSetField from "../../common/password/markup/PasswordSetField";
+import { DEFAULT_PASSWORD_RULES } from "../../common/password/constants";
+import type {
+  FindAccountPasswordFormProps,
+  FindAccountPasswordValues,
+} from "../../find-id/types";
+
+const DEFAULT_CTA_LABEL = "비밀번호 변경";
+const DEFAULT_HEADER = (
+  <AuthStageHeader
+    className="auth-find-account-header"
+    navigationTitle="비밀번호 찾기"
+    headline={
+      <>
+        새로운 비밀번호를
+        <br />
+        입력해 주세요
+      </>
+    }
+    indicator={{ total: 3, current: 3 }}
+  />
+);
+
+/**
+ * 새 비밀번호 입력 화면
+ * @component
+ */
+export default function FindPasswordStepReset({
+  className,
+  header,
+  footer,
+  fieldOptions,
+  rules,
+  helper,
+  cta,
+}: FindAccountPasswordFormProps) {
+  const { fields, formAttr, onSubmit, isSubmittable } = fieldOptions;
+
+  // 1) 필드 정의를 순회해 RHF 초기값을 만든다.
+  const defaultValues = useMemo(
+    () =>
+      (Object.keys(fields) as Array<keyof typeof fields>).reduce((acc, key) => {
+        const config = fields[key];
+        const fieldName = config.attr?.name ?? String(key);
+        acc[fieldName] = "";
+        return acc;
+      }, {} as FindAccountPasswordValues),
+    [fields],
+  );
+
+  // 2) RHF form 인스턴스를 초기화한다.
+  const form = useForm<FindAccountPasswordValues>({
+    mode: "onChange",
+    defaultValues,
+  });
+
+  const watchedValues = form.watch();
+  const normalizedValues: FindAccountPasswordValues = {
+    ...defaultValues,
+    ...watchedValues,
+  };
+  const baseFilled =
+    normalizedValues &&
+    Object.values(normalizedValues).every(value =>
+      typeof value === "string" ? value.trim().length > 0 : Boolean(value),
+    );
+  const resolvedFilled = isSubmittable
+    ? isSubmittable(normalizedValues)
+    : Boolean(baseFilled);
+  const disabled = form.formState.isSubmitting || !resolvedFilled;
+  const handleSubmit = form.handleSubmit(onSubmit);
+
+  const buttonProps = {
+    type: "submit" as const,
+    scale: "solid-xlarge" as const,
+    priority: "primary" as const,
+    block: true,
+    ...cta?.buttonProps,
+    disabled: cta?.buttonProps?.disabled ?? disabled,
+  };
+  const passwordFieldConfig = useMemo(() => {
+    const priority = (fields.password.props?.priority ??
+      "secondary") as InputPasswordProps["priority"];
+    const size = (fields.password.props?.size ??
+      "large") as InputPasswordProps["size"];
+    return {
+      ...fields.password,
+      props: {
+        ...fields.password.props,
+        priority,
+        size,
+      },
+    };
+  }, [fields.password]);
+  const confirmFieldConfig = useMemo(() => {
+    const priority = (fields.confirm.props?.priority ??
+      "secondary") as InputPasswordProps["priority"];
+    const size = (fields.confirm.props?.size ??
+      "large") as InputPasswordProps["size"];
+    return {
+      ...fields.confirm,
+      props: {
+        ...fields.confirm.props,
+        priority,
+        size,
+      },
+    };
+  }, [fields.confirm]);
+
+  const resolvedPasswordRules =
+    rules && rules.length > 0 ? rules : DEFAULT_PASSWORD_RULES;
+
+  return (
+    <AuthContainer
+      className={clsx("auth-find-account-container", className)}
+      header={header ?? DEFAULT_HEADER}
+      footer={footer}
+    >
+      <FormProvider {...form}>
+        <form
+          className="auth-find-account-form auth-find-account-form--password"
+          {...formAttr}
+          onSubmit={handleSubmit}
+        >
+          <AuthPasswordSetField
+            passwordField={passwordFieldConfig}
+            confirmPasswordField={confirmFieldConfig}
+            passwordRules={resolvedPasswordRules}
+            messages={{
+              missing: "새 비밀번호를 먼저 입력해 주세요.",
+              mismatch: "비밀번호가 일치하지 않습니다.",
+            }}
+          />
+          {helper ? (
+            <p className="auth-find-account-password-helper">{helper}</p>
+          ) : null}
+          <Button.Default {...buttonProps}>
+            {cta?.label ?? DEFAULT_CTA_LABEL}
+          </Button.Default>
+        </form>
+      </FormProvider>
+    </AuthContainer>
+  );
+}

package/src/auth/find-password/markup/StepVerifyCode.tsx

@@ -0,0 +1,48 @@
+import FindAccountCodeStep from "../../common/find/markup/CodeStep";
+import type { FindAccountCodeStepProps } from "../../common/find/types";
+
+const DEFAULT_NAVIGATION = {
+  title: "비밀번호 찾기",
+};
+
+const DEFAULT_HEADLINE = {
+  progress: { total: 3, current: 2 },
+  title: (
+    <>
+      메일 주소로
+      <br />
+      인증을 진행해 주세요
+    </>
+  ),
+};
+
+const DEFAULT_EMAIL_LABEL = "메일";
+
+export type FindPasswordStepVerifyCodeProps = FindAccountCodeStepProps;
+
+/**
+ * Find Password Step2 — 인증코드 입력
+ * @component
+ */
+export default function FindPasswordStepVerifyCode({
+  navigation,
+  headline,
+  emailDisplay,
+  ...rest
+}: FindPasswordStepVerifyCodeProps) {
+  const resolvedNavigation = navigation ?? DEFAULT_NAVIGATION;
+  const resolvedHeadline = headline ?? DEFAULT_HEADLINE;
+  const resolvedEmailDisplay = {
+    label: DEFAULT_EMAIL_LABEL,
+    ...emailDisplay,
+  };
+
+  return (
+    <FindAccountCodeStep
+      {...rest}
+      navigation={resolvedNavigation}
+      headline={resolvedHeadline}
+      emailDisplay={resolvedEmailDisplay}
+    />
+  );
+}

package/src/auth/index.tsx

@@ -0,0 +1,41 @@
+import "./login/index.scss";
+
+import { AuthContainer } from "./common/container";
+import AuthCompleteTemplate from "./common/complete/Template";
+import AuthPasswordSetField from "./common/password/markup/PasswordSetField";
+import { AuthLogin } from "./login";
+import { AuthSignup } from "./signup";
+import { FindAccount } from "./find-account";
+import { FindId } from "./find-id";
+import { FindPassword } from "./find-password";
+
+export const Auth = {
+  Container: AuthContainer,
+  Common: {
+    Container: AuthContainer,
+    Complete: AuthCompleteTemplate,
+    PasswordSetField: AuthPasswordSetField,
+  },
+  Login: AuthLogin,
+  Signup: AuthSignup,
+  FindAccount,
+  FindId,
+  FindPassword,
+};
+
+export {
+  useSignupUserInfoForm,
+  useSignupVerificationForm,
+  useSignupAccountForm,
+} from "./signup";
+
+export { useCheckPassword } from "./common/password/hooks/useCheckPassword";
+export { DEFAULT_PASSWORD_RULES } from "./common/password/constants";
+export { FindAccount, useFindAccountForm } from "./find-account";
+export * from "./find-id";
+export * from "./find-password";
+export { default as AuthCompleteTemplate } from "./common/complete/Template";
+export type * from "./common/password/types";
+export type * from "./login";
+export type * from "./signup";
+export type * from "./find-account";

package/src/{components/auth → auth}/login/markup/Container.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { AuthContainer } from "../../container";
+import { AuthContainer } from "../../common/container";
 import AuthLoginFormField from "./FormField";
 import AuthLoginLinkButtons from "./LinkButtons";
 import type { AuthLoginProps } from "../types";

package/src/{components/auth → auth}/login/types/props.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { SubmitHandler } from "react-hook-form";
-import type { AuthContainerProps } from "../../container";
+import type { AuthContainerProps } from "../../common/container";
 import type {
   InputFieldProps,
   InputPasswordProps,

package/src/{components/auth → auth}/signup/hooks/useSignupAccountForm.ts

@@ -29,23 +29,45 @@ export function useSignupAccountForm<
     | AuthSignupAccountValues
     | undefined;
 
+  const passwordFieldName = useMemo(() => {
+    const config = (fields as Partial<AuthSignupAccountFields>).password;
+    return (
+      (config?.attr?.name as keyof AuthSignupAccountValues | undefined) ??
+      ("password" as keyof AuthSignupAccountValues)
+    );
+  }, [fields]);
+
+  const confirmFieldName = useMemo(() => {
+    const config = (fields as Partial<AuthSignupAccountFields>).confirmPassword;
+    return (
+      (config?.attr?.name as keyof AuthSignupAccountValues | undefined) ??
+      ("confirmPassword" as keyof AuthSignupAccountValues)
+    );
+  }, [fields]);
+
   const register = useMemo(() => {
     return (Object.keys(fields) as Array<keyof TFields>).reduce(
       (acc, fieldKey) => {
         const config = fields[fieldKey] as AuthSignupFieldProps;
         const fieldName = config.attr?.name ?? String(fieldKey);
+        if (fieldName === passwordFieldName || fieldName === confirmFieldName) {
+          return acc;
+        }
         acc[fieldKey] = form.register(fieldName);
         return acc;
       },
       {} as UseSignupAccountFormReturn<TFields>["register"],
     );
-  }, [fields, form]);
+  }, [confirmFieldName, fields, form, passwordFieldName]);
 
   const helpers = useMemo(() => {
     return (Object.keys(fields) as Array<keyof TFields>).reduce(
       (acc, fieldKey) => {
         const config = fields[fieldKey] as AuthSignupFieldProps;
         const fieldName = config.attr?.name ?? String(fieldKey);
+        if (fieldName === passwordFieldName || fieldName === confirmFieldName) {
+          return acc;
+        }
         const state = form.getFieldState(fieldName);
         acc[fieldKey] = {
           text:
@@ -56,7 +78,7 @@ export function useSignupAccountForm<
       },
       {} as UseSignupAccountFormReturn<TFields>["helpers"],
     );
-  }, [fields, form]);
+  }, [confirmFieldName, fields, form, passwordFieldName]);
 
   const trimmedFilled =
     values &&
@@ -75,3 +97,5 @@ export function useSignupAccountForm<
     onSubmit: onSubmitHandler,
   };
 }
+
+export default useSignupAccountForm;

package/src/{components/auth → auth}/signup/hooks/useSignupUserInfoForm.ts

@@ -28,6 +28,7 @@ export function useSignupUserInfoForm<
   fields,
   form,
   onSubmit,
+  activeFields,
 }: UseSignupUserInfoFormOptions<TFields>): UseSignupUserInfoFormReturn<TFields> {
   const values = useWatch({ control: form.control }) as
     | AuthSignupUserInfoValues
@@ -62,11 +63,17 @@ export function useSignupUserInfoForm<
     );
   }, [fields, form]);
 
+  const targetKeys =
+    activeFields ?? (Object.keys(fields) as Array<keyof TFields>);
+
   const trimmedFilled =
     values &&
-    Object.values(values).every(value =>
-      typeof value === "string" ? value.trim().length > 0 : false,
-    );
+    targetKeys.every(fieldKey => {
+      const fieldName = (fields[fieldKey].attr?.name ??
+        String(fieldKey)) as keyof AuthSignupUserInfoValues;
+      const value = values[fieldName];
+      return typeof value === "string" ? value.trim().length > 0 : false;
+    });
 
   const disabled = form.formState.isSubmitting || !trimmedFilled;
 

package/src/auth/signup/img/check-agree.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 9.36395L8.53553 12.8995L14.8995 6.53552" stroke="#94989E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/auth/signup/img/chevron-open-detail.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.87377 3.74906L10.1164 7.9917L5.87377 12.2343C5.56135 12.5468 5.56135 13.0533 5.87377 13.3657C6.18619 13.6781 6.69272 13.6781 7.00514 13.3657L11.8135 8.55739C12.1259 8.24497 12.1259 7.73843 11.8135 7.42601L7.00514 2.61769C6.69272 2.30527 6.18619 2.30527 5.87377 2.61769C5.56135 2.93011 5.56135 3.43664 5.87377 3.74906Z" fill="#CACBCE"/>
+</svg>

package/src/{components/auth → auth}/signup/index.ts

@@ -3,6 +3,7 @@ import {
   AuthSignupVerificationForm,
   AuthSignupAccountForm,
   AuthSignupComplete,
+  AuthSignupTemplate,
 } from "./markup";
 
 import "./styles/signup.scss";
@@ -14,9 +15,11 @@ export {
   AuthSignupVerificationForm,
   AuthSignupAccountForm,
   AuthSignupComplete,
+  AuthSignupTemplate,
 };
 
 export const AuthSignup = {
+  Template: AuthSignupTemplate,
   StepUserInfo: AuthSignupUserInfoForm,
   StepVerification: AuthSignupVerificationForm,
   StepAccount: AuthSignupAccountForm,

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

@@ -0,0 +1,113 @@
+import { useMemo } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { Button, Input, type InputProps } from "@uniai-fe/uds-primitives";
+import type { AuthSignupAccountProps, AuthSignupAccountValues } from "../types";
+import { useSignupAccountForm } from "../hooks";
+import { composeSignupFieldProps } from "../utils/composeFieldProps";
+import { getSignupFieldDefaultValue } from "../utils/getSignupFieldDefaultValue";
+import AuthPasswordSetField from "../../common/password/markup/PasswordSetField";
+import { DEFAULT_PASSWORD_RULES } from "../../common/password/constants";
+
+const DEFAULT_SUBMIT_LABEL = "가입 요청";
+/**
+ * 회원가입 Step3; 계정 정보 입력(아이디/비밀번호)
+ * @component
+ * @param {AuthSignupAccountProps} props account props
+ * @param {AuthSignupAccountProps["fields"]} props.fields 아이디/비밀번호 필드
+ * @param {AuthSignupPasswordRule[]} [props.passwordRules] 비밀번호 규칙 상태
+ * @param {React.FormHTMLAttributes<HTMLFormElement>} [props.formAttr] form attr
+ * @param {import("react").ReactNode} [props.submitLabel] CTA 라벨
+ */
+export function AuthSignupAccountForm({
+  fields,
+  passwordRules,
+  formAttr,
+  submitLabel,
+  onSubmit,
+}: AuthSignupAccountProps) {
+  // 필드 구성에서 name attr을 추출해 RHF default 값을 정의한다.
+  const defaultValues = useMemo(
+    () =>
+      (Object.keys(fields) as Array<keyof typeof fields>).reduce(
+        (acc, fieldKey) => {
+          const config = fields[fieldKey];
+          const fieldName = config.attr?.name ?? String(fieldKey);
+          acc[fieldName] = getSignupFieldDefaultValue(config);
+          return acc;
+        },
+        {} as AuthSignupAccountValues,
+      ),
+    [fields],
+  );
+
+  const form = useForm<AuthSignupAccountValues>({
+    mode: "onChange",
+    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);
+  const confirmFieldName =
+    (fields.confirmPassword.attr?.name as
+      | keyof AuthSignupAccountValues
+      | undefined) ?? ("confirmPassword" as keyof AuthSignupAccountValues);
+
+  const resolvedPasswordRules =
+    passwordRules && passwordRules.length > 0
+      ? passwordRules
+      : DEFAULT_PASSWORD_RULES;
+
+  return (
+    <FormProvider {...form}>
+      <form
+        className="auth-signup-form auth-signup-form--account"
+        {...formAttr}
+        onSubmit={handleSubmit}
+      >
+        <div className="auth-signup-fields">
+          <Input
+            {...composeSignupFieldProps<InputProps>(
+              fields.accountId,
+              helpers.accountId,
+            )}
+            register={register.accountId}
+          />
+          <AuthPasswordSetField
+            passwordField={fields.password}
+            confirmPasswordField={fields.confirmPassword}
+            passwordFieldName={passwordFieldName}
+            confirmPasswordFieldName={confirmFieldName}
+            passwordRules={resolvedPasswordRules}
+            messages={{
+              missing: "비밀번호를 먼저 입력해 주세요.",
+              mismatch: "비밀번호 불일치",
+            }}
+          />
+        </div>
+        <Button.Default
+          type="submit"
+          scale="solid-xlarge"
+          priority="primary"
+          block
+          disabled={disabled}
+        >
+          {submitLabel ?? DEFAULT_SUBMIT_LABEL}
+        </Button.Default>
+      </form>
+    </FormProvider>
+  );
+}
+
+export default AuthSignupAccountForm;