memi-board 0.22.0 → 0.28.0

package/dist/runtime/components/ListDefault.vue

@@ -9,7 +9,9 @@ withDefaults(defineProps<{
   postTo: (post: PostModel) => string | undefined
   now: number
   showCategory?: boolean
+  authorProfileTo?: (authorUid: string) => string | undefined
   authorPostsTo?: (authorUid: string) => string | undefined
+  authorCommentsTo?: (authorUid: string) => string | undefined
 }>(), { showCategory: true })
 const emit = defineEmits<{ select: [post: PostModel] }>()
 const { categoryLabel } = useMemiBoardSettings()
@@ -36,22 +38,6 @@ function image(post: PostModel): string | undefined {
           class="flex min-w-0 flex-1 text-left transition-colors hover:bg-elevated/50"
           @click="!postTo(post) && emit('select', post)"
         >
-          <!-- 카드 좌·상·하 밀착, 가로는 고정 / 세로는 행 높이 전체 -->
-          <div class="w-[4.5rem] shrink-0 self-stretch bg-elevated">
-            <img
-              v-if="image(post)"
-              :src="image(post)"
-              :alt="post.title"
-              class="h-full w-full object-cover"
-            >
-            <div
-              v-else
-              class="flex h-full min-h-[4.5rem] w-full items-center justify-center text-muted"
-            >
-              <UIcon name="i-lucide-image" class="size-6" />
-            </div>
-          </div>
-
           <div class="min-w-0 flex-1 flex flex-col justify-center gap-1 overflow-hidden py-2 pl-3 pr-2">
             <div class="flex min-w-0 items-start gap-2">
               <UBadge
@@ -83,39 +69,56 @@ function image(post: PostModel): string | undefined {
             </div>
             <p
               v-if="post.summary"
-              class="min-w-0 line-clamp-2 break-words text-sm leading-snug text-muted"
+              class="min-w-0 line-clamp-2 break-words whitespace-pre-line text-sm leading-snug text-muted"
             >
               {{ post.summary }}
             </p>
-            <div v-if="post.attachments?.length" class="flex items-center gap-1 text-xs text-muted">
-              <UIcon name="i-lucide-paperclip" class="size-3" />{{ post.attachments.length }}
-            </div>
+          </div>
+
+          <div
+            v-if="image(post)"
+            class="my-2 mr-2 size-[4.5rem] shrink-0 self-center overflow-hidden rounded-full bg-elevated"
+          >
+            <img
+              :src="image(post)"
+              :alt="post.title"
+              class="h-full w-full object-cover"
+            >
           </div>
         </component>
 
-        <div class="flex w-[5.5rem] shrink-0 flex-col items-end justify-center gap-1 py-2 pr-3 text-right text-xs leading-snug text-muted sm:w-24">
+        <div class="flex w-[120px] shrink-0 flex-col items-end justify-center gap-1 py-2 pr-3 text-right text-xs leading-snug text-muted">
           <MemiBoardAuthorMenu
             :author-uid="post.authorUid"
             :author-name="post.authorName"
             :author-photo="post.authorPhoto"
             :author-posts-to="authorPostsTo"
-            :show-avatar="false"
+            :author-profile-to="authorProfileTo"
+            :author-comments-to="authorCommentsTo"
+            :show-avatar="true"
             truncate
             class="max-w-full"
           />
-          <UTooltip
-            :delay-duration="0"
-            :text="formatTimestampDetails(post.createdAt, post.updatedAt).join('\n')"
-            :ui="{ content: 'h-auto w-max py-2', text: 'whitespace-pre-line overflow-visible' }"
-          >
+          <UPopover :content="{ side: 'top' }" :ui="{ content: 'h-auto w-max' }">
             <time
               :datetime="post.createdAt?.toDate?.().toISOString()"
-              class="cursor-help text-xs leading-snug text-muted"
+              class="cursor-pointer text-xs leading-snug text-muted"
             >
               {{ formatRelativeDate(post.createdAt, now) }}
             </time>
-          </UTooltip>
+            <template #content>
+              <p class="whitespace-pre-line px-3 py-2 text-xs">
+                {{ formatTimestampDetails(post.createdAt, post.updatedAt).join('\n') }}
+              </p>
+            </template>
+          </UPopover>
           <div class="flex flex-wrap items-center justify-end gap-x-2 gap-y-0.5 text-xs leading-snug text-muted">
+            <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>

package/dist/runtime/components/ListDense.vue

@@ -9,7 +9,9 @@ withDefaults(defineProps<{
   postTo: (post: PostModel) => string | undefined
   now: number
   showCategory?: boolean
+  authorProfileTo?: (authorUid: string) => string | undefined
   authorPostsTo?: (authorUid: string) => string | undefined
+  authorCommentsTo?: (authorUid: string) => string | undefined
 }>(), { showCategory: true })
 const emit = defineEmits<{ select: [post: PostModel] }>()
 const { categoryLabel } = useMemiBoardSettings()
@@ -21,108 +23,95 @@ function thumb(post: PostModel): string | undefined {
 </script>
 
 <template>
-  <!--
-    조밀 = 타임라인 스트림.
-    레일 위 원형 노드 자리에 썸네일, 제목 한 줄 + 메타.
-  -->
-  <div class="relative">
-    <!-- 세로 레일 (썸네일 중심 기준) -->
-    <div
-      class="pointer-events-none absolute bottom-4 left-5 top-4 w-px bg-gradient-to-b from-primary/40 via-default to-primary/20"
-      aria-hidden="true"
-    />
+  <!-- 조밀 = 커뮤니티 게시판 스타일 한 줄 목록. 우측에 작은 사각 썸네일(있을 때만). -->
+  <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">
+          <UBadge
+            v-if="post.isPublished === false"
+            label="초안"
+            color="warning"
+            variant="subtle"
+            size="sm"
+            class="shrink-0"
+          />
+          <h3 class="min-w-0 truncate text-sm font-medium leading-snug text-highlighted transition-colors group-hover:text-primary">
+            {{ post.title?.trim() || post.summary || '사진' }}
+          </h3>
+          <span
+            v-if="(post.commentCount ?? 0) > 0"
+            class="mt-0.5 inline-flex shrink-0 items-center rounded-full bg-primary/10 px-1.5 py-px text-[11px] font-semibold tabular-nums text-primary"
+          >
+            {{ post.commentCount }}
+          </span>
+        </div>
 
-    <ul class="flex flex-col gap-0.5">
-      <li v-for="post in posts" :key="post.id" class="flex flex-col gap-1 py-1.5 pr-2 pl-0">
-        <!-- 썸네일+제목만 클릭 시 글로 이동 — 작성자 메뉴는 별도 인터랙션이라 링크 밖에 둔다 -->
-        <component
-          :is="postTo(post) ? NuxtLink : 'button'"
-          :to="postTo(post)"
-          class="group relative flex w-full items-center gap-3 rounded-lg text-left transition-colors hover:bg-elevated/60"
-          @click="!postTo(post) && emit('select', post)"
+        <div
+          v-if="thumb(post)"
+          class="size-12 shrink-0 overflow-hidden rounded-md bg-elevated"
         >
-          <!-- 레일 위 원형 썸네일 (이미지 없으면 플레이스홀더) -->
-          <div
-            class="relative z-10 size-10 shrink-0 overflow-hidden rounded-full bg-elevated ring-2 ring-default shadow-sm transition duration-300 group-hover:ring-primary/50"
+          <img
+            :src="thumb(post)"
+            :alt="post.title?.trim() || post.summary || '사진'"
+            class="size-full object-cover"
           >
-            <img
-              v-if="thumb(post)"
-              :src="thumb(post)"
-              :alt="post.title?.trim() || post.summary || '사진'"
-              class="size-full object-cover transition duration-300 group-hover:scale-110"
-            >
-            <div
-              v-else
-              class="flex size-full items-center justify-center text-muted"
-            >
-              <UIcon name="i-lucide-file-text" class="size-4" />
-            </div>
-          </div>
-
-          <!-- 제목 -->
-          <div class="flex min-w-0 flex-1 items-center gap-1.5">
-            <UBadge
-              v-if="post.isPublished === false"
-              label="초안"
-              color="warning"
-              variant="subtle"
-              size="sm"
-              class="shrink-0"
-            />
-            <h3 class="min-w-0 truncate text-sm font-medium leading-snug text-highlighted transition-colors group-hover:text-primary">
-              {{ post.title?.trim() || post.summary || '사진' }}
-            </h3>
-            <span
-              v-if="(post.commentCount ?? 0) > 0"
-              class="inline-flex shrink-0 items-center rounded-full bg-primary/10 px-1.5 py-px text-[11px] font-semibold tabular-nums text-primary"
-            >
-              {{ post.commentCount }}
-            </span>
-          </div>
-        </component>
+        </div>
+      </component>
 
-        <!-- 메타: 썸네일 폭(size-10 + gap-3)만큼 들여서 제목 아래로 맞춤 -->
-        <div class="ml-[3.25rem] flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] leading-none text-muted">
-          <span class="font-medium text-toned">
-            <MemiBoardAuthorMenu
-              :author-uid="post.authorUid"
-              :author-name="post.authorName"
-              :author-photo="post.authorPhoto"
-              :author-posts-to="authorPostsTo"
-              :show-avatar="false"
-            />
-          </span>
-          <span class="text-default/40" aria-hidden="true">·</span>
-          <UTooltip
-            :delay-duration="0"
-            :text="formatTimestampDetails(post.createdAt, post.updatedAt).join('\n')"
-            :ui="{ content: 'h-auto w-max py-2', text: 'whitespace-pre-line overflow-visible' }"
+      <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"
           >
-            <time
-              :datetime="post.createdAt?.toDate?.().toISOString()"
-              class="cursor-help tabular-nums"
-            >
-              {{ formatRelativeDate(post.createdAt, now) }}
-            </time>
-          </UTooltip>
-          <span class="text-default/40" aria-hidden="true">·</span>
+            {{ 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">
+          <span class="text-default/40" aria-hidden="true">|</span>
           <span class="inline-flex items-center gap-0.5 tabular-nums">
-            <UIcon name="i-lucide-eye" class="size-3" />
-            {{ post.viewCount ?? 0 }}
+            추천 {{ post.likeCount }}
           </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">
-              <UIcon name="i-lucide-heart" class="size-3 text-primary/80" />
-              {{ 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>
-      </li>
-    </ul>
-  </div>
+        </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>
+    </li>
+  </ul>
 </template>

package/dist/runtime/components/ListVideo.vue

@@ -8,7 +8,9 @@ defineProps<{
   posts: PostModel[]
   postTo: (post: PostModel) => string | undefined
   now: number
+  authorProfileTo?: (authorUid: string) => string | undefined
   authorPostsTo?: (authorUid: string) => string | undefined
+  authorCommentsTo?: (authorUid: string) => string | undefined
 }>()
 const emit = defineEmits<{ select: [post: PostModel] }>()
 const NuxtLink = resolveComponent('NuxtLink')
@@ -58,7 +60,7 @@ function cover(post: PostModel): string | undefined {
               {{ post.commentCount }}
             </span>
           </div>
-          <p v-if="post.summary" class="mt-2 line-clamp-2 text-sm text-muted">{{ post.summary }}</p>
+          <p v-if="post.summary" class="mt-2 line-clamp-2 whitespace-pre-line text-sm text-muted">{{ post.summary }}</p>
         </div>
       </component>
 
@@ -68,6 +70,8 @@ function cover(post: PostModel): string | undefined {
           :author-name="post.authorName"
           :author-photo="post.authorPhoto"
           :author-posts-to="authorPostsTo"
+          :author-profile-to="authorProfileTo"
+          :author-comments-to="authorCommentsTo"
           :show-avatar="false"
         />
         <div class="flex shrink-0 items-center gap-2">
@@ -75,18 +79,19 @@ function cover(post: PostModel): string | undefined {
             <UIcon name="i-lucide-eye" class="size-3" />
             {{ post.viewCount ?? 0 }}
           </span>
-          <UTooltip
-            :delay-duration="0"
-            :text="formatTimestampDetails(post.createdAt, post.updatedAt).join('\n')"
-            :ui="{ content: 'h-auto w-max py-2', text: 'whitespace-pre-line overflow-visible' }"
-          >
+          <UPopover :content="{ side: 'top' }" :ui="{ content: 'h-auto w-max' }">
             <time
               :datetime="post.createdAt?.toDate?.().toISOString()"
-              class="cursor-help"
+              class="cursor-pointer"
             >
               {{ formatRelativeDate(post.createdAt, now) }}
             </time>
-          </UTooltip>
+            <template #content>
+              <p class="whitespace-pre-line px-3 py-2 text-xs">
+                {{ formatTimestampDetails(post.createdAt, post.updatedAt).join('\n') }}
+              </p>
+            </template>
+          </UPopover>
         </div>
       </div>
     </div>

package/dist/runtime/components/Profile.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { BOARD_USER_ROLES, formatRelativeDate, useMemiBoardAuth, useMemiBoardUserProfile } from 'memi-board/runtime'
+import MemiBoardProfileEditModal from './ProfileEditModal.vue'
+
+const props = defineProps<{
+  uid: string
+}>()
+
+const { profile, profilePending } = useMemiBoardUserProfile(() => props.uid)
+const now = ref(Date.now())
+
+const roleLabel = computed(() => BOARD_USER_ROLES.find(item => item.value === profile.value?.role)?.label)
+
+const { user } = useMemiBoardAuth()
+const isOwnProfile = computed(() => !!user.value?.uid && user.value.uid === props.uid)
+const editOpen = ref(false)
+</script>
+
+<template>
+  <div
+    v-if="profilePending"
+    class="flex items-center gap-3"
+  >
+    <USkeleton class="size-16 shrink-0 rounded-full" />
+    <div class="flex flex-col gap-2">
+      <USkeleton class="h-5 w-32" />
+      <USkeleton class="h-4 w-48" />
+    </div>
+  </div>
+
+  <p
+    v-else-if="!profile"
+    class="text-sm text-muted"
+  >
+    사용자를 찾을 수 없습니다.
+  </p>
+
+  <div
+    v-else
+    class="flex flex-col gap-3"
+  >
+    <div class="flex items-center gap-3">
+      <UAvatar
+        :src="profile.photoURL ?? undefined"
+        :alt="profile.displayName ?? '익명'"
+        size="xl"
+        class="shrink-0"
+      />
+      <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+        <div class="flex min-w-0 items-center gap-2">
+          <h2 class="min-w-0 truncate text-lg font-bold text-highlighted">
+            {{ profile.displayName ?? '이름 없음' }}
+          </h2>
+          <UBadge
+            v-if="roleLabel && profile.role !== 'user'"
+            :label="roleLabel"
+            color="primary"
+            variant="subtle"
+            size="sm"
+          />
+        </div>
+        <p class="text-xs text-muted">
+          가입 {{ formatRelativeDate(profile.joinedAt, now) }} · 최근 방문 {{ formatRelativeDate(profile.lastVisitAt, now) }}
+        </p>
+      </div>
+      <UButton
+        v-if="isOwnProfile"
+        label="수정"
+        icon="i-lucide-pencil"
+        color="neutral"
+        variant="outline"
+        size="sm"
+        class="shrink-0"
+        @click="editOpen = true"
+      />
+    </div>
+
+    <p
+      v-if="profile.bio"
+      class="whitespace-pre-line text-sm text-toned"
+    >
+      {{ profile.bio }}
+    </p>
+  </div>
+
+  <MemiBoardProfileEditModal
+    v-if="isOwnProfile"
+    v-model:open="editOpen"
+    :uid="uid"
+    :profile="profile"
+  />
+</template>

package/dist/runtime/components/ProfileEditModal.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { serverTimestamp, updateDoc } from 'firebase/firestore'
+import { useFirestore } from 'vuefire'
+import { boardUserDoc, useBoardPathConfig } from 'memi-board/runtime'
+import type { BoardUserModel } from 'memi-board/runtime'
+import { useMemiBoardStorage } from 'memi-board/storage'
+import MemiBoardAvatarCropModal from './AvatarCropModal.vue'
+
+const open = defineModel<boolean>('open', { default: false })
+
+const props = defineProps<{
+  uid: string
+  profile: BoardUserModel | null | undefined
+}>()
+
+const emit = defineEmits<{ saved: [] }>()
+
+const db = useFirestore()
+
+const displayName = ref('')
+const bio = ref('')
+const photoURL = ref<string | null>(null)
+const saving = ref(false)
+const error = ref('')
+
+// 열릴 때마다 최신 프로필로 폼을 리셋 — 이전에 취소한 입력이 남아있지 않게.
+watch(open, (isOpen) => {
+  if (!isOpen) return
+  displayName.value = props.profile?.displayName ?? ''
+  bio.value = props.profile?.bio ?? ''
+  photoURL.value = props.profile?.photoURL ?? null
+  error.value = ''
+})
+
+const cropOpen = ref(false)
+const cropSrc = ref('')
+const avatarUploading = ref(false)
+const avatarInput = ref<HTMLInputElement | null>(null)
+let pendingAvatarFile: File | null = null
+
+const { uploadAvatar } = useMemiBoardStorage()
+
+function onPickAvatar(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  input.value = ''
+  if (!file) return
+  if (!file.type.startsWith('image/')) {
+    error.value = '이미지 파일만 선택할 수 있습니다.'
+    return
+  }
+  if (cropSrc.value.startsWith('blob:')) URL.revokeObjectURL(cropSrc.value)
+  cropSrc.value = URL.createObjectURL(file)
+  cropOpen.value = true
+}
+
+function onCropConfirm(file: File) {
+  pendingAvatarFile = file
+  photoURL.value = URL.createObjectURL(file)
+  cropOpen.value = false
+}
+
+const avatarPreview = computed(() => photoURL.value ?? undefined)
+
+async function onSave() {
+  if (saving.value) return
+  const trimmedName = displayName.value.trim()
+  if (!trimmedName) {
+    error.value = '이름을 입력해 주세요.'
+    return
+  }
+  saving.value = true
+  error.value = ''
+  try {
+    let nextPhotoURL = props.profile?.photoURL ?? null
+    if (pendingAvatarFile) {
+      avatarUploading.value = true
+      nextPhotoURL = await uploadAvatar(props.uid, pendingAvatarFile)
+      avatarUploading.value = false
+    }
+
+    await updateDoc(boardUserDoc(db, useBoardPathConfig(), props.uid), {
+      displayName: trimmedName,
+      bio: bio.value.trim() || null,
+      photoURL: nextPhotoURL,
+      updatedAt: serverTimestamp(),
+    })
+
+    pendingAvatarFile = null
+    open.value = false
+    emit('saved')
+  }
+  catch (cause) {
+    error.value = cause instanceof Error ? cause.message : '프로필을 저장하지 못했습니다.'
+  }
+  finally {
+    saving.value = false
+    avatarUploading.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    title="프로필 수정"
+    :ui="{ content: 'sm:max-w-md' }"
+  >
+    <template #body>
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-3">
+          <UAvatar
+            :src="avatarPreview"
+            :alt="displayName || '익명'"
+            size="xl"
+          />
+          <UButton
+            label="사진 변경"
+            icon="i-lucide-camera"
+            color="neutral"
+            variant="outline"
+            size="sm"
+            @click="avatarInput?.click()"
+          />
+          <input
+            ref="avatarInput"
+            type="file"
+            accept="image/*"
+            class="hidden"
+            @change="onPickAvatar"
+          >
+        </div>
+
+        <UFormField label="이름">
+          <UInput
+            v-model="displayName"
+            placeholder="이름"
+            :maxlength="40"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField label="자기소개">
+          <UTextarea
+            v-model="bio"
+            :rows="3"
+            :maxlength="200"
+            placeholder="나를 소개해 보세요"
+            class="w-full"
+          />
+        </UFormField>
+
+        <p
+          v-if="error"
+          class="text-sm text-error"
+        >
+          {{ error }}
+        </p>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton
+          color="neutral"
+          variant="ghost"
+          :disabled="saving"
+          @click="open = false"
+        >
+          취소
+        </UButton>
+        <UButton
+          :loading="saving"
+          @click="onSave"
+        >
+          저장
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+
+  <MemiBoardAvatarCropModal
+    v-model:open="cropOpen"
+    :src="cropSrc"
+    :output-size="256"
+    :loading="avatarUploading"
+    @confirm="onCropConfirm"
+  />
+</template>

package/dist/runtime/components/Settings.vue

@@ -54,7 +54,7 @@ const { users } = useMemiBoardUsers({ enabled: canManageStaffAssignment })
 // 이 카테고리에 글/댓글을 쓰려면 스태프 역할이 필요할 때만 "허용 스태프" 지정이 의미가 있다.
 const staffOptions = computed(() => users.value
   .filter(item => item.role === 'staff')
-  .map(item => ({ label: item.displayName || item.email || item.id, value: item.id })))
+  .map(item => ({ label: item.displayName || item.id, value: item.id })))
 function needsStaffPicker(category: BoardCategory) {
   return (category.writeRole === 'staff' || category.commentWriteRole === 'staff')
     && canManageStaffAssignment.value