릴리스: v0.1.23 홈 게임 정렬과 관리자 순서 관리 추가

backend/src/db.js

@@ -46,6 +46,7 @@ function mapGameRow(row) {
     id: row.id,
     name: row.name,
     thumbnailSrc: row.thumbnail_src || '',
+    displayRank: row.display_rank == null ? null : Number(row.display_rank),
     createdAt: Number(row.created_at),
   }
 }
@@ -66,6 +67,9 @@ function mapTierListRow(row) {
   return {
     id: row.id,
     authorId: row.author_id,
+    authorName: getUserDisplayName(row),
+    authorAccountName: getUserAccountName(row),
+    authorAvatarSrc: row.avatar_src || '',
     gameId: row.game_id,
     title: row.title,
     description: row.description || '',
@@ -77,6 +81,22 @@ function mapTierListRow(row) {
   }
 }
 
+function getUserDisplayName(row) {
+  if (!row) return ''
+  const nickname = (row.nickname || '').trim()
+  if (nickname) return nickname
+  const email = (row.email || '').trim()
+  if (!email) return ''
+  return email.split('@')[0] || email
+}
+
+function getUserAccountName(row) {
+  if (!row) return ''
+  const email = (row.email || '').trim()
+  if (!email) return ''
+  return email.split('@')[0] || email
+}
+
 async function createPool() {
   const rootConnection = await mysql.createConnection({
     host: DB_HOST,
@@ -135,10 +155,16 @@ async function ensureSchema() {
         id VARCHAR(120) PRIMARY KEY,
         name VARCHAR(120) NOT NULL,
         thumbnail_src VARCHAR(255) NOT NULL DEFAULT '',
+        display_rank INT NULL DEFAULT NULL,
         created_at BIGINT NOT NULL
       ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
     `)
 
+    const displayRankColumns = await query("SHOW COLUMNS FROM games LIKE 'display_rank'")
+    if (!displayRankColumns.length) {
+      await query('ALTER TABLE games ADD COLUMN display_rank INT NULL DEFAULT NULL AFTER thumbnail_src')
+    }
+
     await query(`
       CREATE TABLE IF NOT EXISTS game_items (
         id VARCHAR(64) PRIMARY KEY,
@@ -307,14 +333,23 @@ async function adminDeleteUser(id) {
 
 async function listGames() {
   const rows = await query(
-    'SELECT id, name, thumbnail_src, created_at FROM games WHERE id <> ? ORDER BY created_at ASC, name ASC',
+    `
+      SELECT id, name, thumbnail_src, display_rank, created_at
+      FROM games
+      WHERE id <> ?
+      ORDER BY
+        CASE WHEN display_rank IS NULL THEN 1 ELSE 0 END ASC,
+        display_rank ASC,
+        created_at DESC,
+        name ASC
+    `,
     [FREEFORM_GAME_ID]
   )
   return rows.map(mapGameRow)
 }
 
 async function findGameById(id) {
-  const rows = await query('SELECT id, name, thumbnail_src, created_at FROM games WHERE id = ? LIMIT 1', [id])
+  const rows = await query('SELECT id, name, thumbnail_src, display_rank, created_at FROM games WHERE id = ? LIMIT 1', [id])
   return mapGameRow(rows[0])
 }
 
@@ -334,7 +369,13 @@ async function getGameDetail(gameId) {
 }
 
 async function createGame({ id, name }) {
-  await query('INSERT INTO games (id, name, thumbnail_src, created_at) VALUES (?, ?, ?, ?)', [id, name, '', now()])
+  await query('INSERT INTO games (id, name, thumbnail_src, display_rank, created_at) VALUES (?, ?, ?, ?, ?)', [
+    id,
+    name,
+    '',
+    null,
+    now(),
+  ])
   return findGameById(id)
 }
 
@@ -392,6 +433,20 @@ async function deleteGame(gameId) {
   await query('DELETE FROM games WHERE id = ?', [gameId])
 }
 
+async function updateGameDisplayOrder(gameIds) {
+  const normalizedIds = Array.from(new Set((gameIds || []).filter((id) => id && id !== FREEFORM_GAME_ID))).slice(0, 50)
+
+  await query('UPDATE games SET display_rank = NULL WHERE id <> ?', [FREEFORM_GAME_ID])
+
+  await Promise.all(
+    normalizedIds.map((gameId, index) =>
+      query('UPDATE games SET display_rank = ? WHERE id = ? AND id <> ?', [index + 1, gameId, FREEFORM_GAME_ID])
+    )
+  )
+
+  return listGames()
+}
+
 async function createCustomItem({ id, ownerId, src, label }) {
   const createdAt = now()
   await query('INSERT INTO custom_items (id, owner_id, src, label, created_at) VALUES (?, ?, ?, ?, ?)', [
@@ -537,7 +592,8 @@ async function listPublicTierLists(gameId) {
         t.updated_at,
         t.author_id,
         u.nickname,
-        u.email
+        u.email,
+        u.avatar_src
       FROM tierlists t
       INNER JOIN users u ON u.id = t.author_id
       ${whereClause}
@@ -554,16 +610,28 @@ async function listPublicTierLists(gameId) {
     createdAt: Number(row.created_at),
     updatedAt: Number(row.updated_at),
     authorId: row.author_id,
-    authorName: row.nickname || row.email,
+    authorName: getUserDisplayName(row),
+    authorAccountName: getUserAccountName(row),
+    authorAvatarSrc: row.avatar_src || '',
   }))
 }
 
 async function listUserTierLists(userId) {
   const rows = await query(
     `
-      SELECT id, game_id, title, created_at, updated_at, is_public
-      FROM tierlists
-      WHERE author_id = ?
+      SELECT
+        t.id,
+        t.game_id,
+        t.title,
+        t.created_at,
+        t.updated_at,
+        t.is_public,
+        u.nickname,
+        u.email,
+        u.avatar_src
+      FROM tierlists t
+      INNER JOIN users u ON u.id = t.author_id
+      WHERE t.author_id = ?
       ORDER BY updated_at DESC
     `,
     [userId]
@@ -576,15 +644,32 @@ async function listUserTierLists(userId) {
     createdAt: Number(row.created_at),
     updatedAt: Number(row.updated_at),
     isPublic: !!row.is_public,
+    authorName: getUserDisplayName(row),
+    authorAccountName: getUserAccountName(row),
+    authorAvatarSrc: row.avatar_src || '',
   }))
 }
 
 async function findTierListById(id) {
   const rows = await query(
     `
-      SELECT id, author_id, game_id, title, description, is_public, groups_json, pool_json, created_at, updated_at
-      FROM tierlists
-      WHERE id = ?
+      SELECT
+        t.id,
+        t.author_id,
+        t.game_id,
+        t.title,
+        t.description,
+        t.is_public,
+        t.groups_json,
+        t.pool_json,
+        t.created_at,
+        t.updated_at,
+        u.nickname,
+        u.email,
+        u.avatar_src
+      FROM tierlists t
+      INNER JOIN users u ON u.id = t.author_id
+      WHERE t.id = ?
       LIMIT 1
     `,
     [id]
@@ -672,6 +757,7 @@ module.exports = {
   createGameItem,
   deleteGameItem,
   deleteGame,
+  updateGameDisplayOrder,
   createCustomItem,
   listCustomItems,
   findUnusedCustomItems,

backend/src/routes/admin.js

@@ -9,10 +9,12 @@ const {
   findUserById,
   findGameById,
   createGame,
+  listGames,
   updateGameThumbnail,
   createGameItem,
   deleteGameItem,
   deleteGame,
+  updateGameDisplayOrder,
   listCustomItems,
   findUnusedCustomItems,
   findCustomItemsByIds,
@@ -50,6 +52,20 @@ router.post('/games', requireAdmin, async (req, res) => {
   res.json({ game })
 })
 
+router.patch('/games/display-order', requireAdmin, async (req, res) => {
+  const schema = z.object({
+    gameIds: z.array(z.string().min(1)).max(50),
+  })
+  const parsed = schema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const games = await listGames()
+  const validGameIds = new Set(games.map((game) => game.id))
+  const filteredIds = parsed.data.gameIds.filter((gameId) => validGameIds.has(gameId))
+  const updatedGames = await updateGameDisplayOrder(filteredIds)
+  res.json({ games: updatedGames })
+})
+
 router.post('/games/:gameId/thumbnail', requireAdmin, upload.single('thumbnail'), async (req, res) => {
   if (!req.file) return res.status(400).json({ error: 'file_required' })
   const game = await findGameById(req.params.gameId)

docs/history.md

@@ -66,3 +66,24 @@
 ## 2026-03-19 v0.1.17
 - 작성자가 자기 티어표를 직접 삭제할 수 있어야 관리 흐름이 완결되므로, `내 티어표` 화면에 삭제 기능을 추가하기로 결정했다.
 - 사용자 커스텀 이미지는 서버 용량을 계속 차지하므로, 참조가 하나도 남지 않은 이미지(미사용 항목)를 식별하고 관리자 화면에서 개별/일괄 정리할 수 있도록 하기로 결정했다.
+
+## 2026-03-19 v0.1.19
+- 티어표 공개 여부는 운영 기준상 대부분 공개 공유가 목적이므로, 신규 작성 시 기본값을 `공개 ON`으로 두기로 결정했다.
+- 에디터에서 저장 관련 행동은 좌우로 역할을 나눠 `다운로드/삭제`와 `공개/저장`으로 묶는 편이 더 빠르게 인지된다고 판단했다.
+- 공개 목록과 내 목록에서 제목만으로는 식별이 어려우므로, 제목 옆에 작성자 아바타와 표시명을 함께 노출하기로 결정했다.
+- 티어표 카드 메타 정보는 저장 시각과 업데이트 시각을 동시에 노출하는 대신, 최종 업데이트 시각만 남겨 단순화하기로 결정했다.
+
+## 2026-03-26 v0.1.21
+- 목록 썸네일 fallback 문자는 닉네임보다 계정 기준이 더 일관되므로, 아바타 이미지가 없을 때는 계정명 첫 글자를 사용하기로 결정했다.
+- 저장 성공은 화면 이동보다 현 위치 유지가 더 중요하므로, 편집을 계속할 수 있는 확인형 모달로 피드백을 제공하기로 결정했다.
+- PNG export는 가장자리 여백이 없는 결과보다 중앙 정렬된 카드형 결과물이 더 완성도 있게 보이므로, export 전용 보드에 충분한 바깥 패딩을 포함하기로 했다.
+
+## 2026-03-26 v0.1.22
+- 무제목 저장은 게임 이름 기본값보다 `이름 없음 + 날짜`가 더 명확하다고 판단해 자동 제목 규칙을 변경했다.
+- 제목이 비어 있는 티어표는 품질 관리 대상이 될 수 있으므로, 작성 중 단계에서 관리자 임의 삭제 가능성을 미리 안내하기로 결정했다.
+- 다운로드 이미지에는 편집용 빈 칸 안내 문구를 제외하고, 더 넓은 보드 폭과 하단 작성자/날짜 메타를 포함해 공유용 완성도를 높이기로 결정했다.
+
+## 2026-03-26 v0.1.23
+- 홈 화면 정렬은 단순 생성순 하나보다 `관리자 상단 고정 순서 + 나머지 최신 생성순` 조합이 운영과 신규 노출을 함께 만족시킨다고 판단했다.
+- 상단 고정은 전체 수동 정렬보다 최대 50개만 관리하는 방식이 운영 부담이 적으므로, 관리자에게는 제한된 상단 고정 목록만 직접 편집하게 하기로 결정했다.
+- `커스텀 티어표 만들기`는 일반 게임 카드와 성격이 다르므로 카드형 목록에서 분리해 우측 상단 버튼으로 노출하기로 결정했다.

docs/spec.md

@@ -96,6 +96,7 @@
 - 게임 기본 아이템 추가는 이름 입력, 파일 선택, 1:1 미리보기 확인 뒤 저장하는 흐름이다.
 - 아이템 미리보기는 반응형 환경에서도 최대 `192px` 크기 안에서 표시한다.
 - 게임 전환 또는 업로드 성공 뒤에는 파일 입력값을 초기화해 같은 파일도 다시 선택할 수 있다.
+- 게임 관리 탭에서는 홈 화면 상단에 먼저 노출할 게임을 최대 50개까지 지정하고, 위/아래 순서를 저장할 수 있다.
 - 사용자 업로드 커스텀 아이템은 관리자 화면의 아이템 관리 탭에서 검색, 페이지네이션, 다운로드할 수 있다.
 - 커스텀 아이템은 사용 횟수(`usageCount`)를 표시하며, 미사용 항목만 필터링해 개별/일괄 삭제할 수 있다.
 - 관리자 화면에서는 회원 이메일/닉네임/권한 수정, 비밀번호 초기화, 계정 삭제가 가능하다.
@@ -105,7 +106,15 @@
 - 비로그인 사용자는 공개된 티어표를 열람만 할 수 있고, 편집 UI와 저장 동작은 비활성화된다.
 - 커스텀 이미지 추가는 다중 파일 선택과 드래그 앤 드롭을 모두 지원한다.
 - 티어 행은 기본 5단으로 시작하지만, 사용자가 직접 추가하거나 제거할 수 있다.
-- 작성자는 `내 티어표` 목록에서 저장한 티어표를 직접 삭제할 수 있다.
+- 신규 티어표의 공개 여부 기본값은 `ON`이며, 기존 티어표는 편집 화면과 `내 티어표` 목록에서 직접 삭제할 수 있다.
+- 제목이 비어 있는 상태로 저장하면 내부 제목은 `이름 없음 + 날짜` 형식으로 자동 생성한다.
+- 제목 입력이 비어 있는 동안에는 무분별한 도배 방지를 위한 관리자 임의 삭제 가능성 안내 문구를 표시한다.
+- 공개 티어표 목록과 `내 티어표` 목록은 제목 옆에 작성자 아바타와 표시명을 함께 보여준다.
+- 작성자 아바타 이미지가 없을 경우 목록 썸네일 fallback은 닉네임이 아니라 계정명 기준 첫 글자를 사용한다.
+- 티어표 목록 메타 정보는 최종 업데이트 시각만 간략하게 표시한다.
+- 저장 성공 시에는 에디터 안에서 반투명 오버레이 기반 확인 모달을 띄우고, PNG export 이미지는 약 `1600px` 폭과 외곽 여백, 작성자/날짜 하단 메타를 포함해 생성한다.
+- 홈 게임 목록은 관리자 상단 고정 순서가 있으면 그 순서를 먼저 적용하고, 그 외 게임은 최근 생성순으로 뒤에 이어진다.
+- `커스텀 티어표 만들기`는 카드가 아니라 홈 우측 상단 버튼으로 진입한다.
 
 ## 운영 환경 변수
 - 프런트엔드

docs/update.md

@@ -1,5 +1,35 @@
 # 업데이트 로그
 
+## 2026-03-26 v0.1.23
+- **홈 게임 정렬 규칙 변경**: 일반 게임 목록은 `상단 고정 순서 → 나머지 최신 생성순`으로 정렬되도록 변경
+- **관리자 게임 순서 편집 추가**: 관리자 게임 관리 탭에서 최대 50개의 게임을 상단 고정 목록으로 선택하고 위/아래 순서를 저장할 수 있도록 추가
+- **커스텀 티어표 진입점 변경**: 홈 화면의 `직접 티어표 만들기` 카드를 제거하고 우측 상단 버튼형 진입점으로 변경
+
+## 2026-03-26 v0.1.22
+- **무제목 저장 규칙 변경**: 제목을 비워두고 저장하면 내부 저장 제목을 `이름 없음 + 날짜` 형식으로 생성하도록 변경
+- **무제목 안내 문구 추가**: 제목 입력이 비어 있는 동안 관리자 임의 삭제 가능성을 알리는 경고 문구를 제목 입력 아래에 표시
+- **export 보드 확장**: 다운로드용 티어표 이미지는 빈 칸 안내 문구를 숨기고, 약 `1600px` 폭과 더 넉넉한 여백, 하단 작성자/날짜 메타 정보를 포함하도록 조정
+
+## 2026-03-26 v0.1.21
+- **아바타 fallback 기준 통일**: 티어표 목록에서 작성자 아바타 이미지가 없을 때 닉네임이 아니라 계정명 기준 첫 글자를 표시하도록 정리
+- **저장 완료 모달 추가**: 에디터에서 저장 성공 시 반투명 오버레이와 확인 버튼이 있는 피드백 모달을 표시하도록 추가
+- **다운로드 이미지 여백 보강**: PNG export 전용 보드에 외곽 패딩과 배경 여백을 넣어 콘텐츠가 가장자리에 붙어 보이지 않도록 조정
+
+## 2026-03-19 v0.1.20
+- **게임 선택 카드 순서 조정**: 홈 화면에서 일반 게임 카드를 먼저 보여주고 `직접 티어표 만들기` 카드는 마지막에 배치
+- **게임 카드 3열 레이아웃**: PC 기준 게임 선택 화면 카드를 3열로 재구성하고, 썸네일을 16:9 비율로 통일
+- **공개 티어표 카드 3열 레이아웃**: 게임 허브의 공개 티어표 목록도 PC 기준 3열 카드형으로 재배치하고 태블릿/모바일에서는 자동 줄바꿈되도록 조정
+
+## 2026-03-19 v0.1.19
+- **에디터 저장 영역 재정렬**: 공개 기본값을 `ON`으로 바꾸고, 액션 영역을 `이미지 다운로드 / 삭제 / 공개 ON·OFF / 저장` 흐름으로 재배치
+- **에디터 삭제 진입점 추가**: 기존 티어표는 편집 화면에서 바로 삭제할 수 있도록 버튼을 추가
+- **목록 작성자 표시 개선**: 공개 티어표와 내 티어표 목록의 제목 옆에 원형 아바타와 `by 닉네임(없으면 계정명)`을 표시
+- **목록 메타 단순화**: 티어표 카드 하단 정보는 게임 ID, 저장 시각, 라벨 문구를 제거하고 최종 업데이트 시각만 간략하게 노출
+
+## 2026-03-19 v0.1.18
+- **미사용 아이콘 필터 수정**: 관리자 아이템 관리의 `미사용 아이콘 보기` 체크 상태가 실제 API 요청의 `orphanOnly` 파라미터로 전달되도록 수정
+- **삭제 활성화 흐름 정상화**: 미사용 아이콘만 조회했을 때 `usageCount = 0` 항목의 개별 삭제 버튼이 의도대로 활성화되도록 정리
+
 ## 2026-03-19 v0.1.0
 - **초기 스캐폴딩**: `frontend/`에 Vue3(Vite, JavaScript) 프로젝트 생성
 - **라우팅/화면 골격**: 게임 선택(`/`), 게임 허브(`/games/:gameId`), 에디터(`/editor/:gameId/...`), 로그인(`/login`), 내 티어표(`/me`), 관리자(`/admin`) 라우트 추가

frontend/src/lib/api.js

@@ -32,8 +32,11 @@ export const api = {
 
   listGames: () => request('/api/games'),
   getGame: (gameId) => request(`/api/games/${encodeURIComponent(gameId)}`),
-  listAdminCustomItems: ({ q = '', page = 1, limit = 50 } = {}) =>
-    request(`/api/admin/custom-items?q=${encodeURIComponent(q)}&page=${encodeURIComponent(page)}&limit=${encodeURIComponent(limit)}`),
+  updateAdminGameDisplayOrder: (payload) => request('/api/admin/games/display-order', { method: 'PATCH', body: payload }),
+  listAdminCustomItems: ({ q = '', page = 1, limit = 50, orphanOnly = false } = {}) =>
+    request(
+      `/api/admin/custom-items?q=${encodeURIComponent(q)}&page=${encodeURIComponent(page)}&limit=${encodeURIComponent(limit)}&orphanOnly=${encodeURIComponent(orphanOnly)}`
+    ),
   listAdminUsers: () => request('/api/admin/users'),
   updateAdminUser: (userId, payload) =>
     request(`/api/admin/users/${encodeURIComponent(userId)}`, { method: 'PATCH', body: payload }),

frontend/src/views/AdminView.vue

@@ -13,6 +13,7 @@ const gameMode = ref('existing')
 const games = ref([])
 const selectedGameId = ref('')
 const selectedGame = ref(null)
+const featuredGameIds = ref([])
 
 const customItems = ref([])
 const customItemQuery = ref('')
@@ -41,6 +42,12 @@ const hasSelectedGame = computed(() => !!selectedGame.value?.game?.id)
 const canApplyThumbnail = computed(() => !!thumbFile.value && !!selectedGameId.value)
 const canAddItem = computed(() => !!uploadFile.value && !!selectedGameId.value)
 const customItemPageCount = computed(() => Math.max(1, Math.ceil(customItemTotal.value / customItemLimit.value)))
+const featuredGames = computed(() =>
+  featuredGameIds.value
+    .map((gameId) => games.value.find((game) => game.id === gameId))
+    .filter(Boolean)
+)
+const availableGamesForFeatured = computed(() => games.value.filter((game) => !featuredGameIds.value.includes(game.id)))
 
 onMounted(async () => {
   await auth.refresh()
@@ -66,6 +73,10 @@ async function refreshGames() {
   try {
     const data = await api.listGames()
     games.value = data.games || []
+    featuredGameIds.value = games.value
+      .filter((game) => game.displayRank != null)
+      .sort((a, b) => a.displayRank - b.displayRank)
+      .map((game) => game.id)
   } catch (e) {
     error.value = '게임 목록을 불러오지 못했어요.'
   }
@@ -416,13 +427,53 @@ function fmt(ts) {
     minute: '2-digit',
   })
 }
+
+function addFeaturedGame(gameId) {
+  resetMessages()
+  if (!gameId || featuredGameIds.value.includes(gameId)) return
+  if (featuredGameIds.value.length >= 50) {
+    error.value = '상단 고정 게임은 최대 50개까지만 설정할 수 있어요.'
+    return
+  }
+  featuredGameIds.value = [...featuredGameIds.value, gameId]
+}
+
+function removeFeaturedGame(gameId) {
+  resetMessages()
+  featuredGameIds.value = featuredGameIds.value.filter((id) => id !== gameId)
+}
+
+function moveFeaturedGame(gameId, direction) {
+  const currentIndex = featuredGameIds.value.indexOf(gameId)
+  const nextIndex = currentIndex + direction
+  if (currentIndex < 0 || nextIndex < 0 || nextIndex >= featuredGameIds.value.length) return
+  const nextIds = [...featuredGameIds.value]
+  const [moved] = nextIds.splice(currentIndex, 1)
+  nextIds.splice(nextIndex, 0, moved)
+  featuredGameIds.value = nextIds
+}
+
+async function saveFeaturedOrder() {
+  resetMessages()
+  try {
+    const data = await api.updateAdminGameDisplayOrder({ gameIds: featuredGameIds.value })
+    games.value = data.games || []
+    featuredGameIds.value = games.value
+      .filter((game) => game.displayRank != null)
+      .sort((a, b) => a.displayRank - b.displayRank)
+      .map((game) => game.id)
+    success.value = '홈 화면 게임 순서를 저장했어요.'
+  } catch (e) {
+    error.value = '게임 순서 저장에 실패했어요.'
+  }
+}
 </script>
 
 <template>
   <section class="wrap">
-    <h2 class="title">관리자</h2>
+    <!-- <h2 class="title">관리자</h2> -->
     <div class="card">
-      <div class="desc">기능이 많아진 만큼 관리 영역을 게임, 아이템, 회원 관리로 나눠서 정리합니다.</div>
+      <!-- <div class="desc">기능이 많아진 만큼 관리 영역을 게임, 아이템, 회원 관리로 나눠서 정리합니다.</div> -->
       <div v-if="!auth.user" class="warn">로그인이 필요해요.</div>
       <div v-else-if="!isAdmin" class="warn">이 계정은 관리자 권한이 없어요.</div>
 
@@ -437,6 +488,55 @@ function fmt(ts) {
         <div v-if="success" class="success">{{ success }}</div>
 
         <template v-if="activeTab === 'games'">
+          <div class="panel">
+            <div class="sectionHeader">
+              <div>
+                <div class="panel__title">홈 화면 상단 고정 순서</div>
+                <div class="hint hint--tight">여기에 넣은 게임은 지정한 순서대로 먼저 노출되고, 나머지 게임은 최근 생성순으로 뒤에 이어집니다. 최대 50개까지 설정할 수 있어요.</div>
+              </div>
+              <button class="btn btn--primary" @click="saveFeaturedOrder">순서 저장</button>
+            </div>
+
+            <div class="featuredOrderPanel">
+              <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 class="featuredCard__meta">
+                      <span class="featuredCard__rank">{{ index + 1 }}</span>
+                      <div>
+                        <div class="featuredCard__title">{{ game.name }}</div>
+                        <div class="featuredCard__id">{{ game.id }}</div>
+                      </div>
+                    </div>
+                    <div class="featuredCard__actions">
+                      <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>
+                    </div>
+                  </article>
+                </div>
+              </div>
+
+              <div class="featuredOrderPanel__picker">
+                <div class="section__title">게임 추가</div>
+                <div class="featuredPickerList">
+                  <button
+                    v-for="game in availableGamesForFeatured"
+                    :key="game.id"
+                    class="featuredPickerItem"
+                    :disabled="featuredGameIds.length >= 50"
+                    @click="addFeaturedGame(game.id)"
+                  >
+                    <span>{{ game.name }}</span>
+                    <span class="featuredPickerItem__id">{{ game.id }}</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
           <div class="modeTabs">
             <button class="modeTab" :class="{ 'modeTab--active': gameMode === 'existing' }" @click="setGameMode('existing')">
               등록된 게임 선택
@@ -448,12 +548,12 @@ function fmt(ts) {
 
           <div class="panel panel--compact">
             <template v-if="gameMode === 'existing'">
-              <div class="panel__title">등록된 게임 선택</div>
+              <!-- <div class="panel__title">등록된 게임 선택</div> -->
               <select v-model="selectedGameId" class="select" @change="loadGame">
                 <option value="">게임을 선택해주세요</option>
                 <option v-for="game in games" :key="game.id" :value="game.id">{{ game.name }} ({{ game.id }})</option>
               </select>
-              <div class="hint">이 영역은 게임 자체와 관리자 기본 아이템만 관리합니다. 여기서 아이템을 삭제해도 사용자 커스텀 이미지는 삭제되지 않아요.</div>
+              <!-- <div class="hint">이 영역은 게임 자체와 관리자 기본 아이템만 관리합니다. 여기서 아이템을 삭제해도 사용자 커스텀 이미지는 삭제되지 않아요.</div> -->
             </template>
 
             <template v-else>
@@ -692,7 +792,91 @@ function fmt(ts) {
   padding: 14px;
 }
 .panel--compact {
-  max-width: 760px;
+  max-width: 480px;
+}
+.featuredOrderPanel {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.95fr);
+  gap: 16px;
+}
+.featuredOrderPanel__list,
+.featuredOrderPanel__picker {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 16px;
+  padding: 14px;
+}
+.featuredList,
+.featuredPickerList {
+  margin-top: 10px;
+  display: grid;
+  gap: 10px;
+  max-height: 420px;
+  overflow: auto;
+}
+.featuredCard {
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.18);
+}
+.featuredCard__meta {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  min-width: 0;
+}
+.featuredCard__rank {
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: rgba(96, 165, 250, 0.18);
+  font-weight: 900;
+  flex: 0 0 auto;
+}
+.featuredCard__title {
+  font-weight: 900;
+}
+.featuredCard__id {
+  margin-top: 4px;
+  opacity: 0.68;
+  font-size: 12px;
+  word-break: break-all;
+}
+.featuredCard__actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+.featuredPickerItem {
+  width: 100%;
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.16);
+  color: rgba(255, 255, 255, 0.92);
+  cursor: pointer;
+  text-align: left;
+}
+.featuredPickerItem:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.featuredPickerItem__id {
+  opacity: 0.64;
+  font-size: 12px;
 }
 .panel__title,
 .section__title {
@@ -761,7 +945,7 @@ function fmt(ts) {
   background: rgba(0, 0, 0, 0.18);
   color: rgba(255, 255, 255, 0.92);
   outline: none;
-  margin-top: 10px;
+  /* margin-top: 10px; */
 }
 .input--compact {
   max-width: 320px;
@@ -794,6 +978,11 @@ function fmt(ts) {
   text-align: center;
   text-decoration: none;
 }
+.btn--small {
+  margin-top: 0;
+  padding: 8px 10px;
+  font-size: 11px;
+}
 .btn:disabled {
   cursor: not-allowed;
   opacity: 0.45;
@@ -1039,6 +1228,7 @@ function fmt(ts) {
   margin-top: 0;
 }
 @media (max-width: 980px) {
+  .featuredOrderPanel,
   .section--topGrid,
   .toolbar,
   .itemComposer {

frontend/src/views/GameHubView.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
+import { toApiUrl } from '../lib/runtime'
 import { useAuthStore } from '../stores/auth'
 
 const route = useRoute()
@@ -21,10 +22,21 @@ function fmt(ts) {
     day: '2-digit',
     hour: '2-digit',
     minute: '2-digit',
-    second: '2-digit',
   })
 }
 
+function displayNameOf(tierList) {
+  return tierList.authorName || '알 수 없음'
+}
+
+function avatarSrcOf(tierList) {
+  return tierList.authorAvatarSrc ? toApiUrl(tierList.authorAvatarSrc) : ''
+}
+
+function avatarFallbackOf(tierList) {
+  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
+}
+
 onMounted(async () => {
   try {
     const [gameRes, listRes] = await Promise.all([api.getGame(gameId.value), api.listPublicTierLists(gameId.value)])
@@ -66,10 +78,15 @@ function openTierList(id) {
     <div v-if="tierLists.length === 0" class="empty">아직 공개 티어표가 없어요.</div>
     <div v-else class="list">
       <button v-for="t in tierLists" :key="t.id" class="row" @click="openTierList(t.id)">
-        <div class="row__title">{{ t.title }}</div>
-        <div class="row__meta">
-          작성자: {{ t.authorName || '알 수 없음' }} · 저장: {{ fmt(t.createdAt || t.updatedAt) }} · 업데이트: {{ fmt(t.updatedAt) }}
+        <div class="row__head">
+          <div class="row__title">{{ t.title }}</div>
+          <div class="row__author">
+            <img v-if="avatarSrcOf(t)" class="row__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
+            <div v-else class="row__avatar row__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
+            <span>by {{ displayNameOf(t) }}</span>
+          </div>
         </div>
+        <div class="row__meta">{{ fmt(t.updatedAt) }}</div>
       </button>
     </div>
   </section>
@@ -131,26 +148,72 @@ function openTierList(id) {
 }
 .list {
   display: grid;
-  gap: 10px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
 }
 .row {
   text-align: left;
-  padding: 12px;
-  border-radius: 14px;
+  padding: 14px;
+  border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.03);
+  background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.92);
   cursor: pointer;
+  width: 100%;
+  display: grid;
+  gap: 10px;
+  align-content: start;
+  min-height: 168px;
 }
 .row:hover {
   background: rgba(255, 255, 255, 0.05);
 }
 .row__title {
   font-weight: 800;
+  min-width: 0;
+  font-size: 18px;
+  line-height: 1.35;
+}
+.row__head {
+  display: grid;
+  gap: 12px;
+  align-content: start;
+}
+.row__author {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 13px;
+  opacity: 0.86;
+  flex: 0 0 auto;
+}
+.row__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  object-fit: cover;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.08);
+}
+.row__avatar--fallback {
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  font-weight: 900;
 }
 .row__meta {
   opacity: 0.78;
-  margin-top: 6px;
   font-size: 13px;
+  margin-top: auto;
+}
+@media (max-width: 1100px) {
+  .list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 720px) {
+  .list {
+    grid-template-columns: 1fr;
+  }
 }
 </style>

frontend/src/views/HomeView.vue

@@ -10,7 +10,7 @@ const auth = useAuthStore()
 
 const items = ref([])
 const error = ref('')
-const games = computed(() => items.value)
+const games = computed(() => items.value.filter((item) => item.id !== 'freeform'))
 
 onMounted(async () => {
   try {
@@ -41,22 +41,16 @@ function thumbUrl(g) {
 </script>
 
 <template>
-  <section class="hero">
-    <h1 class="hero__title">티어표 메이커</h1>
-    <p class="hero__desc">
-      게임을 선택하면 새 티어표를 만들거나, 다른 사람들이 올린 티어표를 볼 수 있어요.
-    </p>
+  <section class="topBar">
+    <div class="topBar__copy">
+      <h1 class="topBar__title">게임 선택</h1>
+      <p class="topBar__desc">관리자 고정 순서가 있으면 먼저 보여주고, 그 외 게임은 최근 생성순으로 정렬됩니다.</p>
+    </div>
+    <button class="customTierBtn" @click="goFreeform">{{ auth.user ? '커스텀 티어표 만들기' : '로그인 후 커스텀 티어표 만들기' }}</button>
   </section>
 
   <div v-if="error" class="error">{{ error }}</div>
   <section class="grid">
-    <button class="card card--freeform" @click="goFreeform">
-      <div class="thumbWrap thumbWrap--freeform">
-        <div class="thumbFallback">+</div>
-      </div>
-      <div class="card__eyebrow">{{ auth.user ? '템플릿 없이 시작' : '로그인 후 작성 가능' }}</div>
-      <div class="card__title">직접 티어표 만들기</div>
-    </button>
     <button v-for="g in games" :key="g.id" class="card" @click="goGame(g.id)">
       <div class="thumbWrap">
         <img v-if="thumbUrl(g)" class="thumb" :src="thumbUrl(g)" :alt="g.name" />
@@ -68,22 +62,40 @@ function thumbUrl(g) {
 </template>
 
 <style scoped>
-.hero {
-  padding: 18px 2px 14px;
+.topBar {
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  margin-top: 4px;
 }
-.hero__title {
-  font-size: 34px;
-  letter-spacing: -0.03em;
-  margin: 0 0 8px;
+.topBar__copy {
+  display: grid;
+  gap: 6px;
 }
-.hero__desc {
+.topBar__title {
   margin: 0;
-  opacity: 0.86;
+  font-size: 30px;
+  letter-spacing: -0.03em;
+}
+.topBar__desc {
+  margin: 0;
+  opacity: 0.78;
   line-height: 1.5;
 }
+.customTierBtn {
+  padding: 12px 16px;
+  border-radius: 14px;
+  border: 1px solid rgba(96, 165, 250, 0.28);
+  background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(16, 185, 129, 0.16));
+  color: rgba(255, 255, 255, 0.96);
+  font-weight: 900;
+  cursor: pointer;
+}
 .grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 14px;
   margin-top: 14px;
 }
@@ -110,12 +122,9 @@ function thumbUrl(g) {
   background: rgba(255, 255, 255, 0.07);
   border-color: rgba(255, 255, 255, 0.18);
 }
-.card--freeform {
-  background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(16, 185, 129, 0.12));
-}
 .thumbWrap {
   width: 100%;
-  height: 140px;
+  aspect-ratio: 16 / 9;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(0, 0, 0, 0.18);
@@ -123,11 +132,6 @@ function thumbUrl(g) {
   display: grid;
   place-items: center;
 }
-.thumbWrap--freeform {
-  background:
-    radial-gradient(circle at top, rgba(96, 165, 250, 0.18), transparent 50%),
-    rgba(0, 0, 0, 0.18);
-}
 .thumb {
   width: 100%;
   height: 100%;
@@ -142,16 +146,20 @@ function thumbUrl(g) {
   font-weight: 800;
   letter-spacing: -0.02em;
 }
-.card__eyebrow {
-  font-size: 12px;
-  font-weight: 800;
-  opacity: 0.7;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
 @media (max-width: 720px) {
+  .topBar {
+    align-items: stretch;
+  }
+  .customTierBtn {
+    width: 100%;
+  }
   .grid {
     grid-template-columns: 1fr;
   }
 }
+@media (min-width: 721px) and (max-width: 1100px) {
+  .grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
 </style>

frontend/src/views/MyTierListsView.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { api } from '../lib/api'
+import { toApiUrl } from '../lib/runtime'
 
 const router = useRouter()
 const myLists = ref([])
@@ -14,10 +15,21 @@ function fmt(ts) {
     day: '2-digit',
     hour: '2-digit',
     minute: '2-digit',
-    second: '2-digit',
   })
 }
 
+function displayNameOf(tierList) {
+  return tierList.authorName || '알 수 없음'
+}
+
+function avatarSrcOf(tierList) {
+  return tierList.authorAvatarSrc ? toApiUrl(tierList.authorAvatarSrc) : ''
+}
+
+function avatarFallbackOf(tierList) {
+  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
+}
+
 onMounted(async () => {
   try {
     const data = await api.listMyTierLists()
@@ -56,10 +68,15 @@ async function removeList(t) {
       <div v-else class="list">
         <article v-for="t in myLists" :key="t.id" class="row">
           <button class="row__body" @click="openList(t)">
-            <div class="row__title">{{ t.title }}</div>
-            <div class="row__meta">
-              {{ t.gameId }} · 저장: {{ fmt(t.createdAt || t.updatedAt) }} · 업데이트: {{ fmt(t.updatedAt) }}
+            <div class="row__head">
+              <div class="row__title">{{ t.title }}</div>
+              <div class="row__author">
+                <img v-if="avatarSrcOf(t)" class="row__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
+                <div v-else class="row__avatar row__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
+                <span>by {{ displayNameOf(t) }}</span>
+              </div>
             </div>
+            <div class="row__meta">{{ fmt(t.updatedAt) }}</div>
           </button>
           <button class="link link--danger" @click="removeList(t)">삭제</button>
         </article>
@@ -133,6 +150,35 @@ async function removeList(t) {
 }
 .row__title {
   font-weight: 900;
+  min-width: 0;
+}
+.row__head {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.row__author {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 13px;
+  opacity: 0.84;
+}
+.row__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  object-fit: cover;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.08);
+}
+.row__avatar--fallback {
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  font-weight: 900;
 }
 .row__meta {
   margin-top: 6px;

frontend/src/views/TierEditorView.vue

@@ -27,11 +27,15 @@ const itemsById = ref({})
 
 const title = ref('')
 const description = ref('')
-const isPublic = ref(false)
+const isPublic = ref(true)
 const error = ref('')
 const isSaving = ref(false)
 const isExporting = ref(false)
+const isSaveModalOpen = ref(false)
 const ownerId = ref('')
+const authorName = ref('')
+const authorAccountName = ref('')
+const updatedAt = ref(0)
 const isDragActive = ref(false)
 
 const boardEl = ref(null)
@@ -46,6 +50,47 @@ const dropSortables = ref([])
 
 const isNewTierList = computed(() => tierListId.value === 'new')
 const canEdit = computed(() => !!auth.user && (!ownerId.value || ownerId.value === auth.user.id))
+const hasCustomTitle = computed(() => !!(title.value || '').trim())
+const fallbackTimestamp = computed(() => (updatedAt.value ? updatedAt.value : Date.now()))
+const effectiveAuthorName = computed(() => {
+  const currentNickname = (auth.user?.nickname || '').trim()
+  if (currentNickname) return currentNickname
+  if ((authorName.value || '').trim()) return authorName.value.trim()
+  const currentEmail = (auth.user?.email || '').trim()
+  if (currentEmail) return currentEmail.split('@')[0] || currentEmail
+  return (authorAccountName.value || '').trim() || 'unknown'
+})
+const effectiveTitle = computed(() => {
+  const customTitle = (title.value || '').trim()
+  if (customTitle) return customTitle
+  return `이름 없음 ${formatTitleDate(fallbackTimestamp.value)}`
+})
+const untitledWarning = computed(
+  () =>
+    canEdit.value &&
+    !hasCustomTitle.value &&
+    '제목 없이 저장된 티어표는 무분별한 도배 방지를 위해 관리자에 의해 임의 삭제될 수 있어요.'
+)
+
+function formatTitleDate(ts) {
+  const date = new Date(ts)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  return `${year}-${month}-${day} ${hours}:${minutes}`
+}
+
+function formatExportDate(ts) {
+  return new Date(ts).toLocaleString('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
 
 function setGroupDropEl(groupId, el) {
   if (!el) {
@@ -224,7 +269,7 @@ async function downloadImage() {
     const url = URL.createObjectURL(blob)
     const a = document.createElement('a')
     a.href = url
-    a.download = `${(title.value || gameName.value || 'tierlist').trim()}.png`
+    a.download = `${effectiveTitle.value.trim()}.png`
     document.body.appendChild(a)
     a.click()
     a.remove()
@@ -272,7 +317,7 @@ async function uploadPendingCustomItems() {
 }
 
 function buildPayload(existingId) {
-  const finalTitle = (title.value || '').trim() || `${(gameName.value || gameId.value).trim()} 티어표`
+  const finalTitle = effectiveTitle.value
   return {
     id: existingId || undefined,
     gameId: gameId.value,
@@ -292,6 +337,10 @@ async function save() {
     const payload = buildPayload(tierListId.value && tierListId.value !== 'new' ? tierListId.value : null)
     const res = await api.saveTierList(payload)
     if (tierListId.value === 'new') history.replaceState({}, '', `/editor/${gameId.value}/${res.tierList.id}`)
+    updatedAt.value = Number(res.tierList?.updatedAt || Date.now())
+    authorName.value = res.tierList?.authorName || effectiveAuthorName.value
+    authorAccountName.value = res.tierList?.authorAccountName || authorAccountName.value
+    isSaveModalOpen.value = true
   } catch (e) {
     error.value = '저장 실패: 로그인 상태인지 확인해주세요.'
   } finally {
@@ -299,9 +348,28 @@ async function save() {
   }
 }
 
+function closeSaveModal() {
+  isSaveModalOpen.value = false
+}
+
+async function removeTierList() {
+  if (!canEdit.value || isNewTierList.value) return
+  error.value = ''
+  try {
+    const ok = window.confirm(`"${title.value || gameName.value || '이 티어표'}"를 삭제할까요?`)
+    if (!ok) return
+    await api.deleteTierList(tierListId.value)
+    router.push(gameId.value === 'freeform' ? '/me' : `/games/${gameId.value}`)
+  } catch (e) {
+    error.value = '티어표 삭제에 실패했어요.'
+  }
+}
+
 onMounted(() => {
   ;(async () => {
     await auth.refresh()
+    authorName.value = (auth.user?.nickname || '').trim()
+    authorAccountName.value = ((auth.user?.email || '').trim().split('@')[0] || '').trim()
 
     if (isNewTierList.value && !auth.user) {
       router.replace(`/login?redirect=/editor/${gameId.value}/new`)
@@ -333,6 +401,9 @@ onMounted(() => {
         title.value = t.title
         description.value = t.description || ''
         isPublic.value = !!t.isPublic
+        authorName.value = t.authorName || ''
+        authorAccountName.value = t.authorAccountName || ''
+        updatedAt.value = Number(t.updatedAt || 0)
         groups.value = t.groups
         const map = {}
         ;(t.pool || []).forEach((it) => (map[it.id] = it))
@@ -362,6 +433,7 @@ onUnmounted(() => {
     <div class="head__meta">
       <div class="kicker">{{ gameName || gameId }}</div>
       <input v-model="title" class="titleInput" placeholder="티어표 이름을 입력하세요" :readonly="!canEdit" />
+      <div v-if="untitledWarning" class="titleNotice">{{ untitledWarning }}</div>
       <input
         v-model="description"
         class="descInput"
@@ -378,24 +450,39 @@ onUnmounted(() => {
       </div>
     </div>
     <div class="actions">
-      <label class="toggle" :class="{ 'toggle--disabled': !canEdit }">
+      <div class="actions__left">
+        <button class="btn btn--download" @click="downloadImage">이미지 다운로드</button>
+        <button v-if="canEdit && !isNewTierList" class="btn btn--danger" @click="removeTierList">삭제</button>
+      </div>
+      <div class="actions__right">
+        <label class="toggle" :class="{ 'toggle--disabled': !canEdit }">
         <input v-model="isPublic" type="checkbox" :disabled="!canEdit" />
-        <span>공개</span>
-      </label>
-      <button v-if="canEdit" class="btn" :disabled="isSaving" @click="save">{{ isSaving ? '저장중...' : '저장' }}</button>
-      <button class="btn btn--primary" @click="downloadImage">이미지로 다운로드</button>
+          <span>{{ isPublic ? '공개 ON' : '공개 OFF' }}</span>
+        </label>
+        <button v-if="canEdit" class="btn btn--save" :disabled="isSaving" @click="save">{{ isSaving ? '저장중...' : '저장' }}</button>
+      </div>
     </div>
   </section>
 
   <div v-if="error" class="error">{{ error }}</div>
 
+  <div v-if="isSaveModalOpen" class="modalOverlay" @click.self="closeSaveModal">
+    <div class="modalCard" role="dialog" aria-modal="true" aria-labelledby="saveModalTitle">
+      <div id="saveModalTitle" class="modalCard__title">저장 완료</div>
+      <div class="modalCard__desc">티어표가 저장되었어요. 이어서 더 수정한 뒤 다시 저장할 수도 있어요.</div>
+      <div class="modalCard__actions">
+        <button class="btn btn--save" @click="closeSaveModal">확인</button>
+      </div>
+    </div>
+  </div>
+
   <section class="layout">
     <div ref="boardEl" class="board">
       <div v-if="canEdit && !isExporting" class="boardTools">
         <button class="btn btn--ghost" @click="addGroup">티어 추가</button>
       </div>
       <div ref="exportBoardEl" class="exportBoard" :class="{ 'exportBoard--active': isExporting }">
-        <div v-if="isExporting" class="exportBoard__title">{{ title || gameName || gameId }}</div>
+        <div v-if="isExporting" class="exportBoard__title">{{ effectiveTitle }}</div>
         <div v-if="isExporting && description" class="exportBoard__description">{{ description }}</div>
         <div ref="groupListEl" class="rows">
         <div v-for="g in groups" :key="g.id" class="row">
@@ -415,13 +502,17 @@ onUnmounted(() => {
             :data-group-id="g.id"
             :ref="(el) => setGroupDropEl(g.id, el)"
           >
-            <div class="row__empty" v-show="g.itemIds.length === 0">여기로 드래그해서 배치</div>
+            <div v-if="!isExporting" class="row__empty" v-show="g.itemIds.length === 0">여기로 드래그해서 배치</div>
             <div v-for="id in g.itemIds" :key="id" class="cell" :data-item-id="id">
               <img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
             </div>
           </div>
         </div>
       </div>
+        <div v-if="isExporting" class="exportBoard__footer">
+          <span>{{ effectiveAuthorName }}</span>
+          <span>{{ formatExportDate(fallbackTimestamp) }}</span>
+        </div>
       </div>
     </div>
 
@@ -494,11 +585,23 @@ onUnmounted(() => {
   opacity: 0.78;
   font-size: 13px;
 }
+.titleNotice {
+  font-size: 13px;
+  line-height: 1.5;
+  color: rgba(251, 191, 36, 0.94);
+}
 .actions {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.actions__left,
+.actions__right {
   display: flex;
   gap: 10px;
   align-items: center;
-  justify-content: flex-end;
   flex-wrap: wrap;
 }
 .toggle {
@@ -539,6 +642,27 @@ onUnmounted(() => {
 .btn--primary:hover {
   background: rgba(110, 231, 183, 0.24);
 }
+.btn--download {
+  justify-self: flex-start;
+}
+.btn--save {
+  min-width: 112px;
+  padding: 12px 18px;
+  font-size: 15px;
+  font-weight: 900;
+  background: rgba(96, 165, 250, 0.22);
+  border-color: rgba(96, 165, 250, 0.36);
+}
+.btn--save:hover {
+  background: rgba(96, 165, 250, 0.3);
+}
+.btn--danger {
+  background: rgba(239, 68, 68, 0.14);
+  border-color: rgba(239, 68, 68, 0.28);
+}
+.btn--danger:hover {
+  background: rgba(239, 68, 68, 0.22);
+}
 .btn--ghost {
   width: 100%;
   margin-top: 10px;
@@ -563,6 +687,40 @@ onUnmounted(() => {
   padding: 20px;
   align-self: start;
 }
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: grid;
+  place-items: center;
+  padding: 20px;
+  background: rgba(4, 8, 16, 0.68);
+  backdrop-filter: blur(4px);
+}
+.modalCard {
+  width: min(100%, 420px);
+  border-radius: 20px;
+  padding: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(11, 18, 32, 0.96));
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
+  display: grid;
+  gap: 10px;
+}
+.modalCard__title {
+  font-size: 22px;
+  font-weight: 900;
+  letter-spacing: -0.02em;
+}
+.modalCard__desc {
+  line-height: 1.6;
+  opacity: 0.82;
+}
+.modalCard__actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
 .boardTools {
   display: flex;
   justify-content: flex-end;
@@ -571,6 +729,14 @@ onUnmounted(() => {
 .exportBoard--active {
   display: grid;
   gap: 12px;
+  width: 1600px;
+  max-width: none;
+  box-sizing: border-box;
+  padding: 48px 56px;
+  border-radius: 28px;
+  background:
+    radial-gradient(circle at top, rgba(96, 165, 250, 0.14), transparent 38%),
+    rgba(11, 18, 32, 0.98);
 }
 .exportBoard__title {
   font-size: 28px;
@@ -585,6 +751,16 @@ onUnmounted(() => {
   opacity: 0.74;
   text-align: left;
 }
+.exportBoard__footer {
+  margin-top: 12px;
+  padding-top: 18px;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  font-size: 15px;
+  opacity: 0.8;
+}
 .rows {
   display: grid;
   gap: 10px;
@@ -753,6 +929,16 @@ onUnmounted(() => {
   .layout {
     grid-template-columns: 1fr;
   }
+  .actions {
+    justify-content: stretch;
+  }
+  .actions__left,
+  .actions__right {
+    width: 100%;
+  }
+  .actions__right {
+    justify-content: flex-end;
+  }
   .row {
     grid-template-columns: 150px 1fr;
   }