feat: 신규 유저 빈 상태 행동 유도(온보딩) 추가

- 홈 대시보드: 데이터 없을 때 '시작하기' 카드(계좌→분류→내역 3단계 안내, 닫기 가능)
- 가계부 내역: 빈 상태를 '첫 내역 추가' CTA로 (필터 결과 없음과 구분)
- 계좌 관리: 빈 상태를 '계좌 추가' CTA로
- 스토어 신규 유저(데이터 0)의 첫인상·활성화 개선

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/views/HomeView.vue

@@ -39,6 +39,21 @@ const budgetPct = computed(() =>
 const budgetLeft = computed(() => budgetTotal.value - spentTotal.value)
 const budgetOver = computed(() => budgetLeft.value < 0)
 
+// ===== 신규 유저 시작하기 안내 =====
+// 데이터가 전혀 없으면(이번 달 내역 0 + 자산/부채 0) 첫 사용 가이드를 노출.
+// 한 번 닫으면 다시 보이지 않도록 로컬에 기록.
+const isEmpty = computed(() =>
+  entries.value.length === 0 &&
+  networth.value.totalAssets === 0 &&
+  networth.value.totalLiabilities === 0,
+)
+const gsDismissed = ref(localStorage.getItem('home:gettingStarted:dismissed') === '1')
+const showGettingStarted = computed(() => !loading.value && !error.value && isEmpty.value && !gsDismissed.value)
+function dismissGettingStarted() {
+  gsDismissed.value = true
+  try { localStorage.setItem('home:gettingStarted:dismissed', '1') } catch { /* 무시 */ }
+}
+
 function won(n) {
   return (n ?? 0).toLocaleString('ko-KR')
 }
@@ -166,6 +181,30 @@ onMounted(load)
 
       <p v-if="error" class="msg error">{{ error }}</p>
 
+      <!-- 신규 유저 시작하기 안내 (데이터 없을 때만) -->
+      <section v-if="showGettingStarted" class="getting-started">
+        <button type="button" class="gs-close" aria-label="안내 닫기" @click="dismissGettingStarted">×</button>
+        <h2 class="gs-title">가계부를 시작해볼까요? 🐷</h2>
+        <p class="gs-sub">아래 순서로 첫 기록을 시작해보세요.</p>
+        <div class="gs-steps">
+          <RouterLink to="/account/wallets" class="gs-step">
+            <span class="gs-num">1</span>
+            <span class="gs-text"><b>계좌 등록하기</b><span>은행·카드·현금 추가</span></span>
+            <span class="gs-arrow">→</span>
+          </RouterLink>
+          <RouterLink to="/account/categories" class="gs-step">
+            <span class="gs-num">2</span>
+            <span class="gs-text"><b>기본 분류 불러오기</b><span>식비·교통 등 카테고리 준비</span></span>
+            <span class="gs-arrow">→</span>
+          </RouterLink>
+          <RouterLink to="/account/entries" class="gs-step">
+            <span class="gs-num">3</span>
+            <span class="gs-text"><b>첫 내역 기록하기</b><span>수입·지출을 추가</span></span>
+            <span class="gs-arrow">→</span>
+          </RouterLink>
+        </div>
+      </section>
+
       <div class="cards">
         <!-- 이번 달 수입/지출/수지 -->
         <div class="card">
@@ -346,6 +385,90 @@ onMounted(load)
   opacity: 0.65;
   font-size: 0.9rem;
 }
+/* 신규 유저 시작하기 안내 */
+.getting-started {
+  position: relative;
+  margin: 1.2rem 0;
+  padding: 1.1rem 1.2rem 1.2rem;
+  border: 1px solid hsla(160, 100%, 37%, 0.35);
+  border-radius: 14px;
+  background: hsla(160, 100%, 37%, 0.06);
+}
+.gs-close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.6rem;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  opacity: 0.5;
+  font-size: 1.3rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.gs-close:hover {
+  opacity: 0.9;
+}
+.gs-title {
+  font-size: 1.1rem;
+  color: var(--color-heading);
+}
+.gs-sub {
+  margin-top: 0.25rem;
+  font-size: 0.86rem;
+  opacity: 0.7;
+}
+.gs-steps {
+  margin-top: 0.9rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.gs-step {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0.7rem 0.85rem;
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  background: var(--color-background);
+  color: var(--color-text);
+  text-decoration: none;
+}
+.gs-step:hover {
+  border-color: hsla(160, 100%, 37%, 0.6);
+}
+.gs-num {
+  flex: none;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: hsla(160, 100%, 37%, 1);
+  color: #fff;
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+.gs-text {
+  display: flex;
+  flex-direction: column;
+}
+.gs-text b {
+  font-size: 0.92rem;
+}
+.gs-text span {
+  font-size: 0.78rem;
+  opacity: 0.65;
+}
+.gs-arrow {
+  margin-left: auto;
+  color: hsla(160, 100%, 37%, 1);
+  font-weight: 700;
+}
 .cards {
   display: grid;
   grid-template-columns: 1fr 1fr;

src/views/account/AccountView.vue

@@ -954,7 +954,13 @@ onMounted(async () => {
         </ul>
       </section>
     </div>
-    <p v-else-if="!loading" class="msg">{{ hasFilter ? '조건에 맞는 내역이 없습니다.' : '이 달의 내역이 없습니다.' }}</p>
+    <p v-else-if="!loading && hasFilter" class="msg">조건에 맞는 내역이 없습니다.</p>
+    <div v-else-if="!loading" class="empty-state">
+      <p class="empty-emoji">📒</p>
+      <p class="empty-title">아직 기록된 내역이 없어요</p>
+      <p class="empty-desc">첫 수입·지출을 기록해보세요.</p>
+      <button type="button" class="empty-cta" @click="openCreate">＋ 첫 내역 추가</button>
+    </div>
 
     <!-- 추가/수정 모달 -->
     <Teleport to="body">
@@ -1515,6 +1521,39 @@ button.primary {
 .msg {
   margin: 1rem 0;
 }
+/* 신규 유저 빈 상태 */
+.empty-state {
+  text-align: center;
+  padding: 2.4rem 1rem 2rem;
+}
+.empty-emoji {
+  font-size: 2.6rem;
+}
+.empty-title {
+  margin-top: 0.6rem;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--color-heading);
+}
+.empty-desc {
+  margin-top: 0.3rem;
+  font-size: 0.88rem;
+  opacity: 0.7;
+}
+.empty-cta {
+  margin-top: 1.1rem;
+  padding: 0.7rem 1.6rem;
+  border: 0;
+  border-radius: 10px;
+  background: hsla(160, 100%, 37%, 1);
+  color: #fff;
+  font-size: 0.95rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+.empty-cta:hover {
+  background: hsla(160, 100%, 32%, 1);
+}
 .msg.error {
   color: #c0392b;
 }

src/views/account/AccountWalletView.vue

@@ -421,7 +421,12 @@ onBeforeUnmount(() => sortable?.destroy())
         </div>
       </li>
     </ul>
-    <p v-if="!loading && !rows.length" class="msg">등록된 항목이 없습니다.</p>
+    <div v-if="!loading && !rows.length" class="empty-state">
+      <p class="empty-emoji">🏦</p>
+      <p class="empty-title">아직 등록된 계좌가 없어요</p>
+      <p class="empty-desc">은행·카드·현금·대출·투자를 추가해보세요.</p>
+      <button type="button" class="empty-cta" @click="openCreate">＋ 계좌 추가</button>
+    </div>
 
     <!-- 추가/수정 모달 -->
     <Teleport to="body">
@@ -795,6 +800,39 @@ button.primary {
 .msg {
   margin: 1rem 0;
 }
+/* 신규 유저 빈 상태 */
+.empty-state {
+  text-align: center;
+  padding: 2.4rem 1rem 2rem;
+}
+.empty-emoji {
+  font-size: 2.6rem;
+}
+.empty-title {
+  margin-top: 0.6rem;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--color-heading);
+}
+.empty-desc {
+  margin-top: 0.3rem;
+  font-size: 0.88rem;
+  opacity: 0.7;
+}
+.empty-cta {
+  margin-top: 1.1rem;
+  padding: 0.7rem 1.6rem;
+  border: 0;
+  border-radius: 10px;
+  background: hsla(160, 100%, 37%, 1);
+  color: #fff;
+  font-size: 0.95rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+.empty-cta:hover {
+  background: hsla(160, 100%, 32%, 1);
+}
 .msg.error {
   color: #c0392b;
 }