chore: 생성, 수정 시 새로고침하거나 다른 페이지로 갈 경우 확인 알림 출력

FE/src/App.js

@@ -50,11 +50,6 @@ function App() {
   }, []);
 
   useEffect(() => {
-    window.addEventListener("beforeunload", (e) => {
-      e.preventDefault();
-      e.returnValue = "";
-    });
-
     window.onpopstate = (event) => {
       if (event.state) {
         setDiaryState(event.state);

FE/src/components/DiaryModal/DiaryCreateModal.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { useMutation, useQuery } from "react-query";
 import styled from "styled-components";
@@ -25,6 +25,19 @@ function DiaryCreateModal() {
   const userState = useRecoilValue(userAtom);
   const setDiaryState = useSetRecoilState(diaryAtom);
 
+  useEffect(() => {
+    const handleBeforeUnload = (e) => {
+      e.preventDefault();
+      e.returnValue = "";
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, []);
+
   const closeModal = () => {
     setDiaryState((prev) => ({
       ...prev,

FE/src/components/DiaryModal/DiaryUpdateModal.js

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { useRecoilValue } from "recoil";
 import { useMutation, useQuery } from "react-query";
 import styled from "styled-components";
@@ -55,6 +55,18 @@ function DiaryUpdateModal() {
     uuid: diaryState.diaryUuid,
   });
 
+  useEffect(() => {
+    const handleBeforeUnload = (e) => {
+      e.preventDefault();
+      e.returnValue = "";
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, []);
+
   const closeModal = () => {
     window.history.back();
   };