관리자 검색 입력 공통화

components/admin/AdminSearchInput.vue

@@ -0,0 +1,80 @@
+<script setup>
+const props = defineProps({
+  /** 검색 입력 표시값 */
+  value: {
+    type: String,
+    default: ''
+  },
+  /** 검색 입력 placeholder */
+  placeholder: {
+    type: String,
+    default: '검색'
+  },
+  /** 스크린 리더용 입력 라벨 */
+  label: {
+    type: String,
+    default: '검색'
+  },
+  /** label 루트에 추가할 화면별 클래스 */
+  rootClass: {
+    type: String,
+    default: ''
+  },
+  /** input에 추가할 화면별 클래스 */
+  inputClass: {
+    type: String,
+    default: ''
+  },
+  /** input 너비 클래스 */
+  widthClass: {
+    type: String,
+    default: 'w-52'
+  }
+})
+
+const emit = defineEmits(['input', 'compositionupdate', 'compositionend'])
+const inputRef = ref(null)
+
+/**
+ * 검색 입력에 포커스를 이동한다.
+ * @returns {void}
+ */
+const focus = () => {
+  inputRef.value?.focus()
+}
+
+/**
+ * 검색 입력 텍스트를 선택한다.
+ * @returns {void}
+ */
+const select = () => {
+  inputRef.value?.select()
+}
+
+defineExpose({
+  focus,
+  select
+})
+</script>
+
+<template>
+  <label class="admin-search-input relative block" :class="rootClass">
+    <span class="sr-only">{{ label }}</span>
+    <svg class="admin-search-input__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
+      ref="inputRef"
+      :value="props.value"
+      class="admin-search-input__field h-10 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]"
+      :class="[widthClass, inputClass]"
+      type="search"
+      :placeholder="placeholder"
+      :aria-label="label"
+      @input="emit('input', $event)"
+      @compositionupdate="emit('compositionupdate', $event)"
+      @compositionend="emit('compositionend', $event)"
+    >
+  </label>
+</template>