feat: 가계부·게시판 프론트엔드 구현 + Slim Budget 브랜딩/모바일 대응
- 가계부: 대시보드(예산 대비 지출·분류별 파이·기간별 막대·순자산 추이), 내역(검색·필터·태그), 계좌(은행/카드/대출/투자), 예산, 분류, 정기 거래, 태그, 투자 포트폴리오(종목·매수/매도·평가손익) - 게시판: 목록/상세/작성(마크다운)/댓글/태그/열람제한 - 공통: 인증(Bearer 토큰·401 처리), 모바일 반응형(드로어·아이콘 버튼), Slim Budget 브랜딩(로고/타이틀/푸터), 홈 대시보드 자리 - 문서: docs/FRONTEND.md Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ByungCheol
@@ -0,0 +1,21 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<footer class="app-footer">
|
||||
<span>© 2026 SlimBudget. All rights reserved.</span>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 44px;
|
||||
padding: 0 1.5rem;
|
||||
background: var(--color-background-soft);
|
||||
border-top: 1px solid var(--color-border);
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user