[#127] feat: 성장 기록 삭제 시 모달 띄우기

Donggrina · Jun 18, 2024 · 1160e47 · 1160e47
1 parent a486244
commit 1160e47
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 23 deletions.
diff --git a/components/growth/list/list-header/index.tsx b/components/growth/list/list-header/index.tsx
@@ -6,6 +6,8 @@ import DropdownMenu from '@/components/kebab/kebab';
 import useToggle from '@/hooks/use-toggle';
 import { useDeleteGrowthMutation } from '@/hooks/queries/growth/use-post-growth-query';
 import { useRouter } from 'next/router';
+import CompleteModal from '@/pages/growth/create/complete-modal';
+import useModal from '@/hooks/use-modal';
 
 interface ListHeaderProps {
   category: string;
@@ -27,37 +29,50 @@ export default function ListHeader({
   petImage,
 }: ListHeaderProps) {
   const router = useRouter();
+  const [Modal, handleModal] = useModal();
 
   const { isToggle: isOpen, handleCloseToggle: onCloseToggle, handleOpenToggle: onOpenToggle } = useToggle();
   const deleteMutation = useDeleteGrowthMutation();
 
+  const openModal = () => {
+    handleModal(true);
+  };
+  const closeModal = () => {
+    handleModal(false);
+    router.push('/growth');
+  };
   const handleEditClick = () => {};
   const handleDeleteClick = () => {
     deleteMutation.mutate(growthId, {
-      onSuccess: () => router.push('/growth'),
+      onSuccess: () => openModal(),
     });
   };
   return (
-    <div className={styles.headerContainer}>
-      <div className={styles.wrapper}>
-        <CategoryIcon alt="카테고리 아이콘" />
-        <div className={styles.subHeader}>
-          <div className={styles.categoryName}>{category}</div>
-          <div className={styles.profileContainer}>
-            <Profile name={nickname} image={writerImage} />
-            <Profile name={petName} className={styles.lastProfile} image={petImage} />
+    <>
+      <div className={styles.headerContainer}>
+        <div className={styles.wrapper}>
+          <CategoryIcon alt="카테고리 아이콘" />
+          <div className={styles.subHeader}>
+            <div className={styles.categoryName}>{category}</div>
+            <div className={styles.profileContainer}>
+              <Profile name={nickname} image={writerImage} />
+              <Profile name={petName} className={styles.lastProfile} image={petImage} />
+            </div>
           </div>
         </div>
+        {isMine ? (
+          <DropdownMenu value={{ isOpen, onOpenToggle, onCloseToggle }}>
+            <DropdownMenu.Kebab />
+            <DropdownMenu.Content>
+              <DropdownMenu.Item onClick={handleEditClick}>수정</DropdownMenu.Item>
+              <DropdownMenu.Item onClick={handleDeleteClick}>삭제</DropdownMenu.Item>
+            </DropdownMenu.Content>
+          </DropdownMenu>
+        ) : null}
       </div>
-      {isMine ? (
-        <DropdownMenu value={{ isOpen, onOpenToggle, onCloseToggle }}>
-          <DropdownMenu.Kebab />
-          <DropdownMenu.Content>
-            <DropdownMenu.Item onClick={handleEditClick}>수정</DropdownMenu.Item>
-            <DropdownMenu.Item onClick={handleDeleteClick}>삭제</DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </DropdownMenu>
-      ) : null}
-    </div>
+      <Modal>
+        <CompleteModal closeModal={closeModal} text="성장 기록이 삭제되었습니다." />
+      </Modal>
+    </>
   );
 }
diff --git a/pages/growth/create/complete-modal/index.tsx b/pages/growth/create/complete-modal/index.tsx
@@ -4,14 +4,15 @@ import Button from '@/components/common/button/button';
 
 interface CompleteModalProps {
   closeModal: () => void;
+  text: string;
 }
-export default function CompleteModal({ closeModal }: CompleteModalProps) {
+export default function CompleteModal({ closeModal, text }: CompleteModalProps) {
   return (
     <div className={styles.box}>
-      <p className={styles.text}>성장기록 등록이 완료되었습니다.</p>
+      <p className={styles.text}>{text}</p>
       <div className={styles.buttonBox}>
         <Button className="primary" type="button" onClick={closeModal}>
-          닫기
+          확인
         </Button>
       </div>
     </div>

diff --git a/pages/growth/create/index.tsx b/pages/growth/create/index.tsx
@@ -112,7 +112,7 @@ export default function CreateGrowth() {
         </form>
       </div>
       <Modal>
-        <CompleteModal closeModal={closeModal} />
+        <CompleteModal closeModal={closeModal} text="성장 기록이 등록되었습니다." />
       </Modal>
     </>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -112,7 +112,7 @@ export default function CreateGrowth() { @@
             </form>
           </div>
           <Modal>
-            <CompleteModal closeModal={closeModal} />
+            <CompleteModal closeModal={closeModal} text="성장 기록이 등록되었습니다." />
           </Modal>
         </>
       );
@@ Expand Down @@