117 lines
2.5 KiB
Vue
117 lines
2.5 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { api } from '../lib/api'
|
|
|
|
const router = useRouter()
|
|
const myLists = ref([])
|
|
const error = ref('')
|
|
|
|
function fmt(ts) {
|
|
return new Date(ts).toLocaleString(undefined, {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
})
|
|
}
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const data = await api.listMyTierLists()
|
|
myLists.value = data.tierLists || []
|
|
} catch (e) {
|
|
error.value = '로그인이 필요해요.'
|
|
}
|
|
})
|
|
|
|
function openList(t) {
|
|
router.push(`/editor/${t.gameId}/${t.id}`)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="wrap">
|
|
<h2 class="title">내 티어표</h2>
|
|
<div class="card">
|
|
<div v-if="error" class="error">
|
|
{{ error }}
|
|
<button class="link" @click="$router.push('/login')">로그인 하러가기</button>
|
|
</div>
|
|
<div v-if="myLists.length === 0" class="empty">아직 저장한 티어표가 없어요.</div>
|
|
<div v-else class="list">
|
|
<button v-for="t in myLists" :key="t.id" class="row" @click="openList(t)">
|
|
<div class="row__title">{{ t.title }}</div>
|
|
<div class="row__meta">
|
|
{{ t.gameId }} · 저장: {{ fmt(t.createdAt || t.updatedAt) }} · 업데이트: {{ fmt(t.updatedAt) }}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.wrap {
|
|
padding: 10px 2px;
|
|
}
|
|
.title {
|
|
margin: 0 0 10px;
|
|
font-size: 26px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.card {
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border-radius: 16px;
|
|
padding: 14px;
|
|
}
|
|
.error {
|
|
margin-bottom: 12px;
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
background: rgba(239, 68, 68, 0.12);
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.link {
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: rgba(255, 255, 255, 0.92);
|
|
cursor: pointer;
|
|
font-weight: 800;
|
|
}
|
|
.empty {
|
|
opacity: 0.75;
|
|
}
|
|
.list {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
.row {
|
|
text-align: left;
|
|
cursor: pointer;
|
|
padding: 12px;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(255, 255, 255, 0.10);
|
|
background: rgba(0, 0, 0, 0.16);
|
|
color: rgba(255, 255, 255, 0.92);
|
|
}
|
|
.row__title {
|
|
font-weight: 900;
|
|
}
|
|
.row__meta {
|
|
margin-top: 6px;
|
|
opacity: 0.76;
|
|
font-size: 13px;
|
|
}
|
|
</style>
|
|
|