Merge branch 'develop' of https://github.com/prgrms-web-devcourse-fin…

…al-project/WEB1_1_J1P5_FE into develop
J1P5 · Dec 9, 2024 · 0ad8682 · 0ad8682
2 parents b84f337 + 483c4c7
commit 0ad8682
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 15 deletions.
diff --git a/src/components/organisms/Modal/styled.ts b/src/components/organisms/Modal/styled.ts
@@ -69,9 +69,8 @@ export const ModalRootWrapper: ReturnType<
   left: 50%;
   translate: -50%;
   z-index: 9999;
-  max-width: 400px;
-  // max-width: 375px;
-  width: calc(100% - 2rem);
+  max-width: ${({ theme }) => theme.sizes.max_width};
+  width: 100%;
   height: 100%;
   // 자식 요소 배치
   display: flex;

diff --git a/src/components/organisms/TopBar/styled.ts b/src/components/organisms/TopBar/styled.ts
@@ -6,10 +6,10 @@ import { IconButtonWrapper } from "components/atoms/Button/IconButton/styled";
 
 const CommonIconWrapper: ReturnType<typeof styled.div> = styled.div``;
 export const TopBarBackIconWrapper: typeof CommonIconWrapper = styled(
-  CommonIconWrapper
+  CommonIconWrapper,
 )``;
 export const TopBarIconWrapper: typeof CommonIconWrapper = styled(
-  CommonIconWrapper
+  CommonIconWrapper,
 )`
   ${IconButtonWrapper}:has(${NoIconWrapper}) {
     cursor: default;
@@ -29,11 +29,15 @@ export const TopBarWrapper: ReturnType<typeof styled.div> = styled.div`
     flex: 1;
     padding: 0.5rem;
     text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   & > ${InputWrapper} {
     flex: 1;
-    height: 19/16rem;
-    padding: 15.5/16rem 1rem;
+    // 적용 안되고있는 속성이라 주석처리했습니다!
+    // height: 19/16rem;
+    // padding: 15.5/16rem 1rem;
     background-color: #eee;
   }
   &:has(${InputWrapper}) ${TopBarIconWrapper} {

diff --git 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,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>
   );
 };
diff --git 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
@@ -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}
     />
   );
 };