From 90e876f753a14329d48c4a6785afa3912c7230c3 Mon Sep 17 00:00:00 2001
From: dongree <dongwoo0307@naver.com>
Date: Thu, 7 Nov 2024 17:08:13 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20accssToken=20=EC=A0=84?=
 =?UTF-8?q?=EC=97=AD=EC=9C=BC=EB=A1=9C=20=EC=83=81=ED=83=9C=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20#4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/components/Header.tsx      | 26 +++++++++++++++++---------
 FE/src/components/Login/index.tsx | 12 ++++++++++--
 FE/src/store/authStore.ts         | 21 +++++++++++++++++++++
 3 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 FE/src/store/authStore.ts

diff --git a/FE/src/components/Header.tsx b/FE/src/components/Header.tsx
index 54b70cb8..97657c29 100644
--- a/FE/src/components/Header.tsx
+++ b/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>
diff --git a/FE/src/components/Login/index.tsx b/FE/src/components/Login/index.tsx
index c8be634f..13946c43 100644
--- a/FE/src/components/Login/index.tsx
+++ b/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 (
diff --git a/FE/src/store/authStore.ts b/FE/src/store/authStore.ts
new file mode 100644
index 00000000..1a8e8453
--- /dev/null
+++ b/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;