Merge pull request #461 from codestates-seb/fe/feat/ErrProcess#447

[FE] 에러 로직 처리
codestates-seb · Sep 19, 2023 · a0b7b0f · a0b7b0f
2 parents 9ecccbf + 99403b8
commit a0b7b0f
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 52 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -32,6 +32,7 @@ import RewardPage from "./pages/userInfo/RewardPage";
 import ReceiptPage from "./pages/userInfo/ReceiptPage";
 import WatchedListPage from "./pages/contents/WatchedListPage";
 import ResultPage from "./pages/contents/ResultPage";
+import NotFound from "./pages/NotFound";
 import IncomePage from "./pages/userInfo/IncomePage";
 
 function App() {
@@ -115,6 +116,7 @@ function App() {
         <Route path="/activity/income" element={<IncomePage />} />
         <Route path="/watched" element={<WatchedListPage />} />
         <Route path="/result/:keyword" element={<ResultPage />} />
+        <Route path="/*" element={<NotFound/>} />
       </Routes>
       <Footer />
     </BrowserRouter>

diff --git a/client/src/components/UploadPage/CourseUpload.js b/client/src/components/UploadPage/CourseUpload.js
@@ -142,7 +142,6 @@ const CourseUpload = ({ isTags }) => {
           setPresignedUrl(res.data.data);
         })
         .catch((err) => {
-          console.log(err);
           if (err.response.data.code === 409) {
             return setIsModalOpen({
               ...isModalOpen,

diff --git a/client/src/pages/NotFound.js b/client/src/pages/NotFound.js
@@ -0,0 +1,34 @@
+import { useSelector } from "react-redux";
+import { PageContainer } from "../atoms/layouts/PageContainer";
+import styled from "styled-components";
+import { Heading5Typo, Heading1Typo } from "../atoms/typographys/Typographys";
+
+const NotFound = () => {
+  const isDark = useSelector((state) => state.uiSetting.isDark);
+
+  return (
+    <PageContainer isDark={isDark}>
+      <NotFoundBox>
+        <NotFoundContent>현재 페이지를 찾을 수 없습니다.</NotFoundContent>
+        <NotFoundSubContent>404 Not Found</NotFoundSubContent>
+      </NotFoundBox>
+    </PageContainer>
+  );
+};
+
+export default NotFound;
+
+export const NotFoundBox = styled.div`
+  width: 100%;
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const NotFoundContent = styled(Heading1Typo)`
+  margin-bottom: 30px;
+`;
+
+export const NotFoundSubContent = styled(Heading5Typo)``;
diff --git a/client/src/pages/contents/CartPage/CartLeft.js b/client/src/pages/contents/CartPage/CartLeft.js
@@ -33,7 +33,7 @@ const CartLeft = () => {
       })
       .then((res) => {
         console.log(res.data);
-        dispatch(setChecked([]))
+        dispatch(setChecked([]));
       })
       .catch((err) => console.log(err));
   };
@@ -80,7 +80,9 @@ export const CartItems = styled.div`
   min-height: 750px;
   margin: 20px 0px;
   padding: 0px 10px;
-  border: 1px solid ${props=>props.isDark?globalTokens.Gray.value:globalTokens.LightGray.value};
+  border: 1px solid
+    ${(props) =>
+      props.isDark ? globalTokens.Gray.value : globalTokens.LightGray.value};
   border-radius: 8px;
   position: relative;
   background-color: ${(props) =>

diff --git a/client/src/pages/contents/ProblemPage.js b/client/src/pages/contents/ProblemPage.js
@@ -1,5 +1,5 @@
 import { styled } from "styled-components";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import axios from "axios";
@@ -8,38 +8,77 @@ import { setProblems } from "../../redux/createSlice/ProblemSlice";
 import SelectNum from "../../components/ProblemPage/SelectNum";
 import ProblemBox from "../../components/ProblemPage/ProblemBox";
 import { useToken } from "../../hooks/useToken";
-import tokens from '../../styles/tokens.json';
+import tokens from "../../styles/tokens.json";
 import { BodyTextTypo } from "../../atoms/typographys/Typographys";
+import { AlertModal } from "../../atoms/modal/Modal";
 
 const globalTokens = tokens.global;
 
 const ProblemPage = () => {
-  const isDark = useSelector(state=>state.uiSetting.isDark);
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const { videoId } = useParams();
   const refreshToken = useToken();
+  const isDark = useSelector((state) => state.uiSetting.isDark);
   const myId = useSelector((state) => state.loginInfo.myid);
   const videoDatas = useSelector((state) => state.videoInfo.data);
   const token = useSelector((state) => state.loginInfo.accessToken);
   const setting = useSelector((state) => state.problemSlice.setting);
   const problemsData = useSelector((state) => state.problemSlice.data);
   const filtered = problemsData.filter((el, idx) => idx + 1 === setting.isPage);
+  const [errAlert, setErrAlert] = useState({
+    isModalOpen: false,
+    content: "",
+  });
 
   const getProblems = () => {
     return axios
       .get(`https://api.itprometheus.net/videos/${videoId}/questions`, {
         headers: { Authorization: token.authorization },
       })
       .then((res) => {
-        console.log(res.data.data);
         dispatch(setProblems(res.data.data));
       })
       .catch((err) => {
-        if (err.response.data.message === "만료된 토큰입니다.") {
+        if (err.response.data?.code === 401) {
           refreshToken(() => getProblems());
+          setErrAlert({
+            ...errAlert,
+            isModalOpen: true,
+            content: "새로고침 후 다시 시도해주세요.",
+          });
+        } else if (err.response.data?.code === 400) {
+          setErrAlert({
+            ...errAlert,
+            isModalOpen: true,
+            content: "잘못된 접근입니다.",
+          });
+        } else if (err.response.data?.code === 403) {
+          setErrAlert({
+            ...errAlert,
+            isModalOpen: true,
+            content: "로그인 후 가능합니다.",
+          });
+        } else if (err.response.data?.code === 404) {
+          navigate("/*");
+        } else if (err.response.data?.code === 409) {
+          setErrAlert({
+            ...errAlert,
+            isModalOpen: true,
+            content: `${err.response.data.message}`,
+          });
+        } else if (err.response.data?.code === 500) {
+          setErrAlert({
+            ...errAlert,
+            isModalOpen: true,
+            content: "서버로부터 응답이 없습니다.",
+          });
         } else {
-          console.log(err);
+          setErrAlert({
+            ...errAlert,
+            isModalOpen: true,
+            content: "알 수 없는 오류입니다.",
+          });
         }
       });
   };
@@ -49,45 +88,59 @@ const ProblemPage = () => {
   }, []);
 
   return (
-    <PageContainer isDark={isDark}>
-      <ProblemContainer isDark={isDark}>
-        <HeaderBox isDark={isDark}>
-          <Link isDark={isDark} to={`/videos/${videoId}`}>
-            <LectureBtn isDark={isDark}>← 강의로 돌아가기</LectureBtn>
-          </Link>
-          <ProblemHeader isDark={isDark}>문제</ProblemHeader>
-        </HeaderBox>
-        <BodyBox isDark={isDark}>
-          {problemsData.length ? (
-            <>
-              <SelectNum />
-              {filtered.map((el) => (
-                <ProblemBox key={el.questionId} el={el} />
-              ))}
-            </>
-          ) : (
-            <ListEmptyBox>
-              <ListEmptyGuide isDark={isDark}>현재 등록된 강의 문제가 없습니다.</ListEmptyGuide>
-              {myId === videoDatas.channel.memberId && (
-                <>
-                  <ListEmptyGuide isDark={isDark}>
-                    이용자들을 위해 강의 문제들을 추가해 주세요.
-                  </ListEmptyGuide>
-                  <UploadNavBtn
-                    isDark={isDark}
-                    onClick={() =>
-                      navigate(`/videos/${videoId}/problems/upload`)
-                    }
-                  >
-                    강의 문제 추가하기
-                  </UploadNavBtn>
-                </>
-              )}
-            </ListEmptyBox>
-          )}
-        </BodyBox>
-      </ProblemContainer>
-    </PageContainer>
+    <>
+      <PageContainer isDark={isDark}>
+        <ProblemContainer isDark={isDark}>
+          <HeaderBox isDark={isDark}>
+            <Link isDark={isDark} to={`/videos/${videoId}`}>
+              <LectureBtn isDark={isDark}>← 강의로 돌아가기</LectureBtn>
+            </Link>
+            <ProblemHeader isDark={isDark}>문제</ProblemHeader>
+          </HeaderBox>
+          <BodyBox isDark={isDark}>
+            {problemsData.length ? (
+              <>
+                <SelectNum />
+                {filtered.map((el) => (
+                  <ProblemBox key={el.questionId} el={el} />
+                ))}
+              </>
+            ) : (
+              <ListEmptyBox>
+                <ListEmptyGuide isDark={isDark}>
+                  현재 등록된 강의 문제가 없습니다.
+                </ListEmptyGuide>
+                {myId === videoDatas.channel.memberId && (
+                  <>
+                    <ListEmptyGuide isDark={isDark}>
+                      이용자들을 위해 강의 문제들을 추가해 주세요.
+                    </ListEmptyGuide>
+                    <UploadNavBtn
+                      isDark={isDark}
+                      onClick={() =>
+                        navigate(`/videos/${videoId}/problems/upload`)
+                      }
+                    >
+                      강의 문제 추가하기
+                    </UploadNavBtn>
+                  </>
+                )}
+              </ListEmptyBox>
+            )}
+          </BodyBox>
+        </ProblemContainer>
+      </PageContainer>
+      <AlertModal
+        isModalOpen={errAlert.isModalOpen}
+        setIsModalOpen={setErrAlert}
+        isBackdropClickClose={false}
+        content={errAlert.content}
+        buttonTitle="확인"
+        handleButtonClick={() =>
+          setErrAlert({ ...errAlert, isModalOpen: false })
+        }
+      />
+    </>
   );
 };
 
@@ -107,7 +160,8 @@ export const ListEmptyGuide = styled(BodyTextTypo)`
   max-width: 500px;
   margin: 5px 0px;
   text-align: center;
-  color: ${props=>props.isDark?globalTokens.LightGray.value:globalTokens.Gray.value};
+  color: ${(props) =>
+    props.isDark ? globalTokens.LightGray.value : globalTokens.Gray.value};
 `;
 
 export const UploadNavBtn = styled.button`
@@ -127,7 +181,8 @@ export const ProblemContainer = styled.section`
   margin-top: ${globalTokens.Spacing40.value}px;
   margin-bottom: ${globalTokens.Spacing40.value}px;
   padding: 50px 0px 100px 0px;
-  background-color: ${props=>props.isDark?'rgba(255,255,255,0.15)':globalTokens.White.value};
+  background-color: ${(props) =>
+    props.isDark ? "rgba(255,255,255,0.15)" : globalTokens.White.value};
   border-radius: ${globalTokens.Spacing8.value}px;
   display: flex;
   flex-direction: column;
@@ -144,13 +199,15 @@ export const HeaderBox = styled.div`
 
 export const LectureBtn = styled.button`
   font-size: ${globalTokens.BodyText.value}px;
-  color: ${props=>props.isDark?globalTokens.LightRed.value:globalTokens.Negative.value};
+  color: ${(props) =>
+    props.isDark ? globalTokens.LightRed.value : globalTokens.Negative.value};
   margin: 0px 0px ${globalTokens.Spacing16.value}px -50px;
 `;
 
 export const ProblemHeader = styled.h2`
   font-size: ${globalTokens.Heading5.value}px;
-  color: ${props=>props.isDark?globalTokens.White.value:globalTokens.Black.value}
+  color: ${(props) =>
+    props.isDark ? globalTokens.White.value : globalTokens.Black.value};
 `;
 
 export const BodyBox = styled.div`