Merge pull request #70 from potenday-project:수정,삭제-드롭다운-컴포넌트-분리

수정,삭제-드롭다운-컴포넌트-분리

.github/workflows/Client-DEV-CD.yml

@@ -14,7 +14,7 @@ jobs:
  fetch-depth: 0
 
  - name: Docker Setup Buildx
- uses: docker/setup-buildx-action@v1.6.0
+ uses: docker/setup-buildx-action@v3
 
  - name: Login to Docker Hub
  uses: docker/login-action@v2

client/src/components/post/detail/PostCommentDropdown.tsx → 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;

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(

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;

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>