From 4fc7bcb29a02da9467b9a9408af3ed7418707e2e Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Thu, 2 Apr 2026 11:59:15 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A6=B4=EB=A6=AC=EC=8A=A4:=20v1.3.56=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=EC=9E=90=20=EB=B0=B0=EC=A7=80=20=EC=83=89?=
 =?UTF-8?q?=EC=83=81=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=ED=85=9C=20=EB=93=9C=EB=9E=98=EA=B7=B8=20=ED=95=B8=EB=93=A4=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/admin/AdminGamesSection.vue    |  1 +
 .../src/composables/useAdminGameManager.js    |  1 +
 frontend/src/views/AdminView.vue              | 39 +++++++++++++++++++
 3 files changed, 41 insertions(+)

diff --git a/frontend/src/components/admin/AdminGamesSection.vue b/frontend/src/components/admin/AdminGamesSection.vue
index 1e31671..bbcabe8 100644
--- a/frontend/src/components/admin/AdminGamesSection.vue
+++ b/frontend/src/components/admin/AdminGamesSection.vue
@@ -147,6 +147,7 @@ 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="아이템 이름" />
           <div class="thumbCard__actions">
diff --git a/frontend/src/composables/useAdminGameManager.js b/frontend/src/composables/useAdminGameManager.js
index 363c0b6..c083b9d 100644
--- a/frontend/src/composables/useAdminGameManager.js
+++ b/frontend/src/composables/useAdminGameManager.js
@@ -50,6 +50,7 @@ export function useAdminGameManager({
     gameItemSortable.value = Sortable.create(gameItemListEl.value, {
       animation: 160,
       draggable: '[data-game-item-id]',
+      handle: '[data-game-item-handle]',
       ghostClass: 'ghost',
       chosenClass: 'chosen',
       onEnd: (evt) => {
diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
index cc440f1..c38ea6b 100644
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -2734,6 +2734,25 @@ function userAvatarFallback(user) {
   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 {
+  cursor: grabbing;
+}
 .adminUiScope .thumb {
   width: 100%;
   aspect-ratio: 1 / 1;
@@ -3632,6 +3651,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);