feat: token refetch 로직 추가

package.json

@@ -23,7 +23,9 @@
     "@next/font": "13.1.6",
     "@tanstack/react-query": "4.24.6",
     "@toss/emotion-utils": "^1.1.5",
+    "@toss/react": "^1.3.7",
     "@toss/use-overlay": "^1.3.1",
+    "@toss/utils": "^1.4.1",
     "axios": "1.3.3",
     "framer-motion": "^10.0.0",
     "next": "13.1.6",

src/apis/client.ts

@@ -19,13 +19,25 @@ export const authToken = {
       return null;
     }
   })(),
+  refetch: () => {
+    authToken.access = localStorage.getItem('accessToken');
+    authToken.refresh = localStorage.getItem('refreshToken');
+    return;
+  },
+  destroy: () => {
+    localStorage.removeItem('accessToken');
+    localStorage.removeItem('refreshToken');
+    authToken.access = null;
+    authToken.refresh = null;
+  },
 };
 
 export const axiosClient = axios.create({
   baseURL: process.env.NODE_ENV === 'development' ? DEV_SERVER_URL : PROD_SERVER_URL,
   headers: {
     Authorization: `Bearer ${authToken.access}`,
     'Content-Type': 'application/json; charset=utf-8',
+    timeout: 5000,
   },
 });
 
@@ -117,8 +129,17 @@ axiosClient.interceptors.request.use(
     if (config?.headers == null) {
       throw new Error(`config.header is undefined`);
     }
-    config.headers['Content-Type'] = 'application/json; charset=utf-8';
+
+    if (config.headers['Authorization'] == `Bearer ${null}`) {
+      authToken.refetch();
+    }
+
+    if (axiosClient.defaults.headers.common['Authorization'] == `Bearer ${null}`) {
+      authToken.refetch();
+    }
+
     config.headers['Authorization'] = `Bearer ${authToken.access}`;
+    axiosClient.defaults.headers.common['Authorization'] = `Bearer ${authToken.access}`;
 
     return config;
   },
@@ -150,7 +171,8 @@ axiosClient.interceptors.response.use(
           return originalResponse.data.data;
         }
       } catch (err) {
-        if (isEffError(error) && error.errorCode === 401) {
+        if (isEffError(err) && err.errorCode === 401) {
+          console.log(err);
           redirectToLoginPage();
           await delay(500);
           return null;

src/apis/index.ts

@@ -41,6 +41,14 @@ export async function postResetPassword(email: string, password: string, confirm
   return await axiosClient.post('/members/password-reset', { email, password, confirmPassword });
 }
 
+//user 정보 fetching
+export async function getUser() {
+  const {
+    data: { nickname, email },
+  } = await axiosClient.get<User>('/members/profile');
+  return { nickname, email };
+}
+
 export const getMainCategories = async () => {
   const {
     data: { categories },

src/components/common/SSRSuspense/index.tsx

@@ -0,0 +1,13 @@
+import { Suspense } from 'react';
+import { useIsMounted } from '@toss/react';
+import type { ComponentProps } from 'react';
+
+export function SSRSuspense(props: ComponentProps<typeof Suspense>) {
+  const isMounted = useIsMounted();
+
+  if (!isMounted) {
+    return <>{props.fallback}</>;
+  }
+
+  return <Suspense {...props} />;
+}

src/hooks/form/useCheckLoginForm.ts

@@ -4,7 +4,7 @@ import { useMutation } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
 
 import { postLogin } from '~/apis';
-import { authToken, isEffError } from '~/apis/client';
+import { isEffError } from '~/apis/client';
 import { emailPattern, passwordPattern } from '~/constants/validationPattern';
 
 import { useToast } from '../useToast';
@@ -53,8 +53,6 @@ export const useCheckLoginForm = () => {
         const { accessToken, refreshToken } = data;
         localStorage.setItem('accessToken', accessToken);
         localStorage.setItem('refreshToken', refreshToken);
-      }
-      if (authToken.access && authToken.refresh) {
         router.push('/category');
       }
     } catch (error: unknown) {

src/pages/index.tsx

@@ -9,7 +9,7 @@ import { useShowLoginModal } from '~/hooks/useShowLoginModal';
 
 export default function Home() {
   // TODO: redirect page 재설정하기
-  const showLoginModal = useShowLoginModal('login');
+  const showLoginModal = useShowLoginModal('category');
   return (
     <Flex.Center direction="column">
       <HomeHeader />

src/types/response.d.ts

@@ -27,3 +27,8 @@ interface QuestionAnswerResponse {
   id: number;
   answer: string;
 }
+
+interface User {
+  nickname: string;
+  email: string;
+}