feat: 멤버십(무료/유료) 게이팅 — 프론트
CI / build (push) Failing after 15m5s

- auth 스토어 isPremium/isAdmin 추가 (plan===PREMIUM 또는 관리자)
- 사이드바: 통계·고정지출·예산·태그 메뉴에 무료 회원 잠금 배지(🔒)
- 라우트 가드: 유료 전용 화면(requiresPremium) → 무료 회원은 /upgrade
- UpgradeView: 무료/유료 기능 비교 + 업그레이드 안내
- http 인터셉터: 403 PREMIUM_REQUIRED → premium:required 이벤트 → 업그레이드 화면
- 무료 화면의 유료 API 호출 차단(홈 예산·내역 태그·OCR·카드알림 게이팅)
- 회원관리: 멤버십 컬럼 + 무료/유료 토글(관리자)
- 설정: 데이터 백업/복구 유료 게이팅, 계정정보에 멤버십 표시

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ByungCheol
2026-06-28 11:02:44 +09:00
parent 2755d118c2
commit 9861ba90ae
12 changed files with 309 additions and 32 deletions
+8 -4
View File
@@ -113,10 +113,11 @@ async function load() {
loading.value = true
error.value = null
try {
// 예산은 유료 전용 — 무료 회원은 호출하지 않음(403/업그레이드 리다이렉트 방지)
const [sum, nw, status, list] = await Promise.all([
accountApi.summary({ year, month }),
accountApi.netWorth(),
accountApi.budgetStatus({ year, month }),
auth.isPremium ? accountApi.budgetStatus({ year, month }) : Promise.resolve([]),
accountApi.list({ year, month }),
])
summary.value = sum
@@ -204,12 +205,14 @@ onMounted(load)
</div>
</div>
<!-- 예산 대비 지출 -->
<!-- 예산 대비 지출 (유료 전용 무료 회원은 업그레이드 안내) -->
<div class="card budget-card">
<div class="card-head">
<span class="card-title">{{ month }} 예산 대비 지출</span>
<RouterLink to="/account/budget" class="more">예산 </RouterLink>
<RouterLink :to="auth.isPremium ? '/account/budget' : '/upgrade'" class="more">예산 </RouterLink>
</div>
<RouterLink v-if="!auth.isPremium" to="/upgrade" class="budget-empty">👑 예산 관리는 유료 멤버십 기능이에요 </RouterLink>
<template v-else>
<template v-if="budgetTotal > 0">
<div class="budget-bar">
<div
@@ -225,7 +228,8 @@ onMounted(load)
</span>
</div>
</template>
<RouterLink v-else to="/account/budget" class="budget-empty">예산을 설정하면 지출 진행률을 있어요 </RouterLink>
<RouterLink v-else to="/account/budget" class="budget-empty">예산을 설정하면 지출 진행률을 있어요 </RouterLink>
</template>
</div>
<!-- 일별 수입/지출 캘린더 -->