릴리스: v1.3.23 내 티어표 그리드 열 수 정렬

docs/update.md

@@ -1,5 +1,12 @@
 # 업데이트 로그
 
+## 2026-04-01 v1.3.23
+- 내 티어표 목록 그리드는 auto-fit 최대폭 방식 대신 게임 목록과 같은 4/3/2/1열 고정 반응형 규칙으로 맞춰, 넓은 화면에서 카드 한 장이 애매하게 다음 줄로 떨어지며 여백이 크게 남던 문제를 줄임.
+
+## 2026-04-01 v1.3.22
+- 내 티어표 카드는 게임 목록과 같은 상단 히어로/패널 문법으로 다시 맞추고, 깨진 썸네일은 alt 텍스트가 카드 폭을 밀지 않도록 플레이스홀더로 즉시 대체해 카드 수와 헤더 폭이 흔들리지 않게 보정함.
+- 오른쪽 사이드 광고 프레임은 별도 보더·패딩·배경을 제거해, 광고 자체가 가진 각진 형태와 색이 그대로 보이도록 더 담백하게 정리함.
+
 ## 2026-04-01 v1.3.21
 - 내 티어표 카드는 게임 목록 화면과 같은 카드 폭/헤더/메타 배치 문법으로 맞춰, 화면 간 카드 크기와 정보 정렬이 더 통일된 인상으로 보이도록 정리함.
 

frontend/src/components/RightRailAd.vue

@@ -78,14 +78,10 @@ onMounted(async () => {
 
 .rightRailAd__frame {
   min-height: 520px;
-  padding: 14px;
-  border-radius: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.02);
 }
 
 .rightRailAd__slot {
   width: 100%;
-  min-height: 490px;
+  min-height: 520px;
 }
 </style>

frontend/src/views/MyTierListsView.vue

@@ -9,6 +9,7 @@ const router = useRouter()
 const toast = useToast()
 const myLists = ref([])
 const error = ref('')
+const brokenThumbnailIds = ref({})
 
 watch(error, (message) => {
   if (!message) return
@@ -37,12 +38,19 @@ 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 () => {
   try {
     const data = await api.listMyTierLists()
+    brokenThumbnailIds.value = {}
     myLists.value = data.tierLists || []
   } catch (e) {
     toast.error('로그인이 필요해요.')
@@ -51,53 +59,87 @@ onMounted(async () => {
 })
 
 function openList(t) {
-  router.push(`/editor/${t.gameId}/${t.id}`)
+  router.push(
+    "/editor/" + t.gameId + "/" + t.id,
+  )
 }
-
 </script>
 
 <template>
-  <section class="pageWrap">
+  <section class="dashboardHero">
-    <header class="pageHead">
+    <div class="dashboardHero__left">
-      <div class="pageHead__main">
+      <div class="dashboardHero__eyebrow">Library</div>
-        <div class="pageHead__eyebrow">Library</div>
+      <h2 class="dashboardHero__title">내 티어표</h2>
-        <h2 class="pageHead__title">내 티어표</h2>
+      <p class="dashboardHero__desc">직접 저장한 티어표를 같은 카드 레이아웃으로 다시 열고 정리할 수 있어요.</p>
-        <div class="pageHead__desc">직접 저장한 티어표를 같은 카드 레이아웃으로 다시 열고 정리할 수 있어요.</div>
+    </div>
-      </div>
+  </section>
-    </header>
+
-    <div class="card">
+  <section class="panel">
-      <div v-if="myLists.length === 0" class="empty">아직 저장한 티어표가 없어요.</div>
+    <div v-if="myLists.length === 0" class="empty">아직 저장한 티어표가 없어요.</div>
-      <div v-else class="list">
+    <div v-else class="list">
-        <article v-for="t in myLists" :key="t.id" class="boardCard">
+      <article v-for="t in myLists" :key="t.id" class="boardCard">
-          <button class="boardCard__body" @click="openList(t)">
+        <button class="boardCard__body" @click="openList(t)">
-            <div class="boardCard__thumbWrap">
+          <div class="boardCard__thumbWrap">
-              <img v-if="tierListThumbnailUrl(t)" class="boardCard__thumb" :src="tierListThumbnailUrl(t)" :alt="t.title" />
+            <img
-              <div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
+              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">
+            <div class="boardCard__titleRow">
+              <div class="boardCard__title">{{ t.title }}</div>
+              <div class="favoriteStat">♡ {{ t.favoriteCount || 0 }}</div>
             </div>
-            <div class="boardCard__head">
+            <div class="boardCard__metaRow">
-              <div class="boardCard__titleRow">
+              <div class="boardCard__author">
-                <div class="boardCard__title">{{ t.title }}</div>
+                <img v-if="avatarSrcOf(t)" class="boardCard__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
-                <div class="favoriteStat">♡ {{ t.favoriteCount || 0 }}</div>
+                <div v-else class="boardCard__avatar boardCard__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
-              </div>
+                <span class="boardCard__authorName">{{ displayNameOf(t) }}</span>
-              <div class="boardCard__metaRow">
-                <div class="boardCard__author">
-                  <img v-if="avatarSrcOf(t)" class="boardCard__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
-                  <div v-else class="boardCard__avatar boardCard__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
-                  <span class="boardCard__authorName">{{ displayNameOf(t) }}</span>
-                </div>
-                <div class="boardCard__date">{{ fmt(t.updatedAt) }}</div>
               </div>
+              <div class="boardCard__date">{{ fmt(t.updatedAt) }}</div>
             </div>
-          </button>
+          </div>
-        </article>
+        </button>
-      </div>
+      </article>
     </div>
   </section>
 </template>
 
 <style scoped>
-.card {
+.dashboardHero {
-  border: 0;
+  display: flex;
+  gap: 18px;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: 6px 2px 18px;
+}
+.dashboardHero__left {
+  display: grid;
+  gap: 8px;
+}
+.dashboardHero__eyebrow {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.42);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.dashboardHero__title {
+  margin: 4px 0 6px;
+  font-size: 32px;
+  letter-spacing: -0.04em;
+  color: rgba(255, 255, 255, 0.96);
+}
+.dashboardHero__desc {
+  margin: 0;
+  color: rgba(255, 255, 255, 0.58);
+  max-width: 720px;
+}
+.panel {
   background: transparent;
   border-radius: 0;
   padding: 0;
@@ -107,8 +149,7 @@ function openList(t) {
 }
 .list {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
-  justify-content: start;
   gap: 18px;
 }
 .boardCard {
@@ -137,6 +178,7 @@ function openList(t) {
   padding: 0;
   width: 100%;
   display: grid;
+  overflow: hidden;
 }
 .boardCard__thumbWrap {
   min-width: 0;
@@ -180,6 +222,7 @@ function openList(t) {
   padding: 16px 18px 18px;
   display: grid;
   gap: 8px;
+  overflow: hidden;
 }
 .boardCard__titleRow,
 .boardCard__metaRow {
@@ -188,11 +231,9 @@ function openList(t) {
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 10px;
 }
-
 .boardCard__titleRow {
   align-items: flex-start;
 }
-
 .boardCard__metaRow {
   align-items: flex-end;
 }
@@ -241,7 +282,17 @@ function openList(t) {
 .boardCard__date {
   font-size: 10px;
 }
-@media (max-width: 720px) {
+@media (max-width: 1400px) {
+  .list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@media (max-width: 1200px) {
+  .list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 900px) {
   .list {
     grid-template-columns: 1fr;
   }