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)

{{ error }}

+ +
+ +

가계부를 시작해볼까요? 🐷

+

아래 순서로 첫 기록을 시작해보세요.

+
+ + 1 + 계좌 등록하기은행·카드·현금 추가 + + + + 2 + 기본 분류 불러오기식비·교통 등 카테고리 준비 + + + + 3 + 첫 내역 기록하기수입·지출을 추가 + + +
+
+
@@ -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())
-

등록된 항목이 없습니다.

+
+

🏦

+

아직 등록된 계좌가 없어요

+

은행·카드·현금·대출·투자를 추가해보세요.

+ +
@@ -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; }