memi-board 0.28.0 → 0.29.0

package/dist/runtime/components/Detail.vue

@@ -11,6 +11,7 @@ import MemiBoardAttachments from './Attachments.vue'
 import MemiBoardCommentForm from './CommentForm.vue'
 import MemiBoardCommentList from './CommentList.vue'
 import MemiBoardLikeButton from './LikeButton.vue'
+import MemiBoardShareButton from './ShareButton.vue'
 import MemiBoardSwipeHint from './SwipeHint.vue'
 import MemiBoardAuthorMenu from './AuthorMenu.vue'
 
@@ -297,12 +298,13 @@ const contentHtml = computed(() => {
       </div>
     </div>
 
-    <div v-if="!isDraft" class="flex justify-center">
+    <div v-if="!isDraft" class="flex items-center justify-center gap-2">
       <MemiBoardLikeButton
         :board-id="boardId"
         :post-id="postId"
         :like-count="post.likeCount ?? 0"
       />
+      <MemiBoardShareButton :title="post.title" />
     </div>
 
     <nav class="grid grid-cols-3 items-center py-3" aria-label="게시글 이동">

package/dist/runtime/components/Editor.vue

@@ -40,7 +40,7 @@ const { uploadEditorImage } = useMemiBoardStorage()
 const title = ref('')
 /** UEditor content-type=html (shineb 와 동일) */
 const content = ref('')
-const tagsInput = ref('')
+const tags = ref<string[]>([])
 const attachments = ref<Attachment[]>([])
 
 /** 이미지 리스트뷰 보드 — 제목 없음, 이미지+본문 필수 */
@@ -569,7 +569,7 @@ async function loadPost(id: string) {
       return
     }
     title.value = post.title
-    tagsInput.value = (post.tags ?? []).join(', ')
+    tags.value = post.tags ?? []
     attachments.value = post.attachments ?? []
     attachmentNamespace.value = id
     // 이미지 보드: 본문 이미지를 갤러리로, 에디터에는 글만
@@ -665,14 +665,13 @@ async function handleSubmit() {
     }
 
     submitHint.value = '저장하는 중…'
-    const tags = tagsInput.value.split(',').map(t => t.trim()).filter(Boolean)
     const bodyContent = imageBoard && coverSlots.value.length
       ? withCoverImagesInContent(content.value, coverUrls())
       : content.value
     const payload = {
       title: imageBoard ? '' : title.value.trim(),
       content: bodyContent,
-      tags,
+      tags: tags.value.map(t => t.trim()).filter(Boolean),
       // 이미지 보드: 파일 첨부 없음 (커버는 본문 앞 img 로 저장)
       attachments: imageBoard ? [] : attachments.value,
     }
@@ -903,9 +902,11 @@ async function handleSubmit() {
       </p>
     </div>
 
-    <UInput
-      v-model="tagsInput"
-      placeholder="태그 (쉼표로 구분)"
+    <UInputTags
+      v-model="tags"
+      placeholder="태그 입력 후 Enter"
+      :delimiter="','"
+      add-on-paste
     />
 
     <!-- 이미지 보드: 본문 이미지 업로드만 (파일 첨부 없음) -->

package/dist/runtime/components/ListDense.vue

@@ -25,15 +25,15 @@ function thumb(post: PostModel): string | undefined {
 <template>
   <!-- 조밀 = 커뮤니티 게시판 스타일 한 줄 목록. 우측에 작은 사각 썸네일(있을 때만). -->
   <ul class="flex flex-col divide-y divide-default">
-    <li v-for="post in posts" :key="post.id" class="flex flex-col gap-0.5 px-2 py-1.5">
-      <!-- 제목+썸네일만 클릭 시 글로 이동 — 메타 줄의 시간 팝오버·작성자 메뉴는 별도 인터랙션이라 링크 밖에 둔다 -->
-      <component
-        :is="postTo(post) ? NuxtLink : 'button'"
-        :to="postTo(post)"
-        class="group relative flex w-full items-center gap-2 rounded-lg text-left transition-colors hover:bg-elevated/60"
-        @click="!postTo(post) && emit('select', post)"
-      >
-        <div class="flex min-w-0 flex-1 items-baseline gap-1.5">
+    <li v-for="post in posts" :key="post.id" class="flex items-center gap-2 px-2 py-1.5">
+      <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+        <!-- 제목만 클릭 시 글로 이동 — 메타 줄의 시간 팝오버·작성자 메뉴는 별도 인터랙션이라 링크 밖에 둔다 -->
+        <component
+          :is="postTo(post) ? NuxtLink : 'button'"
+          :to="postTo(post)"
+          class="group flex min-w-0 w-full items-baseline gap-1.5 rounded-lg text-left transition-colors hover:bg-elevated/60"
+          @click="!postTo(post) && emit('select', post)"
+        >
           <UBadge
             v-if="post.isPublished === false"
             label="초안"
@@ -51,67 +51,71 @@ function thumb(post: PostModel): string | undefined {
           >
             {{ post.commentCount }}
           </span>
-        </div>
+        </component>
 
-        <div
-          v-if="thumb(post)"
-          class="size-12 shrink-0 overflow-hidden rounded-md bg-elevated"
-        >
-          <img
-            :src="thumb(post)"
-            :alt="post.title?.trim() || post.summary || '사진'"
-            class="size-full object-cover"
-          >
-        </div>
-      </component>
-
-      <div class="flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[11px] leading-none text-muted">
-        <UPopover :content="{ side: 'top' }" :ui="{ content: 'h-auto w-max' }">
-          <time
-            :datetime="post.createdAt?.toDate?.().toISOString()"
-            class="cursor-pointer tabular-nums"
-          >
-            {{ formatRelativeDate(post.createdAt, now) }}
-          </time>
-          <template #content>
-            <p class="whitespace-pre-line px-3 py-2 text-xs">
-              {{ formatTimestampDetails(post.createdAt, post.updatedAt).join('\n') }}
-            </p>
-          </template>
-        </UPopover>
-        <span class="text-default/40" aria-hidden="true">|</span>
-        <span class="font-medium text-toned">
-          <MemiBoardAuthorMenu
-            :author-uid="post.authorUid"
-            :author-name="post.authorName"
-            :author-photo="post.authorPhoto"
-            :author-posts-to="authorPostsTo"
-            :author-profile-to="authorProfileTo"
-            :author-comments-to="authorCommentsTo"
-            :show-avatar="false"
-          />
-        </span>
-        <span class="text-default/40" aria-hidden="true">|</span>
-        <span
-          v-if="post.attachments?.length"
-          class="inline-flex items-center gap-0.5 tabular-nums"
-        >
-          <UIcon name="i-lucide-paperclip" class="size-3 shrink-0" />{{ post.attachments.length }}
-        </span>
-        <span class="inline-flex items-center gap-0.5 tabular-nums">
-          <UIcon name="i-lucide-eye" class="size-3 shrink-0" />{{ post.viewCount ?? 0 }}
-        </span>
-        <template v-if="(post.likeCount ?? 0) > 0">
+        <div class="flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[11px] leading-none text-muted">
+          <UPopover :content="{ side: 'top' }" :ui="{ content: 'h-auto w-max' }">
+            <time
+              :datetime="post.createdAt?.toDate?.().toISOString()"
+              class="cursor-pointer tabular-nums"
+            >
+              {{ formatRelativeDate(post.createdAt, now) }}
+            </time>
+            <template #content>
+              <p class="whitespace-pre-line px-3 py-2 text-xs">
+                {{ formatTimestampDetails(post.createdAt, post.updatedAt).join('\n') }}
+              </p>
+            </template>
+          </UPopover>
           <span class="text-default/40" aria-hidden="true">|</span>
-          <span class="inline-flex items-center gap-0.5 tabular-nums">
-            추천 {{ post.likeCount }}
+          <span class="font-medium text-toned">
+            <MemiBoardAuthorMenu
+              :author-uid="post.authorUid"
+              :author-name="post.authorName"
+              :author-photo="post.authorPhoto"
+              :author-posts-to="authorPostsTo"
+              :author-profile-to="authorProfileTo"
+              :author-comments-to="authorCommentsTo"
+              :show-avatar="false"
+            />
           </span>
-        </template>
-        <template v-if="post.category && showCategory">
           <span class="text-default/40" aria-hidden="true">|</span>
-          <span class="truncate text-muted">[{{ categoryLabel(post.category) }}]</span>
-        </template>
+          <span
+            v-if="post.attachments?.length"
+            class="inline-flex items-center gap-0.5 tabular-nums"
+          >
+            <UIcon name="i-lucide-paperclip" class="size-3 shrink-0" />{{ post.attachments.length }}
+          </span>
+          <span class="inline-flex items-center gap-0.5 tabular-nums">
+            <UIcon name="i-lucide-eye" class="size-3 shrink-0" />{{ post.viewCount ?? 0 }}
+          </span>
+          <template v-if="(post.likeCount ?? 0) > 0">
+            <span class="text-default/40" aria-hidden="true">|</span>
+            <span class="inline-flex items-center gap-0.5 tabular-nums">
+              추천 {{ post.likeCount }}
+            </span>
+          </template>
+          <template v-if="post.category && showCategory">
+            <span class="text-default/40" aria-hidden="true">|</span>
+            <span class="truncate text-muted">[{{ categoryLabel(post.category) }}]</span>
+          </template>
+        </div>
       </div>
+
+      <!-- 썸네일은 제목+메타 줄을 합친 높이만큼 세로로 나란히 — 제목 줄에만 걸치면 이미지 있는 행만 부자연스럽게 길어진다 -->
+      <component
+        :is="postTo(post) ? NuxtLink : 'button'"
+        v-if="thumb(post)"
+        :to="postTo(post)"
+        class="size-12 shrink-0 overflow-hidden rounded-md bg-elevated"
+        @click="!postTo(post) && emit('select', post)"
+      >
+        <img
+          :src="thumb(post)"
+          :alt="post.title?.trim() || post.summary || '사진'"
+          class="size-full object-cover"
+        >
+      </component>
     </li>
   </ul>
 </template>

package/dist/runtime/components/ShareButton.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref } from 'vue'
+
+const props = defineProps<{
+  title?: string | null
+}>()
+
+const copied = ref(false)
+let copiedTimer: ReturnType<typeof setTimeout> | undefined
+
+// 데스크톱 크롬도 navigator.share 자체는 갖고 있어서 존재 여부만으로는 구분이 안 된다.
+// 실제로 모바일 OS 공유시트(카카오톡 등 포함)를 원하는 건 모바일뿐이므로 UA로 구분한다.
+const isMobile = typeof navigator !== 'undefined' && /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
+
+async function handleShare() {
+  const url = window.location.href
+
+  if (isMobile && navigator.share) {
+    try {
+      await navigator.share({ title: props.title ?? undefined, url })
+      return
+    }
+    catch (err) {
+      if ((err as Error)?.name === 'AbortError') return
+    }
+  }
+
+  // 데스크톱, 혹은 모바일 공유시트 실패 — 링크 복사로 대체
+  await navigator.clipboard.writeText(url)
+  copied.value = true
+  if (copiedTimer) clearTimeout(copiedTimer)
+  copiedTimer = setTimeout(() => { copied.value = false }, 1500)
+}
+
+onBeforeUnmount(() => {
+  if (copiedTimer) clearTimeout(copiedTimer)
+})
+</script>
+
+<template>
+  <UButton
+    :icon="copied ? 'i-lucide-check' : 'i-lucide-share-2'"
+    size="sm"
+    variant="ghost"
+    :color="copied ? 'success' : 'neutral'"
+    :label="copied ? '링크 복사됨' : '공유'"
+    @click="handleShare"
+  />
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "memi-board",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "type": "module",
   "description": "Nuxt 4 + Nuxt UI + VueFire/Firebase 전용 게시판 모듈",
   "license": "MIT",