@uniai-fe/uds-templates 0.4.32 → 0.5.0

package/dist/styles.css

@@ -539,8 +539,10 @@
 }
 
 .uds-modal-container {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  flex: 1 1 auto;
+  min-height: 0;
   width: 100%;
 }
 
@@ -550,11 +552,22 @@
   margin: 0;
 }
 
+.uds-modal-header {
+  grid-row: 1;
+}
+
+.uds-modal-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;
 }
@@ -1216,6 +1229,62 @@
   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);
+}
+.auth-signup-type-option .button-left {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.auth-signup-type-option .button-left svg {
+  display: block;
+  width: 24px;
+  height: 24px;
+}
+.auth-signup-type-option .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;
@@ -1225,34 +1294,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;
 }
 
 .auth-signup-agreement-toggle {
@@ -1262,12 +1344,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 {
@@ -1287,18 +1370,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: 400;
   color: var(--color-primary-default);
 }
 .auth-signup-agreement-badge[data-required=false] {
@@ -1309,7 +1393,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 {
@@ -1330,11 +1416,12 @@
   justify-content: center;
   width: 20px;
   height: 20px;
+  flex-shrink: 0;
 }
 .auth-signup-agreement-detail svg {
   display: block;
-  width: 100%;
-  height: 100%;
+  width: 16px;
+  height: 16px;
 }
 
 .auth-signup-agreement-detail:disabled {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.4.32",
+  "version": "0.5.0",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

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

@@ -1,3 +1,6 @@
+export * from "./useSignupTypeSelectForm";
 export * from "./useSignupUserInfoForm";
+export * from "./useSignupFarmCodeForm";
+export * from "./useSignupAgreementForm";
 export * from "./useSignupVerificationForm";
 export * from "./useSignupAccountForm";

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

@@ -0,0 +1,48 @@
+"use client";
+
+import { useMemo } from "react";
+import type {
+  UseSignupAgreementFormOptions,
+  UseSignupAgreementFormReturn,
+} from "../types";
+
+const DEFAULT_THIRD_PARTY_AGREEMENT_ID = "thirdParty";
+
+/**
+ * 회원가입 Step4 훅; 약관 동의 상태 계산
+ * @hook
+ * @param {UseSignupAgreementFormOptions} options 훅 옵션
+ * @desc
+ * - 필수 약관 id 집합과 CTA 활성화 여부를 계산한다.
+ */
+export function useSignupAgreementForm({
+  agreements,
+  agreementState,
+  isThirdPartyRequired,
+  thirdPartyAgreementId = DEFAULT_THIRD_PARTY_AGREEMENT_ID,
+}: UseSignupAgreementFormOptions): UseSignupAgreementFormReturn {
+  const requiredAgreementIds = useMemo(() => {
+    return agreements
+      .filter(option => {
+        if (option.required) {
+          return true;
+        }
+
+        return isThirdPartyRequired && option.id === thirdPartyAgreementId;
+      })
+      .map(option => option.id);
+  }, [agreements, isThirdPartyRequired, thirdPartyAgreementId]);
+
+  const allRequiredChecked =
+    requiredAgreementIds.length > 0
+      ? requiredAgreementIds.every(id => Boolean(agreementState[id]))
+      : true;
+
+  return {
+    requiredAgreementIds,
+    allRequiredChecked,
+    disabled: !allRequiredChecked,
+  };
+}
+
+export default useSignupAgreementForm;

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

@@ -0,0 +1,87 @@
+"use client";
+
+import { useMemo } from "react";
+import { useWatch } from "react-hook-form";
+import type { ReactNode } from "react";
+import type {
+  AuthSignupFarmCodeFields,
+  AuthSignupFarmCodeValues,
+  AuthSignupFieldProps,
+  AuthSignupFormValues,
+  UseSignupFarmCodeFormOptions,
+  UseSignupFarmCodeFormReturn,
+} from "../types";
+
+/**
+ * 회원가입 Step3 훅; 농장 식별번호 입력
+ * @hook
+ * @template TFields
+ * @param {UseSignupFarmCodeFormOptions<TFields>} options 훅 옵션
+ * @desc
+ * - 1) form init → 2) register merge → 3) helper/state → 4) submit 순서
+ */
+export function useSignupFarmCodeForm<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupFarmCodeFields,
+>({
+  fields,
+  form,
+  onSubmit,
+}: UseSignupFarmCodeFormOptions<TFields>): UseSignupFarmCodeFormReturn<TFields> {
+  const values = useWatch({ control: form.control }) as
+    | AuthSignupFormValues
+    | undefined;
+
+  const register = useMemo(() => {
+    return (Object.keys(fields) as Array<keyof TFields>).reduce(
+      (acc, fieldKey) => {
+        const config = fields[fieldKey] as AuthSignupFieldProps;
+        const fieldName = config.attr?.name ?? String(fieldKey);
+        acc[fieldKey] = form.register(fieldName);
+        return acc;
+      },
+      {} as UseSignupFarmCodeFormReturn<TFields>["register"],
+    );
+  }, [fields, form]);
+
+  const helpers = useMemo(() => {
+    return (Object.keys(fields) as Array<keyof TFields>).reduce(
+      (acc, fieldKey) => {
+        const config = fields[fieldKey] as AuthSignupFieldProps;
+        const fieldName = config.attr?.name ?? String(fieldKey);
+        const state = form.getFieldState(fieldName);
+        acc[fieldKey] = {
+          text:
+            (state.error?.message as ReactNode | undefined) ?? config.helper,
+          state: state.invalid ? "error" : undefined,
+        };
+        return acc;
+      },
+      {} as UseSignupFarmCodeFormReturn<TFields>["helpers"],
+    );
+  }, [fields, form]);
+
+  const farmCodeFieldName =
+    fields.farmCode.attr?.name ??
+    ("farmCode" as keyof AuthSignupFarmCodeValues);
+  const farmCodeValue =
+    values?.[farmCodeFieldName as keyof AuthSignupFormValues] ?? "";
+  const normalizedFarmCode =
+    typeof farmCodeValue === "string"
+      ? farmCodeValue.replace(/\D/g, "")
+      : String(farmCodeValue ?? "").replace(/\D/g, "");
+
+  const disabled =
+    form.formState.isSubmitting || !/^\d{6}$/.test(normalizedFarmCode);
+
+  const onSubmitHandler = form.handleSubmit(onSubmit);
+
+  return {
+    register,
+    helpers,
+    disabled,
+    onSubmit: onSubmitHandler,
+  };
+}
+
+export default useSignupFarmCodeForm;

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

@@ -0,0 +1,56 @@
+"use client";
+
+import { useCallback, useEffect } from "react";
+import { useWatch } from "react-hook-form";
+import type {
+  AuthSignupFormValues,
+  AuthSignupTypeSelectValues,
+  AuthSignupTypeValue,
+  UseSignupTypeSelectFormOptions,
+  UseSignupTypeSelectFormReturn,
+} from "../types";
+
+/**
+ * 회원가입 Step1 훅; 가입 유형 선택
+ * @hook
+ * @param {UseSignupTypeSelectFormOptions} options 훅 옵션
+ * @desc
+ * - 1) form init → 2) register merge → 3) state/helper → 4) submit 순서
+ */
+export function useSignupTypeSelectForm({
+  form,
+  onSubmit,
+}: UseSignupTypeSelectFormOptions): UseSignupTypeSelectFormReturn {
+  useEffect(() => {
+    // 가입 유형은 커스텀 버튼으로 변경되므로 RHF에 명시적으로 등록한다.
+    form.register("signupType");
+  }, [form]);
+
+  const selectedType = useWatch({
+    control: form.control,
+    name: "signupType",
+  }) as AuthSignupTypeValue | undefined;
+
+  const handleValueChange = useCallback(
+    (value: AuthSignupTypeValue) => {
+      form.setValue("signupType", value, {
+        shouldDirty: true,
+        shouldTouch: true,
+        shouldValidate: true,
+      });
+    },
+    [form],
+  );
+
+  const disabled = form.formState.isSubmitting || !selectedType;
+  const onSubmitHandler = form.handleSubmit(onSubmit);
+
+  return {
+    selectedType,
+    onValueChange: handleValueChange,
+    disabled,
+    onSubmit: onSubmitHandler,
+  };
+}
+
+export default useSignupTypeSelectForm;

package/src/auth/signup/img/select-user-type-default.svg

@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M4 10.8995L9.65685 16.5563L19.5563 6.65683"
+    stroke="currentColor"
+    stroke-width="1.6"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/src/auth/signup/img/select-user-type-selected.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 10.8995L9.65685 16.5563L19.5563 6.65683" stroke="#1A6AFF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/auth/signup/index.ts

@@ -1,5 +1,8 @@
 import {
+  AuthSignupTypeSelectForm,
   AuthSignupUserInfoForm,
+  AuthSignupFarmCodeForm,
+  AuthSignupAgreementForm,
   AuthSignupVerificationForm,
   AuthSignupAccountForm,
   AuthSignupComplete,
@@ -12,8 +15,11 @@ import "./styles/signup.scss";
 export type * from "./types";
 export * from "./hooks";
 export {
+  AuthSignupTypeSelectForm,
   AuthSignupProvider,
   AuthSignupUserInfoForm,
+  AuthSignupFarmCodeForm,
+  AuthSignupAgreementForm,
   AuthSignupVerificationForm,
   AuthSignupAccountForm,
   AuthSignupComplete,
@@ -23,6 +29,10 @@ export {
 export const AuthSignup = {
   Provider: AuthSignupProvider,
   Template: AuthSignupTemplate,
+  StepTypeSelect: AuthSignupTypeSelectForm,
+  StepIdentity: AuthSignupUserInfoForm,
+  StepFarmCode: AuthSignupFarmCodeForm,
+  StepAgreement: AuthSignupAgreementForm,
   StepUserInfo: AuthSignupUserInfoForm,
   StepVerification: AuthSignupVerificationForm,
   StepAccount: AuthSignupAccountForm,

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

@@ -86,6 +86,7 @@ export function AuthSignupAccountForm({
       <div className="auth-signup-fields">
         <Form.Field.Template
           width={fields.accountId.template?.width ?? "full"}
+          state={helpers.accountId?.state === "error" ? "error" : undefined}
           className={clsx(
             "auth-signup-field",
             "auth-signup-field-account-id",