관리자 미디어 필터 입력 공통화

components/admin/AdminFilterPillGroup.vue

@@ -0,0 +1,58 @@
+<script setup>
+const props = defineProps({
+  /** 현재 선택 값 */
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: ''
+  },
+  /** 필터 옵션 목록 */
+  options: {
+    type: Array,
+    default: () => []
+  },
+  /** 필터 그룹 접근성 라벨 */
+  label: {
+    type: String,
+    default: '필터'
+  },
+  /** 그룹 루트에 추가할 화면별 클래스 */
+  rootClass: {
+    type: String,
+    default: ''
+  },
+  /** 버튼에 추가할 화면별 클래스 */
+  buttonClass: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+/**
+ * 필터 옵션이 선택 상태인지 확인한다.
+ * @param {Object} option - 필터 옵션
+ * @returns {boolean} 선택 상태
+ */
+const isSelected = (option) => option.value === props.modelValue
+</script>
+
+<template>
+  <div class="admin-filter-pill-group flex flex-wrap gap-1.5" :class="rootClass" role="group" :aria-label="label">
+    <button
+      v-for="option in options"
+      :key="String(option.value)"
+      class="admin-filter-pill-group__button rounded-full border px-3 py-1.5 text-xs font-semibold transition"
+      :class="[
+        isSelected(option) ? 'border-[#15171a] bg-[#15171a] text-white' : 'border-line bg-white text-muted hover:text-ink',
+        buttonClass
+      ]"
+      type="button"
+      :aria-pressed="isSelected(option)"
+      @click="emit('update:modelValue', option.value)"
+    >
+      {{ option.label }}
+      <span v-if="option.count !== undefined" class="ml-1 opacity-70">{{ option.count }}</span>
+    </button>
+  </div>
+</template>

components/admin/AdminSelectInput.vue

@@ -2,7 +2,7 @@
 const props = defineProps({
   /** 선택 입력 값 */
   modelValue: {
-    type: String,
+    type: [String, Number],
     default: ''
   },
   /** 선택 옵션 목록 */
@@ -34,13 +34,22 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
+/**
+ * option에 전달할 실제 값을 반환한다.
+ * @param {Object} option - 선택 옵션
+ * @returns {string|number} 선택 값
+ */
+const getOptionValue = (option) => option.value
+
 /**
  * 선택 값을 상위 컴포넌트에 전달한다.
  * @param {Event} event - 변경 이벤트
  * @returns {void}
  */
 const updateValue = (event) => {
-  emit('update:modelValue', event.target?.value || '')
+  const selectedValue = event.target?.value || ''
+  const selectedOption = props.options.find((option) => String(option.value) === selectedValue)
+  emit('update:modelValue', selectedOption ? selectedOption.value : selectedValue)
 }
 </script>
 
@@ -55,7 +64,7 @@ const updateValue = (event) => {
         :aria-label="label"
         @change="updateValue"
       >
-        <option v-for="option in options" :key="option.value" :value="option.value">
+        <option v-for="option in options" :key="option.value" :value="getOptionValue(option)">
           {{ option.label }}
         </option>
       </select>