⚡️ :: 내 리뷰 페이지 동문검증로직, axios 인터셉터 수정

StuBee2 · Oct 5, 2023 · 2cf4446 · 2cf4446
1 parent 779e2d0
commit 2cf4446
Show file tree

Hide file tree

Showing 19 changed files with 97 additions and 63 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,7 @@ config.json
 dist
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,11 +13,12 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "react-kakao-maps-sdk": "1.1.1",
     "@types/jest": "^27.0.1",
     "@types/js-cookie": "^3.0.3",
     "@types/node": "^16.7.13",
     "@types/react-router-dom": "^5.3.3",
-    "axios": "^1.3.5",
+    "axios": "^0.27.2",
     "css-loader": "^6.8.1",
     "dayjs": "^1.11.10",
     "esbuild-loader": "^2.19.0",

diff --git a/public/index.html b/public/index.html
@@ -15,7 +15,10 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-
+    <!-- <script
+      type="text/javascript"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAOMAP_API_KEY"
+    ></script> -->
     <div id="root"></div>
     <div id="modal"></div>
   </body>

diff --git a/src/components/Home/UserInfoAndExternalSite/ExternalSite/index.tsx b/src/components/Home/UserInfoAndExternalSite/ExternalSite/index.tsx
@@ -7,7 +7,7 @@ export default function ExternalSite() {
     <S.ExternalSiteContainer>
       <S.ExternalSiteTitle>
         <img src={web} alt="이미지 없음" />
-        <p>외부사이트 바로가기</p>
+        <p>더 많은 정보를 알고 싶다면?</p>
       </S.ExternalSiteTitle>
       <S.ExternalSiteWrapper>
         {EXTERNALSITE_ITEMS.map((item) => (

diff --git a/src/components/Register/index.tsx b/src/components/Register/index.tsx
@@ -1,3 +1,4 @@
+import useAlumniCheck from "@src/hooks/Auth/useAlumniCheck";
 import useTokenCheck from "@src/hooks/Auth/useTokenCheck";
 import { useCustomHeader } from "@src/hooks/Header/useCustomHeader";
 import { useState } from "react";
@@ -9,6 +10,8 @@ import * as S from "./style";
 
 export default function Register() {
   useTokenCheck();
+  useAlumniCheck();
+
   useCustomHeader(S.RegisterCustomHeader);
   const [isModalOpen, setIsModalOpen] = useState(false);
   return (

diff --git a/src/hooks/Auth/useAlumniCheck.ts b/src/hooks/Auth/useAlumniCheck.ts
@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { ACCESS_TOKEN_KEY } from "@src/constants/Auth/auth.constant";
+import Token from "@src/libs/Token/Token";
+import { useNavigate } from "react-router-dom";
+import { useRollingToast } from "@stubee2/stubee2-rolling-toastify";
+import { jwtDecoding } from "@src/utils/Auth/jwtDecoding";
+
+const useAlumniCheck = () => {
+  const navigate = useNavigate();
+  const { rollingToast } = useRollingToast();
+  const memberRole = jwtDecoding("authority");
+
+  useEffect(() => {
+    const checkAlumni = () => {
+      if (Token.getToken(ACCESS_TOKEN_KEY) && memberRole === "TEMP") {
+        rollingToast("동문 인증이 필요한 기능입니다.", "warning");
+        navigate("/");
+      }
+    };
+    checkAlumni();
+  }, [navigate]);
+};
+
+export default useAlumniCheck;
diff --git a/src/hooks/Company/useRegistCompany.ts b/src/hooks/Company/useRegistCompany.ts
@@ -9,6 +9,8 @@ import { QUERY_KEYS } from "@src/queries/queryKey";
 import { useQueryInvalidates } from "../Invalidates/useQueryInvalidates";
 import { useRecoilState } from "recoil";
 import { CompanyRegistAtom } from "@src/stores/company/company.store";
+import axios, { AxiosError } from "axios";
+import { companyErrorHanlder } from "@src/utils/Error/Company/companyErrorHanlder";
 
 export const useRegistCompany = () => {
   const imgRef: MutableRefObject<HTMLInputElement | null> = useRef(null);
@@ -37,7 +39,7 @@ export const useRegistCompany = () => {
         setImgUrl(imgUrl);
       },
       onError: (e) => {
-        rollingToast("이미지를 전송실패", "error");
+        rollingToast("이미지 전송실패", "error");
       },
     });
   };
@@ -82,8 +84,12 @@ export const useRegistCompany = () => {
           setImgUrl("");
           navigate("/");
         },
-        onError: (e) => {
-          rollingToast("기업등록 요청을 하지 못했습니다!", "error");
+        onError: (error) => {
+          if (axios.isAxiosError(error)) {
+            console.log(error.response?.data);
+            const { status, message } = error.response?.data as AxiosError;
+            rollingToast(companyErrorHanlder(Number(status), message), "error");
+          }
         },
       });
     }

diff --git a/src/hooks/EditNickName/useEditNickName.ts b/src/hooks/EditNickName/useEditNickName.ts
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { usePatchMyNickNameMutation } from "@src/queries/Member/Member.query";
 import { useQueryClient } from "react-query";
 import { QUERY_KEYS } from "@src/queries/queryKey";
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 import { useRollingToast } from "@stubee2/stubee2-rolling-toastify";
 import { memberErrorHandler } from "@src/utils/Error/Member/memberErrorHandler";
 
@@ -56,8 +56,8 @@ export const useEditNickName = (nickName: string) => {
         },
         onError: (error) => {
           if (axios.isAxiosError(error)) {
-            const { status, message } = error.response?.data;
-            rollingToast(memberErrorHandler(status, message), "error");
+            const { status, message } = error.response?.data as AxiosError;
+            rollingToast(memberErrorHandler(Number(status), message), "error");
           }
         },
       }

diff --git a/src/hooks/Reivew/useReigstReview.ts b/src/hooks/Reivew/useReigstReview.ts
@@ -3,7 +3,7 @@ import { usePostReviewMutation } from "@src/queries/Review/review.query";
 import { useState } from "react";
 import { useRollingToast } from "@stubee2/stubee2-rolling-toastify";
 import { ReviewParam } from "@src/repositories/Review/review.repository";
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 import { reviewErrorHanlder } from "@src/utils/Error/Review/reviewErrorHanlder";
 import { QUERY_KEYS } from "@src/queries/queryKey";
 import { CompanyReviewRegisterModalAtom } from "@src/stores/company/company.store";
@@ -111,8 +111,8 @@ export const useRegistReview = (companyId: string) => {
         },
         onError: (error) => {
           if (axios.isAxiosError(error)) {
-            const { status, message } = error.response?.data;
-            rollingToast(reviewErrorHanlder(status, message), "error");
+            const { status, message } = error.response?.data as AxiosError;
+            rollingToast(reviewErrorHanlder(Number(status), message), "error");
           }
         },
       });

diff --git a/src/hooks/Reivew/useSetUpReview.ts b/src/hooks/Reivew/useSetUpReview.ts
@@ -2,7 +2,7 @@ import { QUERY_KEYS } from "@src/queries/queryKey";
 import { useDeleteMyReviewMutation } from "@src/queries/Review/review.query";
 import { reviewErrorHanlder } from "@src/utils/Error/Review/reviewErrorHanlder";
 import { useRollingToast } from "@stubee2/stubee2-rolling-toastify";
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 import { useState } from "react";
 import { useQueryInvalidates } from "../Invalidates/useQueryInvalidates";
 
@@ -43,8 +43,8 @@ export const useSetUpReview = () => {
         },
         onError: (error) => {
           if (axios.isAxiosError(error)) {
-            const { status, message } = error.response?.data;
-            rollingToast(reviewErrorHanlder(status, message), "error");
+            const { status, message } = error.response?.data as AxiosError;
+            rollingToast(reviewErrorHanlder(Number(status), message), "error");
           }
         },
       });

diff --git a/src/libs/Axios/customAxios.ts b/src/libs/Axios/customAxios.ts
@@ -20,4 +20,4 @@ export const rollingAxios = axios.create({
 });
 
 rollingAxios.interceptors.request.use(requestHandler, (response) => response);
-// rollingAxios.interceptors.response.use((response) => response, responseHandler);
+rollingAxios.interceptors.response.use((response) => response, responseHandler);
diff --git a/src/libs/Axios/requestHandler.ts b/src/libs/Axios/requestHandler.ts
@@ -1,37 +1,20 @@
-import { InternalAxiosRequestConfig } from "axios";
+import { AxiosRequestConfig } from "axios";
 import {
   ACCESS_TOKEN_KEY,
   REFRESH_TOKEN_KEY,
   REQUEST_TOKEN_KEY,
 } from "@src/constants/Auth/auth.constant";
 import Token from "../Token/Token";
-import { rollingAxios } from "./customAxios";
-import dayjs from "dayjs";
-import authRepositoryImpl from "@src/repositories/Auth/auth.repositoryImpl";
-import { jwtDecoding } from "@src/utils/Auth/jwtDecoding";
 
-export const requestHandler = async (config: InternalAxiosRequestConfig) => {
-  let access_token = Token.getToken(ACCESS_TOKEN_KEY);
+export const requestHandler = (config: AxiosRequestConfig) => {
+  const access_token = Token.getToken(ACCESS_TOKEN_KEY);
   const refresh_token = Token.getToken(REFRESH_TOKEN_KEY);
-  const expirationAt = new Date(Number(jwtDecoding("exp")) * 1000); // 1000을 곱해 밀리초 단위로 변환
 
-  // 만료시간과 현재 시간을 비교하여 0 미만이면 어세스 토큰이 만료된 것이므로 아래 조건문 실행
-  if (dayjs(expirationAt).diff(dayjs()) < 0 && refresh_token) {
-    try {
-      const { accessToken: newAccessToken } =
-        await authRepositoryImpl.postRefreshToken({
-          refreshToken: refresh_token,
-        });
-      Token.setToken(ACCESS_TOKEN_KEY, newAccessToken);
-      access_token = newAccessToken;
-    } catch (e) {
-      // 요청을 실패하면 리프레쉬 토큰도 만료이므로 아래처럼 처리
-      Token.clearToken();
-      window.alert("토큰이 만료되었습니다!");
-      window.location.href = "/";
-    }
+  if (access_token || refresh_token) {
+    config.headers = {
+      "Content-Type": "application/json",
+      [REQUEST_TOKEN_KEY]: `Bearer ${Token.getToken(ACCESS_TOKEN_KEY)}`,
+    };
   }
-
-  rollingAxios.defaults.headers[REQUEST_TOKEN_KEY] = `Bearer ${access_token}`;
   return config;
 };
diff --git a/src/libs/Axios/responseHandler.ts b/src/libs/Axios/responseHandler.ts
@@ -11,7 +11,6 @@ import { rollingAxios } from "./customAxios";
 export const responseHandler = async (error: AxiosError) => {
   const access_token = Token.getToken(ACCESS_TOKEN_KEY);
   const refresh_token = Token.getToken(REFRESH_TOKEN_KEY);
-
   if (error.response) {
     const {
       config: originalRequest,
@@ -30,6 +29,8 @@ export const responseHandler = async (error: AxiosError) => {
         rollingAxios.defaults.headers.common[
           REQUEST_TOKEN_KEY
         ] = `Bearer ${newAccessToken}`;
+
+        return rollingAxios(originalRequest);
       } catch (e) {
         Token.clearToken();
         window.alert("토큰이 만료되었습니다!");

diff --git a/src/pages/ReviewPage/index.tsx → src/pages/RegisterPage/index.tsx b/src/pages/ReviewPage/index.tsx → src/pages/RegisterPage/index.tsx
diff --git a/src/pages/UserPage/index.tsx b/src/pages/UserPage/index.tsx
@@ -1,16 +1,14 @@
 import User from "@src/components/User";
 import Review from "@src/components/User/Review";
 import Profile from "@src/components/User/Profile";
-import { useRecoilValue } from "recoil";
-import { MyMemberInfo } from "@src/stores/member/member.store";
+import { jwtDecoding } from "@src/utils/Auth/jwtDecoding";
 
 interface Props {
   page: number;
 }
 
 export default function UserPage({ page }: Props) {
-  const myInfo = useRecoilValue(MyMemberInfo);
-  const memberRole = myInfo?.memberDetails.memberRole;
+  const memberRole = jwtDecoding("authority");
   return (
     <User>
       {page === 0 && <Profile />}

diff --git a/src/repositories/Auth/auth.repositoryImpl.ts b/src/repositories/Auth/auth.repositoryImpl.ts
@@ -1,17 +1,16 @@
-import axios from "axios";
 import {
   AuthRepository,
   RefreshTokenParam,
   newAccessTokenResponse,
 } from "./auth.repository";
-import CONFIG from "@src/config/config.json";
+import { customAxios } from "@src/libs/Axios/customAxios";
 
 class AuthRepositoryImpl implements AuthRepository {
   public async postRefreshToken(
     refreshToken: RefreshTokenParam
   ): Promise<newAccessTokenResponse> {
-    const { data } = await axios.post<newAccessTokenResponse>(
-      `${CONFIG.SERVER}/auth/refresh`,
+    const { data } = await customAxios.post<newAccessTokenResponse>(
+      "/auth/refresh",
       refreshToken
     );
     return data;

diff --git a/src/router/index.tsx b/src/router/index.tsx
@@ -6,7 +6,7 @@ import UserPage from "../pages/UserPage";
 import NotFound from "../components/Common/NotFound";
 import { ROUTE_ITEMS } from "../constants/Router/router.constant";
 import CompanyDetailPage from "../pages/CompanyDetailPage/index";
-import RegisterPage from "@src/pages/ReviewPage";
+import RegisterPage from "@src/pages/RegisterPage";
 
 export default function Router() {
   return (

diff --git a/src/utils/Error/File/fileErrorHanlder.ts b/src/utils/Error/File/fileErrorHanlder.ts
@@ -1,4 +1,7 @@
 export const fileErrorHanlder = (status: number, message: string) => {
+  if (status === 403) {
+    return "동문인증이 필요합니다.";
+  }
   if (status === 400) {
     if (message === "File is empty") {
       return "파일이 비어 있습니다.";