v1.10.88 품질·보안 개선과 미디어 카탈로그 database 전환을 반영한다.

세션·로그인 제한, ZIP/업로드 스트리밍, CSP 최소 강제와 Report-Only, Playwright 격리 검증을 추가하고 미디어 목록을 reconcile 후 database 모드로 고정한다.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-07-22 11:05:40 +09:00
parent 9bc0f0a90e
commit de767095ba
116 changed files with 8128 additions and 2933 deletions

View File

@@ -266,25 +266,33 @@ const handlePageSectionKeydown = (event) => {
/**
* 페이지 폼의 저장 비교용 문자열을 생성한다.
* @param {Object|null} [payload] - 서버에 저장한 페이지 입력값
* @returns {string} 직렬화된 폼 상태
*/
const serializePageForm = () => JSON.stringify({
const serializePageForm = (payload = null) => JSON.stringify(payload || {
title: form.title.trim(),
slug: pageSlug.value,
status: form.status,
renderMode: form.renderMode,
content: form.content,
isListed: form.isListed,
isFeatured: form.isFeatured,
content: form.renderMode === 'html_document' ? normalizeHtmlTagQuotes(form.content) : form.content,
featuredImage: form.listingImage.trim() || null,
isListed: Boolean(form.isListed),
isFeatured: Boolean(form.isListed && form.isFeatured),
listingSection: form.listingSection.trim(),
listingTitle: form.listingTitle.trim(),
listingDescription: form.listingDescription.trim(),
listingImage: form.listingImage.trim(),
listingSortOrder: Number(form.listingSortOrder || 0)
})
const hasUnsavedPageChanges = computed(() => serializePageForm() !== savedPageSnapshot.value)
const {
isUnsavedModalOpen,
stayOnUnsavedPage,
leaveUnsavedPage,
allowNextRouteLeave
} = useAdminUnsavedChangesGuard(hasUnsavedPageChanges)
const headerStatusText = computed(() => {
if (props.saving) {
return 'Saving...'
@@ -546,15 +554,17 @@ const submitPage = () => {
/**
* 현재 폼 상태를 저장 완료 기준점으로 표시한다.
* @param {Object|null} [savedPayload] - 실제 서버에 저장된 입력값
* @returns {void}
*/
const markSaved = () => {
savedPageSnapshot.value = serializePageForm()
const markSaved = (savedPayload = null) => {
savedPageSnapshot.value = serializePageForm(savedPayload)
}
onMounted(markSaved)
defineExpose({
allowNextRouteLeave,
markSaved
})
</script>
@@ -924,5 +934,11 @@ defineExpose({
</div>
</aside>
<AdminUnsavedChangesModal
:open="isUnsavedModalOpen"
@stay="stayOnUnsavedPage"
@leave="leaveUnsavedPage"
/>
</form>
</template>

View File

@@ -771,14 +771,14 @@ const shouldServerAutosaveDraft = computed(() => {
})
/**
* 발행·예약 글만 미저장 이탈을 막는다(초안은 서버 자동 저장·이탈 직전 플러시로 처리)
* 자동 저장할 수 없는 초안과 발행 상태 글의 미저장 이탈을 막는다.
* @returns {boolean}
*/
const isRouteLeaveDirty = computed(() => {
if (!hasUnsavedPostChanges.value) {
return false
}
if (props.saving) {
if (props.saving || props.autoSaving || isFailedDraftAutosavePayload.value || !canPersistDraftPayload.value) {
return true
}
if (['publishedLive', 'scheduled', 'members', 'private'].includes(persistedPublishKind.value)) {

View File

@@ -19,6 +19,7 @@ const replyBody = ref('')
const activeReplyTargetId = ref('')
const sortOption = ref('latest')
const brokenAvatarCommentIds = ref([])
let commentsRequestId = 0
const canSubmitComment = computed(() => Boolean(newCommentBody.value.trim()) && !submitting.value)
const canSubmitReply = computed(() => Boolean(replyBody.value.trim()) && !submittingReplyId.value)
@@ -119,22 +120,53 @@ const fetchMember = async () => {
}
}
/**
* 게시물 변경 시 댓글 입력·답글·오류 상태를 초기화한다.
* @returns {void}
*/
const resetCommentState = () => {
commentsRequestId += 1
comments.value = []
loadingComments.value = false
submitting.value = false
submittingReplyId.value = ''
likingCommentIds.value = []
errorMessage.value = ''
replyErrorMessage.value = ''
newCommentBody.value = ''
replyBody.value = ''
activeReplyTargetId.value = ''
sortOption.value = 'latest'
brokenAvatarCommentIds.value = []
}
/**
* 댓글 목록을 조회한다.
* @returns {Promise<void>}
*/
const fetchComments = async () => {
const requestId = ++commentsRequestId
const requestedSlug = props.slug
loadingComments.value = true
errorMessage.value = ''
try {
const response = await $fetch(`/api/posts/${props.slug}/comments`)
const response = await $fetch(`/api/posts/${requestedSlug}/comments`)
if (requestId !== commentsRequestId || requestedSlug !== props.slug) {
return
}
comments.value = response.comments || []
} catch (error) {
if (requestId !== commentsRequestId || requestedSlug !== props.slug) {
return
}
comments.value = []
errorMessage.value = error?.data?.message || '댓글을 불러오지 못했습니다.'
} finally {
loadingComments.value = false
if (requestId === commentsRequestId && requestedSlug === props.slug) {
loadingComments.value = false
}
}
}
@@ -148,22 +180,30 @@ const submitComment = async () => {
return
}
const requestedSlug = props.slug
submitting.value = true
errorMessage.value = ''
try {
await $fetch(`/api/posts/${props.slug}/comments`, {
await $fetch(`/api/posts/${requestedSlug}/comments`, {
method: 'POST',
body: {
body
}
})
if (requestedSlug !== props.slug) {
return
}
newCommentBody.value = ''
await fetchComments()
} catch (error) {
errorMessage.value = error?.data?.message || '댓글 작성에 실패했습니다.'
if (requestedSlug === props.slug) {
errorMessage.value = error?.data?.message || '댓글 작성에 실패했습니다.'
}
} finally {
submitting.value = false
if (requestedSlug === props.slug) {
submitting.value = false
}
}
}
@@ -199,23 +239,31 @@ const submitReply = async (parentId) => {
return
}
const requestedSlug = props.slug
submittingReplyId.value = parentId
replyErrorMessage.value = ''
try {
await $fetch(`/api/posts/${props.slug}/comments`, {
await $fetch(`/api/posts/${requestedSlug}/comments`, {
method: 'POST',
body: {
body,
parentId
}
})
if (requestedSlug !== props.slug) {
return
}
closeReplyForm()
await fetchComments()
} catch (error) {
replyErrorMessage.value = error?.data?.message || '답글 작성에 실패했습니다.'
if (requestedSlug === props.slug) {
replyErrorMessage.value = error?.data?.message || '답글 작성에 실패했습니다.'
}
} finally {
submittingReplyId.value = ''
if (requestedSlug === props.slug) {
submittingReplyId.value = ''
}
}
}
@@ -236,14 +284,18 @@ const toggleLike = async (commentId) => {
return
}
const requestedSlug = props.slug
likingCommentIds.value = [...likingCommentIds.value, commentId]
errorMessage.value = ''
try {
const result = await $fetch(`/api/posts/${props.slug}/comments/${commentId}/like`, {
const result = await $fetch(`/api/posts/${requestedSlug}/comments/${commentId}/like`, {
method: 'POST'
})
if (requestedSlug !== props.slug) {
return
}
comments.value = comments.value.map((item) => {
if (item.id !== commentId) {
return item
@@ -255,9 +307,13 @@ const toggleLike = async (commentId) => {
}
})
} catch (error) {
errorMessage.value = error?.data?.message || '좋아요 처리에 실패했습니다.'
if (requestedSlug === props.slug) {
errorMessage.value = error?.data?.message || '좋아요 처리에 실패했습니다.'
}
} finally {
likingCommentIds.value = likingCommentIds.value.filter((id) => id !== commentId)
if (requestedSlug === props.slug) {
likingCommentIds.value = likingCommentIds.value.filter((id) => id !== commentId)
}
}
}
@@ -305,6 +361,15 @@ const repliesByParent = computed(() => {
onMounted(async () => {
await Promise.all([fetchMember(), fetchComments()])
})
watch(() => props.slug, async (nextSlug, previousSlug) => {
if (!nextSlug || nextSlug === previousSlug) {
return
}
resetCommentState()
await fetchComments()
})
</script>
<template>

View File

@@ -232,7 +232,8 @@ onMounted(() => {
<template>
<aside
id="menu"
class="left-sidebar site-sidebar flex flex-col overflow-hidden border-r border-[var(--site-line)] transition-[width,opacity,transform,border-color] duration-300 ease-out max-lg:fixed max-lg:left-0 max-lg:top-[57px] max-lg:z-[60] max-lg:h-[calc(100dvh-57px)] max-lg:max-h-[calc(100dvh-57px)] max-lg:w-[min(287px,calc(100vw-24px))] max-lg:shadow-[0_16px_48px_rgba(0,0,0,0.18)] lg:sticky lg:top-[57px] lg:z-10 lg:h-[calc(100vh-57px)] lg:max-h-[calc(100vh-57px)] lg:self-start"
class="left-sidebar site-sidebar flex flex-col overflow-hidden border-r border-[var(--site-line)] transition-[width,opacity,transform,border-color] duration-300 ease-out max-lg:fixed max-lg:left-0 max-lg:z-[60] max-lg:w-[min(287px,calc(100vw-24px))] max-lg:shadow-[0_16px_48px_rgba(0,0,0,0.18)] lg:sticky lg:z-10 lg:self-start"
style="top: var(--site-top-chrome-height, 57px); height: calc(100dvh - var(--site-top-chrome-height, 57px)); max-height: calc(100dvh - var(--site-top-chrome-height, 57px))"
:class="[
menuOpen
? 'lg:w-[287px] lg:opacity-100'

View File

@@ -197,7 +197,7 @@ watch([postTocItems, () => route.fullPath], async () => {
</script>
<template>
<aside class="right-sidebar site-sidebar flex w-full flex-col overflow-hidden border-[var(--site-line)] max-lg:border-l-0 max-lg:border-t max-lg:px-4 max-lg:pb-10 lg:sticky lg:top-[57px] lg:z-10 lg:h-[calc(100vh-57px)] lg:max-h-[calc(100vh-57px)] lg:w-[287px] lg:self-start lg:border-l-0 lg:border-t-0 lg:px-0">
<aside class="right-sidebar site-sidebar flex w-full flex-col overflow-hidden border-[var(--site-line)] max-lg:border-l-0 max-lg:border-t max-lg:px-4 max-lg:pb-10 lg:sticky lg:z-10 lg:w-[287px] lg:self-start lg:border-l-0 lg:border-t-0 lg:px-0">
<div class="right-sidebar__scroll site-sidebar-scroll flex min-h-0 flex-1 flex-col">
<div v-if="!isPostDetailRoute" class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-5 sm:pr-0 max-lg:px-0">
<div class="right-sidebar__profile flex items-center gap-3">
@@ -426,6 +426,14 @@ watch([postTocItems, () => route.fullPath], async () => {
</template>
<style scoped>
@media (min-width: 1024px) {
.right-sidebar {
top: var(--site-top-chrome-height, 57px);
height: calc(100dvh - var(--site-top-chrome-height, 57px));
max-height: calc(100dvh - var(--site-top-chrome-height, 57px));
}
}
.right-sidebar__custom-social-icon :deep(svg) {
display: block;
width: 1rem !important;