관리자 화면 분리 및 요청/아이템 관리 흐름 정리

frontend/src/components/admin/AdminFeaturedSection.vue

@@ -0,0 +1,64 @@
+<script setup>
+const props = defineProps({
+  featuredGames: { type: Array, required: true },
+  availableGamesForFeatured: { type: Array, required: true },
+  featuredGameIds: { type: Array, required: true },
+  featuredListRef: { type: Function, required: true },
+  saveFeaturedOrder: { type: Function, required: true },
+  moveFeaturedGame: { type: Function, required: true },
+  removeFeaturedGame: { type: Function, required: true },
+  addFeaturedGame: { type: Function, required: true },
+})
+</script>
+
+<template>
+  <div class="panel">
+    <div class="sectionHeader">
+      <div>
+        <div class="panel__title">홈 화면 상단 고정 순서</div>
+        <div class="hint hint--tight">여기에 넣은 게임은 지정한 순서대로 먼저 노출되고, 나머지 게임은 최근 생성순으로 뒤에 이어집니다. 최대 50개까지 설정할 수 있어요.</div>
+      </div>
+      <button class="btn btn--primary" @click="props.saveFeaturedOrder">순서 저장</button>
+    </div>
+
+    <div class="featuredOrderPanel">
+      <div class="featuredOrderPanel__list">
+        <div class="section__title">상단 고정 목록</div>
+        <div v-if="!props.featuredGames.length" class="hint">아직 상단 고정 게임이 없어요.</div>
+        <div v-else :ref="props.featuredListRef" class="featuredList">
+          <article v-for="(game, index) in props.featuredGames" :key="game.id" class="featuredCard" :data-featured-id="game.id">
+            <div class="featuredCard__meta">
+              <span class="featuredCard__rank">{{ index + 1 }}</span>
+              <div>
+                <div class="featuredCard__title">{{ game.name }}</div>
+                <div class="featuredCard__id">{{ game.id }}</div>
+              </div>
+            </div>
+            <div class="featuredCard__actions">
+              <button class="btn btn--ghost btn--small" data-featured-handle>드래그</button>
+              <button class="btn btn--ghost btn--small" :disabled="index === 0" @click="props.moveFeaturedGame(game.id, -1)">위로</button>
+              <button class="btn btn--ghost btn--small" :disabled="index === props.featuredGames.length - 1" @click="props.moveFeaturedGame(game.id, 1)">아래로</button>
+              <button class="btn btn--danger btn--small" @click="props.removeFeaturedGame(game.id)">제외</button>
+            </div>
+          </article>
+        </div>
+      </div>
+
+      <div class="featuredOrderPanel__picker">
+        <div class="section__title">게임 추가</div>
+        <div class="featuredPickerList">
+          <button
+            v-for="game in props.availableGamesForFeatured"
+            :key="game.id"
+            class="featuredPickerItem"
+            :disabled="props.featuredGameIds.length >= 50"
+            @click="props.addFeaturedGame(game.id)"
+          >
+            <span>{{ game.name }}</span>
+            <span class="featuredPickerItem__id">{{ game.id }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>