Refactor : 게시글 삭제 로직 변경 (첨부파일 함께 삭제)

potenday-project · Dec 4, 2023 · 51c0778 · 51c0778
1 parent f5f9f0d
commit 51c0778
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/client/src/components/post/PostCard.tsx b/client/src/components/post/PostCard.tsx
@@ -101,7 +101,12 @@ const PostCard = ({
             </Typography>
           </Stack>
 
-          {isMyPost && <PostCardOptionDropdown postId={postNo} />}
+          {isMyPost && (
+            <PostCardOptionDropdown
+              postId={postNo}
+              filePk={postAttachUrls?.[0]?.attachNo}
+            />
+          )}
         </Stack>
 
         {alcoholName && (

diff --git a/client/src/components/post/PostCardOptionDropdown.tsx b/client/src/components/post/PostCardOptionDropdown.tsx
@@ -2,19 +2,36 @@ import React, { useState } from "react";
 import { MoreVertOutlined } from "@mui/icons-material";
 import { ButtonBase, Menu, MenuItem } from "@mui/material";
 import { useDeletePostMutation } from "@/queries/post/useDeletePostMutation";
+import useDeleteAttachMutation from "@/queries/attach/useDeleteAttachMutation";
+import { useRouter } from "next/navigation";
+import HOME from "@/const/clientPath";
 
 type PostCardOptionDropdownProps = {
   postId: number;
+  filePk?: string;
 };
 
-const PostCardOptionDropdown = ({ postId }: PostCardOptionDropdownProps) => {
+const PostCardOptionDropdown = ({
+  postId,
+  filePk,
+}: PostCardOptionDropdownProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
+  const router = useRouter();
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
-  const { mutate: deletePost } = useDeletePostMutation();
+  const { mutateAsync: deletePost } = useDeletePostMutation();
+  const { mutateAsync: deleteFile } = useDeleteAttachMutation();
+
+  const deleteHandler = async () => {
+    if (confirm("정말 삭제하시겠습니까?")) {
+      await deletePost(postId);
+      filePk && (await deleteFile(filePk));
+      router.push(HOME);
+    }
+  };
 
   const handleClose = () => {
     setAnchorEl(null);
@@ -25,15 +42,7 @@ const PostCardOptionDropdown = ({ postId }: PostCardOptionDropdownProps) => {
         <MoreVertOutlined />
       </ButtonBase>
       <Menu open={open} anchorEl={anchorEl} onClose={handleClose}>
-        <MenuItem
-          onClick={() => {
-            if (confirm("정말 삭제하시겠습니까?")) {
-              deletePost(postId);
-            }
-          }}
-        >
-          삭제
-        </MenuItem>
+        <MenuItem onClick={deleteHandler}>삭제</MenuItem>
         <MenuItem>수정</MenuItem>
       </Menu>
     </>