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

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

Co-authored-by: Cursor <cursoragent@cursor.com>

components/comments/PostComments.vue

@@ -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>