즐겨찾기 페이지 정리

docs/history.md

@@ -1,5 +1,8 @@
 # 의사결정 이력
 
+## 2026-04-07 v1.1.11
+- 즐겨찾기 페이지는 단순 모아보기만으로 끝나면 관리 화면 역할이 약하므로, 카드 안에서 바로 해제할 수 있게 두는 편이 맞다고 정리했다. 별도 상세 화면으로 들어가서 해제하는 흐름은 불필요하게 길다.
+
 ## 2026-04-07 v1.1.10
 - 댓글 관리함은 기본적으로 “안 읽은 것부터 처리하는 공간”이므로, 첫 진입 기본값을 전체 목록보다 `안 읽은 댓글만 보기 활성화`로 두는 편이 맞다고 정리했다.
 - 댓글 관리 카드의 상단 배지는 정보 라벨보다 행동 버튼이 더 유용하다고 판단했다. `댓글/답글` 구분은 제목과 본문 구조만으로 충분히 이해되므로, 같은 자리는 `읽음 처리`처럼 즉시 처리 가능한 액션에 쓰는 쪽이 효율적이다.

docs/map.md

@@ -37,7 +37,7 @@
 
 ## `/favorites`
 - 화면 파일: `frontend/src/views/FavoriteTierListsView.vue`
-- 역할: 즐겨찾기한 티어표 목록 조회, 검색/정렬, 라이브러리 카드형 표시, 편집 화면 이동, 즐겨찾기 상태 확인
+- 역할: 즐겨찾기한 티어표 목록 조회, 검색/정렬, 라이브러리 카드형 표시, 편집 화면 이동, 카드 우측 상단 `즐겨찾기 해제` 버튼으로 즉시 제거
 - 연동 API: `GET /api/tierlists/favorites/me`, `DELETE /api/tierlists/:id/favorite`
 
 ## `/following`

docs/spec.md

@@ -56,6 +56,7 @@
 - 댓글 관리 카드(`/comments`)는 좌측 `16:9 썸네일 + 티어표 제목 + 템플릿 이름`, 우측 `알림 제목 + 루트 댓글 정보 + 새 댓글/답글 정보`의 2열 구조를 사용한다.
 - 댓글 관리 카드의 상단 우측 배지는 상태 라벨이 아니라 개별 `읽음 처리` 액션으로 사용한다.
 - 티어표 즐겨찾기 API(`POST/DELETE /api/tierlists/:id/favorite`)는 이미 존재하며, 보기 화면 우측 레일에는 이를 직접 호출하는 단독 CTA를 노출한다.
+- `/favorites` 목록 카드에서도 같은 `DELETE /api/tierlists/:id/favorite`를 직접 호출해 즉시 해제할 수 있다.
 - 우측 패널
   - 현재 화면 문맥에 맞는 설명, 빠른 액션, 계정 상태 같은 보조 정보를 배치한다.
   - 에디터/관리자 세부 옵션은 후속 단계에서 이 패널로 점진 이관한다.

docs/todo.md

@@ -1,6 +1,7 @@
 # 할 일 및 이슈
 
 ## 단기 확인
+- `v1.1.11` 이후 즐겨찾기 페이지 카드 우측 상단 `즐겨찾기 해제` 버튼이 카드 열기와 충돌하지 않는지, 해제 직후 목록에서 즉시 빠지고 새로고침 후에도 유지되는지 확인한다.
 - `v1.1.10` 이후 댓글 관리 화면이 기본적으로 안 읽은 댓글만 보이므로, 사용자가 처음 들어왔을 때 빈 화면처럼 느끼지 않는지와 `전체 보기`로 돌렸을 때도 자연스러운지 확인한다.
 - 개별 `읽음 처리` 버튼을 눌렀을 때 카드가 즉시 사라지고 좌측 메뉴 unread dot도 함께 줄어드는지, 마지막 unread 카드까지 처리하면 dot이 사라지는지 확인한다.
 - 티어표 보기 화면 우측 즐겨찾기 단독 CTA가 편집 라우트의 읽기 전용 상태와 `preview=1` 뷰어 모드 양쪽에서 모두 자연스럽게 보이는지 확인한다.

docs/update.md

@@ -1,5 +1,10 @@
 # 업데이트 로그
 
+## 2026-04-07 v1.1.11
+- `즐겨찾기` 페이지 카드에서도 바로 해제할 수 있게 정리했다. 이제 목록 화면에서 각 카드 우측 상단 `즐겨찾기 해제` 버튼으로 해당 티어표를 즉시 제거할 수 있다.
+- 카드 본문 열기와 해제 버튼 동작이 섞이지 않도록 분리했다. 버튼은 카드 클릭과 독립적으로 처리되고, 성공 시 목록에서도 바로 빠져 정리 흐름이 자연스럽다.
+- 확인: `npm run build`
+
 ## 2026-04-07 v1.1.10
 - 댓글 관리 화면은 기본 진입 시 `안 읽은 댓글만 보기`가 켜진 상태로 시작하도록 바꿨다. 처음 들어왔을 때 가장 중요한 미확인 알림만 먼저 보이게 하는 쪽이 관리 흐름에 더 자연스럽다.
 - 댓글 관리 카드의 우측 배지는 더 이상 `댓글/답글` 구분용이 아니라 개별 `읽음 처리` 버튼으로 동작한다. 이제 해당 티어표 화면으로 들어가지 않아도 카드 단위로 바로 읽음 처리할 수 있다.

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;