관리자 목록 선택 입력 공통화

components/admin/AdminSelectInput.vue

@@ -0,0 +1,67 @@
+<script setup>
+const props = defineProps({
+  /** 선택 입력 값 */
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  /** 선택 옵션 목록 */
+  options: {
+    type: Array,
+    default: () => []
+  },
+  /** 스크린 리더용 선택 라벨 */
+  label: {
+    type: String,
+    default: '선택'
+  },
+  /** label 루트에 추가할 화면별 클래스 */
+  rootClass: {
+    type: String,
+    default: ''
+  },
+  /** select에 추가할 화면별 클래스 */
+  selectClass: {
+    type: String,
+    default: ''
+  },
+  /** select 너비 클래스 */
+  widthClass: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+/**
+ * 선택 값을 상위 컴포넌트에 전달한다.
+ * @param {Event} event - 변경 이벤트
+ * @returns {void}
+ */
+const updateValue = (event) => {
+  emit('update:modelValue', event.target?.value || '')
+}
+</script>
+
+<template>
+  <label class="admin-select-input" :class="rootClass">
+    <span class="sr-only">{{ label }}</span>
+    <span class="admin-select-input__wrap relative block">
+      <select
+        :value="props.modelValue"
+        class="admin-select-input__field h-10 appearance-none rounded border border-line bg-white pl-3 pr-9 text-sm text-[#394047] outline-none transition-colors hover:border-[#c8ced3] focus:border-[#8e9cac]"
+        :class="[widthClass, selectClass]"
+        :aria-label="label"
+        @change="updateValue"
+      >
+        <option v-for="option in options" :key="option.value" :value="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+      <svg class="admin-select-input__chevron pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </span>
+  </label>
+</template>