zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

멤버 필터 선택 입력 공통화

Browse Source
This commit is contained in:
zenn
2026-07-23 17:52:14 +09:00
parent 39e05a1038
commit 4783881829
5 changed files with 48 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/todo.md
View File

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

5
docs/update.md
View File

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

4
package-lock.json generated
View File

@@ -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",

2
package.json
View File

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

71
pages/admin/members/index.vue
View File

@@ -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"