관리자 검색 입력 공통화

pages/admin/members/index.vue

@@ -381,23 +381,17 @@ const formatRelativeTime = (value) => {
         </h1>
       </div>
       <div class="admin-members__actions flex flex-col gap-3 sm:flex-row sm:items-center">
-        <label class="admin-members__search relative block w-full sm:w-52">
-          <span class="sr-only">멤버 검색</span>
-          <svg class="admin-members__search-icon 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="memberSearchInput"
-            class="admin-members__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]"
-            type="search"
-            placeholder="멤버 검색"
-            @input="onMemberSearchInput"
-            @compositionupdate="onMemberSearchInput"
-            @compositionend="onMemberSearchCompositionEnd"
-            aria-label="멤버 검색"
-          >
-        </label>
+        <AdminSearchInput
+          :value="memberSearchInput"
+          label="멤버 검색"
+          placeholder="멤버 검색"
+          root-class="admin-members__search w-full sm:w-52"
+          input-class="admin-members__search-input"
+          width-class="w-full"
+          @input="onMemberSearchInput"
+          @compositionupdate="onMemberSearchInput"
+          @compositionend="onMemberSearchCompositionEnd"
+        />
         <button
           class="admin-members__filter inline-flex h-11 items-center justify-center gap-2 rounded-md border border-line bg-white px-4 text-sm font-semibold text-[#394047] transition hover:bg-[#eff1f2] hover:text-black"
           type="button"