Merge pull request #159 from boostcampwm2023/feat/148-history-api-paging

[Feat] history API 활용하여 이전, 이후 페이지 이동 구현
boostcampwm2023 · Nov 28, 2023 · 27dd13f · 27dd13f
2 parents d375009 + 5bdbfb5
commit 27dd13f
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 44 deletions.
diff --git a/FE/src/App.js b/FE/src/App.js
@@ -1,8 +1,11 @@
-import React, { useLayoutEffect } from "react";
+/* eslint-disable no-unused-vars */
+
+import React, { useEffect, useLayoutEffect } from "react";
 import Reset from "styled-reset";
 import { createGlobalStyle } from "styled-components";
-import { useRecoilState } from "recoil";
+import { useRecoilState, useSetRecoilState } from "recoil";
 import userAtom from "./atoms/userAtom";
+import diaryAtom from "./atoms/diaryAtom";
 import Header from "./components/Header/Header";
 import HomePage from "./pages/HomePage";
 import MainPage from "./pages/MainPage";
@@ -36,6 +39,7 @@ const GlobalStyle = createGlobalStyle`
 
 function App() {
   const [userState, setUserState] = useRecoilState(userAtom);
+  const setDiaryState = useSetRecoilState(diaryAtom);
 
   useLayoutEffect(() => {
     let accessToken = localStorage.getItem("accessToken");
@@ -45,6 +49,14 @@ function App() {
     }
   }, []);
 
+  useEffect(() => {
+    window.onpopstate = (event) => {
+      if (event.state) {
+        setDiaryState(event.state);
+      }
+    };
+  }, []);
+
   return (
     <div className='App'>
       <GlobalStyle />

diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/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,8 +25,24 @@ 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, isCreate: false }));
+    setDiaryState((prev) => ({
+      ...prev,
+      isCreate: false,
+    }));
   };
 
   const addTag = (e) => {
@@ -378,7 +394,6 @@ const DiaryModalContentInputBox = styled.textarea`
 
   resize: none;
 
-  word_wrap: break-word;
   word-break: break-all;
 
   &::placeholder {

diff --git a/FE/src/components/DiaryModal/DiaryDeleteModal.js b/FE/src/components/DiaryModal/DiaryDeleteModal.js
@@ -47,11 +47,7 @@ function DiaryDeleteModal() {
               diaryUuid: diaryState.diaryUuid,
               accessToken: userState.accessToken,
             });
-            setDiaryState((prev) => ({
-              ...prev,
-              isRead: false,
-              isDelete: false,
-            }));
+            window.history.back();
           }}
         >
           확인

diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js
@@ -106,11 +106,22 @@ function DiaryListModal() {
             src={zoomIn}
             alt='zoom-in'
             onClick={() => {
-              setDiaryState((prev) => ({
-                ...prev,
-                isRead: true,
-                isList: false,
-              }));
+              setDiaryState((prev) => {
+                window.history.pushState(
+                  {
+                    ...prev,
+                    isRead: true,
+                    isList: false,
+                  },
+                  "",
+                  "",
+                );
+                return {
+                  ...prev,
+                  isRead: true,
+                  isList: false,
+                };
+              });
             }}
           />
         </DiaryTitle>

diff --git a/FE/src/components/DiaryModal/DiaryReadModal.js b/FE/src/components/DiaryModal/DiaryReadModal.js
@@ -121,11 +121,22 @@ function DiaryReadModal() {
         <DiaryModalTitle>{data.title}</DiaryModalTitle>
         <DiaryButton
           onClick={() => {
-            setDiaryState((prev) => ({
-              ...prev,
-              isRead: false,
-              isUpdate: true,
-            }));
+            setDiaryState((prev) => {
+              window.history.pushState(
+                {
+                  ...prev,
+                  isRead: false,
+                  isUpdate: true,
+                },
+                "",
+                "",
+              );
+              return {
+                ...prev,
+                isRead: false,
+                isUpdate: true,
+              };
+            });
           }}
         >
           <img

diff --git a/FE/src/components/DiaryModal/DiaryUpdateModal.js b/FE/src/components/DiaryModal/DiaryUpdateModal.js
@@ -1,5 +1,5 @@
-import React, { useRef } from "react";
-import { useRecoilValue, useRecoilState } from "recoil";
+import React, { useEffect, useRef } from "react";
+import { useRecoilValue } from "recoil";
 import { useMutation, useQuery } from "react-query";
 import styled from "styled-components";
 import userAtom from "../../atoms/userAtom";
@@ -44,7 +44,7 @@ function DiaryUpdateModal() {
   const contentRef = useRef(null);
   const [isInput, setIsInput] = React.useState(true);
   const userState = useRecoilValue(userAtom);
-  const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
+  const diaryState = useRecoilValue(diaryAtom);
   const [diaryData, setDiaryData] = React.useState({
     title: "test",
     content: "test",
@@ -55,8 +55,20 @@ function DiaryUpdateModal() {
     uuid: diaryState.diaryUuid,
   });
 
+  useEffect(() => {
+    const handleBeforeUnload = (e) => {
+      e.preventDefault();
+      e.returnValue = "";
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, []);
+
   const closeModal = () => {
-    setDiaryState((prev) => ({ ...prev, isUpdate: false }));
+    window.history.back();
   };
 
   const addTag = (e) => {
@@ -353,7 +365,6 @@ const DiaryModalContentInputBox = styled.textarea`
 
   resize: none;
 
-  word_wrap: break-word;
   word-break: break-all;
 
   &::placeholder {

diff --git a/FE/src/components/SideBar/SideBar.js b/FE/src/components/SideBar/SideBar.js
@@ -21,11 +21,18 @@ function SideBar() {
                 ...prev,
                 isSideBar: false,
               }));
-              setDiaryState((prev) => ({
-                ...prev,
-                isRead: false,
-                isList: false,
-              }));
+              setDiaryState((prev) => {
+                window.history.pushState(
+                  { ...prev, isRead: false, isList: false },
+                  "",
+                  "",
+                );
+                return {
+                  ...prev,
+                  isRead: false,
+                  isList: false,
+                };
+              });
             }}
           >
             일기 쓰기
@@ -36,11 +43,25 @@ function SideBar() {
                 ...prev,
                 isSideBar: false,
               }));
-              setDiaryState({
-                isCreate: false,
-                isRead: false,
-                isDelete: false,
-                isList: true,
+              setDiaryState((prev) => {
+                window.history.pushState(
+                  {
+                    ...prev,
+                    isCreate: false,
+                    isRead: false,
+                    isUpdate: false,
+                    isList: true,
+                  },
+                  "",
+                  "",
+                );
+                return {
+                  ...prev,
+                  isCreate: false,
+                  isRead: false,
+                  isUpdate: false,
+                  isList: true,
+                };
               });
             }}
           >

diff --git a/FE/src/index.js b/FE/src/index.js
@@ -6,11 +6,9 @@ import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
-    <QueryClientProvider client={new QueryClient()}>
-      <RecoilRoot>
-        <App />
-      </RecoilRoot>
-    </QueryClientProvider>
-  </React.StrictMode>,
+  <QueryClientProvider client={new QueryClient()}>
+    <RecoilRoot>
+      <App />
+    </RecoilRoot>
+  </QueryClientProvider>,
 );
diff --git a/FE/src/pages/MainPage.js b/FE/src/pages/MainPage.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 import { useRecoilState } from "recoil";
 import diaryAtom from "../atoms/diaryAtom";
@@ -12,12 +12,32 @@ import DiaryLoadingModal from "../components/DiaryModal/DiaryLoadingModal";
 function MainPage() {
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
 
+  useEffect(() => {
+    setDiaryState((prev) => {
+      const newState = {
+        ...prev,
+        isCreate: false,
+        isRead: false,
+        isUpdate: false,
+        isList: false,
+      };
+      window.history.pushState(newState, "", "");
+      return newState;
+    });
+  }, []);
+
   return (
     <>
       <MainPageWrapper
         onClick={(e) => {
           e.preventDefault();
-          setDiaryState((prev) => ({ ...prev, isCreate: true, isRead: false }));
+          setDiaryState((prev) => ({
+            ...prev,
+            isCreate: true,
+            isRead: false,
+            isUpdate: false,
+            isList: false,
+          }));
         }}
       />
       {diaryState.isCreate ? <DiaryCreateModal /> : null}