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

릴리스: v0.1.6 MariaDB 개발 환경 및 저장소 설정 정리

Browse Source
This commit is contained in:
DUCK JIN
2026-03-19 14:42:30 +09:00
committed by zenn
commit 6d2c063425
52 changed files with 9346 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
frontend/src/App.vue Normal file
View File

@@ -0,0 +1,201 @@
<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from './stores/auth'
import { toApiUrl } from './lib/runtime'
const route = useRoute()
const router = useRouter()
const auth = useAuthStore()
const isAdmin = computed(() => !!auth.user?.isAdmin)
const avatarUrl = computed(() => {
if (!auth.user?.avatarSrc) return ''
return toApiUrl(auth.user.avatarSrc)
})
const menuOpen = ref(false)
onMounted(async () => {
await auth.refresh()
document.addEventListener('click', onDocumentClick)
})
onUnmounted(() => {
document.removeEventListener('click', onDocumentClick)
})
watch(
() => route.fullPath,
() => {
menuOpen.value = false
}
)
function toggleMenu() {
menuOpen.value = !menuOpen.value
}
function onDocumentClick(event) {
if (!event.target.closest('.user')) {
menuOpen.value = false
}
}
function goProfile() {
menuOpen.value = false
router.push('/profile')
}
async function logout() {
menuOpen.value = false
await auth.logout()
router.push('/')
}
</script>
<template>
<div class="app-shell">
<header class="app-header">
<div class="brand" @click="$router.push('/')">
<span class="brand__title">Tier Maker</span>
<span class="brand__sub">Vue</span>
</div>
<nav class="nav">
<RouterLink to="/" class="nav__link">게임</RouterLink>
<RouterLink to="/me" class="nav__link">내 티어표</RouterLink>
<RouterLink v-if="isAdmin" to="/admin" class="nav__link">관리자</RouterLink>
<RouterLink v-if="!auth.user" to="/login" class="nav__link">로그인</RouterLink>
<div v-else class="user">
<button class="avatarBtn" @click.stop="toggleMenu" :title="auth.user.email">
<img v-if="avatarUrl" :src="avatarUrl" class="avatarImg" alt="avatar" />
<div v-else class="avatarFallback">{{ (auth.user.email || 'U')[0].toUpperCase() }}</div>
</button>
<div v-if="menuOpen" class="menu">
<button class="menuItem" @click="goProfile">프로필</button>
<button class="menuItem" @click="logout">로그아웃</button>
</div>
</div>
</nav>
</header>
<main class="app-main">
<RouterView />
</main>
</div>
</template>
<style scoped>
.app-shell {
min-height: 100vh;
background: radial-gradient(1200px 800px at 20% 10%, rgba(110, 231, 183, 0.18), transparent 55%),
radial-gradient(1000px 700px at 80% 20%, rgba(96, 165, 250, 0.18), transparent 55%),
#0b1220;
color: rgba(255, 255, 255, 0.92);
}
.app-header {
position: sticky;
top: 0;
z-index: 10;
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(11, 18, 32, 0.72);
backdrop-filter: blur(10px);
}
.brand {
display: flex;
gap: 10px;
align-items: baseline;
cursor: pointer;
user-select: none;
}
.brand__title {
font-weight: 800;
letter-spacing: -0.02em;
}
.brand__sub {
font-size: 12px;
padding: 2px 8px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
opacity: 0.9;
}
.nav {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.nav__link {
text-decoration: none;
color: rgba(255, 255, 255, 0.86);
padding: 8px 10px;
border-radius: 10px;
border: 1px solid transparent;
}
.nav__link.router-link-active {
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
}
.app-main {
padding: 20px 18px 60px;
max-width: 1100px;
margin: 0 auto;
}
.user {
position: relative;
}
.avatarBtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.06);
cursor: pointer;
padding: 0;
}
.avatarImg {
width: 100%;
height: 100%;
border-radius: 999px;
object-fit: cover;
}
.avatarFallback {
font-weight: 900;
opacity: 0.9;
}
.menu {
position: absolute;
right: 0;
top: calc(100% + 8px);
width: 160px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(11, 18, 32, 0.92);
backdrop-filter: blur(10px);
padding: 6px;
display: grid;
gap: 6px;
}
.menuItem {
text-align: left;
padding: 10px 10px;
border-radius: 12px;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.92);
cursor: pointer;
font-weight: 800;
}
.menuItem:hover {
background: rgba(255, 255, 255, 0.09);
}
</style>

BIN
frontend/src/assets/hero.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

1
frontend/src/assets/vite.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

1
frontend/src/assets/vue.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 496 B

6
frontend/src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,6 @@
<script setup>
</script>
<template>
<div />
</template>

42
frontend/src/lib/api.js Normal file
View File

@@ -0,0 +1,42 @@
import { toApiUrl } from './runtime'
async function request(path, { method = 'GET', body, headers } = {}) {
const res = await fetch(toApiUrl(path), {
method,
credentials: 'include',
headers: {
...(body ? { 'Content-Type': 'application/json' } : {}),
...(headers || {}),
},
body: body ? JSON.stringify(body) : undefined,
})
const contentType = res.headers.get('content-type') || ''
const data = contentType.includes('application/json') ? await res.json() : await res.text()
if (!res.ok) {
const err = new Error('request_failed')
err.status = res.status
err.data = data
throw err
}
return data
}
export const api = {
me: () => request('/api/auth/me'),
authMeta: () => request('/api/auth/meta'),
signup: ({ email, password }) => request('/api/auth/signup', { method: 'POST', body: { email, password } }),
login: ({ email, password }) => request('/api/auth/login', { method: 'POST', body: { email, password } }),
logout: () => request('/api/auth/logout', { method: 'POST' }),
listGames: () => request('/api/games'),
getGame: (gameId) => request(`/api/games/${encodeURIComponent(gameId)}`),
suggestGame: (name) => request('/api/games/suggest', { method: 'POST', body: { name } }),
listPublicTierLists: (gameId) =>
request(`/api/tierlists/public?gameId=${encodeURIComponent(gameId || '')}`),
listMyTierLists: () => request('/api/tierlists/me'),
getTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}`),
saveTierList: (payload) => request('/api/tierlists', { method: 'POST', body: payload }),
}

9
frontend/src/lib/runtime.js Normal file
View File

@@ -0,0 +1,9 @@
const FALLBACK_API_ORIGIN = 'http://localhost:5179'
export const API_ORIGIN = (import.meta.env.VITE_API_ORIGIN || FALLBACK_API_ORIGIN).replace(/\/+$/, '')
export function toApiUrl(path = '') {
if (!path) return API_ORIGIN
if (/^https?:\/\//.test(path)) return path
return `${API_ORIGIN}${path.startsWith('/') ? path : `/${path}`}`
}

10
frontend/src/main.js Normal file
View File

@@ -0,0 +1,10 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createRouter } from './router'
import './style.css'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.use(createRouter())
app.mount('#app')

26
frontend/src/router/index.js Normal file
View File

@@ -0,0 +1,26 @@
import { createRouter as _createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import GameHubView from '../views/GameHubView.vue'
import TierEditorView from '../views/TierEditorView.vue'
import LoginView from '../views/LoginView.vue'
import MyTierListsView from '../views/MyTierListsView.vue'
import AdminView from '../views/AdminView.vue'
import ProfileView from '../views/ProfileView.vue'
export function createRouter() {
return _createRouter({
history: createWebHistory(),
routes: [
{ path: '/', name: 'home', component: HomeView },
{ path: '/games/:gameId', name: 'gameHub', component: GameHubView },
{ path: '/editor/:gameId/new', name: 'newEditor', component: TierEditorView },
{ path: '/editor/:gameId/:tierListId', name: 'editEditor', component: TierEditorView },
{ path: '/login', name: 'login', component: LoginView },
{ path: '/me', name: 'me', component: MyTierListsView },
{ path: '/admin', name: 'admin', component: AdminView },
{ path: '/profile', name: 'profile', component: ProfileView },
],
})
}

35
frontend/src/stores/auth.js Normal file
View File

@@ -0,0 +1,35 @@
import { defineStore } from 'pinia'
import { api } from '../lib/api'
export const useAuthStore = defineStore('auth', {
state: () => ({
user: null,
status: 'idle',
}),
actions: {
async refresh() {
this.status = 'loading'
try {
const data = await api.me()
this.user = data.user
} finally {
this.status = 'idle'
}
},
async signup(email, password) {
const user = await api.signup({ email, password })
this.user = user
return user
},
async login(email, password) {
const user = await api.login({ email, password })
this.user = user
return user
},
async logout() {
await api.logout()
this.user = null
},
},
})

296
frontend/src/style.css Normal file
View File

@@ -0,0 +1,296 @@
:root {
--text: #6b6375;
--text-h: #08060d;
--bg: #fff;
--border: #e5e4e7;
--code-bg: #f4f3ec;
--accent: #aa3bff;
--accent-bg: rgba(170, 59, 255, 0.1);
--accent-border: rgba(170, 59, 255, 0.5);
--social-bg: rgba(244, 243, 236, 0.5);
--shadow:
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
--mono: ui-monospace, Consolas, monospace;
font: 18px/145% var(--sans);
letter-spacing: 0.18px;
color-scheme: light dark;
color: var(--text);
background: var(--bg);
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@media (max-width: 1024px) {
font-size: 16px;
}
}
@media (prefers-color-scheme: dark) {
:root {
--text: #9ca3af;
--text-h: #f3f4f6;
--bg: #16171d;
--border: #2e303a;
--code-bg: #1f2028;
--accent: #c084fc;
--accent-bg: rgba(192, 132, 252, 0.15);
--accent-border: rgba(192, 132, 252, 0.5);
--social-bg: rgba(47, 48, 58, 0.5);
--shadow:
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
}
#social .button-icon {
filter: invert(1) brightness(2);
}
}
body {
margin: 0;
}
h1,
h2 {
font-family: var(--heading);
font-weight: 500;
color: var(--text-h);
}
h1 {
font-size: 56px;
letter-spacing: -1.68px;
margin: 32px 0;
@media (max-width: 1024px) {
font-size: 36px;
margin: 20px 0;
}
}
h2 {
font-size: 24px;
line-height: 118%;
letter-spacing: -0.24px;
margin: 0 0 8px;
@media (max-width: 1024px) {
font-size: 20px;
}
}
p {
margin: 0;
}
code,
.counter {
font-family: var(--mono);
display: inline-flex;
border-radius: 4px;
color: var(--text-h);
}
code {
font-size: 15px;
line-height: 135%;
padding: 4px 8px;
background: var(--code-bg);
}
.counter {
font-size: 16px;
padding: 5px 10px;
border-radius: 5px;
color: var(--accent);
background: var(--accent-bg);
border: 2px solid transparent;
transition: border-color 0.3s;
margin-bottom: 24px;
&:hover {
border-color: var(--accent-border);
}
&:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
}
.hero {
position: relative;
.base,
.framework,
.vite {
inset-inline: 0;
margin: 0 auto;
}
.base {
width: 170px;
position: relative;
z-index: 0;
}
.framework,
.vite {
position: absolute;
}
.framework {
z-index: 1;
top: 34px;
height: 28px;
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
scale(1.4);
}
.vite {
z-index: 0;
top: 107px;
height: 26px;
width: auto;
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
scale(0.8);
}
}
#app {
width: 1126px;
max-width: 100%;
margin: 0 auto;
text-align: center;
border-inline: 1px solid var(--border);
min-height: 100svh;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
#center {
display: flex;
flex-direction: column;
gap: 25px;
place-content: center;
place-items: center;
flex-grow: 1;
@media (max-width: 1024px) {
padding: 32px 20px 24px;
gap: 18px;
}
}
#next-steps {
display: flex;
border-top: 1px solid var(--border);
text-align: left;
& > div {
flex: 1 1 0;
padding: 32px;
@media (max-width: 1024px) {
padding: 24px 20px;
}
}
.icon {
margin-bottom: 16px;
width: 22px;
height: 22px;
}
@media (max-width: 1024px) {
flex-direction: column;
text-align: center;
}
}
#docs {
border-right: 1px solid var(--border);
@media (max-width: 1024px) {
border-right: none;
border-bottom: 1px solid var(--border);
}
}
#next-steps ul {
list-style: none;
padding: 0;
display: flex;
gap: 8px;
margin: 32px 0 0;
.logo {
height: 18px;
}
a {
color: var(--text-h);
font-size: 16px;
border-radius: 6px;
background: var(--social-bg);
display: flex;
padding: 6px 12px;
align-items: center;
gap: 8px;
text-decoration: none;
transition: box-shadow 0.3s;
&:hover {
box-shadow: var(--shadow);
}
.button-icon {
height: 18px;
width: 18px;
}
}
@media (max-width: 1024px) {
margin-top: 20px;
flex-wrap: wrap;
justify-content: center;
li {
flex: 1 1 calc(50% - 8px);
}
a {
width: 100%;
justify-content: center;
box-sizing: border-box;
}
}
}
#spacer {
height: 88px;
border-top: 1px solid var(--border);
@media (max-width: 1024px) {
height: 48px;
}
}
.ticks {
position: relative;
width: 100%;
&::before,
&::after {
content: '';
position: absolute;
top: -4.5px;
border: 5px solid transparent;
}
&::before {
left: 0;
border-left-color: var(--border);
}
&::after {
right: 0;
border-right-color: var(--border);
}
}

348
frontend/src/views/AdminView.vue Normal file
View File

@@ -0,0 +1,348 @@
<script setup>
import { computed, onMounted, ref } from 'vue'
import { api } from '../lib/api'
import { toApiUrl } from '../lib/runtime'
import { useAuthStore } from '../stores/auth'
const auth = useAuthStore()
const isAdmin = computed(() => !!auth.user?.isAdmin)
const games = ref([])
const selectedGameId = ref('')
const selectedGame = ref(null)
const error = ref('')
const success = ref('')
const newGameId = ref('')
const newGameName = ref('')
const uploadLabel = ref('')
const uploadFile = ref(null)
const thumbFile = ref(null)
onMounted(async () => {
await auth.refresh()
await refreshGames()
})
async function refreshGames() {
error.value = ''
success.value = ''
try {
const data = await api.listGames()
games.value = data.games || []
} catch (e) {
error.value = '게임 목록을 불러오지 못했어요.'
}
}
async function loadGame() {
error.value = ''
success.value = ''
if (!selectedGameId.value) {
selectedGame.value = null
return
}
try {
const data = await api.getGame(selectedGameId.value)
selectedGame.value = data
} catch (e) {
error.value = '게임 정보를 불러오지 못했어요.'
}
}
async function createGame() {
error.value = ''
success.value = ''
try {
const res = await fetch(toApiUrl('/api/admin/games'), {
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: newGameId.value, name: newGameName.value }),
})
if (!res.ok) throw new Error('failed')
newGameId.value = ''
newGameName.value = ''
await refreshGames()
selectedGameId.value = ''
selectedGame.value = null
success.value = '게임이 생성됐어요. 목록에서 선택한 뒤 썸네일과 아이템을 등록해주세요.'
} catch (e) {
error.value = '게임 생성 실패(관리자 권한/중복 ID 확인)'
}
}
async function uploadItem() {
error.value = ''
success.value = ''
if (!uploadFile.value) {
error.value = '아이템 파일을 선택해주세요.'
return
}
try {
const fd = new FormData()
fd.append('label', uploadLabel.value || 'image')
fd.append('image', uploadFile.value)
const res = await fetch(toApiUrl(`/api/admin/games/${encodeURIComponent(selectedGameId.value)}/images`), {
method: 'POST',
credentials: 'include',
body: fd,
})
if (!res.ok) throw new Error('failed')
uploadLabel.value = ''
uploadFile.value = null
await loadGame()
success.value = '아이템이 추가됐어요.'
} catch (e) {
error.value = '아이템 추가 실패(관리자 권한/파일 크기 확인)'
}
}
function onFile(e) {
uploadFile.value = e.target.files && e.target.files[0] ? e.target.files[0] : null
}
function onThumb(e) {
thumbFile.value = e.target.files && e.target.files[0] ? e.target.files[0] : null
}
async function uploadThumbnail() {
error.value = ''
success.value = ''
if (!thumbFile.value) {
error.value = '썸네일 파일을 선택해주세요.'
return
}
try {
const fd = new FormData()
fd.append('thumbnail', thumbFile.value)
const res = await fetch(toApiUrl(`/api/admin/games/${encodeURIComponent(selectedGameId.value)}/thumbnail`), {
method: 'POST',
credentials: 'include',
body: fd,
})
if (!res.ok) throw new Error('failed')
thumbFile.value = null
await refreshGames()
await loadGame()
success.value = '썸네일이 반영됐어요.'
} catch (e) {
error.value = '썸네일 업로드 실패(관리자 권한/파일 크기 확인)'
}
}
</script>
<template>
<section class="wrap">
<h2 class="title">관리자</h2>
<div class="card">
<div class="desc">게임 생성 후 선택한 게임에만 썸네일과 관리자 아이템을 등록할 수 있습니다.</div>
<div v-if="!auth.user" class="warn">로그인이 필요해요.</div>
<div v-else-if="!isAdmin" class="warn">이 계정은 관리자 권한이 없어요.</div>
<div v-if="error" class="error">{{ error }}</div>
<div v-if="success" class="success">{{ success }}</div>
<div class="grid">
<div class="panel">
<div class="panel__title">게임 선택</div>
<select v-model="selectedGameId" class="select" :disabled="!isAdmin" @change="loadGame">
<option value="">게임을 선택해주세요</option>
<option v-for="g in games" :key="g.id" :value="g.id">{{ g.name }} ({{ g.id }})</option>
</select>
<div class="panel__title" style="margin-top: 14px">새 게임 추가</div>
<input v-model="newGameId" class="input" placeholder="game id (영문/숫자)" :disabled="!isAdmin" />
<input v-model="newGameName" class="input" placeholder="게임 이름" :disabled="!isAdmin" />
<button class="btn" :disabled="!isAdmin" @click="createGame">게임 생성</button>
</div>
<div v-if="selectedGame" class="panel">
<div class="panel__title">선택된 게임</div>
<div class="selectedGame">
<div>
<div class="selectedGame__name">{{ selectedGame.game.name }}</div>
<div class="selectedGame__id">{{ selectedGame.game.id }}</div>
</div>
<img
v-if="selectedGame.game.thumbnailSrc"
class="selectedThumb"
:src="toApiUrl(selectedGame.game.thumbnailSrc)"
:alt="selectedGame.game.name"
/>
</div>
<div class="panel__title" style="margin-top: 14px">게임 썸네일 업로드</div>
<div class="hint">홈 화면의 게임 카드에 바로 반영되는 대표 이미지입니다.</div>
<input type="file" accept="image/*" class="inputFile" :disabled="!isAdmin" @change="onThumb" />
<button class="btn" :disabled="!isAdmin" @click="uploadThumbnail">썸네일 업로드</button>
<div class="panel__title" style="margin-top: 14px">아이템 추가</div>
<div class="hint">관리자가 지정한 아이템만 이 목록에 포함됩니다.</div>
<input v-model="uploadLabel" class="input" placeholder="아이템 이름" :disabled="!isAdmin" />
<input type="file" accept="image/*" class="inputFile" :disabled="!isAdmin" @change="onFile" />
<button class="btn" :disabled="!isAdmin" @click="uploadItem">아이템 추가</button>
<div class="panel__title" style="margin-top: 14px">현재 아이템 목록</div>
<div v-if="!selectedGame?.items?.length" class="hint">아직 등록된 아이템이 없어요.</div>
<div v-else class="thumbGrid">
<div v-for="img in selectedGame.items" :key="img.id" class="thumbCard">
<img class="thumb" :src="toApiUrl(img.src)" :alt="img.label" />
<div class="thumbLabel">{{ img.label }}</div>
</div>
</div>
</div>
</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;
}
.desc {
opacity: 0.82;
line-height: 1.5;
}
.warn {
margin-top: 10px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(245, 158, 11, 0.35);
background: rgba(245, 158, 11, 0.14);
}
.error {
margin-top: 10px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(239, 68, 68, 0.3);
background: rgba(239, 68, 68, 0.12);
}
.success {
margin-top: 10px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(52, 211, 153, 0.32);
background: rgba(52, 211, 153, 0.14);
}
.grid {
margin-top: 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.panel {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.12);
border-radius: 16px;
padding: 12px;
}
.panel__title {
font-weight: 900;
margin-bottom: 8px;
}
.hint {
opacity: 0.78;
font-size: 13px;
margin-bottom: 10px;
}
.select,
.input {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.18);
color: rgba(255, 255, 255, 0.92);
outline: none;
margin-bottom: 10px;
}
.inputFile {
width: 100%;
margin-bottom: 10px;
}
.btn {
margin-top: 12px;
padding: 10px 12px;
border-radius: 12px;
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;
}
.btn:hover {
background: rgba(255, 255, 255, 0.08);
}
.thumbGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.selectedGame {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
}
.selectedGame__name {
font-weight: 900;
}
.selectedGame__id {
margin-top: 6px;
opacity: 0.72;
word-break: break-all;
}
.selectedThumb {
width: 90px;
height: 90px;
object-fit: cover;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
flex: none;
}
.thumbCard {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
padding: 10px;
min-width: 0;
}
.thumb {
width: 100%;
height: 92px;
object-fit: cover;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.thumbLabel {
margin-top: 8px;
font-weight: 900;
font-size: 13px;
opacity: 0.9;
word-break: break-word;
}
@media (max-width: 980px) {
.grid {
grid-template-columns: 1fr;
}
}
</style>

150
frontend/src/views/GameHubView.vue Normal file
View File

@@ -0,0 +1,150 @@
<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { api } from '../lib/api'
const route = useRoute()
const router = useRouter()
const gameId = computed(() => route.params.gameId)
const gameName = ref('')
const tierLists = 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 [gameRes, listRes] = await Promise.all([api.getGame(gameId.value), api.listPublicTierLists(gameId.value)])
gameName.value = gameRes.game?.name || gameId.value
tierLists.value = listRes.tierLists || []
} catch (e) {
error.value = '게임 정보를 불러오지 못했어요.'
}
})
function createNew() {
router.push(`/editor/${gameId.value}/new`)
}
function openTierList(id) {
router.push(`/editor/${gameId.value}/${id}`)
}
</script>
<template>
<section class="head">
<div class="head__left">
<div class="kicker">게임</div>
<h2 class="title">{{ gameName || gameId }}</h2>
<p class="desc">새 티어표를 만들거나, 다른 사람들이 올린 티어표를 확인하세요.</p>
</div>
<div class="head__right">
<button class="primary" @click="createNew">새로운 티어표 만들기</button>
</div>
</section>
<div v-if="error" class="error">{{ error }}</div>
<section class="panel">
<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__title">{{ t.title }}</div>
<div class="row__meta">
작성자: {{ t.authorName || '알 수 없음' }} · 저장: {{ fmt(t.createdAt || t.updatedAt) }} · 업데이트: {{ fmt(t.updatedAt) }}
</div>
</button>
</div>
</section>
</template>
<style scoped>
.head {
display: flex;
gap: 14px;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
padding: 6px 2px 14px;
}
.kicker {
font-size: 12px;
opacity: 0.7;
}
.title {
margin: 4px 0 6px;
font-size: 26px;
letter-spacing: -0.02em;
}
.desc {
margin: 0;
opacity: 0.84;
}
.primary {
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(96, 165, 250, 0.2);
color: rgba(255, 255, 255, 0.92);
cursor: pointer;
font-weight: 700;
}
.primary:hover {
background: rgba(96, 165, 250, 0.26);
}
.panel {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
border-radius: 16px;
padding: 14px;
}
.error {
margin: 10px 0 14px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(239, 68, 68, 0.3);
background: rgba(239, 68, 68, 0.12);
}
.panel__title {
font-weight: 800;
margin-bottom: 10px;
}
.empty {
opacity: 0.75;
}
.list {
display: grid;
gap: 10px;
}
.row {
text-align: left;
padding: 12px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.92);
cursor: pointer;
}
.row:hover {
background: rgba(255, 255, 255, 0.05);
}
.row__title {
font-weight: 800;
}
.row__meta {
opacity: 0.78;
margin-top: 6px;
font-size: 13px;
}
</style>

229
frontend/src/views/HomeView.vue Normal file
View File

@@ -0,0 +1,229 @@
<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { api } from '../lib/api'
import { toApiUrl } from '../lib/runtime'
const router = useRouter()
const items = ref([])
const error = ref('')
const games = computed(() => items.value)
const suggestOpen = ref(false)
const suggestName = ref('')
const suggestError = ref('')
onMounted(async () => {
try {
const data = await api.listGames()
items.value = data.games || []
} catch (e) {
error.value = '백엔드에 연결할 수 없어요. backend 서버가 실행 중인지 확인해주세요.'
}
})
function goGame(gameId) {
router.push(`/games/${gameId}`)
}
function thumbUrl(g) {
if (!g.thumbnailSrc) return ''
return toApiUrl(g.thumbnailSrc)
}
async function submitSuggest() {
suggestError.value = ''
const name = (suggestName.value || '').trim()
if (!name) {
suggestError.value = '게임 이름을 입력해주세요.'
return
}
try {
await api.suggestGame(name)
suggestName.value = ''
suggestOpen.value = false
} catch (e) {
suggestError.value = '제안 전송에 실패했어요.'
}
}
</script>
<template>
<section class="hero">
<h1 class="hero__title">티어표 메이커</h1>
<p class="hero__desc">
게임을 선택하면 새 티어표를 만들거나, 다른 사람들이 올린 티어표를 볼 수 있어요.
</p>
<div class="hero__actions">
<button class="smallBtn" @click="suggestOpen = true">새로운 게임 제안</button>
</div>
</section>
<div v-if="error" class="error">{{ error }}</div>
<section class="grid">
<button v-for="g in games" :key="g.id" class="card" @click="goGame(g.id)">
<div class="thumbWrap">
<img v-if="thumbUrl(g)" class="thumb" :src="thumbUrl(g)" :alt="g.name" />
<div v-else class="thumbFallback">{{ g.name[0] }}</div>
</div>
<div class="card__title">{{ g.name }}</div>
</button>
</section>
<div v-if="suggestOpen" class="modalBack" @click.self="suggestOpen = false">
<div class="modal">
<div class="modal__title">새로운 게임 제안</div>
<div class="modal__desc">목록에 없는 게임을 입력해 주세요. (관리자가 확인 후 추가)</div>
<input v-model="suggestName" class="modal__input" placeholder="게임 이름" @keydown.enter.prevent="submitSuggest" />
<div v-if="suggestError" class="modal__error">{{ suggestError }}</div>
<div class="modal__actions">
<button class="smallBtn" @click="suggestOpen = false">닫기</button>
<button class="smallBtn smallBtn--primary" @click="submitSuggest">제안하기</button>
</div>
</div>
</div>
</template>
<style scoped>
.hero {
padding: 18px 2px 14px;
}
.hero__title {
font-size: 34px;
letter-spacing: -0.03em;
margin: 0 0 8px;
}
.hero__desc {
margin: 0;
opacity: 0.86;
line-height: 1.5;
}
.hero__actions {
margin-top: 12px;
}
.smallBtn {
padding: 8px 10px;
border-radius: 12px;
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;
}
.smallBtn:hover {
background: rgba(255, 255, 255, 0.08);
}
.smallBtn--primary {
background: rgba(96, 165, 250, 0.18);
}
.smallBtn--primary:hover {
background: rgba(96, 165, 250, 0.24);
}
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 14px;
}
.error {
margin-top: 12px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(239, 68, 68, 0.3);
background: rgba(239, 68, 68, 0.12);
color: rgba(255, 255, 255, 0.92);
}
.card {
text-align: left;
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.92);
cursor: pointer;
display: grid;
gap: 10px;
}
.card:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.18);
}
.thumbWrap {
width: 100%;
height: 140px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.18);
overflow: hidden;
display: grid;
place-items: center;
}
.thumb {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumbFallback {
font-weight: 900;
font-size: 28px;
opacity: 0.85;
}
.card__title {
font-weight: 800;
letter-spacing: -0.02em;
}
.modalBack {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
display: grid;
place-items: center;
z-index: 50;
}
.modal {
width: min(520px, 92vw);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(11, 18, 32, 0.92);
backdrop-filter: blur(10px);
padding: 14px;
}
.modal__title {
font-weight: 900;
font-size: 18px;
}
.modal__desc {
margin-top: 6px;
opacity: 0.78;
font-size: 13px;
}
.modal__input {
margin-top: 12px;
width: 100%;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.18);
color: rgba(255, 255, 255, 0.92);
outline: none;
box-sizing: border-box;
}
.modal__error {
margin-top: 10px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(239, 68, 68, 0.3);
background: rgba(239, 68, 68, 0.12);
}
.modal__actions {
margin-top: 12px;
display: flex;
justify-content: flex-end;
gap: 8px;
}
@media (max-width: 720px) {
.grid {
grid-template-columns: 1fr;
}
}
</style>

149
frontend/src/views/LoginView.vue Normal file
View File

@@ -0,0 +1,149 @@
<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import { api } from '../lib/api'
const router = useRouter()
const auth = useAuthStore()
const email = ref('')
const password = ref('')
const mode = ref('login')
const error = ref('')
const hasUsers = ref(true)
onMounted(async () => {
try {
const meta = await api.authMeta()
hasUsers.value = !!meta.hasUsers
} catch (e) {
hasUsers.value = true
}
})
async function submit() {
error.value = ''
try {
if (mode.value === 'signup') await auth.signup(email.value, password.value)
else await auth.login(email.value, password.value)
router.push('/me')
} catch (e) {
error.value = '로그인/회원가입에 실패했어요.'
}
}
</script>
<template>
<section class="wrap">
<form class="card" @submit.prevent="submit">
<div class="tabs">
<button type="button" class="tab" :class="{ 'tab--active': mode === 'login' }" @click="mode = 'login'">
로그인
</button>
<button type="button" class="tab" :class="{ 'tab--active': mode === 'signup' }" @click="mode = 'signup'">
회원가입
</button>
</div>
<div v-if="error" class="error">{{ error }}</div>
<label class="label">이메일</label>
<input v-model="email" class="input" placeholder="you@example.com" autocomplete="email" />
<label class="label">비밀번호</label>
<input
v-model="password"
class="input"
type="password"
placeholder="********"
autocomplete="current-password"
/>
<button class="btn" type="submit">{{ mode === 'signup' ? '회원가입' : '로그인' }}</button>
<div v-if="!hasUsers" class="hint">첫 회원가입 계정은 자동으로 admin 권한이 부여됩니다(개발용).</div>
</form>
</section>
</template>
<style scoped>
.wrap {
min-height: calc(100vh - 74px);
display: grid;
place-items: center;
padding: 14px 2px;
}
.card {
max-width: 420px;
width: min(420px, 92vw);
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
border-radius: 16px;
padding: 14px;
box-sizing: border-box;
}
.tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 10px;
}
.tab {
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.12);
color: rgba(255, 255, 255, 0.9);
font-weight: 800;
cursor: pointer;
}
.tab--active {
background: rgba(96, 165, 250, 0.18);
border-color: rgba(255, 255, 255, 0.16);
}
.error {
margin-bottom: 10px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(239, 68, 68, 0.3);
background: rgba(239, 68, 68, 0.12);
}
.label {
display: block;
font-size: 13px;
opacity: 0.78;
margin-top: 10px;
margin-bottom: 6px;
}
.input {
width: 100%;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.18);
color: rgba(255, 255, 255, 0.92);
outline: none;
box-sizing: border-box;
}
.btn {
margin-top: 12px;
width: 100%;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(96, 165, 250, 0.2);
color: rgba(255, 255, 255, 0.92);
cursor: pointer;
font-weight: 800;
}
.btn:hover {
background: rgba(96, 165, 250, 0.26);
}
.hint {
margin-top: 10px;
opacity: 0.72;
font-size: 13px;
}
</style>

116
frontend/src/views/MyTierListsView.vue Normal file
View File

@@ -0,0 +1,116 @@
<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>

199
frontend/src/views/ProfileView.vue Normal file
View File

@@ -0,0 +1,199 @@
<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import { toApiUrl } from '../lib/runtime'
const router = useRouter()
const auth = useAuthStore()
const error = ref('')
const saving = ref(false)
const nickname = ref('')
const previewUrl = ref('')
const avatarFile = ref(null)
const avatarUrl = computed(() => {
if (previewUrl.value) return previewUrl.value
if (!auth.user?.avatarSrc) return ''
return toApiUrl(auth.user.avatarSrc)
})
onMounted(async () => {
await auth.refresh()
if (!auth.user) router.push('/login')
nickname.value = auth.user?.nickname || ''
})
function onAvatarChange(e) {
const file = e.target.files && e.target.files[0]
if (!file) return
error.value = ''
avatarFile.value = file
if (previewUrl.value) URL.revokeObjectURL(previewUrl.value)
previewUrl.value = URL.createObjectURL(file)
}
async function saveProfile() {
error.value = ''
saving.value = true
try {
const fd = new FormData()
fd.append('nickname', nickname.value)
if (avatarFile.value) fd.append('avatar', avatarFile.value)
const res = await fetch(toApiUrl('/api/auth/profile'), {
method: 'POST',
credentials: 'include',
body: fd,
})
if (!res.ok) throw new Error('upload_failed')
const data = await res.json()
auth.user = data.user
avatarFile.value = null
if (previewUrl.value) {
URL.revokeObjectURL(previewUrl.value)
previewUrl.value = ''
}
} catch (e2) {
error.value = '프로필 저장에 실패했어요.'
} finally {
saving.value = false
}
}
</script>
<template>
<section class="wrap">
<h2 class="title">프로필</h2>
<div v-if="error" class="error">{{ error }}</div>
<div class="card" v-if="auth.user">
<div class="row">
<div class="avatar">
<img v-if="avatarUrl" :src="avatarUrl" class="avatarImg" alt="avatar" />
<div v-else class="avatarFallback">{{ (auth.user.email || 'U')[0].toUpperCase() }}</div>
</div>
<div class="meta">
<div class="email">{{ auth.user.email }}</div>
<input v-model="nickname" class="nicknameInput" placeholder="작성자 닉네임" />
<div class="badge" v-if="auth.user.isAdmin">admin</div>
</div>
</div>
<div class="upload">
<label class="label">아바타 업로드</label>
<input class="file" type="file" accept="image/*" :disabled="saving" @change="onAvatarChange" />
<div class="hint">파일 선택은 미리보기만 바뀌고, 실제 반영은 저장 버튼을 눌렀을 때 진행됩니다.</div>
<button class="saveBtn" :disabled="saving" @click="saveProfile">
{{ saving ? '저장중...' : '프로필 저장' }}
</button>
</div>
</div>
</section>
</template>
<style scoped>
.wrap {
padding: 10px 2px;
}
.title {
margin: 0 0 10px;
font-size: 26px;
letter-spacing: -0.02em;
}
.error {
margin-bottom: 10px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(239, 68, 68, 0.3);
background: rgba(239, 68, 68, 0.12);
}
.card {
max-width: 520px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
border-radius: 16px;
padding: 14px;
}
.row {
display: flex;
gap: 12px;
align-items: center;
}
.avatar {
width: 68px;
height: 68px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(0, 0, 0, 0.16);
overflow: hidden;
display: grid;
place-items: center;
}
.avatarImg {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatarFallback {
font-weight: 900;
font-size: 20px;
opacity: 0.9;
}
.meta {
display: grid;
gap: 6px;
flex: 1;
}
.email {
font-weight: 900;
}
.nicknameInput {
width: 100%;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.18);
color: rgba(255, 255, 255, 0.92);
outline: none;
box-sizing: border-box;
}
.badge {
font-size: 12px;
padding: 2px 8px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
width: fit-content;
opacity: 0.9;
}
.upload {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.label {
display: block;
font-size: 13px;
opacity: 0.78;
margin-bottom: 6px;
}
.file {
width: 100%;
}
.hint {
margin-top: 8px;
opacity: 0.72;
font-size: 13px;
}
.saveBtn {
margin-top: 12px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(96, 165, 250, 0.2);
color: rgba(255, 255, 255, 0.92);
cursor: pointer;
font-weight: 800;
}
</style>

543
frontend/src/views/TierEditorView.vue Normal file
View File

@@ -0,0 +1,543 @@
<script setup>
import { computed, nextTick, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import Sortable from 'sortablejs'
import * as htmlToImage from 'html-to-image'
import { api } from '../lib/api'
import { toApiUrl } from '../lib/runtime'
const route = useRoute()
const gameId = computed(() => route.params.gameId)
const tierListId = computed(() => route.params.tierListId)
const gameName = ref('')
const groups = ref([
{ id: 'gS', name: 'S', itemIds: [] },
{ id: 'gA', name: 'A', itemIds: [] },
{ id: 'gB', name: 'B', itemIds: [] },
{ id: 'gC', name: 'C', itemIds: [] },
{ id: 'gD', name: 'D', itemIds: [] },
])
const pool = ref([])
const itemsById = ref({})
const title = ref('')
const description = ref('')
const isPublic = ref(false)
const error = ref('')
const isSaving = ref(false)
const boardEl = ref(null)
const groupListEl = ref(null)
const poolEl = ref(null)
const groupDropEls = ref({})
const fileEl = ref(null)
function setGroupDropEl(groupId, el) {
if (!el) return
groupDropEls.value[groupId] = el
}
function getListByContainer(containerEl) {
if (!containerEl) return { type: null, groupId: null }
const t = containerEl.getAttribute('data-list-type')
if (t === 'pool') return { type: 'pool', groupId: null }
if (t === 'group') return { type: 'group', groupId: containerEl.getAttribute('data-group-id') }
return { type: null, groupId: null }
}
function normalizeSort(containerEl) {
const ids = Array.from(containerEl.querySelectorAll('[data-item-id]')).map((n) => n.getAttribute('data-item-id'))
const meta = getListByContainer(containerEl)
if (meta.type === 'pool') pool.value = ids
if (meta.type === 'group') {
const g = groups.value.find((x) => x.id === meta.groupId)
if (g) g.itemIds = ids
}
}
function resolveItemSrc(item) {
const src = item?.src || ''
if (!src) return ''
if (src.startsWith('blob:')) return src
return toApiUrl(src)
}
async function initSortables() {
if (!poolEl.value || !groupListEl.value) return
Sortable.create(groupListEl.value, {
animation: 160,
handle: '[data-group-handle]',
ghostClass: 'ghost',
chosenClass: 'chosen',
onEnd: (evt) => {
const next = [...groups.value]
const [moved] = next.splice(evt.oldIndex, 1)
next.splice(evt.newIndex, 0, moved)
groups.value = next
},
})
Sortable.create(poolEl.value, {
group: 'tier-items',
animation: 160,
draggable: '[data-item-id]',
ghostClass: 'ghost',
chosenClass: 'chosen',
onSort: () => normalizeSort(poolEl.value),
onAdd: () => normalizeSort(poolEl.value),
})
Object.entries(groupDropEls.value).forEach(([gid, el]) => {
Sortable.create(el, {
group: 'tier-items',
animation: 160,
draggable: '[data-item-id]',
ghostClass: 'ghost',
chosenClass: 'chosen',
onSort: () => normalizeSort(el),
onAdd: () => normalizeSort(el),
})
})
}
function addCustomImage(file) {
const url = URL.createObjectURL(file)
const id = `c-${Date.now()}-${Math.random().toString(16).slice(2)}`
itemsById.value = {
...itemsById.value,
[id]: { id, src: url, label: file.name || 'custom', origin: 'custom', pendingFile: file },
}
pool.value = [id, ...pool.value]
}
function openFile() {
fileEl.value?.click()
}
function onFileChange(e) {
const file = e.target.files && e.target.files[0]
if (!file) return
addCustomImage(file)
e.target.value = ''
}
async function downloadImage() {
if (!boardEl.value) return
const dataUrl = await htmlToImage.toPng(boardEl.value, { pixelRatio: 2, backgroundColor: '#0b1220' })
const a = document.createElement('a')
a.href = dataUrl
a.download = `${(title.value || gameName.value || 'tierlist').trim()}.png`
a.click()
}
async function uploadPendingCustomItems() {
const entries = Object.values(itemsById.value).filter((item) => item?.origin === 'custom' && item?.pendingFile)
for (const item of entries) {
const fd = new FormData()
fd.append('label', item.label || 'custom')
fd.append('image', item.pendingFile)
const res = await fetch(toApiUrl('/api/tierlists/custom-items'), {
method: 'POST',
credentials: 'include',
body: fd,
})
if (!res.ok) {
throw new Error('custom_upload_failed')
}
const data = await res.json()
const uploaded = data.item
const nextItemsById = { ...itemsById.value }
delete nextItemsById[item.id]
nextItemsById[uploaded.id] = {
id: uploaded.id,
src: uploaded.src,
label: uploaded.label,
origin: 'custom',
}
itemsById.value = nextItemsById
pool.value = pool.value.map((currentId) => (currentId === item.id ? uploaded.id : currentId))
groups.value = groups.value.map((group) => ({
...group,
itemIds: group.itemIds.map((currentId) => (currentId === item.id ? uploaded.id : currentId)),
}))
}
}
function buildPayload(existingId) {
const finalTitle = (title.value || '').trim() || `${(gameName.value || gameId.value).trim()} 티어표`
return {
id: existingId || undefined,
gameId: gameId.value,
title: finalTitle,
description: (description.value || '').trim(),
isPublic: !!isPublic.value,
groups: groups.value.map((g) => ({ id: g.id, name: g.name, itemIds: g.itemIds })),
pool: Object.values(itemsById.value),
}
}
async function save() {
error.value = ''
isSaving.value = true
try {
await uploadPendingCustomItems()
const payload = buildPayload(tierListId.value && tierListId.value !== 'new' ? tierListId.value : null)
const res = await api.saveTierList(payload)
if (tierListId.value === 'new') history.replaceState({}, '', `/editor/${gameId.value}/${res.tierList.id}`)
} catch (e) {
error.value = '저장 실패: 로그인 상태인지 확인해주세요.'
} finally {
isSaving.value = false
}
}
onMounted(() => {
;(async () => {
try {
const gameRes = await api.getGame(gameId.value)
gameName.value = gameRes.game?.name || gameId.value
const base = (gameRes.items || []).map((img) => ({
id: img.id,
src: img.src,
label: img.label,
origin: 'game',
}))
const map = {}
base.forEach((it) => (map[it.id] = it))
itemsById.value = map
pool.value = base.map((it) => it.id)
} catch (e) {
error.value = '게임 기본 이미지를 불러오지 못했어요.'
}
if (tierListId.value && tierListId.value !== 'new') {
try {
const res = await api.getTierList(tierListId.value)
const t = res.tierList
title.value = t.title
description.value = t.description || ''
isPublic.value = !!t.isPublic
groups.value = t.groups
const map = {}
;(t.pool || []).forEach((it) => (map[it.id] = it))
itemsById.value = map
const grouped = new Set()
groups.value.forEach((g) => g.itemIds.forEach((id) => grouped.add(id)))
pool.value = Object.keys(itemsById.value).filter((id) => !grouped.has(id))
} catch (e) {
error.value = '티어표를 불러오지 못했어요.'
}
}
await nextTick()
await initSortables()
})()
})
</script>
<template>
<section class="head">
<div>
<div class="kicker">{{ gameName || gameId }}</div>
<input v-model="title" class="titleInput" placeholder="티어표 이름을 입력하세요" />
<input
v-model="description"
class="descInput"
placeholder="설명(선택): 이 티어표의 기준/룰"
/>
<div class="hint">
그룹 이름/순서 변경과 아이템 드래그&드롭이 가능합니다. 저장하려면 로그인 후 <b>저장</b>을 누르세요.
</div>
</div>
<div class="actions">
<label class="toggle">
<input v-model="isPublic" type="checkbox" />
<span>공개</span>
</label>
<button class="btn" :disabled="isSaving" @click="save">{{ isSaving ? '저장중...' : '저장' }}</button>
<button class="btn btn--primary" @click="downloadImage">이미지로 다운로드</button>
</div>
</section>
<div v-if="error" class="error">{{ error }}</div>
<section class="layout">
<div ref="boardEl" class="board">
<div ref="groupListEl" class="rows">
<div v-for="g in groups" :key="g.id" class="row">
<div class="row__label">
<span class="grab" title="드래그로 순서 변경" data-group-handle>↕</span>
<input v-model="g.name" class="groupName" />
</div>
<div
class="row__drop"
:data-list-type="'group'"
:data-group-id="g.id"
:ref="(el) => setGroupDropEl(g.id, el)"
>
<div class="row__empty" v-show="g.itemIds.length === 0">여기로 드래그해서 배치</div>
<div v-for="id in g.itemIds" :key="id" class="cell" :data-item-id="id">
<img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
</div>
</div>
</div>
</div>
</div>
<div class="sidebar">
<div class="sidebar__title">아이템</div>
<div class="sidebar__hint">게임별 기본 이미지 + 커스텀 업로드를 여기에 모읍니다.</div>
<div ref="poolEl" class="pool" data-list-type="pool">
<div v-for="id in pool" :key="id" class="poolItem" :data-item-id="id">
<img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
<div class="poolItem__label">{{ itemsById[id]?.label || id }}</div>
</div>
</div>
<input ref="fileEl" type="file" accept="image/*" class="hidden" @change="onFileChange" />
<button class="btn btn--ghost" @click="openFile">커스텀 이미지 추가</button>
</div>
</section>
</template>
<style scoped>
.head {
display: flex;
gap: 14px;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
padding: 6px 2px 14px;
}
.kicker {
font-size: 12px;
opacity: 0.7;
margin-bottom: 6px;
}
.titleInput {
width: min(520px, 92vw);
font-size: 22px;
font-weight: 800;
letter-spacing: -0.02em;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.92);
outline: none;
}
.descInput {
margin-top: 10px;
width: min(520px, 92vw);
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.18);
color: rgba(255, 255, 255, 0.92);
outline: none;
box-sizing: border-box;
}
.hint {
opacity: 0.78;
margin-top: 8px;
font-size: 13px;
}
.actions {
display: flex;
gap: 10px;
align-items: center;
}
.toggle {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 8px 10px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.12);
font-weight: 800;
cursor: pointer;
user-select: none;
}
.toggle input {
width: 16px;
height: 16px;
}
.btn {
padding: 10px 12px;
border-radius: 12px;
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: 700;
}
.btn:hover {
background: rgba(255, 255, 255, 0.08);
}
.btn--primary {
background: rgba(110, 231, 183, 0.18);
}
.btn--primary:hover {
background: rgba(110, 231, 183, 0.24);
}
.btn--ghost {
width: 100%;
margin-top: 10px;
}
.layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 14px;
}
.error {
margin: 10px 0 14px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(239, 68, 68, 0.3);
background: rgba(239, 68, 68, 0.12);
}
.board {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
border-radius: 16px;
padding: 12px;
}
.rows {
display: grid;
gap: 10px;
}
.row {
display: grid;
grid-template-columns: 180px 1fr;
gap: 10px;
align-items: stretch;
}
.row__label {
border-radius: 14px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
gap: 8px;
align-items: center;
justify-content: flex-start;
padding: 10px 8px;
font-weight: 900;
overflow: hidden;
}
.grab {
cursor: grab;
opacity: 0.85;
width: 26px;
height: 26px;
display: grid;
place-items: center;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(0, 0, 0, 0.16);
flex: 0 0 auto;
}
.groupName {
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(0, 0, 0, 0.12);
color: rgba(255, 255, 255, 0.92);
border-radius: 10px;
padding: 6px 8px;
font-weight: 900;
text-align: left;
outline: none;
min-width: 0;
}
.row__drop {
border-radius: 14px;
background: rgba(0, 0, 0, 0.18);
border: 1px solid rgba(255, 255, 255, 0.10);
min-height: 74px;
padding: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-content: flex-start;
overflow: hidden;
position: relative;
}
.row__empty {
opacity: 0.6;
font-size: 13px;
position: absolute;
inset: 0;
display: grid;
place-items: center;
pointer-events: none;
}
.cell {
display: inline-flex;
flex: 0 0 auto;
}
.thumb {
width: 48px;
height: 48px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.06);
object-fit: cover;
}
.sidebar {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
border-radius: 16px;
padding: 12px;
}
.sidebar__title {
font-weight: 900;
margin-bottom: 6px;
}
.sidebar__hint {
opacity: 0.78;
font-size: 13px;
margin-bottom: 10px;
}
.pool {
display: grid;
gap: 10px;
}
.poolItem {
display: grid;
grid-template-columns: 52px 1fr;
gap: 10px;
align-items: center;
padding: 10px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(0, 0, 0, 0.16);
}
.poolItem__label {
font-weight: 800;
opacity: 0.9;
}
.hidden {
display: none;
}
.ghost {
opacity: 0.3;
}
.chosen {
outline: 2px solid rgba(110, 231, 183, 0.5);
border-radius: 14px;
}
@media (max-width: 980px) {
.layout {
grid-template-columns: 1fr;
}
.row {
grid-template-columns: 150px 1fr;
}
}
</style>