[DEV] 회원 탈퇴 api 연동

frontend/src/api/user.ts

@@ -33,3 +33,8 @@ export const fetchMyProfile = async () => {
     const { data } = await axiosInstance.get('/members')
     return data
 }
+
+export const withdrawMember = async () => {
+    const { data } = await axiosInstance.delete('/members/withdraw')
+    return data
+}

frontend/src/hooks/setting/useWithdrawSettings.ts

@@ -0,0 +1,31 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from 'react-router-dom'
+import { useAuthStore } from '../../stores/authStore'
+import { useWithdrawMember } from './userMutations'
+
+export function useWithdrawSettings() {
+    const navigate = useNavigate()
+    const queryClient = useQueryClient()
+    const clearAuth = useAuthStore((state) => state.actions.clearAuth)
+    const { mutate: withdraw, isPending } = useWithdrawMember()
+
+    const confirmWithdraw = () => {
+        if (isPending) return
+
+        withdraw(undefined, {
+            onSuccess: () => {
+                queryClient.clear()
+                clearAuth()
+                navigate('/')
+            },
+            onError: () => {
+                alert('회원 탈퇴에 실패했습니다.')
+            },
+        })
+    }
+
+    return {
+        confirmWithdraw,
+        isPending,
+    }
+}

frontend/src/hooks/setting/userMutations.ts

@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query'
-import { updateMemberAgree, updateMemberProfileImage, updateMemberSNS } from '../../api/user'
+import { updateMemberAgree, updateMemberProfileImage, updateMemberSNS, withdrawMember } from '../../api/user'
 
 export const useUpdateMemberAgree = () => {
     return useMutation({
@@ -18,3 +18,9 @@ export const useUpdateMemberProfileImage = () => {
         mutationFn: updateMemberProfileImage,
     })
 }
+
+export const useWithdrawMember = () => {
+    return useMutation({
+        mutationFn: withdrawMember,
+    })
+}

frontend/src/pages/setting/SettingPage.tsx

@@ -3,22 +3,25 @@ import { Button } from './_components/SettingButton'
 import '../../styles/scrollbar.css'
 import CloseIcon from '../../assets/icons/delete_normal.svg?react'
 import LogoutIcon from '../../assets/icons/logout.svg?react'
-import WithdrawlModal from './_components/WithdrawlModal'
+import WithdrawModal from './_components/WithdrawModal'
 import { useLogout } from '../../hooks/useLogout'
 import ProfileSettings from './_containers/ProfileSettings'
 import ConsentSettings from './_containers/ConsentSettings'
+import { useWithdrawSettings } from '../../hooks/setting/useWithdrawSettings'
 
 type SettingPageProps = {
     onClose?: () => void
 }
 
 export default function SettingPage({ onClose }: SettingPageProps) {
     const [activeTab, setActiveTab] = useState<'profile' | 'consent'>('profile')
-    const [showWithdrawlModal, setShowWithdrawlModal] = useState(false)
+    const [showWithdrawModal, setShowWithdrawModal] = useState(false)
 
     const logout = useLogout()
     const [loggingOut, setLoggingOut] = useState(false)
 
+    const { confirmWithdraw, isPending } = useWithdrawSettings()
+
     const handleClickLogout = async () => {
         if (loggingOut) return
         setLoggingOut(true)
@@ -27,10 +30,6 @@ export default function SettingPage({ onClose }: SettingPageProps) {
         onClose?.()
     }
 
-    const handleWithdrawlConfirm = () => {
-        setShowWithdrawlModal(false)
-    }
-
     return (
         <div className="fixed inset-0 z-50 bg-neutral-black-opacity50 flex justify-center items-center tablet:py-10">
             <div
@@ -78,7 +77,7 @@ export default function SettingPage({ onClose }: SettingPageProps) {
                     <div className="[&::-webkit-scrollbar]:hidden flex flex-1 flex-col p-8 gap-10 overflow-y-auto">
                         {activeTab === 'profile' && (
                             <ProfileSettings
-                                onOpenWithdraw={() => setShowWithdrawlModal(true)}
+                                onOpenWithdraw={() => setShowWithdrawModal(true)}
                                 fetchEnabled={!loggingOut}
                             />
                         )}
@@ -88,8 +87,12 @@ export default function SettingPage({ onClose }: SettingPageProps) {
                 </div>
             </div>
 
-            {showWithdrawlModal && (
-                <WithdrawlModal onClose={() => setShowWithdrawlModal(false)} onConfirm={handleWithdrawlConfirm} />
+            {showWithdrawModal && (
+                <WithdrawModal
+                    onClose={() => setShowWithdrawModal(false)}
+                    onConfirm={confirmWithdraw}
+                    isPending={isPending}
+                />
             )}
         </div>
     )

frontend/src/pages/setting/_components/WithdrawlModal.tsx → frontend/src/pages/setting/_components/WithdrawModal.tsx

@@ -1,12 +1,13 @@
 import Modal from '../../../components/Modal'
 import { Button } from './SettingButton'
 
-type WithdrawlModalProps = {
+type WithdrawModalProps = {
     onClose: () => void
     onConfirm: () => void
+    isPending: boolean
 }
 
-export default function WithdrawlModal({ onClose, onConfirm }: WithdrawlModalProps) {
+export default function WithdrawModal({ onClose, onConfirm, isPending }: WithdrawModalProps) {
     return (
         <Modal
             title="계정을 탈퇴하시겠어요?"
@@ -17,6 +18,7 @@ export default function WithdrawlModal({ onClose, onConfirm }: WithdrawlModalPro
                 <Button
                     variant="ghost"
                     onClick={onClose}
+                    disabled={isPending}
                     className="flex items-center justify-center gap-2 px-4 w-full !max-w-[103px] h-[40px] !rounded-[16px]
                     font-body-16b border border-gray-300"
                 >
@@ -25,6 +27,7 @@ export default function WithdrawlModal({ onClose, onConfirm }: WithdrawlModalPro
                 <Button
                     variant="danger"
                     onClick={onConfirm}
+                    disabled={isPending}
                     className="flex items-center justify-center gap-2 px-4 w-full !max-w-[87px] h-[40px] !rounded-[16px]
                     font-body-16b"
                 >