릴리스: v1.2.72 게임 허브 보기 전환과 카드 보정

frontend/src/views/GameHubView.vue

@@ -15,6 +15,7 @@ const gameName = ref('')
 const tierLists = ref([])
 const error = ref('')
 const query = ref('')
+const isListView = computed(() => route.query.view === 'list')
 
 function fmt(ts) {
   return new Date(ts).toLocaleDateString(undefined, {
@@ -96,9 +97,9 @@ function submitSearch() {
       </div>
     </div>
     <div v-if="tierLists.length === 0" class="empty">아직 공개 티어표가 없어요.</div>
-    <div v-else class="list">
-      <article v-for="t in tierLists" :key="t.id" class="boardCard">
-        <button class="boardCard__body" @click="openTierList(t.id)">
+    <div v-else class="list" :class="{ 'list--table': isListView }">
+      <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" />
             <div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
@@ -213,11 +214,15 @@ function submitSearch() {
 }
 .list {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
   gap: 18px;
-  justify-content: start;
+}
+
+.list--table {
+  grid-template-columns: 1fr;
 }
 .boardCard {
+  min-width: 0;
   border-radius: 22px;
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: rgba(62, 62, 62, 0.82);
@@ -234,6 +239,7 @@ function submitSearch() {
   transform: translateY(-2px);
 }
 .boardCard__body {
+  min-width: 0;
   text-align: left;
   padding: 0;
   border: 0;
@@ -243,12 +249,24 @@ function submitSearch() {
   width: 100%;
   display: grid;
 }
+
+.boardCard__body--list {
+  grid-template-columns: 188px minmax(0, 1fr);
+  align-items: stretch;
+}
 .boardCard__thumbWrap {
+  min-width: 0;
   width: 100%;
   aspect-ratio: 16 / 9;
   padding: 14px 14px 0;
   box-sizing: border-box;
 }
+
+.boardCard--list .boardCard__thumbWrap {
+  aspect-ratio: auto;
+  height: 100%;
+  padding: 14px;
+}
 .boardCard__thumb {
   width: 100%;
   height: 100%;
@@ -256,6 +274,11 @@ function submitSearch() {
   display: block;
   border-radius: 18px;
 }
+
+.boardCard--list .boardCard__thumb,
+.boardCard--list .boardCard__thumbPlaceholder {
+  min-height: 128px;
+}
 .boardCard__thumbPlaceholder {
   width: 100%;
   height: 100%;
@@ -284,13 +307,18 @@ function submitSearch() {
   display: grid;
   gap: 8px;
 }
+
+.boardCard--list .boardCard__head {
+  height: 100%;
+  padding: 16px 18px 16px 0;
+  align-content: center;
+}
 .boardCard__titleRow,
 .boardCard__metaRow {
   min-width: 0;
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: 10px;
-  align-items: center;
-  justify-content: space-between;
 }
 
 .boardCard__titleRow {
@@ -299,15 +327,16 @@ function submitSearch() {
 
 .boardCard__metaRow {
   align-items: flex-end;
-  flex-wrap: wrap;
 }
 .boardCard__author {
   min-width: 0;
+  max-width: 100%;
   display: inline-flex;
   gap: 7px;
   align-items: center;
   font-size: 13px;
   opacity: 0.86;
+  overflow: hidden;
 }
 .boardCard__authorName {
   min-width: 0;
@@ -342,20 +371,21 @@ function submitSearch() {
 .boardCard__date {
   font-size: 10px;
 }
-@media (max-width: 1400px) {
-  .list {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-@media (max-width: 1024px) {
-  .list {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+@media (max-width: 900px) {
+  .boardCard__body--list {
+    grid-template-columns: 1fr;
+  }
+
+  .boardCard--list .boardCard__head {
+    padding: 0 18px 18px;
   }
 }
+
 @media (max-width: 720px) {
   .list {
     grid-template-columns: 1fr;
   }
+
   .searchBar__input {
     min-width: 0;
     width: 100%;