즐겨찾기 페이지 정리

frontend/src/views/FavoriteTierListsView.vue

@@ -13,6 +13,7 @@ const toast = useToast()
 const favorites = ref([])
 const query = ref('')
 const sort = ref('favorited')
+const busyTierListId = ref('')
 
 function fmt(ts) {
   return new Date(ts).toLocaleDateString(undefined, {
@@ -52,6 +53,22 @@ function openTierList(tierList) {
   router.push(editorPath(tierList.topicSlug || tierList.topicId, tierList.id))
 }
 
+async function removeFavorite(tierListId) {
+  if (!tierListId || busyTierListId.value) return
+  busyTierListId.value = tierListId
+  const original = favorites.value.slice()
+  favorites.value = favorites.value.filter((tierList) => tierList.id !== tierListId)
+  try {
+    await api.unfavoriteTierList(tierListId)
+    toast.success('즐겨찾기에서 제거했어요.')
+  } catch (error) {
+    favorites.value = original
+    toast.error('즐겨찾기 해제에 실패했어요.')
+  } finally {
+    busyTierListId.value = ''
+  }
+}
+
 onMounted(loadFavorites)
 </script>
 
@@ -77,6 +94,14 @@ onMounted(loadFavorites)
     <div v-if="favorites.length === 0" class="empty">즐겨찾기한 티어표가 없어요.</div>
     <div v-else class="list">
       <article v-for="tierList in favorites" :key="tierList.id" class="boardCard">
+        <button
+          class="boardCard__favoriteAction"
+          type="button"
+          :disabled="!!busyTierListId"
+          @click.stop="removeFavorite(tierList.id)"
+        >
+          {{ busyTierListId === tierList.id ? '처리 중...' : '즐겨찾기 해제' }}
+        </button>
         <button class="boardCard__body" @click="openTierList(tierList)">
           <div class="boardCard__thumbWrap">
             <img v-if="tierListThumbnailUrl(tierList)" class="boardCard__thumb" :src="tierListThumbnailUrl(tierList)" :alt="tierList.title" draggable="false" />
@@ -134,6 +159,7 @@ onMounted(loadFavorites)
   gap: 18px;
 }
 .boardCard {
+  position: relative;
   border-radius: 22px;
   border: 1px solid var(--theme-card-border);
   background: var(--theme-card-bg);
@@ -157,6 +183,25 @@ onMounted(loadFavorites)
   cursor: pointer;
   display: grid;
 }
+.boardCard__favoriteAction {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  z-index: 1;
+  min-height: 32px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--theme-danger-border) 70%, var(--theme-border));
+  background: color-mix(in srgb, var(--theme-surface) 92%, var(--theme-danger-bg));
+  color: var(--theme-text);
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+.boardCard__favoriteAction:disabled {
+  cursor: default;
+  opacity: 0.72;
+}
 .boardCard__thumbWrap {
   width: 100%;
   aspect-ratio: 16 / 9;