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