diff --git a/.env.example b/.env.example index c8918289..bf2b58c7 100644 --- a/.env.example +++ b/.env.example @@ -1,2 +1,3 @@ VITE_API_BASE_URL= -VITE_KAKAO_MAP_API_KEY= \ No newline at end of file +VITE_KAKAO_MAP_API_KEY= +VITE_HEADER_TOKEN= \ No newline at end of file diff --git a/src/app/provider/AuthContext.tsx b/src/app/provider/AuthContext.tsx new file mode 100644 index 00000000..7f57031c --- /dev/null +++ b/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(undefined); + +export const AuthProvider = ({ children }: { children: ReactNode }) => { + const [isModalOpen, setIsModalOpen] = useState(false); + + return ( + setIsModalOpen(true), closeModal: () => setIsModalOpen(false) }} + > + {children} + + ); +}; + +export const useAuth = () => { + const context = useContext(AuthContext); + if (!context) { + throw new Error('useAuth must be used within an AuthProvider'); + } + return context; +}; diff --git a/src/main.tsx b/src/main.tsx index 0c914778..43c440d3 100644 --- a/src/main.tsx +++ b/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( - + + + ); diff --git a/src/pages/home/ui/MainPage.tsx b/src/pages/home/ui/MainPage.tsx index a6405cee..11d551cc 100644 --- a/src/pages/home/ui/MainPage.tsx +++ b/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(0); const [trendingStartIndex, setTrendingStartIndex] = useState(0); const [closingStartIndex, setClosingStartIndex] = useState(0); const maxCardsToShow = 2; const navigate = useNavigate(); + const { isModalOpen, openModal, closeModal } = useAuth(); type SetStartIndex = Dispatch>; @@ -57,9 +58,9 @@ const MainPage = () => { leftButtonClassName="sm:text-lg md:text-xl lg:text-2xl font-extrabold font-nexon" leftButtonClick={() => {}} leftButtonLabel="같이가요" - rightContent={ setModalOpen(true)} />} + rightContent={} /> - {modalOpen && setModalOpen(false)} />} + {isModalOpen && }
diff --git a/src/shared/types/api/http-client.ts b/src/shared/types/api/http-client.ts index 0608bbf6..87f4bd0a 100644 --- a/src/shared/types/api/http-client.ts +++ b/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);