From 061fb47b97a35baa9c828c2619fb92819df571bf Mon Sep 17 00:00:00 2001
From: sb <sb@MacBook-Pro.local>
Date: Tue, 7 Jul 2026 21:56:19 +0900
Subject: [PATCH] =?UTF-8?q?feat(wallets):=20=EA=B3=84=EC=A2=8C=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EC=A2=85=EB=A5=98=EB=B3=84=20=EA=B7=B8=EB=A3=B9=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20+=20=EA=B3=84=EC=A2=8C=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=ED=99=94=EB=A9=B4=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 탭 제거, 종류별(은행/현금/카드/대출/마이너스/투자) 섹션 목록으로 변경
- 계좌 클릭 시 인라인 드롭다운 대신 별도 상세 화면(/account/wallets/:id)으로 이동
- 상세 화면: 계좌 요약 + 월별 내역(월 네비/합계), 투자는 투자금(원금)만 표기
- 목록에서 투자 계좌는 평가액 제거하고 투자금만 표기
- 드래그 순서변경은 종류별 그룹 단위로 유지

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/router/index.js                           |   6 +
 src/views/account/AccountWalletDetailView.vue | 302 +++++++++++++++
 src/views/account/AccountWalletView.vue       | 366 +++++-------------
 3 files changed, 409 insertions(+), 265 deletions(-)
 create mode 100644 src/views/account/AccountWalletDetailView.vue

diff --git a/src/router/index.js b/src/router/index.js
index 35b655d..4c9e9a9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -139,6 +139,12 @@ const router = createRouter({
       component: () => import('../views/account/AccountWalletView.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/account/wallets/:id',
+      name: 'account-wallet-detail',
+      component: () => import('../views/account/AccountWalletDetailView.vue'),
+      meta: { requiresAuth: true },
+    },
     {
       path: '/account/categories',
       name: 'account-categories',
diff --git a/src/views/account/AccountWalletDetailView.vue b/src/views/account/AccountWalletDetailView.vue
new file mode 100644
index 0000000..7cfd69b
--- /dev/null
+++ b/src/views/account/AccountWalletDetailView.vue
@@ -0,0 +1,302 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { accountApi } from '@/api/accountApi'
+import IconBtn from '@/components/ui/IconBtn.vue'
+
+const route = useRoute()
+const router = useRouter()
+const walletId = Number(route.params.id)
+
+const wallet = ref(null)
+const entries = ref([])
+const loading = ref(false)
+const error = ref(null)
+const month = ref('') // YYYY-MM
+
+const TYPE_LABEL = {
+  BANK: '은행계좌',
+  CASH: '현금',
+  CARD: '신용/체크카드',
+  LOAN: '대출',
+  MINUS: '마이너스통장',
+  INVEST: '투자',
+}
+const isLiability = (t) => t === 'CARD' || t === 'LOAN' || t === 'MINUS'
+
+function won(n) {
+  return (n ?? 0).toLocaleString('ko-KR')
+}
+function currentYm() {
+  const d = new Date()
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+}
+function ymLabel(ym) {
+  return ym ? ym.replace('-', '.') : ''
+}
+function cardTypeLabel(v) {
+  return v === 'CHECK' ? '체크' : v === 'CREDIT' ? '신용' : ''
+}
+function loanMethodLabel(v) {
+  return v === 'EQUAL_PAYMENT' ? '원리금균등' : v === 'EQUAL_PRINCIPAL' ? '원금균등' : v === 'BULLET' ? '만기일시' : ''
+}
+
+// 이 계좌 기준 증감(+입금/상환, -지출/출금)
+function effectAmount(e) {
+  if (e.type === 'TRANSFER') return e.toWalletId === walletId ? e.amount : -e.amount
+  return e.type === 'INCOME' ? e.amount : -e.amount
+}
+function entryDesc(e) {
+  const m = e.memo ? ` · ${e.memo}` : ''
+  const w = wallet.value
+  if (e.type === 'TRANSFER') {
+    if (e.toWalletId === walletId) {
+      const inLabel = w && isLiability(w.type) ? '상환/납부' : '입금'
+      return `${inLabel} ← ${e.walletName || '계좌'}${m}`
+    }
+    return `이체 → ${e.toWalletName || '계좌'}${m}`
+  }
+  if (e.type === 'INCOME') return `수입${e.category ? ' · ' + e.category : ''}${m}`
+  return `${e.category || '지출'}${m}`
+}
+function entryDate(v) {
+  if (!v) return '-'
+  const d = new Date(v)
+  return Number.isNaN(d.getTime())
+    ? v
+    : `${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')}`
+}
+
+const monthListArr = computed(() => {
+  const set = new Set(entries.value.map((e) => (e.entryDate || '').slice(0, 7)).filter(Boolean))
+  return [...set].sort()
+})
+const monthEntries = computed(() =>
+  entries.value.filter((e) => (e.entryDate || '').slice(0, 7) === month.value),
+)
+const monthSum = computed(() => monthEntries.value.reduce((s, e) => s + effectAmount(e), 0))
+const canPrev = computed(() => monthListArr.value.indexOf(month.value) > 0)
+const canNext = computed(() => {
+  const i = monthListArr.value.indexOf(month.value)
+  return i >= 0 && i < monthListArr.value.length - 1
+})
+function shiftMonth(delta) {
+  const ms = monthListArr.value
+  if (!ms.length) return
+  const i = ms.indexOf(month.value)
+  const j = Math.min(ms.length - 1, Math.max(0, (i === -1 ? ms.length - 1 : i) + delta))
+  month.value = ms[j]
+}
+
+async function load() {
+  loading.value = true
+  error.value = null
+  try {
+    const ws = await accountApi.wallets()
+    wallet.value = ws.find((w) => w.id === walletId) || null
+    if (!wallet.value) {
+      error.value = '계좌를 찾을 수 없습니다.'
+      return
+    }
+    if (wallet.value.type !== 'INVEST') {
+      entries.value = await accountApi.walletEntries(walletId)
+      const ms = monthListArr.value
+      month.value = ms.length ? ms[ms.length - 1] : currentYm()
+    }
+  } catch (e) {
+    error.value = e.response?.data?.message || '불러오지 못했습니다.'
+  } finally {
+    loading.value = false
+  }
+}
+onMounted(load)
+</script>
+
+<template>
+  <section class="wdetail">
+    <header class="wd-head">
+      <IconBtn icon="back" title="뒤로" @click="router.back()" />
+      <span class="wd-title">{{ wallet?.name || '계좌' }}</span>
+    </header>
+
+    <p v-if="error" class="msg error">{{ error }}</p>
+    <p v-else-if="loading" class="msg">불러오는 중...</p>
+
+    <template v-else-if="wallet">
+      <!-- 계좌 요약 카드 -->
+      <div class="wd-summary">
+        <div class="wd-sum-top">
+          <span class="wd-type">{{ TYPE_LABEL[wallet.type] }}</span>
+          <span v-if="wallet.type === 'CARD' && wallet.cardType" class="wd-badge">{{ cardTypeLabel(wallet.cardType) }}</span>
+        </div>
+        <div class="wd-figure" :class="{ neg: wallet.type === 'INVEST' ? false : wallet.balance < 0 }">
+          <template v-if="wallet.type === 'INVEST'">투자금 {{ won(wallet.investedAmount) }}</template>
+          <template v-else>{{ won(wallet.balance) }}</template>
+        </div>
+        <div class="wd-meta">
+          <span v-if="wallet.issuer">{{ wallet.issuer }}</span>
+          <span v-if="wallet.type === 'LOAN' && wallet.loanRate">
+            · {{ wallet.loanRate }}%<template v-if="wallet.loanMethod"> / {{ loanMethodLabel(wallet.loanMethod) }}</template>
+          </span>
+        </div>
+      </div>
+
+      <!-- 투자: 내역 대신 안내 -->
+      <div v-if="wallet.type === 'INVEST'" class="wd-invest-note">
+        <p>투자금(투입원금)을 표시합니다. 금액 변경은 계좌 관리에서 <b>수정</b>하세요.</p>
+      </div>
+
+      <!-- 그 외: 월별 내역 -->
+      <template v-else>
+        <div v-if="monthListArr.length" class="wd-month-nav">
+          <button type="button" class="mn-btn" :disabled="!canPrev" aria-label="이전 달" @click="shiftMonth(-1)">◀</button>
+          <span class="mn-label">{{ ymLabel(month) }}</span>
+          <button type="button" class="mn-btn" :disabled="!canNext" aria-label="다음 달" @click="shiftMonth(1)">▶</button>
+          <span class="mn-sum" :class="monthSum < 0 ? 'neg' : 'pos'">
+            합계 {{ monthSum >= 0 ? '+' : '' }}{{ won(monthSum) }}
+          </span>
+        </div>
+
+        <ul v-if="monthEntries.length" class="wd-list">
+          <li v-for="e in monthEntries" :key="e.id" class="wd-row">
+            <span class="d-date">{{ entryDate(e.entryDate) }}</span>
+            <span class="d-desc">{{ entryDesc(e) }}</span>
+            <span class="d-amount" :class="effectAmount(e) < 0 ? 'neg' : 'pos'">
+              {{ effectAmount(e) >= 0 ? '+' : '' }}{{ won(effectAmount(e)) }}
+            </span>
+          </li>
+        </ul>
+        <p v-else-if="monthListArr.length" class="msg">이 달 내역이 없습니다.</p>
+        <p v-else class="msg">연관 내역이 없습니다.</p>
+      </template>
+    </template>
+  </section>
+</template>
+
+<style scoped>
+.wdetail {
+  max-width: 760px;
+  margin: 0 auto;
+}
+.wd-head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+.wd-title {
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+.msg {
+  margin: 0.75rem 0;
+  opacity: 0.8;
+}
+.msg.error {
+  color: #c0392b;
+}
+.wd-summary {
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1rem 1.1rem;
+  margin-bottom: 1rem;
+}
+.wd-sum-top {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.wd-type {
+  font-size: 0.85rem;
+  opacity: 0.7;
+}
+.wd-badge {
+  font-size: 0.72rem;
+  padding: 0.05rem 0.4rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+}
+.wd-figure {
+  font-size: 1.6rem;
+  font-weight: 800;
+  margin-top: 0.25rem;
+}
+.wd-figure.neg {
+  color: #c0392b;
+}
+.wd-meta {
+  margin-top: 0.3rem;
+  font-size: 0.85rem;
+  opacity: 0.65;
+}
+.wd-invest-note {
+  font-size: 0.9rem;
+  opacity: 0.75;
+  line-height: 1.5;
+}
+.wd-month-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0.5rem 0 0.75rem;
+}
+.mn-btn {
+  border: 1px solid var(--color-border);
+  background: var(--color-background-soft);
+  border-radius: 6px;
+  width: 2rem;
+  height: 2rem;
+  cursor: pointer;
+  color: var(--color-text);
+}
+.mn-btn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.mn-label {
+  font-weight: 700;
+}
+.mn-sum {
+  margin-left: auto;
+  font-weight: 700;
+}
+.mn-sum.neg,
+.d-amount.neg {
+  color: #c0392b;
+}
+.mn-sum.pos,
+.d-amount.pos {
+  color: #2e7d32;
+}
+.wd-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.wd-row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.6rem 0.2rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.d-date {
+  flex: 0 0 auto;
+  font-size: 0.82rem;
+  opacity: 0.6;
+  width: 3rem;
+}
+.d-desc {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.9rem;
+}
+.d-amount {
+  flex: 0 0 auto;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+</style>
diff --git a/src/views/account/AccountWalletView.vue b/src/views/account/AccountWalletView.vue
index 960987e..8ad6da9 100644
--- a/src/views/account/AccountWalletView.vue
+++ b/src/views/account/AccountWalletView.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, reactive, ref, watch, nextTick } from 'vue'
+import { computed, onBeforeUnmount, onMounted, reactive, ref, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
 import Sortable from 'sortablejs'
 import { accountApi } from '@/api/accountApi'
 import { useDialog } from '@/composables/dialog'
@@ -9,6 +10,7 @@ import AppModal from '@/components/ui/AppModal.vue'
 
 const dialog = useDialog()
 const auth = useAuthStore()
+const router = useRouter()
 
 const TABS = [
   { key: 'BANK', label: '은행계좌' },
@@ -33,13 +35,11 @@ const wallets = ref([])
 const networth = ref({ totalAssets: 0, totalLiabilities: 0, netWorth: 0 })
 const loading = ref(false)
 const error = ref(null)
-const activeType = ref('BANK')
-// 무료 회원 계좌 등록 한도: 종류별 2개(유료 무제한). 백엔드에서도 강제.
-const FREE_WALLET_LIMIT = 2
-const atWalletLimit = computed(
-  () =>
-    !auth.isPremium &&
-    wallets.value.filter((w) => w.type === activeType.value).length >= FREE_WALLET_LIMIT,
+// 종류별 그룹(탭 제거) — TABS 순서로, 계좌가 있는 종류만 노출
+const groups = computed(() =>
+  TABS.map((t) => ({ ...t, wallets: wallets.value.filter((w) => w.type === t.key) })).filter(
+    (g) => g.wallets.length,
+  ),
 )
 
 const formOpen = ref(false)
@@ -64,86 +64,39 @@ const form = reactive({
 const submitting = ref(false)
 const formError = ref(null)
 
-// 드롭다운(계좌별 내역) — 월별로 표시
-const expandedId = ref(null)
-const entriesByWallet = reactive({})
-const loadingEntries = ref(false)
-const entryMonth = reactive({}) // 계좌별 선택 월(YYYY-MM)
-
-function currentYm() {
-  const d = new Date()
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
-}
-function ymLabel(ym) {
-  return ym ? ym.replace('-', '.') : ''
-}
-// 데이터가 있는 월 목록(오름차순)
-function monthList(w) {
-  const set = new Set((entriesByWallet[w.id] || []).map((e) => (e.entryDate || '').slice(0, 7)).filter(Boolean))
-  return [...set].sort()
-}
-function monthEntries(w) {
-  const ym = entryMonth[w.id]
-  return (entriesByWallet[w.id] || []).filter((e) => (e.entryDate || '').slice(0, 7) === ym)
-}
-function monthSum(w) {
-  return monthEntries(w).reduce((s, e) => s + effectAmount(e, w.id), 0)
-}
-function canPrev(w) {
-  return monthList(w).indexOf(entryMonth[w.id]) > 0
-}
-function canNext(w) {
-  const ms = monthList(w)
-  const i = ms.indexOf(entryMonth[w.id])
-  return i >= 0 && i < ms.length - 1
-}
-// 데이터가 있는 월 사이로만 이동(빈 달 건너뜀)
-function shiftMonth(w, delta) {
-  const ms = monthList(w)
-  if (!ms.length) return
-  const i = ms.indexOf(entryMonth[w.id])
-  const j = Math.min(ms.length - 1, Math.max(0, (i === -1 ? ms.length - 1 : i) + delta))
-  entryMonth[w.id] = ms[j]
-}
-
 const isLiability = (t) => t === 'CARD' || t === 'LOAN' || t === 'MINUS'
 
-// 현재 탭(activeType)의 계좌 — 드래그 정렬 대상 (백엔드가 sort_order 순 정렬)
-const rows = ref([])
-function syncRows() {
-  rows.value = wallets.value.filter((w) => w.type === activeType.value)
-}
-watch([wallets, activeType], syncRows, { immediate: true })
-
-// 탭 선택 (투자 계좌는 평가액 직접입력 방식 — 별도 시세갱신 없음)
-function selectTab(key) {
-  activeType.value = key
+// 계좌 클릭 → 별도 상세 화면(계좌별 내역)
+function goDetail(w) {
+  router.push(`/account/wallets/${w.id}`)
 }
 
-// ===== 드래그앤드랍 순서 변경 (SortableJS, 터치 지원) =====
-const listEl = ref(null)
-let sortable = null
-function initSortable() {
-  if (sortable) {
-    sortable.destroy()
-    sortable = null
-  }
-  if (!listEl.value) return
-  sortable = Sortable.create(listEl.value, {
-    handle: '.drag-handle',
-    animation: 150,
-    onEnd: (evt) => {
-      if (evt.oldIndex === evt.newIndex) return
-      const arr = rows.value
-      const moved = arr.splice(evt.oldIndex, 1)[0]
-      arr.splice(evt.newIndex, 0, moved)
-      persistOrder(arr.map((r) => r.id))
-    },
+// ===== 드래그앤드랍 순서 변경 (종류별 그룹마다 SortableJS, 터치 지원) =====
+let sortables = []
+function destroySortables() {
+  sortables.forEach((s) => s.destroy())
+  sortables = []
+}
+function initSortables() {
+  destroySortables()
+  document.querySelectorAll('.wallet-group-list').forEach((el) => {
+    sortables.push(
+      Sortable.create(el, {
+        handle: '.drag-handle',
+        animation: 150,
+        onEnd: (evt) => {
+          if (evt.oldIndex === evt.newIndex) return
+          const type = el.dataset.type
+          const ids = [...el.querySelectorAll(':scope > .wallet-item')].map((li) => Number(li.dataset.id))
+          persistOrder(type, ids)
+        },
+      }),
+    )
   })
 }
-async function persistOrder(ids) {
+async function persistOrder(type, ids) {
   try {
-    await accountApi.reorderWallets(activeType.value, ids)
+    await accountApi.reorderWallets(type, ids)
     await load()
   } catch (e) {
     alert(e.response?.data?.message || '순서 저장에 실패했습니다.')
@@ -151,52 +104,6 @@ async function persistOrder(ids) {
   }
 }
 
-async function toggleExpand(w) {
-  if (expandedId.value === w.id) {
-    expandedId.value = null
-    return
-  }
-  expandedId.value = w.id
-  if (w.type === 'INVEST') return // 포트폴리오 컴포넌트가 자체 로드
-  loadingEntries.value = true
-  try {
-    entriesByWallet[w.id] = await accountApi.walletEntries(w.id)
-    // 기본 선택 월 = 내역이 있는 가장 최근 월(없으면 이번 달)
-    const ms = monthList(w)
-    entryMonth[w.id] = ms.length ? ms[ms.length - 1] : currentYm()
-  } catch {
-    entriesByWallet[w.id] = []
-  } finally {
-    loadingEntries.value = false
-  }
-}
-
-// 이 계좌 기준 증감(+입금/상환, -지출/출금)
-function effectAmount(e, walletId) {
-  if (e.type === 'TRANSFER') return e.toWalletId === walletId ? e.amount : -e.amount
-  return e.type === 'INCOME' ? e.amount : -e.amount
-}
-function entryDesc(e, w) {
-  const m = e.memo ? ` · ${e.memo}` : ''
-  if (e.type === 'TRANSFER') {
-    if (e.toWalletId === w.id) {
-      // 이 계좌로 들어온 이체: 부채는 상환/납부, 그 외(은행·투자)는 입금
-      const inLabel = w.type === 'CARD' || w.type === 'LOAN' || w.type === 'MINUS' ? '상환/납부' : '입금'
-      return `${inLabel} ← ${e.walletName || '계좌'}${m}`
-    }
-    return `이체 → ${e.toWalletName || '계좌'}${m}`
-  }
-  if (e.type === 'INCOME') return `수입${e.category ? ' · ' + e.category : ''}${m}`
-  return `${e.category || '지출'}${m}`
-}
-function entryDate(v) {
-  if (!v) return '-'
-  const d = new Date(v)
-  return Number.isNaN(d.getTime())
-    ? v
-    : `${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')}`
-}
-
 function won(n) {
   return (n ?? 0).toLocaleString('ko-KR')
 }
@@ -247,19 +154,15 @@ async function load() {
   } finally {
     loading.value = false
   }
+  // 그룹 렌더 후 종류별 드래그 재바인딩
+  await nextTick()
+  initSortables()
 }
 
 function openCreate() {
-  if (atWalletLimit.value) {
-    dialog.alert(
-      `무료 회원은 종류별 계좌를 ${FREE_WALLET_LIMIT}개까지 등록할 수 있어요. 유료로 업그레이드하면 무제한이에요.`,
-      { title: '등록 한도' },
-    )
-    return
-  }
   editId.value = null
   Object.assign(form, {
-    type: activeType.value,
+    type: 'BANK',
     name: '',
     issuer: '',
     accountNumber: '',
@@ -355,12 +258,8 @@ function loanMethodLabel(v) {
   return v === 'EQUAL_PAYMENT' ? '원리금균등' : v === 'EQUAL_PRINCIPAL' ? '원금균등' : v === 'BULLET' ? '만기일시' : ''
 }
 
-onMounted(async () => {
-  await load()
-  await nextTick()
-  initSortable()
-})
-onBeforeUnmount(() => sortable?.destroy())
+onMounted(load)
+onBeforeUnmount(destroySortables)
 </script>
 
 <template>
@@ -382,108 +281,57 @@ onBeforeUnmount(() => sortable?.destroy())
       </div>
     </div>
 
-    <div class="tabbar">
-      <div class="tabs">
-        <button
-          v-for="t in TABS"
-          :key="t.key"
-          type="button"
-          :class="{ active: activeType === t.key }"
-          @click="selectTab(t.key)"
-        >{{ t.label }}</button>
-      </div>
-      <IconBtn class="tab-add" icon="plus" title="추가" variant="primary" :disabled="atWalletLimit" @click="openCreate" />
+    <div class="wallet-head">
+      <IconBtn class="tab-add" icon="plus" title="계좌 추가" variant="primary" @click="openCreate" />
     </div>
 
-    <p v-if="atWalletLimit" class="msg wallet-limit">무료 회원은 종류별 계좌를 {{ FREE_WALLET_LIMIT }}개까지 등록할 수 있어요 · 유료는 무제한</p>
     <p v-if="error" class="msg error">{{ error }}</p>
     <p v-if="loading" class="msg">불러오는 중...</p>
 
-    <ul v-show="!loading && rows.length" ref="listEl" class="wallet-list">
-      <li v-for="w in rows" :key="w.id" :data-id="w.id" class="wallet-item">
-        <div class="wallet-row" @click="toggleExpand(w)">
-          <span class="drag-handle" title="드래그하여 순서 변경" @click.stop>≡</span>
-          <span class="chevron">{{ expandedId === w.id ? '▾' : '▸' }}</span>
-          <div class="info">
-            <div class="line1">
-              <span class="name">{{ w.name }}</span>
-              <span v-if="w.type === 'CARD'" class="badge">{{ cardTypeLabel(w.cardType) }}</span>
-            </div>
-            <span class="sub">
-              {{ w.issuer }}
-              <template v-if="(w.type === 'BANK' || w.type === 'MINUS') && w.accountNumber">
-                · {{ revealedAccts.has(w.id) ? w.accountNumber : maskAccount(w.accountNumber) }}
-                <button
-                  type="button" class="acct-eye"
-                  :title="revealedAccts.has(w.id) ? '가리기' : '전체 보기'"
-                  @click.stop="toggleReveal(w.id)"
-                >{{ revealedAccts.has(w.id) ? '🙈' : '👁' }}</button>
-              </template>
-              <template v-if="w.type === 'INVEST'"> · 투자금 {{ won(w.investedAmount) }}</template>
-              <template v-if="w.type === 'LOAN'">
-                <span v-if="w.loanAmount"> · 실행 {{ won(w.loanAmount) }}원</span>
-                <span v-if="w.loanRate"> · {{ w.loanRate }}%<span v-if="w.loanMethod"> / {{ loanMethodLabel(w.loanMethod) }}</span></span>
-              </template>
-            </span>
-          </div>
-          <div class="balance-wrap">
-            <div class="balance" :class="{ neg: w.balance < 0 }">{{ won(w.balance) }}</div>
-            <div
-              v-if="w.type === 'INVEST' && w.valuationGain != null"
-              class="gain" :class="w.valuationGain < 0 ? 'neg' : 'pos'"
-            >
-              {{ w.valuationGain >= 0 ? '+' : '' }}{{ won(w.valuationGain) }}<span v-if="returnPct(w) != null"> ({{ returnPct(w) }}%)</span>
-            </div>
-          </div>
-          <div class="actions" @click.stop>
-            <IconBtn icon="edit" title="수정" size="sm" @click="openEdit(w)" />
-            <IconBtn icon="trash" title="삭제" variant="danger" size="sm" @click="remove(w)" />
-          </div>
-        </div>
-
-        <!-- 드롭다운: 투자는 투자금·평가액 요약, 그 외는 계좌별 내역 -->
-        <div v-if="expandedId === w.id" class="entry-drop">
-          <div v-if="w.type === 'INVEST'" class="manual-note">
-            <div class="invest-figs">
-              <div class="fig"><span class="fig-k">투자금</span><span class="fig-v">{{ won(w.investedAmount) }}</span></div>
-              <div class="fig"><span class="fig-k">평가액</span><span class="fig-v">{{ won(w.balance) }}</span></div>
-              <div class="fig"><span class="fig-k">손익</span>
-                <span class="fig-v" :class="(w.valuationGain || 0) < 0 ? 'neg' : 'pos'">
-                  {{ (w.valuationGain || 0) >= 0 ? '+' : '' }}{{ won(w.valuationGain || 0) }}<span v-if="returnPct(w) != null"> ({{ returnPct(w) }}%)</span>
+    <template v-if="!loading && groups.length">
+      <section v-for="g in groups" :key="g.key" class="wallet-group">
+        <h3 class="wg-title">{{ g.label }}</h3>
+        <ul class="wallet-list wallet-group-list" :data-type="g.key">
+          <li v-for="w in g.wallets" :key="w.id" :data-id="w.id" class="wallet-item">
+            <div class="wallet-row" @click="goDetail(w)">
+              <span class="drag-handle" title="드래그하여 순서 변경" @click.stop>≡</span>
+              <div class="info">
+                <div class="line1">
+                  <span class="name">{{ w.name }}</span>
+                  <span v-if="w.type === 'CARD'" class="badge">{{ cardTypeLabel(w.cardType) }}</span>
+                </div>
+                <span class="sub">
+                  {{ w.issuer }}
+                  <template v-if="(w.type === 'BANK' || w.type === 'MINUS') && w.accountNumber">
+                    · {{ revealedAccts.has(w.id) ? w.accountNumber : maskAccount(w.accountNumber) }}
+                    <button
+                      type="button" class="acct-eye"
+                      :title="revealedAccts.has(w.id) ? '가리기' : '전체 보기'"
+                      @click.stop="toggleReveal(w.id)"
+                    >{{ revealedAccts.has(w.id) ? '🙈' : '👁' }}</button>
+                  </template>
+                  <template v-if="w.type === 'LOAN'">
+                    <span v-if="w.loanAmount"> · 실행 {{ won(w.loanAmount) }}원</span>
+                    <span v-if="w.loanRate"> · {{ w.loanRate }}%<span v-if="w.loanMethod"> / {{ loanMethodLabel(w.loanMethod) }}</span></span>
+                  </template>
                 </span>
               </div>
+              <div class="balance-wrap">
+                <div v-if="w.type === 'INVEST'" class="balance">투자금 {{ won(w.investedAmount) }}</div>
+                <div v-else class="balance" :class="{ neg: w.balance < 0 }">{{ won(w.balance) }}</div>
+              </div>
+              <div class="actions" @click.stop>
+                <IconBtn icon="edit" title="수정" size="sm" @click="openEdit(w)" />
+                <IconBtn icon="trash" title="삭제" variant="danger" size="sm" @click="remove(w)" />
+              </div>
+              <span class="go-chevron" aria-hidden="true">›</span>
             </div>
-            <p class="manual-sub">평가액을 갱신하려면 위 <b>수정</b>에서 ‘현재 평가액’을 바꾸세요.</p>
-          </div>
-          <template v-else>
-          <p v-if="loadingEntries" class="drop-msg">불러오는 중...</p>
-          <template v-else-if="(entriesByWallet[w.id] || []).length">
-            <!-- 월 네비게이션 + 그 달 합계 -->
-            <div class="month-nav">
-              <button type="button" class="mn-btn" :disabled="!canPrev(w)" aria-label="이전 달" @click="shiftMonth(w, -1)">◀</button>
-              <span class="mn-label">{{ ymLabel(entryMonth[w.id]) }}</span>
-              <button type="button" class="mn-btn" :disabled="!canNext(w)" aria-label="다음 달" @click="shiftMonth(w, 1)">▶</button>
-              <span class="mn-sum" :class="monthSum(w) < 0 ? 'neg' : 'pos'">
-                합계 {{ monthSum(w) >= 0 ? '+' : '' }}{{ won(monthSum(w)) }}
-              </span>
-            </div>
-            <ul v-if="monthEntries(w).length" class="drop-list">
-              <li v-for="e in monthEntries(w)" :key="e.id" class="drop-row">
-                <span class="d-date">{{ entryDate(e.entryDate) }}</span>
-                <span class="d-desc">{{ entryDesc(e, w) }}</span>
-                <span class="d-amount" :class="effectAmount(e, w.id) < 0 ? 'neg' : 'pos'">
-                  {{ effectAmount(e, w.id) >= 0 ? '+' : '' }}{{ won(effectAmount(e, w.id)) }}
-                </span>
-              </li>
-            </ul>
-            <p v-else class="drop-msg">이 달 내역이 없습니다.</p>
-          </template>
-          <p v-else class="drop-msg">연관 내역이 없습니다.</p>
-          </template>
-        </div>
-      </li>
-    </ul>
-    <div v-if="!loading && !rows.length" class="empty-state">
+          </li>
+        </ul>
+      </section>
+    </template>
+
+    <div v-else-if="!loading" class="empty-state">
       <p class="empty-emoji">🏦</p>
       <p class="empty-title">아직 등록된 계좌가 없어요</p>
       <p class="empty-desc">은행·카드·현금·대출·마이너스통장·투자를 추가해보세요.</p>
@@ -620,42 +468,30 @@ button.primary {
 .nw-card .value.debt {
   color: #c0392b;
 }
-.tabbar {
+.wallet-head {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  border-bottom: 1px solid var(--color-border);
-  margin-bottom: 1rem;
-}
-.tabs {
-  display: flex;
-  gap: 0.25rem;
-  flex: 1;
-  min-width: 0;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none; /* 한 줄 유지(넘치면 가로 스크롤), 스크롤바 숨김 */
-}
-.tabs::-webkit-scrollbar {
-  display: none;
+  justify-content: flex-end;
+  margin-bottom: 0.75rem;
 }
 .tab-add {
   flex-shrink: 0;
 }
-.tabs button {
-  border: 0;
-  border-bottom: 2px solid transparent;
-  border-radius: 0;
-  background: transparent;
-  padding: 0.6rem 0.7rem;
-  white-space: nowrap; /* 버튼 안 글자가 줄바꿈되지 않도록(두 줄 방지) */
-  flex-shrink: 0;
+.wallet-group {
+  margin-bottom: 1.4rem;
 }
-.tabs button.active {
-  border-bottom-color: hsla(160, 100%, 37%, 1);
-  color: hsla(160, 100%, 37%, 1);
-  font-weight: 600;
+.wg-title {
+  font-size: 0.9rem;
+  font-weight: 700;
+  opacity: 0.7;
+  margin: 0 0 0.35rem;
+  padding-bottom: 0.3rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.go-chevron {
+  flex: 0 0 auto;
+  opacity: 0.35;
+  font-size: 1.1rem;
+  padding-left: 0.15rem;
 }
 .wallet-list {
   list-style: none;