@uniai-fe/uds-templates 0.4.33 → 0.5.1

package/README.md

@@ -98,6 +98,14 @@ Next.js 서비스에서 primitives와 동일한 방식으로 **Raw TypeScript**
   - `MobileFrameProps`
   - `PageFrameDesktopNavProps`
   - `SitemapDataType`
+- `/edge-case`
+  - `EdgeCase`
+  - `EdgeCase.Empty`
+  - `EdgeCase.Loading`
+  - `EdgeCase.NotFound`
+  - `EdgeCaseEmptyProps`
+  - `EdgeCaseLoadingProps`
+  - `EdgeCaseNotFoundProps`
 
 ## 현재 제공 템플릿/모듈
 
@@ -126,6 +134,9 @@ Next.js 서비스에서 primitives와 동일한 방식으로 **Raw TypeScript**
   - finder/viewer/video/pagination 조합과 rtc/company-list API helper를 제공한다.
 - `/page-frame/**`
   - mobile/desktop private route frame, nav/header/popup 조합을 제공한다.
+- `/edge-case/**`
+  - empty/loading/not-found 화면 상태 템플릿을 제공한다.
+  - primitives `Alternate.Layout.*`를 조합하며, 실제 routing/history 판정은 서비스 앱이 소유한다.
 
 각 템플릿의 상세한 범위와 의사결정은 `CONTEXT-*.md` 문서에서 관리합니다.
 
@@ -225,6 +236,7 @@ export default function LoginPage() {
 
 - Modal CSS 변수 네임스페이스를 `--modal-*`, `--modal-alert-*`, `--modal-dialog-*` 세 축으로 통일했다. 기존 `--dialog-*` 이름을 사용하지 말고, Auth 템플릿이 Alert을 호출할 때에는 반드시 `Modal.Alert` 팩토리를 통해 렌더링한다.
 - Auth(회원가입/아이디 찾기/비밀번호 찾기) 템플릿은 이메일 인증 타이머 5분, alert 문구, readonly 이메일 필드, 완료 단계 헤더 제거 등 최신 플로우를 반영했다. 모듈에서 `window.alert`/`window.confirm`을 호출하지 않고, 서비스 앱이 Modal helper를 주입하는 구조를 README와 `CONTEXT-AUTH*.md`에 명시했다.
+- Edge Case 템플릿은 `EdgeCase.Empty`, `EdgeCase.Loading`, `EdgeCase.NotFound` namespace로 공개한다. `NotFound`는 `onPrev` 또는 `fallbackHref="/"`를 연결하지만 `router.back()`이나 service-origin 판정은 실행하지 않는다.
 
 ### 토큰 스코프 & ThemeProvider
 

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 {
@@ -1849,3 +1923,52 @@
 .page-frame-inquiry-button {
   margin-top: auto;
 }
+
+.edge-case {
+  width: 100%;
+}
+
+.edge-case:where([data-edge-case=not-found]) {
+  --alternate-layout-gap: var(--spacing-gap-3);
+  --alternate-layout-figure-size: 128px;
+  --alternate-layout-title-color: var(--color-label-standard);
+  --alternate-layout-title-font-size: var(--font-heading-xsmall-size);
+  --alternate-layout-title-line-height: var(--font-heading-xsmall-line-height);
+  --alternate-layout-title-letter-spacing: var(
+    --font-heading-xsmall-letter-spacing
+  );
+  --alternate-layout-title-font-weight: var(--font-heading-xsmall-weight);
+  --alternate-layout-contents-font-size: var(--font-body-xsmall-size);
+  --alternate-layout-contents-line-height: var(--font-body-xsmall-line-height);
+  --alternate-layout-contents-letter-spacing: var(
+    --font-body-xsmall-letter-spacing
+  );
+  --alternate-layout-contents-font-weight: var(--font-body-xsmall-weight);
+  --button-default-font-label-medium-size: var(--font-label-small-size);
+  --button-default-font-label-medium-line-height: var(
+    --font-label-small-line-height
+  );
+  --button-default-font-label-medium-letter-spacing: var(
+    --font-label-small-letter-spacing
+  );
+  --button-default-font-label-medium-weight: var(--font-label-small-weight);
+  --button-default-font-weight: var(--font-label-small-weight);
+  min-height: 0;
+  padding: calc(var(--spacing-padding-11) + var(--spacing-padding-7)) var(--spacing-padding-8);
+  border: 1px solid var(--color-border-assistive);
+  border-radius: var(--theme-radius-large-1);
+  background: var(--color-common-100);
+  justify-content: flex-start;
+}
+.edge-case:where([data-edge-case=not-found]) :where(.alternate-layout-figure) {
+  margin-bottom: var(--spacing-gap-3);
+}
+.edge-case:where([data-edge-case=not-found]) :where(.alternate-layout-contents) {
+  white-space: nowrap;
+}
+.edge-case:where([data-edge-case=not-found]) :where(.alternate-layout-contents) :where(p + p) {
+  margin-top: var(--spacing-gap-3);
+}
+.edge-case:where([data-edge-case=not-found]) :where(.alternate-layout-button) {
+  margin-top: var(--spacing-gap-3);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.4.33",
+  "version": "0.5.1",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -70,7 +70,7 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
-    "@tanstack/react-query": "^5.97.0",
+    "@tanstack/react-query": "^5.99.0",
     "@types/node": "^24.10.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
@@ -88,9 +88,9 @@
     "eslint": "^9.39.2",
     "jotai": "^2.19.1",
     "next": "^15.5.11",
-    "prettier": "^3.8.2",
+    "prettier": "^3.8.3",
     "react-hook-form": "^7.72.1",
     "sass": "^1.99.0",
-    "typescript": "~5.9.3"
+    "typescript": "5.9.3"
   }
 }

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",