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

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;