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

- 가계부: 대시보드(예산 대비 지출·분류별 파이·기간별 막대·순자산 추이), 내역(검색·필터·태그), 계좌(은행/카드/대출/투자), 예산, 분류, 정기 거래, 태그, 투자 포트폴리오(종목·매수/매도·평가손익) - 게시판: 목록/상세/작성(마크다운)/댓글/태그/열람제한 - 공통: 인증(Bearer 토큰·401 처리), 모바일 반응형(드로어·아이콘 버튼), Slim Budget 브랜딩(로고/타이틀/푸터), 홈 대시보드 자리 - 문서: docs/FRONTEND.md Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-05-31 15:42:52 +09:00
parent 2485ea05bf
commit 13308a82ef
39 changed files with 7385 additions and 111 deletions
@@ -0,0 +1,112 @@
+<script setup>
+import { RouterLink, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { useUiStore } from '@/stores/ui'
+import IconBtn from '@/components/ui/IconBtn.vue'
+
+const auth = useAuthStore()
+const ui = useUiStore()
+const router = useRouter()
+
+async function handleLogout() {
+  await auth.logout()
+  router.replace('/')
+}
+</script>
+
+<template>
+  <header class="app-header">
+    <div class="header-left">
+      <button class="hamburger" type="button" aria-label="메뉴" @click="ui.toggleSidebar()">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <path d="M3 12h18" /><path d="M3 6h18" /><path d="M3 18h18" />
+        </svg>
+      </button>
+      <RouterLink to="/" class="brand">
+        <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true">
+          <rect width="32" height="32" rx="7" fill="#00bc7e" />
+          <g fill="#ffffff">
+            <rect x="7.5" y="17" width="3.4" height="8" rx="1.7" />
+            <rect x="14.3" y="12.5" width="3.4" height="12.5" rx="1.7" />
+            <rect x="21.1" y="8" width="3.4" height="17" rx="1.7" />
+          </g>
+        </svg>
+        <span class="brand-text">SlimBudget</span>
+      </RouterLink>
+    </div>
+
+    <div class="header-right">
+      <template v-if="auth.isAuthenticated">
+        <span class="username">{{ auth.user?.name || auth.user?.loginId }}님</span>
+        <IconBtn icon="logout" title="로그아웃" @click="handleLogout" />
+      </template>
+      <IconBtn v-else icon="login" title="로그인" variant="primary" @click="ui.openLogin()" />
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 56px;
+  padding: 0 1.5rem;
+  background: var(--color-background-soft);
+  border-bottom: 1px solid var(--color-border);
+}
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.hamburger {
+  display: none;
+  padding: 0.3rem;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  cursor: pointer;
+  line-height: 0;
+}
+.hamburger svg {
+  width: 22px;
+  height: 22px;
+}
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: var(--color-heading);
+}
+.brand:hover {
+  background: transparent;
+}
+.brand-mark {
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+}
+.brand-text {
+  letter-spacing: -0.01em;
+}
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.username {
+  font-size: 0.9rem;
+}
+
+@media (max-width: 768px) {
+  .hamburger {
+    display: inline-flex;
+  }
+  .app-header {
+    padding: 0 1rem;
+  }
+}
+</style>