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

docs/update.md

@@ -1,5 +1,9 @@
 # 업데이트 로그
 
+## 2026-03-31 v1.2.73
+- 게임 허브 리스트형 보기의 썸네일을 48px 밀도로 축소해 한 줄이 과하게 커 보이던 인상을 줄이고, 더 많은 티어표를 한눈에 볼 수 있게 조정함.
+- 깨진 대표 썸네일은 `img` alt 텍스트가 길게 노출되지 않도록 에러 시 즉시 플레이스홀더로 대체하고, 제목/메타 말줄임을 더 보강해 레이아웃 붕괴를 막음.
+
 ## 2026-03-31 v1.2.72
 - 게임 허브 공개 티어표 목록은 카드 폭과 제목/메타 줄 계산을 다시 조정해, 브라우저 폭에 따라 썸네일과 정보가 카드 밖으로 넘치던 레이아웃 깨짐을 보정함.
 - 상단 워크스페이스 헤더에 grid/list 보기 토글을 추가하고, 게임 허브는 그리드 카드형과 가로 리스트형을 즉시 전환해 볼 수 있도록 확장함.

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) {