From a9d4ea8410cc35a16047579c23f5334004facbd9 Mon Sep 17 00:00:00 2001
From: sb <sb@MacBook-Pro.local>
Date: Sun, 5 Jul 2026 15:13:19 +0900
Subject: [PATCH] =?UTF-8?q?feat(account):=20=ED=86=B5=EA=B3=84=20AI=20?=
 =?UTF-8?q?=EC=BD=94=EB=A9=98=ED=8A=B8=20=EC=B9=B4=EB=93=9C=EC=97=90=20?=
 =?UTF-8?q?=EC=A0=88=EC=95=BD=20=EA=B0=80=EC=9D=B4=EB=93=9C=20=EC=84=B9?=
 =?UTF-8?q?=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/views/account/AccountDashboardView.vue | 35 ++++++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/views/account/AccountDashboardView.vue b/src/views/account/AccountDashboardView.vue
index ea58d1c..8106680 100644
--- a/src/views/account/AccountDashboardView.vue
+++ b/src/views/account/AccountDashboardView.vue
@@ -24,7 +24,8 @@ const catType = ref('EXPENSE') // 분류별 파이차트 구분
 const catData = ref([]) // [{category, total}]
 const categoryList = ref([]) // 분류 목록(대/소분류 매핑용)
 const trendData = ref([]) // [{month, netWorth}]
-const aiBullets = ref([]) // AI 재무 코멘트 문장들
+const aiBullets = ref([]) // AI 재무 코멘트(현황 관찰)
+const aiTips = ref([]) // AI 절약 가이드(실행 제안)
 const aiLoading = ref(false)
 
 const periodLabel = computed(() => `${year.value}년 ${String(month.value).padStart(2, '0')}월`)
@@ -278,6 +279,7 @@ async function load() {
 async function loadAiComment() {
   aiLoading.value = true
   aiBullets.value = []
+  aiTips.value = []
   try {
     const res = await accountApi.aiComment({
       year: year.value,
@@ -290,8 +292,10 @@ async function loadAiComment() {
       categories: (catData.value || []).slice(0, 8).map((c) => ({ category: c.category, total: c.total })),
     })
     aiBullets.value = res?.bullets || []
+    aiTips.value = res?.tips || []
   } catch {
     aiBullets.value = []
+    aiTips.value = []
   } finally {
     aiLoading.value = false
   }
@@ -361,13 +365,21 @@ onMounted(async () => {
     <p v-if="loading" class="msg">불러오는 중...</p>
 
     <template v-else>
-      <!-- AI 재무 코멘트: 이번 달 집계 해석 -->
-      <div v-if="aiLoading || aiBullets.length" class="ai-comment">
+      <!-- AI 재무 코멘트 + 절약 가이드: 이번 달 집계 해석 -->
+      <div v-if="aiLoading || aiBullets.length || aiTips.length" class="ai-comment">
         <div class="ai-comment-head">✨ 이번 달 AI 코멘트</div>
         <p v-if="aiLoading" class="ai-comment-loading">집계를 분석하고 있어요…</p>
-        <ul v-else class="ai-comment-list">
-          <li v-for="(b, i) in aiBullets" :key="i">{{ b }}</li>
-        </ul>
+        <template v-else>
+          <ul v-if="aiBullets.length" class="ai-comment-list">
+            <li v-for="(b, i) in aiBullets" :key="i">{{ b }}</li>
+          </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>
 
       <!-- 상단: 예산 대비 지출(도넛) + 수입 대비 지출 -->
@@ -616,6 +628,17 @@ h2 {
   font-size: 0.9rem;
   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 {
   display: flex;
   align-items: center;