Merge pull request #266 from boostcampwm2023/fix/265-inf-alert-bug

[Fix] 403 에러 시 무한 알럿 발생 버그 수정
boostcampwm2023 · Dec 12, 2023 · 17749af · 17749af
2 parents 09aecf8 + e1bdce8
commit 17749af
Show file tree

Hide file tree

Showing 13 changed files with 141 additions and 108 deletions.
diff --git a/FE/src/atoms/diaryAtom.js b/FE/src/atoms/diaryAtom.js
@@ -13,7 +13,8 @@ const diaryAtom = atom({
     diaryUuid: "",
     diaryPoint: "",
     diaryList: [],
-    isLoaded: false,
+    isLoading: false,
+    isRedirect: false,
   },
 });
 

diff --git a/FE/src/components/DiaryModal/DiaryAnalysisModal.js b/FE/src/components/DiaryModal/DiaryAnalysisModal.js
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { useQuery } from "react-query";
-import { useRecoilState, useRecoilValue } from "recoil";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import styled from "styled-components";
 import dayjs from "dayjs";
 import userAtom from "../../atoms/userAtom";
 import shapeAtom from "../../atoms/shapeAtom";
-import { preventBeforeUnload } from "../../utils/utils";
+import diaryAtom from "../../atoms/diaryAtom";
 import DiaryEmotionIndicator from "./EmotionIndicator/DiaryEmotionIndicator";
 import DiaryPicket from "./DiaryPicket";
 import Tag from "../../styles/Modal/Tag";
@@ -23,6 +23,7 @@ function DiaryAnalysisModal() {
   });
   const [monthAnalysis, setMonthAnalysis] = useState(Array(12).fill(0));
   const [userState, setUserState] = useRecoilState(userAtom);
+  const setDiaryState = useSetRecoilState(diaryAtom);
   const [hoverData, setHoverData] = useState({
     top: 0,
     left: 0,
@@ -44,11 +45,10 @@ function DiaryAnalysisModal() {
         return res.json();
       }
       if (res.status === 403) {
-        alert("로그인이 만료되었습니다. 다시 로그인해주세요.");
-        localStorage.removeItem("accessToken");
-        sessionStorage.removeItem("accessToken");
-        window.removeEventListener("beforeunload", preventBeforeUnload);
-        window.location.href = "/";
+        setDiaryState((prev) => ({
+          ...prev,
+          isRedirect: true,
+        }));
       }
       if (res.status === 401) {
         return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {

diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js
@@ -1,7 +1,7 @@
 /* eslint-disable */
 
 import React, { useEffect, useState } from "react";
-import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
+import { useRecoilValue, useRecoilState } from "recoil";
 import { useMutation } from "react-query";
 import styled from "styled-components";
 import userAtom from "../../atoms/userAtom";
@@ -10,15 +10,14 @@ import shapeAtom from "../../atoms/shapeAtom";
 import ModalWrapper from "../../styles/Modal/ModalWrapper";
 import Calendar from "./Calendar";
 import close from "../../assets/close.svg";
-import { preventBeforeUnload, getFormattedDate } from "../../utils/utils";
+import getFormattedDate from "../../utils/utils";
 import ModalBackground from "../ModalBackground/ModalBackground";
 
 function DiaryCreateModal(props) {
   const { refetch } = props;
   const [isInput, setIsInput] = useState(false);
-  const diaryState = useRecoilValue(diaryAtom);
+  const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
   const [userState, setUserState] = useRecoilState(userAtom);
-  const setDiaryState = useSetRecoilState(diaryAtom);
 
   // TODO: 날짜 선택 기능 구현
   const [diaryData, setDiaryData] = useState({
@@ -30,14 +29,6 @@ function DiaryCreateModal(props) {
     shapeUuid: "",
   });
 
-  useEffect(() => {
-    window.addEventListener("beforeunload", preventBeforeUnload);
-
-    return () => {
-      window.removeEventListener("beforeunload", preventBeforeUnload);
-    };
-  }, []);
-
   const addTag = (e) => {
     if (e.target.value.length > 0 && !diaryData.tags.includes(e.target.value)) {
       setDiaryData({
@@ -82,12 +73,10 @@ function DiaryCreateModal(props) {
           return res.json();
         }
         if (res.status === 403) {
-          alert("로그인이 만료되었습니다. 다시 로그인해주세요.");
-          localStorage.removeItem("accessToken");
-          localStorage.removeItem("nickname");
-          sessionStorage.removeItem("accessToken");
-          sessionStorage.removeItem("nickname");
-          window.location.href = "/";
+          setDiaryState((prev) => ({
+            ...prev,
+            isRedirect: true,
+          }));
         }
         if (res.status === 401) {
           return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {

diff --git a/FE/src/components/DiaryModal/DiaryDeleteModal.js b/FE/src/components/DiaryModal/DiaryDeleteModal.js
@@ -29,12 +29,10 @@ function DiaryDeleteModal(props) {
           return res;
         }
         if (res.status === 403) {
-          alert("로그인이 만료되었습니다. 다시 로그인해주세요.");
-          localStorage.removeItem("accessToken");
-          localStorage.removeItem("nickname");
-          sessionStorage.removeItem("accessToken");
-          sessionStorage.removeItem("nickname");
-          window.location.href = "/";
+          setDiaryState((prev) => ({
+            ...prev,
+            isRedirect: true,
+          }));
         }
         if (res.status === 401) {
           return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {

diff --git a/FE/src/components/DiaryModal/DiaryReadModal.js b/FE/src/components/DiaryModal/DiaryReadModal.js
@@ -15,7 +15,7 @@ import deleteIcon from "../../assets/delete.svg";
 import close from "../../assets/close.svg";
 import ModalBackground from "../ModalBackground/ModalBackground";
 
-async function getDiary(accessToken, diaryUuid, setUserState) {
+async function getDiary(accessToken, diaryUuid, setUserState, setDiaryState) {
   return fetch(`${process.env.REACT_APP_BACKEND_URL}/diaries/${diaryUuid}`, {
     method: "GET",
     headers: {
@@ -27,10 +27,10 @@ async function getDiary(accessToken, diaryUuid, setUserState) {
       return res.json();
     }
     if (res.status === 403) {
-      alert("로그인이 만료되었습니다. 다시 로그인해주세요.");
-      localStorage.removeItem("accessToken");
-      sessionStorage.removeItem("accessToken");
-      window.location.href = "/";
+      setDiaryState((prev) => ({
+        ...prev,
+        isRedirect: true,
+      }));
     }
     if (res.status === 401) {
       return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
@@ -67,7 +67,13 @@ function DiaryReadModal(props) {
   const [shapeData, setShapeData] = React.useState("");
   const { data, isLoading, isError } = useQuery(
     ["diary", userState.accessToken],
-    () => getDiary(userState.accessToken, diaryState.diaryUuid, setUserState),
+    () =>
+      getDiary(
+        userState.accessToken,
+        diaryState.diaryUuid,
+        setUserState,
+        setDiaryState,
+      ),
     {
       onSuccess: (loadedData) => {
         const foundShapeData = shapeState.find(
@@ -112,8 +118,8 @@ function DiaryReadModal(props) {
         <DiaryModalHeader>
           <DiaryModalTitleWrapper>
             <DateInfo>
-              {data.date.slice(2, 4)}.{data.date.slice(5, 7)}.
-              {data.date.slice(8, 10)}
+              {data.date?.slice(2, 4)}.{data.date?.slice(5, 7)}.
+              {data.date?.slice(8, 10)}
             </DateInfo>
             <DiaryModalTitle>{data.title}</DiaryModalTitle>
           </DiaryModalTitleWrapper>

diff --git a/FE/src/components/DiaryModal/DiaryUpdateModal.js b/FE/src/components/DiaryModal/DiaryUpdateModal.js
@@ -10,7 +10,7 @@ import shapeAtom from "../../atoms/shapeAtom";
 import ModalWrapper from "../../styles/Modal/ModalWrapper";
 import Calendar from "./Calendar";
 import close from "../../assets/close.svg";
-import { preventBeforeUnload, getFormattedDate } from "../../utils/utils";
+import getFormattedDate from "../../utils/utils";
 import ModalBackground from "../ModalBackground/ModalBackground";
 
 // TODO: 일기 데이터 수정 API 연결
@@ -30,7 +30,7 @@ function DiaryUpdateModal(props) {
     tags: [],
     shapeUuid: diaryState.diaryList.find(
       (diary) => diary.uuid === diaryState.diaryUuid,
-    ).shapeUuid,
+    )?.shapeUuid,
   });
 
   const {
@@ -107,12 +107,11 @@ function DiaryUpdateModal(props) {
         }));
       }
       if (res.status === 403) {
-        alert("로그인이 만료되었습니다. 다시 로그인해주세요.");
-        localStorage.removeItem("accessToken");
-        localStorage.removeItem("nickname");
-        sessionStorage.removeItem("accessToken");
-        sessionStorage.removeItem("nickname");
-        window.location.href = "/";
+        console.log("권한 없음");
+        setDiaryState((prev) => ({
+          ...prev,
+          isRedirect: true,
+        }));
       }
       if (res.status === 401) {
         return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
@@ -167,14 +166,6 @@ function DiaryUpdateModal(props) {
     }
   }, [originData]);
 
-  useEffect(() => {
-    window.addEventListener("beforeunload", preventBeforeUnload);
-
-    return () => {
-      window.removeEventListener("beforeunload", preventBeforeUnload);
-    };
-  }, []);
-
   if (isLoading)
     return (
       <ModalWrapper $left='50%' width='40vw' height='65vh'>

diff --git a/FE/src/components/DiaryModal/EmotionIndicator/DiaryEmotionIndicator.js b/FE/src/components/DiaryModal/EmotionIndicator/DiaryEmotionIndicator.js
@@ -61,9 +61,9 @@ function DiaryEmotionIndicator({ emotion, width, text }) {
       </EmotionIndicatorBar>
       {text === true ? (
         <EmotionTextWrapper>
-          <EmotionText>긍정 {emotion.positive.toFixed(1)}%</EmotionText>
-          <EmotionText>중립 {emotion.neutral.toFixed(1)}%</EmotionText>
-          <EmotionText>부정 {emotion.negative.toFixed(1)}%</EmotionText>
+          <EmotionText>긍정 {emotion.positive?.toFixed(1)}%</EmotionText>
+          <EmotionText>중립 {emotion.neutral?.toFixed(1)}%</EmotionText>
+          <EmotionText>부정 {emotion.negative?.toFixed(1)}%</EmotionText>
         </EmotionTextWrapper>
       ) : null}
     </EmotionIndicatorWrapper>

diff --git a/FE/src/components/ModalBackground/ModalBackground.js b/FE/src/components/ModalBackground/ModalBackground.js
@@ -4,7 +4,7 @@ import { useSetRecoilState } from "recoil";
 import headerAtom from "../../atoms/headerAtom";
 
 function ModalBackground(props) {
-  const { $opacity } = props;
+  const { $opacity, $zindex } = props;
   const setModalState = useSetRecoilState(headerAtom);
 
   const closeModal = () => {
@@ -14,14 +14,20 @@ function ModalBackground(props) {
     });
   };
 
-  return <ModalBackgroundWrapper onClick={closeModal} $opacity={$opacity} />;
+  return (
+    <ModalBackgroundWrapper
+      onClick={closeModal}
+      $opacity={$opacity}
+      $zindex={$zindex}
+    />
+  );
 }
 
 const ModalBackgroundWrapper = styled.div`
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1000;
+  z-index: ${(props) => props.$zindex || 1000};
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, ${(props) => props.$opacity || 0.5});

diff --git a/FE/src/components/SignUpModal/SignUpModal.js b/FE/src/components/SignUpModal/SignUpModal.js
@@ -49,7 +49,7 @@ function SignUpModal() {
     const idRegex = /^[A-Za-z0-9_-]{5,20}$/;
     if (!idRegex.test(userId)) {
       errorRef.current.innerText = `아이디 형식이 올바르지 않습니다.
-      아이디는 5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.`;
+      아이디는 5~20자의 영문 대소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.`;
       return;
     }
 

diff --git a/FE/src/pages/MainPage.js b/FE/src/pages/MainPage.js
@@ -8,7 +8,6 @@ import diaryAtom from "../atoms/diaryAtom";
 import shapeAtom from "../atoms/shapeAtom";
 import userAtom from "../atoms/userAtom";
 import starAtom from "../atoms/starAtom";
-import lastPageAtom from "../atoms/lastPageAtom";
 import DiaryCreateModal from "../components/DiaryModal/DiaryCreateModal";
 import DiaryReadModal from "../components/DiaryModal/DiaryReadModal";
 import DiaryListModal from "../components/DiaryModal/DiaryListModal";
@@ -17,7 +16,7 @@ import DiaryUpdateModal from "../components/DiaryModal/DiaryUpdateModal";
 import DiaryLoadingModal from "../components/DiaryModal/DiaryLoadingModal";
 import PurchaseModal from "../components/PurchaseModal/PurchaseModal";
 import StarPage from "./StarPage";
-import { preventBeforeUnload } from "../utils/utils";
+import RedirectToHomepage from "./Redirection";
 
 function MainPage() {
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
@@ -41,14 +40,10 @@ function MainPage() {
           return res.json();
         }
         if (res.status === 403) {
-          alert("로그인이 만료되었습니다. 다시 로그인해주세요.");
-
-          localStorage.removeItem("accessToken");
-          localStorage.removeItem("nickname");
-          sessionStorage.removeItem("accessToken");
-          sessionStorage.removeItem("nickname");
-          window.removeEventListener("beforeunload", preventBeforeUnload);
-          window.location.href = "/";
+          setDiaryState((prev) => ({
+            ...prev,
+            isRedirect: true,
+          }));
         }
         if (res.status === 401) {
           return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
@@ -72,7 +67,7 @@ function MainPage() {
               }));
             });
         }
-        return {};
+        return [];
       });
     },
     {
@@ -101,12 +96,6 @@ function MainPage() {
         if (res.status === 200) {
           return res.json();
         }
-        if (res.status === 403) {
-          alert("로그인이 만료되었습니다. 다시 로그인해주세요.");
-          localStorage.removeItem("accessToken");
-          sessionStorage.removeItem("accessToken");
-          window.location.href = "/";
-        }
         if (res.status === 401) {
           return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
             method: "POST",
@@ -129,7 +118,7 @@ function MainPage() {
               }));
             });
         }
-        return {};
+        return [];
       }),
     {
       onSuccess: (data) => {
@@ -252,6 +241,7 @@ function MainPage() {
           {diaryState.isPurchase ? (
             <PurchaseModal premiumRefetch={premiumRefetch} />
           ) : null}
+          {diaryState.isRedirect ? <RedirectToHomepage /> : null}
         </MainPageWrapper>
       ) : null}
     </div>