@uniai-fe/uds-templates 0.4.33 → 0.5.0

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"

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

@@ -1,4 +1,7 @@
+export { AuthSignupTypeSelectForm } from "./TypeSelectForm";
 export { AuthSignupUserInfoForm } from "./UserInfoForm";
+export { AuthSignupFarmCodeForm } from "./FarmCodeForm";
+export { AuthSignupAgreementForm } from "./AgreementForm";
 export { AuthSignupVerificationForm } from "./VerificationForm";
 export { AuthSignupAccountForm } from "./AccountForm";
 export { AuthSignupComplete } from "./Complete";

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

@@ -11,6 +11,64 @@
   gap: var(--spacing-padding-5);
 }
 
+.auth-signup-type-options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-6);
+}
+
+.auth-signup-type-option-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-3);
+}
+
+.auth-signup-type-question {
+  margin: 0;
+  color: var(--color-label-standard);
+  font-size: var(--font-heading-xxsmall-size);
+  line-height: 1.4;
+}
+
+.auth-signup-type-option {
+  display: flex;
+  justify-content: flex-start;
+  text-align: left;
+
+  --button-default-padding-inline-large: 16px;
+  --button-default-tertiary-outline-foreground: var(--color-label-alternative);
+
+  .button-left {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .button-left svg {
+    display: block;
+    width: 24px;
+    height: 24px;
+  }
+  .button-label {
+    flex: 1;
+    text-align: left;
+  }
+}
+
+.auth-signup-type-option-label {
+  font-size: var(--font-body-large-size);
+  line-height: 1.5;
+}
+
+.auth-signup-type-description {
+  margin: 0;
+  color: var(--color-label-assistive);
+  font-size: var(--font-body-xxsmall-size);
+  line-height: 1.5;
+}
+
 .auth-signup-verification {
   display: flex;
   flex-direction: column;
@@ -21,34 +79,47 @@
 .auth-signup-agreements {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-padding-4);
+  gap: 12px;
+}
+
+.auth-signup-agreement-all-field {
+  gap: 0;
 }
 
 .auth-signup-agreement-all {
-  height: var(--theme-size-medium-3);
-  display: flex;
-  align-items: center;
+  width: 100%;
+  min-height: 56px;
   background: var(--color-bg-alternative-cool-gray, #f2f2f3);
-  border-radius: var(--theme-radius-large-2, 16px);
-  border-radius: var(--theme-radius-medium-3, 8px);
-  padding: 0 var(--spacing-padding-5);
+  border-radius: 12px;
+  padding: 8px 12px;
+  gap: 6px;
+  align-items: center;
+}
+
+.auth-signup-agreement-all-checkbox {
+  flex-shrink: 0;
+}
+
+.auth-signup-agreement-all-label {
+  color: var(--color-label-standard);
+  font-size: var(--font-body-large-size);
+  font-weight: 500;
+  line-height: 1.5;
 }
 
 .auth-signup-agreements-list {
   width: 100%;
-  background: var(--color-common-100);
-  border-radius: var(--theme-radius-medium-3, 8px);
-  padding: var(--spacing-padding-3);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-padding-3);
+  gap: 12px;
+  padding: 4px 12px;
 }
 
 .auth-signup-agreement-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-padding-3);
+  gap: 8px;
 }
 
 // 약관 토글 행은 SVG 아이콘/텍스트를 하나의 버튼으로 묶어 디자인 명세와 일치시킨다.
@@ -59,12 +130,13 @@
   margin: 0;
   display: flex;
   align-items: center;
-  gap: var(--spacing-padding-3);
+  gap: 8px;
   cursor: pointer;
   flex: 1;
   text-align: left;
   flex-wrap: nowrap;
   font-size: 14px;
+  min-width: 0;
 }
 
 .auth-signup-agreement-icon {
@@ -86,19 +158,19 @@
 
 .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);
+  display: flex;
+  gap: 0;
   align-items: baseline;
   flex-wrap: nowrap;
+  min-width: 0;
 }
 
 .auth-signup-agreement-badge {
   font-size: 14px;
-  // font-weight: 600;
+  font-weight: 400;
   color: var(--color-primary-default);
 
   &[data-required="false"] {
@@ -110,7 +182,9 @@
   font-size: 14px;
   color: var(--color-label-standard);
   font-weight: 400;
-  line-height: 1.4;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .auth-signup-agreement-description {
@@ -131,11 +205,12 @@
   justify-content: center;
   width: 20px;
   height: 20px;
+  flex-shrink: 0;
 
   svg {
     display: block;
-    width: 100%;
-    height: 100%;
+    width: 16px;
+    height: 16px;
   }
 }