memi-board 0.4.0 → 0.4.4

package/dist/runtime/components/Editor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, watch } from 'vue'
 import type { Attachment } from 'memi-board'
 import { useMemiBoardAuth } from 'memi-board'
 import { useMemiBoardPosts } from 'memi-board'
@@ -8,38 +8,87 @@ import { useMemiBoardSettings } from 'memi-board'
 import MemiBoardAttachments from './Attachments.vue'
 
 const props = defineProps<{
-  /** 지정하면 수정 모드, 지정하지 않으면 새 글 작성 모드. */
+  /** 지정하면 수정 모드 */
   postId?: string
+  /**
+   * path 등으로 카테고리가 이미 정해진 경우 (예: /board/:category/new).
+   * 설정되면 선택 UI 없이 이 값으로 저장한다.
+   */
+  fixedCategory?: string
 }>()
 
 const emit = defineEmits<{ saved: [id: string], cancel: [] }>()
 
-const { user } = useMemiBoardAuth()
+const { user, isSignedIn } = useMemiBoardAuth()
 const { getPost, createPost, updatePost } = useMemiBoardPosts()
 const { checkText } = useMemiBoardModeration()
-const { categories } = useMemiBoardSettings()
+const { categories, categoryLabel, ensureSettings, addCategory } = useMemiBoardSettings()
 
 const title = ref('')
 const content = ref('')
 const tagsInput = ref('')
+/** boardSettings.categories 의 id (fixedCategory 없을 때만 선택) */
 const category = ref<string | undefined>(undefined)
 const attachments = ref<Attachment[]>([])
 
-const categoryItems = computed(() => categories.value.map(c => ({ label: c.label, value: c.id })))
+const categoryItems = computed(() =>
+  categories.value.map(c => ({ label: c.label, value: c.id })),
+)
 
-const loading = ref(!!props.postId)
+/** 실제 저장에 쓰는 카테고리 id */
+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)
+/** 제출 중 단계 표시 (로컬 필터 → AI Logic → 저장) */
+const submitHint = ref('')
+/** 마지막 검열 결과 요약 (화면 + 콘솔) */
+const lastModerationDebug = ref('')
 const error = ref('')
 
-/** 새 글은 아직 slug가 없으므로 첨부파일 Storage 경로용 임시 네임스페이스를 쓴다. */
+function formatModerationDebug(m: {
+  flagged: boolean
+  category: string
+  reason: string
+  error?: boolean
+  via?: string
+}): string {
+  const viaLabel: Record<string, string> = {
+    empty: '빈 텍스트',
+    disabled: '검열 끔',
+    local: '로컬 금칙어',
+    ai: 'Firebase AI Logic',
+    'ai-error-allow': 'AI 실패 → onError:allow (통과)',
+    'ai-error-block': 'AI 실패 → onError:block (차단)',
+  }
+  const via = m.via ? (viaLabel[m.via] || m.via) : '?'
+  return [
+    `via: ${via}`,
+    `flagged: ${m.flagged}`,
+    `category: ${m.category}`,
+    m.reason ? `reason: ${m.reason}` : '',
+    m.error ? 'apiError: true' : '',
+  ].filter(Boolean).join(' · ')
+}
+
+const showAddCategory = ref(false)
+const newCategoryLabel = ref('')
+const addingCategory = ref(false)
+
 const attachmentNamespace = ref(props.postId ?? `new-${Date.now()}`)
 
-onMounted(async () => {
-  if (!props.postId) return
+async function loadPost(id: string) {
+  loading.value = true
+  error.value = ''
   try {
-    const post = await getPost(props.postId)
+    await ensureSettings().catch(() => {})
+    const post = await getPost(id)
     if (!post) {
       error.value = '게시글을 찾을 수 없습니다.'
+      title.value = ''
+      content.value = ''
       return
     }
     title.value = post.title
@@ -47,11 +96,75 @@ onMounted(async () => {
     tagsInput.value = (post.tags ?? []).join(', ')
     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()}`
+      if (props.fixedCategory) category.value = props.fixedCategory
+      void ensureSettings().catch(() => {})
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.fixedCategory,
+  (c) => {
+    if (c && !props.postId) category.value = c
+  },
+  { immediate: true },
+)
+
+async function handleAddCategory() {
+  error.value = ''
+  if (!isSignedIn.value) {
+    error.value = '카테고리 추가에는 로그인이 필요합니다.'
+    return
+  }
+  addingCategory.value = true
+  try {
+    const label = newCategoryLabel.value.trim()
+    const moderation = await checkText(label)
+    if (moderation.flagged) {
+      error.value = moderation.reason || '사용할 수 없는 카테고리 이름입니다.'
+      return
+    }
+    const id = await addCategory(label)
+    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 = ''
@@ -63,28 +176,53 @@ async function handleSubmit() {
     error.value = '로그인이 필요합니다.'
     return
   }
+  const cat = effectiveCategory.value
+  if (!cat) {
+    error.value = '카테고리를 선택해 주세요.'
+    return
+  }
+  if (!categories.value.some(c => c.id === cat) && !props.fixedCategory) {
+    error.value = '목록에 있는 카테고리를 선택해 주세요.'
+    return
+  }
 
   saving.value = true
+  submitHint.value = '내용을 검토하는 중… (로컬 → AI Logic)'
+  lastModerationDebug.value = ''
   try {
-    const moderation = await checkText(`${title.value}\n${content.value}`)
+    const text = `${title.value}\n${content.value}`
+    console.info('[memi-board] post checkText 시작', { title: title.value, contentLen: content.value.length })
+    const moderation = await checkText(text)
+    lastModerationDebug.value = formatModerationDebug(moderation)
+    console.info('[memi-board] post checkText 끝', lastModerationDebug.value, moderation)
+
     if (moderation.flagged) {
       error.value = moderation.reason || '게시할 수 없는 내용이 포함되어 있습니다.'
       return
     }
 
+    if (moderation.via === 'ai-error-allow') {
+      submitHint.value = 'AI 검열 실패 — 설정상 통과 후 저장…'
+    }
+    else {
+      submitHint.value = '저장하는 중…'
+    }
     const tags = tagsInput.value.split(',').map(t => t.trim()).filter(Boolean)
+    const payload = {
+      title: title.value.trim(),
+      content: content.value,
+      tags,
+      category: cat,
+      attachments: attachments.value,
+    }
 
     if (props.postId) {
-      await updatePost(props.postId, { title: title.value, content: content.value, tags, category: category.value, attachments: attachments.value })
+      await updatePost(props.postId, payload)
       emit('saved', props.postId)
     }
     else {
       const id = await createPost({
-        title: title.value,
-        content: content.value,
-        tags,
-        category: category.value,
-        attachments: attachments.value,
+        ...payload,
         authorUid: user.value.uid,
         authorName: user.value.displayName,
         authorPhoto: user.value.photoURL,
@@ -93,10 +231,11 @@ async function handleSubmit() {
     }
   }
   catch (e) {
-    error.value = (e as Error).message
+    error.value = friendlyWriteError(e)
   }
   finally {
     saving.value = false
+    submitHint.value = ''
   }
 }
 </script>
@@ -115,12 +254,68 @@ async function handleSubmit() {
     class="flex flex-col gap-4"
     @submit.prevent="handleSubmit"
   >
-    <USelect
-      v-model="category"
-      :items="categoryItems"
-      placeholder="카테고리 선택"
-      class="w-40"
-    />
+    <!-- path 로 카테고리 고정 시: 표시만 / 아니면 선택+추가 -->
+    <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
+      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
+          v-if="isSignedIn"
+          type="button"
+          variant="outline"
+          color="neutral"
+          size="sm"
+          icon="i-lucide-plus"
+          label="카테고리 추가"
+          @click="showAddCategory = !showAddCategory"
+        />
+      </div>
+      <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="제목"
@@ -150,12 +345,24 @@ async function handleSubmit() {
     >
       {{ error }}
     </p>
+    <p
+      v-else-if="submitHint"
+      class="text-sm text-muted"
+    >
+      {{ submitHint }}
+    </p>
+    <p
+      v-if="lastModerationDebug"
+      class="text-xs font-mono text-muted break-all rounded-md bg-muted/40 px-2 py-1.5"
+    >
+      검열 디버그: {{ lastModerationDebug }}
+    </p>
 
     <div class="flex gap-2">
       <UButton
         type="submit"
         :loading="saving"
-        :label="postId ? '수정 완료' : '게시하기'"
+        :label="isEdit ? '수정 완료' : '게시하기'"
       />
       <UButton
         variant="ghost"

package/dist/runtime/components/List.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 import type { DocumentData, QueryDocumentSnapshot } from 'firebase/firestore'
 import { useMemiBoardPosts } from 'memi-board'
@@ -9,7 +9,20 @@ import { formatDate } from 'memi-board'
 
 const props = withDefaults(defineProps<{
   pageSize?: number
-  /** 지정하면 각 글이 `${linkBase}/${id}`로 이동하는 링크가 된다. 지정하지 않으면 select 이벤트만 emit. */
+  /**
+   * 글 상세 링크 생성.
+   * 예: (p) => `/board/${p.category}/${p.id}`
+   * 없으면 postLinkBase / linkBase / select 순.
+   */
+  getPostLink?: (post: PostModel) => string | undefined
+  /**
+   * 글 상세 링크 prefix.
+   * 예: `/board/post` → `/board/post/{id}`
+   */
+  postLinkBase?: string
+  /** 지정 시 해당 카테고리 글만 조회 */
+  category?: string
+  /** @deprecated postLinkBase / getPostLink 사용 */
   linkBase?: string
 }>(), {
   pageSize: 20,
@@ -25,25 +38,52 @@ 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() {
+function postTo(post: PostModel): string | undefined {
+  if (props.getPostLink) return props.getPostLink(post)
+  const base = props.postLinkBase || props.linkBase
+  if (!base || !post.id) return undefined
+  return `${base.replace(/\/$/, '')}/${post.id}`
+}
+
+async function loadMore(reset = false) {
   loading.value = true
+  loadError.value = ''
+  if (reset) {
+    posts.value = []
+    cursor.value = undefined
+    hasMore.value = false
+    initialLoading.value = true
+  }
   try {
-    const result = await getPosts({ pageSize: props.pageSize, cursor: cursor.value })
+    const result = await getPosts({
+      pageSize: props.pageSize,
+      cursor: reset ? undefined : cursor.value,
+      category: props.category || undefined,
+    })
     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)
+watch(
+  () => props.category,
+  () => { void loadMore(true) },
+  { immediate: true },
+)
 
 function handleClick(post: PostModel) {
-  if (!props.linkBase) emit('select', post)
+  if (!postTo(post)) emit('select', post)
 }
 </script>
 
@@ -57,6 +97,13 @@ function handleClick(post: PostModel) {
       />
     </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"
@@ -65,10 +112,10 @@ function handleClick(post: PostModel) {
     </p>
 
     <component
-      :is="linkBase ? RouterLink : 'button'"
+      :is="postTo(post) ? RouterLink : 'button'"
       v-for="post in posts"
       :key="post.id"
-      :to="linkBase ? `${linkBase}/${post.id}` : undefined"
+      :to="postTo(post)"
       class="text-left"
       @click="handleClick(post)"
     >
@@ -115,7 +162,7 @@ function handleClick(post: PostModel) {
       label="더 보기"
       block
       :loading="loading"
-      @click="loadMore"
+      @click="loadMore(false)"
     />
   </div>
 </template>

package/dist/types.d.ts

@@ -53,10 +53,14 @@ export interface BoardSettingsModel {
     categories: BoardCategory[];
     updatedAt?: Timestamp;
 }
+/** 검열이 어느 단계에서 끝났는지 (디버그·UI 표시용) */
+export type ModerationVia = 'empty' | 'disabled' | 'local' | 'ai' | 'ai-error-allow' | 'ai-error-block';
 export interface ModerationResult {
     flagged: boolean;
     category: 'none' | 'abuse' | 'spam' | 'adult' | 'violence' | 'other';
     reason: string;
     /** true면 API/파싱 실패로 판단이 불확실함을 뜻한다 (onError 옵션에 따라 처리). */
     error?: boolean;
+    /** 로컬 리스트 / AI / 실패 후 allow 등 */
+    via?: ModerationVia;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "memi-board",
-  "version": "0.4.0",
+  "version": "0.4.4",
   "type": "module",
   "description": "Firebase 게시판 — core composable + thin Nuxt module(UI SFC). Nuxt 4 + Nuxt UI 호스트에 붙임",
   "license": "MIT",