memi-board 0.3.1 → 0.4.2

package/dist/runtime/components/Attachments.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { Attachment } from 'memi-board'
+import { useMemiBoardStorage } from 'memi-board'
+
+const props = withDefaults(defineProps<{
+  modelValue: Attachment[]
+  /** 새 글 작성 중이면 아직 slug가 없으므로 임시 네임스페이스를 넘긴다. */
+  postId: string
+  editable?: boolean
+  maxFiles?: number
+}>(), {
+  editable: false,
+  maxFiles: 5,
+})
+
+const emit = defineEmits<{ 'update:modelValue': [attachments: Attachment[]] }>()
+
+const { uploadAttachment, deleteAttachment } = useMemiBoardStorage()
+
+const fileInput = ref<HTMLInputElement | null>(null)
+const uploading = ref(false)
+const uploadProgress = ref(0)
+const deletingIndex = ref<number | null>(null)
+const uploadError = ref('')
+
+function isImage(type: string) {
+  return type.startsWith('image/')
+}
+
+async function onFileInputChange(e: Event) {
+  const input = e.target as HTMLInputElement
+  const files = Array.from(input.files ?? [])
+  input.value = ''
+  if (!files.length) return
+
+  const remaining = props.maxFiles - props.modelValue.length
+  const toUpload = files.slice(0, remaining)
+
+  uploading.value = true
+  uploadError.value = ''
+  try {
+    const uploaded: Attachment[] = []
+    for (const file of toUpload) {
+      uploadProgress.value = 0
+      const { promise } = uploadAttachment(file, props.postId, (ratio) => {
+        uploadProgress.value = ratio
+      })
+      uploaded.push(await promise)
+    }
+    emit('update:modelValue', [...props.modelValue, ...uploaded])
+  }
+  catch (e) {
+    uploadError.value = (e as Error).message
+  }
+  finally {
+    uploading.value = false
+  }
+}
+
+async function removeAttachment(index: number) {
+  const attachment = props.modelValue[index]
+  if (!attachment) return
+  deletingIndex.value = index
+  try {
+    await deleteAttachment(attachment)
+    emit('update:modelValue', props.modelValue.filter((_, i) => i !== index))
+  }
+  finally {
+    deletingIndex.value = null
+  }
+}
+
+function fileIcon(type: string): string {
+  if (type === 'application/pdf') return 'i-lucide-file-text'
+  if (type.includes('zip') || type.includes('archive') || type.includes('compressed')) return 'i-lucide-archive'
+  if (type.includes('spreadsheet') || type.includes('excel') || type.includes('csv')) return 'i-lucide-table'
+  if (type.includes('presentation') || type.includes('powerpoint')) return 'i-lucide-presentation'
+  if (isImage(type)) return 'i-lucide-image'
+  if (type.includes('video')) return 'i-lucide-video'
+  if (type.includes('audio')) return 'i-lucide-music'
+  return 'i-lucide-file'
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div
+      v-for="(attachment, i) in modelValue"
+      :key="attachment.path"
+      class="flex items-center gap-3 px-3 py-2 rounded-lg border border-default"
+    >
+      <img
+        v-if="isImage(attachment.type)"
+        :src="attachment.url"
+        class="size-10 rounded object-cover shrink-0"
+      >
+      <UIcon
+        v-else
+        :name="fileIcon(attachment.type)"
+        class="size-5 shrink-0 text-muted"
+      />
+      <div class="flex-1 min-w-0">
+        <p class="text-sm font-medium truncate">
+          {{ attachment.name }}
+        </p>
+        <p class="text-xs text-muted">
+          {{ formatSize(attachment.size) }}
+        </p>
+      </div>
+
+      <UButton
+        v-if="editable"
+        icon="i-lucide-x"
+        size="xs"
+        color="error"
+        variant="ghost"
+        :loading="deletingIndex === i"
+        @click="removeAttachment(i)"
+      />
+      <UButton
+        v-else
+        icon="i-lucide-download"
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        :to="attachment.url"
+        target="_blank"
+      />
+    </div>
+
+    <template v-if="editable && modelValue.length < maxFiles">
+      <input
+        ref="fileInput"
+        type="file"
+        multiple
+        class="hidden"
+        @change="onFileInputChange"
+      >
+      <UButton
+        icon="i-lucide-paperclip"
+        :label="`파일 첨부 (${modelValue.length} / ${maxFiles})`"
+        variant="outline"
+        color="neutral"
+        size="sm"
+        :loading="uploading"
+        @click="fileInput?.click()"
+      />
+      <UProgress
+        v-if="uploading"
+        :model-value="Math.round(uploadProgress * 100)"
+      />
+      <p
+        v-if="uploadError"
+        class="text-xs text-error"
+      >
+        {{ uploadError }}
+      </p>
+    </template>
+    <p
+      v-else-if="editable"
+      class="text-xs text-muted"
+    >
+      최대 {{ maxFiles }}개까지 첨부할 수 있습니다.
+    </p>
+  </div>
+</template>

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>