릴리스: v1.2.69 관리자 게임 관리 재배치와 셸 전환 보정

backend/src/routes/admin.js

@@ -107,8 +107,10 @@ router.post('/games/:gameId/images', requireAdmin, upload.array('images', 50), a
   const game = await findGameById(req.params.gameId)
   if (!game) return res.status(404).json({ error: 'not_found' })
 
-  const manualLabel = typeof req.body?.label === 'string' ? req.body.label.trim() : ''
-  if (manualLabel && manualLabel.length > 60) return res.status(400).json({ error: 'bad_request' })
+  const labelsRaw = req.body?.labels
+  const labels = Array.isArray(labelsRaw) ? labelsRaw : labelsRaw ? [labelsRaw] : []
+  const normalizedLabels = labels.map((label) => (typeof label === 'string' ? label.trim().slice(0, 60) : ''))
+  if (normalizedLabels.some((label) => label.length > 60)) return res.status(400).json({ error: 'bad_request' })
 
   const items = await Promise.all(
     files.map((file, index) =>
@@ -116,7 +118,7 @@ router.post('/games/:gameId/images', requireAdmin, upload.array('images', 50), a
         id: nanoid(),
         gameId: game.id,
         src: `/uploads/games/${file.filename}`,
-        label: index === 0 && manualLabel ? manualLabel : buildItemLabelFromFilename(file),
+        label: normalizedLabels[index] || buildItemLabelFromFilename(file),
       })
     )
   )

docs/update.md

@@ -1,5 +1,34 @@
 # 업데이트 로그
 
+## 2026-03-31 v1.2.69
+- 좌우 사이드 축소/확대 시 텍스트를 즉시 `display:none` 처리하던 방식을 줄이고, 폭·투명도 기반 전환으로 바꿔 아이콘이 떨리는 듯한 느낌을 완화함.
+- 관리자 게임 관리는 오른쪽 사이드에서 게임 선택과 썸네일 지정을 담당하도록 재배치하고, 본문은 기본 아이템 추가/이름 입력/목록 관리에 집중하도록 정리함.
+- 게임 기본 아이템 추가는 업로드 직후 각 파일 이름을 바로 수정할 수 있는 draft 입력 행을 넣고, 선택한 이름이 서버에 함께 저장되도록 관리자 업로드 API를 확장함.
+
+## 2026-03-31 v1.2.68
+- 내 티어표 카드 그리드는 각 카드가 화면 전체 너비를 과도하게 먹지 않도록 최대 폭을 제한해, 1~2개만 있을 때도 적당한 카드 크기를 유지하도록 조정함.
+- 새 티어표 기본 그룹은 기존 S/A/B/C/D 5줄 대신 S/A/B/C 4줄로 시작하게 바꾸고, 좌우 사이드 토글 아이콘 버튼은 외곽선과 배경을 제거해 더 가볍게 정리함.
+
+## 2026-03-31 v1.2.67
+- 홈 화면 게임 템플릿 즐겨찾기 버튼 위치 변경은 유지하면서, 즐겨찾기 on/off 시 카드가 즉시 튀지 않고 부드럽게 재정렬되도록 이동/페이드 전환을 추가함.
+- 별 아이콘을 눌렀을 때 카드가 즐겨찾기 우선순위 위치로 자연스럽게 이동해 전체 라이브러리 전환감이 덜 거칠게 보이도록 보정함.
+
+## 2026-03-31 v1.2.66
+- 내 티어표 카드 하단의 큰 삭제 버튼은 제거하고, 삭제는 상세 편집 화면에서만 하도록 흐름을 단순화함.
+- 내 티어표 카드 그리드를 고정 4/3/2열에서 `auto-fit` 기반 최소 폭 카드로 바꾸고, 제목/메타가 좁은 화면에서도 말줄임과 유연한 폭 계산을 유지하도록 보정함.
+
+## 2026-03-31 v1.2.65
+- 에디터 옵션 토글의 라벨과 스위치 순서를 바꾼 뒤 체크 상태 셀렉터가 끊긴 문제를 보정해, 왼쪽 라벨·오른쪽 스위치 배치에서도 정상 동작하도록 수정함.
+- 왼쪽 사이드 축소 상태 검색은 전용 모달의 기본 스타일이 빠져 있던 문제를 복구해, 다시 중앙 상단 검색 오버레이로 열리도록 정리함.
+
+## 2026-03-31 v1.2.64
+- 메인 콘텐츠가 길어질 때 스크롤 끝이 화면 바닥에 붙지 않도록 중앙 워크스페이스 하단 여백을 추가하고, 긴 작업 화면에서도 마감선이 답답하지 않게 보정함.
+- 템플릿 요청 모달 입력창을 Settings 화면과 같은 어두운 언더라인 입력 문법으로 통일하고, 에디터의 공개/이름 표시 옵션은 체크박스 대신 스위치형 토글로 재구성함.
+
+## 2026-03-31 v1.2.63
+- 앱 셸과 워크스페이스에 걸려 있던 고정 `100dvh` 높이를 풀어, 본문이 길어질 때 중앙 `main` 영역이 잘리거나 접히는 현상을 보정함.
+- 좌우 레일은 그대로 화면 기준 높이를 유지하되, 중앙 작업 영역은 내용만큼 자연스럽게 늘어나도록 높이 계산을 다시 정리함.
+
 ## 2026-03-31 v1.2.62
 - 템플릿 요청 모달의 제목/설명 입력을 Settings 화면과 같은 어두운 입력 문법으로 맞춰 흰 배경/흰 글자처럼 보이던 문제를 정리함.
 - 앱 셸은 사이드 기본 바탕색을 중심으로 재정리하고, 중앙 바디에 배경과 좌우 보더를 줘 긴 스크롤에서도 사이드가 잘리는 듯한 인상을 줄이도록 조정함.

frontend/src/App.vue

@@ -416,7 +416,6 @@ function submitGlobalSearch() {
 <style scoped>
 .appShell {
   min-height: 100dvh;
-  height: 100dvh;
   display: grid;
   grid-template-columns: var(--left-rail-width, 248px) minmax(0, 1fr) var(--right-rail-width, 320px);
   background: rgba(14, 14, 14, 0.96);
@@ -431,7 +430,6 @@ function submitGlobalSearch() {
 .leftRail,
 .rightRail {
   min-height: 100dvh;
-  height: 100dvh;
   border-right: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(14, 14, 14, 0.92);
   box-sizing: border-box;
@@ -562,6 +560,9 @@ function submitGlobalSearch() {
   min-width: 32px;
   width: 32px;
   padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
 }
 
 .appUserCard {
@@ -607,7 +608,9 @@ function submitGlobalSearch() {
   min-width: 0;
   display: grid;
   gap: 4px;
-  transition: opacity 180ms ease;
+  max-width: 180px;
+  overflow: hidden;
+  transition: opacity 180ms ease, max-width 220ms ease, transform 220ms ease;
 }
 
 .appUserCard__name {
@@ -641,12 +644,14 @@ function submitGlobalSearch() {
 .searchStub__input {
   min-width: 0;
   flex: 1;
+  max-width: 100%;
   border: 0;
   background: transparent;
   color: rgba(255, 255, 255, 0.92);
   outline: none;
   font: inherit;
-  transition: opacity 180ms ease, width 180ms ease;
+  overflow: hidden;
+  transition: opacity 180ms ease, max-width 220ms ease, transform 220ms ease;
 }
 
 .searchStub__input::placeholder {
@@ -690,7 +695,10 @@ function submitGlobalSearch() {
 
 .leftNav__label {
   min-width: 0;
+  max-width: 140px;
   white-space: nowrap;
+  overflow: hidden;
+  transition: opacity 180ms ease, max-width 220ms ease, transform 220ms ease;
 }
 
 .leftNav__item--active,
@@ -725,13 +733,15 @@ function submitGlobalSearch() {
 .appShell--leftCollapsed .appUserCard__button,
 .appShell--leftCollapsed .appUserCard__guest {
   justify-content: center;
-  padding: 6px 0;
 }
 
 .appShell--leftCollapsed .appUserCard__meta,
 .appShell--leftCollapsed .leftNav__label,
 .appShell--leftCollapsed .searchStub__input {
-  display: none;
+  opacity: 0;
+  max-width: 0;
+  transform: translateX(-4px);
+  pointer-events: none;
 }
 
 .appShell--leftCollapsed .appUserCard__avatar {
@@ -741,11 +751,10 @@ function submitGlobalSearch() {
 
 .appShell--leftCollapsed .searchStub {
   justify-content: center;
-  padding: 10px 0;
 }
 
 .appShell--leftCollapsed .searchStub__iconButton {
-  width: 100%;
+  width: auto;
 }
 
 .appShell--leftCollapsed .leftNav {
@@ -754,7 +763,6 @@ function submitGlobalSearch() {
 
 .appShell--leftCollapsed .leftNav__item {
   justify-content: center;
-  padding: 11px 0;
 }
 
 .appShell--leftCollapsed .leftRail__bottom {
@@ -790,7 +798,7 @@ function submitGlobalSearch() {
 
 .appMain {
   min-width: 0;
-  min-height: 100dvh;
+  min-height: 0;
   box-sizing: border-box;
   background: rgba(18, 18, 18, 0.98);
   border-left: 1px solid rgba(255, 255, 255, 0.08);
@@ -806,7 +814,6 @@ function submitGlobalSearch() {
   grid-template-rows: 56px minmax(0, 1fr);
   gap: 0;
   min-height: 100dvh;
-  height: 100dvh;
 }
 
 .workspace--localRail {
@@ -848,7 +855,7 @@ function submitGlobalSearch() {
 
 .workspaceBody {
   min-height: 0;
-  padding: 18px 18px 0;
+  padding: 18px 18px 32px;
   border: 0;
   border-radius: 0;
   background: rgba(24, 24, 24, 0.92);
@@ -858,7 +865,7 @@ function submitGlobalSearch() {
 
 .workspaceBody--localRail {
   min-height: 0;
-  padding: 18px 18px 0;
+  padding: 18px 18px 32px;
   border: 0;
   border-radius: 0;
   background: rgba(24, 24, 24, 0.92);
@@ -896,6 +903,60 @@ function submitGlobalSearch() {
   display: none;
 }
 
+.collapsedSearchModal {
+  position: fixed;
+  inset: 0;
+  z-index: 35;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 88px 20px 20px;
+  background: rgba(0, 0, 0, 0.44);
+  backdrop-filter: blur(6px);
+}
+
+.collapsedSearchBar {
+  width: min(520px, calc(100vw - 32px));
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 18px 22px;
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(26, 26, 26, 0.96);
+  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.34);
+}
+
+.collapsedSearchBar__icon {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.collapsedSearchBar__icon img {
+  width: 28px;
+  height: 28px;
+  display: block;
+  filter: brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(207%) hue-rotate(186deg) brightness(96%) contrast(92%);
+}
+
+.collapsedSearchBar__input {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.92);
+  font-size: 18px;
+  font-weight: 700;
+  outline: none;
+}
+
+.collapsedSearchBar__input::placeholder {
+  color: rgba(255, 255, 255, 0.46);
+}
 
 .localRightRailRoot {
   min-height: auto;
@@ -1007,7 +1068,6 @@ function submitGlobalSearch() {
 @media (max-width: 860px) {
   .appShell {
     grid-template-columns: 1fr;
-    height: auto;
     min-height: 100dvh;
   }
 
@@ -1091,10 +1151,11 @@ function submitGlobalSearch() {
   }
 
   .collapsedSearchModal {
-    padding-top: 72px;
+    padding: 72px 16px 16px;
   }
 
   .collapsedSearchBar {
+    width: min(100%, calc(100vw - 24px));
     padding: 16px 18px;
     border-radius: 20px;
   }

frontend/src/views/AdminView.vue

@@ -65,6 +65,7 @@ const newGameId = ref('')
 const newGameName = ref('')
 
 const uploadFiles = ref([])
+const uploadItemDrafts = ref([])
 const thumbFile = ref(null)
 const itemPreviewUrls = ref([])
 const isItemDragOver = ref(false)
@@ -80,7 +81,7 @@ const gameCreateModalOpen = ref(false)
 
 const hasSelectedGame = computed(() => !!selectedGame.value?.game?.id)
 const canApplyThumbnail = computed(() => !!thumbFile.value && !!selectedGameId.value)
-const canAddItem = computed(() => uploadFiles.value.length > 0 && !!selectedGameId.value)
+const canAddItem = computed(() => uploadItemDrafts.value.length > 0 && uploadItemDrafts.value.every((item) => !!item.label.trim()) && !!selectedGameId.value)
 const customItemPageCount = computed(() => Math.max(1, Math.ceil(customItemTotal.value / customItemLimit.value)))
 const adminTierListPageCount = computed(() => Math.max(1, Math.ceil(adminTierListTotal.value / adminTierListLimit.value)))
 const featuredGames = computed(() =>
@@ -437,6 +438,7 @@ async function refreshUsers() {
 
 function resetUploadState() {
   uploadFiles.value = []
+  uploadItemDrafts.value = []
   thumbFile.value = null
   resetFileInput('item')
   resetFileInput('thumb')
@@ -537,8 +539,14 @@ function handleItemFiles(fileList) {
   const files = Array.from(fileList || []).filter((file) => (file.type || '').startsWith('image/'))
   uploadFiles.value = files
   clearPreviewUrl('item')
+  uploadItemDrafts.value = []
   if (!files.length) return
   itemPreviewUrls.value = files.map((file) => URL.createObjectURL(file))
+  uploadItemDrafts.value = files.map((file, index) => ({
+    file,
+    previewUrl: itemPreviewUrls.value[index],
+    label: (file.name || '').replace(/\.[^.]+$/, '').replace(/[_-]+/g, ' ').replace(/\s+/g, ' ').trim().slice(0, 60),
+  }))
   resetFileInput('item')
 }
 
@@ -548,6 +556,7 @@ function openItemFilePicker() {
 
 function clearItemFiles() {
   uploadFiles.value = []
+  uploadItemDrafts.value = []
   clearPreviewUrl('item')
   resetFileInput('item')
 }
@@ -602,15 +611,18 @@ async function uploadThumbnail() {
 
 async function uploadItem() {
   resetMessages()
-  if (!uploadFiles.value.length || !selectedGameId.value) {
+  if (!uploadItemDrafts.value.length || !selectedGameId.value) {
     error.value = '아이템 파일을 선택해주세요.'
     return
   }
 
   try {
     const fd = new FormData()
-    uploadFiles.value.forEach((file) => fd.append('images', file))
-    const uploadCount = uploadFiles.value.length
+    uploadItemDrafts.value.forEach((entry) => {
+      fd.append('images', entry.file)
+      fd.append('labels', entry.label.trim())
+    })
+    const uploadCount = uploadItemDrafts.value.length
     const res = await fetch(toApiUrl(`/api/admin/games/${encodeURIComponent(selectedGameId.value)}/images`), {
       method: 'POST',
       credentials: 'include',
@@ -1240,17 +1252,10 @@ async function saveFeaturedOrder() {
               <button class="btn btn--primary" @click="openGameCreateModal">새 게임 생성</button>
             </div>
 
-            <div class="gameManagerGrid">
-              <section class="adminCard">
-                <div class="section__title">등록된 게임 선택</div>
-                <div class="gameManagerCard__body">
-                  <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 class="gameManagerGrid gameManagerGrid--single">
+              <section class="adminCard adminCard--muted">
+                <div class="section__title">아이템 관리 안내</div>
+                <div class="hint hint--tight">게임 선택과 썸네일 지정은 오른쪽 사이드에서 진행하고, 이 본문에서는 기본 아이템 추가와 현재 아이템 관리만 담당합니다.</div>
               </section>
             </div>
           </div>
@@ -1268,37 +1273,9 @@ async function saveFeaturedOrder() {
                 <div class="selectedGame__name">{{ selectedGame.game.name }}</div>
                 <div class="selectedGame__id">{{ selectedGame.game.id }}</div>
               </div>
-              <div class="detailHead__actions">
-                <button class="btn btn--danger" @click="removeGame">게임 삭제</button>
-              </div>
             </div>
 
-            <div class="section section--topGrid">
-              <section class="adminCard">
-                <div class="section__title">썸네일 적용</div>
-                <input ref="thumbFileInput" type="file" accept="image/*" class="srOnlyInput" @change="onThumb" />
-                <button
-                  class="thumbDropZone"
-                  :class="{ 'thumbDropZone--active': isThumbDragOver }"
-                  type="button"
-                  @click="openThumbFilePicker"
-                  @dragenter="onThumbDragEnter"
-                  @dragover="onThumbDragOver"
-                  @dragleave="onThumbDragLeave"
-                  @drop="onThumbDrop"
-                >
-                  <img v-if="displayThumbnailUrl" class="selectedThumb" :src="displayThumbnailUrl" :alt="selectedGame.game.name" />
-                  <div v-else class="selectedThumb selectedThumb--empty">대표 썸네일</div>
-                  <div class="thumbDropZone__copy">
-                    <div class="thumbDropZone__title">클릭하거나 드래그해서 썸네일 추가</div>
-                    <div class="thumbDropZone__desc">다른 업로드 화면처럼 이미지 한 장을 바로 지정할 수 있어요.</div>
-                  </div>
-                </button>
-                <div class="uploadControls">
-                  <button class="btn" :disabled="!canApplyThumbnail" @click="uploadThumbnail">썸네일 적용</button>
-                </div>
-              </section>
-
+            <div class="section">
               <section class="adminCard">
                 <div class="section__title">기본 아이템 추가</div>
                 <div class="itemComposer">
@@ -1320,18 +1297,24 @@ async function saveFeaturedOrder() {
                       </div>
                     </div>
                     <button class="btn" :disabled="!canAddItem" @click="uploadItem">
-                      아이템 {{ uploadFiles.length || 0 }}개 추가
+                      아이템 {{ uploadItemDrafts.length || 0 }}개 추가
                     </button>
                   </div>
                   <div class="itemPreviewCard">
-                    <div v-if="itemPreviewUrls.length" class="itemPreviewGrid">
-                      <div v-for="(previewUrl, index) in itemPreviewUrls.slice(0, 6)" :key="previewUrl" class="itemPreviewFrame">
-                        <img class="itemPreviewImage" :src="previewUrl" :alt="uploadFiles[index]?.name || 'item preview'" />
+                    <div v-if="uploadItemDrafts.length" class="itemDraftList">
+                      <div v-for="draft in uploadItemDrafts" :key="draft.previewUrl || draft.file.name" class="itemDraftRow">
+                        <div class="itemDraftRow__preview">
+                          <img class="itemPreviewImage" :src="draft.previewUrl" :alt="draft.file.name || 'item preview'" />
+                        </div>
+                        <div class="itemDraftRow__body">
+                          <input v-model="draft.label" class="input input--labelEdit input--dense" maxlength="60" placeholder="아이템 이름" />
+                          <div class="hint hint--tight">{{ draft.file.name }}</div>
+                        </div>
                       </div>
                     </div>
                     <div v-else class="itemPreviewEmpty">선택한 기본 아이템 미리보기가 여기에 표시됩니다.</div>
                     <div class="thumbLabel thumbLabel--preview">
-                      {{ uploadFiles.length ? `선택된 파일 ${uploadFiles.length}개` : '아직 선택된 파일이 없어요.' }}
+                      {{ uploadItemDrafts.length ? `추가 예정 아이템 ${uploadItemDrafts.length}개` : '아직 선택된 파일이 없어요.' }}
                     </div>
                   </div>
                 </div>
@@ -1764,7 +1747,44 @@ async function saveFeaturedOrder() {
         </div>
       </section>
 
-      <section v-if="activeTab === 'items'" class="adminSidebar__panel">
+      <section v-if="activeTab === 'game-admin'" class="adminSidebar__panel">
+        <div class="adminSidebar__label">Game</div>
+        <div class="adminSidebar__group">
+          <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">
+          <div class="selectedGameSidebar__name">{{ selectedGame.game.name }}</div>
+          <div class="selectedGameSidebar__id">{{ selectedGame.game.id }}</div>
+          <input ref="thumbFileInput" type="file" accept="image/*" class="srOnlyInput" @change="onThumb" />
+          <button
+            class="thumbDropZone"
+            :class="{ 'thumbDropZone--active': isThumbDragOver }"
+            type="button"
+            @click="openThumbFilePicker"
+            @dragenter="onThumbDragEnter"
+            @dragover="onThumbDragOver"
+            @dragleave="onThumbDragLeave"
+            @drop="onThumbDrop"
+          >
+            <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>
+          </button>
+          <div class="adminSidebar__actions adminSidebar__actions--stack">
+            <button class="btn" :disabled="!canApplyThumbnail" @click="uploadThumbnail">썸네일 적용</button>
+            <button class="btn btn--danger" @click="removeGame">게임 삭제</button>
+          </div>
+        </div>
+      </section>
+
+      <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" />
@@ -1944,6 +1964,9 @@ async function saveFeaturedOrder() {
   display: grid;
   gap: 10px;
 }
+.adminSidebar__actions--stack .btn {
+  width: 100%;
+}
 .adminSidebar__groupTitle {
   font-size: 13px;
   font-weight: 800;
@@ -2174,6 +2197,9 @@ async function saveFeaturedOrder() {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
 }
+.gameManagerGrid--single {
+  grid-template-columns: minmax(0, 1fr);
+}
 .gameManagerCard__body {
   margin-top: 10px;
   display: grid;
@@ -2186,6 +2212,9 @@ async function saveFeaturedOrder() {
   padding: 16px;
   min-width: 0;
 }
+.adminCard--muted {
+  background: rgba(255, 255, 255, 0.02);
+}
 .sectionHeader {
   display: flex;
   gap: 12px;
@@ -2240,6 +2269,11 @@ async function saveFeaturedOrder() {
 .input--labelEdit {
   margin-top: 10px;
 }
+.input--dense {
+  margin-top: 0;
+  padding-top: 9px;
+  padding-bottom: 9px;
+}
 .hint {
   margin-top: 10px;
   opacity: 0.78;
@@ -2351,6 +2385,18 @@ async function saveFeaturedOrder() {
   place-items: center;
   color: rgba(255, 255, 255, 0.62);
 }
+.selectedThumb--sidebar {
+  width: 100%;
+}
+.selectedGameSidebar__name {
+  font-size: 18px;
+  font-weight: 900;
+}
+.selectedGameSidebar__id {
+  font-size: 12px;
+  opacity: 0.68;
+  word-break: break-all;
+}
 .thumbDropZone {
   width: 100%;
   display: grid;
@@ -2433,6 +2479,29 @@ async function saveFeaturedOrder() {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
 }
+.itemDraftList {
+  display: grid;
+  gap: 10px;
+}
+.itemDraftRow {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 12px;
+  align-items: center;
+}
+.itemDraftRow__preview {
+  width: 72px;
+  height: 72px;
+  overflow: hidden;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(0, 0, 0, 0.18);
+}
+.itemDraftRow__body {
+  min-width: 0;
+  display: grid;
+  gap: 6px;
+}
 .itemPreviewFrame {
   aspect-ratio: 1 / 1;
   border-radius: 12px;

frontend/src/views/HomeView.vue

@@ -82,7 +82,7 @@ function thumbUrl(g) {
   </section>
 
   <div v-if="error" class="error">{{ error }}</div>
-  <section v-if="games.length" class="libraryGrid">
+  <TransitionGroup v-if="games.length" name="libraryCard" tag="section" class="libraryGrid">
     <article v-for="g in games" :key="g.id" class="libraryCard">
       <button
         class="libraryCard__favorite"
@@ -104,7 +104,7 @@ function thumbUrl(g) {
         </div>
       </button>
     </article>
-  </section>
+  </TransitionGroup>
   <div v-else class="libraryEmpty">{{ query ? '검색어에 맞는 게임 템플릿이 없어요.' : '표시할 게임 템플릿이 없어요.' }}</div>
 </template>
 
@@ -139,6 +139,7 @@ function thumbUrl(g) {
   gap: 12px;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
   transition: transform 0.16s ease, background 0.16s ease;
+  will-change: transform, opacity;
 }
 .libraryCard:hover {
   background: rgba(70, 70, 70, 0.96);
@@ -156,8 +157,8 @@ function thumbUrl(g) {
 }
 .libraryCard__favorite {
   position: absolute;
-  top: 12px;
-  right: 12px;
+  bottom: 24px;
+  right: 14px;
   width: 34px;
   height: 34px;
   border-radius: 999px;
@@ -206,6 +207,24 @@ function thumbUrl(g) {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.libraryCard-move,
+.libraryCard-enter-active,
+.libraryCard-leave-active {
+  transition: transform 280ms ease, opacity 220ms ease;
+}
+
+.libraryCard-enter-from,
+.libraryCard-leave-to {
+  opacity: 0;
+  transform: translateY(10px) scale(0.985);
+}
+
+.libraryCard-leave-active {
+  position: absolute;
+  width: calc(100% - 0px);
+  pointer-events: none;
+}
+
 .libraryEmpty {
   padding: 20px 0;
   color: rgba(255, 255, 255, 0.62);

frontend/src/views/MyTierListsView.vue

@@ -54,18 +54,6 @@ function openList(t) {
   router.push(`/editor/${t.gameId}/${t.id}`)
 }
 
-async function removeList(t) {
-  error.value = ''
-  try {
-    const ok = window.confirm(`"${t.title}" 티어표를 삭제할까요?`)
-    if (!ok) return
-    await api.deleteTierList(t.id)
-    myLists.value = myLists.value.filter((entry) => entry.id !== t.id)
-    toast.success('티어표를 삭제했어요.')
-  } catch (e) {
-    error.value = '티어표 삭제에 실패했어요.'
-  }
-}
 </script>
 
 <template>
@@ -101,7 +89,6 @@ async function removeList(t) {
               </div>
             </div>
           </button>
-          <button class="link link--danger" @click="removeList(t)">삭제</button>
         </article>
       </div>
     </div>
@@ -115,25 +102,18 @@ async function removeList(t) {
   border-radius: 0;
   padding: 0;
 }
-.link {
-  padding: 10px 12px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(255, 255, 255, 0.06);
-  color: rgba(255, 255, 255, 0.92);
-  cursor: pointer;
-  font-weight: 800;
-}
 .empty {
   opacity: 0.75;
 }
 .list {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
+  justify-content: start;
   gap: 18px;
 }
 .boardCard {
   display: grid;
+  min-width: 0;
   border-radius: 22px;
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: rgba(62, 62, 62, 0.82);
@@ -184,30 +164,40 @@ async function removeList(t) {
   border-radius: 18px;
 }
 .boardCard__title {
-  font-weight: 900;
+  flex: 1 1 auto;
   min-width: 0;
+  font-weight: 900;
   font-size: 18px;
-  white-space: nowrap;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
   overflow: hidden;
-  text-overflow: ellipsis;
 }
 .boardCard__head {
   padding: 16px 18px 18px;
   display: grid;
-  gap: 6px;
+  gap: 8px;
+  min-width: 0;
 }
 .boardCard__titleRow,
 .boardCard__metaRow {
   display: flex;
   gap: 10px;
+  min-width: 0;
   align-items: center;
   justify-content: space-between;
 }
 
+.boardCard__titleRow {
+  align-items: flex-start;
+}
+
 .boardCard__metaRow {
   align-items: flex-end;
 }
 .boardCard__author {
+  flex: 1 1 auto;
   min-width: 0;
   display: inline-flex;
   gap: 7px;
@@ -246,21 +236,6 @@ async function removeList(t) {
 .boardCard__date {
   font-size: 10px;
 }
-.link--danger {
-  background: rgba(239, 68, 68, 0.14);
-  border-color: rgba(239, 68, 68, 0.28);
-  margin: 0 18px 18px;
-}
-@media (max-width: 1400px) {
-  .list {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-@media (max-width: 1024px) {
-  .list {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
 @media (max-width: 720px) {
   .list {
     grid-template-columns: 1fr;

frontend/src/views/TierEditorView.vue

@@ -24,7 +24,6 @@ const groups = ref([
   { id: 'gA', name: 'A', itemIds: [] },
   { id: 'gB', name: 'B', itemIds: [] },
   { id: 'gC', name: 'C', itemIds: [] },
-  { id: 'gD', name: 'D', itemIds: [] },
 ])
 
 const pool = ref([])
@@ -744,11 +743,11 @@ onUnmounted(() => {
       <div class="templateRequestDraft">
         <label class="templateRequestDraft__field">
           <span class="templateRequestDraft__label">요청 제목</span>
-          <input v-model="templateRequestDraftTitle" class="input" maxlength="80" placeholder="예: 템플릿 등록 요청" />
+          <input v-model="templateRequestDraftTitle" class="templateRequestDraft__input" maxlength="80" placeholder="예: 템플릿 등록 요청" />
         </label>
         <label class="templateRequestDraft__field">
           <span class="templateRequestDraft__label">요청 설명</span>
-          <textarea v-model="templateRequestDraftDescription" class="textarea templateRequestDraft__textarea" maxlength="240" placeholder="예: 여름 이벤트 한정 캐릭터 추가용으로 신규 템플릿이 필요합니다." />
+          <textarea v-model="templateRequestDraftDescription" class="templateRequestDraft__input templateRequestDraft__textarea" maxlength="240" placeholder="예: 여름 이벤트 한정 캐릭터 추가용으로 신규 템플릿이 필요합니다." />
         </label>
       </div>
       <div class="modalCard__actions">
@@ -773,11 +772,11 @@ onUnmounted(() => {
       <div class="templateRequestDraft">
         <label class="templateRequestDraft__field">
           <span class="templateRequestDraft__label">요청 제목</span>
-          <input v-model="templateRequestDraftTitle" class="input" maxlength="80" placeholder="예: 템플릿 업데이트 요청" />
+          <input v-model="templateRequestDraftTitle" class="templateRequestDraft__input" maxlength="80" placeholder="예: 템플릿 업데이트 요청" />
         </label>
         <label class="templateRequestDraft__field">
           <span class="templateRequestDraft__label">요청 설명</span>
-          <textarea v-model="templateRequestDraftDescription" class="textarea templateRequestDraft__textarea" maxlength="240" placeholder="예: 여름 이벤트 한정 캐릭터 추가" />
+          <textarea v-model="templateRequestDraftDescription" class="templateRequestDraft__input templateRequestDraft__textarea" maxlength="240" placeholder="예: 여름 이벤트 한정 캐릭터 추가" />
         </label>
       </div>
       <div class="modalCard__actions">
@@ -990,13 +989,15 @@ onUnmounted(() => {
       </div>
 
       <div class="editorSidebar__section editorSidebar__section--footer">
-        <label class="toggle" :class="{ 'toggle--disabled': !canEdit }">
+        <label class="toggleSwitch" :class="{ 'toggleSwitch--disabled': !canEdit }">
           <input v-model="isPublic" type="checkbox" :disabled="!canEdit" />
-          <span>공개</span>
+          <span class="toggleSwitch__label">공개</span>
+          <span class="toggleSwitch__track"><span class="toggleSwitch__thumb"></span></span>
         </label>
-        <label class="toggle" :class="{ 'toggle--disabled': !canEdit }">
+        <label class="toggleSwitch" :class="{ 'toggleSwitch--disabled': !canEdit }">
           <input v-model="showCharacterNames" type="checkbox" :disabled="!canEdit" />
-          <span>캐릭터 이름 표시</span>
+          <span class="toggleSwitch__label">캐릭터 이름 표시</span>
+          <span class="toggleSwitch__track"><span class="toggleSwitch__thumb"></span></span>
         </label>
         <div class="editorSidebar__actionGrid">
           <button class="btn btn--ghost editorSidebar__button" @click="downloadImage">이미지 다운로드</button>
@@ -1132,23 +1133,56 @@ onUnmounted(() => {
   display: inline-flex;
   position: relative;
 }
-.toggle {
+.toggleSwitch {
   display: inline-flex;
-  gap: 8px;
   align-items: center;
-  padding: 8px 10px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(0, 0, 0, 0.12);
-  font-weight: 800;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.03);
   cursor: pointer;
   user-select: none;
 }
-.toggle input {
-  width: 16px;
-  height: 16px;
+.toggleSwitch input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
 }
-.toggle--disabled {
+.toggleSwitch__track {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.16);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  transition: background 180ms ease, border-color 180ms ease;
+  flex: 0 0 auto;
+}
+.toggleSwitch__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
+  transition: transform 180ms ease;
+}
+.toggleSwitch__label {
+  font-weight: 800;
+  color: rgba(255, 255, 255, 0.9);
+}
+.toggleSwitch input:checked ~ .toggleSwitch__track {
+  background: rgba(96, 165, 250, 0.34);
+  border-color: rgba(96, 165, 250, 0.42);
+}
+.toggleSwitch input:checked ~ .toggleSwitch__track .toggleSwitch__thumb {
+  transform: translateX(18px);
+}
+.toggleSwitch--disabled {
   opacity: 0.55;
   pointer-events: none;
 }
@@ -1305,6 +1339,25 @@ onUnmounted(() => {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.64);
 }
+.templateRequestDraft__input {
+  width: 100%;
+  padding: 14px 0;
+  border: 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  background: transparent;
+  color: rgba(255, 255, 255, 0.94);
+  outline: none;
+  font-size: 18px;
+  line-height: 1.5;
+  letter-spacing: -0.02em;
+  resize: none;
+}
+.templateRequestDraft__input:focus {
+  border-bottom-color: rgba(96, 165, 250, 0.9);
+}
+.templateRequestDraft__input::placeholder {
+  color: rgba(255, 255, 255, 0.34);
+}
 .templateRequestDraft__textarea {
   min-height: 92px;
   resize: vertical;