v1.10.88 품질·보안 개선과 미디어 카탈로그 database 전환을 반영한다.
세션·로그인 제한, ZIP/업로드 스트리밍, CSP 최소 강제와 Report-Only, Playwright 격리 검증을 추가하고 미디어 목록을 reconcile 후 database 모드로 고정한다. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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)) {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user