From 2ee5cae6ea2679c5e74ae27953dad5f21739589b Mon Sep 17 00:00:00 2001
From: sb <sb@MacBook-Pro.local>
Date: Thu, 9 Jul 2026 23:34:36 +0900
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=EA=B3=84=EC=A2=8C=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=EC=9D=84=20=EC=A2=85=EB=A5=98=E2=86=92=EA=B3=84?=
 =?UTF-8?q?=EC=A2=8C=20=EC=95=84=EC=BD=94=EB=94=94=EC=96=B8(AccountPicker)?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/ui/AccountPicker.vue     | 163 ++++++++++++++++++++++++
 src/views/account/AccountView.vue       |   7 +-
 src/views/account/RecurringFormView.vue |  65 +++-------
 3 files changed, 184 insertions(+), 51 deletions(-)
 create mode 100644 src/components/ui/AccountPicker.vue

diff --git a/src/components/ui/AccountPicker.vue b/src/components/ui/AccountPicker.vue
new file mode 100644
index 0000000..5b0575f
--- /dev/null
+++ b/src/components/ui/AccountPicker.vue
@@ -0,0 +1,163 @@
+<script setup>
+// 계좌 선택기: 종류(대분류) 클릭 → 해당 종류 계좌(소분류) 펼침. CategoryPicker 형태.
+import { computed, ref, watch } from 'vue'
+import BottomSheet from './BottomSheet.vue'
+
+const props = defineProps({
+  modelValue: { type: [String, Number], default: '' },
+  wallets: { type: Array, default: () => [] }, // { id, name, type, issuer }
+  title: { type: String, default: '계좌 선택' },
+  placeholder: { type: String, default: '계좌를 선택하세요' },
+  disabled: { type: Boolean, default: false },
+  emptyText: { type: String, default: '선택할 계좌가 없습니다' },
+  allLabel: { type: String, default: '' }, // 필터용 '전체' 옵션(설정 시 노출)
+})
+const emit = defineEmits(['update:modelValue'])
+
+const KINDS = [
+  { key: 'BANK', label: '은행계좌' },
+  { key: 'CASH', label: '현금' },
+  { key: 'CARD', label: '카드' },
+  { key: 'LOAN', label: '대출' },
+  { key: 'MINUS', label: '마이너스' },
+  { key: 'INVEST', label: '투자' },
+]
+const groups = computed(() =>
+  KINDS.map((k) => ({ ...k, items: props.wallets.filter((w) => w.type === k.key) })).filter(
+    (g) => g.items.length,
+  ),
+)
+const selected = computed(() => props.wallets.find((w) => w.id === props.modelValue) || null)
+const triggerLabel = computed(() => {
+  if (selected.value) return selected.value.name
+  if (props.allLabel && !props.modelValue) return props.allLabel
+  return props.placeholder
+})
+const isEmptyState = computed(() => !selected.value && !(props.allLabel && !props.modelValue))
+
+const open = ref(false)
+const expanded = ref('')
+const expandedGroup = computed(() => groups.value.find((g) => g.key === expanded.value) || null)
+watch(open, (o) => {
+  if (o) expanded.value = selected.value?.type || (groups.value.length === 1 ? groups.value[0].key : '')
+})
+function toggle(k) {
+  expanded.value = expanded.value === k ? '' : k
+}
+function pick(id) {
+  emit('update:modelValue', id)
+  open.value = false
+}
+</script>
+
+<template>
+  <button
+    type="button" class="ap-trigger" :class="{ empty: isEmptyState }"
+    :disabled="disabled" @click="open = true"
+  >
+    <span class="ap-label">{{ triggerLabel }}</span>
+    <span class="ap-caret">▾</span>
+  </button>
+
+  <BottomSheet v-model="open" :title="title">
+    <div v-if="groups.length" class="ap-picker">
+      <div class="ap-grid">
+        <button
+          v-if="allLabel"
+          type="button" class="ap-chip all" :class="{ active: !modelValue }"
+          @click="pick('')"
+        >{{ allLabel }}</button>
+        <button
+          v-for="g in groups" :key="g.key"
+          type="button" class="ap-chip major" :class="{ active: expanded === g.key }"
+          @click="toggle(g.key)"
+        >{{ g.label }}</button>
+      </div>
+      <div v-if="expandedGroup" class="ap-sub-grid">
+        <button
+          v-for="w in expandedGroup.items" :key="w.id"
+          type="button" class="ap-chip sub" :class="{ active: w.id === modelValue }"
+          @click="pick(w.id)"
+        >{{ w.name }}</button>
+      </div>
+    </div>
+    <p v-else class="ap-empty">{{ emptyText }}</p>
+  </BottomSheet>
+</template>
+
+<style scoped>
+.ap-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.55rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+  font-size: 0.9rem;
+  cursor: pointer;
+  text-align: left;
+}
+.ap-trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.ap-trigger.empty .ap-label {
+  opacity: 0.5;
+}
+.ap-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ap-caret {
+  opacity: 0.5;
+  font-size: 0.8rem;
+  flex-shrink: 0;
+}
+.ap-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  padding: 0.2rem 0 0.4rem;
+}
+.ap-sub-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  padding: 0.5rem;
+  margin-bottom: 0.4rem;
+  border-radius: 0 6px 6px 6px;
+  background: var(--color-background-mute);
+  border-left: 3px solid hsla(160, 100%, 37%, 0.4);
+}
+.ap-chip {
+  flex: 1 1 calc(25% - 0.35rem);
+  min-width: 0;
+  padding: 0.5rem 0.4rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-text);
+  font-size: 0.82rem;
+  cursor: pointer;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ap-chip.active {
+  border-color: hsla(160, 100%, 37%, 1);
+  background: hsla(160, 100%, 37%, 0.1);
+  color: hsla(160, 100%, 37%, 1);
+  font-weight: 600;
+}
+.ap-empty {
+  padding: 1.2rem 0.4rem;
+  opacity: 0.6;
+  text-align: center;
+}
+</style>
diff --git a/src/views/account/AccountView.vue b/src/views/account/AccountView.vue
index 055a1e3..b03122d 100644
--- a/src/views/account/AccountView.vue
+++ b/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="등록된 대출/카드가 없습니다"
diff --git a/src/views/account/RecurringFormView.vue b/src/views/account/RecurringFormView.vue
index d09c7ac..69aa8ba 100644
--- a/src/views/account/RecurringFormView.vue
+++ b/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="등록된 계좌가 없습니다"