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

docs/update.md

@@ -1,5 +1,9 @@
 # 업데이트 로그
 
+## 2026-03-31 v1.2.72
+- 게임 허브 공개 티어표 목록은 카드 폭과 제목/메타 줄 계산을 다시 조정해, 브라우저 폭에 따라 썸네일과 정보가 카드 밖으로 넘치던 레이아웃 깨짐을 보정함.
+- 상단 워크스페이스 헤더에 grid/list 보기 토글을 추가하고, 게임 허브는 그리드 카드형과 가로 리스트형을 즉시 전환해 볼 수 있도록 확장함.
+
 ## 2026-03-31 v1.2.71
 - 게임 허브 공개 티어표 카드는 자동 폭 그리드와 2줄 제목/유연한 메타 배치로 보정해, 브라우저 폭이 줄어들어도 썸네일과 텍스트가 카드 밖으로 넘치지 않도록 정리함.
 - 공개 티어표 상세에서는 다른 사용자의 티어표를 복사해 내 작업본으로 가져오는 기능을 추가하고, 복사본에는 원본 제목/작성자 정보를 작은 출처 메모로 남기도록 확장함.

frontend/src/App.vue

@@ -55,6 +55,8 @@ const leftNavItems = computed(() => {
   return items.filter((item) => !item.requiresAuth || auth.user)
 })
 const showRightRailAction = computed(() => false)
+const showGameHubViewToggle = computed(() => route.name === 'gameHub')
+const gameHubViewMode = computed(() => (route.query.view === 'list' ? 'list' : 'grid'))
 const leftBottomPrimaryAction = computed(() => {
   if (route.name === 'home' && auth.user) {
     return { label: '커스텀 티어표 만들기', to: '/editor/freeform/new' }
@@ -242,6 +244,14 @@ function toggleRightRail() {
   }
 }
 
+function setGameHubViewMode(mode) {
+  if (route.name !== 'gameHub') return
+  const nextQuery = { ...route.query }
+  if (mode === 'list') nextQuery.view = 'list'
+  else delete nextQuery.view
+  router.replace({ path: route.path, query: nextQuery })
+}
+
 function openCollapsedSearch() {
   if (!leftRailCollapsed.value || isMobileLayout.value) return
   isCollapsedSearchOpen.value = true
@@ -353,6 +363,14 @@ function submitGlobalSearch() {
               <span class="workspaceHead__brandSub">by zenn</span>
             </div>
             <div class="workspaceHead__actions">
+              <div v-if="showGameHubViewToggle" class="viewToggle" role="group" aria-label="티어표 보기 방식">
+                <button class="ghostIcon ghostIcon--iconOnly" :class="{ 'ghostIcon--active': gameHubViewMode === 'grid' }" type="button" aria-label="그리드 보기" @click="setGameHubViewMode('grid')">
+                  <img :src="iconGridView" alt="" />
+                </button>
+                <button class="ghostIcon ghostIcon--iconOnly" :class="{ 'ghostIcon--active': gameHubViewMode === 'list' }" type="button" aria-label="리스트 보기" @click="setGameHubViewMode('list')">
+                  <img :src="iconLists" alt="" />
+                </button>
+              </div>
               <button v-if="!rightRailOpen" class="ghostIcon ghostIcon--iconOnly" type="button" aria-label="패널 열기" @click="toggleRightRail">
                 <img :src="iconDockToLeft" alt="" />
               </button>
@@ -853,6 +871,26 @@ function submitGlobalSearch() {
   flex-wrap: wrap;
 }
 
+.viewToggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.viewToggle .ghostIcon--iconOnly {
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  border-radius: 10px;
+}
+
+.ghostIcon--active {
+  background: rgba(255, 255, 255, 0.08);
+}
+
 .workspaceBody {
   min-height: 0;
   padding: 18px 18px 32px;

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%;