feat: 헤더 로그아웃 추가

codeit-bootcamp-frontend · Aug 25, 2024 · e0b9d64 · e0b9d64
1 parent e2c2f5a
commit e0b9d64
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 17 deletions.
diff --git a/src/components/layout/Header/Header.module.scss b/src/components/layout/Header/Header.module.scss
@@ -23,13 +23,19 @@
     width: 153px;
   }
 
+  &__right {
+    display: flex;
+    align-items: center;
+  }
+
   &__login-link-button {
     display: flex;
   }
 
   &__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
@@ -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
@@ -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;