Merge branch 'dev'

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/entries" class="menu-item">
-        <RouterLink to="/account/stats" class="menu-item">통계</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.entries" />
-        <RouterLink to="/account/recurrings" class="menu-item">고정 지출</RouterLink>
+          <span>가계부 내역</span>
-        <RouterLink to="/account/wallets" class="menu-item">계좌 관리</RouterLink>
+        </RouterLink>
-        <RouterLink to="/account/categories" class="menu-item">분류 관리</RouterLink>
+        <RouterLink to="/account/stats" class="menu-item">
-        <RouterLink to="/account/budget" class="menu-item">예산 설정</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.stats" />
-        <RouterLink to="/account/tags" class="menu-item">태그 관리</RouterLink>
+          <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="/users" class="menu-item">
-        <RouterLink to="/admin/tags" class="menu-item">태그 관리(관리자)</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.users" />
-        <RouterLink to="/admin/default-categories" class="menu-item">기본 분류 설정</RouterLink>
+          <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);

src/utils/datetime.js

@@ -1,7 +1,7 @@
 // 날짜/시간 표시 유틸
 
 /**
- * 1일 이내면 "방금 전 / N분 전 / N시간 전", 그 이상이면 YYYYMMDD 로 표시.
+ * 1시간 이내면 "방금 전 / N분 전", 1일 이내면 "N시간 전", 그 이상이면 YYYY.mm.dd 로 표시.
  */
 export function formatRelative(value) {
   if (!value) return '-'
@@ -17,7 +17,7 @@ export function formatRelative(value) {
   const diffHour = Math.floor(diffMin / 60)
   if (diffHour < 24) return `${diffHour}시간 전`
 
-  return formatYmd(date)
+  return formatYmdDot(date)
 }
 
 /** YYYYMMDD */
@@ -29,3 +29,13 @@ export function formatYmd(value) {
   const d = String(date.getDate()).padStart(2, '0')
   return `${y}${m}${d}`
 }
+
+/** YYYY.MM.DD */
+export function formatYmdDot(value) {
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) return String(value)
+  const y = date.getFullYear()
+  const m = String(date.getMonth() + 1).padStart(2, '0')
+  const d = String(date.getDate()).padStart(2, '0')
+  return `${y}.${m}.${d}`
+}