릴리스: v1.2.26 관리자 회원 관리와 셸 UI 개선

frontend/src/views/TierEditorView.vue

@@ -36,21 +36,26 @@ const pendingThumbnailFile = ref(null)
 const thumbnailPreviewUrl = ref('')
 const description = ref('')
 const isPublic = ref(true)
+const showCharacterNames = ref(false)
 const error = ref('')
 const isSaving = ref(false)
 const isExporting = ref(false)
 const isSaveModalOpen = ref(false)
 const isTemplateRequestModalOpen = ref(false)
+const isTemplateUpdateModalOpen = ref(false)
+const isDeleteModalOpen = ref(false)
 const ownerId = ref('')
 const authorName = ref('')
 const authorAccountName = ref('')
 const updatedAt = ref(0)
 const isDragActive = ref(false)
+const isThumbnailDragActive = ref(false)
 const iconSize = ref(80)
 const isFavoriteBusy = ref(false)
 const favoriteCount = ref(0)
 const isFavorited = ref(false)
 const isRequestingTemplate = ref(false)
+const isDeleting = ref(false)
 
 const boardEl = ref(null)
 const exportBoardEl = ref(null)
@@ -108,6 +113,7 @@ const templateRequestChecks = computed(() => [
   },
 ])
 const canSubmitTemplateCreateRequest = computed(() => templateRequestChecks.value.every((item) => item.passed))
+const templateRequestTargetLabel = computed(() => (gameId.value === 'freeform' ? '새로운 템플릿' : (gameName.value || gameId.value || '선택한 게임')))
 
 watch(error, (message) => {
   if (!message) return
@@ -304,14 +310,48 @@ function openThumbnailFile() {
   thumbnailFileEl.value?.click()
 }
 
-function onThumbnailChange(event) {
-  const file = event.target.files?.[0]
+function applyThumbnailFile(file) {
+  if (!file || !file.type.startsWith('image/')) return
   if (thumbnailPreviewUrl.value) {
     URL.revokeObjectURL(thumbnailPreviewUrl.value)
     thumbnailPreviewUrl.value = ''
   }
-  pendingThumbnailFile.value = file || null
-  if (file) thumbnailPreviewUrl.value = URL.createObjectURL(file)
+  pendingThumbnailFile.value = file
+  thumbnailPreviewUrl.value = URL.createObjectURL(file)
+}
+
+function onThumbnailDragEnter() {
+  if (!canEdit.value) return
+  isThumbnailDragActive.value = true
+}
+
+function onThumbnailDragLeave(event) {
+  if (!event.currentTarget.contains(event.relatedTarget)) {
+    isThumbnailDragActive.value = false
+  }
+}
+
+function onThumbnailDrop(event) {
+  if (!canEdit.value) return
+  isThumbnailDragActive.value = false
+  const files = Array.from(event.dataTransfer?.files || []).filter((file) => file.type.startsWith('image/'))
+  if (!files.length) return
+  if (files.length > 1) {
+    toast.info('대표 썸네일은 하나만 설정할 수 있어요. 첫 번째 이미지를 사용할게요.')
+  }
+  applyThumbnailFile(files[0])
+}
+
+function onThumbnailChange(event) {
+  const files = Array.from(event.target.files || []).filter((file) => file.type.startsWith('image/'))
+  if (!files.length) {
+    event.target.value = ''
+    return
+  }
+  if (files.length > 1) {
+    toast.info('대표 썸네일은 하나만 설정할 수 있어요. 첫 번째 이미지를 사용할게요.')
+  }
+  applyThumbnailFile(files[0])
   event.target.value = ''
 }
 
@@ -430,6 +470,7 @@ function buildPayload(existingId) {
     thumbnailSrc: thumbnailSrc.value || '',
     description: (description.value || '').trim(),
     isPublic: !!isPublic.value,
+    showCharacterNames: !!showCharacterNames.value,
     groups: groups.value.map((g) => ({ id: g.id, name: g.name, itemIds: g.itemIds })),
     pool: Object.values(itemsById.value),
   }
@@ -477,17 +518,35 @@ function closeTemplateRequestModal() {
   isTemplateRequestModalOpen.value = false
 }
 
-async function removeTierList() {
-  if (!canEdit.value || isNewTierList.value) return
+function openTemplateUpdateModal() {
+  isTemplateUpdateModalOpen.value = true
+}
+
+function closeTemplateUpdateModal() {
+  isTemplateUpdateModalOpen.value = false
+}
+
+function openDeleteModal() {
+  isDeleteModalOpen.value = true
+}
+
+function closeDeleteModal() {
+  isDeleteModalOpen.value = false
+}
+
+async function confirmDeleteTierList() {
+  if (!canEdit.value || isNewTierList.value || isDeleting.value) return
   error.value = ''
   try {
-    const ok = window.confirm(`"${title.value || gameName.value || '이 티어표'}"를 삭제할까요?`)
-    if (!ok) return
+    isDeleting.value = true
     await api.deleteTierList(tierListId.value)
+    closeDeleteModal()
     toast.success('티어표를 삭제했어요.')
     router.push(gameId.value === 'freeform' ? '/me' : `/games/${gameId.value}`)
   } catch (e) {
     error.value = '티어표 삭제에 실패했어요.'
+  } finally {
+    isDeleting.value = false
   }
 }
 
@@ -517,6 +576,7 @@ async function requestTemplate(type) {
     const persisted = await persistTierList({ showModal: false })
     await api.requestTierListTemplate(persisted.savedTierListId, { type })
     if (type === 'create') closeTemplateRequestModal()
+    if (type === 'update') closeTemplateUpdateModal()
     toast.success(type === 'create' ? '템플릿 등록 요청을 보냈어요.' : '템플릿 업데이트 요청을 보냈어요.')
   } catch (e) {
     if (e?.status === 400 && e?.data?.error === 'title_required') {
@@ -574,6 +634,7 @@ onMounted(() => {
         thumbnailSrc.value = t.thumbnailSrc || ''
         description.value = t.description || ''
         isPublic.value = !!t.isPublic
+        showCharacterNames.value = !!t.showCharacterNames
         authorName.value = t.authorName || ''
         authorAccountName.value = t.authorAccountName || ''
         updatedAt.value = Number(t.updatedAt || 0)
@@ -615,6 +676,7 @@ onUnmounted(() => {
           <div class="previewOnly__drop">
             <div v-for="id in g.itemIds" :key="id" class="previewOnly__cell">
               <img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
+              <div v-if="showCharacterNames" class="itemNameOverlay">{{ itemsById[id]?.label || id }}</div>
             </div>
           </div>
         </div>
@@ -671,6 +733,39 @@ onUnmounted(() => {
     </div>
   </div>
 
+  <div v-if="isTemplateUpdateModalOpen" class="modalOverlay" @click.self="closeTemplateUpdateModal">
+    <div class="modalCard" role="dialog" aria-modal="true" aria-labelledby="templateUpdateTitle">
+      <div id="templateUpdateTitle" class="modalCard__title">템플릿 요청하기</div>
+      <div class="modalCard__desc">
+        {{ templateRequestTargetLabel }}에 직접 추가한 아이템을 포함해 달라고 관리자에게 요청을 보냅니다.
+      </div>
+      <div class="modalCard__note">
+        모두가 사용하는 기본 템플릿이니 개인적인 항목이 아닌 공통된 항목만 추가한 뒤 신청해주세요.
+      </div>
+      <div class="modalCard__actions">
+        <button class="btn btn--ghost" @click="closeTemplateUpdateModal">요청 취소</button>
+        <button class="btn btn--save" :disabled="isRequestingTemplate" @click="requestTemplate('update')">
+          {{ isRequestingTemplate ? '요청중...' : '예, 요청할게요' }}
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div v-if="isDeleteModalOpen" class="modalOverlay" @click.self="closeDeleteModal">
+    <div class="modalCard" role="dialog" aria-modal="true" aria-labelledby="deleteTierListTitle">
+      <div id="deleteTierListTitle" class="modalCard__title">티어표 삭제</div>
+      <div class="modalCard__desc">
+        "{{ title || gameName || '이 티어표' }}"를 삭제할까요? 삭제 후에는 복구할 수 없어요.
+      </div>
+      <div class="modalCard__actions">
+        <button class="btn btn--ghost" @click="closeDeleteModal">취소</button>
+        <button class="btn btn--danger" :disabled="isDeleting" @click="confirmDeleteTierList">
+          {{ isDeleting ? '삭제중...' : '삭제하기' }}
+        </button>
+      </div>
+    </div>
+  </div>
+
   <section class="layout" :style="{ '--thumb-size': `${iconSize}px` }">
     <div class="editorMain">
       <section class="head">
@@ -732,6 +827,7 @@ onUnmounted(() => {
                   <div v-if="!isExporting" 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 v-if="showCharacterNames" class="itemNameOverlay">{{ itemsById[id]?.label || id }}</div>
                     <button
                       v-if="canEdit && !isExporting"
                       class="cellRemoveBtn"
@@ -751,12 +847,31 @@ onUnmounted(() => {
               <span>{{ formatExportDate(fallbackTimestamp) }}</span>
             </div>
           </div>
+
+          <div
+            v-if="canEdit"
+            class="dropzone dropzone--board"
+            :class="{ 'dropzone--active': isDragActive }"
+            @dragenter.prevent="onDragEnter"
+            @dragover.prevent="onDragEnter"
+            @dragleave="onDragLeave"
+            @drop.prevent="onDropFiles"
+          >
+            <div>
+              <div class="dropzone__title">커스텀 이미지 추가</div>
+              <div class="dropzone__desc">이곳으로 이미지를 드래그하거나 파일 선택으로 한 번에 추가할 수 있어요.</div>
+            </div>
+            <div class="dropzone__actions">
+              <input ref="fileEl" type="file" accept="image/*" multiple class="hidden" @change="onFileChange" />
+              <button class="btn btn--ghost dropzone__button" @click="openFile">파일 선택</button>
+            </div>
+          </div>
         </div>
 
         <div class="sidebar">
           <div class="sidebar__title">아이템</div>
           <div class="sidebar__hint">
-            {{ canEdit ? '보드 바로 옆에서 드래그해 넣을 수 있도록 아이템 풀을 고정합니다.' : '공개 티어표는 보기 전용입니다.' }}
+            {{ canEdit ? '등록된 아이템 리스트입니다. 드래그해서 표에 넣을 수 있습니다.' : '공개 티어표는 보기 전용입니다.' }}
           </div>
           <div ref="poolEl" class="pool" data-list-type="pool">
             <div v-for="id in pool" :key="id" class="poolItem" :data-item-id="id">
@@ -764,22 +879,9 @@ onUnmounted(() => {
               <div class="poolItem__label">{{ itemsById[id]?.label || id }}</div>
             </div>
           </div>
-          <div
-            v-if="canEdit"
-            class="dropzone"
-            :class="{ 'dropzone--active': isDragActive }"
-            @dragenter.prevent="onDragEnter"
-            @dragover.prevent="onDragEnter"
-            @dragleave="onDragLeave"
-            @drop.prevent="onDropFiles"
-          >
-            <div class="dropzone__title">커스텀 이미지 추가</div>
-            <div class="dropzone__desc">여러 이미지를 한 번에 드래그하거나 파일 선택으로 추가할 수 있어요.</div>
-          </div>
-          <input ref="fileEl" type="file" accept="image/*" multiple class="hidden" @change="onFileChange" />
-          <button v-if="canEdit" class="btn btn--ghost" @click="openFile">파일 선택</button>
         </div>
       </div>
+
     </div>
 
   </section>
@@ -805,16 +907,24 @@ onUnmounted(() => {
       <div class="editorSidebar__section">
         <div class="editorSidebar__label">대표 썸네일</div>
         <input ref="thumbnailFileEl" type="file" accept="image/*" class="hidden" @change="onThumbnailChange" />
-        <div class="editorSidebar__thumbFrame">
+        <div
+          class="editorSidebar__thumbFrame"
+          :class="{ 'editorSidebar__thumbFrame--active': isThumbnailDragActive }"
+          @dragenter.prevent="onThumbnailDragEnter"
+          @dragover.prevent="onThumbnailDragEnter"
+          @dragleave="onThumbnailDragLeave"
+          @drop.prevent="onThumbnailDrop"
+        >
           <img v-if="displayThumbnailUrl" class="editorSidebar__thumbImage" :src="displayThumbnailUrl" alt="썸네일 미리보기" />
           <div v-else class="editorSidebar__thumbEmpty">대표 썸네일</div>
+          <div class="editorSidebar__thumbOverlay">드래그 또는 클릭으로 썸네일 추가</div>
         </div>
         <button v-if="canEdit" class="btn btn--ghost editorSidebar__button" @click="openThumbnailFile">파일 업로드</button>
         <div v-if="pendingThumbnailFile" class="editorSidebar__fileName">{{ pendingThumbnailFile.name }}</div>
       </div>
 
-      <div class="editorSidebar__section">
-        <button v-if="canFavorite" class="editorSidebar__favorite" :disabled="isFavoriteBusy" @click="toggleFavorite">
+      <div v-if="canFavorite" class="editorSidebar__section">
+        <button class="editorSidebar__favorite" :disabled="isFavoriteBusy" @click="toggleFavorite">
           <span>♡ 즐겨찾기</span>
           <span>{{ favoriteCount }}</span>
         </button>
@@ -846,27 +956,33 @@ onUnmounted(() => {
           <input v-model="isPublic" type="checkbox" :disabled="!canEdit" />
           <span>공개</span>
         </label>
+        <label class="toggle" :class="{ 'toggle--disabled': !canEdit }">
+          <input v-model="showCharacterNames" type="checkbox" :disabled="!canEdit" />
+          <span>캐릭터 이름 표시</span>
+        </label>
         <div class="editorSidebar__actionGrid">
           <button class="btn btn--ghost editorSidebar__button" @click="downloadImage">이미지 다운로드</button>
           <button v-if="canEdit" class="btn btn--save editorSidebar__button" :disabled="isSaving" @click="save">{{ isSaving ? '저장중...' : '저장' }}</button>
         </div>
-        <button v-if="canEdit && !isNewTierList" class="btn btn--danger editorSidebar__button" @click="removeTierList">삭제</button>
-        <button
-          v-if="canRequestTemplateCreate"
-          class="btn btn--ghost editorSidebar__button"
-          :disabled="isRequestingTemplate"
-          @click="openTemplateRequestModal"
-        >
-          템플릿 등록 요청
-        </button>
-        <button
-          v-if="canRequestTemplateUpdate"
-          class="btn btn--ghost editorSidebar__button"
-          :disabled="isRequestingTemplate"
-          @click="requestTemplate('update')"
-        >
-          {{ isRequestingTemplate ? '요청중...' : '템플릿 업데이트 요청' }}
-        </button>
+        <div class="editorSidebar__utilityLinks">
+          <button v-if="canEdit && !isNewTierList" class="editorSidebar__utilityLink editorSidebar__utilityLink--danger" @click="openDeleteModal">삭제하기</button>
+          <button
+            v-if="canRequestTemplateCreate"
+            class="editorSidebar__utilityLink"
+            :disabled="isRequestingTemplate"
+            @click="openTemplateRequestModal"
+          >
+            템플릿 등록 요청
+          </button>
+          <button
+            v-if="canRequestTemplateUpdate"
+            class="editorSidebar__utilityLink"
+            :disabled="isRequestingTemplate"
+            @click="openTemplateUpdateModal"
+          >
+            {{ isRequestingTemplate ? '요청중...' : '템플릿 업데이트 요청' }}
+          </button>
+        </div>
       </div>
     </template>
   </Teleport>
@@ -886,7 +1002,7 @@ onUnmounted(() => {
 }
 .editorCanvas {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 280px;
+  grid-template-columns: minmax(0, clamp(680px, 58vw, 960px)) minmax(280px, 1fr);
   gap: 16px;
   align-items: start;
 }
@@ -958,6 +1074,7 @@ onUnmounted(() => {
 }
 .previewOnly__cell {
   display: inline-flex;
+  position: relative;
 }
 .previewOnly__pool {
   display: grid;
@@ -975,6 +1092,7 @@ onUnmounted(() => {
 }
 .previewOnly__poolItem {
   display: inline-flex;
+  position: relative;
 }
 .toggle {
   display: inline-flex;
@@ -1051,6 +1169,7 @@ onUnmounted(() => {
   background: rgba(239, 68, 68, 0.12);
 }
 .board {
+  width: min(100%, 960px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: linear-gradient(180deg, rgba(55, 55, 55, 0.86), rgba(42, 42, 42, 0.82));
   border-radius: 22px;
@@ -1092,6 +1211,7 @@ onUnmounted(() => {
   justify-content: flex-end;
   margin-top: 8px;
   flex-wrap: wrap;
+  gap: 8px;
 }
 .modalCard__actions .btn {
   width: auto;
@@ -1309,6 +1429,22 @@ onUnmounted(() => {
   flex: 0 0 auto;
   position: relative;
 }
+.itemNameOverlay {
+  position: absolute;
+  inset: auto 0 0 0;
+  padding: 16px 8px 6px;
+  border-radius: 0 0 10px 10px;
+  background: linear-gradient(180deg, rgba(7, 10, 18, 0), rgba(7, 10, 18, 0.92));
+  color: rgba(255, 255, 255, 0.96);
+  font-size: 11px;
+  line-height: 1.25;
+  font-weight: 800;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
 .cellRemoveBtn {
   position: absolute;
   top: -6px;
@@ -1340,6 +1476,7 @@ onUnmounted(() => {
   object-fit: cover;
 }
 .sidebar {
+  min-width: 0;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: linear-gradient(180deg, rgba(52, 52, 52, 0.84), rgba(36, 36, 36, 0.8));
   border-radius: 22px;
@@ -1348,6 +1485,25 @@ onUnmounted(() => {
   position: sticky;
   top: 14px;
 }
+
+.dropzone--board {
+  margin-top: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.dropzone__actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 0 0 auto;
+}
+
+.dropzone__button {
+  min-width: 148px;
+}
 .editorSidebar__section {
   display: grid;
   gap: 10px;
@@ -1381,11 +1537,13 @@ onUnmounted(() => {
   font-size: 12px;
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.56);
+  word-break: keep-all;
 }
 .editorSidebar__hint--warn {
   color: rgba(251, 191, 36, 0.92);
 }
 .editorSidebar__thumbFrame {
+  position: relative;
   width: 100%;
   aspect-ratio: 16 / 9;
   border-radius: 16px;
@@ -1393,6 +1551,11 @@ onUnmounted(() => {
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: #4c4c4c;
 }
+
+.editorSidebar__thumbFrame--active {
+  border-color: rgba(96, 165, 250, 0.8);
+  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
+}
 .editorSidebar__thumbImage {
   width: 100%;
   height: 100%;
@@ -1406,6 +1569,16 @@ onUnmounted(() => {
   color: rgba(255, 255, 255, 0.36);
   font-size: 13px;
 }
+
+.editorSidebar__thumbOverlay {
+  position: absolute;
+  inset: auto 0 0 0;
+  padding: 10px 12px;
+  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 12px;
+  font-weight: 700;
+}
 .editorSidebar__button {
   width: 100%;
   margin-top: 0;
@@ -1437,6 +1610,33 @@ onUnmounted(() => {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
 }
+
+.editorSidebar__utilityLinks {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding-top: 4px;
+}
+
+.editorSidebar__utilityLink {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.74);
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.editorSidebar__utilityLink:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.editorSidebar__utilityLink--danger {
+  color: rgba(248, 113, 113, 0.96);
+}
 .sidebar__title {
   font-weight: 900;
   margin-bottom: 8px;
@@ -1448,6 +1648,7 @@ onUnmounted(() => {
   font-size: 13px;
   margin-bottom: 12px;
   line-height: 1.5;
+  word-break: keep-all;
 }
 .customItemEditor {
   margin-top: 0;
@@ -1504,7 +1705,6 @@ onUnmounted(() => {
   border-radius: 16px;
   border: 1px dashed rgba(255, 255, 255, 0.18);
   background: rgba(255, 255, 255, 0.04);
-  text-align: center;
 }
 .dropzone--active {
   border-color: rgba(110, 231, 183, 0.6);
@@ -1521,21 +1721,35 @@ onUnmounted(() => {
 }
 .pool {
   display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
   gap: 10px;
+  align-content: start;
 }
 .poolItem {
+  min-width: 0;
   display: grid;
-  grid-template-columns: var(--thumb-size, 80px) minmax(0, 1fr);
-  gap: 10px;
-  align-items: center;
-  padding: 10px;
+  grid-template-columns: 1fr;
+  justify-items: center;
+  align-content: start;
+  gap: 8px;
+  padding: 10px 8px;
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.18);
 }
+.poolItem .thumb {
+  width: 100%;
+  max-width: var(--thumb-size, 80px);
+  height: auto;
+  aspect-ratio: 1 / 1;
+}
 .poolItem__label {
+  width: 100%;
   min-width: 0;
+  font-size: 11px;
+  line-height: 1.35;
   font-weight: 800;
+  text-align: center;
   opacity: 0.9;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1567,9 +1781,17 @@ onUnmounted(() => {
   .sidebar {
     position: static;
   }
+  .pool {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    gap: 8px;
+  }
   .editorSidebar__actionGrid {
     grid-template-columns: 1fr;
   }
+  .editorSidebar__utilityLinks {
+    flex-direction: column;
+    align-items: flex-start;
+  }
   .requestChecklist__item {
     grid-template-columns: 1fr;
   }
@@ -1587,5 +1809,13 @@ onUnmounted(() => {
   .previewOnly__row {
     grid-template-columns: 1fr;
   }
+  .pool {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+@media (max-width: 560px) {
+  .pool {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 }
 </style>