memi-board 0.3.1 → 0.4.0

package/dist/runtime/components/CommentForm.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useMemiBoardAuth } from 'memi-board'
+import { useMemiBoardComments } from 'memi-board'
+import { useMemiBoardModeration } from 'memi-board'
+
+const props = defineProps<{ postId: string }>()
+
+const { user, isSignedIn } = useMemiBoardAuth()
+const { addComment } = useMemiBoardComments(props.postId)
+const { checkText } = useMemiBoardModeration()
+
+const body = ref('')
+const submitting = ref(false)
+const error = ref('')
+
+async function handleSubmit() {
+  error.value = ''
+  if (!body.value.trim()) return
+  if (!user.value) {
+    error.value = '로그인이 필요합니다.'
+    return
+  }
+
+  submitting.value = true
+  try {
+    const moderation = await checkText(body.value)
+    if (moderation.flagged) {
+      error.value = moderation.reason || '작성할 수 없는 내용이 포함되어 있습니다.'
+      return
+    }
+    await addComment({
+      body: body.value,
+      authorUid: user.value.uid,
+      authorName: user.value.displayName,
+      authorPhoto: user.value.photoURL,
+    })
+    body.value = ''
+  }
+  catch (e) {
+    error.value = (e as Error).message
+  }
+  finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <form
+    v-if="isSignedIn"
+    class="flex flex-col gap-2"
+    @submit.prevent="handleSubmit"
+  >
+    <UTextarea
+      v-model="body"
+      placeholder="댓글을 입력하세요"
+      :rows="2"
+    />
+    <div class="flex justify-between items-center">
+      <p
+        v-if="error"
+        class="text-xs text-error"
+      >
+        {{ error }}
+      </p>
+      <div class="flex-1" />
+      <UButton
+        type="submit"
+        size="sm"
+        label="댓글 작성"
+        :loading="submitting"
+        :disabled="!body.trim()"
+      />
+    </div>
+  </form>
+  <p
+    v-else
+    class="text-sm text-muted"
+  >
+    댓글을 작성하려면 로그인이 필요합니다.
+  </p>
+</template>

package/dist/runtime/components/CommentList.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { formatDate } from 'memi-board'
+import { useMemiBoardComments } from 'memi-board'
+import { useMemiBoardAuth } from 'memi-board'
+
+const props = defineProps<{ postId: string }>()
+
+const { comments, deleteComment } = useMemiBoardComments(props.postId)
+const { canDeleteComment } = useMemiBoardAuth()
+
+const deletingId = ref<string | null>(null)
+
+async function handleDelete(commentId: string) {
+  deletingId.value = commentId
+  try {
+    await deleteComment(commentId)
+  }
+  finally {
+    deletingId.value = null
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <p
+      v-if="!comments.length"
+      class="text-sm text-muted"
+    >
+      아직 댓글이 없습니다.
+    </p>
+
+    <div
+      v-for="comment in comments"
+      :key="comment.id"
+      class="flex items-start gap-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!)"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Detail.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import type { PostDetail } from 'memi-board'
+import { formatDate } 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'
+
+const props = defineProps<{ postId: string }>()
+
+const emit = defineEmits<{ deleted: [], edit: [postId: string] }>()
+
+const { getPost, 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)
+const deleting = ref(false)
+const notFound = ref(false)
+
+async function load() {
+  loading.value = true
+  notFound.value = false
+  const result = await getPost(props.postId)
+  if (!result) {
+    notFound.value = true
+  }
+  post.value = result
+  loading.value = false
+}
+
+onMounted(load)
+watch(() => props.postId, load)
+
+async function handleDelete() {
+  if (!post.value) return
+  if (!window.confirm('이 게시글을 삭제하시겠습니까? 되돌릴 수 없습니다.')) return
+  deleting.value = true
+  try {
+    await deletePost(props.postId)
+    emit('deleted')
+  }
+  finally {
+    deleting.value = false
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="loading"
+    class="flex flex-col gap-3"
+  >
+    <USkeleton class="h-8 w-2/3" />
+    <USkeleton class="h-32 w-full" />
+  </div>
+
+  <p
+    v-else-if="notFound"
+    class="text-sm text-muted"
+  >
+    게시글을 찾을 수 없습니다.
+  </p>
+
+  <div
+    v-else-if="post"
+    class="flex flex-col gap-6"
+  >
+    <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)"
+            variant="subtle"
+          />
+          <h1 class="text-2xl font-semibold">
+            {{ post.title }}
+          </h1>
+        </div>
+        <div
+          v-if="canEdit(post) || canDelete(post)"
+          class="flex gap-2 shrink-0"
+        >
+          <UButton
+            v-if="canEdit(post)"
+            icon="i-lucide-pencil"
+            size="sm"
+            variant="outline"
+            color="neutral"
+            label="수정"
+            @click="emit('edit', postId)"
+          />
+          <UButton
+            v-if="canDelete(post)"
+            icon="i-lucide-trash-2"
+            size="sm"
+            variant="outline"
+            color="error"
+            label="삭제"
+            :loading="deleting"
+            @click="handleDelete"
+          />
+        </div>
+      </div>
+      <div class="flex items-center gap-3 text-sm text-muted">
+        <UAvatar
+          :src="post.authorPhoto ?? undefined"
+          :alt="post.authorName ?? '익명'"
+          size="xs"
+        />
+        <span>{{ post.authorName ?? '익명' }}</span>
+        <span>{{ formatDate(post.createdAt) }}</span>
+      </div>
+      <div
+        v-if="post.tags?.length"
+        class="flex gap-1"
+      >
+        <UBadge
+          v-for="tag in post.tags"
+          :key="tag"
+          variant="subtle"
+          color="neutral"
+          size="sm"
+        >
+          {{ tag }}
+        </UBadge>
+      </div>
+    </header>
+
+    <p class="whitespace-pre-wrap break-words leading-relaxed">
+      {{ post.content }}
+    </p>
+
+    <MemiBoardAttachments
+      v-if="post.attachments?.length"
+      :model-value="post.attachments"
+      :post-id="postId"
+    />
+
+    <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" />
+    </section>
+  </div>
+</template>

package/dist/runtime/components/Editor.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import type { Attachment } from 'memi-board'
+import { useMemiBoardAuth } from 'memi-board'
+import { useMemiBoardPosts } from 'memi-board'
+import { useMemiBoardModeration } from 'memi-board'
+import { useMemiBoardSettings } from 'memi-board'
+import MemiBoardAttachments from './Attachments.vue'
+
+const props = defineProps<{
+  /** 지정하면 수정 모드, 지정하지 않으면 새 글 작성 모드. */
+  postId?: string
+}>()
+
+const emit = defineEmits<{ saved: [id: string], cancel: [] }>()
+
+const { user } = useMemiBoardAuth()
+const { getPost, createPost, updatePost } = useMemiBoardPosts()
+const { checkText } = useMemiBoardModeration()
+const { categories } = useMemiBoardSettings()
+
+const title = ref('')
+const content = ref('')
+const tagsInput = ref('')
+const category = ref<string | undefined>(undefined)
+const attachments = ref<Attachment[]>([])
+
+const categoryItems = computed(() => categories.value.map(c => ({ label: c.label, value: c.id })))
+
+const loading = ref(!!props.postId)
+const saving = ref(false)
+const error = ref('')
+
+/** 새 글은 아직 slug가 없으므로 첨부파일 Storage 경로용 임시 네임스페이스를 쓴다. */
+const attachmentNamespace = ref(props.postId ?? `new-${Date.now()}`)
+
+onMounted(async () => {
+  if (!props.postId) return
+  try {
+    const post = await getPost(props.postId)
+    if (!post) {
+      error.value = '게시글을 찾을 수 없습니다.'
+      return
+    }
+    title.value = post.title
+    content.value = post.content
+    tagsInput.value = (post.tags ?? []).join(', ')
+    category.value = post.category
+    attachments.value = post.attachments ?? []
+  }
+  finally {
+    loading.value = false
+  }
+})
+
+async function handleSubmit() {
+  error.value = ''
+  if (!title.value.trim() || !content.value.trim()) {
+    error.value = '제목과 내용을 입력해 주세요.'
+    return
+  }
+  if (!user.value) {
+    error.value = '로그인이 필요합니다.'
+    return
+  }
+
+  saving.value = true
+  try {
+    const moderation = await checkText(`${title.value}\n${content.value}`)
+    if (moderation.flagged) {
+      error.value = moderation.reason || '게시할 수 없는 내용이 포함되어 있습니다.'
+      return
+    }
+
+    const tags = tagsInput.value.split(',').map(t => t.trim()).filter(Boolean)
+
+    if (props.postId) {
+      await updatePost(props.postId, { title: title.value, content: content.value, tags, category: category.value, attachments: attachments.value })
+      emit('saved', props.postId)
+    }
+    else {
+      const id = await createPost({
+        title: title.value,
+        content: content.value,
+        tags,
+        category: category.value,
+        attachments: attachments.value,
+        authorUid: user.value.uid,
+        authorName: user.value.displayName,
+        authorPhoto: user.value.photoURL,
+      })
+      emit('saved', id)
+    }
+  }
+  catch (e) {
+    error.value = (e as Error).message
+  }
+  finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="loading"
+    class="flex flex-col gap-3"
+  >
+    <USkeleton class="h-10 w-full" />
+    <USkeleton class="h-40 w-full" />
+  </div>
+
+  <form
+    v-else
+    class="flex flex-col gap-4"
+    @submit.prevent="handleSubmit"
+  >
+    <USelect
+      v-model="category"
+      :items="categoryItems"
+      placeholder="카테고리 선택"
+      class="w-40"
+    />
+    <UInput
+      v-model="title"
+      placeholder="제목"
+      size="lg"
+      required
+    />
+    <UTextarea
+      v-model="content"
+      placeholder="내용을 입력하세요"
+      :rows="12"
+      required
+    />
+    <UInput
+      v-model="tagsInput"
+      placeholder="태그 (쉼표로 구분)"
+    />
+
+    <MemiBoardAttachments
+      v-model="attachments"
+      :post-id="attachmentNamespace"
+      editable
+    />
+
+    <p
+      v-if="error"
+      class="text-sm text-error"
+    >
+      {{ error }}
+    </p>
+
+    <div class="flex gap-2">
+      <UButton
+        type="submit"
+        :loading="saving"
+        :label="postId ? '수정 완료' : '게시하기'"
+      />
+      <UButton
+        variant="ghost"
+        color="neutral"
+        label="취소"
+        @click="emit('cancel')"
+      />
+    </div>
+  </form>
+</template>

package/dist/runtime/components/List.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { RouterLink } from 'vue-router'
+import type { DocumentData, QueryDocumentSnapshot } from 'firebase/firestore'
+import { useMemiBoardPosts } from 'memi-board'
+import { useMemiBoardSettings } from 'memi-board'
+import type { PostModel } from 'memi-board'
+import { formatDate } from 'memi-board'
+
+const props = withDefaults(defineProps<{
+  pageSize?: number
+  /** 지정하면 각 글이 `${linkBase}/${id}`로 이동하는 링크가 된다. 지정하지 않으면 select 이벤트만 emit. */
+  linkBase?: string
+}>(), {
+  pageSize: 20,
+})
+
+const emit = defineEmits<{ select: [post: PostModel] }>()
+
+const { getPosts } = useMemiBoardPosts()
+const { categoryLabel } = useMemiBoardSettings()
+
+const posts = ref<PostModel[]>([])
+const cursor = ref<QueryDocumentSnapshot<DocumentData> | undefined>(undefined)
+const hasMore = ref(false)
+const loading = ref(false)
+const initialLoading = ref(true)
+
+async function loadMore() {
+  loading.value = true
+  try {
+    const result = await getPosts({ pageSize: props.pageSize, cursor: cursor.value })
+    posts.value.push(...result.posts)
+    cursor.value = result.cursor
+    hasMore.value = result.hasMore
+  }
+  finally {
+    loading.value = false
+    initialLoading.value = false
+  }
+}
+
+onMounted(loadMore)
+
+function handleClick(post: PostModel) {
+  if (!props.linkBase) emit('select', post)
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <template v-if="initialLoading">
+      <USkeleton
+        v-for="i in 3"
+        :key="i"
+        class="h-20 w-full"
+      />
+    </template>
+
+    <p
+      v-else-if="!posts.length"
+      class="text-sm text-muted text-center py-8"
+    >
+      아직 게시글이 없습니다.
+    </p>
+
+    <component
+      :is="linkBase ? RouterLink : 'button'"
+      v-for="post in posts"
+      :key="post.id"
+      :to="linkBase ? `${linkBase}/${post.id}` : undefined"
+      class="text-left"
+      @click="handleClick(post)"
+    >
+      <UCard class="hover:bg-elevated/50 transition-colors">
+        <div class="flex items-center justify-between gap-4">
+          <div class="flex items-center gap-2 min-w-0">
+            <UBadge
+              v-if="post.category"
+              :label="categoryLabel(post.category)"
+              variant="subtle"
+              size="sm"
+            />
+            <h3 class="font-medium truncate">
+              {{ post.title }}
+            </h3>
+          </div>
+          <span class="text-xs text-muted shrink-0">{{ formatDate(post.createdAt) }}</span>
+        </div>
+        <div class="flex items-center gap-3 text-xs text-muted mt-2">
+          <span>{{ post.authorName ?? '익명' }}</span>
+          <span class="flex items-center gap-1">
+            <UIcon
+              name="i-lucide-message-circle"
+              class="size-3"
+            />{{ post.commentCount }}
+          </span>
+          <span
+            v-if="post.attachments?.length"
+            class="flex items-center gap-1"
+          >
+            <UIcon
+              name="i-lucide-paperclip"
+              class="size-3"
+            />{{ post.attachments.length }}
+          </span>
+        </div>
+      </UCard>
+    </component>
+
+    <UButton
+      v-if="hasMore"
+      variant="outline"
+      color="neutral"
+      label="더 보기"
+      block
+      :loading="loading"
+      @click="loadMore"
+    />
+  </div>
+</template>