Merge pull request #270 from boostcampwm2023/refactor/268-fe-refactor

[Refactor] FE 코드 가독성 개선 등등 리팩토링
boostcampwm2023 · Dec 14, 2023 · c991d4d · c991d4d
2 parents c8cff6b + b62b101
commit c991d4d
Show file tree

Hide file tree

Showing 19 changed files with 399 additions and 541 deletions.
diff --git a/FE/src/App.js b/FE/src/App.js
@@ -6,7 +6,6 @@ import { createGlobalStyle } from "styled-components";
 import { useRecoilState, useSetRecoilState } from "recoil";
 import { Route, Routes } from "react-router-dom";
 import userAtom from "./atoms/userAtom";
-import diaryAtom from "./atoms/diaryAtom";
 import Header from "./components/Header/Header";
 import HomePage from "./pages/HomePage";
 import MainPage from "./pages/MainPage";
@@ -42,7 +41,6 @@ const GlobalStyle = createGlobalStyle`
 
 function App() {
   const [userState, setUserState] = useRecoilState(userAtom);
-  const setDiaryState = useSetRecoilState(diaryAtom);
 
   useLayoutEffect(() => {
     let accessToken = localStorage.getItem("accessToken");
@@ -68,12 +66,6 @@ function App() {
         window.history.replaceState({}, "", "/");
       }
     }
-
-    window.onpopstate = (event) => {
-      if (event.state) {
-        setDiaryState(event.state);
-      }
-    };
   }, []);
 
   return (

diff --git a/FE/src/components/Button/SwitchButton.js b/FE/src/components/Button/SwitchButton.js
@@ -2,9 +2,7 @@ import React, { useState } from "react";
 import styled from "styled-components";
 
 function SwitchButton(props) {
-  // 위치 설정 관련 props
   const { bottom, right } = props;
-  // 버튼 내용 / 이벤트 관련 props
   const { leftContent, rightContent, leftEvent, rightEvent } = props;
   const [current, setCurrent] = useState(leftContent);
 

diff --git a/FE/src/components/DiaryModal/DiaryAnalysisModal.js b/FE/src/components/DiaryModal/DiaryAnalysisModal.js
@@ -12,8 +12,11 @@ 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);
+  const setDiaryState = useSetRecoilState(diaryAtom);
   const [buttonDisabled, setButtonDisabled] = useState(false);
   const [currentYear, setCurrentYear] = useState(dayjs("2023"));
   const [emotion, setEmotion] = useState({
@@ -22,8 +25,6 @@ function DiaryAnalysisModal() {
     neutral: 0,
   });
   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,
@@ -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,
-            }));
-          });
-      }
-      return {};
-    });
+    ).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(
@@ -195,14 +180,11 @@ function DiaryAnalysisModal() {
                 <DailyStreakDay>{day}</DailyStreakDay>
               </DailyStreak>
             ))}
-            {
-              // dayjs로 1월 1일 이 무슨 요일인지 알아내서 그거에 맞게 빈칸 넣어주기
-              Array.from({ length: currentYear.day() }, (v, i) => i + 1).map(
-                (day) => (
-                  <DailyStreak key={`not-current-year-${day}`} $bg='none' />
-                ),
-              )
-            }
+            {Array.from({ length: currentYear.day() }, (v, i) => i + 1).map(
+              (day) => (
+                <DailyStreak key={`not-current-year-${day}`} $bg='none' />
+              ),
+            )}
             {Array.from(
               {
                 length:
@@ -470,7 +452,6 @@ function ShapeRanking(props) {
   );
 }
 
-// 일기 나열 페이지와 중복되는 부분이 많아서 일단은 일기 나열 페이지를 재활용했습니다.
 const DiaryAnalysisModalWrapper = styled.div`
   width: 95%;
   height: 97.5%;

diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js
@@ -12,14 +12,14 @@ 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;
-  const [isInput, setIsInput] = useState(false);
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
   const [userState, setUserState] = useRecoilState(userAtom);
+  const [isInput, setIsInput] = useState(false);
 
-  // TODO: 날짜 선택 기능 구현
   const [diaryData, setDiaryData] = useState({
     title: "",
     content: "",
@@ -68,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("다이어리 생성에 실패했습니다.");
-      })
+      .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) => ({
@@ -112,11 +95,7 @@ function DiaryCreateModal(props) {
       });
   }
 
-  const {
-    mutate: createDiary,
-    // isLoading: diaryIsLoading,
-    // isError: diaryIsError,
-  } = useMutation(createDiaryFn);
+  const { mutate: createDiary } = useMutation(createDiaryFn);
 
   return (
     <>

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,55 +25,35 @@ 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("일기 삭제 실패");
-      })
+          },
+        }),
+      )
       .then(() => {
         refetch();
         pointsRefetch();
       });
   }
 
-  const {
-    mutate: deleteDiary,
-    // isLoading,
-    // error,
-  } = useMutation(deleteDiaryFn);
+  const { mutate: deleteDiary } = useMutation(deleteDiaryFn);
 
   return (
     <DeleteModalWrapper $left='50%' width='15vw' height='10vh' opacity='0'>

diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js
@@ -1,6 +1,6 @@
 /* eslint-disable */
 
-import React, { useEffect, useLayoutEffect } from "react";
+import React, { useEffect, useLayoutEffect, useState } from "react";
 import styled from "styled-components";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import DatePicker from "react-datepicker";
@@ -13,11 +13,11 @@ 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({
+  const [selectedDiary, setSelectedDiary] = useState(null);
+  const [filterState, setFilterState] = useState({
     date: {
       start: null,
       end: null,
@@ -30,7 +30,7 @@ function DiaryListModal() {
     shape: [],
     tag: [],
   });
-  const [filteredDiaryList, setFilteredDiaryList] = React.useState([]);
+  const [filteredDiaryList, setFilteredDiaryList] = useState([]);
 
   useLayoutEffect(() => {
     if (diaryState.diaryList) {