feat: 회원 탈퇴 구현 #259

team-abcdedu · Nov 19, 2024 · 97cd663 · 97cd663
1 parent 7379a7f
commit 97cd663
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 1 deletion.
diff --git a/src/pages/My/Leave.tsx b/src/pages/My/Leave.tsx
@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { Navigate } from 'react-router-dom';
+
+import Head from '@/components/Head';
+import useModal from '@/hooks/useModal';
+import useBoundStore from '@/stores';
+
+import LeaveModal from './components/LeaveModal';
+
+export default function Leave() {
+  const user = useBoundStore(state => state.user);
+  const [isAgreed, setIsAgreed] = useState(false);
+
+  const { isVisible: isLeaveModalVisible, toggleModal: toggleLeaveModal } =
+    useModal();
+
+  if (!user) return <Navigate to='/' replace />;
+
+  return (
+    <div className='w-full max-w-screen-sm m-auto px-24 py-60'>
+      <Head title='회원 탈퇴 | ABCDEdu' />
+      <h2 className='text-28 font-semibold mb-4'>회원 탈퇴</h2>
+      <p className='text-neutral-500'>
+        탈퇴하시기 전 안내 사항을 꼭 확인해 주세요.
+      </p>
+      <ul className='flex flex-col gap-16 py-50 list-disc pl-16'>
+        <li>
+          사용하고 계신 이메일(
+          <strong className='text-primary-400 font-semibold'>
+            {user.email}
+          </strong>
+          )은 탈퇴할 경우 재가입 및 복구가 불가능합니다.
+        </li>
+        <li>
+          탈퇴 후에도 작성한 게시물과 댓글은 그대로 남아 있습니다. (작성자 익명
+          처리)
+        </li>
+      </ul>
+      <div className='flex items-center gap-4 mb-60'>
+        <input
+          id='agree'
+          type='checkbox'
+          checked={isAgreed}
+          onChange={() => setIsAgreed(prev => !prev)}
+        />
+        <label htmlFor='agree' className='cursor-pointer'>
+          안내 사항을 모두 확인하였으며, 이에 동의합니다.
+        </label>
+      </div>
+      <button
+        className='block w-100 m-auto px-16 py-8 rounded-full 
+      bg-primary-400 text-white font-semibold disabled:bg-primary-400/15'
+        disabled={!isAgreed}
+        onClick={toggleLeaveModal}
+      >
+        탈퇴하기
+      </button>
+      <LeaveModal isVisible={isLeaveModalVisible} onClose={toggleLeaveModal} />
+    </div>
+  );
+}
diff --git a/src/pages/My/components/LeaveModal.tsx b/src/pages/My/components/LeaveModal.tsx
@@ -0,0 +1,56 @@
+import MessageModal from '@/components/MessageModal';
+import Modal from '@/components/Modal';
+
+import useLeave from '../hooks/useLeave';
+
+interface LeaveModalProps {
+  isVisible: boolean;
+  onClose: () => void;
+}
+
+export default function LeaveModal({ isVisible, onClose }: LeaveModalProps) {
+  const {
+    handleLeaveClick,
+    isMessageModalVisible,
+    messageModalType,
+    resultMessage,
+    handleMessageModalClose,
+  } = useLeave({ onSuccess: onClose });
+
+  return (
+    <>
+      <Modal size='xs' isVisible={isVisible}>
+        <Modal.Content>
+          <p className='text-center'>
+            회원 탈퇴 시 계정 복구가 불가능합니다.
+            <br />
+            정말 탈퇴하시겠습니까?
+          </p>
+        </Modal.Content>
+        <Modal.Actions direction='row'>
+          <button
+            className='w-full h-45 text-15 
+        text-primary-400 btn-white-pb font-semibold rounded-md'
+            onClick={onClose}
+          >
+            취소
+          </button>
+          <button
+            className='w-full h-45 bg-primary-400 text-15 
+        text-white font-semibold rounded-md'
+            onClick={handleLeaveClick}
+          >
+            탈퇴하기
+          </button>
+        </Modal.Actions>
+      </Modal>
+      <MessageModal
+        backdrop={false}
+        isVisible={isMessageModalVisible}
+        onClose={handleMessageModalClose}
+        type={messageModalType}
+        message={resultMessage}
+      />
+    </>
+  );
+}
diff --git a/src/pages/My/hooks/useLeave.ts b/src/pages/My/hooks/useLeave.ts
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+
+import useLogout from '@/hooks/auth/useLogout';
+import useModal from '@/hooks/useModal';
+import authApi from '@/services/auth';
+
+export default function useLeave({ onSuccess }: { onSuccess: () => void }) {
+  const { handleLogout } = useLogout();
+
+  const { isVisible, toggleModal } = useModal();
+  const [messageModalType, setMessageModalType] = useState<'success' | 'error'>(
+    'success',
+  );
+  const [resultMessage, setResultMessage] = useState('');
+
+  const handleLeaveClick = async () => {
+    try {
+      await authApi.deleteAccount();
+      setMessageModalType('success');
+      setResultMessage(
+        '회원 탈퇴가 완료되었습니다.\n이용해 주셔서 감사합니다.',
+      );
+    } catch (error) {
+      console.log(error);
+      setMessageModalType('error');
+      setResultMessage('회원 탈퇴에 실패했습니다.');
+    } finally {
+      toggleModal();
+    }
+  };
+
+  const handleMessageModalClose = () => {
+    toggleModal();
+    onSuccess();
+    handleLogout();
+  };
+
+  return {
+    handleLeaveClick,
+    isMessageModalVisible: isVisible,
+    messageModalType,
+    resultMessage,
+    handleMessageModalClose,
+  };
+}
diff --git a/src/pages/My/index.tsx b/src/pages/My/index.tsx
@@ -1,4 +1,5 @@
-import { Navigate } from 'react-router-dom';
+import { CaretRight } from '@phosphor-icons/react';
+import { Link, Navigate } from 'react-router-dom';
 
 import Head from '@/components/Head';
 import useModal from '@/hooks/useModal';
@@ -47,6 +48,10 @@ export default function MyPage() {
           비밀번호 변경
         </button>
       </div>
+      <Link to='leave' className='flex-row-center w-fit mt-12 text-neutral-500'>
+        <span>회원탈퇴</span>
+        <CaretRight size={14} />
+      </Link>
     </div>
   );
 }