릴리스: v1.3.74 관리자 선택 제약과 카피라이트 추가

docs/history.md

@@ -1,5 +1,16 @@
 # 의사결정 이력
 
+## 2026-04-02 v1.3.74
+- 관리자 공용 게임 선택 모달은 단순 검색만 제공하기보다, 현재 문맥에서 이미 선택 불가능한 대상을 `이미 추가됨`으로 명시하고 막아 주는 편이 운영 실수를 줄이는 데 더 효과적이라고 정리했다.
+- 프로젝트 표기는 관리자 헤더 상단보다 사이드바 최하단의 작은 카피라이트 문구로 빼는 편이 정보 밀도를 덜 방해한다고 판단했다.
+
+## 2026-04-02 v1.3.73
+- 게임 선택이 여러 관리자 화면에 퍼지기 시작한 시점에서는 일부 화면만 셀렉트나 내부 리스트를 유지하기보다, 공용 검색 모달 하나로 통일하는 편이 장기적으로 더 일관되고 확장에 강하다고 정리했다.
+- 검색 입력과 실행 버튼은 세로로 같은 문법으로 쌓기보다, 입력은 입력끼리 실행은 액션으로 읽히게 한 줄 배치로 적당히 구분해주는 편이 운영 화면에서 덜 답답하다고 판단했다.
+
+## 2026-04-02 v1.3.72
+- 라우트 복원용 watcher가 composable 반환값 초기화보다 먼저 돌 수 있는 구간에서는 직접 함수를 즉시 호출하기보다, 초기화 완료 뒤 실행되도록 한 템포 미루는 편이 안전하다고 정리했다.
+
 ## 2026-04-02 v1.3.71
 - 관리자에서 게임 선택 지점이 늘어나는 구조라면 각 화면마다 셀렉트/긴 리스트를 따로 두기보다, 공용 검색 모달 하나로 통일하는 편이 이후 100개 이상 게임이 쌓여도 더 안정적이라고 정리했다.
 - 아이템 모달은 참조 정보 정리 뒤에도 왼쪽 선택 요약 카드가 여전히 과하다고 판단해, 예전처럼 게임 선택 자체에 더 집중한 구조로 한 단계 더 되돌리는 편이 맞다고 판단했다.

docs/todo.md

@@ -1,6 +1,9 @@
 # 할 일 및 이슈
 
 ## 단기 확인
+- 아이템 관리 모달의 공용 게임 선택기에서는 이미 연결된 게임이 비활성화되므로, 실제 운영 데이터에서 중복 연결 방지와 `이미 추가됨` 표시가 기대대로 읽히는지 한 번 더 QA한다.
+- 공용 게임 선택 모달을 아이템 관리 모달에도 붙였으므로, 관리자 `게임 관리 / 전체 티어표 관리 / 아이템 관리` 세 흐름에서 같은 검색/선택 UX가 자연스럽게 느껴지는지 한 번 더 QA한다.
+- 관리자 `/admin/games?gameId=...` 직접 진입과 새로고침에서 선택 게임이 정상 복원되고 콘솔 오류가 없는지 한 번 더 QA한다.
 - 공용 `게임 선택` 검색 모달은 새로 붙였으므로, 게임 관리 선택/전체 티어표 관리 필터 양쪽에서 검색어 입력, 선택, 해제, 뒤로가기 흐름을 한 번 더 QA한다.
 - 관리자 `전체 티어표 관리`의 게임 필터와 관리 모달은 새로 붙였으므로, 실제 운영 데이터에서 필터 전환 후 공개/비공개 집계, 제목 수정, 비공개 전환, 삭제 흐름이 자연스럽게 이어지는지 한 번 더 QA한다.
 - 관리자 게임 관리 상단의 `전체 / 공개 / 비공개` 티어표 수치와 전체 티어표 관리 상단 집계가 실제 운영 데이터와 맞는지, 공개 전환 직후 숫자가 자연스럽게 갱신되는지 한 번 더 QA한다.

docs/update.md

@@ -1,5 +1,18 @@
 # 업데이트 로그
 
+## 2026-04-02 v1.3.74
+- 아이템 관리 상세에서 템플릿 추가 대상 게임을 고를 때, 이미 해당 이미지가 연결된 게임은 공용 게임 선택 모달에서 `이미 추가됨`으로 표시하고 비활성화해 중복 추가 실수를 미리 막도록 정리함.
+- 관리자 우측 사이드바 최하단에는 작은 카피라이트 문구를 추가해, 헤더에 관리 정보만 남기고 프로젝트 표기는 하단에서 조용히 보이도록 정리함.
+
+## 2026-04-02 v1.3.73
+- 전체 티어표 관리 카드 썸네일은 `draggable="false"`로 바꿔, 미리보기 진입 시 브라우저 기본 이미지 드래그가 클릭을 방해하지 않도록 정리함.
+- 관리자 사이드바의 검색 입력과 검색 버튼은 한 줄로 묶어, 입력/선택/실행 버튼이 모두 같은 크기의 세로 스택처럼 보이던 답답함을 조금 줄이고 역할 구분을 더 분명하게 함.
+- 아이템 관리 상세 모달의 템플릿 추가 대상 선택도 내부 전용 게임 리스트 대신 공용 `게임 선택` 검색 모달을 쓰도록 바꿔, 향후 게임 수가 많아져도 같은 선택 문법으로 이어지게 정리함.
+
+## 2026-04-02 v1.3.72
+- 관리자 화면 초기화 중 `/admin/games?gameId=...` 경로를 즉시 처리하는 watcher가 `loadGame` 초기화보다 먼저 실행되어 브라우저 콘솔에 `Cannot access 'loadGame' before initialization` 오류가 나던 문제를 수정함.
+- 게임 라우트 진입 시 실제 게임 로딩 호출은 컴포넌트 초기화가 끝난 뒤 microtask로 미뤄 실행하도록 바꿔, 첫 진입/새로고침에서도 게임 선택 복원 흐름이 안전하게 이어지게 정리함.
+
 ## 2026-04-02 v1.3.71
 - 관리자 아이템 모달은 최근 추가했던 선택 요약 카드를 다시 걷어내고, 더 단순한 `게임 선택 패널 + 상세 작업 영역` 구조로 되돌려 이전 흐름에 가깝게 정리함.
 - 관리자 `게임 관리`와 `전체 티어표 관리`의 게임 선택은 긴 셀렉트/목록 대신 공용 `게임 선택` 검색 모달로 바꿔, 게임 수가 많아져도 이름·ID 검색으로 바로 찾아 선택할 수 있게 함.

frontend/src/components/admin/AdminTierlistsSection.vue

@@ -40,7 +40,7 @@ const props = defineProps({
       <article v-for="request in props.templateRequests" :key="request.id" class="tierAdminCard templateRequestCard templateRequestCard--aligned">
         <div class="templateRequestCard__side">
           <button class="tierAdminCard__preview templateRequestCard__preview" type="button" @click="props.openTemplateRequestPreview(request)">
-            <img v-if="request.thumbnailSrc" class="tierAdminCard__thumb" :src="toApiUrl(request.thumbnailSrc)" :alt="request.sourceTierListTitle" />
+            <img v-if="request.thumbnailSrc" class="tierAdminCard__thumb" :src="toApiUrl(request.thumbnailSrc)" :alt="request.sourceTierListTitle" draggable="false" />
             <div v-else class="tierAdminCard__thumb tierAdminCard__thumb--empty"></div>
           </button>
           <div class="templateRequestCard__thumbMeta">
@@ -142,7 +142,7 @@ const props = defineProps({
     <div v-else class="tierAdminList">
       <article v-for="tierList in props.adminTierLists" :key="tierList.id" class="tierAdminCard">
         <button class="tierAdminCard__preview" type="button" @click="props.openAdminTierList(tierList)">
-          <img v-if="props.tierListThumbUrl(tierList)" class="tierAdminCard__thumb" :src="props.tierListThumbUrl(tierList)" :alt="tierList.title" />
+          <img v-if="props.tierListThumbUrl(tierList)" class="tierAdminCard__thumb" :src="props.tierListThumbUrl(tierList)" :alt="tierList.title" draggable="false" />
           <div v-else class="tierAdminCard__thumb tierAdminCard__thumb--empty"></div>
         </button>
 

frontend/src/composables/useAdminCustomItems.js

@@ -16,8 +16,6 @@ export function useAdminCustomItems({
   customItemModalDraftLabel,
   customItemModalLabelSaving,
   customItemModalTargetGameId,
-  customItemModalGameQuery,
-  customItemModalGameSort,
   games,
   selectedGameId,
   refreshCustomItems,
@@ -62,8 +60,6 @@ export function useAdminCustomItems({
     modalTargetCustomItem.value = item || null
     customItemModalDraftLabel.value = item?.label || ''
     customItemModalTargetGameId.value = ''
-    customItemModalGameQuery.value = ''
-    customItemModalGameSort.value = 'recent'
     customItemModalOpen.value = true
     pushCustomItemModalHistoryState()
   }
@@ -75,8 +71,6 @@ export function useAdminCustomItems({
     customItemModalDraftLabel.value = ''
     customItemModalLabelSaving.value = false
     customItemModalTargetGameId.value = ''
-    customItemModalGameQuery.value = ''
-    customItemModalGameSort.value = 'recent'
 
     if (fromPopState) {
       customItemModalHistoryActive.value = false

frontend/src/views/AdminView.vue

@@ -46,8 +46,6 @@ const customItemLimit = ref(50)
 const customItemTotal = ref(0)
 const customItemFilter = ref('all')
 const customItemModalTargetGameId = ref('')
-const customItemModalGameQuery = ref('')
-const customItemModalGameSort = ref('recent')
 
 const adminTierLists = ref([])
 const adminTierListQuery = ref('')
@@ -212,6 +210,7 @@ const filteredGamePickerGames = computed(() => {
     return Number(b.createdAt || 0) - Number(a.createdAt || 0)
   })
 })
+const customItemTargetGame = computed(() => games.value.find((game) => game.id === customItemModalTargetGameId.value) || null)
 const importModalItemCount = computed(() => importModalItems.value.length)
 const activeTabTitle = computed(() => {
   if (activeTab.value === 'featured') return '목록 관리'
@@ -427,7 +426,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
     }
@@ -488,7 +489,6 @@ watch(
       customItemQuery.value = ''
       customItemFilter.value = 'all'
       customItemPage.value = 1
-      customItemModalGameQuery.value = ''
       await refreshCustomItems()
       return
     }
@@ -620,21 +620,7 @@ const imageDiagnosticsCards = computed(() => {
 const visibleLinkedGames = computed(() =>
   (modalTargetCustomItem.value?.linkedGames || []).filter((game) => game?.id && game.id !== 'freeform')
 )
-const filteredCustomItemModalGames = computed(() => {
-  const query = customItemModalGameQuery.value.trim().toLowerCase()
-  const linkedIds = new Set(visibleLinkedGames.value.map((game) => game.id))
-  const list = games.value.filter((game) => {
-    if (!query) return true
-    return `${game.name || ''} ${game.id || ''}`.toLowerCase().includes(query)
-  })
-
-  return list.slice().sort((a, b) => {
-    const linkedDelta = Number(linkedIds.has(a.id)) - Number(linkedIds.has(b.id))
-    if (linkedDelta !== 0) return linkedDelta
-    if (customItemModalGameSort.value === 'oldest') return Number(a.createdAt || 0) - Number(b.createdAt || 0)
-    return Number(b.createdAt || 0) - Number(a.createdAt || 0)
-  })
-})
+const linkedCustomItemGameIds = computed(() => new Set(visibleLinkedGames.value.map((game) => game.id).filter(Boolean)))
 
 const imageStatsPeriodLabel = computed(() => (imageStatsMonth.value ? `${imageStatsMonth.value} 기준` : '전체 기간'))
 const imageStatsYearOptions = computed(() => {
@@ -1038,8 +1024,6 @@ const {
   customItemModalDraftLabel,
   customItemModalLabelSaving,
   customItemModalTargetGameId,
-  customItemModalGameQuery,
-  customItemModalGameSort,
   games,
   selectedGameId,
   refreshCustomItems,
@@ -1325,6 +1309,12 @@ async function chooseGameFromPicker(gameId) {
     closeGamePickerModal()
     return
   }
+  if (gamePickerMode.value === 'custom-item-target') {
+    if (linkedCustomItemGameIds.value.has(gameId)) return
+    customItemModalTargetGameId.value = gameId
+    closeGamePickerModal()
+    return
+  }
 
   await selectAdminGame(gameId)
   closeGamePickerModal()
@@ -1961,32 +1951,16 @@ function userAvatarFallback(user) {
                     <div class="customItemModal__pickerHead">
                       <div class="customItemModal__pickerEyebrow">GAME PICKER</div>
                       <div class="customItemModal__pickerTitle">템플릿으로 추가할 게임</div>
+                    </div>
+                    <div class="adminSelectionCard">
+                      <div class="adminSelectionCard__label">선택한 게임</div>
+                      <div class="adminSelectionCard__title">{{ customItemTargetGame?.name || '아직 선택하지 않음' }}</div>
+                      <div class="adminSelectionCard__meta">{{ customItemTargetGame?.id || '게임을 골라 주세요.' }}</div>
+                    </div>
+                    <div class="customItemModal__pickerActions">
+                      <button class="btn btn--ghost" type="button" @click="openGamePickerModal('custom-item-target')">게임 선택</button>
                       <button class="btn btn--ghost btn--small customItemModal__createGameButton" type="button" @click="openGameCreateModal">새 템플릿 만들기</button>
                     </div>
-                    <div class="customItemModal__pickerControls">
-                      <input v-model="customItemModalGameQuery" class="input input--dense" placeholder="게임 이름, ID 검색" />
-                      <select v-model="customItemModalGameSort" class="select">
-                        <option value="recent">최신순</option>
-                        <option value="oldest">오래된순</option>
-                      </select>
-                    </div>
-                    <div class="customItemModal__gameList">
-                      <button
-                        v-for="game in filteredCustomItemModalGames"
-                        :key="game.id"
-                        type="button"
-                        class="customItemModal__gameItem"
-                        :class="{
-                          'customItemModal__gameItem--active': customItemModalTargetGameId === game.id,
-                          'customItemModal__gameItem--linked': visibleLinkedGames.some((entry) => entry.id === game.id),
-                        }"
-                        @click="customItemModalTargetGameId = game.id"
-                      >
-                        <span class="customItemModal__gameName">{{ game.name }}</span>
-                        <span class="customItemModal__gameMeta">{{ game.id }}</span>
-                        <span v-if="visibleLinkedGames.some((entry) => entry.id === game.id)" class="customItemModal__gameState">이미 포함됨</span>
-                      </button>
-                    </div>
                   </aside>
                   <div class="customItemModal__body">
                     <button class="customItemModal__close" type="button" @click="closeCustomItemModal">닫기</button>
@@ -2063,12 +2037,21 @@ function userAvatarFallback(user) {
                     v-for="game in filteredGamePickerGames"
                     :key="game.id"
                     class="adminGamePicker__item"
-                    :class="{ 'adminGamePicker__item--active': gamePickerMode === 'tierlists-filter' ? adminTierListGameId === game.id : selectedGameId === game.id }"
+                    :class="{
+                      'adminGamePicker__item--active': gamePickerMode === 'tierlists-filter'
+                        ? adminTierListGameId === game.id
+                        : gamePickerMode === 'custom-item-target'
+                          ? customItemModalTargetGameId === game.id
+                          : selectedGameId === game.id,
+                      'adminGamePicker__item--disabled': gamePickerMode === 'custom-item-target' && linkedCustomItemGameIds.has(game.id),
+                    }"
                     type="button"
+                    :disabled="gamePickerMode === 'custom-item-target' && linkedCustomItemGameIds.has(game.id)"
                     @click="chooseGameFromPicker(game.id)"
                   >
                     <span class="adminGamePicker__name">{{ game.name }}</span>
                     <span class="adminGamePicker__meta">{{ game.id }}</span>
+                    <span v-if="gamePickerMode === 'custom-item-target' && linkedCustomItemGameIds.has(game.id)" class="adminGamePicker__state">이미 추가됨</span>
                   </button>
                   <div v-if="!filteredGamePickerGames.length" class="hint hint--tight">검색 결과가 없어요.</div>
                 </div>
@@ -2242,8 +2225,10 @@ function userAvatarFallback(user) {
       <section v-else-if="activeTab === 'items'" class="adminSidebar__panel">
         <div class="adminSidebar__label">Filters</div>
         <div class="adminSidebar__group">
-          <input v-model="customItemQuery" class="input" placeholder="파일명, 라벨, 업로더 검색" @keydown.enter.prevent="submitCustomItemSearch" />
-          <button class="btn btn--ghost" @click="submitCustomItemSearch">검색</button>
+          <div class="adminSidebar__inlineRow">
+            <input v-model="customItemQuery" class="input" placeholder="파일명, 라벨, 업로더 검색" @keydown.enter.prevent="submitCustomItemSearch" />
+            <button class="btn btn--ghost" @click="submitCustomItemSearch">검색</button>
+          </div>
         </div>
         <div class="adminSidebar__group">
           <select :value="customItemLimit" class="select" @change="changeCustomItemLimit(Number($event.target.value))">
@@ -2288,13 +2273,15 @@ function userAvatarFallback(user) {
         <template v-if="tierlistsMode === 'requests'"></template>
         <template v-else>
           <div class="adminSidebar__group">
-            <input
-              v-model="adminTierListQuery"
-              class="input"
-              placeholder="제목, 작성자, 게임 이름 검색"
-              @keydown.enter.prevent="submitAdminTierListSearch"
-            />
-            <button class="btn btn--ghost" @click="submitAdminTierListSearch">검색</button>
+            <div class="adminSidebar__inlineRow">
+              <input
+                v-model="adminTierListQuery"
+                class="input"
+                placeholder="제목, 작성자, 게임 이름 검색"
+                @keydown.enter.prevent="submitAdminTierListSearch"
+              />
+              <button class="btn btn--ghost" @click="submitAdminTierListSearch">검색</button>
+            </div>
             <button class="btn btn--ghost" @click="openGamePickerModal('tierlists-filter')">게임 선택</button>
             <div v-if="adminTierListGameId" class="adminSelectionCard">
               <div class="adminSelectionCard__label">필터된 게임</div>
@@ -2402,6 +2389,7 @@ function userAvatarFallback(user) {
         </div>
       </section>
     </aside>
+    <div v-show="globalRightRailOpen" class="adminSidebarFooter adminUiScope">Copyright © 2026 zenn. All rights reserved.</div>
   </Teleport>
 </template>
 
@@ -2480,6 +2468,15 @@ function userAvatarFallback(user) {
   display: grid;
   gap: 12px;
 }
+.adminUiScope.adminSidebarFooter {
+  margin-top: 6px;
+  padding: 0 4px 2px;
+  font-size: 9px;
+  line-height: 1.4;
+  text-align: center;
+  color: var(--theme-text-faint);
+  opacity: 0.72;
+}
 .adminUiScope .adminSidebar__panel {
   display: grid;
   gap: 12px;
@@ -2536,6 +2533,15 @@ function userAvatarFallback(user) {
   display: grid;
   gap: 10px;
 }
+.adminUiScope .adminSidebar__inlineRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+}
+.adminUiScope .adminSidebar__inlineRow .btn {
+  white-space: nowrap;
+}
 .adminUiScope .adminSidebar__group--monthPicker {
   align-items: start;
 }
@@ -2587,6 +2593,11 @@ function userAvatarFallback(user) {
   border-color: rgba(77, 127, 233, 0.58);
   background: rgba(77, 127, 233, 0.12);
 }
+.adminUiScope .adminGamePicker__item--disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+  border-style: dashed;
+}
 .adminUiScope .adminGamePicker__name {
   font-size: 13px;
   font-weight: 800;
@@ -2598,6 +2609,11 @@ function userAvatarFallback(user) {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.adminUiScope .adminGamePicker__state {
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--theme-text-faint);
+}
 .adminUiScope .gamePickerModalList {
   margin-top: 14px;
   display: grid;
@@ -3461,46 +3477,13 @@ function userAvatarFallback(user) {
   font-size: 18px;
   font-weight: 900;
 }
-.adminUiScope .customItemModal__pickerControls {
+.adminUiScope .customItemModal__pickerActions {
   display: grid;
   gap: 10px;
 }
-.adminUiScope .customItemModal__gameList {
-  display: grid;
-  gap: 8px;
-  max-height: 440px;
-  overflow: auto;
-}
 .adminUiScope .customItemModal__createGameButton {
   justify-self: start;
 }
-.adminUiScope .customItemModal__gameItem {
-  display: grid;
-  gap: 4px;
-  padding: 12px 13px;
-  border-radius: 16px;
-  border: 1px solid var(--theme-border);
-  background: var(--theme-surface-soft);
-  color: var(--theme-text);
-  text-align: left;
-  cursor: pointer;
-}
-.adminUiScope .customItemModal__gameItem--active {
-  border-color: rgba(96, 165, 250, 0.42);
-  background: rgba(96, 165, 250, 0.12);
-}
-.adminUiScope .customItemModal__gameItem--linked {
-  border-style: dashed;
-}
-.adminUiScope .customItemModal__gameName {
-  font-size: 13px;
-  font-weight: 800;
-}
-.adminUiScope .customItemModal__gameMeta,
-.adminUiScope .customItemModal__gameState {
-  font-size: 11px;
-  color: var(--theme-text-soft);
-}
 .adminUiScope .customItemModal__body {
   min-width: 0;
   min-height: 0;