멤버 필터 선택 입력 공통화

docs/todo.md

@@ -9,7 +9,7 @@
   - `components/admin/AdminPostForm.vue`: 태그 입력, 대표 이미지 선택, 발행/초안 저장 상태, 우측 설정 패널 책임을 분리.
   - `pages/admin/media/index.vue`: 미디어 목록, 폴더 트리, 상세 모달, 재생성 액션을 작은 단위로 분리.
 - 관리자 UI 공통 컴포넌트 정리.
-  - 멤버 고급 필터와 설정 화면 select 입력의 공통 컴포넌트 적용 범위 검토.
+  - 설정 화면 select 입력의 공통 컴포넌트 적용 범위 검토.
 - 최근 브라우저 회귀 테스트 추가.
   - 태그 추천 선택 후 다음 태그 후보가 포커스 해제 없이 유지되는지 확인.
   - 관리자 미디어 대표 이미지/본문 이미지 탭 전환 중 역할 배지가 노출되지 않는지 확인.

docs/update.md

@@ -1,5 +1,10 @@
 # 업데이트 이력
 
+## v1.11.14
+
+- 관리자 멤버 고급 필터의 필드·조건·상태 선택 입력을 공용 `AdminSelectInput` 기준으로 정리.
+- 멤버 필터 필드 변경 시 조건·값 초기화 동작을 유지하면서 select 마크업 중복 제거.
+
 ## v1.11.13
 
 - 게시물 Export frontmatter에 대표 이미지 본문 상단 표시 여부(`show_featured_image`) 추가.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "1.11.13",
+  "version": "1.11.14",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "1.11.13",
+      "version": "1.11.14",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.11.13",
+  "version": "1.11.14",
   "private": true,
   "type": "module",
   "imports": {

pages/admin/members/index.vue

@@ -207,6 +207,17 @@ const changeFilterField = (filter) => {
   filter.value = fieldType === 'status' ? '활성' : ''
 }
 
+/**
+ * 필터 필드를 변경하고 필드 타입에 맞게 조건을 초기화한다.
+ * @param {Object} filter - 필터 조건
+ * @param {string} field - 변경할 필터 필드
+ * @returns {void}
+ */
+const updateFilterField = (filter, field) => {
+  filter.field = field
+  changeFilterField(filter)
+}
+
 /**
  * 새 필터 조건을 추가한다.
  * @returns {void}
@@ -426,45 +437,40 @@ const formatRelativeTime = (value) => {
             :key="filter.id"
             class="admin-members__filter-row grid gap-2 lg:grid-cols-[minmax(0,1fr)_220px_minmax(0,1fr)_36px]"
           >
-            <label class="admin-members__filter-field">
+            <AdminSelectInput
-              <span class="sr-only">필터 항목</span>
+              :model-value="filter.field"
-              <select
+              :options="filterFieldOptions"
-                v-model="filter.field"
+              label="필터 항목"
-                class="admin-members__filter-select h-11 w-full rounded-md border border-[#d7dce0] bg-white px-3 text-sm text-[#15171a] outline-none focus:border-[#8e9cac] focus:ring-2 focus:ring-[#dce2e8]"
+              root-class="admin-members__filter-field"
-                @change="changeFilterField(filter)"
+              select-class="admin-members__filter-select h-11 rounded-md border-[#d7dce0] text-[#15171a] focus:ring-2 focus:ring-[#dce2e8]"
-              >
+              width-class="w-full"
-                <option v-for="option in filterFieldOptions" :key="option.value" :value="option.value">
+              @update:model-value="(field) => updateFilterField(filter, field)"
-                  {{ option.label }}
+            />
-                </option>
+            <AdminSelectInput
-              </select>
+              v-model="filter.operator"
-            </label>
+              :options="getFilterOperatorOptions(filter.field)"
-            <label class="admin-members__filter-operator">
+              label="필터 조건"
-              <span class="sr-only">필터 조건</span>
+              root-class="admin-members__filter-operator"
-              <select
+              select-class="admin-members__filter-select h-11 rounded-md border-[#d7dce0] text-[#15171a] focus:ring-2 focus:ring-[#dce2e8]"
-                v-model="filter.operator"
+              width-class="w-full"
-                class="admin-members__filter-select h-11 w-full rounded-md border border-[#d7dce0] bg-white px-3 text-sm text-[#15171a] outline-none focus:border-[#8e9cac] focus:ring-2 focus:ring-[#dce2e8]"
+            />
-              >
+            <div class="admin-members__filter-value">
-                <option v-for="option in getFilterOperatorOptions(filter.field)" :key="option.value" :value="option.value">
-                  {{ option.label }}
-                </option>
-              </select>
-            </label>
-            <label class="admin-members__filter-value">
               <span class="sr-only">필터 값</span>
-              <select
+              <AdminSelectInput
                 v-if="getFilterFieldType(filter.field) === 'status'"
                 v-model="filter.value"
-                class="admin-members__filter-select h-11 w-full rounded-md border border-[#d7dce0] bg-white px-3 text-sm text-[#15171a] outline-none focus:border-[#8e9cac] focus:ring-2 focus:ring-[#dce2e8]"
+                :options="statusFilterOptions"
-              >
+                label="필터 값"
-                <option v-for="option in statusFilterOptions" :key="option.value" :value="option.value">
+                root-class="admin-members__filter-value-select"
-                  {{ option.label }}
+                select-class="admin-members__filter-select h-11 rounded-md border-[#d7dce0] text-[#15171a] focus:ring-2 focus:ring-[#dce2e8]"
-                </option>
+                width-class="w-full"
-              </select>
+              />
               <input
                 v-else-if="getFilterFieldType(filter.field) === 'date' && !['empty', 'notEmpty'].includes(filter.operator)"
                 v-model="filter.value"
                 class="admin-members__filter-input h-11 w-full rounded-md border border-[#d7dce0] bg-white px-3 text-sm text-[#15171a] outline-none focus:border-[#8e9cac] focus:ring-2 focus:ring-[#dce2e8]"
                 type="date"
+                aria-label="필터 값"
               >
               <input
                 v-else-if="getFilterFieldType(filter.field) !== 'date'"
@@ -472,11 +478,12 @@ const formatRelativeTime = (value) => {
                 class="admin-members__filter-input h-11 w-full rounded-md border border-[#d7dce0] bg-white px-3 text-sm text-[#15171a] outline-none focus:border-[#8e9cac] focus:ring-2 focus:ring-[#dce2e8]"
                 type="text"
                 placeholder="값 입력"
+                aria-label="필터 값"
               >
               <span v-else class="admin-members__filter-empty-value flex h-11 items-center rounded-md border border-[#d7dce0] bg-white px-3 text-sm text-[#8a95a5]">
                 값 필요 없음
               </span>
-            </label>
+            </div>
             <button
               class="admin-members__filter-delete grid h-11 w-9 place-items-center rounded-md text-[#657080] transition hover:bg-white hover:text-[#15171a]"
               type="button"