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,184 @@
|
||||
<script setup>
|
||||
import { reactive, ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useUiStore } from '@/stores/ui'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const ui = useUiStore()
|
||||
const router = useRouter()
|
||||
|
||||
// 로그인 닫고 회원가입 팝업 열기
|
||||
function goSignup() {
|
||||
ui.openSignup()
|
||||
}
|
||||
|
||||
const form = reactive({ loginId: '', password: '' })
|
||||
const loading = ref(false)
|
||||
const error = ref(null)
|
||||
|
||||
// 팝업이 열릴 때마다 입력값 초기화
|
||||
watch(
|
||||
() => ui.loginOpen,
|
||||
(open) => {
|
||||
if (open) {
|
||||
form.loginId = ''
|
||||
form.password = ''
|
||||
error.value = null
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
async function handleLogin() {
|
||||
error.value = null
|
||||
if (!form.loginId || !form.password) {
|
||||
error.value = '아이디와 비밀번호를 입력하세요.'
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
await auth.login(form.loginId, form.password)
|
||||
const redirect = ui.redirectPath
|
||||
ui.closeLogin()
|
||||
if (redirect) router.push(redirect)
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.message || '로그인에 실패했습니다.'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleNaverLogin() {
|
||||
alert('네이버 로그인은 준비 중입니다.')
|
||||
}
|
||||
|
||||
// ESC 로 닫기
|
||||
function onKeydown(e) {
|
||||
if (e.key === 'Escape' && ui.loginOpen) ui.closeLogin()
|
||||
}
|
||||
onMounted(() => window.addEventListener('keydown', onKeydown))
|
||||
onUnmounted(() => window.removeEventListener('keydown', onKeydown))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="fade">
|
||||
<div v-if="ui.loginOpen" class="modal-backdrop" @click.self="ui.closeLogin()">
|
||||
<div class="modal" role="dialog" aria-modal="true" aria-label="로그인">
|
||||
<button class="close" type="button" aria-label="닫기" @click="ui.closeLogin()">×</button>
|
||||
<h2>로그인</h2>
|
||||
|
||||
<form class="form" @submit.prevent="handleLogin">
|
||||
<input v-model="form.loginId" type="text" placeholder="아이디" autocomplete="username" :disabled="loading" />
|
||||
<input v-model="form.password" type="password" placeholder="비밀번호" autocomplete="current-password" :disabled="loading" />
|
||||
<button class="submit" type="submit" :disabled="loading">{{ loading ? '로그인 중...' : '로그인' }}</button>
|
||||
</form>
|
||||
|
||||
<p v-if="error" class="msg error">{{ error }}</p>
|
||||
|
||||
<button type="button" class="naver" :disabled="loading" @click="handleNaverLogin">
|
||||
네이버로 로그인 (준비 중)
|
||||
</button>
|
||||
|
||||
<p class="links">
|
||||
계정이 없으신가요?
|
||||
<a href="#" @click.prevent="goSignup">회원가입</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 1rem;
|
||||
}
|
||||
.modal {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
padding: 1.75rem 1.5rem 1.5rem;
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.6rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: 1.25rem;
|
||||
font-size: 1.3rem;
|
||||
text-align: center;
|
||||
}
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.form input {
|
||||
padding: 0.6rem 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-background-soft);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.submit,
|
||||
.naver {
|
||||
padding: 0.6rem 1rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-background-soft);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
.submit:disabled,
|
||||
.naver:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.naver {
|
||||
width: 100%;
|
||||
margin-top: 0.75rem;
|
||||
border-color: #03c75a;
|
||||
color: #03c75a;
|
||||
}
|
||||
.links {
|
||||
margin-top: 1.25rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.msg {
|
||||
margin: 0.75rem 0 0;
|
||||
}
|
||||
.msg.error {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.18s ease;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,174 @@
|
||||
<script setup>
|
||||
import { reactive, ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useUiStore } from '@/stores/ui'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const ui = useUiStore()
|
||||
|
||||
const form = reactive({ loginId: '', password: '', passwordConfirm: '', name: '', email: '' })
|
||||
const loading = ref(false)
|
||||
const error = ref(null)
|
||||
|
||||
// 팝업이 열릴 때마다 입력값 초기화
|
||||
watch(
|
||||
() => ui.signupOpen,
|
||||
(open) => {
|
||||
if (open) {
|
||||
Object.assign(form, { loginId: '', password: '', passwordConfirm: '', name: '', email: '' })
|
||||
error.value = null
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
async function handleSignup() {
|
||||
error.value = null
|
||||
if (!form.loginId || !form.password || !form.name) {
|
||||
error.value = '아이디, 비밀번호, 이름은 필수입니다.'
|
||||
return
|
||||
}
|
||||
if (form.password.length < 8) {
|
||||
error.value = '비밀번호는 8자 이상이어야 합니다.'
|
||||
return
|
||||
}
|
||||
if (form.password !== form.passwordConfirm) {
|
||||
error.value = '비밀번호가 일치하지 않습니다.'
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
await auth.signup({
|
||||
loginId: form.loginId,
|
||||
password: form.password,
|
||||
name: form.name,
|
||||
email: form.email || null,
|
||||
})
|
||||
alert('회원가입이 완료되었습니다. 로그인해 주세요.')
|
||||
ui.openLogin() // 회원가입 닫고 로그인 팝업으로 전환
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.message || '회원가입에 실패했습니다.'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function onKeydown(e) {
|
||||
if (e.key === 'Escape' && ui.signupOpen) ui.closeSignup()
|
||||
}
|
||||
onMounted(() => window.addEventListener('keydown', onKeydown))
|
||||
onUnmounted(() => window.removeEventListener('keydown', onKeydown))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="fade">
|
||||
<div v-if="ui.signupOpen" class="modal-backdrop" @click.self="ui.closeSignup()">
|
||||
<div class="modal" role="dialog" aria-modal="true" aria-label="회원가입">
|
||||
<button class="close" type="button" aria-label="닫기" @click="ui.closeSignup()">×</button>
|
||||
<h2>회원가입</h2>
|
||||
|
||||
<form class="form" @submit.prevent="handleSignup">
|
||||
<input v-model="form.loginId" type="text" placeholder="아이디 (4~50자)" autocomplete="username" :disabled="loading" />
|
||||
<input v-model="form.password" type="password" placeholder="비밀번호 (8자 이상)" autocomplete="new-password" :disabled="loading" />
|
||||
<input v-model="form.passwordConfirm" type="password" placeholder="비밀번호 확인" autocomplete="new-password" :disabled="loading" />
|
||||
<input v-model="form.name" type="text" placeholder="이름" :disabled="loading" />
|
||||
<input v-model="form.email" type="email" placeholder="이메일 (선택)" autocomplete="email" :disabled="loading" />
|
||||
<button class="submit" type="submit" :disabled="loading">{{ loading ? '처리 중...' : '회원가입' }}</button>
|
||||
</form>
|
||||
|
||||
<p v-if="error" class="msg error">{{ error }}</p>
|
||||
|
||||
<p class="links">
|
||||
이미 계정이 있으신가요?
|
||||
<a href="#" @click.prevent="ui.openLogin()">로그인</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 1rem;
|
||||
}
|
||||
.modal {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
padding: 1.75rem 1.5rem 1.5rem;
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.6rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: 1.25rem;
|
||||
font-size: 1.3rem;
|
||||
text-align: center;
|
||||
}
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.form input {
|
||||
padding: 0.6rem 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-background-soft);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.submit {
|
||||
padding: 0.6rem 1rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-background-soft);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
.submit:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.links {
|
||||
margin-top: 1.25rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.msg {
|
||||
margin: 0.75rem 0 0;
|
||||
}
|
||||
.msg.error {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.18s ease;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
|
||||
import Editor from '@toast-ui/editor'
|
||||
import '@toast-ui/editor/dist/toastui-editor.css'
|
||||
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all'
|
||||
import 'prismjs/themes/prism-tomorrow.css'
|
||||
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: { type: String, default: '' },
|
||||
height: { type: String, default: '400px' },
|
||||
placeholder: { type: String, default: '' },
|
||||
initialEditType: { type: String, default: 'wysiwyg' }, // 'markdown' | 'wysiwyg'
|
||||
})
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const el = ref(null)
|
||||
let editor = null
|
||||
|
||||
onMounted(() => {
|
||||
editor = new Editor({
|
||||
el: el.value,
|
||||
height: props.height,
|
||||
initialEditType: props.initialEditType,
|
||||
hideModeSwitch: true, // 마크다운/위지윅 전환 탭 숨김 (WYSIWYG 전용)
|
||||
plugins: [codeSyntaxHighlight], // 코드 구문 강조
|
||||
initialValue: props.modelValue || '',
|
||||
placeholder: props.placeholder,
|
||||
usageStatistics: false,
|
||||
autofocus: false,
|
||||
events: {
|
||||
change: () => emit('update:modelValue', editor.getMarkdown()),
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
// 외부 값 변경(수정 로드, 제출 후 초기화 등)을 에디터에 반영 (입력 중 루프 방지 가드)
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (editor && (val || '') !== editor.getMarkdown()) {
|
||||
editor.setMarkdown(val || '')
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
editor?.destroy()
|
||||
editor = null
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="el"></div>
|
||||
</template>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
|
||||
import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer'
|
||||
import '@toast-ui/editor/dist/toastui-editor-viewer.css'
|
||||
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all'
|
||||
import 'prismjs/themes/prism-tomorrow.css'
|
||||
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css'
|
||||
|
||||
const props = defineProps({
|
||||
content: { type: String, default: '' },
|
||||
})
|
||||
|
||||
const el = ref(null)
|
||||
let viewer = null
|
||||
|
||||
// 렌더된 코드 블록(pre)에 Copy 버튼 주입
|
||||
function enhanceCodeBlocks() {
|
||||
if (!el.value) return
|
||||
el.value.querySelectorAll('pre').forEach((pre) => {
|
||||
if (pre.querySelector('.code-copy-btn')) return
|
||||
const btn = document.createElement('button')
|
||||
btn.type = 'button'
|
||||
btn.className = 'code-copy-btn'
|
||||
btn.textContent = 'Copy'
|
||||
btn.addEventListener('click', () => {
|
||||
const code = pre.querySelector('code')?.innerText ?? pre.innerText
|
||||
navigator.clipboard?.writeText(code).then(() => {
|
||||
btn.textContent = 'Copied!'
|
||||
setTimeout(() => (btn.textContent = 'Copy'), 1500)
|
||||
})
|
||||
})
|
||||
pre.appendChild(btn)
|
||||
})
|
||||
}
|
||||
|
||||
async function render(markdown) {
|
||||
viewer?.setMarkdown(markdown || '')
|
||||
await nextTick()
|
||||
enhanceCodeBlocks()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
viewer = new Viewer({
|
||||
el: el.value,
|
||||
initialValue: props.content || '',
|
||||
plugins: [codeSyntaxHighlight],
|
||||
})
|
||||
await nextTick()
|
||||
enhanceCodeBlocks()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.content,
|
||||
(val) => render(val),
|
||||
)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
viewer?.destroy()
|
||||
viewer = null
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="el"></div>
|
||||
</template>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,116 @@
|
||||
<script setup>
|
||||
// 공통 아이콘 버튼. 텍스트 대신 아이콘으로 액션 표기 (모바일 대응).
|
||||
// 사용: <IconBtn icon="edit" title="수정" variant="default" @click="..." />
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
icon: { type: String, required: true },
|
||||
title: { type: String, default: '' },
|
||||
variant: { type: String, default: 'default' }, // default | primary | danger | ghost | buy | sell
|
||||
size: { type: String, default: 'md' }, // sm | md
|
||||
disabled: { type: Boolean, default: false },
|
||||
type: { type: String, default: 'button' }, // button | submit
|
||||
})
|
||||
|
||||
// feather 스타일 24x24 stroke 아이콘 path 모음
|
||||
const ICONS = {
|
||||
plus: ['M12 5v14', 'M5 12h14'],
|
||||
minus: ['M5 12h14'],
|
||||
edit: ['M12 20h9', 'M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'],
|
||||
trash: ['M3 6h18', 'M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2', 'M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'],
|
||||
check: ['M20 6L9 17l-5-5'],
|
||||
close: ['M18 6L6 18', 'M6 6l12 12'],
|
||||
search: ['M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z', 'M21 21l-4.35-4.35'],
|
||||
chevronLeft: ['M15 18l-6-6 6-6'],
|
||||
chevronRight: ['M9 18l6-6-6-6'],
|
||||
chevronDown: ['M6 9l6 6 6-6'],
|
||||
refresh: ['M23 4v6h-6', 'M1 20v-6h6', 'M3.51 9a9 9 0 0 1 14.85-3.36L23 10', 'M1 14l4.64 4.36A9 9 0 0 0 20.49 15'],
|
||||
filter: ['M22 3H2l8 9.46V19l4 2v-8.54L22 3z'],
|
||||
menu: ['M3 12h18', 'M3 6h18', 'M3 18h18'],
|
||||
back: ['M19 12H5', 'M12 19l-7-7 7-7'],
|
||||
logout: ['M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4', 'M16 17l5-5-5-5', 'M21 12H9'],
|
||||
login: ['M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4', 'M10 17l5-5-5-5', 'M15 12H3'],
|
||||
cart: ['M9 22a1 1 0 1 0 0-2 1 1 0 0 0 0 2z', 'M20 22a1 1 0 1 0 0-2 1 1 0 0 0 0 2z', 'M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'],
|
||||
send: ['M22 2L11 13', 'M22 2l-7 20-4-9-9-4 20-7z'],
|
||||
save: ['M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z', 'M17 21v-8H7v8', 'M7 3v5h8'],
|
||||
}
|
||||
|
||||
const paths = computed(() => ICONS[props.icon] || ICONS.plus)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
:type="type"
|
||||
class="icon-btn"
|
||||
:class="[`v-${variant}`, `s-${size}`]"
|
||||
:title="title"
|
||||
:aria-label="title"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path v-for="(d, i) in paths" :key="i" :d="d" />
|
||||
</svg>
|
||||
<span v-if="$slots.default" class="icon-label"><slot /></span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.4rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
background: var(--color-background-soft);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
line-height: 0;
|
||||
}
|
||||
.icon-btn.s-md svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.icon-btn.s-sm {
|
||||
padding: 0.3rem;
|
||||
}
|
||||
.icon-btn.s-sm svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.icon-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.icon-btn:hover:not(:disabled) {
|
||||
border-color: var(--color-border-hover);
|
||||
}
|
||||
.icon-label {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.icon-btn.v-primary {
|
||||
border-color: hsla(160, 100%, 37%, 1);
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
}
|
||||
.icon-btn.v-danger {
|
||||
border-color: #c0392b;
|
||||
color: #c0392b;
|
||||
}
|
||||
.icon-btn.v-buy {
|
||||
border-color: #2e7d32;
|
||||
color: #2e7d32;
|
||||
}
|
||||
.icon-btn.v-sell {
|
||||
border-color: #c0392b;
|
||||
color: #c0392b;
|
||||
}
|
||||
.icon-btn.v-ghost {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
.icon-btn.v-ghost:hover:not(:disabled) {
|
||||
background: var(--color-background-mute);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user