릴리스: 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,17 +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">
-          <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,6 +50,10 @@ export function useAdminGameManager({
     gameItemSortable.value = Sortable.create(gameItemListEl.value, {
       animation: 160,
       draggable: '[data-game-item-id]',
+      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,6 +2742,11 @@ function userAvatarFallback(user) {
   background: var(--theme-surface-soft);
   padding: 12px;
   min-width: 0;
+  cursor: grab;
+  user-select: none;
+}
+.adminUiScope .thumbCard:active {
+  cursor: grabbing;
 }
 .adminUiScope .thumb {
   width: 100%;
@@ -3632,6 +3646,26 @@ function userAvatarFallback(user) {
   font-size: 12px;
   font-weight: 800;
 }
+.adminUiScope .pill--create {
+  border-color: rgba(56, 189, 248, 0.36);
+  background: rgba(56, 189, 248, 0.16);
+  color: rgba(224, 242, 254, 0.98);
+}
+.adminUiScope .pill--owned {
+  border-color: rgba(167, 139, 250, 0.34);
+  background: rgba(167, 139, 250, 0.14);
+  color: rgba(243, 232, 255, 0.98);
+}
+.adminUiScope .pill--requestItem {
+  border-color: rgba(250, 204, 21, 0.34);
+  background: rgba(250, 204, 21, 0.14);
+  color: rgba(254, 249, 195, 0.98);
+}
+.adminUiScope .pill--directFile {
+  border-color: rgba(52, 211, 153, 0.34);
+  background: rgba(52, 211, 153, 0.14);
+  color: rgba(209, 250, 229, 0.98);
+}
 .adminUiScope .pill--accent {
   border-color: rgba(251, 191, 36, 0.32);
   background: rgba(251, 191, 36, 0.12);