feat(wallet): 무료 회원 종류별 2개 한도 안내 — 추가 버튼 비활성·힌트
Deploy / deploy (push) Failing after 14m9s

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

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
sb
2026-07-06 01:40:41 +09:00
parent 296ae594f8
commit 253e88e0fa
+23 -2
View File
@@ -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;