zenn/tier-maker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

목록 보기 전환 정리

Browse Source
This commit is contained in:
zenn
2026-04-07 14:33:13 +09:00
parent de304c98a7
commit d2273fa723
11 changed files with 172 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/views/HomeView.vue
View File

@@ -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>