From d07ab57997dd7496238d7e6e860669072899e095 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=98=88=EC=A7=84?= <orobos654@gmail.com>
Date: Thu, 19 Sep 2024 22:21:26 +0900
Subject: [PATCH] feat: add delete info modal

---
 src/pages/profile/ProfilePage.module.css      | 24 ++++++++++++
 .../profile/components/ProfilePageHeader.tsx  | 37 ++++++++++++++++++-
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/src/pages/profile/ProfilePage.module.css b/src/pages/profile/ProfilePage.module.css
index 44798fd..f716d45 100644
--- a/src/pages/profile/ProfilePage.module.css
+++ b/src/pages/profile/ProfilePage.module.css
@@ -26,6 +26,30 @@
     color: var(--color-neutral-60) !important;
 }
 
+.DeleteModal {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    text-align: left;
+    width: 100%;
+    padding: 24px
+}
+
+.DeleteModalBody {
+    padding-top: 10px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.DeleteModalFooter {
+    display: grid;
+    grid-template-columns: 1fr 1.5fr;
+    gap: 8px;
+    width: 100%;
+}
+
 .Body {
     flex-grow: 1;
     overflow: hidden;
diff --git a/src/pages/profile/components/ProfilePageHeader.tsx b/src/pages/profile/components/ProfilePageHeader.tsx
index 72c2161..0be3b4e 100644
--- a/src/pages/profile/components/ProfilePageHeader.tsx
+++ b/src/pages/profile/components/ProfilePageHeader.tsx
@@ -1,4 +1,4 @@
-import { Link } from '@remix-run/react';
+import { Link, useNavigate } from '@remix-run/react';
 import { ArrowLeft, Delete, Edit, Menu, Share } from 'src/shared/ui/icons';
 import { Theme } from 'src/shared/styles/constants';
 import styles from 'src/pages/profile/ProfilePage.module.css';
@@ -10,6 +10,10 @@ import { MyProfile } from 'src/entities/profile/model/myProfileStore';
 import { useTranslation } from 'react-i18next';
 import { ProfileShareBottomSheet } from 'src/features/ProfileShare/ProfileShareBottomSheet';
 import { calculateAge, convertDateObjectToDate } from 'src/shared/vo/date';
+import { Modal } from 'src/shared/ui/Modal/Modal';
+import { useMutation } from '@tanstack/react-query';
+import { deleteInfo } from 'src/types';
+import toast from 'react-hot-toast';
 
 export const ProfilePageHeader = ({
   profile,
@@ -20,11 +24,23 @@ export const ProfilePageHeader = ({
   profile: MyProfile;
   showTitle: boolean;
 }) => {
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const [isShareOpen, setShareOpen] = useState(false);
+  const [isDeleteModalOpen, setDeleteModalOpen] = useState(false);
 
   const age = calculateAge(convertDateObjectToDate(profile.birthDate));
 
+  const { mutateAsync: deleteMutation } = useMutation({
+    mutationFn: deleteInfo,
+  });
+
+  const onClickDelete = async () => {
+    await deleteMutation(infoId);
+    navigate('/');
+    toast.success('정보가 삭제되었습니다.', { icon: null });
+  };
+
   return (
     <>
       <Header
@@ -62,6 +78,7 @@ export const ProfilePageHeader = ({
                     color={'neutral'}
                     prefixSlot={<Delete color={Theme.color.neutral60} />}
                     className={styles.DeleteButton}
+                    onClick={() => setDeleteModalOpen(true)}
                   >
                     삭제하기
                   </Button>
@@ -80,6 +97,24 @@ export const ProfilePageHeader = ({
         )}
       </Header>
       <ProfileShareBottomSheet isOpen={isShareOpen} onClose={() => setShareOpen(false)} infoId={infoId} />
+      <Modal
+        wrapperClassName={styles.DeleteModal}
+        showModal={isDeleteModalOpen}
+        closeModal={() => setDeleteModalOpen(false)}
+      >
+        <div className={styles.DeleteModalBody}>
+          <h2>{profile.name}님의 정보를 삭제할까요?</h2>
+          <p>삭제한 이후 복구할 수 없습니다.</p>
+        </div>
+        <div className={styles.DeleteModalFooter}>
+          <Button variant={'outline'} widthType={'fill'} color={'neutral'} onClick={() => setDeleteModalOpen(false)}>
+            취소
+          </Button>
+          <Button variant={'filled'} widthType={'fill'} color={'primary'} onClick={onClickDelete}>
+            삭제
+          </Button>
+        </div>
+      </Modal>
     </>
   );
 };