devfront consents 및 audit 테이블 공통화

common/core/components/sort/SortableTableHead.tsx

@@ -1,8 +1,9 @@
 import type { ReactNode, ThHTMLAttributes } from "react";
 import type { SortConfig } from "../../utils";
+import { commonTableHeadClass } from "../../../ui/table";
 
 export const sortableTableHeadBaseClassName =
-  "h-12 px-6 text-left text-xs font-sans font-bold uppercase tracking-[0.08em] text-foreground align-middle";
+  commonTableHeadClass;
 
 export const sortableTableHeaderClassName =
   "sticky top-0 z-10 bg-secondary shadow-sm";

common/ui/table.ts

@@ -6,7 +6,7 @@ export const commonTableFooterClass = "bg-muted/50 font-medium text-foreground";
 export const commonTableRowClass =
   "border-b transition-colors hover:bg-muted/30 data-[state=selected]:bg-muted";
 export const commonTableHeadClass =
-  "h-12 px-6 text-left text-xs font-bold uppercase tracking-[0.08em] text-muted-foreground align-middle";
+  "h-12 px-6 text-left text-xs font-sans font-bold uppercase tracking-[0.08em] text-foreground align-middle";
 export const commonTableCellClass = "p-6 align-middle text-sm";
 export const commonTableCaptionClass = "mt-4 text-sm text-muted-foreground";
 export const commonTableShellClass =

devfront/src/features/clients/ClientConsentsPage.tsx

@@ -28,6 +28,10 @@ import {
   TableHeader,
   TableRow,
 } from "../../components/ui/table";
+import {
+  commonTableShellClass,
+  commonTableViewportClass,
+} from "../../../../common/ui/table";
 import { fetchClient, fetchConsents, revokeConsent } from "../../lib/devApi";
 import { t } from "../../lib/i18n";
 import { cn } from "../../lib/utils";
@@ -430,8 +434,10 @@ function ClientConsentsPage() {
           </CardContent>
         )}
 
+        <div className={commonTableShellClass}>
+          <div className={commonTableViewportClass}>
             <Table>
-          <TableHeader>
+              <TableHeader className="sticky top-0 z-10 bg-secondary shadow-sm">
                 <TableRow>
                   <TableHead>
                     {t("ui.dev.clients.consents.table.user", "User")}
@@ -521,7 +527,10 @@ function ClientConsentsPage() {
                           </Badge>
                         ) : (
                           <Badge variant="warning">
-                        {t("ui.dev.clients.consents.status_revoked", "Revoked")}
+                            {t(
+                              "ui.dev.clients.consents.status_revoked",
+                              "Revoked",
+                            )}
                           </Badge>
                         )}
                       </TableCell>
@@ -570,6 +579,8 @@ function ClientConsentsPage() {
                 )}
               </TableBody>
             </Table>
+          </div>
+        </div>
         <CardContent className="flex items-center justify-between border-t border-border bg-muted/10 px-6 py-4 text-sm text-muted-foreground">
           <p>
             {t(