From cdaa7d09ace8cc228be15f7fc3c884c247952315 Mon Sep 17 00:00:00 2001
From: sb <sb@MacBook-Pro.local>
Date: Thu, 9 Jul 2026 23:44:19 +0900
Subject: [PATCH] =?UTF-8?q?feat(filter):=20=EA=B2=80=EC=83=89=20=EB=B6=84?=
 =?UTF-8?q?=EB=A5=98=EB=A5=BC=20CategoryPicker(=EB=8C=80=EB=B6=84=EB=A5=98?=
 =?UTF-8?q?=E2=86=92=EC=86=8C=EB=B6=84=EB=A5=98)=EB=A1=9C,=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B2=84=ED=8A=BC=EB=A7=8C=20=EC=88=A8=EA=B9=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CategoryPicker에 hideAdd prop 추가(+대분류/+소분류 숨김)
- 내역 검색 필터 분류: 평면 칩 → 트리거→시트(CategoryPicker hide-add) + '분류 전체'
- 타입은 구분 필터(기본 지출) 기준

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/ui/CategoryPicker.vue |  5 ++--
 src/views/account/AccountView.vue    | 36 +++++++++++++++++++++++++++-
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/CategoryPicker.vue b/src/components/ui/CategoryPicker.vue
index 9ece4d2..35c5bd4 100644
--- a/src/components/ui/CategoryPicker.vue
+++ b/src/components/ui/CategoryPicker.vue
@@ -10,6 +10,7 @@ const props = defineProps({
   disabled:    { type: Boolean, default: false },
   admin:       { type: Boolean, default: false },
   reorderable: { type: Boolean, default: false },
+  hideAdd:     { type: Boolean, default: false }, // 분류 추가(+대분류/+소분류) 버튼 숨김 (필터 등 선택 전용)
 })
 const emit = defineEmits(['update:modelValue', 'category-added', 'rename', 'delete', 'reorder'])
 
@@ -229,10 +230,10 @@ onBeforeUnmount(destroySortables)
             :disabled="disabled"
             @click="$emit('update:modelValue', s.name)"
           >{{ s.name }}</button>
-          <button type="button" class="acc-chip add-chip sub-add" :disabled="disabled" @click="startAddSub">+ 소분류</button>
+          <button v-if="!hideAdd" type="button" class="acc-chip add-chip sub-add" :disabled="disabled" @click="startAddSub">+ 소분류</button>
         </div>
       </template>
-      <button type="button" class="acc-chip add-chip" :disabled="disabled" @click="startAddMajor">+ 대분류</button>
+      <button v-if="!hideAdd" type="button" class="acc-chip add-chip" :disabled="disabled" @click="startAddMajor">+ 대분류</button>
     </div>
     <div v-else class="cat-input">
       <input
diff --git a/src/views/account/AccountView.vue b/src/views/account/AccountView.vue
index b03122d..3278afe 100644
--- a/src/views/account/AccountView.vue
+++ b/src/views/account/AccountView.vue
@@ -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;