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

backend/src/db.js

@@ -666,13 +666,18 @@ function applyFavoriteMetaToTierLists(tierLists, favoriteStats) {
   }))
 }
 
-async function listPublicTierLists(gameId, currentUserId = '') {
+async function listPublicTierLists(gameId, currentUserId = '', queryText = '') {
   const params = []
   let whereClause = 'WHERE t.is_public = 1'
   if (gameId) {
     whereClause += ' AND t.game_id = ?'
     params.push(gameId)
   }
+  if ((queryText || '').trim()) {
+    const search = `%${queryText.trim()}%`
+    whereClause += ' AND (t.title LIKE ? OR u.nickname LIKE ? OR u.email LIKE ?)'
+    params.push(search, search, search)
+  }
 
   const rows = await query(
     `
@@ -716,6 +721,67 @@ async function listPublicTierLists(gameId, currentUserId = '') {
   return applyFavoriteMetaToTierLists(tierLists, favoriteStats)
 }
 
+async function listFavoriteTierLists(userId, { queryText = '', sort = 'favorited' } = {}) {
+  const allowedSort = new Set(['favorited', 'updated', 'favorites'])
+  const normalizedSort = allowedSort.has(sort) ? sort : 'favorited'
+  const params = [userId]
+  let whereClause = 'WHERE f.user_id = ?'
+
+  if ((queryText || '').trim()) {
+    const search = `%${queryText.trim()}%`
+    whereClause += ' AND (t.title LIKE ? OR g.name LIKE ? OR u.nickname LIKE ? OR u.email LIKE ?)'
+    params.push(search, search, search, search)
+  }
+
+  const orderClause =
+    normalizedSort === 'updated'
+      ? 'ORDER BY t.updated_at DESC, f.created_at DESC'
+      : normalizedSort === 'favorites'
+        ? 'ORDER BY favorite_count DESC, t.updated_at DESC'
+        : 'ORDER BY f.created_at DESC, t.updated_at DESC'
+
+  const rows = await query(
+    `
+      SELECT
+        t.id,
+        t.author_id,
+        t.game_id,
+        g.name AS game_name,
+        t.title,
+        t.thumbnail_src,
+        t.description,
+        t.is_public,
+        t.groups_json,
+        t.pool_json,
+        t.created_at,
+        t.updated_at,
+        f.created_at AS favorited_at,
+        u.nickname,
+        u.email,
+        u.avatar_src,
+        (
+          SELECT COUNT(*)
+          FROM favorite_tierlists ff
+          WHERE ff.tierlist_id = t.id
+        ) AS favorite_count
+      FROM favorite_tierlists f
+      INNER JOIN tierlists t ON t.id = f.tierlist_id
+      INNER JOIN users u ON u.id = t.author_id
+      INNER JOIN games g ON g.id = t.game_id
+      ${whereClause}
+      ${orderClause}
+    `,
+    params
+  )
+
+  return rows.map((row) => ({
+    ...mapTierListRow(row),
+    favoritedAt: Number(row.favorited_at || 0),
+    favoriteCount: Number(row.favorite_count || 0),
+    isFavorited: true,
+  }))
+}
+
 async function listUserTierLists(userId) {
   const rows = await query(
     `
@@ -971,6 +1037,7 @@ module.exports = {
   listCustomItems,
   findUnusedCustomItems,
   listPublicTierLists,
+  listFavoriteTierLists,
   listUserTierLists,
   listAdminTierLists,
   findTierListById,

backend/src/routes/tierlists.js

@@ -6,6 +6,7 @@ const { nanoid } = require('nanoid')
 const {
   findTierListById,
   listPublicTierLists,
+  listFavoriteTierLists,
   listUserTierLists,
   deleteTierList,
   saveTierList,
@@ -89,7 +90,8 @@ const tierListUpsertSchema = z.object({
 
 router.get('/public', async (req, res) => {
   const gameId = req.query.gameId
-  const lists = await listPublicTierLists(gameId, req.session?.userId || '')
+  const queryText = typeof req.query.q === 'string' ? req.query.q : ''
+  const lists = await listPublicTierLists(gameId, req.session?.userId || '', queryText)
   res.json({ tierLists: lists })
 })
 
@@ -98,6 +100,13 @@ router.get('/me', requireAuth, async (req, res) => {
   res.json({ tierLists: lists })
 })
 
+router.get('/favorites/me', requireAuth, async (req, res) => {
+  const queryText = typeof req.query.q === 'string' ? req.query.q : ''
+  const sort = typeof req.query.sort === 'string' ? req.query.sort : 'favorited'
+  const lists = await listFavoriteTierLists(req.session.userId, { queryText, sort })
+  res.json({ tierLists: lists })
+})
+
 router.get('/:id', async (req, res) => {
   const t = await findTierListById(req.params.id, req.session?.userId || '')
   if (!t) return res.status(404).json({ error: 'not_found' })

docs/history.md

@@ -1,5 +1,14 @@
 # 의사결정 이력
 
+## 2026-03-27 v0.1.45
+- 카드형 목록의 별표는 개수 표시로 읽히기 쉬우므로, 목록에서는 상태/개수만 보여주고 실제 즐겨찾기 토글은 상세 화면에서 처리하는 편이 오해가 적다고 정리했다.
+- 토스트는 같은 메시지가 짧게 반복될 때 누적 표시가 더 낫고, 종료도 급격히 끊기지 않도록 페이드아웃을 넣는 편이 사용자 경험상 자연스럽다고 판단했다.
+
+## 2026-03-27 v0.1.44
+- 전역 토스트는 공통 composable을 템플릿에 넘길 때 top-level ref로 풀어줘야 하므로, 렌더링 구조를 단순하게 유지하는 편이 안전하다고 정리했다.
+- 공개 티어표가 많아질수록 게임별 목록 안에서 바로 제목/작성자 검색이 가능해야 하므로, 검색은 별도 페이지보다 각 게임 허브 안에서 먼저 제공하기로 결정했다.
+- 즐겨찾기는 저장만으로 끝나면 활용도가 낮으므로, 별도 `내 즐겨찾기` 화면과 정렬 옵션을 함께 제공해야 실사용성이 높다고 판단했다.
+
 ## 2026-03-27 v0.1.43
 - 화면 상단 인라인 경고는 스크롤이 생기면 놓치기 쉬우므로, 저장/삭제/가져오기 같은 사용자 행동 피드백은 전역 우측 상단 토스트로 통일하는 편이 더 적합하다고 정리했다.
 - 관리자 티어표 관리의 목적지 선택은 상단 고정 셀렉트보다 액션 직전 모달이 더 명확하므로, `기존 템플릿에 추가 / 새 템플릿 만들기`를 그 순간에 고르게 하기로 결정했다.

docs/map.md

@@ -7,7 +7,7 @@
 
 ## `/games/:gameId`
 - 화면 파일: `frontend/src/views/GameHubView.vue`
-- 역할: 선택한 게임 정보 표시, 공개 티어표 목록 표시, 티어표별 상단 썸네일/작성자 표시, 즐겨찾기 토글, 새 티어표 작성 진입
+- 역할: 선택한 게임 정보 표시, 공개 티어표 목록 표시, 제목/작성자 검색, 티어표별 상단 썸네일/작성자 표시, 즐겨찾기 토글, 새 티어표 작성 진입
 - 연동 API: `GET /api/games/:gameId`, `GET /api/tierlists/public`, `POST /api/tierlists/:id/favorite`, `DELETE /api/tierlists/:id/favorite`
 
 ## `/editor/:gameId/new`, `/editor/:gameId/:tierListId`
@@ -25,6 +25,11 @@
 - 역할: 내 티어표 목록 조회, 상단 썸네일 카드 표시, 편집 화면으로 이동, 작성자 본인 티어표 삭제
 - 연동 API: `GET /api/tierlists/me`, `DELETE /api/tierlists/:id`
 
+## `/favorites`
+- 화면 파일: `frontend/src/views/FavoriteTierListsView.vue`
+- 역할: 즐겨찾기한 티어표 목록 조회, 검색/정렬, 편집 화면 이동, 즐겨찾기 해제
+- 연동 API: `GET /api/tierlists/favorites/me`, `DELETE /api/tierlists/:id/favorite`
+
 ## `/admin`
 - 화면 파일: `frontend/src/views/AdminView.vue`
 - 역할: `게임 관리 / 아이템 관리 / 티어표 관리 / 회원 관리` 탭 분리, 선택된 게임의 썸네일 관리, 기본 아이템 다중 드래그 앤 드롭 업로드, 기본 아이템 이름 수정, 사용자 커스텀 아이템 검색/페이지네이션/사용 횟수 확인/미사용 이미지 개별·일괄 삭제, 사용자 커스텀 아이템의 기본 템플릿 승격, 전체 티어표 검색/페이지네이션/공개 여부 확인/완성본 이동, 티어표의 추가 커스텀 아이템을 모달 기반으로 기존 템플릿 또는 새 템플릿에 가져오기, freeform 티어표의 게임 템플릿화, 회원 비밀번호 초기화 포함 회원 관리, 파일 입력 초기화, 아이템 삭제, 게임 삭제

docs/spec.md

@@ -81,6 +81,7 @@
 - 티어표
   - `GET /api/tierlists/public`
   - `GET /api/tierlists/me`
+  - `GET /api/tierlists/favorites/me`
   - `GET /api/tierlists/:id`
   - `POST /api/tierlists/:id/favorite`
   - `DELETE /api/tierlists/:id/favorite`
@@ -130,6 +131,9 @@
 - 비로그인 사용자는 공개된 티어표를 열람만 할 수 있고, 편집 UI와 저장 동작은 비활성화된다.
 - 비공개 티어표라도 관리자는 편집 화면에서 완성본을 열람할 수 있다.
 - 공개 티어표는 목록과 상세 화면에서 즐겨찾기 토글 및 개수를 함께 표시한다.
+- 카드형 목록에서는 즐겨찾기 수/상태만 표시하고, 실제 토글은 상세 화면에서 처리한다.
+- 공개 티어표 목록은 현재 게임 기준으로 제목/작성자 검색을 지원한다.
+- `내 즐겨찾기` 화면에서는 즐겨찾기한 순, 최신 업데이트순, 인기순 정렬을 제공한다.
 - 커스텀 이미지 추가는 다중 파일 선택과 드래그 앤 드롭을 모두 지원한다.
 - 티어 행은 기본 5단으로 시작하지만, 사용자가 직접 추가하거나 제거할 수 있다.
 - 신규 티어표의 공개 여부 기본값은 `ON`이며, 기존 티어표는 편집 화면과 `내 티어표` 목록에서 직접 삭제할 수 있다.
@@ -143,6 +147,7 @@
 - 티어표 목록 메타 정보는 최종 업데이트 시각만 간략하게 표시한다.
 - 저장 성공 시에는 에디터 안에서 반투명 오버레이 기반 확인 모달을 띄우고, PNG export 이미지는 약 `960px` 보드 폭과 `pixelRatio 1.5`, 외곽 여백, 작성자/날짜 하단 메타를 포함해 생성한다.
 - 저장/삭제/가져오기 같은 사용자 행동 피드백은 전역 우측 상단 토스트로 표시한다.
+- 전역 토스트는 동일 메시지/타입이 연속 발생하면 하나로 합쳐 카운트를 올리고, 종료 시 짧은 페이드아웃 애니메이션을 사용한다.
 - 홈 게임 목록은 관리자 상단 고정 순서가 있으면 그 순서를 먼저 적용하고, 그 외 게임은 최근 생성순으로 뒤에 이어진다.
 - `커스텀 티어표 만들기`는 카드가 아니라 홈 우측 상단 버튼으로 진입한다.
 

docs/todo.md

@@ -9,8 +9,10 @@
 - 사용자 커스텀 아이템 승격은 현재 수동 복제 방식이므로, 필요하면 중복 감지나 “비슷한 항목 추천” 같은 보조 UX를 검토한다.
 - 관리자 티어표 관리의 템플릿 생성은 현재 `freeform`만 직접 지원하므로, 필요하면 일반 게임 티어표의 전체 아이템을 복제한 파생 템플릿 생성 UX도 검토한다.
 - 관리자 티어표 관리의 추가 아이템 승격은 현재 커스텀(origin=`custom`) 아이템 기준이므로, 필요하면 “기존 게임 아이템과 비교한 차집합” 기준으로 더 정교하게 확장할 수 있다.
-- 즐겨찾기는 현재 저장/토글만 지원하므로, 필요하면 `내 즐겨찾기` 목록 화면이나 즐겨찾기순 정렬을 추가 검토한다.
+- 즐겨찾기는 현재 `내 즐겨찾기` 목록과 정렬까지 지원하므로, 필요하면 폴더 분류나 메모 같은 개인 정리 기능을 추가 검토한다.
 - 전역 토스트는 기본 시간 기반 자동 종료만 지원하므로, 필요하면 중복 합치기나 액션 링크 포함 형태로 확장할 수 있다.
+- 공개 티어표 검색은 현재 게임별 허브 안에서만 제공하므로, 필요하면 홈 전역 통합 검색도 검토한다.
+- 즐겨찾기 토글은 현재 상세 화면 중심이므로, 필요하면 카드 목록에서도 안전한 보조 인터랙션(예: 길게 누르기, 별도 메뉴)을 검토한다.
 
 ## 배포 전 작업
 - NAS 실제 도메인 기준으로 `VITE_API_ORIGIN`, `CORS_ORIGINS`, `SESSION_SECRET`, `SESSION_COOKIE_SECURE`, `TRUST_PROXY` 값을 설정한다.

docs/update.md

@@ -1,5 +1,14 @@
 # 업데이트 로그
 
+## 2026-03-27 v0.1.45
+- **즐겨찾기 카드 액션 보정**: 카드형 목록에서는 별표를 클릭 액션이 아닌 상태/개수 표시로만 보여주고, 실제 즐겨찾기 토글은 상세 화면에서 처리하도록 조정
+- **토스트 중복/페이드아웃 개선**: 같은 메시지 토스트는 하나로 합치고 카운트를 올리도록 변경했으며, 사라질 때는 짧은 페이드아웃 애니메이션을 적용
+
+## 2026-03-27 v0.1.44
+- **토스트 렌더링 버그 수정**: 전역 토스트가 빈 카드 여러 개로 보이던 ref 참조 문제를 수정해 실제 메시지만 표시되도록 정리
+- **공개 티어표 검색 추가**: 게임별 공개 티어표 목록에서 제목/작성자 기준 검색이 가능하도록 검색창과 API 쿼리 지원 추가
+- **내 즐겨찾기 페이지 추가**: 사용자별 즐겨찾기 목록 화면과 `즐겨찾기한 순 / 최신 업데이트순 / 인기순` 정렬 옵션을 추가
+
 ## 2026-03-27 v0.1.43
 - **전역 토스트 알림 추가**: 저장/삭제/가져오기 같은 사용자 행동 피드백을 상단 인라인 경고 대신 우측 상단 토스트로 통일해 잠시 표시 후 자동으로 사라지도록 변경
 - **관리자 티어표 아이템 가져오기 모달화**: 티어표 관리의 추가 아이템 영역을 소형 그리드로 다듬고, 가져오기 시점에 `기존 템플릿에 추가 / 새 템플릿 만들기`를 선택하는 모달 흐름으로 재정리

frontend/src/App.vue

@@ -8,7 +8,7 @@ import { useToast } from './composables/useToast'
 const route = useRoute()
 const router = useRouter()
 const auth = useAuthStore()
-const toast = useToast()
+const { toasts, dismissToast } = useToast()
 const isAdmin = computed(() => !!auth.user?.isAdmin)
 const avatarUrl = computed(() => {
   if (!auth.user?.avatarSrc) return ''
@@ -65,6 +65,7 @@ async function logout() {
       <nav class="nav">
         <RouterLink to="/" class="nav__link">게임</RouterLink>
         <RouterLink to="/me" class="nav__link">내 티어표</RouterLink>
+        <RouterLink v-if="auth.user" to="/favorites" class="nav__link">즐겨찾기</RouterLink>
         <RouterLink v-if="isAdmin" to="/admin" class="nav__link">관리자</RouterLink>
 
         <RouterLink v-if="!auth.user" to="/login" class="nav__link">로그인</RouterLink>
@@ -84,9 +85,12 @@ async function logout() {
       <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 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>
   </div>
@@ -226,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);
@@ -240,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;

frontend/src/composables/useToast.js

@@ -2,18 +2,48 @@ import { readonly, ref } from 'vue'
 
 const toasts = ref([])
 let toastSeq = 0
+const TOAST_EXIT_MS = 220
+
+function clearToastTimer(toast) {
+  if (toast?.timerId) {
+    window.clearTimeout(toast.timerId)
+    toast.timerId = 0
+  }
+}
+
+function removeToast(id) {
+  toasts.value = toasts.value.filter((toast) => toast.id !== id)
+}
 
 function dismissToast(id) {
-  toasts.value = toasts.value.filter((toast) => toast.id !== id)
+  const target = toasts.value.find((toast) => toast.id === id)
+  if (!target || target.isClosing) return
+
+  clearToastTimer(target)
+  target.isClosing = true
+  target.timerId = window.setTimeout(() => removeToast(id), TOAST_EXIT_MS)
 }
 
 function showToast(message, { type = 'info', duration = 2600 } = {}) {
   if (!message) return ''
+  const duplicated = toasts.value.find((toast) => toast.message === message && toast.type === type && !toast.isClosing)
+
+  if (duplicated) {
+    duplicated.count = (duplicated.count || 1) + 1
+    clearToastTimer(duplicated)
+    if (duration > 0) {
+      duplicated.timerId = window.setTimeout(() => dismissToast(duplicated.id), duration)
+    }
+    toasts.value = [...toasts.value]
+    return duplicated.id
+  }
+
   const id = `toast-${++toastSeq}`
-  toasts.value = [...toasts.value, { id, message, type }]
+  const nextToast = { id, message, type, count: 1, isClosing: false, timerId: 0 }
+  toasts.value = [...toasts.value, nextToast]
 
   if (duration > 0) {
-    window.setTimeout(() => dismissToast(id), duration)
+    nextToast.timerId = window.setTimeout(() => dismissToast(id), duration)
   }
 
   return id

frontend/src/lib/api.js

@@ -56,7 +56,11 @@ export const api = {
 
   listPublicTierLists: (gameId) =>
     request(`/api/tierlists/public?gameId=${encodeURIComponent(gameId || '')}`),
+  searchPublicTierLists: (gameId, q = '') =>
+    request(`/api/tierlists/public?gameId=${encodeURIComponent(gameId || '')}&q=${encodeURIComponent(q || '')}`),
   listMyTierLists: () => request('/api/tierlists/me'),
+  listMyFavoriteTierLists: ({ q = '', sort = 'favorited' } = {}) =>
+    request(`/api/tierlists/favorites/me?q=${encodeURIComponent(q)}&sort=${encodeURIComponent(sort)}`),
   getTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}`),
   favoriteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/favorite`, { method: 'POST' }),
   unfavoriteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/favorite`, { method: 'DELETE' }),

frontend/src/router/index.js

@@ -5,6 +5,7 @@ import GameHubView from '../views/GameHubView.vue'
 import TierEditorView from '../views/TierEditorView.vue'
 import LoginView from '../views/LoginView.vue'
 import MyTierListsView from '../views/MyTierListsView.vue'
+import FavoriteTierListsView from '../views/FavoriteTierListsView.vue'
 import AdminView from '../views/AdminView.vue'
 import ProfileView from '../views/ProfileView.vue'
 
@@ -18,9 +19,9 @@ export function createRouter() {
       { path: '/editor/:gameId/:tierListId', name: 'editEditor', component: TierEditorView },
       { path: '/login', name: 'login', component: LoginView },
       { path: '/me', name: 'me', component: MyTierListsView },
+      { path: '/favorites', name: 'favorites', component: FavoriteTierListsView },
       { path: '/admin', name: 'admin', component: AdminView },
       { path: '/profile', name: 'profile', component: ProfileView },
     ],
   })
 }
-

frontend/src/views/FavoriteTierListsView.vue

@@ -0,0 +1,261 @@
+<script setup>
+import { computed, onMounted, ref } 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 favorites = ref([])
+const query = ref('')
+const sort = ref('favorited')
+const sortLabel = computed(() =>
+  sort.value === 'favorited' ? '즐겨찾기한 날짜' : sort.value === 'updated' ? '최종 업데이트' : '즐겨찾기 수'
+)
+
+function fmt(ts) {
+  return new Date(ts).toLocaleString(undefined, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+function displayNameOf(tierList) {
+  return tierList.authorName || '알 수 없음'
+}
+
+function avatarSrcOf(tierList) {
+  return tierList.authorAvatarSrc ? toApiUrl(tierList.authorAvatarSrc) : ''
+}
+
+function avatarFallbackOf(tierList) {
+  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
+}
+
+function tierListThumbnailUrl(tierList) {
+  return tierList.thumbnailSrc ? toApiUrl(tierList.thumbnailSrc) : ''
+}
+
+async function loadFavorites() {
+  try {
+    const data = await api.listMyFavoriteTierLists({ q: query.value, sort: sort.value })
+    favorites.value = data.tierLists || []
+  } catch (e) {
+    toast.error('로그인이 필요해요.')
+    router.push('/login?redirect=/favorites')
+  }
+}
+
+function openTierList(tierList) {
+  router.push(`/editor/${tierList.gameId}/${tierList.id}`)
+}
+
+onMounted(loadFavorites)
+</script>
+
+<template>
+  <section class="wrap">
+    <div class="head">
+      <div>
+        <h2 class="title">내 즐겨찾기</h2>
+        <div class="desc">마음에 드는 티어표를 모아보고, 원하는 기준으로 정렬할 수 있어요.</div>
+      </div>
+      <div class="toolbar">
+        <input v-model="query" class="input" placeholder="제목, 게임, 작성자 검색" @keydown.enter.prevent="loadFavorites" />
+        <select v-model="sort" class="select" @change="loadFavorites">
+          <option value="favorited">즐겨찾기한 순</option>
+          <option value="updated">최신 업데이트순</option>
+          <option value="favorites">인기순</option>
+        </select>
+        <button class="btn" @click="loadFavorites">검색</button>
+      </div>
+    </div>
+
+    <div v-if="favorites.length === 0" class="empty">즐겨찾기한 티어표가 없어요.</div>
+    <div v-else class="list">
+      <article v-for="tierList in favorites" :key="tierList.id" class="row">
+        <button class="row__body" @click="openTierList(tierList)">
+          <div class="row__thumbWrap">
+            <img v-if="tierListThumbnailUrl(tierList)" class="row__thumb" :src="tierListThumbnailUrl(tierList)" :alt="tierList.title" />
+            <div v-else class="row__thumbPlaceholder"></div>
+          </div>
+          <div class="row__head">
+            <div class="row__title">{{ tierList.title }}</div>
+            <div class="row__author">
+              <img v-if="avatarSrcOf(tierList)" class="row__avatar" :src="avatarSrcOf(tierList)" :alt="displayNameOf(tierList)" />
+              <div v-else class="row__avatar row__avatar--fallback">{{ avatarFallbackOf(tierList) }}</div>
+              <span>by {{ displayNameOf(tierList) }}</span>
+            </div>
+          </div>
+        </button>
+        <div class="row__foot">
+          <div class="row__meta">
+            <div>{{ tierList.gameName || tierList.gameId }}</div>
+            <div>{{ sortLabel }}: {{ fmt(sort === 'favorited' ? tierList.favoritedAt : tierList.updatedAt) }}</div>
+          </div>
+          <div class="favoriteStat">★ {{ tierList.favoriteCount || 0 }}</div>
+        </div>
+      </article>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.wrap {
+  display: grid;
+  gap: 14px;
+}
+.head {
+  display: flex;
+  gap: 14px;
+  justify-content: space-between;
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+.title {
+  margin: 0;
+  font-size: 28px;
+}
+.desc {
+  margin-top: 6px;
+  opacity: 0.78;
+}
+.toolbar {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.input,
+.select {
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(0, 0, 0, 0.18);
+  color: rgba(255, 255, 255, 0.92);
+}
+.btn {
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.92);
+  font-weight: 800;
+  cursor: pointer;
+}
+.empty {
+  opacity: 0.76;
+}
+.list {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+.row {
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.04);
+  overflow: hidden;
+  display: grid;
+  gap: 10px;
+}
+.row__body {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+  display: grid;
+  gap: 10px;
+}
+.row__thumbWrap {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: rgba(255, 255, 255, 0.03);
+}
+.row__thumb,
+.row__thumbPlaceholder {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.row__thumb {
+  object-fit: cover;
+}
+.row__thumbPlaceholder {
+  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
+}
+.row__head {
+  padding: 14px 14px 0;
+  display: grid;
+  gap: 10px;
+}
+.row__title {
+  font-weight: 800;
+  font-size: 18px;
+}
+.row__author {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  opacity: 0.86;
+}
+.row__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  object-fit: cover;
+  background: rgba(255, 255, 255, 0.08);
+}
+.row__avatar--fallback {
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  font-weight: 900;
+}
+.row__foot {
+  padding: 0 14px 14px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+}
+.row__meta {
+  display: grid;
+  gap: 4px;
+  opacity: 0.78;
+  font-size: 13px;
+}
+.favoriteStat {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.92);
+  border-radius: 999px;
+  padding: 7px 10px;
+  font-weight: 800;
+}
+@media (max-width: 1100px) {
+  .list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 720px) {
+  .list {
+    grid-template-columns: 1fr;
+  }
+  .toolbar {
+    width: 100%;
+  }
+  .input,
+  .select,
+  .btn {
+    width: 100%;
+  }
+}
+</style>

frontend/src/views/GameHubView.vue

@@ -4,18 +4,17 @@ import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
 import { useAuthStore } from '../stores/auth'
-import { useToast } from '../composables/useToast'
 
 const route = useRoute()
 const router = useRouter()
 const auth = useAuthStore()
-const toast = useToast()
 
 const gameId = computed(() => route.params.gameId)
 
 const gameName = ref('')
 const tierLists = ref([])
 const error = ref('')
+const query = ref('')
 
 function fmt(ts) {
   return new Date(ts).toLocaleString(undefined, {
@@ -44,14 +43,21 @@ function tierListThumbnailUrl(tierList) {
 }
 
 onMounted(async () => {
+  await loadTierLists()
+})
+
+async function loadTierLists() {
   try {
-    const [gameRes, listRes] = await Promise.all([api.getGame(gameId.value), api.listPublicTierLists(gameId.value)])
+    const [gameRes, listRes] = await Promise.all([
+      api.getGame(gameId.value),
+      api.searchPublicTierLists(gameId.value, query.value),
+    ])
     gameName.value = gameRes.game?.name || gameId.value
     tierLists.value = listRes.tierLists || []
   } catch (e) {
     error.value = '게임 정보를 불러오지 못했어요.'
   }
-})
+}
 
 function createNew() {
   if (!auth.user) {
@@ -65,19 +71,8 @@ function openTierList(id) {
   router.push(`/editor/${gameId.value}/${id}`)
 }
 
-async function toggleFavorite(tierList) {
-  if (!auth.user) {
-    router.push(`/login?redirect=/games/${gameId.value}`)
-    return
-  }
-
-  try {
-    const data = tierList.isFavorited ? await api.unfavoriteTierList(tierList.id) : await api.favoriteTierList(tierList.id)
-    tierLists.value = tierLists.value.map((entry) => (entry.id === tierList.id ? { ...entry, ...data.tierList } : entry))
-    toast.success(tierList.isFavorited ? '즐겨찾기를 해제했어요.' : '즐겨찾기에 추가했어요.')
-  } catch (e) {
-    toast.error('즐겨찾기 처리에 실패했어요.')
-  }
+function submitSearch() {
+  loadTierLists()
 }
 </script>
 
@@ -95,7 +90,13 @@ async function toggleFavorite(tierList) {
 
   <div v-if="error" class="error">{{ error }}</div>
   <section class="panel">
-    <div class="panel__title">공개 티어표</div>
+    <div class="panel__head">
+      <div class="panel__title">공개 티어표</div>
+      <div class="searchBar">
+        <input v-model="query" class="searchBar__input" placeholder="제목 또는 작성자 검색" @keydown.enter.prevent="submitSearch" />
+        <button class="searchBar__button" @click="submitSearch">검색</button>
+      </div>
+    </div>
     <div v-if="tierLists.length === 0" class="empty">아직 공개 티어표가 없어요.</div>
     <div v-else class="list">
       <article v-for="t in tierLists" :key="t.id" class="row">
@@ -115,9 +116,9 @@ async function toggleFavorite(tierList) {
         </button>
         <div class="row__foot">
           <div class="row__meta">{{ fmt(t.updatedAt) }}</div>
-          <button class="favoriteBtn" @click="toggleFavorite(t)">
+          <div class="favoriteStat" :title="t.isFavorited ? '이미 즐겨찾기한 티어표' : '즐겨찾기 수'">
             {{ t.isFavorited ? '★' : '☆' }} {{ t.favoriteCount || 0 }}
-          </button>
+          </div>
         </div>
       </article>
     </div>
@@ -173,8 +174,38 @@ async function toggleFavorite(tierList) {
 }
 .panel__title {
   font-weight: 800;
+}
+.panel__head {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
   margin-bottom: 10px;
 }
+.searchBar {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.searchBar__input {
+  min-width: 240px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(0, 0, 0, 0.18);
+  color: rgba(255, 255, 255, 0.92);
+}
+.searchBar__button {
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.92);
+  font-weight: 800;
+  cursor: pointer;
+}
 .empty {
   opacity: 0.75;
 }
@@ -271,18 +302,14 @@ async function toggleFavorite(tierList) {
   justify-content: space-between;
   margin-top: auto;
 }
-.favoriteBtn {
+.favoriteStat {
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(255, 255, 255, 0.05);
   color: rgba(255, 255, 255, 0.92);
   border-radius: 999px;
   padding: 7px 10px;
-  cursor: pointer;
   font-weight: 800;
 }
-.favoriteBtn:hover {
-  background: rgba(255, 255, 255, 0.09);
-}
 @media (max-width: 1100px) {
   .list {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -292,5 +319,9 @@ async function toggleFavorite(tierList) {
   .list {
     grid-template-columns: 1fr;
   }
+  .searchBar__input {
+    min-width: 0;
+    width: 100%;
+  }
 }
 </style>