From c461a572946dd2c48e2115aabeb68a4f3a61ed61 Mon Sep 17 00:00:00 2001
From: y0unj1NoH <nohyoong711@gmail.com>
Date: Mon, 9 Dec 2024 10:34:29 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/MyPageTemplate/index.tsx         | 17 ++++++++++++-----
 .../templates/MyPageTemplate/styled.ts         | 13 ++++++++++++-
 src/pages/MyPage.tsx                           | 18 ++++++++++++++++--
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/components/templates/MyPageTemplate/index.tsx b/src/components/templates/MyPageTemplate/index.tsx
index a44f5882..2ec1632a 100644
--- a/src/components/templates/MyPageTemplate/index.tsx
+++ b/src/components/templates/MyPageTemplate/index.tsx
@@ -1,9 +1,10 @@
-import { TextButton } from "components/atoms";
+import { Text, TextButton } from "components/atoms";
 import { Profile, MyPageMenu } from "components/organisms";
 import {
   MyPageTemplateWrapper,
   ProfileContainer,
-  BackGroundWrapper
+  BackGroundWrapper,
+  LogoutWrapper,
 } from "./styled";
 
 interface IMyPageTemplateProps {
@@ -17,6 +18,8 @@ interface IMyPageTemplateProps {
   onProfileEditButtonClick: () => void;
   /** 메뉴 클릭 시 실행될 함수 */
   onMenuClick: (pathname: string) => void;
+  /** 로그아웃 함수 */
+  onLogout: () => void;
 }
 
 /**
@@ -30,7 +33,8 @@ export const MyPageTemplate = ({
   nickname,
   location,
   onProfileEditButtonClick,
-  onMenuClick
+  onMenuClick,
+  onLogout,
 }: IMyPageTemplateProps) => {
   return (
     <MyPageTemplateWrapper>
@@ -38,13 +42,16 @@ export const MyPageTemplate = ({
         <ProfileContainer>
           <Profile imgUrl={imgUrl} nickname={nickname} location={location} />
           <TextButton
-            text="프로필 편집"
+            text='프로필 편집'
             onClick={onProfileEditButtonClick}
-            variant="explan_regular"
+            variant='explan_regular'
           />
         </ProfileContainer>
       </BackGroundWrapper>
       <MyPageMenu onMenuClick={onMenuClick} />
+      <LogoutWrapper>
+        <Text variant='explan_regular' content='로그아웃' onClick={onLogout} />
+      </LogoutWrapper>
     </MyPageTemplateWrapper>
   );
 };
diff --git a/src/components/templates/MyPageTemplate/styled.ts b/src/components/templates/MyPageTemplate/styled.ts
index 017a5124..d34c3b64 100644
--- a/src/components/templates/MyPageTemplate/styled.ts
+++ b/src/components/templates/MyPageTemplate/styled.ts
@@ -2,8 +2,9 @@ import styled from "@emotion/styled";
 import { TextButtonWrapper } from "components/atoms/Button/TextButton/styled";
 import {
   ProfileWrapper,
-  ImageWrapper
+  ImageWrapper,
 } from "components/organisms/Profile/styled";
+import { ThemeType } from "styles/theme";
 
 export const MyPageTemplateWrapper: ReturnType<typeof styled.div> = styled.div`
   display: flex;
@@ -49,7 +50,17 @@ export const ProfileContainer: ReturnType<typeof styled.div> = styled.div`
   flex-direction: column;
   align-items: flex-start;
 `;
+
 export const BackGroundWrapper: ReturnType<typeof styled.div> = styled.div`
   background: #f4f6f9;
   padding: 1rem;
 `;
+
+export const LogoutWrapper: ReturnType<typeof styled.div> = styled.div`
+  color: ${({ theme }: { theme: ThemeType }) =>
+    theme.colors.grey_field_guide_but_deactivate};
+  text-decoration: underline;
+  margin: 0 1rem;
+  cursor: pointer;
+  width: fit-content;
+`;
diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx
index a1b015ce..c718cfaa 100644
--- a/src/pages/MyPage.tsx
+++ b/src/pages/MyPage.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
+import { Toast } from "components/atoms";
 import { MyPageTemplate } from "components/templates";
 import { useHeaderStore, useUserStore } from "stores";
-import { getUserProfile } from "services/apis";
+import { getUserProfile, oauthLogout } from "services/apis";
 
 export const MyPage = () => {
   const { setTitle } = useHeaderStore();
@@ -28,7 +29,7 @@ export const MyPage = () => {
         setUser({
           nickname: result.nickname || undefined,
           profile: result.imageUrl || undefined,
-          emdName: result.activityEmdName || undefined
+          emdName: result.activityEmdName || undefined,
         });
       })
       .catch(() => {
@@ -36,6 +37,18 @@ export const MyPage = () => {
       });
   }, []);
 
+  const handleLogout = useCallback(() => {
+    oauthLogout()
+      .then(() => {
+        setUser(null);
+        location.reload();
+      })
+      .catch((error) => {
+        Toast.show("잠시 후에 다시 시도해주세요.", 2000);
+        console.error("Logout failed", error);
+      });
+  }, [navigate, setUser]);
+
   return (
     <MyPageTemplate
       imgUrl={user!.profile as string}
@@ -43,6 +56,7 @@ export const MyPage = () => {
       location={user!.emdName as string}
       onProfileEditButtonClick={handleProfileEditButtonClick}
       onMenuClick={handleMenuClick}
+      onLogout={handleLogout}
     />
   );
 };