npm - @uniai-fe/uds-templates - Versions diffs - 0.1.2 → 0.1.4 - Mend

@uniai-fe/uds-templates 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/README.md CHANGED Viewed

@@ -136,8 +136,9 @@ export default function LoginPage() {
 ui-legacy에서 사용하던 모달 스택/옵션을 templates 레이어로 옮겨왔습니다. 핵심 흐름은 다음과 같습니다.
 1. **Provider 1회 장착** — 서비스 레이아웃에서 `<Modal.Provider />`를 렌더합니다.
-2. **훅 사용** — `const { newModal, closeModal } = Modal.useModal();`
-3. **템플릿 팩토리** — `Modal.Alert`, `Modal.Dialog`이 `ModalState` 객체를 반환하므로 `newModal(...)`에 그대로 전달합니다.
+2. **Route Reset 장착** — `<Modal.RouteReset />`을 Provider와 같은 레벨에서 렌더해 경로 변경 시 스택을 초기화합니다.
+3. **훅 사용** — `const { newModal, closeModal } = Modal.useModal();`
+4. **템플릿 팩토리** — `Modal.Alert`, `Modal.Dialog`이 `ModalState` 객체를 반환하므로 `newModal(...)`에 그대로 전달합니다.
 ```tsx
 // app/layout.tsx
@@ -152,8 +153,11 @@ export default function RootLayout({
   return (
     <html lang="ko">
       <body>
-        {children}
-        <Modal.Provider />
+        <>
+          {children}
+          <Modal.Provider />
+          <Modal.RouteReset />
+        </>
       </body>
     </html>
   );
@@ -202,6 +206,7 @@ export function ExampleActions() {
 ```
 - footer 버튼은 ui-legacy와 동일하게 `stackKey`, `role`, `defaultOptions/linkOptions` 구조로 관리하며, Alert(Text)/Dialog(Solid) 규격은 templates 내부에서 보장합니다.
+- Route Reset을 누락하면 이전 라우트의 모달 스택이 그대로 남으므로, layout 수준에서 Provider와 함께 반드시 렌더합니다.
 - 세부 가드레일·확장 기록은 `CONTEXT-MODAL.md`를 참고하고, 새 템플릿을 추가할 때 해당 문서를 선행 업데이트합니다.
 ## Scripts

package/package.json CHANGED Viewed

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

package/src/auth/common/find/hooks/useFindAccountForm.ts CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import { useMemo } from "react";
 import { useWatch, type Path } from "react-hook-form";
 import type React from "react";

package/src/auth/common/find/markup/CodeStep.tsx CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import clsx from "clsx";
 import { useMemo } from "react";
 import type { MouseEvent } from "react";

package/src/auth/common/find/markup/InfoStep.tsx CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import clsx from "clsx";
 import { useMemo } from "react";
 import { useForm } from "react-hook-form";

package/src/auth/common/password/hooks/useCheckPassword.ts CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import { useCallback, useEffect, useMemo } from "react";
 import type { ReactNode } from "react";
 import { useWatch } from "react-hook-form";

package/src/auth/common/password/markup/PasswordSetField.tsx CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import "../styles/password-set-field.scss";
 import { useMemo } from "react";

package/src/auth/find-id/markup/StepComplete.tsx CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import clsx from "clsx";
 import type { FindAccountIdCompleteProps } from "../types";
 import AuthCompleteTemplate from "../../common/complete/Template";
@@ -5,7 +7,7 @@ import AuthCompleteTemplate from "../../common/complete/Template";
 const DEFAULT_TITLE = "아이디 찾기 완료";
 const DEFAULT_ID_LABEL = "아이디";
 const DEFAULT_REGISTERED_LABEL = "가입일";
-const DEFAULT_DESCRIPTION = "입력하신 정보로 계정을 찾았어요.";
+const DEFAULT_DESCRIPTION = "로그인 페이지로 이동하여 로그인합니다.";
 const DEFAULT_CTA_LABEL = "로그인하기";
 /**

package/src/auth/find-id/markup/StepIdentify.tsx CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import type { ReactNode } from "react";
 import FindAccountInfoStep from "../../common/find/markup/InfoStep";
 import type { FindAccountInfoStepProps } from "../../common/find/types";

package/src/auth/find-id/markup/StepVerifyCode.tsx CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import FindAccountCodeStep from "../../common/find/markup/CodeStep";
 import type { FindAccountCodeStepProps } from "../../common/find/types";

package/src/auth/find-password/markup/StepResetPassword.tsx CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import clsx from "clsx";
 import { useMemo } from "react";
 import { FormProvider, useForm } from "react-hook-form";

package/src/auth/login/hooks/useAuthLoginForm.ts CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import { useMemo } from "react";
 import { useWatch } from "react-hook-form";
 import type { ReactNode } from "react";

package/src/auth/login/markup/FormField.tsx CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import { useMemo } from "react";
 import type { ReactNode } from "react";
 import {

package/src/auth/signup/hooks/useSignupAccountForm.ts CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import { useMemo } from "react";
 import { useWatch } from "react-hook-form";
 import type { ReactNode } from "react";

package/src/auth/signup/hooks/useSignupUserInfoForm.ts CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import { useMemo } from "react";
 import { useWatch } from "react-hook-form";
 import type { ReactNode } from "react";

package/src/auth/signup/hooks/useSignupVerificationForm.ts CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import { useMemo } from "react";
 import { useWatch } from "react-hook-form";
 import type { ReactNode } from "react";

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

@@ -1,3 +1,5 @@
+"use client";
 import { useMemo } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { Button, Input, type InputProps } from "@uniai-fe/uds-primitives";

package/src/auth/signup/markup/UserInfoForm.tsx CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import { useMemo } from "react";
 import { useForm } from "react-hook-form";
 import {

package/src/auth/signup/markup/VerificationForm.tsx CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import { useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import {

package/src/modal/core/components/Root.tsx CHANGED Viewed

@@ -7,7 +7,7 @@ import clsx from "clsx";
 import { useModal } from "../hooks/useModal";
 import { ModalContainer } from "./Container";
-import type { ModalProps, ModalShowState, ModalState } from "../../types";
+import type { ModalShowState, ModalState } from "../../types";
 type ModalRootProps = ModalState & {
   index: number;

package/src/modal/core/components/RouteReset.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+"use client";
+import { useEffect } from "react";
+import { usePathname } from "next/navigation";
+import { useSetAtom } from "jotai";
+import { modalStackAtom } from "../jotai/atoms";
+/**
+ * Modal Route Reset; 라우트 변경 시 모달 스택 초기화
+ * @component
+ * @desc
+ * - Next.js pathname 변경을 감지해 `modalStackAtom`을 빈 배열로 되돌린다.
+ * - 최상위 layout에서 `<Modal.RouteReset />`을 Provider와 함께 렌더링해야 한다.
+ */
+export function ModalRouteReset() {
+  const pathname = usePathname();
+  const resetStack = useSetAtom(modalStackAtom);
+  useEffect(() => {
+    resetStack([]);
+  }, [pathname, resetStack]);
+  return null;
+}

package/src/modal/index.tsx CHANGED Viewed

@@ -1,16 +1,26 @@
 import "./index.scss";
 import { ModalProvider } from "./core/components/Provider";
+import { ModalRouteReset } from "./core/components/RouteReset";
 import { useModal } from "./core/hooks/useModal";
 import { createAlertModal } from "./templates/Alert";
 import { createDialogModal } from "./templates/Dialog";
+import { modalStackAtom } from "./core/jotai/atoms";
 export const Modal = {
   Provider: ModalProvider,
+  RouteReset: ModalRouteReset,
   useModal,
   Alert: createAlertModal,
   Dialog: createDialogModal,
 };
-export { ModalProvider, useModal, createAlertModal, createDialogModal };
+export {
+  ModalProvider,
+  ModalRouteReset,
+  useModal,
+  createAlertModal,
+  createDialogModal,
+  modalStackAtom,
+};
 export type * from "./types";