memi-board 0.3.1 → 0.4.2

package/dist/runtime/components/Editor.vue

@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import { ref, computed, watch } 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, isSignedIn } = useMemiBoardAuth()
+const { getPost, createPost, updatePost } = useMemiBoardPosts()
+const { checkText } = useMemiBoardModeration()
+const { categories, ensureSettings, addCategory } = useMemiBoardSettings()
+
+const title = ref('')
+const content = ref('')
+const tagsInput = ref('')
+/** boardSettings.categories 의 id */
+const category = ref<string | undefined>(undefined)
+const attachments = ref<Attachment[]>([])
+
+const categoryItems = computed(() =>
+  categories.value.map(c => ({ label: c.label, value: c.id })),
+)
+
+const isEdit = computed(() => Boolean(props.postId))
+const loading = ref(false)
+const saving = ref(false)
+const error = ref('')
+
+const showAddCategory = ref(false)
+const newCategoryLabel = ref('')
+const addingCategory = ref(false)
+
+/** 새 글은 아직 slug가 없으므로 첨부파일 Storage 경로용 임시 네임스페이스를 쓴다. */
+const attachmentNamespace = ref(props.postId ?? `new-${Date.now()}`)
+
+async function loadPost(id: string) {
+  loading.value = true
+  error.value = ''
+  try {
+    await ensureSettings().catch(() => {})
+    const post = await getPost(id)
+    if (!post) {
+      error.value = '게시글을 찾을 수 없습니다.'
+      title.value = ''
+      content.value = ''
+      return
+    }
+    title.value = post.title
+    content.value = post.content
+    tagsInput.value = (post.tags ?? []).join(', ')
+    // 설정에 없는 예전 카테고리 id 여도 선택값은 유지 (목록에 없으면 USelect 가 비울 수 있음)
+    category.value = post.category
+    attachments.value = post.attachments ?? []
+    attachmentNamespace.value = id
+  }
+  catch (e) {
+    const msg = (e as Error).message || String(e)
+    error.value = msg.includes('permission')
+      ? '글을 불러올 권한이 없습니다. 로그인 상태를 확인해 주세요.'
+      : `글을 불러오지 못했습니다: ${msg}`
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+watch(
+  () => props.postId,
+  (id) => {
+    if (id) void loadPost(id)
+    else {
+      loading.value = false
+      attachmentNamespace.value = `new-${Date.now()}`
+      void ensureSettings().catch(() => {})
+    }
+  },
+  { immediate: true },
+)
+
+async function handleAddCategory() {
+  error.value = ''
+  if (!isSignedIn.value) {
+    error.value = '카테고리 추가에는 로그인이 필요합니다.'
+    return
+  }
+  addingCategory.value = true
+  try {
+    const id = await addCategory(newCategoryLabel.value)
+    category.value = id
+    newCategoryLabel.value = ''
+    showAddCategory.value = false
+  }
+  catch (e) {
+    error.value = (e as Error).message || String(e)
+  }
+  finally {
+    addingCategory.value = false
+  }
+}
+
+function friendlyWriteError(e: unknown): string {
+  const msg = e instanceof Error ? e.message : String(e)
+  if (msg.includes('permission-denied') || msg.includes('Permission denied')) {
+    return '수정 권한이 없습니다. 본인이 작성한 글인지, 로그인이 유지되는지 확인해 주세요.'
+  }
+  return msg
+}
+
+async function handleSubmit() {
+  error.value = ''
+  if (!title.value.trim() || !content.value.trim()) {
+    error.value = '제목과 내용을 입력해 주세요.'
+    return
+  }
+  if (!user.value) {
+    error.value = '로그인이 필요합니다.'
+    return
+  }
+  if (!category.value) {
+    error.value = '카테고리를 선택해 주세요.'
+    return
+  }
+  // 설정에 있는 id 만 허용 (임의 문자열 저장 방지)
+  if (!categories.value.some(c => c.id === category.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)
+    const payload = {
+      title: title.value.trim(),
+      content: content.value,
+      tags,
+      category: category.value,
+      attachments: attachments.value,
+    }
+
+    if (props.postId) {
+      await updatePost(props.postId, payload)
+      emit('saved', props.postId)
+    }
+    else {
+      const id = await createPost({
+        ...payload,
+        authorUid: user.value.uid,
+        authorName: user.value.displayName,
+        authorPhoto: user.value.photoURL,
+      })
+      emit('saved', id)
+    }
+  }
+  catch (e) {
+    error.value = friendlyWriteError(e)
+  }
+  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"
+  >
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center gap-2 flex-wrap">
+        <USelect
+          v-model="category"
+          :items="categoryItems"
+          placeholder="카테고리 선택"
+          class="w-48"
+        />
+        <UButton
+          type="button"
+          v-if="isSignedIn"
+          variant="outline"
+          color="neutral"
+          size="sm"
+          icon="i-lucide-plus"
+          label="카테고리 추가"
+          @click="showAddCategory = !showAddCategory"
+        />
+      </div>
+      <p class="text-xs text-muted">
+        카테고리는 게시판 설정(boardSettings)에 있는 목록에서 고릅니다.
+      </p>
+
+      <div
+        v-if="showAddCategory"
+        class="flex items-center gap-2"
+      >
+        <UInput
+          v-model="newCategoryLabel"
+          placeholder="새 카테고리 이름"
+          class="w-48"
+          @keydown.enter.prevent="handleAddCategory"
+        />
+        <UButton
+          type="button"
+          size="sm"
+          label="추가"
+          :loading="addingCategory"
+          @click="handleAddCategory"
+        />
+        <UButton
+          type="button"
+          size="sm"
+          variant="ghost"
+          color="neutral"
+          label="취소"
+          @click="showAddCategory = false; newCategoryLabel = ''"
+        />
+      </div>
+    </div>
+
+    <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="isEdit ? '수정 완료' : '게시하기'"
+      />
+      <UButton
+        variant="ghost"
+        color="neutral"
+        label="취소"
+        @click="emit('cancel')"
+      />
+    </div>
+  </form>
+</template>

package/dist/runtime/components/List.vue

@@ -0,0 +1,134 @@
+<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)
+const loadError = ref('')
+
+async function loadMore() {
+  loading.value = true
+  loadError.value = ''
+  try {
+    const result = await getPosts({ pageSize: props.pageSize, cursor: cursor.value })
+    posts.value.push(...result.posts)
+    cursor.value = result.cursor
+    hasMore.value = result.hasMore
+  }
+  catch (e) {
+    loadError.value = (e as Error).message || String(e)
+    console.error('[memi-board] getPosts failed', e)
+  }
+  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="loadError"
+      class="text-sm text-error text-center py-8"
+    >
+      목록을 불러오지 못했습니다: {{ loadError }}
+    </p>
+
+    <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>

package/dist/runtime/components/SignIn.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useMemiBoardConfig } from 'memi-board'
+import { useMemiBoardAuth } from 'memi-board'
+
+const config = useMemiBoardConfig()
+const providers = computed(() => config.auth?.providers ?? ['google', 'apple'])
+const hasOAuthProvider = computed(() => providers.value.includes('google') || providers.value.includes('apple'))
+
+const { signInWithGoogle, signInWithApple, signInWithEmail, signUpWithEmail } = useMemiBoardAuth()
+
+const mode = ref<'signin' | 'signup'>('signin')
+const email = ref('')
+const password = ref('')
+const displayName = ref('')
+const loading = ref(false)
+const error = ref('')
+
+async function handleGoogle() {
+  loading.value = true
+  error.value = ''
+  try {
+    await signInWithGoogle()
+  }
+  catch (e) {
+    error.value = (e as Error).message
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+async function handleApple() {
+  loading.value = true
+  error.value = ''
+  try {
+    await signInWithApple()
+  }
+  catch (e) {
+    error.value = (e as Error).message
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+async function handleEmailSubmit() {
+  loading.value = true
+  error.value = ''
+  try {
+    if (mode.value === 'signin') {
+      await signInWithEmail(email.value, password.value)
+    }
+    else {
+      await signUpWithEmail(email.value, password.value, displayName.value || undefined)
+    }
+  }
+  catch (e) {
+    error.value = (e as Error).message
+  }
+  finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 max-w-sm">
+    <UButton
+      v-if="providers.includes('google')"
+      icon="i-simple-icons-google"
+      color="neutral"
+      variant="outline"
+      label="Google로 로그인"
+      block
+      :loading="loading"
+      @click="handleGoogle"
+    />
+
+    <UButton
+      v-if="providers.includes('apple')"
+      icon="i-simple-icons-apple"
+      color="neutral"
+      variant="outline"
+      label="Apple로 로그인"
+      block
+      :loading="loading"
+      @click="handleApple"
+    />
+
+    <template v-if="providers.includes('emailPassword')">
+      <div
+        v-if="hasOAuthProvider"
+        class="flex items-center gap-2 text-xs text-muted"
+      >
+        <div class="flex-1 border-t border-default" />
+        또는
+        <div class="flex-1 border-t border-default" />
+      </div>
+
+      <form
+        class="flex flex-col gap-3"
+        @submit.prevent="handleEmailSubmit"
+      >
+        <UInput
+          v-if="mode === 'signup'"
+          v-model="displayName"
+          placeholder="이름"
+        />
+        <UInput
+          v-model="email"
+          type="email"
+          placeholder="이메일"
+          required
+        />
+        <UInput
+          v-model="password"
+          type="password"
+          placeholder="비밀번호"
+          required
+        />
+        <UButton
+          type="submit"
+          block
+          :loading="loading"
+          :label="mode === 'signin' ? '로그인' : '회원가입'"
+        />
+      </form>
+
+      <UButton
+        variant="link"
+        size="sm"
+        color="neutral"
+        :label="mode === 'signin' ? '계정이 없으신가요? 회원가입' : '이미 계정이 있으신가요? 로그인'"
+        @click="mode = mode === 'signin' ? 'signup' : 'signin'"
+      />
+    </template>
+
+    <p
+      v-if="error"
+      class="text-sm text-error"
+    >
+      {{ error }}
+    </p>
+  </div>
+</template>

package/dist/runtime/components/VersionHistory.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { versionHistory } from 'memi-board'
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <div
+      v-for="entry in versionHistory"
+      :key="entry.version"
+      class="flex flex-col gap-2"
+    >
+      <div class="flex items-center gap-2">
+        <UBadge
+          :label="`v${entry.version}`"
+          color="primary"
+          variant="subtle"
+        />
+        <span class="text-sm text-muted">{{ entry.date }}</span>
+      </div>
+      <ul class="list-disc list-inside text-sm leading-relaxed space-y-1">
+        <li
+          v-for="item in entry.highlights"
+          :key="item"
+        >
+          {{ item }}
+        </li>
+      </ul>
+      <p
+        v-if="entry.note"
+        class="text-xs text-muted"
+      >
+        {{ entry.note }}
+      </p>
+    </div>
+  </div>
+</template>

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "memi-board",
-  "version": "0.3.1",
+  "version": "0.4.2",
   "type": "module",
-  "description": "Firebase 기반 게시판 Vue 컴포넌트/composable 패키지 — Nuxt 4 + Nuxt UI 프로젝트에 posts CRUD, 첨부파일, 댓글, 권한, AI 검열을 바로 붙임",
+  "description": "Firebase 게시판 — core composable + thin Nuxt module(UI SFC). Nuxt 4 + Nuxt UI 호스트에 붙임",
   "license": "MIT",
   "author": "fkkmemi",
   "repository": {
@@ -13,8 +13,19 @@
     "url": "https://github.com/fkkmemi/memi-board/issues"
   },
   "homepage": "https://github.com/fkkmemi/memi-board#readme",
-  "keywords": ["vue", "nuxt", "firebase", "firestore", "board", "community", "nuxt-ui"],
-  "sideEffects": false,
+  "keywords": [
+    "vue",
+    "nuxt",
+    "firebase",
+    "firestore",
+    "board",
+    "community",
+    "nuxt-ui"
+  ],
+  "sideEffects": [
+    "**/*.vue",
+    "**/*.css"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -22,6 +33,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./nuxt": {
+      "types": "./dist/module.d.ts",
+      "import": "./dist/module.mjs"
     }
   },
   "main": "./dist/index.js",
@@ -31,23 +46,31 @@
   ],
   "scripts": {
     "prepack": "pnpm build",
-    "build": "vite build",
+    "build": "node scripts/build.mjs",
     "build:watch": "vite build --watch",
-    "dev": "nuxi dev playground",
-    "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxi prepare playground",
+    "dev": "pnpm build && nuxi dev playground",
+    "dev:build": "pnpm build && nuxi build playground",
+    "dev:prepare": "pnpm build && nuxi prepare playground",
     "typecheck": "vue-tsc --noEmit"
   },
   "peerDependencies": {
     "@nuxt/ui": "^4.0.0",
     "firebase": "^12.0.0",
+    "nuxt": ">=3.0.0 || >=4.0.0",
     "vue": "^3.5.0",
     "vue-router": "^4.0.0 || ^5.0.0",
     "vuefire": "^3.2.3"
   },
+  "peerDependenciesMeta": {
+    "nuxt": {
+      "optional": true
+    },
+    "@nuxt/ui": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@nuxt/ui": "^4.9.0",
-    "@vitejs/plugin-vue": "^6.0.8",
     "firebase": "^12.15.0",
     "nuxt": "^4.5.1",
     "nuxt-vuefire": "^1.1.2",
@@ -67,5 +90,8 @@
       "protobufjs",
       "vue-demi"
     ]
+  },
+  "dependencies": {
+    "@nuxt/kit": "^4.5.1"
   }
 }