From cb602de049d4fee7b16365b9d47b243c265cd916 Mon Sep 17 00:00:00 2001
From: kyy <b24053@hanmaceng.co.kr>
Date: Thu, 14 May 2026 15:06:34 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B0=90=EC=82=AC=EB=A1=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EA=B2=80=EC=83=89=EC=B0=BD=20=ED=86=B5=EC=9D=BC=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/features/audit/AuditLogsPage.tsx      | 114 ++++++++++--------
 1 file changed, 62 insertions(+), 52 deletions(-)

diff --git a/adminfront/src/features/audit/AuditLogsPage.tsx b/adminfront/src/features/audit/AuditLogsPage.tsx
index 29f24a06..0a067e0e 100644
--- a/adminfront/src/features/audit/AuditLogsPage.tsx
+++ b/adminfront/src/features/audit/AuditLogsPage.tsx
@@ -32,6 +32,7 @@ import {
   TableHeader,
   TableRow,
 } from "../../components/ui/table";
+import { SearchFilterBar } from "../../../../common/ui/search-filter-bar";
 import { PageHeader } from "../../../../common/core/components/page";
 import type { AuditLog } from "../../lib/adminApi";
 import { fetchAuditLogs } from "../../lib/adminApi";
@@ -205,59 +206,68 @@ function AuditLogsPage() {
           </div>
         </CardHeader>
         <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
-          <div className="mb-4 flex flex-wrap items-center gap-2 flex-shrink-0">
-            <div className="flex flex-1 items-center gap-2 rounded-full border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] px-4 py-2 text-[var(--color-muted)]">
-              <Search size={14} />
-              <input
-                value={filterDraft}
-                onChange={(event) => setFilterDraft(event.target.value)}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter") {
-                    handleAddFilter();
-                  }
-                }}
-                placeholder={t(
-                  "ui.admin.audit.filters.placeholder",
-                  "필터 추가 (예: status:failure)",
-                )}
-                className="w-full bg-transparent text-sm text-foreground outline-none"
-              />
-              <Button size="sm" variant="outline" onClick={handleAddFilter}>
-                {t("ui.common.add", "추가")}
-              </Button>
-            </div>
-            {filters.length === 0 ? (
-              <span className="text-xs text-[var(--color-muted)]">
-                {t("msg.admin.audit.filters.empty", "필터 없음")}
-              </span>
-            ) : (
-              filters.map((filter) => (
-                <span
-                  key={filter}
-                  className="inline-flex items-center gap-2 rounded-full border border-[var(--color-border)] bg-[rgba(255,255,255,0.04)] px-3 py-1 text-xs text-[var(--color-muted)]"
-                >
-                  <Terminal size={12} />
-                  {filter}
-                  <button
-                    type="button"
-                    onClick={() =>
-                      setFilters((prev) =>
-                        prev.filter((item) => item !== filter),
-                      )
-                    }
-                    className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-[var(--color-border)] text-[10px] text-[var(--color-muted)]"
-                    aria-label={t(
-                      "ui.admin.audit.filters.remove",
-                      "{{filter}} 필터 제거",
-                      { filter },
+          <SearchFilterBar
+            className="mb-4"
+            primary={
+              <div className="flex flex-1 items-center gap-2">
+                <div className="relative flex-1">
+                  <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                  <input
+                    value={filterDraft}
+                    onChange={(event) => setFilterDraft(event.target.value)}
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter") {
+                        handleAddFilter();
+                      }
+                    }}
+                    placeholder={t(
+                      "ui.admin.audit.filters.placeholder",
+                      "필터 추가 (예: status:failure)",
                     )}
-                  >
-                    ×
-                  </button>
-                </span>
-              ))
-            )}
-          </div>
+                    className="h-10 w-full rounded-md border border-input bg-background pl-10 pr-3 text-sm outline-none"
+                  />
+                </div>
+                <Button size="sm" variant="outline" onClick={handleAddFilter}>
+                  {t("ui.common.add", "추가")}
+                </Button>
+              </div>
+            }
+            actions={
+              <>
+                {filters.length === 0 ? (
+                  <span className="text-xs text-[var(--color-muted)]">
+                    {t("msg.admin.audit.filters.empty", "필터 없음")}
+                  </span>
+                ) : (
+                  filters.map((filter) => (
+                    <span
+                      key={filter}
+                      className="inline-flex items-center gap-2 rounded-full border border-[var(--color-border)] bg-[rgba(255,255,255,0.04)] px-3 py-1 text-xs text-[var(--color-muted)]"
+                    >
+                      <Terminal size={12} />
+                      {filter}
+                      <button
+                        type="button"
+                        onClick={() =>
+                          setFilters((prev) =>
+                            prev.filter((item) => item !== filter),
+                          )
+                        }
+                        className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-[var(--color-border)] text-[10px] text-[var(--color-muted)]"
+                        aria-label={t(
+                          "ui.admin.audit.filters.remove",
+                          "{{filter}} 필터 제거",
+                          { filter },
+                        )}
+                      >
+                        ×
+                      </button>
+                    </span>
+                  ))
+                )}
+              </>
+            }
+          />
           <div className={commonTableShellClass}>
             <div className={commonTableViewportClass}>
               <Table className="table-fixed">