From 80e1faec09a06615319a33eadf287331b297afbe Mon Sep 17 00:00:00 2001
From: ByungCheol <kenneth73510@nurier.co.kr>
Date: Sun, 28 Jun 2026 00:52:02 +0900
Subject: [PATCH 1/3] =?UTF-8?q?docs:=20=EB=A9=A4=EB=B2=84=EC=8B=AD(?=
 =?UTF-8?q?=EB=AC=B4=EB=A3=8C/=EC=9C=A0=EB=A3=8C)=20=EB=A9=94=EB=89=B4?=
 =?UTF-8?q?=C2=B7=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=EB=B6=84=20=EC=84=A4?=
 =?UTF-8?q?=EA=B3=84=20(=EC=B6=94=ED=9B=84=20=EA=B5=AC=ED=98=84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 계좌 개수 제한 없음, 핵심 기록 무료
- 유료: OCR·카드알림 자동인식·통계·예산·고정지출·투자·태그·백업

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docs/plan-membership-tiers.md | 51 +++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 docs/plan-membership-tiers.md

diff --git a/docs/plan-membership-tiers.md b/docs/plan-membership-tiers.md
new file mode 100644
index 0000000..a7da1ba
--- /dev/null
+++ b/docs/plan-membership-tiers.md
@@ -0,0 +1,51 @@
+# 멤버십(무료/유료) 메뉴·기능 구분 — 설계 (추후 구현)
+
+> 상태: **설계만** (미구현). 결제·게이팅은 추후 작업.
+> 방향: **핵심 기록은 무료로 개방**(진입장벽 ↓), **과금 기능·자동화·고급 분석·무제한·백업은 유료**.
+> 계좌 개수 제한은 **두지 않음**(1~소수 제한은 핵심 기능을 막아 거부감 → 제외).
+
+---
+
+## 1. 무료 / 유료 구분
+
+| 메뉴 / 기능 | 무료 | 유료(프리미엄) | 비고 |
+|---|:--:|:--:|---|
+| **가계부 내역**(수입·지출 기록) | ✅ | ✅ | 핵심 — 무료 개방 |
+| **계좌 관리**(은행·현금·카드·대출) | ✅ **무제한** | ✅ 무제한 | 개수 제한 없음 |
+| 자주 쓰는 내역(빠른 등록) | ✅ | ✅ | 편의, 무료 |
+| 월별 요약(수입/지출/잔액) | ✅ | ✅ | 기본 요약은 무료 |
+| 분류 관리 | ✅ 기본+소수 | ✅ 무제한·소분류(2단계) | 무료는 기본 분류 위주 |
+| 태그 관리 | — | ✅ | |
+| **통계**(순자산 추이·예상 지출·지난달 대비·분류 분석) | — | ✅ | 고급 분석은 유료 |
+| 예산 설정 | — | ✅ | |
+| 고정 지출(자동 생성·확인) | — | ✅ | 자동화 = 유료 |
+| **영수증 OCR** | — | ✅ | **Google Vision 과금** → 유료 필수 |
+| **카드 결제 알림 자동인식** | — | ✅ | 강력한 유료 훅(편의·자동화) |
+| 투자/자산(평가액) 관리 | — | ✅ | |
+| 데이터 백업/복구(엑셀·JSON) | — | ✅ | 추후 백업 기능과 연계 |
+| 게시판(커뮤니티/짠테크/재테크 팁) | ✅ | ✅ | 커뮤니티는 전체 개방 |
+| 다크모드·테마 | ✅ | ✅ | 기본 제공 |
+| 광고 | (도입 시) 표시 | 제거 | 광고 모델은 미정 |
+
+## 2. 구분 기준
+- **무료** = 기본 기록 + (무제한)계좌 + 기본 분류 + 월 요약 → "충분히 써볼 만한" 수준
+- **유료** = ① 과금 기능(OCR) · ② 자동화(카드 알림 인식 · 고정지출) · ③ 고급 분석(통계 전체 · 예산) · ④ 무제한(태그/소분류) · ⑤ 백업/복구
+- 원칙: **무료를 일부러 불편하게 만들지 않고, 유료에 "확실히 편한 것"을 몰아준다**(전환율 우선).
+
+## 3. 구현 시 필요한 것 (추후)
+- **데이터**: `member.plan`(`FREE`/`PREMIUM`) + `plan_expires_at`(만료일) 컬럼.
+- **게이팅(이중)**:
+  - 프론트: 유료 메뉴에 **잠금 배지 + 업그레이드 유도**(데모의 잠금 화면 재사용 가능), 비유료는 진입 차단.
+  - 백엔드: 해당 API에 **plan 권한 체크**(프론트 우회 방지). OCR·알림 인식·통계·예산·고정지출·투자·백업 엔드포인트.
+- **결제 연동**: 안드로이드 인앱결제(Google Play Billing) / 웹·PC는 PG. 정기결제 시 만료일 갱신.
+- **기존 데이터 보호**: 유료→무료 강등(만료) 시 데이터는 보존하되 **유료 메뉴만 잠금**(읽기 정도는 허용 검토).
+
+## 4. 추후 결정 필요(미정)
+- 가격·주기(월/연), 무료체험 기간.
+- 광고 모델 도입 여부(무료=광고 / 유료=제거).
+- 무료 "기본 분류" 범위(개수·기본 템플릿만 허용 여부).
+- 강등 시 잠금 정책(완전 차단 vs 읽기 허용).
+
+---
+
+*참고: 데모(`/demo`)의 잠금 안내 화면을 유료 게이팅 UI 의 기반으로 재사용할 수 있음.*

From 4ffc01f4848879933bbb646616a0d74a8dabe6ad Mon Sep 17 00:00:00 2001
From: ByungCheol <kenneth73510@nurier.co.kr>
Date: Sun, 28 Jun 2026 07:49:37 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EB=91=98=EB=9F=AC=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0(=EB=8D=B0=EB=AA=A8)=EB=A5=BC=20=EC=8B=A4=EC=A0=9C=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EA=B7=B8=EB=8C=80=EB=A1=9C=20=E2=80=94=20?=
 =?UTF-8?q?=EB=8D=B0=EB=AA=A8=20=EB=AA=A8=EB=93=9C=20+=20API=20=EB=8D=94?=
 =?UTF-8?q?=EB=AF=B8=20=EC=9D=91=EB=8B=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/App.vue                          |  61 +++-
 src/api/accountApi.js                |  38 ++-
 src/components/layout/AppHeader.vue  |   2 +-
 src/components/layout/AppSidebar.vue |  15 +-
 src/demo/index.js                    | 129 ++++++++
 src/router/index.js                  |  21 +-
 src/stores/auth.js                   |   4 +
 src/views/DemoLockedView.vue         |  66 ++++
 src/views/DemoView.vue               | 470 ---------------------------
 src/views/HomeView.vue               |   8 +-
 10 files changed, 331 insertions(+), 483 deletions(-)
 create mode 100644 src/demo/index.js
 create mode 100644 src/views/DemoLockedView.vue
 delete mode 100644 src/views/DemoView.vue

diff --git a/src/App.vue b/src/App.vue
index c06bfe2..1d910db 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { onMounted, onUnmounted, watch } from 'vue'
-import { RouterView, useRoute } from 'vue-router'
+import { computed, onMounted, onUnmounted, watch } from 'vue'
+import { RouterView, useRoute, useRouter } from 'vue-router'
 import AppHeader from '@/components/layout/AppHeader.vue'
 import AppSidebar from '@/components/layout/AppSidebar.vue'
 import AppBottomNav from '@/components/layout/AppBottomNav.vue'
@@ -11,10 +11,20 @@ import AppDialog from '@/components/ui/AppDialog.vue'
 import { Capacitor } from '@capacitor/core'
 import { useAuthStore } from '@/stores/auth'
 import { useUiStore } from '@/stores/ui'
+import { demo, exitDemo } from '@/demo'
 
 const auth = useAuthStore()
 const ui = useUiStore()
 const route = useRoute()
+const router = useRouter()
+
+// 로그인 또는 둘러보기(데모) 상태면 사이드바/전체 셸 표시
+const authed = computed(() => auth.isAuthenticated || demo.on)
+
+function leaveDemo() {
+  exitDemo()
+  router.push('/')
+}
 
 // 앱(Capacitor 네이티브) 또는 데스크톱(Electron) 클라이언트에서 전체 이용.
 // 웹(브라우저)은 안내 페이지만 노출. 개발 모드(npm run dev)는 예외로 전체 앱 표시.
@@ -43,14 +53,21 @@ watch(() => route.fullPath, () => ui.closeSidebar())
 
   <!-- 앱(Capacitor): 전체 기능 -->
   <template v-else>
-    <div class="layout" :class="{ 'sidebar-open': ui.sidebarOpen, 'no-sidebar': !auth.isAuthenticated }">
+    <div class="layout" :class="{ 'sidebar-open': ui.sidebarOpen, 'no-sidebar': !authed }">
       <AppHeader class="layout-top" />
-      <!-- 로그인 전에는 메뉴가 없어 사이드바를 숨김(빈 칸 제거·중앙 정렬) -->
-      <template v-if="auth.isAuthenticated">
+      <!-- 로그인/둘러보기 전에는 메뉴가 없어 사이드바를 숨김(빈 칸 제거·중앙 정렬) -->
+      <template v-if="authed">
         <AppSidebar class="layout-left" />
         <div class="sidebar-backdrop" @click="ui.closeSidebar()"></div>
       </template>
       <main class="layout-body">
+        <div v-if="demo.on" class="demo-bar">
+          <span>👀 <b>둘러보기 모드</b> · 샘플 데이터입니다.</span>
+          <span class="demo-actions">
+            <button type="button" class="db-login" @click="ui.openLogin('/account')">로그인</button>
+            <button type="button" class="db-exit" @click="leaveDemo">나가기</button>
+          </span>
+        </div>
         <RouterView />
       </main>
       <AppBottomNav class="layout-bottom" />
@@ -84,6 +101,40 @@ watch(() => route.fullPath, () => ui.closeSidebar())
   grid-area: left;
 }
 
+.demo-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+  padding: 0.55rem 0.9rem;
+  border: 1px solid hsla(160, 100%, 37%, 0.4);
+  border-radius: 8px;
+  background: hsla(160, 100%, 37%, 0.08);
+  font-size: 0.88rem;
+}
+.demo-actions {
+  display: flex;
+  gap: 0.4rem;
+}
+.demo-bar button {
+  padding: 0.35rem 0.8rem;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+.db-login {
+  border: 1px solid hsla(160, 100%, 37%, 1);
+  background: hsla(160, 100%, 37%, 1);
+  color: #fff;
+}
+.db-exit {
+  border: 1px solid var(--color-border);
+  background: var(--color-background);
+  color: var(--color-text);
+}
 .layout-body {
   grid-area: body;
   padding: 1.5rem 2rem;
diff --git a/src/api/accountApi.js b/src/api/accountApi.js
index 26b2123..f0f4c72 100644
--- a/src/api/accountApi.js
+++ b/src/api/accountApi.js
@@ -1,7 +1,8 @@
 import http from './http'
+import { demo, demoApi } from '@/demo'
 
 // 백엔드 /api/account 엔드포인트와 매핑 (본인 데이터만)
-export const accountApi = {
+const realApi = {
   list({ year, month, type, category, walletId, keyword, tagId } = {}) {
     return http.get('/account/entries', { params: { year, month, type, category, walletId, keyword, tagId } })
   },
@@ -198,3 +199,38 @@ export const accountApi = {
     })
   },
 }
+
+// ===== 둘러보기(데모) 모드 =====
+// demo.on 이면 읽기는 더미 데이터, 쓰기는 차단(안내 메시지)으로 응답한다.
+const DEMO_READS = {
+  list: demoApi.list,
+  summary: demoApi.summary,
+  wallets: demoApi.wallets,
+  netWorth: demoApi.netWorth,
+  categories: demoApi.categories,
+  recurrings: demoApi.recurrings,
+  quickEntries: demoApi.quickEntries,
+  pendingCount: demoApi.pendingCount,
+  tags: demoApi.tags,
+  walletEntries: demoApi.walletEntries,
+}
+const DEMO_WRITES = new Set([
+  'create', 'update', 'remove', 'parseText', 'createQuickEntry', 'removeQuickEntry', 'repayment',
+  'createRecurring', 'updateRecurring', 'removeRecurring', 'runRecurrings',
+  'createWallet', 'updateWallet', 'removeWallet', 'reorderWallets',
+  'createCategory', 'updateCategory', 'removeCategory', 'reorderCategories', 'importCategories',
+  'createTag', 'updateTag', 'removeTag', 'reorderTags', 'confirmEntry', 'ocrReceipt',
+  'createBudget', 'updateBudget', 'removeBudget', 'setExpectedIncome',
+  'createHolding', 'updateHolding', 'removeHolding', 'addTrade', 'updateTrade', 'removeTrade',
+  'refreshPrices', 'refreshAllPrices',
+])
+
+export const accountApi = new Proxy(realApi, {
+  get(target, prop) {
+    if (demo.on) {
+      if (DEMO_READS[prop]) return DEMO_READS[prop]
+      if (DEMO_WRITES.has(prop)) return () => demoApi.block()
+    }
+    return target[prop]
+  },
+})
diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue
index eec8cc6..3bde8e7 100644
--- a/src/components/layout/AppHeader.vue
+++ b/src/components/layout/AppHeader.vue
@@ -14,7 +14,7 @@ const route = useRoute()
 // 라우트별 헤더 타이틀(현재 화면 이름)
 const TITLES = {
   home: '돈돼지 가계부',
-  demo: '둘러보기',
+  'demo-locked': '둘러보기',
   'account-entries': '가계부 내역',
   'account-stats': '통계',
   'account-recurrings': '고정 지출',
diff --git a/src/components/layout/AppSidebar.vue b/src/components/layout/AppSidebar.vue
index cd1b782..1f8fc72 100644
--- a/src/components/layout/AppSidebar.vue
+++ b/src/components/layout/AppSidebar.vue
@@ -1,11 +1,15 @@
 <script setup>
+import { computed } from 'vue'
 import { RouterLink } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useUiStore } from '@/stores/ui'
 import { BOARDS } from '@/constants/boards'
+import { demo } from '@/demo'
 
 const auth = useAuthStore()
 const ui = useUiStore()
+// 로그인 또는 둘러보기(데모)면 메뉴 노출. 데모에선 잠금 배지를 함께 표시.
+const showMenu = computed(() => auth.isAuthenticated || demo.on)
 
 // 메뉴 아이콘 (lucide 스타일 인라인 SVG path — 하단 내비와 동일 톤). 값은 정적/신뢰 마크업.
 const icons = {
@@ -33,7 +37,7 @@ const icons = {
     </div>
     <nav class="menu">
       <!-- 가계부 영역 (홈은 하단 내비게이션으로 이동) -->
-      <template v-if="auth.isAuthenticated">
+      <template v-if="showMenu">
         <RouterLink to="/account/entries" class="menu-item">
           <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.entries" />
           <span>가계부 내역</span>
@@ -41,6 +45,7 @@ const icons = {
         <RouterLink to="/account/stats" class="menu-item">
           <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.stats" />
           <span>통계</span>
+          <span v-if="demo.on" class="lock-badge">🔒</span>
         </RouterLink>
         <RouterLink to="/account/recurrings" class="menu-item">
           <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.recurrings" />
@@ -57,10 +62,12 @@ const icons = {
         <RouterLink to="/account/budget" class="menu-item">
           <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.budget" />
           <span>예산 설정</span>
+          <span v-if="demo.on" class="lock-badge">🔒</span>
         </RouterLink>
         <RouterLink to="/account/tags" class="menu-item">
           <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.tags" />
           <span>태그 관리</span>
+          <span v-if="demo.on" class="lock-badge">🔒</span>
         </RouterLink>
 
         <!-- 게시판 영역 -->
@@ -73,6 +80,7 @@ const icons = {
         >
           <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.board" />
           <span>{{ b.label }}</span>
+          <span v-if="demo.on" class="lock-badge">🔒</span>
         </RouterLink>
       </template>
 
@@ -169,6 +177,11 @@ const icons = {
   flex: none;
   opacity: 0.8;
 }
+.lock-badge {
+  margin-left: auto;
+  font-size: 0.72rem;
+  opacity: 0.55;
+}
 .menu-item.router-link-exact-active .menu-icon {
   opacity: 1;
 }
diff --git a/src/demo/index.js b/src/demo/index.js
new file mode 100644
index 0000000..b55c9b0
--- /dev/null
+++ b/src/demo/index.js
@@ -0,0 +1,129 @@
+// 둘러보기(데모) 모드 — 실제 화면 컴포넌트를 그대로 쓰되 API 만 더미로 응답한다.
+// demo.on 이 true 면 accountApi 의 읽기는 아래 더미를, 쓰기는 block()(안내 메시지)으로 응답.
+import { reactive } from 'vue'
+
+export const demo = reactive({ on: false })
+
+export function enterDemo() {
+  demo.on = true
+}
+export function exitDemo() {
+  demo.on = false
+}
+
+// ===== 더미 데이터 (백엔드 응답 DTO 형태와 동일) =====
+const WALLETS = [
+  { id: 1, type: 'BANK', name: '신한 주거래', issuer: '신한', accountNumber: null, openingBalance: 0, balance: 2540000, manualValuation: false },
+  { id: 2, type: 'BANK', name: '주택청약', issuer: '국민', accountNumber: null, openingBalance: 0, balance: 5000000, manualValuation: false },
+  { id: 3, type: 'CASH', name: '현금', openingBalance: 0, balance: 120000, manualValuation: false },
+  { id: 4, type: 'CARD', name: '삼성카드', issuer: '삼성', cardType: 'CREDIT', openingBalance: 0, balance: -340000, manualValuation: false },
+  {
+    id: 5, type: 'INVEST', name: '연금저축', manualValuation: true,
+    investedAmount: 7000000, currentValue: 8200000, balance: 8200000,
+    valuationGain: 1200000, deposit: 0, stockValue: 8200000,
+  },
+]
+
+const CATEGORIES = [
+  // 지출 대분류/소분류
+  { id: 10, type: 'EXPENSE', name: '식비', parentId: null },
+  { id: 11, type: 'EXPENSE', name: '점심', parentId: 10 },
+  { id: 12, type: 'EXPENSE', name: '저녁', parentId: 10 },
+  { id: 13, type: 'EXPENSE', name: '카페/간식', parentId: 10 },
+  { id: 20, type: 'EXPENSE', name: '교통', parentId: null },
+  { id: 21, type: 'EXPENSE', name: '대중교통', parentId: 20 },
+  { id: 22, type: 'EXPENSE', name: '택시', parentId: 20 },
+  { id: 30, type: 'EXPENSE', name: '주거/통신', parentId: null },
+  { id: 31, type: 'EXPENSE', name: '월세', parentId: 30 },
+  { id: 32, type: 'EXPENSE', name: '통신비', parentId: 30 },
+  { id: 40, type: 'EXPENSE', name: '문화/여가', parentId: null },
+  { id: 41, type: 'EXPENSE', name: 'OTT/구독', parentId: 40 },
+  { id: 50, type: 'EXPENSE', name: '쇼핑', parentId: null },
+  // 수입
+  { id: 60, type: 'INCOME', name: '급여', parentId: null },
+  { id: 61, type: 'INCOME', name: '용돈', parentId: null },
+]
+
+// 이번 달(현 시점) 기준 샘플 내역
+function ymd(day) {
+  const now = new Date()
+  const m = String(now.getMonth() + 1).padStart(2, '0')
+  return `${now.getFullYear()}-${m}-${String(day).padStart(2, '0')}`
+}
+function E(id, day, type, category, amount, memo, walletId, walletName, opt = {}) {
+  return {
+    id, entryDate: ymd(day), type, category, amount, memo,
+    walletId, walletName, toWalletId: null, toWalletName: null,
+    installmentMonths: null, pending: !!opt.pending, tags: opt.tags || [],
+  }
+}
+const ENTRIES = [
+  E(101, 27, 'EXPENSE', '점심', 9000, '김밥천국', 4, '삼성카드'),
+  E(102, 27, 'EXPENSE', '카페/간식', 5300, '스타벅스', 4, '삼성카드'),
+  E(103, 27, 'EXPENSE', '대중교통', 2800, '지하철', 3, '현금'),
+  E(104, 27, 'EXPENSE', '쇼핑', 25200, '다이소', 4, '삼성카드', { pending: true }),
+  E(105, 25, 'INCOME', '급여', 4600000, '6월 급여', 1, '신한 주거래'),
+  E(106, 25, 'EXPENSE', '통신비', 45300, '휴대폰 요금', 1, '신한 주거래'),
+  E(107, 23, 'EXPENSE', 'OTT/구독', 17000, '넷플릭스', 4, '삼성카드', { tags: ['구독'] }),
+  E(108, 23, 'EXPENSE', '저녁', 23000, '배달', 4, '삼성카드'),
+  E(109, 20, 'EXPENSE', '쇼핑', 285000, '마트 장보기', 4, '삼성카드'),
+  E(110, 18, 'EXPENSE', '저녁', 62000, '친구 외식', 4, '삼성카드', { tags: ['데이트'] }),
+  E(111, 15, 'EXPENSE', '택시', 28000, '심야 택시', 4, '삼성카드'),
+  E(112, 12, 'EXPENSE', '쇼핑', 320000, '의류 구매', 4, '삼성카드'),
+  E(113, 8, 'EXPENSE', '대중교통', 55000, '교통카드 충전', 3, '현금'),
+  E(114, 5, 'EXPENSE', '카페/간식', 18500, '베이커리', 4, '삼성카드'),
+  E(115, 1, 'EXPENSE', '월세', 600000, '6월 월세', 1, '신한 주거래'),
+]
+
+const RECURRINGS = [
+  { id: 201, title: '월세', type: 'EXPENSE', amount: 600000, category: '월세', memo: null, walletId: 1, walletName: '신한 주거래', toWalletId: null, toWalletName: null, frequency: 'MONTHLY', dayOfMonth: 1, dayOfWeek: null, monthOfYear: null, startDate: ymd(1), endDate: null, lastRunDate: null, nextDate: ymd(1), active: true },
+  { id: 202, title: '통신비', type: 'EXPENSE', amount: 45300, category: '통신비', memo: null, walletId: 1, walletName: '신한 주거래', toWalletId: null, toWalletName: null, frequency: 'MONTHLY', dayOfMonth: 15, dayOfWeek: null, monthOfYear: null, startDate: ymd(15), endDate: null, lastRunDate: null, nextDate: ymd(15), active: true },
+  { id: 203, title: '넷플릭스', type: 'EXPENSE', amount: 17000, category: 'OTT/구독', memo: null, walletId: 4, walletName: '삼성카드', toWalletId: null, toWalletName: null, frequency: 'MONTHLY', dayOfMonth: 23, dayOfWeek: null, monthOfYear: null, startDate: ymd(23), endDate: null, lastRunDate: null, nextDate: ymd(23), active: true },
+  { id: 204, title: '급여', type: 'INCOME', amount: 4600000, category: '급여', memo: null, walletId: 1, walletName: '신한 주거래', toWalletId: null, toWalletName: null, frequency: 'MONTHLY', dayOfMonth: 25, dayOfWeek: null, monthOfYear: null, startDate: ymd(25), endDate: null, lastRunDate: null, nextDate: ymd(25), active: true },
+]
+
+const QUICK = [
+  { id: 301, label: '점심', type: 'EXPENSE', category: '점심', amount: 9000, memo: '점심', walletId: 4, walletName: '삼성카드' },
+  { id: 302, label: '커피', type: 'EXPENSE', category: '카페/간식', amount: 5300, memo: '커피', walletId: 4, walletName: '삼성카드' },
+  { id: 303, label: '대중교통', type: 'EXPENSE', category: '대중교통', amount: 2800, memo: '교통', walletId: 3, walletName: '현금' },
+]
+
+const TAGS = [
+  { id: 401, name: '구독' },
+  { id: 402, name: '데이트' },
+  { id: 403, name: '경조사' },
+]
+
+// 요약은 내역에서 계산해 일관성 보장
+const SUMMARY = (() => {
+  let income = 0, expense = 0
+  for (const e of ENTRIES) {
+    if (e.type === 'INCOME') income += e.amount
+    else if (e.type === 'EXPENSE') expense += e.amount
+  }
+  return { totalIncome: income, totalExpense: expense, balance: income - expense }
+})()
+const NETWORTH = { totalAssets: 15860000, totalLiabilities: 340000, netWorth: 15520000 }
+
+function ok(data) {
+  // 깊은 복제로 화면에서 수정해도 원본 더미는 보존
+  return Promise.resolve(JSON.parse(JSON.stringify(data)))
+}
+function block() {
+  return Promise.reject({ response: { data: { message: '둘러보기 모드에서는 저장되지 않습니다. 로그인 후 이용해 주세요.' } } })
+}
+
+// 읽기 응답 / 쓰기 차단
+export const demoApi = {
+  list: () => ok(ENTRIES),
+  summary: () => ok(SUMMARY),
+  wallets: () => ok(WALLETS),
+  netWorth: () => ok(NETWORTH),
+  categories: () => ok(CATEGORIES),
+  recurrings: () => ok(RECURRINGS),
+  quickEntries: () => ok(QUICK),
+  pendingCount: () => ok({ count: 1 }),
+  tags: () => ok(TAGS),
+  walletEntries: () => ok([]),
+  block,
+}
diff --git a/src/router/index.js b/src/router/index.js
index fda3657..36f10f0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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()
diff --git a/src/stores/auth.js b/src/stores/auth.js
index 9212746..6656325 100644
--- a/src/stores/auth.js
+++ b/src/stores/auth.js
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import { Preferences } from '@capacitor/preferences'
 import { authApi } from '@/api/authApi'
+import { exitDemo } from '@/demo'
 
 // 세션 토큰은 Capacitor Preferences(네이티브 영속 저장 / 웹은 localStorage)로 보관한다.
 // http.js 요청 인터셉터가 동기로 읽을 수 있도록 localStorage 에도 미러링한다.
@@ -59,6 +60,7 @@ export const useAuthStore = defineStore('auth', () => {
     const res = await authApi.login({ loginId, password, rememberMe })
     token.value = res.token
     user.value = res.member
+    exitDemo()
     await persist()
     return res
   }
@@ -68,6 +70,7 @@ export const useAuthStore = defineStore('auth', () => {
     const res = await authApi.googleLogin({ idToken, rememberMe })
     token.value = res.token
     user.value = res.member
+    exitDemo()
     await persist()
     return res
   }
@@ -100,6 +103,7 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   async function clear() {
+    exitDemo()
     token.value = ''
     user.value = null
     await persist()
diff --git a/src/views/DemoLockedView.vue b/src/views/DemoLockedView.vue
new file mode 100644
index 0000000..62f5cbb
--- /dev/null
+++ b/src/views/DemoLockedView.vue
@@ -0,0 +1,66 @@
+<script setup>
+// 둘러보기(데모)에서 미지원(로그인 필요) 화면에 들어왔을 때 안내.
+import { useRoute } from 'vue-router'
+import { useUiStore } from '@/stores/ui'
+
+const route = useRoute()
+const ui = useUiStore()
+
+const LABELS = {
+  'account-stats': '통계',
+  'account-budget': '예산 설정',
+  'account-tags': '태그 관리',
+  board: '게시판',
+  'board-detail': '게시판',
+  settings: '설정',
+  users: '회원 관리',
+}
+const label = LABELS[route.query.from] || '이 기능'
+
+function goLogin() {
+  ui.openLogin('/account')
+}
+</script>
+
+<template>
+  <div class="locked">
+    <div class="lock-big">🔒</div>
+    <h2>{{ label }}는 로그인 후 이용할 수 있어요</h2>
+    <p class="desc">둘러보기에서는 가계부 내역 · 고정 지출 · 계좌 관리 · 분류 관리만 미리 볼 수 있습니다.<br />로그인하면 통계 · 예산 · 태그 · 게시판까지 모두 사용할 수 있어요.</p>
+    <button type="button" class="cta-btn" @click="goLogin">로그인 / 시작하기</button>
+  </div>
+</template>
+
+<style scoped>
+.locked {
+  text-align: center;
+  padding: 3rem 1rem;
+  border: 1px dashed var(--color-border);
+  border-radius: 12px;
+}
+.lock-big {
+  font-size: 2.4rem;
+}
+h2 {
+  margin-top: 0.6rem;
+  font-size: 1.15rem;
+}
+.desc {
+  margin: 0.6rem 0 1.3rem;
+  font-size: 0.9rem;
+  opacity: 0.7;
+  line-height: 1.6;
+}
+.cta-btn {
+  width: 100%;
+  max-width: 320px;
+  padding: 0.8rem 1rem;
+  border: 1px solid hsla(160, 100%, 37%, 1);
+  border-radius: 8px;
+  background: hsla(160, 100%, 37%, 1);
+  color: #fff;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/DemoView.vue b/src/views/DemoView.vue
deleted file mode 100644
index a658850..0000000
--- a/src/views/DemoView.vue
+++ /dev/null
@@ -1,470 +0,0 @@
-<script setup>
-// 로그인 없이 둘러보기 — 자체 메뉴로 가계부/고정지출/계좌/분류를 샘플(더미) 데이터로 보여준다.
-// 나머지 메뉴는 로그인 유도 안내. API 호출/실데이터 없음.
-import { ref, computed } from 'vue'
-import { useUiStore } from '@/stores/ui'
-
-const ui = useUiStore()
-
-const MENU = [
-  { key: 'account', label: '가계부 내역' },
-  { key: 'stats', label: '통계', locked: true },
-  { key: 'recurrings', label: '고정 지출' },
-  { key: 'wallets', label: '계좌 관리' },
-  { key: 'categories', label: '분류 관리' },
-  { key: 'budget', label: '예산 설정', locked: true },
-  { key: 'tags', label: '태그 관리', locked: true },
-  { key: 'board', label: '커뮤니티', locked: true },
-]
-const active = ref('account')
-const activeItem = computed(() => MENU.find((m) => m.key === active.value) || MENU[0])
-
-// ===== 더미 데이터 =====
-const summary = { income: 4600000, expense: 1827600, balance: 2772400 }
-const accountGroups = [
-  { date: '6월 27일 (금)', total: -42300, items: [
-    { cat: '식비', memo: '점심 · 김밥천국', type: 'EXPENSE', amount: 9000 },
-    { cat: '카페/간식', memo: '스타벅스', type: 'EXPENSE', amount: 5300 },
-    { cat: '교통', memo: '지하철', type: 'EXPENSE', amount: 2800 },
-    { cat: '쇼핑', memo: '다이소', type: 'EXPENSE', amount: 25200 },
-  ] },
-  { date: '6월 25일 (수)', total: 4554700, items: [
-    { cat: '급여', memo: '6월 급여', type: 'INCOME', amount: 4600000 },
-    { cat: '통신', memo: '휴대폰 요금', type: 'EXPENSE', amount: 45300 },
-  ] },
-  { date: '6월 23일 (월)', total: -68000, items: [
-    { cat: 'OTT/구독', memo: '넷플릭스', type: 'EXPENSE', amount: 17000 },
-    { cat: '식비', memo: '저녁 · 배달', type: 'EXPENSE', amount: 23000 },
-    { cat: '생활', memo: '마트 장보기', type: 'EXPENSE', amount: 28000 },
-  ] },
-]
-const recurrings = [
-  { title: '월세', freq: '매월 1일', cat: '주거', type: 'EXPENSE', amount: 600000 },
-  { title: '통신비', freq: '매월 15일', cat: '통신', type: 'EXPENSE', amount: 45300 },
-  { title: '넷플릭스', freq: '매월 23일', cat: 'OTT/구독', type: 'EXPENSE', amount: 17000 },
-  { title: '정기적금', freq: '매월 25일', cat: '저축', type: 'TRANSFER', amount: 300000 },
-  { title: '급여', freq: '매월 25일', cat: '급여', type: 'INCOME', amount: 4600000 },
-]
-const wallets = {
-  total: 15520000,
-  items: [
-    { name: '신한 주거래', kind: '은행', amount: 2540000 },
-    { name: '주택청약', kind: '은행', amount: 5000000 },
-    { name: '현금', kind: '현금', amount: 120000 },
-    { name: '삼성카드', kind: '카드', amount: -340000 },
-    { name: '연금저축(투자)', kind: '투자', amount: 8200000 },
-  ],
-}
-const categories = [
-  { major: '식비', subs: ['점심', '저녁', '카페/간식', '배달'] },
-  { major: '교통', subs: ['대중교통', '택시', '주유'] },
-  { major: '주거/통신', subs: ['월세', '관리비', '통신비'] },
-  { major: '문화/여가', subs: ['OTT/구독', '영화', '여행'] },
-  { major: '쇼핑', subs: ['생활', '의류', '온라인'] },
-]
-
-function won(n) {
-  return (n < 0 ? '-' : '') + Math.abs(n).toLocaleString('ko-KR')
-}
-function typeLabel(t) {
-  return t === 'INCOME' ? '수입' : t === 'TRANSFER' ? '이체' : '지출'
-}
-function goLogin() {
-  ui.openLogin('/account')
-}
-</script>
-
-<template>
-  <section class="demo">
-    <div class="banner">
-      <span>👀 <b>둘러보기 모드</b> · 아래는 샘플 데이터입니다.</span>
-      <button type="button" class="login-btn" @click="goLogin">로그인하고 시작</button>
-    </div>
-
-    <div class="demo-shell">
-      <!-- 데모 메뉴 -->
-      <nav class="demo-menu">
-        <button
-          v-for="m in MENU" :key="m.key" type="button"
-          class="dm-item" :class="{ active: active === m.key }"
-          @click="active = m.key"
-        >
-          <span>{{ m.label }}</span>
-          <span v-if="m.locked" class="lock">🔒</span>
-        </button>
-      </nav>
-
-      <!-- 콘텐츠 -->
-      <div class="demo-content">
-        <!-- 가계부 내역 -->
-        <template v-if="active === 'account'">
-          <div class="month-nav"><span class="chev">‹</span><span class="period">2026년 6월</span><span class="chev">›</span></div>
-          <div class="summary">
-            <div class="s-card"><span class="s-label">수입</span><span class="s-val income">{{ won(summary.income) }}</span></div>
-            <div class="s-card"><span class="s-label">지출</span><span class="s-val expense">{{ won(summary.expense) }}</span></div>
-            <div class="s-card"><span class="s-label">잔액</span><span class="s-val">{{ won(summary.balance) }}</span></div>
-          </div>
-          <div v-for="g in accountGroups" :key="g.date" class="card-group">
-            <div class="cg-head">
-              <span class="cg-title">{{ g.date }}</span>
-              <span class="cg-total" :class="g.total >= 0 ? 'income' : 'expense'">{{ won(g.total) }}</span>
-            </div>
-            <ul class="rows">
-              <li v-for="(e, i) in g.items" :key="i" class="row3">
-                <span class="tag">{{ e.cat }}</span>
-                <span class="ellip">{{ e.memo }}</span>
-                <span class="amt" :class="e.type === 'INCOME' ? 'income' : 'expense'">{{ e.type === 'INCOME' ? '+' : '-' }}{{ won(e.amount) }}</span>
-              </li>
-            </ul>
-          </div>
-        </template>
-
-        <!-- 고정 지출 -->
-        <template v-else-if="active === 'recurrings'">
-          <p class="hint">등록한 주기에 맞춰 가계부에 자동으로 '확인 필요' 내역이 생성됩니다.</p>
-          <div class="card-group">
-            <ul class="rows">
-              <li v-for="(r, i) in recurrings" :key="i" class="row-rec">
-                <div class="rec-main">
-                  <span class="rec-title">{{ r.title }}</span>
-                  <span class="rec-sub"><span class="tag">{{ r.cat }}</span> · {{ r.freq }} · {{ typeLabel(r.type) }}</span>
-                </div>
-                <span class="amt" :class="r.type === 'INCOME' ? 'income' : r.type === 'TRANSFER' ? '' : 'expense'">{{ won(r.amount) }}</span>
-              </li>
-            </ul>
-          </div>
-        </template>
-
-        <!-- 계좌 관리 -->
-        <template v-else-if="active === 'wallets'">
-          <div class="networth">
-            <span class="nw-label">총자산</span>
-            <span class="nw-val income">{{ won(wallets.total) }}</span>
-          </div>
-          <div class="card-group">
-            <ul class="rows">
-              <li v-for="(w, i) in wallets.items" :key="i" class="row-rec">
-                <div class="rec-main">
-                  <span class="rec-title">{{ w.name }}</span>
-                  <span class="rec-sub"><span class="tag">{{ w.kind }}</span></span>
-                </div>
-                <span class="amt" :class="w.amount < 0 ? 'expense' : ''">{{ won(w.amount) }}</span>
-              </li>
-            </ul>
-          </div>
-        </template>
-
-        <!-- 분류 관리 -->
-        <template v-else-if="active === 'categories'">
-          <p class="hint">대분류 아래 소분류로 묶어 관리합니다. (예산·통계는 소분류 기준)</p>
-          <div v-for="(c, i) in categories" :key="i" class="card-group">
-            <div class="cg-head"><span class="major-badge">대</span><span class="cg-title">{{ c.major }}</span></div>
-            <ul class="rows">
-              <li v-for="(s, j) in c.subs" :key="j" class="row-sub2"><span class="sub-mark">↳</span>{{ s }}</li>
-            </ul>
-          </div>
-        </template>
-
-        <!-- 잠금(로그인 유도) -->
-        <div v-else class="locked-box">
-          <div class="lock-big">🔒</div>
-          <p class="lock-title">{{ activeItem.label }}는 로그인 후 이용할 수 있어요</p>
-          <p class="lock-desc">로그인하면 통계·예산·태그·게시판까지 모두 사용할 수 있습니다.</p>
-          <button type="button" class="cta-btn" @click="goLogin">로그인 / 시작하기</button>
-        </div>
-      </div>
-    </div>
-
-    <div class="cta">
-      <p>마음에 드시나요? 로그인하면 <b>내 가계부</b>를 바로 시작할 수 있어요.</p>
-      <button type="button" class="cta-btn" @click="goLogin">로그인 / 시작하기</button>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-.demo {
-  padding-bottom: 1rem;
-}
-.banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-  padding: 0.7rem 0.9rem;
-  margin-bottom: 1rem;
-  border: 1px solid hsla(160, 100%, 37%, 0.4);
-  border-radius: 8px;
-  background: hsla(160, 100%, 37%, 0.08);
-  font-size: 0.9rem;
-}
-.login-btn,
-.cta-btn {
-  padding: 0.45rem 0.9rem;
-  border: 1px solid hsla(160, 100%, 37%, 1);
-  border-radius: 6px;
-  background: hsla(160, 100%, 37%, 1);
-  color: #fff;
-  font-weight: 600;
-  cursor: pointer;
-  white-space: nowrap;
-}
-.demo-shell {
-  display: flex;
-  gap: 1rem;
-  align-items: flex-start;
-}
-.demo-menu {
-  flex: none;
-  width: 150px;
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-  border: 1px solid var(--color-border);
-  border-radius: 10px;
-  padding: 0.4rem;
-  background: var(--color-background-soft);
-}
-.dm-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.3rem;
-  padding: 0.55rem 0.6rem;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--color-text);
-  font-size: 0.9rem;
-  text-align: left;
-  cursor: pointer;
-}
-.dm-item:hover {
-  background: var(--color-background-mute);
-}
-.dm-item.active {
-  background: hsla(160, 100%, 37%, 0.12);
-  color: hsla(160, 100%, 37%, 1);
-  font-weight: 600;
-}
-.lock {
-  font-size: 0.75rem;
-  opacity: 0.6;
-}
-.demo-content {
-  flex: 1;
-  min-width: 0;
-}
-.month-nav {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-.chev {
-  font-size: 1.4rem;
-  opacity: 0.5;
-}
-.period {
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-.summary {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.6rem;
-  margin-bottom: 1.25rem;
-}
-.s-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 0.7rem 0.8rem;
-  border: 1px solid var(--color-border);
-  border-radius: 10px;
-  background: var(--color-background-soft);
-}
-.s-label {
-  font-size: 0.78rem;
-  opacity: 0.6;
-}
-.s-val {
-  font-size: 1rem;
-  font-weight: 700;
-}
-.income {
-  color: hsla(160, 100%, 37%, 1);
-}
-.expense {
-  color: #c0392b;
-}
-.hint {
-  font-size: 0.85rem;
-  opacity: 0.7;
-  margin-bottom: 0.8rem;
-}
-.networth {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  margin-bottom: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 10px;
-  background: var(--color-background-soft);
-}
-.nw-label {
-  font-size: 0.85rem;
-  opacity: 0.65;
-}
-.nw-val {
-  font-size: 1.3rem;
-  font-weight: 800;
-}
-.card-group {
-  margin-bottom: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 10px;
-  overflow: hidden;
-}
-.cg-head {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  justify-content: space-between;
-  padding: 0.6rem 0.9rem;
-  background: var(--color-background-mute);
-  font-size: 0.88rem;
-}
-.cg-title {
-  font-weight: 600;
-  margin-right: auto;
-}
-.cg-total {
-  font-weight: 700;
-}
-.rows {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.row3 {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 0.6rem;
-  padding: 0.65rem 0.9rem;
-  border-top: 1px solid var(--color-border);
-}
-.row-rec {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.6rem;
-  padding: 0.65rem 0.9rem;
-  border-top: 1px solid var(--color-border);
-}
-.row-rec:first-child {
-  border-top: 0;
-}
-.rec-main {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-  min-width: 0;
-}
-.rec-title {
-  font-weight: 600;
-  font-size: 0.92rem;
-}
-.rec-sub {
-  font-size: 0.78rem;
-  opacity: 0.7;
-}
-.row-sub2 {
-  padding: 0.55rem 0.9rem;
-  border-top: 1px solid var(--color-border);
-  font-size: 0.9rem;
-}
-.sub-mark {
-  opacity: 0.4;
-  margin-right: 0.4rem;
-}
-.major-badge {
-  font-size: 0.7rem;
-  padding: 0.1rem 0.35rem;
-  border-radius: 4px;
-  background: hsla(160, 100%, 37%, 0.15);
-  color: hsla(160, 100%, 37%, 1);
-  font-weight: 700;
-}
-.tag {
-  font-size: 0.75rem;
-  padding: 0.1rem 0.45rem;
-  border-radius: 999px;
-  background: var(--color-background-mute);
-  white-space: nowrap;
-}
-.ellip {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 0.92rem;
-}
-.amt {
-  font-weight: 700;
-  white-space: nowrap;
-}
-.locked-box {
-  text-align: center;
-  padding: 2.5rem 1rem;
-  border: 1px dashed var(--color-border);
-  border-radius: 12px;
-}
-.lock-big {
-  font-size: 2.2rem;
-}
-.lock-title {
-  margin-top: 0.5rem;
-  font-size: 1.05rem;
-  font-weight: 700;
-}
-.lock-desc {
-  margin: 0.4rem 0 1.1rem;
-  font-size: 0.88rem;
-  opacity: 0.7;
-}
-.cta {
-  margin-top: 1.5rem;
-  text-align: center;
-}
-.cta p {
-  font-size: 0.92rem;
-  opacity: 0.8;
-  margin-bottom: 0.75rem;
-}
-.cta .cta-btn {
-  width: 100%;
-  max-width: 320px;
-  padding: 0.8rem 1rem;
-  font-size: 1rem;
-}
-
-@media (max-width: 768px) {
-  .demo-shell {
-    flex-direction: column;
-  }
-  .demo-menu {
-    width: 100%;
-    flex-direction: row;
-    overflow-x: auto;
-    gap: 0.3rem;
-  }
-  .dm-item {
-    flex: none;
-    white-space: nowrap;
-  }
-}
-</style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 4128414..974501b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -5,6 +5,12 @@ import { useAuthStore } from '@/stores/auth'
 import { useUiStore } from '@/stores/ui'
 import { accountApi } from '@/api/accountApi'
 import { ID_LOGIN_ENABLED } from '@/config/features'
+import { enterDemo } from '@/demo'
+
+function startDemo() {
+  enterDemo()
+  router.push('/account/entries')
+}
 
 const auth = useAuthStore()
 const ui = useUiStore()
@@ -299,7 +305,7 @@ onMounted(load)
           <div class="cta">
             <button type="button" class="btn primary" @click="ui.openLogin('/account')">로그인</button>
             <button v-if="ID_LOGIN_ENABLED && ui.signupEnabled" type="button" class="btn" @click="ui.openSignup()">회원가입</button>
-            <button type="button" class="btn" @click="router.push('/demo')">로그인 없이 둘러보기</button>
+            <button type="button" class="btn" @click="startDemo">로그인 없이 둘러보기</button>
           </div>
           <p class="cta-note">{{ !ID_LOGIN_ENABLED || ui.signupEnabled ? '로그인하면 나의 가계부 요약을 볼 수 있어요.' : '현재 회원가입이 제한되어 있습니다.' }}</p>
         </div>

From 457fd8127a6fb7f1bbe710849757c24ba35ff13f Mon Sep 17 00:00:00 2001
From: ByungCheol <kenneth73510@nurier.co.kr>
Date: Sun, 28 Jun 2026 08:14:19 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EC=84=A4=EC=A0=95=20-=20=EC=97=91?=
 =?UTF-8?q?=EC=85=80=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=82=B4=EB=B3=B4?=
 =?UTF-8?q?=EB=82=B4=EA=B8=B0(=EB=B0=B1=EC=97=85)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- utils/backup.js: 가계부 전체(내역·계좌·분류·고정지출·예산·태그·자주내역)를
  이름 기준 참조로 .xlsx 다중 시트 생성. xlsx 동적 import(별도 청크)
- 웹/PC=다운로드, 앱(네이티브)=Filesystem 저장 + Share
- SettingsView: '데이터 백업' 카드(엑셀로 내보내기 동작 / 가져오기 버튼=준비중)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 package-lock.json                   | 135 +++++++++++++++++++++++++++-
 package.json                        |   5 +-
 src/demo/index.js                   |  31 +++++--
 src/utils/backup.js                 |  84 +++++++++++++++++
 src/views/HomeView.vue              |   7 +-
 src/views/settings/SettingsView.vue |  35 ++++++++
 6 files changed, 289 insertions(+), 8 deletions(-)
 create mode 100644 src/utils/backup.js

diff --git a/package-lock.json b/package-lock.json
index f6fe29d..f472ed5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,9 @@
         "@capacitor/camera": "^8.2.0",
         "@capacitor/cli": "^8.3.4",
         "@capacitor/core": "^8.3.4",
+        "@capacitor/filesystem": "^8.1.2",
         "@capacitor/preferences": "^8.0.1",
+        "@capacitor/share": "^8.0.1",
         "@capawesome/capacitor-google-sign-in": "^0.1.2",
         "@toast-ui/editor": "^3.2.2",
         "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
@@ -22,7 +24,8 @@
         "prismjs": "^1.30.0",
         "sortablejs": "^1.15.7",
         "vue": "^3.5.32",
-        "vue-router": "^5.0.4"
+        "vue-router": "^5.0.4",
+        "xlsx": "^0.18.5"
       },
       "devDependencies": {
         "@capacitor/assets": "^3.0.5",
@@ -1187,6 +1190,18 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@capacitor/filesystem": {
+      "version": "8.1.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/filesystem/-/filesystem-8.1.2.tgz",
+      "integrity": "sha512-doaaMfGoFR2hWU6aV6u83I+5ZsGyJVq+Gz4r9lMpJzUKMm1eMu0hLnFdV1aXZlU9FlK/RndFrVD8oRZfNOqWgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@capacitor/synapse": "^1.0.4"
+      },
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
     "node_modules/@capacitor/preferences": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/@capacitor/preferences/-/preferences-8.0.1.tgz",
@@ -1196,6 +1211,21 @@
         "@capacitor/core": ">=8.0.0"
       }
     },
+    "node_modules/@capacitor/share": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/share/-/share-8.0.1.tgz",
+      "integrity": "sha512-3cSBKBCJVon54rKDROP2rqGyeGks4pBh9TbaEk9S375Kbek/ZHe72N50zIa0Vn9Eac/SuhwgehO/mmA4CsUOiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
+    "node_modules/@capacitor/synapse": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@capacitor/synapse/-/synapse-1.0.4.tgz",
+      "integrity": "sha512-/C1FUo8/OkKuAT4nCIu/34ny9siNHr9qtFezu4kxm6GY1wNFxrCFWjfYx5C1tUhVGz3fxBABegupkpjXvjCHrw==",
+      "license": "ISC"
+    },
     "node_modules/@capawesome/capacitor-google-sign-in": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@capawesome/capacitor-google-sign-in/-/capacitor-google-sign-in-0.1.2.tgz",
@@ -4015,6 +4045,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -5182,6 +5221,19 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chai": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
@@ -5378,6 +5430,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -5782,6 +5843,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -7479,6 +7552,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -12540,6 +12622,18 @@
       "license": "BSD-3-Clause",
       "optional": true
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/ssri": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-12.0.0.tgz",
@@ -14175,6 +14269,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -14297,6 +14409,27 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/xml-js": {
       "version": "1.6.11",
       "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
diff --git a/package.json b/package.json
index 1bb4dbc..4eb8998 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,9 @@
     "@capacitor/camera": "^8.2.0",
     "@capacitor/cli": "^8.3.4",
     "@capacitor/core": "^8.3.4",
+    "@capacitor/filesystem": "^8.1.2",
     "@capacitor/preferences": "^8.0.1",
+    "@capacitor/share": "^8.0.1",
     "@capawesome/capacitor-google-sign-in": "^0.1.2",
     "@toast-ui/editor": "^3.2.2",
     "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
@@ -55,7 +57,8 @@
     "prismjs": "^1.30.0",
     "sortablejs": "^1.15.7",
     "vue": "^3.5.32",
-    "vue-router": "^5.0.4"
+    "vue-router": "^5.0.4",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@capacitor/assets": "^3.0.5",
diff --git a/src/demo/index.js b/src/demo/index.js
index b55c9b0..62071f8 100644
--- a/src/demo/index.js
+++ b/src/demo/index.js
@@ -94,15 +94,36 @@ const TAGS = [
   { id: 403, name: '경조사' },
 ]
 
-// 요약은 내역에서 계산해 일관성 보장
-const SUMMARY = (() => {
+// 해당 연·월 내역만 (월 이동 반영)
+function inMonth(e, year, month) {
+  if (!year || !month) return true
+  return e.entryDate.startsWith(`${year}-${String(month).padStart(2, '0')}`)
+}
+// 검색·필터 적용
+function filterEntries(p = {}) {
+  let rows = ENTRIES.filter((e) => inMonth(e, p.year, p.month))
+  if (p.type) rows = rows.filter((e) => e.type === p.type)
+  if (p.category) rows = rows.filter((e) => e.category === p.category)
+  if (p.walletId) rows = rows.filter((e) => String(e.walletId) === String(p.walletId))
+  if (p.keyword) {
+    const k = String(p.keyword).trim()
+    rows = rows.filter((e) => (e.memo || '').includes(k) || (e.category || '').includes(k))
+  }
+  if (p.tagId) {
+    const t = TAGS.find((x) => String(x.id) === String(p.tagId))
+    if (t) rows = rows.filter((e) => (e.tags || []).includes(t.name))
+  }
+  return rows
+}
+function summaryOf(p = {}) {
   let income = 0, expense = 0
   for (const e of ENTRIES) {
+    if (!inMonth(e, p.year, p.month)) continue
     if (e.type === 'INCOME') income += e.amount
     else if (e.type === 'EXPENSE') expense += e.amount
   }
   return { totalIncome: income, totalExpense: expense, balance: income - expense }
-})()
+}
 const NETWORTH = { totalAssets: 15860000, totalLiabilities: 340000, netWorth: 15520000 }
 
 function ok(data) {
@@ -115,8 +136,8 @@ function block() {
 
 // 읽기 응답 / 쓰기 차단
 export const demoApi = {
-  list: () => ok(ENTRIES),
-  summary: () => ok(SUMMARY),
+  list: (params) => ok(filterEntries(params)),
+  summary: (params) => ok(summaryOf(params)),
   wallets: () => ok(WALLETS),
   netWorth: () => ok(NETWORTH),
   categories: () => ok(CATEGORIES),
diff --git a/src/utils/backup.js b/src/utils/backup.js
new file mode 100644
index 0000000..aaf0665
--- /dev/null
+++ b/src/utils/backup.js
@@ -0,0 +1,84 @@
+// 데이터 백업 — 가계부 전체 데이터를 엑셀(.xlsx)로 내보내기.
+// 참조는 이름 기준(계좌명·분류명·태그명)으로 저장해 추후 '가져오기(복구)' 시 재매핑이 단순하도록 한다.
+import { Capacitor } from '@capacitor/core'
+import { accountApi } from '@/api/accountApi'
+
+async function safe(promise) {
+  try {
+    return await promise
+  } catch {
+    return []
+  }
+}
+
+function fileName() {
+  const d = new Date()
+  const p = (n) => String(n).padStart(2, '0')
+  return `돈돼지가계부_백업_${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}.xlsx`
+}
+
+// 워크북을 플랫폼에 맞게 저장: 웹/PC=다운로드, 앱(네이티브)=파일 저장 후 공유
+async function saveWorkbook(XLSX, wb, name) {
+  if (Capacitor.isNativePlatform()) {
+    const base64 = XLSX.write(wb, { type: 'base64', bookType: 'xlsx' })
+    const { Filesystem, Directory } = await import('@capacitor/filesystem')
+    const { Share } = await import('@capacitor/share')
+    const res = await Filesystem.writeFile({ path: name, data: base64, directory: Directory.Cache })
+    try {
+      await Share.share({ title: name, text: '가계부 백업 파일', url: res.uri })
+    } catch {
+      /* 공유 취소 — 파일은 캐시에 저장됨 */
+    }
+  } else {
+    XLSX.writeFile(wb, name)
+  }
+}
+
+export async function exportBackup() {
+  const XLSX = await import('xlsx')
+
+  const [entries, wallets, categories, recurrings, budgets, tags, quick] = await Promise.all([
+    safe(accountApi.list({})),
+    safe(accountApi.wallets()),
+    safe(accountApi.categories()),
+    safe(accountApi.recurrings()),
+    safe(accountApi.budgets()),
+    safe(accountApi.tags()),
+    safe(accountApi.quickEntries()),
+  ])
+
+  const catNameById = {}
+  categories.forEach((c) => (catNameById[c.id] = c.name))
+
+  const wb = XLSX.utils.book_new()
+  const add = (name, rows) => XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(rows), name)
+
+  add('내역', entries.map((e) => ({
+    날짜: e.entryDate, 구분: e.type, 분류: e.category, 금액: e.amount, 메모: e.memo,
+    계좌: e.walletName, 입금계좌: e.toWalletName, 할부개월: e.installmentMonths,
+    태그: (e.tags || []).join(','),
+  })))
+  add('계좌', wallets.map((w) => ({
+    종류: w.type, 이름: w.name, '은행/카드사': w.issuer, 계좌번호: w.accountNumber,
+    카드유형: w.cardType, 개시잔액: w.openingBalance, 개시일: w.openingDate, '평가액(수동)': w.currentValue,
+  })))
+  add('분류', categories.map((c) => ({
+    구분: c.type, 이름: c.name, 대분류: c.parentId ? catNameById[c.parentId] || '' : '',
+  })))
+  add('고정지출', recurrings.map((r) => ({
+    제목: r.title, 구분: r.type, 금액: r.amount, 분류: r.category, 메모: r.memo,
+    계좌: r.walletName, 입금계좌: r.toWalletName, 주기: r.frequency,
+    일: r.dayOfMonth, 요일: r.dayOfWeek, 월: r.monthOfYear,
+    시작일: r.startDate, 종료일: r.endDate, 활성: r.active,
+  })))
+  add('예산', budgets.map((b) => ({
+    분류: b.category, 고정: b.fixed, 기준단위: b.baseUnit, 기준금액: b.baseAmount,
+    일: b.daily, 주: b.weekly, 월: b.monthly, 년: b.yearly,
+  })))
+  add('태그', tags.map((t) => ({ 이름: t.name })))
+  add('자주쓰는내역', quick.map((q) => ({
+    라벨: q.label, 구분: q.type, 분류: q.category, 금액: q.amount, 메모: q.memo, 계좌: q.walletName,
+  })))
+
+  await saveWorkbook(XLSX, wb, fileName())
+}
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 974501b..9da5c55 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -700,10 +700,15 @@ onMounted(load)
 }
 .cta {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   gap: 0.6rem;
-  justify-content: center;
   margin-top: 1.4rem;
 }
+.cta .btn {
+  width: 100%;
+  max-width: 260px;
+}
 .btn {
   padding: 0.6rem 1.4rem;
   border: 1px solid var(--color-border);
diff --git a/src/views/settings/SettingsView.vue b/src/views/settings/SettingsView.vue
index ac1625e..176ff3f 100644
--- a/src/views/settings/SettingsView.vue
+++ b/src/views/settings/SettingsView.vue
@@ -4,9 +4,26 @@ import { RouterLink } from 'vue-router'
 import { Preferences } from '@capacitor/preferences'
 import { useDialog } from '@/composables/dialog'
 import { useUiStore } from '@/stores/ui'
+import { exportBackup } from '@/utils/backup'
 
 const dialog = useDialog()
 const ui = useUiStore()
+
+const exporting = ref(false)
+async function doExport() {
+  if (exporting.value) return
+  exporting.value = true
+  try {
+    await exportBackup()
+  } catch (e) {
+    window.alert(e?.message || '내보내기에 실패했습니다.')
+  } finally {
+    exporting.value = false
+  }
+}
+function importBackup() {
+  dialog.alert('가져오기(복구)는 준비 중입니다. 곧 제공됩니다.')
+}
 const THEMES = [
   { value: 'system', label: '시스템' },
   { value: 'light', label: '라이트' },
@@ -92,6 +109,24 @@ async function clearAppData() {
       </div>
     </section>
 
+    <!-- 데이터 백업 -->
+    <section class="card">
+      <button type="button" class="row row-btn" :disabled="exporting" @click="doExport">
+        <div class="row-main">
+          <span class="row-label">엑셀로 내보내기</span>
+          <span class="row-sub">가계부 전체 데이터를 .xlsx 파일로 저장</span>
+        </div>
+        <span class="row-value">{{ exporting ? '내보내는 중…' : '내보내기' }}</span>
+      </button>
+      <button type="button" class="row row-btn" @click="importBackup">
+        <div class="row-main">
+          <span class="row-label">엑셀에서 가져오기</span>
+          <span class="row-sub">백업 파일로 데이터 복구</span>
+        </div>
+        <span class="row-value">가져오기</span>
+      </button>
+    </section>
+
     <section class="card">
       <RouterLink to="/settings/account" class="row row-link">
         <div class="row-main">