diff --git a/src/features/DeleteAccount/useDeleteAccount.ts b/src/features/DeleteAccount/useDeleteAccount.ts
new file mode 100644
index 0000000..f3f3649
--- /dev/null
+++ b/src/features/DeleteAccount/useDeleteAccount.ts
@@ -0,0 +1,10 @@
+import { useMutation } from '@tanstack/react-query';
+import { quit } from 'src/types';
+
+export const useDeleteAccount = () => {
+ const { mutateAsync } = useMutation({
+ mutationFn: quit,
+ });
+
+ return mutateAsync;
+};
diff --git a/src/pages/mypage/MyPage.module.css b/src/pages/mypage/MyPage.module.css
index 650796f..9ac45dd 100644
--- a/src/pages/mypage/MyPage.module.css
+++ b/src/pages/mypage/MyPage.module.css
@@ -46,11 +46,17 @@
}
}
-.Logout {
+.SmallButtonsWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ margin: 0 20px;
+}
+
+.SmallButton {
font-weight: 600;
font-size: 14px;
- color: var(--color-neutral-700);
+ color: var(--color-neutral-700) !important;
- margin-left: 20px;
display: block;
}
\ No newline at end of file
diff --git a/src/pages/mypage/MyPage.tsx b/src/pages/mypage/MyPage.tsx
index e2f9ab1..125b748 100644
--- a/src/pages/mypage/MyPage.tsx
+++ b/src/pages/mypage/MyPage.tsx
@@ -5,8 +5,23 @@ import styles from './MyPage.module.css';
import { UserInfoResponse } from 'src/types';
import { UserAvatar } from 'src/entities/user/ui/UserAvatar';
import { INQUIRY_URL, NOTICE_URL, PRIVACY_POLICY_URL, TERM_URL } from 'src/shared/constants/url';
+import { useDeleteAccount } from 'src/features/DeleteAccount/useDeleteAccount';
+import { Theme } from 'src/shared/styles/constants';
+import { redirectToLoginPage } from 'src/shared/functions/redirectToLoginPage';
+
+const ArrowIcon = () =>