[FE] feat: 새로고침 및 창을 닫는 동작에 대해 경고 alert 띄우기 (#851)

* fix: isOpenModalDisablingBlocker의 조건에서 navigateConfirm을 검사하던 문제 수정

* feat: useNavigateBlocker에 새로고침 및 페이지 삭제 전 alert를 띄우는 기능 추가

* refactor: useBlocker를 이용해 라우팅을 막아야 하는지를 판단하는 변수 이름을 isUnblocked로 수정 및 그에 맞게 조건문 변경

* refactor: useBlocker를 이용해 라우팅이 막혀 있는 상태인지를 나타내는 변수의 이름을 isNavigationUnblocked로 수정

* refactor: 제출 확인 모달이 띄워진 상황에서도 뒤로가기를 누르면 이동 확인 모달을 띄울 수 있도록 수정

frontend/src/pages/ReviewWritingPage/form/components/CardForm/index.tsx

@@ -36,19 +36,16 @@ const CardForm = () => {
   useUpdateDefaultAnswers();
 
   // 모달
-  const { handleOpenModal, closeModal, isOpen, isOpenModalDisablingBlocker } = useCardFormModal();
+  const { handleOpenModal, closeModal, isOpen } = useCardFormModal();
 
   const handleNavigateConfirmButtonClick = () => {
     closeModal(CARD_FORM_MODAL_KEY.navigateConfirm);
 
-    if (blocker.proceed) {
-      blocker.proceed();
-    }
+    if (blocker.proceed) blocker.proceed();
   };
 
   // 작성 중인 답변이 있는 경우 페이지 이동을 막는 기능
   const { blocker } = useNavigateBlocker({
-    isOpenModalDisablingBlocker,
     openNavigateConfirmModal: () => handleOpenModal('navigateConfirm'),
   });
 

frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts

@@ -5,26 +5,28 @@ import { useRecoilValue } from 'recoil';
 import { answerMapAtom } from '@/recoil';
 
 interface UseNavigateBlockerProps {
-  isOpenModalDisablingBlocker: boolean;
   openNavigateConfirmModal: () => void;
 }
-/**
- * @param isOpenModalDisablingBlocker : 이동 확인 모달과 리뷰 제출 확인 모달 모달들이 열려있는 지 여부 (모달의 이동/제출 버튼 클릭 시 페이지 이동해야하기 때문에 필요)
- * 작성한 답변이 있는 상태에서 작성한 페이지에서 다른 페이지로 이동하려할때 이동을 막거나, 이동을 진행하는 blocker를 반환하는 훅
- */
-const useNavigateBlocker = ({ isOpenModalDisablingBlocker, openNavigateConfirmModal }: UseNavigateBlockerProps) => {
+
+const useNavigateBlocker = ({ openNavigateConfirmModal }: UseNavigateBlockerProps) => {
   const answerMap = useRecoilValue(answerMapAtom);
 
   const isAnswerInProgress = () => {
     if (!answerMap) return false;
-
     return [...answerMap.values()].some((answer) => !!answer.selectedOptionIds?.length || !!answer.text?.length);
   };
 
+  // 페이지 새로고침 및 닫기에 대한 처리: 브라우저 기본 alert 등장
+  const handleNavigationBlock = (event: BeforeUnloadEvent) => {
+    if (isAnswerInProgress()) event.preventDefault();
+  };
+
+  // 페이지 히스토리에 영향을 주는 페이지 이동 처리: useBlocker 이용
   const blocker = useBlocker(({ currentLocation, nextLocation }) => {
-    if (isOpenModalDisablingBlocker) return false;
     const isLeavingPage = currentLocation.pathname !== nextLocation.pathname;
-    return isAnswerInProgress() && isLeavingPage;
+    const isMoveToCompletePage = nextLocation.pathname.includes('complete');
+    // 리뷰 작성 완료 페이지로 이동하는 url 변경인 경우에는 navigateConfirm 모달을 띄우지 않음
+    return isAnswerInProgress() && isLeavingPage && !isMoveToCompletePage;
   });
 
   useEffect(() => {
@@ -33,6 +35,14 @@ const useNavigateBlocker = ({ isOpenModalDisablingBlocker, openNavigateConfirmMo
     }
   }, [blocker]);
 
+  useEffect(() => {
+    window.addEventListener('beforeunload', handleNavigationBlock);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleNavigationBlock);
+    };
+  }, [answerMap]);
+
   return {
     blocker,
   };

frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts

@@ -13,8 +13,6 @@ const useCardFormModal = () => {
     handleOpenModal,
     closeModal,
     isOpen,
-    isOpenModalDisablingBlocker:
-      isOpen(CARD_FORM_MODAL_KEY.navigateConfirm) || isOpen(CARD_FORM_MODAL_KEY.submitConfirm),
   };
 };