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

릴리스: v0.1.34 파비콘과 관리자 기본 아이템 업로드 개선

Browse Source
This commit is contained in:
zenn
2026-03-26 17:30:03 +09:00
parent 3eceec64e7
commit 5c3877b5c1
8 changed files with 205 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/index.html
View File

@@ -2,7 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link
rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%230b1220'/%3E%3Cpath d='M18 18h28v8H36v20h-8V26H18z' fill='%23f8fafc'/%3E%3C/svg%3E"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>frontend</title>
</head>

155
frontend/src/views/AdminView.vue
View File

@@ -31,10 +31,10 @@ const success = ref('')
const newGameId = ref('')
const newGameName = ref('')
const uploadLabel = ref('')
const uploadFile = ref(null)
const uploadFiles = ref([])
const thumbFile = ref(null)
const itemPreviewUrl = ref('')
const itemPreviewUrls = ref([])
const isItemDragOver = ref(false)
const thumbPreviewUrl = ref('')
const itemFileInput = ref(null)
const thumbFileInput = ref(null)
@@ -43,7 +43,7 @@ const featuredSortable = ref(null)
const hasSelectedGame = computed(() => !!selectedGame.value?.game?.id)
const canApplyThumbnail = computed(() => !!thumbFile.value && !!selectedGameId.value)
const canAddItem = computed(() => !!uploadFile.value && !!selectedGameId.value)
const canAddItem = computed(() => uploadFiles.value.length > 0 && !!selectedGameId.value)
const customItemPageCount = computed(() => Math.max(1, Math.ceil(customItemTotal.value / customItemLimit.value)))
const featuredGames = computed(() =>
featuredGameIds.value
@@ -151,8 +151,7 @@ async function refreshUsers() {
}
function resetUploadState() {
uploadLabel.value = ''
uploadFile.value = null
uploadFiles.value = []
thumbFile.value = null
resetFileInput('item')
resetFileInput('thumb')
@@ -171,9 +170,9 @@ function setGameMode(mode) {
}
function clearPreviewUrl(type) {
if (type === 'item' && itemPreviewUrl.value) {
URL.revokeObjectURL(itemPreviewUrl.value)
itemPreviewUrl.value = ''
if (type === 'item' && itemPreviewUrls.value.length) {
itemPreviewUrls.value.forEach((url) => URL.revokeObjectURL(url))
itemPreviewUrls.value = []
}
if (type === 'thumb' && thumbPreviewUrl.value) {
URL.revokeObjectURL(thumbPreviewUrl.value)
@@ -232,9 +231,46 @@ function onThumb(event) {
}
function onFile(event) {
uploadFile.value = event.target.files && event.target.files[0] ? event.target.files[0] : null
handleItemFiles(event.target.files)
}
function handleItemFiles(fileList) {
const files = Array.from(fileList || []).filter((file) => (file.type || '').startsWith('image/'))
uploadFiles.value = files
clearPreviewUrl('item')
if (uploadFile.value) itemPreviewUrl.value = URL.createObjectURL(uploadFile.value)
if (!files.length) return
itemPreviewUrls.value = files.map((file) => URL.createObjectURL(file))
resetFileInput('item')
}
function openItemFilePicker() {
itemFileInput.value?.click()
}
function clearItemFiles() {
uploadFiles.value = []
clearPreviewUrl('item')
resetFileInput('item')
}
function onItemDragEnter(event) {
event.preventDefault()
isItemDragOver.value = true
}
function onItemDragOver(event) {
event.preventDefault()
isItemDragOver.value = true
}
function onItemDragLeave(event) {
if (event.currentTarget === event.target) isItemDragOver.value = false
}
function onItemDrop(event) {
event.preventDefault()
isItemDragOver.value = false
handleItemFiles(event.dataTransfer?.files)
}
async function uploadThumbnail() {
@@ -267,15 +303,15 @@ async function uploadThumbnail() {
async function uploadItem() {
resetMessages()
if (!uploadFile.value || !selectedGameId.value) {
if (!uploadFiles.value.length || !selectedGameId.value) {
error.value = '아이템 파일을 선택해주세요.'
return
}
try {
const fd = new FormData()
fd.append('label', uploadLabel.value || 'item')
fd.append('image', uploadFile.value)
uploadFiles.value.forEach((file) => fd.append('images', file))
const uploadCount = uploadFiles.value.length
const res = await fetch(toApiUrl(`/api/admin/games/${encodeURIComponent(selectedGameId.value)}/images`), {
method: 'POST',
credentials: 'include',
@@ -285,7 +321,7 @@ async function uploadItem() {
resetUploadState()
await loadGame()
success.value = '게임 기본 아이템이 추가됐어요.'
success.value = `게임 기본 아이템 ${uploadCount}개 추가를 완료했어요.`
} catch (e) {
error.value = '아이템 추가 실패(관리자 권한/파일 크기 확인)'
}
@@ -631,16 +667,36 @@ async function saveFeaturedOrder() {
<div class="section__title">기본 아이템 추가</div>
<div class="itemComposer">
<div class="itemComposer__form">
<input v-model="uploadLabel" class="input input--compact" placeholder="아이템 이름" />
<input ref="itemFileInput" type="file" accept="image/*" class="inputFile inputFile--tight" @change="onFile" />
<button class="btn" :disabled="!canAddItem" @click="uploadItem">아이템 추가</button>
<input ref="itemFileInput" type="file" accept="image/*" multiple class="srOnlyInput" @change="onFile" />
<div
class="dropZone"
:class="{ 'dropZone--active': isItemDragOver }"
@dragenter="onItemDragEnter"
@dragover="onItemDragOver"
@dragleave="onItemDragLeave"
@drop="onItemDrop"
>
<div class="dropZone__title">이미지를 드래그해서 기본 아이템으로 추가</div>
<div class="dropZone__desc">여러 파일을 한 번에 올릴 수 있고, 저장 라벨은 파일명으로 자동 생성됩니다.</div>
<div class="dropZone__actions">
<button class="btn btn--ghost btn--small" type="button" @click="openItemFilePicker">파일 선택</button>
<button class="btn btn--danger btn--small" type="button" :disabled="!uploadFiles.length" @click="clearItemFiles">선택 비우기</button>
</div>
</div>
<button class="btn" :disabled="!canAddItem" @click="uploadItem">
아이템 {{ uploadFiles.length || 0 }}개 추가
</button>
</div>
<div class="itemPreviewCard">
<div class="itemPreviewFrame">
<img v-if="itemPreviewUrl" class="itemPreviewImage" :src="itemPreviewUrl" alt="item preview" />
<div v-else class="itemPreviewEmpty">이미지를 선택해주세요</div>
<div v-if="itemPreviewUrls.length" class="itemPreviewGrid">
<div v-for="(previewUrl, index) in itemPreviewUrls.slice(0, 6)" :key="previewUrl" class="itemPreviewFrame">
<img class="itemPreviewImage" :src="previewUrl" :alt="uploadFiles[index]?.name || 'item preview'" />
</div>
</div>
<div v-else class="itemPreviewEmpty">선택한 기본 아이템 미리보기가 여기에 표시됩니다.</div>
<div class="thumbLabel thumbLabel--preview">
{{ uploadFiles.length ? `선택된 파일 ${uploadFiles.length}개` : '아직 선택된 파일이 없어요.' }}
</div>
<div class="thumbLabel thumbLabel--preview">{{ uploadLabel || '아이템 이름 미리보기' }}</div>
</div>
</div>
</section>
@@ -1006,6 +1062,17 @@ async function saveFeaturedOrder() {
.inputFile--tight {
margin-top: 0;
}
.srOnlyInput {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.btn {
font-size: 12px;
margin-top: 12px;
@@ -1090,20 +1157,53 @@ async function saveFeaturedOrder() {
gap: 12px;
align-items: start;
}
.dropZone {
padding: 18px;
border-radius: 16px;
border: 1px dashed rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.03);
transition:
border-color 0.16s ease,
background 0.16s ease,
transform 0.16s ease;
}
.dropZone--active {
border-color: rgba(96, 165, 250, 0.56);
background: rgba(96, 165, 250, 0.08);
transform: translateY(-1px);
}
.dropZone__title {
font-weight: 900;
}
.dropZone__desc {
margin-top: 8px;
font-size: 13px;
opacity: 0.74;
line-height: 1.5;
}
.dropZone__actions {
margin-top: 12px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.itemPreviewCard {
padding: 10px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
}
.itemPreviewGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.itemPreviewFrame {
width: min(100%, 192px);
aspect-ratio: 1 / 1;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.18);
margin: 0 auto;
}
.itemPreviewImage {
width: 100%;
@@ -1111,12 +1211,13 @@ async function saveFeaturedOrder() {
object-fit: cover;
}
.itemPreviewEmpty {
width: 100%;
height: 100%;
min-height: 192px;
display: grid;
place-items: center;
color: rgba(255, 255, 255, 0.62);
font-size: 13px;
text-align: center;
line-height: 1.5;
}
.thumbGrid {
margin-top: 12px;
@@ -1282,7 +1383,7 @@ async function saveFeaturedOrder() {
grid-template-columns: 1fr;
}
.itemPreviewCard {
max-width: 192px;
max-width: none;
}
}
@media (max-width: 640px) {