From 4783881829d237f230c70e63d4c11eccdad56576 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Thu, 23 Jul 2026 17:52:14 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A9=A4=EB=B2=84=20=ED=95=84=ED=84=B0=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EC=9E=85=EB=A0=A5=20=EA=B3=B5=ED=86=B5?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/todo.md                  |  2 +-
 docs/update.md                |  5 +++
 package-lock.json             |  4 +-
 package.json                  |  2 +-
 pages/admin/members/index.vue | 71 +++++++++++++++++++----------------
 5 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/docs/todo.md b/docs/todo.md
index 1680468..3ee5eb8 100644
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -9,7 +9,7 @@
   - `components/admin/AdminPostForm.vue`: 태그 입력, 대표 이미지 선택, 발행/초안 저장 상태, 우측 설정 패널 책임을 분리.
   - `pages/admin/media/index.vue`: 미디어 목록, 폴더 트리, 상세 모달, 재생성 액션을 작은 단위로 분리.
 - 관리자 UI 공통 컴포넌트 정리.
-  - 멤버 고급 필터와 설정 화면 select 입력의 공통 컴포넌트 적용 범위 검토.
+  - 설정 화면 select 입력의 공통 컴포넌트 적용 범위 검토.
 - 최근 브라우저 회귀 테스트 추가.
   - 태그 추천 선택 후 다음 태그 후보가 포커스 해제 없이 유지되는지 확인.
   - 관리자 미디어 대표 이미지/본문 이미지 탭 전환 중 역할 배지가 노출되지 않는지 확인.
diff --git a/docs/update.md b/docs/update.md
index 048dc26..496dcbf 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,10 @@
 # 업데이트 이력
 
+## v1.11.14
+
+- 관리자 멤버 고급 필터의 필드·조건·상태 선택 입력을 공용 `AdminSelectInput` 기준으로 정리.
+- 멤버 필터 필드 변경 시 조건·값 초기화 동작을 유지하면서 select 마크업 중복 제거.
+
 ## v1.11.13
 
 - 게시물 Export frontmatter에 대표 이미지 본문 상단 표시 여부(`show_featured_image`) 추가.
diff --git a/package-lock.json b/package-lock.json
index 23ec9a7..5585d2d 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 4bcdef3..1ff91b8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.11.13",
+  "version": "1.11.14",
   "private": true,
   "type": "module",
   "imports": {
diff --git a/pages/admin/members/index.vue b/pages/admin/members/index.vue
index c11349a..f0370e0 100644
--- a/pages/admin/members/index.vue
+++ b/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">
-              <span class="sr-only">필터 항목</span>
-              <select
-                v-model="filter.field"
-                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]"
-                @change="changeFilterField(filter)"
-              >
-                <option v-for="option in filterFieldOptions" :key="option.value" :value="option.value">
-                  {{ option.label }}
-                </option>
-              </select>
-            </label>
-            <label class="admin-members__filter-operator">
-              <span class="sr-only">필터 조건</span>
-              <select
-                v-model="filter.operator"
-                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]"
-              >
-                <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">
+            <AdminSelectInput
+              :model-value="filter.field"
+              :options="filterFieldOptions"
+              label="필터 항목"
+              root-class="admin-members__filter-field"
+              select-class="admin-members__filter-select h-11 rounded-md border-[#d7dce0] text-[#15171a] focus:ring-2 focus:ring-[#dce2e8]"
+              width-class="w-full"
+              @update:model-value="(field) => updateFilterField(filter, field)"
+            />
+            <AdminSelectInput
+              v-model="filter.operator"
+              :options="getFilterOperatorOptions(filter.field)"
+              label="필터 조건"
+              root-class="admin-members__filter-operator"
+              select-class="admin-members__filter-select h-11 rounded-md border-[#d7dce0] text-[#15171a] focus:ring-2 focus:ring-[#dce2e8]"
+              width-class="w-full"
+            />
+            <div 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]"
-              >
-                <option v-for="option in statusFilterOptions" :key="option.value" :value="option.value">
-                  {{ option.label }}
-                </option>
-              </select>
+                :options="statusFilterOptions"
+                label="필터 값"
+                root-class="admin-members__filter-value-select"
+                select-class="admin-members__filter-select h-11 rounded-md border-[#d7dce0] text-[#15171a] focus:ring-2 focus:ring-[#dce2e8]"
+                width-class="w-full"
+              />
               <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"