릴리스: v1.2.73 게임 허브 리스트 마감 보정

frontend/src/views/GameHubView.vue

@@ -15,6 +15,7 @@ const gameName = ref('')
 const tierLists = ref([])
 const error = ref('')
 const query = ref('')
+const brokenThumbnailIds = ref({})
 const isListView = computed(() => route.query.view === 'list')
 
 function fmt(ts) {
@@ -38,9 +39,15 @@ function avatarFallbackOf(tierList) {
 }
 
 function tierListThumbnailUrl(tierList) {
+  if (!tierList?.id || brokenThumbnailIds.value[tierList.id]) return ''
   return tierList.thumbnailSrc ? toApiUrl(tierList.thumbnailSrc) : ''
 }
 
+function handleThumbnailError(tierListId) {
+  if (!tierListId || brokenThumbnailIds.value[tierListId]) return
+  brokenThumbnailIds.value = { ...brokenThumbnailIds.value, [tierListId]: true }
+}
+
 onMounted(async () => {
   await loadTierLists()
 })
@@ -52,6 +59,7 @@ async function loadTierLists() {
       api.searchPublicTierLists(gameId.value, query.value),
     ])
     gameName.value = gameRes.game?.name || gameId.value
+    brokenThumbnailIds.value = {}
     tierLists.value = listRes.tierLists || []
   } catch (e) {
     error.value = '게임 정보를 불러오지 못했어요.'
@@ -101,7 +109,7 @@ function submitSearch() {
       <article v-for="t in tierLists" :key="t.id" class="boardCard" :class="{ 'boardCard--list': isListView }">
         <button class="boardCard__body" :class="{ 'boardCard__body--list': isListView }" @click="openTierList(t.id)">
           <div class="boardCard__thumbWrap">
-            <img v-if="tierListThumbnailUrl(t)" class="boardCard__thumb" :src="tierListThumbnailUrl(t)" :alt="t.title" />
+            <img v-if="tierListThumbnailUrl(t)" class="boardCard__thumb" :src="tierListThumbnailUrl(t)" alt="" @error="handleThumbnailError(t.id)" />
             <div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
           </div>
           <div class="boardCard__head">
@@ -251,8 +259,8 @@ function submitSearch() {
 }
 
 .boardCard__body--list {
-  grid-template-columns: 188px minmax(0, 1fr);
-  align-items: stretch;
+  grid-template-columns: 76px minmax(0, 1fr);
+  align-items: center;
 }
 .boardCard__thumbWrap {
   min-width: 0;
@@ -265,7 +273,7 @@ function submitSearch() {
 .boardCard--list .boardCard__thumbWrap {
   aspect-ratio: auto;
   height: 100%;
-  padding: 14px;
+  padding: 14px 0 14px 14px;
 }
 .boardCard__thumb {
   width: 100%;
@@ -277,7 +285,10 @@ function submitSearch() {
 
 .boardCard--list .boardCard__thumb,
 .boardCard--list .boardCard__thumbPlaceholder {
-  min-height: 128px;
+  width: 48px;
+  height: 48px;
+  min-height: 48px;
+  border-radius: 12px;
 }
 .boardCard__thumbPlaceholder {
   width: 100%;
@@ -300,6 +311,7 @@ function submitSearch() {
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
+  word-break: break-word;
 }
 .boardCard__head {
   min-width: 0;
@@ -310,7 +322,7 @@ function submitSearch() {
 
 .boardCard--list .boardCard__head {
   height: 100%;
-  padding: 16px 18px 16px 0;
+  padding: 14px 16px 14px 0;
   align-content: center;
 }
 .boardCard__titleRow,
@@ -363,9 +375,12 @@ function submitSearch() {
 .favoriteStat {
   flex: 0 0 auto;
   min-width: 0;
+  max-width: 100%;
   font-size: 13px;
   color: rgba(255, 255, 255, 0.64);
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .boardCard__date {
@@ -379,6 +394,10 @@ function submitSearch() {
   .boardCard--list .boardCard__head {
     padding: 0 18px 18px;
   }
+
+  .boardCard--list .boardCard__thumbWrap {
+    padding: 14px 14px 0;
+  }
 }
 
 @media (max-width: 720px) {