Merge pull request #184 from boostcampwm2023/feat/144-error-code-hand…

…ling [Feat] 400번대 에러 핸들링 (401, 403)
boostcampwm2023 · Nov 30, 2023 · 7daf070 · 7daf070
2 parents 49f540c + d9bcb50
commit 7daf070
Show file tree

Hide file tree

Showing 9 changed files with 198 additions and 72 deletions.
diff --git a/BE/src/auth/guard/auth.jwt-guard.ts b/BE/src/auth/guard/auth.jwt-guard.ts
@@ -32,6 +32,7 @@ export class JwtAuthGuard extends NestAuthGuard("jwt") {
       } else if (err.message === "refresh expired") {
         throw new ForbiddenException("리프레쉬 토큰이 만료되었습니다.");
       }
+
       throw new ForbiddenException("유효하지 않은 리프레쉬 토큰입니다.");
     }
     return user;

diff --git a/BE/src/diaries/diaries.service.ts b/BE/src/diaries/diaries.service.ts
@@ -33,7 +33,6 @@ export class DiariesService {
     const tagEntities = await this.getTags(tags);
     const sentimentResult: SentimentDto = await this.getSentiment(content);
 
-    console.log(sentimentResult);
     const diary = await this.diariesRepository.createDiary(
       createDiaryDto,
       encryptedContent,

diff --git a/FE/.eslintrc.js b/FE/.eslintrc.js
@@ -28,6 +28,8 @@ module.exports = {
     "react/prop-types": "off",
     "import/no-extraneous-dependencies": ["off"],
     "react/no-danger": "off",
+    "no-alert": "off",
+    "no-shadow": "off",
   },
   settings: {
     "import/resolver": {

diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js
@@ -8,6 +8,7 @@ import shapeAtom from "../../atoms/shapeAtom";
 import ModalWrapper from "../../styles/Modal/ModalWrapper";
 import DiaryModalHeader from "../../styles/Modal/DiaryModalHeader";
 import deleteIcon from "../../assets/deleteIcon.svg";
+import preventBeforeUnload from "../../utils/utils";
 
 function DiaryCreateModal(props) {
   const { refetch } = props;
@@ -27,15 +28,10 @@ function DiaryCreateModal(props) {
   });
 
   useEffect(() => {
-    const handleBeforeUnload = (e) => {
-      e.preventDefault();
-      e.returnValue = "";
-    };
-
-    window.addEventListener("beforeunload", handleBeforeUnload);
+    window.addEventListener("beforeunload", preventBeforeUnload);
 
     return () => {
-      window.removeEventListener("beforeunload", handleBeforeUnload);
+      window.removeEventListener("beforeunload", preventBeforeUnload);
     };
   }, []);
 
@@ -69,7 +65,18 @@ function DiaryCreateModal(props) {
       },
       body: JSON.stringify(data.diaryData),
     })
-      .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 = "/";
+        }
+        throw new Error("일기 작성에 실패했습니다.");
+      })
       .then(() => {
         refetch();
         setDiaryState((prev) => ({

diff --git a/FE/src/components/DiaryModal/DiaryDeleteModal.js b/FE/src/components/DiaryModal/DiaryDeleteModal.js
@@ -19,9 +19,22 @@ function DiaryDeleteModal(props) {
         "Content-Type": "application/json",
         Authorization: `Bearer ${data.accessToken}`,
       },
-    }).then(() => {
-      refetch();
-    });
+    })
+      .then((res) => {
+        if (res.status === 200) {
+          return res;
+        }
+        if (res.status === 403) {
+          alert("로그인이 만료되었습니다. 다시 로그인해주세요.");
+          localStorage.removeItem("accessToken");
+          sessionStorage.removeItem("accessToken");
+          window.location.href = "/";
+        }
+        return null;
+      })
+      .then(() => {
+        refetch();
+      });
   }
 
   const {

diff --git a/FE/src/components/DiaryModal/DiaryReadModal.js b/FE/src/components/DiaryModal/DiaryReadModal.js
@@ -42,25 +42,58 @@ function DiaryModalEmotionIndicator({ emotion }) {
   );
 }
 
-async function getDiary(accessToken, diaryUuid) {
+async function getDiary(accessToken, diaryUuid, setUserState) {
   return fetch(`http://223.130.129.145:3005/diaries/${diaryUuid}`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
       Authorization: `Bearer ${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("http://223.130.129.145:3005/auth/reissue", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${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 {};
+  });
 }
 
 function DiaryReadModal(props) {
   const { refetch } = props;
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
-  const userState = useRecoilValue(userAtom);
+  const [userState, setUserState] = useRecoilState(userAtom);
   const shapeState = useRecoilValue(shapeAtom);
   const [shapeData, setShapeData] = React.useState("");
   const { data, isLoading, isError } = useQuery(
-    "diary",
-    () => getDiary(userState.accessToken, diaryState.diaryUuid),
+    ["diary", userState.accessToken],
+    () => getDiary(userState.accessToken, diaryState.diaryUuid, setUserState),
     {
       onSuccess: (loadedData) => {
         const foundShapeData = shapeState.find(
@@ -143,17 +176,17 @@ function DiaryReadModal(props) {
       <DiaryModalTagBar>
         <DiaryModalTagName>태그</DiaryModalTagName>
         <DiaryModalTagList>
-          {data.tags.map((tag) => (
+          {data.tags?.map((tag) => (
             <DiaryModalTag key={tag}>{tag}</DiaryModalTag>
           ))}
         </DiaryModalTagList>
       </DiaryModalTagBar>
       <DiaryModalEmotionBar>
         <DiaryModalEmotionIndicator
           emotion={{
-            positive: data.emotion.positive,
-            neutral: data.emotion.neutral,
-            negative: data.emotion.negative,
+            positive: data.emotion?.positive,
+            neutral: data.emotion?.neutral,
+            negative: data.emotion?.negative,
           }}
         />
         <DiaryModalIcon>

diff --git a/FE/src/components/DiaryModal/DiaryUpdateModal.js b/FE/src/components/DiaryModal/DiaryUpdateModal.js
@@ -8,6 +8,7 @@ import shapeAtom from "../../atoms/shapeAtom";
 import ModalWrapper from "../../styles/Modal/ModalWrapper";
 import DiaryModalHeader from "../../styles/Modal/DiaryModalHeader";
 import deleteIcon from "../../assets/deleteIcon.svg";
+import preventBeforeUnload from "../../utils/utils";
 
 async function getDiary(accessToken, diaryUuid) {
   return fetch(`http://223.130.129.145:3005/diaries/${diaryUuid}`, {
@@ -16,7 +17,19 @@ async function getDiary(accessToken, diaryUuid) {
       "Content-Type": "application/json",
       Authorization: `Bearer ${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.removeEventListener("beforeunload", preventBeforeUnload);
+      window.location.href = "/";
+    }
+    return {};
+  });
 }
 
 // TODO: 일기 데이터 수정 API 연결
@@ -45,24 +58,34 @@ function DiaryUpdateModal(props) {
         Authorization: `Bearer ${data.accessToken}`,
       },
       body: JSON.stringify(data.diaryData),
-    }).then(() => {
-      refetch();
-      setDiaryState((prev) => ({
-        ...prev,
-        isLoading: true,
-      }));
-    });
+    })
+      .then((res) => {
+        if (res.status === 200) {
+          return res;
+        }
+        if (res.status === 403) {
+          alert("로그인이 만료되었습니다. 다시 로그인해주세요.");
+          localStorage.removeItem("accessToken");
+          sessionStorage.removeItem("accessToken");
+          window.removeEventListener("beforeunload", preventBeforeUnload);
+          window.location.href = "/";
+        }
+        return null;
+      })
+      .then(() => {
+        refetch();
+        setDiaryState((prev) => ({
+          ...prev,
+          isLoading: true,
+        }));
+      });
   }
 
   useEffect(() => {
-    const handleBeforeUnload = (e) => {
-      e.preventDefault();
-      e.returnValue = "";
-    };
-    window.addEventListener("beforeunload", handleBeforeUnload);
+    window.addEventListener("beforeunload", preventBeforeUnload);
 
     return () => {
-      window.removeEventListener("beforeunload", handleBeforeUnload);
+      window.removeEventListener("beforeunload", preventBeforeUnload);
     };
   }, []);
 
@@ -166,7 +189,7 @@ function DiaryUpdateModal(props) {
         }
       />
       <DiaryModalTagWrapper>
-        {diaryData.tags.map((tag) => (
+        {diaryData.tags?.map((tag) => (
           <DiaryModalTagBox
             key={tag}
             onClick={(e) => {