memi-board 0.44.0 → 0.45.0

package/dist/runtime/components/MiniPosts.vue

@@ -2,11 +2,11 @@
 import { computed, ref, resolveComponent } from 'vue'
 import type { BoardListView, PostModel } from 'memi-board/runtime'
 import {
-  formatRelativeDate,
   miniPostImage,
   miniPostLink,
   miniPostTitle,
   miniViewGroup,
+  useMemiBoardI18n,
   useMemiBoardSettings,
   videoListCoverUrl,
 } from 'memi-board/runtime'
@@ -21,6 +21,7 @@ const props = defineProps<{
 const NuxtLink = resolveComponent('NuxtLink')
 const now = ref(Date.now())
 const { categoryLabel } = useMemiBoardSettings()
+const { formatRelativeDate, locale } = useMemiBoardI18n()
 const group = computed(() => miniViewGroup(props.view))
 
 function cover(post: PostModel) {
@@ -51,7 +52,7 @@ function postTo(post: PostModel) {
       <img
         v-if="cover(post)"
         :src="cover(post)"
-        :alt="miniPostTitle(post)"
+        :alt="miniPostTitle(post, locale)"
         class="size-full object-cover transition duration-300 group-hover:scale-105"
       >
       <div v-else class="flex size-full items-center justify-center text-muted">
@@ -85,7 +86,7 @@ function postTo(post: PostModel) {
         <div class="min-w-0 flex-1">
           <div class="flex min-w-0 items-start gap-1.5">
             <p class="min-w-0 flex-1 truncate text-sm font-medium text-inherit">
-              {{ miniPostTitle(post) }}
+              {{ miniPostTitle(post, locale) }}
             </p>
             <span class="mt-0.5 inline-flex shrink-0 items-center gap-0.5 text-[11px] tabular-nums text-muted">
               <UIcon name="i-lucide-message-square" class="size-3" />
@@ -105,7 +106,7 @@ function postTo(post: PostModel) {
         >
           <img
             :src="miniPostImage(post)!"
-            :alt="miniPostTitle(post)"
+            :alt="miniPostTitle(post, locale)"
             class="size-full object-cover"
           >
         </div>

package/dist/runtime/components/Profile.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { BOARD_USER_ROLES, formatRelativeDate, useMemiBoardAuth, useMemiBoardUserProfile } from 'memi-board/runtime'
+import { useMemiBoardAuth, useMemiBoardI18n, useMemiBoardUserProfile } from 'memi-board/runtime'
 import MemiBoardProfileEditModal from './ProfileEditModal.vue'
 
 const props = defineProps<{
@@ -10,7 +10,12 @@ const props = defineProps<{
 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 { t, formatRelativeDate } = useMemiBoardI18n()
+
+const roleLabel = computed(() => {
+  const role = profile.value?.role
+  return role === 'admin' || role === 'staff' || role === 'user' ? t(`common.role.${role}`) : undefined
+})
 
 const { user } = useMemiBoardAuth()
 const isOwnProfile = computed(() => !!user.value?.uid && user.value.uid === props.uid)
@@ -33,7 +38,7 @@ const editOpen = ref(false)
     v-else-if="!profile"
     class="text-sm text-muted"
   >
-    사용자를 찾을 수 없습니다.
+    {{ t('profile.notFound') }}
   </p>
 
   <div
@@ -43,14 +48,14 @@ const editOpen = ref(false)
     <div class="flex items-center gap-3">
       <UAvatar
         :src="profile.photoURL ?? undefined"
-        :alt="profile.displayName ?? '익명'"
+        :alt="profile.displayName ?? t('common.label.anonymous')"
         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 ?? '이름 없음' }}
+            {{ profile.displayName ?? t('profile.noName') }}
           </h2>
           <UBadge
             v-if="roleLabel && profile.role !== 'user'"
@@ -61,12 +66,12 @@ const editOpen = ref(false)
           />
         </div>
         <p class="text-xs text-muted">
-          가입 {{ formatRelativeDate(profile.joinedAt, now) }} · 최근 방문 {{ formatRelativeDate(profile.lastVisitAt, now) }}
+          {{ t('profile.joined', { time: formatRelativeDate(profile.joinedAt, now) }) }} · {{ t('profile.lastVisit', { time: formatRelativeDate(profile.lastVisitAt, now) }) }}
         </p>
       </div>
       <UButton
         v-if="isOwnProfile"
-        label="수정"
+        :label="t('common.action.edit')"
         icon="i-lucide-pencil"
         color="neutral"
         variant="outline"

package/dist/runtime/components/ProfileEditModal.vue

@@ -2,7 +2,7 @@
 import { computed, ref, watch } from 'vue'
 import { query, serverTimestamp, where, writeBatch, getDocs } from 'firebase/firestore'
 import { useFirestore } from 'vuefire'
-import { boardUserDoc, commentsCol, postsCol, useBoardPathConfig } from 'memi-board/runtime'
+import { boardUserDoc, commentsCol, postsCol, useBoardPathConfig, useMemiBoardI18n } from 'memi-board/runtime'
 import type { BoardUserModel } from 'memi-board/runtime'
 import { useMemiBoardStorage } from 'memi-board/storage'
 import MemiBoardAvatarCropModal from './AvatarCropModal.vue'
@@ -17,6 +17,7 @@ const props = defineProps<{
 const emit = defineEmits<{ saved: [] }>()
 
 const db = useFirestore()
+const { t } = useMemiBoardI18n()
 
 const displayName = ref('')
 const bio = ref('')
@@ -47,7 +48,7 @@ function onPickAvatar(event: Event) {
   input.value = ''
   if (!file) return
   if (!file.type.startsWith('image/')) {
-    error.value = '이미지 파일만 선택할 수 있습니다.'
+    error.value = t('profileEditModal.imageOnly')
     return
   }
   if (cropSrc.value.startsWith('blob:')) URL.revokeObjectURL(cropSrc.value)
@@ -119,7 +120,7 @@ async function onSave() {
   if (saving.value) return
   const trimmedName = displayName.value.trim()
   if (!trimmedName) {
-    error.value = '이름을 입력해 주세요.'
+    error.value = t('profileEditModal.nameRequired')
     return
   }
   saving.value = true
@@ -139,7 +140,7 @@ async function onSave() {
     emit('saved')
   }
   catch (cause) {
-    error.value = cause instanceof Error ? cause.message : '프로필을 저장하지 못했습니다.'
+    error.value = cause instanceof Error ? cause.message : t('profileEditModal.saveFailed')
   }
   finally {
     saving.value = false
@@ -151,7 +152,7 @@ async function onSave() {
 <template>
   <UModal
     v-model:open="open"
-    title="프로필 수정"
+    :title="t('profileEditModal.title')"
     :ui="{ content: 'sm:max-w-md' }"
   >
     <template #body>
@@ -159,11 +160,11 @@ async function onSave() {
         <div class="flex items-center gap-3">
           <UAvatar
             :src="avatarPreview"
-            :alt="displayName || '익명'"
+            :alt="displayName || t('common.label.anonymous')"
             size="xl"
           />
           <UButton
-            label="사진 변경"
+            :label="t('profileEditModal.changePhoto')"
             icon="i-lucide-camera"
             color="neutral"
             variant="outline"
@@ -179,21 +180,21 @@ async function onSave() {
           >
         </div>
 
-        <UFormField label="이름">
+        <UFormField :label="t('profileEditModal.name')">
           <UInput
             v-model="displayName"
-            placeholder="이름"
+            :placeholder="t('profileEditModal.name')"
             :maxlength="40"
             class="w-full"
           />
         </UFormField>
 
-        <UFormField label="자기소개">
+        <UFormField :label="t('profileEditModal.bio')">
           <UTextarea
             v-model="bio"
             :rows="3"
             :maxlength="200"
-            placeholder="나를 소개해 보세요"
+            :placeholder="t('profileEditModal.bioPlaceholder')"
             class="w-full"
           />
         </UFormField>
@@ -215,13 +216,13 @@ async function onSave() {
           :disabled="saving"
           @click="open = false"
         >
-          취소
+          {{ t('common.action.cancel') }}
         </UButton>
         <UButton
           :loading="saving"
           @click="onSave"
         >
-          저장
+          {{ t('common.action.save') }}
         </UButton>
       </div>
     </template>

package/dist/runtime/components/ReportButton.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { imeSafeSubmitClick, imeSafeSubmitPointerDown } from 'memi-board/runtime'
 import { computed, ref } from 'vue'
 import {
   REPORT_DETAIL_MAX_LENGTH,
   REPORT_REASONS,
+  reportReasonLabel,
   useMemiBoardAuth,
+  useMemiBoardI18n,
   useMemiBoardReports,
 } from 'memi-board/runtime'
 import type { BoardReportReason } from 'memi-board/runtime'
@@ -17,6 +20,10 @@ const props = defineProps<{
 }>()
 
 const { isSignedIn, user } = useMemiBoardAuth()
+const { t, locale, formatNumber } = useMemiBoardI18n()
+const reasonItems = computed(() =>
+  REPORT_REASONS.map(item => ({ ...item, label: reportReasonLabel(item.value, locale.value) })),
+)
 const { hasReported, pending, submitReport } = useMemiBoardReports(props.boardId, props.postId)
 
 const open = ref(false)
@@ -38,6 +45,7 @@ function openModal() {
 }
 
 async function submit() {
+  if (pending.value) return
   error.value = ''
   try {
     await submitReport({
@@ -50,7 +58,7 @@ async function submit() {
     done.value = true
   }
   catch (cause) {
-    error.value = cause instanceof Error ? cause.message : '신고하지 못했습니다.'
+    error.value = cause instanceof Error ? cause.message : t('reportButton.failed')
   }
 }
 </script>
@@ -62,14 +70,14 @@ async function submit() {
       size="sm"
       variant="ghost"
       :color="hasReported ? 'warning' : 'neutral'"
-      :label="hasReported ? '신고함' : '신고'"
+      :label="hasReported ? t('reportButton.reported') : t('common.action.report')"
       :disabled="hasReported"
       @click="openModal"
     />
-    <UModal v-model:open="open" title="게시물 신고">
+    <UModal v-model:open="open" :title="t('reportButton.title')">
       <template #body>
         <div v-if="done" class="py-4 text-sm text-muted">
-          신고를 접수했습니다. 스태프가 내용을 확인합니다.
+          {{ t('reportButton.done') }}
         </div>
         <form
           v-else
@@ -78,18 +86,18 @@ async function submit() {
         >
           <URadioGroup
             v-model="reason"
-            :items="REPORT_REASONS"
+            :items="reasonItems"
             value-key="value"
-            legend="사유"
+            :legend="t('reportButton.reason')"
           />
           <UTextarea
             v-model="detail"
             :rows="3"
             :maxlength="REPORT_DETAIL_MAX_LENGTH"
-            placeholder="자세한 내용 (선택)"
+            :placeholder="t('reportButton.detailPlaceholder')"
           />
           <p class="text-right text-xs text-dimmed">
-            {{ detail.length.toLocaleString() }} / {{ REPORT_DETAIL_MAX_LENGTH.toLocaleString() }}
+            {{ formatNumber(detail.length) }} / {{ formatNumber(REPORT_DETAIL_MAX_LENGTH) }}
           </p>
           <p v-if="error" class="text-xs text-error">
             {{ error }}
@@ -99,14 +107,16 @@ async function submit() {
               type="button"
               color="neutral"
               variant="ghost"
-              label="취소"
+              :label="t('common.action.cancel')"
               :disabled="pending"
               @click="open = false"
             />
             <UButton
               type="submit"
+              @pointerdown="imeSafeSubmitPointerDown"
+              @click="imeSafeSubmitClick"
               color="warning"
-              label="신고하기"
+              :label="t('reportButton.submit')"
               :loading="pending"
             />
           </div>

package/dist/runtime/components/ReportList.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref, resolveComponent } from 'vue'
 import {
-  formatRelativeDate,
   reportReasonLabel,
   useMemiBoardAuth,
+  useMemiBoardI18n,
   useMemiBoardReportQueue,
 } from 'memi-board/runtime'
 import type { BoardReportModel } from 'memi-board/runtime'
@@ -14,6 +14,7 @@ const props = defineProps<{
 }>()
 
 const NuxtLink = resolveComponent('NuxtLink')
+const { t, locale, formatRelativeDate } = useMemiBoardI18n()
 const { canManageContent } = useMemiBoardAuth()
 const { reports, pending, loadingMore, hasMore, loadError, loadMore, dismissReport, actionReport } = useMemiBoardReportQueue({
   boardId: () => props.boardId || '',
@@ -44,7 +45,7 @@ async function handle(report: BoardReportModel, action: 'dismiss' | 'action') {
       v-if="!canManageContent"
       class="py-8 text-center text-sm text-muted"
     >
-      스태프만 신고 목록을 볼 수 있습니다.
+      {{ t('reportList.staffOnly') }}
     </p>
     <template v-else-if="pending">
       <USkeleton v-for="i in 4" :key="i" class="h-16 w-full" />
@@ -53,13 +54,13 @@ async function handle(report: BoardReportModel, action: 'dismiss' | 'action') {
       v-else-if="loadError"
       class="py-8 text-center text-sm text-error"
     >
-      목록을 불러오지 못했습니다: {{ loadError }}
+      {{ t('reportList.loadFailed', { error: String(loadError) }) }}
     </p>
     <p
       v-else-if="!reports.length"
       class="py-8 text-center text-sm text-muted"
     >
-      대기 중인 신고가 없습니다.
+      {{ t('reportList.empty') }}
     </p>
     <ul
       v-else
@@ -77,11 +78,11 @@ async function handle(report: BoardReportModel, action: 'dismiss' | 'action') {
             class="truncate text-sm font-medium text-highlighted"
             :class="postLink(report) ? 'hover:underline' : ''"
           >
-            {{ report.postTitle || '제목 없는 글' }}
+            {{ report.postTitle || t('reportList.untitled') }}
           </component>
           <p class="mt-0.5 text-xs text-muted">
-            {{ reportReasonLabel(report.reason) }}
-            <span v-if="report.authorName"> · 작성 {{ report.authorName }}</span>
+            {{ reportReasonLabel(report.reason, locale.value) }}
+            <span v-if="report.authorName"> · {{ t('reportList.author', { name: report.authorName }) }}</span>
             · {{ formatRelativeDate(report.createdAt, now) }}
           </p>
           <p
@@ -96,7 +97,7 @@ async function handle(report: BoardReportModel, action: 'dismiss' | 'action') {
             size="xs"
             color="neutral"
             variant="soft"
-            label="기각"
+            :label="t('reportList.dismiss')"
             :loading="actingId === report.id"
             @click="handle(report, 'dismiss')"
           />
@@ -104,7 +105,7 @@ async function handle(report: BoardReportModel, action: 'dismiss' | 'action') {
             size="xs"
             color="warning"
             variant="soft"
-            label="확인"
+            :label="t('reportList.confirm')"
             :loading="actingId === report.id"
             @click="handle(report, 'action')"
           />
@@ -115,7 +116,7 @@ async function handle(report: BoardReportModel, action: 'dismiss' | 'action') {
       v-if="canManageContent && !pending && hasMore"
       variant="outline"
       color="neutral"
-      label="더 보기"
+      :label="t('common.action.more')"
       block
       :loading="loadingMore"
       @click="loadMore"

package/dist/runtime/components/Section.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { BoardSection, CommentModel, PostModel } from 'memi-board/runtime'
-import { miniMoreLink, sectionColClass, sectionMinHeight } from 'memi-board/runtime'
+import { miniMoreLink, sectionColClass, sectionMinHeight, useMemiBoardI18n } from 'memi-board/runtime'
 import MemiBoardMiniComments from './MiniComments.vue'
 import MemiBoardMiniList from './MiniList.vue'
 import MemiBoardMiniPost from './MiniPost.vue'
@@ -13,6 +13,7 @@ const props = defineProps<{
   getMoreLink?: (section: BoardSection) => string | undefined
 }>()
 
+const { t } = useMemiBoardI18n()
 const moreTo = computed(() => props.getMoreLink?.(props.section) ?? miniMoreLink(props.section))
 </script>
 
@@ -40,7 +41,7 @@ const moreTo = computed(() => props.getMoreLink?.(props.section) ?? miniMoreLink
         size="xs"
         trailing-icon="i-lucide-chevron-right"
         class="shrink-0 px-0"
-        label="더 보기"
+        :label="t('common.action.more')"
       />
     </header>
     <MemiBoardMiniList