[#507] [프로필] 로그아웃 햄버거 구현 (#508)

* feat: 프로필 페이지 logout 햄버거 구현 * refactor: 로그아웃시 캐싱된 회원정보 query 무효화
prgrms-web-devcourse · Jun 17, 2024 · 90c5855 · 90c5855
1 parent cd297e9
commit 90c5855
Showing 1 changed file with 25 additions and 10 deletions.
diff --git a/src/app/profile/me/page.tsx b/src/app/profile/me/page.tsx
@@ -1,19 +1,27 @@
 'use client';
 
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { checkAuthentication, removeAuth } from '@/utils/helpers';
+
 import userAPI from '@/apis/user';
-import TopHeader from '@/v1/base/TopHeader';
-import ProfileInfo from '@/v1/profile/info/ProfileInfo';
-import ProfileBookShelf from '@/v1/profile/bookShelf/ProfileBookShelf';
-import ProfileGroup from '@/v1/profile/group/ProfileGroup';
-import Avatar from '@/v1/base/Avatar';
-import Link from 'next/link';
+
+import { checkAuthentication, removeAuth } from '@/utils/helpers';
+
 import { IconArrowRight } from '@public/icons';
-import BookShelf from '@/v1/bookShelf/BookShelf';
+
 import SSRSafeSuspense from '@/components/SSRSafeSuspense';
-import Loading from '@/v1/base/Loading';
+
+import Avatar from '@/v1/base/Avatar';
 import Button from '@/v1/base/Button';
+import Loading from '@/v1/base/Loading';
+import Menu from '@/v1/base/Menu';
+import TopHeader from '@/v1/base/TopHeader';
+import BookShelf from '@/v1/bookShelf/BookShelf';
+import ProfileBookShelf from '@/v1/profile/bookShelf/ProfileBookShelf';
+import ProfileGroup from '@/v1/profile/group/ProfileGroup';
+import ProfileInfo from '@/v1/profile/info/ProfileInfo';
+import userKeys from '@/queries/user/key';
+import { useQueryClient } from '@tanstack/react-query';
 
 const USER_ID = 'me';
 const KAKAO_LOGIN_URL = `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorize/kakao?redirect_uri=${process.env.NEXT_PUBLIC_CLIENT_REDIRECT_URI}`;
@@ -69,18 +77,25 @@ const MyProfileForUnAuth = () => {
 };
 
 const MyProfileForAuth = () => {
+  const queryClient = useQueryClient();
   const router = useRouter();
 
   const handleLogoutButtonClick = async () => {
     await userAPI.logout();
     removeAuth();
+    queryClient.removeQueries({ queryKey: userKeys.me(), exact: true });
     router.refresh();
   };
 
   return (
     <>
       <TopHeader text="Profile">
-        <button onClick={handleLogoutButtonClick}>로그아웃</button>
+        <Menu>
+          <Menu.Toggle />
+          <Menu.DropdownList>
+            <Menu.Item onSelect={handleLogoutButtonClick}>로그아웃</Menu.Item>
+          </Menu.DropdownList>
+        </Menu>
       </TopHeader>
       <div className="flex flex-col gap-[2rem]">
         <ProfileInfo userId={USER_ID} />