[마이페이지] 로그아웃 버튼 클릭 시 모달 나타내기

src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx

@@ -66,6 +66,7 @@ const GiftAddPageLayout = ({
             setIsModalOpen={setIsModalOpen}
             onClickDelete={handleClickConfirmDeleteBtn}
             clickedItem={clickedItem}
+            okButtonText='네, 삭제할게요'
           >
             정말 상품을 삭제하시겠어요?
           </DeleteModal>

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>
   );

src/components/common/Modal/DeleteModal.tsx

@@ -9,13 +9,15 @@ interface DeleteModalProps {
   onClickDelete: (giftId?: number) => void;
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   clickedItem?: number | undefined;
+  okButtonText: string;
 }
 
 const DeleteModal = ({
   children,
   onClickDelete,
   setIsModalOpen,
   clickedItem,
+  okButtonText,
 }: DeleteModalProps) => {
   const onClickCancel = () => {
     setIsModalOpen(false);
@@ -39,9 +41,9 @@ const DeleteModal = ({
               backgroundColor: 'white',
               color: 'black',
             }}
-            onClick={() => (clickedItem ? onClickDelete(clickedItem) : onClickCancel())}
+            onClick={() => (clickedItem ? onClickDelete(clickedItem) : onClickDelete())}
           >
-            네, 삭제할게요
+            {okButtonText}
           </BtnDeleteMedium>
           <BtnMedium customStyle={{ width: '12rem' }} onClick={onClickCancel}>
             아니오

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>
+    </>
   );
 };