memi-board 0.7.0 → 0.9.0

package/dist/runtime/components/CommentItem.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import 'dayjs/locale/ko'
+import type { CommentModel } from 'memi-board'
+import { useMemiBoardAuth } from 'memi-board'
+
+dayjs.extend(relativeTime)
+dayjs.locale('ko')
+
+const props = defineProps<{
+  comment: CommentModel
+  now: number
+  deleting?: boolean
+}>()
+
+const emit = defineEmits<{
+  delete: [commentId: string]
+  reply: [comment: CommentModel]
+}>()
+
+const { canDeleteComment } = useMemiBoardAuth()
+
+const date = computed(() => props.comment.createdAt?.toDate?.())
+const relativeDate = computed(() => date.value ? dayjs(date.value).from(dayjs(props.now)) : '방금 전')
+const fullDate = computed(() => date.value ? dayjs(date.value).format('YYYY년 M월 D일 HH:mm:ss') : '시간 확인 중')
+</script>
+
+<template>
+  <div class="flex items-start gap-3">
+    <UAvatar
+      :src="comment.authorPhoto ?? undefined"
+      :alt="comment.authorName ?? '익명'"
+      size="sm"
+    />
+    <div class="min-w-0 flex-1">
+      <div class="flex items-center gap-2">
+        <span class="text-sm font-medium">{{ comment.authorName ?? '익명' }}</span>
+        <UTooltip :text="fullDate">
+          <time
+            :datetime="date?.toISOString()"
+            class="cursor-help text-xs text-muted"
+          >
+            {{ relativeDate }}
+          </time>
+        </UTooltip>
+      </div>
+      <p class="whitespace-pre-wrap break-words text-sm">
+        <span v-if="comment.parentId && comment.replyToName" class="mr-1 text-primary">@{{ comment.replyToName }}</span>
+        {{ comment.body }}
+      </p>
+      <UButton
+        label="답글"
+        size="xs"
+        color="neutral"
+        variant="link"
+        class="mt-1 px-0"
+        @click="emit('reply', comment)"
+      />
+    </div>
+    <UButton
+      v-if="canDeleteComment(comment) && comment.id"
+      icon="i-lucide-trash-2"
+      size="xs"
+      variant="ghost"
+      color="error"
+      :loading="deleting"
+      aria-label="댓글 삭제"
+      @click="emit('delete', comment.id)"
+    />
+  </div>
+</template>

package/dist/runtime/components/CommentList.vue

@@ -1,65 +1,109 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { formatDate } from 'memi-board'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useMemiBoardComments } from 'memi-board'
-import { useMemiBoardAuth } from 'memi-board'
+import MemiBoardCommentSkeleton from './CommentSkeleton.vue'
+import MemiBoardCommentThread from './CommentThread.vue'
 
 const props = defineProps<{ postId: string }>()
 
-const { comments, deleteComment } = useMemiBoardComments(props.postId)
-const { canDeleteComment } = useMemiBoardAuth()
+const { comments, commentsPending, hasMore, loadingMore, loadMore } = useMemiBoardComments(props.postId)
+const now = ref(Date.now())
+const loadMoreTrigger = ref<HTMLElement | null>(null)
+let relativeTimeTimer: ReturnType<typeof setInterval> | undefined
+let loadMoreDelayTimer: ReturnType<typeof setTimeout> | undefined
+let loadMoreObserver: IntersectionObserver | undefined
+const waitingToLoad = ref(false)
+const morePending = computed(() => waitingToLoad.value || loadingMore.value)
+let triggerVisible = false
+let automaticRequest = false
 
-const deletingId = ref<string | null>(null)
+function cancelAutomaticLoad() {
+  if (!automaticRequest || !loadMoreDelayTimer) return
+  clearTimeout(loadMoreDelayTimer)
+  loadMoreDelayTimer = undefined
+  automaticRequest = false
+  waitingToLoad.value = false
+}
 
-async function handleDelete(commentId: string) {
-  if (!window.confirm('이 댓글을 삭제하시겠습니까?')) return
-  deletingId.value = commentId
-  try {
-    await deleteComment(commentId)
-  }
-  finally {
-    deletingId.value = null
-  }
+function scheduleLoadMore(automatic = false) {
+  if (loadMoreDelayTimer || loadingMore.value || !hasMore.value) return
+  automaticRequest = automatic
+  waitingToLoad.value = true
+  loadMoreDelayTimer = setTimeout(() => {
+    loadMoreDelayTimer = undefined
+    if (automaticRequest && !triggerVisible) {
+      automaticRequest = false
+      waitingToLoad.value = false
+      return
+    }
+    automaticRequest = false
+    waitingToLoad.value = false
+    if (hasMore.value && !loadingMore.value) void loadMore()
+  }, 1_000)
 }
+
+onMounted(() => {
+  relativeTimeTimer = setInterval(() => { now.value = Date.now() }, 60_000)
+  loadMoreObserver = new IntersectionObserver((entries) => {
+    triggerVisible = entries.some(entry => entry.isIntersecting)
+    if (triggerVisible) scheduleLoadMore(true)
+    else cancelAutomaticLoad()
+  })
+  if (loadMoreTrigger.value) loadMoreObserver.observe(loadMoreTrigger.value)
+})
+
+watch(loadMoreTrigger, (element, previous) => {
+  if (previous) loadMoreObserver?.unobserve(previous)
+  if (element) loadMoreObserver?.observe(element)
+}, { flush: 'post' })
+
+onUnmounted(() => {
+  clearInterval(relativeTimeTimer)
+  clearTimeout(loadMoreDelayTimer)
+  waitingToLoad.value = false
+  loadMoreObserver?.disconnect()
+})
+
 </script>
 
 <template>
   <div class="flex flex-col gap-3">
+    <div v-if="commentsPending" class="flex flex-col gap-3" aria-label="댓글을 불러오고 있습니다">
+      <MemiBoardCommentSkeleton v-for="index in 10" :key="`initial-${index}`" />
+    </div>
     <p
-      v-if="!comments.length"
+      v-else-if="!comments.length"
       class="text-sm text-muted"
     >
       아직 댓글이 없습니다.
     </p>
 
-    <div
+    <MemiBoardCommentThread
       v-for="comment in comments"
       :key="comment.id"
-      class="flex items-start gap-3"
+      :root="comment"
+      :post-id="postId"
+      :now="now"
+    />
+
+    <div
+      v-if="!commentsPending && hasMore"
+      ref="loadMoreTrigger"
+      class="flex justify-center py-3"
     >
-      <UAvatar
-        :src="comment.authorPhoto ?? undefined"
-        :alt="comment.authorName ?? '익명'"
-        size="sm"
-      />
-      <div class="flex-1 min-w-0">
-        <div class="flex items-center gap-2">
-          <span class="text-sm font-medium">{{ comment.authorName ?? '익명' }}</span>
-          <span class="text-xs text-muted">{{ formatDate(comment.createdAt) }}</span>
-        </div>
-        <p class="text-sm whitespace-pre-wrap break-words">
-          {{ comment.body }}
-        </p>
-      </div>
       <UButton
-        v-if="canDeleteComment(comment)"
-        icon="i-lucide-trash-2"
-        size="xs"
-        variant="ghost"
-        color="error"
-        :loading="deletingId === comment.id"
-        @click="handleDelete(comment.id!)"
+        label="댓글 더보기"
+        icon="i-lucide-chevron-down"
+        color="neutral"
+        variant="soft"
+        :loading="morePending"
+        :disabled="morePending"
+        @click="scheduleLoadMore()"
       />
     </div>
+
+    <div v-if="morePending" class="flex flex-col gap-3" aria-label="댓글을 더 불러오고 있습니다">
+      <MemiBoardCommentSkeleton v-for="index in 10" :key="`more-${index}`" />
+    </div>
   </div>
 </template>

package/dist/runtime/components/CommentSkeleton.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex items-start gap-3" aria-hidden="true">
+    <USkeleton class="size-8 shrink-0 rounded-full" />
+    <div class="flex-1 space-y-2 pt-0.5">
+      <div class="flex gap-2">
+        <USkeleton class="h-3.5 w-20" />
+        <USkeleton class="h-3.5 w-14" />
+      </div>
+      <USkeleton class="h-4 w-full max-w-md" />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/CommentThread.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import type { CommentModel } from 'memi-board'
+import { useMemiBoardComments, useMemiBoardReplies } from 'memi-board'
+import MemiBoardCommentForm from './CommentForm.vue'
+import MemiBoardCommentItem from './CommentItem.vue'
+import MemiBoardCommentSkeleton from './CommentSkeleton.vue'
+
+const props = defineProps<{ postId: string, root: CommentModel, now: number }>()
+
+const { deleteComment } = useMemiBoardComments(props.postId, { subscribe: false })
+const { replies, loading, loaded, hasMore, loadMore, refresh } = useMemiBoardReplies(props.postId, props.root.id!)
+const expanded = ref((props.root.replyCount ?? 0) > 0)
+const replyingTo = ref<CommentModel | null>(null)
+const deletingId = ref<string | null>(null)
+const error = ref('')
+const needsMoreReplies = computed(() =>
+  hasMore.value
+  && loaded.value
+  && replies.value.length < (props.root.replyCount ?? Number.POSITIVE_INFINITY),
+)
+
+onMounted(() => {
+  if (expanded.value && !loaded.value) void loadMore()
+})
+
+watch(() => props.root.replyCount, (count) => {
+  if ((count ?? 0) <= 0) return
+  expanded.value = true
+  if (!loaded.value) void loadMore()
+})
+
+async function toggleReplies() {
+  expanded.value = !expanded.value
+  if (expanded.value && !loaded.value) await loadMore()
+}
+
+function startReply(comment: CommentModel) {
+  replyingTo.value = comment
+}
+
+async function handleSaved() {
+  expanded.value = true
+  replyingTo.value = null
+  // 이미 펼쳐진 스레드는 onSnapshot이 새 답글을 누적한다. refresh()하면
+  // 작성 브라우저만 첫 5개 상태로 되돌아가므로 최초 조회 전일 때만 읽는다.
+  if (!loaded.value) await refresh()
+}
+
+async function handleDelete(comment: CommentModel) {
+  if (!window.confirm('이 댓글을 삭제하시겠습니까?')) return
+  deletingId.value = comment.id ?? null
+  error.value = ''
+  try {
+    await deleteComment(comment)
+    if (comment.parentId) await refresh()
+  }
+  catch (cause) {
+    error.value = cause instanceof Error ? cause.message : '댓글을 삭제하지 못했습니다.'
+  }
+  finally {
+    deletingId.value = null
+  }
+}
+</script>
+
+<template>
+  <article class="flex flex-col gap-3">
+    <MemiBoardCommentItem
+      :comment="root"
+      :now="now"
+      :deleting="deletingId === root.id"
+      @reply="startReply"
+      @delete="handleDelete(root)"
+    />
+
+    <UButton
+      v-if="(root.replyCount ?? 0) > 0"
+      :label="expanded ? '답글 숨기기' : `답글 ${root.replyCount}개`"
+      :icon="expanded ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+      color="neutral"
+      variant="link"
+      size="sm"
+      class="w-fit px-0"
+      @click="toggleReplies"
+    />
+
+    <div v-if="expanded" class="flex flex-col gap-3 border-l border-default pl-4 sm:pl-6">
+      <MemiBoardCommentSkeleton v-for="index in (loading && !loaded) ? 5 : 0" :key="index" />
+      <MemiBoardCommentItem
+        v-for="reply in replies"
+        :key="reply.id"
+        :comment="reply"
+        :now="now"
+        :deleting="deletingId === reply.id"
+        :class="(reply.depth ?? 1) >= 2 ? 'ml-4 sm:ml-8' : ''"
+        @reply="startReply"
+        @delete="handleDelete(reply)"
+      />
+      <UButton
+        v-if="needsMoreReplies"
+        label="답글 더보기"
+        color="neutral"
+        variant="soft"
+        size="sm"
+        :loading="loading"
+        @click="loadMore"
+      />
+    </div>
+
+    <MemiBoardCommentForm
+      v-if="replyingTo"
+      :post-id="postId"
+      :parent="replyingTo"
+      class="ml-10"
+      @saved="handleSaved"
+      @cancel="replyingTo = null"
+    />
+    <p v-if="error" class="text-xs text-error">{{ error }}</p>
+  </article>
+</template>

package/dist/runtime/components/Detail.vue

@@ -6,7 +6,6 @@ import { formatDate, renderMarkdownToHtml } from 'memi-board'
 import { useMemiBoardPosts } from 'memi-board'
 import { useMemiBoardAuth } from 'memi-board'
 import { useMemiBoardSettings } from 'memi-board'
-import { useMemiBoardComments } from 'memi-board'
 import MemiBoardAttachments from './Attachments.vue'
 import MemiBoardCommentForm from './CommentForm.vue'
 import MemiBoardCommentList from './CommentList.vue'
@@ -23,8 +22,6 @@ const emit = defineEmits<{
 const { getPost, getAdjacentPosts, deletePost } = useMemiBoardPosts()
 const { canEdit, canDelete } = useMemiBoardAuth()
 const { categoryLabel } = useMemiBoardSettings()
-// post.commentCount는 상세 진입 시점의 스냅샷이라 새 댓글이 즉시 반영되지 않는다 — 실시간 댓글 목록 길이로 표시한다.
-const { comments } = useMemiBoardComments(props.postId)
 
 const post = ref<PostDetail | null>(null)
 const loading = ref(true)
@@ -188,7 +185,7 @@ const contentHtml = computed(() => {
       </div>
     </div>
 
-    <nav class="grid grid-cols-3 items-center border-y border-default py-3" aria-label="게시글 이동">
+    <nav class="grid grid-cols-3 items-center py-3" aria-label="게시글 이동">
       <UButton
         variant="ghost"
         color="neutral"
@@ -219,10 +216,10 @@ const contentHtml = computed(() => {
 
     <section class="flex flex-col gap-4 border-t border-default pt-4">
       <h2 class="text-sm font-medium text-muted">
-        댓글 {{ comments.length }}
+        댓글
       </h2>
-      <MemiBoardCommentForm :post-id="postId" />
       <MemiBoardCommentList :post-id="postId" />
+      <MemiBoardCommentForm :post-id="postId" />
     </section>
   </div>
 </template>

package/dist/types.d.ts

@@ -56,6 +56,17 @@ export interface CommentModel {
     authorPhoto: string | null;
     moderationStatus: ModerationStatus;
     createdAt: Timestamp;
+    /** 최상위 댓글은 null, 답글은 직접 답변 대상 댓글 ID. */
+    parentId?: string | null;
+    /** 스레드의 최상위 댓글 ID. */
+    rootId?: string;
+    /** 화면 들여쓰기 깊이. 0 → 1 → 2, 이후 2로 고정. */
+    depth?: number;
+    replyToUid?: string | null;
+    replyToName?: string | null;
+    /** 최상위 댓글에 저장하는 전체 답글 수. */
+    replyCount?: number;
+    isReply?: boolean;
 }
 export type BoardUserRole = 'admin' | 'staff' | 'user';
 export interface BoardUserModel {

package/docs/firestore.rules.example

@@ -34,6 +34,14 @@ service cloud.firestore {
     function isOwner(resource) {
       return isSignedIn() && request.auth.uid == resource.data.authorUid;
     }
+    function isCommentCountUpdate() {
+      return isSignedIn()
+        && request.resource.data.diff(resource.data).affectedKeys().hasOnly(['commentCount'])
+        && request.resource.data.commentCount is int
+        && request.resource.data.commentCount >= 0
+        && (request.resource.data.commentCount == resource.data.get('commentCount', 0) + 1
+          || request.resource.data.commentCount == resource.data.get('commentCount', 0) - 1);
+    }
 
     match /memiBoardPosts/{postId} {
       allow read: if true;
@@ -45,7 +53,8 @@ service cloud.firestore {
         && canWriteCategory(request.resource.data.category);
 
       // 작성자 본인 또는 관리자·스태프만 수정/삭제 가능
-      allow update, delete: if isOwner(resource) || isStaff();
+      allow update: if isOwner(resource) || isStaff() || isCommentCountUpdate();
+      allow delete: if isOwner(resource) || isStaff();
 
       match /body/{docId} {
         allow read: if true;
@@ -55,9 +64,61 @@ service cloud.firestore {
       match /comments/{commentId} {
         allow read: if true;
 
+        function isLegacyTopLevelComment() {
+          return !request.resource.data.keys().hasAny([
+            'parentId', 'rootId', 'depth', 'replyToUid', 'replyToName', 'replyCount', 'isReply'
+          ]);
+        }
+        function isValidTopLevelComment() {
+          return request.resource.data.parentId == null
+            && request.resource.data.rootId == commentId
+            && request.resource.data.depth == 0
+            && request.resource.data.replyToUid == null
+            && request.resource.data.replyToName == null
+            && request.resource.data.replyCount == 0
+            && request.resource.data.isReply == false;
+        }
+        function isValidReply() {
+          let parentPath = /databases/$(database)/documents/memiBoardPosts/$(postId)/comments/$(request.resource.data.parentId);
+          let rootPath = /databases/$(database)/documents/memiBoardPosts/$(postId)/comments/$(request.resource.data.rootId);
+          let parent = get(parentPath).data;
+          return request.resource.data.parentId is string
+            && request.resource.data.rootId is string
+            && request.resource.data.parentId != commentId
+            && exists(parentPath)
+            && exists(rootPath)
+            && get(rootPath).data.get('parentId', null) == null
+            && request.resource.data.replyToUid == parent.authorUid
+            && request.resource.data.replyCount == 0
+            && request.resource.data.isReply == true
+            && ((parent.get('parentId', null) == null
+                  && request.resource.data.rootId == request.resource.data.parentId)
+              || (parent.get('parentId', null) != null
+                  && request.resource.data.rootId == parent.rootId))
+            && ((parent.get('depth', 0) < 2
+                  && request.resource.data.depth == parent.get('depth', 0) + 1)
+              || (parent.get('depth', 0) >= 2
+                  && request.resource.data.depth == 2));
+        }
+        function isReplyCountUpdate() {
+          return isSignedIn()
+            && request.resource.data.diff(resource.data).affectedKeys().hasOnly(['replyCount'])
+            && request.resource.data.replyCount is int
+            && request.resource.data.replyCount >= 0
+            && (request.resource.data.replyCount == resource.data.get('replyCount', 0) + 1
+              || request.resource.data.replyCount == resource.data.get('replyCount', 0) - 1);
+        }
+
         allow create: if isSignedIn()
           && request.resource.data.authorUid == request.auth.uid
-          && request.resource.data.moderationStatus == 'approved';
+          && request.resource.data.postId == postId
+          && request.resource.data.body is string
+          && request.resource.data.moderationStatus == 'approved'
+          && (isLegacyTopLevelComment()
+            || (request.resource.data.keys().hasAll([
+                'parentId', 'rootId', 'depth', 'replyToUid', 'replyToName', 'replyCount', 'isReply'
+              ])
+              && (isValidTopLevelComment() || isValidReply())));
 
         // 댓글 작성자·부모 게시글 작성자·게시판 관리자 모두 삭제 가능.
         // 부모 글을 삭제할 때 작성자가 다른 사용자의 댓글도 함께 정리할 수 있어야 한다.
@@ -65,8 +126,8 @@ service cloud.firestore {
           || isOwner(get(/databases/$(database)/documents/memiBoardPosts/$(postId)))
           || isStaff();
 
-        // 댓글 수정은 지원하지 않는다 (삭제 후 재작성만 가능) — Editor에서 UI 자체도 제공하지 않음
-        allow update: if false;
+        // 댓글 본문 수정은 지원하지 않는다. 답글 batch의 replyCount ±1만 허용한다.
+        allow update: if isReplyCountUpdate();
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "memi-board",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "type": "module",
   "description": "Firebase 게시판 — core composable + thin Nuxt module(UI SFC). Nuxt 4 + Nuxt UI 호스트에 붙임",
   "license": "MIT",
@@ -58,6 +58,7 @@
     "@nuxt/ui": "^4.0.0",
     "@tiptap/core": ">=2.0.0",
     "@tiptap/pm": ">=2.0.0",
+    "dayjs": "^1.11.0",
     "firebase": "^12.0.0",
     "nuxt": ">=3.0.0 || >=4.0.0",
     "vue": "^3.5.0",
@@ -80,6 +81,7 @@
   },
   "devDependencies": {
     "@nuxt/ui": "^4.9.0",
+    "dayjs": "^1.11.21",
     "firebase": "^12.15.0",
     "nuxt": "^4.5.1",
     "nuxt-vuefire": "^1.1.2",