From 7b04e6a6bb3a4748ebcbc867ee21b8de3105ce15 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Fri, 9 May 2025 14:09:12 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EB=AC=BC=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../widgets/post/model/post-table-columns.tsx | 23 ++++++++++-
 .../src/widgets/post/ui/post-page.tsx         | 39 +++++++++++++++++--
 2 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/apps/common/features/src/widgets/post/model/post-table-columns.tsx b/apps/common/features/src/widgets/post/model/post-table-columns.tsx
index 8500cf653..63987c0c2 100644
--- a/apps/common/features/src/widgets/post/model/post-table-columns.tsx
+++ b/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",
diff --git a/apps/common/features/src/widgets/post/ui/post-page.tsx b/apps/common/features/src/widgets/post/ui/post-page.tsx
index 8445c0b84..25c08e685 100644
--- a/apps/common/features/src/widgets/post/ui/post-page.tsx
+++ b/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) => {