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

frontend/src/App.vue

@@ -85,8 +85,11 @@ async function logout() {
       <RouterView />
     </main>
     <div class="toastStack" aria-live="polite" aria-atomic="true">
-      <div v-for="item in toasts" :key="item.id" class="toast" :class="`toast--${item.type}`">
-        <div class="toast__message">{{ item.message }}</div>
+      <div v-for="item in toasts" :key="item.id" class="toast" :class="[`toast--${item.type}`, { 'toast--closing': item.isClosing }]">
+        <div class="toast__body">
+          <div class="toast__message">{{ item.message }}</div>
+          <div v-if="item.count > 1" class="toast__count">x{{ item.count }}</div>
+        </div>
         <button class="toast__close" @click="dismissToast(item.id)">닫기</button>
       </div>
     </div>
@@ -227,6 +230,13 @@ async function logout() {
   background: rgba(11, 18, 32, 0.94);
   backdrop-filter: blur(12px);
   box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 220ms ease, transform 220ms ease;
+}
+.toast--closing {
+  opacity: 0;
+  transform: translateY(-6px);
 }
 .toast--success {
   border-color: rgba(52, 211, 153, 0.38);
@@ -241,6 +251,19 @@ async function logout() {
   line-height: 1.5;
   font-size: 14px;
 }
+.toast__body {
+  min-width: 0;
+}
+.toast__count {
+  margin-top: 6px;
+  width: fit-content;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  font-size: 12px;
+  font-weight: 800;
+  opacity: 0.84;
+}
 .toast__close {
   flex: 0 0 auto;
   border: 0;