From 11f89bf5fe63eca51fb33088204a228d2ec174c3 Mon Sep 17 00:00:00 2001
From: Jungu Lee <1zzangjun@gmail.com>
Date: Mon, 4 Dec 2023 18:41:39 +0900
Subject: [PATCH] =?UTF-8?q?Refactor=20:=20=EC=88=98=EC=A0=95,=EC=82=AD?=
=?UTF-8?q?=EC=A0=9C=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EC=BB=B4?=
=?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B4=80=EC=8B=AC=EC=82=AC=20?=
=?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...entDropdown.tsx => DeleteEditDropdown.tsx} | 12 +++++-----
client/src/components/post/PostCard.tsx | 20 ++++++++++++++++-
.../post/PostCardOptionDropdown.tsx | 22 ++-----------------
.../components/post/detail/PostComment.tsx | 11 +++++-----
4 files changed, 32 insertions(+), 33 deletions(-)
rename client/src/components/{post/detail/PostCommentDropdown.tsx => DeleteEditDropdown.tsx} (81%)
diff --git a/client/src/components/post/detail/PostCommentDropdown.tsx b/client/src/components/DeleteEditDropdown.tsx
similarity index 81%
rename from client/src/components/post/detail/PostCommentDropdown.tsx
rename to client/src/components/DeleteEditDropdown.tsx
index c2b957e..b420131 100644
--- a/client/src/components/post/detail/PostCommentDropdown.tsx
+++ b/client/src/components/DeleteEditDropdown.tsx
@@ -2,15 +2,15 @@ import { ButtonBase, Menu, MenuItem } from "@mui/material";
import { MoreVertOutlined } from "@mui/icons-material";
import { useState } from "react";
-interface PostCommentDropdownInterface {
- onDelete: () => void;
- onEdit: () => void;
+interface DeleteEditDropdownInterface {
+ onDelete?: () => void;
+ onEdit?: () => void;
}
-const PostCommentDropdown = ({
+const DeleteEditDropdown = ({
onDelete,
onEdit,
-}: PostCommentDropdownInterface) => {
+}: DeleteEditDropdownInterface) => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
@@ -35,4 +35,4 @@ const PostCommentDropdown = ({
);
};
-export default PostCommentDropdown;
+export default DeleteEditDropdown;
diff --git a/client/src/components/post/PostCard.tsx b/client/src/components/post/PostCard.tsx
index 4554ae9..95a68b2 100644
--- a/client/src/components/post/PostCard.tsx
+++ b/client/src/components/post/PostCard.tsx
@@ -26,10 +26,13 @@ import "../newpost/quill.mention.css";
import { sanitize } from "isomorphic-dompurify";
import UserAvatar from "../user/info/UserAvatar";
import Link from "next/link";
-import { USER_PAGE } from "@/const/clientPath";
+import HOME, { USER_PAGE } from "@/const/clientPath";
import { useMyInfoQuery } from "@/queries/auth/useMyInfoQuery";
import PostCardOptionDropdown from "./PostCardOptionDropdown";
import { postcardContext } from "@/store/post/PostCardContext";
+import { useDeletePostMutation } from "@/queries/post/useDeletePostMutation";
+import useDeleteAttachMutation from "@/queries/attach/useDeleteAttachMutation";
+import { useRouter } from "next/navigation";
const PostCard = ({
postAttachUrls,
@@ -49,12 +52,27 @@ const PostCard = ({
alcoholNo,
}: PostInterface) => {
const openPostDetailPage = useOpenPostDetailPage();
+ const router = useRouter();
+
const hasImage = useMemo(() => postAttachUrls.length !== 0, [postAttachUrls]);
const searchContext = useContext(postcardContext);
const { mutate: likeHandler } = useLikePostMutation(searchContext);
const { mutate: unLikeHandler } = useUnLikePostMutation(searchContext);
+
+ const { mutateAsync: deletePost } = useDeletePostMutation();
+ const { mutateAsync: deleteFile } = useDeleteAttachMutation();
+
+ const deleteHandler = async () => {
+ if (confirm("정말 삭제하시겠습니까?")) {
+ await deletePost(postNo);
+ postAttachUrls?.[0].attachUrl &&
+ (await deleteFile(postAttachUrls?.[0].attachUrl));
+ router.push(HOME);
+ }
+ };
+
const { data: currentUser } = useMyInfoQuery();
const isMyPost = useMemo(
diff --git a/client/src/components/post/PostCardOptionDropdown.tsx b/client/src/components/post/PostCardOptionDropdown.tsx
index 7b6e264..da4155e 100644
--- a/client/src/components/post/PostCardOptionDropdown.tsx
+++ b/client/src/components/post/PostCardOptionDropdown.tsx
@@ -5,6 +5,7 @@ import { useDeletePostMutation } from "@/queries/post/useDeletePostMutation";
import useDeleteAttachMutation from "@/queries/attach/useDeleteAttachMutation";
import { useRouter } from "next/navigation";
import HOME from "@/const/clientPath";
+import DeleteEditDropdown from "../DeleteEditDropdown";
type PostCardOptionDropdownProps = {
postId: number;
@@ -15,13 +16,7 @@ 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 { mutateAsync: deletePost } = useDeletePostMutation();
const { mutateAsync: deleteFile } = useDeleteAttachMutation();
@@ -33,20 +28,7 @@ const PostCardOptionDropdown = ({
}
};
- const handleClose = () => {
- setAnchorEl(null);
- };
- return (
- <>
- <ButtonBase aria-label="settings" sx={{ p: 0 }} onClick={handleClick}>
- <MoreVertOutlined />
- </ButtonBase>
- <Menu open={open} anchorEl={anchorEl} onClose={handleClose}>
- <MenuItem onClick={deleteHandler}>삭제</MenuItem>
- <MenuItem>수정</MenuItem>
- </Menu>
- </>
- );
+ return <DeleteEditDropdown onDelete={deleteHandler} />;
};
export default PostCardOptionDropdown;
diff --git a/client/src/components/post/detail/PostComment.tsx b/client/src/components/post/detail/PostComment.tsx
index f0a0cb6..2e86197 100644
--- a/client/src/components/post/detail/PostComment.tsx
+++ b/client/src/components/post/detail/PostComment.tsx
@@ -1,10 +1,10 @@
import UserAvatar from "@/components/user/info/UserAvatar";
import { USER_PAGE } from "@/const/clientPath";
import { useMyInfoQuery } from "@/queries/auth/useMyInfoQuery";
-import { Stack, Avatar, Typography } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
import dayjs from "dayjs";
import Link from "next/link";
-import PostCommentDropdown from "./PostCommentDropdown";
+import DeleteEditDropdown from "@/components/DeleteEditDropdown";
import useDeleteCommentMutation from "@/queries/post/comment/useDeleteCommentMutation";
type Props = {
@@ -31,7 +31,7 @@ const PostComment = ({
const { data: myData } = useMyInfoQuery();
const isMyComment = userPk === String(myData?.userNo);
- const { mutateAsync: onDelete } = useDeleteCommentMutation();
+ const { mutateAsync: deleteHandler } = useDeleteCommentMutation();
return (
<Stack direction="row" width="100%" gap={1.25}>
@@ -57,14 +57,13 @@ const PostComment = ({
</Typography>
</Stack>
{isMyComment && (
- <PostCommentDropdown
+ <DeleteEditDropdown
onDelete={() => {
- onDelete({
+ deleteHandler({
commentPk: String(commentPk),
postPk: String(postPk),
});
}}
- onEdit={() => {}}
/>
)}
</Stack>