Merge pull request #324 from prgrms-web-devcourse-final-project/feature/

#323

feat: 로그아웃 버튼 추가

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,21 +33,25 @@ export const MyPageTemplate = ({
   nickname,
   location,
   onProfileEditButtonClick,
-  onMenuClick
+  onMenuClick,
+  onLogout,
 }: IMyPageTemplateProps) => {
   return (
     <MyPageTemplateWrapper>
       <BackGroundWrapper>
         <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>
   );
 };

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;
+`;

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,21 +29,34 @@ export const MyPage = () => {
         setUser({
           nickname: result.nickname || undefined,
           profile: result.imageUrl || undefined,
-          emdName: result.activityEmdName || undefined
+          emdName: result.activityEmdName || undefined,
         });
       })
       .catch(() => {
         setUser(null);
       });
   }, []);
 
+  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}
       nickname={user!.nickname as string}
       location={user!.emdName as string}
       onProfileEditButtonClick={handleProfileEditButtonClick}
       onMenuClick={handleMenuClick}
+      onLogout={handleLogout}
     />
   );
 };