Merge pull request #141 from gnims-project/dev

Upload/Main Merge #100

Author: AngelaChaejung

src/img/404.png

@@ -0,0 +1,34 @@
+import React from "react";
+import Icon404 from "../img/404.png";
+import { useNavigate } from "react-router-dom";
+
+const Page404 = () => {
+  const navigate = useNavigate();
+  return (
+    <div className="relative top-[230px]">
+      <div className="flex flex-col gap-[40px] items-center mx-auto w-[167px] h-[237px]">
+        <div>
+          <img src={Icon404} alt="404" />
+        </div>
+      </div>
+      <div className="flex flex-col items-center mx-auto">
+        <div className="text-[20px] leading-[24px]">
+          페이지를 찾을 수 없어요.
+        </div>
+        <div className="text-[20px] leading-[24px]">
+          입력하신 주소를 다시 확인해주세요.
+        </div>
+      </div>
+      <button
+        onClick={() => {
+          navigate("/main");
+        }}
+        className="mt-[80px] mx-auto rounded-lg text-[16px] pt-[15px] font-semibold bg-[#002C51] text-white text-center align-middle w-[335px] h-[50px] justify-center flex shadow"
+      >
+        홈으로 돌아가기
+      </button>
+    </div>
+  );
+};
+
+export default Page404;

src/img/500.png

@@ -0,0 +1,34 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import Icon500 from "../img/500.png";
+
+const Page500 = () => {
+  const navigate = useNavigate();
+  return (
+    <div className="relative top-[230px]">
+      <div className="flex flex-col gap-[40px] items-center mx-auto w-[167px] h-[237px]">
+        <div>
+          <img src={Icon500} alt="500" />
+        </div>
+      </div>
+      <div className="flex flex-col items-center mx-auto ">
+        <div className="text-[20px] leading-[24px]">
+          네트워크 연결 상태가 좋지 않아요.
+        </div>
+        <div className="text-[20px] leading-[24px]">
+          잠시후 다시 시도해주세요.
+        </div>
+      </div>
+      <button
+        onClick={() => {
+          navigate("/main");
+        }}
+        className="mt-[80px] mx-auto rounded-lg text-[16px] pt-[15px] font-semibold bg-[#002C51] text-white text-center align-middle w-[335px] h-[50px] justify-center flex shadow"
+      >
+        확인
+      </button>
+    </div>
+  );
+};
+
+export default Page500;

src/page/Page404.jsx

@@ -15,6 +15,8 @@ import SetProfileNamePage from "./SetProfileNamePage";
 import SignupPage from "./SingupPage";
 import UserSearchPage from "./UserSearchPage";
 import DevelopIng from "./DevelopIng";
+import Page404 from "./Page404";
+import Page500 from "./Page500";
 
 export {
   ChangePasswordPage,
@@ -34,4 +36,6 @@ export {
   SignupPage,
   UserSearchPage,
   DevelopIng,
+  Page404,
+  Page500,
 };

src/page/Page500.jsx

@@ -34,6 +34,12 @@ export const __emailLogin = createAsyncThunk(
           modalMessage: "이메일와 비밀번호를  \n  다시 한 번 확인해주세요.",
         });
         payload.dispatch(__openModal(payload.dispatch));
+      } else {
+        payload.setModalStr({
+          modalTitle: "ID를 찾을 수 없어요.",
+          modalMessage: "이메일와 비밀번호를  \n  다시 한 번 확인해주세요.",
+        });
+        payload.dispatch(__openModal(payload.dispatch));
       }
     }
   }

src/page/index.jsx

@@ -1,7 +1,4 @@
 import axios from "axios";
-import { useState } from "react";
-import { useNavigate } from "react-router";
-import LoadingPage from "../page/LoadingPage";
 
 export const instance = axios.create({
   //로컬
@@ -28,23 +25,23 @@ instance.interceptors.request.use(
   }
 );
 
-// instance.interceptors.response.use(
-//   function (response) {
-//     console.log(response);
-//     return response;
-//   },
-//   function (error) {
-//     const errMsg = error.response.status;
+instance.interceptors.response.use(
+  function (response) {
+    console.log(response);
+    return response;
+  },
+  function (error) {
+    const errMsg = error.response.status;
 
-//     if (errMsg === 401) {
-//       window.location.href = "/login";
-//       return;
-//     }
+    if (errMsg === 401) {
+      window.location.href = "/login";
+      return;
+    }
 
-//     if (errMsg === 500) {
-//       window.location.href = "/*";
-//       return;
-//     }
-//     return Promise.reject(error);
-//   }
-// );
+    if (errMsg === 500) {
+      window.location.href = "/500error";
+      return;
+    }
+    return Promise.reject(error);
+  }
+);

src/redux/modules/LoginSlice.jsx

@@ -25,6 +25,8 @@ import {
   SignupPage,
   LoginPage,
   DevelopIng,
+  Page404,
+  Page500,
 } from "../page/index";
 
 const Router = () => {
@@ -147,6 +149,8 @@ const Router = () => {
 
         {/* 개발중 */}
         <Route path="/developing" element={<DevelopIng />} />
+        <Route path="/404error" element={<Page404 />} />
+        <Route path="/500error" element={<Page500 />} />
       </Routes>
     </Layout>
   );