[Refactor] Observer pattern을 통한 전역 모달 관리

package.json

@@ -29,6 +29,7 @@
     "@vanilla-extract/recipes": "^0.5.7",
     "@vanilla-extract/vite-plugin": "^5.1.4",
     "axios": "^1.13.2",
+    "es-hangul": "^2.3.8",
     "eslint-import-resolver-typescript": "^4.4.4",
     "framer-motion": "^12.27.1",
     "react": "^19.2.0",

src/app/providers/modal-provider.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { useLocation } from "react-router-dom";
+
+import { modalStore } from "@/shared/model/store";
+
+import { Modal } from "../../shared/ui/modal/modal";
+
+interface ModalItem {
+  id: string;
+  content: ReactNode;
+  autoPlay?: number;
+}
+
+export const ModalProvider = () => {
+  const { pathname } = useLocation();
+  const [modals, setModals] = useState<ModalItem[]>([]);
+
+  useEffect(() => {
+    const unsubscribe = modalStore.subscribe(setModals);
+    return unsubscribe;
+  }, []);
+
+  useEffect(() => {
+    modalStore.reset();
+  }, [pathname]);
+
+  return (
+    <>
+      {modals.map((modal) => {
+        return (
+          <Modal
+            key={modal.id}
+            isOpen={true}
+            autoPlay={modal.autoPlay}
+            onClose={() => modalStore.close(modal.id)}
+          >
+            {modal.content}
+          </Modal>
+        );
+      })}
+    </>
+  );
+};

src/app/routes/root-layout.tsx

@@ -2,11 +2,13 @@ import { Outlet } from "react-router-dom";
 
 import { Header } from "@widgets/index";
 
+import { ModalProvider } from "../providers/modal-provider";
 import { StoreResetListener } from "../providers/store-reset-listener";
 
 export const RootLayout = () => {
   return (
     <>
+      <ModalProvider />
       <StoreResetListener />
       <Header />
       <main>

src/features/experience-detail/model/use-leave-confirm.ts → src/features/experience-detail/model/use-leave-confirm.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useCallback, useRef } from "react";
+import { useEffect, useCallback } from "react";
 import { useBlocker } from "react-router-dom";
 
-import { useModal } from "@/shared/ui/modal/use-modal";
+import { modalStore } from "@/shared/model/store";
+import { ModalBasic } from "@/shared/ui";
 
 import {
   initialDraft,
@@ -23,12 +24,12 @@ const isDraftDirty = (draft: ExperienceUpsertBody): boolean => {
   );
 };
 
+const LEAVE_MODAL_ID = "leave-confirm-modal";
+
 export const useLeaveConfirm = () => {
   const mode = useExperienceDetailStore((s) => s.mode);
   const draft = useExperienceDetailStore((s) => s.draft);
 
-  const { isOpen, openModal, closeModal } = useModal();
-
   const shouldBlock =
     (mode === "create" || mode === "edit") && isDraftDirty(draft);
 
@@ -46,17 +47,37 @@ export const useLeaveConfirm = () => {
     return shouldBlockNow && !isSubmitting && !isTransitioning;
   });
 
-  const prevBlockerStateRef = useRef(blocker.state);
+  const confirmLeave = useCallback(() => {
+    if (blocker.state === "blocked") {
+      blocker.proceed();
+    }
+    modalStore.close(LEAVE_MODAL_ID);
+  }, [blocker]);
 
-  useEffect(() => {
-    const wasBlocked = prevBlockerStateRef.current === "blocked";
-    const nowBlocked = blocker.state === "blocked";
-    prevBlockerStateRef.current = blocker.state;
+  const cancelLeave = useCallback(() => {
+    if (blocker.state === "blocked") {
+      blocker.reset();
+    }
+    modalStore.close(LEAVE_MODAL_ID);
+  }, [blocker]);
 
-    if (nowBlocked && !wasBlocked && !isOpen) {
-      openModal();
+  useEffect(() => {
+    if (blocker.state === "blocked") {
+      modalStore.open(
+        <ModalBasic
+          title={`작성중인 내용이 있습니다.\n정말 나가시겠습니까?`}
+          subTitle="저장하지 않으면 내용이 사라져요."
+          closeText="이어서 작성"
+          confirmText="나가기"
+          onClose={cancelLeave}
+          onConfirm={confirmLeave}
+        />,
+        0,
+        undefined,
+        LEAVE_MODAL_ID
+      );
     }
-  }, [blocker.state, isOpen, openModal]);
+  }, [blocker.state, cancelLeave, confirmLeave]);
 
   useEffect(() => {
     const handleBeforeUnload = (e: BeforeUnloadEvent) => {
@@ -70,23 +91,5 @@ export const useLeaveConfirm = () => {
     return () => window.removeEventListener("beforeunload", handleBeforeUnload);
   }, [shouldBlock]);
 
-  const confirmLeave = useCallback(() => {
-    if (blocker.state === "blocked") {
-      blocker.proceed();
-    }
-    closeModal();
-  }, [blocker, closeModal]);
-
-  const cancelLeave = useCallback(() => {
-    if (blocker.state === "blocked") {
-      blocker.reset();
-    }
-    closeModal();
-  }, [blocker, closeModal]);
-
-  return {
-    isOpen,
-    confirmLeave,
-    cancelLeave,
-  };
+  return {};
 };

src/features/experience-detail/ui/experience-viewer/experience-viewer.tsx

@@ -1,8 +1,8 @@
 import { EXPERIENCE_TYPE } from "@/shared/config/experience";
 import { parseYMD } from "@/shared/lib/format-date";
+import { modalStore } from "@/shared/model/store";
 import { ModalBasic, Tooltip } from "@/shared/ui";
 import { Button } from "@/shared/ui/button/button";
-import { useModal } from "@/shared/ui/modal/use-modal";
 import { Tag } from "@/shared/ui/tag/tag";
 import { Textfield } from "@/shared/ui/textfield/textfield";
 import { HELP_TOOLTIP_CONTENT } from "@/shared/ui/tooltip/tooltip.content";
@@ -24,9 +24,6 @@ const ExperienceViewer = () => {
   const { showEditDelete, onClickEdit, onClickDelete, onToggleDefault } =
     useExperienceHeaderActions();
 
-  const { isOpen: isDeleteModalOpen, handleModal: toggleDeleteModal } =
-    useModal();
-
   const startDate = current?.startAt ? parseYMD(current.startAt) : null;
   const endDate = current?.endAt ? parseYMD(current.endAt) : null;
 
@@ -42,6 +39,22 @@ const ExperienceViewer = () => {
 
   const typeLabel = current.type ? EXPERIENCE_TYPE[current.type] : "미지정";
 
+  const handleOpenDeleteModal = () => {
+    modalStore.open(
+      <ModalBasic
+        title="이 경험을 삭제하시겠습니까?"
+        subTitle="작성한 내용은 즉시 제거되며, 복구할 수 없습니다."
+        closeText="취소"
+        confirmText="삭제"
+        onClose={() => modalStore.reset()} // 취소 시 닫기
+        onConfirm={() => {
+          onClickDelete(); // 실제 삭제 동작
+          modalStore.reset(); // 모달 닫기
+        }}
+      />
+    );
+  };
+
   return (
     <main className={s.page}>
       <StickyHeader
@@ -53,7 +66,7 @@ const ExperienceViewer = () => {
               <Button
                 variant="secondary"
                 size="small"
-                onClick={toggleDeleteModal}
+                onClick={handleOpenDeleteModal}
               >
                 삭제하기
               </Button>
@@ -130,19 +143,6 @@ const ExperienceViewer = () => {
           </div>
         </div>
       </section>
-
-      <ModalBasic
-        title="이 경험을 삭제하시겠습니까?"
-        subTitle="작성한 내용은 즉시 제거되며, 복구할 수 없습니다."
-        closeText="취소"
-        confirmText="삭제"
-        isOpen={isDeleteModalOpen}
-        onClose={toggleDeleteModal}
-        onConfirm={() => {
-          toggleDeleteModal();
-          onClickDelete();
-        }}
-      />
     </main>
   );
 };