관리자 검색 입력 공통화

pages/admin/media/index.vue

@@ -1380,22 +1380,17 @@ watch(() => mediaPagination.value.page, (page) => {
           </div>
         </div>
         <div class="admin-media__header-actions flex min-w-0 flex-wrap items-center gap-2">
-          <label class="admin-media__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
-              :value="searchTextInput"
-              class="admin-media__search-input h-10 w-full 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] md:w-72"
-              type="search"
-              placeholder="미디어 검색"
-              @input="onSearchTextInput"
-              @compositionupdate="onSearchTextInput"
-              @compositionend="onSearchTextCompositionEnd"
-            >
-          </label>
+          <AdminSearchInput
+            :value="searchTextInput"
+            label="미디어 검색"
+            placeholder="미디어 검색"
+            root-class="admin-media__search"
+            input-class="admin-media__search-input"
+            width-class="w-full md:w-72"
+            @input="onSearchTextInput"
+            @compositionupdate="onSearchTextInput"
+            @compositionend="onSearchTextCompositionEnd"
+          />
           <button
             v-if="activeTab === 'library'"
             class="admin-media__upload-button h-10 shrink-0 rounded bg-[#15171a] px-4 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50"