@uniai-fe/uds-templates 0.4.32 → 0.5.0

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;
   }
 }
 

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

@@ -4,8 +4,14 @@ import type { AuthPasswordRule } from "../../common/password/types";
 import type {
   AuthSignupFieldProps,
   AuthSignupFormValues,
+  AuthSignupTypeSelectValues,
+  AuthSignupTypeValue,
   AuthSignupUserInfoFields,
   AuthSignupUserInfoValues,
+  AuthSignupAgreementOption,
+  AuthSignupAgreementState,
+  AuthSignupFarmCodeFields,
+  AuthSignupFarmCodeValues,
   AuthSignupVerificationFields,
   AuthSignupVerificationValues,
   AuthSignupAccountFields,
@@ -17,6 +23,42 @@ import type {
   UseFormReturn,
 } from "react-hook-form";
 
+/**
+ * Step1 옵션.
+ */
+export interface UseSignupTypeSelectFormOptions {
+  /**
+   * RHF form 객체
+   */
+  form: UseFormReturn<AuthSignupFormValues>;
+  /**
+   * 제출 핸들러
+   */
+  onSubmit: SubmitHandler<AuthSignupTypeSelectValues>;
+}
+
+/**
+ * Step1 반환 값.
+ */
+export interface UseSignupTypeSelectFormReturn {
+  /**
+   * 선택된 가입 유형
+   */
+  selectedType?: AuthSignupTypeValue;
+  /**
+   * 유형 변경 핸들러
+   */
+  onValueChange: (value: AuthSignupTypeValue) => void;
+  /**
+   * disabled 상태
+   */
+  disabled: boolean;
+  /**
+   * 제출 핸들러
+   */
+  onSubmit: ReturnType<UseFormReturn<AuthSignupFormValues>["handleSubmit"]>;
+}
+
 /**
  * 공용 Helper 타입
  */
@@ -128,6 +170,96 @@ export interface UseSignupVerificationFormReturn<
   onSubmit: ReturnType<UseFormReturn<AuthSignupFormValues>["handleSubmit"]>;
 }
 
+/**
+ * Step3 옵션.
+ * @interface UseSignupFarmCodeFormOptions
+ * @template TFields extends Record<string, AuthSignupFieldProps>
+ */
+export interface UseSignupFarmCodeFormOptions<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupFarmCodeFields,
+> {
+  /**
+   * 필드 설정
+   */
+  fields: TFields;
+  /**
+   * RHF form 객체
+   */
+  form: UseFormReturn<AuthSignupFormValues>;
+  /**
+   * 제출 핸들러
+   */
+  onSubmit: SubmitHandler<AuthSignupFarmCodeValues>;
+}
+
+/**
+ * Step3 반환 값.
+ * @interface UseSignupFarmCodeFormReturn
+ * @template TFields extends Record<string, AuthSignupFieldProps>
+ */
+export interface UseSignupFarmCodeFormReturn<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupFarmCodeFields,
+> {
+  /**
+   * 필드별 register
+   */
+  register: Record<keyof TFields, UseFormRegisterReturn>;
+  /**
+   * helper 상태
+   */
+  helpers: AuthSignupHelperMap<TFields>;
+  /**
+   * disabled 상태
+   */
+  disabled: boolean;
+  /**
+   * 제출 핸들러
+   */
+  onSubmit: ReturnType<UseFormReturn<AuthSignupFormValues>["handleSubmit"]>;
+}
+
+/**
+ * Step4 옵션.
+ */
+export interface UseSignupAgreementFormOptions {
+  /**
+   * 약관 목록
+   */
+  agreements: AuthSignupAgreementOption[];
+  /**
+   * 약관 체크 상태
+   */
+  agreementState: AuthSignupAgreementState;
+  /**
+   * 제3자 제공 동의 필수 여부
+   */
+  isThirdPartyRequired?: boolean;
+  /**
+   * 제3자 제공 동의 id
+   */
+  thirdPartyAgreementId?: string;
+}
+
+/**
+ * Step4 반환 값.
+ */
+export interface UseSignupAgreementFormReturn {
+  /**
+   * 필수 약관 id 목록
+   */
+  requiredAgreementIds: string[];
+  /**
+   * 필수 약관 충족 여부
+   */
+  allRequiredChecked: boolean;
+  /**
+   * CTA disabled 상태
+   */
+  disabled: boolean;
+}
+
 /**
  * Step3 옵션.
  * @interface UseSignupAccountFormOptions

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

@@ -31,9 +31,84 @@ export type AuthSignupFieldProps<TProps extends InputProps = InputProps> = Omit<
 };
 
 /**
- * 회원가입 폼 전체 값; Step1/2/3 값을 모두 포함한다.
+ * 회원가입 유형 값.
  */
-export type AuthSignupFormValues = AuthSignupUserInfoValues &
+export type AuthSignupTypeValue = "farmMember" | "regionManager";
+
+/**
+ * 회원가입 유형 선택 값.
+ * @property {"farmMember" | "regionManager"} [signupType] 선택된 가입 유형
+ */
+export interface AuthSignupTypeSelectValues {
+  /**
+   * 선택된 가입 유형
+   */
+  signupType?: AuthSignupTypeValue;
+}
+
+/**
+ * 회원가입 유형 옵션.
+ * @property {"farmMember" | "regionManager"} id 옵션 식별자
+ * @property {React.ReactNode} question 질문 문구
+ * @property {React.ReactNode} label 선택 카드 라벨
+ * @property {React.ReactNode} [description] 보조 설명
+ * @property {boolean} [disabled] 비활성 여부
+ */
+export interface AuthSignupTypeSelectOption {
+  /**
+   * 옵션 식별자
+   */
+  id: AuthSignupTypeValue;
+  /**
+   * 질문 문구
+   */
+  question: ReactNode;
+  /**
+   * 선택 카드 라벨
+   */
+  label: ReactNode;
+  /**
+   * 보조 설명
+   */
+  description?: ReactNode;
+  /**
+   * 비활성 여부
+   */
+  disabled?: boolean;
+}
+
+/**
+ * 회원가입 유형 선택 Step props.
+ * @property {AuthSignupTypeSelectOption[]} options 선택 옵션 목록
+ * @property {React.ReactNode} [submitLabel] CTA 라벨
+ * @property {React.FormHTMLAttributes<HTMLFormElement>} [formAttr] form attr
+ * @property {SubmitHandler<AuthSignupTypeSelectValues>} onSubmit 제출 핸들러
+ */
+export interface AuthSignupTypeSelectProps {
+  /**
+   * 선택 옵션 목록
+   */
+  options: AuthSignupTypeSelectOption[];
+  /**
+   * CTA 라벨
+   */
+  submitLabel?: ReactNode;
+  /**
+   * form attr
+   */
+  formAttr?: React.FormHTMLAttributes<HTMLFormElement>;
+  /**
+   * 제출 핸들러
+   */
+  onSubmit: SubmitHandler<AuthSignupTypeSelectValues>;
+}
+
+/**
+ * 회원가입 폼 전체 값; 유형/본인확인/농장코드/계정 생성 값을 포함한다.
+ */
+export type AuthSignupFormValues = AuthSignupTypeSelectValues &
+  AuthSignupUserInfoValues &
+  AuthSignupFarmCodeValues &
   AuthSignupVerificationValues &
   AuthSignupAccountValues;
 
@@ -270,6 +345,112 @@ export interface AuthSignupVerificationProps {
   onSubmit: SubmitHandler<AuthSignupVerificationValues>;
 }
 
+/**
+ * 농장 식별번호 필드 정의.
+ * @property {AuthSignupFieldProps<InputProps>} farmCode 농장 식별번호 필드
+ */
+export interface AuthSignupFarmCodeFields extends Record<
+  string,
+  AuthSignupFieldProps
+> {
+  /**
+   * 농장 식별번호 필드
+   */
+  farmCode: AuthSignupFieldProps<InputProps>;
+}
+
+/**
+ * 농장 식별번호 값 집합.
+ */
+export type AuthSignupFarmCodeValues = Record<string, string>;
+
+/**
+ * 농장 식별번호 Step props.
+ * @property {AuthSignupFarmCodeFields} fields 필드 설정
+ * @property {React.ReactNode} [submitLabel] CTA 라벨
+ * @property {React.FormHTMLAttributes<HTMLFormElement>} [formAttr] form attr
+ * @property {SubmitHandler<AuthSignupFarmCodeValues>} onSubmit 제출 핸들러
+ */
+export interface AuthSignupFarmCodeProps {
+  /**
+   * 필드 설정
+   */
+  fields: AuthSignupFarmCodeFields;
+  /**
+   * CTA 라벨
+   */
+  submitLabel?: ReactNode;
+  /**
+   * form attr
+   */
+  formAttr?: React.FormHTMLAttributes<HTMLFormElement>;
+  /**
+   * 제출 핸들러
+   */
+  onSubmit: SubmitHandler<AuthSignupFarmCodeValues>;
+}
+
+/**
+ * 약관 동의 Step props.
+ * @property {AuthSignupAgreementOption[]} agreements 약관 옵션 목록
+ * @property {AuthSignupAgreementState} agreementState 약관 체크 상태
+ * @property {boolean} [isThirdPartyRequired] 제3자 제공 동의 필수 여부
+ * @property {string} [thirdPartyAgreementId] 제3자 제공 동의 option id
+ * @property {(agreementId: string) => void} onToggleAgreement 단일 약관 토글
+ * @property {(options?: AuthSignupAgreementToggleAllOptions) => void} onToggleAll 전체 동의 토글
+ * @property {(agreementId: string) => void} [onOpenAgreementDetail] 약관 상세 열기
+ * @property {React.ReactNode} [submitLabel] CTA 라벨
+ * @property {boolean} [submitDisabled] CTA disabled override
+ * @property {React.FormHTMLAttributes<HTMLFormElement>} [formAttr] form attr
+ * @property {() => void} onSubmit 제출 핸들러
+ */
+export interface AuthSignupAgreementProps {
+  /**
+   * 약관 옵션 목록
+   */
+  agreements: AuthSignupAgreementOption[];
+  /**
+   * 약관 체크 상태
+   */
+  agreementState: AuthSignupAgreementState;
+  /**
+   * 제3자 제공 동의 필수 여부
+   */
+  isThirdPartyRequired?: boolean;
+  /**
+   * 제3자 제공 동의 option id
+   */
+  thirdPartyAgreementId?: string;
+  /**
+   * 단일 약관 토글
+   */
+  onToggleAgreement: (agreementId: string) => void;
+  /**
+   * 전체 동의 토글
+   */
+  onToggleAll: (options?: AuthSignupAgreementToggleAllOptions) => void;
+  /**
+   * 약관 상세 열기
+   */
+  onOpenAgreementDetail?: (agreementId: string) => void;
+  /**
+   * CTA 라벨
+   */
+  submitLabel?: ReactNode;
+  /**
+   * CTA disabled override
+   */
+  submitDisabled?: boolean;
+  /**
+   * form attr
+   */
+  formAttr?: React.FormHTMLAttributes<HTMLFormElement>;
+  /**
+   * 제출 핸들러
+   */
+  onSubmit: () => void;
+}
+
 /**
  * 계정 정보(아이디/비밀번호) 필드 정의.
  * @interface AuthSignupAccountFields
@@ -367,9 +548,14 @@ export interface AuthSignupCompleteProps {
  * Step 식별자.
  */
 export type AuthSignupStepId =
+  | "typeSelect"
+  | "identity"
+  | "farmCode"
+  | "agreement"
   | "userInfo"
   | "verifyAgreement"
   | "generateAccount"
+  | "account"
   | "complete";
 
 /**
@@ -440,11 +626,27 @@ export interface AuthSignupStepIndicatorProps {
  */
 export interface AuthSignupFlowProps {
   /**
-   * 사용자 정보 Step
+   * 가입 유형 선택 Step
+   */
+  typeSelect?: AuthSignupTypeSelectProps;
+  /**
+   * 본인 확인 Step
+   */
+  identity?: AuthSignupUserInfoProps;
+  /**
+   * 농장 식별번호 Step
+   */
+  farmCode?: AuthSignupFarmCodeProps;
+  /**
+   * 약관 동의 Step
+   */
+  agreement?: AuthSignupAgreementProps;
+  /**
+   * 사용자 정보 Step(legacy)
    */
   userInfo: AuthSignupUserInfoProps;
   /**
-   * 인증 Step
+   * 인증 Step(legacy)
    */
   verification: AuthSignupVerificationProps;
   /**
@@ -465,6 +667,10 @@ export interface AuthSignupTemplateProps extends AuthSignupFlowProps {
    * 래퍼 className
    */
   className?: string;
+  /**
+   * 현재 가입 유형
+   */
+  signupType?: AuthSignupTypeValue;
   /**
    * 헤더 구성
    */

package/src/modal/styles/container.scss

@@ -1,6 +1,9 @@
 .uds-modal-container {
-  display: flex;
-  flex-direction: column;
+  // 변경: modal surface의 max-height 안에서 header/body/footer 3행 계약을 고정한다.
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  flex: 1 1 auto;
+  min-height: 0;
   width: 100%;
 }
 
@@ -9,11 +12,23 @@
   padding: 0;
   margin: 0;
 }
+
+.uds-modal-header {
+  grid-row: 1;
+}
+
+.uds-modal-body {
+  // 변경: body만 남는 높이를 차지하고 내부 스크롤을 담당한다.
+  grid-row: 2;
+  min-height: 0;
+  overflow: auto;
+}
 .uds-modal-header-close-button {
   font-size: 0;
 }
 
 .uds-modal-footer {
+  grid-row: 3;
   padding: 0;
   border-top: none;
 }