From 283b27e5781918905e578dc453b695da4aa6b41f Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Wed, 20 Sep 2023 17:27:49 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20ui=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/MyInfo/index.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/MyInfo/index.tsx b/frontend/src/components/MyInfo/index.tsx
index 87a0f23b..16bdd49a 100644
--- a/frontend/src/components/MyInfo/index.tsx
+++ b/frontend/src/components/MyInfo/index.tsx
@@ -6,6 +6,7 @@ import Space from '../common/Space';
 import { useState } from 'react';
 import { ProfileProps } from '../../types/Profile';
 import UpdateMyInfo from './UpdateMyInfo';
+import Button from '../common/Button';
 
 const user = JSON.parse(localStorage.getItem('user') || '{}');
 
@@ -39,9 +40,12 @@ 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">로그아웃</Button>
+        </Flex>
         <Text color="black" $fontSize="small" $fontWeight="normal">
           {user.email}
         </Text>

From 39a29ab524c7458edfebba23410d03df4782020a Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Wed, 20 Sep 2023 17:43:31 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=9D=B4?=
 =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/MyInfo/index.tsx | 28 +++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/MyInfo/index.tsx b/frontend/src/components/MyInfo/index.tsx
index 16bdd49a..55f80392 100644
--- a/frontend/src/components/MyInfo/index.tsx
+++ b/frontend/src/components/MyInfo/index.tsx
@@ -7,10 +7,15 @@ 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>({
@@ -18,6 +23,25 @@ const MyInfo = () => {
     email: user.email,
   });
 
+  const clickLogout = 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
@@ -44,7 +68,9 @@ const MyInfo = () => {
           <Text color="black" $fontSize="medium" $fontWeight="bold">
             {user.nickName}
           </Text>
-          <Button variant="primary">로그아웃</Button>
+          <Button variant="primary" onClick={clickLogout}>
+            로그아웃
+          </Button>
         </Flex>
         <Text color="black" $fontSize="small" $fontWeight="normal">
           {user.email}

From c158f9257dfc3a6d0f5bbc2bd238c09b0e6f5812 Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Wed, 20 Sep 2023 20:09:20 +0900
Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=EC=BB=A8=EB=B2=A4=EC=85=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/MyInfo/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/MyInfo/index.tsx b/frontend/src/components/MyInfo/index.tsx
index 55f80392..463678c9 100644
--- a/frontend/src/components/MyInfo/index.tsx
+++ b/frontend/src/components/MyInfo/index.tsx
@@ -23,7 +23,7 @@ const MyInfo = () => {
     email: user.email,
   });
 
-  const clickLogout = async (e: React.MouseEvent<HTMLButtonElement>) => {
+  const onClickLogout = async (e: React.MouseEvent<HTMLButtonElement>) => {
     try {
       await postApi(
         `/logout`,
@@ -68,7 +68,7 @@ const MyInfo = () => {
           <Text color="black" $fontSize="medium" $fontWeight="bold">
             {user.nickName}
           </Text>
-          <Button variant="primary" onClick={clickLogout}>
+          <Button variant="primary" onClick={onClickLogout}>
             로그아웃
           </Button>
         </Flex>