Merge pull request #245 from boostcampwm2023/fix/239-4xx-api-fix

[Fix] 4xx대 에러 응답 처리
boostcampwm2023 · Dec 7, 2023 · fd63190 · fd63190
2 parents eb32b04 + 6fbe6e9
commit fd63190
Show file tree

Hide file tree

Showing 9 changed files with 298 additions and 57 deletions.
diff --git a/BE/package-lock.json b/BE/package-lock.json
diff --git a/FE/.eslintrc.js b/FE/.eslintrc.js
@@ -30,6 +30,7 @@ module.exports = {
     "react/no-danger": "off",
     "no-alert": "off",
     "no-shadow": "off",
+    "no-use-before-define": "off",
   },
   settings: {
     "import/resolver": {

diff --git a/FE/public/maintest2.fbx b/FE/public/maintest2.fbx
diff --git a/FE/src/components/DiaryModal/DiaryAnalysisModal.js b/FE/src/components/DiaryModal/DiaryAnalysisModal.js
@@ -71,15 +71,15 @@ function DiaryAnalysisModal() {
   }
 
   const { data: tagsRankData, refetch: tagsRankRefetch } = useQuery(
-    ["tagsRank"],
+    ["tagsRank", userState.accessToken],
     async () => {
       const result = await getDataFn("tags-rank");
       return result;
     },
   );
 
   const { data: shapesRankData, refetch: shapesRankRefetch } = useQuery(
-    ["shapesRank"],
+    ["shapesRank", userState.accessToken],
     async () => {
       const result = await getDataFn("shapes-rank");
       return result;
@@ -92,7 +92,7 @@ function DiaryAnalysisModal() {
   );
 
   const { data: diaryAnalysisData, refetch: diaryAnalysisRefetch } = useQuery(
-    ["diaryAnalysis"],
+    ["diaryAnalysis", userState.accessToken],
     async () => {
       const result = await getDataFn("diaries");
       return result;

diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js
@@ -1,5 +1,7 @@
+/* eslint-disable */
+
 import React, { useEffect, useState } from "react";
-import { useRecoilValue, useSetRecoilState } from "recoil";
+import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
 import { useMutation } from "react-query";
 import styled from "styled-components";
 import userAtom from "../../atoms/userAtom";
@@ -15,7 +17,7 @@ function DiaryCreateModal(props) {
   const { refetch } = props;
   const [isInput, setIsInput] = useState(false);
   const diaryState = useRecoilValue(diaryAtom);
-  const userState = useRecoilValue(userAtom);
+  const [userState, setUserState] = useRecoilState(userAtom);
   const setDiaryState = useSetRecoilState(diaryAtom);
 
   // TODO: 날짜 선택 기능 구현
@@ -58,7 +60,7 @@ function DiaryCreateModal(props) {
   };
 
   async function createDiaryFn(data) {
-    const diaryData = {
+    const formattedDiaryData = {
       title: data.diaryData.title,
       content: data.diaryData.content,
       date: getFormattedDate(data.diaryData.date),
@@ -73,7 +75,7 @@ function DiaryCreateModal(props) {
         "Content-Type": "application/json",
         Authorization: `Bearer ${data.accessToken}`,
       },
-      body: JSON.stringify(diaryData),
+      body: JSON.stringify(formattedDiaryData),
     })
       .then((res) => {
         if (res.status === 201) {
@@ -87,7 +89,30 @@ function DiaryCreateModal(props) {
           sessionStorage.removeItem("nickname");
           window.location.href = "/";
         }
-        throw new Error("error");
+        if (res.status === 401) {
+          return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${userState.accessToken}`,
+            },
+          })
+            .then((res) => res.json())
+            .then((data) => {
+              if (localStorage.getItem("accessToken")) {
+                localStorage.setItem("accessToken", data.accessToken);
+              }
+              if (sessionStorage.getItem("accessToken")) {
+                sessionStorage.setItem("accessToken", data.accessToken);
+              }
+              setUserState((prev) => ({
+                ...prev,
+                accessToken: data.accessToken,
+              }));
+              createDiary({ diaryData, accessToken: data.accessToken });
+            });
+        }
+        throw new Error("다이어리 생성에 실패했습니다.");
       })
       .then(() => {
         refetch();

diff --git a/FE/src/components/DiaryModal/DiaryDeleteModal.js b/FE/src/components/DiaryModal/DiaryDeleteModal.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { useMutation } from "react-query";
 import styled from "styled-components";
-import { useRecoilValue, useRecoilState } from "recoil";
+import { useRecoilState } from "recoil";
 import diaryAtom from "../../atoms/diaryAtom";
 import userAtom from "../../atoms/userAtom";
 import lastPageAtom from "../../atoms/lastPageAtom";
@@ -10,7 +10,7 @@ import ModalWrapper from "../../styles/Modal/ModalWrapper";
 function DiaryDeleteModal(props) {
   const { refetch, pointsRefetch } = props;
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
-  const userState = useRecoilValue(userAtom);
+  const [userState, setUserState] = useRecoilState(userAtom);
   const [lastPageState, setLastPageState] = useRecoilState(lastPageAtom);
 
   async function deleteDiaryFn(data) {
@@ -36,7 +36,33 @@ function DiaryDeleteModal(props) {
           sessionStorage.removeItem("nickname");
           window.location.href = "/";
         }
-        return null;
+        if (res.status === 401) {
+          return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${data.accessToken}`,
+            },
+          })
+            .then((res) => res.json())
+            .then((data) => {
+              if (localStorage.getItem("accessToken")) {
+                localStorage.setItem("accessToken", data.accessToken);
+              }
+              if (sessionStorage.getItem("accessToken")) {
+                sessionStorage.setItem("accessToken", data.accessToken);
+              }
+              setUserState((prev) => ({
+                ...prev,
+                accessToken: data.accessToken,
+              }));
+              deleteDiary({
+                diaryUuid: diaryState.diaryUuid,
+                accessToken: data.accessToken,
+              });
+            });
+        }
+        throw new Error("일기 삭제 실패");
       })
       .then(() => {
         refetch();

diff --git a/FE/src/components/DiaryModal/DiaryUpdateModal.js b/FE/src/components/DiaryModal/DiaryUpdateModal.js
@@ -19,7 +19,7 @@ function DiaryUpdateModal(props) {
   const titleRef = useRef(null);
   const contentRef = useRef(null);
   const [isInput, setIsInput] = useState(true);
-  const userState = useRecoilValue(userAtom);
+  const [userState, setUserState] = useRecoilState(userAtom);
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
   const [diaryData, setDiaryData] = useState({
     uuid: diaryState.diaryUuid,
@@ -77,7 +77,7 @@ function DiaryUpdateModal(props) {
   };
 
   async function updateDiaryFn(data) {
-    const diaryData = {
+    const formattedDiaryData = {
       uuid: data.diaryData.uuid,
       title: data.diaryData.title,
       content: data.diaryData.content,
@@ -93,15 +93,52 @@ function DiaryUpdateModal(props) {
         "Content-Type": "application/json",
         Authorization: `Bearer ${data.accessToken}`,
       },
-      body: JSON.stringify(diaryData),
-    }).then(() => {
-      refetch();
-      setDiaryState((prev) => ({
-        ...prev,
-        isLoading: true,
-      }));
+      body: JSON.stringify(formattedDiaryData),
+    }).then((res) => {
+      if (res.status === 204) {
+        refetch();
+        setDiaryState((prev) => ({
+          ...prev,
+          isLoading: true,
+        }));
+      }
+      if (res.status === 403) {
+        alert("로그인이 만료되었습니다. 다시 로그인해주세요.");
+        localStorage.removeItem("accessToken");
+        localStorage.removeItem("nickname");
+        sessionStorage.removeItem("accessToken");
+        sessionStorage.removeItem("nickname");
+        window.location.href = "/";
+      }
+      if (res.status === 401) {
+        return fetch(`${process.env.REACT_APP_BACKEND_URL}/auth/reissue`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${data.accessToken}`,
+          },
+        })
+          .then((res) => res.json())
+          .then((data) => {
+            if (localStorage.getItem("accessToken")) {
+              localStorage.setItem("accessToken", data.accessToken);
+            }
+            if (sessionStorage.getItem("accessToken")) {
+              sessionStorage.setItem("accessToken", data.accessToken);
+            }
+            setUserState((prev) => ({
+              ...prev,
+              accessToken: data.accessToken,
+            }));
+            updateDiary({
+              diaryData: diaryData,
+              accessToken: data.accessToken,
+            });
+          });
+      }
     });
   }
+
   async function getDiary(accessToken, diaryUuid) {
     return fetch(`${process.env.REACT_APP_BACKEND_URL}/diaries/${diaryUuid}`, {
       method: "GET",

diff --git a/FE/src/pages/MainPage.js b/FE/src/pages/MainPage.js
@@ -89,15 +89,48 @@ function MainPage() {
   );
 
   const { refetch: pointsRefetch } = useQuery(
-    "points",
+    ["points", userState.accessToken],
     () =>
       fetch(`${process.env.REACT_APP_BACKEND_URL}/lines`, {
         method: "GET",
         headers: {
           "Content-Type": "application/json",
           Authorization: `Bearer ${userState.accessToken}`,
         },
-      }).then((res) => res.json()),
+      }).then((res) => {
+        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",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${userState.accessToken}`,
+            },
+          })
+            .then((res) => res.json())
+            .then((data) => {
+              if (localStorage.getItem("accessToken")) {
+                localStorage.setItem("accessToken", data.accessToken);
+              }
+              if (sessionStorage.getItem("accessToken")) {
+                sessionStorage.setItem("accessToken", data.accessToken);
+              }
+              setUserState((prev) => ({
+                ...prev,
+                accessToken: data.accessToken,
+              }));
+            });
+        }
+        return {};
+      }),
     {
       onSuccess: (data) => {
         data.forEach((point) => {