릴리스: v1.2.70 관리자 게임 관리 레이아웃 정리

docs/update.md

@@ -1,5 +1,10 @@
 # 업데이트 로그
 
+## 2026-03-31 v1.2.70
+- 관리자 게임 관리의 썸네일 드롭존을 카드 안 카드 구조 대신, 썸네일 전체 위에 하단 오버레이 문구를 얹는 단일 미디어 영역으로 정리함.
+- 게임 관리 본문 상단 안내 패널과 과한 설명 문구를 제거하고, 비선택 상태는 `게임을 선택해 주세요.` 한 줄 중심의 empty 상태로 단순화함.
+- 새 게임 생성 버튼은 게임 선택과 함께 오른쪽 사이드로 옮겨, 게임 관리 흐름을 선택·생성·썸네일 지정까지 한쪽 패널에서 처리하도록 정리함.
+
 ## 2026-03-31 v1.2.69
 - 좌우 사이드 축소/확대 시 텍스트를 즉시 `display:none` 처리하던 방식을 줄이고, 폭·투명도 기반 전환으로 바꿔 아이콘이 떨리는 듯한 느낌을 완화함.
 - 관리자 게임 관리는 오른쪽 사이드에서 게임 선택과 썸네일 지정을 담당하도록 재배치하고, 본문은 기본 아이템 추가/이름 입력/목록 관리에 집중하도록 정리함.

frontend/src/views/AdminView.vue

@@ -1243,22 +1243,6 @@ async function saveFeaturedOrder() {
           </template>
 
             <template v-else-if="activeTab === 'game-admin'">
-          <div class="panel">
-            <div class="sectionHeader">
-              <div>
-                <div class="panel__title">게임 관리</div>
-                <div class="hint hint--tight">등록된 게임을 선택하면 아래에서 썸네일과 기본 아이템을 바로 수정할 수 있어요.</div>
-              </div>
-              <button class="btn btn--primary" @click="openGameCreateModal">새 게임 생성</button>
-            </div>
-
-            <div class="gameManagerGrid gameManagerGrid--single">
-              <section class="adminCard adminCard--muted">
-                <div class="section__title">아이템 관리 안내</div>
-                <div class="hint hint--tight">게임 선택과 썸네일 지정은 오른쪽 사이드에서 진행하고, 이 본문에서는 기본 아이템 추가와 현재 아이템 관리만 담당합니다.</div>
-              </section>
-            </div>
-          </div>
 
           <div v-if="isGameLoading" class="panel panel--empty">
             <div class="emptyState">
@@ -1344,10 +1328,7 @@ async function saveFeaturedOrder() {
           </div>
             <div v-else class="panel panel--empty">
               <div class="emptyState">
-                <div class="emptyState__title">게임을 선택하면 상세 관리가 열려요.</div>
-                <div class="emptyState__desc">
-                  위에서 기존 게임을 선택하거나 새 게임을 만든 뒤, 같은 화면에서 바로 썸네일과 기본 아이템을 정리할 수 있어요.
-                </div>
+                <div class="emptyState__title">게임을 선택해 주세요.</div>
                 <div v-if="selectedGameId" class="hint hint--tight">선택한 게임을 찾지 못했거나 로딩 중 오류가 발생했어요. 다시 선택해보세요.</div>
               </div>
             </div>
@@ -1750,11 +1731,11 @@ async function saveFeaturedOrder() {
       <section v-if="activeTab === 'game-admin'" class="adminSidebar__panel">
         <div class="adminSidebar__label">Game</div>
         <div class="adminSidebar__group">
+          <button class="btn btn--primary" @click="openGameCreateModal">새 게임 생성</button>
           <select :value="selectedGameId" class="select" @change="handleSelectedGameChange">
             <option value="">게임을 선택해주세요</option>
             <option v-for="game in games" :key="game.id" :value="game.id">{{ game.name }} ({{ game.id }})</option>
           </select>
-          <div class="hint hint--tight">선택한 게임의 썸네일과 기본 아이템 관리가 본문과 연동됩니다.</div>
           <div v-if="selectedGameId && !hasSelectedGame && !isGameLoading" class="hint hint--tight">선택된 게임 ID: {{ selectedGameId }}</div>
         </div>
         <div v-if="hasSelectedGame" class="adminSidebar__group">
@@ -1774,7 +1755,7 @@ async function saveFeaturedOrder() {
             <img v-if="displayThumbnailUrl" class="selectedThumb selectedThumb--sidebar" :src="displayThumbnailUrl" :alt="selectedGame.game.name" />
             <div v-else class="selectedThumb selectedThumb--empty selectedThumb--sidebar">대표 썸네일</div>
             <div class="thumbDropZone__copy">
-              <div class="thumbDropZone__title">클릭하거나 드래그해서 썸네일 추가</div>
+              <div class="thumbDropZone__title">클릭 or 드래그</div>
             </div>
           </button>
           <div class="adminSidebar__actions adminSidebar__actions--stack">
@@ -2398,33 +2379,35 @@ async function saveFeaturedOrder() {
   word-break: break-all;
 }
 .thumbDropZone {
+  position: relative;
   width: 100%;
-  display: grid;
-  gap: 14px;
-  justify-items: start;
-  padding: 16px;
+  display: block;
+  padding: 0;
+  overflow: hidden;
   border-radius: 18px;
-  border: 1px dashed rgba(255, 255, 255, 0.18);
+  border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(255, 255, 255, 0.03);
   text-align: left;
-  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
 }
 .thumbDropZone--active {
   border-color: rgba(96, 165, 250, 0.56);
-  background: rgba(96, 165, 250, 0.08);
+  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.18);
   transform: translateY(-1px);
 }
 .thumbDropZone__copy {
+  position: absolute;
+  inset: auto 0 0 0;
   display: grid;
-  gap: 6px;
+  place-items: center;
+  min-height: 52px;
+  padding: 12px 16px;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(6, 9, 16, 0.86) 46%, rgba(6, 9, 16, 0.94) 100%);
 }
 .thumbDropZone__title {
   font-weight: 900;
-}
-.thumbDropZone__desc {
-  color: rgba(255, 255, 255, 0.68);
   font-size: 13px;
-  line-height: 1.5;
+  letter-spacing: 0.01em;
 }
 .itemComposer {
   margin-top: 10px;