From e0b9d647c54b6511d8ff8d47661e6cd7a9eced1f Mon Sep 17 00:00:00 2001
From: "wonsic3686@gmail.com" <wonsic3686@gmail.com>
Date: Sun, 25 Aug 2024 12:50:01 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layout/Header/Header.module.scss          |  6 +++
 src/components/layout/Header/Header.tsx       | 38 +++++++++++--------
 src/lib/hooks/auth/useLogin.ts                | 12 +++++-
 3 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/src/components/layout/Header/Header.module.scss b/src/components/layout/Header/Header.module.scss
index 5ac665656..c116a6c8e 100644
--- a/src/components/layout/Header/Header.module.scss
+++ b/src/components/layout/Header/Header.module.scss
@@ -23,6 +23,11 @@
     width: 153px;
   }
 
+  &__right {
+    display: flex;
+    align-items: center;
+  }
+
   &__login-link-button {
     display: flex;
   }
@@ -30,6 +35,7 @@
   &__profile {
     right: 40px;
     top: 20px;
+    margin: 0 0 0 1rem;
     border-radius: 50%;
     background-color: $gray-200;
   }
diff --git a/src/components/layout/Header/Header.tsx b/src/components/layout/Header/Header.tsx
index 2c806fdcf..4a4050b22 100644
--- a/src/components/layout/Header/Header.tsx
+++ b/src/components/layout/Header/Header.tsx
@@ -9,15 +9,17 @@ import imgProfile from '@assets/images/icons/ic_profile.svg';
 import { useAuthStore } from '@store/useAuthStore';
 import UIButton from '@core/ui/buttons/UIButton/UIButton';
 import { useEffect, useState } from 'react';
+import useLogin from '@lib/hooks/auth/useLogin';
 
 const Header = ({}) => {
   const { pathname, push } = useRouter();
   const { accessToken } = useAuthStore();
+  const { logout } = useLogin();
   const [isClient, setIsClient] = useState(false);
 
   useEffect(() => {
     setIsClient(true);
-  }, []);
+  }, [accessToken]);
 
   return (
     <header className={styles['navbar']}>
@@ -50,23 +52,29 @@ const Header = ({}) => {
         </nav>
       </div>
       {isClient && accessToken && (
-        <Link
-          href="/addboard"
-          id="login-link-button"
-          className="button navbar__login-link-button"
-        >
-          <Image
+        <div className={styles['navbar__right']}>
+          <Link
+            href="/addboard"
+            id="login-link-button"
+            className="button navbar__login-link-button"
+          >
+            <Image
+              className={styles['navbar__profile']}
+              src={imgProfile}
+              alt="프로필"
+            />
+          </Link>
+          <UIButton
             className={styles['navbar__profile']}
-            src={imgProfile}
-            alt="프로필"
-          />
-        </Link>
+            type="box"
+            handleClick={logout}
+          >
+            로그아웃
+          </UIButton>
+        </div>
       )}
       {isClient && !accessToken && (
-        <div
-          id="login-link-button"
-          className="button navbar__login-link-button"
-        >
+        <div id="login-link-button" className="navbar__login-link-button">
           <UIButton
             className={styles['navbar__profile']}
             type="box"
diff --git a/src/lib/hooks/auth/useLogin.ts b/src/lib/hooks/auth/useLogin.ts
index 1c8b58a42..713def815 100644
--- a/src/lib/hooks/auth/useLogin.ts
+++ b/src/lib/hooks/auth/useLogin.ts
@@ -2,9 +2,12 @@ import { signInUser } from '@lib/api/AuthApi';
 import { useAuthStore } from '@store/useAuthStore';
 import { useMutation } from '@tanstack/react-query';
 import { SignInUserRequest } from '@type/AuthTypes';
+import { useRouter } from 'next/router';
 
 const useLogin = () => {
-  const { setUser, setAccessToken, setRefreshToken } = useAuthStore();
+  const route = useRouter();
+  const { setUser, setAccessToken, setRefreshToken, clearAuth } =
+    useAuthStore();
   const { mutate: login, ...returns } = useMutation({
     mutationFn: async ({ ...params }: SignInUserRequest) => {
       return await signInUser(params);
@@ -19,7 +22,12 @@ const useLogin = () => {
     },
   });
 
-  return { login, ...returns };
+  const logout = () => {
+    clearAuth();
+    route.reload();
+  };
+
+  return { login, logout, ...returns };
 };
 
 export default useLogin;