feat: 로그아웃 모달 추가하기

SWEET-DEVELOPERS · Mar 10, 2024 · 3a978fb · 3a978fb
1 parent f95957d
commit 3a978fb
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 29 deletions.
diff --git a/src/components/common/Button/Logout/BtnLogout.tsx b/src/components/common/Button/Logout/BtnLogout.tsx
@@ -1,26 +1,16 @@
 import { ButtonHTMLAttributes } from 'react';
 import * as S from './BtnLogout.style';
-import { logOutInstance } from '../../../../apis/client';
-import { useNavigate } from 'react-router';
 
 type BtnLogoutProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   disabled?: boolean;
   children: React.ReactNode;
   customStyle?: React.CSSProperties;
+  handleButtonClick: VoidFunction;
 };
 
-const BtnLogout = ({ disabled, children, customStyle }: BtnLogoutProps) => {
-  const navigate = useNavigate();
-  const fetchAuth = async () => logOutInstance.post(`/oauth/logout`);
-  const handleClick = () => {
-    fetchAuth().then((response: any) => {
-      console.log(response);
-    });
-    localStorage.clear();
-    navigate('/');
-  };
+const BtnLogout = ({ disabled, children, customStyle, handleButtonClick }: BtnLogoutProps) => {
   return (
-    <S.Wrapper disabled={disabled} style={customStyle} onClick={handleClick}>
+    <S.Wrapper disabled={disabled} style={customStyle} onClick={handleButtonClick}>
       {children}
     </S.Wrapper>
   );

diff --git a/src/pages/MyPage/MyPage.tsx b/src/pages/MyPage/MyPage.tsx
@@ -7,6 +7,9 @@ import useGetMyPage from '../../hooks/queries/member/useGetMypage';
 import { MyPageType } from '../../types/member';
 import * as S from './MyPage.style';
 import { useNavigate } from 'react-router';
+import { useState } from 'react';
+import DeleteModal from '../../components/common/Modal/DeleteModal';
+import { logOutInstance } from '../../apis/client';
 interface MyPage {
   memberData: MyPageType;
 }
@@ -15,6 +18,8 @@ const MAX_USERNAME_LENGTH = 5;
 
 const MyPage = () => {
   const navigate = useNavigate();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const fetchAuth = async () => logOutInstance.post(`/oauth/logout`);
 
   const memberData = useGetMyPage();
 
@@ -35,6 +40,17 @@ const MyPage = () => {
     );
   };
 
+  const isLogout = () => {
+    fetchAuth().then((response: any) => {
+      console.log(response);
+    });
+    localStorage.clear();
+    navigate('/');
+  };
+  const handleButtonClick = () => {
+    setIsModalOpen(true);
+  };
+
   const renderUserName = () => {
     const userName = memberData?.data?.memberInfo.nickname;
     const translatedUserName =
@@ -49,22 +65,33 @@ const MyPage = () => {
   };
 
   return (
-    <S.MyPageWrapper>
-      <S.TopImage />
-      <S.ProfileWrapper>
-        <S.UserButtonWrapper>
-          <S.UserWrapper>
-            <ProfileImage image={memberData?.data?.memberInfo.profileImage} />
-            {renderUserName()}
-          </S.UserWrapper>
-          <BtnLogout>로그아웃</BtnLogout>
-        </S.UserButtonWrapper>
-        <BtnFill onClick={goOnboarding} customStyle={{ width: '30.3rem', height: '5.2rem' }}>
-          새로운 선물 준비하기
-        </BtnFill>
-      </S.ProfileWrapper>
-      {renderGiftRoom()}
-    </S.MyPageWrapper>
+    <>
+      {isModalOpen && (
+        <DeleteModal
+          setIsModalOpen={setIsModalOpen}
+          onClickDelete={isLogout}
+          okButtonText='네, 할게요.'
+        >
+          정말 로그아웃하시겠어요?
+        </DeleteModal>
+      )}
+      <S.MyPageWrapper>
+        <S.TopImage />
+        <S.ProfileWrapper>
+          <S.UserButtonWrapper>
+            <S.UserWrapper>
+              <ProfileImage image={memberData?.data?.memberInfo.profileImage} />
+              {renderUserName()}
+            </S.UserWrapper>
+            <BtnLogout handleButtonClick={handleButtonClick}>로그아웃</BtnLogout>
+          </S.UserButtonWrapper>
+          <BtnFill onClick={goOnboarding} customStyle={{ width: '30.3rem', height: '5.2rem' }}>
+            새로운 선물 준비하기
+          </BtnFill>
+        </S.ProfileWrapper>
+        {renderGiftRoom()}
+      </S.MyPageWrapper>
+    </>
   );
 };