@uniai-fe/uds-templates 0.4.32 → 0.5.0

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

@@ -0,0 +1,229 @@
+"use client";
+
+import clsx from "clsx";
+import { useMemo, useState } from "react";
+import type { SubmitEvent } from "react";
+import {
+  Button,
+  CheckboxField,
+  DrawerBody,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerRoot,
+  DrawerTitle,
+} from "@uniai-fe/uds-primitives";
+import type {
+  AuthSignupAgreementOption,
+  AuthSignupAgreementProps,
+} from "../types";
+import { useSignupAgreementForm } from "../hooks";
+import CheckAgreeIcon from "../img/check-agree.svg";
+import ChevronOpenDetailIcon from "../img/chevron-open-detail.svg";
+
+const AGREEMENT_DETAIL_FALLBACK = (
+  <>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <p>Nulla facilisi. Integer porta, nisl at volutpat posuere, erat arcu.</p>
+  </>
+);
+
+/**
+ * 회원가입 Step4; 약관 동의 폼
+ * @component
+ * @param {AuthSignupAgreementProps} props agreement props
+ * @param {AuthSignupAgreementOption[]} props.agreements 약관 목록
+ * @param {Record<string, boolean>} props.agreementState 약관 체크 상태
+ * @param {boolean} [props.isThirdPartyRequired] 제3자 제공 동의 필수 여부
+ * @param {string} [props.thirdPartyAgreementId] 제3자 제공 동의 id
+ * @param {(agreementId: string) => void} props.onToggleAgreement 단일 약관 토글
+ * @param {(options?: AuthSignupAgreementToggleAllOptions) => void} props.onToggleAll 전체 동의 토글
+ * @param {(agreementId: string) => void} [props.onOpenAgreementDetail] 약관 상세 열기
+ * @param {React.FormHTMLAttributes<HTMLFormElement>} [props.formAttr] form attr
+ * @param {import("react").ReactNode} [props.submitLabel] CTA 라벨
+ */
+export function AuthSignupAgreementForm({
+  agreements,
+  agreementState,
+  isThirdPartyRequired,
+  thirdPartyAgreementId,
+  onToggleAgreement,
+  onToggleAll,
+  onOpenAgreementDetail,
+  formAttr,
+  submitLabel,
+  submitDisabled,
+  onSubmit,
+}: AuthSignupAgreementProps) {
+  const [openedAgreementId, setOpenedAgreementId] = useState<string | null>(
+    null,
+  );
+
+  const { requiredAgreementIds, allRequiredChecked, disabled } =
+    useSignupAgreementForm({
+      agreements,
+      agreementState,
+      isThirdPartyRequired,
+      thirdPartyAgreementId,
+    });
+
+  const openedAgreement = useMemo(() => {
+    if (!openedAgreementId) {
+      return null;
+    }
+
+    return agreements.find(option => option.id === openedAgreementId) ?? null;
+  }, [agreements, openedAgreementId]);
+
+  const handleCloseDrawer = () => {
+    setOpenedAgreementId(null);
+  };
+
+  const handleOpenAgreementDetail = (agreementId: string) => {
+    onOpenAgreementDetail?.(agreementId);
+    setOpenedAgreementId(agreementId);
+  };
+
+  // React 19 submit 이벤트 계약과 동일하게 SubmitEvent로 맞춘다.
+  const handleSubmit = (event: SubmitEvent<HTMLFormElement>) => {
+    formAttr?.onSubmit?.(event);
+
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    event.preventDefault();
+    if (!disabled && !submitDisabled) {
+      onSubmit();
+    }
+  };
+
+  const renderAgreementLabel = (
+    option: AuthSignupAgreementOption,
+    required: boolean,
+  ) => (
+    <span className="auth-signup-agreement-label">
+      <span
+        className="auth-signup-agreement-badge"
+        data-required={required ? "true" : "false"}
+      >
+        [{required ? "필수" : "선택"}]
+      </span>
+      <span className="auth-signup-agreement-title">{option.label}</span>
+    </span>
+  );
+
+  return (
+    <form
+      className={clsx("auth-signup-form", "auth-signup-form-agreement")}
+      {...formAttr}
+      onSubmit={handleSubmit}
+    >
+      {agreements.length ? (
+        <section className="auth-signup-agreements" aria-label="약관 동의">
+          <CheckboxField
+            size="large"
+            checked={allRequiredChecked}
+            onCheckedChange={() => onToggleAll({ requiredOnly: true })}
+            fieldClassName="auth-signup-agreement-all-field"
+            labelWrapperClassName="auth-signup-agreement-all"
+            className="auth-signup-agreement-all-checkbox"
+            label={
+              <span className="auth-signup-agreement-all-label">
+                필수 약관에 모두 동의하기
+              </span>
+            }
+          />
+          <div className="auth-signup-agreements-list">
+            {agreements.map(option => {
+              const checked = Boolean(agreementState[option.id]);
+              const required = requiredAgreementIds.includes(option.id);
+
+              return (
+                <div
+                  className="auth-signup-agreement-row"
+                  key={option.id}
+                  data-required={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, required)}
+                  </button>
+                  <button
+                    type="button"
+                    className="auth-signup-agreement-detail"
+                    aria-label={`${option.label} 약관 상세 보기`}
+                    onClick={() => handleOpenAgreementDetail(option.id)}
+                  >
+                    <span aria-hidden="true">
+                      <ChevronOpenDetailIcon />
+                    </span>
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+      ) : null}
+      <Button.Default
+        type="submit"
+        fill="solid"
+        size="xlarge"
+        priority="primary"
+        block
+        disabled={disabled || Boolean(submitDisabled)}
+      >
+        {submitLabel ?? "다음"}
+      </Button.Default>
+      <DrawerRoot
+        open={Boolean(openedAgreement)}
+        onOpenChange={isOpen => {
+          if (!isOpen) {
+            handleCloseDrawer();
+          }
+        }}
+      >
+        <DrawerPortal>
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>{openedAgreement?.label ?? "약관 상세"}</DrawerTitle>
+            </DrawerHeader>
+            <DrawerBody className="auth-signup-agreement-drawer-body">
+              {openedAgreement?.description ?? AGREEMENT_DETAIL_FALLBACK}
+            </DrawerBody>
+            <DrawerFooter>
+              <Button.Default
+                type="button"
+                fill="solid"
+                size="medium"
+                priority="primary"
+                block
+                onClick={handleCloseDrawer}
+              >
+                닫기
+              </Button.Default>
+            </DrawerFooter>
+          </DrawerContent>
+        </DrawerPortal>
+      </DrawerRoot>
+    </form>
+  );
+}
+
+export default AuthSignupAgreementForm;

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

@@ -0,0 +1,122 @@
+"use client";
+
+import clsx from "clsx";
+import { useEffect } from "react";
+import { useFormContext } from "react-hook-form";
+import { Button, Form, Input } from "@uniai-fe/uds-primitives";
+import type { AuthSignupFarmCodeProps, AuthSignupFormValues } from "../types";
+import { useSignupFarmCodeForm } from "../hooks";
+import { getSignupFieldDefaultValue } from "../utils/getSignupFieldDefaultValue";
+
+/**
+ * 회원가입 Step3; 농장 식별번호 입력 폼
+ * @component
+ * @param {AuthSignupFarmCodeProps} props step props
+ * @param {AuthSignupFarmCodeFields} props.fields 필드 설정
+ * @param {React.FormHTMLAttributes<HTMLFormElement>} [props.formAttr] form attr
+ * @param {import("react").ReactNode} [props.submitLabel] CTA 라벨
+ * @param {AuthSignupFarmCodeProps["onSubmit"]} props.onSubmit 제출 핸들러
+ */
+export function AuthSignupFarmCodeForm({
+  fields,
+  formAttr,
+  submitLabel,
+  onSubmit,
+}: AuthSignupFarmCodeProps) {
+  const form = useFormContext<AuthSignupFormValues>();
+
+  useEffect(() => {
+    const config = fields.farmCode;
+    const fieldName = config.attr?.name ?? "farmCode";
+    const currentValue = form.getValues(
+      fieldName as keyof AuthSignupFormValues,
+    );
+
+    if (
+      (typeof currentValue !== "string" || currentValue.length === 0) &&
+      config.attr?.defaultValue === undefined
+    ) {
+      form.setValue(
+        fieldName as keyof AuthSignupFormValues,
+        getSignupFieldDefaultValue(config),
+      );
+    }
+  }, [fields, form]);
+
+  const {
+    register,
+    helpers,
+    disabled,
+    onSubmit: handleSubmit,
+  } = useSignupFarmCodeForm({
+    fields,
+    form,
+    onSubmit,
+  });
+
+  return (
+    <form
+      className={clsx("auth-signup-form", "auth-signup-form-farm-code")}
+      {...formAttr}
+      onSubmit={handleSubmit}
+    >
+      <div className="auth-signup-fields">
+        <Form.Field.Template
+          width={fields.farmCode.template?.width ?? "full"}
+          state={helpers.farmCode?.state === "error" ? "error" : undefined}
+          className={clsx(
+            "auth-signup-field",
+            "auth-signup-field-farm-code",
+            fields.farmCode.template?.className,
+            fields.farmCode.className,
+          )}
+          headerProps={{
+            ...fields.farmCode.template?.headerProps,
+            label:
+              fields.farmCode.template?.headerProps?.label ??
+              fields.farmCode.label ??
+              "농장 식별번호",
+          }}
+          footer={
+            fields.farmCode.template?.footer ??
+            helpers.farmCode?.text ??
+            fields.farmCode.helper
+          }
+          footerProps={{
+            ...fields.farmCode.template?.footerProps,
+            ...(helpers.farmCode?.state
+              ? { "data-state": helpers.farmCode.state }
+              : {}),
+          }}
+        >
+          <Input.Base
+            {...(fields.farmCode.props ?? {})}
+            placeholder={fields.farmCode.props?.placeholder ?? "6자리 숫자"}
+            register={register.farmCode}
+            state={helpers.farmCode?.state ?? fields.farmCode.props?.state}
+            block={
+              fields.farmCode.block ?? fields.farmCode.props?.block ?? true
+            }
+            inputMode={fields.farmCode.props?.inputMode ?? "numeric"}
+            maxLength={fields.farmCode.props?.maxLength ?? 6}
+            pattern={fields.farmCode.props?.pattern ?? "[0-9]*"}
+            priority={fields.farmCode.props?.priority ?? "secondary"}
+            size={fields.farmCode.props?.size ?? "large"}
+          />
+        </Form.Field.Template>
+      </div>
+      <Button.Default
+        type="submit"
+        fill="solid"
+        size="xlarge"
+        priority="primary"
+        block
+        disabled={disabled}
+      >
+        {submitLabel ?? "다음"}
+      </Button.Default>
+    </form>
+  );
+}
+
+export default AuthSignupFarmCodeForm;

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

@@ -3,21 +3,49 @@ import type { ReactNode } from "react";
 import { AuthContainer } from "../../common/container";
 import type {
   AuthSignupStepIndicatorItem,
+  AuthSignupTypeValue,
   AuthSignupTemplateProps,
 } from "../types";
+import { AuthSignupTypeSelectForm } from "./TypeSelectForm";
 import { AuthSignupUserInfoForm } from "./UserInfoForm";
+import { AuthSignupFarmCodeForm } from "./FarmCodeForm";
+import { AuthSignupAgreementForm } from "./AgreementForm";
 import { AuthSignupVerificationForm } from "./VerificationForm";
 import { AuthSignupAccountForm } from "./AccountForm";
 import { AuthSignupComplete } from "./Complete";
 import { AuthStageHeader } from "../../common/container/header";
 
-const DEFAULT_STEPS: AuthSignupStepIndicatorItem[] = [
+const LEGACY_DEFAULT_STEPS: AuthSignupStepIndicatorItem[] = [
   { id: "userInfo", label: "기본 정보" },
   { id: "verifyAgreement", label: "약관 · 인증" },
   { id: "generateAccount", label: "계정 생성" },
   { id: "complete", label: "완료" },
 ];
 
+const NEXT_DEFAULT_STEPS: AuthSignupStepIndicatorItem[] = [
+  { id: "typeSelect", label: "가입 유형" },
+  { id: "identity", label: "본인 확인" },
+  { id: "farmCode", label: "농장 코드" },
+  { id: "agreement", label: "약관 동의" },
+  { id: "account", label: "계정 생성" },
+  { id: "complete", label: "완료" },
+];
+
+const resolveDefaultSteps = (
+  isNextFlow: boolean,
+  signupType?: AuthSignupTypeValue,
+) => {
+  if (!isNextFlow) {
+    return LEGACY_DEFAULT_STEPS;
+  }
+
+  if (signupType === "regionManager") {
+    return NEXT_DEFAULT_STEPS.filter(item => item.id !== "farmCode");
+  }
+
+  return NEXT_DEFAULT_STEPS;
+};
+
 /**
  * 회원가입 템플릿; Step1~4 화면을 AuthContainer 위에서 전환한다.
  * @component
@@ -30,15 +58,26 @@ const DEFAULT_STEPS: AuthSignupStepIndicatorItem[] = [
 export function AuthSignupTemplate({
   className,
   header,
+  signupType,
   step,
   stepIndicator,
   footer,
+  typeSelect,
+  identity,
+  farmCode,
+  agreement,
   userInfo,
   verification,
   account,
   complete,
 }: AuthSignupTemplateProps) {
-  const steps = stepIndicator?.items ?? DEFAULT_STEPS;
+  const isNextFlow =
+    Boolean(typeSelect || identity || farmCode || agreement) ||
+    ["typeSelect", "identity", "farmCode", "agreement", "account"].includes(
+      step,
+    );
+  const steps =
+    stepIndicator?.items ?? resolveDefaultSteps(isNextFlow, signupType);
   const currentStep = stepIndicator?.current ?? step;
   const defaultStepIndex = Math.max(
     0,
@@ -72,12 +111,29 @@ export function AuthSignupTemplate({
 
   let content: ReactNode = null;
   switch (currentStep) {
+    case "typeSelect":
+      content = typeSelect ? (
+        <AuthSignupTypeSelectForm {...typeSelect} />
+      ) : null;
+      break;
+    case "identity":
+      content = <AuthSignupUserInfoForm {...(identity ?? userInfo)} />;
+      break;
+    case "farmCode":
+      content = farmCode ? <AuthSignupFarmCodeForm {...farmCode} /> : null;
+      break;
+    case "agreement":
+      content = agreement ? <AuthSignupAgreementForm {...agreement} /> : null;
+      break;
     case "userInfo":
       content = <AuthSignupUserInfoForm {...userInfo} />;
       break;
     case "verifyAgreement":
       content = <AuthSignupVerificationForm {...verification} />;
       break;
+    case "account":
+      content = <AuthSignupAccountForm {...account} />;
+      break;
     case "generateAccount":
       content = <AuthSignupAccountForm {...account} />;
       break;

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

@@ -0,0 +1,102 @@
+"use client";
+
+import clsx from "clsx";
+import { useFormContext } from "react-hook-form";
+import { Button } from "@uniai-fe/uds-primitives";
+import type { AuthSignupFormValues, AuthSignupTypeSelectProps } from "../types";
+import { useSignupTypeSelectForm } from "../hooks";
+import CheckIcon from "../img/select-user-type-default.svg";
+
+/**
+ * 회원가입 Step1; 가입 유형 선택 폼
+ * @component
+ * @param {AuthSignupTypeSelectProps} props step props
+ * @param {AuthSignupTypeSelectOption[]} props.options 선택 옵션 목록
+ * @param {React.FormHTMLAttributes<HTMLFormElement>} [props.formAttr] form attr
+ * @param {import("react").ReactNode} [props.submitLabel] CTA 라벨
+ * @param {AuthSignupTypeSelectProps["onSubmit"]} props.onSubmit 제출 핸들러
+ */
+export function AuthSignupTypeSelectForm({
+  options,
+  formAttr,
+  submitLabel,
+  onSubmit,
+}: AuthSignupTypeSelectProps) {
+  const form = useFormContext<AuthSignupFormValues>();
+  const {
+    selectedType,
+    onValueChange,
+    disabled,
+    onSubmit: handleSubmit,
+  } = useSignupTypeSelectForm({
+    form,
+    onSubmit,
+  });
+
+  return (
+    <form
+      className={clsx("auth-signup-form", "auth-signup-form-type-select")}
+      {...formAttr}
+      onSubmit={handleSubmit}
+    >
+      <div className="auth-signup-type-options" role="radiogroup">
+        {options.map(option => {
+          const isSelected = selectedType === option.id;
+
+          return (
+            <div className="auth-signup-type-option-group" key={option.id}>
+              <p className="auth-signup-type-question">{option.question}</p>
+              <Button.Default
+                className="auth-signup-type-option"
+                role="radio"
+                aria-checked={isSelected}
+                data-selected={isSelected ? "true" : "false"}
+                data-user-action={isSelected ? "hover" : undefined}
+                disabled={option.disabled}
+                fill="outlined"
+                size="xlarge"
+                priority={isSelected ? "primary" : "tertiary"}
+                block
+                left={
+                  // 단일 svg asset을 currentColor 기반으로 재사용해 선택 상태를 버튼 foreground와 동기화한다.
+                  <CheckIcon
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                  />
+                }
+                onClick={() => {
+                  if (!option.disabled) {
+                    onValueChange(option.id);
+                  }
+                }}
+              >
+                <span className="auth-signup-type-option-label">
+                  {option.label}
+                </span>
+              </Button.Default>
+              {option.description ? (
+                <p className="auth-signup-type-description">
+                  {option.description}
+                </p>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+      <Button.Default
+        type="submit"
+        fill="solid"
+        size="xlarge"
+        priority="primary"
+        block
+        disabled={disabled}
+      >
+        {submitLabel ?? "다음"}
+      </Button.Default>
+    </form>
+  );
+}
+
+export default AuthSignupTypeSelectForm;

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

@@ -71,6 +71,11 @@ export function AuthSignupUserInfoForm({
         {renderedFields.includes("name") ? (
           <Form.Field.Template
             width={fields.name.template?.width ?? "full"}
+            state={
+              (helpers.name?.state ?? fields.name.props?.state) === "error"
+                ? "error"
+                : undefined
+            }
             className={clsx(
               "auth-signup-field",
               "auth-signup-field-name",
@@ -109,6 +114,10 @@ export function AuthSignupUserInfoForm({
           <AuthCodePhoneTemplate
             templateProps={{
               width: fields.phone.template?.width ?? "full",
+              state:
+                (helpers.phone?.state ?? fields.phone.props?.state) === "error"
+                  ? "error"
+                  : undefined,
               className: clsx(
                 "auth-signup-field",
                 "auth-signup-field-phone",

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

@@ -53,6 +53,13 @@ const resolveCodeValue = (inputProps?: AuthCodeInputProps): string => {
   return "";
 };
 
+const AGREEMENT_DETAIL_FALLBACK = (
+  <>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <p>Nulla facilisi. Integer porta, nisl at volutpat posuere, erat arcu.</p>
+  </>
+);
+
 /**
  * 회원가입 Step2; 약관 동의 + 이메일 인증
  * @component
@@ -145,6 +152,7 @@ export function AuthSignupVerificationForm({
   const emailFooterProps = fields.email.template?.footerProps ?? {};
   const emailTemplateProps: AuthFormFieldTemplateProps = {
     width: fields.email.template?.width ?? "full",
+    state: helpers.email?.state === "error" ? "error" : undefined,
     className: clsx(
       "auth-signup-field",
       "auth-signup-field-email",
@@ -301,14 +309,20 @@ export function AuthSignupVerificationForm({
       </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>
+          {/* all-agree는 checkbox primitive를 유지하고 step3 카드 스타일만 signup에서 덮어쓴다. */}
+          <CheckboxField
+            size="large"
+            checked={allRequiredChecked}
+            onCheckedChange={() => onToggleAll({ requiredOnly: true })}
+            fieldClassName="auth-signup-agreement-all-field"
+            labelWrapperClassName="auth-signup-agreement-all"
+            className="auth-signup-agreement-all-checkbox"
+            label={
+              <span className="auth-signup-agreement-all-label">
+                필수 약관에 모두 동의하기
+              </span>
+            }
+          />
           <div className="auth-signup-agreements-list">
             {agreements.map(option => {
               const checked = Boolean(agreementState[option.id]);
@@ -320,7 +334,7 @@ export function AuthSignupVerificationForm({
                   data-required={option.required ? "true" : undefined}
                   data-checked={checked ? "true" : undefined}
                 >
-                  {/* 약관 토글은 Figma 아이콘 사양대로 커스텀 버튼으로 구성한다. */}
+                  {/* 하위 약관 row는 primitive checkbox가 아니라 커스텀 check icon을 유지한다. */}
                   <button
                     type="button"
                     className="auth-signup-agreement-toggle"
@@ -336,18 +350,16 @@ export function AuthSignupVerificationForm({
                     </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}
+                  <button
+                    type="button"
+                    className="auth-signup-agreement-detail"
+                    aria-label={`${option.label} 약관 상세 보기`}
+                    onClick={() => handleOpenAgreementDetail(option.id)}
+                  >
+                    <span aria-hidden="true">
+                      <ChevronOpenDetailIcon />
+                    </span>
+                  </button>
                 </div>
               );
             })}
@@ -378,11 +390,9 @@ export function AuthSignupVerificationForm({
             <DrawerHeader>
               <DrawerTitle>{openedAgreement?.label ?? "약관 상세"}</DrawerTitle>
             </DrawerHeader>
-            {openedAgreement?.description ? (
-              <DrawerBody className="auth-signup-agreement-drawer-body">
-                {openedAgreement.description}
-              </DrawerBody>
-            ) : null}
+            <DrawerBody className="auth-signup-agreement-drawer-body">
+              {openedAgreement?.description ?? AGREEMENT_DETAIL_FALLBACK}
+            </DrawerBody>
             <DrawerFooter>
               <Button.Default
                 type="button"