From 59a17f9087f7db325f7694c2b9e7dfabde58d91c Mon Sep 17 00:00:00 2001
From: sb <sb@MacBook-Pro.local>
Date: Sun, 5 Jul 2026 15:34:23 +0900
Subject: [PATCH] =?UTF-8?q?feat(stats):=20AI=20=EC=BD=94=EB=A9=98=ED=8A=B8?=
 =?UTF-8?q?=20=EB=A1=9C=EB=94=A9=20=EC=9D=B8=EB=94=94=EC=BC=80=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=EB=B0=94=20+=20=EC=98=88=EC=83=81=EC=A7=80?=
 =?UTF-8?q?=EC=B6=9C=20'=EA=B3=84=EC=82=B0=20=EC=A4=91'=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C?=
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 | 39 +++++++++++++++++++---
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/views/account/AccountDashboardView.vue b/src/views/account/AccountDashboardView.vue
index f6d62b4..4e9f0ca 100644
--- a/src/views/account/AccountDashboardView.vue
+++ b/src/views/account/AccountDashboardView.vue
@@ -371,7 +371,10 @@ onMounted(async () => {
       <!-- 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>
+        <div v-if="aiLoading" class="ai-loading">
+          <span class="ai-loading-text">집계를 분석하고 있어요…</span>
+          <div class="ai-loading-bar"><span></span></div>
+        </div>
         <template v-else>
           <ul v-if="aiBullets.length" class="ai-comment-list">
             <li v-for="(b, i) in aiBullets" :key="i">{{ b }}</li>
@@ -420,7 +423,11 @@ onMounted(async () => {
                 {{ expenseDelta.diff >= 0 ? '+' : '' }}{{ won(expenseDelta.diff) }}<template v-if="expenseDelta.pct !== null"> ({{ expenseDelta.pct >= 0 ? '+' : '' }}{{ expenseDelta.pct }}%)</template>
               </b>
             </div>
-            <div v-if="aiForecast" class="ie-row forecast">
+            <div v-if="aiLoading && !aiForecast" class="ie-row forecast">
+              <span>예상 지출 <small>AI 계산 중…</small></span>
+              <b class="pending">···</b>
+            </div>
+            <div v-else-if="aiForecast" class="ie-row forecast">
               <span>예상 지출 <small>월말 추정 · AI</small></span>
               <b class="expense">{{ won(aiForecast) }}</b>
             </div>
@@ -612,10 +619,32 @@ h2 {
   color: hsla(160, 100%, 32%, 1);
   margin-bottom: 0.5rem;
 }
-.ai-comment-loading {
+.ai-loading-text {
   font-size: 0.85rem;
-  opacity: 0.6;
-  margin: 0;
+  opacity: 0.65;
+}
+.ai-loading-bar {
+  height: 4px;
+  margin-top: 0.45rem;
+  border-radius: 999px;
+  background: hsla(160, 100%, 37%, 0.15);
+  overflow: hidden;
+}
+.ai-loading-bar > span {
+  display: block;
+  width: 40%;
+  height: 100%;
+  border-radius: 999px;
+  background: hsla(160, 100%, 37%, 0.85);
+  animation: ai-indeterminate 1.1s ease-in-out infinite;
+}
+@keyframes ai-indeterminate {
+  0% { transform: translateX(-110%); }
+  100% { transform: translateX(360%); }
+}
+.ie-row .pending {
+  opacity: 0.4;
+  letter-spacing: 2px;
 }
 .ai-comment-list {
   margin: 0;