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

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"