dev/admin 테이블 정렬 헤더 UI 공통화

common/core/components/sort/SortableTableHead.tsx

@@ -1,12 +1,18 @@
 import type { ReactNode, ThHTMLAttributes } from "react";
 import type { SortConfig } from "../../utils";
 
+export const sortableTableHeadBaseClassName =
+  "h-12 px-6 text-left text-xs font-sans font-bold uppercase tracking-[0.08em] text-foreground align-middle";
+
+export const sortableTableHeaderClassName =
+  "sticky top-0 z-10 bg-secondary shadow-sm";
+
 function SortAscendingIcon() {
   return (
     <svg
       aria-hidden="true"
       viewBox="0 0 24 24"
-      className="h-4 w-4"
+      className="h-3.5 w-3.5"
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
@@ -25,7 +31,7 @@ function SortDescendingIcon() {
     <svg
       aria-hidden="true"
       viewBox="0 0 24 24"
-      className="h-4 w-4"
+      className="h-3.5 w-3.5"
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
@@ -44,7 +50,7 @@ function SortIdleIcon() {
     <svg
       aria-hidden="true"
       viewBox="0 0 24 24"
-      className="h-4 w-4 opacity-50"
+      className="ml-1 h-3.5 w-3.5 opacity-50"
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
@@ -122,7 +128,7 @@ export function SortableTableHead<Key extends string>({
     <th
       aria-sort={sortAriaValue(isActive, direction)}
       className={[
-        "h-12 px-6 text-xs font-bold uppercase tracking-[0.08em] align-middle",
+        sortableTableHeadBaseClassName,
         alignClassName(align),
         disabled ? "" : "transition-colors hover:bg-muted/50",
         className,
@@ -136,7 +142,7 @@ export function SortableTableHead<Key extends string>({
         onClick={() => onSort(sortKey)}
         disabled={disabled}
         className={[
-          "flex w-full items-center gap-1",
+          "flex w-full items-center font-inherit",
           buttonAlignClassName(align),
           disabled ? "cursor-default opacity-70" : "cursor-pointer",
           contentClassName,
@@ -146,9 +152,13 @@ export function SortableTableHead<Key extends string>({
       >
         <span>{label}</span>
         {direction === "asc" ? (
-          <SortAscendingIcon />
+          <span className="ml-1 inline-flex">
+            <SortAscendingIcon />
+          </span>
         ) : direction === "desc" ? (
-          <SortDescendingIcon />
+          <span className="ml-1 inline-flex">
+            <SortDescendingIcon />
+          </span>
         ) : (
           <SortIdleIcon />
         )}