수정: 신규 DB 기준 관리자 템플릿 요청 스키마 보정

backend/package.json

@@ -8,6 +8,7 @@
     "start": "APP_ORIGIN=http://localhost:5173 DB_HOST=127.0.0.1 DB_PORT=3307 DB_USER=tier_cursor DB_PASSWORD=tier_cursor1234 DB_NAME=tier_cursor node index.js",
     "images:backfill": "DB_HOST=127.0.0.1 DB_PORT=3307 DB_USER=tier_cursor DB_PASSWORD=tier_cursor1234 DB_NAME=tier_cursor node scripts/backfill-legacy-image-assets.js",
     "images:migrate-legacy": "DB_HOST=127.0.0.1 DB_PORT=3307 DB_USER=tier_cursor DB_PASSWORD=tier_cursor1234 DB_NAME=tier_cursor node scripts/migrate-legacy-uploads-to-assets.js",
+    "images:shard-assets": "DB_HOST=127.0.0.1 DB_PORT=3307 DB_USER=tier_cursor DB_PASSWORD=tier_cursor1234 DB_NAME=tier_cursor node scripts/migrate-flat-assets-to-sharded.js",
     "uploads:cleanup-legacy": "DB_HOST=127.0.0.1 DB_PORT=3307 DB_USER=tier_cursor DB_PASSWORD=tier_cursor1234 DB_NAME=tier_cursor node scripts/cleanup-unreferenced-legacy-uploads.js"
   },
   "keywords": [],

backend/scripts/migrate-flat-assets-to-sharded.js

@@ -0,0 +1,102 @@
+const fs = require('fs/promises')
+const path = require('path')
+const {
+  ensureData,
+  closePool,
+  updateImageAssetSrc,
+  replaceUploadSourceReferences,
+} = require('../src/db')
+
+const BACKEND_ROOT = path.join(__dirname, '..')
+const ASSETS_ROOT = path.join(BACKEND_ROOT, 'uploads', 'assets')
+const FLAT_ASSET_PATTERN = /^\/uploads\/assets\/[^/]+$/
+
+function getShardedAssetSrc(src) {
+  const filename = path.basename(src || '')
+  const shardDirectory = filename.slice(0, 2)
+  if (!filename || shardDirectory.length < 2) return ''
+  return `/uploads/assets/${shardDirectory}/${filename}`
+}
+
+async function moveAssetFile(fromSrc, toSrc) {
+  const fromPath = path.join(BACKEND_ROOT, fromSrc.replace(/^\//, ''))
+  const toPath = path.join(BACKEND_ROOT, toSrc.replace(/^\//, ''))
+  await fs.mkdir(path.dirname(toPath), { recursive: true })
+
+  try {
+    await fs.rename(fromPath, toPath)
+    return 'moved'
+  } catch (error) {
+    if (error?.code !== 'ENOENT') throw error
+  }
+
+  try {
+    await fs.access(toPath)
+    return 'already_moved'
+  } catch (error) {
+    if (error?.code === 'ENOENT') return 'missing'
+    throw error
+  }
+}
+
+async function main() {
+  await ensureData()
+
+  let dirEntries = []
+  try {
+    dirEntries = await fs.readdir(ASSETS_ROOT, { withFileTypes: true })
+  } catch (error) {
+    if (error?.code !== 'ENOENT') throw error
+  }
+
+  const flatAssets = dirEntries
+    .filter((entry) => entry.isFile())
+    .map((entry) => ({ src: `/uploads/assets/${entry.name}` }))
+    .filter((asset) => FLAT_ASSET_PATTERN.test(asset.src || ''))
+  const summary = {
+    scanned: flatAssets.length,
+    migrated: 0,
+    alreadyMoved: 0,
+    skipped: 0,
+    missingFiles: 0,
+    failed: 0,
+    updatedRows: 0,
+  }
+
+  for (const asset of flatAssets) {
+    const nextSrc = getShardedAssetSrc(asset.src)
+    if (!nextSrc) {
+      summary.skipped += 1
+      continue
+    }
+
+    try {
+      const moveStatus = await moveAssetFile(asset.src, nextSrc)
+      if (moveStatus === 'missing') {
+        summary.missingFiles += 1
+        continue
+      }
+
+      await updateImageAssetSrc({ fromSrc: asset.src, toSrc: nextSrc })
+      const replaced = await replaceUploadSourceReferences({ fromSrc: asset.src, toSrc: nextSrc })
+      summary.updatedRows += Number(replaced.updatedRows || 0)
+
+      if (moveStatus === 'already_moved') summary.alreadyMoved += 1
+      else summary.migrated += 1
+    } catch (error) {
+      summary.failed += 1
+      console.error('[migrate-flat-assets-to-sharded] failed:', asset.src, error?.message || error)
+    }
+  }
+
+  console.log(JSON.stringify(summary, null, 2))
+}
+
+main()
+  .catch((error) => {
+    console.error(error)
+    process.exitCode = 1
+  })
+  .finally(async () => {
+    await closePool()
+  })

backend/src/db.js

@@ -1,6 +1,7 @@
 const fs = require('fs/promises')
 const path = require('path')
 const mysql = require('mysql2/promise')
+const { nanoid } = require('nanoid')
 
 const DB_HOST = process.env.DB_HOST || '127.0.0.1'
 const DB_PORT = process.env.DB_PORT ? Number(process.env.DB_PORT) : 3306
@@ -9,6 +10,7 @@ const DB_PASSWORD = process.env.DB_PASSWORD || ''
 const DB_NAME = process.env.DB_NAME || 'tier_cursor'
 const DB_CONNECTION_LIMIT = process.env.DB_CONNECTION_LIMIT ? Number(process.env.DB_CONNECTION_LIMIT) : 10
 const FREEFORM_TOPIC_ID = 'freeform'
+const TOPIC_SLUG_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
 
 let poolPromise = null
 let initPromise = null
@@ -30,6 +32,20 @@ function serializeJson(value) {
   return JSON.stringify(value || [])
 }
 
+function normalizeTopicSlug(value) {
+  return String(value || '').trim().toLowerCase()
+}
+
+function assertTopicSlug(slug) {
+  const normalized = normalizeTopicSlug(slug)
+  if (!normalized || normalized.length > 120 || !TOPIC_SLUG_PATTERN.test(normalized)) {
+    const err = new Error('topic_slug_invalid')
+    err.code = 'TOPIC_SLUG_INVALID'
+    throw err
+  }
+  return normalized
+}
+
 function collectUploadSrcsFromItems(items, bucket) {
   for (const item of items || []) {
     if (typeof item?.src === 'string' && item.src.startsWith('/uploads/')) {
@@ -75,8 +91,10 @@ function mapTopicRow(row) {
   if (!row) return null
   return {
     id: row.id,
+    slug: row.slug || row.id,
     name: row.name,
     topicId: row.id,
+    topicSlug: row.slug || row.id,
     topicName: row.name,
     thumbnailSrc: row.thumbnail_src || '',
     isPublic: row.is_public == null ? true : !!row.is_public,
@@ -138,6 +156,7 @@ function mapTierListRow(row) {
     authorAccountName: getUserAccountName(row),
     authorAvatarSrc: row.avatar_src || '',
     topicId: row.topic_id,
+    topicSlug: row.topic_slug || row.topic_id,
     topicName: row.topic_name || '',
     title: row.title,
     thumbnailSrc: row.thumbnail_src || '',
@@ -169,11 +188,13 @@ function mapTemplateRequestRow(row) {
     requesterAvatarSrc: row.requester_avatar_src || '',
     sourceTierListId: row.source_tierlist_id || '',
     sourceTopicId: row.source_topic_id,
+    sourceTopicSlug: row.source_topic_slug || row.source_topic_id,
     sourceTopicName: row.source_topic_name || '',
     sourceTierListTitle: row.title_snapshot || '',
     sourceDescription: row.description_snapshot || '',
     thumbnailSrc: row.thumbnail_src_snapshot || '',
     targetTopicId: row.target_topic_id || '',
+    targetTopicSlug: row.target_topic_slug || row.target_topic_id || '',
     targetTopicName: row.target_topic_name || '',
     status: row.status,
     items: parseJson(row.items_json, []),
@@ -201,6 +222,21 @@ function getUserAccountName(row) {
   return email.split('@')[0] || email
 }
 
+function getAssetLibrarySourceLabel(src) {
+  const normalizedSrc = String(src || '').trim()
+  if (normalizedSrc.includes('/uploads/assets/avatars/')) return '프로필 아바타'
+  if (normalizedSrc.includes('/uploads/assets/tierlists/')) return '티어표 썸네일'
+  if (normalizedSrc.includes('/uploads/assets/topics/')) return '썸네일 이미지'
+  return '보관 자산'
+}
+
+function getAssetLibraryKind(src) {
+  const normalizedSrc = String(src || '').trim()
+  if (normalizedSrc.includes('/uploads/assets/avatars/')) return 'avatar'
+  if (normalizedSrc.includes('/uploads/assets/tierlists/') || normalizedSrc.includes('/uploads/assets/topics/')) return 'thumbnail'
+  return 'asset'
+}
+
 async function createPool() {
   const rootConnection = await mysql.createConnection({
     host: DB_HOST,
@@ -239,32 +275,6 @@ async function query(sql, params = []) {
   return rows
 }
 
-async function tableExists(name) {
-  const rows = await query(
-    `
-      SELECT TABLE_NAME
-      FROM information_schema.TABLES
-      WHERE TABLE_SCHEMA = ? AND TABLE_NAME = ?
-      LIMIT 1
-    `,
-    [DB_NAME, name]
-  )
-  return rows.length > 0
-}
-
-async function columnExists(tableName, columnName) {
-  const rows = await query(
-    `
-      SELECT COLUMN_NAME
-      FROM information_schema.COLUMNS
-      WHERE TABLE_SCHEMA = ? AND TABLE_NAME = ? AND COLUMN_NAME = ?
-      LIMIT 1
-    `,
-    [DB_NAME, tableName, columnName]
-  )
-  return rows.length > 0
-}
-
 async function closePool() {
   if (!poolPromise) return
   const pool = await poolPromise
@@ -290,18 +300,6 @@ async function ensureSchema() {
       ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
     `)
 
-    const userEmailVerifiedColumns = await query("SHOW COLUMNS FROM users LIKE 'email_verified'")
-    if (!userEmailVerifiedColumns.length) {
-      await query('ALTER TABLE users ADD COLUMN email_verified TINYINT(1) NOT NULL DEFAULT 1 AFTER password_hash')
-      await query('UPDATE users SET email_verified = 1 WHERE email_verified IS NULL')
-    }
-
-    const userLastLoginColumns = await query("SHOW COLUMNS FROM users LIKE 'last_login_at'")
-    if (!userLastLoginColumns.length) {
-      await query('ALTER TABLE users ADD COLUMN last_login_at BIGINT NOT NULL DEFAULT 0 AFTER avatar_src')
-      await query('UPDATE users SET last_login_at = created_at WHERE last_login_at = 0')
-    }
-
     await query(`
       CREATE TABLE IF NOT EXISTS email_verification_tokens (
         id VARCHAR(64) PRIMARY KEY,
@@ -333,25 +331,16 @@ async function ensureSchema() {
     await query(`
       CREATE TABLE IF NOT EXISTS topics (
         id VARCHAR(120) PRIMARY KEY,
+        slug VARCHAR(120) NOT NULL,
         name VARCHAR(120) NOT NULL,
         thumbnail_src VARCHAR(255) NOT NULL DEFAULT '',
         is_public TINYINT(1) NOT NULL DEFAULT 1,
         display_rank INT NULL DEFAULT NULL,
-        created_at BIGINT NOT NULL
+        created_at BIGINT NOT NULL,
+        UNIQUE KEY uq_topics_slug (slug)
       ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
     `)
 
-    const topicIsPublicColumns = await query("SHOW COLUMNS FROM topics LIKE 'is_public'")
-    if (!topicIsPublicColumns.length) {
-      await query('ALTER TABLE topics ADD COLUMN is_public TINYINT(1) NOT NULL DEFAULT 1 AFTER thumbnail_src')
-      await query('UPDATE topics SET is_public = 1 WHERE is_public IS NULL')
-    }
-
-    const displayRankColumns = await query("SHOW COLUMNS FROM topics LIKE 'display_rank'")
-    if (!displayRankColumns.length) {
-      await query('ALTER TABLE topics ADD COLUMN display_rank INT NULL DEFAULT NULL AFTER thumbnail_src')
-    }
-
     await query(`
       CREATE TABLE IF NOT EXISTS topic_items (
         id VARCHAR(64) PRIMARY KEY,
@@ -365,11 +354,6 @@ async function ensureSchema() {
       ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
     `)
 
-    const topicItemDisplayOrderColumns = await query("SHOW COLUMNS FROM topic_items LIKE 'display_order'")
-    if (!topicItemDisplayOrderColumns.length) {
-      await query('ALTER TABLE topic_items ADD COLUMN display_order INT NULL DEFAULT NULL AFTER label')
-    }
-
     await query(`
       CREATE TABLE IF NOT EXISTS custom_items (
         id VARCHAR(64) PRIMARY KEY,
@@ -464,11 +448,6 @@ async function ensureSchema() {
       ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
     `)
 
-    const imageAssetLabelColumns = await query("SHOW COLUMNS FROM image_assets LIKE 'label_override'")
-    if (!imageAssetLabelColumns.length) {
-      await query("ALTER TABLE image_assets ADD COLUMN label_override VARCHAR(120) NOT NULL DEFAULT '' AFTER src")
-    }
-
     await query(`
       CREATE TABLE IF NOT EXISTS image_optimization_jobs (
         id VARCHAR(64) PRIMARY KEY,
@@ -491,7 +470,7 @@ async function ensureSchema() {
         id VARCHAR(64) PRIMARY KEY,
         request_type VARCHAR(20) NOT NULL,
         requester_id VARCHAR(64) NOT NULL,
-        source_tierlist_id VARCHAR(64) NOT NULL,
+        source_tierlist_id VARCHAR(64) NULL DEFAULT NULL,
         source_topic_id VARCHAR(120) NOT NULL,
         target_topic_id VARCHAR(120) NOT NULL DEFAULT '',
         status VARCHAR(20) NOT NULL DEFAULT 'pending',
@@ -499,6 +478,9 @@ async function ensureSchema() {
         description_snapshot TEXT NOT NULL,
         thumbnail_src_snapshot VARCHAR(255) NOT NULL DEFAULT '',
         items_json LONGTEXT NOT NULL,
+        groups_json LONGTEXT NOT NULL,
+        board_items_json LONGTEXT NOT NULL,
+        show_character_names_snapshot TINYINT(1) NOT NULL DEFAULT 0,
         created_at BIGINT NOT NULL,
         updated_at BIGINT NOT NULL,
         INDEX idx_template_requests_status_created (status, created_at),
@@ -509,125 +491,14 @@ async function ensureSchema() {
       ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
     `)
 
-    const templateRequestSourceTierListColumns = await query("SHOW COLUMNS FROM template_requests LIKE 'source_tierlist_id'")
-    if (templateRequestSourceTierListColumns[0]?.Null !== 'YES') {
-      await query('ALTER TABLE template_requests MODIFY source_tierlist_id VARCHAR(64) NULL')
-    }
-    const templateRequestTypeColumns = await query("SHOW COLUMNS FROM template_requests LIKE 'request_type'")
-    if (!templateRequestTypeColumns.length) {
-      await query("ALTER TABLE template_requests ADD COLUMN request_type VARCHAR(20) NOT NULL DEFAULT 'create' AFTER id")
-    }
-    const hasSourceTopicId = await columnExists('template_requests', 'source_topic_id')
-    if (!hasSourceTopicId) {
-      await query("ALTER TABLE template_requests ADD COLUMN source_topic_id VARCHAR(120) NOT NULL DEFAULT 'freeform' AFTER source_tierlist_id")
-    }
-    const hasTargetTopicId = await columnExists('template_requests', 'target_topic_id')
-    if (!hasTargetTopicId) {
-      await query("ALTER TABLE template_requests ADD COLUMN target_topic_id VARCHAR(120) NOT NULL DEFAULT '' AFTER source_topic_id")
-    }
-    const templateRequestStatusColumns = await query("SHOW COLUMNS FROM template_requests LIKE 'status'")
-    if (!templateRequestStatusColumns.length) {
-      await query("ALTER TABLE template_requests ADD COLUMN status VARCHAR(20) NOT NULL DEFAULT 'pending' AFTER target_topic_id")
-    }
-    const templateRequestGroupsColumns = await query("SHOW COLUMNS FROM template_requests LIKE 'groups_json'")
-    if (!templateRequestGroupsColumns.length) {
-      await query("ALTER TABLE template_requests ADD COLUMN groups_json LONGTEXT NOT NULL AFTER items_json")
-    }
-    const templateRequestBoardItemsColumns = await query("SHOW COLUMNS FROM template_requests LIKE 'board_items_json'")
-    if (!templateRequestBoardItemsColumns.length) {
-      await query("ALTER TABLE template_requests ADD COLUMN board_items_json LONGTEXT NOT NULL AFTER groups_json")
-    }
-    const templateRequestShowNamesColumns = await query("SHOW COLUMNS FROM template_requests LIKE 'show_character_names_snapshot'")
-    if (!templateRequestShowNamesColumns.length) {
-      await query("ALTER TABLE template_requests ADD COLUMN show_character_names_snapshot TINYINT(1) NOT NULL DEFAULT 0 AFTER board_items_json")
-    }
-
-    const tierListThumbnailColumns = await query("SHOW COLUMNS FROM tierlists LIKE 'thumbnail_src'")
-    if (!tierListThumbnailColumns.length) {
-      await query("ALTER TABLE tierlists ADD COLUMN thumbnail_src VARCHAR(255) NOT NULL DEFAULT '' AFTER title")
-    }
-    const tierListTopicIdColumns = await query("SHOW COLUMNS FROM tierlists LIKE 'topic_id'")
-    if (!tierListTopicIdColumns.length) {
-      await query("ALTER TABLE tierlists ADD COLUMN topic_id VARCHAR(120) NOT NULL DEFAULT 'freeform' AFTER author_id")
-    }
-    const tierListShowNamesColumns = await query("SHOW COLUMNS FROM tierlists LIKE 'show_character_names'")
-    if (!tierListShowNamesColumns.length) {
-      await query("ALTER TABLE tierlists ADD COLUMN show_character_names TINYINT(1) NOT NULL DEFAULT 0 AFTER is_public")
-    }
-    const tierListFeaturedColumns = await query("SHOW COLUMNS FROM tierlists LIKE 'is_featured'")
-    if (!tierListFeaturedColumns.length) {
-      await query("ALTER TABLE tierlists ADD COLUMN is_featured TINYINT(1) NOT NULL DEFAULT 0 AFTER is_public")
-    }
-    const tierListFeaturedAtColumns = await query("SHOW COLUMNS FROM tierlists LIKE 'featured_at'")
-    if (!tierListFeaturedAtColumns.length) {
-      await query("ALTER TABLE tierlists ADD COLUMN featured_at BIGINT NOT NULL DEFAULT 0 AFTER is_featured")
-    }
-    const tierListFeaturedByColumns = await query("SHOW COLUMNS FROM tierlists LIKE 'featured_by'")
-    if (!tierListFeaturedByColumns.length) {
-      await query("ALTER TABLE tierlists ADD COLUMN featured_by VARCHAR(64) NOT NULL DEFAULT '' AFTER featured_at")
-    }
-    const tierListIconSizeColumns = await query("SHOW COLUMNS FROM tierlists LIKE 'icon_size'")
-    if (!tierListIconSizeColumns.length) {
-      await query("ALTER TABLE tierlists ADD COLUMN icon_size INT NOT NULL DEFAULT 80 AFTER show_character_names")
-    }
-    const tierListSourceIdColumns = await query("SHOW COLUMNS FROM tierlists LIKE 'source_tierlist_id'")
-    if (!tierListSourceIdColumns.length) {
-      await query("ALTER TABLE tierlists ADD COLUMN source_tierlist_id VARCHAR(64) NULL DEFAULT NULL AFTER icon_size")
-    } else if (tierListSourceIdColumns[0]?.Null !== 'YES') {
-      await query('ALTER TABLE tierlists MODIFY source_tierlist_id VARCHAR(64) NULL DEFAULT NULL')
-    }
-    const tierListSourceTitleColumns = await query("SHOW COLUMNS FROM tierlists LIKE 'source_snapshot_title'")
-    if (!tierListSourceTitleColumns.length) {
-      await query("ALTER TABLE tierlists ADD COLUMN source_snapshot_title VARCHAR(120) NOT NULL DEFAULT '' AFTER source_tierlist_id")
-    }
-    const tierListSourceAuthorColumns = await query("SHOW COLUMNS FROM tierlists LIKE 'source_snapshot_author'")
-    if (!tierListSourceAuthorColumns.length) {
-      await query("ALTER TABLE tierlists ADD COLUMN source_snapshot_author VARCHAR(120) NOT NULL DEFAULT '' AFTER source_snapshot_title")
-    }
-
     await query(
       `
-        INSERT INTO topics (id, name, thumbnail_src, created_at)
-        VALUES (?, ?, ?, ?)
-        ON DUPLICATE KEY UPDATE name = VALUES(name)
+        INSERT INTO topics (id, slug, name, thumbnail_src, is_public, created_at)
+        VALUES (?, ?, ?, ?, ?, ?)
+        ON DUPLICATE KEY UPDATE slug = VALUES(slug), name = VALUES(name), is_public = VALUES(is_public)
       `,
-      [FREEFORM_TOPIC_ID, '직접 티어표 만들기', '', now()]
+      [FREEFORM_TOPIC_ID, FREEFORM_TOPIC_ID, '직접 티어표 만들기', '', 1, now()]
     )
-
-    const countRows = await query('SELECT COUNT(*) AS count FROM topics')
-    if (Number(countRows[0]?.count || 0) <= 1) {
-      const createdAt = now()
-      await query(
-        `
-          INSERT INTO topics (id, name, thumbnail_src, created_at)
-          VALUES
-            (?, ?, ?, ?),
-            (?, ?, ?, ?)
-        `,
-        ['example-topic', '예시 주제', '', createdAt, 'another-topic', '다른 예시 주제', '', createdAt]
-      )
-
-      await query(
-        `
-          INSERT INTO topic_items (id, topic_id, src, label, created_at)
-          VALUES
-            (?, ?, ?, ?, ?),
-            (?, ?, ?, ?, ?)
-        `,
-        [
-          'img-1',
-          'example-topic',
-          '/uploads/seeds/example1.png',
-          '샘플 1',
-          createdAt,
-          'img-2',
-          'example-topic',
-          '/uploads/seeds/example2.png',
-          '샘플 2',
-          createdAt,
-        ]
-      )
-    }
   })()
 
   return initPromise
@@ -939,7 +810,7 @@ async function listTopics(currentUserId = '', options = {}) {
   const includePrivate = !!options.includePrivate
   const rows = await query(
     `
-      SELECT id, name, thumbnail_src, is_public, display_rank, created_at
+      SELECT id, slug, name, thumbnail_src, is_public, display_rank, created_at
       FROM topics
       WHERE id <> ?
       ${includePrivate ? '' : 'AND is_public = 1'}
@@ -963,7 +834,39 @@ async function listTopics(currentUserId = '', options = {}) {
 }
 
 async function findTopicById(id) {
-  const rows = await query('SELECT id, name, thumbnail_src, is_public, display_rank, created_at FROM topics WHERE id = ? LIMIT 1', [id])
+  const rows = await query(
+    'SELECT id, slug, name, thumbnail_src, is_public, display_rank, created_at FROM topics WHERE id = ? LIMIT 1',
+    [id]
+  )
+  return mapTopicRow(rows[0])
+}
+
+async function findTopicBySlug(slug) {
+  const normalizedSlug = normalizeTopicSlug(slug)
+  if (!normalizedSlug) return null
+  const rows = await query(
+    'SELECT id, slug, name, thumbnail_src, is_public, display_rank, created_at FROM topics WHERE slug = ? LIMIT 1',
+    [normalizedSlug]
+  )
+  return mapTopicRow(rows[0])
+}
+
+async function findTopicByIdentifier(topicRef) {
+  const rawRef = String(topicRef || '').trim()
+  if (!rawRef) return null
+  if (rawRef === FREEFORM_TOPIC_ID) return findTopicById(FREEFORM_TOPIC_ID)
+
+  const rows = await query(
+    `
+      SELECT id, slug, name, thumbnail_src, is_public, display_rank, created_at
+      FROM topics
+      WHERE id = ? OR slug = ?
+      ORDER BY
+        CASE WHEN id = ? THEN 0 ELSE 1 END ASC
+      LIMIT 1
+    `,
+    [rawRef, normalizeTopicSlug(rawRef), rawRef]
+  )
   return mapTopicRow(rows[0])
 }
 
@@ -989,23 +892,37 @@ async function findTopicItemById(itemId) {
   return mapTopicItemRow(rows[0])
 }
 
-async function getTopicDetail(topicId) {
-  const topic = await findTopicById(topicId)
+async function getTopicDetail(topicRef) {
+  const topic = await findTopicByIdentifier(topicRef)
   if (!topic) return null
-  const items = await listTopicItems(topicId)
+  const items = await listTopicItems(topic.id)
   return { topic, template: topic, items }
 }
 
-async function createTopic({ id, name, isPublic = true }) {
-  await query('INSERT INTO topics (id, name, thumbnail_src, is_public, display_rank, created_at) VALUES (?, ?, ?, ?, ?, ?)', [
-    id,
+async function createTopic({ slug, name, isPublic = true }) {
+  const topicId = nanoid()
+  const topicSlug = assertTopicSlug(slug)
+  await query('INSERT INTO topics (id, slug, name, thumbnail_src, is_public, display_rank, created_at) VALUES (?, ?, ?, ?, ?, ?, ?)', [
+    topicId,
+    topicSlug,
     name,
     '',
     isPublic ? 1 : 0,
     null,
     now(),
   ])
-  return findTopicById(id)
+  return findTopicById(topicId)
+}
+
+async function updateTopicMeta(topicId, { slug, name, isPublic }) {
+  const topicSlug = assertTopicSlug(slug)
+  await query('UPDATE topics SET slug = ?, name = ?, is_public = ? WHERE id = ?', [
+    topicSlug,
+    name,
+    isPublic ? 1 : 0,
+    topicId,
+  ])
+  return findTopicById(topicId)
 }
 
 async function updateTopicThumbnail(topicId, thumbnailSrc) {
@@ -1285,6 +1202,12 @@ async function findImageAssetById(id) {
   return mapImageAssetRow(rows[0])
 }
 
+async function updateImageAssetSrc({ fromSrc, toSrc }) {
+  if (!fromSrc || !toSrc || fromSrc === toSrc) return null
+  await query('UPDATE image_assets SET src = ? WHERE src = ?', [toSrc, fromSrc])
+  return findImageAssetBySrc(toSrc)
+}
+
 async function getReferencedUploadFootprint() {
   const [referencedSrcs, assets] = await Promise.all([listReferencedUploadSources(), listImageAssets()])
   const assetMap = new Map(assets.map((asset) => [asset.src, asset]))
@@ -1814,6 +1737,32 @@ async function listCustomItems({ queryText = '', page = 1, limit = 50, filterMod
     getCustomItemUsageMeta(),
   ])
 
+  const [userAvatarRows, topicThumbnailRows, tierListThumbnailRows, templateRequestThumbnailRows] = await Promise.all([
+    query("SELECT avatar_src AS src FROM users WHERE avatar_src <> ''"),
+    query("SELECT thumbnail_src AS src FROM topics WHERE thumbnail_src <> ''"),
+    query("SELECT thumbnail_src AS src FROM tierlists WHERE thumbnail_src <> ''"),
+    query("SELECT thumbnail_src_snapshot AS src FROM template_requests WHERE thumbnail_src_snapshot <> ''"),
+  ])
+
+  const avatarSrcSet = new Set(userAvatarRows.map((row) => row.src).filter(Boolean))
+  const thumbnailSrcSet = new Set([
+    ...topicThumbnailRows.map((row) => row.src).filter(Boolean),
+    ...tierListThumbnailRows.map((row) => row.src).filter(Boolean),
+    ...templateRequestThumbnailRows.map((row) => row.src).filter(Boolean),
+  ])
+
+  const resolveLibraryAssetKind = (src) => {
+    if (avatarSrcSet.has(src)) return 'avatar'
+    if (thumbnailSrcSet.has(src)) return 'thumbnail'
+    return getAssetLibraryKind(src)
+  }
+
+  const resolveLibraryAssetLabel = (src) => {
+    if (avatarSrcSet.has(src)) return '프로필 아바타'
+    if (thumbnailSrcSet.has(src)) return '썸네일 이미지'
+    return getAssetLibrarySourceLabel(src)
+  }
+
   const templateLinkedBySrc = new Map()
   topicItemRows.forEach((row) => {
     if (!row?.src) return
@@ -1836,8 +1785,9 @@ async function listCustomItems({ queryText = '', page = 1, limit = 50, filterMod
       ownerEmail: row.email,
       usageCount: usageMeta.usageMap.get(row.id) || 0,
       linkedTemplates,
+      assetKind: resolveLibraryAssetKind(row.src),
       sourceType: 'user',
-      sourceLabel: '사용자 업로드',
+      sourceLabel: '사용자 아이템',
       canDelete: true,
     }
   })
@@ -1857,8 +1807,9 @@ async function listCustomItems({ queryText = '', page = 1, limit = 50, filterMod
       ownerEmail: '',
       usageCount: 0,
       linkedTemplates: [],
-      sourceType: 'template',
-      sourceLabel: '관리자 템플릿',
+      sourceType: 'asset',
+      sourceLabel: resolveLibraryAssetLabel(row.src),
+      assetKind: resolveLibraryAssetKind(row.src),
       canDelete: true,
       sourceTopicId: '',
       sourceTopicName: '',
@@ -1875,8 +1826,9 @@ async function listCustomItems({ queryText = '', page = 1, limit = 50, filterMod
     ownerEmail: '',
     usageCount: (templateLinkedBySrc.get(row.src) || new Map()).size,
     linkedTemplates: Array.from((templateLinkedBySrc.get(row.src) || new Map()).values()),
+    assetKind: resolveLibraryAssetKind(row.src),
     sourceType: 'template',
-    sourceLabel: '관리자 템플릿',
+    sourceLabel: '템플릿 아이템',
     canDelete: true,
     sourceTopicId: row.topic_id,
     sourceTopicName: row.topic_name || row.topic_id,
@@ -1900,7 +1852,7 @@ async function listCustomItems({ queryText = '', page = 1, limit = 50, filterMod
 
       siblings.forEach((entry) => {
         if (entry.sourceType === 'user') userReferenceCount += 1
-        else if (entry.isAssetLibraryItem) assetReferenceCount += 1
+        else if (entry.sourceType === 'asset' || entry.isAssetLibraryItem) assetReferenceCount += 1
         else templateReferenceCount += 1
         ;(entry.linkedTemplates || []).forEach((template) => {
           if (template?.id) linkedTemplates.set(template.id, template)
@@ -1922,6 +1874,7 @@ async function listCustomItems({ queryText = '', page = 1, limit = 50, filterMod
             label: entry.label,
             sourceLabel: entry.sourceLabel,
             sourceType: entry.sourceType,
+            assetKind: entry.assetKind || '',
             ownerName: entry.ownerName,
             createdAt: entry.createdAt,
             sourceTopicId: entry.sourceTopicId || '',
@@ -1939,11 +1892,17 @@ async function listCustomItems({ queryText = '', page = 1, limit = 50, filterMod
         case 'template':
           return item.sourceType === 'template' && !item.isAssetLibraryItem
         case 'asset':
-          return !!item.isAssetLibraryItem
+          return item.sourceType === 'asset' || !!item.isAssetLibraryItem
+        case 'thumbnail':
+          return item.assetKind === 'thumbnail'
+        case 'avatar':
+          return item.assetKind === 'avatar'
+        case 'library':
+          return item.sourceType === 'user' || (item.sourceType === 'template' && !item.isAssetLibraryItem)
         case 'unused-user':
           return item.sourceType === 'user' && item.usageCount === 0 && item.linkedTemplates.length === 0
         case 'unused-admin':
-          return !!item.isAssetLibraryItem
+          return item.sourceType === 'asset' || !!item.isAssetLibraryItem
         default:
           return true
       }
@@ -2049,8 +2008,15 @@ async function listPublicTierLists(topicId, currentUserId = '', queryText = '')
   const params = []
   let whereClause = 'WHERE t.is_public = 1'
   if (topicId) {
+    const topic = await findTopicByIdentifier(topicId)
+    if (!topic) {
+      return {
+        featuredTierLists: [],
+        tierLists: [],
+      }
+    }
     whereClause += ' AND t.topic_id = ?'
-    params.push(topicId)
+    params.push(topic.id)
   }
   if ((queryText || '').trim()) {
     const search = `%${queryText.trim()}%`
@@ -2063,6 +2029,8 @@ async function listPublicTierLists(topicId, currentUserId = '', queryText = '')
       SELECT
         t.id,
         t.topic_id,
+        tp.slug AS topic_slug,
+        tp.name AS topic_name,
         t.title,
         t.thumbnail_src,
         t.is_featured,
@@ -2076,6 +2044,7 @@ async function listPublicTierLists(topicId, currentUserId = '', queryText = '')
         u.avatar_src
       FROM tierlists t
       INNER JOIN users u ON u.id = t.author_id
+      INNER JOIN topics tp ON tp.id = t.topic_id
       ${whereClause}
       ORDER BY t.is_featured DESC, t.featured_at DESC, t.updated_at DESC
       LIMIT 200
@@ -2086,6 +2055,8 @@ async function listPublicTierLists(topicId, currentUserId = '', queryText = '')
   const tierLists = rows.map((row) => ({
     id: row.id,
     topicId: row.topic_id,
+    topicSlug: row.topic_slug || row.topic_id,
+    topicName: row.topic_name || '',
     title: row.title,
     thumbnailSrc: row.thumbnail_src || '',
     isFeatured: !!row.is_featured,
@@ -2145,6 +2116,7 @@ async function listFavoriteTierLists(userId, { queryText = '', sort = 'favorited
         t.id,
         t.author_id,
         t.topic_id,
+        tp.slug AS topic_slug,
         tp.name AS topic_name,
         t.title,
         t.thumbnail_src,
@@ -2195,6 +2167,8 @@ async function listUserTierLists(userId) {
       SELECT
         t.id,
         t.topic_id,
+        tp.slug AS topic_slug,
+        tp.name AS topic_name,
         t.title,
         t.thumbnail_src,
         t.created_at,
@@ -2205,6 +2179,7 @@ async function listUserTierLists(userId) {
         u.avatar_src
       FROM tierlists t
       INNER JOIN users u ON u.id = t.author_id
+      INNER JOIN topics tp ON tp.id = t.topic_id
       WHERE t.author_id = ?
       ORDER BY updated_at DESC
     `,
@@ -2214,6 +2189,8 @@ async function listUserTierLists(userId) {
   const tierLists = rows.map((row) => ({
     id: row.id,
     topicId: row.topic_id,
+    topicSlug: row.topic_slug || row.topic_id,
+    topicName: row.topic_name || '',
     title: row.title,
     thumbnailSrc: row.thumbnail_src || '',
     createdAt: Number(row.created_at),
@@ -2312,6 +2289,7 @@ async function listPublicTierListsByAuthor(authorId, currentUserId = '', queryTe
       SELECT
         t.id,
         t.topic_id,
+        tp.slug AS topic_slug,
         tp.name AS topic_name,
         t.title,
         t.thumbnail_src,
@@ -2338,6 +2316,7 @@ async function listPublicTierListsByAuthor(authorId, currentUserId = '', queryTe
   const tierLists = rows.map((row) => ({
     id: row.id,
     topicId: row.topic_id,
+    topicSlug: row.topic_slug || row.topic_id,
     topicName: row.topic_name || '',
     title: row.title,
     thumbnailSrc: row.thumbnail_src || '',
@@ -2373,6 +2352,7 @@ async function listFollowingTierLists(userId, queryText = '') {
       SELECT
         t.id,
         t.topic_id,
+        tp.slug AS topic_slug,
         tp.name AS topic_name,
         t.title,
         t.thumbnail_src,
@@ -2401,6 +2381,7 @@ async function listFollowingTierLists(userId, queryText = '') {
   const tierLists = rows.map((row) => ({
     id: row.id,
     topicId: row.topic_id,
+    topicSlug: row.topic_slug || row.topic_id,
     topicName: row.topic_name || '',
     title: row.title,
     thumbnailSrc: row.thumbnail_src || '',
@@ -2479,11 +2460,12 @@ async function listAdminTierLists({
     whereParts.push(`(
       t.title LIKE ?
       OR tp.name LIKE ?
+      OR tp.slug LIKE ?
       OR tp.id LIKE ?
       OR u.email LIKE ?
       OR u.nickname LIKE ?
     )`)
-    params.push(search, search, search, search, search)
+    params.push(search, search, search, search, search, search)
   }
 
   const whereClause = whereParts.length ? `WHERE ${whereParts.join(' AND ')}` : ''
@@ -2494,6 +2476,7 @@ async function listAdminTierLists({
         t.id,
         t.author_id,
         t.topic_id,
+        tp.slug AS topic_slug,
         tp.name AS topic_name,
         t.title,
         t.thumbnail_src,
@@ -2591,11 +2574,12 @@ async function summarizeAdminTierLists({ queryText = '', topicId = '', minFavori
     whereParts.push(`(
       t.title LIKE ?
       OR tp.name LIKE ?
+      OR tp.slug LIKE ?
       OR tp.id LIKE ?
       OR u.email LIKE ?
       OR u.nickname LIKE ?
     )`)
-    params.push(search, search, search, search, search)
+    params.push(search, search, search, search, search, search)
   }
 
   const whereClause = whereParts.length ? `WHERE ${whereParts.join(' AND ')}` : ''
@@ -2636,6 +2620,7 @@ async function findTierListById(id, currentUserId = '') {
         t.id,
         t.author_id,
         t.topic_id,
+        tp.slug AS topic_slug,
         tp.name AS topic_name,
         t.title,
         t.thumbnail_src,
@@ -2774,7 +2759,9 @@ async function findTemplateRequestById(id) {
         u.nickname,
         u.email,
         u.avatar_src AS requester_avatar_src,
+        sg.slug AS source_topic_slug,
         sg.name AS source_topic_name,
+        tg.slug AS target_topic_slug,
         tg.name AS target_topic_name
       FROM template_requests tr
       INNER JOIN users u ON u.id = tr.requester_id
@@ -2816,7 +2803,9 @@ async function listAdminTemplateRequests({ status = 'pending', statuses = [] } =
         u.nickname,
         u.email,
         u.avatar_src AS requester_avatar_src,
+        sg.slug AS source_topic_slug,
         sg.name AS source_topic_name,
+        tg.slug AS target_topic_slug,
         tg.name AS target_topic_name
       FROM template_requests tr
       INNER JOIN users u ON u.id = tr.requester_id
@@ -3027,15 +3016,19 @@ module.exports = {
   adminDeleteUser,
   listTopics,
   findTopicById,
+  findTopicBySlug,
+  findTopicByIdentifier,
   listTopicItems,
   findTopicItemById,
   getTopicDetail,
   createTopic,
+  updateTopicMeta,
   updateTopicThumbnail,
   updateTopicVisibility,
   findImageAssetByHash,
   findImageAssetBySrc,
   findImageAssetById,
+  updateImageAssetSrc,
   createImageAsset,
   createImageOptimizationJob,
   findImageOptimizationJobById,
@@ -3043,6 +3036,7 @@ module.exports = {
   listRecentImageOptimizationJobs,
   listUnusedImageAssets,
   deleteImageAssets,
+  listImageAssets,
   listReferencedUploadSources,
   listReferencedUploadUsage,
   replaceUploadSourceReferences,

backend/src/lib/image-storage.js

@@ -75,10 +75,13 @@ async function optimizeAndPersist({ file, width, height, fit, quality }) {
     }
   }
 
-  const filename = nanoid() + '.webp'
-  const absoluteDir = path.join(UPLOAD_ROOT, OPTIMIZED_DIR)
+  const basename = nanoid()
+  const shardDirectory = basename.slice(0, 2)
+  const filename = basename + '.webp'
+  const relativeDir = path.join(OPTIMIZED_DIR, shardDirectory)
+  const absoluteDir = path.join(UPLOAD_ROOT, relativeDir)
   const absolutePath = path.join(absoluteDir, filename)
-  const src = '/uploads/' + OPTIMIZED_DIR + '/' + filename
+  const src = '/uploads/' + relativeDir.split(path.sep).join('/') + '/' + filename
 
   await fs.mkdir(absoluteDir, { recursive: true })
   await fs.writeFile(absolutePath, data)

backend/src/routes/admin.js

@@ -10,13 +10,14 @@ const {
   findUserByEmail,
   findUserByNickname,
   findTopicById,
+  findTopicBySlug,
   findTopicItemById,
   listTopicItems,
   findImageAssetById,
   createTopic,
   listTopics,
+  updateTopicMeta,
   updateTopicThumbnail,
-  updateTopicVisibility,
   createTopicItem,
   updateTopicItemLabel,
   updateTopicItemDisplayOrder,
@@ -119,16 +120,23 @@ function canManageAdminRole(actingUser, primaryAdmin) {
 
 router.post('/templates', requireAdmin, async (req, res) => {
   const schema = z.object({
-    id: z.string().min(1),
+    slug: z.string().trim().min(1).max(120).regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/),
     name: z.string().min(1).max(60),
     isPublic: z.boolean().optional().default(false),
     thumbnailSrc: z.string().max(255).optional().default(''),
   })
   const parsed = schema.safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
-  const exists = await findTopicById(parsed.data.id)
-  if (exists) return res.status(409).json({ error: 'topic_id_taken' })
-  const template = await createTopic({ id: parsed.data.id, name: parsed.data.name, isPublic: parsed.data.isPublic })
+  const exists = await findTopicBySlug(parsed.data.slug)
+  if (exists) return res.status(409).json({ error: 'topic_slug_taken' })
+  let template
+  try {
+    template = await createTopic({ slug: parsed.data.slug, name: parsed.data.name, isPublic: parsed.data.isPublic })
+  } catch (error) {
+    if (error?.code === 'TOPIC_SLUG_INVALID') return res.status(400).json({ error: 'topic_slug_invalid' })
+    if (error?.code === 'ER_DUP_ENTRY') return res.status(409).json({ error: 'topic_slug_taken' })
+    throw error
+  }
   if (parsed.data.thumbnailSrc) {
     const copiedThumb = await copyUploadIntoTopicAsset(parsed.data.thumbnailSrc)
     await updateTopicThumbnail(template.id, copiedThumb)
@@ -139,7 +147,9 @@ router.post('/templates', requireAdmin, async (req, res) => {
 
 router.patch('/templates/:templateId', requireAdmin, async (req, res) => {
   const schema = z.object({
-    isPublic: z.boolean(),
+    slug: z.string().trim().min(1).max(120).regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/).optional(),
+    name: z.string().trim().min(1).max(60).optional(),
+    isPublic: z.boolean().optional(),
   })
   const parsed = schema.safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
@@ -148,8 +158,21 @@ router.patch('/templates/:templateId', requireAdmin, async (req, res) => {
   const template = await findTopicById(templateId)
   if (!template) return res.status(404).json({ error: 'not_found' })
 
-  const updated = await updateTopicVisibility(template.id, parsed.data.isPublic)
-  res.json({ template: updated })
+  try {
+    const updated =
+      typeof parsed.data.name === 'string' || typeof parsed.data.slug === 'string' || typeof parsed.data.isPublic === 'boolean'
+        ? await updateTopicMeta(template.id, {
+          slug: parsed.data.slug || template.slug,
+          name: parsed.data.name || template.name,
+          isPublic: typeof parsed.data.isPublic === 'boolean' ? parsed.data.isPublic : template.isPublic,
+        })
+        : await findTopicById(template.id)
+    return res.json({ template: updated })
+  } catch (error) {
+    if (error?.code === 'TOPIC_SLUG_INVALID') return res.status(400).json({ error: 'topic_slug_invalid' })
+    if (error?.code === 'ER_DUP_ENTRY') return res.status(409).json({ error: 'topic_slug_taken' })
+    throw error
+  }
 })
 
 router.patch('/templates/display-order', requireAdmin, async (req, res) => {
@@ -304,7 +327,7 @@ router.delete('/templates/:templateId', requireAdmin, async (req, res) => {
 router.patch('/custom-items/:itemId/label', requireAdmin, async (req, res) => {
   const schema = z.object({
     label: z.string().trim().min(1).max(60),
-    sourceType: z.enum(['template', 'user']).optional().default('user'),
+    sourceType: z.enum(['template', 'user', 'asset']).optional().default('user'),
   })
   const parsed = schema.safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
@@ -332,7 +355,10 @@ router.get('/custom-items', requireAdmin, async (req, res) => {
     q: z.string().trim().max(120).optional().default(''),
     page: z.coerce.number().int().min(1).optional().default(1),
     limit: z.coerce.number().int().min(1).max(200).optional().default(50),
-    filter: z.enum(['all', 'user', 'template', 'asset', 'unused-user', 'unused-admin']).optional().default('all'),
+    filter: z
+      .enum(['library', 'all', 'user', 'template', 'asset', 'thumbnail', 'avatar', 'unused-user', 'unused-admin'])
+      .optional()
+      .default('library'),
   })
   const parsed = schema.safeParse(req.query)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
@@ -629,11 +655,11 @@ function pickTemplateRequestItems(templateRequest, itemIds = [], itemLabels = {}
     })
 }
 
-async function createTemplateFromTierList({ tierList, templateId, templateName }) {
-  await createTopic({ id: templateId, name: templateName, isPublic: false })
+async function createTemplateFromTierList({ tierList, templateSlug, templateName }) {
+  const template = await createTopic({ slug: templateSlug, name: templateName, isPublic: false })
   if (tierList.thumbnailSrc) {
     const copiedThumb = await copyUploadIntoTopicAsset(tierList.thumbnailSrc)
-    await updateTopicThumbnail(templateId, copiedThumb)
+    await updateTopicThumbnail(template.id, copiedThumb)
   }
 
   const createdItems = []
@@ -642,36 +668,45 @@ async function createTemplateFromTierList({ tierList, templateId, templateName }
     createdItems.push(
       await createTopicItem({
         id: nanoid(),
-        topicId: templateId,
+        topicId: template.id,
         src: copiedSrc,
         label: item.label,
       })
     )
   }
 
-  return { template: await findTopicById(templateId), items: createdItems }
+  return { template: await findTopicById(template.id), items: createdItems }
 }
 
-async function createTemplateFromRequest({ templateRequest, templateId, templateName }) {
-  await createTopic({ id: templateId, name: templateName, isPublic: false })
+async function createTemplateFromRequest({ templateRequest, templateSlug, templateName }) {
+  const template = await createTopic({ slug: templateSlug, name: templateName, isPublic: false })
 
   if (templateRequest.thumbnailSrc) {
     const copiedThumb = await copyUploadIntoTopicAsset(templateRequest.thumbnailSrc)
-    await updateTopicThumbnail(templateId, copiedThumb)
+    await updateTopicThumbnail(template.id, copiedThumb)
   }
 
   const items = await promoteSnapshotItemsToTemplate({
     items: templateRequest.items || [],
-    templateId,
+    templateId: template.id,
   })
 
-  return { template: await findTopicById(templateId), items }
+  return { template: await findTopicById(template.id), items }
 }
 
 router.delete('/custom-items/:itemId', requireAdmin, async (req, res) => {
   const result = await listCustomItems({ page: 1, limit: 10000, filterMode: 'all' })
   const target = result.items.find((item) => item.id === req.params.itemId)
   if (!target) return res.status(404).json({ error: 'not_found' })
+  if (target.sourceType === 'asset' || String(target.id || '').startsWith('asset:')) {
+    const assetId = String(target.id).slice('asset:'.length)
+    const asset = await findImageAssetById(assetId)
+    if (!asset) return res.status(404).json({ error: 'not_found' })
+    await deleteImageAssets([assetId])
+    await removeUploadFiles([asset.src])
+    return res.json({ ok: true, sourceType: 'asset' })
+  }
+
   if (target.sourceType === 'template') {
     if (String(target.id || '').startsWith('asset:')) {
       const assetId = String(target.id).slice('asset:'.length)
@@ -749,28 +784,34 @@ router.post('/tierlists/:tierListId/promote-items', requireAdmin, async (req, re
 
 router.post('/tierlists/:tierListId/create-template', requireAdmin, async (req, res) => {
   const schema = z.object({
-    topicId: z.string().trim().min(1).max(120),
+    slug: z.string().trim().min(1).max(120).regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/),
     name: z.string().trim().min(1).max(120),
     itemIds: z.array(z.string().min(1)).optional().default([]),
   })
   const parsed = schema.safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
 
-  const exists = await findTopicById(parsed.data.topicId)
-  if (exists) return res.status(409).json({ error: 'topic_id_taken' })
+  const exists = await findTopicBySlug(parsed.data.slug)
+  if (exists) return res.status(409).json({ error: 'topic_slug_taken' })
 
   const tierList = await findTierListById(req.params.tierListId)
   if (!tierList) return res.status(404).json({ error: 'not_found' })
 
-  const result = await createTemplateFromTierList({
-    tierList: {
-      ...tierList,
-      pool: parsed.data.itemIds.length ? (tierList.pool || []).filter((item) => parsed.data.itemIds.includes(item.id)) : tierList.pool,
-    },
-    templateId: parsed.data.topicId,
-    templateName: parsed.data.name,
-  })
-  res.json(result)
+  try {
+    const result = await createTemplateFromTierList({
+      tierList: {
+        ...tierList,
+        pool: parsed.data.itemIds.length ? (tierList.pool || []).filter((item) => parsed.data.itemIds.includes(item.id)) : tierList.pool,
+      },
+      templateSlug: parsed.data.slug,
+      templateName: parsed.data.name,
+    })
+    return res.json(result)
+  } catch (error) {
+    if (error?.code === 'TOPIC_SLUG_INVALID') return res.status(400).json({ error: 'topic_slug_invalid' })
+    if (error?.code === 'ER_DUP_ENTRY') return res.status(409).json({ error: 'topic_slug_taken' })
+    throw error
+  }
 })
 
 router.patch('/tierlists/:tierListId', requireAdmin, async (req, res) => {
@@ -820,20 +861,27 @@ router.post('/template-requests/:requestId/approve', requireAdmin, async (req, r
   }
 
   const schema = z.object({
-    topicId: z.string().trim().min(1).max(120),
+    slug: z.string().trim().min(1).max(120).regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/),
     name: z.string().trim().min(1).max(120),
   })
   const parsed = schema.safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
 
-  const exists = await findTopicById(parsed.data.topicId)
-  if (exists) return res.status(409).json({ error: 'topic_id_taken' })
+  const exists = await findTopicBySlug(parsed.data.slug)
+  if (exists) return res.status(409).json({ error: 'topic_slug_taken' })
 
-  const result = await createTemplateFromRequest({
-    templateRequest,
-    templateId: parsed.data.topicId,
-    templateName: parsed.data.name,
-  })
+  let result
+  try {
+    result = await createTemplateFromRequest({
+      templateRequest,
+      templateSlug: parsed.data.slug,
+      templateName: parsed.data.name,
+    })
+  } catch (error) {
+    if (error?.code === 'TOPIC_SLUG_INVALID') return res.status(400).json({ error: 'topic_slug_invalid' })
+    if (error?.code === 'ER_DUP_ENTRY') return res.status(409).json({ error: 'topic_slug_taken' })
+    throw error
+  }
   const request = await updateTemplateRequestStatus({ id: templateRequest.id, status: 'approved' })
   res.json({ request, ...result })
 })

backend/src/routes/tierlists.js

@@ -12,6 +12,7 @@ const {
   createCustomItem,
   createTemplateRequest,
   findUserById,
+  findTopicByIdentifier,
   favoriteTierList,
   unfavoriteTierList,
   duplicateTierListForUser,
@@ -234,14 +235,15 @@ router.post('/template-request', requireAuth, async (req, res) => {
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
 
   const payload = parsed.data
-  const topicId = payload.topicId
+  const topic = await findTopicByIdentifier(payload.topicId)
+  if (!topic) return res.status(404).json({ error: 'not_found' })
   const normalizedBoardItems = payload.boardItems.map(normalizePoolItem)
   const customItems = normalizedBoardItems.filter((item) => item?.origin === 'custom')
   if (!customItems.length) return res.status(400).json({ error: 'custom_items_required' })
 
   if (payload.type === 'create') {
-    if (topicId !== FREEFORM_TOPIC_ID) return res.status(400).json({ error: 'freeform_required' })
-  } else if (topicId === FREEFORM_TOPIC_ID) {
+    if (topic.id !== FREEFORM_TOPIC_ID) return res.status(400).json({ error: 'freeform_required' })
+  } else if (topic.id === FREEFORM_TOPIC_ID) {
     return res.status(400).json({ error: 'topic_template_required' })
   }
 
@@ -260,8 +262,8 @@ router.post('/template-request', requireAuth, async (req, res) => {
       type: payload.type,
       requesterId: req.session.userId,
       sourceTierListId: sourceTierList?.id || '',
-      sourceTopicId: topicId,
-      targetTopicId: payload.type === 'update' ? topicId : '',
+      sourceTopicId: topic.id,
+      targetTopicId: payload.type === 'update' ? topic.id : '',
       title: payload.requestTitle,
       description: payload.requestDescription,
       thumbnailSrc: payload.thumbnailSrc || '',
@@ -283,7 +285,8 @@ router.post('/', requireAuth, async (req, res) => {
   const parsed = tierListUpsertSchema.safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
   const payload = parsed.data
-  const topicId = payload.topicId
+  const topic = await findTopicByIdentifier(payload.topicId)
+  if (!topic) return res.status(404).json({ error: 'not_found' })
   const normalizedPool = payload.pool.map(normalizePoolItem)
 
   let existing = null
@@ -313,7 +316,7 @@ router.post('/', requireAuth, async (req, res) => {
   const created = await saveTierList({
     id: nanoid(),
     authorId: req.session.userId,
-    topicId,
+    topicId: topic.id,
     title: payload.title,
     thumbnailSrc: payload.thumbnailSrc || '',
     description: payload.description || '',

backend/src/routes/topics.js

@@ -1,5 +1,5 @@
 const express = require('express')
-const { listTopics, getTopicDetail, findTopicById, favoriteTopic, unfavoriteTopic } = require('../db')
+const { listTopics, getTopicDetail, findTopicByIdentifier, favoriteTopic, unfavoriteTopic } = require('../db')
 const { requireAuth } = require('../middleware/auth')
 
 const router = express.Router()
@@ -10,7 +10,7 @@ router.get('/', async (req, res) => {
 })
 
 router.post('/:topicId/favorite', requireAuth, async (req, res) => {
-  const topic = await findTopicById(req.params.topicId)
+  const topic = await findTopicByIdentifier(req.params.topicId)
   if (!topic || topic.id === 'freeform') return res.status(404).json({ error: 'not_found' })
   await favoriteTopic({ userId: req.session.userId, topicId: topic.id })
   const topics = await listTopics(req.session.userId)
@@ -19,7 +19,7 @@ router.post('/:topicId/favorite', requireAuth, async (req, res) => {
 })
 
 router.delete('/:topicId/favorite', requireAuth, async (req, res) => {
-  const topic = await findTopicById(req.params.topicId)
+  const topic = await findTopicByIdentifier(req.params.topicId)
   if (!topic || topic.id === 'freeform') return res.status(404).json({ error: 'not_found' })
   await unfavoriteTopic({ userId: req.session.userId, topicId: topic.id })
   const topics = await listTopics(req.session.userId)

docs/history.md

@@ -1,5 +1,34 @@
 # 의사결정 이력
 
+## 2026-04-03 v1.4.62
+- 운영 서버를 새 DB로 다시 시작하는 절차는 “일반 업데이트 재빌드”와 “볼륨까지 삭제하는 완전 초기화”가 같은 문서 안에 섞이면 실수로 데이터를 날릴 위험이 크므로, 배포 문서에서 두 흐름을 별도 섹션으로 나누는 편이 맞다고 판단했다.
+- DB만 비우고 업로드 볼륨을 남기는 방식도 가능하지만, 현재 서비스는 DB 레코드와 업로드 파일 참조가 강하게 연결되어 있으므로 이 방법 역시 “운영 데이터를 전부 버리는 전제”라는 경고를 같이 적어두는 쪽으로 정리했다.
+
+## 2026-04-03 v1.4.61
+- 운영자가 쓰는 템플릿 주소를 `topics.id` 자체로 두면 나중에 이름/URL을 다듬고 싶을 때 참조 FK와 기존 링크까지 같이 흔들릴 수 있으므로, 내부 참조용 랜덤 `id`와 공개/관리용 `slug`를 분리하는 구조가 더 안전하다고 판단했다.
+- 운영 DB와 로컬 DB를 모두 새로 시작할 수 있는 상황이라면 예전 `id -> slug` 백필이나 레거시 호환 코드를 남기는 편이 오히려 유지보수 비용만 늘리므로, 이번 변경은 새 스키마 기준으로 깔끔하게 정리하고 기존 데이터 호환 마이그레이션은 두지 않기로 했다.
+- 빈 DB 초기화 시 예시 템플릿 2개가 자동 생성되면 운영자가 “진짜 운영 데이터인지 샘플인지”를 매번 구분해야 하므로, 시스템 필수 `freeform`만 남기고 빈 예시 템플릿 시드는 제거하는 편이 맞다고 정리했다.
+
+## 2026-04-03 v1.4.60
+- 신규 업로드만 샤딩 저장하고 기존 평면 `assets` 파일을 그대로 두면 운영자가 파일 구조를 볼 때 두 방식이 오래 섞여 보여 정리성이 떨어지므로, 기존 평면 자산도 같은 규칙으로 옮기는 일회성 마이그레이션 스크립트를 제공하는 편이 맞다고 판단했다.
+- 기존 파일을 재인코딩해서 새 자산으로 다시 만드는 방식은 해시 중복 처리와 품질/메타 차이가 다시 얽힐 수 있으므로, 이번 샤딩 정리는 실제 파일 rename과 경로 참조 치환만 수행해 이미지 내용 자체는 건드리지 않는 쪽으로 정리했다.
+
+## 2026-04-03 v1.4.59
+- 최근 최적화 이미지가 `assets` 바로 아래 평면 파일로 저장되면서 경로만으로 프로필/썸네일 역할을 구분할 수 없게 되었으므로, 관리자 아이템 분류는 폴더명 규칙 하나에만 기대지 말고 실제 DB 참조 컬럼을 역추적해 판별하는 편이 더 안전하다고 판단했다.
+- 이미지가 장기적으로 많이 쌓일 수 있는 서비스라면 한 폴더에 모든 파일을 계속 몰아넣기보다 적당한 수준의 하위 폴더 분산이 낫다고 보고, 신규 파일만 ID 앞 2글자로 1단계 샤딩 저장하되 기존 평면 경로는 그대로 유지하는 점진 방식으로 정리했다.
+
+## 2026-04-03 v1.4.58
+- 작성자 프로필 화면 상단에서 닉네임과 `@accountName`을 다시 보여주면 바로 아래 프로필 카드의 동일 정보와 역할이 겹치므로, 상단은 페이지 성격을 설명하는 공통 제목으로 두고 실제 사용자 식별 정보는 프로필 카드 한 곳에만 모으는 편이 낫다고 판단했다.
+- `@accountName`은 사용자가 직접 만든 핸들이 아니라 이메일 앞부분 기반 표시라서 계정명이 따로 존재하는 것처럼 오해를 만들 수 있으므로, 별도 사용자명 정책을 도입하기 전까지는 공개 프로필 UI에서 숨기는 쪽으로 정리했다.
+
+## 2026-04-03 v1.4.57
+- 아이템 관리 필터는 전체 데이터 탐색과 실제 반복 아이템 검수를 같은 셀렉트에서 오가야 하므로, `전체 이미지`를 맨 위에 두되 기본값은 여전히 `아이템(템플릿 + 사용자)`로 유지해 운영자가 처음부터 프로필/썸네일 자산에 묻히지 않게 하는 편이 맞다고 판단했다.
+- `미사용 사용자 업로드`라는 표현은 계정 탈퇴 잔여물처럼 오해될 수 있으므로, 실제 의미가 “사용자 아이템 레코드는 남아 있지만 현재 저장 티어표/템플릿 참조가 없는 항목”이라는 점에 맞춰 `미사용 아이템`으로 줄이고, 계정 삭제 시 외래키로 같이 삭제되는 항목은 이 범주로 남지 않는다고 정리했다.
+
+## 2026-04-03 v1.4.56
+- 아이템 관리의 원래 목적은 “반복 사용 가능한 티어표 아이템”과 “사용자가 올린 커스텀 아이템”을 운영자가 구분해 검수하는 것이었는데, 프로필 아바타나 티어표 썸네일까지 `관리자 템플릿`으로 보이면 의미가 흐려지므로 보관 이미지 자산은 별도 출처와 배지로 분리하는 편이 맞다고 판단했다.
+- 평소 운영자가 가장 먼저 봐야 하는 대상도 1회성 썸네일이 아니라 실제 아이템이므로, 아이템 관리 기본 필터는 `전체 이미지`가 아니라 `아이템만 (템플릿+사용자)`로 두고 썸네일/프로필 이미지는 필요할 때만 따로 보게 하는 쪽으로 정리했다.
+
 ## 2026-04-03 v1.4.55
 - 기존 `최근 활동`은 실제 의미가 “작성한 티어표의 마지막 수정일”에 가까웠는데, 이를 마지막 접속일처럼 읽을 수 있으면 장기 미접속 계정 정리 판단이 틀어질 수 있으므로 `최근 콘텐츠 활동`과 `마지막 접속일`을 아예 분리하는 편이 맞다고 판단했다.
 - 마지막 접속일은 로그인 성공 순간만 찍으면 장기 세션 사용자를 놓칠 수 있으므로, 세션이 살아 있는 `/api/auth/me` 확인에서도 일정 간격으로 갱신해 실제 접속 흔적에 더 가깝게 유지하는 쪽으로 정리했다.
@@ -616,6 +645,14 @@
 - 작성자가 자기 티어표를 직접 삭제할 수 있어야 관리 흐름이 완결되므로, `내 티어표` 화면에 삭제 기능을 추가하기로 결정했다.
 - 사용자 커스텀 이미지는 서버 용량을 계속 차지하므로, 참조가 하나도 남지 않은 이미지(미사용 항목)를 식별하고 관리자 화면에서 개별/일괄 정리할 수 있도록 하기로 결정했다.
 
+## 2026-04-03 v1.4.64
+- 운영/로컬 DB를 새로 미는 흐름을 공식화한 만큼, 더 이상 “기존 DB에서만 우연히 남아 있던 컬럼”에 기대지 않고 `ensureSchema()`의 신규 생성 정의만으로 관리자 화면 전체가 떠야 한다고 다시 정리했다.
+- `template_requests`는 요청 목록 카드뿐 아니라 요청 미리보기와 이미지 참조 추적에도 쓰이므로, 저장 스냅샷 컬럼(`groups_json`, `board_items_json`, `show_character_names_snapshot`)을 초기 스키마에 반드시 포함하기로 결정했다.
+
+## 2026-04-03 v1.4.63
+- 관리자/에디터 화면의 우측 패널은 Teleport로 공통 셸의 레일 DOM에 끼워 넣는 구조이므로, 라우트 변경 시 Teleport 대상 노드 자체를 조건부로 없애면 Vue 언마운트/패치 순서에 따라 DOM 기준점이 깨질 수 있다고 판단했다.
+- 따라서 `#local-right-rail-root`는 항상 렌더링해두고, 일반 화면에서는 숨김 클래스만 적용하는 방식으로 유지해 라우트 전환 안정성을 우선 확보하기로 결정했다.
+
 ## 2026-03-19 v0.1.13
 - 관리자 페이지는 기능 수가 늘어난 만큼 게임, 아이템, 회원 관리 탭으로 나누는 편이 더 안전하다고 판단했다.
 - 사용자 커스텀 아이템은 수량이 빠르게 커질 수 있으므로, 검색과 페이지네이션을 기본 제공하는 관리 화면으로 보는 방향을 채택했다.

docs/map.md

@@ -7,12 +7,12 @@
 
 ## `/topics/:topicId`
 - 화면 파일: `frontend/src/views/TopicHubView.vue`
-- 역할: 선택한 주제 정보 표시, 관리자 추천 티어표 상단 강조 섹션과 일반 공개 티어표 목록 분리 표시, 제목/작성자 검색, 티어표별 `상단 썸네일 / 제목+좋아요 / 작성자+최종 수정일` 카드 표시, 새 티어표 작성은 우측 하단 CTA로 진입
+- 역할: 선택한 주제 slug 기준 정보 표시, 관리자 추천 티어표 상단 강조 섹션과 일반 공개 티어표 목록 분리 표시, 제목/작성자 검색, 티어표별 `상단 썸네일 / 제목+좋아요 / 작성자+최종 수정일` 카드 표시, 새 티어표 작성은 우측 하단 CTA로 진입
 - 연동 API: `GET /api/topics/:topicId`, `GET /api/tierlists/public`, `POST /api/tierlists/:id/favorite`, `DELETE /api/tierlists/:id/favorite`
 
 ## `/editor/:topicId/new`, `/editor/:topicId/:tierListId`
 - 화면 파일: `frontend/src/views/TierEditorView.vue`
-- 역할: 티어 그룹 편집, 티어 행 추가/삭제, 보드 옆 아이템 풀에서 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 공통 오른쪽 레일 안에 직접 배치되는 우측 편집 섹션에서 티어표 제목/설명/대표 썸네일/공개 여부/저장 제어와 커스텀 아이템 이름 정리, 즐겨찾기 토글, PNG 다운로드, 저장된 티어표 기준 템플릿 등록/업데이트 요청, `?preview=1` 진입 시 공통 앱 셸은 유지한 채 중앙 본문에서 완성본 프리뷰 렌더링
+- 역할: 주제 slug 기반 에디터 진입, 티어 그룹 편집, 티어 행 추가/삭제, 보드 옆 아이템 풀에서 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 공통 오른쪽 레일 안에 직접 배치되는 우측 편집 섹션에서 티어표 제목/설명/대표 썸네일/공개 여부/저장 제어와 커스텀 아이템 이름 정리, 즐겨찾기 토글, PNG 다운로드, 저장된 티어표 기준 템플릿 등록/업데이트 요청, `?preview=1` 진입 시 공통 앱 셸은 유지한 채 중앙 본문에서 완성본 프리뷰 렌더링
 - 연동 API: `GET /api/topics/:topicId`, `GET /api/tierlists/:id`, `POST /api/tierlists/:id/favorite`, `DELETE /api/tierlists/:id/favorite`, `POST /api/tierlists/thumbnail`, `POST /api/tierlists/custom-items`, `POST /api/tierlists`, `POST /api/tierlists/template-request`
 
 ## `/login`
@@ -47,7 +47,7 @@
 
 ## `/admin`
 - 화면 파일: `frontend/src/views/AdminView.vue`
-- 역할: 공통 우측 패널 대신 전용 `320px` 운영 패널을 사용해 `템플릿 관리 / 아이템 관리 / 티어표 관리 / 회원 관리` 탭과 검색·필터·빠른 작업을 우측에 배치하고, 중앙에는 선택된 템플릿 상세, 커스텀 아이템 목록, 템플릿 요청/전체 티어표, 회원 카드 등 실제 관리 대상만 표시, 기본 아이템 다중 드래그 앤 드롭 업로드, 기본 아이템 이름 수정, 사용자 커스텀 아이템 검색/페이지네이션/사용 횟수 확인/미사용 이미지 개별·일괄 삭제, 사용자 커스텀 아이템의 기본 템플릿 승격, 전체 티어표 검색/페이지네이션/공개 여부 확인/받은 즐겨찾기 수 표시/인기순 정렬/최소 즐겨찾기 필터/추천 지정 토글/썸네일 클릭 기반 완성본 보기, 티어표의 추가 커스텀 아이템을 모달 기반으로 기존 템플릿 또는 새 템플릿에 가져오기, freeform 티어표의 템플릿화, 사용자 템플릿 등록/업데이트 요청 승인·반려와 일반 완성본과 같은 보드 문법의 요청 미리보기, 회원의 작성 티어표·팔로워·받은 즐겨찾기·최근 콘텐츠 활동·마지막 접속일 확인과 회원 정보·권한 수정 및 공개 프로필 보기, 파일 입력 초기화, 아이템 삭제, 템플릿 삭제
+- 역할: 공통 우측 패널 대신 전용 `320px` 운영 패널을 사용해 `템플릿 관리 / 아이템 관리 / 티어표 관리 / 회원 관리` 탭과 검색·필터·빠른 작업을 우측에 배치하고, 중앙에는 선택된 템플릿 상세, 커스텀 아이템 목록, 템플릿 요청/전체 티어표, 회원 카드 등 실제 관리 대상만 표시, 템플릿 이름/slug 수정, 기본 아이템 다중 드래그 앤 드롭 업로드, 기본 아이템 이름 수정, 사용자 커스텀 아이템 검색/페이지네이션/사용 횟수 확인/미사용 이미지 개별·일괄 삭제, 사용자 커스텀 아이템의 기본 템플릿 승격, 전체 티어표 검색/페이지네이션/공개 여부 확인/받은 즐겨찾기 수 표시/인기순 정렬/최소 즐겨찾기 필터/추천 지정 토글/썸네일 클릭 기반 완성본 보기, 티어표의 추가 커스텀 아이템을 모달 기반으로 기존 템플릿 또는 새 템플릿에 가져오기, freeform 티어표의 템플릿화, 사용자 템플릿 등록/업데이트 요청 승인·반려와 일반 완성본과 같은 보드 문법의 요청 미리보기, 회원의 작성 티어표·팔로워·받은 즐겨찾기·최근 콘텐츠 활동·마지막 접속일 확인과 회원 정보·권한 수정 및 공개 프로필 보기, 파일 입력 초기화, 아이템 삭제, 템플릿 삭제
 - 연동 API: `POST /api/admin/templates`, `POST /api/admin/templates/:templateId/thumbnail`, `POST /api/admin/templates/:templateId/images`, `PATCH /api/admin/templates/:templateId/items/:itemId`, `GET /api/admin/custom-items`, `POST /api/admin/custom-items/:itemId/promote`, `DELETE /api/admin/custom-items/:itemId`, `DELETE /api/admin/custom-items`, `GET /api/admin/tierlists`, `GET /api/admin/tierlists/stats`, `PATCH /api/admin/tierlists/:tierListId/featured`, `GET /api/admin/template-requests`, `POST /api/admin/template-requests/:requestId/approve`, `POST /api/admin/template-requests/:requestId/reject`, `POST /api/admin/template-requests/:requestId/link-template`, `POST /api/admin/tierlists/:tierListId/promote-items`, `POST /api/admin/tierlists/:tierListId/create-template`, `GET /api/admin/users`, `PATCH /api/admin/users/:userId`, `PATCH /api/admin/users/:userId/password`, `DELETE /api/admin/users/:userId`, `DELETE /api/admin/templates/:templateId/items/:itemId`, `DELETE /api/admin/templates/:templateId`
 
 ## `/profile`
@@ -57,7 +57,7 @@
 
 ## 공통 레이아웃
 - 앱 셸 파일: `frontend/src/App.vue`
-- 역할: 좌측 내비게이션, 중앙 워크스페이스, 우측 컨텍스트 패널로 구성된 공통 앱 셸 렌더링, `preview=1` 공유 프리뷰에서도 같은 좌우 레일과 중앙 헤더 유지, 로그인 상태 반영, 최근 즐겨찾기 바로가기와 전역 검색 입력, 관리자 메뉴 노출 제어, 실제 SVG 에셋과 선형 SVG 아이콘이 혼합된 레일 UI, 전역 우측 상단 토스트 렌더링
+- 역할: 좌측 내비게이션, 중앙 워크스페이스, 우측 컨텍스트 패널로 구성된 공통 앱 셸 렌더링, `preview=1` 공유 프리뷰에서도 같은 좌우 레일과 중앙 헤더 유지, 로그인 상태 반영, 최근 즐겨찾기 바로가기와 전역 검색 입력, 관리자 메뉴 노출 제어, 실제 SVG 에셋과 선형 SVG 아이콘이 혼합된 레일 UI, 전역 우측 상단 토스트 렌더링, 관리자/에디터 화면이 Teleport로 사용하는 `#local-right-rail-root` 대상 DOM을 상시 유지해 라우트 전환 중 우측 레일 언마운트 순서를 안정화
 - 세부: 좌측 패널은 `248px` 기준 폭을 사용하되 축소 시 아이콘 중심의 좁은 레일로 전환하고, 우측 패널은 `320px` 기준 폭을 사용한다. 세 컬럼 모두 상단에 높이 `56px`의 헤더 블록을 유지한다. 중앙 헤더에는 고정 브랜드 `Tier Maker`와 서비스 설명이 표시되고, 우측 패널 토글은 닫혀 있을 때 중앙 헤더, 열려 있을 때 우측 헤더에 아이콘만 표시된다. 좌우 레일의 주요 액션은 각각 하단 `56px` 푸터 안에서 항상 보이도록 유지하면서 아래쪽 패딩으로 여백을 확보한다.
 
 ## 백엔드 진입점

docs/spec.md

@@ -24,6 +24,8 @@
   - 아바타: `backend/uploads/avatars/`
   - 커스텀 아이템: `backend/uploads/custom/`
   - 시드 이미지: `backend/uploads/seeds/`
+  - 최적화 이미지 자산: 신규 업로드는 `backend/uploads/assets/<앞2글자>/<파일명>.webp` 형태로 1단계 샤딩 저장하고, 기존 `backend/uploads/assets/<파일명>.webp` 평면 경로도 계속 읽는다.
+  - 기존 평면 자산을 샤딩 구조로 정리할 때는 `npm --prefix backend run images:shard-assets`를 실행하며, 스크립트가 파일 이동과 DB/JSON 참조 치환을 함께 처리한다.
 
 ## 화면 구조
 - 좌측 패널
@@ -84,17 +86,23 @@
   - `expiresAt`: number
   - `consumedAt`: number
   - `createdAt`: number
-- `games`
+- `topics`
   - `id`: string
+    - 서버가 자동 생성하는 내부 참조용 랜덤 ID이며, 공개 URL 노출값으로 직접 사용하지 않는다.
+  - `slug`: string
+    - 운영자가 지정/수정하는 공개 주소용 식별자이며, 영문 소문자/숫자/하이픈 조합만 허용한다.
   - `name`: string
   - `thumbnailSrc`: string
+  - `isPublic`: boolean
+  - `displayRank`: number | null
   - `createdAt`: number
-  - 시스템 전용 `freeform` 레코드는 홈 화면의 `직접 티어표 만들기` 저장 대상이며 일반 게임 목록에서는 숨긴다.
-- `gameItems`
+  - 시스템 전용 `freeform` 레코드는 홈 화면의 `직접 티어표 만들기` 저장 대상이며 일반 주제 목록에서는 숨긴다. 신규 빈 DB 초기화 시 자동 생성되는 템플릿은 이 `freeform` 한 건만 유지한다.
+- `topicItems`
   - `id`: string
-  - `gameId`: string
+  - `topicId`: string
   - `src`: string
   - `label`: string
+  - `displayOrder`: number | null
   - `createdAt`: number
 - `customItems`
   - `id`: string
@@ -105,7 +113,8 @@
 - `tierLists`
   - `id`: string
   - `authorId`: string
-  - `gameId`: string
+  - `topicId`: string
+    - DB에는 내부 `topics.id`를 저장하고, API 응답에는 공개 경로용 `topicSlug`도 함께 내려준다.
   - `title`: string
   - `thumbnailSrc`: string
     - 사용자가 직접 지정하지 않으면 저장 시 티어표 대표 아이템 이미지로 자동 채운다.
@@ -126,10 +135,27 @@
   - `followerId`: string
   - `followingId`: string
   - `createdAt`: number
-- `gameSuggestions`
-  - `id`: string
-  - `name`: string
+- `favoriteTopics`
+  - `userId`: string
+  - `topicId`: string
   - `createdAt`: number
+- `templateRequests`
+  - `id`: string
+  - `type`: string
+  - `requesterId`: string
+  - `sourceTierListId`: string | null
+  - `sourceTopicId`: string
+  - `targetTopicId`: string
+  - `status`: string
+  - `sourceTierListTitle`: string
+  - `sourceDescription`: string
+  - `thumbnailSrc`: string
+  - `items`: `{ id, src, label, origin }[]`
+  - `snapshotGroups`: `{ id, name, itemIds[] }[]`
+  - `snapshotItems`: `{ id, src, label, origin }[]`
+  - `snapshotShowCharacterNames`: boolean
+  - `createdAt`: number
+  - `updatedAt`: number
 
 ## 주요 API
 - 인증
@@ -157,10 +183,11 @@
 - 주제
   - `GET /api/topics`
   - `GET /api/topics/:topicId`
+    - `:topicId`는 공개 URL에서는 보통 `slug`를 받지만, 내부 ID를 넘겨도 같은 템플릿을 찾을 수 있게 서버가 레코드를 해석한다.
 - 티어표
   - `GET /api/tierlists/public`
     - `featuredTierLists`와 일반 공개 `tierLists`를 분리해서 반환한다.
-    - `topicId` 없이 `q`만 전달하면 전체 공개 티어표 검색에 사용한다.
+    - `topicId`에는 주제 `slug`를 우선 전달하며, `topicId` 없이 `q`만 전달하면 전체 공개 티어표 검색에 사용한다.
   - `GET /api/tierlists/me`
   - `GET /api/tierlists/favorites/me`
   - `GET /api/tierlists/:id`
@@ -182,6 +209,9 @@
   - `DELETE /api/users/:userId/follow`
 - 관리자
   - `POST /api/admin/templates`
+    - 요청 본문은 `slug`, `name`, `isPublic`, `thumbnailSrc`를 사용하고, 내부 `topics.id`는 서버가 자동 생성한다.
+  - `PATCH /api/admin/templates/:templateId`
+    - 내부 ID로 템플릿을 찾아 `name`, `slug`, `isPublic`을 수정한다.
   - `POST /api/admin/templates/:templateId/thumbnail`
   - `POST /api/admin/templates/:templateId/images`
     - 여러 이미지를 한 번에 최대 `100개`까지 업로드할 수 있고, 별도 라벨이 없으면 파일명 기준으로 기본 아이템 이름을 만든다.
@@ -198,6 +228,8 @@
   - `POST /api/admin/tierlists/:tierListId/promote-items`
   - `POST /api/admin/tierlists/:tierListId/create-template`
   - `GET /api/admin/custom-items`
+    - `filter=library`를 기본값으로 사용해 반복 사용 가능한 `템플릿 아이템 + 사용자 아이템`만 먼저 보여주고, `filter=thumbnail` / `filter=avatar`로는 현재 참조 역할이 썸네일/프로필인 이미지를 따로 조회한다.
+    - `filter=all|library|template|user|thumbnail|avatar|unused-user`를 사용하며, `filter=asset|unused-admin`은 과거 UI 호환용으로만 유지한다.
   - `POST /api/admin/custom-items/:itemId/promote`
   - `DELETE /api/admin/custom-items/:itemId`
   - `DELETE /api/admin/custom-items`
@@ -217,15 +249,17 @@
 - 아이템 미리보기는 반응형 환경에서도 최대 `192px` 크기 안에서 표시한다.
 - 게임 전환 또는 업로드 성공 뒤에는 파일 입력값을 초기화해 같은 파일도 다시 선택할 수 있다.
 - 게임 관리 탭에서는 홈 화면 상단에 먼저 노출할 게임을 최대 50개까지 지정하고, 드래그 또는 위/아래 버튼으로 순서를 저장할 수 있다.
-- 사용자 업로드 커스텀 아이템은 관리자 화면의 아이템 관리 탭에서 검색, 페이지네이션, 다운로드할 수 있다.
+- 사용자 아이템은 관리자 화면의 아이템 관리 탭에서 검색, 페이지네이션, 다운로드할 수 있다.
 - 사용자 커스텀 아이템은 선택한 게임의 기본 템플릿으로 복제해 가져올 수 있다.
-- 커스텀 아이템은 사용 횟수(`usageCount`)를 표시하며, 미사용 항목만 필터링해 개별/일괄 삭제할 수 있다.
+- 사용자 아이템은 사용 횟수(`usageCount`)를 표시하며, `미사용 아이템` 필터에서 저장 티어표/템플릿 참조가 더 이상 없는 항목만 개별/일괄 삭제할 수 있다. 사용자가 계정 탈퇴 등으로 삭제된 경우는 `custom_items.owner_id` 외래키로 레코드가 같이 사라지므로 보통 `미사용 아이템`으로 남지 않는다.
+- 아이템 관리 기본 필터는 `아이템(템플릿 + 사용자)`이며, 우측 필터 순서는 `전체 이미지 → 아이템(템플릿 + 사용자) → 템플릿 아이템 → 사용자 아이템 → 썸네일 이미지 → 프로필 이미지 → 미사용 아이템`을 사용한다.
+- `/uploads/assets/avatars/`는 `프로필 아바타`, `/uploads/assets/tierlists/`와 `/uploads/assets/topics/`는 `썸네일 이미지`, 그 외 보관 이미지는 `보관 자산` 배지로 표시한다. 최근처럼 `/uploads/assets/<파일명>.webp` 또는 `/uploads/assets/<앞2글자>/<파일명>.webp` 경로만 보고 종류를 알 수 없는 자산은 DB 참조(`avatar_src`, `thumbnail_src`, `thumbnail_src_snapshot`)를 역추적해 프로필/썸네일 여부를 분류한다. 실제 템플릿 기본 항목은 `템플릿 아이템`, 사용자 커스텀 항목은 `사용자 아이템` 배지를 사용한다.
 - 관리자 화면에는 별도 `티어표 관리` 탭이 있으며, 내부에서 `템플릿 요청 관리 / 전체 티어표 관리`를 분리해 볼 수 있고, 확인용 완성본은 탐색 UI 없는 preview 전용 모달로 연다.
 - `전체 티어표 관리`에서는 공개 티어표를 `추천 지정 / 추천 해제`할 수 있고, 추천 지정된 티어표는 주제별 공개 목록 상단의 `추천 티어표` 섹션에 먼저 노출된다. 비공개 티어표는 추천 지정할 수 없고, 추천글을 비공개로 바꾸면 추천 상태도 함께 해제된다.
 - `전체 티어표 관리` 카드에는 받은 즐겨찾기 수를 함께 보여주며, 우측 운영 패널에서 즐겨찾기 많은 순 정렬과 최소 즐겨찾기 수 필터로 추천 후보를 좁힐 수 있다.
 - `티어표 관리` 탭의 추가 아이템은 작은 그리드 카드로 표시하고, 클릭 시 `기존 템플릿에 추가 / 새 템플릿 만들기` 모달을 통해 목적지를 선택한다.
 - `티어표 관리` 탭에서는 티어표 안의 커스텀 아이템을 개별 또는 일괄로 기존 게임 템플릿에 복제할 수 있다.
-- `freeform` 티어표는 관리자 화면에서 새 게임 ID/이름을 입력해 새로운 게임 템플릿으로 복제 생성할 수 있다.
+- `freeform` 티어표는 관리자 화면에서 새 템플릿 slug/이름을 입력해 새로운 템플릿으로 복제 생성할 수 있다. 내부 ID는 서버가 자동 생성하므로 운영자가 직접 입력하지 않는다.
 - 관리자 티어표 관리 상단에는 사용자가 보낸 템플릿 등록/업데이트 요청 목록이 별도로 표시되며, 여기서 승인/반려를 바로 처리할 수 있다.
 - 관리자 템플릿 요청 목록에서 `반려 후 숨김`을 누르면 해당 요청은 pending 목록에서 즉시 제외된다.
 - 관리자 화면에서는 회원 이메일/닉네임/권한 수정, 비밀번호 초기화, 계정 삭제가 가능하다.
@@ -245,6 +279,7 @@
 - 로그인한 사용자는 뷰어 모드 우측 레일에서 저장된 티어표를 복사할 수 있고, 타인 티어표면 `내 티어표로 복사`, 본인 티어표면 `복사본 만들기` 문구를 사용한다. 작성자 본인은 `수정 모드로 전환`도 사용할 수 있다.
 - 작성자 본인이 일반 편집 화면에서 저장된 본인 티어표를 보고 있을 때는 우측 패널의 `뷰어 모드로 보기`로 공유 화면 형태를 바로 확인할 수 있다.
 - 편집/뷰어 우측 패널의 `작성자 프로필 보기`로 해당 작성자의 공개 프로필과 공개 티어표 목록을 열 수 있고, 로그인 상태에서는 작성자 프로필에서 팔로우/언팔로우를 전환할 수 있다.
+- `/users/:userId` 공개 프로필 화면 상단 헤더는 고정 제목 `사용자 프로필`과 안내 문구를 보여주고, 실제 닉네임/아바타는 본문 프로필 카드에서만 표시한다. 이메일 앞부분에서 파생된 `@accountName`은 사용자가 직접 설정한 핸들이 아니므로 프로필 UI에 노출하지 않는다.
 - 같은 `TierEditorView` 안에서 `topicId / tierListId / preview` 라우트 값만 바뀌어도 화면이 이전 티어표 데이터에 남지 않도록, 라우트 변경마다 에디터 상태를 다시 로드한다.
 - 복사한 티어표 상단의 `원본` 링크를 누르면 원본 티어표로 이동하며, 편집 모드에서 저장하지 않은 변경이 있으면 이동 전에 `저장 없이 이동` 확인 모달을 먼저 띄운다.
 - 본인 티어표도 저장된 상태라면 편집/뷰어 우측 패널에서 복사본을 만들 수 있고, 편집 중 저장하지 않은 수정이 남아 있으면 복사 직전에 현재 수정본을 먼저 저장해 최신 상태 기준 복사본을 만든다.

docs/todo.md

@@ -1,6 +1,22 @@
 # 할 일 및 이슈
 
 ## 단기 확인
+- `v1.4.62`에서 NAS 배포 문서에 운영 DB 완전 초기화 절차를 추가했으므로, 실제 NAS에서 `git pull → docker compose ... down -v → up -d --build` 순서로 재배포했을 때 빈 DB가 현재 스키마로 다시 올라오고 `freeform`만 생성되는지 확인한다.
+- `docker volume rm tier-maker_tmaker_mariadb_data` 방식은 프로젝트 디렉터리명에 따라 실제 볼륨 이름이 달라질 수 있으므로, 운영 NAS에서는 먼저 `docker volume ls | grep tmaker`로 이름을 확인한 뒤 문서 명령이 그대로 맞는지 점검한다.
+- `v1.4.61`에서 템플릿 공개 주소를 `slug`로 분리했으므로, 홈 카드/주제 상세/나의 티어표/즐겨찾기/검색 결과/팔로우 피드/사용자 프로필에서 열리는 URL이 `/topics/:slug`, `/editor/:slug/...` 형태로 바뀌고, 실제 화면 내용도 같은 주제 템플릿으로 정확히 열리는지 QA한다.
+- 관리자 템플릿 생성/설정은 이제 내부 ID가 아니라 `slug + 이름`만 입력하므로, 새 템플릿 생성, 기존 템플릿 이름/slug 저장, 중복 slug 입력, 대문자/특수문자 slug 입력, 공개/비공개 토글, 썸네일/기본 아이템 관리가 모두 같은 템플릿에 정상 반영되는지 확인한다.
+- 신규 빈 DB 초기화 시 `topics`에 `freeform` 한 건만 생성되고 `example-topic`, `another-topic` 같은 예시 템플릿이 더 이상 자동으로 생기지 않는지 운영/로컬 재배포 후 확인한다.
+- `v1.4.60`에서 추가한 `npm --prefix backend run images:shard-assets`를 로컬/운영에 적용할 때는 먼저 백업을 확보한 뒤 실행하고, 평면 `/uploads/assets/<파일명>.webp` 파일이 샤딩 폴더로 이동하면서 `image_assets.src`와 각 참조 컬럼/JSON이 모두 새 경로로 바뀌었는지 확인한다.
+- `v1.4.59`에서 `thumbnail/avatar` 필터를 실제 DB 참조 역할 기준으로 다시 판별하도록 바꿨으므로, 최근 업로드처럼 `/uploads/assets/<파일명>.webp` 또는 `/uploads/assets/<앞2글자>/<파일명>.webp` 경로여도 썸네일 이미지/프로필 이미지 필터에서 빠지지 않는지 확인한다.
+- 신규 업로드 이미지는 `/uploads/assets/<앞2글자>/<파일명>.webp`로 저장되므로, 템플릿 썸네일/티어표 썸네일/프로필 아바타/아이템 업로드를 각각 새로 올린 뒤 실제 파일이 샤딩 폴더에 생성되고, 브라우저 표시·삭제·중복 재사용이 모두 기존처럼 동작하는지 QA한다.
+- 기존 `/uploads/assets/<파일명>.webp` 평면 경로는 그대로 유지되므로, 예전에 만든 티어표 썸네일과 아이템 이미지가 새 저장 구조 변경 후에도 깨지지 않는지 확인한다.
+- `v1.4.58`에서 작성자 프로필 상단 헤더를 `사용자 프로필` 공통 제목으로 바꾸고 `@accountName` 노출을 뺐으므로, `/users/:userId`에서 상단 문구와 본문 프로필 카드가 중복되지 않고 닉네임/아바타/팔로우 버튼만 자연스럽게 읽히는지 확인한다.
+- `v1.4.57`에서 관리자 아이템 필터 순서를 `전체 이미지 → 아이템(템플릿 + 사용자) → 템플릿 아이템 → 사용자 아이템 → 썸네일 이미지 → 프로필 이미지 → 미사용 아이템`으로 바꿨으므로, 우측 셀렉트 순서와 실제 필터링 결과가 같은 의미로 동작하는지 QA한다.
+- `썸네일 이미지` 필터에서는 `/uploads/assets/tierlists`, `/uploads/assets/topics`만 모이고, `프로필 이미지` 필터에서는 `/uploads/assets/avatars`만 모이며, 각 카드 배지가 `썸네일 이미지 / 프로필 아바타`로 구분되는지 확인한다.
+- `미사용 아이템` 필터는 사용자 아이템 중 저장 티어표 사용 횟수와 템플릿 연결이 모두 0인 항목만 보여주고, 계정 탈퇴로 이미 `custom_items` 레코드가 삭제된 항목이 따로 남지 않는지 확인한다.
+- `v1.4.56`에서 아이템 관리 기본 필터를 `아이템만 (템플릿+사용자)`로 바꿨으므로, 관리자 화면 첫 진입 시 프로필 아바타/티어표 썸네일 같은 1회성 자산이 기본 목록에서 빠지고 실제 템플릿/사용자 아이템만 보이는지 확인한다.
+- 보관 이미지 자산도 이름 변경, 템플릿에 추가, 개별 삭제가 기존처럼 동작하는지 확인한다.
+- 아이템 관리 상단 통계의 `미사용 아이템` 수치는 프로필/썸네일 자산을 포함하지 않고, 실제 사용자 아이템 중 사용 횟수와 템플릿 연결이 모두 0인 항목만 세는지 확인한다.
 - `v1.4.55`에서 회원 카드의 `최근 활동`을 `최근 콘텐츠 활동`으로 바꾸고 `마지막 접속일`을 따로 추가했으므로, 티어표를 수정하지 않고 로그인만 한 계정은 마지막 접속일만 갱신되고 최근 콘텐츠 활동은 유지되는지, 반대로 로그인 없이 과거 티어표만 있던 계정은 두 값이 다르게 보이는지 QA한다.
 - `/api/auth/me`에서도 `last_login_at`을 10분 단위 이상 간격으로만 갱신하도록 넣었으므로, 새로고침을 반복해도 과도한 DB 쓰기가 생기지 않으면서 실제 재접속 후에는 마지막 접속일이 자연스럽게 갱신되는지 확인한다.
 - 관리자 회원 목록의 `마지막 접속순` 정렬과 회원 카드의 `프로필 보기` 버튼이 정상 동작하고, 버튼 클릭 시 해당 회원의 `/users/:userId` 공개 프로필 화면으로 이동하는지 확인한다.
@@ -100,6 +116,9 @@
 - 검색 결과 화면도 `pageHead` 구조로 맞췄으므로, 주요 목록 화면들 간 상단 여백과 타이포 리듬이 자연스러운지 한 번 더 비교 QA한다.
 - 주제 상세 컬렉션 화면은 `pageHead` 공통 레이아웃과 `/topics` 기본 경로로 옮겼으므로, 직접 진입·뒤로가기·검색 후 재진입 시 주소와 헤더 흐름이 자연스러운지 한 번 더 QA한다.
 - `/topics/:gameId`를 기본 경로로 세우고 `/games/:gameId`는 alias로 남겼으므로, 다음 단계에서는 에디터/검색/공유 흐름에서 어떤 링크를 새 경로로 더 전환할지 범위를 정한다.
+- 신규 DB 기준 `template_requests` 스키마 누락은 보정했으므로, 운영 NAS에서 `down -v` 후 재배포했을 때 관리자 `/admin/featured`, `/admin/tierlists`, `/admin/users` 진입과 템플릿 요청/이미지 통계 API가 모두 500 없이 동작하는지 한 번 더 QA한다.
+- 운영 환경에서 `/favicon.svg`, `/favicon-32x32.png`가 `403 Forbidden`으로 떨어지는 현상이 남아 있으므로, 배포 컨테이너 안의 `/usr/share/nginx/html` 실제 파일/권한, 프런트 빌드 산출물 복사 상태, NAS 또는 Cloudflare 앞단 보안 규칙을 순서대로 확인한다.
+- 우측 레일 Teleport 대상 DOM을 상시 유지하는 방식으로 바꿨으므로, 관리자 `/admin/...` → 설정 `/profile` → 홈 `/`처럼 전용 우측 레일과 일반 우측 레일을 오가는 라우트 전환에서 콘솔 오류가 더 이상 재현되지 않는지 운영 브라우저로 한 번 더 QA한다.
 - 내부 리네이밍 2단계로 관리자 `selectedTemplate / templates / loadTemplate / refreshTemplates` 묶음까지 정리했으므로, 다음 단계에서는 `/games/:gameId` 라우트와 프런트 API 호출부를 어디까지 `topic/template` 의미로 감쌀지 범위를 먼저 정리한다.
 - 화면/문서 층의 용어 정리는 거의 마무리됐으므로, 다음 단계에서는 내부 `gameId / games` 모델을 실제로 옮길지, 아니면 라우트 alias/리다이렉트부터 둘지 점진 전환 순서를 정한다.
 - 관리자 화면까지 포함한 사용자 노출 `게임` 문구를 3차까지 정리했으므로, 실제 운영 흐름에서 뜨는 확인창/토스트/선택 모달까지 표현이 자연스러운지 한 번 더 QA한다.

docs/ugreen-nas-deploy.md

@@ -93,7 +93,41 @@ docker compose --env-file .env.production -f docker-compose.prod.yml up -d --bui
 - Dockerfile, Nginx 설정, 프런트 소스, 백엔드 소스가 바뀐 경우에는 `--build`를 유지한다.
 - 단순 재시작만 필요할 때도 있지만, 운영에서는 실수 방지를 위해 `up -d --build`를 기본값으로 두는 편이 안전하다.
 
-## 3-2. 이번 v0.1.34까지 적용하는 예시
+## 3-2. 운영 DB/업로드/세션까지 완전 초기화하고 새로 빌드하기
+- 운영 데이터를 전부 버리고 새 DB로 다시 시작할 때만 사용한다.
+- 아래 명령은 MariaDB 데이터, 업로드 이미지, 세션 파일 볼륨까지 같이 삭제하므로 실행 전에 정말 초기화해도 되는지 반드시 확인한다.
+- `.env.production`은 프로젝트 폴더에 그대로 남고, Docker volume 데이터만 제거된다.
+
+```bash
+cd /volume1/docker/projects/apps/tier-maker
+git pull origin main
+docker compose --env-file .env.production -f docker-compose.prod.yml down -v
+docker compose --env-file .env.production -f docker-compose.prod.yml up -d --build
+```
+
+- 이렇게 올리면 백엔드가 빈 MariaDB에 현재 스키마를 새로 만들고, 초기 템플릿은 시스템용 `freeform` 한 건만 생성한다.
+- `down -v` 후 첫 기동은 MariaDB 초기화 때문에 조금 더 오래 걸릴 수 있으니, 아래 명령으로 상태를 확인한다.
+
+```bash
+docker compose --env-file .env.production -f docker-compose.prod.yml ps
+docker compose --env-file .env.production -f docker-compose.prod.yml logs -f mariadb
+docker compose --env-file .env.production -f docker-compose.prod.yml logs -f backend
+```
+
+## 3-3. DB만 비우고 업로드/세션 볼륨은 유지하기
+- 이미지 파일과 세션 볼륨은 유지하고 MariaDB 데이터만 새로 시작하고 싶다면 `tmaker_mariadb_data` 볼륨만 지운다.
+- 이 경우에도 기존 티어표/유저 DB 레코드와 업로드 파일 참조가 끊길 수 있으므로, 현재 운영 데이터를 전부 버리는 전제에서만 사용한다.
+
+```bash
+cd /volume1/docker/projects/apps/tier-maker
+docker compose --env-file .env.production -f docker-compose.prod.yml down
+docker volume rm tier-maker_tmaker_mariadb_data
+docker compose --env-file .env.production -f docker-compose.prod.yml up -d --build
+```
+
+- 만약 볼륨 이름이 다르게 잡혀 있는지 확인하고 싶다면 먼저 `docker volume ls | grep tmaker`로 실제 이름을 확인한 뒤 지운다.
+
+## 3-4. 이번 최신 main까지 적용하는 예시
 - 이미 NAS 폴더가 Git clone 상태라면:
 
 ```bash
@@ -153,6 +187,8 @@ docker compose --env-file .env.production -f docker-compose.prod.yml down -v
 docker compose --env-file .env.production -f docker-compose.prod.yml up -d --build
 ```
 
+- 이 명령도 `down -v` 때문에 DB/업로드/세션 볼륨을 모두 삭제한다. 데이터를 유지해야 하는 상황이면 `-v`를 빼고 다시 올린다.
+
 ## 9. 참고
 - 현재 업로드 이미지는 서버 저장 전에 리사이즈/압축하지 않는다.
 - 운영 중 원본 이미지가 많이 쌓이면 이후 `sharp` 기반 최적화 단계를 추가하는 것이 좋다.

docs/update.md

@@ -1,5 +1,44 @@
 # 업데이트 로그
 
+## 2026-04-03 v1.4.62
+- UGREEN NAS 운영 배포 문서에 `git pull origin main` 후 일반 재빌드하는 절차와, 운영 데이터를 전부 버리고 `docker compose ... down -v`로 MariaDB/업로드/세션 볼륨까지 초기화한 뒤 새로 `up -d --build` 하는 절차를 분리해서 추가했다.
+- DB만 비우고 싶을 때 `tmaker_mariadb_data` 볼륨만 삭제하는 방법과, 실제 볼륨 이름이 다를 수 있으니 `docker volume ls | grep tmaker`로 먼저 확인하는 안내도 함께 적었다.
+- 새로 초기화한 운영 DB로 올리면 현재 스키마가 다시 생성되고 시스템 템플릿은 `freeform` 한 건만 들어간다는 점을 배포 문서에 명시했다.
+
+## 2026-04-03 v1.4.61
+- 템플릿 공개 URL과 내부 참조를 분리해, `topics.id`는 서버가 자동 생성하는 랜덤 내부 ID로 두고 운영자가 직접 관리하는 공개 주소는 `topics.slug`로 저장하도록 바꿨다.
+- 공개 주제/에디터 경로는 `slug`를 우선 사용하고, 백엔드는 `/api/topics/:topicId`, `/api/tierlists/public?topicId=...`, 티어표 저장/템플릿 요청의 `topicId` 입력을 `slug` 또는 내부 ID에서 실제 템플릿 레코드로 해석한 뒤 내부 `topic_id`를 저장하도록 정리했다.
+- 관리자 템플릿 생성 모달과 템플릿 설정 카드에서 내부 ID 대신 `템플릿 이름 + slug`를 입력/수정할 수 있게 바꾸고, `slug` 중복/형식 오류는 `이미 사용 중인 템플릿 slug입니다.`, `slug는 영문 소문자, 숫자, 하이픈만 사용할 수 있어요.`처럼 원인 문구를 분리했다.
+- 새 DB를 처음 만들 때는 시스템 전용 `freeform` 템플릿만 생성하고, 예전에 기본 시드로 넣던 빈 예시 템플릿 `example-topic`, `another-topic`과 샘플 아이템은 더 이상 자동 생성하지 않도록 제거했다.
+- 로컬 MariaDB를 한 번 비운 뒤 새 스키마로 `ensureData()`를 실행해, 초기 `topics`가 `[{ id: "freeform", slug: "freeform", name: "직접 티어표 만들기" }]` 한 건만 생성되는 상태까지 확인했다.
+
+## 2026-04-03 v1.4.60
+- 샤딩 구조가 생기기 전에 이미 `/uploads/assets/<파일명>.webp`로 평면 저장된 기존 최적화 이미지도 `/uploads/assets/<앞2글자>/<파일명>.webp`로 옮길 수 있도록 일회성 마이그레이션 스크립트 `backend/scripts/migrate-flat-assets-to-sharded.js`를 추가했다.
+- 이 스크립트는 `backend/uploads/assets` 루트에 남아 있는 실제 평면 파일을 기준으로 샤딩 폴더로 이동하고, `image_assets.src`와 사용자 아바타/주제 썸네일/템플릿 아이템/사용자 아이템/티어표 JSON/템플릿 요청 JSON 참조도 같은 새 경로로 일괄 치환한다.
+- 로컬 실행용 `npm --prefix backend run images:shard-assets` 스크립트를 추가해, 기존 100여 개 수준의 평면 자산도 별도 수작업 없이 한 번에 정리할 수 있게 했다.
+
+## 2026-04-03 v1.4.59
+- 최근 업로드된 최적화 이미지가 `/uploads/assets/<파일명>.webp`처럼 하위 폴더 없이 저장되면서, `썸네일 이미지 / 프로필 이미지` 필터가 경로 문자열만으로 자산 종류를 판별하지 못해 비어 보일 수 있던 문제를 고쳤다.
+- 관리자 아이템 목록 생성 시 `users.avatar_src`, `topics.thumbnail_src`, `tierlists.thumbnail_src`, `template_requests.thumbnail_src_snapshot`을 역으로 모아 해당 `src`가 프로필 이미지인지 썸네일 이미지인지 먼저 판별하고, `thumbnail/avatar` 필터는 `sourceType`이 아니라 이 실제 참조 역할(`assetKind`) 기준으로 걸리도록 보정했다.
+- 신규 최적화 이미지 저장은 한 폴더에 무한정 쌓이지 않도록 파일 ID 앞 2글자 기준으로 `/uploads/assets/ab/<파일명>.webp`처럼 1단계 샤딩 디렉터리를 사용하게 바꿨다. 기존에 이미 저장된 `/uploads/assets/<파일명>.webp` 평면 경로는 그대로 유지해 과거 이미지 링크가 깨지지 않게 했다.
+
+## 2026-04-03 v1.4.58
+- 작성자 프로필 화면 상단 헤더가 `Author + 닉네임 + @accountName`을 다시 보여주면서, 바로 아래 프로필 카드의 아바타/닉네임 정보와 거의 같은 내용이 반복되던 구성을 정리했다.
+- 상단 헤더는 공통 제목 `사용자 프로필`과 안내 문구로 바꾸고, 실제 닉네임은 아래 프로필 카드에서만 보여주도록 나눠 화면의 정보 역할이 겹치지 않게 했다.
+- 이메일 앞부분에서 파생된 `@accountName`은 사용자가 직접 설정한 핸들이 아니라서 오히려 “내가 입력한 적 없는 계정명”처럼 느껴질 수 있으므로, 프로필 화면의 시각 노출에서는 제거했다.
+
+## 2026-04-03 v1.4.57
+- 관리자 아이템 관리 필터를 `전체 이미지 → 아이템(템플릿 + 사용자) → 템플릿 아이템 → 사용자 아이템 → 썸네일 이미지 → 프로필 이미지 → 미사용 아이템` 순서로 다시 정리해, 전체 조회와 실제 아이템 검수 흐름이 더 직관적으로 이어지게 맞췄다.
+- 기본 필터는 계속 `아이템(템플릿 + 사용자)`를 유지하되, 썸네일과 프로필 이미지는 각각 `filter=thumbnail`, `filter=avatar`로 분리 조회할 수 있게 백엔드 필터 enum과 자산 분류 값을 확장했다.
+- 보관 자산 배지 문구도 `/uploads/assets/topics/` 경로는 `썸네일 이미지`, 사용자 업로드 항목은 `사용자 아이템`, 템플릿 기본 항목은 `템플릿 아이템`으로 맞춰 `관리자 템플릿`처럼 실제 의미와 어긋나는 표현이 남지 않도록 정리했다.
+- `미사용 아이템`은 계정 탈퇴로 같이 삭제된 항목이 아니라, 사용자 아이템 레코드는 남아 있지만 저장 티어표/템플릿에서 더 이상 참조하지 않는 항목이라는 의미가 드러나도록 통계 라벨과 일괄 삭제 버튼 문구를 다시 정돈했다.
+
+## 2026-04-03 v1.4.56
+- 관리자 아이템 관리에서 `/uploads/assets/...` 아래의 보관 이미지가 템플릿 기본 아이템이 아닌데도 모두 `관리자 템플릿` 배지로 표시되던 분류를 정리했다.
+- 보관 이미지 자산은 이제 `asset` 출처로 분리하고, 경로에 따라 `프로필 아바타`, `티어표 썸네일`, `템플릿 썸네일`, `보관 자산` 배지가 붙도록 바꿔 반복 사용 아이템과 1회성/관리용 이미지를 구분해서 볼 수 있게 했다.
+- 아이템 관리 필터 기본값을 `아이템만 (템플릿+사용자)`로 바꾸고, `썸네일·프로필 이미지`, `미사용 썸네일·프로필 이미지` 필터를 따로 제공해 기본 화면에서는 실제 아이템만 먼저 검수할 수 있게 했다.
+- 아이템 관리 상단의 `미사용` 통계가 프로필/썸네일 같은 자산까지 `usageCount=0`으로 같이 세면 잘못된 숫자처럼 보일 수 있으므로, `미사용 사용자 아이템`이라는 라벨로 바꾸고 실제 사용자 업로드 아이템 중 템플릿 연결과 사용 횟수가 모두 없는 항목만 세도록 보정했다.
+
 ## 2026-04-03 v1.4.55
 - 관리자 회원 카드의 `최근 활동`이 실제로는 마지막 접속이 아니라 작성 티어표의 마지막 수정 시각 기준이었으므로, 라벨을 `최근 콘텐츠 활동`으로 분명하게 바꾸고 `마지막 접속일`을 별도 줄로 추가해 두 의미를 분리했다.
 - 백엔드 `users`에 `last_login_at`을 추가하고, 로그인/이메일 인증 완료/비밀번호 재설정 완료/세션 기반 `/api/auth/me` 확인 시 해당 시각을 갱신하도록 보강했다. 기존 계정은 마이그레이션 시 `created_at`으로 1차 채워 오래된 계정도 빈 값 없이 정렬할 수 있게 했다.
@@ -1160,6 +1199,15 @@
 - **아이템 카드 레이아웃 개선**: 아이템 목록과 추가 미리보기를 1:1 비율 기준으로 재구성하고 더 촘촘한 카드 그리드로 조정
 - **레거시 파일 역할 정리**: `db.json`과 lowdb 관련 코드는 현재 MariaDB 기본 런타임에는 필수가 아니며, 마이그레이션/예외 fallback 용도임을 문서에 명시
 
+## 2026-04-03 v1.4.64
+- **신규 DB 관리자 페이지 500 수정**: 빈 DB를 새로 만든 직후 `/admin/...` 진입 시 `GET /api/admin/template-requests`와 `GET /api/admin/image-assets/stats`가 500으로 터지던 문제를 수정
+- **`template_requests` 초기 스키마 보정**: 새 테이블 생성 정의에 누락돼 있던 `groups_json`, `board_items_json`, `show_character_names_snapshot` 컬럼을 추가하고, `source_tierlist_id`는 요청 종류에 따라 비어 있을 수 있도록 `NULL` 허용으로 정리
+- **빈 DB 재현 검증**: 로컬 MariaDB를 `DROP DATABASE → CREATE DATABASE → ensureData()`로 다시 초기화한 뒤 `listAdminTemplateRequests()`가 `[]`, `getImageAssetStats()`가 0값 통계를 반환하는 것까지 직접 확인
+
+## 2026-04-03 v1.4.63
+- **우측 레일 Teleport 전환 안정화**: 관리자/에디터 전용 우측 패널이 사용하는 `#local-right-rail-root` DOM을 라우트에 따라 생성/삭제하지 않고 항상 유지하도록 바꿔, `/admin/...`에서 설정/다른 페이지로 이동하거나 새로고침 후 화면을 바꿀 때 Vue가 `nextSibling`/`emitsOptions` 기준점을 잃고 크래시하는 문제를 방지
+- **정적 favicon 403 분리 확인**: 프런트 빌드 기준 `favicon.svg`, `favicon-32x32.png`, `apple-touch-icon.png` 파일은 레포와 Vite `public/` 출력에 존재함을 확인했고, 운영 환경의 favicon `403 Forbidden`은 코드 누락보다 컨테이너/정적 서빙/프록시 권한 쪽 후속 점검 항목으로 분리
+
 ## 2026-03-19 v0.1.7
 - **AI 작업 규칙 보강**: `ai-rules.md`에 Git 작성자 정보, 한국어 커밋 메시지, 버전/태그 동기화, 민감 정보 확인 규칙 추가
 - **관리자 화면 재구성**: `/admin`을 좌우 병렬 구조에서 `모드 선택 → 게임 선택/생성 → 선택된 게임 상세 관리` 흐름으로 재구성

frontend/src/App.vue

@@ -659,8 +659,12 @@ function reloadApp() {
         </div>
         <div class="rightRail__body">
           <div class="rightRail__content">
-            <div v-if="usesLocalRightRail" id="local-right-rail-root" class="localRightRailRoot"></div>
-            <template v-else>
+            <div
+              id="local-right-rail-root"
+              class="localRightRailRoot"
+              :class="{ 'localRightRailRoot--hidden': !usesLocalRightRail }"
+            ></div>
+            <template v-if="!usesLocalRightRail">
               <section v-if="showSettingsThemePanel" class="settingsThemePanel">
                 <div class="settingsThemePanel__eyebrow">Appearance</div>
                 <div class="settingsThemePanel__title">테마 설정</div>
@@ -1780,6 +1784,10 @@ function reloadApp() {
   gap: 14px;
 }
 
+.localRightRailRoot--hidden {
+  display: none;
+}
+
 .toastStack {
   position: fixed;
   top: 18px;

frontend/src/components/admin/AdminFeaturedSection.vue

@@ -31,7 +31,7 @@ const props = defineProps({
               <span class="featuredCard__rank">{{ index + 1 }}</span>
               <div>
                 <div class="featuredCard__title">{{ template.name }}</div>
-                <div class="featuredCard__id">{{ template.id }}</div>
+                <div class="featuredCard__id">{{ template.slug || template.id }}</div>
               </div>
             </div>
             <div class="featuredCard__actions">
@@ -55,7 +55,7 @@ const props = defineProps({
             @click="props.addFeaturedTemplate(template.id)"
           >
             <span>{{ template.name }}</span>
-            <span class="featuredPickerItem__id">{{ template.id }}</span>
+            <span class="featuredPickerItem__id">{{ template.slug || template.id }}</span>
           </button>
         </div>
       </div>

frontend/src/components/admin/AdminItemsSection.vue

@@ -16,7 +16,15 @@ const props = defineProps({
     <div v-if="!props.customItems.length" class="hint">조건에 맞는 관리 대상 아이템이 없어요.</div>
     <div v-else class="customItemGrid">
       <button v-for="item in props.customItems" :key="item.id" type="button" class="customItemCard" @click="props.openCustomItemModal(item)">
-        <span class="customItemCard__badge" :class="{ 'customItemCard__badge--template': item.sourceType === 'template' }">{{ item.sourceLabel }}</span>
+        <span
+          class="customItemCard__badge"
+          :class="{
+            'customItemCard__badge--template': item.sourceType === 'template',
+            'customItemCard__badge--asset': item.sourceType === 'asset',
+          }"
+        >
+          {{ item.sourceLabel }}
+        </span>
         <img class="customItemCard__image" :src="toApiUrl(item.src)" :alt="item.label" />
         <div class="customItemCard__title" :title="item.label">{{ item.label }}</div>
       </button>

frontend/src/components/admin/AdminTemplatesSection.vue

@@ -13,6 +13,11 @@ const props = defineProps({
   hasSelectedTemplate: { type: Boolean, required: true },
   selectedTemplate: { type: Object, default: null },
   displayThumbnailUrl: { type: String, default: '' },
+  templateMetaDraftName: { type: String, default: '' },
+  templateMetaDraftSlug: { type: String, default: '' },
+  templateMetaSaving: { type: Boolean, required: true },
+  canSaveTemplateMeta: { type: Boolean, required: true },
+  saveTemplateMeta: { type: Function, required: true },
   canApplyThumbnail: { type: Boolean, required: true },
   templateVisibilitySaving: { type: Boolean, required: true },
   thumbFileInputRef: { type: Function, required: true },
@@ -47,6 +52,8 @@ const props = defineProps({
   selectedTemplateId: { type: String, default: '' },
 })
 
+defineEmits(['update:templateMetaDraftName', 'update:templateMetaDraftSlug'])
+
 function setTemplateItemListElement(el) {
   props.templateItemListRef(el)
 }
@@ -131,13 +138,40 @@ function setThumbFileElement(el) {
       </div>
       <div class="templateSettingsCard__body">
         <div class="panel__title">템플릿 설정</div>
-        <div class="templateSettingsCard__meta">{{ props.selectedTemplate.template.name }} · {{ props.selectedTemplate.template.id }}</div>
+        <div class="templateMetaForm">
+          <label class="templateMetaField">
+            <span class="templateMetaField__label">템플릿 이름</span>
+            <input
+              class="input input--dense"
+              type="text"
+              maxlength="60"
+              :value="props.templateMetaDraftName"
+              placeholder="템플릿 이름"
+              @input="$emit('update:templateMetaDraftName', $event.target.value)"
+            />
+          </label>
+          <label class="templateMetaField">
+            <span class="templateMetaField__label">템플릿 slug</span>
+            <input
+              class="input input--dense"
+              type="text"
+              maxlength="120"
+              :value="props.templateMetaDraftSlug"
+              placeholder="예: idol-rhythm"
+              @input="$emit('update:templateMetaDraftSlug', $event.target.value)"
+            />
+          </label>
+        </div>
+        <div class="templateSettingsCard__meta">공개 URL: /topics/{{ props.selectedTemplate.template.slug || props.selectedTemplate.template.id }}</div>
         <label class="toggleSwitch" :class="{ 'toggleSwitch--disabled': props.templateVisibilitySaving }">
           <input :checked="!!props.selectedTemplate.template.isPublic" type="checkbox" @change="props.toggleSelectedTemplateVisibility($event.target.checked)" />
           <span class="toggleSwitch__label">{{ props.selectedTemplate.template.isPublic ? '템플릿 공개중' : '비공개 상태' }}</span>
           <span class="toggleSwitch__track"><span class="toggleSwitch__thumb"></span></span>
         </label>
         <div class="templateSettingsCard__actions">
+          <button class="btn btn--ghost" :disabled="!props.canSaveTemplateMeta || props.templateMetaSaving" @click="props.saveTemplateMeta">
+            {{ props.templateMetaSaving ? '저장중...' : '이름/slug 저장' }}
+          </button>
           <button class="btn" :disabled="!props.canApplyThumbnail" @click="props.uploadThumbnail">썸네일 적용</button>
           <button class="btn btn--danger" @click="props.removeTemplate">템플릿 삭제</button>
         </div>
@@ -239,3 +273,25 @@ function setThumbFileElement(el) {
     </div>
   </div>
 </template>
+
+<style scoped>
+.templateMetaForm {
+  display: grid;
+  gap: 10px;
+}
+
+.templateMetaField {
+  display: grid;
+  gap: 6px;
+}
+
+.templateMetaField__label {
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--theme-text-soft);
+}
+
+.input--dense {
+  padding: 11px 13px;
+}
+</style>

frontend/src/composables/useAdminCustomItems.js

@@ -119,9 +119,19 @@ export function useAdminCustomItems({
       closeCustomItemDeleteModal()
       closeCustomItemModal()
       await refreshCustomItems()
-      success.value = item.sourceType === 'template' ? '선택한 템플릿 아이템을 제거했어요.' : '사용자 업로드 이미지를 삭제했어요.'
+      success.value =
+        item.sourceType === 'template'
+          ? '선택한 템플릿 아이템을 제거했어요.'
+          : item.sourceType === 'asset'
+            ? '선택한 이미지 자산을 삭제했어요.'
+            : '사용자 업로드 이미지를 삭제했어요.'
     } catch (e) {
-      error.value = item.sourceType === 'template' ? '템플릿 아이템 제거에 실패했어요.' : '사용자 업로드 이미지 삭제에 실패했어요.'
+      error.value =
+        item.sourceType === 'template'
+          ? '템플릿 아이템 제거에 실패했어요.'
+          : item.sourceType === 'asset'
+            ? '이미지 자산 삭제에 실패했어요.'
+            : '사용자 업로드 이미지 삭제에 실패했어요.'
     }
   }
 

frontend/src/composables/useAdminTemplateManager.js

@@ -152,7 +152,10 @@ export function useAdminTemplateManager({
   }
 
   async function createTemplate(options = {}) {
-    const nextTopicId = typeof options.topicId === 'string' ? options.topicId.trim() : newTemplateId.value.trim()
+    const nextTopicSlug =
+      typeof options.topicId === 'string'
+        ? options.topicId.trim().toLowerCase()
+        : newTemplateId.value.trim().toLowerCase()
     const nextTopicName = typeof options.topicName === 'string' ? options.topicName.trim() : newTemplateName.value.trim()
     const preserveUploadState = !!options.preserveUploadState
     resetMessages()
@@ -162,15 +165,18 @@ export function useAdminTemplateManager({
         credentials: 'include',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          id: nextTopicId,
+          slug: nextTopicSlug,
           name: nextTopicName,
           isPublic: !!newTemplateIsPublic.value,
           thumbnailSrc: activeTemplateRequest.value?.type === 'create' ? (activeTemplateRequest.value?.thumbnailSrc || '') : '',
         }),
       })
-      if (!res.ok) throw new Error('failed')
-
       const data = await res.json()
+      if (!res.ok) {
+        const requestError = new Error('failed')
+        requestError.data = data
+        throw requestError
+      }
       const createdTemplate = data.template || {}
       if (activeTemplateRequest.value?.type === 'create' && activeTemplateRequest.value?.id) {
         const linkData = await api.linkAdminTemplateRequestTemplate(activeTemplateRequest.value.id, {
@@ -201,7 +207,16 @@ export function useAdminTemplateManager({
       }
       success.value = '템플릿이 생성됐어요. 이어서 썸네일과 기본 아이템을 관리할 수 있어요.'
     } catch (e) {
-      error.value = '템플릿 생성 실패(관리자 권한/중복 ID 확인)'
+      const errorCode = e?.data?.error || ''
+      if (errorCode === 'topic_slug_taken') {
+        error.value = '이미 사용 중인 템플릿 주소(slug)입니다.'
+        return
+      }
+      if (errorCode === 'topic_slug_invalid') {
+        error.value = '템플릿 주소(slug)는 영문 소문자, 숫자, 하이픈만 사용할 수 있어요.'
+        return
+      }
+      error.value = '템플릿 생성 실패(관리자 권한/템플릿 주소 중복 확인)'
     }
   }
 

frontend/src/composables/useAdminTemplateRequests.js

@@ -26,8 +26,10 @@ export function useAdminTemplateRequests({
       draftTopicIsPublic: !!request.draftTopicIsPublic,
       sourceTierListId: request.sourceTierListId || '',
       sourceTopicId: request.sourceTopicId || '',
+      sourceTopicSlug: request.sourceTopicSlug || '',
       sourceTierListTitle: request.sourceTierListTitle || '',
       targetTopicId: request.targetTopicId || '',
+      targetTopicSlug: request.targetTopicSlug || '',
       targetTopicName: request.targetTopicName || '',
       requesterName: request.requesterName || '',
     }
@@ -38,8 +40,9 @@ export function useAdminTemplateRequests({
   }
 
   function templateRequestSourceUrl(request) {
-    if (!request?.sourceTopicId || !request?.sourceTierListId) return ''
-    return editorPath(request.sourceTopicId, request.sourceTierListId, { preview: true })
+    const topicRef = request?.sourceTopicSlug || request?.sourceTopicId || ''
+    if (!topicRef || !request?.sourceTierListId) return ''
+    return editorPath(topicRef, request.sourceTierListId, { preview: true })
   }
 
   function templateRequestReviewHint(request) {

frontend/src/views/AdminView.vue

@@ -44,7 +44,7 @@ const customItemQuery = ref('')
 const customItemPage = ref(1)
 const customItemLimit = ref(50)
 const customItemTotal = ref(0)
-const customItemFilter = ref('all')
+const customItemFilter = ref('library')
 const customItemModalTargetTemplateId = ref('')
 
 const adminTierLists = ref([])
@@ -110,6 +110,9 @@ const success = ref('')
 const newTemplateId = ref('')
 const newTemplateName = ref('')
 const newTemplateIsPublic = ref(false)
+const templateMetaDraftName = ref('')
+const templateMetaDraftSlug = ref('')
+const templateMetaSaving = ref(false)
 const templateVisibilitySaving = ref(false)
 
 const uploadFiles = ref([])
@@ -177,6 +180,17 @@ function normalizeAdminSrc(src) {
 }
 
 const hasSelectedTemplate = computed(() => !!selectedTemplate.value?.template?.id)
+const canSaveTemplateMeta = computed(() => {
+  const template = selectedTemplate.value?.template
+  if (!template?.id) return false
+  const nextName = templateMetaDraftName.value.trim()
+  const nextSlug = templateMetaDraftSlug.value.trim()
+  return (
+    !!nextName &&
+    !!nextSlug &&
+    (nextName !== (template.name || '') || nextSlug !== (template.slug || template.id || ''))
+  )
+})
 const canApplyThumbnail = computed(() => !!thumbFile.value && !!selectedTemplateId.value)
 const canAddItem = computed(() => uploadItemDrafts.value.length > 0 && uploadItemDrafts.value.every((item) => !!item.label.trim()) && !!selectedTemplateId.value)
 const stagedRequestDraftCount = computed(() => uploadItemDrafts.value.filter((item) => item.kind === 'request').length)
@@ -203,7 +217,7 @@ const filteredTemplatePickerTemplates = computed(() => {
   const query = templatePickerQuery.value.trim().toLowerCase()
   const list = templates.value.filter((template) => {
     if (!query) return true
-    const haystack = `${template.name || ''} ${template.id || ''}`.toLowerCase()
+    const haystack = `${template.name || ''} ${template.slug || ''} ${template.id || ''}`.toLowerCase()
     return haystack.includes(query)
   })
 
@@ -231,7 +245,7 @@ const activeTabDescription = computed(() => {
     return '템플릿 생성, 선택, 썸네일, 기본 아이템 관리를 전용 작업 화면으로 분리했습니다.'
   }
   if (activeTab.value === 'items') {
-    return '사용자 업로드와 관리자 템플릿 이미지를 함께 검수하고, 필요한 템플릿에 직접 연결할 수 있어요.'
+    return '사용자 아이템과 템플릿 아이템을 함께 검수하고, 필요한 템플릿에 직접 연결할 수 있어요.'
   }
   if (activeTab.value === 'tierlists') {
     return tierlistsMode.value === 'requests'
@@ -242,7 +256,12 @@ const activeTabDescription = computed(() => {
 })
 const adminOverviewStats = computed(() => {
   const pendingRequests = templateRequests.value.length
-  const orphanItems = customItems.value.filter((item) => item.usageCount === 0).length
+  const orphanItems = customItems.value.filter(
+    (item) =>
+      item.sourceType === 'user' &&
+      Number(item.usageCount || 0) === 0 &&
+      !(Array.isArray(item.linkedTemplates) && item.linkedTemplates.length > 0)
+  ).length
   const adminCount = users.value.filter((user) => user.isAdmin).length
 
   if (activeTab.value === 'featured') {
@@ -264,8 +283,9 @@ const adminOverviewStats = computed(() => {
   if (activeTab.value === 'items') {
     return [
       { label: '검색 결과', value: `${customItemTotal.value}` },
-      { label: '미사용', value: `${orphanItems}` },
+      { label: '미사용 아이템', value: `${orphanItems}` },
       { label: '템플릿 아이템', value: `${customItems.value.filter((item) => item.sourceType === 'template').length}` },
+      { label: '이미지 자산', value: `${customItems.value.filter((item) => item.sourceType === 'asset').length}` },
     ]
   }
   if (activeTab.value === 'tierlists') {
@@ -456,6 +476,8 @@ watch(
 watch(
   () => selectedTemplate.value?.template?.id || '',
   async (templateId) => {
+    templateMetaDraftName.value = selectedTemplate.value?.template?.name || ''
+    templateMetaDraftSlug.value = selectedTemplate.value?.template?.slug || selectedTemplate.value?.template?.id || ''
     await refreshSelectedTemplateTierListStats(templateId)
   },
   { immediate: true }
@@ -490,7 +512,7 @@ watch(
 
     if (tab === 'items') {
       customItemQuery.value = ''
-      customItemFilter.value = 'all'
+      customItemFilter.value = 'library'
       customItemPage.value = 1
       await refreshCustomItems()
       return
@@ -599,13 +621,14 @@ function formatImageJobStatus(status) {
 
 function customItemDeleteImpactText(item) {
   if (!item) return ''
+  if (item.sourceType === 'asset' || item.isAssetLibraryItem) {
+    return `"${item.label}" ${item.sourceLabel || '이미지 자산'} 항목을 정리할까요? 라이브러리 항목만 제거되고, 같은 이미지를 쓰는 다른 참조는 그대로 유지됩니다.`
+  }
   if (item.sourceType === 'template') {
-    return item.isAssetLibraryItem
-      ? `"${item.label}" 보관 자산 항목을 정리할까요? 라이브러리 항목만 제거되고, 같은 이미지를 쓰는 다른 참조는 그대로 유지됩니다.`
-      : `"${item.label}" 템플릿 항목을 정리할까요? 연결된 템플릿과 같은 주제의 저장된 티어표에서 이 항목이 함께 제거될 수 있어요.`
+    return `"${item.label}" 템플릿 항목을 정리할까요? 연결된 템플릿과 같은 주제의 저장된 티어표에서 이 항목이 함께 제거될 수 있어요.`
   }
 
-  return `"${item.label}" 사용자 업로드 이미지를 삭제할까요? 현재 항목만 정리됩니다.`
+  return `"${item.label}" 사용자 아이템을 삭제할까요? 현재 항목만 정리됩니다.`
 }
 
 const imageDiagnosticsCards = computed(() => {
@@ -747,7 +770,7 @@ function setTab(tab) {
   }
   if (tab === 'items') {
     customItemQuery.value = ''
-    customItemFilter.value = 'all'
+    customItemFilter.value = 'library'
     customItemPage.value = 1
     refreshCustomItems()
   }
@@ -886,7 +909,7 @@ async function refreshTemplateRequests() {
       draftTopicId:
         request.type === 'create'
           ? ('tmpl-' + String(request.id || 'request').replace(/[^a-zA-Z0-9]+/g, '').slice(0, 12).toLowerCase())
-          : request.targetTopicId || request.sourceTopicId || '',
+          : request.targetTopicSlug || request.sourceTopicSlug || request.targetTopicId || request.sourceTopicId || '',
       draftTopicName:
         request.type === 'create'
           ? `${request.sourceTierListTitle || request.sourceTopicName || '새 템플릿'}`
@@ -1205,6 +1228,44 @@ async function saveTemplateVisibility() {
   }
 }
 
+async function saveTemplateMeta() {
+  if (!selectedTemplate.value?.template?.id || templateMetaSaving.value || !canSaveTemplateMeta.value) return
+
+  try {
+    templateMetaSaving.value = true
+    const data = await api.updateAdminTemplate(selectedTemplate.value.template.id, {
+      name: templateMetaDraftName.value.trim(),
+      slug: templateMetaDraftSlug.value.trim().toLowerCase(),
+      isPublic: !!selectedTemplate.value.template.isPublic,
+    })
+    const nextTemplate = data.template || {}
+    selectedTemplate.value = {
+      ...selectedTemplate.value,
+      template: {
+        ...selectedTemplate.value.template,
+        ...nextTemplate,
+      },
+    }
+    templateMetaDraftName.value = nextTemplate.name || selectedTemplate.value.template.name || ''
+    templateMetaDraftSlug.value = nextTemplate.slug || selectedTemplate.value.template.slug || selectedTemplate.value.template.id || ''
+    await refreshTemplates()
+    success.value = '템플릿 이름과 slug를 저장했어요.'
+  } catch (e) {
+    const errorCode = e?.data?.error || ''
+    if (errorCode === 'topic_slug_taken') {
+      error.value = '이미 사용 중인 템플릿 slug입니다.'
+      return
+    }
+    if (errorCode === 'topic_slug_invalid') {
+      error.value = 'slug는 영문 소문자, 숫자, 하이픈만 사용할 수 있어요.'
+      return
+    }
+    error.value = '템플릿 이름/slug를 저장하지 못했어요.'
+  } finally {
+    templateMetaSaving.value = false
+  }
+}
+
 async function toggleSelectedTemplateVisibility(nextValue) {
   if (!selectedTemplate.value?.template?.id || templateVisibilitySaving.value) return
   const previous = !!selectedTemplate.value.template.isPublic
@@ -1389,7 +1450,7 @@ function buildModalItemFromTierListItem(item, tierList) {
     id,
     label: item?.label || matchedItem?.label || '이름 없음',
     src: item?.src || matchedItem?.src || '',
-    sourceType: matchedItem?.sourceType || (String(id).startsWith('asset:') ? 'template' : 'user'),
+    sourceType: matchedItem?.sourceType || (String(id).startsWith('asset:') ? 'asset' : 'user'),
     sourceLabel: matchedItem?.sourceLabel || '티어표 추가 아이템',
     ownerName: matchedItem?.ownerName || tierListAuthorDisplayName(tierList),
     linkedTemplates: Array.isArray(matchedItem?.linkedTemplates) ? matchedItem.linkedTemplates : [],
@@ -1596,8 +1657,9 @@ function closePreviewModal() {
 }
 
 function previewTierListUrl(tierList) {
-  if (!tierList?.topicId || !tierList?.id) return ''
-  return editorPath(tierList.topicId, tierList.id, { preview: true })
+  const topicRef = tierList?.topicSlug || tierList?.topicId || ''
+  if (!topicRef || !tierList?.id) return ''
+  return editorPath(topicRef, tierList.id, { preview: true })
 }
 
 function openTierListImportModal(tierList, items) {
@@ -1612,9 +1674,10 @@ function openTierListImportModal(tierList, items) {
   importModalItems.value = nextItems
   importModalMode.value = 'existing'
   importModalTargetTemplateId.value = ''
-  importModalNewTemplateId.value = tierList.topicId === 'freeform' ? '' : `${tierList.topicId}-copy`
+  const baseSlug = tierList.topicSlug || tierList.topicId || ''
+  importModalNewTemplateId.value = baseSlug === 'freeform' ? '' : `${baseSlug}-copy`
   importModalNewTemplateName.value =
-    tierList.topicId === 'freeform' ? `${tierList.title} 템플릿` : `${tierList.topicName || tierList.topicId} 파생 템플릿`
+    baseSlug === 'freeform' ? `${tierList.title} 템플릿` : `${tierList.topicName || baseSlug} 파생 템플릿`
   importModalOpen.value = true
 }
 
@@ -1648,15 +1711,15 @@ async function confirmTierListImport() {
       if (selectedTemplateId.value === importModalTargetTemplateId.value) await loadTemplate()
       success.value = `${data.items?.length || 0}개의 아이템을 기존 템플릿에 추가했어요.`
     } else {
-      const nextTopicId = (importModalNewTemplateId.value || '').trim()
+      const nextTopicId = (importModalNewTemplateId.value || '').trim().toLowerCase()
       const nextTopicName = (importModalNewTemplateName.value || '').trim()
       if (!nextTopicId || !nextTopicName) {
-        error.value = '새 템플릿 ID와 이름을 모두 입력해주세요.'
+        error.value = '새 템플릿 slug와 이름을 모두 입력해주세요.'
         return
       }
 
       const data = await api.createAdminTemplateFromTierList(tierList.id, {
-        topicId: nextTopicId,
+        slug: nextTopicId,
         name: nextTopicName,
         itemIds,
       })
@@ -1677,11 +1740,11 @@ function templateRequestTypeLabel(request) {
 function templateRequestTargetLabel(request) {
   if (request.type === 'create') {
     if (request.targetTopicName || request.targetTopicId) {
-      return `연결된 템플릿 · ${request.targetTopicName || request.targetTopicId}`
+      return `연결된 템플릿 · ${request.targetTopicName || request.targetTopicSlug || request.targetTopicId}`
     }
     return '연결된 템플릿 없음'
   }
-  return request.targetTopicName || request.targetTopicId || request.sourceTopicName
+  return request.targetTopicName || request.targetTopicSlug || request.targetTopicId || request.sourceTopicName
 }
 
 const displayThumbnailUrl = computed(() => {
@@ -1761,6 +1824,11 @@ function openUserProfile(user) {
               :has-selected-template="hasSelectedTemplate"
               :selected-template="selectedTemplate"
               :display-thumbnail-url="displayThumbnailUrl"
+              v-model:template-meta-draft-name="templateMetaDraftName"
+              v-model:template-meta-draft-slug="templateMetaDraftSlug"
+              :template-meta-saving="templateMetaSaving"
+              :can-save-template-meta="canSaveTemplateMeta"
+              :save-template-meta="saveTemplateMeta"
               :can-apply-thumbnail="canApplyThumbnail"
               :template-visibility-saving="templateVisibilitySaving"
               :thumb-file-input-ref="setThumbFileInputRef"
@@ -1861,9 +1929,9 @@ function openUserProfile(user) {
             />
 
             <div v-if="templateCreateModalOpen" class="modalOverlay" @click.self="closeTemplateCreateModal">
-              <div class="modalCard" role="dialog" aria-modal="true">
-                <div class="modalCard__title">새 템플릿 만들기</div>
-                <div class="modalCard__desc">템플릿 이름과 고유 ID를 입력한 뒤 생성하면 바로 아래 상세 관리 화면으로 이어집니다.</div>
+                <div class="modalCard" role="dialog" aria-modal="true">
+                  <div class="modalCard__title">새 템플릿 만들기</div>
+                <div class="modalCard__desc">템플릿 이름과 공개 주소용 slug를 입력하면, 내부 ID는 서버가 자동으로 생성합니다.</div>
                 <div class="modalCard__form">
                   <label class="field">
                     <span class="field__label">템플릿 이름</span>
@@ -1871,15 +1939,15 @@ function openUserProfile(user) {
                     <span class="field__hint">{{ newTemplateName.length }}/60자</span>
                   </label>
                   <label class="field">
-                    <span class="field__label">템플릿 ID</span>
+                    <span class="field__label">템플릿 slug</span>
                     <input
                       v-model="newTemplateId"
                       class="field__input"
                       maxlength="120"
-                      placeholder="topic id (영문/숫자)"
+                      placeholder="예: idol-rhythm"
                       @keydown.enter.prevent="createTemplate"
                     />
-                    <span class="field__hint">영문, 숫자, 하이픈 조합 권장 · {{ newTemplateId.length }}/120자</span>
+                    <span class="field__hint">영문 소문자, 숫자, 하이픈만 사용 · {{ newTemplateId.length }}/120자</span>
                   </label>
                   <label class="toggleSwitch">
                     <input v-model="newTemplateIsPublic" type="checkbox" />
@@ -1981,7 +2049,7 @@ function openUserProfile(user) {
                 </div>
 
                 <div v-else class="modalCard__form">
-                  <input v-model="importModalNewTemplateId" class="input" placeholder="새 템플릿 ID" />
+                  <input v-model="importModalNewTemplateId" class="input" placeholder="새 템플릿 slug" />
                   <input v-model="importModalNewTemplateName" class="input" placeholder="새 템플릿 이름" />
                 </div>
 
@@ -2005,7 +2073,7 @@ function openUserProfile(user) {
                     <div class="adminSelectionCard">
                       <div class="adminSelectionCard__label">선택한 템플릿</div>
                       <div class="adminSelectionCard__title">{{ customItemTargetTemplate?.name || '아직 선택하지 않음' }}</div>
-                      <div class="adminSelectionCard__meta">{{ customItemTargetTemplate?.id || '템플릿을 골라 주세요.' }}</div>
+                      <div class="adminSelectionCard__meta">{{ customItemTargetTemplate?.slug || customItemTargetTemplate?.id || '템플릿을 골라 주세요.' }}</div>
                     </div>
                     <div class="customItemModal__pickerActions">
                       <button class="btn btn--ghost" type="button" @click="openTemplatePickerModal('custom-item-target')">템플릿 선택</button>
@@ -2071,7 +2139,7 @@ function openUserProfile(user) {
                   <button class="btn btn--ghost btn--small" @click="closeTemplatePickerModal">닫기</button>
                 </div>
                 <div class="modalCard__form">
-                  <input v-model="templatePickerQuery" class="input" placeholder="템플릿 이름 또는 ID 검색" />
+                  <input v-model="templatePickerQuery" class="input" placeholder="템플릿 이름 또는 slug 검색" />
                   <select v-model="templatePickerSort" class="select">
                     <option value="recent">최신순</option>
                     <option value="oldest">오래된순</option>
@@ -2103,7 +2171,7 @@ function openUserProfile(user) {
                     @click="chooseTemplateFromPicker(template.id)"
                   >
                     <span class="adminTemplatePicker__name">{{ template.name }}</span>
-                    <span class="adminTemplatePicker__meta">{{ template.id }}</span>
+                    <span class="adminTemplatePicker__meta">{{ template.slug || template.id }}</span>
                     <span v-if="templatePickerMode === 'custom-item-target' && linkedCustomItemTemplateIds.has(template.id)" class="adminTemplatePicker__state">이미 추가됨</span>
                   </button>
                   <div v-if="!filteredTemplatePickerTemplates.length" class="hint hint--tight">검색 결과가 없어요.</div>
@@ -2269,7 +2337,7 @@ function openUserProfile(user) {
           <div v-if="selectedTemplate?.template" class="adminSelectionCard">
             <div class="adminSelectionCard__label">선택한 템플릿</div>
             <div class="adminSelectionCard__title">{{ selectedTemplate.template.name }}</div>
-            <div class="adminSelectionCard__meta">{{ selectedTemplate.template.id }}</div>
+            <div class="adminSelectionCard__meta">{{ selectedTemplate.template.slug || selectedTemplate.template.id }}</div>
           </div>
           <div v-if="selectedTemplateId && !hasSelectedTemplate && !isTemplateLoading" class="hint hint--tight">선택된 템플릿 ID: {{ selectedTemplateId }}</div>
         </div>
@@ -2290,16 +2358,17 @@ function openUserProfile(user) {
           </select>
           <select :value="customItemFilter" class="select" @change="changeCustomItemFilter($event.target.value)">
             <option value="all">전체 이미지</option>
-            <option value="user">사용자 업로드</option>
-            <option value="template">템플릿 사용 이미지</option>
-            <option value="asset">관리자 보관 자산</option>
-            <option value="unused-user">미사용 사용자 업로드</option>
-            <option value="unused-admin">미사용 관리자 자산</option>
+            <option value="library">아이템(템플릿 + 사용자)</option>
+            <option value="template">템플릿 아이템</option>
+            <option value="user">사용자 아이템</option>
+            <option value="thumbnail">썸네일 이미지</option>
+            <option value="avatar">프로필 이미지</option>
+            <option value="unused-user">미사용 아이템</option>
           </select>
         </div>
         <div class="adminSidebar__actions">
           <button class="btn btn--ghost" @click="refreshCustomItems">새로고침</button>
-          <button class="btn btn--danger" :disabled="customItemFilter !== 'unused-user' || !customItems.length" @click="removeUnusedCustomItems">미사용 사용자 이미지 일괄 삭제</button>
+          <button class="btn btn--danger" :disabled="customItemFilter !== 'unused-user' || !customItems.length" @click="removeUnusedCustomItems">미사용 아이템 일괄 삭제</button>
         </div>
         <div class="adminSidebar__stats">
           <div class="sidebarStat">
@@ -3480,6 +3549,9 @@ function openUserProfile(user) {
 .adminUiScope .customItemCard__badge--template {
   background: rgba(96, 165, 250, 0.18);
 }
+.adminUiScope .customItemCard__badge--asset {
+  background: rgba(251, 191, 36, 0.18);
+}
 .adminUiScope .customItemCard:hover {
   border-color: rgba(126, 162, 255, 0.42);
   background: rgba(255, 255, 255, 0.06);

frontend/src/views/FavoriteTierListsView.vue

@@ -48,7 +48,7 @@ async function loadFavorites() {
 }
 
 function openTierList(tierList) {
-  router.push(editorPath(tierList.topicId, tierList.id))
+  router.push(editorPath(tierList.topicSlug || tierList.topicId, tierList.id))
 }
 
 onMounted(loadFavorites)

frontend/src/views/FollowingFeedView.vue

@@ -66,7 +66,7 @@ async function loadFollowingFeed() {
 }
 
 function openTierList(tierList) {
-  router.push(editorPath(tierList.topicId, tierList.id))
+  router.push(editorPath(tierList.topicSlug || tierList.topicId, tierList.id))
 }
 
 function openAuthorProfile(tierList) {

frontend/src/views/HomeView.vue

@@ -21,7 +21,7 @@ const templates = computed(() => {
     .filter((item) => item.id !== 'freeform')
     .filter((item) => {
       if (!query.value) return true
-      const haystack = `${item.name || ''} ${item.id || ''}`.toLowerCase()
+      const haystack = `${item.name || ''} ${item.slug || ''}`.toLowerCase()
       return haystack.includes(query.value)
     })
 
@@ -49,8 +49,8 @@ async function loadTemplates() {
 onMounted(loadTemplates)
 watch(() => auth.user?.id, loadTemplates)
 
-function openTopic(templateId) {
-  router.push(topicPath(templateId))
+function openTopic(template) {
+  router.push(topicPath(template?.slug || template?.id || ''))
 }
 
 async function toggleFavorite(template, event) {
@@ -99,14 +99,14 @@ function templateThumbUrl(template) {
       >
         <SvgIcon class="libraryCard__favoriteIcon" :src="kidStarIcon" :size="18" />
       </button>
-      <button class="libraryCard__main" type="button" @click="openTopic(template.id)">
+      <button class="libraryCard__main" type="button" @click="openTopic(template)">
         <div class="libraryCard__thumbWrap">
         <img v-if="templateThumbUrl(template)" class="libraryCard__thumb" :src="templateThumbUrl(template)" :alt="template.name" draggable="false" />
         <div v-else class="libraryCard__thumbFallback">대표 썸네일</div>
       </div>
         <div class="libraryCard__body">
           <div class="libraryCard__title">{{ template.name }}</div>
-          <div class="libraryCard__meta">{{ template.id }}</div>
+          <div class="libraryCard__meta">{{ template.slug || template.id }}</div>
         </div>
       </button>
     </article>

frontend/src/views/MyTierListsView.vue

@@ -60,7 +60,7 @@ onMounted(async () => {
 })
 
 function openList(t) {
-  router.push(editorPath(t.topicId, t.id))
+  router.push(editorPath(t.topicSlug || t.topicId, t.id))
 }
 </script>
 

frontend/src/views/SearchResultsView.vue

@@ -38,7 +38,7 @@ function tierListThumbnailUrl(tierList) {
 }
 
 function openTierList(tierList) {
-  router.push(editorPath(tierList.topicId, tierList.id))
+  router.push(editorPath(tierList.topicSlug || tierList.topicId, tierList.id))
 }
 
 async function loadResults() {

frontend/src/views/UserProfileView.vue

@@ -103,7 +103,7 @@ async function toggleFollow() {
 }
 
 function openTierList(tierList) {
-  router.push(editorPath(tierList.topicId, tierList.id))
+  router.push(editorPath(tierList.topicSlug || tierList.topicId, tierList.id))
 }
 
 watch(userId, loadProfile, { immediate: true })
@@ -113,10 +113,10 @@ watch(userId, loadProfile, { immediate: true })
   <section class="pageWrap">
     <section class="pageHead">
       <div class="pageHead__main">
-        <div class="pageHead__eyebrow">Author</div>
-        <h2 class="pageHead__title">{{ profileDisplayName }}</h2>
+        <div class="pageHead__eyebrow">User Profile</div>
+        <h2 class="pageHead__title">사용자 프로필</h2>
         <div class="pageHead__desc">
-          {{ profile?.accountName ? `@${profile.accountName}` : '작성자 프로필' }}
+          이 사용자가 공개한 티어표를 모아볼 수 있어요.
         </div>
       </div>
       <div class="pageHead__aside profileActions">
@@ -133,7 +133,6 @@ watch(userId, loadProfile, { immediate: true })
         <div v-else class="profileAvatar profileAvatar--fallback">{{ profileFallback }}</div>
         <div class="profileMeta">
           <div class="profileMeta__name">{{ profileDisplayName }}</div>
-          <div class="profileMeta__handle">{{ profile?.accountName ? `@${profile.accountName}` : '작성자 프로필' }}</div>
         </div>
       </div>
       <div class="profileStats">
@@ -265,10 +264,6 @@ watch(userId, loadProfile, { immediate: true })
   color: var(--theme-text);
   word-break: break-word;
 }
-.profileMeta__handle {
-  font-size: 14px;
-  color: var(--theme-text-faint);
-}
 .profileStats {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));