memi-board 0.5.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/runtime/components/Settings.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { slugify, useMemiBoardAuth, useMemiBoardSettings } from 'memi-board'
-import type { BoardCategory, BoardListView } from 'memi-board'
+import type { BoardCategory, BoardListView, BoardWriteRole } from 'memi-board'
 
 const props = withDefaults(defineProps<{
   /** 호스트 자체 관리자 권한도 허용할 때 true. Firebase rules 권한은 호스트가 별도로 맞춰야 한다. */
@@ -24,11 +24,20 @@ const listViewOptions: Array<{ label: string, value: BoardListView }> = [
   { label: '이미지', value: 'image' },
   { label: '영상', value: 'video' },
 ]
+const writeRoleOptions: Array<{ label: string, value: BoardWriteRole }> = [
+  { label: '일반 이상', value: 'user' },
+  { label: '스태프 이상', value: 'staff' },
+  { label: '관리자만', value: 'admin' },
+]
 
 const { isAdmin, rolePending } = useMemiBoardAuth()
 const { categories, settingsPending, saveCategory, saveCategories, deleteCategory } = useMemiBoardSettings()
 const canManage = computed(() => isAdmin.value || props.authorized)
-const pending = computed(() => rolePending.value || settingsPending.value)
+// Firebase의 SSR pending 값과 클라이언트 첫 값이 달라질 수 있다. 최초 hydration은
+// 양쪽 모두 로딩 화면으로 맞춘 뒤 mounted 이후 실제 상태를 렌더링한다.
+const mounted = ref(false)
+onMounted(() => { mounted.value = true })
+const pending = computed(() => !mounted.value || rolePending.value || settingsPending.value)
 
 const draft = ref<BoardCategory[]>([])
 const newLabel = ref('')
@@ -45,6 +54,7 @@ watch([categories, settingsPending], ([list, loading]) => {
     draft.value = list.map(category => ({
       ...category,
       listView: category.listView ?? 'default',
+      writeRole: category.writeRole ?? 'user',
     }))
   }
 }, { immediate: true })
@@ -56,7 +66,7 @@ function addCategory() {
   let id = base
   let suffix = 2
   while (draft.value.some(category => category.id === id)) id = `${base}-${suffix++}`
-  draft.value.push({ id, label, listView: 'default' })
+  draft.value.push({ id, label, listView: 'default', writeRole: 'user' })
   newLabel.value = ''
 }
 
@@ -164,6 +174,16 @@ async function runDeleteAll() {
           <div><p class="text-sm font-medium">카테고리 ID</p><p class="text-xs text-muted">주소와 데이터 기준값</p></div>
           <UInput :model-value="category.id" disabled class="font-mono" />
         </div>
+        <div class="grid gap-2 sm:grid-cols-[9rem_1fr] sm:items-center">
+          <div><p class="text-sm font-medium">글쓰기 권한</p><p class="text-xs text-muted">이 카테고리에 글을 쓸 수 있는 최소 역할</p></div>
+          <USelect
+            v-model="category.writeRole"
+            :items="writeRoleOptions"
+            value-key="value"
+            label-key="label"
+            @update:model-value="savedId = null"
+          />
+        </div>
         <div class="grid gap-2 sm:grid-cols-[9rem_1fr] sm:items-center">
           <div><p class="text-sm font-medium">표시 라벨</p><p class="text-xs text-muted">사용자에게 보이는 이름</p></div>
           <UInput v-model="category.label" @update:model-value="savedId = null" />

package/dist/runtime/components/Users.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useMemiBoardAuth } from '../composables/useMemiBoardAuth'
+import { BOARD_USER_ROLES, useMemiBoardUsers } from '../composables/useMemiBoardUsers'
+import type { BoardUserRole } from '../types'
+
+const props = withDefaults(defineProps<{ authorized?: boolean }>(), { authorized: false })
+const { isAdmin, rolePending } = useMemiBoardAuth()
+const { users, usersPending, updateUserRole } = useMemiBoardUsers()
+const canManage = computed(() => isAdmin.value || props.authorized)
+const savingUid = ref<string | null>(null)
+const savedUid = ref<string | null>(null)
+const error = ref('')
+
+async function changeRole(uid: string, role: BoardUserRole) {
+  if (!canManage.value) return
+  savingUid.value = uid
+  savedUid.value = null
+  error.value = ''
+  try {
+    await updateUserRole(uid, role)
+    savedUid.value = uid
+  }
+  catch (cause) {
+    error.value = cause instanceof Error ? cause.message : '역할을 변경하지 못했습니다.'
+  }
+  finally {
+    savingUid.value = null
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <div class="grid gap-3 md:grid-cols-3">
+      <UAlert v-for="item in BOARD_USER_ROLES" :key="item.value" color="neutral" variant="subtle" :title="item.label" :description="item.description" />
+    </div>
+    <UAlert v-if="error" color="error" variant="subtle" icon="i-lucide-circle-alert" :description="error" />
+    <div v-if="rolePending || usersPending" class="py-12 text-center text-sm text-muted">사용자 목록을 불러오고 있습니다.</div>
+    <UAlert v-else-if="!canManage" color="error" variant="subtle" icon="i-lucide-shield-alert" title="권한이 없습니다" description="게시판 관리자만 사용자 역할을 관리할 수 있습니다." />
+    <div v-else-if="users.length === 0" class="py-12 text-center text-sm text-muted">게시판에 로그인한 사용자가 없습니다.</div>
+    <div v-else class="divide-y divide-default rounded-lg border border-default">
+      <div v-for="boardUser in users" :key="boardUser.id" class="grid gap-4 p-4 md:grid-cols-[minmax(0,1fr)_12rem] md:items-center">
+        <div class="min-w-0">
+          <div class="flex items-center gap-2">
+            <p class="truncate font-medium text-highlighted">{{ boardUser.displayName || '이름 없음' }}</p>
+            <UBadge v-if="savedUid === boardUser.id" color="success" variant="subtle" label="저장됨" />
+          </div>
+          <p class="truncate text-sm text-muted">{{ boardUser.email || boardUser.id }}</p>
+          <p v-if="boardUser.moderationBlockCount" class="mt-1 text-xs text-warning">콘텐츠 경고 {{ boardUser.moderationBlockCount }}회</p>
+        </div>
+        <USelect
+          :model-value="boardUser.role || 'user'"
+          :items="BOARD_USER_ROLES"
+          value-key="value"
+          label-key="label"
+          :loading="savingUid === boardUser.id"
+          :disabled="savingUid === boardUser.id"
+          @update:model-value="changeRole(boardUser.id, $event as BoardUserRole)"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/types.d.ts

@@ -56,11 +56,30 @@ 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 interface BoardUserRole {
-    role: 'user' | 'admin';
+export type BoardUserRole = 'admin' | 'staff' | 'user';
+export interface BoardUserModel {
+    id: string;
+    role: BoardUserRole;
+    displayName?: string | null;
+    email?: string | null;
+    photoURL?: string | null;
+    moderationBlockCount?: number;
+    updatedAt?: Timestamp;
 }
 export type BoardListView = 'default' | 'image' | 'video';
+export type BoardWriteRole = 'user' | 'staff' | 'admin';
 export interface BoardCategory {
     /** 글의 category 필드가 참조하는 키 (예: 'notice', 'free') */
     id: string;
@@ -68,6 +87,8 @@ export interface BoardCategory {
     label: string;
     /** 목록 표시 방식. 미지정된 기존 데이터는 default. */
     listView?: BoardListView;
+    /** 글쓰기 최소 역할. 미지정된 기존 데이터는 user. */
+    writeRole?: BoardWriteRole;
     /** 목록 노출 순서. 서브컬렉션 문서의 정렬 필드. */
     order?: number;
 }