댓글 읽음과 즐겨찾기 정리

frontend/src/views/CommentInboxView.vue

@@ -11,8 +11,9 @@ const router = useRouter()
 const toast = useToast()
 const notifications = ref([])
 const isLoading = ref(false)
-const unreadOnly = ref(false)
+const unreadOnly = ref(true)
 const isMarkingAllRead = ref(false)
+const markingNotificationId = ref('')
 
 const unreadCount = computed(() => notifications.value.filter((item) => !item.isRead).length)
 
@@ -75,16 +76,30 @@ async function loadInbox() {
 async function markOneAsRead(notificationId) {
   const target = notifications.value.find((item) => item.id === notificationId)
   if (!target || target.isRead) return
+  const original = notifications.value.map((item) => ({ ...item }))
   target.isRead = true
+  if (unreadOnly.value) {
+    notifications.value = notifications.value.filter((item) => item.id !== notificationId)
+  }
   emitUnreadCount(unreadCount.value)
   try {
     await api.markCommentInboxRead({ notificationIds: [notificationId] })
   } catch (error) {
-    target.isRead = false
+    notifications.value = original
     emitUnreadCount(unreadCount.value)
   }
 }
 
+async function markNotificationButton(notificationId) {
+  if (!notificationId || markingNotificationId.value) return
+  markingNotificationId.value = notificationId
+  try {
+    await markOneAsRead(notificationId)
+  } finally {
+    markingNotificationId.value = ''
+  }
+}
+
 async function markAllAsRead() {
   if (!unreadCount.value) return
   isMarkingAllRead.value = true
@@ -181,7 +196,15 @@ watch(unreadOnly, loadInbox)
                 <div class="commentInboxCard__title">{{ notificationTitle(notification) }}</div>
                 <div class="commentInboxCard__status">
                   <span v-if="!notification.isRead" class="commentInboxCard__dot" aria-label="안 읽음"></span>
-                  <span class="commentInboxCard__badge">{{ notification.notificationType === 'comment_reply' ? '답글' : '댓글' }}</span>
+                  <button
+                    v-if="!notification.isRead"
+                    class="commentInboxCard__badge"
+                    type="button"
+                    :disabled="!!markingNotificationId"
+                    @click.stop="markNotificationButton(notification.id)"
+                  >
+                    {{ markingNotificationId === notification.id ? '처리 중...' : '읽음 처리' }}
+                  </button>
                 </div>
               </div>
               <div class="commentInboxCard__thread">
@@ -373,13 +396,21 @@ watch(unreadOnly, loadInbox)
 .commentInboxCard__badge {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   min-height: 28px;
   padding: 0 12px;
   border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--theme-accent) 22%, var(--theme-border));
   background: color-mix(in srgb, var(--theme-accent) 18%, var(--theme-surface-soft));
   color: var(--theme-text);
   font-size: 12px;
   font-weight: 800;
+  cursor: pointer;
+}
+
+.commentInboxCard__badge:disabled {
+  cursor: default;
+  opacity: 0.7;
 }
 
 .commentInboxCard__thread {