refactor: Replace Recoil with Zustand for auth state management (#101)

Author: tooooo1

bun.lockb

@@ -1,22 +1,9 @@
-import { isLoginState } from 'atom/recoilStore';
 import { RouterProvider } from 'react-router';
-import type { MutableSnapshot } from 'recoil';
-import { RecoilRoot } from 'recoil';
-import { getAccessToken } from 'utils/tokenManager';
 
 import { router } from './__generated__/routes.generated';
 
 const App = () => {
-  const initialState = ({ set }: MutableSnapshot) => {
-    const isLogin = !!getAccessToken();
-    set(isLoginState, isLogin || false);
-  };
-
-  return (
-    <RecoilRoot initializeState={initialState}>
-      <RouterProvider router={router} />
-    </RecoilRoot>
-  );
+  return <RouterProvider router={router} />;
 };
 
 export default App;

src/App.tsx

@@ -2,10 +2,10 @@ import axios from 'axios';
 import { TOKEN_KEY } from 'constants/auth';
 import jwtDecode, { type JwtPayload } from 'jwt-decode';
 import { useEffect } from 'react';
+import { useAuthStore } from 'stores/authStore';
 import { getAccessToken, setToken } from 'utils/tokenManager';
 
 import { logout, refresh } from '../api/etc';
-import useUserStore from './useUserStore';
 
 const PROXY_URL = window.location.hostname === 'localhost' ? '/api' : '/proxy';
 
@@ -15,7 +15,7 @@ const http = axios.create({
 });
 
 const useHttp = () => {
-  const { isLogin } = useUserStore();
+  const { isLogin } = useAuthStore();
 
   //액세스토큰 유효성 검사
   const isAccessTokenValid = async () => {

src/atom/recoilStore.ts

@@ -1,10 +1,9 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { login as loginApi, refresh as refreshApi } from 'api/Auth';
-import { isLoginState } from 'atom/recoilStore';
 import type { AxiosError } from 'axios';
 import { REFRESH_KEY, TOKEN_KEY } from 'constants/auth';
 import { useLocation } from 'react-router';
-import { useRecoilState } from 'recoil';
+import { useAuthStore } from 'stores/authStore';
 import type { APIErrorResponse } from 'types/common';
 import type { UserLogin } from 'types/user';
 import { removeTokenAll, setToken } from 'utils/tokenManager';
@@ -13,12 +12,10 @@ import useRouter from './useRouter';
 
 const useUserStore = () => {
   const queryClient = useQueryClient();
-
+  const { isLogin, setIsLogin } = useAuthStore();
   const { push } = useRouter();
   const { state } = useLocation();
 
-  const [isLogin, setIsLogin] = useRecoilState(isLoginState);
-
   const { mutateAsync: login } = useMutation({
     mutationFn: (formData: UserLogin) => loginApi(formData),
     onSuccess: (data) => {

src/hooks/useHttp.ts

@@ -0,0 +1,12 @@
+import { getAccessToken } from 'utils/tokenManager';
+import { create } from 'zustand';
+
+interface AuthState {
+  isLogin: boolean;
+  setIsLogin: (value: boolean) => void;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  isLogin: !!getAccessToken(),
+  setIsLogin: (isLogin: boolean) => set({ isLogin }),
+}));

src/hooks/useUserStore.ts

@@ -19,11 +19,11 @@
     "paths": {
       "*": ["*"],
       "api/*": ["api/*"],
-      "atom/*": ["atom/*"],
       "constants/*": ["constants/*"],
       "components/*": ["components/*"],
       "hooks/*": ["hooks/*"],
       "pages/*": ["pages/*"],
+      "stores/*": ["stores/*"],
       "styles/*": ["styles/*"],
       "types/*": ["types/*"],
       "utils/*": ["utils/*"]

src/stores/authStore.ts

@@ -17,11 +17,11 @@ export default defineConfig({
   resolve: {
     alias: {
       api: '/src/api',
-      atom: '/src/atom',
       constants: '/src/constants',
       components: '/src/components',
       hooks: '/src/hooks',
       pages: '/src/pages',
+      stores: '/src/stores',
       styles: '/src/styles',
       types: '/src/types',
       utils: '/src/utils',