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

릴리스: v0.1.43 토스트와 즐겨찾기 추가

Browse Source
This commit is contained in:
zenn
2026-03-27 10:23:29 +09:00
parent 3bd9751621
commit 61fe758b7c
17 changed files with 559 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
frontend/src/views/GameHubView.vue
View File

@@ -4,10 +4,12 @@ import { useRoute, useRouter } from 'vue-router'
import { api } from '../lib/api'
import { toApiUrl } from '../lib/runtime'
import { useAuthStore } from '../stores/auth'
import { useToast } from '../composables/useToast'
const route = useRoute()
const router = useRouter()
const auth = useAuthStore()
const toast = useToast()
const gameId = computed(() => route.params.gameId)
@@ -62,6 +64,21 @@ function createNew() {
function openTierList(id) {
router.push(`/editor/${gameId.value}/${id}`)
}
async function toggleFavorite(tierList) {
if (!auth.user) {
router.push(`/login?redirect=/games/${gameId.value}`)
return
}
try {
const data = tierList.isFavorited ? await api.unfavoriteTierList(tierList.id) : await api.favoriteTierList(tierList.id)
tierLists.value = tierLists.value.map((entry) => (entry.id === tierList.id ? { ...entry, ...data.tierList } : entry))
toast.success(tierList.isFavorited ? '즐겨찾기를 해제했어요.' : '즐겨찾기에 추가했어요.')
} catch (e) {
toast.error('즐겨찾기 처리에 실패했어요.')
}
}
</script>
<template>
@@ -81,21 +98,28 @@ function openTierList(id) {
<div class="panel__title">공개 티어표</div>
<div v-if="tierLists.length === 0" class="empty">아직 공개 티어표가 없어요.</div>
<div v-else class="list">
<button v-for="t in tierLists" :key="t.id" class="row" @click="openTierList(t.id)">
<div class="row__thumbWrap">
<img v-if="tierListThumbnailUrl(t)" class="row__thumb" :src="tierListThumbnailUrl(t)" :alt="t.title" />
<div v-else class="row__thumbPlaceholder"></div>
</div>
<div class="row__head">
<div class="row__title">{{ t.title }}</div>
<div class="row__author">
<img v-if="avatarSrcOf(t)" class="row__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
<div v-else class="row__avatar row__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
<span>by {{ displayNameOf(t) }}</span>
<article v-for="t in tierLists" :key="t.id" class="row">
<button class="row__body" @click="openTierList(t.id)">
<div class="row__thumbWrap">
<img v-if="tierListThumbnailUrl(t)" class="row__thumb" :src="tierListThumbnailUrl(t)" :alt="t.title" />
<div v-else class="row__thumbPlaceholder"></div>
</div>
<div class="row__head">
<div class="row__title">{{ t.title }}</div>
<div class="row__author">
<img v-if="avatarSrcOf(t)" class="row__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
<div v-else class="row__avatar row__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
<span>by {{ displayNameOf(t) }}</span>
</div>
</div>
</button>
<div class="row__foot">
<div class="row__meta">{{ fmt(t.updatedAt) }}</div>
<button class="favoriteBtn" @click="toggleFavorite(t)">
{{ t.isFavorited ? '★' : '☆' }} {{ t.favoriteCount || 0 }}
</button>
</div>
<div class="row__meta">{{ fmt(t.updatedAt) }}</div>
</button>
</article>
</div>
</section>
</template>
@@ -160,14 +184,10 @@ function openTierList(id) {
gap: 14px;
}
.row {
text-align: left;
padding: 0;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.92);
cursor: pointer;
width: 100%;
display: grid;
gap: 10px;
align-content: start;
@@ -177,6 +197,17 @@ function openTierList(id) {
.row:hover {
background: rgba(255, 255, 255, 0.05);
}
.row__body {
text-align: left;
padding: 0;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
width: 100%;
display: grid;
gap: 10px;
}
.row__thumbWrap {
width: 100%;
aspect-ratio: 16 / 9;
@@ -229,11 +260,29 @@ function openTierList(id) {
font-weight: 900;
}
.row__meta {
padding: 0 14px 14px;
opacity: 0.78;
font-size: 13px;
}
.row__foot {
padding: 0 14px 14px;
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
margin-top: auto;
}
.favoriteBtn {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.92);
border-radius: 999px;
padding: 7px 10px;
cursor: pointer;
font-weight: 800;
}
.favoriteBtn:hover {
background: rgba(255, 255, 255, 0.09);
}
@media (max-width: 1100px) {
.list {
grid-template-columns: repeat(2, minmax(0, 1fr));