feat: 회원 탈퇴 기능 추가

src/bookmarks/ui/Main/BookmarkBSDeleteConfirmation.tsx → src/bookmarks/ui/Main/BSDeleteConfirmation.tsx

@@ -7,18 +7,24 @@ interface BSDeleteConfirmationProps {
   open: boolean;
   onClose: () => void;
   onDelete: () => void;
+  mainText?: string;
+  subText?: string;
+  buttonText?: string;
 }
 
-const BookmarkBSDeleteConfirmation = ({
+const BSDeleteConfirmation = ({
   open,
   onClose,
   onDelete,
+  mainText = '정말로 삭제 할까요?',
+  subText = '삭제하면 다시 복구할 수 없습니다. 삭제하시겠습니까?',
+  buttonText = '삭제',
 }: BSDeleteConfirmationProps) => {
   return (
     <BottomSheet open={open} maxHeight={30} onClose={onClose}>
       <BSWrapper>
         <Text.Span style={{ margin: '1rem 0' }} weight="bold" fontSize={1.4}>
-          정말로 삭제 할까요?
+          {mainText}
         </Text.Span>
 
         <Text.Span
@@ -27,7 +33,7 @@ const BookmarkBSDeleteConfirmation = ({
           }}
           fontSize={0.9}
         >
-          삭제하면 다시 복구할 수 없습니다. 삭제하시겠습니까?
+          {subText}
         </Text.Span>
         <ButtonWrapper>
           <Button
@@ -45,15 +51,15 @@ const BookmarkBSDeleteConfirmation = ({
             }}
             onClick={onDelete}
           >
-            삭제
+            {buttonText}
           </Button>
         </ButtonWrapper>
       </BSWrapper>
     </BottomSheet>
   );
 };
 
-export default BookmarkBSDeleteConfirmation;
+export default BSDeleteConfirmation;
 
 const BSWrapper = styled.div`
   display: flex;

src/members/api/member.ts

@@ -526,3 +526,27 @@ export const useUnblockUserQuery = ({
     },
   });
 };
+
+interface DELETEUserInfoRequest {
+  loginId: number;
+  token?: string;
+}
+
+const deleteUserInfoAPI = async ({ loginId, token }: DELETEUserInfoRequest) => {
+  const { data } = await client({
+    method: 'delete',
+    url: '/members/me',
+    params: { loginId },
+    data: {},
+    headers: token ? { Authorization: `Bearer ${token}` } : {},
+  });
+  return data;
+};
+
+export interface DeleteAPIRequest {
+  loginId: number;
+  token?: string;
+}
+export const useDELETEUserInfoQuery = () => {
+  return useMutation(deleteUserInfoAPI);
+};

src/pages/MainPage.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import BookmarkToggle from '@/bookmarks/ui/Main/BookmarkToggle';
 import BookmarkUserInfo from '@/bookmarks/ui/BookmarkUserInfo';
-import BookmarkBSDeleteConfirmation from '@/bookmarks/ui/Main/BookmarkBSDeleteConfirmation';
+import BSDeleteConfirmation from '@/bookmarks/ui/Main/BSDeleteConfirmation';
 import useCategory from '@/bookmarks/service/hooks/home/useCategory';
 import useReadList from '@/bookmarks/service/hooks/home/useReadList';
 import useDeleteBookmarkList from '@/bookmarks/service/hooks/home/useDeleteBookmarkList';
@@ -74,7 +74,7 @@ const MainPage = () => {
         </Suspense>
       </LMiddle>
       {/** 북마크 삭제 확인 */}
-      <BookmarkBSDeleteConfirmation
+      <BSDeleteConfirmation
         onClose={deleteBookmarkClose}
         onDelete={onClickDelete}
         open={isDeleteBookmarkOpen}

src/user/ui/UserProfileInfo.tsx

@@ -1,7 +1,13 @@
+import BSDeleteConfirmation from '@/bookmarks/ui/Main/BSDeleteConfirmation';
 import BottomFixedButton from '@/common-ui/BottomFixedButton';
+import useBottomSheet from '@/common-ui/BottomSheet/hooks/useBottomSheet';
 import Header from '@/common-ui/Header/Header';
+import Text from '@/common-ui/Text';
+import useWebview from '@/common/service/hooks/useWebview';
 import Emoji from '@/common/ui/Emoji';
 import EmojiSelect from '@/common/ui/EmojiSelect';
+import { useDELETEUserInfoQuery } from '@/members/api/member';
+import useAuthStore from '@/store/auth';
 import EditBox from '@/user/ui/EditBox';
 import getRem from '@/utils/getRem';
 import styled from '@emotion/styled';
@@ -36,6 +42,21 @@ const UserProfileInfo = ({
   onChangeNickname,
   onSubmit,
 }: UserProfileInfoProps) => {
+  const {
+    isOpen: deleteUserInfoBS,
+    open: openDeleteUserInfo,
+    close: closeDeleteUserInfo,
+  } = useBottomSheet();
+
+  const { memberId, initializeUserInfo } = useAuthStore();
+  const { postMessage } = useWebview();
+  const { mutate: deleteUserInfo } = useDELETEUserInfoQuery();
+  const onClickDeleteUserInfo = () => {
+    deleteUserInfo({ loginId: memberId });
+    initializeUserInfo();
+    postMessage('signUp');
+  };
+
   return (
     <Form onSubmit={onSubmit}>
       <Header showBackButton={mode === 'EDIT'} />
@@ -56,6 +77,17 @@ const UserProfileInfo = ({
             withCount
           />
         </StyleEditBox>
+        {mode === 'EDIT' && (
+          <DeleteUserInfoWrapper>
+            <DeleteUserInfoText
+              onClick={openDeleteUserInfo}
+              fontSize={0.8}
+              color="grey600"
+            >
+              탈퇴하기
+            </DeleteUserInfoText>
+          </DeleteUserInfoWrapper>
+        )}
         <BottomFixedButton
           activeButtonColor="lightGreen"
           buttonColor="buttonGreen"
@@ -66,6 +98,16 @@ const UserProfileInfo = ({
         </BottomFixedButton>
       </EmojiBackDrop>
       {isEmojiBSOpen && <EmojiSelect onChangeEmoji={onChangeEmoji} />}
+      {mode === 'EDIT' && (
+        <BSDeleteConfirmation
+          open={deleteUserInfoBS}
+          onClose={closeDeleteUserInfo}
+          onDelete={onClickDeleteUserInfo}
+          mainText="정말로 탈퇴할까요?"
+          subText="탈퇴하면 다시 복구할 수 없습니다. 탈퇴하시겠습니까?"
+          buttonText="탈퇴"
+        />
+      )}
     </Form>
   );
 };
@@ -87,3 +129,12 @@ const StyleEditBox = styled.div`
   flex-direction: column;
   padding: 0 ${getRem(20)};
 `;
+
+const DeleteUserInfoWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: ${getRem(10)};
+  padding-right: ${getRem(20)};
+`;
+
+const DeleteUserInfoText = styled(Text.Span)``;