refactor: query 응답 관련 중복 코드를 함수화하여 분리

boostcampwm2023 · Dec 13, 2023 · 19fff2f · 19fff2f
1 parent 1d5ef53
commit 19fff2f
Show file tree

Hide file tree

Showing 12 changed files with 366 additions and 456 deletions.
diff --git a/BE/src/auth/auth.service.ts b/BE/src/auth/auth.service.ts
@@ -105,7 +105,7 @@ export class AuthService {
   ): Promise<string> {
     const accessTokenPayload = { userId };
     const accessToken = await this.jwtService.sign(accessTokenPayload, {
-      expiresIn: "1h",
+      expiresIn: "5s",
     });
 
     const refreshTokenPayload = {

diff --git a/FE/src/components/DiaryModal/DiaryAnalysisModal.js b/FE/src/components/DiaryModal/DiaryAnalysisModal.js
@@ -12,6 +12,7 @@ import Tag from "../../styles/Modal/Tag";
 import leftIcon from "../../assets/leftIcon.svg";
 import rightIcon from "../../assets/rightIcon.svg";
 import logoNoText from "../../assets/logo-notext.svg";
+import handleResponse from "../../utils/handleResponse";
 
 function DiaryAnalysisModal() {
   const [userState, setUserState] = useRecoilState(userAtom);
@@ -40,40 +41,24 @@ function DiaryAnalysisModal() {
           Authorization: `Bearer ${userState.accessToken}`,
         },
       },
-    ).then((res) => {
-      if (res.status === 200) {
-        return res.json();
-      }
-      if (res.status === 403) {
-        setDiaryState((prev) => ({
-          ...prev,
-          isRedirect: true,
-        }));
-      }
-      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,
-            }));
-          });
-      }
-      throw new Error("error");
-    });
+    ).then((res) =>
+      handleResponse(res, userState.accessToken, {
+        successStatus: 200,
+        onSuccessCallback: () => res.json(),
+        on403Callback: () => {
+          setDiaryState((prev) => ({
+            ...prev,
+            isRedirect: true,
+          }));
+        },
+        on401Callback: (accessToken) => {
+          setUserState((prev) => ({
+            ...prev,
+            accessToken,
+          }));
+        },
+      }),
+    );
   }
 
   const { data: tagsRankData, refetch: tagsRankRefetch } = useQuery(

diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js
@@ -12,6 +12,7 @@ import Calendar from "./Calendar";
 import close from "../../assets/close.svg";
 import getFormattedDate from "../../utils/utils";
 import ModalBackground from "../ModalBackground/ModalBackground";
+import handleResponse from "../../utils/handleResponse";
 
 function DiaryCreateModal(props) {
   const { refetch } = props;
@@ -67,41 +68,24 @@ function DiaryCreateModal(props) {
       },
       body: JSON.stringify(formattedDiaryData),
     })
-      .then((res) => {
-        if (res.status === 201) {
-          return res.json();
-        }
-        if (res.status === 403) {
-          setDiaryState((prev) => ({
-            ...prev,
-            isRedirect: true,
-          }));
-        }
-        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("error");
-      })
+      .then((res) =>
+        handleResponse(res, userState.accessToken, {
+          successStatus: 201,
+          onSuccessCallback: () => res.json(),
+          on403Callback: () =>
+            setDiaryState((prev) => ({
+              ...prev,
+              isRedirect: true,
+            })),
+          on401Callback: (accessToken) => {
+            setUserState((prev) => ({
+              ...prev,
+              accessToken,
+            }));
+            createDiary({ diaryData, accessToken });
+          },
+        }),
+      )
       .then(() => {
         refetch();
         setDiaryState((prev) => ({

diff --git a/FE/src/components/DiaryModal/DiaryDeleteModal.js b/FE/src/components/DiaryModal/DiaryDeleteModal.js
@@ -6,6 +6,7 @@ import diaryAtom from "../../atoms/diaryAtom";
 import userAtom from "../../atoms/userAtom";
 import lastPageAtom from "../../atoms/lastPageAtom";
 import ModalWrapper from "../../styles/Modal/ModalWrapper";
+import handleResponse from "../../utils/handleResponse";
 
 function DiaryDeleteModal(props) {
   const { refetch, pointsRefetch } = props;
@@ -24,44 +25,28 @@ function DiaryDeleteModal(props) {
         },
       },
     )
-      .then((res) => {
-        if (res.status === 204) {
-          return res;
-        }
-        if (res.status === 403) {
-          setDiaryState((prev) => ({
-            ...prev,
-            isRedirect: true,
-          }));
-        }
-        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,
-              });
+      .then((res) =>
+        handleResponse(res, data.accessToken, {
+          successStatus: 204,
+          onSuccessCallback: () => {},
+          on403Callback: () => {
+            setDiaryState((prev) => ({
+              ...prev,
+              isRedirect: true,
+            }));
+          },
+          on401Callback: (accessToken) => {
+            setUserState((prev) => ({
+              ...prev,
+              accessToken,
+            }));
+            deleteDiary({
+              diaryUuid: diaryState.diaryUuid,
+              accessToken,
             });
-        }
-        throw new Error("error");
-      })
+          },
+        }),
+      )
       .then(() => {
         refetch();
         pointsRefetch();

diff --git a/FE/src/components/DiaryModal/DiaryReadModal.js b/FE/src/components/DiaryModal/DiaryReadModal.js
@@ -14,6 +14,7 @@ import editIcon from "../../assets/edit.svg";
 import deleteIcon from "../../assets/delete.svg";
 import close from "../../assets/close.svg";
 import ModalBackground from "../ModalBackground/ModalBackground";
+import handleResponse from "../../utils/handleResponse";
 
 async function getDiary(accessToken, diaryUuid, setUserState, setDiaryState) {
   return fetch(`${process.env.REACT_APP_BACKEND_URL}/diaries/${diaryUuid}`, {
@@ -22,40 +23,24 @@ async function getDiary(accessToken, diaryUuid, setUserState, setDiaryState) {
       "Content-Type": "application/json",
       Authorization: `Bearer ${accessToken}`,
     },
-  }).then((res) => {
-    if (res.status === 200) {
-      return res.json();
-    }
-    if (res.status === 403) {
-      setDiaryState((prev) => ({
-        ...prev,
-        isRedirect: true,
-      }));
-    }
-    if (res.status === 401) {
-      return fetch(`${process.env.REACT_APP_BACKEND_URL}/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,
-          }));
-        });
-    }
-    throw new Error("error");
-  });
+  }).then((res) =>
+    handleResponse(res, accessToken, {
+      successStatus: 200,
+      onSuccessCallback: () => res.json(),
+      on403Callback: () => {
+        setDiaryState((prev) => ({
+          ...prev,
+          isRedirect: true,
+        }));
+      },
+      on401Callback: (accessToken) => {
+        setUserState((prev) => ({
+          ...prev,
+          accessToken,
+        }));
+      },
+    }),
+  );
 }
 
 function DiaryReadModal(props) {

diff --git a/FE/src/components/DiaryModal/DiaryUpdateModal.js b/FE/src/components/DiaryModal/DiaryUpdateModal.js
@@ -12,6 +12,7 @@ import Calendar from "./Calendar";
 import close from "../../assets/close.svg";
 import getFormattedDate from "../../utils/utils";
 import ModalBackground from "../ModalBackground/ModalBackground";
+import handleResponse from "../../utils/handleResponse";
 
 function DiaryUpdateModal(props) {
   const { refetch } = props;
@@ -93,49 +94,34 @@ function DiaryUpdateModal(props) {
         Authorization: `Bearer ${data.accessToken}`,
       },
       body: JSON.stringify(formattedDiaryData),
-    }).then((res) => {
-      if (res.status === 204) {
-        refetch();
-        setDiaryState((prev) => ({
-          ...prev,
-          isRead: true,
-        }));
-      }
-      if (res.status === 403) {
-        console.log("권한 없음");
-        setDiaryState((prev) => ({
-          ...prev,
-          isRedirect: true,
-        }));
-      }
-      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,
-            });
+    }).then((res) =>
+      handleResponse(res, userState.accessToken, {
+        successStatus: 204,
+        onSuccessCallback: () => {
+          refetch();
+          setDiaryState((prev) => ({
+            ...prev,
+            isRead: true,
+          }));
+        },
+        on403Callback: () => {
+          setDiaryState((prev) => ({
+            ...prev,
+            isRedirect: true,
+          }));
+        },
+        on401Callback: (accessToken) => {
+          setUserState((prev) => ({
+            ...prev,
+            accessToken,
+          }));
+          updateDiary({
+            diaryData: diaryData,
+            accessToken,
           });
-      }
-      throw new Error("error");
-    });
+        },
+      }),
+    );
   }
 
   async function getDiary(accessToken, diaryUuid) {