관리자 검색 입력 공통화

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"

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"

pages/admin/pages/index.vue

@@ -374,22 +374,16 @@ const deletePage = async (page) => {
       </div>
       <div class="admin-pages__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-pages__filters flex min-w-0 flex-wrap items-center gap-2">
-          <label class="admin-pages__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="searchInput"
-              class="admin-pages__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
+            :value="searchInput"
+            label="페이지 검색"
+            placeholder="페이지 검색"
+            root-class="admin-pages__search"
+            input-class="admin-pages__search-input"
+            @input="onSearchInput"
+            @compositionupdate="onSearchInput"
+            @compositionend="onSearchCompositionEnd"
+          />
           <label class="admin-pages__filter">
             <span class="sr-only">상태 필터</span>
             <span class="admin-pages__filter-select-wrap relative block">

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">