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,266 @@
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { adminApi } from '@/api/adminApi'
|
||||
import IconBtn from '@/components/ui/IconBtn.vue'
|
||||
|
||||
const categories = ref([])
|
||||
const loading = ref(false)
|
||||
const error = ref(null)
|
||||
|
||||
const newCategoryName = ref('')
|
||||
const newTag = reactive({}) // { [categoryId]: '입력값' }
|
||||
const boardCategoryId = ref('') // 게시판에서 사용할 카테고리 ('' = 제한 없음)
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
categories.value = await adminApi.categories()
|
||||
categories.value.forEach((c) => {
|
||||
if (newTag[c.id] === undefined) newTag[c.id] = ''
|
||||
})
|
||||
const setting = await adminApi.getBoardSetting()
|
||||
boardCategoryId.value = setting.tagCategoryId ?? ''
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.message || '불러오지 못했습니다.'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function saveBoardSetting() {
|
||||
try {
|
||||
const id = boardCategoryId.value === '' ? null : Number(boardCategoryId.value)
|
||||
await adminApi.setBoardSetting(id)
|
||||
alert('게시판 사용 카테고리를 저장했습니다.')
|
||||
} catch (e) {
|
||||
alert(e.response?.data?.message || '저장 실패')
|
||||
}
|
||||
}
|
||||
|
||||
async function addCategory() {
|
||||
const name = newCategoryName.value.trim()
|
||||
if (!name) return
|
||||
try {
|
||||
await adminApi.createCategory({ name, sortOrder: categories.value.length })
|
||||
newCategoryName.value = ''
|
||||
await load()
|
||||
} catch (e) {
|
||||
alert(e.response?.data?.message || '카테고리 추가 실패')
|
||||
}
|
||||
}
|
||||
|
||||
async function saveCategory(cat) {
|
||||
const name = (cat.name || '').trim()
|
||||
if (!name) return
|
||||
try {
|
||||
await adminApi.updateCategory(cat.id, { name, sortOrder: cat.sortOrder })
|
||||
await load()
|
||||
} catch (e) {
|
||||
alert(e.response?.data?.message || '카테고리 수정 실패')
|
||||
}
|
||||
}
|
||||
|
||||
async function removeCategory(cat) {
|
||||
if (!confirm(`'${cat.name}' 카테고리와 소속 태그를 모두 삭제할까요?`)) return
|
||||
try {
|
||||
await adminApi.removeCategory(cat.id)
|
||||
await load()
|
||||
} catch (e) {
|
||||
alert(e.response?.data?.message || '삭제 실패')
|
||||
}
|
||||
}
|
||||
|
||||
async function addTag(cat) {
|
||||
const name = (newTag[cat.id] || '').trim()
|
||||
if (!name) return
|
||||
try {
|
||||
await adminApi.createTag({ name, categoryId: cat.id })
|
||||
newTag[cat.id] = ''
|
||||
await load()
|
||||
} catch (e) {
|
||||
alert(e.response?.data?.message || '태그 추가 실패')
|
||||
}
|
||||
}
|
||||
|
||||
async function removeTag(tag) {
|
||||
if (!confirm(`'${tag.name}' 태그를 삭제할까요?`)) return
|
||||
try {
|
||||
await adminApi.removeTag(tag.id)
|
||||
await load()
|
||||
} catch (e) {
|
||||
alert(e.response?.data?.message || '삭제 실패')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="tag-admin">
|
||||
<h1>태그 관리</h1>
|
||||
|
||||
<div class="board-setting">
|
||||
<label>게시판 사용 카테고리</label>
|
||||
<select v-model="boardCategoryId">
|
||||
<option value="">전체 허용 (제한 없음)</option>
|
||||
<option v-for="c in categories" :key="c.id" :value="c.id">{{ c.name }}</option>
|
||||
</select>
|
||||
<IconBtn icon="check" title="저장" variant="primary" @click="saveBoardSetting" />
|
||||
<span class="hint">선택 시 글쓰기에서 해당 카테고리의 태그만 사용할 수 있습니다.</span>
|
||||
</div>
|
||||
|
||||
<form class="new-category" @submit.prevent="addCategory">
|
||||
<input v-model="newCategoryName" type="text" placeholder="새 카테고리 이름 (예: 게시판, 게시판2)" />
|
||||
<IconBtn icon="plus" title="카테고리 추가" variant="primary" type="submit" />
|
||||
</form>
|
||||
|
||||
<p v-if="error" class="msg error">{{ error }}</p>
|
||||
<p v-if="loading" class="msg">불러오는 중...</p>
|
||||
|
||||
<div v-for="cat in categories" :key="cat.id" class="category-card">
|
||||
<div class="cat-head">
|
||||
<input v-model="cat.name" class="cat-name" @keyup.enter="saveCategory(cat)" />
|
||||
<IconBtn icon="check" title="이름 저장" @click="saveCategory(cat)" />
|
||||
<IconBtn icon="trash" title="카테고리 삭제" variant="danger" @click="removeCategory(cat)" />
|
||||
</div>
|
||||
|
||||
<div class="tag-list">
|
||||
<span v-for="t in cat.tags" :key="t.id" class="tag-chip">
|
||||
{{ t.name }}
|
||||
<button type="button" class="tag-x" @click="removeTag(t)">×</button>
|
||||
</span>
|
||||
<span v-if="!cat.tags.length" class="empty">태그 없음</span>
|
||||
</div>
|
||||
|
||||
<form class="new-tag" @submit.prevent="addTag(cat)">
|
||||
<input v-model="newTag[cat.id]" type="text" placeholder="태그 추가" />
|
||||
<IconBtn icon="plus" title="태그 추가" type="submit" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p v-if="!loading && !categories.length" class="msg">카테고리를 추가해 태그 관리를 시작하세요.</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tag-admin {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
input {
|
||||
padding: 0.5rem 0.7rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-background-soft);
|
||||
color: var(--color-text);
|
||||
}
|
||||
button {
|
||||
padding: 0.45rem 0.85rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-background-soft);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
button.danger {
|
||||
border-color: #c0392b;
|
||||
color: #c0392b;
|
||||
}
|
||||
.board-setting {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
background: var(--color-background-soft);
|
||||
}
|
||||
.board-setting label {
|
||||
font-weight: 600;
|
||||
}
|
||||
.board-setting select {
|
||||
padding: 0.4rem 0.6rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.board-setting .hint {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.65;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.new-category {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.new-category input {
|
||||
flex: 1;
|
||||
}
|
||||
.category-card {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.cat-head {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.cat-name {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.75rem;
|
||||
min-height: 1.8rem;
|
||||
}
|
||||
.tag-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.55rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 999px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.tag-x {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #c0392b;
|
||||
cursor: pointer;
|
||||
padding: 0 0.1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.empty {
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.new-tag {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.new-tag input {
|
||||
flex: 1;
|
||||
}
|
||||
.msg {
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
.msg.error {
|
||||
color: #c0392b;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user