memi-board 0.32.0 → 0.37.0

package/dist/runtime/components/MiniPicker.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { getDocs, limit as fbLimit, orderBy, query, where } from 'firebase/firestore'
+import { useFirestore } from 'vuefire'
+import type { PostModel } from 'memi-board/runtime'
+import { miniPostTitle, useBoardPathConfig, useMemiBoardSettings } from 'memi-board/runtime'
+import { postsCol } from '../utils/boardPaths'
+
+const props = defineProps<{
+  modelValue: string[]
+  max: number
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]]
+}>()
+
+const db = useFirestore()
+const cfg = () => useBoardPathConfig()
+const { categoryLabel } = useMemiBoardSettings()
+const catalog = ref<PostModel[]>([])
+const pending = ref(true)
+const q = ref('')
+
+const selected = computed(() => props.modelValue)
+
+const filtered = computed(() => {
+  const needle = q.value.trim().toLowerCase()
+  const rows = catalog.value.filter(post => !selected.value.includes(post.id || ''))
+  if (!needle) return rows.slice(0, 20)
+  return rows.filter((post) => {
+    const title = miniPostTitle(post).toLowerCase()
+    return title.includes(needle) || (post.slug || '').toLowerCase().includes(needle)
+  }).slice(0, 20)
+})
+
+const picked = computed(() =>
+  selected.value
+    .map(id => catalog.value.find(post => post.id === id))
+    .filter((item): item is PostModel => !!item)
+)
+
+const full = computed(() => selected.value.length >= props.max)
+
+onMounted(async () => {
+  try {
+    const snapshot = await getDocs(query(
+      postsCol(db, cfg()),
+      where('isPublished', '==', true),
+      where('listed', '==', true),
+      orderBy('createdAt', 'desc'),
+      fbLimit(80),
+    ))
+    catalog.value = snapshot.docs.map(item => ({ id: item.id, ...item.data() }) as PostModel)
+  }
+  finally {
+    pending.value = false
+  }
+})
+
+function add(id: string) {
+  if (!id || selected.value.includes(id) || full.value) return
+  emit('update:modelValue', [...selected.value, id])
+}
+
+function remove(id: string) {
+  emit('update:modelValue', selected.value.filter(item => item !== id))
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 border-t border-default p-3">
+    <div class="flex flex-wrap items-center justify-between gap-2">
+      <p class="text-xs text-muted">
+        고른 글 {{ selected.length }} / {{ max }}
+        <span v-if="max >= 2"> · 2개부터 캐러셀, 4개는 그리드</span>
+      </p>
+      <UInput
+        v-model="q"
+        size="sm"
+        icon="i-lucide-search"
+        placeholder="제목 검색"
+        class="w-48"
+      />
+    </div>
+
+    <div v-if="picked.length" class="flex flex-col gap-1">
+      <div
+        v-for="post in picked"
+        :key="post.id"
+        class="flex items-center gap-2 rounded-lg bg-elevated/50 px-2 py-1.5"
+      >
+        <p class="min-w-0 flex-1 truncate text-sm">
+          {{ miniPostTitle(post) }}
+          <span class="text-xs text-muted">
+            · {{ categoryLabel(post.category || post.boardId) }}
+          </span>
+        </p>
+        <UButton
+          icon="i-lucide-x"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          square
+          @click="remove(post.id!)"
+        />
+      </div>
+    </div>
+
+    <p v-if="pending" class="text-xs text-muted">글을 불러오는 중…</p>
+    <ul v-else class="flex max-h-48 flex-col gap-0.5 overflow-y-auto">
+      <li v-for="post in filtered" :key="post.id">
+        <button
+          type="button"
+          class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-elevated disabled:opacity-40"
+          :disabled="full"
+          @click="add(post.id!)"
+        >
+          <UIcon name="i-lucide-plus" class="size-3.5 shrink-0 text-muted" />
+          <span class="min-w-0 truncate">{{ miniPostTitle(post) }}</span>
+          <span class="shrink-0 text-[11px] text-muted">
+            {{ categoryLabel(post.category || post.boardId) }}
+          </span>
+        </button>
+      </li>
+      <li v-if="!filtered.length" class="px-2 py-3 text-center text-xs text-muted">
+        더 고를 글이 없습니다.
+      </li>
+    </ul>
+  </div>
+</template>

package/dist/runtime/components/MiniPost.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { BoardSection, PostModel } from 'memi-board/runtime'
+import { miniPostsView, miniViewGroup, useMemiBoardMiniPicked, useMemiBoardSettings } from 'memi-board/runtime'
+import MemiBoardMiniCard from './MiniCard.vue'
+import MemiBoardMiniPosts from './MiniPosts.vue'
+
+const props = defineProps<{
+  section: BoardSection
+  getPostLink?: (post: PostModel) => string | undefined
+}>()
+
+const { posts, pending } = useMemiBoardMiniPicked(() => props.section.postIds)
+const { getBoard } = useMemiBoardSettings()
+const view = computed(() => miniPostsView(posts.value, getBoard))
+const useCarousel = computed(() =>
+  miniViewGroup(view.value) === 'list' && posts.value.length >= 2 && posts.value.length !== 4,
+)
+</script>
+
+<template>
+  <div class="flex min-h-0 flex-1 flex-col">
+    <div v-if="pending" class="grid grid-cols-2 gap-2 p-2">
+      <USkeleton v-for="i in Math.min(section.count, 4)" :key="i" class="aspect-[4/3] w-full" />
+    </div>
+    <p
+      v-else-if="!posts.length"
+      class="flex flex-1 items-center justify-center px-3 py-6 text-sm text-muted"
+    >
+      고른 게시물이 없습니다.
+    </p>
+    <UCarousel
+      v-else-if="useCarousel"
+      v-slot="{ item }"
+      :items="posts"
+      arrows
+      dots
+      loop
+      :ui="{ item: 'basis-full ps-0' }"
+      class="min-w-0 p-2"
+    >
+      <MemiBoardMiniCard :post="item" :get-post-link="getPostLink" />
+    </UCarousel>
+    <MemiBoardMiniPosts
+      v-else
+      :posts="posts"
+      :view="view"
+      show-board
+      :get-post-link="getPostLink"
+    />
+  </div>
+</template>

package/dist/runtime/components/MiniPosts.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed, ref, resolveComponent } from 'vue'
+import type { BoardListView, PostModel } from 'memi-board/runtime'
+import {
+  formatRelativeDate,
+  miniPostImage,
+  miniPostLink,
+  miniPostTitle,
+  miniViewGroup,
+  useMemiBoardSettings,
+  videoListCoverUrl,
+} from 'memi-board/runtime'
+
+const props = defineProps<{
+  posts: PostModel[]
+  view: BoardListView
+  showBoard?: boolean
+  getPostLink?: (post: PostModel) => string | undefined
+}>()
+
+const NuxtLink = resolveComponent('NuxtLink')
+const now = ref(Date.now())
+const { categoryLabel } = useMemiBoardSettings()
+const group = computed(() => miniViewGroup(props.view))
+
+function cover(post: PostModel) {
+  return videoListCoverUrl(post) || miniPostImage(post)
+}
+
+function isVideo(post: PostModel) {
+  return props.view === 'video' || Boolean(post.videoUrl)
+}
+
+function postTo(post: PostModel) {
+  return props.getPostLink?.(post) ?? miniPostLink(post)
+}
+</script>
+
+<template>
+  <div
+    v-if="group === 'media'"
+    class="grid grid-cols-2 gap-1.5 p-1.5"
+  >
+    <component
+      :is="postTo(post) ? NuxtLink : 'div'"
+      v-for="post in posts"
+      :key="post.id"
+      :to="postTo(post)"
+      class="group relative aspect-[4/3] overflow-hidden rounded-lg bg-elevated"
+    >
+      <img
+        v-if="cover(post)"
+        :src="cover(post)"
+        :alt="miniPostTitle(post)"
+        class="size-full object-cover transition duration-300 group-hover:scale-105"
+      >
+      <div v-else class="flex size-full items-center justify-center text-muted">
+        <UIcon :name="isVideo(post) ? 'i-lucide-video' : 'i-lucide-image'" class="size-7" />
+      </div>
+      <span
+        v-if="isVideo(post)"
+        class="absolute inset-0 flex items-center justify-center bg-black/10"
+      >
+        <span class="flex size-9 items-center justify-center rounded-full bg-black/70 text-white">
+          <UIcon name="i-lucide-play" class="ml-0.5 size-4 fill-current" />
+        </span>
+      </span>
+      <span class="absolute right-1.5 top-1.5 inline-flex items-center gap-0.5 rounded-full bg-black/55 px-1.5 py-px text-[11px] tabular-nums text-white">
+        <UIcon name="i-lucide-message-square" class="size-3" />
+        {{ post.commentCount ?? 0 }}
+      </span>
+    </component>
+  </div>
+
+  <ul
+    v-else
+    class="flex min-h-0 flex-1 flex-col divide-y divide-default"
+  >
+    <li v-for="post in posts" :key="post.id">
+      <component
+        :is="postTo(post) ? NuxtLink : 'div'"
+        :to="postTo(post)"
+        class="memi-board-post-link flex items-center gap-2 px-3 py-2 text-highlighted transition-colors hover:bg-elevated/60"
+      >
+        <div class="min-w-0 flex-1">
+          <div class="flex min-w-0 items-start gap-1.5">
+            <p class="min-w-0 flex-1 truncate text-sm font-medium text-inherit">
+              {{ miniPostTitle(post) }}
+            </p>
+            <span class="mt-0.5 inline-flex shrink-0 items-center gap-0.5 text-[11px] tabular-nums text-muted">
+              <UIcon name="i-lucide-message-square" class="size-3" />
+              {{ post.commentCount ?? 0 }}
+            </span>
+          </div>
+          <p class="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-[11px] text-muted">
+            <span v-if="showBoard && (post.boardId || post.category)">
+              {{ categoryLabel(post.category || post.boardId) }}
+            </span>
+            <time>{{ formatRelativeDate(post.createdAt, now) }}</time>
+          </p>
+        </div>
+        <div
+          v-if="miniPostImage(post)"
+          class="size-11 shrink-0 overflow-hidden rounded-md bg-elevated"
+        >
+          <img
+            :src="miniPostImage(post)!"
+            :alt="miniPostTitle(post)"
+            class="size-full object-cover"
+          >
+        </div>
+      </component>
+    </li>
+  </ul>
+</template>

package/dist/runtime/components/ReportButton.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import {
+  REPORT_DETAIL_MAX_LENGTH,
+  REPORT_REASONS,
+  useMemiBoardAuth,
+  useMemiBoardReports,
+} from 'memi-board/runtime'
+import type { BoardReportReason } from 'memi-board/runtime'
+
+const props = defineProps<{
+  boardId: string
+  postId: string
+  authorUid: string
+  authorName?: string | null
+  postTitle?: string | null
+}>()
+
+const { isSignedIn, user } = useMemiBoardAuth()
+const { hasReported, pending, submitReport } = useMemiBoardReports(props.boardId, props.postId)
+
+const open = ref(false)
+const reason = ref<BoardReportReason>('spam')
+const detail = ref('')
+const error = ref('')
+const done = ref(false)
+
+const isOwnPost = computed(() => !!user.value && user.value.uid === props.authorUid)
+const canReport = computed(() => isSignedIn.value && !isOwnPost.value)
+
+function openModal() {
+  if (hasReported.value || pending.value) return
+  reason.value = 'spam'
+  detail.value = ''
+  error.value = ''
+  done.value = false
+  open.value = true
+}
+
+async function submit() {
+  error.value = ''
+  try {
+    await submitReport({
+      reason: reason.value,
+      detail: detail.value,
+      postTitle: props.postTitle || '',
+      authorUid: props.authorUid,
+      authorName: props.authorName ?? null,
+    })
+    done.value = true
+  }
+  catch (cause) {
+    error.value = cause instanceof Error ? cause.message : '신고하지 못했습니다.'
+  }
+}
+</script>
+
+<template>
+  <template v-if="canReport">
+    <UButton
+      icon="i-lucide-flag"
+      size="sm"
+      variant="ghost"
+      :color="hasReported ? 'warning' : 'neutral'"
+      :label="hasReported ? '신고함' : '신고'"
+      :disabled="hasReported"
+      @click="openModal"
+    />
+    <UModal v-model:open="open" title="게시물 신고">
+      <template #body>
+        <div v-if="done" class="py-4 text-sm text-muted">
+          신고를 접수했습니다. 스태프가 내용을 확인합니다.
+        </div>
+        <form
+          v-else
+          class="flex flex-col gap-3"
+          @submit.prevent="submit"
+        >
+          <URadioGroup
+            v-model="reason"
+            :items="REPORT_REASONS"
+            value-key="value"
+            legend="사유"
+          />
+          <UTextarea
+            v-model="detail"
+            :rows="3"
+            :maxlength="REPORT_DETAIL_MAX_LENGTH"
+            placeholder="자세한 내용 (선택)"
+          />
+          <p class="text-right text-xs text-dimmed">
+            {{ detail.length.toLocaleString() }} / {{ REPORT_DETAIL_MAX_LENGTH.toLocaleString() }}
+          </p>
+          <p v-if="error" class="text-xs text-error">
+            {{ error }}
+          </p>
+          <div class="flex justify-end gap-2">
+            <UButton
+              type="button"
+              color="neutral"
+              variant="ghost"
+              label="취소"
+              :disabled="pending"
+              @click="open = false"
+            />
+            <UButton
+              type="submit"
+              color="warning"
+              label="신고하기"
+              :loading="pending"
+            />
+          </div>
+        </form>
+      </template>
+    </UModal>
+  </template>
+</template>

package/dist/runtime/components/ReportList.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { ref, resolveComponent } from 'vue'
+import {
+  formatRelativeDate,
+  reportReasonLabel,
+  useMemiBoardAuth,
+  useMemiBoardReportQueue,
+} from 'memi-board/runtime'
+import type { BoardReportModel } from 'memi-board/runtime'
+
+const props = defineProps<{
+  boardId?: string
+  getPostLink?: (report: BoardReportModel) => string | undefined
+}>()
+
+const NuxtLink = resolveComponent('NuxtLink')
+const { canManageContent } = useMemiBoardAuth()
+const { reports, pending, loadingMore, hasMore, loadError, loadMore, dismissReport, actionReport } = useMemiBoardReportQueue({
+  boardId: () => props.boardId || '',
+})
+const now = ref(Date.now())
+const actingId = ref<string | null>(null)
+
+function postLink(report: BoardReportModel) {
+  return props.getPostLink?.(report)
+}
+
+async function handle(report: BoardReportModel, action: 'dismiss' | 'action') {
+  if (!report.id) return
+  actingId.value = report.id
+  try {
+    if (action === 'dismiss') await dismissReport(report)
+    else await actionReport(report)
+  }
+  finally {
+    actingId.value = null
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <p
+      v-if="!canManageContent"
+      class="py-8 text-center text-sm text-muted"
+    >
+      스태프만 신고 목록을 볼 수 있습니다.
+    </p>
+    <template v-else-if="pending">
+      <USkeleton v-for="i in 4" :key="i" class="h-16 w-full" />
+    </template>
+    <p
+      v-else-if="loadError"
+      class="py-8 text-center text-sm text-error"
+    >
+      목록을 불러오지 못했습니다: {{ loadError }}
+    </p>
+    <p
+      v-else-if="!reports.length"
+      class="py-8 text-center text-sm text-muted"
+    >
+      대기 중인 신고가 없습니다.
+    </p>
+    <ul
+      v-else
+      class="flex flex-col divide-y divide-default overflow-hidden rounded-lg border border-default"
+    >
+      <li
+        v-for="report in reports"
+        :key="report.id"
+        class="flex flex-col gap-2 px-3 py-3 sm:flex-row sm:items-start sm:justify-between"
+      >
+        <div class="min-w-0 flex-1">
+          <component
+            :is="postLink(report) ? NuxtLink : 'p'"
+            :to="postLink(report)"
+            class="truncate text-sm font-medium text-highlighted"
+            :class="postLink(report) ? 'hover:underline' : ''"
+          >
+            {{ report.postTitle || '제목 없는 글' }}
+          </component>
+          <p class="mt-0.5 text-xs text-muted">
+            {{ reportReasonLabel(report.reason) }}
+            <span v-if="report.authorName"> · 작성 {{ report.authorName }}</span>
+            · {{ formatRelativeDate(report.createdAt, now) }}
+          </p>
+          <p
+            v-if="report.detail"
+            class="mt-1 line-clamp-3 text-sm text-toned"
+          >
+            {{ report.detail }}
+          </p>
+        </div>
+        <div class="flex shrink-0 items-center gap-1">
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="soft"
+            label="기각"
+            :loading="actingId === report.id"
+            @click="handle(report, 'dismiss')"
+          />
+          <UButton
+            size="xs"
+            color="warning"
+            variant="soft"
+            label="확인"
+            :loading="actingId === report.id"
+            @click="handle(report, 'action')"
+          />
+        </div>
+      </li>
+    </ul>
+    <UButton
+      v-if="canManageContent && !pending && hasMore"
+      variant="outline"
+      color="neutral"
+      label="더 보기"
+      block
+      :loading="loadingMore"
+      @click="loadMore"
+    />
+  </div>
+</template>

package/dist/runtime/components/Section.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { BoardSection, CommentModel, PostModel } from 'memi-board/runtime'
+import { miniMoreLink, sectionColClass, sectionMinHeight } from 'memi-board/runtime'
+import MemiBoardMiniComments from './MiniComments.vue'
+import MemiBoardMiniList from './MiniList.vue'
+import MemiBoardMiniPost from './MiniPost.vue'
+
+const props = defineProps<{
+  section: BoardSection
+  getPostLink?: (post: PostModel) => string | undefined
+  getCommentLink?: (comment: CommentModel) => string | undefined
+  getMoreLink?: (section: BoardSection) => string | undefined
+}>()
+
+const moreTo = computed(() => props.getMoreLink?.(props.section) ?? miniMoreLink(props.section))
+</script>
+
+<template>
+  <article
+    class="flex flex-col overflow-hidden rounded-xl border border-default bg-default"
+    :class="[sectionColClass(section.cols), sectionMinHeight(section.height)]"
+  >
+    <header
+      v-if="section.showTitle || section.kind === 'list' || section.kind === 'comments'"
+      class="flex items-center justify-between gap-2 border-b border-default px-3 py-2"
+    >
+      <h2
+        v-if="section.showTitle"
+        class="min-w-0 truncate text-sm font-semibold text-highlighted"
+      >
+        {{ section.title }}
+      </h2>
+      <span v-else class="min-w-0" />
+      <UButton
+        v-if="section.kind === 'list' || section.kind === 'comments'"
+        :to="moreTo"
+        variant="link"
+        color="neutral"
+        size="xs"
+        trailing-icon="i-lucide-chevron-right"
+        class="shrink-0 px-0"
+        label="더 보기"
+      />
+    </header>
+    <MemiBoardMiniList
+      v-if="section.kind === 'list'"
+      :section="section"
+      :get-post-link="getPostLink"
+    />
+    <MemiBoardMiniComments
+      v-else-if="section.kind === 'comments'"
+      :section="section"
+      :get-comment-link="getCommentLink"
+    />
+    <MemiBoardMiniPost
+      v-else
+      :section="section"
+      :get-post-link="getPostLink"
+    />
+  </article>
+</template>

package/dist/runtime/components/Settings.vue

@@ -56,8 +56,7 @@ const staffOptions = computed(() => users.value
   .filter(item => item.role === 'staff')
   .map(item => ({ label: item.displayName || item.id, value: item.id })))
 function needsStaffPicker(category: BoardCategory) {
-  return (category.writeRole === 'staff' || category.commentWriteRole === 'staff')
-    && canManageStaffAssignment.value
+  return canManageStaffAssignment.value
 }
 // Firebase의 SSR pending 값과 클라이언트 첫 값이 달라질 수 있다. 최초 hydration은
 // 양쪽 모두 로딩 화면으로 맞춘 뒤 mounted 이후 실제 상태를 렌더링한다.
@@ -247,14 +246,14 @@ async function runDeleteAll() {
           />
         </div>
         <div v-if="needsStaffPicker(category)" 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>
+          <div><p class="text-sm font-medium">담당 스태프</p><p class="text-xs text-muted">지정한 스태프만 이 보드를 설정·관리합니다. 비우면 관리자만</p></div>
           <USelectMenu
             v-model="category.allowedStaffUids"
             :items="staffOptions"
             value-key="value"
             label-key="label"
             multiple
-            placeholder="스태프 전체 허용"
+            placeholder="관리자만 (스태프 미지정)"
             @update:model-value="savedId = null"
           />
         </div>

package/dist/runtime/components/UserCommentList.vue

@@ -85,6 +85,9 @@ function commentLink(comment: CommentModel): string | undefined {
           </p>
           <p class="mt-1 text-xs text-muted">
             {{ formatRelativeDate(comment.createdAt, now) }}
+            <template v-if="(comment.likeCount ?? 0) > 0">
+              · 좋아요 {{ comment.likeCount }}
+            </template>
           </p>
         </component>
       </li>