349 lines
9.7 KiB
Vue
349 lines
9.7 KiB
Vue
<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>
|