Feat/#465 logout (#467)

* feat: 버튼 ui 구현 * feat: 로그아웃 버튼 클릭 이벤트 구현 * refactor: 컨벤션 수정
woowacourse-teams · Sep 20, 2023 · 9758375 · 9758375
1 parent dfc723d
commit 9758375
Showing 1 changed file with 33 additions and 3 deletions.
diff --git a/frontend/src/components/MyInfo/index.tsx b/frontend/src/components/MyInfo/index.tsx
@@ -6,17 +6,42 @@ import Space from '../common/Space';
 import { useState } from 'react';
 import { ProfileProps } from '../../types/Profile';
 import UpdateMyInfo from './UpdateMyInfo';
+import Button from '../common/Button';
+import useToast from '../../hooks/useToast';
+import { postApi } from '../../apis/postApi';
 
 const user = JSON.parse(localStorage.getItem('user') || '{}');
+const accessToken = localStorage.getItem('userToken');
 
 const MyInfo = () => {
+  const { showToast } = useToast();
+
   const [isThereImg, setIsThereImg] = useState<boolean>(true);
   const [isModifyMyInfo, setIsModifyMyInfo] = useState<boolean>(false);
   const [myInfoNameAndEmail, setMyInfoNameAndEmail] = useState<ProfileProps>({
     name: user.nickName,
     email: user.email,
   });
 
+  const onClickLogout = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    try {
+      await postApi(
+        `/logout`,
+        {
+          accessToken: accessToken,
+        },
+        'x-www-form-urlencoded',
+      );
+
+      localStorage.removeItem('user');
+      localStorage.removeItem('userToken');
+      window.location.href = '/';
+      showToast('info', '로그아웃 되었습니다.');
+    } catch {
+      showToast('error', '로그아웃에 실패했습니다');
+    }
+  };
+
   if (isModifyMyInfo) {
     return (
       <UpdateMyInfo
@@ -39,9 +64,14 @@ const MyInfo = () => {
       <MyInfoImg src={user.imageUrl} />
       <Space size={5} />
       <Box>
-        <Text color="black" $fontSize="medium" $fontWeight="bold">
-          {user.nickName}
-        </Text>
+        <Flex $justifyContent="space-between" $alignItems="center">
+          <Text color="black" $fontSize="medium" $fontWeight="bold">
+            {user.nickName}
+          </Text>
+          <Button variant="primary" onClick={onClickLogout}>
+            로그아웃
+          </Button>
+        </Flex>
         <Text color="black" $fontSize="small" $fontWeight="normal">
           {user.email}
         </Text>