@uniai-fe/uds-templates 0.0.9 → 0.0.11

package/src/components/auth/login/types/props.ts

@@ -2,44 +2,44 @@ import React from "react";
 import type { SubmitHandler } from "react-hook-form";
 import type { AuthContainerProps } from "../../container";
 import type {
-  InputFieldConfig,
+  InputFieldProps,
   InputPasswordProps,
   InputProps,
 } from "@uniai-fe/uds-primitives";
 
 /**
- * 로그인 입력 필드 설정
- * @typedef {AuthLoginFieldConfig}
+ * 로그인 입력 필드 props
+ * @typedef {AuthLoginFieldProps}
  * @template TProps
  * @desc
- * - InputFieldConfig 제네릭을 래핑해 로그인 요구사항과 연결한다.
+ * - InputFieldProps 제네릭을 래핑해 로그인 요구사항과 연결한다.
  * - props 제네릭으로 Input/PasswordInput 등 세부 props를 주입한다.
  */
-export type AuthLoginFieldConfig<TProps extends InputProps = InputProps> =
-  InputFieldConfig<TProps>;
+export type AuthLoginFieldProps<TProps extends InputProps = InputProps> =
+  InputFieldProps<TProps>;
 
 /**
  * 로그인 필드 묶음
  * @template TAdditional
  * @desc
  * - 필수 id/password 필드와 확장 필드를 포함한다.
- * @property {AuthLoginFieldConfig} id 아이디 필드 설정
- * @property {AuthLoginFieldConfig} password 비밀번호 필드 설정
+ * @property {AuthLoginFieldProps} id 아이디 필드 설정
+ * @property {AuthLoginFieldProps} password 비밀번호 필드 설정
  */
 export type AuthLoginFields<
-  TAdditional extends Record<string, AuthLoginFieldConfig> = Record<
+  TAdditional extends Record<string, AuthLoginFieldProps> = Record<
     string,
-    AuthLoginFieldConfig
+    AuthLoginFieldProps
   >,
 > = TAdditional & {
   /**
    * 아이디 필드 설정
    */
-  id: AuthLoginFieldConfig<InputProps>;
+  id: AuthLoginFieldProps<InputProps>;
   /**
    * 비밀번호 필드 설정
    */
-  password: AuthLoginFieldConfig<InputPasswordProps>;
+  password: AuthLoginFieldProps<InputPasswordProps>;
 };
 
 /**

package/src/components/auth/login/types.ts

@@ -1,2 +1,2 @@
-export * from "./types/props";
-export * from "./types/hooks";
+export type * from "./types/props";
+export type * from "./types/hooks";

package/src/components/auth/signup/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from "./useSignupUserInfoForm";
+export * from "./useSignupVerificationForm";
+export * from "./useSignupAccountForm";

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

@@ -0,0 +1,77 @@
+import { useMemo } from "react";
+import { useWatch } from "react-hook-form";
+import type { ReactNode } from "react";
+import type {
+  AuthSignupAccountFields,
+  AuthSignupAccountValues,
+  AuthSignupFieldProps,
+  UseSignupAccountFormOptions,
+  UseSignupAccountFormReturn,
+} from "../types";
+
+/**
+ * 회원가입 Step3 훅; 계정 정보
+ * @hook
+ * @template TFields
+ * @param {UseSignupAccountFormOptions<TFields>} options
+ * @desc
+ * - 1) form init → 2) register merge → 3) helper/state → 4) submit 순서
+ */
+export function useSignupAccountForm<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupAccountFields,
+>({
+  fields,
+  form,
+  onSubmit,
+}: UseSignupAccountFormOptions<TFields>): UseSignupAccountFormReturn<TFields> {
+  const values = useWatch({ control: form.control }) as
+    | AuthSignupAccountValues
+    | undefined;
+
+  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);
+        acc[fieldKey] = form.register(fieldName);
+        return acc;
+      },
+      {} as UseSignupAccountFormReturn<TFields>["register"],
+    );
+  }, [fields, form]);
+
+  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);
+        const state = form.getFieldState(fieldName);
+        acc[fieldKey] = {
+          text:
+            (state.error?.message as ReactNode | undefined) ?? config.helper,
+          state: state.invalid ? "error" : undefined,
+        };
+        return acc;
+      },
+      {} as UseSignupAccountFormReturn<TFields>["helpers"],
+    );
+  }, [fields, form]);
+
+  const trimmedFilled =
+    values &&
+    Object.values(values).every(value =>
+      typeof value === "string" ? value.trim().length > 0 : false,
+    );
+
+  const disabled = form.formState.isSubmitting || !trimmedFilled;
+
+  const onSubmitHandler = form.handleSubmit(onSubmit);
+
+  return {
+    register,
+    helpers,
+    disabled,
+    onSubmit: onSubmitHandler,
+  };
+}

package/src/components/auth/signup/hooks/useSignupUserInfoForm.ts

@@ -0,0 +1,81 @@
+import { useMemo } from "react";
+import { useWatch } from "react-hook-form";
+import type { ReactNode } from "react";
+import type {
+  AuthSignupFieldProps,
+  AuthSignupUserInfoFields,
+  AuthSignupUserInfoValues,
+  UseSignupUserInfoFormOptions,
+  UseSignupUserInfoFormReturn,
+} from "../types";
+
+/**
+ * 회원가입 기본 정보 훅 옵션
+ * @typedef {UseSignupUserInfoFormOptions}
+ */
+/**
+ * 회원가입 Step1 훅; 사용자 기본 정보
+ * @hook
+ * @template TFields
+ * @param {UseSignupUserInfoFormOptions<TFields>} options 훅 옵션
+ * @desc
+ * - 1) form init → 2) register merge → 3) helper/state → 4) submit 순서
+ */
+export function useSignupUserInfoForm<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupUserInfoFields,
+>({
+  fields,
+  form,
+  onSubmit,
+}: UseSignupUserInfoFormOptions<TFields>): UseSignupUserInfoFormReturn<TFields> {
+  const values = useWatch({ control: form.control }) as
+    | AuthSignupUserInfoValues
+    | undefined;
+
+  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);
+        acc[fieldKey] = form.register(fieldName);
+        return acc;
+      },
+      {} as UseSignupUserInfoFormReturn<TFields>["register"],
+    );
+  }, [fields, form]);
+
+  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);
+        const state = form.getFieldState(fieldName);
+        acc[fieldKey] = {
+          text:
+            (state.error?.message as ReactNode | undefined) ?? config.helper,
+          state: state.invalid ? "error" : undefined,
+        };
+        return acc;
+      },
+      {} as UseSignupUserInfoFormReturn<TFields>["helpers"],
+    );
+  }, [fields, form]);
+
+  const trimmedFilled =
+    values &&
+    Object.values(values).every(value =>
+      typeof value === "string" ? value.trim().length > 0 : false,
+    );
+
+  const disabled = form.formState.isSubmitting || !trimmedFilled;
+
+  const onSubmitHandler = form.handleSubmit(onSubmit);
+
+  return {
+    register,
+    helpers,
+    disabled,
+    onSubmit: onSubmitHandler,
+  };
+}

package/src/components/auth/signup/hooks/useSignupVerificationForm.ts

@@ -0,0 +1,77 @@
+import { useMemo } from "react";
+import { useWatch } from "react-hook-form";
+import type { ReactNode } from "react";
+import type {
+  AuthSignupFieldProps,
+  AuthSignupVerificationFields,
+  AuthSignupVerificationValues,
+  UseSignupVerificationFormOptions,
+  UseSignupVerificationFormReturn,
+} from "../types";
+
+/**
+ * 회원가입 Step2 훅; 약관 + 이메일 인증
+ * @hook
+ * @template TFields
+ * @param {UseSignupVerificationFormOptions<TFields>} options
+ * @desc
+ * - 1) form init → 2) register merge → 3) helper/state → 4) submit 순서
+ */
+export function useSignupVerificationForm<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupVerificationFields,
+>({
+  fields,
+  form,
+  onSubmit,
+}: UseSignupVerificationFormOptions<TFields>): UseSignupVerificationFormReturn<TFields> {
+  const values = useWatch({ control: form.control }) as
+    | AuthSignupVerificationValues
+    | undefined;
+
+  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);
+        acc[fieldKey] = form.register(fieldName);
+        return acc;
+      },
+      {} as UseSignupVerificationFormReturn<TFields>["register"],
+    );
+  }, [fields, form]);
+
+  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);
+        const state = form.getFieldState(fieldName);
+        acc[fieldKey] = {
+          text:
+            (state.error?.message as ReactNode | undefined) ?? config.helper,
+          state: state.invalid ? "error" : undefined,
+        };
+        return acc;
+      },
+      {} as UseSignupVerificationFormReturn<TFields>["helpers"],
+    );
+  }, [fields, form]);
+
+  const trimmedFilled =
+    values &&
+    Object.values(values).every(value =>
+      typeof value === "string" ? value.trim().length > 0 : false,
+    );
+
+  const disabled = form.formState.isSubmitting || !trimmedFilled;
+
+  const onSubmitHandler = form.handleSubmit(onSubmit);
+
+  return {
+    register,
+    helpers,
+    disabled,
+    onSubmit: onSubmitHandler,
+  };
+}

package/src/components/auth/signup/index.ts

@@ -0,0 +1,24 @@
+import {
+  AuthSignupUserInfoForm,
+  AuthSignupVerificationForm,
+  AuthSignupAccountForm,
+  AuthSignupComplete,
+} from "./markup";
+
+import "./styles/signup.scss";
+
+export type * from "./types";
+export * from "./hooks";
+export {
+  AuthSignupUserInfoForm,
+  AuthSignupVerificationForm,
+  AuthSignupAccountForm,
+  AuthSignupComplete,
+};
+
+export const AuthSignup = {
+  StepUserInfo: AuthSignupUserInfoForm,
+  StepVerification: AuthSignupVerificationForm,
+  StepAccount: AuthSignupAccountForm,
+  StepComplete: AuthSignupComplete,
+};

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

@@ -0,0 +1,124 @@
+import { useMemo } from "react";
+import { useForm } from "react-hook-form";
+import {
+  Button,
+  Input,
+  PasswordInput,
+  type InputPasswordProps,
+  type InputProps,
+} from "@uniai-fe/uds-primitives";
+import type { AuthSignupAccountProps, AuthSignupAccountValues } from "../types";
+import { useSignupAccountForm } from "../hooks";
+import { composeSignupFieldProps } from "../utils/composeFieldProps";
+
+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] = "";
+          return acc;
+        },
+        {} as AuthSignupAccountValues,
+      ),
+    [fields],
+  );
+
+  const form = useForm<AuthSignupAccountValues>({
+    mode: "onChange",
+    defaultValues,
+  });
+
+  const {
+    register,
+    helpers,
+    disabled,
+    onSubmit: handleSubmit,
+  } = useSignupAccountForm({
+    fields,
+    form,
+    onSubmit,
+  });
+
+  return (
+    <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}
+        />
+        <PasswordInput
+          {...composeSignupFieldProps<InputPasswordProps>(
+            fields.password,
+            helpers.password,
+          )}
+          register={register.password}
+        />
+        <PasswordInput
+          {...composeSignupFieldProps<InputPasswordProps>(
+            fields.confirmPassword,
+            helpers.confirmPassword,
+          )}
+          register={register.confirmPassword}
+        />
+      </div>
+      {passwordRules?.length ? (
+        <ul className="auth-signup-password-rules">
+          {passwordRules.map(rule => (
+            <li
+              key={rule.id}
+              className="auth-signup-password-rule"
+              data-fulfilled={rule.fulfilled ? "true" : undefined}
+            >
+              <span
+                className="auth-signup-password-rule-indicator"
+                aria-hidden="true"
+              />
+              <span className="auth-signup-password-rule-text">
+                {rule.label}
+              </span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      <Button.Default
+        type="submit"
+        scale="solid-xlarge"
+        priority="primary"
+        block
+        disabled={disabled}
+      >
+        {submitLabel ?? DEFAULT_SUBMIT_LABEL}
+      </Button.Default>
+    </form>
+  );
+}
+
+export default AuthSignupAccountForm;

package/src/components/auth/signup/markup/Complete.tsx

@@ -0,0 +1,61 @@
+import { Button } from "@uniai-fe/uds-primitives";
+import type { AuthSignupCompleteProps } from "../types";
+
+/**
+ * 회원가입 Step4; 가입 완료/승인 대기 안내
+ * @component
+ * @param {AuthSignupCompleteProps} props complete props
+ * @param {React.ReactNode} props.title 완료 메시지
+ * @param {React.ReactNode} [props.description] 부가 설명
+ * @param {React.ReactNode} [props.illustration] 일러스트 영역
+ * @param {AuthSignupCompleteAction} props.primaryAction 주요 CTA
+ * @param {AuthSignupCompleteAction} [props.secondaryAction] 보조 CTA
+ */
+export function AuthSignupComplete({
+  title,
+  description,
+  illustration,
+  primaryAction,
+  secondaryAction,
+}: AuthSignupCompleteProps) {
+  // CTA 섹션은 primary/secondary 순으로 렌더해 사용자가 자연스럽게 진행하도록 안내한다.
+  return (
+    <section className="auth-signup-complete">
+      {illustration ? (
+        <div className="auth-signup-complete-illustration">{illustration}</div>
+      ) : null}
+      <div className="auth-signup-complete-text">
+        <h2 className="auth-signup-complete-title">{title}</h2>
+        {description ? (
+          <p className="auth-signup-complete-description">{description}</p>
+        ) : null}
+      </div>
+      <div className="auth-signup-complete-actions">
+        <Button.Default
+          type="button"
+          scale="solid-xlarge"
+          priority="primary"
+          block
+          disabled={primaryAction.disabled}
+          onClick={primaryAction.onClick}
+        >
+          {primaryAction.label}
+        </Button.Default>
+        {secondaryAction ? (
+          <Button.Default
+            type="button"
+            scale="solid-xlarge"
+            priority="secondary"
+            block
+            disabled={secondaryAction.disabled}
+            onClick={secondaryAction.onClick}
+          >
+            {secondaryAction.label}
+          </Button.Default>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+export default AuthSignupComplete;

package/src/components/auth/signup/markup/UserInfoForm.tsx

@@ -0,0 +1,97 @@
+import { useMemo } from "react";
+import { useForm } from "react-hook-form";
+import {
+  Button,
+  Input,
+  PhoneInput,
+  type InputProps,
+  type PhoneInputProps,
+} from "@uniai-fe/uds-primitives";
+import type {
+  AuthSignupUserInfoProps,
+  AuthSignupUserInfoValues,
+} from "../types";
+import { useSignupUserInfoForm } from "../hooks";
+import { composeSignupFieldProps } from "../utils/composeFieldProps";
+
+const DEFAULT_SUBMIT_LABEL = "다음";
+
+/**
+ * 회원가입 Step1; 사용자 기본 정보(이름/휴대폰) 입력 폼
+ * @component
+ * @param {AuthSignupUserInfoProps} props form props
+ * @param {AuthSignupUserInfoFields} props.fields 필드 설정
+ * @param {React.FormHTMLAttributes<HTMLFormElement>} [props.formAttr] form attr
+ * @param {import("react").ReactNode} [props.submitLabel] CTA 라벨
+ * @param {SubmitHandler<AuthSignupUserInfoValues>} props.onSubmit 제출 핸들러
+ */
+export function AuthSignupUserInfoForm({
+  fields,
+  formAttr,
+  submitLabel,
+  onSubmit,
+}: AuthSignupUserInfoProps) {
+  // 필드 name attr을 기준으로 RHF defaultValues를 생성한다.
+  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] = "";
+          return acc;
+        },
+        {} as AuthSignupUserInfoValues,
+      ),
+    [fields],
+  );
+
+  const form = useForm<AuthSignupUserInfoValues>({
+    mode: "onChange",
+    defaultValues,
+  });
+
+  const {
+    register,
+    helpers,
+    disabled,
+    onSubmit: handleSubmit,
+  } = useSignupUserInfoForm({
+    fields,
+    form,
+    onSubmit,
+  });
+
+  return (
+    <form
+      className="auth-signup-form auth-signup-form--user-info"
+      {...formAttr}
+      onSubmit={handleSubmit}
+    >
+      <div className="auth-signup-fields">
+        <Input
+          {...composeSignupFieldProps<InputProps>(fields.name, helpers.name)}
+          register={register.name}
+        />
+        <PhoneInput
+          {...composeSignupFieldProps<PhoneInputProps>(
+            fields.phone,
+            helpers.phone,
+          )}
+          register={register.phone}
+        />
+      </div>
+      <Button.Default
+        type="submit"
+        scale="solid-xlarge"
+        priority="primary"
+        block
+        disabled={disabled}
+      >
+        {submitLabel ?? DEFAULT_SUBMIT_LABEL}
+      </Button.Default>
+    </form>
+  );
+}
+
+export default AuthSignupUserInfoForm;