From f23b4963a908e913e5a1628da914f0dd21ae00d0 Mon Sep 17 00:00:00 2001
From: ByungCheol <kenneth73510@nurier.co.kr>
Date: Mon, 29 Jun 2026 09:33:31 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B6=84=EB=A5=98=20=EB=B9=88=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=EC=97=90=20'=EA=B8=B0=EB=B3=B8=20=EB=B6=84?=
 =?UTF-8?q?=EB=A5=98=20=EB=B6=88=EB=9F=AC=EC=98=A4=EA=B8=B0'=20CTA=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 신규 유저 온보딩(홈 시작하기 → 분류) 흐름이 빈 분류 화면에서 끊기던 문제 보완
- 빈 상태에 이모지·안내 + '기본 분류 불러오기' 버튼(importDefaults) 노출

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/views/account/CategoryView.vue | 42 +++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/views/account/CategoryView.vue b/src/views/account/CategoryView.vue
index 3b06397..8978f36 100644
--- a/src/views/account/CategoryView.vue
+++ b/src/views/account/CategoryView.vue
@@ -230,9 +230,12 @@ onBeforeUnmount(destroySortables)
         </ul>
       </li>
     </ul>
-    <p v-if="!loading && !tree.length" class="msg">
-      등록된 {{ activeType === 'EXPENSE' ? '지출' : '수입' }} 분류가 없습니다.
-    </p>
+    <div v-if="!loading && !tree.length" class="empty-state">
+      <p class="empty-emoji">🗂️</p>
+      <p class="empty-title">등록된 {{ activeType === 'EXPENSE' ? '지출' : '수입' }} 분류가 없어요</p>
+      <p class="empty-desc">기본 분류를 불러오면 식비·교통 등이 한 번에 추가됩니다.</p>
+      <button type="button" class="empty-cta" @click="importDefaults">기본 분류 불러오기</button>
+    </div>
 
     <!-- 인앱 확인 모달 (네이티브 confirm 대체 — 제목 'sb_pt' 노출 방지) -->
     <Teleport to="body">
@@ -421,6 +424,39 @@ button.danger {
 .msg.error {
   color: #c0392b;
 }
+/* 신규 유저 빈 상태 */
+.empty-state {
+  text-align: center;
+  padding: 2.2rem 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);
+}
 /* 인앱 확인 모달 */
 .modal-backdrop {
   position: fixed;