memi-board 0.4.13 → 0.5.0

package/dist/runtime/components/Detail.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
-import type { PostDetail } from 'memi-board'
+import Youtube from '@tiptap/extension-youtube'
+import type { PostDetail, PostModel } from 'memi-board'
 import { formatDate, renderMarkdownToHtml } from 'memi-board'
 import { useMemiBoardPosts } from 'memi-board'
 import { useMemiBoardAuth } from 'memi-board'
@@ -12,9 +13,14 @@ import MemiBoardCommentList from './CommentList.vue'
 
 const props = defineProps<{ postId: string }>()
 
-const emit = defineEmits<{ deleted: [], edit: [postId: string] }>()
+const emit = defineEmits<{
+  deleted: []
+  edit: [postId: string]
+  list: []
+  navigate: [post: PostModel]
+}>()
 
-const { getPost, deletePost } = useMemiBoardPosts()
+const { getPost, getAdjacentPosts, deletePost } = useMemiBoardPosts()
 const { canEdit, canDelete } = useMemiBoardAuth()
 const { categoryLabel } = useMemiBoardSettings()
 // post.commentCount는 상세 진입 시점의 스냅샷이라 새 댓글이 즉시 반영되지 않는다 — 실시간 댓글 목록 길이로 표시한다.
@@ -24,6 +30,16 @@ const post = ref<PostDetail | null>(null)
 const loading = ref(true)
 const deleting = ref(false)
 const notFound = ref(false)
+const previousPost = ref<PostModel | null>(null)
+const nextPost = ref<PostModel | null>(null)
+const viewerExtensions = [
+  Youtube.configure({
+    nocookie: true,
+    controls: true,
+    width: 640,
+    height: 360,
+  }),
+]
 
 async function load() {
   loading.value = true
@@ -33,6 +49,15 @@ async function load() {
     notFound.value = true
   }
   post.value = result
+  if (result) {
+    const adjacent = await getAdjacentPosts(result)
+    previousPost.value = adjacent.previous
+    nextPost.value = adjacent.next
+  }
+  else {
+    previousPost.value = null
+    nextPost.value = null
+  }
   loading.value = false
 }
 
@@ -97,39 +122,6 @@ const contentHtml = computed(() => {
             {{ 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"
@@ -147,10 +139,14 @@ const contentHtml = computed(() => {
       </div>
     </header>
 
-    <!-- 마크다운 본문 (정적 렌더 — 상세에 UEditor 쓰면 목록 이동 시 TipTap plugin 충돌) -->
-    <div
-      class="prose dark:prose-invert max-w-none break-words"
-      v-html="contentHtml"
+    <!-- 작성 화면과 동일한 TipTap 스타일을 사용하는 읽기 전용 뷰어 -->
+    <UEditor
+      class="board-content prose dark:prose-invert max-w-none break-words"
+      :model-value="contentHtml"
+      content-type="html"
+      :editable="false"
+      :extensions="viewerExtensions"
+      :starter-kit="{ link: { openOnClick: true } }"
     />
 
     <MemiBoardAttachments
@@ -159,6 +155,68 @@ const contentHtml = computed(() => {
       :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"
+        />
+        <span>{{ post.authorName ?? '익명' }}</span>
+        <span>{{ formatDate(post.createdAt) }}</span>
+      </div>
+      <div v-if="canEdit(post) || canDelete(post)" class="flex gap-2">
+        <UButton
+          v-if="canEdit(post)"
+          icon="i-lucide-pencil"
+          size="sm"
+          variant="ghost"
+          color="neutral"
+          label="수정"
+          @click="emit('edit', postId)"
+        />
+        <UButton
+          v-if="canDelete(post)"
+          icon="i-lucide-trash-2"
+          size="sm"
+          variant="ghost"
+          color="error"
+          label="삭제"
+          :loading="deleting"
+          @click="handleDelete"
+        />
+      </div>
+    </div>
+
+    <nav class="grid grid-cols-3 items-center border-y border-default py-3" aria-label="게시글 이동">
+      <UButton
+        variant="ghost"
+        color="neutral"
+        icon="i-lucide-chevron-left"
+        label="이전"
+        class="justify-self-start"
+        :disabled="!previousPost?.id"
+        @click="previousPost?.id && emit('navigate', previousPost)"
+      />
+      <UButton
+        variant="ghost"
+        color="neutral"
+        icon="i-lucide-list"
+        label="목록"
+        class="justify-self-center"
+        @click="emit('list')"
+      />
+      <UButton
+        variant="ghost"
+        color="neutral"
+        trailing-icon="i-lucide-chevron-right"
+        label="다음"
+        class="justify-self-end"
+        :disabled="!nextPost?.id"
+        @click="nextPost?.id && emit('navigate', nextPost)"
+      />
+    </nav>
+
     <section class="flex flex-col gap-4 border-t border-default pt-4">
       <h2 class="text-sm font-medium text-muted">
         댓글 {{ comments.length }}
@@ -168,3 +226,14 @@ const contentHtml = computed(() => {
     </section>
   </div>
 </template>
+
+<style scoped>
+.board-content :deep(iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"], iframe[src*="youtu.be"]) {
+  width: 100%;
+  max-width: 640px;
+  aspect-ratio: 16 / 9;
+  height: auto;
+  border: 0;
+  border-radius: 0.75rem;
+}
+</style>

package/dist/runtime/components/Editor.vue

@@ -4,10 +4,10 @@
  * @see https://ui.nuxt.com/docs/components/editor
  * @see shineb app/components/PostEditor.vue
  *
- * 커스텀은 handlers.image(파일 업로드) + DOM paste/drop 만.
- * TipTap Extension / PluginKey 는 쓰지 않음 (유지보수·충돌 회피).
+ * 커스텀은 handlers.image(파일 업로드), YouTube 임베드 + DOM paste/drop.
  */
 import { ref, computed, watch } from 'vue'
+import Youtube from '@tiptap/extension-youtube'
 import type { Attachment, EditorImageEntry } from 'memi-board'
 import {
   useMemiBoardAuth,
@@ -27,9 +27,9 @@ const props = defineProps<{
 const emit = defineEmits<{ saved: [id: string], cancel: [] }>()
 
 const { user, isSignedIn, isWriteRestricted, restrictedMessage } = useMemiBoardAuth()
-const { getPost, createPost, updatePost } = useMemiBoardPosts()
+const { createPostId, getPost, createPost, updatePost } = useMemiBoardPosts()
 const { checkText } = useMemiBoardModeration()
-const { categories, categoryLabel, ensureSettings, addCategory } = useMemiBoardSettings()
+const { categories, ensureSettings, addCategory } = useMemiBoardSettings()
 const { uploadEditorImage } = useMemiBoardStorage()
 
 const title = ref('')
@@ -44,7 +44,6 @@ const categoryItems = computed(() =>
 )
 const effectiveCategory = computed(() => props.fixedCategory || category.value)
 const isEdit = computed(() => Boolean(props.postId))
-const categoryLocked = computed(() => Boolean(props.fixedCategory))
 
 const loading = ref(false)
 const saving = ref(false)
@@ -57,9 +56,17 @@ const showAddCategory = ref(false)
 const newCategoryLabel = ref('')
 const addingCategory = ref(false)
 
-const attachmentNamespace = ref(props.postId ?? `new-${Date.now()}`)
+const attachmentNamespace = ref(props.postId ?? createPostId())
 const uploadedEditorImages = ref<EditorImageEntry[]>([])
 const editorRef = ref<{ editor?: unknown } | null>(null)
+const editorExtensions = [
+  Youtube.configure({
+    nocookie: true,
+    controls: true,
+    width: 640,
+    height: 360,
+  }),
+]
 
 function imageNamespace(): string {
   return props.postId || attachmentNamespace.value
@@ -103,6 +110,28 @@ function pickAndUploadImage(editor: any) {
   input.click()
 }
 
+function youtubeUrl(value: string | null | undefined): string | null {
+  const raw = value?.trim()
+  if (!raw) return null
+  try {
+    const url = new URL(raw)
+    const host = url.hostname.toLowerCase().replace(/^www\./, '')
+    if (host === 'youtu.be' || host === 'youtube.com' || host === 'm.youtube.com' || host === 'music.youtube.com') {
+      return url.toString()
+    }
+  }
+  catch {
+    // URL 형식이 아니면 YouTube 임베드로 처리하지 않는다.
+  }
+  return null
+}
+
+function insertYoutube(editor: any, value?: string | null): boolean {
+  const src = youtubeUrl(value ?? window.prompt('YouTube 링크를 입력하세요.'))
+  if (!src) return false
+  return editor.chain().focus().setYoutubeVideo({ src }).run()
+}
+
 /** 공식 handlers API — 기본 image(URL prompt) 를 파일 업로드로 교체 (shineb) */
 const handlers = {
   image: {
@@ -115,6 +144,16 @@ const handlers = {
       return editor.chain()
     },
   },
+  youtube: {
+    canExecute: (editor: any) => editor.can().setYoutubeVideo({ src: 'https://youtu.be/dQw4w9WgXcQ' }),
+    isActive: (editor: any) => editor.isActive('youtube'),
+    isDisabled: (editor: any) =>
+      !editor.extensionManager?.extensions?.some((ext: any) => ext.name === 'youtube'),
+    execute: (editor: any) => {
+      insertYoutube(editor)
+      return editor.chain()
+    },
+  },
 }
 
 const toolbarItems = [
@@ -139,6 +178,7 @@ const toolbarItems = [
   [
     { kind: 'link', icon: 'i-lucide-link' },
     { kind: 'image', icon: 'i-lucide-image' },
+    { kind: 'youtube', icon: 'i-lucide-youtube', label: 'YouTube' },
   ],
   [
     { kind: 'horizontalRule', icon: 'i-lucide-minus' },
@@ -166,12 +206,20 @@ function resolveEditor(): any | null {
 function onEditorRootPaste(e: ClipboardEvent) {
   const items = Array.from(e.clipboardData?.items ?? [])
   const imageItem = items.find(i => i.type.startsWith('image/'))
-  if (!imageItem) return
-  const file = imageItem.getAsFile()
   const editor = resolveEditor()
-  if (!file || !editor) return
+  if (!editor) return
+  if (imageItem) {
+    const file = imageItem.getAsFile()
+    if (!file) return
+    e.preventDefault()
+    void uploadAndSetImage(editor, file)
+    return
+  }
+
+  const src = youtubeUrl(e.clipboardData?.getData('text/plain'))
+  if (!src) return
   e.preventDefault()
-  void uploadAndSetImage(editor, file)
+  insertYoutube(editor, src)
 }
 
 function onEditorRootDrop(e: DragEvent) {
@@ -223,7 +271,7 @@ watch(
     if (id) void loadPost(id)
     else {
       loading.value = false
-      attachmentNamespace.value = `new-${Date.now()}`
+      attachmentNamespace.value = createPostId()
       if (props.fixedCategory) category.value = props.fixedCategory
       void ensureSettings().catch(() => {})
     }
@@ -326,6 +374,7 @@ async function handleSubmit() {
     else {
       const id = await createPost({
         ...payload,
+        postId: attachmentNamespace.value,
         authorUid: user.value.uid,
         authorName: user.value.displayName,
         authorPhoto: user.value.photoURL,
@@ -358,18 +407,7 @@ async function handleSubmit() {
     @submit.prevent="handleSubmit"
   >
     <div
-      v-if="categoryLocked"
-      class="flex items-center gap-2 text-sm"
-    >
-      <span class="text-muted">카테고리</span>
-      <UBadge
-        :label="categoryLabel(fixedCategory) || fixedCategory"
-        variant="subtle"
-      />
-    </div>
-
-    <div
-      v-else
+      v-if="!fixedCategory"
       class="flex flex-col gap-2"
     >
       <div class="flex items-center gap-2 flex-wrap">
@@ -445,6 +483,7 @@ async function handleSubmit() {
         ref="editorRef"
         v-model="content"
         content-type="html"
+        :extensions="editorExtensions"
         :handlers="handlers"
         placeholder="본문을 입력하세요…"
         :ui="{ content: 'min-h-64 p-4' }"

package/dist/runtime/components/List.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
-import { RouterLink } from 'vue-router'
+import { computed, ref, watch } from 'vue'
 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'
+import MemiBoardListDefault from './ListDefault.vue'
+import MemiBoardListImage from './ListImage.vue'
+import MemiBoardListVideo from './ListVideo.vue'
 
 const props = withDefaults(defineProps<{
   pageSize?: number
@@ -31,7 +32,7 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{ select: [post: PostModel] }>()
 
 const { getPosts } = useMemiBoardPosts()
-const { categoryLabel } = useMemiBoardSettings()
+const { categories } = useMemiBoardSettings()
 
 const posts = ref<PostModel[]>([])
 const cursor = ref<QueryDocumentSnapshot<DocumentData> | undefined>(undefined)
@@ -39,6 +40,14 @@ const hasMore = ref(false)
 const loading = ref(false)
 const initialLoading = ref(true)
 const loadError = ref('')
+const listView = computed(() =>
+  categories.value.find(item => item.id === props.category)?.listView ?? 'default',
+)
+const listComponent = computed(() => ({
+  default: MemiBoardListDefault,
+  image: MemiBoardListImage,
+  video: MemiBoardListVideo,
+})[listView.value])
 
 function postTo(post: PostModel): string | undefined {
   if (props.getPostLink) return props.getPostLink(post)
@@ -82,9 +91,6 @@ watch(
   { immediate: true },
 )
 
-function handleClick(post: PostModel) {
-  if (!postTo(post)) emit('select', post)
-}
 </script>
 
 <template>
@@ -112,48 +118,12 @@ function handleClick(post: PostModel) {
     </p>
 
     <component
-      :is="postTo(post) ? RouterLink : 'button'"
-      v-for="post in posts"
-      :key="post.id"
-      :to="postTo(post)"
-      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>
+      :is="listComponent"
+      v-else-if="posts.length"
+      :posts="posts"
+      :post-to="postTo"
+      @select="emit('select', $event)"
+    />
 
     <UButton
       v-if="hasMore"

package/dist/runtime/components/ListDefault.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+import type { PostModel } from 'memi-board'
+import { formatDate, useMemiBoardSettings } from 'memi-board'
+
+defineProps<{
+  posts: PostModel[]
+  postTo: (post: PostModel) => string | undefined
+}>()
+const emit = defineEmits<{ select: [post: PostModel] }>()
+const { categoryLabel } = useMemiBoardSettings()
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <component
+      :is="postTo(post) ? RouterLink : 'button'"
+      v-for="post in posts"
+      :key="post.id"
+      :to="postTo(post)"
+      class="text-left"
+      @click="!postTo(post) && emit('select', 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>
+        <p v-if="post.summary" class="mt-2 line-clamp-2 text-sm text-muted">{{ post.summary }}</p>
+        <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>
+  </div>
+</template>

package/dist/runtime/components/ListImage.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+import type { PostModel } from 'memi-board'
+import { formatDate } from 'memi-board'
+
+defineProps<{
+  posts: PostModel[]
+  postTo: (post: PostModel) => string | undefined
+}>()
+const emit = defineEmits<{ select: [post: PostModel] }>()
+
+function image(post: PostModel): string | undefined {
+  return post.previewImage || post.attachments?.find(item => item.type.startsWith('image/'))?.url
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+    <component
+      :is="postTo(post) ? RouterLink : 'button'"
+      v-for="post in posts"
+      :key="post.id"
+      :to="postTo(post)"
+      class="overflow-hidden rounded-xl border border-default bg-default text-left transition hover:bg-elevated/50"
+      @click="!postTo(post) && emit('select', post)"
+    >
+      <div class="aspect-[4/3] overflow-hidden bg-elevated">
+        <img v-if="image(post)" :src="image(post)" :alt="post.title" class="size-full object-cover transition duration-300 hover:scale-105">
+        <div v-else class="flex size-full items-center justify-center text-muted"><UIcon name="i-lucide-image" class="size-10" /></div>
+      </div>
+      <div class="p-4">
+        <h3 class="font-medium line-clamp-2">{{ post.title }}</h3>
+        <p v-if="post.summary" class="mt-2 line-clamp-2 text-sm text-muted">{{ post.summary }}</p>
+        <div class="mt-3 flex items-center justify-between gap-2 text-xs text-muted">
+          <span class="truncate">{{ post.authorName ?? '익명' }}</span>
+          <span class="shrink-0">{{ formatDate(post.createdAt) }}</span>
+        </div>
+      </div>
+    </component>
+  </div>
+</template>

package/dist/runtime/components/ListVideo.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+import type { PostModel } from 'memi-board'
+import { formatDate } from 'memi-board'
+
+defineProps<{
+  posts: PostModel[]
+  postTo: (post: PostModel) => string | undefined
+}>()
+const emit = defineEmits<{ select: [post: PostModel] }>()
+
+function image(post: PostModel): string | undefined {
+  return post.previewImage || post.attachments?.find(item => item.type.startsWith('image/'))?.url
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+    <component
+      :is="postTo(post) ? RouterLink : 'button'"
+      v-for="post in posts"
+      :key="post.id"
+      :to="postTo(post)"
+      class="overflow-hidden rounded-xl border border-default bg-default text-left transition hover:bg-elevated/50"
+      @click="!postTo(post) && emit('select', post)"
+    >
+      <div class="relative aspect-video overflow-hidden bg-elevated">
+        <img v-if="image(post)" :src="image(post)" :alt="post.title" class="size-full object-cover">
+        <div v-else class="flex size-full items-center justify-center text-muted"><UIcon name="i-lucide-video" class="size-10" /></div>
+        <span class="absolute inset-0 flex items-center justify-center bg-black/10">
+          <span class="flex size-12 items-center justify-center rounded-full bg-black/70 text-white shadow"><UIcon name="i-lucide-play" class="ml-0.5 size-6 fill-current" /></span>
+        </span>
+      </div>
+      <div class="p-4">
+        <h3 class="font-medium line-clamp-2">{{ post.title }}</h3>
+        <p v-if="post.summary" class="mt-2 line-clamp-2 text-sm text-muted">{{ post.summary }}</p>
+        <div class="mt-3 flex items-center justify-between gap-2 text-xs text-muted">
+          <span class="truncate">{{ post.authorName ?? '익명' }}</span>
+          <span class="shrink-0">{{ formatDate(post.createdAt) }}</span>
+        </div>
+      </div>
+    </component>
+  </div>
+</template>