✨ feat: accssToken 전역으로 상태 관리 #4

FE/src/components/Header.tsx

@@ -1,7 +1,9 @@
+import useAuthStore from 'store/authStore';
 import useLoginModalStore from 'store/useLoginModalStore';
 
 export default function Header() {
   const { toggleModal } = useLoginModalStore();
+  const { isLogin, resetToken } = useAuthStore();
 
   return (
     <header className='fixed left-0 top-0 h-[60px] w-full'>
@@ -26,15 +28,21 @@ export default function Header() {
           </div>
         </div>
         <div className='flex items-center gap-4'>
-          <button
-            className='px-4 py-2 text-sm text-juga-grayscale-500'
-            onClick={toggleModal}
-          >
-            로그인
-          </button>
-          <button className='px-4 py-2 text-sm text-white rounded-lg bg-juga-grayscale-black'>
-            회원가입
-          </button>
+          {isLogin ? (
+            <button onClick={resetToken}>로그아웃</button>
+          ) : (
+            <>
+              <button
+                className='px-4 py-2 text-sm text-juga-grayscale-500'
+                onClick={toggleModal}
+              >
+                로그인
+              </button>
+              <button className='px-4 py-2 text-sm text-white rounded-lg bg-juga-grayscale-black'>
+                회원가입
+              </button>
+            </>
+          )}
         </div>
       </div>
     </header>

FE/src/components/Login/index.tsx

@@ -1,13 +1,20 @@
 import useLoginModalStore from 'store/useLoginModalStore';
 import Input from './Input';
 import { ChatBubbleOvalLeftIcon } from '@heroicons/react/16/solid';
-import { FormEvent, useState } from 'react';
+import { FormEvent, useEffect, useState } from 'react';
 import { login } from 'service/auth';
+import useAuthStore from 'store/authStore';
 
 export default function Login() {
   const { isOpen, toggleModal } = useLoginModalStore();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const { setAccessToken } = useAuthStore();
+
+  useEffect(() => {
+    setEmail('');
+    setPassword('');
+  }, [isOpen]);
 
   if (!isOpen) return;
 
@@ -19,7 +26,8 @@ export default function Login() {
       return;
     }
 
-    console.log(res);
+    setAccessToken(res.accessToken);
+    toggleModal();
   };
 
   return (

FE/src/store/authStore.ts

@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+
+type AuthStore = {
+  accessToken: string | null;
+  isLogin: boolean;
+  setAccessToken: (token: string) => void;
+  resetToken: () => void;
+};
+
+const useAuthStore = create<AuthStore>((set) => ({
+  accessToken: null,
+  isLogin: false,
+  setAccessToken: (token: string) => {
+    set({ accessToken: token, isLogin: token !== null });
+  },
+  resetToken: () => {
+    set({ accessToken: null, isLogin: false });
+  },
+}));
+
+export default useAuthStore;