From 84641a57504b7bae3e90bc5d9081305fba8fadb9 Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Sun, 13 Oct 2024 18:04:58 +0900 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20isOpenModalDisablingBlocker=EC=9D=98?= =?UTF-8?q?=20=EC=A1=B0=EA=B1=B4=EC=97=90=EC=84=9C=20navigateConfirm?= =?UTF-8?q?=EC=9D=84=20=EA=B2=80=EC=82=AC=ED=95=98=EB=8D=98=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts b/frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts index f4898fa2a..5c37a2474 100644 --- a/frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts +++ b/frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts @@ -14,7 +14,7 @@ const useCardFormModal = () => { closeModal, isOpen, isOpenModalDisablingBlocker: - isOpen(CARD_FORM_MODAL_KEY.navigateConfirm) || isOpen(CARD_FORM_MODAL_KEY.submitConfirm), + isOpen(CARD_FORM_MODAL_KEY.recheck) || isOpen(CARD_FORM_MODAL_KEY.submitConfirm), }; }; From 58285ccdd9cd07cef51a440d43c3b284139feaa1 Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Sun, 13 Oct 2024 18:07:31 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20useNavigateBlocker=EC=97=90=20?= =?UTF-8?q?=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8=20=EB=B0=8F=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=82=AD=EC=A0=9C=20=EC=A0=84=20alert?= =?UTF-8?q?=EB=A5=BC=20=EB=9D=84=EC=9A=B0=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../form/hooks/useNavigateBlocker.ts | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts b/frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts index f41c53799..bb76e49fe 100644 --- a/frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts +++ b/frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts @@ -8,6 +8,7 @@ interface UseNavigateBlockerProps { isOpenModalDisablingBlocker: boolean; openNavigateConfirmModal: () => void; } + /** * @param isOpenModalDisablingBlocker : 이동 확인 모달과 리뷰 제출 확인 모달 모달들이 열려있는 지 여부 (모달의 이동/제출 버튼 클릭 시 페이지 이동해야하기 때문에 필요) * 작성한 답변이 있는 상태에서 작성한 페이지에서 다른 페이지로 이동하려할때 이동을 막거나, 이동을 진행하는 blocker를 반환하는 훅 @@ -17,10 +18,17 @@ const useNavigateBlocker = ({ isOpenModalDisablingBlocker, openNavigateConfirmMo const isAnswerInProgress = () => { if (!answerMap) return false; - return [...answerMap.values()].some((answer) => !!answer.selectedOptionIds?.length || !!answer.text?.length); }; + // 페이지 새로고침 및 닫기에 대한 처리 by BeforeUnloadEvent + const handleNavigationBlock = (event: BeforeUnloadEvent) => { + if (isAnswerInProgress() && !isOpenModalDisablingBlocker) { + event.preventDefault(); + } + }; + + // 페이지 히스토리에 영향을 주는 페이지 이동은 useBlocker가 처리 const blocker = useBlocker(({ currentLocation, nextLocation }) => { if (isOpenModalDisablingBlocker) return false; const isLeavingPage = currentLocation.pathname !== nextLocation.pathname; @@ -33,6 +41,14 @@ const useNavigateBlocker = ({ isOpenModalDisablingBlocker, openNavigateConfirmMo } }, [blocker]); + useEffect(() => { + window.addEventListener('beforeunload', handleNavigationBlock); + + return () => { + window.removeEventListener('beforeunload', handleNavigationBlock); + }; + }, [answerMap, isOpenModalDisablingBlocker]); + return { blocker, }; From f3e692d6915ea8a3f5ccfd456a0d523f60f62c37 Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Wed, 16 Oct 2024 14:54:27 +0900 Subject: [PATCH 3/5] =?UTF-8?q?refactor:=20useBlocker=EB=A5=BC=20=EC=9D=B4?= =?UTF-8?q?=EC=9A=A9=ED=95=B4=20=EB=9D=BC=EC=9A=B0=ED=8C=85=EC=9D=84=20?= =?UTF-8?q?=EB=A7=89=EC=95=84=EC=95=BC=20=ED=95=98=EB=8A=94=EC=A7=80?= =?UTF-8?q?=EB=A5=BC=20=ED=8C=90=EB=8B=A8=ED=95=98=EB=8A=94=20=EB=B3=80?= =?UTF-8?q?=EC=88=98=20=EC=9D=B4=EB=A6=84=EC=9D=84=20isUnblocked=EB=A1=9C?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EA=B7=B8=EC=97=90=20?= =?UTF-8?q?=EB=A7=9E=EA=B2=8C=20=EC=A1=B0=EA=B1=B4=EB=AC=B8=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../form/components/CardForm/index.tsx | 8 +++----- .../form/hooks/useNavigateBlocker.ts | 14 ++++++++------ .../modals/hooks/useCardFormModal.ts | 3 +-- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/frontend/src/pages/ReviewWritingPage/form/components/CardForm/index.tsx b/frontend/src/pages/ReviewWritingPage/form/components/CardForm/index.tsx index 2c219b5d7..a6843cb6e 100644 --- a/frontend/src/pages/ReviewWritingPage/form/components/CardForm/index.tsx +++ b/frontend/src/pages/ReviewWritingPage/form/components/CardForm/index.tsx @@ -36,19 +36,17 @@ const CardForm = () => { useUpdateDefaultAnswers(); // 모달 - const { handleOpenModal, closeModal, isOpen, isOpenModalDisablingBlocker } = useCardFormModal(); + const { handleOpenModal, closeModal, isOpen, isUnblocked } = useCardFormModal(); const handleNavigateConfirmButtonClick = () => { closeModal(CARD_FORM_MODAL_KEY.navigateConfirm); - if (blocker.proceed) { - blocker.proceed(); - } + if (blocker.proceed) blocker.proceed(); }; // 작성 중인 답변이 있는 경우 페이지 이동을 막는 기능 const { blocker } = useNavigateBlocker({ - isOpenModalDisablingBlocker, + isUnblocked, openNavigateConfirmModal: () => handleOpenModal('navigateConfirm'), }); diff --git a/frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts b/frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts index bb76e49fe..6b7ad8196 100644 --- a/frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts +++ b/frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts @@ -5,15 +5,17 @@ import { useRecoilValue } from 'recoil'; import { answerMapAtom } from '@/recoil'; interface UseNavigateBlockerProps { - isOpenModalDisablingBlocker: boolean; + isUnblocked: boolean; openNavigateConfirmModal: () => void; } + + /** - * @param isOpenModalDisablingBlocker : 이동 확인 모달과 리뷰 제출 확인 모달 모달들이 열려있는 지 여부 (모달의 이동/제출 버튼 클릭 시 페이지 이동해야하기 때문에 필요) + * @param isUnblocked : useBlocker로 라우팅을 막지 않는(다른 페이지로 이동 가능한) 상태인지를 의미함 * 작성한 답변이 있는 상태에서 작성한 페이지에서 다른 페이지로 이동하려할때 이동을 막거나, 이동을 진행하는 blocker를 반환하는 훅 */ -const useNavigateBlocker = ({ isOpenModalDisablingBlocker, openNavigateConfirmModal }: UseNavigateBlockerProps) => { +const useNavigateBlocker = ({ isUnblocked, openNavigateConfirmModal }: UseNavigateBlockerProps) => { const answerMap = useRecoilValue(answerMapAtom); const isAnswerInProgress = () => { @@ -23,14 +25,14 @@ const useNavigateBlocker = ({ isOpenModalDisablingBlocker, openNavigateConfirmMo // 페이지 새로고침 및 닫기에 대한 처리 by BeforeUnloadEvent const handleNavigationBlock = (event: BeforeUnloadEvent) => { - if (isAnswerInProgress() && !isOpenModalDisablingBlocker) { + if (isAnswerInProgress() && !isUnblocked) { event.preventDefault(); } }; // 페이지 히스토리에 영향을 주는 페이지 이동은 useBlocker가 처리 const blocker = useBlocker(({ currentLocation, nextLocation }) => { - if (isOpenModalDisablingBlocker) return false; + if (isUnblocked) return false; const isLeavingPage = currentLocation.pathname !== nextLocation.pathname; return isAnswerInProgress() && isLeavingPage; }); @@ -47,7 +49,7 @@ const useNavigateBlocker = ({ isOpenModalDisablingBlocker, openNavigateConfirmMo return () => { window.removeEventListener('beforeunload', handleNavigationBlock); }; - }, [answerMap, isOpenModalDisablingBlocker]); + }, [answerMap, isUnblocked]); return { blocker, diff --git a/frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts b/frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts index 5c37a2474..8e17cc6cf 100644 --- a/frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts +++ b/frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts @@ -13,8 +13,7 @@ const useCardFormModal = () => { handleOpenModal, closeModal, isOpen, - isOpenModalDisablingBlocker: - isOpen(CARD_FORM_MODAL_KEY.recheck) || isOpen(CARD_FORM_MODAL_KEY.submitConfirm), + isUnblocked: isOpen(CARD_FORM_MODAL_KEY.submitConfirm), }; }; From 6092559b93b5abfc244e4ae99ccfebd39117941b Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Wed, 16 Oct 2024 17:07:54 +0900 Subject: [PATCH 4/5] =?UTF-8?q?refactor:=20useBlocker=EB=A5=BC=20=EC=9D=B4?= =?UTF-8?q?=EC=9A=A9=ED=95=B4=20=EB=9D=BC=EC=9A=B0=ED=8C=85=EC=9D=B4=20?= =?UTF-8?q?=EB=A7=89=ED=98=80=20=EC=9E=88=EB=8A=94=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=EC=9D=B8=EC=A7=80=EB=A5=BC=20=EB=82=98=ED=83=80=EB=82=B4?= =?UTF-8?q?=EB=8A=94=20=EB=B3=80=EC=88=98=EC=9D=98=20=EC=9D=B4=EB=A6=84?= =?UTF-8?q?=EC=9D=84=20isNavigationUnblocked=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../form/components/CardForm/index.tsx | 4 ++-- .../form/hooks/useNavigateBlocker.ts | 18 +++++++----------- .../modals/hooks/useCardFormModal.ts | 2 +- 3 files changed, 10 insertions(+), 14 deletions(-) diff --git a/frontend/src/pages/ReviewWritingPage/form/components/CardForm/index.tsx b/frontend/src/pages/ReviewWritingPage/form/components/CardForm/index.tsx index a6843cb6e..95de30a25 100644 --- a/frontend/src/pages/ReviewWritingPage/form/components/CardForm/index.tsx +++ b/frontend/src/pages/ReviewWritingPage/form/components/CardForm/index.tsx @@ -36,7 +36,7 @@ const CardForm = () => { useUpdateDefaultAnswers(); // 모달 - const { handleOpenModal, closeModal, isOpen, isUnblocked } = useCardFormModal(); + const { handleOpenModal, closeModal, isOpen, isNavigationUnblocked } = useCardFormModal(); const handleNavigateConfirmButtonClick = () => { closeModal(CARD_FORM_MODAL_KEY.navigateConfirm); @@ -46,7 +46,7 @@ const CardForm = () => { // 작성 중인 답변이 있는 경우 페이지 이동을 막는 기능 const { blocker } = useNavigateBlocker({ - isUnblocked, + isNavigationUnblocked, openNavigateConfirmModal: () => handleOpenModal('navigateConfirm'), }); diff --git a/frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts b/frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts index 6b7ad8196..135be299d 100644 --- a/frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts +++ b/frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts @@ -5,17 +5,15 @@ import { useRecoilValue } from 'recoil'; import { answerMapAtom } from '@/recoil'; interface UseNavigateBlockerProps { - isUnblocked: boolean; + isNavigationUnblocked: boolean; openNavigateConfirmModal: () => void; } - - /** - * @param isUnblocked : useBlocker로 라우팅을 막지 않는(다른 페이지로 이동 가능한) 상태인지를 의미함 + * @param isNavigationUnblocked : useBlocker로 라우팅을 막지 않는(다른 페이지로 이동 가능한) 상태인지를 의미함 * 작성한 답변이 있는 상태에서 작성한 페이지에서 다른 페이지로 이동하려할때 이동을 막거나, 이동을 진행하는 blocker를 반환하는 훅 */ -const useNavigateBlocker = ({ isUnblocked, openNavigateConfirmModal }: UseNavigateBlockerProps) => { +const useNavigateBlocker = ({ isNavigationUnblocked, openNavigateConfirmModal }: UseNavigateBlockerProps) => { const answerMap = useRecoilValue(answerMapAtom); const isAnswerInProgress = () => { @@ -23,16 +21,14 @@ const useNavigateBlocker = ({ isUnblocked, openNavigateConfirmModal }: UseNaviga return [...answerMap.values()].some((answer) => !!answer.selectedOptionIds?.length || !!answer.text?.length); }; - // 페이지 새로고침 및 닫기에 대한 처리 by BeforeUnloadEvent + // 페이지 새로고침 및 닫기에 대한 처리: 브라우저 기본 alert 등장 const handleNavigationBlock = (event: BeforeUnloadEvent) => { - if (isAnswerInProgress() && !isUnblocked) { - event.preventDefault(); - } + if (isAnswerInProgress() && !isNavigationUnblocked) event.preventDefault(); }; // 페이지 히스토리에 영향을 주는 페이지 이동은 useBlocker가 처리 const blocker = useBlocker(({ currentLocation, nextLocation }) => { - if (isUnblocked) return false; + if (isNavigationUnblocked) return false; const isLeavingPage = currentLocation.pathname !== nextLocation.pathname; return isAnswerInProgress() && isLeavingPage; }); @@ -49,7 +45,7 @@ const useNavigateBlocker = ({ isUnblocked, openNavigateConfirmModal }: UseNaviga return () => { window.removeEventListener('beforeunload', handleNavigationBlock); }; - }, [answerMap, isUnblocked]); + }, [answerMap, isNavigationUnblocked]); return { blocker, diff --git a/frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts b/frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts index 8e17cc6cf..703c00e5e 100644 --- a/frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts +++ b/frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts @@ -13,7 +13,7 @@ const useCardFormModal = () => { handleOpenModal, closeModal, isOpen, - isUnblocked: isOpen(CARD_FORM_MODAL_KEY.submitConfirm), + isNavigationUnblocked: isOpen(CARD_FORM_MODAL_KEY.submitConfirm), }; }; From 5de1a5dc7274bbde7cc4e04258287719e1c43c86 Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Wed, 16 Oct 2024 19:45:37 +0900 Subject: [PATCH 5/5] =?UTF-8?q?refactor:=20=EC=A0=9C=EC=B6=9C=20=ED=99=95?= =?UTF-8?q?=EC=9D=B8=20=EB=AA=A8=EB=8B=AC=EC=9D=B4=20=EB=9D=84=EC=9B=8C?= =?UTF-8?q?=EC=A7=84=20=EC=83=81=ED=99=A9=EC=97=90=EC=84=9C=EB=8F=84=20?= =?UTF-8?q?=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0=EB=A5=BC=20=EB=88=84?= =?UTF-8?q?=EB=A5=B4=EB=A9=B4=20=EC=9D=B4=EB=8F=99=20=ED=99=95=EC=9D=B8=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=EC=9D=84=20=EB=9D=84=EC=9A=B8=20=EC=88=98=20?= =?UTF-8?q?=EC=9E=88=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../form/components/CardForm/index.tsx | 3 +-- .../form/hooks/useNavigateBlocker.ts | 18 +++++++----------- .../modals/hooks/useCardFormModal.ts | 1 - 3 files changed, 8 insertions(+), 14 deletions(-) diff --git a/frontend/src/pages/ReviewWritingPage/form/components/CardForm/index.tsx b/frontend/src/pages/ReviewWritingPage/form/components/CardForm/index.tsx index 95de30a25..158441881 100644 --- a/frontend/src/pages/ReviewWritingPage/form/components/CardForm/index.tsx +++ b/frontend/src/pages/ReviewWritingPage/form/components/CardForm/index.tsx @@ -36,7 +36,7 @@ const CardForm = () => { useUpdateDefaultAnswers(); // 모달 - const { handleOpenModal, closeModal, isOpen, isNavigationUnblocked } = useCardFormModal(); + const { handleOpenModal, closeModal, isOpen } = useCardFormModal(); const handleNavigateConfirmButtonClick = () => { closeModal(CARD_FORM_MODAL_KEY.navigateConfirm); @@ -46,7 +46,6 @@ const CardForm = () => { // 작성 중인 답변이 있는 경우 페이지 이동을 막는 기능 const { blocker } = useNavigateBlocker({ - isNavigationUnblocked, openNavigateConfirmModal: () => handleOpenModal('navigateConfirm'), }); diff --git a/frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts b/frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts index 135be299d..d3bc57ab5 100644 --- a/frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts +++ b/frontend/src/pages/ReviewWritingPage/form/hooks/useNavigateBlocker.ts @@ -5,15 +5,10 @@ import { useRecoilValue } from 'recoil'; import { answerMapAtom } from '@/recoil'; interface UseNavigateBlockerProps { - isNavigationUnblocked: boolean; openNavigateConfirmModal: () => void; } -/** - * @param isNavigationUnblocked : useBlocker로 라우팅을 막지 않는(다른 페이지로 이동 가능한) 상태인지를 의미함 - * 작성한 답변이 있는 상태에서 작성한 페이지에서 다른 페이지로 이동하려할때 이동을 막거나, 이동을 진행하는 blocker를 반환하는 훅 - */ -const useNavigateBlocker = ({ isNavigationUnblocked, openNavigateConfirmModal }: UseNavigateBlockerProps) => { +const useNavigateBlocker = ({ openNavigateConfirmModal }: UseNavigateBlockerProps) => { const answerMap = useRecoilValue(answerMapAtom); const isAnswerInProgress = () => { @@ -23,14 +18,15 @@ const useNavigateBlocker = ({ isNavigationUnblocked, openNavigateConfirmModal }: // 페이지 새로고침 및 닫기에 대한 처리: 브라우저 기본 alert 등장 const handleNavigationBlock = (event: BeforeUnloadEvent) => { - if (isAnswerInProgress() && !isNavigationUnblocked) event.preventDefault(); + if (isAnswerInProgress()) event.preventDefault(); }; - // 페이지 히스토리에 영향을 주는 페이지 이동은 useBlocker가 처리 + // 페이지 히스토리에 영향을 주는 페이지 이동 처리: useBlocker 이용 const blocker = useBlocker(({ currentLocation, nextLocation }) => { - if (isNavigationUnblocked) return false; const isLeavingPage = currentLocation.pathname !== nextLocation.pathname; - return isAnswerInProgress() && isLeavingPage; + const isMoveToCompletePage = nextLocation.pathname.includes('complete'); + // 리뷰 작성 완료 페이지로 이동하는 url 변경인 경우에는 navigateConfirm 모달을 띄우지 않음 + return isAnswerInProgress() && isLeavingPage && !isMoveToCompletePage; }); useEffect(() => { @@ -45,7 +41,7 @@ const useNavigateBlocker = ({ isNavigationUnblocked, openNavigateConfirmModal }: return () => { window.removeEventListener('beforeunload', handleNavigationBlock); }; - }, [answerMap, isNavigationUnblocked]); + }, [answerMap]); return { blocker, diff --git a/frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts b/frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts index 703c00e5e..a7e3a53ce 100644 --- a/frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts +++ b/frontend/src/pages/ReviewWritingPage/modals/hooks/useCardFormModal.ts @@ -13,7 +13,6 @@ const useCardFormModal = () => { handleOpenModal, closeModal, isOpen, - isNavigationUnblocked: isOpen(CARD_FORM_MODAL_KEY.submitConfirm), }; };