관리자 검색 입력 공통화

pages/admin/posts/index.vue

@@ -989,23 +989,17 @@ watch(postPageCount, (pageCount) => {
       </div>
       <div class="admin-posts__header-actions flex min-w-0 flex-1 flex-wrap items-center justify-start gap-2 lg:flex-nowrap lg:justify-end">
         <div class="admin-posts__filters flex min-w-0 flex-wrap items-center gap-2">
-          <label class="admin-posts__search relative">
-            <span class="sr-only">글 검색</span>
-            <svg class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[#8e9cac]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="m21 21-4.34-4.34" />
-              <circle cx="11" cy="11" r="8" />
-            </svg>
-            <input
-              ref="postSearchInputRef"
-              :value="searchInput"
-              class="admin-posts__search-input h-10 w-52 rounded border border-line bg-white pl-9 pr-3 text-sm text-[#394047] outline-none transition-colors placeholder:text-[#8e9cac] hover:border-[#c8ced3] focus:border-[#8e9cac]"
-              type="search"
-              placeholder="글 검색"
-              @input="onSearchInput"
-              @compositionupdate="onSearchInput"
-              @compositionend="onSearchCompositionEnd"
-            >
-          </label>
+          <AdminSearchInput
+            ref="postSearchInputRef"
+            :value="searchInput"
+            label="글 검색"
+            placeholder="글 검색"
+            root-class="admin-posts__search"
+            input-class="admin-posts__search-input"
+            @input="onSearchInput"
+            @compositionupdate="onSearchInput"
+            @compositionend="onSearchCompositionEnd"
+          />
           <label class="admin-posts__filter">
             <span class="sr-only">상태 필터</span>
             <span class="admin-posts__filter-select-wrap relative block">