릴리스: v0.1.45 토스트와 즐겨찾기 상호작용 보정

frontend/src/composables/useToast.js

@@ -2,18 +2,48 @@ import { readonly, ref } from 'vue'
 
 const toasts = ref([])
 let toastSeq = 0
+const TOAST_EXIT_MS = 220
+
+function clearToastTimer(toast) {
+  if (toast?.timerId) {
+    window.clearTimeout(toast.timerId)
+    toast.timerId = 0
+  }
+}
+
+function removeToast(id) {
+  toasts.value = toasts.value.filter((toast) => toast.id !== id)
+}
 
 function dismissToast(id) {
-  toasts.value = toasts.value.filter((toast) => toast.id !== id)
+  const target = toasts.value.find((toast) => toast.id === id)
+  if (!target || target.isClosing) return
+
+  clearToastTimer(target)
+  target.isClosing = true
+  target.timerId = window.setTimeout(() => removeToast(id), TOAST_EXIT_MS)
 }
 
 function showToast(message, { type = 'info', duration = 2600 } = {}) {
   if (!message) return ''
+  const duplicated = toasts.value.find((toast) => toast.message === message && toast.type === type && !toast.isClosing)
+
+  if (duplicated) {
+    duplicated.count = (duplicated.count || 1) + 1
+    clearToastTimer(duplicated)
+    if (duration > 0) {
+      duplicated.timerId = window.setTimeout(() => dismissToast(duplicated.id), duration)
+    }
+    toasts.value = [...toasts.value]
+    return duplicated.id
+  }
+
   const id = `toast-${++toastSeq}`
-  toasts.value = [...toasts.value, { id, message, type }]
+  const nextToast = { id, message, type, count: 1, isClosing: false, timerId: 0 }
+  toasts.value = [...toasts.value, nextToast]
 
   if (duration > 0) {
-    window.setTimeout(() => dismissToast(id), duration)
+    nextToast.timerId = window.setTimeout(() => dismissToast(id), duration)
   }
 
   return id