tenants 목록 툴바 레이아웃 정리

adminfront/src/features/tenants/routes/TenantListPage.tsx

@@ -33,6 +33,7 @@ import {
   sortItems,
   toggleSort,
 } from "../../../../../common/core/utils";
+import { SearchFilterBar } from "../../../../../common/ui/search-filter-bar";
 import { commonStickyTableHeaderClass } from "../../../../../common/ui/table";
 import { RoleGuard } from "../../../components/auth/RoleGuard";
 import { Badge } from "../../../components/ui/badge";
@@ -708,9 +709,11 @@ function TenantListPage() {
           "시스템에 등록된 모든 테넌트를 평면 목록으로 확인하고 관리합니다.",
         )}
         actions={
+          <div className="min-w-0 space-y-2">
+            <SearchFilterBar
+              primary={
                 <>
-            <div className="flex items-center gap-2">
-              <div className="relative mr-2 w-64">
+                  <div className="relative w-48">
                     <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                     <Input
                       placeholder={t(
@@ -736,7 +739,7 @@ function TenantListPage() {
                       type="button"
                       variant={viewMode === "tree" ? "default" : "ghost"}
                       size="sm"
-                  className="h-8 gap-1.5"
+                      className="h-9 gap-1.5"
                       aria-pressed={viewMode === "tree"}
                       onClick={() => setViewMode("tree")}
                       data-testid="tenant-view-tree-btn"
@@ -748,7 +751,7 @@ function TenantListPage() {
                       type="button"
                       variant={viewMode === "table" ? "default" : "ghost"}
                       size="sm"
-                  className="h-8 gap-1.5"
+                      className="h-9 gap-1.5"
                       aria-pressed={viewMode === "table"}
                       onClick={() => setViewMode("table")}
                       data-testid="tenant-view-table-btn"
@@ -785,7 +788,10 @@ function TenantListPage() {
                       {t("ui.common.clear", "초기화")}
                     </Button>
                   ) : null}
-
+                </>
+              }
+              actions={
+                <>
                   <RoleGuard roles={["super_admin"]}>
                     <input
                       ref={fileInputRef}
@@ -800,7 +806,7 @@ function TenantListPage() {
                         <Button
                           variant="outline"
                           data-testid="tenant-data-mgmt-btn"
-                      className="gap-2"
+                          className="gap-2 h-9"
                         >
                           <LayoutDashboard size={16} />
                           {t("ui.admin.tenants.data_mgmt", "데이터 관리")}
@@ -813,8 +819,14 @@ function TenantListPage() {
                           data-testid="tenant-template-menu-item"
                           className="cursor-pointer"
                         >
-                      <FileSpreadsheet size={16} className="mr-2 opacity-50" />
-                      {t("ui.admin.tenants.csv_template", "템플릿 다운로드")}
+                          <FileSpreadsheet
+                            size={16}
+                            className="mr-2 opacity-50"
+                          />
+                          {t(
+                            "ui.admin.tenants.csv_template",
+                            "템플릿 다운로드",
+                          )}
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
                         <DropdownMenuItem
@@ -859,7 +871,7 @@ function TenantListPage() {
                     variant="outline"
                     onClick={() => query.refetch()}
                     disabled={query.isFetching}
-                className="w-9 px-0"
+                    className="h-9 w-9 px-0"
                     title={t("ui.common.refresh", "새로고침")}
                   >
                     <RefreshCw size={16} />
@@ -868,14 +880,16 @@ function TenantListPage() {
                     </span>
                   </Button>
                   <RoleGuard roles={["super_admin"]}>
-                <Button asChild>
+                    <Button asChild size="sm" className="h-9">
                       <Link to="/tenants/new">
                         <Plus size={16} />
                         {t("ui.admin.tenants.add", "테넌트 추가")}
                       </Link>
                     </Button>
                   </RoleGuard>
-            </div>
+                </>
+              }
+            />
             {importMessage ? (
               <div
                 className="rounded-md border border-border bg-secondary px-3 py-2 text-sm"
@@ -884,7 +898,7 @@ function TenantListPage() {
                 {importMessage}
               </div>
             ) : null}
-          </>
+          </div>
         }
       />