@uniai-fe/uds-templates 0.0.11 → 0.0.13

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/{components/auth → auth}/signup/markup/UserInfoForm.tsx

@@ -11,8 +11,9 @@ import type {
   AuthSignupUserInfoProps,
   AuthSignupUserInfoValues,
 } from "../types";
-import { useSignupUserInfoForm } from "../hooks";
+import { useSignupUserInfoForm } from "../hooks/useSignupUserInfoForm";
 import { composeSignupFieldProps } from "../utils/composeFieldProps";
+import { getSignupFieldDefaultValue } from "../utils/getSignupFieldDefaultValue";
 
 const DEFAULT_SUBMIT_LABEL = "다음";
 
@@ -27,6 +28,7 @@ const DEFAULT_SUBMIT_LABEL = "다음";
  */
 export function AuthSignupUserInfoForm({
   fields,
+  visibleFields,
   formAttr,
   submitLabel,
   onSubmit,
@@ -38,7 +40,7 @@ export function AuthSignupUserInfoForm({
         (acc, fieldKey) => {
           const config = fields[fieldKey];
           const fieldName = config.attr?.name ?? String(fieldKey);
-          acc[fieldName] = "";
+          acc[fieldName] = getSignupFieldDefaultValue(config);
           return acc;
         },
         {} as AuthSignupUserInfoValues,
@@ -51,6 +53,9 @@ export function AuthSignupUserInfoForm({
     defaultValues,
   });
 
+  const renderedFields =
+    visibleFields ?? (Object.keys(fields) as Array<keyof typeof fields>);
+
   const {
     register,
     helpers,
@@ -60,6 +65,7 @@ export function AuthSignupUserInfoForm({
     fields,
     form,
     onSubmit,
+    activeFields: renderedFields,
   });
 
   return (
@@ -69,17 +75,21 @@ export function AuthSignupUserInfoForm({
       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}
-        />
+        {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"

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/{components/auth → auth}/signup/markup/index.ts

@@ -2,3 +2,4 @@ export { AuthSignupUserInfoForm } from "./UserInfoForm";
 export { AuthSignupVerificationForm } from "./VerificationForm";
 export { AuthSignupAccountForm } from "./AccountForm";
 export { AuthSignupComplete } from "./Complete";
+export { AuthSignupTemplate } from "./Template";