diff --git a/src/components/DeleteButton.tsx b/src/components/DeleteButton.tsx
index 4f44564..5bdd99e 100644
--- a/src/components/DeleteButton.tsx
+++ b/src/components/DeleteButton.tsx
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { useDeleteUser } from '../hooks/queries/useDeleteUser';
+import { useNavigate } from 'react-router-dom';
 
 interface DeleteButtonInterface {
   message: string;
@@ -8,14 +9,20 @@ interface DeleteButtonInterface {
 const DeleteButton = ({ message }: DeleteButtonInterface) => {
   const { deleteUser } = useDeleteUser();
   const accessToken = localStorage.getItem('ACCESS_TOKEN');
+  const navigate = useNavigate();
 
   if (!accessToken) {
     console.error('Access token is missing');
     return null;
   }
 
-  const handleDeleteUser = () => {
-    deleteUser(accessToken);
+  const handleDeleteUser = async () => {
+    const result = await deleteUser(accessToken);
+    if (result.success) {
+      navigate('/complete');
+    } else {
+      navigate('/error');
+    }
   };
 
   return <ButtonWrapper onClick={handleDeleteUser}>{message}</ButtonWrapper>;
diff --git a/src/hooks/queries/useDeleteUser.tsx b/src/hooks/queries/useDeleteUser.tsx
index caf7a61..6a2ad95 100644
--- a/src/hooks/queries/useDeleteUser.tsx
+++ b/src/hooks/queries/useDeleteUser.tsx
@@ -1,16 +1,14 @@
-import { useNavigate } from 'react-router-dom';
 import user from '../../apis/user';
 
 export const useDeleteUser = () => {
   const deleteUser = async (accessToken: string) => {
     console.log('clicked?');
-    const navigate = useNavigate();
     try {
       await user.deleteUser(accessToken);
-      navigate('/complete');
+      return { success: true };
     } catch (err) {
       console.error(err);
-      navigate('/error');
+      return { success: false };
     }
   };