feat: logout

- #66
Project-Boated · Oct 13, 2022 · 6406280 · 6406280
1 parent 43de337
commit 6406280
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/components/common/GNB/MyInfoTab/index.tsx b/components/common/GNB/MyInfoTab/index.tsx
@@ -2,7 +2,9 @@ import React, { Dispatch, MouseEvent, SetStateAction } from 'react';
 
 import { useRouter } from 'next/router';
 import { useQuery } from 'react-query';
+import { AxiosError } from 'axios';
 
+import { logout } from '@/lib/api/auth';
 import { getProjectsInvite } from '@/lib/api/projects';
 import { GetUserProfileResponse } from '@/lib/api/types';
 import * as queryKeys from '@/lib/constants/queryKeys';
@@ -17,9 +19,10 @@ interface MyInfoTabProps {
   myInfoTabRef: React.RefObject<HTMLDivElement>;
   myInfo: GetUserProfileResponse;
   setIsMyInfoTabOpen: Dispatch<SetStateAction<boolean>>;
+  queryRemove: () => void;
 }
 
-const MyInfoTab = ({ myInfoTabRef, myInfo, setIsMyInfoTabOpen }: MyInfoTabProps) => {
+const MyInfoTab = ({ myInfoTabRef, myInfo, setIsMyInfoTabOpen, queryRemove }: MyInfoTabProps) => {
   const { nickname, profileImageUrl } = myInfo;
 
   const { data } = useQuery(queryKeys.PROJECTS_INVITES, () => getProjectsInvite());
@@ -38,6 +41,18 @@ const MyInfoTab = ({ myInfoTabRef, myInfo, setIsMyInfoTabOpen }: MyInfoTabProps)
     router.push('/user/invite');
   };
 
+  const handleLogoutTabClick = async () => {
+    try {
+      await logout();
+      setIsMyInfoTabOpen(false);
+      queryRemove();
+      router.push('/');
+    } catch (e: unknown) {
+      const error = e as AxiosError;
+      alert(JSON.stringify(error.response?.data.message));
+    }
+  };
+
   return (
     <Styled.Container ref={myInfoTabRef}>
       <Styled.ProfileContainer>
@@ -55,7 +70,7 @@ const MyInfoTab = ({ myInfoTabRef, myInfo, setIsMyInfoTabOpen }: MyInfoTabProps)
               </CircleText>
             )}
           </Styled.TabItem>
-          <Styled.TabItem>
+          <Styled.TabItem onClick={handleLogoutTabClick}>
             <Text>로그아웃</Text>
           </Styled.TabItem>
         </Styled.TabContainer>

diff --git a/components/common/GNB/index.tsx b/components/common/GNB/index.tsx
@@ -14,7 +14,7 @@ import ProjectTab from '@/components/common/GNB/ProjectTab';
 import * as Styled from './style';
 
 const GNB = () => {
-  const { myInfo } = useGetMyInfo();
+  const { myInfo, remove } = useGetMyInfo();
 
   const projectTabRef = useRef(null);
   const myInfoTabRef = useRef(null);
@@ -62,7 +62,12 @@ const GNB = () => {
                 <Styled.TriangleIconWrapper>
                   <Icon icon="Triangle" />
                 </Styled.TriangleIconWrapper>
-                <MyInfoTab myInfoTabRef={myInfoTabRef} myInfo={myInfo} setIsMyInfoTabOpen={setIsMyInfoTabOpen} />
+                <MyInfoTab
+                  myInfoTabRef={myInfoTabRef}
+                  myInfo={myInfo}
+                  setIsMyInfoTabOpen={setIsMyInfoTabOpen}
+                  queryRemove={remove}
+                />
               </>
             )}
 

diff --git a/hooks/useGetMyInfo.ts b/hooks/useGetMyInfo.ts
@@ -5,12 +5,14 @@ import { getMe } from '@/lib/api/profile';
 export const KEY = '/api/account/profile';
 
 const useGetMyInfo = () => {
-  const { data, isLoading, error } = useQuery(KEY, getMe);
+  const { data, isLoading, error, refetch, remove } = useQuery(KEY, getMe);
 
   return {
     myInfo: data !== undefined && data,
     isLoading,
     error,
+    refetch,
+    remove,
   };
 };