From 751ca1e9b73b062d35fdaf5b5992429d1546888f Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Thu, 13 Aug 2026 17:25:49 +0900
Subject: [PATCH] Fix navigation icon rendering

---
 docs/changelog.md   |  1 +
 layouts/default.vue | 24 ++++++++++++++++++------
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/docs/changelog.md b/docs/changelog.md
index df6ce05..77c5a3b 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -29,3 +29,4 @@
 - 내역 화면의 선택일 요약 박스를 제거하고 날짜별 수입/지출 금액을 주간 날짜 셀 안에 작게 표시했다.
 - 월 지출 하단 설명을 수입/차액 대신 지난달 대비 지출 비교 문구로 단순화했다.
 - 하단 네비게이션과 PC 사이드바에 SVG 메뉴 아이콘을 적용하고 활성 탭 색상을 명확하게 표시했다.
+- SVG 메뉴 아이콘이 사각형으로 보이는 문제를 수정하고 활성 아이콘 배경을 추가했다.
diff --git a/layouts/default.vue b/layouts/default.vue
index 9df8ad3..bb5f6da 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -16,7 +16,13 @@
           class="mb-2 flex min-h-12 items-center gap-3 rounded-md px-4 text-sm font-semibold"
           :class="isActive(item.to) ? 'bg-red-50 text-red-600' : 'text-muted hover:bg-paper'"
         >
-          <span class="h-6 w-6 bg-current" :style="iconStyle(item.icon)" aria-hidden="true" />
+          <span
+            class="flex h-8 w-8 items-center justify-center rounded-md"
+            :class="isActive(item.to) ? 'bg-red-100' : ''"
+            aria-hidden="true"
+          >
+            <span class="h-6 w-6 bg-current" :style="iconStyle(item.icon)" />
+          </span>
           <span>{{ item.label }}</span>
         </NuxtLink>
       </nav>
@@ -39,7 +45,13 @@
           class="flex min-h-14 flex-col items-center justify-center gap-0.5 text-[11px] font-bold"
           :class="isActive(item.to) ? 'text-red-600' : 'text-muted'"
         >
-          <span class="h-6 w-6 bg-current" :style="iconStyle(item.icon)" aria-hidden="true" />
+          <span
+            class="flex h-7 w-7 items-center justify-center rounded-md"
+            :class="isActive(item.to) ? 'bg-red-50' : ''"
+            aria-hidden="true"
+          >
+            <span class="h-5 w-5 bg-current" :style="iconStyle(item.icon)" />
+          </span>
           <span>{{ item.label }}</span>
         </NuxtLink>
       </div>
@@ -56,10 +68,10 @@
 </template>
 
 <script setup lang="ts">
-import assetIcon from '~/assets/icons/account_balance_wallet.svg'
-import reportIcon from '~/assets/icons/bar_chart.svg'
-import receiptIcon from '~/assets/icons/receipt_long.svg'
-import settingsIcon from '~/assets/icons/settings.svg'
+import assetIcon from '~/assets/icons/account_balance_wallet.svg?url'
+import reportIcon from '~/assets/icons/bar_chart.svg?url'
+import receiptIcon from '~/assets/icons/receipt_long.svg?url'
+import settingsIcon from '~/assets/icons/settings.svg?url'
 
 const route = useRoute()