feat: 둘러보기(데모)를 실제 화면 그대로 — 데모 모드 + API 더미 응답

- src/demo: demo.on 플래그 + DTO 형태 더미데이터 + mock API(읽기 더미/쓰기 차단)
- accountApi: Proxy 로 데모 시 읽기→더미, 쓰기→안내. 실제 뷰 그대로 렌더
- App: authed=인증||데모 → 실제 사이드바/셸 표시 + 데모 배너(로그인/나가기)
- 라우터: 데모 허용(가계부/고정/계좌/분류) 외 보호화면은 DemoLockedView(로그인 유도)
- 사이드바: 데모 시 잠금(🔒) 배지, 메뉴는 showMenu(인증||데모)
- 로그인/로그아웃 시 데모 자동 해제, 랜딩 '둘러보기'→enterDemo
- 기존 독립 DemoView 제거

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ByungCheol
2026-06-28 07:49:37 +09:00
parent 80e1faec09
commit 4ffc01f484
10 changed files with 331 additions and 483 deletions
+17 -4
View File
@@ -2,6 +2,10 @@ import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router
import HomeView from '../views/HomeView.vue'
import { useAuthStore } from '@/stores/auth'
import { useUiStore } from '@/stores/ui'
import { demo } from '@/demo'
// 둘러보기(데모)에서 더미로 진입 가능한 화면
const DEMO_ALLOWED = new Set(['account-entries', 'account-recurrings', 'account-wallets', 'account-categories'])
// Electron(데스크톱)은 file:// 로 로드 → 해시 히스토리라야 새로고침/딥링크가 안전
const isDesktop = typeof navigator !== 'undefined' && /electron/i.test(navigator.userAgent)
@@ -15,10 +19,10 @@ const router = createRouter({
component: HomeView,
},
{
// 로그인 없이 둘러보기 (더미 데이터) — 공개
path: '/demo',
name: 'demo',
component: () => import('../views/DemoView.vue'),
// 둘러보기(데모)에서 미지원(로그인 필요) 화면 진입 시 — 잠금 안내 (공개)
path: '/demo-locked',
name: 'demo-locked',
component: () => import('../views/DemoLockedView.vue'),
},
{
path: '/users',
@@ -138,6 +142,15 @@ const router = createRouter({
// 전역 네비게이션 가드
router.beforeEach((to, from) => {
const auth = useAuthStore()
// 둘러보기(데모): 지원 화면은 더미로 진입, 그 외 보호 화면은 잠금 안내로
if (demo.on && !auth.isAuthenticated) {
if (to.name === 'home') return { name: 'account-entries' }
if (to.meta.requiresAuth) {
if (DEMO_ALLOWED.has(to.name)) return true
return { name: 'demo-locked', query: { from: to.name || '' } }
}
return true // 공개 라우트(잠금 안내 등)
}
// 인증이 필요한 페이지인데 미로그인 → 로그인 팝업 오픈 (원래 목적지 보존), 이동은 취소/홈
if (to.meta.requiresAuth && !auth.isAuthenticated) {
const ui = useUiStore()