릴리스: v1.3.72 관리자 게임 라우트 초기화 오류 수정

docs/history.md

@@ -1,5 +1,12 @@
 # 의사결정 이력
 
+## 2026-04-02 v1.3.72
+- 라우트 복원용 watcher가 composable 반환값 초기화보다 먼저 돌 수 있는 구간에서는 직접 함수를 즉시 호출하기보다, 초기화 완료 뒤 실행되도록 한 템포 미루는 편이 안전하다고 정리했다.
+
+## 2026-04-02 v1.3.71
+- 관리자에서 게임 선택 지점이 늘어나는 구조라면 각 화면마다 셀렉트/긴 리스트를 따로 두기보다, 공용 검색 모달 하나로 통일하는 편이 이후 100개 이상 게임이 쌓여도 더 안정적이라고 정리했다.
+- 아이템 모달은 참조 정보 정리 뒤에도 왼쪽 선택 요약 카드가 여전히 과하다고 판단해, 예전처럼 게임 선택 자체에 더 집중한 구조로 한 단계 더 되돌리는 편이 맞다고 판단했다.
+
 ## 2026-04-02 v1.3.70
 - 관리자 티어표 목록은 페이지 단위 열람만으로는 운영 개입이 부족하므로, 게임별 필터와 카드 단위 관리 액션을 함께 붙여 실제 검수 도구로 쓰는 편이 맞다고 정리했다.
 - 공개 여부는 문장 속 메타보다 배지로 따로 떼어 보여주는 편이 다른 관리자 카드들과 문법이 맞고, 공개/비공개 전환도 같은 관리 모달 안에서 바로 처리하는 쪽이 운영 흐름상 자연스럽다고 판단했다.

docs/todo.md

@@ -1,6 +1,8 @@
 # 할 일 및 이슈
 
 ## 단기 확인
+- 관리자 `/admin/games?gameId=...` 직접 진입과 새로고침에서 선택 게임이 정상 복원되고 콘솔 오류가 없는지 한 번 더 QA한다.
+- 공용 `게임 선택` 검색 모달은 새로 붙였으므로, 게임 관리 선택/전체 티어표 관리 필터 양쪽에서 검색어 입력, 선택, 해제, 뒤로가기 흐름을 한 번 더 QA한다.
 - 관리자 `전체 티어표 관리`의 게임 필터와 관리 모달은 새로 붙였으므로, 실제 운영 데이터에서 필터 전환 후 공개/비공개 집계, 제목 수정, 비공개 전환, 삭제 흐름이 자연스럽게 이어지는지 한 번 더 QA한다.
 - 관리자 게임 관리 상단의 `전체 / 공개 / 비공개` 티어표 수치와 전체 티어표 관리 상단 집계가 실제 운영 데이터와 맞는지, 공개 전환 직후 숫자가 자연스럽게 갱신되는지 한 번 더 QA한다.
 - 관리자 아이템 상세 모달은 왼쪽 선택 카드와 오른쪽 상세 본문으로 다시 정리했으므로, 데스크톱/모바일에서 긴 게임 목록과 긴 참조 목록이 각각 자연스럽게 스크롤되는지 한 번 더 QA한다.

docs/update.md

@@ -1,5 +1,14 @@
 # 업데이트 로그
 
+## 2026-04-02 v1.3.72
+- 관리자 화면 초기화 중 `/admin/games?gameId=...` 경로를 즉시 처리하는 watcher가 `loadGame` 초기화보다 먼저 실행되어 브라우저 콘솔에 `Cannot access 'loadGame' before initialization` 오류가 나던 문제를 수정함.
+- 게임 라우트 진입 시 실제 게임 로딩 호출은 컴포넌트 초기화가 끝난 뒤 microtask로 미뤄 실행하도록 바꿔, 첫 진입/새로고침에서도 게임 선택 복원 흐름이 안전하게 이어지게 정리함.
+
+## 2026-04-02 v1.3.71
+- 관리자 아이템 모달은 최근 추가했던 선택 요약 카드를 다시 걷어내고, 더 단순한 `게임 선택 패널 + 상세 작업 영역` 구조로 되돌려 이전 흐름에 가깝게 정리함.
+- 관리자 `게임 관리`와 `전체 티어표 관리`의 게임 선택은 긴 셀렉트/목록 대신 공용 `게임 선택` 검색 모달로 바꿔, 게임 수가 많아져도 이름·ID 검색으로 바로 찾아 선택할 수 있게 함.
+- 전체 티어표 관리의 게임 필터 해제도 같은 모달 흐름에 맞춰 `모든 게임 보기`로 처리하고, 사이드바에는 현재 선택된 게임만 요약 카드로 보여줘 긴 리스트가 계속 쌓이지 않게 정리함.
+
 ## 2026-04-02 v1.3.70
 - 관리자 `전체 티어표 관리`는 이제 게임별 필터를 지원해, 특정 게임에서 만들어진 티어표만 따로 골라 보며 공개/비공개 분포를 확인할 수 있게 함.
 - 전체 티어표 카드는 공개 여부를 텍스트 대신 다른 관리자 화면과 같은 배지 형식으로 표시하고, 카드의 `관리` 액션에서 제목·설명 수정, 공개/비공개 전환, 삭제를 바로 처리할 수 있게 보강함.

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 ||
@@ -424,7 +427,9 @@ watch(
       const nextGameId = typeof route.query.gameId === 'string' ? route.query.gameId : ''
       if (nextGameId && nextGameId !== selectedGameId.value) {
         selectedGameId.value = nextGameId
-        loadGame()
+        queueMicrotask(() => {
+          if (selectedGameId.value === nextGameId) void loadGame()
+        })
       }
       return
     }
@@ -1303,6 +1308,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 +1960,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 +2034,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 +2231,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 +2297,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 +2600,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 +3453,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;