memi-board 0.19.3 → 0.22.0

package/dist/rolldown-runtime-DtPi1Y-2.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), s = (e, i, o, s) => {
+	if (i && typeof i == "object" || typeof i == "function") for (var c = r(i), l = 0, u = c.length, d; l < u; l++) d = c[l], !a.call(e, d) && d !== o && t(e, d, {
+		get: ((e) => i[e]).bind(null, d),
+		enumerable: !(s = n(i, d)) || s.enumerable
+	});
+	return e;
+}, c = (n, r, o) => (o = n == null ? {} : e(i(n)), s(r || !n || !n.__esModule || !a.call(n, "default") ? t(o, "default", {
+	value: n,
+	enumerable: !0
+}) : o, n));
+//#endregion
+export { c as n, o as t };

package/dist/runtime/components/Attachments.vue

@@ -5,6 +5,7 @@ import { useMemiBoardStorage } from 'memi-board/runtime'
 
 const props = withDefaults(defineProps<{
   modelValue: Attachment[]
+  boardId: string
   /** 새 글 작성 중에도 미리 생성한 Firestore 자동 ID를 넘긴다. */
   postId: string
   editable?: boolean
@@ -43,7 +44,7 @@ async function onFileInputChange(e: Event) {
     const uploaded: Attachment[] = []
     for (const file of toUpload) {
       uploadProgress.value = 0
-      const { promise } = uploadAttachment(file, props.postId, (ratio) => {
+      const { promise } = uploadAttachment(file, props.boardId, props.postId, (ratio) => {
         uploadProgress.value = ratio
       })
       uploaded.push(await promise)

package/dist/runtime/components/AuthorMenu.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  authorUid: string
+  authorName?: string | null
+  authorPhoto?: string | null
+  /** "작성글 보기" 링크. 없으면 항목이 비활성 상태로만 보인다. */
+  authorPostsTo?: (authorUid: string) => string | undefined
+  showAvatar?: boolean
+  avatarSize?: 'xs' | 'sm' | 'md'
+  /** 좁은 고정폭 칸에 넣을 때만 true로 — 기본은 줄이지 않고 이름을 그대로 보여준다. */
+  truncate?: boolean
+}>(), {
+  showAvatar: true,
+  avatarSize: 'xs',
+  truncate: false,
+})
+
+const authorPostsLink = computed(() => props.authorPostsTo?.(props.authorUid))
+
+/** 프로필·작성한 댓글 보기는 아직 갈 곳이 없어 비활성 — 작성글 보기만 우선 연결. */
+const items = computed(() => [[
+  { label: '프로필 보기', icon: 'i-lucide-user-round', disabled: true },
+  { label: '작성글 보기', icon: 'i-lucide-notebook-text', to: authorPostsLink.value, disabled: !authorPostsLink.value },
+  { label: '작성한 댓글 보기', icon: 'i-lucide-message-square-text', disabled: true },
+]])
+</script>
+
+<template>
+  <UDropdownMenu :items="items" :content="{ align: 'start' }">
+    <button
+      type="button"
+      class="-mx-1 flex max-w-full items-center gap-1.5 rounded-md px-1 transition-colors hover:bg-elevated/60"
+      :class="truncate ? 'min-w-0' : ''"
+    >
+      <UAvatar
+        v-if="showAvatar"
+        :src="authorPhoto ?? undefined"
+        :alt="authorName ?? '익명'"
+        :size="avatarSize"
+        class="shrink-0"
+      />
+      <span :class="truncate ? 'min-w-0 truncate whitespace-nowrap' : 'whitespace-nowrap'">{{ authorName ?? '익명' }}</span>
+    </button>
+  </UDropdownMenu>
+</template>

package/dist/runtime/components/CategorySettings.vue

@@ -14,6 +14,11 @@ const props = withDefaults(defineProps<{
    * (규칙도 스태프가 이 필드 값을 바꾸는 건 별도로 막는다 — UI는 편의일 뿐 보안 경계가 아니다).
    */
   canManageStaff?: boolean
+  /**
+   * 존재하지 않는 카테고리 id로 열렸을 때 생성 폼을 보여줄지. 기본은 board-role
+   * 관리자만 — 스태프는 기존 카테고리 편집은 가능해도 새로 만들 수는 없다.
+   */
+  canCreate?: boolean
 }>(), { authorized: false })
 
 const emit = defineEmits<{ saved: [category: BoardCategory] }>()
@@ -37,7 +42,7 @@ const visibilityOptions: Array<{ label: string, value: BoardVisibility, descript
 const { isAdmin, rolePending } = useMemiBoardAuth()
 const { categories, settingsPending, saveCategory } = useMemiBoardSettings()
 const canManage = computed(() => isAdmin.value || props.authorized)
-// boardUsers 전체 목록은 rules상 board-role 관리자만 읽을 수 있다 — "허용 스태프" 지정 권한이
+// users 전체 목록은 rules상 board-role 관리자만 읽을 수 있다 — "허용 스태프" 지정 권한이
 // 있을 때만(기본은 board-role 관리자) 쿼리를 시작한다. canManage(호스트 authorized 포함)로
 // 그냥 열면 스태프도 authorized=true라 여기서 다시 permission-denied가 난다.
 const canManageStaffAssignment = computed(() => props.canManageStaff ?? isAdmin.value)
@@ -46,11 +51,26 @@ const mounted = ref(false)
 onMounted(() => { mounted.value = true })
 const pending = computed(() => !mounted.value || rolePending.value || settingsPending.value)
 const source = computed(() => categories.value.find(item => item.id === props.categoryId))
+const canCreate = computed(() => props.canCreate ?? isAdmin.value)
+const isNew = computed(() => !source.value)
 const draft = ref<BoardCategory | null>(null)
 const saving = ref(false)
 const saved = ref(false)
 const error = ref('')
 
+function emptyDraft(id: string): BoardCategory {
+  return {
+    id,
+    label: '',
+    description: '',
+    visibility: 'public',
+    listView: 'default',
+    writeRole: 'user',
+    commentWriteRole: 'user',
+    allowedStaffUids: [],
+  }
+}
+
 // 이 카테고리에 글/댓글을 쓰려면 스태프 역할이 필요할 때만 "허용 스태프" 지정이 의미가 있다.
 const staffOptions = computed(() => users.value
   .filter(item => item.role === 'staff')
@@ -73,15 +93,19 @@ function toDraft(category: BoardCategory): BoardCategory {
 
 // 카테고리 전환·최초 로드 시에만 draft를 서버 값으로 맞춘다.
 // 저장 직후 onSnapshot 갱신으로 draft.description 이 비워지거나 입력 중이던 값이 덮이지 않게 한다.
-watch(() => props.categoryId, () => {
-  draft.value = source.value ? toDraft(source.value) : null
+watch(() => props.categoryId, (id) => {
+  if (source.value) draft.value = toDraft(source.value)
+  else if (canCreate.value) draft.value = emptyDraft(id)
+  else draft.value = null
   saved.value = false
   error.value = ''
 })
 
 watch(source, (category) => {
   if (!category) {
-    draft.value = null
+    if (!draft.value || draft.value.id !== props.categoryId) {
+      draft.value = canCreate.value ? emptyDraft(props.categoryId) : null
+    }
     return
   }
   if (!draft.value || draft.value.id !== category.id) {
@@ -107,7 +131,9 @@ async function save() {
   error.value = ''
   const snapshot = { ...draft.value }
   try {
-    await saveCategory(snapshot, snapshot.order ?? 0)
+    const order = isNew.value ? categories.value.length : (snapshot.order ?? 0)
+    await saveCategory(snapshot, order)
+    snapshot.order = order
     // 저장 성공 직후 draft 유지 (스냅샷 오기 전에 watch가 비우지 않도록)
     draft.value = toDraft(snapshot)
     saved.value = true
@@ -127,6 +153,14 @@ async function save() {
   <UAlert v-else-if="!canManage" color="neutral" variant="subtle" icon="i-lucide-lock" title="접근 권한이 없습니다" />
   <UAlert v-else-if="!draft" color="neutral" variant="subtle" icon="i-lucide-circle-help" title="없는 게시판입니다" description="게시판 주소를 다시 확인해 주세요." />
   <div v-else class="flex flex-col gap-5">
+    <UAlert
+      v-if="isNew"
+      color="neutral"
+      variant="subtle"
+      icon="i-lucide-circle-plus"
+      title="아직 없는 게시판입니다"
+      description="아래 정보를 입력하고 저장하면 이 ID로 새로 만들어집니다."
+    />
     <div class="grid gap-2 sm:grid-cols-[9rem_1fr] sm:items-center">
       <div><p class="text-sm font-medium">카테고리 ID</p><p class="text-xs text-muted">주소와 데이터 기준값</p></div>
       <UInput :model-value="draft.id" disabled class="font-mono" />
@@ -178,9 +212,9 @@ async function save() {
       <MemiBoardOptionCards v-model="draft.listView" :options="listViewOptions" @update:model-value="saved = false" />
     </div>
     <div class="flex justify-end border-t border-default pt-4">
-      <UButton label="저장" icon="i-lucide-save" :loading="saving" @click="save" />
+      <UButton :label="isNew ? '만들기' : '저장'" :icon="isNew ? 'i-lucide-plus' : 'i-lucide-save'" :loading="saving" @click="save" />
     </div>
     <UAlert v-if="error" color="error" variant="subtle" :description="error" />
-    <UAlert v-if="saved" color="success" variant="subtle" description="게시판 설정을 저장했습니다." />
+    <UAlert v-if="saved" color="success" variant="subtle" :description="isNew ? '게시판을 만들었습니다.' : '게시판 설정을 저장했습니다.'" />
   </div>
 </template>

package/dist/runtime/components/CommentForm.vue

@@ -6,19 +6,23 @@ import { useMemiBoardModeration } from 'memi-board/runtime'
 import { useMemiBoardSettings } from 'memi-board/runtime'
 import type { CommentModel } from 'memi-board/runtime'
 
-const props = defineProps<{ postId: string, category?: string, parent?: CommentModel | null }>()
+const props = defineProps<{ boardId: string, postId: string, parent?: CommentModel | null }>()
 const emit = defineEmits<{ saved: [], cancel: [] }>()
 
 const { user, isSignedIn, isAdmin, isStaff, isWriteRestricted, restrictedMessage } = useMemiBoardAuth()
 // 목록 컴포넌트만 실시간 구독한다. 작성 폼은 mutation API만 사용한다.
-const { addComment, addReply } = useMemiBoardComments(props.postId, { subscribe: false })
+const { addComment, addReply } = useMemiBoardComments(
+  props.boardId,
+  props.postId,
+  { subscribe: false },
+)
 const { checkText } = useMemiBoardModeration()
-const { categories } = useMemiBoardSettings()
+const { getBoard } = useMemiBoardSettings()
 
-// 카테고리별 댓글쓰기 권한 — 글쓰기 권한과 같은 등급 체계(user/staff/admin)를 그대로 재사용한다.
+// 보드별 댓글쓰기 권한
 const canComment = computed(() => {
   if (!isSignedIn.value) return false
-  const required = categories.value.find(item => item.id === props.category)?.commentWriteRole ?? 'user'
+  const required = getBoard(props.boardId)?.commentWriteRole ?? 'user'
   if (required === 'admin') return isAdmin.value
   if (required === 'staff') return isAdmin.value || isStaff.value
   return true

package/dist/runtime/components/CommentItem.vue

@@ -12,6 +12,7 @@ dayjs.locale('ko')
 
 const props = defineProps<{
   comment: CommentModel
+  boardId: string
   postId: string
   now: number
   deleting?: boolean
@@ -23,7 +24,11 @@ const emit = defineEmits<{
 }>()
 
 const { user, canEditComment, canDeleteComment, canManageContent, isWriteRestricted, restrictedMessage } = useMemiBoardAuth()
-const { updateComment, setCommentBlinded } = useMemiBoardComments(props.postId, { subscribe: false })
+const { updateComment, setCommentBlinded } = useMemiBoardComments(
+  props.boardId,
+  props.postId,
+  { subscribe: false },
+)
 const { checkText } = useMemiBoardModeration()
 
 const editing = ref(false)

package/dist/runtime/components/CommentList.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, toRef, watch } from 'vue'
 import { useMemiBoardComments } from 'memi-board/runtime'
 import MemiBoardCommentSkeleton from './CommentSkeleton.vue'
 import MemiBoardCommentThread from './CommentThread.vue'
 
-const props = defineProps<{ postId: string, category?: string }>()
+const props = defineProps<{ boardId: string, postId: string }>()
 
-const { comments, commentsPending, hasMore, loadingMore, loadMore } = useMemiBoardComments(props.postId)
+const { comments, commentsPending, hasMore, loadingMore, loadMore } = useMemiBoardComments(
+  toRef(props, 'boardId'),
+  toRef(props, 'postId'),
+)
 const now = ref(Date.now())
 const loadMoreTrigger = ref<HTMLElement | null>(null)
 let relativeTimeTimer: ReturnType<typeof setInterval> | undefined
@@ -82,8 +85,8 @@ onUnmounted(() => {
       v-for="comment in comments"
       :key="comment.id"
       :root="comment"
+      :board-id="boardId"
       :post-id="postId"
-      :category="category"
       :now="now"
     />
 

package/dist/runtime/components/CommentThread.vue

@@ -6,10 +6,18 @@ import MemiBoardCommentForm from './CommentForm.vue'
 import MemiBoardCommentItem from './CommentItem.vue'
 import MemiBoardCommentSkeleton from './CommentSkeleton.vue'
 
-const props = defineProps<{ postId: string, category?: string, root: CommentModel, now: number }>()
+const props = defineProps<{ boardId: string, 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 { deleteComment } = useMemiBoardComments(
+  props.boardId,
+  props.postId,
+  { subscribe: false },
+)
+const { replies, loading, loaded, hasMore, loadMore, refresh } = useMemiBoardReplies(
+  props.boardId,
+  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)
@@ -68,6 +76,7 @@ async function handleDelete(comment: CommentModel) {
   <article class="flex flex-col gap-3">
     <MemiBoardCommentItem
       :comment="root"
+      :board-id="boardId"
       :post-id="postId"
       :now="now"
       :deleting="deletingId === root.id"
@@ -92,7 +101,8 @@ async function handleDelete(comment: CommentModel) {
         v-for="reply in replies"
         :key="reply.id"
         :comment="reply"
-        :post-id="postId"
+        :board-id="boardId"
+      :post-id="postId"
         :now="now"
         :deleting="deletingId === reply.id"
         :class="(reply.depth ?? 1) >= 2 ? 'ml-4 sm:ml-8' : ''"
@@ -112,8 +122,9 @@ async function handleDelete(comment: CommentModel) {
 
     <MemiBoardCommentForm
       v-if="replyingTo"
+      :board-id="boardId"
       :post-id="postId"
-      :category="category"
+      
       :parent="replyingTo"
       class="ml-10"
       @saved="handleSaved"

package/dist/runtime/components/Detail.vue

@@ -11,8 +11,15 @@ import MemiBoardAttachments from './Attachments.vue'
 import MemiBoardCommentForm from './CommentForm.vue'
 import MemiBoardCommentList from './CommentList.vue'
 import MemiBoardLikeButton from './LikeButton.vue'
+import MemiBoardSwipeHint from './SwipeHint.vue'
+import MemiBoardAuthorMenu from './AuthorMenu.vue'
 
-const props = defineProps<{ postId: string }>()
+const props = defineProps<{
+  boardId: string
+  postId: string
+  /** 작성자 메뉴의 "작성글 보기" 링크. 없으면 해당 항목이 비활성 상태로만 보인다. */
+  authorPostsTo?: (authorUid: string) => string | undefined
+}>()
 
 const emit = defineEmits<{
   deleted: []
@@ -21,16 +28,18 @@ const emit = defineEmits<{
   navigate: [post: PostModel]
 }>()
 
-const { getAdjacentPosts, deletePost } = useMemiBoardPosts()
+const { getAdjacentPosts, deletePost, publishPost } = useMemiBoardPosts(() => props.boardId)
 const { canEdit, canDelete } = useMemiBoardAuth()
-const { categoryLabel } = useMemiBoardSettings()
+const { boardLabel } = useMemiBoardSettings()
 const { recordView } = useMemiBoardViews()
 
 // 실시간 구독 — 다른 사람의 좋아요·댓글 수 변경이 화면에 바로 반영된다.
 // 좋아요 토글도 이 구독이 그대로 비춰주므로 별도 로컬 낙관적 갱신이 필요 없다.
-const { post, pending: loading } = useMemiBoardPost(computed(() => props.postId))
+const { post, pending: loading } = useMemiBoardPost(() => props.boardId, computed(() => props.postId))
 const notFound = computed(() => !loading.value && !post.value)
+const isDraft = computed(() => post.value?.isPublished === false)
 const deleting = ref(false)
+const publishing = ref(false)
 const previousPost = ref<PostModel | null>(null)
 const nextPost = ref<PostModel | null>(null)
 const now = ref(Date.now())
@@ -58,9 +67,9 @@ watch(post, async (current) => {
 
 // 상세 진입 시 조회수 +1 (로그인 불필요, 세션당 1회)
 watch(
-  () => props.postId,
-  (id) => {
-    if (id) void recordView(id)
+  () => [props.boardId, props.postId] as const,
+  ([boardId, id]) => {
+    if (boardId && id) void recordView(boardId, id)
   },
   { immediate: true },
 )
@@ -72,6 +81,41 @@ onBeforeUnmount(() => {
   if (clock) clearInterval(clock)
 })
 
+/** 모바일 터치 스와이프: 왼쪽→다음 글, 오른쪽→이전 글. */
+const touchStartX = ref(0)
+const touchStartY = ref(0)
+const SWIPE_MIN_PX = 70
+
+function onTouchStart(e: TouchEvent) {
+  const t = e.changedTouches[0]
+  if (!t) return
+  touchStartX.value = t.clientX
+  touchStartY.value = t.clientY
+}
+
+function onTouchEnd(e: TouchEvent) {
+  const t = e.changedTouches[0]
+  if (!t) return
+  const dx = t.clientX - touchStartX.value
+  const dy = t.clientY - touchStartY.value
+  if (Math.abs(dx) < SWIPE_MIN_PX) return
+  if (Math.abs(dy) > Math.abs(dx) * 0.65) return
+
+  if (dx < 0 && nextPost.value) emit('navigate', nextPost.value)
+  else if (dx > 0 && previousPost.value) emit('navigate', previousPost.value)
+}
+
+async function handlePublish() {
+  if (!post.value) return
+  publishing.value = true
+  try {
+    await publishPost(props.postId)
+  }
+  finally {
+    publishing.value = false
+  }
+}
+
 async function handleDelete() {
   if (!post.value) return
   if (!window.confirm('이 게시글을 삭제하시겠습니까? 되돌릴 수 없습니다.')) return
@@ -96,6 +140,7 @@ const contentHtml = computed(() => {
   if (/<[a-z][\s\S]*>/i.test(raw)) return raw
   return renderMarkdownToHtml(raw)
 })
+
 </script>
 
 <template>
@@ -116,14 +161,35 @@ const contentHtml = computed(() => {
 
   <div
     v-else-if="post"
-    class="flex flex-col gap-6"
+    class="flex flex-col gap-6 touch-pan-y"
+    @touchstart.passive="onTouchStart"
+    @touchend.passive="onTouchEnd"
   >
+    <div v-if="isDraft" class="flex flex-col gap-3 rounded-xl border border-warning/40 bg-warning/10 p-4 sm:flex-row sm:items-center sm:justify-between">
+      <div class="flex items-start gap-2">
+        <UIcon name="i-lucide-eye-off" class="mt-0.5 size-4 shrink-0 text-warning" />
+        <div>
+          <p class="text-sm font-medium text-highlighted">미공개 미리보기</p>
+          <p class="text-xs text-muted">아직 게시되지 않았습니다. 게시하기 전까지는 작성자만 볼 수 있어요.</p>
+        </div>
+      </div>
+      <UButton
+        v-if="canEdit(post)"
+        label="게시하기"
+        icon="i-lucide-send"
+        size="sm"
+        class="shrink-0"
+        :loading="publishing"
+        @click="handlePublish"
+      />
+    </div>
+
     <header class="flex flex-col gap-2">
       <div class="flex items-start justify-between gap-4">
         <div class="flex items-center gap-2 min-w-0">
           <UBadge
             v-if="post.category"
-            :label="categoryLabel(post.category)"
+            :label="boardLabel(boardId)"
             variant="subtle"
           />
           <h1
@@ -133,6 +199,15 @@ const contentHtml = computed(() => {
             {{ post.title }}
           </h1>
         </div>
+        <UButton
+          label="목록"
+          icon="i-lucide-list"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          class="shrink-0"
+          @click="emit('list')"
+        />
       </div>
       <div
         v-if="post.tags?.length"
@@ -163,17 +238,18 @@ const contentHtml = computed(() => {
     <MemiBoardAttachments
       v-if="post.attachments?.length"
       :model-value="post.attachments"
+      :board-id="boardId"
       :post-id="postId"
     />
 
     <div class="flex flex-col items-end gap-2">
       <div class="flex items-center justify-end gap-3 text-sm text-muted">
-        <UAvatar
-          :src="post.authorPhoto ?? undefined"
-          :alt="post.authorName ?? '익명'"
-          size="xs"
+        <MemiBoardAuthorMenu
+          :author-uid="post.authorUid"
+          :author-name="post.authorName"
+          :author-photo="post.authorPhoto"
+          :author-posts-to="authorPostsTo"
         />
-        <span>{{ post.authorName ?? '익명' }}</span>
         <span class="inline-flex items-center gap-1 tabular-nums">
           <UIcon name="i-lucide-eye" class="size-3.5" />
           {{ post.viewCount ?? 0 }}
@@ -214,8 +290,9 @@ const contentHtml = computed(() => {
       </div>
     </div>
 
-    <div class="flex justify-center">
+    <div v-if="!isDraft" class="flex justify-center">
       <MemiBoardLikeButton
+        :board-id="boardId"
         :post-id="postId"
         :like-count="post.likeCount ?? 0"
       />
@@ -250,12 +327,14 @@ const contentHtml = computed(() => {
       />
     </nav>
 
-    <section class="flex flex-col gap-4 border-t border-default pt-4">
+    <MemiBoardSwipeHint v-if="previousPost || nextPost" />
+
+    <section v-if="!isDraft" class="flex flex-col gap-4 border-t border-default pt-4">
       <h2 class="text-sm font-medium text-muted">
         댓글
       </h2>
-      <MemiBoardCommentList :post-id="postId" :category="post.category" />
-      <MemiBoardCommentForm :post-id="postId" :category="post.category" />
+      <MemiBoardCommentList :board-id="boardId" :post-id="postId" />
+      <MemiBoardCommentForm :board-id="boardId" :post-id="postId" />
     </section>
   </div>
 </template>