diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 6a640e5..4f19de9 100644
--- a/src/views/HomeView.vue
+++ b/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)
@@ -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;
diff --git a/src/views/account/AccountView.vue b/src/views/account/AccountView.vue
index 3cf3851..e6eb333 100644
--- a/src/views/account/AccountView.vue
+++ b/src/views/account/AccountView.vue
@@ -954,7 +954,13 @@ onMounted(async () => {
-
{{ hasFilter ? '조건에 맞는 내역이 없습니다.' : '이 달의 내역이 없습니다.' }}
+
조건에 맞는 내역이 없습니다.
+
+
📒
+
아직 기록된 내역이 없어요
+
첫 수입·지출을 기록해보세요.
+
+
@@ -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;
}
diff --git a/src/views/account/AccountWalletView.vue b/src/views/account/AccountWalletView.vue
index b02e5b3..87ae50b 100644
--- a/src/views/account/AccountWalletView.vue
+++ b/src/views/account/AccountWalletView.vue
@@ -421,7 +421,12 @@ onBeforeUnmount(() => sortable?.destroy())
- 등록된 항목이 없습니다.
+