memi-board 0.44.1 → 0.45.0

package/dist/runtime/components/Footer.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import { useMemiBoardI18n } from 'memi-board/runtime'
 
-withDefaults(defineProps<{ introduction?: string }>(), {
-  introduction: 'Nuxt 4와 Vue 3, TypeScript를 바탕으로 만들고 Nuxt UI와 Firebase로 글과 댓글을 자연스럽게 이어가는 게시판입니다.',
-})
+const props = defineProps<{ introduction?: string }>()
+const { t } = useMemiBoardI18n()
+const introductionText = computed(() => props.introduction ?? t('footer.introduction'))
 
 const open = ref(false)
 const tab = ref<'about' | 'history'>('about')
-const stacks = [
-  { title: '화면과 경험', icon: 'i-lucide-palette', text: 'Nuxt 4 · Vue 3 · TypeScript · Nuxt UI · Tailwind CSS' },
-  { title: '데이터와 로그인', icon: 'i-lucide-database', text: 'Firebase Firestore · Auth · Storage · nuxt-vuefire' },
-  { title: '글쓰기와 편의', icon: 'i-lucide-pencil-line', text: 'Tiptap · Lucide Icons · dayjs' },
-]
+const stacks = computed(() => [
+  { title: t('footer.stack.ui'), icon: 'i-lucide-palette', text: 'Nuxt 4 · Vue 3 · TypeScript · Nuxt UI · Tailwind CSS' },
+  { title: t('footer.stack.data'), icon: 'i-lucide-database', text: 'Firebase Firestore · Auth · Storage · nuxt-vuefire' },
+  { title: t('footer.stack.writing'), icon: 'i-lucide-pencil-line', text: 'Tiptap · Lucide Icons · Intl API' },
+])
 </script>
 
 <template>
@@ -22,18 +23,18 @@ const stacks = [
       </button>
     </footer>
 
-    <UModal v-model:open="open" title="게시판 정보" :ui="{ content: 'sm:max-w-2xl' }">
+    <UModal v-model:open="open" :title="t('footer.info.title')" :ui="{ content: 'sm:max-w-2xl' }">
     <template #body>
       <div class="flex flex-col gap-4">
         <div class="flex gap-1 rounded-lg bg-muted p-1">
-          <UButton size="sm" class="flex-1 justify-center" :color="tab === 'about' ? 'primary' : 'neutral'" :variant="tab === 'about' ? 'solid' : 'ghost'" @click="tab = 'about'">이 게시판은</UButton>
-          <UButton size="sm" class="flex-1 justify-center" :color="tab === 'history' ? 'primary' : 'neutral'" :variant="tab === 'history' ? 'solid' : 'ghost'" @click="tab = 'history'">버전 히스토리</UButton>
+          <UButton size="sm" class="flex-1 justify-center" :color="tab === 'about' ? 'primary' : 'neutral'" :variant="tab === 'about' ? 'solid' : 'ghost'" @click="tab = 'about'">{{ t('footer.info.about') }}</UButton>
+          <UButton size="sm" class="flex-1 justify-center" :color="tab === 'history' ? 'primary' : 'neutral'" :variant="tab === 'history' ? 'solid' : 'ghost'" @click="tab = 'history'">{{ t('footer.info.history') }}</UButton>
         </div>
 
         <div v-if="tab === 'about'" class="max-h-[min(60vh,36rem)] space-y-4 overflow-y-auto px-1">
           <div class="flex items-start gap-3 px-1">
             <div class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary-500/10"><UIcon name="i-lucide-code-2" class="size-5 text-primary-500" /></div>
-            <div><h3 class="font-bold text-highlighted">이 게시판은</h3><p class="mt-1 whitespace-pre-line text-sm leading-relaxed text-muted">{{ introduction }}</p></div>
+            <div><h3 class="font-bold text-highlighted">{{ t('footer.info.about') }}</h3><p class="mt-1 whitespace-pre-line text-sm leading-relaxed text-muted">{{ introductionText }}</p></div>
           </div>
           <section v-for="item in stacks" :key="item.title" class="rounded-2xl border border-default bg-default/70 p-4">
             <div class="flex items-center gap-3"><UIcon :name="item.icon" class="size-5 text-primary" /><div><h4 class="text-sm font-bold text-highlighted">{{ item.title }}</h4><p class="mt-1 text-sm text-muted">{{ item.text }}</p></div></div>

package/dist/runtime/components/List.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useMemiBoardPostList } from 'memi-board/runtime'
-import { useMemiBoardSettings } from 'memi-board/runtime'
+import { useMemiBoardI18n, useMemiBoardSettings } from 'memi-board/runtime'
 import type { BoardListView, PostModel } from 'memi-board/runtime'
 import MemiBoardListDefault from './ListDefault.vue'
 import MemiBoardListDense from './ListDense.vue'
@@ -55,7 +55,6 @@ const props = withDefaults(defineProps<{
   authorCommentsTo?: (authorUid: string) => string | undefined
 }>(), {
   pageSize: 10,
-  introduction: '이 게시판은 Nuxt 4와 Vue 3, TypeScript를 바탕으로 만들었어요. Nuxt UI와 Tailwind CSS로 편안한 화면을 구성하고, Firebase Firestore·Auth·Storage와 nuxt-vuefire로 글과 댓글을 자연스럽게 이어갑니다.',
   canManageSettings: true,
   canWrite: true,
 })
@@ -64,6 +63,9 @@ const emit = defineEmits<{ select: [post: PostModel], 'update:view': [view: Boar
 
 const { boardDescription, getBoard } = useMemiBoardSettings()
 const resolvedBoardId = computed(() => props.boardId || props.category || '')
+// 보드 설정 언어 → 호스트 언어 순. 자식 컴포넌트도 이 언어를 따른다.
+const { t, dir } = useMemiBoardI18n({ boardLocale: () => getBoard(resolvedBoardId.value)?.locale })
+const introductionText = computed(() => props.introduction ?? t('list.introduction'))
 const listDescription = computed(() => {
   const explicit = props.description?.trim()
   if (explicit) return explicit
@@ -134,43 +136,43 @@ const infoOpen = ref(false)
 const infoTab = ref<'about' | 'history'>('about')
 const now = ref(Date.now())
 let clock: ReturnType<typeof setInterval> | undefined
-const boardStacks = [
+const boardStacks = computed(() => [
   {
-    category: '프레임워크 & 언어',
+    category: t('list.stack.framework'),
     icon: 'i-lucide-layers',
     color: 'text-blue-500',
     panelClass: 'border-blue-100 bg-blue-50 dark:border-blue-900/50 dark:bg-blue-950/30',
     items: [
-      { name: 'Nuxt 4', desc: 'Vue 기반 SSR 프레임워크', url: 'https://nuxt.com', icon: 'i-simple-icons-nuxtdotjs', color: '#00DC82' },
-      { name: 'Vue 3', desc: 'Composition API · script setup', url: 'https://vuejs.org', icon: 'i-simple-icons-vuedotjs', color: '#4FC08D' },
-      { name: 'TypeScript', desc: '안전한 데이터와 컴포넌트 타입', url: 'https://www.typescriptlang.org', icon: 'i-simple-icons-typescript', color: '#3178C6' },
+      { name: 'Nuxt 4', desc: t('list.tech.nuxt'), url: 'https://nuxt.com', icon: 'i-simple-icons-nuxtdotjs', color: '#00DC82' },
+      { name: 'Vue 3', desc: t('list.tech.vue'), url: 'https://vuejs.org', icon: 'i-simple-icons-vuedotjs', color: '#4FC08D' },
+      { name: 'TypeScript', desc: t('list.tech.typescript'), url: 'https://www.typescriptlang.org', icon: 'i-simple-icons-typescript', color: '#3178C6' },
     ],
   },
   {
-    category: 'UI & 스타일',
+    category: t('list.stack.ui'),
     icon: 'i-lucide-palette',
     color: 'text-purple-500',
     panelClass: 'border-purple-100 bg-purple-50 dark:border-purple-900/50 dark:bg-purple-950/30',
     items: [
-      { name: 'Nuxt UI v4', desc: '게시판·폼·모달 UI', url: 'https://ui.nuxt.com', icon: 'i-simple-icons-nuxtdotjs', color: '#00DC82' },
-      { name: 'Tailwind CSS v4', desc: '반응형 · 라이트/다크 스타일', url: 'https://tailwindcss.com', icon: 'i-simple-icons-tailwindcss', color: '#06B6D4' },
-      { name: 'Lucide Icons', desc: '가볍고 일관된 아이콘', url: 'https://lucide.dev', icon: 'i-lucide-box', color: '#F97316' },
-      { name: 'dayjs', desc: '읽기 편한 날짜와 상대 시각', url: 'https://day.js.org', icon: 'i-lucide-clock', color: '#FF5F4C' },
+      { name: 'Nuxt UI v4', desc: t('list.tech.nuxtUi'), url: 'https://ui.nuxt.com', icon: 'i-simple-icons-nuxtdotjs', color: '#00DC82' },
+      { name: 'Tailwind CSS v4', desc: t('list.tech.tailwind'), url: 'https://tailwindcss.com', icon: 'i-simple-icons-tailwindcss', color: '#06B6D4' },
+      { name: 'Lucide Icons', desc: t('list.tech.lucide'), url: 'https://lucide.dev', icon: 'i-lucide-box', color: '#F97316' },
+      { name: 'Intl API', desc: t('list.tech.dayjs'), url: 'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl', icon: 'i-lucide-clock', color: '#FF5F4C' },
     ],
   },
   {
-    category: '백엔드 & 데이터',
+    category: t('list.stack.backend'),
     icon: 'i-lucide-database',
     color: 'text-orange-500',
     panelClass: 'border-orange-100 bg-orange-50 dark:border-orange-900/50 dark:bg-orange-950/30',
     items: [
-      { name: 'Firebase Firestore', desc: '게시글과 댓글을 위한 실시간 DB', url: 'https://firebase.google.com', icon: 'i-simple-icons-firebase', color: '#FFCA28' },
-      { name: 'Firebase Auth', desc: '안전한 사용자 로그인과 권한', url: 'https://firebase.google.com', icon: 'i-simple-icons-firebase', color: '#FFCA28' },
-      { name: 'Firebase Storage', desc: '이미지와 첨부파일 보관', url: 'https://firebase.google.com', icon: 'i-simple-icons-firebase', color: '#FFCA28' },
-      { name: 'nuxt-vuefire', desc: 'Nuxt와 Firebase 실시간 연결', url: 'https://vuefire.vuejs.org', icon: 'i-simple-icons-firebase', color: '#FFCA28' },
+      { name: 'Firebase Firestore', desc: t('list.tech.firestore'), url: 'https://firebase.google.com', icon: 'i-simple-icons-firebase', color: '#FFCA28' },
+      { name: 'Firebase Auth', desc: t('list.tech.auth'), url: 'https://firebase.google.com', icon: 'i-simple-icons-firebase', color: '#FFCA28' },
+      { name: 'Firebase Storage', desc: t('list.tech.storage'), url: 'https://firebase.google.com', icon: 'i-simple-icons-firebase', color: '#FFCA28' },
+      { name: 'nuxt-vuefire', desc: t('list.tech.vuefire'), url: 'https://vuefire.vuejs.org', icon: 'i-simple-icons-firebase', color: '#FFCA28' },
     ],
   },
-]
+])
 
 onMounted(() => {
   clock = setInterval(() => { now.value = Date.now() }, 60_000)
@@ -209,7 +211,7 @@ function postTo(post: PostModel): string | undefined {
 </script>
 
 <template>
-  <div class="flex flex-col gap-2">
+  <div class="flex flex-col gap-2" :dir="dir">
     <div v-if="hasHeader" class="flex items-center justify-between gap-4">
       <UTooltip
         v-if="title && listDescription"
@@ -231,7 +233,7 @@ function postTo(post: PostModel): string | undefined {
         <UButton
           v-if="settingsTo && canManageSettings"
           :to="settingsTo"
-          label="설정"
+          :label="t('list.settings')"
           icon="i-lucide-settings"
           color="neutral"
           variant="outline"
@@ -243,7 +245,7 @@ function postTo(post: PostModel): string | undefined {
         <UButton
           v-if="writeTo && canWrite"
           :to="writeTo"
-          label="글쓰기"
+          :label="t('common.action.write')"
           icon="i-lucide-pencil"
           size="sm"
         />
@@ -267,14 +269,14 @@ function postTo(post: PostModel): string | undefined {
       v-else-if="loadError"
       class="text-sm text-error text-center py-8"
     >
-      목록을 불러오지 못했습니다: {{ loadError }}
+      {{ t('list.loadFailed', { error: String(loadError) }) }}
     </p>
 
     <p
       v-else-if="!posts.length"
       class="text-sm text-muted text-center py-8"
     >
-      아직 게시글이 없습니다.
+      {{ t('list.empty') }}
     </p>
 
     <component
@@ -298,7 +300,7 @@ function postTo(post: PostModel): string | undefined {
       <UButton
         variant="outline"
         color="neutral"
-        label="더 보기"
+        :label="t('common.action.more')"
         block
         class="w-full"
         :loading="morePending"
@@ -317,7 +319,7 @@ function postTo(post: PostModel): string | undefined {
 
     <UModal
       v-model:open="infoOpen"
-      title="게시판 정보"
+      :title="t('list.info.title')"
       :ui="{ content: 'sm:max-w-2xl' }"
     >
       <template #body>
@@ -330,7 +332,7 @@ function postTo(post: PostModel): string | undefined {
               :variant="infoTab === 'about' ? 'solid' : 'ghost'"
               @click="infoTab = 'about'"
             >
-              이 게시판은
+              {{ t('list.info.about') }}
             </UButton>
             <UButton
               size="sm"
@@ -339,7 +341,7 @@ function postTo(post: PostModel): string | undefined {
               :variant="infoTab === 'history' ? 'solid' : 'ghost'"
               @click="infoTab = 'history'"
             >
-              버전 히스토리
+              {{ t('list.info.history') }}
             </UButton>
           </div>
 
@@ -356,10 +358,10 @@ function postTo(post: PostModel): string | undefined {
               </div>
               <div>
                 <h3 class="font-bold text-highlighted">
-                  이 게시판은
+                  {{ t('list.info.about') }}
                 </h3>
                 <p class="mt-1 whitespace-pre-line text-sm leading-relaxed text-muted">
-                  {{ introduction }}
+                  {{ introductionText }}
                 </p>
               </div>
             </div>

package/dist/runtime/components/ListDefault.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { resolveComponent } from 'vue'
 import type { PostModel } from 'memi-board/runtime'
-import { formatRelativeDate, formatTimestampDetails, useMemiBoardSettings } from 'memi-board/runtime'
+import { useMemiBoardI18n, useMemiBoardSettings } from 'memi-board/runtime'
 import MemiBoardAuthorMenu from './AuthorMenu.vue'
 
 withDefaults(defineProps<{
@@ -15,6 +15,7 @@ withDefaults(defineProps<{
 }>(), { showCategory: true })
 const emit = defineEmits<{ select: [post: PostModel] }>()
 const { categoryLabel } = useMemiBoardSettings()
+const { t, formatRelativeDate, formatTimestampDetails } = useMemiBoardI18n()
 const NuxtLink = resolveComponent('NuxtLink')
 
 function image(post: PostModel): string | undefined {
@@ -50,14 +51,14 @@ function image(post: PostModel): string | undefined {
               <div class="flex min-w-0 flex-1 items-start gap-1.5">
                 <UBadge
                   v-if="post.isPublished === false"
-                  label="초안"
+                  :label="t('common.label.draft')"
                   color="warning"
                   variant="subtle"
                   size="sm"
                   class="mt-0.5 shrink-0"
                 />
                 <h3 class="min-w-0 line-clamp-2 break-words text-sm font-medium leading-snug text-inherit sm:text-base">
-                  {{ post.title?.trim() || post.summary || '사진' }}
+                  {{ post.title?.trim() || post.summary || t('list.photo') }}
                 </h3>
                 <span
                   v-if="(post.commentCount ?? 0) > 0"

package/dist/runtime/components/ListDense.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { resolveComponent } from 'vue'
 import type { PostModel } from 'memi-board/runtime'
-import { formatRelativeDate, formatTimestampDetails, useMemiBoardSettings } from 'memi-board/runtime'
+import { useMemiBoardI18n, useMemiBoardSettings } from 'memi-board/runtime'
 import MemiBoardAuthorMenu from './AuthorMenu.vue'
 
 withDefaults(defineProps<{
@@ -15,6 +15,7 @@ withDefaults(defineProps<{
 }>(), { showCategory: true })
 const emit = defineEmits<{ select: [post: PostModel] }>()
 const { categoryLabel } = useMemiBoardSettings()
+const { t, formatRelativeDate, formatTimestampDetails } = useMemiBoardI18n()
 const NuxtLink = resolveComponent('NuxtLink')
 
 function thumb(post: PostModel): string | undefined {
@@ -36,14 +37,14 @@ function thumb(post: PostModel): string | undefined {
         >
           <UBadge
             v-if="post.isPublished === false"
-            label="초안"
+            :label="t('common.label.draft')"
             color="warning"
             variant="subtle"
             size="sm"
             class="shrink-0"
           />
           <h3 class="min-w-0 truncate text-sm font-medium leading-snug text-inherit transition-colors group-hover:text-primary">
-            {{ post.title?.trim() || post.summary || '사진' }}
+            {{ post.title?.trim() || post.summary || t('list.photo') }}
           </h3>
           <span
             v-if="(post.commentCount ?? 0) > 0"
@@ -92,7 +93,7 @@ function thumb(post: PostModel): string | undefined {
           <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">
-              추천 {{ post.likeCount }}
+              {{ t('list.likeCount', { count: post.likeCount }) }}
             </span>
           </template>
           <template v-if="post.category && showCategory">
@@ -112,7 +113,7 @@ function thumb(post: PostModel): string | undefined {
       >
         <img
           :src="thumb(post)"
-          :alt="post.title?.trim() || post.summary || '사진'"
+          :alt="post.title?.trim() || post.summary || t('list.photo')"
           class="size-full object-cover"
         >
       </component>

package/dist/runtime/components/ListImage.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { resolveComponent } from 'vue'
 import type { PostModel } from 'memi-board/runtime'
+import { useMemiBoardI18n } from 'memi-board/runtime'
 
 defineProps<{
   posts: PostModel[]
@@ -9,6 +10,7 @@ defineProps<{
 }>()
 const emit = defineEmits<{ select: [post: PostModel] }>()
 const NuxtLink = resolveComponent('NuxtLink')
+const { t } = useMemiBoardI18n()
 
 function image(post: PostModel): string | undefined {
   return post.previewImage || post.attachments?.find(item => item.type.startsWith('image/'))?.url
@@ -28,7 +30,7 @@ function image(post: PostModel): string | undefined {
       <img
         v-if="image(post)"
         :src="image(post)"
-        :alt="post.title?.trim() || post.summary || '이미지'"
+        :alt="post.title?.trim() || post.summary || t('common.label.image')"
         class="size-full object-cover transition duration-300 group-hover:scale-105"
       >
       <div
@@ -50,7 +52,7 @@ function image(post: PostModel): string | undefined {
       >
         <UBadge
           v-if="post.isPublished === false"
-          label="초안"
+          :label="t('common.label.draft')"
           color="warning"
           variant="subtle"
           size="sm"

package/dist/runtime/components/ListVideo.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { resolveComponent } from 'vue'
 import type { PostModel } from 'memi-board/runtime'
-import { formatRelativeDate, formatTimestampDetails, videoListCoverUrl } from 'memi-board/runtime'
+import { useMemiBoardI18n, videoListCoverUrl } from 'memi-board/runtime'
 import MemiBoardAuthorMenu from './AuthorMenu.vue'
 
 defineProps<{
@@ -14,6 +14,7 @@ defineProps<{
 }>()
 const emit = defineEmits<{ select: [post: PostModel] }>()
 const NuxtLink = resolveComponent('NuxtLink')
+const { t, formatRelativeDate, formatTimestampDetails } = useMemiBoardI18n()
 
 /** 영상 목록: YouTube URL 이 있으면 썸네일 우선, 그다음 본문/첨부 이미지. */
 function cover(post: PostModel): string | undefined {
@@ -46,7 +47,7 @@ function cover(post: PostModel): string | undefined {
           <div class="flex min-w-0 items-start gap-1.5">
             <UBadge
               v-if="post.isPublished === false"
-              label="초안"
+              :label="t('common.label.draft')"
               color="warning"
               variant="subtle"
               size="sm"

package/dist/runtime/components/ListViewSwitch.vue

@@ -1,17 +1,21 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { BoardListView } from 'memi-board/runtime'
+import { useMemiBoardI18n } from 'memi-board/runtime'
 
 defineProps<{
   modelValue: BoardListView
 }>()
 const emit = defineEmits<{ 'update:modelValue': [value: BoardListView] }>()
 
-const options: Array<{ label: string, value: BoardListView, icon: string }> = [
-  { label: '일반', value: 'default', icon: 'i-lucide-list' },
-  { label: '조밀', value: 'dense', icon: 'i-lucide-rows-3' },
-  { label: '이미지', value: 'image', icon: 'i-lucide-image' },
-  { label: '영상', value: 'video', icon: 'i-lucide-play-circle' },
-]
+const { t } = useMemiBoardI18n()
+
+const options = computed<Array<{ label: string, value: BoardListView, icon: string }>>(() => [
+  { label: t('listViewSwitch.default'), value: 'default', icon: 'i-lucide-list' },
+  { label: t('listViewSwitch.dense'), value: 'dense', icon: 'i-lucide-rows-3' },
+  { label: t('common.label.image'), value: 'image', icon: 'i-lucide-image' },
+  { label: t('listViewSwitch.video'), value: 'video', icon: 'i-lucide-play-circle' },
+])
 </script>
 
 <template>

package/dist/runtime/components/MiniCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, resolveComponent } from 'vue'
 import type { PostModel } from 'memi-board/runtime'
-import { miniPostImage, miniPostLink, miniPostTitle } from 'memi-board/runtime'
+import { miniPostImage, miniPostLink, miniPostTitle, useMemiBoardI18n } from 'memi-board/runtime'
 
 const props = defineProps<{
   post: PostModel
@@ -11,7 +11,8 @@ const props = defineProps<{
 
 const NuxtLink = resolveComponent('NuxtLink')
 const image = computed(() => miniPostImage(props.post))
-const title = computed(() => miniPostTitle(props.post))
+const { locale } = useMemiBoardI18n()
+const title = computed(() => miniPostTitle(props.post, locale.value))
 const to = computed(() => props.getPostLink?.(props.post) ?? miniPostLink(props.post))
 </script>
 

package/dist/runtime/components/MiniComments.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, resolveComponent } from 'vue'
 import type { BoardSection, CommentModel } from 'memi-board/runtime'
-import { formatRelativeDate, miniCommentLink, useMemiBoardCommentFeed } from 'memi-board/runtime'
+import { miniCommentLink, useMemiBoardCommentFeed, useMemiBoardI18n } from 'memi-board/runtime'
 
 const props = defineProps<{
   section: BoardSection
@@ -9,6 +9,7 @@ const props = defineProps<{
 }>()
 
 const NuxtLink = resolveComponent('NuxtLink')
+const { t, formatRelativeDate } = useMemiBoardI18n()
 const now = ref(Date.now())
 const sort = computed(() => props.section.sort === 'likes' ? 'likes' : 'latest')
 const { comments, commentsPending } = useMemiBoardCommentFeed(sort, {
@@ -29,7 +30,7 @@ function commentTo(comment: CommentModel) {
       v-else-if="!comments.length"
       class="flex flex-1 items-center justify-center px-3 py-6 text-sm text-muted"
     >
-      아직 댓글이 없습니다.
+      {{ t('miniComments.empty') }}
     </p>
     <ul
       v-else
@@ -45,7 +46,7 @@ function commentTo(comment: CommentModel) {
             v-if="comment.isBlinded"
             class="truncate text-sm text-muted italic"
           >
-            관리자에 의해 블라인드된 댓글입니다.
+            {{ t('miniComments.blinded') }}
           </p>
           <p
             v-else
@@ -58,7 +59,7 @@ function commentTo(comment: CommentModel) {
             {{ comment.body }}
           </p>
           <p class="flex flex-wrap items-center gap-x-1.5 text-[11px] text-muted">
-            <span>{{ comment.authorName || '익명' }}</span>
+            <span>{{ comment.authorName || t('common.label.anonymous') }}</span>
             <time>{{ formatRelativeDate(comment.createdAt, now) }}</time>
             <span
               v-if="(comment.likeCount ?? 0) > 0"

package/dist/runtime/components/MiniList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { BoardSection, PostModel } from 'memi-board/runtime'
-import { miniBoardView, useMemiBoardMiniLatest, useMemiBoardSettings } from 'memi-board/runtime'
+import { miniBoardView, useMemiBoardI18n, useMemiBoardMiniLatest, useMemiBoardSettings } from 'memi-board/runtime'
 import MemiBoardMiniPosts from './MiniPosts.vue'
 
 const props = defineProps<{
@@ -11,6 +11,7 @@ const props = defineProps<{
 
 const { posts, pending } = useMemiBoardMiniLatest(() => props.section.boardId, () => props.section.count)
 const { getBoard } = useMemiBoardSettings()
+const { t } = useMemiBoardI18n()
 const view = computed(() => miniBoardView(props.section.boardId, getBoard))
 </script>
 
@@ -23,7 +24,7 @@ const view = computed(() => miniBoardView(props.section.boardId, getBoard))
       v-else-if="!posts.length"
       class="flex flex-1 items-center justify-center px-3 py-6 text-sm text-muted"
     >
-      아직 글이 없습니다.
+      {{ t('miniList.empty') }}
     </p>
     <MemiBoardMiniPosts
       v-else

package/dist/runtime/components/MiniPicker.vue

@@ -3,7 +3,7 @@ import { computed, onMounted, ref } from 'vue'
 import { getDocs, limit as fbLimit, orderBy, query, where } from 'firebase/firestore'
 import { useFirestore } from 'vuefire'
 import type { PostModel } from 'memi-board/runtime'
-import { miniPostTitle, postsCol, useBoardPathConfig, useMemiBoardSettings } from 'memi-board/runtime'
+import { miniPostTitle, postsCol, useBoardPathConfig, useMemiBoardI18n, useMemiBoardSettings } from 'memi-board/runtime'
 
 const props = defineProps<{
   modelValue: string[]
@@ -17,6 +17,7 @@ const emit = defineEmits<{
 const db = useFirestore()
 const cfg = () => useBoardPathConfig()
 const { categoryLabel } = useMemiBoardSettings()
+const { t, locale } = useMemiBoardI18n()
 const catalog = ref<PostModel[]>([])
 const pending = ref(true)
 const q = ref('')
@@ -28,7 +29,7 @@ const filtered = computed(() => {
   const rows = catalog.value.filter(post => !selected.value.includes(post.id || ''))
   if (!needle) return rows.slice(0, 20)
   return rows.filter((post) => {
-    const title = miniPostTitle(post).toLowerCase()
+    const title = miniPostTitle(post, locale.value).toLowerCase()
     return title.includes(needle) || (post.slug || '').toLowerCase().includes(needle)
   }).slice(0, 20)
 })
@@ -71,14 +72,14 @@ function remove(id: string) {
   <div class="flex flex-col gap-3 border-t border-default p-3">
     <div class="flex flex-wrap items-center justify-between gap-2">
       <p class="text-xs text-muted">
-        고른 글 {{ selected.length }} / {{ max }}
-        <span v-if="max >= 2"> · 2개부터 캐러셀, 4개는 그리드</span>
+        {{ t('miniPicker.selectedCount', { count: selected.length, max }) }}
+        <span v-if="max >= 2"> · {{ t('miniPicker.layoutHint') }}</span>
       </p>
       <UInput
         v-model="q"
         size="sm"
         icon="i-lucide-search"
-        placeholder="제목 검색"
+        :placeholder="t('miniPicker.searchPlaceholder')"
         class="w-48"
       />
     </div>
@@ -90,7 +91,7 @@ function remove(id: string) {
         class="flex items-center gap-2 rounded-lg bg-elevated/50 px-2 py-1.5"
       >
         <p class="min-w-0 flex-1 truncate text-sm">
-          {{ miniPostTitle(post) }}
+          {{ miniPostTitle(post, locale) }}
           <span class="text-xs text-muted">
             · {{ categoryLabel(post.category || post.boardId) }}
           </span>
@@ -106,7 +107,7 @@ function remove(id: string) {
       </div>
     </div>
 
-    <p v-if="pending" class="text-xs text-muted">글을 불러오는 중…</p>
+    <p v-if="pending" class="text-xs text-muted">{{ t('miniPicker.loading') }}</p>
     <ul v-else class="flex max-h-48 flex-col gap-0.5 overflow-y-auto">
       <li v-for="post in filtered" :key="post.id">
         <button
@@ -116,14 +117,14 @@ function remove(id: string) {
           @click="add(post.id!)"
         >
           <UIcon name="i-lucide-plus" class="size-3.5 shrink-0 text-muted" />
-          <span class="min-w-0 truncate">{{ miniPostTitle(post) }}</span>
+          <span class="min-w-0 truncate">{{ miniPostTitle(post, locale) }}</span>
           <span class="shrink-0 text-[11px] text-muted">
             {{ categoryLabel(post.category || post.boardId) }}
           </span>
         </button>
       </li>
       <li v-if="!filtered.length" class="px-2 py-3 text-center text-xs text-muted">
-        더 고를 글이 없습니다.
+        {{ t('miniPicker.noMore') }}
       </li>
     </ul>
   </div>

package/dist/runtime/components/MiniPost.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { BoardSection, PostModel } from 'memi-board/runtime'
-import { miniPostsView, miniViewGroup, useMemiBoardMiniPicked, useMemiBoardSettings } from 'memi-board/runtime'
+import { miniPostsView, miniViewGroup, useMemiBoardI18n, useMemiBoardMiniPicked, useMemiBoardSettings } from 'memi-board/runtime'
 import MemiBoardMiniCard from './MiniCard.vue'
 import MemiBoardMiniPosts from './MiniPosts.vue'
 
@@ -12,6 +12,7 @@ const props = defineProps<{
 
 const { posts, pending } = useMemiBoardMiniPicked(() => props.section.postIds)
 const { getBoard } = useMemiBoardSettings()
+const { t } = useMemiBoardI18n()
 const view = computed(() => miniPostsView(posts.value, getBoard))
 const useCarousel = computed(() =>
   miniViewGroup(view.value) === 'list' && posts.value.length >= 2 && posts.value.length !== 4,
@@ -27,7 +28,7 @@ const useCarousel = computed(() =>
       v-else-if="!posts.length"
       class="flex flex-1 items-center justify-center px-3 py-6 text-sm text-muted"
     >
-      고른 게시물이 없습니다.
+      {{ t('miniPost.empty') }}
     </p>
     <UCarousel
       v-else-if="useCarousel"