From 253e88e0fad09c4bc7fc680a433e7d174ce95f15 Mon Sep 17 00:00:00 2001
From: sb <sb@MacBook-Pro.local>
Date: Mon, 6 Jul 2026 01:40:41 +0900
Subject: [PATCH] =?UTF-8?q?feat(wallet):=20=EB=AC=B4=EB=A3=8C=20=ED=9A=8C?=
 =?UTF-8?q?=EC=9B=90=20=EC=A2=85=EB=A5=98=EB=B3=84=202=EA=B0=9C=20?=
 =?UTF-8?q?=ED=95=9C=EB=8F=84=20=EC=95=88=EB=82=B4=20=E2=80=94=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B2=84=ED=8A=BC=20=EB=B9=84=ED=99=9C=EC=84=B1?=
 =?UTF-8?q?=C2=B7=ED=9E=8C=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

한도 도달 시 추가 버튼 비활성 + '무료 종류별 2개·유료 무제한' 안내, openCreate 가드.
백엔드 400 메시지는 폼 에러로 폴백 노출.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/views/account/AccountWalletView.vue | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/views/account/AccountWalletView.vue b/src/views/account/AccountWalletView.vue
index 1a84642..960987e 100644
--- a/src/views/account/AccountWalletView.vue
+++ b/src/views/account/AccountWalletView.vue
@@ -1,12 +1,14 @@
 <script setup>
-import { onBeforeUnmount, onMounted, reactive, ref, watch, nextTick } from 'vue'
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch, nextTick } from 'vue'
 import Sortable from 'sortablejs'
 import { accountApi } from '@/api/accountApi'
 import { useDialog } from '@/composables/dialog'
+import { useAuthStore } from '@/stores/auth'
 import IconBtn from '@/components/ui/IconBtn.vue'
 import AppModal from '@/components/ui/AppModal.vue'
 
 const dialog = useDialog()
+const auth = useAuthStore()
 
 const TABS = [
   { key: 'BANK', label: '은행계좌' },
@@ -32,6 +34,13 @@ 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,
+)
 
 const formOpen = ref(false)
 const editId = ref(null)
@@ -241,6 +250,13 @@ async function load() {
 }
 
 function openCreate() {
+  if (atWalletLimit.value) {
+    dialog.alert(
+      `무료 회원은 종류별 계좌를 ${FREE_WALLET_LIMIT}개까지 등록할 수 있어요. 유료로 업그레이드하면 무제한이에요.`,
+      { title: '등록 한도' },
+    )
+    return
+  }
   editId.value = null
   Object.assign(form, {
     type: activeType.value,
@@ -376,9 +392,10 @@ onBeforeUnmount(() => sortable?.destroy())
           @click="selectTab(t.key)"
         >{{ t.label }}</button>
       </div>
-      <IconBtn class="tab-add" icon="plus" title="추가" variant="primary" @click="openCreate" />
+      <IconBtn class="tab-add" icon="plus" title="추가" variant="primary" :disabled="atWalletLimit" @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>
 
@@ -905,6 +922,10 @@ button.primary {
 .msg.error {
   color: #c0392b;
 }
+.msg.wallet-limit {
+  color: #b8860b;
+  font-size: 0.85rem;
+}
 
 .wallet-form {
   display: flex;