목록 보기 전환 정리

frontend/src/views/FavoriteTierListsView.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
 import { useToast } from '../composables/useToast'
@@ -8,12 +8,14 @@ import { editorPath, loginPath } from '../lib/paths'
 import { displayInitialFrom } from '../lib/display'
 
 const router = useRouter()
+const route = useRoute()
 const toast = useToast()
 
 const favorites = ref([])
 const query = ref('')
 const sort = ref('favorited')
 const busyTierListId = ref('')
+const isListView = computed(() => route.query.view === 'list')
 
 function fmt(ts) {
   return new Date(ts).toLocaleDateString(undefined, {
@@ -92,8 +94,8 @@ onMounted(loadFavorites)
     </div>
 
     <div v-if="favorites.length === 0" class="empty">즐겨찾기한 티어표가 없어요.</div>
-    <div v-else class="list">
-      <article v-for="tierList in favorites" :key="tierList.id" class="boardCard">
+    <div v-else class="list" :class="{ 'list--table': isListView }">
+      <article v-for="tierList in favorites" :key="tierList.id" class="boardCard" :class="{ 'boardCard--list': isListView }">
         <button
           class="boardCard__favoriteAction"
           type="button"
@@ -102,7 +104,7 @@ onMounted(loadFavorites)
         >
           {{ busyTierListId === tierList.id ? '처리 중...' : '즐겨찾기 해제' }}
         </button>
-        <button class="boardCard__body" @click="openTierList(tierList)">
+        <button class="boardCard__body" :class="{ 'boardCard__body--list': isListView }" @click="openTierList(tierList)">
           <div class="boardCard__thumbWrap">
             <img v-if="tierListThumbnailUrl(tierList)" class="boardCard__thumb" :src="tierListThumbnailUrl(tierList)" :alt="tierList.title" draggable="false" />
             <div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
@@ -158,8 +160,12 @@ onMounted(loadFavorites)
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 18px;
 }
+.list--table {
+  grid-template-columns: 1fr;
+}
 .boardCard {
   position: relative;
+  min-width: 0;
   border-radius: 22px;
   border: 1px solid var(--theme-card-border);
   background: var(--theme-card-bg);
@@ -175,6 +181,7 @@ onMounted(loadFavorites)
   background: var(--theme-card-bg-hover);
 }
 .boardCard__body {
+  min-width: 0;
   border: 0;
   background: transparent;
   color: inherit;
@@ -182,6 +189,8 @@ onMounted(loadFavorites)
   text-align: left;
   cursor: pointer;
   display: grid;
+  width: 100%;
+  overflow: hidden;
 }
 .boardCard__favoriteAction {
   position: absolute;
@@ -203,6 +212,7 @@ onMounted(loadFavorites)
   opacity: 0.72;
 }
 .boardCard__thumbWrap {
+  min-width: 0;
   width: 100%;
   aspect-ratio: 16 / 9;
   padding: 14px 14px 0;
@@ -227,16 +237,35 @@ onMounted(loadFavorites)
   font-weight: 700;
 }
 .boardCard__head {
+  min-width: 0;
   padding: 16px 18px 18px;
   display: grid;
   gap: 6px;
+  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 {
-  display: flex;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: 10px;
   align-items: center;
-  justify-content: space-between;
 }
 
 .boardCard__metaRow {
@@ -246,17 +275,23 @@ onMounted(loadFavorites)
   min-width: 0;
   font-weight: 800;
   font-size: 18px;
-  white-space: nowrap;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
+  word-break: break-word;
 }
 .boardCard__author {
   min-width: 0;
+  max-width: 100%;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   opacity: 0.86;
+  overflow: hidden;
 }
 .boardCard__authorName {
   min-width: 0;
@@ -282,9 +317,13 @@ onMounted(loadFavorites)
 .boardCard__date,
 .favoriteStat {
   flex: 0 0 auto;
+  min-width: 0;
+  max-width: 100%;
   font-size: 13px;
   color: var(--theme-text-faint);
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .boardCard__date {
@@ -304,6 +343,15 @@ onMounted(loadFavorites)
   .list {
     grid-template-columns: 1fr;
   }
+
+  .boardCard__body--list {
+    grid-template-columns: 1fr;
+  }
+
+  .boardCard--list .boardCard__head {
+    padding: 16px 18px 18px;
+  }
+
   .toolbar {
     width: 100%;
   }