feat: 게시판 공지 UI (관리자) — 작성 체크박스/상세 토글/목록 배지

- BoardWriteView: 관리자가 커뮤니티 새 글 작성 시 '공지로 등록' 체크박스
- BoardDetailView: 관리자 공지 등록/해제 버튼 + 제목 공지 배지
- BoardListView: 공지 배지 + 행 강조(최상단은 백엔드 정렬)
- boardApi: setNotice/unsetNotice

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ByungCheol
2026-06-27 22:07:03 +09:00
parent ef1d718fb8
commit f07cb349e2
4 changed files with 76 additions and 2 deletions
+27 -1
View File
@@ -80,6 +80,15 @@ async function unblockPost() {
}
}
async function setNoticePost(on) {
try {
await (on ? boardApi.setNotice(postId) : boardApi.unsetNotice(postId))
await load()
} catch (e) {
alert(e.response?.data?.message || '처리에 실패했습니다.')
}
}
async function addComment() {
const content = commentText.value.trim()
if (!content) return
@@ -115,7 +124,7 @@ onMounted(load)
<article v-if="post">
<header class="post-head">
<h1>{{ post.title }}</h1>
<h1><span v-if="post.notice" class="notice-badge">공지</span>{{ post.title }}</h1>
<div class="meta">
<span>{{ post.authorName }}</span>
<span>· {{ formatRelative(post.createdAt) }}</span>
@@ -144,6 +153,9 @@ onMounted(load)
<div class="actions">
<IconBtn icon="back" title="목록" @click="router.push(`/board/${category}`)" />
<div class="right-actions">
<!-- 관리자 공지 설정/해제 (커뮤니티) -->
<button v-if="isAdmin && category === 'community' && !post.notice" type="button" class="notice-btn" @click="setNoticePost(true)">공지 등록</button>
<button v-if="isAdmin && category === 'community' && post.notice" type="button" class="notice-btn" @click="setNoticePost(false)">공지 해제</button>
<!-- 관리자 제한/해제 -->
<button v-if="isAdmin && !post.blocked" type="button" class="warn" @click="blockPost">열람 제한</button>
<button v-if="isAdmin && post.blocked" type="button" class="warn" @click="unblockPost">제한 해제</button>
@@ -268,6 +280,20 @@ button.warn {
border-color: #e67e22;
color: #e67e22;
}
button.notice-btn {
border-color: hsla(160, 100%, 37%, 1);
color: hsla(160, 100%, 37%, 1);
}
.notice-badge {
margin-right: 0.4rem;
padding: 0.1rem 0.45rem;
border-radius: 4px;
background: hsla(160, 100%, 37%, 1);
color: #fff;
font-size: 0.8rem;
font-weight: 700;
vertical-align: middle;
}
.actions {
display: flex;
justify-content: space-between;