@uniai-fe/uds-templates 0.0.10 → 0.0.12

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

@@ -0,0 +1,88 @@
+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,
+  activeFields,
+}: 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 targetKeys =
+    activeFields ?? (Object.keys(fields) as Array<keyof TFields>);
+
+  const trimmedFilled =
+    values &&
+    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;
+
+  const onSubmitHandler = form.handleSubmit(onSubmit);
+
+  return {
+    register,
+    helpers,
+    disabled,
+    onSubmit: onSubmitHandler,
+  };
+}

package/src/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/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/auth/signup/index.ts

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

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;

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

@@ -0,0 +1,59 @@
+import clsx from "clsx";
+import { Button } from "@uniai-fe/uds-primitives";
+import AuthCompleteTemplate from "../../common/complete/Template";
+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) {
+  const secondaryButton = secondaryAction ? (
+    <div className="auth-signup-complete-actions">
+      <Button.Default
+        type="button"
+        scale="solid-xlarge"
+        priority="secondary"
+        block
+        disabled={secondaryAction.disabled}
+        onClick={secondaryAction.onClick}
+      >
+        {secondaryAction.label}
+      </Button.Default>
+    </div>
+  ) : null;
+
+  return (
+    <AuthCompleteTemplate
+      className={clsx("auth-signup-complete")}
+      title={title}
+      description={description}
+      cta={{
+        label: primaryAction.label,
+        buttonProps: {
+          onClick: primaryAction.onClick,
+          disabled: primaryAction.disabled,
+        },
+      }}
+    >
+      {illustration ? (
+        <div className="auth-signup-complete-illustration">{illustration}</div>
+      ) : null}
+      {secondaryButton}
+    </AuthCompleteTemplate>
+  );
+}
+
+export default AuthSignupComplete;

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

@@ -0,0 +1,110 @@
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import { AuthContainer } from "../../common/container";
+import type {
+  AuthSignupStepIndicatorItem,
+  AuthSignupTemplateProps,
+} from "../types";
+import type { AuthSignupStepId } from "../types";
+import { AuthSignupUserInfoForm } from "./UserInfoForm";
+import { AuthSignupVerificationForm } from "./VerificationForm";
+import { AuthSignupAccountForm } from "./AccountForm";
+import { AuthSignupComplete } from "./Complete";
+import { AuthStageHeader } from "../../common/container/header";
+
+const DEFAULT_STEPS: AuthSignupStepIndicatorItem[] = [
+  { id: "userInfo", label: "기본 정보" },
+  { id: "verifyAgreement", label: "약관 · 인증" },
+  { id: "generateAccount", label: "계정 생성" },
+  { id: "complete", label: "완료" },
+];
+
+const STEP_INDEX: Record<AuthSignupStepId, number> = {
+  userInfo: 0,
+  verifyAgreement: 1,
+  generateAccount: 2,
+  complete: 3,
+};
+
+/**
+ * 회원가입 템플릿; Step1~4 화면을 AuthContainer 위에서 전환한다.
+ * @component
+ * @param {AuthSignupTemplateProps} props 템플릿 props
+ * @param {AuthSignupHeaderProps} props.header 헤더 구성(타이틀/뒤로가기 등)
+ * @param {AuthSignupStepId} props.step 현재 step
+ * @param {AuthSignupStepIndicatorProps} [props.stepIndicator] step indicator override
+ * @param {React.ReactNode} [props.footer] footer slot
+ */
+export function AuthSignupTemplate({
+  className,
+  header,
+  step,
+  stepIndicator,
+  footer,
+  userInfo,
+  verification,
+  account,
+  complete,
+}: AuthSignupTemplateProps) {
+  const steps = stepIndicator?.items ?? DEFAULT_STEPS;
+  const currentStep = stepIndicator?.current ?? step;
+  const defaultStepIndex = Math.max(
+    0,
+    steps.findIndex(item => item.id === currentStep),
+  );
+  const fallbackTotal = steps.length || 1;
+  const providedTotal = stepIndicator?.total ?? fallbackTotal;
+  const resolvedTotal = Math.max(1, providedTotal);
+  const providedIndex = stepIndicator?.currentIndex ?? defaultStepIndex + 1;
+  const resolvedIndex = Math.min(Math.max(1, providedIndex), resolvedTotal);
+
+  const indicator =
+    resolvedTotal > 0
+      ? {
+          total: resolvedTotal,
+          current: resolvedIndex,
+        }
+      : undefined;
+
+  const headerNode = (
+    <AuthStageHeader
+      className="auth-signup-header"
+      navigationTitle={header.navigationTitle}
+      headline={header.headline}
+      description={header.description}
+      backIcon={header.backIcon}
+      onBack={header.onBack}
+      indicator={indicator}
+    />
+  );
+
+  let content: ReactNode = null;
+  switch (currentStep) {
+    case "userInfo":
+      content = <AuthSignupUserInfoForm {...userInfo} />;
+      break;
+    case "verifyAgreement":
+      content = <AuthSignupVerificationForm {...verification} />;
+      break;
+    case "generateAccount":
+      content = <AuthSignupAccountForm {...account} />;
+      break;
+    case "complete":
+      content = <AuthSignupComplete {...complete} />;
+      break;
+    default:
+      content = null;
+  }
+
+  return (
+    <AuthContainer
+      className={clsx("auth-signup-template", className)}
+      header={headerNode}
+      footer={footer}
+    >
+      {content}
+    </AuthContainer>
+  );
+}
+
+export default AuthSignupTemplate;

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

@@ -0,0 +1,107 @@
+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/useSignupUserInfoForm";
+import { composeSignupFieldProps } from "../utils/composeFieldProps";
+import { getSignupFieldDefaultValue } from "../utils/getSignupFieldDefaultValue";
+
+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,
+  visibleFields,
+  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] = getSignupFieldDefaultValue(config);
+          return acc;
+        },
+        {} as AuthSignupUserInfoValues,
+      ),
+    [fields],
+  );
+
+  const form = useForm<AuthSignupUserInfoValues>({
+    mode: "onChange",
+    defaultValues,
+  });
+
+  const renderedFields =
+    visibleFields ?? (Object.keys(fields) as Array<keyof typeof fields>);
+
+  const {
+    register,
+    helpers,
+    disabled,
+    onSubmit: handleSubmit,
+  } = useSignupUserInfoForm({
+    fields,
+    form,
+    onSubmit,
+    activeFields: renderedFields,
+  });
+
+  return (
+    <form
+      className="auth-signup-form auth-signup-form--user-info"
+      {...formAttr}
+      onSubmit={handleSubmit}
+    >
+      <div className="auth-signup-fields">
+        {renderedFields.includes("name") ? (
+          <Input
+            {...composeSignupFieldProps<InputProps>(fields.name, helpers.name)}
+            register={register.name}
+          />
+        ) : null}
+        {renderedFields.includes("phone") ? (
+          <PhoneInput
+            {...composeSignupFieldProps<PhoneInputProps>(
+              fields.phone,
+              helpers.phone,
+            )}
+            register={register.phone}
+          />
+        ) : null}
+      </div>
+      <Button.Default
+        type="submit"
+        scale="solid-xlarge"
+        priority="primary"
+        block
+        disabled={disabled}
+      >
+        {submitLabel ?? DEFAULT_SUBMIT_LABEL}
+      </Button.Default>
+    </form>
+  );
+}
+
+export default AuthSignupUserInfoForm;