feat(ui): 계좌 선택을 종류→계좌 아코디언(AccountPicker)으로

- AccountPicker.vue: 종류(대분류) 클릭 시 해당 계좌(소분류) 펼침. CategoryPicker 형태
- 정기결제 폼 출금/입금 계좌: 종류칩+시트 → AccountPicker 단일 선택
- 내역 검색 필터 계좌, 상환 대상: AccountPicker 적용(필터는 '전체' 옵션)
- 계좌 많아도 종류별로 접혀 스크롤 최소화

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/views/account/AccountView.vue

@@ -8,6 +8,7 @@ import { appLock } from '@/composables/appLock'
 import IconBtn from '@/components/ui/IconBtn.vue'
 import CategoryPicker from '@/components/ui/CategoryPicker.vue'
 import SheetSelect from '@/components/ui/SheetSelect.vue'
+import AccountPicker from '@/components/ui/AccountPicker.vue'
 import BottomSheet from '@/components/ui/BottomSheet.vue'
 import { imageToBlob, parseReceiptText } from '@/utils/receiptOcr'
 import { cardNotif } from '@/native/cardNotif'
@@ -1047,7 +1048,7 @@ onMounted(async () => {
       />
       <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"><SheetSelect v-model="filters.walletId" :options="filterWalletOptions" title="계좌" placeholder="계좌 전체" /></div>
+      <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" />
       <IconBtn icon="refresh" title="초기화" @click="resetFilters" />
@@ -1238,9 +1239,9 @@ onMounted(async () => {
               <template v-if="isRepayment">
                 <div class="field">
                   <span class="field-label">대상(대출/카드)</span>
-                  <SheetSelect
+                  <AccountPicker
                     v-model="form.toWalletId"
-                    :options="repayTargetOptions"
+                    :wallets="liabilityWallets"
                     :disabled="submitting"
                     title="상환 대상 선택" placeholder="대출/카드를 선택하세요"
                     empty-text="등록된 대출/카드가 없습니다"

src/views/account/RecurringFormView.vue

@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { accountApi } from '@/api/accountApi'
 import IconBtn from '@/components/ui/IconBtn.vue'
 import CategoryPicker from '@/components/ui/CategoryPicker.vue'
-import SheetSelect from '@/components/ui/SheetSelect.vue'
+import AccountPicker from '@/components/ui/AccountPicker.vue'
 import BottomSheet from '@/components/ui/BottomSheet.vue'
 
 const route = useRoute()
@@ -55,33 +55,22 @@ const WALLET_KINDS = [
   { value: 'CARD', label: '카드' },
   { value: 'MINUS', label: '마이너스' },
 ]
-const walletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.walletKind))
-const toWalletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.toWalletKind))
 const fromWalletKinds = computed(() =>
   WALLET_KINDS.filter((k) => k.value !== 'CARD' || form.type === 'EXPENSE'),
 )
 const toWalletKinds = computed(() => WALLET_KINDS.filter((k) => k.value !== 'CARD'))
-function walletOpts(list) {
-  return list.map((w) => ({ value: w.id, label: `${w.name}${w.issuer ? ` (${w.issuer})` : ''}` }))
-}
-const fromWalletOptions = computed(() => walletOpts(walletsOfKind.value))
-const toWalletOptions = computed(() => walletOpts(toWalletsOfKind.value))
-function walletKindOf(id) {
-  const w = wallets.value.find((x) => x.id === id)
-  return w ? w.type : ''
-}
-function onWalletKindChange() {
-  form.walletId = ''
-}
-function onToWalletKindChange() {
-  form.toWalletId = ''
-}
+// 구분에 따라 선택 가능한 출금/입금 계좌 목록(계좌 종류로 필터)
+const fromWallets = computed(() =>
+  wallets.value.filter((w) => fromWalletKinds.value.some((k) => k.value === w.type)),
+)
+const toWallets = computed(() =>
+  wallets.value.filter((w) => toWalletKinds.value.some((k) => k.value === w.type)),
+)
 function onTypeChange() {
   form.category = ''
-  if (!fromWalletKinds.value.some((k) => k.value === form.walletKind)) {
-    form.walletKind = ''
-    form.walletId = ''
-  }
+  // 선택된 출금 계좌가 새 구분에서 허용되지 않으면 해제
+  const fw = wallets.value.find((w) => w.id === form.walletId)
+  if (fw && !fromWalletKinds.value.some((k) => k.value === fw.type)) form.walletId = ''
 }
 
 function todayStr() {
@@ -118,9 +107,7 @@ async function load() {
         amount: r.amount,
         category: r.category || '',
         memo: r.memo || '',
-        walletKind: walletKindOf(r.walletId),
         walletId: r.walletId || '',
-        toWalletKind: walletKindOf(r.toWalletId),
         toWalletId: r.toWalletId || '',
         frequency: r.frequency,
         dayOfMonth: r.dayOfMonth || 1,
@@ -220,42 +207,24 @@ async function submit() {
 
       <label>금액<input v-model.number="form.amount" type="number" min="0" placeholder="원" :disabled="submitting" /></label>
 
-      <!-- 출금 계좌 종류 배지 -->
+      <!-- 출금 계좌 (종류→계좌 아코디언) -->
       <div class="field">
         <span class="field-label">{{ form.type === 'TRANSFER' ? '출금 계좌' : '계좌/카드' }}</span>
-        <div class="wallet-chips">
-          <button
-            v-for="k in fromWalletKinds" :key="k.value"
-            type="button" class="chip" :class="{ active: form.walletKind === k.value }"
-            :disabled="submitting"
-            @click="form.walletKind = k.value; onWalletKindChange()"
-          >{{ k.label }}</button>
-        </div>
-        <SheetSelect
-          v-if="form.walletKind"
+        <AccountPicker
           v-model="form.walletId"
-          :options="fromWalletOptions"
+          :wallets="fromWallets"
           :disabled="submitting"
           title="계좌 선택" placeholder="계좌를 선택하세요"
           empty-text="등록된 계좌가 없습니다"
         />
       </div>
 
-      <!-- 입금 계좌 종류 배지 (이체일 때만) -->
+      <!-- 입금 계좌 (이체일 때만) -->
       <div v-if="form.type === 'TRANSFER'" class="field">
         <span class="field-label">입금 계좌</span>
-        <div class="wallet-chips">
-          <button
-            v-for="k in toWalletKinds" :key="k.value"
-            type="button" class="chip" :class="{ active: form.toWalletKind === k.value }"
-            :disabled="submitting"
-            @click="form.toWalletKind = k.value; onToWalletKindChange()"
-          >{{ k.label }}</button>
-        </div>
-        <SheetSelect
-          v-if="form.toWalletKind"
+        <AccountPicker
           v-model="form.toWalletId"
-          :options="toWalletOptions"
+          :wallets="toWallets"
           :disabled="submitting"
           title="입금 계좌 선택" placeholder="계좌를 선택하세요"
           empty-text="등록된 계좌가 없습니다"