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

frontend/src/views/MyTierListsView.vue

@@ -1,13 +1,21 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
+import { useToast } from '../composables/useToast'
 
 const router = useRouter()
+const toast = useToast()
 const myLists = ref([])
 const error = ref('')
 
+watch(error, (message) => {
+  if (!message) return
+  toast.error(message)
+  error.value = ''
+})
+
 function fmt(ts) {
   return new Date(ts).toLocaleString(undefined, {
     year: 'numeric',
@@ -39,7 +47,8 @@ onMounted(async () => {
     const data = await api.listMyTierLists()
     myLists.value = data.tierLists || []
   } catch (e) {
-    error.value = '로그인이 필요해요.'
+    toast.error('로그인이 필요해요.')
+    router.push('/login?redirect=/me')
   }
 })
 
@@ -54,6 +63,7 @@ async function removeList(t) {
     if (!ok) return
     await api.deleteTierList(t.id)
     myLists.value = myLists.value.filter((entry) => entry.id !== t.id)
+    toast.success('티어표를 삭제했어요.')
   } catch (e) {
     error.value = '티어표 삭제에 실패했어요.'
   }
@@ -64,10 +74,6 @@ async function removeList(t) {
   <section class="wrap">
     <h2 class="title">내 티어표</h2>
     <div class="card">
-      <div v-if="error" class="error">
-        {{ error }}
-        <button class="link" @click="$router.push('/login')">로그인 하러가기</button>
-      </div>
       <div v-if="myLists.length === 0" class="empty">아직 저장한 티어표가 없어요.</div>
       <div v-else class="list">
         <article v-for="t in myLists" :key="t.id" class="row">
@@ -108,17 +114,6 @@ async function removeList(t) {
   border-radius: 16px;
   padding: 14px;
 }
-.error {
-  margin-bottom: 12px;
-  padding: 10px 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  background: rgba(239, 68, 68, 0.12);
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  justify-content: space-between;
-}
 .link {
   padding: 8px 10px;
   border-radius: 10px;