Merge branch 'develop' of https://github.com/SOPT-36-NINEDOT/NINEDOT-CLIENT into refactor/#192/myTodoBottom

Author: jisooooooooooo

package.json

@@ -30,7 +30,8 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-redux": "^9.2.0",
-    "react-router-dom": "^7.6.3"
+    "react-router-dom": "^7.6.3",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.1",

pnpm-lock.yaml

@@ -0,0 +1,15 @@
+import axiosInstance from '@/api/axiosInstance';
+import { END_POINT } from '@/api/constant/endPoint';
+import type { BaseResponse } from '@/type/api';
+
+export type RefreshResponse = {
+  accessToken: string;
+  message: string;
+};
+
+export const postRefreshToken = async () => {
+  const { data } = await axiosInstance.post<BaseResponse<RefreshResponse>>(
+    `/${END_POINT.AUTH}/refresh`,
+  );
+  return data.data;
+};

src/api/auth/refreshToken/index.ts

@@ -1,6 +1,7 @@
 import axios from 'axios';
 
 import { HTTP_STATUS } from '@/api/constant/httpStatus';
+import { postRefreshToken } from '@/api/auth/refreshToken';
 
 const axiosInstance = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
@@ -24,12 +25,23 @@ axiosInstance.interceptors.request.use(
 // 응답 인터셉터
 axiosInstance.interceptors.response.use(
   (response) => response,
-  (error) => {
+  async (error) => {
+    const originalRequest = error.config;
+
     if (error.response) {
       const { status } = error.response;
 
       if (status === HTTP_STATUS.UNAUTHORIZED) {
-        // 인증 실패 처리
+        try {
+          const { accessToken } = await postRefreshToken();
+          localStorage.setItem('accessToken', accessToken);
+
+          axiosInstance.defaults.headers.Authorization = `Bearer ${accessToken}`;
+          originalRequest.headers.Authorization = `Bearer ${accessToken}`;
+        } catch (refreshError) {
+          console.error('리프레시 토큰 만료, 재로그인 필요');
+          return Promise.reject(refreshError);
+        }
       }
 
       if (status === HTTP_STATUS.INTERNAL_SERVER_ERROR) {

src/api/axiosInstance.ts

@@ -3,7 +3,7 @@ import { END_POINT } from '@/api/constant/endPoint';
 import type { JobResponse } from '@/api/domain/signup/type/JobResponse';
 import type { PersonaResponse } from '@/api/domain/signup/type/PersonaResponse';
 import type { SignupResponse } from '@/api/domain/signup/type/SignupResponse';
-import type { UserInfoResponse } from '@/api/domain/signup/type/UserInfoResponse';
+import type { UserType } from '@/store/types/authTypes';
 import type { BaseResponse } from '@/type/api';
 
 export const getJobList = async () => {
@@ -21,7 +21,7 @@ export const postSignUp = async (payload: SignupResponse) => {
 };
 
 export const getUser = async () => {
-  const { data } = await axiosInstance.get<BaseResponse<UserInfoResponse>>('/users/info');
+  const { data } = await axiosInstance.get<BaseResponse<UserType>>('/users/info');
   return data.data;
 };