@uniai-fe/uds-templates 0.4.33 → 0.5.0

package/dist/styles.css

@@ -1229,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;
@@ -1238,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 {
@@ -1275,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 {
@@ -1300,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] {
@@ -1322,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 {
@@ -1343,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.33",
+  "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",

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;