릴리스: v0.1.24 드래그 정렬과 export 크기 조정

docs/history.md

@@ -87,3 +87,8 @@
 - 홈 화면 정렬은 단순 생성순 하나보다 `관리자 상단 고정 순서 + 나머지 최신 생성순` 조합이 운영과 신규 노출을 함께 만족시킨다고 판단했다.
 - 상단 고정은 전체 수동 정렬보다 최대 50개만 관리하는 방식이 운영 부담이 적으므로, 관리자에게는 제한된 상단 고정 목록만 직접 편집하게 하기로 결정했다.
 - `커스텀 티어표 만들기`는 일반 게임 카드와 성격이 다르므로 카드형 목록에서 분리해 우측 상단 버튼으로 노출하기로 결정했다.
+
+## 2026-03-26 v0.1.24
+- 상단 고정 게임이 50개까지 늘어날 수 있으므로, 위/아래 버튼만으로는 불편하다고 판단해 드래그 정렬을 함께 제공하기로 결정했다.
+- export 결과가 지나치게 넓으면 아이콘이 한 줄에 과도하게 몰리므로, 공유용 이미지 폭을 줄이고 pixel ratio도 낮춰 균형을 맞추기로 결정했다.
+- 현재 업로드는 파일 크기 제한만 있고 서버 저장 전 최적화는 없으므로, 운영 문서에 현황을 명확히 남기고 향후 리사이즈/압축 도입 여부를 검토하기로 했다.

docs/spec.md

@@ -96,7 +96,7 @@
 - 게임 기본 아이템 추가는 이름 입력, 파일 선택, 1:1 미리보기 확인 뒤 저장하는 흐름이다.
 - 아이템 미리보기는 반응형 환경에서도 최대 `192px` 크기 안에서 표시한다.
 - 게임 전환 또는 업로드 성공 뒤에는 파일 입력값을 초기화해 같은 파일도 다시 선택할 수 있다.
-- 게임 관리 탭에서는 홈 화면 상단에 먼저 노출할 게임을 최대 50개까지 지정하고, 위/아래 순서를 저장할 수 있다.
+- 게임 관리 탭에서는 홈 화면 상단에 먼저 노출할 게임을 최대 50개까지 지정하고, 드래그 또는 위/아래 버튼으로 순서를 저장할 수 있다.
 - 사용자 업로드 커스텀 아이템은 관리자 화면의 아이템 관리 탭에서 검색, 페이지네이션, 다운로드할 수 있다.
 - 커스텀 아이템은 사용 횟수(`usageCount`)를 표시하며, 미사용 항목만 필터링해 개별/일괄 삭제할 수 있다.
 - 관리자 화면에서는 회원 이메일/닉네임/권한 수정, 비밀번호 초기화, 계정 삭제가 가능하다.
@@ -112,10 +112,15 @@
 - 공개 티어표 목록과 `내 티어표` 목록은 제목 옆에 작성자 아바타와 표시명을 함께 보여준다.
 - 작성자 아바타 이미지가 없을 경우 목록 썸네일 fallback은 닉네임이 아니라 계정명 기준 첫 글자를 사용한다.
 - 티어표 목록 메타 정보는 최종 업데이트 시각만 간략하게 표시한다.
-- 저장 성공 시에는 에디터 안에서 반투명 오버레이 기반 확인 모달을 띄우고, PNG export 이미지는 약 `1600px` 폭과 외곽 여백, 작성자/날짜 하단 메타를 포함해 생성한다.
+- 저장 성공 시에는 에디터 안에서 반투명 오버레이 기반 확인 모달을 띄우고, PNG export 이미지는 약 `1360px` 폭과 `pixelRatio 1.5`, 외곽 여백, 작성자/날짜 하단 메타를 포함해 생성한다.
 - 홈 게임 목록은 관리자 상단 고정 순서가 있으면 그 순서를 먼저 적용하고, 그 외 게임은 최근 생성순으로 뒤에 이어진다.
 - `커스텀 티어표 만들기`는 카드가 아니라 홈 우측 상단 버튼으로 진입한다.
 
+## 업로드 제한 메모
+- 프로필 아바타 업로드는 파일당 최대 `3MB`다.
+- 관리자 게임 썸네일/기본 아이템 업로드와 사용자 커스텀 이미지 업로드는 파일당 최대 `6MB`다.
+- 현재는 업로드 전에 이미지 리사이즈/압축을 하지 않고 원본 파일을 그대로 저장한다.
+
 ## 운영 환경 변수
 - 프런트엔드
   - `VITE_API_ORIGIN`: API 및 업로드 파일 절대 기준 주소

docs/todo.md

@@ -4,6 +4,7 @@
 - 사용자 커스텀 아이템을 관리자 기본 템플릿으로 승격하는 승인/복제 흐름은 아직 없다.
 - 회원 관리에서 아바타/작성 티어표 수/최근 활동 같은 보조 정보는 아직 표시하지 않는다.
 - 미사용 커스텀 이미지 일괄 삭제는 현재 "참조가 없는 항목" 기준이며, 보관 기간 정책 같은 운영 규칙은 아직 없다.
+- 업로드 이미지는 현재 원본 파일을 그대로 저장하므로, 운영 부담이 커지면 서버 저장 전 리사이즈/압축(예: 긴 변 제한, WebP 변환) 도입이 필요하다.
 
 ## 배포 전 작업
 - NAS 실제 도메인 기준으로 `VITE_API_ORIGIN`, `CORS_ORIGINS`, `SESSION_SECRET`, `SESSION_COOKIE_SECURE`, `TRUST_PROXY` 값을 설정한다.

docs/update.md

@@ -1,5 +1,10 @@
 # 업데이트 로그
 
+## 2026-03-26 v0.1.24
+- **관리자 게임 순서 드래그 정렬 추가**: 상단 고정 게임 목록을 위/아래 버튼뿐 아니라 드래그로도 순서를 바꿀 수 있도록 보강
+- **export 크기 재조정**: 티어표 PNG export를 약 `1360px` 폭과 `pixelRatio 1.5` 기준으로 낮춰 아이콘이 과도하게 한 줄에 몰리지 않도록 수정
+- **업로드 정책 문서화**: 현재 아바타 `3MB`, 게임/커스텀 이미지 `6MB` 제한이 있으며 서버 저장 전 리사이즈/압축은 아직 하지 않는다는 점을 문서에 명시
+
 ## 2026-03-26 v0.1.23
 - **홈 게임 정렬 규칙 변경**: 일반 게임 목록은 `상단 고정 순서 → 나머지 최신 생성순`으로 정렬되도록 변경
 - **관리자 게임 순서 편집 추가**: 관리자 게임 관리 탭에서 최대 50개의 게임을 상단 고정 목록으로 선택하고 위/아래 순서를 저장할 수 있도록 추가

frontend/src/views/AdminView.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
+import Sortable from 'sortablejs'
 import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
 import { useAuthStore } from '../stores/auth'
@@ -37,6 +38,8 @@ const itemPreviewUrl = ref('')
 const thumbPreviewUrl = ref('')
 const itemFileInput = ref(null)
 const thumbFileInput = ref(null)
+const featuredListEl = ref(null)
+const featuredSortable = ref(null)
 
 const hasSelectedGame = computed(() => !!selectedGame.value?.game?.id)
 const canApplyThumbnail = computed(() => !!thumbFile.value && !!selectedGameId.value)
@@ -52,11 +55,13 @@ const availableGamesForFeatured = computed(() => games.value.filter((game) => !f
 onMounted(async () => {
   await auth.refresh()
   await Promise.all([refreshGames(), refreshCustomItems(), refreshUsers()])
+  await syncFeaturedSortable()
 })
 
 onUnmounted(() => {
   clearPreviewUrl('item')
   clearPreviewUrl('thumb')
+  destroyFeaturedSortable()
 })
 
 function resetMessages() {
@@ -77,11 +82,40 @@ async function refreshGames() {
       .filter((game) => game.displayRank != null)
       .sort((a, b) => a.displayRank - b.displayRank)
       .map((game) => game.id)
+    await syncFeaturedSortable()
   } catch (e) {
     error.value = '게임 목록을 불러오지 못했어요.'
   }
 }
 
+function destroyFeaturedSortable() {
+  if (featuredSortable.value) {
+    featuredSortable.value.destroy()
+    featuredSortable.value = null
+  }
+}
+
+async function syncFeaturedSortable() {
+  await nextTick()
+  destroyFeaturedSortable()
+  if (!featuredListEl.value) return
+
+  featuredSortable.value = Sortable.create(featuredListEl.value, {
+    animation: 160,
+    draggable: '[data-featured-id]',
+    handle: '[data-featured-handle]',
+    ghostClass: 'ghost',
+    chosenClass: 'chosen',
+    onEnd: (evt) => {
+      if (evt.oldIndex == null || evt.newIndex == null || evt.oldIndex === evt.newIndex) return
+      const nextIds = [...featuredGameIds.value]
+      const [moved] = nextIds.splice(evt.oldIndex, 1)
+      nextIds.splice(evt.newIndex, 0, moved)
+      featuredGameIds.value = nextIds
+    },
+  })
+}
+
 async function refreshCustomItems() {
   if (!auth.user?.isAdmin) return
   try {
@@ -436,11 +470,13 @@ function addFeaturedGame(gameId) {
     return
   }
   featuredGameIds.value = [...featuredGameIds.value, gameId]
+  syncFeaturedSortable()
 }
 
 function removeFeaturedGame(gameId) {
   resetMessages()
   featuredGameIds.value = featuredGameIds.value.filter((id) => id !== gameId)
+  syncFeaturedSortable()
 }
 
 function moveFeaturedGame(gameId, direction) {
@@ -451,6 +487,7 @@ function moveFeaturedGame(gameId, direction) {
   const [moved] = nextIds.splice(currentIndex, 1)
   nextIds.splice(nextIndex, 0, moved)
   featuredGameIds.value = nextIds
+  syncFeaturedSortable()
 }
 
 async function saveFeaturedOrder() {
@@ -501,8 +538,8 @@ async function saveFeaturedOrder() {
               <div class="featuredOrderPanel__list">
                 <div class="section__title">상단 고정 목록</div>
                 <div v-if="!featuredGames.length" class="hint">아직 상단 고정 게임이 없어요.</div>
-                <div v-else class="featuredList">
-                  <article v-for="(game, index) in featuredGames" :key="game.id" class="featuredCard">
+                <div v-else ref="featuredListEl" class="featuredList">
+                  <article v-for="(game, index) in featuredGames" :key="game.id" class="featuredCard" :data-featured-id="game.id">
                     <div class="featuredCard__meta">
                       <span class="featuredCard__rank">{{ index + 1 }}</span>
                       <div>
@@ -511,6 +548,7 @@ async function saveFeaturedOrder() {
                       </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="moveFeaturedGame(game.id, -1)">위로</button>
                       <button class="btn btn--ghost btn--small" :disabled="index === featuredGames.length - 1" @click="moveFeaturedGame(game.id, 1)">아래로</button>
                       <button class="btn btn--danger btn--small" @click="removeFeaturedGame(game.id)">제외</button>
@@ -856,6 +894,9 @@ async function saveFeaturedOrder() {
   flex-wrap: wrap;
   justify-content: flex-end;
 }
+.featuredCard [data-featured-handle] {
+  cursor: grab;
+}
 .featuredPickerItem {
   width: 100%;
   display: flex;
@@ -983,6 +1024,12 @@ async function saveFeaturedOrder() {
   padding: 8px 10px;
   font-size: 11px;
 }
+.ghost {
+  opacity: 0.4;
+}
+.chosen {
+  outline: 2px solid rgba(96, 165, 250, 0.45);
+}
 .btn:disabled {
   cursor: not-allowed;
   opacity: 0.45;

frontend/src/views/TierEditorView.vue

@@ -263,7 +263,7 @@ async function downloadImage() {
 
   try {
     const targetEl = exportBoardEl.value || boardEl.value
-    const blob = await htmlToImage.toBlob(targetEl, { pixelRatio: 2, backgroundColor: '#0b1220' })
+    const blob = await htmlToImage.toBlob(targetEl, { pixelRatio: 1.5, backgroundColor: '#0b1220' })
     if (!blob) throw new Error('image_export_failed')
 
     const url = URL.createObjectURL(blob)
@@ -729,10 +729,10 @@ onUnmounted(() => {
 .exportBoard--active {
   display: grid;
   gap: 12px;
-  width: 1600px;
+  width: 1360px;
   max-width: none;
   box-sizing: border-box;
-  padding: 48px 56px;
+  padding: 44px 52px;
   border-radius: 28px;
   background:
     radial-gradient(circle at top, rgba(96, 165, 250, 0.14), transparent 38%),