chore: 헤더에 Authorization 설정

Author: Yejiin21

.env.example

@@ -1,2 +1,3 @@
 VITE_API_BASE_URL=
-VITE_KAKAO_MAP_API_KEY=
+VITE_KAKAO_MAP_API_KEY=
+VITE_HEADER_TOKEN=

src/app/provider/AuthContext.tsx

@@ -0,0 +1,29 @@
+import { createContext, useState, useContext, ReactNode } from 'react';
+
+interface AuthContextType {
+  isModalOpen: boolean;
+  openModal: () => void;
+  closeModal: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <AuthContext.Provider
+      value={{ isModalOpen, openModal: () => setIsModalOpen(true), closeModal: () => setIsModalOpen(false) }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};

src/main.tsx

@@ -4,13 +4,16 @@ import { RouterProvider } from 'react-router-dom';
 import router from './app/routes/Router';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';
+import { AuthProvider } from './app/provider/AuthContext';
 
 const queryClient = new QueryClient();
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
+      <AuthProvider>
+        <RouterProvider router={router} />
+      </AuthProvider>
     </QueryClientProvider>
   </StrictMode>
 );

src/pages/home/ui/MainPage.tsx

@@ -18,6 +18,7 @@ import leftButton from '../../../../public/assets/main/LeftButton.svg';
 import { AnimatePresence } from 'framer-motion';
 import LoginModal from '../../../widgets/main/ui/LoginModal';
 import { cardButtons } from '../../../shared/types/mainCardButtonType';
+import { useAuth } from '../../../app/provider/AuthContext';
 
 const MainPage = () => {
   const images = [
@@ -26,12 +27,12 @@ const MainPage = () => {
     { img: thirdPage, link: 'https://example.com/page3' },
   ];
 
-  const [modalOpen, setModalOpen] = useState(false);
   const [latestStartIndex, setLatestStartIndex] = useState<number>(0);
   const [trendingStartIndex, setTrendingStartIndex] = useState<number>(0);
   const [closingStartIndex, setClosingStartIndex] = useState<number>(0);
   const maxCardsToShow = 2;
   const navigate = useNavigate();
+  const { isModalOpen, openModal, closeModal } = useAuth();
 
   type SetStartIndex = Dispatch<SetStateAction<number>>;
 
@@ -57,9 +58,9 @@ const MainPage = () => {
         leftButtonClassName="sm:text-lg md:text-xl lg:text-2xl font-extrabold font-nexon"
         leftButtonClick={() => {}}
         leftButtonLabel="같이가요"
-        rightContent={<SecondaryButton size="large" color="black" label="로그인" onClick={() => setModalOpen(true)} />}
+        rightContent={<SecondaryButton size="large" color="black" label="로그인" onClick={openModal} />}
       />
-      <AnimatePresence>{modalOpen && <LoginModal onClose={() => setModalOpen(false)} />}</AnimatePresence>
+      <AnimatePresence>{isModalOpen && <LoginModal onClose={closeModal} />}</AnimatePresence>
 
       <div className="w-full px-6">
         <Banner images={images} interval={5000} />

src/shared/types/api/http-client.ts

@@ -2,10 +2,11 @@ import axios, { AxiosError, AxiosResponse } from 'axios';
 import { ApiErrorResponse } from './apiResponse';
 
 export const axiosClient = axios.create({
-  baseURL: '/api/v1',
+  baseURL: 'http://ec2-3-35-48-123.ap-northeast-2.compute.amazonaws.com:8080/api/v1',
   timeout: 3000,
   headers: {
     'Content-Type': 'application/json',
+    Authorization: `Bearer ${import.meta.env.VITE_HEADER_TOKEN}`,
   },
 });
 
@@ -41,7 +42,9 @@ axiosClient.interceptors.response.use(
     // 401(토큰 만료)일 경우 로그아웃 처리 or 토큰 갱신 가능
     if (errorInfo.status === 401) {
       localStorage.removeItem('access_token');
-      window.location.href = '/login'; // 로그인 페이지로 이동
+      import('../../../app/provider/AuthContext').then(({ useAuth }) => {
+        useAuth().openModal();
+      });
     }
 
     return Promise.reject(errorInfo);