memi-board 0.44.0 → 0.45.0

package/dist/runtime/components/CommentForm.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { imeSafeSubmitClick, imeSafeSubmitPointerDown } from 'memi-board/runtime'
 import { computed, ref } from 'vue'
 import { canWriteCommentByRole, useMemiBoardAuth } from 'memi-board/runtime'
 import { COMMENT_BODY_MAX_LENGTH, useMemiBoardComments } from 'memi-board/runtime'
 import { useMemiBoardModeration } from 'memi-board/runtime'
 import { useMemiBoardSettings } from 'memi-board/runtime'
+import { useMemiBoardI18n } from 'memi-board/runtime'
 import type { CommentModel } from 'memi-board/runtime'
 
 const props = defineProps<{ boardId: string, postId: string, parent?: CommentModel | null }>()
@@ -17,6 +19,7 @@ const { addComment, addReply } = useMemiBoardComments(
   { subscribe: false },
 )
 const { checkText } = useMemiBoardModeration()
+const { t, formatNumber } = useMemiBoardI18n()
 const { getBoard } = useMemiBoardSettings()
 
 const board = computed(() => getBoard(props.boardId))
@@ -26,8 +29,8 @@ const canComment = computed(() => {
   return canWriteCommentByRole(user.value.uid, isAdmin.value, isStaff.value, board.value)
 })
 const deniedMessage = computed(() => {
-  if (isHiddenBoard.value) return '숨김 게시판에는 담당 스태프만 댓글을 남길 수 있습니다.'
-  return '이 게시판에는 댓글쓰기 권한이 없습니다.'
+  if (isHiddenBoard.value) return t('commentForm.hiddenBoardDenied')
+  return t('commentForm.denied')
 })
 
 const body = ref('')
@@ -35,10 +38,11 @@ const submitting = ref(false)
 const error = ref('')
 
 async function handleSubmit() {
+  if (submitting.value) return
   error.value = ''
   if (!body.value.trim()) return
   if (!user.value) {
-    error.value = '로그인이 필요합니다.'
+    error.value = t('commentForm.signInRequired')
     return
   }
   if (!canComment.value) {
@@ -47,7 +51,7 @@ async function handleSubmit() {
   }
   if (isWriteRestricted.value) {
     error.value = restrictedMessage.value
-      || '콘텐츠 경고가 누적되어 글·댓글 작성이 잠시 제한됐어요.'
+      || t('commentForm.writeRestricted')
     return
   }
 
@@ -55,7 +59,7 @@ async function handleSubmit() {
   try {
     const moderation = await checkText(body.value)
     if (moderation.flagged) {
-      error.value = moderation.reason || '작성할 수 없는 내용이 포함되어 있습니다.'
+      error.value = moderation.reason || t('commentForm.moderationBlocked')
       return
     }
     const input = {
@@ -86,7 +90,7 @@ async function handleSubmit() {
   >
     <UTextarea
       v-model="body"
-      :placeholder="parent ? `${parent.authorName || '사용자'}님에게 답글` : '댓글을 입력하세요'"
+      :placeholder="parent ? t('commentForm.replyTo', { name: parent.authorName || t('common.label.user') }) : t('commentForm.placeholder')"
       :rows="2"
       :maxlength="COMMENT_BODY_MAX_LENGTH"
     />
@@ -97,7 +101,7 @@ async function handleSubmit() {
       {{ restrictedMessage }}
     </p>
     <div class="flex justify-between items-center">
-      <span class="text-xs text-dimmed">{{ body.length.toLocaleString() }} / {{ COMMENT_BODY_MAX_LENGTH.toLocaleString() }}</span>
+      <span class="text-xs text-dimmed">{{ formatNumber(body.length) }} / {{ formatNumber(COMMENT_BODY_MAX_LENGTH) }}</span>
       <p
         v-if="error"
         class="text-xs text-error"
@@ -109,15 +113,17 @@ async function handleSubmit() {
         v-if="parent"
         type="button"
         size="sm"
-        label="취소"
+        :label="t('common.action.cancel')"
         color="neutral"
         variant="ghost"
         @click="emit('cancel')"
       />
       <UButton
         type="submit"
+        @pointerdown="imeSafeSubmitPointerDown"
+        @click="imeSafeSubmitClick"
         size="sm"
-        :label="parent ? '답글 작성' : '댓글 작성'"
+        :label="parent ? t('commentForm.submitReply') : t('commentForm.submit')"
         :loading="submitting"
         :disabled="!body.trim() || isWriteRestricted"
       />
@@ -127,7 +133,7 @@ async function handleSubmit() {
     v-else-if="!isSignedIn"
     class="text-sm text-muted"
   >
-    댓글을 작성하려면 로그인이 필요합니다.
+    {{ t('commentForm.signInToComment') }}
   </p>
   <p
     v-else

package/dist/runtime/components/CommentItem.vue

@@ -1,22 +1,17 @@
 <script setup lang="ts">
+import { imeSafeSubmitClick, imeSafeSubmitPointerDown } from 'memi-board/runtime'
 import { computed, inject, ref, watch } from 'vue'
 import { Timestamp } from 'firebase/firestore'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import 'dayjs/locale/ko'
 import type { CommentModel } from 'memi-board/runtime'
 import {
   COMMENT_BODY_MAX_LENGTH,
-  formatTimestampDetails,
   memiBoardCommentLikesKey,
   useMemiBoardAuth,
   useMemiBoardComments,
+  useMemiBoardI18n,
   useMemiBoardModeration,
 } from 'memi-board/runtime'
 
-dayjs.extend(relativeTime)
-dayjs.locale('ko')
-
 const props = defineProps<{
   comment: CommentModel
   boardId: string
@@ -37,6 +32,7 @@ const { updateComment, setCommentBlinded } = useMemiBoardComments(
   { subscribe: false },
 )
 const { checkText } = useMemiBoardModeration()
+const { t, formatRelativeDate, formatTimestampDetails } = useMemiBoardI18n()
 const commentLikes = inject(memiBoardCommentLikesKey, null)
 
 const editing = ref(false)
@@ -63,7 +59,7 @@ watch(() => props.comment.likeCount, (likeCount) => {
 })
 
 const date = computed(() => props.comment.createdAt?.toDate?.())
-const relativeDate = computed(() => date.value ? dayjs(date.value).from(dayjs(props.now)) : '방금 전')
+const relativeDate = computed(() => formatRelativeDate(props.comment.createdAt, props.now))
 const timestampDetails = computed(() => formatTimestampDetails(props.comment.createdAt, localUpdatedAt.value).join('\n'))
 const blindLines = computed(() => Math.min(3, Math.max(1, Math.ceil(localBody.value.length / 45))))
 
@@ -80,13 +76,14 @@ function cancelEdit() {
 }
 
 async function saveEdit() {
+  if (saving.value) return
   const body = editBody.value.trim()
   if (!props.comment.id || !body || body === localBody.value) {
     if (body === localBody.value) editing.value = false
     return
   }
   if (isWriteRestricted.value) {
-    editError.value = restrictedMessage.value || '댓글 수정이 잠시 제한됐어요.'
+    editError.value = restrictedMessage.value || t('commentItem.editRestricted')
     return
   }
 
@@ -95,7 +92,7 @@ async function saveEdit() {
   try {
     const moderation = await checkText(body)
     if (moderation.flagged) {
-      editError.value = moderation.reason || '작성할 수 없는 내용이 포함되어 있습니다.'
+      editError.value = moderation.reason || t('commentItem.moderationBlocked')
       return
     }
     await updateComment(props.comment.id, body)
@@ -104,7 +101,7 @@ async function saveEdit() {
     editing.value = false
   }
   catch (cause) {
-    editError.value = cause instanceof Error ? cause.message : '댓글을 수정하지 못했습니다.'
+    editError.value = cause instanceof Error ? cause.message : t('commentItem.editFailed')
   }
   finally {
     saving.value = false
@@ -115,8 +112,8 @@ async function toggleBlind() {
   if (!props.comment.id || !user.value || !canManageBoard(props.comment.boardId)) return
   const next = !localBlinded.value
   const confirmed = window.confirm(next
-    ? '이 댓글을 블라인드하면 모든 사용자에게 본문 대신 블라인드 안내가 표시됩니다. 원문은 삭제되지 않으며 나중에 다시 해제할 수 있습니다.\n\n블라인드하시겠습니까?'
-    : '블라인드를 해제하면 댓글 원문이 모든 사용자에게 다시 표시됩니다.\n\n블라인드를 해제하시겠습니까?')
+    ? t('commentItem.blindConfirm')
+    : t('commentItem.unblindConfirm'))
   if (!confirmed) return
 
   blindSaving.value = true
@@ -127,7 +124,7 @@ async function toggleBlind() {
     if (next) cancelEdit()
   }
   catch (cause) {
-    editError.value = cause instanceof Error ? cause.message : '블라인드 상태를 변경하지 못했습니다.'
+    editError.value = cause instanceof Error ? cause.message : t('commentItem.blindFailed')
   }
   finally {
     blindSaving.value = false
@@ -143,7 +140,7 @@ async function toggleLike() {
     if (next !== wasLiked) localLikeCount.value = Math.max(0, localLikeCount.value + (next ? 1 : -1))
   }
   catch (cause) {
-    likeError.value = cause instanceof Error ? cause.message : '좋아요를 처리하지 못했습니다.'
+    likeError.value = cause instanceof Error ? cause.message : t('commentItem.likeFailed')
   }
 }
 </script>
@@ -152,12 +149,12 @@ async function toggleLike() {
   <div class="flex items-start gap-3">
     <UAvatar
       :src="comment.authorPhoto ?? undefined"
-      :alt="comment.authorName ?? '익명'"
+      :alt="comment.authorName ?? t('common.label.anonymous')"
       size="sm"
     />
     <div class="min-w-0 flex-1">
       <div class="flex items-center gap-2">
-        <span class="text-sm font-medium">{{ comment.authorName ?? '익명' }}</span>
+        <span class="text-sm font-medium">{{ comment.authorName ?? t('common.label.anonymous') }}</span>
         <UPopover :content="{ side: 'top' }" :ui="{ content: 'h-auto w-max' }">
           <time
             :datetime="date?.toISOString()"
@@ -192,7 +189,7 @@ async function toggleLike() {
         <div class="flex justify-end gap-1">
           <UButton
             type="button"
-            label="취소"
+            :label="t('common.action.cancel')"
             size="xs"
             color="neutral"
             variant="ghost"
@@ -201,7 +198,9 @@ async function toggleLike() {
           />
           <UButton
             type="submit"
-            label="저장"
+            @pointerdown="imeSafeSubmitPointerDown"
+            @click="imeSafeSubmitClick"
+            :label="t('common.action.save')"
             size="xs"
             :loading="saving"
             :disabled="!editBody.trim() || editBody.trim() === localBody"
@@ -221,7 +220,7 @@ async function toggleLike() {
           />
         </div>
         <div class="absolute inset-0 flex items-center justify-center px-3 text-center text-xs font-medium text-muted">
-          관리자에 의해 블라인드된 댓글입니다.
+          {{ t('commentItem.blinded') }}
         </div>
       </div>
       <p v-else class="whitespace-pre-wrap break-words text-sm">
@@ -241,13 +240,13 @@ async function toggleLike() {
         :color="isLiked ? 'error' : 'neutral'"
         :label="String(localLikeCount)"
         :loading="likePending"
-        :aria-label="isLiked ? '좋아요 취소' : '좋아요'"
+        :aria-label="isLiked ? t('common.action.unlike') : t('common.action.like')"
         @click="toggleLike"
       />
       <span
         v-else
         class="flex items-center gap-0.5 px-1 text-xs text-muted"
-        aria-label="좋아요"
+        :aria-label="t('common.action.like')"
       >
         <UIcon name="i-lucide-heart" class="size-3.5" />
         {{ localLikeCount }}
@@ -258,7 +257,7 @@ async function toggleLike() {
         size="xs"
         color="neutral"
         variant="ghost"
-        aria-label="댓글 수정"
+        :aria-label="t('commentItem.edit')"
         :disabled="editing"
         @click="startEdit"
       />
@@ -269,7 +268,7 @@ async function toggleLike() {
         :color="localBlinded ? 'neutral' : 'warning'"
         variant="ghost"
         :loading="blindSaving"
-        :aria-label="localBlinded ? '댓글 블라인드 해제' : '댓글 블라인드'"
+        :aria-label="localBlinded ? t('commentItem.unblind') : t('commentItem.blind')"
         @click="toggleBlind"
       />
       <UButton
@@ -277,7 +276,7 @@ async function toggleLike() {
         size="xs"
         color="neutral"
         variant="ghost"
-        aria-label="답글"
+        :aria-label="t('common.action.reply')"
         @click="emit('reply', comment)"
       />
       <UButton
@@ -287,7 +286,7 @@ async function toggleLike() {
         variant="ghost"
         color="error"
         :loading="deleting"
-        aria-label="댓글 삭제"
+        :aria-label="t('commentItem.delete')"
         @click="emit('delete', comment.id)"
       />
     </div>

package/dist/runtime/components/CommentList.vue

@@ -4,12 +4,15 @@ import {
   memiBoardCommentLikesKey,
   useMemiBoardCommentLikes,
   useMemiBoardComments,
+  useMemiBoardI18n,
 } from 'memi-board/runtime'
 import MemiBoardCommentSkeleton from './CommentSkeleton.vue'
 import MemiBoardCommentThread from './CommentThread.vue'
 
 const props = defineProps<{ boardId: string, postId: string }>()
 
+const { t } = useMemiBoardI18n()
+
 const { comments, commentsPending, hasMore, loadingMore, loadMore } = useMemiBoardComments(
   toRef(props, 'boardId'),
   toRef(props, 'postId'),
@@ -79,14 +82,14 @@ onUnmounted(() => {
 
 <template>
   <div class="flex flex-col gap-3">
-    <div v-if="commentsPending" class="flex flex-col gap-3" aria-label="댓글을 불러오고 있습니다">
+    <div v-if="commentsPending" class="flex flex-col gap-3" :aria-label="t('commentList.loading')">
       <MemiBoardCommentSkeleton v-for="index in 10" :key="`initial-${index}`" />
     </div>
     <p
       v-else-if="!comments.length"
       class="text-sm text-muted"
     >
-      아직 댓글이 없습니다.
+      {{ t('commentList.empty') }}
     </p>
 
     <MemiBoardCommentThread
@@ -104,7 +107,7 @@ onUnmounted(() => {
       class="flex justify-center py-3"
     >
       <UButton
-        label="댓글 더보기"
+        :label="t('commentList.loadMore')"
         icon="i-lucide-chevron-down"
         color="neutral"
         variant="soft"
@@ -114,7 +117,7 @@ onUnmounted(() => {
       />
     </div>
 
-    <div v-if="morePending" class="flex flex-col gap-3" aria-label="댓글을 더 불러오고 있습니다">
+    <div v-if="morePending" class="flex flex-col gap-3" :aria-label="t('commentList.loadingMore')">
       <MemiBoardCommentSkeleton v-for="index in 10" :key="`more-${index}`" />
     </div>
   </div>

package/dist/runtime/components/CommentThread.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
 import type { CommentModel } from 'memi-board/runtime'
-import { useMemiBoardComments, useMemiBoardReplies } from 'memi-board/runtime'
+import { useMemiBoardComments, useMemiBoardI18n, useMemiBoardReplies } from 'memi-board/runtime'
 import MemiBoardCommentForm from './CommentForm.vue'
 import MemiBoardCommentItem from './CommentItem.vue'
 import MemiBoardCommentSkeleton from './CommentSkeleton.vue'
 
 const props = defineProps<{ boardId: string, postId: string, root: CommentModel, now: number }>()
 
+const { t } = useMemiBoardI18n()
+
 const { deleteComment } = useMemiBoardComments(
   props.boardId,
   props.postId,
@@ -56,7 +58,7 @@ async function handleSaved() {
 }
 
 async function handleDelete(comment: CommentModel) {
-  if (!window.confirm('이 댓글을 삭제하시겠습니까?')) return
+  if (!window.confirm(t('commentThread.deleteConfirm'))) return
   deletingId.value = comment.id ?? null
   error.value = ''
   try {
@@ -64,7 +66,7 @@ async function handleDelete(comment: CommentModel) {
     if (comment.parentId) await refresh()
   }
   catch (cause) {
-    error.value = cause instanceof Error ? cause.message : '댓글을 삭제하지 못했습니다.'
+    error.value = cause instanceof Error ? cause.message : t('commentThread.deleteFailed')
   }
   finally {
     deletingId.value = null
@@ -86,7 +88,7 @@ async function handleDelete(comment: CommentModel) {
 
     <UButton
       v-if="(root.replyCount ?? 0) > 0"
-      :label="expanded ? '답글 숨기기' : `답글 ${root.replyCount}개`"
+      :label="expanded ? t('commentThread.hideReplies') : t('commentThread.showReplies', { count: root.replyCount ?? 0 })"
       :icon="expanded ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
       color="neutral"
       variant="link"
@@ -111,7 +113,7 @@ async function handleDelete(comment: CommentModel) {
       />
       <UButton
         v-if="needsMoreReplies"
-        label="답글 더보기"
+        :label="t('commentThread.loadMoreReplies')"
         color="neutral"
         variant="soft"
         size="sm"

package/dist/runtime/components/Detail.vue

@@ -2,7 +2,7 @@
 import { ref, computed, onBeforeUnmount, onMounted, watch } from 'vue'
 import Youtube from '@tiptap/extension-youtube'
 import type { PostModel } from 'memi-board/runtime'
-import { formatRelativeDate, formatTimestampDetails, renderMarkdownToHtml } from 'memi-board/runtime'
+import { renderMarkdownToHtml, useMemiBoardI18n } from 'memi-board/runtime'
 import { useMemiBoardPost, useMemiBoardPosts } from 'memi-board/runtime'
 import { useMemiBoardAuth } from 'memi-board/runtime'
 import { useMemiBoardSettings } from 'memi-board/runtime'
@@ -36,7 +36,9 @@ const emit = defineEmits<{
 
 const { getAdjacentPosts, deletePost, publishPost } = useMemiBoardPosts(() => props.boardId)
 const { canEdit, canDelete } = useMemiBoardAuth()
-const { boardLabel } = useMemiBoardSettings()
+const { boardLabel, getBoard } = useMemiBoardSettings()
+// 보드 설정 언어 → 호스트 언어 순. 댓글 등 자식 컴포넌트도 이 언어를 따른다.
+const { t, dir, formatRelativeDate, formatTimestampDetails } = useMemiBoardI18n({ boardLocale: () => getBoard(props.boardId)?.locale })
 const { recordView } = useMemiBoardViews()
 
 // 실시간 구독 — 다른 사람의 좋아요·댓글 수 변경이 화면에 바로 반영된다.
@@ -124,7 +126,7 @@ async function handlePublish() {
 
 async function handleDelete() {
   if (!post.value) return
-  if (!window.confirm('이 게시글을 삭제하시겠습니까? 되돌릴 수 없습니다.')) return
+  if (!window.confirm(t('detail.deleteConfirm'))) return
   deleting.value = true
   try {
     await deletePost(props.postId)
@@ -152,6 +154,7 @@ const contentHtml = computed(() => {
 <template>
   <div
     v-if="loading"
+    :dir="dir"
     class="flex flex-col gap-3"
   >
     <USkeleton class="h-8 w-2/3" />
@@ -160,13 +163,15 @@ const contentHtml = computed(() => {
 
   <p
     v-else-if="notFound"
+    :dir="dir"
     class="text-sm text-muted"
   >
-    게시글을 찾을 수 없습니다.
+    {{ t('detail.notFound') }}
   </p>
 
   <div
     v-else-if="post"
+    :dir="dir"
     class="flex flex-col gap-6 touch-pan-y"
     @touchstart.passive="onTouchStart"
     @touchend.passive="onTouchEnd"
@@ -175,13 +180,13 @@ const contentHtml = computed(() => {
       <div class="flex items-start gap-2">
         <UIcon name="i-lucide-eye-off" class="mt-0.5 size-4 shrink-0 text-warning" />
         <div>
-          <p class="text-sm font-medium text-highlighted">미공개 미리보기</p>
-          <p class="text-xs text-muted">아직 게시되지 않았습니다. 게시하기 전까지는 작성자만 볼 수 있어요.</p>
+          <p class="text-sm font-medium text-highlighted">{{ t('detail.draftPreview') }}</p>
+          <p class="text-xs text-muted">{{ t('detail.draftNotice') }}</p>
         </div>
       </div>
       <UButton
         v-if="canEdit(post)"
-        label="게시하기"
+        :label="t('detail.publish')"
         icon="i-lucide-send"
         size="sm"
         class="shrink-0"
@@ -207,7 +212,7 @@ const contentHtml = computed(() => {
         </div>
         <UButton
           icon="i-lucide-arrow-left"
-          aria-label="목록으로 돌아가기"
+          :aria-label="t('detail.backToList')"
           color="neutral"
           variant="ghost"
           size="sm"
@@ -283,7 +288,7 @@ const contentHtml = computed(() => {
           size="sm"
           variant="ghost"
           color="neutral"
-          label="수정"
+          :label="t('common.action.edit')"
           @click="emit('edit', postId)"
         />
         <UButton
@@ -292,7 +297,7 @@ const contentHtml = computed(() => {
           size="sm"
           variant="ghost"
           color="error"
-          label="삭제"
+          :label="t('common.action.delete')"
           :loading="deleting"
           @click="handleDelete"
         />
@@ -315,12 +320,12 @@ const contentHtml = computed(() => {
       />
     </div>
 
-    <nav class="grid grid-cols-3 items-center py-3" aria-label="게시글 이동">
+    <nav class="grid grid-cols-3 items-center py-3" :aria-label="t('detail.postNav')">
       <UButton
         variant="ghost"
         color="neutral"
         icon="i-lucide-chevron-left"
-        label="이전"
+        :label="t('common.action.prev')"
         class="justify-self-start"
         :disabled="!previousPost?.id"
         @click="previousPost?.id && emit('navigate', previousPost)"
@@ -329,7 +334,7 @@ const contentHtml = computed(() => {
         variant="ghost"
         color="neutral"
         icon="i-lucide-list"
-        label="목록"
+        :label="t('detail.list')"
         class="justify-self-center"
         @click="emit('list')"
       />
@@ -337,7 +342,7 @@ const contentHtml = computed(() => {
         variant="ghost"
         color="neutral"
         trailing-icon="i-lucide-chevron-right"
-        label="다음"
+        :label="t('common.action.next')"
         class="justify-self-end"
         :disabled="!nextPost?.id"
         @click="nextPost?.id && emit('navigate', nextPost)"
@@ -348,7 +353,7 @@ const contentHtml = computed(() => {
 
     <section v-if="!isDraft" class="flex flex-col gap-4 border-t border-default pt-4">
       <h2 class="text-sm font-medium text-muted">
-        댓글
+        {{ t('detail.comments') }}
       </h2>
       <MemiBoardCommentList :board-id="boardId" :post-id="postId" />
       <MemiBoardCommentForm :board-id="boardId" :post-id="postId" />