릴리스: v1.3.58 관리자 드래그 fallback 및 드롭존 재정비

frontend/src/components/admin/AdminGamesSection.vue

@@ -86,6 +86,7 @@ const props = defineProps({
             <div
               class="dropZone"
               :class="{ 'dropZone--active': props.isItemDragOver }"
+              @click="props.openItemFilePicker"
               @dragenter="props.onItemDragEnter"
               @dragover="props.onItemDragOver"
               @dragleave="props.onItemDragLeave"
@@ -97,8 +98,7 @@ const props = defineProps({
                 <span v-if="props.stagedRequestDraftCount"> 현재 요청에서 가져온 아이템 {{ props.stagedRequestDraftCount }}개도 함께 검토 중이에요.</span>
               </div>
               <div class="dropZone__actions">
-                <button class="btn btn--ghost btn--small" type="button" @click="props.openItemFilePicker">파일 선택</button>
-                <button class="btn btn--danger btn--small" type="button" :disabled="!props.uploadItemDrafts.length" @click="props.clearItemFiles">선택 비우기</button>
+                <button class="btn btn--ghost btn--small" type="button" @click.stop="props.openItemFilePicker">파일 선택</button>
               </div>
             </div>
             <button class="btn" :disabled="!props.canAddItem" @click="props.uploadItem">
@@ -147,18 +147,18 @@ const props = defineProps({
       <div v-if="!props.selectedGame?.items?.length" class="hint">아직 등록된 기본 아이템이 없어요.</div>
       <div v-else :ref="props.gameItemListRef" class="thumbGrid">
         <div v-for="item in props.selectedGame.items" :key="item.id" class="thumbCard" :data-game-item-id="item.id">
-          <div class="thumbCard__dragHandle" data-game-item-handle>순서 이동</div>
-          <img class="thumb thumb--game" :src="toApiUrl(item.src)" :alt="item.label" />
-          <input v-model="item.draftLabel" class="input input--labelEdit" placeholder="아이템 이름" />
+          <img class="thumb thumb--game" :src="toApiUrl(item.src)" :alt="item.label" draggable="false" />
+          <input v-model="item.draftLabel" class="input input--labelEdit" placeholder="아이템 이름" data-no-drag />
           <div class="thumbCard__actions">
             <button
               class="btn btn--ghost btn--small"
+              data-no-drag
               :disabled="item.isSavingLabel || !item.draftLabel?.trim() || item.draftLabel.trim() === item.label"
               @click="props.saveGameItemLabel(item)"
             >
               {{ item.isSavingLabel ? '저장중...' : '이름 저장' }}
             </button>
-            <button class="btn btn--danger btn--small" @click="props.removeGameItem(item.id)">아이템 삭제</button>
+            <button class="btn btn--danger btn--small" data-no-drag @click="props.removeGameItem(item.id)">아이템 삭제</button>
           </div>
         </div>
       </div>

frontend/src/composables/useAdminGameManager.js

@@ -50,7 +50,10 @@ export function useAdminGameManager({
     gameItemSortable.value = Sortable.create(gameItemListEl.value, {
       animation: 160,
       draggable: '[data-game-item-id]',
-      handle: '[data-game-item-handle]',
+      forceFallback: true,
+      fallbackOnBody: true,
+      filter: '[data-no-drag]',
+      preventOnFilter: false,
       ghostClass: 'ghost',
       chosenClass: 'chosen',
       onEnd: (evt) => {

frontend/src/views/AdminView.vue

@@ -2628,10 +2628,16 @@ function userAvatarFallback(user) {
   align-items: start;
 }
 .adminUiScope .dropZone {
-  padding: 18px;
+  min-height: 180px;
+  padding: 24px 18px;
   border-radius: 16px;
-  border: 1px dashed var(--theme-border-strong);
+  border: 2px dashed color-mix(in srgb, var(--theme-border-strong) 82%, rgba(255, 255, 255, 0.12));
   background: var(--theme-pill-bg);
+  display: grid;
+  place-items: center;
+  align-content: center;
+  text-align: center;
+  cursor: pointer;
   transition:
     border-color 0.16s ease,
     background 0.16s ease,
@@ -2644,18 +2650,21 @@ function userAvatarFallback(user) {
 }
 .adminUiScope .dropZone__title {
   font-weight: 900;
+  font-size: 16px;
 }
 .adminUiScope .dropZone__desc {
   margin-top: 8px;
   font-size: 13px;
   opacity: 0.74;
   line-height: 1.5;
+  max-width: 480px;
 }
 .adminUiScope .dropZone__actions {
   margin-top: 12px;
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
+  justify-content: center;
 }
 .adminUiScope .itemPreviewCard {
   margin-top: 12px;
@@ -2733,24 +2742,10 @@ function userAvatarFallback(user) {
   background: var(--theme-surface-soft);
   padding: 12px;
   min-width: 0;
-}
-.adminUiScope .thumbCard__dragHandle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 10px;
-  padding: 5px 9px;
-  border-radius: 999px;
-  border: 1px dashed rgba(255, 255, 255, 0.16);
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--theme-text-soft);
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.02em;
   cursor: grab;
   user-select: none;
 }
-.adminUiScope .thumbCard__dragHandle:active {
+.adminUiScope .thumbCard:active {
   cursor: grabbing;
 }
 .adminUiScope .thumb {