테이블에 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) => {

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

@@ -79,12 +79,31 @@ const TableRow = React.forwardRef<
 ));
 TableRow.displayName = "TableRow";
 
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th ref={ref} className={cn("align-middle", className)} {...props} />
-));
+type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement> & {
+  "data-required"?: boolean | string;
+};
+
+const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
+  ({ children, className, ...props }, ref) => {
+  const isRequired = props["data-required"] !== undefined;
+
+  return (
+    <th
+      ref={ref}
+      scope="col"
+      className={cn("align-middle", className)}
+      {...props}
+    >
+      {children}
+      {isRequired && (
+        <span className="table-required-marker" title="필수 항목">
+          (*)
+        </span>
+      )}
+    </th>
+  );
+  },
+);
 TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<

packages/common/components/src/ui/table/table.css

@@ -7,9 +7,8 @@
   .table-ui th {
     @apply px-4 py-[1.2rem] text-[1.3rem] font-medium leading-[1.2];
   }
-  .table-ui th[data-required]::before {
-    content: "*";
-    color: red;
+  .table-ui th[data-required] .table-required-marker {
+    @apply ml-1 text-red-600;
   }
   .table-ui td {
     @apply px-2 py-[1.2rem] text-[1.3rem] font-normal leading-[1.2];