릴리스: v0.1.44 공개 목록 검색과 즐겨찾기 페이지 추가

frontend/src/views/GameHubView.vue

@@ -16,6 +16,7 @@ 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 +45,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) {
@@ -79,6 +87,10 @@ async function toggleFavorite(tierList) {
     toast.error('즐겨찾기 처리에 실패했어요.')
   }
 }
+
+function submitSearch() {
+  loadTierLists()
+}
 </script>
 
 <template>
@@ -95,7 +107,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">
@@ -173,8 +191,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;
 }
@@ -292,5 +340,9 @@ async function toggleFavorite(tierList) {
   .list {
     grid-template-columns: 1fr;
   }
+  .searchBar__input {
+    min-width: 0;
+    width: 100%;
+  }
 }
 </style>