feat: 가계부·게시판 프론트엔드 구현 + Slim Budget 브랜딩/모바일 대응

- 가계부: 대시보드(예산 대비 지출·분류별 파이·기간별 막대·순자산 추이),
  내역(검색·필터·태그), 계좌(은행/카드/대출/투자), 예산, 분류, 정기 거래,
  태그, 투자 포트폴리오(종목·매수/매도·평가손익)
- 게시판: 목록/상세/작성(마크다운)/댓글/태그/열람제한
- 공통: 인증(Bearer 토큰·401 처리), 모바일 반응형(드로어·아이콘 버튼),
  Slim Budget 브랜딩(로고/타이틀/푸터), 홈 대시보드 자리
- 문서: docs/FRONTEND.md

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/layout/AppSidebar.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { computed } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { useUiStore } from '@/stores/ui'
+
+const auth = useAuthStore()
+const ui = useUiStore()
+const route = useRoute()
+// 가계부 섹션에 있을 때만 하위 메뉴 노출
+const inAccount = computed(() => route.path.startsWith('/account'))
+</script>
+
+<template>
+  <aside class="app-sidebar">
+    <div class="drawer-head">
+      <span class="drawer-title">메뉴</span>
+      <button class="drawer-close" type="button" aria-label="닫기" @click="ui.closeSidebar()">×</button>
+    </div>
+    <nav class="menu">
+      <RouterLink to="/" class="menu-item">홈</RouterLink>
+      <RouterLink v-if="auth.isAuthenticated" to="/board" class="menu-item">자유게시판</RouterLink>
+      <RouterLink v-if="auth.isAuthenticated" to="/account" class="menu-item">가계부</RouterLink>
+      <template v-if="auth.isAuthenticated && inAccount">
+        <RouterLink to="/account/entries" class="menu-item sub">가계부 내역</RouterLink>
+        <RouterLink to="/account/recurrings" class="menu-item sub">정기 거래</RouterLink>
+        <RouterLink to="/account/wallets" class="menu-item sub">계좌 관리</RouterLink>
+        <RouterLink to="/account/categories" class="menu-item sub">분류 관리</RouterLink>
+        <RouterLink to="/account/budget" class="menu-item sub">예산 설정</RouterLink>
+        <RouterLink to="/account/tags" class="menu-item sub">태그 관리</RouterLink>
+      </template>
+      <RouterLink v-if="auth.isAuthenticated" to="/users" class="menu-item">사용자 관리</RouterLink>
+      <RouterLink v-if="auth.user?.role === 'ADMIN'" to="/admin/tags" class="menu-item">태그 관리</RouterLink>
+    </nav>
+  </aside>
+</template>
+
+<style scoped>
+.app-sidebar {
+  background: var(--color-background-soft);
+  border-right: 1px solid var(--color-border);
+  padding: 1rem 0;
+}
+.drawer-head {
+  display: none;
+}
+@media (max-width: 768px) {
+  .app-sidebar {
+    background: var(--color-background);
+    min-height: 100%;
+  }
+  .drawer-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem 0.75rem;
+    border-bottom: 1px solid var(--color-border);
+    margin-bottom: 0.5rem;
+  }
+  .drawer-title {
+    font-weight: 700;
+  }
+  .drawer-close {
+    border: 0;
+    background: transparent;
+    color: var(--color-text);
+    font-size: 1.6rem;
+    line-height: 1;
+    cursor: pointer;
+  }
+}
+.menu {
+  display: flex;
+  flex-direction: column;
+}
+.menu-item {
+  padding: 0.7rem 1.5rem;
+  color: var(--color-text);
+  font-size: 0.95rem;
+}
+.menu-item.sub {
+  padding: 0.5rem 1.5rem 0.5rem 2.6rem;
+  font-size: 0.88rem;
+  opacity: 0.9;
+}
+.menu-item:hover {
+  background: var(--color-background-mute);
+}
+.menu-item.router-link-exact-active {
+  color: hsla(160, 100%, 37%, 1);
+  font-weight: 600;
+  border-left: 3px solid hsla(160, 100%, 37%, 1);
+  padding-left: calc(1.5rem - 3px);
+  background: transparent;
+}
+.menu-item.sub.router-link-exact-active {
+  padding-left: calc(2.6rem - 3px);
+}
+</style>