ByungCheol
dd17fae5f4
CI / build (push) Failing after 14m11s
- 관리자 전용 기본 분류 관리 화면(DefaultCategoryView, 계층 드래그) + 라우트/사이드바 링크 - adminApi 기본분류 CRUD/reorder - CategoryView '기존 분류 불러오기' → '기본 분류 불러오기'(관리자 정의 분류 복사) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
108 lines
3.1 KiB
Vue
108 lines
3.1 KiB
Vue
<script setup>
|
||
import { RouterLink } from 'vue-router'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
import { useUiStore } from '@/stores/ui'
|
||
import { BOARDS } from '@/constants/boards'
|
||
|
||
const auth = useAuthStore()
|
||
const ui = useUiStore()
|
||
</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">
|
||
<!-- 가계부 영역 (홈은 하단 내비게이션으로 이동) -->
|
||
<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>
|
||
|
||
<!-- 게시판 영역 -->
|
||
<hr class="menu-divider" />
|
||
<RouterLink
|
||
v-for="b in BOARDS"
|
||
:key="b.key"
|
||
:to="`/board/${b.key}`"
|
||
class="menu-item"
|
||
>{{ b.label }}</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>
|
||
</template>
|
||
</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-divider {
|
||
border: 0;
|
||
border-top: 1px solid var(--color-border);
|
||
margin: 0.5rem 1.5rem;
|
||
}
|
||
.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;
|
||
}
|
||
</style>
|