axios interceptors임시 적용

package.json

@@ -9,9 +9,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@hookform/resolvers": "^3.1.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.3",
     "@tanstack/react-query": "^4.35.7",
@@ -46,6 +43,7 @@
     "styled-components": "^6.0.7",
     "styled-reset": "^4.5.1",
     "tailwindcss": "^3.3.2",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-svgr": "^3.2.0",
     "vite-svg-loader": "^4.0.0"
   },
@@ -70,6 +68,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "msw": "^1.2.1",
     "nodemon": "^2.0.22",
+    "rollup-plugin-visualizer": "^5.12.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.3",
     "vite": "^4.2.0",

public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.2.2).
+ * Mock Service Worker (1.3.4).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

src/App.tsx

@@ -28,6 +28,7 @@ const GlobalStyle = createGlobalStyle`
     font: inherit;
     vertical-align: baseline;
     border: none;
+    font-display: swap;
   }
   /* HTML5 display-role reset for older browsers */
   article, aside, details, figcaption, figure,
@@ -81,3 +82,5 @@ function App() {
 }
 
 export default App;
+
+

src/api/api.ts

@@ -1,9 +1,7 @@
-import { IPostData } from "@/components/board/Post";
-import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import cookie from 'react-cookies';
 
-export const BASE_HOST = 'http://www.techeerhangout.site'
+export const BASE_HOST = 'http://localhost:8080'
 const API_VERSION = '/api/v1'
 export const BASE_URL = BASE_HOST + API_VERSION
 
@@ -12,6 +10,58 @@ const client = axios.create({
 })
 
 
+const refreshAccessToken = async () => {
+  try {
+    const response = await axios.post(`${BASE_URL}/auth/refresh-token`, null, {
+      headers: {
+        Authorization: `Bearer ${cookie.load("refreshToken")}`,
+      },
+    });
+
+    const newAccessToken = response.data.accessToken;
+    cookie.save("accessToken", newAccessToken, { path: "/" });
+    return newAccessToken;
+  } catch (error) {
+    console.error("토큰 갱신 실패:", error);
+    window.location.href = "/";
+    throw error;
+  }
+};
+
+client.interceptors.request.use((config) => {
+  const accessToken = cookie.load("accessToken");
+  if (accessToken) {
+    config.headers.Authorization = `Bearer ${accessToken}`;
+  }
+  config.headers["Content-Type"] = "application/json";
+  return config;
+});
+
+
+client.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true; // 무한 루프 방지
+
+      try {
+        const newAccessToken = await refreshAccessToken();
+
+        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+        return client(originalRequest);
+      } catch (refreshError) {
+        return Promise.reject(refreshError);
+      }
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+
+
 export const getUserData = async () => await client.get(
   `user/me`,{
     headers:{

src/components/travel/destinationmodal/destinationmodal.tsx

@@ -1,7 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import './destinationmodal.scss'
 import { restFetcher } from '@/queryClient'
-import { destination } from '@/mocks/handlers'
 import { useNavigate } from 'react-router-dom'
 import { useState } from 'react'
 
@@ -31,7 +30,7 @@ const Destinationmodal = () =>{
 
   console.log(data);
 
-  const destinationdetaillist: destination[] = [
+  const destinationdetaillist: any[] = [
     {
         destination: '천안시'
     },
@@ -73,14 +72,14 @@ const Destinationmodal = () =>{
     return(
         <div  className="destinationmodallayout">
             <div className='destinationlist'>
-                {data?.map((datas:destination,index:any)=>(
+                {data?.map((datas:any,index:any)=>(
                     <button className='destinationliststyle' value={datas.destination} onClick={handlerDestination} >
                         {datas.destination}
                     </button>
                 ))}
             </div>
             <div className='destinationdetaillist'>
-                {destinationdetaillist?.map((datas2:destination,index:any)=>(
+                {destinationdetaillist?.map((datas2:any,index:any)=>(
                     <button className='destinationdetailliststyle' value={datas2.destination} onClick={handlerDestinationDetail}>
                         {datas2.destination}
                     </button>

src/main.tsx

@@ -4,7 +4,6 @@ import { getClient } from './queryClient';
 import { worker } from './mocks/workers';
 import { RecoilRoot } from 'recoil';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import App from './App';
 
 declare global {

src/pages/SignUpPage.tsx

@@ -224,7 +224,6 @@ const SignUpPage: React.FC = () => {
         <Select
           value={Number(age)}
           onChange={(e) => setAge(e.target.value)}
-          invalid={!isValidAge}
         >
           <Option value="">나이</Option>
           <Option value="10">10대</Option>
@@ -253,8 +252,14 @@ const SignUpForm = styled.form`
   display: flex;
   flex-direction: column;
   align-items: center;
+  
 `;
-const Select = styled.select`
+
+interface SelectProps {
+  invalid?: boolean;
+}
+
+const Select = styled.select<SelectProps>`
   margin-bottom: 10px;
   padding: 0.9rem;
   width: 25rem;
@@ -299,7 +304,11 @@ const InputWrap = styled.form`
   align-items: center;
 `;
 
-const Input = styled.input`
+interface InputProps {
+  invalid?: boolean;
+}
+
+const Input = styled.input<InputProps>`  
   margin-bottom: 10px;
   padding: 0.9rem;
   width: 25rem;