From 7bbc9e531b6c6ea7e52506ed2de28ec33c353a53 Mon Sep 17 00:00:00 2001 From: dbwhdtjr0457 Date: Tue, 28 Nov 2023 10:35:10 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20history=20API=20=ED=99=9C=EC=9A=A9?= =?UTF-8?q?=20paging=20=EA=B0=9C=EB=B0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 주소가 바뀌지 않으면서 뒤로가기, 앞으로가기를 할 수 있도록 history API를 활용하여 개발하였습니다. --- FE/src/App.js | 22 +++++++++- FE/src/atoms/diaryAtom.js | 6 +++ .../components/DiaryModal/DiaryCreateModal.js | 5 ++- .../components/DiaryModal/DiaryDeleteModal.js | 6 +-- .../components/DiaryModal/DiaryListModal.js | 21 +++++++--- .../components/DiaryModal/DiaryReadModal.js | 21 +++++++--- .../components/DiaryModal/DiaryUpdateModal.js | 6 +-- FE/src/components/SideBar/SideBar.js | 41 ++++++++++++++----- FE/src/index.js | 12 +++--- FE/src/pages/MainPage.js | 24 ++++++++++- 10 files changed, 124 insertions(+), 40 deletions(-) diff --git a/FE/src/App.js b/FE/src/App.js index 6c8b0b8..680fb85 100644 --- 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,20 @@ function App() { } }, []); + useEffect(() => { + window.addEventListener("beforeunload", (e) => { + e.preventDefault(); + e.returnValue = ""; + }); + + window.onpopstate = (event) => { + console.log(event.state); + if (event.state) { + setDiaryState(event.state); + } + }; + }, []); + return (
diff --git a/FE/src/atoms/diaryAtom.js b/FE/src/atoms/diaryAtom.js index b7408a7..30e2603 100644 --- a/FE/src/atoms/diaryAtom.js +++ b/FE/src/atoms/diaryAtom.js @@ -11,6 +11,12 @@ const diaryAtom = atom({ diaryUuid: "", isLoaded: false, }, + effects: [ + ({ onSet }) => + onSet((newDiaryState) => { + console.log(newDiaryState); + }), + ], }); export default diaryAtom; diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js index b521d4c..f46abca 100644 --- a/FE/src/components/DiaryModal/DiaryCreateModal.js +++ b/FE/src/components/DiaryModal/DiaryCreateModal.js @@ -23,7 +23,10 @@ function DiaryCreateModal() { const setDiaryState = useSetRecoilState(diaryAtom); const closeModal = () => { - setDiaryState((prev) => ({ ...prev, isCreate: false })); + setDiaryState((prev) => ({ + ...prev, + isCreate: false, + })); }; const addTag = (e) => { diff --git a/FE/src/components/DiaryModal/DiaryDeleteModal.js b/FE/src/components/DiaryModal/DiaryDeleteModal.js index 7fb4920..af33750 100644 --- 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 index aacbd90..cc6ab85 100644 --- 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, + }; + }); }} /> diff --git a/FE/src/components/DiaryModal/DiaryReadModal.js b/FE/src/components/DiaryModal/DiaryReadModal.js index e0d7819..dad504f 100644 --- a/FE/src/components/DiaryModal/DiaryReadModal.js +++ b/FE/src/components/DiaryModal/DiaryReadModal.js @@ -79,11 +79,22 @@ function DiaryReadModal() { {data.title} { - setDiaryState((prev) => ({ - ...prev, - isRead: false, - isUpdate: true, - })); + setDiaryState((prev) => { + window.history.pushState( + { + ...prev, + isRead: false, + isUpdate: true, + }, + "", + "", + ); + return { + ...prev, + isRead: false, + isUpdate: true, + }; + }); }} > { - setDiaryState((prev) => ({ ...prev, isUpdate: false })); + window.history.back(); }; const addTag = (e) => { diff --git a/FE/src/components/SideBar/SideBar.js b/FE/src/components/SideBar/SideBar.js index 755ce95..3ccb2fb 100644 --- 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 index 1552f57..e8e7d1b 100644 --- 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( - - - - - - - , + + + + + , ); diff --git a/FE/src/pages/MainPage.js b/FE/src/pages/MainPage.js index aa2b7e0..5deb83e 100644 --- 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 ( <> { e.preventDefault(); - setDiaryState((prev) => ({ ...prev, isCreate: true, isRead: false })); + setDiaryState((prev) => ({ + ...prev, + isCreate: true, + isRead: false, + isUpdate: false, + isList: false, + })); }} /> {diaryState.isCreate ? : null} From 8cd56a40ae21fabf87c33fee2b0e59f2e8a78634 Mon Sep 17 00:00:00 2001 From: dbwhdtjr0457 Date: Tue, 28 Nov 2023 17:31:29 +0900 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=EC=BD=98=EC=86=94=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=20=EC=82=AD=EC=A0=9C,=20=EC=9E=91=EB=8F=99=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20css=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/App.js | 1 - FE/src/atoms/diaryAtom.js | 6 ------ FE/src/components/DiaryModal/DiaryCreateModal.js | 1 - FE/src/components/DiaryModal/DiaryUpdateModal.js | 1 - 4 files changed, 9 deletions(-) diff --git a/FE/src/App.js b/FE/src/App.js index 680fb85..adbe33c 100644 --- a/FE/src/App.js +++ b/FE/src/App.js @@ -56,7 +56,6 @@ function App() { }); window.onpopstate = (event) => { - console.log(event.state); if (event.state) { setDiaryState(event.state); } diff --git a/FE/src/atoms/diaryAtom.js b/FE/src/atoms/diaryAtom.js index 30e2603..b7408a7 100644 --- a/FE/src/atoms/diaryAtom.js +++ b/FE/src/atoms/diaryAtom.js @@ -11,12 +11,6 @@ const diaryAtom = atom({ diaryUuid: "", isLoaded: false, }, - effects: [ - ({ onSet }) => - onSet((newDiaryState) => { - console.log(newDiaryState); - }), - ], }); export default diaryAtom; diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js index 706def7..d3110f8 100644 --- a/FE/src/components/DiaryModal/DiaryCreateModal.js +++ b/FE/src/components/DiaryModal/DiaryCreateModal.js @@ -381,7 +381,6 @@ const DiaryModalContentInputBox = styled.textarea` resize: none; - word_wrap: break-word; word-break: break-all; &::placeholder { diff --git a/FE/src/components/DiaryModal/DiaryUpdateModal.js b/FE/src/components/DiaryModal/DiaryUpdateModal.js index 8233d30..0757fa9 100644 --- a/FE/src/components/DiaryModal/DiaryUpdateModal.js +++ b/FE/src/components/DiaryModal/DiaryUpdateModal.js @@ -353,7 +353,6 @@ const DiaryModalContentInputBox = styled.textarea` resize: none; - word_wrap: break-word; word-break: break-all; &::placeholder { From 5bdbfb537343c6c87f957191a232c37b31c06012 Mon Sep 17 00:00:00 2001 From: dbwhdtjr0457 Date: Tue, 28 Nov 2023 17:44:35 +0900 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=EC=83=9D=EC=84=B1,=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EC=8B=9C=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8?= =?UTF-8?q?=ED=95=98=EA=B1=B0=EB=82=98=20=EB=8B=A4=EB=A5=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EA=B0=88=20=EA=B2=BD=EC=9A=B0=20?= =?UTF-8?q?=ED=99=95=EC=9D=B8=20=EC=95=8C=EB=A6=BC=20=EC=B6=9C=EB=A0=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/App.js | 5 ----- FE/src/components/DiaryModal/DiaryCreateModal.js | 15 ++++++++++++++- FE/src/components/DiaryModal/DiaryUpdateModal.js | 14 +++++++++++++- 3 files changed, 27 insertions(+), 7 deletions(-) diff --git a/FE/src/App.js b/FE/src/App.js index adbe33c..0089b67 100644 --- a/FE/src/App.js +++ b/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); diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js index d3110f8..abc5e5f 100644 --- 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,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, diff --git a/FE/src/components/DiaryModal/DiaryUpdateModal.js b/FE/src/components/DiaryModal/DiaryUpdateModal.js index 0757fa9..c258024 100644 --- a/FE/src/components/DiaryModal/DiaryUpdateModal.js +++ b/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(); };