feat(filter): 검색 분류를 CategoryPicker(대분류→소분류)로, 추가 버튼만 숨김
Deploy / deploy (push) Failing after 12m11s
Deploy / deploy (push) Failing after 12m11s
- CategoryPicker에 hideAdd prop 추가(+대분류/+소분류 숨김) - 내역 검색 필터 분류: 평면 칩 → 트리거→시트(CategoryPicker hide-add) + '분류 전체' - 타입은 구분 필터(기본 지출) 기준 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -92,6 +92,9 @@ const form = reactive({ entryDate: '', type: 'EXPENSE', category: '', amount: nu
|
||||
// 분류 선택 바텀시트 — 최종 분류가 정해지면 자동 닫힘
|
||||
const catSheet = ref(false)
|
||||
watch(() => form.category, (v) => { if (v) catSheet.value = false })
|
||||
// 검색 필터 분류 바텀시트
|
||||
const catFilterSheet = ref(false)
|
||||
watch(() => filters.category, (v) => { if (v) catFilterSheet.value = false })
|
||||
|
||||
// ===== 외화 결제 =====
|
||||
const CURRENCIES = ['KRW', 'USD', 'JPY', 'EUR', 'CNY', 'GBP', 'AUD', 'CAD', 'HKD', 'SGD', 'THB', 'VND', 'TWD', 'PHP', 'MYR']
|
||||
@@ -1047,7 +1050,21 @@ onMounted(async () => {
|
||||
placeholder="메모·분류 검색" @keyup.enter="applyFilters"
|
||||
/>
|
||||
<div class="f-sel"><SheetSelect v-model="filters.type" :options="filterTypeOptions" title="구분" placeholder="구분 전체" /></div>
|
||||
<div class="f-sel"><SheetSelect v-model="filters.category" :options="filterCategoryOptions" title="분류" placeholder="분류 전체" /></div>
|
||||
<div class="f-sel">
|
||||
<button type="button" class="sheet-trigger" :class="{ empty: !filters.category }" @click="catFilterSheet = true">
|
||||
<span class="st-label">{{ filters.category || '분류 전체' }}</span>
|
||||
<span class="st-caret">▾</span>
|
||||
</button>
|
||||
</div>
|
||||
<BottomSheet v-model="catFilterSheet" title="분류 선택">
|
||||
<button type="button" class="cat-all-btn" :class="{ active: !filters.category }" @click="filters.category = ''; catFilterSheet = false">분류 전체</button>
|
||||
<CategoryPicker
|
||||
v-model="filters.category"
|
||||
:type="filters.type || 'EXPENSE'"
|
||||
:categories="categories"
|
||||
hide-add
|
||||
/>
|
||||
</BottomSheet>
|
||||
<div class="f-sel"><AccountPicker v-model="filters.walletId" :wallets="wallets" all-label="계좌 전체" title="계좌 선택" /></div>
|
||||
<div class="f-sel"><SheetSelect v-model="filters.tagId" :options="filterTagOptions" title="태그" placeholder="태그 전체" /></div>
|
||||
<IconBtn icon="search" title="적용" variant="primary" @click="applyFilters" />
|
||||
@@ -1563,6 +1580,23 @@ button.primary {
|
||||
font-size: 0.8rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cat-all-btn {
|
||||
width: 100%;
|
||||
padding: 0.55rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cat-all-btn.active {
|
||||
border-color: hsla(160, 100%, 37%, 1);
|
||||
background: hsla(160, 100%, 37%, 0.1);
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
font-weight: 600;
|
||||
}
|
||||
.summary {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
|
||||
Reference in New Issue
Block a user