목록 보기 전환 정리

frontend/src/views/MyTierListsView.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
 import { useToast } from '../composables/useToast'
@@ -8,10 +8,12 @@ import { editorPath, loginPath } from '../lib/paths'
 import { displayInitialFrom } from '../lib/display'
 
 const router = useRouter()
+const route = useRoute()
 const toast = useToast()
 const myLists = ref([])
 const error = ref('')
 const brokenThumbnailIds = ref({})
+const isListView = computed(() => route.query.view === 'list')
 
 watch(error, (message) => {
   if (!message) return
@@ -76,9 +78,9 @@ function openList(t) {
 
   <section class="panel">
     <div v-if="myLists.length === 0" class="empty">아직 저장한 티어표가 없어요.</div>
-    <div v-else class="list">
-      <article v-for="t in myLists" :key="t.id" class="boardCard">
-        <button class="boardCard__body" @click="openList(t)">
+    <div v-else class="list" :class="{ 'list--table': isListView }">
+      <article v-for="t in myLists" :key="t.id" class="boardCard" :class="{ 'boardCard--list': isListView }">
+        <button class="boardCard__body" :class="{ 'boardCard__body--list': isListView }" @click="openList(t)">
           <div class="boardCard__thumbWrap">
             <img
               v-if="tierListThumbnailUrl(t)"
@@ -124,6 +126,9 @@ function openList(t) {
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 18px;
 }
+.list--table {
+  grid-template-columns: 1fr;
+}
 .boardCard {
   min-width: 0;
   border-radius: 22px;
@@ -196,6 +201,22 @@ function openList(t) {
   gap: 8px;
   overflow: hidden;
 }
+.boardCard--list .boardCard__head {
+  align-content: center;
+  padding: 16px 18px 16px 0;
+}
+.boardCard__body--list {
+  grid-template-columns: 200px minmax(0, 1fr);
+  align-items: stretch;
+}
+.boardCard__body--list .boardCard__thumbWrap {
+  height: 100%;
+  padding: 14px;
+}
+.boardCard__body--list .boardCard__thumb,
+.boardCard__body--list .boardCard__thumbPlaceholder {
+  min-height: 100%;
+}
 .boardCard__titleRow,
 .boardCard__metaRow {
   min-width: 0;
@@ -268,5 +289,13 @@ function openList(t) {
   .list {
     grid-template-columns: 1fr;
   }
+
+  .boardCard__body--list {
+    grid-template-columns: 1fr;
+  }
+
+  .boardCard--list .boardCard__head {
+    padding: 16px 18px 18px;
+  }
 }
 </style>