feat(settings): 가계부 데이터 초기화 기능 — 엑셀 백업 안내·선택·진행상태바·완료토스트

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/api/accountApi.js

@@ -220,6 +220,11 @@ const realApi = {
     return http.post('/account/restore', payload)
   },
 
+  // 가계부 데이터 전체 삭제 (내역·계좌·분류·태그·예산·고정지출·투자 전부)
+  deleteAllData() {
+    return http.delete('/account/all')
+  },
+
   // 영수증 OCR (백엔드가 Google Vision 호출 → 전체 텍스트 반환) — AI 폴백용
   // suppressNetError: runOcr 이 자체 formError 로 안내하므로 전역 배너 억제
   ocrReceipt(blob) {
@@ -266,7 +271,7 @@ const DEMO_WRITES = new Set([
   'createRecurring', 'updateRecurring', 'removeRecurring', 'runRecurrings',
   'createWallet', 'updateWallet', 'removeWallet', 'reorderWallets',
   'createCategory', 'updateCategory', 'removeCategory', 'reorderCategories', 'importCategories',
-  'createTag', 'updateTag', 'removeTag', 'reorderTags', 'confirmEntry', 'ocrReceipt', 'parseReceiptAi', 'aiComment', 'restore',
+  'createTag', 'updateTag', 'removeTag', 'reorderTags', 'confirmEntry', 'ocrReceipt', 'parseReceiptAi', 'aiComment', 'restore', 'deleteAllData',
   'createBudget', 'updateBudget', 'removeBudget', 'setExpectedIncome',
   'createHolding', 'updateHolding', 'removeHolding', 'addTrade', 'updateTrade', 'removeTrade',
   'refreshPrices', 'refreshAllPrices',

src/views/settings/SettingsView.vue

@@ -9,6 +9,7 @@ import { exportBackup, importBackup } from '@/utils/backup'
 import { reminders } from '@/native/reminders'
 import { appLock, PIN_LENGTH } from '@/composables/appLock'
 import PinPad from '@/components/PinPad.vue'
+import { accountApi } from '@/api/accountApi'
 
 const dialog = useDialog()
 const ui = useUiStore()
@@ -169,6 +170,55 @@ async function setDim(dim, value) {
   window.desktop?.setWindowSize(w, h)
 }
 
+// ===== 가계부 데이터 전체 삭제 =====
+const resetModalOpen = ref(false)
+const resetting = ref(false)
+const resetToast = ref(false)
+let resetToastTimer = null
+
+function openResetModal() {
+  if (resetting.value) return
+  resetModalOpen.value = true
+}
+
+async function doResetWithExport() {
+  resetModalOpen.value = false
+  resetting.value = true
+  try {
+    await exportBackup()
+    await accountApi.deleteAllData()
+    showResetToast()
+  } catch (e) {
+    window.alert(e?.message || '처리에 실패했습니다.')
+  } finally {
+    resetting.value = false
+  }
+}
+
+async function doResetOnly() {
+  const ok = await dialog.confirm(
+    '엑셀 백업 없이 모든 데이터를 삭제합니다. 삭제된 데이터는 복구할 수 없습니다. 계속하시겠습니까?',
+    { title: '데이터 삭제 확인', okText: '삭제', danger: true },
+  )
+  if (!ok) return
+  resetModalOpen.value = false
+  resetting.value = true
+  try {
+    await accountApi.deleteAllData()
+    showResetToast()
+  } catch (e) {
+    window.alert(e?.response?.data?.message || e?.message || '삭제에 실패했습니다.')
+  } finally {
+    resetting.value = false
+  }
+}
+
+function showResetToast() {
+  resetToast.value = true
+  clearTimeout(resetToastTimer)
+  resetToastTimer = setTimeout(() => { resetToast.value = false }, 3000)
+}
+
 async function clearAppData() {
   if (clearing.value) return
   const ok = await dialog.confirm(
@@ -342,6 +392,14 @@ async function clearAppData() {
         <span class="row-value">v{{ appVersion }}</span>
       </div>
 
+      <button type="button" class="row row-btn" :disabled="resetting || clearing" @click="openResetModal">
+        <div class="row-main">
+          <span class="row-label danger">가계부 데이터 초기화</span>
+          <span class="row-sub">내역·계좌·분류·예산·고정지출 등 모든 데이터 삭제</span>
+        </div>
+        <span class="row-value danger">초기화</span>
+      </button>
+
       <button type="button" class="row row-btn" :disabled="clearing" @click="clearAppData">
         <div class="row-main">
           <span class="row-label danger">App Data 삭제</span>
@@ -353,6 +411,44 @@ async function clearAppData() {
 
     <p class="copyright">© 2026 돈돼지 가계부. All rights reserved.</p>
 
+    <!-- 데이터 초기화 경고 모달 -->
+    <Teleport to="body">
+      <div v-if="resetModalOpen" class="reset-backdrop" @click.self="resetModalOpen = false">
+        <div class="reset-modal" role="dialog" aria-modal="true">
+          <h2 class="reset-title">가계부 데이터 초기화</h2>
+          <p class="reset-warn">
+            ⚠️ 내역·계좌·분류·태그·예산·고정지출·투자 내역이 <b>모두 삭제</b>됩니다.<br>
+            삭제된 데이터는 복구할 수 없습니다.<br><br>
+            엑셀 파일로 먼저 백업하시겠습니까?
+          </p>
+          <div class="reset-actions">
+            <button type="button" class="reset-btn export" @click="doResetWithExport">
+              엑셀로 내보낸 후 삭제
+            </button>
+            <button type="button" class="reset-btn danger" @click="doResetOnly">
+              백업 없이 바로 삭제
+            </button>
+            <button type="button" class="reset-btn cancel" @click="resetModalOpen = false">
+              취소
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 삭제 진행 중 상태바 -->
+    <Teleport to="body">
+      <div v-if="resetting" class="reset-progress-wrap" role="status" aria-label="데이터 삭제 중">
+        <div class="reset-progress-bar"></div>
+        <span class="reset-progress-label">데이터를 삭제하는 중입니다…</span>
+      </div>
+    </Teleport>
+
+    <!-- 완료 토스트 -->
+    <Teleport to="body">
+      <div v-if="resetToast" class="reset-toast" role="status">데이터 초기화가 완료되었습니다.</div>
+    </Teleport>
+
     <!-- PIN 설정 모달 -->
     <Teleport to="body">
       <div v-if="lockSetupOpen" class="pin-backdrop" @click.self="lockSetupOpen = false">
@@ -564,4 +660,116 @@ async function clearAppData() {
   font-size: 0.78rem;
   opacity: 0.5;
 }
+
+/* 데이터 초기화 모달 */
+.reset-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 2500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: rgba(0, 0, 0, 0.55);
+}
+.reset-modal {
+  width: 100%;
+  max-width: 360px;
+  padding: 1.6rem 1.4rem 1.4rem;
+  border-radius: 14px;
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+}
+.reset-title {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #c0392b;
+  margin-bottom: 0.9rem;
+}
+.reset-warn {
+  font-size: 0.88rem;
+  line-height: 1.65;
+  opacity: 0.85;
+  margin-bottom: 1.3rem;
+}
+.reset-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+.reset-btn {
+  width: 100%;
+  padding: 0.7rem 1rem;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid var(--color-border);
+  background: var(--color-background-soft);
+  color: var(--color-text);
+  text-align: center;
+}
+.reset-btn.export {
+  border-color: hsla(160, 100%, 37%, 1);
+  color: hsla(160, 100%, 37%, 1);
+}
+.reset-btn.danger {
+  border-color: #c0392b;
+  color: #c0392b;
+}
+.reset-btn.cancel {
+  opacity: 0.6;
+}
+
+/* 삭제 진행 상태바 */
+.reset-progress-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 3000;
+  background: var(--color-background-soft);
+  border-bottom: 1px solid var(--color-border);
+  padding: 0.6rem 1rem 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.reset-progress-bar {
+  height: 3px;
+  border-radius: 2px;
+  background: linear-gradient(90deg, hsla(160,100%,37%,1) 0%, hsla(160,100%,37%,0.3) 100%);
+  background-size: 200% 100%;
+  animation: progress-slide 1.2s linear infinite;
+}
+@keyframes progress-slide {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+.reset-progress-label {
+  font-size: 0.82rem;
+  opacity: 0.75;
+}
+
+/* 완료 토스트 */
+.reset-toast {
+  position: fixed;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 3000;
+  padding: 0.65rem 1.3rem;
+  border-radius: 999px;
+  background: #2ecc71;
+  color: #fff;
+  font-size: 0.88rem;
+  font-weight: 600;
+  white-space: nowrap;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+  animation: toast-in 0.2s ease;
+}
+@keyframes toast-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
+  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
 </style>