릴리스: v0.1.43 토스트와 즐겨찾기 추가

frontend/src/App.vue

@@ -3,10 +3,12 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from './stores/auth'
 import { toApiUrl } from './lib/runtime'
+import { useToast } from './composables/useToast'
 
 const route = useRoute()
 const router = useRouter()
 const auth = useAuthStore()
+const toast = useToast()
 const isAdmin = computed(() => !!auth.user?.isAdmin)
 const avatarUrl = computed(() => {
   if (!auth.user?.avatarSrc) return ''
@@ -81,6 +83,12 @@ async function logout() {
     <main class="app-main">
       <RouterView />
     </main>
+    <div class="toastStack" aria-live="polite" aria-atomic="true">
+      <div v-for="item in toast.toasts" :key="item.id" class="toast" :class="`toast--${item.type}`">
+        <div class="toast__message">{{ item.message }}</div>
+        <button class="toast__close" @click="toast.dismissToast(item.id)">닫기</button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -198,4 +206,54 @@ async function logout() {
 .menuItem:hover {
   background: rgba(255, 255, 255, 0.09);
 }
+.toastStack {
+  position: fixed;
+  top: 78px;
+  right: 18px;
+  z-index: 30;
+  display: grid;
+  gap: 10px;
+  width: min(360px, calc(100vw - 24px));
+}
+.toast {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(11, 18, 32, 0.94);
+  backdrop-filter: blur(12px);
+  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
+}
+.toast--success {
+  border-color: rgba(52, 211, 153, 0.38);
+}
+.toast--error {
+  border-color: rgba(239, 68, 68, 0.34);
+}
+.toast--info {
+  border-color: rgba(96, 165, 250, 0.34);
+}
+.toast__message {
+  line-height: 1.5;
+  font-size: 14px;
+}
+.toast__close {
+  flex: 0 0 auto;
+  border: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.76);
+  cursor: pointer;
+  font-weight: 800;
+}
+@media (max-width: 640px) {
+  .toastStack {
+    top: 70px;
+    right: 12px;
+    left: 12px;
+    width: auto;
+  }
+}
 </style>