From aff21f195b0b480b22a2fe0b4ca6a0db40b1fce0 Mon Sep 17 00:00:00 2001
From: chan <b24028@hanmaceng.co.kr>
Date: Thu, 19 Mar 2026 13:23:02 +0900
Subject: [PATCH] style: make page headers sticky and improve table header
 contrast/visibility

---
 adminfront/src/components/ui/table.tsx                      | 2 +-
 adminfront/src/features/api-keys/ApiKeyListPage.tsx         | 4 ++--
 adminfront/src/features/audit/AuditLogsPage.tsx             | 4 ++--
 .../features/tenants/routes/TenantAdminsAndOwnersTab.tsx    | 4 ++--
 adminfront/src/features/tenants/routes/TenantGroupsPage.tsx | 4 ++--
 adminfront/src/features/tenants/routes/TenantListPage.tsx   | 4 ++--
 .../src/features/tenants/routes/TenantSubTenantsPage.tsx    | 2 +-
 adminfront/src/features/tenants/routes/TenantUsersPage.tsx  | 2 +-
 .../features/user-groups/routes/GlobalUserGroupListPage.tsx | 4 ++--
 .../src/features/user-groups/routes/TenantUserGroupsTab.tsx | 4 ++--
 .../src/features/user-groups/routes/UserGroupDetailPage.tsx | 6 +++---
 adminfront/src/features/users/UserListPage.tsx              | 4 ++--
 12 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/adminfront/src/components/ui/table.tsx b/adminfront/src/components/ui/table.tsx
index b20952d6..8ca9d06c 100644
--- a/adminfront/src/components/ui/table.tsx
+++ b/adminfront/src/components/ui/table.tsx
@@ -69,7 +69,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "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-bold uppercase tracking-[0.08em] text-foreground align-middle",
       className,
     )}
     {...props}
diff --git a/adminfront/src/features/api-keys/ApiKeyListPage.tsx b/adminfront/src/features/api-keys/ApiKeyListPage.tsx
index aa45ade1..86e26fb9 100644
--- a/adminfront/src/features/api-keys/ApiKeyListPage.tsx
+++ b/adminfront/src/features/api-keys/ApiKeyListPage.tsx
@@ -64,7 +64,7 @@ function ApiKeyListPage() {
 
   return (
     <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
-      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0">
+      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
         <div className="space-y-2">
           <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
             <span>
@@ -129,7 +129,7 @@ function ApiKeyListPage() {
           <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
             <div className="flex-1 overflow-auto relative custom-scrollbar">
               <Table>
-                <TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
+                <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
                   <TableRow>
                     <TableHead>
                       {t("ui.admin.api_keys.list.table.name", "NAME")}
diff --git a/adminfront/src/features/audit/AuditLogsPage.tsx b/adminfront/src/features/audit/AuditLogsPage.tsx
index 0e90b4b1..74f3baa2 100644
--- a/adminfront/src/features/audit/AuditLogsPage.tsx
+++ b/adminfront/src/features/audit/AuditLogsPage.tsx
@@ -159,7 +159,7 @@ function AuditLogsPage() {
 
   return (
     <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
-      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0">
+      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
         <div>
           <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
             <span>{t("ui.admin.audit.breadcrumb.section", "Audit")}</span>
@@ -267,7 +267,7 @@ function AuditLogsPage() {
           <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
             <div className="flex-1 overflow-auto relative custom-scrollbar">
               <Table className="table-fixed">
-                <TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
+                <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
                   <TableRow>
                     <TableHead className="w-[140px]">
                       {t("ui.admin.audit.table.time", "TIME")}
diff --git a/adminfront/src/features/tenants/routes/TenantAdminsAndOwnersTab.tsx b/adminfront/src/features/tenants/routes/TenantAdminsAndOwnersTab.tsx
index 3ac0f505..e1ebb9df 100644
--- a/adminfront/src/features/tenants/routes/TenantAdminsAndOwnersTab.tsx
+++ b/adminfront/src/features/tenants/routes/TenantAdminsAndOwnersTab.tsx
@@ -236,7 +236,7 @@ export function TenantAdminsAndOwnersTab() {
             <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
               <div className="flex-1 overflow-auto relative custom-scrollbar">
                 <Table>
-                  <TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
+                  <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
                     <TableRow>
                       <TableHead className="w-[250px] font-bold">
                         {t("ui.admin.tenants.owners.table_name", "이름")}
@@ -365,7 +365,7 @@ export function TenantAdminsAndOwnersTab() {
             <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
               <div className="flex-1 overflow-auto relative custom-scrollbar">
                 <Table>
-                  <TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
+                  <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
                     <TableRow>
                       <TableHead className="w-[250px] font-bold">
                         {t("ui.admin.tenants.admins.table_name", "이름")}
diff --git a/adminfront/src/features/tenants/routes/TenantGroupsPage.tsx b/adminfront/src/features/tenants/routes/TenantGroupsPage.tsx
index f53f90b3..14d05871 100644
--- a/adminfront/src/features/tenants/routes/TenantGroupsPage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantGroupsPage.tsx
@@ -462,7 +462,7 @@ function TenantGroupsPage() {
             <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
               <div className="flex-1 overflow-auto relative custom-scrollbar">
                 <Table>
-                  <TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
+                  <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
                     <TableRow>
                       <TableHead>
                         {t("ui.admin.groups.table.name", "NAME")}
@@ -559,7 +559,7 @@ function TenantGroupsPage() {
             <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
               <div className="flex-1 overflow-auto relative custom-scrollbar">
                 <Table>
-                  <TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
+                  <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
                     <TableRow>
                       <TableHead>
                         {t("ui.admin.groups.members.table.name", "이름")}
diff --git a/adminfront/src/features/tenants/routes/TenantListPage.tsx b/adminfront/src/features/tenants/routes/TenantListPage.tsx
index a434ee14..c1e68d3a 100644
--- a/adminfront/src/features/tenants/routes/TenantListPage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantListPage.tsx
@@ -117,7 +117,7 @@ function TenantListPage() {
 
   return (
     <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
-      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0">
+      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
         <div className="space-y-2">
           <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
             <span>{t("ui.admin.tenants.breadcrumb.section", "Tenants")}</span>
@@ -182,7 +182,7 @@ function TenantListPage() {
           <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
             <div className="flex-1 overflow-auto relative custom-scrollbar">
               <Table>
-                <TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
+                <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
                   <TableRow>
                     <TableHead>
                       {t("ui.admin.tenants.table.name", "NAME")}
diff --git a/adminfront/src/features/tenants/routes/TenantSubTenantsPage.tsx b/adminfront/src/features/tenants/routes/TenantSubTenantsPage.tsx
index cd58c513..c0946db1 100644
--- a/adminfront/src/features/tenants/routes/TenantSubTenantsPage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantSubTenantsPage.tsx
@@ -61,7 +61,7 @@ function TenantSubTenantsPage() {
         <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
           <div className="flex-1 overflow-auto relative custom-scrollbar">
             <Table>
-              <TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
+              <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
                 <TableRow>
                   <TableHead>
                     {t("ui.admin.tenants.sub.table.name", "NAME")}
diff --git a/adminfront/src/features/tenants/routes/TenantUsersPage.tsx b/adminfront/src/features/tenants/routes/TenantUsersPage.tsx
index e7f63104..f64958d3 100644
--- a/adminfront/src/features/tenants/routes/TenantUsersPage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantUsersPage.tsx
@@ -55,7 +55,7 @@ function TenantUsersPage() {
         <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
           <div className="flex-1 overflow-auto relative custom-scrollbar">
             <Table>
-              <TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
+              <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
                 <TableRow>
                   <TableHead>
                     {t("ui.admin.tenants.members.table.name", "NAME")}
diff --git a/adminfront/src/features/user-groups/routes/GlobalUserGroupListPage.tsx b/adminfront/src/features/user-groups/routes/GlobalUserGroupListPage.tsx
index 074a5f0f..e4bdae5b 100644
--- a/adminfront/src/features/user-groups/routes/GlobalUserGroupListPage.tsx
+++ b/adminfront/src/features/user-groups/routes/GlobalUserGroupListPage.tsx
@@ -36,7 +36,7 @@ export default function GlobalUserGroupListPage() {
 
   return (
     <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
-      <header className="flex items-start justify-between flex-shrink-0">
+      <header className="flex items-start justify-between flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
         <div className="space-y-1">
           <h2 className="text-3xl font-bold tracking-tight">User Groups</h2>
           <p className="text-muted-foreground">
@@ -87,7 +87,7 @@ function TenantGroupCard({ tenant }: { tenant: TenantSummary }) {
         <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
           <div className="flex-1 overflow-auto relative custom-scrollbar max-h-[400px]">
             <Table>
-              <TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
+              <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
                 <TableRow>
                   <TableHead className="w-[250px]">그룹명</TableHead>
                   <TableHead>설명</TableHead>
diff --git a/adminfront/src/features/user-groups/routes/TenantUserGroupsTab.tsx b/adminfront/src/features/user-groups/routes/TenantUserGroupsTab.tsx
index ad4ffdc7..15988252 100644
--- a/adminfront/src/features/user-groups/routes/TenantUserGroupsTab.tsx
+++ b/adminfront/src/features/user-groups/routes/TenantUserGroupsTab.tsx
@@ -228,7 +228,7 @@ const MemberTable: React.FC<{
 }> = ({ members, isLoading, onRefresh, showTenant }) => (
   <div className="border rounded-md overflow-hidden">
     <Table>
-      <TableHeader className="bg-muted/30">
+      <TableHeader className="bg-secondary/100 shadow-sm z-10">
         <TableRow>
           <TableHead className="h-9">
             {t("ui.admin.users.table.name", "NAME")}
@@ -1106,7 +1106,7 @@ function TenantUserGroupsTab() {
           <div className="flex-1 rounded-md border-0 overflow-hidden flex flex-col">
             <div className="flex-1 overflow-auto relative custom-scrollbar">
               <Table>
-                <TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
+                <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
                   <TableRow>
                     <TableHead className="pl-6 w-[40%]">
                       {t("ui.admin.tenants.table.name", "NAME")}
diff --git a/adminfront/src/features/user-groups/routes/UserGroupDetailPage.tsx b/adminfront/src/features/user-groups/routes/UserGroupDetailPage.tsx
index 860a8142..384b2fdd 100644
--- a/adminfront/src/features/user-groups/routes/UserGroupDetailPage.tsx
+++ b/adminfront/src/features/user-groups/routes/UserGroupDetailPage.tsx
@@ -212,7 +212,7 @@ export function UserGroupDetailPage() {
 
   return (
     <div className="space-y-8 flex flex-col h-[calc(100vh-theme(spacing.32))]">
-      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0">
+      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
         <div className="space-y-2">
           <div className="flex items-center gap-2 text-sm text-muted-foreground">
             <Link
@@ -351,7 +351,7 @@ export function UserGroupDetailPage() {
             <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
               <div className="flex-1 overflow-auto relative custom-scrollbar">
                 <Table>
-                  <TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
+                  <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
                     <TableRow>
                       <TableHead className="font-bold">
                         {t("ui.admin.users.list.table.name_email", "사용자")}
@@ -536,7 +536,7 @@ export function UserGroupDetailPage() {
             <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
               <div className="flex-1 overflow-auto relative custom-scrollbar">
                 <Table>
-                  <TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
+                  <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
                     <TableRow>
                       <TableHead className="font-bold">
                         {t("ui.admin.users.detail.form.tenant", "대상 테넌트")}
diff --git a/adminfront/src/features/users/UserListPage.tsx b/adminfront/src/features/users/UserListPage.tsx
index d6af7999..b2f6219a 100644
--- a/adminfront/src/features/users/UserListPage.tsx
+++ b/adminfront/src/features/users/UserListPage.tsx
@@ -255,7 +255,7 @@ function UserListPage() {
 
   return (
     <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
-      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0">
+      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
         <div className="space-y-2">
           <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
             <span>{t("ui.admin.users.list.breadcrumb.section", "Users")}</span>
@@ -420,7 +420,7 @@ function UserListPage() {
           <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
             <div className="flex-1 overflow-auto relative custom-scrollbar">
               <Table>
-                <TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
+                <TableHeader className="sticky top-0 bg-secondary/100 backdrop-blur z-10 shadow-sm">
                   <TableRow>
                     <TableHead className="w-12">
                       <input