[Feat]회원삭제 기능 구현

회원 탈퇴 페이지 완성
/members/{memberId}로 delete요청 후 비밀번호 통과 시 데이터베이스에서 회원 삭제
#Issues #15

client/src/components/Logins/LoginConfirmatationModal.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { useSelector, useDispatch } from 'react-redux';
 import { setMemberInfo } from '../../reducer/member/memberInfoSlice.ts';
-import useGetMemberInfo from '../../hooks/useGetmemberInfo.ts';
+import { useGetMemberInfo } from '../../hooks/useGetMemberInfo.ts';
 import { RootState } from '../../reducer/member/rootReducer';
 
 const LoginConfirmationModal: React.FC<LoginConfirmationProps> = ({ onClose }) => {

client/src/components/Profile/memberInfoModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components'; 
 import { useSelector } from 'react-redux';
-import useGetMemberInfo from '../../hooks/useGetmemberInfo'; 
+import { useGetMemberInfo } from '../../hooks/useGetMemberInfo.ts'; 
 import { RootState } from '../../store/config'; 
 
 const MemberInfoModal: React.FC<MemberInfoModalProps> = ({ onClose }) => {

client/src/components/Profile/memberWithdrawalModal.tsx

@@ -1,43 +1,36 @@
-import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
-import axios from 'axios';
-
-const MemberWithdrawalModal: React.FC<MemberWithdrawalModalProps> = ({ onClose, memberId }) => {
+import React, { useState } from 'react';
+import styled from 'styled-components'; 
+import { useSelector } from 'react-redux'; // redux-toolkit에서 가져옴
+import { useDeleteMember } from '../../hooks/useDeleteMembers'; // 적절한 경로로 수정
+import { RootState } from '../../store/config'; 
+
+const MemberWithdrawalModal: React.FC<MemberWithdrawalModalProps> = ({ onClose }) => {
+    // redux-toolkit에서 memberId 가져옴
+    const memberId = useSelector((state: RootState) => state.login.memberId); 
+
     const [password, setPassword] = useState<string>('');
-    const [memberPassword, setMemberPassword] = useState<string | null>(null);
+    const deleteMemberMutation = useDeleteMember();
 
     const withdrawalTitle = "StockHolm에서 탈퇴하시겠습니까?";
     const passwordInputLabel = "비밀번호를 입력해주세요.";
     const incorrectPasswordMsg = "Incorrect password!";
     const withdrawalButtonText = "회원탈퇴";
 
-    useEffect(() => {
-        axios.get(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/members/${memberId}`)
-            .then(response => {
-                setMemberPassword(response.data.password);
-            })
-            .catch(error => {
-                console.error("Error fetching member password:", error);
-            });
-    }, [memberId]);
-
     const handleWithdrawal = () => {
-        if (password === memberPassword) {
-            axios.delete(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/members/${memberId}`)
-                .then(response => {
-                    if (response.status === 204) {
-                        alert('회원탈퇴 되었습니다!');
-                        onClose();
-                    }
-                })
-                .catch(error => {
-                    console.error('Error deleting member:', error);
-                });
+        if (password === memberId) {
+            deleteMemberMutation.mutate(memberId, {
+                onSuccess: () => {
+                    alert('회원탈퇴 되었습니다!');
+                    onClose();
+                },
+                onError: () => {
+                    alert(incorrectPasswordMsg);
+                }
+            });
         } else {
             alert(incorrectPasswordMsg);
         }
     };
-
     return (
         <ModalBackground>
             <ModalContainer>
@@ -53,7 +46,7 @@ const MemberWithdrawalModal: React.FC<MemberWithdrawalModalProps> = ({ onClose,
 
 interface MemberWithdrawalModalProps {
     onClose: () => void;
-    memberId: string;
+
 }
 
 // Styled Components Definitions:

client/src/components/Profile/profileModal.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import MemberInfoModal from './memberInfoModal'; // 경로는 실제 파일 위치에 따라 수정해야 합니다.
+import MemberWithdrawalModal from './memberWithdrawalModal'; // 경로는 실제 파일 위치에 따라 수정해야 합니다.
 
 const ProfileModal: React.FC<ProfileModalProps> = ({ onClose }) => {
     const [selectedTab, setSelectedTab] = useState<number>(1);
@@ -21,12 +22,12 @@ const ProfileModal: React.FC<ProfileModalProps> = ({ onClose }) => {
                 <TabContent>
                     {selectedTab === 1 && <MemberInfoModal onClose={onClose}/>}
                     {selectedTab === 2 && <div>현금 Content</div>}
-                    {selectedTab === 3 && <div>회원탈퇴 Content</div>}
+                    {selectedTab === 3 && <MemberWithdrawalModal onClose={onClose}/>} {/* 회원탈퇴 모달 추가 */}
                 </TabContent>
             </ModalContainer>
         </ModalBackground>
     );
-};
+}
 
 interface ProfileModalProps {
     onClose: () => void;

client/src/hooks/useDeleteMembers.ts

@@ -0,0 +1,12 @@
+import { useMutation } from 'react-query';
+import axios from 'axios';
+
+export function useDeleteMember() {
+    return useMutation(async (memberId: string) => {
+        const response = await axios.delete(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/members/${memberId}`);
+
+        if (response.status !== 204) {
+            throw new Error('Failed to delete member');
+        }
+    });
+}

client/src/hooks/useGetMemberInfo.ts

@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 import axios from 'axios';
 
-function useGetMemberInfo(memberId: number | null) {
+export function useGetMemberInfo(memberId: number | null) {
   return useQuery(['member', memberId], async () => {
     const response = await axios.get(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/members/${memberId}`);
 
@@ -13,4 +13,3 @@ function useGetMemberInfo(memberId: number | null) {
   });
 }
 
-export default useGetMemberInfo;