목록 보기 전환 정리

2026-04-07 14:33:13 +09:00
parent de304c98a7
commit d2273fa723
11 changed files with 172 additions and 28 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -157,7 +157,7 @@ const isGuideNextDisabled = computed(() => guideStepIndex.value >= guideSteps.le
 const isLightTheme = computed(() => themeMode.value === 'light')
 const themeToggleLabel = computed(() => (isLightTheme.value ? '다크 모드' : '라이트 모드'))
 const showSettingsThemePanel = computed(() => route.name === 'profile')
-const showTopicViewToggle = computed(() => route.name === 'topicHub')
+const showTopicViewToggle = computed(() => ['home', 'templates', 'topicHub', 'me', 'favorites'].includes(String(route.name || '')))
 const topicViewMode = computed(() => (route.query.view === 'list' ? 'list' : 'grid'))
 const showBackendFallback = computed(() => !isPreviewMode.value && ['maintenance', 'offline'].includes(backendState.value))
 const shouldLockRightRailBodyScroll = computed(() => isRightRailOverlay.value && rightRailOpen.value && !showBackendFallback.value)
@@ -547,7 +547,7 @@ function toggleRightRail() {
 }

 function setTopicViewMode(mode) {
-  if (route.name !== 'topicHub') return
+  if (!showTopicViewToggle.value) return
  const nextQuery = { ...route.query }
  if (mode === 'list') nextQuery.view = 'list'
  else delete nextQuery.view
--- a/frontend/src/views/FavoriteTierListsView.vue
+++ b/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%;
  }
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -13,6 +13,7 @@ const featuredTierLists = ref([])
 const tierLists = ref([])
 const error = ref('')
 const query = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim() : ''))
+const isListView = computed(() => route.query.view === 'list')
 const brokenThumbnailIds = ref({})

 function fmt(ts) {
@@ -85,9 +86,9 @@ watch(() => route.query.q, loadHomeFeed)
        </div>
        <div class="featuredHead__count">{{ featuredTierLists.length }}개</div>
      </div>
-      <div class="list">
-        <article v-for="tierList in featuredTierLists" :key="`featured-${tierList.id}`" class="boardCard boardCard--featured">
-          <button class="boardCard__body" type="button" @click="openTierList(tierList)">
+      <div class="list" :class="{ 'list--table': isListView }">
+        <article v-for="tierList in featuredTierLists" :key="`featured-${tierList.id}`" class="boardCard boardCard--featured" :class="{ 'boardCard--list': isListView }">
+          <button class="boardCard__body" :class="{ 'boardCard__body--list': isListView }" type="button" @click="openTierList(tierList)">
            <div class="boardCard__thumbWrap">
              <img
                v-if="tierListThumbnailUrl(tierList)"
@@ -122,9 +123,9 @@ watch(() => route.query.q, loadHomeFeed)
    <section class="panel">
      <div class="sectionLabel">최신 공개 티어표</div>
      <div v-if="tierLists.length === 0" class="empty">{{ query ? '검색어에 맞는 공개 티어표가 없어요.' : '아직 공개 티어표가 없어요.' }}</div>
-      <div v-else class="list">
-        <article v-for="tierList in tierLists" :key="tierList.id" class="boardCard">
-          <button class="boardCard__body" type="button" @click="openTierList(tierList)">
+      <div v-else class="list" :class="{ 'list--table': isListView }">
+        <article v-for="tierList in tierLists" :key="tierList.id" class="boardCard" :class="{ 'boardCard--list': isListView }">
+          <button class="boardCard__body" :class="{ 'boardCard__body--list': isListView }" type="button" @click="openTierList(tierList)">
            <div class="boardCard__thumbWrap">
              <img
                v-if="tierListThumbnailUrl(tierList)"
@@ -222,6 +223,9 @@ watch(() => route.query.q, loadHomeFeed)
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
 }
+.list--table {
+  grid-template-columns: 1fr;
+}
 .boardCard {
  min-width: 0;
  border-radius: 22px;
@@ -282,6 +286,22 @@ watch(() => route.query.q, loadHomeFeed)
  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;
@@ -370,5 +390,13 @@ watch(() => route.query.q, loadHomeFeed)
  .list {
    grid-template-columns: minmax(0, 1fr);
  }
+
+  .boardCard__body--list {
+    grid-template-columns: 1fr;
+  }
+
+  .boardCard--list .boardCard__head {
+    padding: 16px 18px 18px;
+  }
 }
 </style>
--- a/frontend/src/views/MyTierListsView.vue
+++ b/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>
--- a/frontend/src/views/TemplatesView.vue
+++ b/frontend/src/views/TemplatesView.vue
@@ -16,6 +16,7 @@ const templateRecords = ref([])
 const error = ref('')
 const loadingFavoriteId = ref('')
 const query = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim().toLowerCase() : ''))
+const isListView = computed(() => route.query.view === 'list')
 const templates = computed(() => {
  const filtered = templateRecords.value
    .filter((item) => item.id !== 'freeform')
@@ -88,8 +89,8 @@ function templateThumbUrl(template) {
  </section>

  <div v-if="error" class="error">{{ error }}</div>
-  <TransitionGroup v-if="templates.length" name="libraryCard" tag="section" class="libraryGrid">
-    <article v-for="template in templates" :key="template.id" class="libraryCard">
+  <TransitionGroup v-if="templates.length" name="libraryCard" tag="section" class="libraryGrid" :class="{ 'libraryGrid--list': isListView }">
+    <article v-for="template in templates" :key="template.id" class="libraryCard" :class="{ 'libraryCard--list': isListView }">
      <button
        class="libraryCard__favorite"
        type="button"
@@ -99,7 +100,7 @@ function templateThumbUrl(template) {
      >
        <SvgIcon class="libraryCard__favoriteIcon" :src="kidStarIcon" :size="18" />
      </button>
-      <button class="libraryCard__main" type="button" @click="openTopic(template)">
+      <button class="libraryCard__main" :class="{ 'libraryCard__main--list': isListView }" type="button" @click="openTopic(template)">
        <div class="libraryCard__thumbWrap">
          <img v-if="templateThumbUrl(template)" class="libraryCard__thumb" :src="templateThumbUrl(template)" :alt="template.name" draggable="false" />
          <div v-else class="libraryCard__thumbFallback">대표 썸네일</div>
@@ -120,6 +121,9 @@ function templateThumbUrl(template) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
 }
+.libraryGrid--list {
+  grid-template-columns: 1fr;
+}
 .error {
  margin: 0 0 16px;
  padding: 10px 12px;
@@ -161,6 +165,17 @@ function templateThumbUrl(template) {
  text-align: left;
  cursor: pointer;
 }
+.libraryCard__main--list {
+  grid-template-columns: 200px minmax(0, 1fr);
+  align-items: center;
+}
+.libraryCard__main--list .libraryCard__thumbWrap {
+  height: 100%;
+}
+.libraryCard--list .libraryCard__favorite {
+  top: 14px;
+  bottom: auto;
+}
 .libraryCard__favorite {
  position: absolute;
  bottom: 24px;
@@ -259,5 +274,9 @@ function templateThumbUrl(template) {
  .libraryGrid {
    grid-template-columns: minmax(0, 1fr);
  }
+
+  .libraryCard__main--list {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
--- a/frontend/src/views/TierEditorView.vue
+++ b/frontend/src/views/TierEditorView.vue
@@ -138,7 +138,7 @@ const untitledWarning = computed(
    !hasCustomTitle.value &&
    '제목 없이 저장된 티어표는 무분별한 도배 방지를 위해 관리자에 의해 임의 삭제될 수 있어요.'
 )
-const canFavorite = computed(() => !!auth.user && !isNewTierList.value && !canEdit.value)
+const canFavorite = computed(() => !!auth.user && hasSavedTierList.value && !isNewTierList.value)
 const canDuplicate = computed(() => !!auth.user && hasSavedTierList.value)
 const canSwitchToViewerMode = computed(() => isOwnTierList.value && hasSavedTierList.value && !previewMode.value)
 const canSwitchToEditMode = computed(() => isOwnTierList.value && hasSavedTierList.value && previewMode.value)