- 신규 유저 온보딩(홈 시작하기 → 분류) 흐름이 빈 분류 화면에서 끊기던 문제 보완 - 빈 상태에 이모지·안내 + '기본 분류 불러오기' 버튼(importDefaults) 노출 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user