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

frontend/src/views/AdminView.vue

@@ -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) {