Merge pull request #233 from boostcampwm2023/fix/194-history-api-fix

[Fix] history api 삭제 및 atom으로 페이지 이동 관리 구현
boostcampwm2023 · Dec 7, 2023 · 952ce9a · 952ce9a
2 parents eec40bb + 40d934c
commit 952ce9a
Show file tree

Hide file tree

Showing 11 changed files with 323 additions and 286 deletions.
diff --git a/FE/src/assets/deleteIcon.svg → FE/src/assets/close.svg b/FE/src/assets/deleteIcon.svg → FE/src/assets/close.svg
diff --git a/FE/src/atoms/lastPageAtom.js b/FE/src/atoms/lastPageAtom.js
@@ -0,0 +1,8 @@
+import { atom } from "recoil";
+
+const lastPageAtom = atom({
+  key: "lastPageState",
+  default: [],
+});
+
+export default lastPageAtom;
diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js
@@ -7,8 +7,9 @@ import diaryAtom from "../../atoms/diaryAtom";
 import shapeAtom from "../../atoms/shapeAtom";
 import ModalWrapper from "../../styles/Modal/ModalWrapper";
 import Calendar from "./Calendar";
-import deleteIcon from "../../assets/deleteIcon.svg";
+import close from "../../assets/close.svg";
 import { preventBeforeUnload, getFormattedDate } from "../../utils/utils";
+import ModalBackground from "../ModalBackground/ModalBackground";
 
 function DiaryCreateModal(props) {
   const { refetch } = props;
@@ -104,76 +105,79 @@ function DiaryCreateModal(props) {
   } = useMutation(createDiaryFn);
 
   return (
-    <ModalWrapper $left='50%' width='40vw' height='65vh'>
-      <Calendar date={diaryData.date} setData={setDiaryData} />
-      <DiaryModalInputBox
-        fontSize='1.1rem'
-        placeholder='제목을 입력해주세요.'
-        onChange={(e) => {
-          if (e.target.value.length > 0) {
-            setDiaryData({ ...diaryData, title: e.target.value });
-            setIsInput(true);
-          } else {
-            setIsInput(false);
-          }
-        }}
-      />
-      <DiaryModalContentInputBox
-        placeholder='내용을 입력해주세요.'
-        onChange={(e) =>
-          setDiaryData({ ...diaryData, content: e.target.value })
-        }
-      />
-      <DiaryModalTagWrapper>
-        {diaryData.tags.map((tag) => (
-          <DiaryModalTagBox
-            key={tag}
-            onClick={(e) => {
-              deleteTag(e);
-            }}
-          >
-            {tag}
-          </DiaryModalTagBox>
-        ))}
-        <DiaryModalTagInputBox
-          fontSize='1rem'
-          placeholder='태그를 입력해주세요.'
-          onBlur={(e) => addTag(e)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              addTag(e);
-            }
-            if (e.key === "Backspace" && e.target.value.length === 0) {
-              deleteLastTag();
+    <>
+      <ModalBackground $opacity='0' />
+      <ModalWrapper $left='50%' width='40vw' height='65vh'>
+        <Calendar date={diaryData.date} setData={setDiaryData} />
+        <DiaryModalInputBox
+          fontSize='1.1rem'
+          placeholder='제목을 입력해주세요.'
+          onChange={(e) => {
+            if (e.target.value.length > 0) {
+              setDiaryData({ ...diaryData, title: e.target.value });
+              setIsInput(true);
+            } else {
+              setIsInput(false);
             }
           }}
         />
-      </DiaryModalTagWrapper>
-      <DiaryModalShapeSelectBox
-        diaryData={diaryData}
-        setDiaryData={setDiaryData}
-      />
-      <ModalSideButtonWrapper>
-        <ModalSideButton
-          onClick={() => {
-            setDiaryState((prev) => ({ ...prev, isCreate: false }));
-          }}
-        >
-          <img src={deleteIcon} alt='delete' />
-        </ModalSideButton>
-        {isInput ? (
+        <DiaryModalContentInputBox
+          placeholder='내용을 입력해주세요.'
+          onChange={(e) =>
+            setDiaryData({ ...diaryData, content: e.target.value })
+          }
+        />
+        <DiaryModalTagWrapper>
+          {diaryData.tags.map((tag) => (
+            <DiaryModalTagBox
+              key={tag}
+              onClick={(e) => {
+                deleteTag(e);
+              }}
+            >
+              {tag}
+            </DiaryModalTagBox>
+          ))}
+          <DiaryModalTagInputBox
+            fontSize='1rem'
+            placeholder='태그를 입력해주세요.'
+            onBlur={(e) => addTag(e)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                addTag(e);
+              }
+              if (e.key === "Backspace" && e.target.value.length === 0) {
+                deleteLastTag();
+              }
+            }}
+          />
+        </DiaryModalTagWrapper>
+        <DiaryModalShapeSelectBox
+          diaryData={diaryData}
+          setDiaryData={setDiaryData}
+        />
+        <ModalSideButtonWrapper>
           <ModalSideButton
-            width='5rem'
             onClick={() => {
-              createDiary({ diaryData, accessToken: userState.accessToken });
               setDiaryState((prev) => ({ ...prev, isCreate: false }));
             }}
           >
-            생성
+            <img src={close} alt='delete' />
           </ModalSideButton>
-        ) : null}
-      </ModalSideButtonWrapper>
-    </ModalWrapper>
+          {isInput ? (
+            <ModalSideButton
+              width='5rem'
+              onClick={() => {
+                createDiary({ diaryData, accessToken: userState.accessToken });
+                setDiaryState((prev) => ({ ...prev, isCreate: false }));
+              }}
+            >
+              생성
+            </ModalSideButton>
+          ) : null}
+        </ModalSideButtonWrapper>
+      </ModalWrapper>
+    </>
   );
 }
 

diff --git a/FE/src/components/DiaryModal/DiaryDeleteModal.js b/FE/src/components/DiaryModal/DiaryDeleteModal.js
@@ -1,16 +1,17 @@
 import React from "react";
 import { useMutation } from "react-query";
 import styled from "styled-components";
-import { useRecoilValue, useSetRecoilState } from "recoil";
+import { useRecoilValue, useRecoilState } from "recoil";
 import diaryAtom from "../../atoms/diaryAtom";
 import userAtom from "../../atoms/userAtom";
+import lastPageAtom from "../../atoms/lastPageAtom";
 import ModalWrapper from "../../styles/Modal/ModalWrapper";
 
 function DiaryDeleteModal(props) {
   const { refetch } = props;
-  const diaryState = useRecoilValue(diaryAtom);
+  const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
   const userState = useRecoilValue(userAtom);
-  const setDiaryState = useSetRecoilState(diaryAtom);
+  const [lastPageState, setLastPageState] = useRecoilState(lastPageAtom);
 
   async function deleteDiaryFn(data) {
     return fetch(
@@ -69,7 +70,21 @@ function DiaryDeleteModal(props) {
               diaryUuid: diaryState.diaryUuid,
               accessToken: userState.accessToken,
             });
-            window.history.back();
+            if (lastPageState[lastPageState.length - 1] === "main") {
+              setDiaryState((prev) => ({
+                ...prev,
+                isRead: false,
+                isDelete: false,
+              }));
+            } else if (lastPageState[lastPageState.length - 1] === "list") {
+              setDiaryState((prev) => ({
+                ...prev,
+                isList: true,
+                isRead: false,
+                isDelete: false,
+              }));
+            }
+            setLastPageState((prev) => prev.slice(0, prev.length - 1));
           }}
         >
           확인

diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js
@@ -2,19 +2,21 @@
 
 import React, { useEffect, useLayoutEffect } from "react";
 import styled from "styled-components";
-import { useRecoilState, useRecoilValue } from "recoil";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { ko } from "date-fns/esm/locale";
 import diaryAtom from "../../atoms/diaryAtom";
 import shapeAtom from "../../atoms/shapeAtom";
+import lastPageAtom from "../../atoms/lastPageAtom";
 import zoomIn from "../../assets/zoomIn.svg";
 import search from "../../assets/search.svg";
 
 function DiaryListModal() {
   const [selectedDiary, setSelectedDiary] = React.useState(null);
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
   const shapeState = useRecoilValue(shapeAtom);
+  const setLastPageState = useSetRecoilState(lastPageAtom);
   const [filterState, setFilterState] = React.useState({
     date: {
       start: null,
@@ -330,21 +332,13 @@ function DiaryListModal() {
             alt='zoom-in'
             onClick={() => {
               setDiaryState((prev) => {
-                window.history.pushState(
-                  {
-                    ...prev,
-                    isRead: true,
-                    isList: false,
-                  },
-                  "",
-                  "",
-                );
                 return {
                   ...prev,
                   isRead: true,
                   isList: false,
                 };
               });
+              setLastPageState(["list"]);
             }}
           />
         </DiaryTitle>