릴리스: v1.3.71 관리자 게임 선택 모달 통합

frontend/src/views/AdminView.vue

@@ -34,8 +34,10 @@ const games = ref([])
 const selectedGameId = ref('')
 const selectedGame = ref(null)
 const featuredGameIds = ref([])
-const gameAdminQuery = ref('')
-const gameAdminSort = ref('recent')
+const gamePickerModalOpen = ref(false)
+const gamePickerMode = ref('game-admin')
+const gamePickerQuery = ref('')
+const gamePickerSort = ref('recent')
 
 const customItems = ref([])
 const customItemQuery = ref('')
@@ -197,8 +199,8 @@ const featuredGames = computed(() =>
     .filter(Boolean)
 )
 const availableGamesForFeatured = computed(() => games.value.filter((game) => !featuredGameIds.value.includes(game.id)))
-const filteredAdminGames = computed(() => {
-  const query = gameAdminQuery.value.trim().toLowerCase()
+const filteredGamePickerGames = computed(() => {
+  const query = gamePickerQuery.value.trim().toLowerCase()
   const list = games.value.filter((game) => {
     if (!query) return true
     const haystack = `${game.name || ''} ${game.id || ''}`.toLowerCase()
@@ -206,7 +208,7 @@ const filteredAdminGames = computed(() => {
   })
 
   return list.slice().sort((a, b) => {
-    if (gameAdminSort.value === 'oldest') return Number(a.createdAt || 0) - Number(b.createdAt || 0)
+    if (gamePickerSort.value === 'oldest') return Number(a.createdAt || 0) - Number(b.createdAt || 0)
     return Number(b.createdAt || 0) - Number(a.createdAt || 0)
   })
 })
@@ -289,6 +291,7 @@ const adminOverviewStats = computed(() => {
 const isAnyModalOpen = computed(
   () =>
     gameCreateModalOpen.value ||
+    gamePickerModalOpen.value ||
     userEditModalOpen.value ||
     userPasswordModalOpen.value ||
     userDeleteModalOpen.value ||
@@ -1303,6 +1306,30 @@ function setAdminTierListGameId(gameId) {
   refreshAdminTierLists()
 }
 
+function openGamePickerModal(mode = 'game-admin') {
+  gamePickerMode.value = mode
+  gamePickerQuery.value = ''
+  gamePickerSort.value = 'recent'
+  gamePickerModalOpen.value = true
+}
+
+function closeGamePickerModal() {
+  gamePickerModalOpen.value = false
+  gamePickerQuery.value = ''
+}
+
+async function chooseGameFromPicker(gameId) {
+  if (!gameId) return
+  if (gamePickerMode.value === 'tierlists-filter') {
+    setAdminTierListGameId(gameId)
+    closeGamePickerModal()
+    return
+  }
+
+  await selectAdminGame(gameId)
+  closeGamePickerModal()
+}
+
 function changeAdminTierListLimit(limit) {
   adminTierListLimit.value = limit
   adminTierListPage.value = 1
@@ -1931,16 +1958,6 @@ function userAvatarFallback(user) {
               <div class="modalCard modalCard--customItem" role="dialog" aria-modal="true">
                 <div v-if="modalTargetCustomItem" class="customItemModal">
                   <aside class="customItemModal__pickerPanel">
-                    <div class="customItemModal__selected">
-                      <img class="customItemModal__selectedImage" :src="toApiUrl(modalTargetCustomItem.src)" :alt="modalTargetCustomItem.label" />
-                      <div class="customItemModal__selectedMeta">
-                        <div class="customItemModal__selectedTitle">{{ modalTargetCustomItem.label }}</div>
-                        <div class="customItemModal__selectedChips">
-                          <span class="pill">{{ modalTargetCustomItem.sourceLabel }}</span>
-                          <span class="pill" v-if="modalTargetCustomItem.ownerName">{{ modalTargetCustomItem.ownerName }}</span>
-                        </div>
-                      </div>
-                    </div>
                     <div class="customItemModal__pickerHead">
                       <div class="customItemModal__pickerEyebrow">GAME PICKER</div>
                       <div class="customItemModal__pickerTitle">템플릿으로 추가할 게임</div>
@@ -2015,6 +2032,49 @@ function userAvatarFallback(user) {
               </div>
             </div>
 
+            <div v-if="gamePickerModalOpen" class="modalOverlay" @click.self="closeGamePickerModal">
+              <div class="modalCard" role="dialog" aria-modal="true">
+                <div class="modalCard__titleRow">
+                  <div>
+                    <div class="modalCard__title">게임 선택</div>
+                    <div class="modalCard__desc">
+                      {{ gamePickerMode === 'tierlists-filter' ? '특정 게임의 티어표만 보려면 게임을 선택하세요.' : '관리할 게임을 검색해서 바로 열 수 있어요.' }}
+                    </div>
+                  </div>
+                  <button class="btn btn--ghost btn--small" @click="closeGamePickerModal">닫기</button>
+                </div>
+                <div class="modalCard__form">
+                  <input v-model="gamePickerQuery" class="input" placeholder="게임 이름 또는 ID 검색" />
+                  <select v-model="gamePickerSort" class="select">
+                    <option value="recent">최신순</option>
+                    <option value="oldest">오래된순</option>
+                  </select>
+                  <button
+                    v-if="gamePickerMode === 'tierlists-filter' && adminTierListGameId"
+                    class="btn btn--ghost"
+                    type="button"
+                    @click="setAdminTierListGameId(''); closeGamePickerModal()"
+                  >
+                    모든 게임 보기
+                  </button>
+                </div>
+                <div class="gamePickerModalList">
+                  <button
+                    v-for="game in filteredGamePickerGames"
+                    :key="game.id"
+                    class="adminGamePicker__item"
+                    :class="{ 'adminGamePicker__item--active': gamePickerMode === 'tierlists-filter' ? adminTierListGameId === game.id : selectedGameId === game.id }"
+                    type="button"
+                    @click="chooseGameFromPicker(game.id)"
+                  >
+                    <span class="adminGamePicker__name">{{ game.name }}</span>
+                    <span class="adminGamePicker__meta">{{ game.id }}</span>
+                  </button>
+                  <div v-if="!filteredGamePickerGames.length" class="hint hint--tight">검색 결과가 없어요.</div>
+                </div>
+              </div>
+            </div>
+
             <div v-if="customItemDeleteModalOpen" class="modalOverlay" @click.self="closeCustomItemDeleteModal">
               <div class="modalCard" role="dialog" aria-modal="true">
                 <div class="modalCard__title">아이템 삭제</div>
@@ -2169,24 +2229,11 @@ function userAvatarFallback(user) {
         <div class="adminSidebar__label">Game</div>
         <div class="adminSidebar__group">
           <button class="btn btn--primary" @click="openGameCreateModal">새 게임 생성</button>
-          <input v-model="gameAdminQuery" class="input" placeholder="게임 이름 또는 ID 검색" />
-          <select v-model="gameAdminSort" class="select">
-            <option value="recent">최신순</option>
-            <option value="oldest">오래된순</option>
-          </select>
-          <div class="adminGamePicker">
-            <button
-              v-for="game in filteredAdminGames"
-              :key="game.id"
-              class="adminGamePicker__item"
-              :class="{ 'adminGamePicker__item--active': selectedGameId === game.id }"
-              type="button"
-              @click="selectAdminGame(game.id)"
-            >
-              <span class="adminGamePicker__name">{{ game.name }}</span>
-              <span class="adminGamePicker__meta">{{ game.id }}</span>
-            </button>
-            <div v-if="!filteredAdminGames.length" class="hint hint--tight">검색 결과가 없어요.</div>
+          <button class="btn btn--ghost" @click="openGamePickerModal('game-admin')">게임 선택</button>
+          <div v-if="selectedGame?.game" class="adminSelectionCard">
+            <div class="adminSelectionCard__label">선택한 게임</div>
+            <div class="adminSelectionCard__title">{{ selectedGame.game.name }}</div>
+            <div class="adminSelectionCard__meta">{{ selectedGame.game.id }}</div>
           </div>
           <div v-if="selectedGameId && !hasSelectedGame && !isGameLoading" class="hint hint--tight">선택된 게임 ID: {{ selectedGameId }}</div>
         </div>
@@ -2248,10 +2295,13 @@ function userAvatarFallback(user) {
               @keydown.enter.prevent="submitAdminTierListSearch"
             />
             <button class="btn btn--ghost" @click="submitAdminTierListSearch">검색</button>
-            <select :value="adminTierListGameId" class="select" @change="setAdminTierListGameId($event.target.value)">
-              <option value="">모든 게임</option>
-              <option v-for="game in games" :key="game.id" :value="game.id">{{ game.name }}</option>
-            </select>
+            <button class="btn btn--ghost" @click="openGamePickerModal('tierlists-filter')">게임 선택</button>
+            <div v-if="adminTierListGameId" class="adminSelectionCard">
+              <div class="adminSelectionCard__label">필터된 게임</div>
+              <div class="adminSelectionCard__title">{{ games.find((game) => game.id === adminTierListGameId)?.name || adminTierListGameId }}</div>
+              <div class="adminSelectionCard__meta">{{ adminTierListGameId }}</div>
+              <button class="btn btn--ghost btn--small" @click="setAdminTierListGameId('')">필터 해제</button>
+            </div>
             <select :value="adminTierListLimit" class="select" @change="changeAdminTierListLimit(Number($event.target.value))">
               <option :value="50">50개씩 보기</option>
               <option :value="200">200개씩 보기</option>
@@ -2548,6 +2598,34 @@ function userAvatarFallback(user) {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.adminUiScope .gamePickerModalList {
+  margin-top: 14px;
+  display: grid;
+  gap: 8px;
+  max-height: min(56dvh, 520px);
+  overflow: auto;
+}
+.adminUiScope .adminSelectionCard {
+  display: grid;
+  gap: 6px;
+  padding: 12px 13px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-pill-bg);
+}
+.adminUiScope .adminSelectionCard__label {
+  font-size: 11px;
+  color: var(--theme-text-faint);
+}
+.adminUiScope .adminSelectionCard__title {
+  font-size: 14px;
+  font-weight: 800;
+}
+.adminUiScope .adminSelectionCard__meta {
+  font-size: 11px;
+  color: var(--theme-text-soft);
+  word-break: break-word;
+}
 .adminUiScope .sidebarStat {
   display: grid;
   gap: 4px;
@@ -3373,35 +3451,6 @@ function userAvatarFallback(user) {
   display: grid;
   gap: 10px;
 }
-.adminUiScope .customItemModal__selected {
-  display: grid;
-  gap: 12px;
-  padding: 14px;
-  border-radius: 20px;
-  border: 1px solid var(--theme-border);
-  background: var(--theme-surface-soft);
-}
-.adminUiScope .customItemModal__selectedImage {
-  width: 100%;
-  aspect-ratio: 1 / 1;
-  border-radius: 18px;
-  object-fit: cover;
-  border: 1px solid var(--theme-border);
-  background: var(--theme-surface-soft);
-}
-.adminUiScope .customItemModal__selectedMeta {
-  display: grid;
-  gap: 10px;
-}
-.adminUiScope .customItemModal__selectedTitle {
-  font-size: 18px;
-  font-weight: 900;
-}
-.adminUiScope .customItemModal__selectedChips {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
 .adminUiScope .customItemModal__pickerEyebrow {
   font-size: 11px;
   letter-spacing: 0.12em;