memi-board 0.4.13 → 0.5.0

package/dist/runtime/components/Settings.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { slugify, useMemiBoardAuth, useMemiBoardSettings } from 'memi-board'
+import type { BoardCategory, BoardListView } from 'memi-board'
+
+const props = withDefaults(defineProps<{
+  /** 호스트 자체 관리자 권한도 허용할 때 true. Firebase rules 권한은 호스트가 별도로 맞춰야 한다. */
+  authorized?: boolean
+  /** 카테고리 페이지 기본 경로. 기본 `/board` → `/board/{id}` */
+  categoryBase?: string
+  /** 호스트 서버에서 게시판 전체 데이터를 삭제하는 관리자 전용 작업. */
+  deleteAll?: () => Promise<void>
+}>(), {
+  authorized: false,
+  categoryBase: '/board',
+})
+
+const emit = defineEmits<{
+  saved: [categories: BoardCategory[]]
+}>()
+
+const listViewOptions: Array<{ label: string, value: BoardListView }> = [
+  { label: '일반', value: 'default' },
+  { label: '이미지', value: 'image' },
+  { label: '영상', value: 'video' },
+]
+
+const { isAdmin, rolePending } = useMemiBoardAuth()
+const { categories, settingsPending, saveCategory, saveCategories, deleteCategory } = useMemiBoardSettings()
+const canManage = computed(() => isAdmin.value || props.authorized)
+const pending = computed(() => rolePending.value || settingsPending.value)
+
+const draft = ref<BoardCategory[]>([])
+const newLabel = ref('')
+const savingId = ref<string | null>(null)
+const savedId = ref<string | null>(null)
+const ordering = ref(false)
+const error = ref('')
+const deleteConfirm = ref('')
+const deletingAll = ref(false)
+const deleteDone = ref(false)
+
+watch([categories, settingsPending], ([list, loading]) => {
+  if (!loading && draft.value.length === 0) {
+    draft.value = list.map(category => ({
+      ...category,
+      listView: category.listView ?? 'default',
+    }))
+  }
+}, { immediate: true })
+
+function addCategory() {
+  const label = newLabel.value.trim()
+  if (!label) return
+  const base = slugify(label) || `board-${Date.now()}`
+  let id = base
+  let suffix = 2
+  while (draft.value.some(category => category.id === id)) id = `${base}-${suffix++}`
+  draft.value.push({ id, label, listView: 'default' })
+  newLabel.value = ''
+}
+
+async function moveCategory(index: number, offset: -1 | 1) {
+  const target = index + offset
+  if (target < 0 || target >= draft.value.length) return
+  const next = [...draft.value]
+  const [item] = next.splice(index, 1)
+  next.splice(target, 0, item!)
+  draft.value = next.map((category, order) => ({ ...category, order }))
+  ordering.value = true
+  error.value = ''
+  try {
+    await saveCategories(draft.value)
+  }
+  catch (cause) {
+    error.value = cause instanceof Error ? cause.message : '카테고리 순서를 저장하지 못했습니다.'
+  }
+  finally {
+    ordering.value = false
+  }
+}
+
+async function removeCategory(index: number) {
+  const category = draft.value[index]
+  if (!category || !window.confirm(`‘${category.label}’ 카테고리를 삭제하시겠습니까?`)) return
+  error.value = ''
+  try {
+    await deleteCategory(category.id)
+    draft.value.splice(index, 1)
+  }
+  catch (cause) {
+    error.value = cause instanceof Error ? cause.message : '카테고리를 삭제하지 못했습니다.'
+  }
+}
+
+function categoryTo(id: string) {
+  return `${props.categoryBase.replace(/\/$/, '')}/${encodeURIComponent(id)}`
+}
+
+async function save(category: BoardCategory, index: number) {
+  error.value = ''
+  savedId.value = null
+  savingId.value = category.id
+  try {
+    await saveCategory(category, index)
+    category.order = index
+    savedId.value = category.id
+    emit('saved', draft.value)
+  }
+  catch (cause) {
+    error.value = cause instanceof Error ? cause.message : '게시판 설정을 저장하지 못했습니다.'
+  }
+  finally {
+    savingId.value = null
+  }
+}
+
+async function runDeleteAll() {
+  if (!props.deleteAll || deleteConfirm.value !== '게시판 데이터 삭제') return
+  deletingAll.value = true
+  deleteDone.value = false
+  error.value = ''
+  try {
+    await props.deleteAll()
+    deleteConfirm.value = ''
+    deleteDone.value = true
+  }
+  catch (cause) {
+    error.value = cause instanceof Error ? cause.message : '게시판 데이터를 삭제하지 못했습니다.'
+  }
+  finally {
+    deletingAll.value = false
+  }
+}
+</script>
+
+<template>
+  <div v-if="pending" class="py-16 text-center text-sm text-muted">설정을 불러오고 있습니다.</div>
+  <UAlert
+    v-else-if="!canManage"
+    color="neutral"
+    variant="subtle"
+    icon="i-lucide-circle-help"
+    title="없는 게시판입니다"
+    description="주소를 다시 확인해 주세요."
+  />
+  <div v-else class="flex flex-col gap-4">
+    <details
+      v-for="(category, index) in draft"
+      :key="category.id"
+      :open="index === 0"
+      class="group overflow-hidden rounded-lg border border-default bg-default"
+    >
+      <summary class="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 select-none [&::-webkit-details-marker]:hidden">
+        <div class="min-w-0">
+          <code class="text-sm font-semibold text-highlighted">{{ category.id }}</code>
+          <p class="mt-1 truncate text-xs text-muted">{{ category.label || '라벨 없음' }} · {{ categoryTo(category.id) }}</p>
+        </div>
+        <UIcon name="i-lucide-chevron-down" class="size-4 text-muted transition-transform group-open:rotate-180" />
+      </summary>
+
+      <div class="flex flex-col gap-5 border-t border-default px-4 py-4">
+        <div class="grid gap-2 sm:grid-cols-[9rem_1fr] sm:items-center">
+          <div><p class="text-sm font-medium">카테고리 ID</p><p class="text-xs text-muted">주소와 데이터 기준값</p></div>
+          <UInput :model-value="category.id" disabled class="font-mono" />
+        </div>
+        <div class="grid gap-2 sm:grid-cols-[9rem_1fr] sm:items-center">
+          <div><p class="text-sm font-medium">표시 라벨</p><p class="text-xs text-muted">사용자에게 보이는 이름</p></div>
+          <UInput v-model="category.label" @update:model-value="savedId = null" />
+        </div>
+        <div class="grid gap-2 sm:grid-cols-[9rem_1fr] sm:items-center">
+          <div><p class="text-sm font-medium">리스트뷰</p><p class="text-xs text-muted">게시글 목록 표시 방식</p></div>
+          <USelect
+            v-model="category.listView"
+            :items="listViewOptions"
+            value-key="value"
+            label-key="label"
+            @update:model-value="savedId = null"
+          />
+        </div>
+        <div class="flex flex-wrap justify-between gap-2 border-t border-default pt-4">
+          <div class="flex gap-1">
+            <UButton label="위로" icon="i-lucide-arrow-up" color="neutral" variant="outline" size="sm" :disabled="index === 0 || ordering" @click="moveCategory(index, -1)" />
+            <UButton label="아래로" icon="i-lucide-arrow-down" color="neutral" variant="outline" size="sm" :disabled="index === draft.length - 1 || ordering" @click="moveCategory(index, 1)" />
+          </div>
+          <div class="flex gap-1">
+            <UButton
+              label="게시판으로 이동"
+              icon="i-lucide-arrow-up-right"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              :to="categoryTo(category.id)"
+            />
+            <UButton label="카테고리 삭제" icon="i-lucide-trash-2" color="error" variant="ghost" size="sm" @click="removeCategory(index)" />
+            <UButton
+              label="저장"
+              icon="i-lucide-save"
+              size="sm"
+              :loading="savingId === category.id"
+              @click="save(category, index)"
+            />
+          </div>
+        </div>
+      </div>
+    </details>
+
+    <div class="flex gap-2 border-t border-default pt-4">
+      <UInput v-model="newLabel" class="flex-1" placeholder="새 카테고리 이름" @keyup.enter="addCategory" />
+      <UButton label="추가" icon="i-lucide-plus" color="neutral" variant="outline" @click="addCategory" />
+    </div>
+    <UAlert v-if="error" color="error" variant="subtle" :description="error" />
+    <UAlert v-if="savedId" color="success" variant="subtle" :description="`‘${draft.find(item => item.id === savedId)?.label}’ 카테고리를 저장했습니다.`" />
+
+    <section v-if="deleteAll" class="mt-4 flex flex-col gap-3 border-t border-error/40 pt-6">
+      <div>
+        <h2 class="font-semibold text-error">위험 영역</h2>
+        <p class="mt-1 text-sm text-muted">
+          모든 게시글, 댓글, 첨부파일과 카테고리 설정을 영구 삭제합니다. 게시판 사용자와 관리자 권한은 유지합니다.
+        </p>
+      </div>
+      <UFormField label="확인을 위해 ‘게시판 데이터 삭제’를 입력하세요">
+        <UInput v-model="deleteConfirm" autocomplete="off" placeholder="게시판 데이터 삭제" />
+      </UFormField>
+      <div class="flex justify-end">
+        <UButton
+          label="모든 데이터 삭제"
+          icon="i-lucide-bomb"
+          color="error"
+          :disabled="deleteConfirm !== '게시판 데이터 삭제'"
+          :loading="deletingAll"
+          @click="runDeleteAll"
+        />
+      </div>
+      <UAlert v-if="deleteDone" color="success" variant="subtle" description="게시판 데이터를 모두 삭제했습니다." />
+    </section>
+  </div>
+</template>

package/dist/types.d.ts

@@ -22,8 +22,14 @@ export interface EditorImageEntry {
 export type ModerationStatus = 'approved';
 export interface PostModel {
     id?: string;
+    /** 카테고리 내 URL 식별자. 최초 작성 시 생성되고 제목 수정 시에도 유지된다. */
+    slug: string;
     title: string;
     summary?: string;
+    /** 목록 카드용 대표 이미지. 본문의 첫 이미지 또는 이미지 첨부파일. */
+    previewImage?: string;
+    /** 영상 목록 카드용 URL. 현재 YouTube 임베드 또는 영상 첨부파일. */
+    videoUrl?: string;
     tags?: string[];
     /** BoardCategory.id 참조. 미지정이면 '전체'로 취급. */
     category?: string;
@@ -54,15 +60,19 @@ export interface CommentModel {
 export interface BoardUserRole {
     role: 'user' | 'admin';
 }
+export type BoardListView = 'default' | 'image' | 'video';
 export interface BoardCategory {
     /** 글의 category 필드가 참조하는 키 (예: 'notice', 'free') */
     id: string;
     /** 화면에 보이는 이름 */
     label: string;
+    /** 목록 표시 방식. 미지정된 기존 데이터는 default. */
+    listView?: BoardListView;
+    /** 목록 노출 순서. 서브컬렉션 문서의 정렬 필드. */
+    order?: number;
 }
-/** {prefix}Settings/config 문서. 관리자(role:'admin')만 생성/수정, 읽기는 전체 공개. */
+/** {prefix}Settings/config 메타 문서. 카테고리는 categories 서브컬렉션에 저장한다. */
 export interface BoardSettingsModel {
-    categories: BoardCategory[];
     updatedAt?: Timestamp;
 }
 /** 검열이 어느 단계에서 끝났는지 (호스트/로깅용, UI 노출 없음) */

package/dist/utils/postPreview.d.ts

@@ -0,0 +1,6 @@
+import { Attachment } from '../types';
+export declare function buildPostPreview(content: string, attachments?: Attachment[]): {
+    summary: string;
+    previewImage?: string;
+    videoUrl?: string;
+};

package/docs/firestore.rules.example

@@ -85,13 +85,21 @@ service cloud.firestore {
           ));
     }
 
-    // 게시판 설정(카테고리 등) — 읽기 전체 공개.
-    // 로그인 사용자가 글쓰기 폼에서 카테고리를 추가할 수 있다 (categories + updatedAt 만).
+    // 게시판 설정 + 카테고리 개별 문서 — 읽기 전체 공개, 쓰기는 관리자만.
     match /memiBoardSettings/{docId} {
       allow read: if true;
-      allow create, update: if isSignedIn()
-        && request.resource.data.keys().hasOnly(['categories', 'updatedAt'])
-        && request.resource.data.categories is list;
+      allow create, update: if isAdmin()
+        && request.resource.data.keys().hasOnly(['updatedAt']);
+
+      match /categories/{categoryId} {
+        allow read: if true;
+        allow create, update: if isAdmin()
+          && request.resource.data.keys().hasOnly(['label', 'listView', 'order', 'updatedAt'])
+          && request.resource.data.label is string
+          && request.resource.data.listView in ['default', 'image', 'video']
+          && request.resource.data.order is number;
+        allow delete: if isAdmin();
+      }
     }
   }
 }

package/docs/storage.rules.example

@@ -28,6 +28,7 @@ service firebase.storage {
       allow read: if true;
       // uploadBytesResumable → create + 청크 update 필요 (write)
       allow write: if isSignedIn()
+        && (!postExists(postId) || isPostOwner(postId) || isAdmin())
         && request.resource.size < 20 * 1024 * 1024;
       allow delete: if isSignedIn() && (!postExists(postId) || isPostOwner(postId) || isAdmin());
     }
@@ -38,6 +39,7 @@ service firebase.storage {
     match /memiBoard/posts/{postId}/images/{allPaths=**} {
       allow read: if true;
       allow write: if isSignedIn()
+        && (!postExists(postId) || isPostOwner(postId) || isAdmin())
         && request.resource.size < 5 * 1024 * 1024
         && request.resource.contentType.matches('image/(jpeg|png|webp|gif|jpg)');
       allow delete: if isSignedIn() && (!postExists(postId) || isPostOwner(postId) || isAdmin());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "memi-board",
-  "version": "0.4.13",
+  "version": "0.5.0",
   "type": "module",
   "description": "Firebase 게시판 — core composable + thin Nuxt module(UI SFC). Nuxt 4 + Nuxt UI 호스트에 붙임",
   "license": "MIT",
@@ -101,6 +101,7 @@
     ]
   },
   "dependencies": {
-    "@nuxt/kit": "^4.5.1"
+    "@nuxt/kit": "^4.5.1",
+    "@tiptap/extension-youtube": "3.28.0"
   }
 }