From 9f9fc14c644e3ca383448d5bb495a0151865b9c3 Mon Sep 17 00:00:00 2001
From: sb <sb@MacBook-Pro.local>
Date: Sun, 5 Jul 2026 15:19:59 +0900
Subject: [PATCH] =?UTF-8?q?refactor(stats):=20=EC=98=88=EC=82=B0=C2=B7?=
 =?UTF-8?q?=EC=88=98=EC=9E=85=20=EB=8C=80=EB=B9=84=20=EC=A7=80=EC=B6=9C?=
 =?UTF-8?q?=EC=9D=84=20'=EC=9D=B4=EB=B2=88=20=EB=8B=AC=20=ED=98=84?=
 =?UTF-8?q?=ED=99=A9'=20=EB=8B=A8=EC=9D=BC=20=ED=8C=A8=EB=84=90=EB=A1=9C?=
 =?UTF-8?q?=20=ED=86=B5=ED=95=A9?=
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 | 33 +++++++++++++++++-----
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/views/account/AccountDashboardView.vue b/src/views/account/AccountDashboardView.vue
index 8106680..d03c308 100644
--- a/src/views/account/AccountDashboardView.vue
+++ b/src/views/account/AccountDashboardView.vue
@@ -382,10 +382,11 @@ onMounted(async () => {
         </template>
       </div>
 
-      <!-- 상단: 예산 대비 지출(도넛) + 수입 대비 지출 -->
-      <div class="top-grid">
-        <div class="panel donut-panel">
-          <h2>예산 대비 지출</h2>
+      <!-- 이번 달 현황 (예산 도넛 + 수입/지출 통합) -->
+      <div class="panel month-overview">
+        <h2>이번 달 현황</h2>
+        <div class="mo-grid">
+          <div class="mo-budget">
           <div v-if="budgetTotal > 0" class="donut-wrap">
             <svg viewBox="0 0 120 120" class="donut">
               <circle cx="60" cy="60" :r="R" fill="none" stroke="var(--color-background-mute)" stroke-width="14" />
@@ -405,10 +406,8 @@ onMounted(async () => {
             </div>
           </div>
           <p v-else class="empty">설정된 예산이 없습니다.</p>
-        </div>
+          </div>
 
-        <div class="panel">
-          <h2>수입 대비 지출</h2>
           <div class="ie">
             <div class="ie-row"><span>수입</span><b class="income">{{ won(monthIncome) }}</b></div>
             <div class="ie-row"><span>지출</span><b class="expense">{{ won(monthExpense) }}</b></div>
@@ -652,6 +651,26 @@ h2 {
 .top-grid .panel {
   margin-bottom: 1rem;
 }
+/* 이번 달 현황: 예산 도넛 + 수입/지출을 한 패널에 좌우로 */
+.month-overview .mo-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem 1.5rem;
+  align-items: center;
+}
+.mo-budget {
+  min-width: 0;
+}
+@media (max-width: 700px) {
+  .month-overview .mo-grid {
+    grid-template-columns: 1fr;
+    gap: 0.9rem;
+  }
+  .mo-budget {
+    border-bottom: 1px solid var(--color-border);
+    padding-bottom: 0.9rem;
+  }
+}
 .donut-wrap {
   display: flex;
   align-items: center;