memi-board 0.4.14 → 0.7.0

package/dist/runtime/components/Settings.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { useMemiBoardAuth } from '../composables/useMemiBoardAuth'
-import { useMemiBoardSettings } from '../composables/useMemiBoardSettings'
-import { slugify } from '../utils/slugify'
-import type { BoardCategory, BoardListView } from '../types'
+import { computed, onMounted, ref, watch } from 'vue'
+import { slugify, useMemiBoardAuth, useMemiBoardSettings } from 'memi-board'
+import type { BoardCategory, BoardListView, BoardWriteRole } 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<{
@@ -21,23 +24,37 @@ const listViewOptions: Array<{ label: string, value: BoardListView }> = [
   { label: '이미지', value: 'image' },
   { label: '영상', value: 'video' },
 ]
+const writeRoleOptions: Array<{ label: string, value: BoardWriteRole }> = [
+  { label: '일반 이상', value: 'user' },
+  { label: '스태프 이상', value: 'staff' },
+  { label: '관리자만', value: 'admin' },
+]
 
 const { isAdmin, rolePending } = useMemiBoardAuth()
-const { categories, settingsPending, saveCategories } = useMemiBoardSettings()
+const { categories, settingsPending, saveCategory, saveCategories, deleteCategory } = useMemiBoardSettings()
 const canManage = computed(() => isAdmin.value || props.authorized)
-const pending = computed(() => rolePending.value || settingsPending.value)
+// Firebase의 SSR pending 값과 클라이언트 첫 값이 달라질 수 있다. 최초 hydration은
+// 양쪽 모두 로딩 화면으로 맞춘 뒤 mounted 이후 실제 상태를 렌더링한다.
+const mounted = ref(false)
+onMounted(() => { mounted.value = true })
+const pending = computed(() => !mounted.value || rolePending.value || settingsPending.value)
 
 const draft = ref<BoardCategory[]>([])
 const newLabel = ref('')
-const saving = ref(false)
-const saved = ref(false)
+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',
+      writeRole: category.writeRole ?? 'user',
     }))
   }
 }, { immediate: true })
@@ -49,40 +66,80 @@ function addCategory() {
   let id = base
   let suffix = 2
   while (draft.value.some(category => category.id === id)) id = `${base}-${suffix++}`
-  draft.value.push({ id, label, listView: 'default' })
+  draft.value.push({ id, label, listView: 'default', writeRole: 'user' })
   newLabel.value = ''
-  saved.value = false
 }
 
-function moveCategory(index: number, offset: -1 | 1) {
+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
-  saved.value = false
+  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
+  }
 }
 
-function removeCategory(index: number) {
-  draft.value.splice(index, 1)
-  saved.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 : '카테고리를 삭제하지 못했습니다.'
+  }
 }
 
-async function save() {
+function categoryTo(id: string) {
+  return `${props.categoryBase.replace(/\/$/, '')}/${encodeURIComponent(id)}`
+}
+
+async function save(category: BoardCategory, index: number) {
   error.value = ''
-  saved.value = false
-  saving.value = true
+  savedId.value = null
+  savingId.value = category.id
   try {
-    await saveCategories(draft.value)
-    saved.value = true
+    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 {
-    saving.value = false
+    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>
@@ -107,7 +164,7 @@ async function save() {
       <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 || '라벨 없음' }} · /{{ category.id }}</p>
+          <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>
@@ -117,9 +174,19 @@ async function save() {
           <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>
+          <USelect
+            v-model="category.writeRole"
+            :items="writeRoleOptions"
+            value-key="value"
+            label-key="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>
-          <UInput v-model="category.label" @update:model-value="saved = false" />
+          <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>
@@ -128,15 +195,32 @@ async function save() {
             :items="listViewOptions"
             value-key="value"
             label-key="label"
-            @update:model-value="saved = false"
+            @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" @click="moveCategory(index, -1)" />
-            <UButton label="아래로" icon="i-lucide-arrow-down" color="neutral" variant="outline" size="sm" :disabled="index === draft.length - 1" @click="moveCategory(index, 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>
-          <UButton label="카테고리 삭제" icon="i-lucide-trash-2" color="error" variant="ghost" size="sm" @click="removeCategory(index)" />
         </div>
       </div>
     </details>
@@ -146,9 +230,29 @@ async function save() {
       <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="saved" color="success" variant="subtle" description="게시판 설정을 저장했습니다." />
-    <div class="flex justify-end">
-      <UButton label="설정 저장" icon="i-lucide-save" :loading="saving" @click="save" />
-    </div>
+    <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/runtime/components/Users.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useMemiBoardAuth } from '../composables/useMemiBoardAuth'
+import { BOARD_USER_ROLES, useMemiBoardUsers } from '../composables/useMemiBoardUsers'
+import type { BoardUserRole } from '../types'
+
+const props = withDefaults(defineProps<{ authorized?: boolean }>(), { authorized: false })
+const { isAdmin, rolePending } = useMemiBoardAuth()
+const { users, usersPending, updateUserRole } = useMemiBoardUsers()
+const canManage = computed(() => isAdmin.value || props.authorized)
+const savingUid = ref<string | null>(null)
+const savedUid = ref<string | null>(null)
+const error = ref('')
+
+async function changeRole(uid: string, role: BoardUserRole) {
+  if (!canManage.value) return
+  savingUid.value = uid
+  savedUid.value = null
+  error.value = ''
+  try {
+    await updateUserRole(uid, role)
+    savedUid.value = uid
+  }
+  catch (cause) {
+    error.value = cause instanceof Error ? cause.message : '역할을 변경하지 못했습니다.'
+  }
+  finally {
+    savingUid.value = null
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <div class="grid gap-3 md:grid-cols-3">
+      <UAlert v-for="item in BOARD_USER_ROLES" :key="item.value" color="neutral" variant="subtle" :title="item.label" :description="item.description" />
+    </div>
+    <UAlert v-if="error" color="error" variant="subtle" icon="i-lucide-circle-alert" :description="error" />
+    <div v-if="rolePending || usersPending" class="py-12 text-center text-sm text-muted">사용자 목록을 불러오고 있습니다.</div>
+    <UAlert v-else-if="!canManage" color="error" variant="subtle" icon="i-lucide-shield-alert" title="권한이 없습니다" description="게시판 관리자만 사용자 역할을 관리할 수 있습니다." />
+    <div v-else-if="users.length === 0" class="py-12 text-center text-sm text-muted">게시판에 로그인한 사용자가 없습니다.</div>
+    <div v-else class="divide-y divide-default rounded-lg border border-default">
+      <div v-for="boardUser in users" :key="boardUser.id" class="grid gap-4 p-4 md:grid-cols-[minmax(0,1fr)_12rem] md:items-center">
+        <div class="min-w-0">
+          <div class="flex items-center gap-2">
+            <p class="truncate font-medium text-highlighted">{{ boardUser.displayName || '이름 없음' }}</p>
+            <UBadge v-if="savedUid === boardUser.id" color="success" variant="subtle" label="저장됨" />
+          </div>
+          <p class="truncate text-sm text-muted">{{ boardUser.email || boardUser.id }}</p>
+          <p v-if="boardUser.moderationBlockCount" class="mt-1 text-xs text-warning">콘텐츠 경고 {{ boardUser.moderationBlockCount }}회</p>
+        </div>
+        <USelect
+          :model-value="boardUser.role || 'user'"
+          :items="BOARD_USER_ROLES"
+          value-key="value"
+          label-key="label"
+          :loading="savingUid === boardUser.id"
+          :disabled="savingUid === boardUser.id"
+          @update:model-value="changeRole(boardUser.id, $event as BoardUserRole)"
+        />
+      </div>
+    </div>
+  </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;
@@ -51,10 +57,18 @@ export interface CommentModel {
     moderationStatus: ModerationStatus;
     createdAt: Timestamp;
 }
-export interface BoardUserRole {
-    role: 'user' | 'admin';
+export type BoardUserRole = 'admin' | 'staff' | 'user';
+export interface BoardUserModel {
+    id: string;
+    role: BoardUserRole;
+    displayName?: string | null;
+    email?: string | null;
+    photoURL?: string | null;
+    moderationBlockCount?: number;
+    updatedAt?: Timestamp;
 }
 export type BoardListView = 'default' | 'image' | 'video';
+export type BoardWriteRole = 'user' | 'staff' | 'admin';
 export interface BoardCategory {
     /** 글의 category 필드가 참조하는 키 (예: 'notice', 'free') */
     id: string;
@@ -62,10 +76,13 @@ export interface BoardCategory {
     label: string;
     /** 목록 표시 방식. 미지정된 기존 데이터는 default. */
     listView?: BoardListView;
+    /** 글쓰기 최소 역할. 미지정된 기존 데이터는 user. */
+    writeRole?: BoardWriteRole;
+    /** 목록 노출 순서. 서브컬렉션 문서의 정렬 필드. */
+    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

@@ -19,6 +19,18 @@ service cloud.firestore {
       return isSignedIn() &&
         get(/databases/$(database)/documents/memiBoardUsers/$(request.auth.uid)).data.role == 'admin';
     }
+    function isStaff() {
+      return isSignedIn() &&
+        get(/databases/$(database)/documents/memiBoardUsers/$(request.auth.uid)).data.role in ['admin', 'staff'];
+    }
+    function canWriteCategory(categoryId) {
+      let categoryPath = /databases/$(database)/documents/memiBoardSettings/config/categories/$(categoryId);
+      let requiredRole = get(categoryPath).data.get('writeRole', 'user');
+      return exists(categoryPath)
+        && (requiredRole == 'user'
+          || (requiredRole == 'staff' && isStaff())
+          || (requiredRole == 'admin' && isAdmin()));
+    }
     function isOwner(resource) {
       return isSignedIn() && request.auth.uid == resource.data.authorUid;
     }
@@ -28,14 +40,16 @@ service cloud.firestore {
 
       allow create: if isSignedIn()
         && request.resource.data.authorUid == request.auth.uid
-        && request.resource.data.moderationStatus == 'approved';
+        && request.resource.data.moderationStatus == 'approved'
+        && request.resource.data.category is string
+        && canWriteCategory(request.resource.data.category);
 
-      // 작성자 본인 또는 관리자만 수정/삭제 가능
-      allow update, delete: if isOwner(resource) || isAdmin();
+      // 작성자 본인 또는 관리자·스태프만 수정/삭제 가능
+      allow update, delete: if isOwner(resource) || isStaff();
 
       match /body/{docId} {
         allow read: if true;
-        allow write: if isOwner(get(/databases/$(database)/documents/memiBoardPosts/$(postId))) || isAdmin();
+        allow write: if isOwner(get(/databases/$(database)/documents/memiBoardPosts/$(postId))) || isStaff();
       }
 
       match /comments/{commentId} {
@@ -49,7 +63,7 @@ service cloud.firestore {
         // 부모 글을 삭제할 때 작성자가 다른 사용자의 댓글도 함께 정리할 수 있어야 한다.
         allow delete: if isOwner(resource)
           || isOwner(get(/databases/$(database)/documents/memiBoardPosts/$(postId)))
-          || isAdmin();
+          || isStaff();
 
         // 댓글 수정은 지원하지 않는다 (삭제 후 재작성만 가능) — Editor에서 UI 자체도 제공하지 않음
         allow update: if false;
@@ -57,19 +71,17 @@ service cloud.firestore {
     }
 
     // 게시판 역할 문서.
-    // 본인은 role:'user'로만 생성/유지할 수 있고, 자기 role을 'admin'으로 바꿀 수 없다.
-    // 관리자 승격은 Firebase 콘솔에서 해당 uid 문서의 role 필드를 직접 'admin'으로 바꿔야 한다
-    // (이 모듈은 관리자 승격 UI를 제공하지 않는다).
+    // 본인은 role:'user'로만 생성하며, admin은 Users UI에서 admin/staff/user를 변경한다.
     // moderationBlockCount/At: 검열 차단 누적(+1만). 감소·리셋은 admin.
     match /memiBoardUsers/{uid} {
-      allow read: if isSignedIn();
+      allow read: if isAdmin() || (isSignedIn() && request.auth.uid == uid);
       allow create: if isSignedIn()
         && request.auth.uid == uid
         && request.resource.data.role == 'user'
         && (!('moderationBlockCount' in request.resource.data)
             || request.resource.data.moderationBlockCount == 0
             || request.resource.data.moderationBlockCount == 1);
-      allow update: if isAdmin()
+      allow update: if (isAdmin() && request.resource.data.role in ['admin', 'staff', 'user'])
         || (isSignedIn()
           && request.auth.uid == uid
           && request.resource.data.role == resource.data.role
@@ -85,13 +97,22 @@ 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', 'writeRole', 'order', 'updatedAt'])
+          && request.resource.data.label is string
+          && request.resource.data.listView in ['default', 'image', 'video']
+          && request.resource.data.writeRole in ['user', 'staff', 'admin']
+          && request.resource.data.order is number;
+        allow delete: if isAdmin();
+      }
     }
   }
 }

package/docs/storage.rules.example

@@ -12,9 +12,9 @@ service firebase.storage {
     function isSignedIn() {
       return request.auth != null;
     }
-    function isAdmin() {
+    function isStaff() {
       return isSignedIn() &&
-        firestore.get(/databases/(default)/documents/memiBoardUsers/$(request.auth.uid)).data.role == 'admin';
+        firestore.get(/databases/(default)/documents/memiBoardUsers/$(request.auth.uid)).data.role in ['admin', 'staff'];
     }
     function postExists(postId) {
       return firestore.exists(/databases/(default)/documents/memiBoardPosts/$(postId));
@@ -28,8 +28,9 @@ service firebase.storage {
       allow read: if true;
       // uploadBytesResumable → create + 청크 update 필요 (write)
       allow write: if isSignedIn()
+        && (!postExists(postId) || isPostOwner(postId) || isStaff())
         && request.resource.size < 20 * 1024 * 1024;
-      allow delete: if isSignedIn() && (!postExists(postId) || isPostOwner(postId) || isAdmin());
+      allow delete: if isSignedIn() && (!postExists(postId) || isPostOwner(postId) || isStaff());
     }
 
     // 에디터 본문 이미지 + 썸네일
@@ -38,9 +39,10 @@ service firebase.storage {
     match /memiBoard/posts/{postId}/images/{allPaths=**} {
       allow read: if true;
       allow write: if isSignedIn()
+        && (!postExists(postId) || isPostOwner(postId) || isStaff())
         && 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());
+      allow delete: if isSignedIn() && (!postExists(postId) || isPostOwner(postId) || isStaff());
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "memi-board",
-  "version": "0.4.14",
+  "version": "0.7.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"
   }
 }