릴리스: v1.4.8 주제 헤더 안정화와 검색 헤더 통일

frontend/src/views/GameHubView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
@@ -15,7 +15,9 @@ const tierLists = ref([])
 const error = ref('')
 const query = ref('')
 const brokenThumbnailIds = ref({})
+const isTopicLoading = ref(false)
 const isListView = computed(() => route.query.view === 'list')
+const topicTitle = computed(() => topicName.value || (isTopicLoading.value ? '주제 불러오는 중...' : ''))
 
 function fmt(ts) {
   return new Date(ts).toLocaleDateString(undefined, {
@@ -47,21 +49,20 @@ function handleThumbnailError(tierListId) {
   brokenThumbnailIds.value = { ...brokenThumbnailIds.value, [tierListId]: true }
 }
 
-onMounted(async () => {
-  await loadTierLists()
-})
-
 async function loadTierLists() {
+  isTopicLoading.value = true
   try {
     const [gameRes, listRes] = await Promise.all([
       api.getGame(topicId.value),
       api.searchPublicTierLists(topicId.value, query.value),
     ])
-    topicName.value = gameRes.game?.name || topicId.value
+    topicName.value = gameRes.game?.name || ''
     brokenThumbnailIds.value = {}
     tierLists.value = listRes.tierLists || []
   } catch (e) {
     error.value = '주제 정보를 불러오지 못했어요.'
+  } finally {
+    isTopicLoading.value = false
   }
 }
 
@@ -80,13 +81,23 @@ function openTierList(id) {
 function submitSearch() {
   loadTierLists()
 }
+
+watch(
+  topicId,
+  () => {
+    topicName.value = ''
+    error.value = ''
+    loadTierLists()
+  },
+  { immediate: true }
+)
 </script>
 
 <template>
   <section class="pageHead">
     <div class="pageHead__main">
       <div class="pageHead__eyebrow">Collection</div>
-      <h2 class="pageHead__title">{{ topicName || topicId }}</h2>
+      <h2 class="pageHead__title">{{ topicTitle }}</h2>
       <div class="pageHead__desc">이 주제의 공개 티어표를 같은 카드 레이아웃으로 살펴보고 이어서 새 티어표를 만들 수 있어요.</div>
     </div>
     <div class="pageHead__aside toolbar">