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

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(() => {
+    modalStore.subscribe(setModals);
+    return () => modalStore.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,
@@ -24,11 +25,10 @@ const isDraftDirty = (draft: ExperienceUpsertBody): boolean => {
 };
 
 export const useLeaveConfirm = () => {
+  const LEAVE_MODAL_ID = "leave-confirm-modal";
   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 +46,36 @@ export const useLeaveConfirm = () => {
     return shouldBlockNow && !isSubmitting && !isTransitioning;
   });
 
-  const prevBlockerStateRef = useRef(blocker.state);
+  const confirmLeave = useCallback(() => {
+    if (blocker.state === "blocked") {
+      blocker.proceed();
+    }
+  }, [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 +89,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>
   );
 };

src/features/experience-matching/ui/select-company/select-company.tsx

@@ -1,8 +1,9 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { ROUTES } from "@/app/routes/paths";
-import { Button, Modal, useModal } from "@/shared/ui";
+import { modalStore } from "@/shared/model/store";
+import { Button, Modal } from "@/shared/ui";
 import {
   useGetExperience,
   useGetCompanyList,
@@ -19,53 +20,61 @@ export const SelectCompany = ({ onClick }: { onClick: () => void }) => {
   const navigate = useNavigate();
   const { data } = useGetExperience(); // 경험 조회 API
 
-  /** Report 전역 상태  */
+  // AI-Report 입력 단계 저장을 위한 전역 상태
   const setCompany = useReportStore((state) => state.setCompany);
   const company = useReportStore((state) => state.company);
 
-  /** 모달 상태 관리 */
-  const { autoPlay, isOpen, handleModal } = useModal(3000); // 몇 초 뒤 닫히게 할 건지 정의
-  const alertModal = useModal(); // 경험 등록 여부 확인 모달
-
-  /** 입력 데이터 상태 관리 */
+  // 기업 입력 데이터 상태 관리
   const [inputValue, setInputValue] = useState(""); // 실시간 입력 상태
   const [searchKeyword, setSearchKeyword] = useState(""); // 디바운스된 키워드 상태
   const [selectedCompany, setSelectedCompany] = useState<Company | null>(
     company
   );
+  const { data: searchResults = [] } = useGetCompanyList(searchKeyword); // 기업 검색 API
 
-  // 경험 등록 여부 확인 모달 오픈
+  // 경험 등록 여부 확인 모달
   useEffect(() => {
     if (data?.totalElements === 0) {
-      if (!alertModal.isOpen) {
-        alertModal.openModal();
-      }
+      modalStore.open(
+        <>
+          <Modal.Content>
+            <Modal.Title>아직 등록된 경험이 없습니다</Modal.Title>
+            <Modal.SubTitle>지금 바로 경험을 등록하러 가볼까요?</Modal.SubTitle>
+          </Modal.Content>
+          <Modal.Buttons>
+            <Button variant="secondary" onClick={() => navigate(ROUTES.HOME)}>
+              나가기
+            </Button>
+            <Button
+              variant="primary"
+              onClick={() => navigate(ROUTES.EXPERIENCE_CREATE)}
+            >
+              이동하기
+            </Button>
+          </Modal.Buttons>
+        </>
+      );
     }
-  }, [data, alertModal]);
+  }, [data, navigate]);
 
-  // useEffect(() => {
-  //   if (company?.id) {
-  //     const temp={
-  //       id:company.id,
-  //       name:company.name
-  //     }
-  //     setSelectedCompany(temp);
-  //   }
-  // }, [company]);
-
-  const { data: searchResults = [] } = useGetCompanyList(searchKeyword); // 기업 검색 API
-
-  // 모달 닫힘 여부 확인 후 페이지 이동
-  const prevIsOpen = useRef(isOpen);
-  useEffect(() => {
-    if (prevIsOpen.current === true && isOpen === false) {
-      if (selectedCompany) {
-        setCompany(selectedCompany); // 선택된 기업 데이터 저장
+  const handleSearch = () => {
+    if (!selectedCompany) return;
+    // 기업 선택 후, 대기하는 모달
+    modalStore.open(
+      <>
+        <Modal.Content type="auto">
+          <Modal.Title>{selectedCompany.name}을 선택하셨습니다</Modal.Title>
+          <Modal.SubTitle>기업분석 내용을 불러오는 중입니다.</Modal.SubTitle>
+        </Modal.Content>
+        <Modal.Image />
+      </>,
+      3000,
+      () => {
+        setCompany(selectedCompany);
         onClick();
       }
-    }
-    prevIsOpen.current = isOpen;
-  }, [isOpen, selectedCompany, onClick, setCompany]);
+    );
+  };
 
   return (
     <div className={styles.layout}>
@@ -77,39 +86,8 @@ export const SelectCompany = ({ onClick }: { onClick: () => void }) => {
         onDebounceChange={setSearchKeyword}
         selectedItem={selectedCompany}
         onSelect={setSelectedCompany}
-        onSearch={handleModal}
+        onSearch={handleSearch}
       />
-      {/** 경험 등록 여부 확인 모달 */}
-      <Modal isOpen={alertModal.isOpen} onClose={alertModal.closeModal}>
-        <Modal.Content>
-          <Modal.Title>아직 등록된 경험이 없습니다</Modal.Title>
-          <Modal.SubTitle>지금 바로 경험을 등록하러 가볼까요?</Modal.SubTitle>
-        </Modal.Content>
-        <Modal.Buttons>
-          <Button
-            variant="secondary"
-            size="large"
-            onClick={() => navigate(ROUTES.HOME)}
-          >
-            나가기
-          </Button>
-          <Button
-            variant="primary"
-            size="large"
-            onClick={() => navigate(ROUTES.EXPERIENCE_CREATE)}
-          >
-            이동하기
-          </Button>
-        </Modal.Buttons>
-      </Modal>
-      {/** 기업 선택 후, 대기 모달 */}
-      <Modal autoPlay={autoPlay} isOpen={isOpen} onClose={handleModal}>
-        <Modal.Content type="auto">
-          <Modal.Title>{selectedCompany?.name}을 선택하셨습니다</Modal.Title>
-          <Modal.SubTitle>기업분석 내용을 불러오는 중입니다.</Modal.SubTitle>
-        </Modal.Content>
-        <Modal.Image />
-      </Modal>
     </div>
   );
 };