테이블에 scope="col" 및 캡션 추가

apps/common/features/src/pages/(post)/notice/ui/notice-page.tsx

@@ -1,3 +1,7 @@
 "use client";
 
-export { PostPage as NoticePage } from "@/widgets/post";
+import { PostPage } from "@/widgets/post";
+
+export function NoticePage({ bbsId }: { bbsId: string }) {
+	return <PostPage bbsId={bbsId} tableCaption="공지사항 목록" />;
+}

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

@@ -35,7 +35,13 @@ import { columns as tableColumns } from "../model/post-table-columns";
 import { createColumns as createGridViewColumns } from "../model/grid-view-table-columns";
 import { SortSelect } from "./sort-select";
 
-function PostPage({ bbsId }: { bbsId: string }) {
+function PostPage({
+  bbsId,
+  tableCaption,
+}: {
+  bbsId: string;
+  tableCaption?: string;
+}) {
   const router = useRouter();
   const pathname = usePathname();
   const { confirm } = useConfirm();
@@ -116,8 +122,6 @@ function PostPage({ bbsId }: { bbsId: string }) {
     meta: { bbsTypeCd: bbsInfo?.bbsTypeCd },
   });
 
-  const DataTableComponent = isGridViewPage ? GridViewDataTable : DataTable;
-
   const onPostDelete = async () => {
     const selectedPosts = table
       .getFilteredSelectedRowModel()
@@ -245,11 +249,20 @@ function PostPage({ bbsId }: { bbsId: string }) {
             {isLoading ? (
               <Skeleton className="h-[36rem] w-full" />
             ) : (
-              <DataTableComponent
-                table={table}
-                onRowClick={handleRowClick}
-                viewPagination
-              />
+              isGridViewPage ? (
+                <GridViewDataTable
+                  table={table}
+                  onRowClick={handleRowClick}
+                  viewPagination
+                />
+              ) : (
+                <DataTable
+                  table={table}
+                  onRowClick={handleRowClick}
+                  viewPagination
+                  caption={tableCaption}
+                />
+              )
             )}
           </div>
         </div>

packages/common/components/src/ui/data-table/index.tsx

@@ -11,7 +11,14 @@ import {
 } from "@radix-ui/react-icons";
 import { cn } from "../../lib";
 import { Button } from "../button";
-import { Table, TableCell, TableHead, TableHeader, TableRow } from "../table";
+import {
+  Table,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../table";
 import type { HTMLAttributes } from "react";
 declare module "@tanstack/react-table" {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -28,6 +35,7 @@ type DataTableProps<T> = {
   className?: HTMLAttributes<HTMLTableElement>["className"];
   viewPagination?: boolean;
   onRowClick?: (row: T) => void;
+  caption?: string;
 };
 
 function DataTable<T>({
@@ -36,10 +44,12 @@ function DataTable<T>({
   className,
   viewPagination,
   onRowClick,
+  caption,
 }: DataTableProps<T>) {
   return (
     <>
       <Table className={cn("w-full", className)} variant={variant}>
+        {caption && <TableCaption className="sr-only">{caption}</TableCaption>}
         <THead table={table} />
         <tbody>
           {table.getRowModel().rows.map((row) => {