feat: 게시물 선택 삭제 기능

apps/common/features/src/widgets/post/model/post-table-columns.tsx

@@ -1,10 +1,31 @@
 import dayjs from "dayjs";
 import type { ColumnDef } from "@tanstack/react-table";
-import { Badge, Button } from "@common/components";
+import { Badge, Button, Checkbox } from "@common/components";
 import { AttachmentApi } from "@/entities/attachment";
 import type { Post } from "@/entities/post";
 
 export const columns: ColumnDef<Post & { isUpndFixPost?: boolean }>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected()}
+        onClick={(e) => e.stopPropagation()}
+        onCheckedChange={(checked) =>
+          table.toggleAllPageRowsSelected(!!checked)
+        }
+        className="h-4 w-4 rounded border-gray-300"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onClick={(e) => e.stopPropagation()}
+        onCheckedChange={(checked) => row.toggleSelected(!!checked)}
+        className="h-4 w-4 rounded border-gray-300"
+      />
+    ),
+  },
   {
     accessorKey: "rowNo",
     header: "NO",

apps/common/features/src/widgets/post/ui/post-page.tsx

@@ -2,12 +2,16 @@
 
 import { useEffect, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
-import { useLocalStorage } from "@frontend-opensource/use-react-hooks";
+import {
+  useConfirm,
+  useLocalStorage,
+} from "@frontend-opensource/use-react-hooks";
 import { useQuery } from "@tanstack/react-query";
 import {
   getCoreRowModel,
   useReactTable,
   type PaginationState,
+  type RowSelectionState,
 } from "@tanstack/react-table";
 import {
   Button,
@@ -23,14 +27,16 @@ import {
 import { PostApi, type Post, type PostParams } from "@/entities/post";
 import type { Board } from "@/entities/board";
 import { ENDPOINT } from "@/shared/config";
-import { useMenuStore } from "@/shared/lib";
+import { useMenuStore, useUserStore } from "@/shared/lib";
 import { columns } from "../model/post-table-columns";
 
 function PostPage({ bbsId }: { bbsId: string }) {
   const router = useRouter();
   const pathname = usePathname();
+  const { confirm } = useConfirm();
   const [storedBbsInfo] = useLocalStorage("bbs-info", "");
   const { pageMenuAuthority } = useMenuStore((state) => state);
+  const { userInfo } = useUserStore((state) => state);
 
   const [bbsInfo, setBbsInfo] = useState<Board | null>(null);
   const [postParams, setPostParams] = useState<PostParams>({
@@ -41,6 +47,7 @@ function PostPage({ bbsId }: { bbsId: string }) {
     pageIndex: 0,
     pageSize: 10,
   });
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
   const { data: upndFixPostList } = useQuery({
     queryKey: [ENDPOINT.BOARD_SERVICE.POSTS_USER, bbsId, bbsInfo],
@@ -76,14 +83,31 @@ function PostPage({ bbsId }: { bbsId: string }) {
   const table = useReactTable({
     data: [...(upndFixPostList?.content ?? []), ...(postList?.content ?? [])],
     columns,
-    state: { pagination },
+    state: { pagination, rowSelection },
     rowCount: postList?.totalElements ?? 0,
     manualPagination: true,
     enableMultiRowSelection: true,
     getCoreRowModel: getCoreRowModel(),
     onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
   });
 
+  const onPostDelete = async () => {
+    const selectedPosts = table
+      .getFilteredSelectedRowModel()
+      .rows.map((row) => row.original.pstNo);
+
+    if (await confirm("삭제하시겠습니까?")) {
+      setRowSelection({});
+      await Promise.all(
+        selectedPosts.map((pstNo) =>
+          PostApi.deletePost(bbsId, pstNo.toString(), userInfo?.userUnqId),
+        ),
+      );
+      refetch();
+    }
+  };
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     refetch();
@@ -143,6 +167,15 @@ function PostPage({ bbsId }: { bbsId: string }) {
                   등록
                 </Button>
               )}
+              {pageMenuAuthority?.delAuthrtYn === "Y" && (
+                <Button
+                  color="red"
+                  onClick={onPostDelete}
+                  disabled={!table.getFilteredSelectedRowModel().rows.length}
+                >
+                  선택삭제
+                </Button>
+              )}
               <Select
                 value={table.getState().pagination.pageSize.toString()}
                 onValueChange={(value) => {