feat: implement sticky header and inner scrolling for user list page

adminfront/src/features/users/UserListPage.tsx

@@ -254,8 +254,8 @@ function UserListPage() {
   };
 
   return (
-    <div className="space-y-8">
+    <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">
+      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0">
         <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>
@@ -353,8 +353,8 @@ function UserListPage() {
         </div>
       </header>
 
-      <Card className="bg-[var(--color-panel)]">
+      <Card className="flex-1 flex flex-col min-h-0 bg-[var(--color-panel)] overflow-hidden">
-        <CardHeader className="flex flex-row items-center justify-between">
+        <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">
           <div>
             <CardTitle>
               {t("ui.admin.users.list.registry.title", "User Registry")}
@@ -368,8 +368,8 @@ function UserListPage() {
             </CardDescription>
           </div>
         </CardHeader>
-        <CardContent>
+        <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
-          <div className="mb-6 flex flex-wrap items-center gap-4">
+          <div className="mb-6 flex flex-wrap items-center gap-4 flex-shrink-0">
             <div className="relative flex-1 min-w-[240px] max-w-sm">
               <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
               <Input
@@ -412,14 +412,15 @@ function UserListPage() {
           </div>
 
           {(errorMsg || fallbackError) && (
-            <div className="mb-4 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+            <div className="mb-4 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive flex-shrink-0">
               {errorMsg ?? fallbackError}
             </div>
           )}
 
-          <div className="rounded-md border overflow-x-auto">
+          <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
+            <div className="flex-1 overflow-auto relative custom-scrollbar">
               <Table>
-              <TableHeader>
+                <TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
                   <TableRow>
                     <TableHead className="w-12">
                       <input
@@ -433,7 +434,10 @@ function UserListPage() {
                       />
                     </TableHead>
                     <TableHead className="min-w-[200px]">
-                    {t("ui.admin.users.list.table.name_email", "NAME / EMAIL")}
+                      {t(
+                        "ui.admin.users.list.table.name_email",
+                        "NAME / EMAIL",
+                      )}
                     </TableHead>
                     <TableHead>
                       {t("ui.admin.users.list.table.role", "ROLE")}
@@ -468,7 +472,7 @@ function UserListPage() {
                   {query.isLoading && (
                     <TableRow>
                       <TableCell
-                      colSpan={6 + userSchema.length}
+                        colSpan={7 + userSchema.length}
                         className="h-24 text-center"
                       >
                         {t("msg.common.loading", "로딩 중...")}
@@ -478,10 +482,13 @@ function UserListPage() {
                   {!query.isLoading && items.length === 0 && (
                     <TableRow>
                       <TableCell
-                      colSpan={6 + userSchema.length}
+                        colSpan={7 + userSchema.length}
                         className="h-24 text-center"
                       >
-                      {t("msg.admin.users.list.empty", "검색 결과가 없습니다.")}
+                        {t(
+                          "msg.admin.users.list.empty",
+                          "검색 결과가 없습니다.",
+                        )}
                       </TableCell>
                     </TableRow>
                   )}
@@ -574,6 +581,7 @@ function UserListPage() {
                 </TableBody>
               </Table>
             </div>
+          </div>
 
           {/* Bulk Action Bar */}
           {selectedUserIds.length > 0 && (
@@ -639,7 +647,7 @@ function UserListPage() {
 
           {/* Pagination */}
           {totalPages > 1 && (
-            <div className="mt-4 flex items-center justify-end gap-2">
+            <div className="mt-4 flex flex-shrink-0 items-center justify-end gap-2">
               <Button
                 variant="outline"
                 size="sm"