@uniai-fe/uds-templates 0.0.10 → 0.0.12

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

@@ -0,0 +1,285 @@
+import { useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import {
+  Button,
+  CheckboxField,
+  DrawerBody,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerRoot,
+  DrawerTitle,
+  EmailInput,
+  type EmailInputProps,
+} from "@uniai-fe/uds-primitives";
+import type { FormEvent } from "react";
+import type {
+  AuthSignupAgreementOption,
+  AuthSignupVerificationProps,
+  AuthSignupVerificationValues,
+} from "../types";
+import { useSignupVerificationForm } from "../hooks";
+import { composeSignupFieldProps } from "../utils/composeFieldProps";
+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 REQUEST_CODE_LABEL = "인증코드 요청";
+const RESEND_CODE_LABEL = "인증번호 재요청";
+
+/**
+ * 회원가입 Step2; 약관 동의 + 이메일 인증
+ * @component
+ * @param {AuthSignupVerificationProps} props verification props
+ * @param {AuthSignupAgreementOption[]} props.agreements 약관 목록
+ * @param {Record<string, boolean>} props.agreementState 약관 체크 상태
+ * @param {(agreementId: string) => void} props.onToggleAgreement 단일 약관 토글
+ * @param {(options?: AuthSignupAgreementToggleAllOptions) => void} props.onToggleAll 전체 동의(필수 only) 토글
+ * @param {(agreementId: string) => void} [props.onOpenAgreementDetail] 약관 상세 보기
+ * @param {React.FormHTMLAttributes<HTMLFormElement>} [props.formAttr] form attr
+ * @param {import("react").ReactNode} [props.submitLabel] CTA 라벨
+ */
+export function AuthSignupVerificationForm({
+  fields,
+  agreements,
+  agreementState,
+  onToggleAgreement,
+  onToggleAll,
+  onOpenAgreementDetail,
+  formAttr,
+  submitLabel,
+  onSubmit,
+}: AuthSignupVerificationProps) {
+  const [openedAgreementId, setOpenedAgreementId] = useState<string | null>(
+    null,
+  );
+
+  const handleOpenAgreementDetail = (agreementId: string) => {
+    if (onOpenAgreementDetail) {
+      onOpenAgreementDetail(agreementId);
+    }
+    setOpenedAgreementId(agreementId);
+  };
+
+  const handleCloseDrawer = () => {
+    setOpenedAgreementId(null);
+  };
+
+  const openedAgreement = useMemo(() => {
+    if (!openedAgreementId) {
+      return null;
+    }
+    return agreements.find(option => option.id === openedAgreementId) ?? null;
+  }, [agreements, openedAgreementId]);
+
+  // 이메일 필드 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 AuthSignupVerificationValues,
+      ),
+    [fields],
+  );
+
+  const form = useForm<AuthSignupVerificationValues>({
+    mode: "onChange",
+    defaultValues,
+  });
+
+  const {
+    register,
+    helpers,
+    disabled,
+    onSubmit: handleSubmit,
+  } = useSignupVerificationForm({
+    fields,
+    form,
+    onSubmit,
+  });
+
+  const requiredAgreements = useMemo(
+    () => agreements.filter(option => option.required),
+    [agreements],
+  );
+
+  const allRequiredChecked = requiredAgreements.length
+    ? requiredAgreements.every(option => agreementState[option.id])
+    : true;
+
+  const emailFieldProps = composeSignupFieldProps<EmailInputProps>(
+    fields.email,
+    helpers.email,
+  );
+
+  const emailRequestHandler = emailFieldProps.onRequestCode;
+  const codeRequested = Boolean(emailFieldProps.codeVisible);
+  const inlineRequestButtonVisible =
+    codeRequested && Boolean(emailRequestHandler);
+  const normalizedEmailFieldProps: EmailInputProps = inlineRequestButtonVisible
+    ? {
+        ...emailFieldProps,
+        requestButtonLabel:
+          emailFieldProps.requestButtonLabel ?? RESEND_CODE_LABEL,
+      }
+    : {
+        ...emailFieldProps,
+        onRequestCode: undefined,
+        requestButtonLabel: undefined,
+        requestButtonDisabled: undefined,
+      };
+
+  const shouldRequestCode =
+    allRequiredChecked && !codeRequested && Boolean(emailRequestHandler);
+  const ctaLabel = shouldRequestCode
+    ? REQUEST_CODE_LABEL
+    : (submitLabel ?? DEFAULT_SUBMIT_LABEL);
+  const ctaDisabled = disabled || !allRequiredChecked;
+
+  const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
+    formAttr?.onSubmit?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    if (shouldRequestCode && emailRequestHandler) {
+      event.preventDefault();
+      event.stopPropagation();
+      emailRequestHandler();
+      return;
+    }
+
+    handleSubmit(event);
+  };
+
+  const renderAgreementLabel = (option: AuthSignupAgreementOption) => (
+    <span className="auth-signup-agreement-label">
+      <span
+        className="auth-signup-agreement-badge"
+        data-required={option.required ? "true" : "false"}
+      >
+        [{option.required ? "필수" : "선택"}]
+      </span>
+      <span className="auth-signup-agreement-title">{option.label}</span>
+    </span>
+  );
+
+  return (
+    <form
+      className="auth-signup-form auth-signup-form--verification"
+      {...formAttr}
+      onSubmit={handleFormSubmit}
+    >
+      <div className="auth-signup-fields">
+        <EmailInput {...normalizedEmailFieldProps} register={register.email} />
+      </div>
+      {agreements.length ? (
+        <section className="auth-signup-agreements" aria-label="약관 동의">
+          <div className="auth-signup-agreement-all">
+            <CheckboxField
+              size="large"
+              label={<span>필수 약관에 모두 동의하기</span>}
+              checked={allRequiredChecked}
+              onCheckedChange={() => onToggleAll({ requiredOnly: true })}
+            />
+          </div>
+          <div className="auth-signup-agreements-list">
+            {agreements.map(option => {
+              const checked = Boolean(agreementState[option.id]);
+
+              return (
+                <div
+                  className="auth-signup-agreement-row"
+                  key={option.id}
+                  data-required={option.required ? "true" : undefined}
+                  data-checked={checked ? "true" : undefined}
+                >
+                  {/* 약관 토글은 Figma 아이콘 사양대로 커스텀 버튼으로 구성한다. */}
+                  <button
+                    type="button"
+                    className="auth-signup-agreement-toggle"
+                    aria-pressed={checked}
+                    data-checked={checked ? "true" : undefined}
+                    onClick={() => onToggleAgreement(option.id)}
+                  >
+                    <span
+                      className="auth-signup-agreement-icon"
+                      aria-hidden="true"
+                    >
+                      <CheckAgreeIcon />
+                    </span>
+                    {renderAgreementLabel(option)}
+                  </button>
+                  {onOpenAgreementDetail ? (
+                    <button
+                      type="button"
+                      className="auth-signup-agreement-detail"
+                      aria-label={`${option.label} 약관 상세 보기`}
+                      onClick={() => handleOpenAgreementDetail(option.id)}
+                    >
+                      <span aria-hidden="true">
+                        <ChevronOpenDetailIcon />
+                      </span>
+                    </button>
+                  ) : null}
+                </div>
+              );
+            })}
+          </div>
+        </section>
+      ) : null}
+      <Button.Default
+        type="submit"
+        scale="solid-xlarge"
+        priority="primary"
+        block
+        disabled={ctaDisabled}
+      >
+        {ctaLabel}
+      </Button.Default>
+      <DrawerRoot
+        open={Boolean(openedAgreement)}
+        onOpenChange={isOpen => {
+          if (!isOpen) {
+            handleCloseDrawer();
+          }
+        }}
+      >
+        <DrawerPortal>
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>{openedAgreement?.label ?? "약관 상세"}</DrawerTitle>
+            </DrawerHeader>
+            {openedAgreement?.description ? (
+              <DrawerBody className="auth-signup-agreement-drawer-body">
+                {openedAgreement.description}
+              </DrawerBody>
+            ) : null}
+            <DrawerFooter>
+              <Button.Default
+                type="button"
+                scale="solid-medium"
+                priority="primary"
+                block
+                onClick={handleCloseDrawer}
+              >
+                닫기
+              </Button.Default>
+            </DrawerFooter>
+          </DrawerContent>
+        </DrawerPortal>
+      </DrawerRoot>
+    </form>
+  );
+}
+
+export default AuthSignupVerificationForm;

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

@@ -0,0 +1,5 @@
+export { AuthSignupUserInfoForm } from "./UserInfoForm";
+export { AuthSignupVerificationForm } from "./VerificationForm";
+export { AuthSignupAccountForm } from "./AccountForm";
+export { AuthSignupComplete } from "./Complete";
+export { AuthSignupTemplate } from "./Template";

package/src/auth/signup/styles/signup.scss

@@ -0,0 +1,187 @@
+.auth-signup-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-8, 32px);
+  margin-top: var(--spacing-padding-9, 36px);
+}
+
+.auth-signup-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-5, 20px);
+}
+
+.auth-signup-verification {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-9, 36px);
+}
+
+.auth-signup-agreements {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-4, 16px);
+  background: var(--color-background-subtle);
+  border-radius: var(--shape-rounded-3, 16px);
+  padding: var(--spacing-padding-5, 20px);
+}
+
+.auth-signup-agreement-all {
+  background: var(--color-background-soft, #f2f2f3);
+  border-radius: var(--shape-rounded-2, 12px);
+  padding: var(--spacing-padding-4, 16px);
+}
+
+.auth-signup-agreements-list {
+  width: 100%;
+  background: var(--color-common-100, #ffffff);
+  border-radius: var(--shape-rounded-2, 12px);
+  padding: var(--spacing-padding-4, 16px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-3, 12px);
+}
+
+.auth-signup-agreement-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-padding-3, 12px);
+}
+
+// 약관 토글 행은 SVG 아이콘/텍스트를 하나의 버튼으로 묶어 디자인 명세와 일치시킨다.
+.auth-signup-agreement-toggle {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-padding-3, 12px);
+  cursor: pointer;
+  flex: 1;
+  text-align: left;
+  flex-wrap: nowrap;
+  font-size: 14px;
+}
+
+.auth-signup-agreement-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--color-label-assistive, #94989e);
+  flex-shrink: 0;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  svg path {
+    stroke: currentColor;
+  }
+}
+
+.auth-signup-agreement-toggle[data-checked="true"] .auth-signup-agreement-icon {
+  color: var(--color-primary-default);
+  border-color: var(--color-primary-default);
+}
+
+.auth-signup-agreement-label {
+  display: inline-flex;
+  gap: var(--spacing-padding-1, 4px);
+  align-items: baseline;
+  flex-wrap: nowrap;
+}
+
+.auth-signup-agreement-badge {
+  font-size: 14px;
+  // font-weight: 600;
+  color: var(--color-primary-default);
+
+  &[data-required="false"] {
+    color: var(--color-label-standard);
+  }
+}
+
+.auth-signup-agreement-title {
+  font-size: 14px;
+  color: var(--color-label-standard);
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.auth-signup-agreement-description {
+  font-size: 13px;
+  color: var(--color-label-assistive);
+  margin: 0;
+  padding-left: calc(20px + var(--spacing-padding-3, 12px));
+}
+
+.auth-signup-agreement-detail {
+  border: none;
+  background: none;
+  color: var(--color-label-assistive);
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.auth-signup-agreement-detail:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.auth-signup-agreement-detail:hover svg path {
+  fill: var(--color-label-standard);
+}
+
+.auth-signup-complete {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-7, 28px);
+  text-align: center;
+}
+
+.auth-signup-complete-illustration {
+  display: flex;
+  justify-content: center;
+}
+
+.auth-signup-complete-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--color-label-standard);
+  margin: 0;
+}
+
+.auth-signup-complete-description {
+  margin: var(--spacing-padding-2, 8px) 0 0;
+  color: var(--color-label-assistive);
+}
+
+.auth-signup-complete-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-4, 16px);
+}
+
+.auth-signup-agreement-drawer-body {
+  p {
+    font-weight: 400;
+    color: var(--color-label-standard);
+    font-size: var(--font-body-xxsmall-size);
+    line-height: 1.5em;
+    letter-spacing: 0px;
+  }
+}

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

@@ -0,0 +1,86 @@
+import type { ReactNode } from "react";
+import type { InputState } from "@uniai-fe/uds-primitives";
+import type {
+  AuthSignupFieldProps,
+  AuthSignupUserInfoFields,
+  AuthSignupUserInfoValues,
+  AuthSignupVerificationFields,
+  AuthSignupVerificationValues,
+  AuthSignupAccountFields,
+  AuthSignupAccountValues,
+} from "./props";
+import type {
+  SubmitHandler,
+  UseFormRegisterReturn,
+  UseFormReturn,
+} from "react-hook-form";
+
+/**
+ * 공용 Helper 타입
+ */
+export type AuthSignupHelperMap<
+  TFields extends Record<string, AuthSignupFieldProps>,
+> = Record<keyof TFields, { text?: ReactNode; state?: InputState }>;
+
+/** Step1 옵션 */
+export interface UseSignupUserInfoFormOptions<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupUserInfoFields,
+> {
+  fields: TFields;
+  form: UseFormReturn<AuthSignupUserInfoValues>;
+  onSubmit: SubmitHandler<AuthSignupUserInfoValues>;
+  activeFields?: Array<keyof TFields>;
+}
+
+export interface UseSignupUserInfoFormReturn<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupUserInfoFields,
+> {
+  register: Record<keyof TFields, UseFormRegisterReturn>;
+  helpers: AuthSignupHelperMap<TFields>;
+  disabled: boolean;
+  onSubmit: ReturnType<UseFormReturn<AuthSignupUserInfoValues>["handleSubmit"]>;
+}
+
+/** Step2 옵션 */
+export interface UseSignupVerificationFormOptions<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupVerificationFields,
+> {
+  fields: TFields;
+  form: UseFormReturn<AuthSignupVerificationValues>;
+  onSubmit: SubmitHandler<AuthSignupVerificationValues>;
+}
+
+export interface UseSignupVerificationFormReturn<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupVerificationFields,
+> {
+  register: Record<keyof TFields, UseFormRegisterReturn>;
+  helpers: AuthSignupHelperMap<TFields>;
+  disabled: boolean;
+  onSubmit: ReturnType<
+    UseFormReturn<AuthSignupVerificationValues>["handleSubmit"]
+  >;
+}
+
+/** Step3 옵션 */
+export interface UseSignupAccountFormOptions<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupAccountFields,
+> {
+  fields: TFields;
+  form: UseFormReturn<AuthSignupAccountValues>;
+  onSubmit: SubmitHandler<AuthSignupAccountValues>;
+}
+
+export interface UseSignupAccountFormReturn<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupAccountFields,
+> {
+  register: Record<keyof TFields, UseFormRegisterReturn>;
+  helpers: AuthSignupHelperMap<TFields>;
+  disabled: boolean;
+  onSubmit: ReturnType<UseFormReturn<AuthSignupAccountValues>["handleSubmit"]>;
+}

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

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

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

@@ -0,0 +1,145 @@
+import type { ReactNode } from "react";
+import type React from "react";
+import type { SubmitHandler } from "react-hook-form";
+import type {
+  EmailInputProps,
+  InputFieldProps,
+  InputPasswordProps,
+  InputProps,
+  PhoneInputProps,
+} from "@uniai-fe/uds-primitives";
+import type { AuthPasswordRule } from "../../common/password/types";
+
+/**
+ * 회원가입 공통 필드 props; primitives InputFieldProps를 그대로 사용한다.
+ */
+export type AuthSignupFieldProps<TProps extends InputProps = InputProps> =
+  InputFieldProps<TProps>;
+
+/** 사용자 기본 정보(이름/휴대폰) */
+export type AuthSignupUserInfoFields = {
+  name: AuthSignupFieldProps<InputProps>;
+  phone: AuthSignupFieldProps<PhoneInputProps>;
+};
+
+export type AuthSignupUserInfoValues = Record<string, string>; // name/phone 값
+
+export interface AuthSignupUserInfoProps {
+  fields: AuthSignupUserInfoFields;
+  visibleFields?: Array<keyof AuthSignupUserInfoFields>;
+  submitLabel?: ReactNode;
+  formAttr?: React.FormHTMLAttributes<HTMLFormElement>;
+  onSubmit: SubmitHandler<AuthSignupUserInfoValues>;
+}
+
+/** 약관 + 이메일 인증 */
+export interface AuthSignupAgreementOption {
+  id: string;
+  label: ReactNode;
+  description?: ReactNode;
+  required?: boolean;
+}
+
+export type AuthSignupAgreementState = Record<string, boolean>;
+export interface AuthSignupAgreementToggleAllOptions {
+  requiredOnly?: boolean;
+}
+
+export type AuthSignupVerificationFields = {
+  email: AuthSignupFieldProps<EmailInputProps>;
+};
+
+export type AuthSignupVerificationValues = Record<string, string>;
+
+export interface AuthSignupVerificationProps {
+  fields: AuthSignupVerificationFields;
+  agreements: AuthSignupAgreementOption[];
+  agreementState: AuthSignupAgreementState;
+  onToggleAgreement: (agreementId: string) => void;
+  onToggleAll: (options?: AuthSignupAgreementToggleAllOptions) => void;
+  onOpenAgreementDetail?: (agreementId: string) => void;
+  submitLabel?: ReactNode;
+  formAttr?: React.FormHTMLAttributes<HTMLFormElement>;
+  onSubmit: SubmitHandler<AuthSignupVerificationValues>;
+}
+
+/** 계정 정보(아이디/비밀번호) */
+export type AuthSignupAccountFields = {
+  accountId: AuthSignupFieldProps<InputProps>;
+  password: AuthSignupFieldProps<InputPasswordProps>;
+  confirmPassword: AuthSignupFieldProps<InputPasswordProps>;
+};
+
+export type AuthSignupAccountValues = Record<string, string>;
+
+export type AuthSignupPasswordRule = AuthPasswordRule;
+
+export interface AuthSignupAccountProps {
+  fields: AuthSignupAccountFields;
+  passwordRules?: AuthSignupPasswordRule[];
+  submitLabel?: ReactNode;
+  formAttr?: React.FormHTMLAttributes<HTMLFormElement>;
+  onSubmit: SubmitHandler<AuthSignupAccountValues>;
+}
+
+/** 완료 CTA */
+export interface AuthSignupCompleteAction {
+  label: ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+export interface AuthSignupCompleteProps {
+  title: ReactNode;
+  description?: ReactNode;
+  illustration?: ReactNode;
+  primaryAction: AuthSignupCompleteAction;
+  secondaryAction?: AuthSignupCompleteAction;
+}
+
+/** Step 식별자 */
+export type AuthSignupStepId =
+  | "userInfo"
+  | "verifyAgreement"
+  | "generateAccount"
+  | "complete";
+
+/** 헤더 구성 요소 */
+export interface AuthSignupHeaderProps {
+  navigationTitle: ReactNode;
+  headline: ReactNode;
+  description?: ReactNode;
+  backIcon?: ReactNode;
+  onBack?: () => void;
+}
+
+/** Step indicator 항목 */
+export interface AuthSignupStepIndicatorItem {
+  id: AuthSignupStepId;
+  label: ReactNode;
+}
+
+export interface AuthSignupStepIndicatorProps {
+  current?: AuthSignupStepId;
+  currentIndex?: number;
+  items?: AuthSignupStepIndicatorItem[];
+  total?: number;
+  showLabels?: boolean;
+}
+
+/** Step 구성 props 집합 */
+export interface AuthSignupFlowProps {
+  userInfo: AuthSignupUserInfoProps;
+  verification: AuthSignupVerificationProps;
+  account: AuthSignupAccountProps;
+  complete: AuthSignupCompleteProps;
+}
+
+/** 회원가입 템플릿 props */
+export interface AuthSignupTemplateProps extends AuthSignupFlowProps {
+  className?: string;
+  header: AuthSignupHeaderProps;
+  step: AuthSignupStepId;
+  stepIndicator?: AuthSignupStepIndicatorProps;
+  footer?: React.ReactNode;
+}