diff --git a/src/app/components/card/board/BoardPostItem.tsx b/src/app/components/card/board/BoardPostItem.tsx
index b03f1a11..46ee1cea 100644
--- a/src/app/components/card/board/BoardPostItem.tsx
+++ b/src/app/components/card/board/BoardPostItem.tsx
@@ -1,9 +1,63 @@
+"use client";
import { PostListType } from "@/types/response/post";
import { formatLocalDate } from "@/utils/workDayFormatter";
import Image from "next/image";
import Link from "next/link";
+import KebabDropdown from "../../button/dropdown/KebabDropdown";
+import { useRouter } from "next/navigation";
+import useModalStore from "@/store/modalStore";
+import { useDeleteComment } from "@/hooks/queries/post/comment/useDeleteComment";
+import { useQueryClient } from "@tanstack/react-query";
+
+const BoardPostItem = ({
+ post,
+ isAuthor,
+ limit,
+ orderBy,
+}: {
+ post: PostListType;
+ isAuthor: boolean;
+ limit: number;
+ orderBy: string;
+}) => {
+ const router = useRouter();
+ const deleteComment = useDeleteComment(String(post.id));
+ const queryClient = useQueryClient();
+ const { openModal, closeModal } = useModalStore();
+
+ const handleDelete = () => {
+ openModal("customForm", {
+ isOpen: true,
+ title: "게시글을 삭제할까요?",
+ content: "삭제된 게시글은 복구할 수 없습니다.",
+ confirmText: "삭제하기",
+ cancelText: "취소",
+ onConfirm: () => {
+ deleteComment.mutate(undefined, {
+ onSuccess: async () => {
+ await queryClient.invalidateQueries({ queryKey: ["post"] });
+ await queryClient.invalidateQueries({ queryKey: ["myPosts", { limit, orderBy }] });
+ closeModal();
+ },
+ });
+ },
+ onCancel: () => {
+ closeModal();
+ },
+ });
+ };
+
+ const dropdownOptions = [
+ {
+ label: "수정하기",
+ onClick: () => router.push(`/work-talk/${post.id}/edit`),
+ },
+ {
+ label: "삭제하기",
+ onClick: handleDelete,
+ },
+ ];
-const BoardPostItem = ({ post }: { post: PostListType }) => {
return (
{
>
-
{post.title}
+
{post.title}
{post.content}
@@ -48,6 +102,9 @@ const BoardPostItem = ({ post }: { post: PostListType }) => {