refact: AuthContext에서 zustand로 변경

Author: Yejiin21

src/app/provider/AuthContext.tsx

@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+interface AuthStore {
+  isModalOpen: boolean;
+  openModal: () => void;
+  closeModal: () => void;
+}
+
+const useAuthStore = create<AuthStore>(set => ({
+  isModalOpen: false,
+  openModal: () => set({ isModalOpen: true }),
+  closeModal: () => set({ isModalOpen: false }),
+}));
+
+export default useAuthStore;

src/app/provider/authStore.ts

@@ -4,16 +4,13 @@ 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}>
-      <AuthProvider>
-        <RouterProvider router={router} />
-      </AuthProvider>
+      <RouterProvider router={router} />
     </QueryClientProvider>
   </StrictMode>
 );

src/main.tsx

@@ -18,7 +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';
+import useAuthStore from '../../../app/provider/authStore';
 
 const MainPage = () => {
   const images = [
@@ -32,7 +32,7 @@ const MainPage = () => {
   const [closingStartIndex, setClosingStartIndex] = useState<number>(0);
   const maxCardsToShow = 2;
   const navigate = useNavigate();
-  const { isModalOpen, openModal, closeModal } = useAuth();
+  const { isModalOpen, openModal, closeModal } = useAuthStore();
 
   type SetStartIndex = Dispatch<SetStateAction<number>>;
 

src/pages/home/ui/MainPage.tsx

@@ -1,6 +1,7 @@
 import axios, { AxiosError, AxiosResponse } from 'axios';
 import { ApiErrorResponse } from './apiResponse';
 import Cookies from 'js-cookie';
+import useAuthStore from '../../../app/provider/authStore';
 
 export const axiosClient = axios.create({
   baseURL: 'http://ec2-3-35-48-123.ap-northeast-2.compute.amazonaws.com:8080/api/v1',
@@ -43,9 +44,8 @@ axiosClient.interceptors.response.use(
     // 401(토큰 만료)일 경우 로그아웃 처리 or 토큰 갱신 가능
     if (errorInfo.status === 401) {
       Cookies.remove('access_token');
-      import('../../../app/provider/AuthContext').then(({ useAuth }) => {
-        useAuth().openModal();
-      });
+
+      useAuthStore.getState().openModal();
     }
 
     return Promise.reject(errorInfo);