From dbe255cf1c9de7ad8eb3305801aaa66e0c208862 Mon Sep 17 00:00:00 2001
From: ByungCheol <kenneth73510@nurier.co.kr>
Date: Sat, 27 Jun 2026 19:56:01 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4=EC=97=90=20=EC=95=84=EC=9D=B4=EC=BD=98=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20(lucide=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EC=9D=B8=EB=9D=BC=EC=9D=B8=20SVG)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 가계부/게시판/관리자 각 메뉴 항목에 18px 아이콘, 하단 내비와 톤 통일
- .menu-item flex 정렬, 활성 항목 아이콘 강조

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/layout/AppSidebar.vue | 81 ++++++++++++++++++++++++----
 1 file changed, 70 insertions(+), 11 deletions(-)

diff --git a/src/components/layout/AppSidebar.vue b/src/components/layout/AppSidebar.vue
index 42c0b56..12a0951 100644
--- a/src/components/layout/AppSidebar.vue
+++ b/src/components/layout/AppSidebar.vue
@@ -6,6 +6,20 @@ import { BOARDS } from '@/constants/boards'
 
 const auth = useAuthStore()
 const ui = useUiStore()
+
+// 메뉴 아이콘 (lucide 스타일 인라인 SVG path — 하단 내비와 동일 톤). 값은 정적/신뢰 마크업.
+const icons = {
+  entries: '<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>',
+  stats: '<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>',
+  recurrings: '<polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/>',
+  wallets: '<rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/>',
+  categories: '<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>',
+  budget: '<path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/>',
+  tags: '<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/>',
+  board: '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
+  users: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
+  sliders: '<line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>',
+}
 </script>
 
 <template>
@@ -17,13 +31,34 @@ const ui = useUiStore()
     <nav class="menu">
       <!-- 가계부 영역 (홈은 하단 내비게이션으로 이동) -->
       <template v-if="auth.isAuthenticated">
-        <RouterLink to="/account/entries" class="menu-item">가계부 내역</RouterLink>
-        <RouterLink to="/account/stats" class="menu-item">통계</RouterLink>
-        <RouterLink to="/account/recurrings" class="menu-item">고정 지출</RouterLink>
-        <RouterLink to="/account/wallets" class="menu-item">계좌 관리</RouterLink>
-        <RouterLink to="/account/categories" class="menu-item">분류 관리</RouterLink>
-        <RouterLink to="/account/budget" class="menu-item">예산 설정</RouterLink>
-        <RouterLink to="/account/tags" class="menu-item">태그 관리</RouterLink>
+        <RouterLink to="/account/entries" class="menu-item">
+          <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.entries" />
+          <span>가계부 내역</span>
+        </RouterLink>
+        <RouterLink to="/account/stats" class="menu-item">
+          <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.stats" />
+          <span>통계</span>
+        </RouterLink>
+        <RouterLink to="/account/recurrings" class="menu-item">
+          <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.recurrings" />
+          <span>고정 지출</span>
+        </RouterLink>
+        <RouterLink to="/account/wallets" class="menu-item">
+          <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.wallets" />
+          <span>계좌 관리</span>
+        </RouterLink>
+        <RouterLink to="/account/categories" class="menu-item">
+          <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.categories" />
+          <span>분류 관리</span>
+        </RouterLink>
+        <RouterLink to="/account/budget" class="menu-item">
+          <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.budget" />
+          <span>예산 설정</span>
+        </RouterLink>
+        <RouterLink to="/account/tags" class="menu-item">
+          <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.tags" />
+          <span>태그 관리</span>
+        </RouterLink>
 
         <!-- 게시판 영역 -->
         <hr class="menu-divider" />
@@ -32,15 +67,27 @@ const ui = useUiStore()
           :key="b.key"
           :to="`/board/${b.key}`"
           class="menu-item"
-        >{{ b.label }}</RouterLink>
+        >
+          <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.board" />
+          <span>{{ b.label }}</span>
+        </RouterLink>
       </template>
 
       <!-- 관리자 영역 -->
       <template v-if="auth.user?.role === 'ADMIN'">
         <hr class="menu-divider" />
-        <RouterLink to="/users" class="menu-item">회원 관리</RouterLink>
-        <RouterLink to="/admin/tags" class="menu-item">태그 관리(관리자)</RouterLink>
-        <RouterLink to="/admin/default-categories" class="menu-item">기본 분류 설정</RouterLink>
+        <RouterLink to="/users" class="menu-item">
+          <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.users" />
+          <span>회원 관리</span>
+        </RouterLink>
+        <RouterLink to="/admin/tags" class="menu-item">
+          <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.tags" />
+          <span>태그 관리(관리자)</span>
+        </RouterLink>
+        <RouterLink to="/admin/default-categories" class="menu-item">
+          <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" v-html="icons.sliders" />
+          <span>기본 분류 설정</span>
+        </RouterLink>
       </template>
     </nav>
   </aside>
@@ -85,10 +132,22 @@ const ui = useUiStore()
   flex-direction: column;
 }
 .menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
   padding: 0.7rem 1.5rem;
   color: var(--color-text);
   font-size: 0.95rem;
 }
+.menu-icon {
+  width: 18px;
+  height: 18px;
+  flex: none;
+  opacity: 0.8;
+}
+.menu-item.router-link-exact-active .menu-icon {
+  opacity: 1;
+}
 .menu-divider {
   border: 0;
   border-top: 1px solid var(--color-border);