feat(account): 통계 AI 코멘트 카드에 절약 가이드 섹션 추가
Deploy / deploy (push) Failing after 11m37s

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
sb
2026-07-05 15:13:19 +09:00
parent 7affe5c318
commit a9d4ea8410
+27 -4
View File
@@ -24,7 +24,8 @@ const catType = ref('EXPENSE') // 분류별 파이차트 구분
const catData = ref([]) // [{category, total}] const catData = ref([]) // [{category, total}]
const categoryList = ref([]) // 분류 목록(대/소분류 매핑용) const categoryList = ref([]) // 분류 목록(대/소분류 매핑용)
const trendData = ref([]) // [{month, netWorth}] const trendData = ref([]) // [{month, netWorth}]
const aiBullets = ref([]) // AI 재무 코멘트 문장들 const aiBullets = ref([]) // AI 재무 코멘트(현황 관찰)
const aiTips = ref([]) // AI 절약 가이드(실행 제안)
const aiLoading = ref(false) const aiLoading = ref(false)
const periodLabel = computed(() => `${year.value}${String(month.value).padStart(2, '0')}`) const periodLabel = computed(() => `${year.value}${String(month.value).padStart(2, '0')}`)
@@ -278,6 +279,7 @@ async function load() {
async function loadAiComment() { async function loadAiComment() {
aiLoading.value = true aiLoading.value = true
aiBullets.value = [] aiBullets.value = []
aiTips.value = []
try { try {
const res = await accountApi.aiComment({ const res = await accountApi.aiComment({
year: year.value, year: year.value,
@@ -290,8 +292,10 @@ async function loadAiComment() {
categories: (catData.value || []).slice(0, 8).map((c) => ({ category: c.category, total: c.total })), categories: (catData.value || []).slice(0, 8).map((c) => ({ category: c.category, total: c.total })),
}) })
aiBullets.value = res?.bullets || [] aiBullets.value = res?.bullets || []
aiTips.value = res?.tips || []
} catch { } catch {
aiBullets.value = [] aiBullets.value = []
aiTips.value = []
} finally { } finally {
aiLoading.value = false aiLoading.value = false
} }
@@ -361,13 +365,21 @@ onMounted(async () => {
<p v-if="loading" class="msg">불러오는 중...</p> <p v-if="loading" class="msg">불러오는 중...</p>
<template v-else> <template v-else>
<!-- AI 재무 코멘트: 이번 집계 해석 --> <!-- AI 재무 코멘트 + 절약 가이드: 이번 집계 해석 -->
<div v-if="aiLoading || aiBullets.length" class="ai-comment"> <div v-if="aiLoading || aiBullets.length || aiTips.length" class="ai-comment">
<div class="ai-comment-head"> 이번 AI 코멘트</div> <div class="ai-comment-head"> 이번 AI 코멘트</div>
<p v-if="aiLoading" class="ai-comment-loading">집계를 분석하고 있어요</p> <p v-if="aiLoading" class="ai-comment-loading">집계를 분석하고 있어요</p>
<ul v-else class="ai-comment-list"> <template v-else>
<ul v-if="aiBullets.length" class="ai-comment-list">
<li v-for="(b, i) in aiBullets" :key="i">{{ b }}</li> <li v-for="(b, i) in aiBullets" :key="i">{{ b }}</li>
</ul> </ul>
<div v-if="aiTips.length" class="ai-tips">
<div class="ai-tips-head">💡 절약 가이드</div>
<ul class="ai-comment-list">
<li v-for="(t, i) in aiTips" :key="i">{{ t }}</li>
</ul>
</div>
</template>
</div> </div>
<!-- 상단: 예산 대비 지출(도넛) + 수입 대비 지출 --> <!-- 상단: 예산 대비 지출(도넛) + 수입 대비 지출 -->
@@ -616,6 +628,17 @@ h2 {
font-size: 0.9rem; font-size: 0.9rem;
line-height: 1.45; line-height: 1.45;
} }
.ai-tips {
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px dashed hsla(160, 100%, 37%, 0.35);
}
.ai-tips-head {
font-weight: 700;
font-size: 0.88rem;
color: #b8860b;
margin-bottom: 0.4rem;
}
.panel-head { .panel-head {
display: flex; display: flex;
align-items: center; align-items: center;