feat: 미사용 이미지 기준과 관리자 자산 정리 통합

.env.production.example

@@ -3,3 +3,10 @@ MARIADB_DATABASE=tier_cursor
 MARIADB_USER=tier_cursor
 MARIADB_PASSWORD=change-this-db-password
 SESSION_SECRET=change-this-session-secret
+APP_ORIGIN=https://tmaker.sori.studio
+SMTP_HOST=smtp.gmail.com
+SMTP_PORT=465
+SMTP_SECURE=true
+SMTP_USER=your-gmail-account@gmail.com
+SMTP_PASS=change-this-gmail-app-password
+SMTP_FROM="Tier Maker <your-gmail-account@gmail.com>"

backend/index.js

@@ -1,15 +1,20 @@
 const path = require('path')
 const fs = require('fs')
+const dotenv = require('dotenv')
 const express = require('express')
 const cors = require('cors')
 const session = require('express-session')
 const FileStoreFactory = require('session-file-store')
 
+dotenv.config({ path: path.join(__dirname, '..', '.env.production') })
+
 const { ensureData } = require('./src/db')
 const authRoutes = require('./src/routes/auth')
 const topicsRoutes = require('./src/routes/topics')
 const tierListsRoutes = require('./src/routes/tierlists')
+const usersRoutes = require('./src/routes/users')
 const adminRoutes = require('./src/routes/admin')
+const shareRoutes = require('./src/routes/share')
 
 const app = express()
 const PORT = process.env.PORT ? Number(process.env.PORT) : 5179
@@ -82,7 +87,9 @@ app.use(async (req, res, next) => {
 app.use('/api/auth', authRoutes)
 app.use('/api/topics', topicsRoutes)
 app.use('/api/tierlists', tierListsRoutes)
+app.use('/api/users', usersRoutes)
 app.use('/api/admin', adminRoutes)
+app.use('/share', shareRoutes)
 
 app.listen(PORT, () => {
   console.log(`[backend] listening on http://localhost:${PORT}`)

backend/package-lock.json

@@ -11,11 +11,13 @@
       "dependencies": {
         "bcryptjs": "^3.0.3",
         "cors": "^2.8.6",
+        "dotenv": "^17.4.0",
         "express": "^5.2.1",
         "express-session": "^1.19.0",
         "multer": "^2.1.1",
         "mysql2": "^3.20.0",
         "nanoid": "^5.1.7",
+        "nodemailer": "^8.0.4",
         "session-file-store": "^1.5.0",
         "sharp": "^0.34.5",
         "zod": "^4.3.6"
@@ -853,6 +855,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/dotenv": {
+      "version": "17.4.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.0.tgz",
+      "integrity": "sha512-kCKF62fwtzwYm0IGBNjRUjtJgMfGapII+FslMHIjMR5KTnwEmBmWLDRSnc3XSNP8bNy34tekgQyDT0hr7pERRQ==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -1594,6 +1608,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/nodemailer": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-8.0.4.tgz",
+      "integrity": "sha512-k+jf6N8PfQJ0Fe8ZhJlgqU5qJU44Lpvp2yvidH3vp1lPnVQMgi4yEEMPXg5eJS1gFIJTVq1NHBk7Ia9ARdSBdQ==",
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/nodemon": {
       "version": "3.1.14",
       "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.14.tgz",

backend/package.json

@@ -4,10 +4,11 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "DB_HOST=127.0.0.1 DB_PORT=3307 DB_USER=tier_cursor DB_PASSWORD=tier_cursor1234 DB_NAME=tier_cursor nodemon --legacy-watch --watch index.js --watch src index.js",
-    "start": "DB_HOST=127.0.0.1 DB_PORT=3307 DB_USER=tier_cursor DB_PASSWORD=tier_cursor1234 DB_NAME=tier_cursor node index.js",
+    "dev": "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 nodemon --legacy-watch --watch index.js --watch src index.js",
+    "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": [],
@@ -17,11 +18,13 @@
   "dependencies": {
     "bcryptjs": "^3.0.3",
     "cors": "^2.8.6",
+    "dotenv": "^17.4.0",
     "express": "^5.2.1",
     "express-session": "^1.19.0",
     "multer": "^2.1.1",
     "mysql2": "^3.20.0",
     "nanoid": "^5.1.7",
+    "nodemailer": "^8.0.4",
     "session-file-store": "^1.5.0",
     "sharp": "^0.34.5",
     "zod": "^4.3.6"

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/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/lib/mailer.js

@@ -0,0 +1,113 @@
+const nodemailer = require('nodemailer')
+
+const SMTP_HOST = process.env.SMTP_HOST || 'smtp.gmail.com'
+const SMTP_PORT = process.env.SMTP_PORT ? Number(process.env.SMTP_PORT) : 465
+const SMTP_SECURE = process.env.SMTP_SECURE ? process.env.SMTP_SECURE === 'true' : SMTP_PORT === 465
+const SMTP_USER = process.env.SMTP_USER || ''
+const SMTP_PASS = process.env.SMTP_PASS || ''
+const SMTP_FROM = process.env.SMTP_FROM || SMTP_USER
+
+let transporterPromise = null
+
+function isMailerConfigured() {
+  return !!SMTP_USER && !!SMTP_PASS && !!SMTP_FROM
+}
+
+async function getTransporter() {
+  if (!isMailerConfigured()) {
+    const error = new Error('mail_not_configured')
+    error.code = 'mail_not_configured'
+    throw error
+  }
+
+  if (!transporterPromise) {
+    transporterPromise = (async () => {
+      const transporter = nodemailer.createTransport({
+        host: SMTP_HOST,
+        port: SMTP_PORT,
+        secure: SMTP_SECURE,
+        auth: {
+          user: SMTP_USER,
+          pass: SMTP_PASS,
+        },
+      })
+      await transporter.verify()
+      return transporter
+    })()
+  }
+
+  return transporterPromise
+}
+
+async function sendMail({ to, subject, text, html }) {
+  const transporter = await getTransporter()
+  await transporter.sendMail({
+    from: SMTP_FROM,
+    to,
+    subject,
+    text,
+    html,
+  })
+}
+
+async function sendEmailVerificationMail({ to, nickname, verificationUrl }) {
+  const displayName = nickname || to.split('@')[0] || '사용자'
+  await sendMail({
+    to,
+    subject: '[Tier Maker] 이메일 인증을 완료해주세요',
+    text: [
+      `${displayName}님, Tier Maker 가입을 완료하려면 아래 링크로 이메일 인증을 진행해주세요.`,
+      '',
+      verificationUrl,
+      '',
+      '이 링크는 24시간 동안 유효합니다.',
+      '직접 요청하지 않았다면 이 메일은 무시하셔도 됩니다.',
+    ].join('\n'),
+    html: `
+      <div style="font-family:Arial,sans-serif;line-height:1.7;color:#111827">
+        <h1 style="font-size:20px;margin:0 0 16px">Tier Maker 이메일 인증</h1>
+        <p style="margin:0 0 16px">${displayName}님, Tier Maker 가입을 완료하려면 아래 버튼으로 이메일 인증을 진행해주세요.</p>
+        <p style="margin:0 0 20px">
+          <a href="${verificationUrl}" style="display:inline-block;padding:12px 18px;border-radius:999px;background:#4c85f5;color:#ffffff;text-decoration:none;font-weight:700">이메일 인증하기</a>
+        </p>
+        <p style="margin:0 0 8px;font-size:13px;color:#6b7280">버튼이 열리지 않으면 아래 주소를 브라우저에 직접 붙여넣어주세요.</p>
+        <p style="margin:0 0 20px;font-size:13px;word-break:break-all;color:#2563eb">${verificationUrl}</p>
+        <p style="margin:0;font-size:13px;color:#6b7280">이 링크는 24시간 동안 유효합니다. 직접 요청하지 않았다면 이 메일은 무시하셔도 됩니다.</p>
+      </div>
+    `,
+  })
+}
+
+async function sendPasswordResetMail({ to, nickname, resetUrl }) {
+  const displayName = nickname || to.split('@')[0] || '사용자'
+  await sendMail({
+    to,
+    subject: '[Tier Maker] 비밀번호 재설정 안내',
+    text: [
+      `${displayName}님, Tier Maker 비밀번호를 다시 설정하려면 아래 링크를 열어주세요.`,
+      '',
+      resetUrl,
+      '',
+      '이 링크는 1시간 동안 유효합니다.',
+      '직접 요청하지 않았다면 이 메일은 무시하셔도 됩니다.',
+    ].join('\n'),
+    html: `
+      <div style="font-family:Arial,sans-serif;line-height:1.7;color:#111827">
+        <h1 style="font-size:20px;margin:0 0 16px">Tier Maker 비밀번호 재설정</h1>
+        <p style="margin:0 0 16px">${displayName}님, 비밀번호를 다시 설정하려면 아래 버튼을 눌러주세요.</p>
+        <p style="margin:0 0 20px">
+          <a href="${resetUrl}" style="display:inline-block;padding:12px 18px;border-radius:999px;background:#4c85f5;color:#ffffff;text-decoration:none;font-weight:700">비밀번호 재설정</a>
+        </p>
+        <p style="margin:0 0 8px;font-size:13px;color:#6b7280">버튼이 열리지 않으면 아래 주소를 브라우저에 직접 붙여넣어주세요.</p>
+        <p style="margin:0 0 20px;font-size:13px;word-break:break-all;color:#2563eb">${resetUrl}</p>
+        <p style="margin:0;font-size:13px;color:#6b7280">이 링크는 1시간 동안 유효합니다. 직접 요청하지 않았다면 이 메일은 무시하셔도 됩니다.</p>
+      </div>
+    `,
+  })
+}
+
+module.exports = {
+  isMailerConfigured,
+  sendEmailVerificationMail,
+  sendPasswordResetMail,
+}

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,
@@ -32,12 +33,14 @@ const {
   findUnusedCustomItems,
   findCustomItemsByIds,
   deleteCustomItems,
+  markCustomItemReplaced,
   listUsers,
   findPrimaryAdminUser,
   listAdminTierLists,
   summarizeAdminTierLists,
   findTierListById,
   updateAdminTierListMeta,
+  updateTierListFeaturedStatus,
   listAdminTemplateRequests,
   findTemplateRequestById,
   updateTemplateRequestStatus,
@@ -51,6 +54,10 @@ const {
   listRecentImageOptimizationJobs,
   clearImageOptimizationJobs,
   cleanupMissingUploadReferences,
+  listReferencedUploadSources,
+  replaceUploadSourceReferences,
+  updateCustomItemDisplayReferences,
+  clearCustomItemReplacement,
 } = require('../db')
 const { requireAdmin } = require('../middleware/auth')
 const { createMemoryUpload, writeOptimizedImage, getImageOptimizationQueueState } = require('../lib/image-storage')
@@ -89,7 +96,7 @@ function buildItemLabelFromSrc(src) {
   return normalized || 'item'
 }
 
-const upload = createMemoryUpload(multer, { fileSize: 8 * 1024 * 1024, maxCount: 50 })
+const upload = createMemoryUpload(multer, { fileSize: 20 * 1024 * 1024, maxCount: 100 })
 const avatarUpload = createMemoryUpload(multer, { fileSize: 4 * 1024 * 1024 })
 
 function decorateAdminUser(user, primaryAdmin) {
@@ -118,16 +125,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)
@@ -138,7 +152,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' })
@@ -147,8 +163,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) => {
@@ -199,7 +228,7 @@ router.post('/templates/:templateId/thumbnail', requireAdmin, upload.single('thu
   res.json({ template: updated })
 })
 
-router.post('/templates/:templateId/images', requireAdmin, upload.array('images', 50), async (req, res) => {
+router.post('/templates/:templateId/images', requireAdmin, upload.array('images', 100), async (req, res) => {
   const files = Array.isArray(req.files) ? req.files : []
   if (!files.length) return res.status(400).json({ error: 'file_required' })
   const templateId = getTemplateIdFromParams(req)
@@ -303,7 +332,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' })
@@ -331,7 +360,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', 'unused-user', 'replaced-user', 'unused-admin'])
+      .optional()
+      .default('library'),
   })
   const parsed = schema.safeParse(req.query)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
@@ -349,6 +381,8 @@ router.get('/tierlists', requireAdmin, async (req, res) => {
   const schema = z.object({
     q: z.string().trim().max(120).optional().default(''),
     topicId: z.string().trim().max(120).optional().default(''),
+    sort: z.enum(['recent', 'created', 'favorites']).optional().default('recent'),
+    minFavorites: z.coerce.number().int().min(0).max(1000000).optional().default(0),
     page: z.coerce.number().int().min(1).optional().default(1),
     limit: z.coerce.number().int().min(1).max(200).optional().default(50),
   })
@@ -358,6 +392,8 @@ router.get('/tierlists', requireAdmin, async (req, res) => {
   const result = await listAdminTierLists({
     queryText: parsed.data.q,
     topicId: parsed.data.topicId,
+    sort: parsed.data.sort,
+    minFavorites: parsed.data.minFavorites,
     page: parsed.data.page,
     limit: parsed.data.limit,
     currentUserId: req.session?.userId || '',
@@ -369,6 +405,7 @@ router.get('/tierlists/stats', requireAdmin, async (req, res) => {
   const schema = z.object({
     q: z.string().trim().max(120).optional().default(''),
     topicId: z.string().trim().max(120).optional().default(''),
+    minFavorites: z.coerce.number().int().min(0).max(1000000).optional().default(0),
   })
   const parsed = schema.safeParse(req.query)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
@@ -376,10 +413,30 @@ router.get('/tierlists/stats', requireAdmin, async (req, res) => {
   const result = await summarizeAdminTierLists({
     queryText: parsed.data.q,
     topicId: parsed.data.topicId,
+    minFavorites: parsed.data.minFavorites,
   })
   res.json(result)
 })
 
+router.patch('/tierlists/:tierListId/featured', requireAdmin, async (req, res) => {
+  const schema = z.object({
+    isFeatured: z.boolean(),
+  })
+  const parsed = schema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const tierList = await findTierListById(req.params.tierListId, req.session?.userId || '')
+  if (!tierList) return res.status(404).json({ error: 'not_found' })
+  if (parsed.data.isFeatured && !tierList.isPublic) return res.status(400).json({ error: 'public_tierlist_required' })
+
+  const updated = await updateTierListFeaturedStatus({
+    id: tierList.id,
+    isFeatured: parsed.data.isFeatured,
+    adminUserId: req.session.userId,
+  })
+  res.json({ tierList: updated })
+})
+
 router.get('/template-requests', requireAdmin, async (req, res) => {
   const requests = await listAdminTemplateRequests({ statuses: ['pending', 'reviewing'] })
   res.json({ requests })
@@ -490,6 +547,12 @@ async function removeCustomItemFiles(items) {
   )
 }
 
+async function removeUnreferencedCustomItemFiles(items) {
+  const referencedSrcs = new Set(await listReferencedUploadSources())
+  const removableItems = (items || []).filter((item) => item?.src && !referencedSrcs.has(item.src))
+  await removeCustomItemFiles(removableItems)
+}
+
 async function promoteLibraryItemToTemplateItem({ item, templateId }) {
   return createTopicItem({
     id: nanoid(),
@@ -499,6 +562,57 @@ async function promoteLibraryItemToTemplateItem({ item, templateId }) {
   })
 }
 
+async function findLibraryItemForReplacement(itemId, sourceType = '') {
+  const normalizedId = String(itemId || '').trim()
+  const normalizedSourceType = String(sourceType || '').trim()
+  if (!normalizedId) return null
+
+  if (normalizedId.startsWith('asset:') || normalizedSourceType === 'asset') {
+    const assetId = normalizedId.startsWith('asset:') ? normalizedId.slice(6) : normalizedId
+    const asset = await findImageAssetById(assetId)
+    if (!asset) return null
+    return {
+      id: `asset:${asset.id}`,
+      sourceType: 'asset',
+      src: asset.src || '',
+      label: asset.labelOverride || buildItemLabelFromSrc(asset.src),
+    }
+  }
+
+  if (normalizedSourceType === 'template') {
+    const item = await findTopicItemById(normalizedId)
+    if (!item) return null
+    return {
+      id: item.id,
+      sourceType: 'template',
+      src: item.src || '',
+      label: item.label || buildItemLabelFromSrc(item.src),
+    }
+  }
+
+  const customItem = await findCustomItemById(normalizedId)
+  if (customItem) {
+    return {
+      id: customItem.id,
+      sourceType: 'user',
+      src: customItem.src || '',
+      label: customItem.label || buildItemLabelFromSrc(customItem.src),
+    }
+  }
+
+  const templateItem = await findTopicItemById(normalizedId)
+  if (templateItem) {
+    return {
+      id: templateItem.id,
+      sourceType: 'template',
+      src: templateItem.src || '',
+      label: templateItem.label || buildItemLabelFromSrc(templateItem.src),
+    }
+  }
+
+  return null
+}
+
 async function copyUploadIntoTopicAsset(src) {
   if (typeof src !== 'string') return ''
   const raw = src.trim()
@@ -603,11 +717,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 = []
@@ -616,36 +730,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)
@@ -660,13 +783,14 @@ router.delete('/custom-items/:itemId', requireAdmin, async (req, res) => {
     return res.json({ ok: true, sourceType: 'template' })
   }
 
+  const canDeleteReplacedUserItem = target.sourceType === 'user' && !!target.replacedAt
   if (!target.canDelete) return res.status(409).json({ error: 'item_locked' })
-  if (target.linkedTemplates.length > 0) return res.status(409).json({ error: 'item_linked' })
-  if (target.usageCount > 0) return res.status(409).json({ error: 'item_in_use' })
+  if (!canDeleteReplacedUserItem && target.linkedTemplates.length > 0) return res.status(409).json({ error: 'item_linked' })
+  if (!canDeleteReplacedUserItem && target.usageCount > 0) return res.status(409).json({ error: 'item_in_use' })
 
   const items = await findCustomItemsByIds([target.id])
   await deleteCustomItems([target.id])
-  await removeCustomItemFiles(items)
+  await removeUnreferencedCustomItemFiles(items)
   res.json({ ok: true, sourceType: 'user' })
 })
 
@@ -699,6 +823,69 @@ router.post('/custom-items/:itemId/promote', requireAdmin, async (req, res) => {
   res.json({ item })
 })
 
+router.post('/custom-items/:itemId/replace', requireAdmin, async (req, res) => {
+  const schema = z.object({
+    targetItemId: z.string().trim().min(1),
+    targetSourceType: 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' })
+
+  const sourceItem = await findLibraryItemForReplacement(req.params.itemId)
+  if (!sourceItem?.src) return res.status(404).json({ error: 'source_not_found' })
+  if (sourceItem.sourceType !== 'user') return res.status(400).json({ error: 'user_item_required' })
+
+  const targetItem = await findLibraryItemForReplacement(parsed.data.targetItemId, parsed.data.targetSourceType)
+  if (!targetItem?.src) return res.status(404).json({ error: 'target_not_found' })
+  if (sourceItem.src === targetItem.src && (sourceItem.label || '') === (targetItem.label || '')) {
+    return res.status(409).json({ error: 'same_target' })
+  }
+
+  const result = await replaceUploadSourceReferences({
+    fromSrc: sourceItem.src,
+    toSrc: targetItem.src,
+    toLabel: targetItem.label || '',
+    updateCustomItemsBySrc: false,
+  })
+  const displayResult = await updateCustomItemDisplayReferences({
+    itemId: sourceItem.id,
+    src: targetItem.src,
+    label: targetItem.label || '',
+  })
+  await markCustomItemReplaced({
+    itemId: sourceItem.id,
+    replacedByItemId: targetItem.id || '',
+    replacedBySrc: targetItem.src || '',
+    replacedByLabel: targetItem.label || '',
+  })
+
+  res.json({
+    ok: true,
+    updatedRows: (result.updatedRows || 0) + (displayResult.updatedRows || 0),
+    sourceItem,
+    targetItem,
+  })
+})
+
+router.post('/custom-items/:itemId/restore', requireAdmin, async (req, res) => {
+  const sourceItem = await findCustomItemById(req.params.itemId)
+  if (!sourceItem?.id) return res.status(404).json({ error: 'not_found' })
+  if (!sourceItem.replacedAt) return res.status(409).json({ error: 'not_replaced' })
+
+  const restored = await updateCustomItemDisplayReferences({
+    itemId: sourceItem.id,
+    src: sourceItem.src,
+    label: sourceItem.label || '',
+  })
+  await clearCustomItemReplacement(sourceItem.id)
+
+  res.json({
+    ok: true,
+    restoredRows: restored.updatedRows || 0,
+    item: await findCustomItemById(sourceItem.id),
+  })
+})
+
 router.post('/tierlists/:tierListId/promote-items', requireAdmin, async (req, res) => {
   const schema = z.object({
     topicId: z.string().min(1),
@@ -723,28 +910,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) => {
@@ -794,20 +987,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 })
 })
@@ -940,17 +1140,33 @@ router.delete('/custom-items', requireAdmin, async (req, res) => {
   const parsed = schema.safeParse(req.query)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
 
-  const items = await findUnusedCustomItems({ queryText: parsed.data.q })
-  const ids = items.map((item) => item.id)
-  await deleteCustomItems(ids)
-  await removeCustomItemFiles(items)
-  res.json({ ok: true, deletedCount: ids.length })
+  const result = await listCustomItems({
+    queryText: parsed.data.q,
+    page: 1,
+    limit: 10000,
+    filterMode: 'unused',
+  })
+  const customItems = result.items.filter((item) => item?.sourceType === 'user')
+  const assetItems = result.items.filter((item) => item?.sourceType === 'asset' || item?.isAssetLibraryItem)
+  const customItemIds = customItems.map((item) => item.id)
+  const assetIds = assetItems
+    .map((item) => String(item.id || ''))
+    .filter((id) => id.startsWith('asset:'))
+    .map((id) => id.slice('asset:'.length))
+
+  await deleteCustomItems(customItemIds)
+  await removeUnreferencedCustomItemFiles(customItems)
+
+  const deletedAssets = await deleteImageAssets(assetIds)
+  await removeImageAssetFiles(deletedAssets)
+
+  res.json({ ok: true, deletedCount: customItemIds.length + deletedAssets.length })
 })
 
 router.get('/users', requireAdmin, async (req, res) => {
   const schema = z.object({
     q: z.string().trim().max(120).optional().default(''),
-    sort: z.enum(['recent', 'created', 'tierlists']).optional().default('recent'),
+    sort: z.enum(['recent', 'lastLogin', 'created', 'tierlists', 'followers', 'favorites']).optional().default('recent'),
     direction: z.enum(['asc', 'desc']).optional().default('desc'),
   })
   const parsed = schema.safeParse(req.query)

backend/src/routes/auth.js

@@ -1,5 +1,6 @@
 const express = require('express')
 const bcrypt = require('bcryptjs')
+const crypto = require('crypto')
 const { z } = require('zod')
 const { nanoid } = require('nanoid')
 const multer = require('multer')
@@ -9,14 +10,26 @@ const {
   findUserByNickname,
   findUserById,
   createUser,
+  touchUserLastLoginAt,
+  updateUserPassword,
+  verifyUserEmail,
+  createEmailVerificationToken,
+  findEmailVerificationTokenByHash,
+  consumeEmailVerificationToken,
+  createPasswordResetToken,
+  findPasswordResetTokenByHash,
+  consumePasswordResetToken,
   updateUserProfile,
   findPrimaryAdminUser,
 } = require('../db')
 const { requireAuth } = require('../middleware/auth')
 const { createMemoryUpload, writeOptimizedImage } = require('../lib/image-storage')
+const { isMailerConfigured, sendEmailVerificationMail, sendPasswordResetMail } = require('../lib/mailer')
 const { isReservedNickname } = require('../lib/user-validation')
 
 const router = express.Router()
+const EMAIL_VERIFICATION_TTL_MS = 24 * 60 * 60 * 1000
+const PASSWORD_RESET_TTL_MS = 60 * 60 * 1000
 
 const signupSchema = z.object({
   email: z.string().email(),
@@ -24,6 +37,28 @@ const signupSchema = z.object({
   password: z.string().min(6),
 })
 
+const verifyEmailSchema = z.object({
+  token: z.string().min(16).max(256),
+})
+
+const resendVerificationSchema = z.object({
+  email: z.string().email(),
+})
+
+const requestPasswordResetSchema = z.object({
+  email: z.string().email(),
+})
+
+const confirmPasswordResetSchema = z.object({
+  token: z.string().min(16).max(256),
+  password: z.string().min(6),
+})
+
+const changePasswordSchema = z.object({
+  currentPassword: z.string().min(6),
+  nextPassword: z.string().min(6),
+})
+
 const profileSchema = z.object({
   nickname: z.string().trim().min(1).max(40),
   removeAvatar: z.union([z.string(), z.undefined()]).optional(),
@@ -57,10 +92,77 @@ async function serializeUser(user) {
     isOperator: !!user.isAdmin && !isPrimaryAdmin,
     role: isPrimaryAdmin ? 'owner' : user.isAdmin ? 'operator' : 'user',
     avatarSrc: user.avatarSrc || '',
+    emailVerified: user.emailVerified !== false,
     createdAt: user.createdAt,
   }
 }
 
+function createRawToken() {
+  return crypto.randomBytes(32).toString('hex')
+}
+
+function hashToken(token) {
+  return crypto.createHash('sha256').update(String(token || '')).digest('hex')
+}
+
+function resolveAppOrigin(req) {
+  const envOrigin = String(process.env.APP_ORIGIN || process.env.PUBLIC_APP_ORIGIN || '').trim()
+  if (envOrigin) return envOrigin.replace(/\/+$/, '')
+
+  const forwardedProto = String(req.headers['x-forwarded-proto'] || '').split(',')[0].trim()
+  const protocol = forwardedProto || req.protocol || 'http'
+  const host = req.get('host')
+  return host ? `${protocol}://${host}` : ''
+}
+
+async function issueEmailVerificationMail(req, user) {
+  if (!isMailerConfigured()) {
+    const error = new Error('mail_not_configured')
+    error.code = 'mail_not_configured'
+    throw error
+  }
+
+  const rawToken = createRawToken()
+  await createEmailVerificationToken({
+    id: nanoid(),
+    userId: user.id,
+    tokenHash: hashToken(rawToken),
+    expiresAt: Date.now() + EMAIL_VERIFICATION_TTL_MS,
+  })
+
+  const appOrigin = resolveAppOrigin(req)
+  const verificationUrl = `${appOrigin}/login?verifyToken=${encodeURIComponent(rawToken)}`
+  await sendEmailVerificationMail({
+    to: user.email,
+    nickname: user.nickname,
+    verificationUrl,
+  })
+}
+
+async function issuePasswordResetMail(req, user) {
+  if (!isMailerConfigured()) {
+    const error = new Error('mail_not_configured')
+    error.code = 'mail_not_configured'
+    throw error
+  }
+
+  const rawToken = createRawToken()
+  await createPasswordResetToken({
+    id: nanoid(),
+    userId: user.id,
+    tokenHash: hashToken(rawToken),
+    expiresAt: Date.now() + PASSWORD_RESET_TTL_MS,
+  })
+
+  const appOrigin = resolveAppOrigin(req)
+  const resetUrl = `${appOrigin}/login?resetToken=${encodeURIComponent(rawToken)}`
+  await sendPasswordResetMail({
+    to: user.email,
+    nickname: user.nickname,
+    resetUrl,
+  })
+}
+
 router.post('/signup', async (req, res) => {
   const parsed = signupSchema.safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
@@ -74,11 +176,37 @@ router.post('/signup', async (req, res) => {
 
   const passwordHash = await bcrypt.hash(password, 10)
   const isAdmin = (await countUsers()) === 0
-  const user = await createUser({ id: nanoid(), email, nickname, passwordHash, isAdmin })
+  if (!isAdmin && !isMailerConfigured()) {
+    return res.status(503).json({ error: 'mail_not_configured' })
+  }
+
+  const user = await createUser({
+    id: nanoid(),
+    email,
+    nickname,
+    passwordHash,
+    emailVerified: isAdmin,
+    isAdmin,
+  })
+
+  if (!isAdmin) {
+    try {
+      await issueEmailVerificationMail(req, user)
+      return res.json({
+        user: null,
+        verificationRequired: true,
+        email: user.email,
+      })
+    } catch (err) {
+      const statusCode = err?.code === 'mail_not_configured' ? 503 : 502
+      return res.status(statusCode).json({ error: err?.code || 'mail_send_failed' })
+    }
+  }
 
   try {
     await establishSession(req, user)
-    res.json(await serializeUser(user))
+    const touchedUser = await touchUserLastLoginAt(user.id)
+    res.json({ user: await serializeUser(touchedUser || user), verificationRequired: false })
   } catch (err) {
     return res.status(500).json({ error: 'session_save_failed' })
   }
@@ -97,10 +225,12 @@ router.post('/login', async (req, res) => {
 
   const ok = await bcrypt.compare(password, user.passwordHash)
   if (!ok) return res.status(401).json({ error: 'invalid_credentials' })
+  if (!user.emailVerified) return res.status(403).json({ error: 'email_unverified', email: user.email })
 
   try {
     await establishSession(req, user)
-    res.json(await serializeUser(user))
+    const touchedUser = await touchUserLastLoginAt(user.id)
+    res.json({ user: await serializeUser(touchedUser || user) })
   } catch (err) {
     return res.status(500).json({ error: 'session_save_failed' })
   }
@@ -113,7 +243,7 @@ router.post('/logout', async (req, res) => {
 
 router.get('/me', async (req, res) => {
   if (!req.session || !req.session.userId) return res.json({ user: null })
-  const user = await findUserById(req.session.userId)
+  const user = await touchUserLastLoginAt(req.session.userId)
   if (!user) return res.json({ user: null })
   res.json({ user: await serializeUser(user) })
 })
@@ -122,6 +252,104 @@ router.get('/meta', async (req, res) => {
   res.json({ hasUsers: (await countUsers()) > 0 })
 })
 
+router.post('/email/verify', async (req, res) => {
+  const parsed = verifyEmailSchema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const tokenRow = await findEmailVerificationTokenByHash(hashToken(parsed.data.token))
+  if (!tokenRow || tokenRow.consumedAt || tokenRow.expiresAt < Date.now()) {
+    return res.status(400).json({ error: 'invalid_or_expired_token' })
+  }
+
+  const user = await verifyUserEmail(tokenRow.userId)
+  if (!user) return res.status(404).json({ error: 'not_found' })
+
+  await consumeEmailVerificationToken(tokenRow.id)
+
+  try {
+    await establishSession(req, user)
+    const touchedUser = await touchUserLastLoginAt(user.id)
+    res.json({ user: await serializeUser(touchedUser || user) })
+  } catch (err) {
+    return res.status(500).json({ error: 'session_save_failed' })
+  }
+})
+
+router.post('/email/resend', async (req, res) => {
+  const parsed = resendVerificationSchema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const user = await findUserByEmail(parsed.data.email)
+  if (!user || user.emailVerified) return res.json({ ok: true })
+
+  try {
+    await issueEmailVerificationMail(req, user)
+    res.json({ ok: true })
+  } catch (err) {
+    const statusCode = err?.code === 'mail_not_configured' ? 503 : 502
+    return res.status(statusCode).json({ error: err?.code || 'mail_send_failed' })
+  }
+})
+
+router.post('/password-reset/request', async (req, res) => {
+  const parsed = requestPasswordResetSchema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const user = await findUserByEmail(parsed.data.email)
+  if (!user) return res.json({ ok: true })
+
+  try {
+    await issuePasswordResetMail(req, user)
+    res.json({ ok: true })
+  } catch (err) {
+    const statusCode = err?.code === 'mail_not_configured' ? 503 : 502
+    return res.status(statusCode).json({ error: err?.code || 'mail_send_failed' })
+  }
+})
+
+router.post('/password-reset/confirm', async (req, res) => {
+  const parsed = confirmPasswordResetSchema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const tokenRow = await findPasswordResetTokenByHash(hashToken(parsed.data.token))
+  if (!tokenRow || tokenRow.consumedAt || tokenRow.expiresAt < Date.now()) {
+    return res.status(400).json({ error: 'invalid_or_expired_token' })
+  }
+
+  const passwordHash = await bcrypt.hash(parsed.data.password, 10)
+  const updatedUser = await updateUserPassword({ id: tokenRow.userId, passwordHash })
+  if (!updatedUser) return res.status(404).json({ error: 'not_found' })
+
+  const verifiedUser = updatedUser.emailVerified ? updatedUser : await verifyUserEmail(updatedUser.id)
+  await consumePasswordResetToken(tokenRow.id)
+
+  try {
+    await establishSession(req, verifiedUser)
+    const touchedUser = await touchUserLastLoginAt(verifiedUser.id)
+    res.json({ user: await serializeUser(touchedUser || verifiedUser) })
+  } catch (err) {
+    return res.status(500).json({ error: 'session_save_failed' })
+  }
+})
+
+router.post('/password', requireAuth, async (req, res) => {
+  const parsed = changePasswordSchema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const user = await findUserById(req.session.userId)
+  if (!user) return res.status(404).json({ error: 'not_found' })
+
+  const authUser = await findUserByEmail(user.email)
+  if (!authUser) return res.status(404).json({ error: 'not_found' })
+
+  const passwordMatched = await bcrypt.compare(parsed.data.currentPassword, authUser.passwordHash)
+  if (!passwordMatched) return res.status(401).json({ error: 'invalid_current_password' })
+
+  const passwordHash = await bcrypt.hash(parsed.data.nextPassword, 10)
+  const updated = await updateUserPassword({ id: authUser.id, passwordHash })
+  res.json({ user: await serializeUser(updated) })
+})
+
 const upload = createMemoryUpload(multer, { fileSize: 4 * 1024 * 1024 })
 
 router.post('/profile', requireAuth, upload.single('avatar'), async (req, res) => {

backend/src/routes/share.js

@@ -0,0 +1,75 @@
+const express = require('express')
+const { findTierListById } = require('../db')
+
+const router = express.Router()
+const APP_ORIGIN = (process.env.APP_ORIGIN || 'http://localhost:5173').replace(/\/+$/, '')
+const DEFAULT_TITLE = 'Tier Maker | 템플릿으로 쉽게 만드는 티어표'
+const DEFAULT_DESCRIPTION = '템플릿과 커스텀 이미지로 티어표를 만들고 저장하고 공유하세요.'
+const DEFAULT_IMAGE_URL = `${APP_ORIGIN}/og-card.png`
+
+function escapeHtml(value) {
+  return String(value || '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+function toAbsoluteUrl(pathname) {
+  const src = String(pathname || '').trim()
+  if (!src) return DEFAULT_IMAGE_URL
+  if (/^https?:\/\//i.test(src)) return src
+  return `${APP_ORIGIN}${src.startsWith('/') ? src : `/${src}`}`
+}
+
+function buildShareHtml({ title, description, imageUrl, shareUrl, appUrl }) {
+  const safeTitle = escapeHtml(title || DEFAULT_TITLE)
+  const safeDescription = escapeHtml(description || DEFAULT_DESCRIPTION)
+  const safeImageUrl = escapeHtml(imageUrl || DEFAULT_IMAGE_URL)
+  const safeShareUrl = escapeHtml(shareUrl || APP_ORIGIN)
+  const safeAppUrl = escapeHtml(appUrl || APP_ORIGIN)
+
+  return `<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${safeTitle}</title>
+    <meta name="description" content="${safeDescription}" />
+    <link rel="canonical" href="${safeAppUrl}" />
+    <meta property="og:site_name" content="Tier Maker" />
+    <meta property="og:locale" content="ko_KR" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="${safeShareUrl}" />
+    <meta property="og:title" content="${safeTitle}" />
+    <meta property="og:description" content="${safeDescription}" />
+    <meta property="og:image" content="${safeImageUrl}" />
+    <meta property="og:image:alt" content="${safeTitle}" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="${safeTitle}" />
+    <meta name="twitter:description" content="${safeDescription}" />
+    <meta name="twitter:image" content="${safeImageUrl}" />
+    <meta http-equiv="refresh" content="0; url=${safeAppUrl}" />
+  </head>
+  <body>
+    <script>window.location.replace(${JSON.stringify(appUrl || APP_ORIGIN)})</script>
+  </body>
+</html>`
+}
+
+router.get('/editor/:topicId/:tierListId', async (req, res) => {
+  const { topicId, tierListId } = req.params
+  const appUrl = `${APP_ORIGIN}/editor/${encodeURIComponent(topicId)}/${encodeURIComponent(tierListId)}?preview=1`
+  const shareUrl = `${APP_ORIGIN}${req.originalUrl || `/share/editor/${encodeURIComponent(topicId)}/${encodeURIComponent(tierListId)}`}`
+
+  const tierList = await findTierListById(tierListId)
+  const isPublicMatch = tierList?.isPublic && (tierList.topicSlug === topicId || tierList.topicId === topicId)
+  const title = isPublicMatch ? tierList.title : DEFAULT_TITLE
+  const description = isPublicMatch && tierList.description ? tierList.description : DEFAULT_DESCRIPTION
+  const imageUrl = isPublicMatch ? toAbsoluteUrl(tierList.thumbnailSrc) : DEFAULT_IMAGE_URL
+
+  res.type('html').send(buildShareHtml({ title, description, imageUrl, shareUrl, appUrl }))
+})
+
+module.exports = router

backend/src/routes/tierlists.js

@@ -12,6 +12,7 @@ const {
   createCustomItem,
   createTemplateRequest,
   findUserById,
+  findTopicByIdentifier,
   favoriteTierList,
   unfavoriteTierList,
   duplicateTierListForUser,
@@ -124,8 +125,8 @@ const tierListUpsertSchema = z.object({
 router.get('/public', async (req, res) => {
   const topicId = typeof req.query.topicId === 'string' ? req.query.topicId : ''
   const queryText = typeof req.query.q === 'string' ? req.query.q : ''
-  const lists = await listPublicTierLists(topicId, req.session?.userId || '', queryText)
-  res.json({ tierLists: lists })
+  const result = await listPublicTierLists(topicId, req.session?.userId || '', queryText)
+  res.json(result)
 })
 
 router.get('/me', requireAuth, async (req, res) => {
@@ -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)

backend/src/routes/users.js

@@ -0,0 +1,77 @@
+const express = require('express')
+const { z } = require('zod')
+const {
+  findUserProfileById,
+  followUser,
+  unfollowUser,
+  listPublicTierListsByAuthor,
+  listFollowingTierLists,
+} = require('../db')
+const { requireAuth } = require('../middleware/auth')
+
+const router = express.Router()
+
+router.get('/following-feed', requireAuth, async (req, res) => {
+  const schema = z.object({
+    q: z.string().trim().max(120).optional().default(''),
+  })
+  const parsed = schema.safeParse(req.query)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const tierLists = await listFollowingTierLists(req.session.userId, parsed.data.q)
+  res.json({ tierLists })
+})
+
+router.get('/:userId', async (req, res) => {
+  const user = await findUserProfileById(req.params.userId, req.session?.userId || '')
+  if (!user) return res.status(404).json({ error: 'not_found' })
+  res.json({ user })
+})
+
+router.get('/:userId/tierlists', async (req, res) => {
+  const schema = z.object({
+    q: z.string().trim().max(120).optional().default(''),
+  })
+  const parsed = schema.safeParse(req.query)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const user = await findUserProfileById(req.params.userId, req.session?.userId || '')
+  if (!user) return res.status(404).json({ error: 'not_found' })
+
+  const tierLists = await listPublicTierListsByAuthor(
+    req.params.userId,
+    req.session?.userId || '',
+    parsed.data.q
+  )
+  res.json({ tierLists })
+})
+
+router.post('/:userId/follow', requireAuth, async (req, res) => {
+  const targetUserId = req.params.userId || ''
+  if (!targetUserId || targetUserId === req.session.userId) {
+    return res.status(400).json({ error: 'self_follow_not_allowed' })
+  }
+
+  const user = await findUserProfileById(targetUserId, req.session.userId)
+  if (!user) return res.status(404).json({ error: 'not_found' })
+
+  await followUser({ followerId: req.session.userId, followingId: targetUserId })
+  const updated = await findUserProfileById(targetUserId, req.session.userId)
+  res.json({ user: updated })
+})
+
+router.delete('/:userId/follow', requireAuth, async (req, res) => {
+  const targetUserId = req.params.userId || ''
+  if (!targetUserId || targetUserId === req.session.userId) {
+    return res.status(400).json({ error: 'self_follow_not_allowed' })
+  }
+
+  const user = await findUserProfileById(targetUserId, req.session.userId)
+  if (!user) return res.status(404).json({ error: 'not_found' })
+
+  await unfollowUser({ followerId: req.session.userId, followingId: targetUserId })
+  const updated = await findUserProfileById(targetUserId, req.session.userId)
+  res.json({ user: updated })
+})
+
+module.exports = router

docker-compose.prod.yml

@@ -41,6 +41,13 @@ services:
       SESSION_COOKIE_SAME_SITE: "lax"
       CORS_ORIGINS: https://tmaker.sori.studio
       TRUST_PROXY: 1
+      APP_ORIGIN: https://tmaker.sori.studio
+      SMTP_HOST: ${SMTP_HOST}
+      SMTP_PORT: ${SMTP_PORT}
+      SMTP_SECURE: ${SMTP_SECURE}
+      SMTP_USER: ${SMTP_USER}
+      SMTP_PASS: ${SMTP_PASS}
+      SMTP_FROM: ${SMTP_FROM}
     volumes:
       - tmaker_uploads:/app/uploads
       - tmaker_sessions:/app/.sessions

docs/history.md

@@ -1,5 +1,163 @@
 # 의사결정 이력
 
+## 2026-04-06 v1.4.85
+- 썸네일과 프로필 이미지는 이미 별도 필터로 분리돼 있고, 템플릿 아이템/사용자 아이템도 각각 구분되고 있으므로, 그 어디에도 속하지 않는 관리자 업로드 자산은 운영 의미상 `보관 자산`보다 `미사용 이미지`로 보는 편이 더 직관적이라고 정리했다.
+- 또 관리자 아이템 화면에서 삭제 버튼이 필터 조건에 따라 갑자기 비활성으로만 보이면 흐름을 이해하기 어려우므로, 평소에는 `미사용 이미지 확인`, 해당 화면 안에서만 `미사용 이미지 일괄 삭제`로 바뀌는 점진적 동작이 더 낫다고 판단했다.
+
+## 2026-04-06 v1.4.84
+- 대체된 원본 아이템은 운영상 이미 교체 완료된 이력이므로, 현재 저장본에서 같은 item id 사용량이 남아 있더라도 개별 삭제를 막아 두는 쪽보다 명시적으로 정리 가능하게 두는 편이 더 맞다고 판단했다.
+- 또 관리자 목록에서 보이는 `미사용` 기준과 실제 일괄 삭제 API 기준이 다르면 운영자가 버튼 상태를 신뢰하기 어려워지므로, 둘은 반드시 같은 조건으로 맞추기로 정리했다.
+- 마지막으로 업로드 파일은 하나의 레코드가 없어졌다고 곧바로 지우기보다, 전체 참조를 다시 확인한 뒤 정말 고아 파일일 때만 삭제하는 방식이 더 안전하다고 판단했다.
+
+## 2026-04-06 v1.4.83
+- 대체 이력이 쌓이기 시작하면 일반 사용자 업로드 목록 안에 섞여 보이는 것보다, 운영자가 후속 검수와 정리를 위해 `대체된 항목만` 따로 모아 보는 필터가 있는 편이 더 실용적이라고 판단했다.
+
+## 2026-04-06 v1.4.82
+- 원본 A를 보존하더라도 실제 저장본이 계속 A의 item id를 쓰는 구조라면, 대체/복구는 `custom_items` 레코드 자체를 바꾸는 방식보다 “그 item id가 참조되는 보드 표시 데이터(src/label)만 바꾸는 방식”이 더 자연스럽다고 판단했다.
+- 또 대체된 원본은 집계상 사용량이 남더라도 운영 의미상 이미 정리 가능한 이력이므로, `미사용 아이템 일괄 삭제`에서 제외하면 오히려 계속 쌓이게 된다. 그래서 대체 이력 아이템은 예외적으로 미사용 정리 대상으로 포함하는 쪽이 맞다고 정리했다.
+
+## 2026-04-06 v1.4.81
+- 원본 보존을 하더라도 실제 `custom_items.src`와 `label`까지 대체 대상 값으로 덮어쓰면 관리자 입장에서는 “원본을 남겼다”기보다 “같은 새 이미지가 두 번 보이는 상태”로 읽히므로, 원본 아이템 레코드는 실제 이미지/라벨을 그대로 유지하고 참조 이동 대상에서만 제외하는 편이 맞다고 정리했다.
+- 즉 대체 이력 메타(`어떤 아이템으로 대체됐는지`)와 원본 본문 데이터(`원래 A 이미지/이름`)는 분리해서 보존해야, 이후 복구나 검수 기준으로 의미가 살아난다고 판단했다.
+
+## 2026-04-06 v1.4.80
+- 이미지 대체 직후 원본 사용자 아이템을 완전히 지워버리면 관리자 입장에서는 “왜 바꿨는지”, “나중에 정리해도 되는지”를 다시 확인할 근거가 사라지므로, 참조 이동과 원본 보존을 분리하는 편이 운영 흐름에 더 맞다고 판단했다.
+- 다만 대체 완료된 원본까지 별도 보호 대상으로 빼면 라이브러리 정리가 끝없이 쌓일 수 있으므로, 원본은 `대체됨` 상태로 계속 보이게 하되 이미 미사용인 이상 `미사용 아이템 일괄 삭제`와 개별 삭제로 언제든 정리할 수 있게 두는 쪽이 균형이 맞는다고 정리했다.
+
+## 2026-04-06 v1.4.79
+- 관리자 대체 모달은 열자마자 현재 라이브러리 결과를 그대로 쏟아내면 “같은 보드 안의 비슷한 항목을 고르는 화면”처럼 읽히기 쉬우므로, 검색 전에는 후보를 비워 두고 운영자가 의도적으로 찾은 뒤 고르는 방식이 더 분명하다고 판단했다.
+- 또 사용자 업로드 A를 F로 대체했을 때 관리자 목록에 F가 두 장 보이면 “참조 이동”보다 “복제 생성”처럼 느껴지므로, 사용자 업로드 대체는 참조를 옮긴 뒤 원본 레코드 자체를 정리해 결과적으로 목표 이미지 한 장만 남는 쪽이 운영 기대와 더 잘 맞는다고 정리했다.
+
+## 2026-04-06 v1.4.78
+- 사용자 업로드 이미지의 “같은 캐릭터인데 파일만 다른 경우”는 자동 판별하려 들수록 오탐 위험이 커지므로, 관리자 모달에서 대상 이미지를 직접 검색·선택하는 수동 치환 흐름으로 시작하는 편이 가장 안전하다고 판단했다.
+- 이때 `src`만 바꾸고 기존 라벨을 남기면 운영자가 통합한 뒤에도 표기가 제각각 남을 수 있으므로, 치환 대상의 `라벨`을 기준으로 사용자 업로드 행과 저장된 티어표/요청 스냅샷 내부 라벨까지 함께 맞춰 주는 편이 운영 목적에 더 부합한다고 정리했다.
+
+## 2026-04-06 v1.4.77
+- 작성자 프로필 화면의 공개 티어표 카드는 같은 계열의 다른 목록 뷰와 거의 동일한 마크업을 쓰고 있었지만, `overflow: hidden`과 일부 최소 너비 제약이 빠져 있어 긴 제목/메타/썸네일이 카드 라운드 경계 안에서 안정적으로 잘리지 못한다고 판단했다.
+- 또 공유용 프리뷰는 “완성된 티어표 보드”를 보여주는 화면이므로, 편집 중 보조 영역인 미사용 풀까지 노출하면 실제 배치 결과보다 산만해질 수 있어 프리뷰에서는 보드에 배치된 아이템만 노출하는 쪽이 더 일관된다고 정리했다.
+
+## 2026-04-03 v1.4.76
+- 프리뷰용 `viewerSidebar__section`은 데스크톱 오른쪽 레일에서 하단 액션 카드처럼 보이게 하려고 `margin-top: auto`를 갖고 있었지만, 모바일 전체 화면 overlay에서는 이 규칙이 카드를 바닥으로 밀어 과도하게 붙은 인상을 만들 수 있다고 판단했다.
+- 게다가 `localRightRailRoot`가 최소 높이 100%를 유지한 채 상위 콘텐츠 컨테이너도 flex 남은 높이를 채우면, 하단 footer 영역과 Teleport 콘텐츠의 시각적 쌓임이 어색해질 수 있으므로 모바일 overlay에서는 콘텐츠 컨테이너를 내용 높이 기준으로 풀어 footer가 자연스럽게 아래로 따라오게 정리했다.
+
+## 2026-04-03 v1.4.75
+- 데스크톱/태블릿에서는 오른쪽 레일을 폭이 정해진 서랍 패널처럼 여는 게 맞지만, 모바일에서는 같은 폭 규칙을 유지하면 오히려 “오른쪽에서 덜 열린 반쪽 패널”처럼 보여 하단 공간까지 어색해질 수 있다고 판단했다.
+- 그래서 모바일 한정으로 오른쪽 레일 overlay를 전체 화면 패널로 바꾸고, 공유/복사 같은 하단 액션이 기기 하단 UI나 safe-area에 붙어 잘리지 않도록 내부 바디 패딩을 더 넉넉하게 두는 쪽으로 정리했다.
+
+## 2026-04-03 v1.4.74
+- 모바일에서는 `workspaceBody` 자체가 카드처럼 배경색을 가지는 것보다, 바깥 앱 셸 배경 위에 각 화면의 실제 카드/섹션만 떠 있는 편이 시각 구조가 더 명확하다고 판단했다.
+- 특히 `workspaceBody`가 좌우 마진을 가진 상태로 별도 배경색을 칠하면 “내용과 무관한 중간 레이어 박스”처럼 보일 수 있으므로, 모바일 한정으로 공통 워크스페이스 배경을 투명 처리해 불필요한 레이어감을 줄이는 쪽으로 정리했다.
+
+## 2026-04-03 v1.4.73
+- 모바일 `appShell`은 PC처럼 좌우 3열이 아니라 위쪽 레일과 아래쪽 본문이 세로로 쌓이는 2행 구조이므로, 열 정의만 1fr로 바꾸고 행 정의를 비워두면 암묵 그리드 행이 남는 높이를 늘려 본문이 아래로 밀려 보일 수 있다고 판단했다.
+- 이 문제는 각 화면 본문을 개별 조정하기보다 모바일 셸 컨테이너에서 첫 행은 `auto`, 본문 행은 `minmax(0, 1fr)`로 고정하고 전체 콘텐츠 정렬을 위쪽으로 붙이는 편이 공통 회귀를 가장 작게 되돌리는 방법이라고 정리했다.
+
+## 2026-04-03 v1.4.72
+- 모바일 상단 레일은 왼쪽 유저 카드 영역과 오른쪽 패널 토글 버튼이 같은 시각적 간격 체계를 가져야 전체 셸이 덜 비뚤어져 보이므로, 모바일에서만 `railHeader` 좌우 패딩을 본문 카드 여백보다 조금 넓은 `20px`로 맞추는 편이 낫다고 판단했다.
+- 오른쪽 레일 토글 아이콘이 모바일에서 테두리 없는 아이콘만 보이면 왼쪽 네비 토글 버튼과 컴포넌트 문법이 달라 보이므로, 모바일 한정으로 같은 버튼형 배경/테두리/라운드를 적용해 조작 가능한 컨트롤처럼 통일하는 쪽으로 정리했다.
+
+## 2026-04-03 v1.4.71
+- 모바일에서 공통 본문 하단이 딱 붙어 보이는 문제는 로그인 화면 하나만 고치는 것보다 `workspaceBody` 공통 하단 여백을 safe-area까지 포함해 보강하는 편이 이후 모든 본문 화면에 일괄 적용되어 유지보수상 낫다고 판단했다.
+- 모바일 왼쪽 네비게이션은 데스크톱의 폭 축소형 접기와 목적이 다르므로, 기존 `leftRailCollapsed`를 억지로 재사용하기보다 `mobileLeftNavOpen` 상태를 분리하고 유저 카드 우측 버튼으로 검색/메뉴 묶음만 접는 방식이 더 자연스럽다고 정리했다.
+- 오른쪽 레일은 모바일에서 기본 자동 열림이 실제 조작 공간을 빼앗는 경우가 많으므로, 모바일 진입과 라우트 이동 시 기본 닫힘으로 두되 PC 레이아웃으로 돌아오면 다시 기본 열림을 복원하는 쪽으로 맞췄다.
+- 모바일 터치에서는 짧은 탭 선택과 드래그 시작이 같은 포인터 입력에서 충돌하기 쉬우므로, Sortable에 터치 전용 지연과 threshold를 둬 탭은 선택, 길게 누르고 움직이면 드래그가 되도록 의도를 분리했다.
+
+## 2026-04-03 v1.4.70
+- 카카오톡/디스코드/X 공유 미리보기는 대개 프런트 SPA 자바스크립트를 실행하기 전에 HTML 메타를 먼저 읽으므로, 기존 `index.html` 고정 메타를 프런트 런타임에서 바꾸는 방식만으로는 티어표별 썸네일/제목/설명을 안정적으로 보여주기 어렵다고 판단했다.
+- 현재 운영 구조가 프런트 Nginx 정적 서빙 + 백엔드 API 분리 형태이므로, 모든 SPA 경로를 SSR로 바꾸기보다 공유 버튼만 `/share/editor/...` 서버 렌더링 경로를 사용하게 하고, 이 경로에서 OG 메타를 만든 뒤 기존 `preview=1` 화면으로 넘기는 방식이 가장 작은 변경이라고 정리했다.
+- 다만 비공개 티어표의 제목/설명/썸네일이 외부 크롤러에게 노출되면 안 되므로, 공유 메타 생성은 공개 티어표이면서 URL의 주제 식별자와 실제 티어표 소속이 일치하는 경우에만 개별 메타를 사용하고, 그 외에는 서비스 기본 메타로 떨어지게 제한했다.
+
+## 2026-04-03 v1.4.69
+- 아이템 검색 실패가 라벨 누락이나 이벤트 문제처럼 보일 수도 있지만, 코드상 필터링 조건 자체는 단순했으므로 한글 입력/저장 문자열의 유니코드 정규형 차이까지 먼저 흡수하는 편이 더 안전하다고 판단했다.
+- 검색 시점에만 임시 보정하는 것보다, 검색어와 저장 라벨 비교를 같은 정규화 함수로 통일하고 커스텀 파일명 기반 기본 라벨 생성도 `NFC`로 맞춰 이후 신규 업로드 항목까지 같은 규칙을 타게 정리했다.
+
+## 2026-04-03 v1.4.68
+- 우클릭 복제 UX는 카드 영역과 썸네일 이미지 중 어디를 눌러도 같은 동작이어야 하므로, 개별 카드의 버블링 이벤트만 믿기보다 전역 캡처 단계에서 아이템 우클릭을 먼저 가로채는 방식이 더 안전하다고 판단했다.
+- 편집기에서는 아이템 이미지를 브라우저 기본 이미지처럼 드래그하거나 저장 메뉴로 여는 것보다 보드 조작이 우선이므로, 썸네일 이미지의 기본 드래그도 명시적으로 꺼두는 편이 맞다고 정리했다.
+
+## 2026-04-03 v1.4.67
+- 이미지 최적화는 해시 기반 중복 재사용을 하기 때문에, 프로필 아바타로 올린 이미지가 우연히 템플릿/사용자 아이템과 같은 `src`를 공유할 수 있다. 이때 자산 카드 쪽을 무조건 숨기면 “실제로는 프로필 이미지로 쓰이는데 관리자 필터에서 안 보이는 상태”가 생기므로, 아바타/썸네일 참조가 있는 `src`는 자산 카드도 유지하는 편이 맞다고 판단했다.
+
+## 2026-04-03 v1.4.66
+- 특정 템플릿은 같은 아이템을 조건별로 여러 칸에 동시에 배치해야 하므로, 기존 아이템을 직접 공유해서 재사용하기보다 우클릭으로 새 복제본을 만들어 미사용 풀에 넣는 방식이 더 자연스럽다고 판단했다.
+- 현재 티어표 저장 구조는 아이템 ID 기준으로 위치를 추적하므로, 복제본이 원본과 같은 ID를 쓰면 중복 배치가 불가능해진다. 따라서 복제 시 `dup-...` 형태의 새 ID를 발급해 원본과 복제본을 별도 인스턴스로 관리하기로 했다.
+
+## 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` 확인에서도 일정 간격으로 갱신해 실제 접속 흔적에 더 가깝게 유지하는 쪽으로 정리했다.
+- 관리자 회원 카드에서 팔로워/즐겨찾기 수치를 보더라도 실제 공개 프로필과 작성 글 구성을 바로 확인할 진입점이 없으면 운영 판단이 끊기므로, `회원 정보 수정` 옆에 `프로필 보기` 버튼을 같이 두는 편이 자연스럽다고 판단했다.
+
+## 2026-04-03 v1.4.54
+- 추천 티어표를 수동으로만 지정할 수 있어도, 운영자가 후보 자체를 찾지 못하면 실무상 큐레이션이 막히므로, 관리자 전체 티어표 목록에 받은 즐겨찾기 수를 직접 보여주고 즐겨찾기 많은 순/최소 즐겨찾기 필터를 먼저 붙이는 편이 맞다고 판단했다.
+- 누가 핵심 작성자인지 보는 기준도 작성 티어표 수 하나만으로는 부족하므로, 팔로워 수와 받은 즐겨찾기 수를 회원 관리 카드에 같이 노출하고 이 지표로 정렬할 수 있게 두는 쪽으로 정리했다.
+- 이메일 인증/재설정 메일이 들어간 뒤에는 운영자가 평소 화면에서 회원 비밀번호를 직접 덮어쓰는 버튼을 계속 보는 것이 과한 권한처럼 느껴질 수 있으므로, 서버 API는 최후 보루로 남기되 관리자 회원 카드의 비밀번호 초기화 UI는 숨기는 편이 맞다고 판단했다.
+
+## 2026-04-03 v1.4.53
+- 본인 티어표 복사 기능이 타인 티어표 전용 조건으로만 남아 있었지만, 실제 사용에서는 자기 작업본을 변형용 복사본으로 다시 만들고 싶은 경우도 많으므로 저장된 본인 티어표에도 복사 버튼을 여는 편이 맞다고 판단했다.
+- 편집 중 저장하지 않은 변경이 있는 상태에서 복사본을 만들 때는 마지막 저장본이 아니라 현재 화면 상태가 복사되기를 기대하기 쉬우므로, 본인 편집본 복사는 복사 직전에 현재 원본을 한 번 저장한 뒤 새 복사본을 만드는 쪽으로 정리했다.
+- 팔로우 기능은 처음부터 추천 알고리즘까지 섞기보다, 작성자 프로필과 팔로우 피드라는 명확한 사용자 경로를 먼저 열어두는 편이 제품 구조상 자연스럽다고 보고 `user_follows` 기반 1차 구현을 먼저 붙였다.
+- 작성자 프로필 진입점은 목록 카드 내부 작성자 클릭을 바로 분리하면 기존 카드 전체 클릭 문법과 충돌할 수 있으므로, 이번 단계에서는 티어표 편집/뷰어 우측 패널의 `작성자 프로필 보기`를 우선 진입점으로 두고 카드 내부 세부 클릭 분리는 후속 UX로 미루는 편이 안전하다고 판단했다.
+
+## 2026-04-03 v1.4.51
+- 불특정 다수가 만드는 공개 티어표를 전부 같은 선상에 두면 첫 화면 품질 편차가 너무 커질 수 있으므로, 주제별 목록 상단에 관리자 큐레이션 `추천 티어표` 섹션을 두고 아래 일반 공개 목록과 분리하는 편이 맞다고 판단했다.
+- 추천 선정은 처음부터 완전 자동화보다 운영자가 직접 지정/해제할 수 있는 수동 큐레이션을 먼저 넣는 편이 안전하므로, 좋아요 수 기반 자동 후보 필터와 팔로우 피드는 후속 작업으로 미루고 이번 릴리스에서는 추천 표시 구조와 관리자 토글만 먼저 완성했다.
+- 비공개 글이 추천 섹션에 올라가면 접근 정책이 꼬이므로, 추천 지정은 공개 글만 허용하고 공개글을 비공개로 바꾸면 추천 상태도 함께 해제하는 쪽으로 정리했다.
+
+## 2026-04-03 v1.4.49
+- 프로필 저장 실패를 하나의 일반 실패 메시지로만 보여주면 사용자가 “서버가 고장났나?”라고 오해하기 쉬우므로, 중복 닉네임/예약어 닉네임처럼 사용자가 직접 고칠 수 있는 입력 오류는 원인별 안내를 분리하는 편이 맞다고 판단했다.
+- 비밀번호를 잊은 사용자뿐 아니라 로그인 중인 사용자도 보안상 주기적으로 비밀번호를 직접 바꿀 수 있어야 하므로, 설정 화면에 현재 비밀번호 확인 기반 변경 폼을 추가하는 쪽으로 정리했다.
+- 비밀번호 재설정 링크는 로그인 세션이 남아 있어도 링크 토큰 자체의 목적이 우선이므로, `/login?resetToken=...` 진입 시에는 기존 자동 리다이렉트보다 재설정 폼 렌더링을 우선하는 편이 맞다고 판단했다.
+
+## 2026-04-03 v1.4.45
+- 실제 서비스에서는 남의 이메일 주소로 가입만 먼저 해두는 문제가 생길 수 있으므로, 일반 회원은 가입 직후 인증 메일을 거쳐야 로그인할 수 있게 하고 비밀번호 분실도 메일 토큰 기반으로 복구하는 구조가 필요하다고 판단했다.
+- 다만 초기 운영자가 바로 서비스를 띄울 수 있어야 하므로, 첫 번째 가입 계정만은 기존처럼 이메일 인증 없이 바로 최고 관리자 계정으로 활성화하는 예외를 유지하는 편이 맞다고 정리했다.
+- 발신 인프라는 우선 사용자가 준비한 Gmail 계정과 앱 비밀번호로 SMTP를 먼저 붙이고, 도메인 발신 주소와 SPF/DKIM/DMARC는 실제 발송 품질을 본 뒤 Cloudflare DNS에서 후속 정리하는 단계적 접근이 더 현실적이라고 판단했다.
+
+## 2026-04-03 v1.4.44
+- 공통 카피라이트 링크 색을 고정 민트색으로 두면 다크 모드에서는 잘 보이지만 라이트 모드에서 대비가 부족해질 수 있으므로, 테마 텍스트 색을 따라가게 하고 굵기로 링크 인지를 보완하는 편이 더 안정적이라고 판단했다.
+
+## 2026-04-03 v1.4.43
+- Vue Router에서 같은 컴포넌트가 유지된 채 `params/query`만 바뀌는 에디터 이동은 `onMounted()`만으로는 새 데이터를 다시 불러오지 못할 수 있으므로, 에디터 로딩을 라우트 값 watch 기반으로 옮기는 편이 맞다고 판단했다.
+- 복사본에서 원본으로 이동하는 액션은 사용자가 편집 중이던 내용을 잃을 수 있으므로, 저장하지 않은 변경이 감지되는 경우에는 바로 이동하지 않고 확인 모달로 한 번 끊어주는 쪽이 안전하다고 정리했다.
+
+## 2026-04-03 v1.4.42
+- 홈 템플릿 목록은 관리자가 아직 수동 순서를 건드리지 않은 신규 템플릿까지 이름순으로 섞이면 “새로 만든 항목이 앞에 보인다”는 운영 기대와 어긋나므로, 수동 순서가 없는 항목은 최신 생성순을 우선하는 정렬이 맞다고 판단했다.
+- 티어표 편집 조작은 드래그만으로도 충분하지만, 세밀한 이동이나 터치패드 환경에서는 클릭 선택 후 대상 셀 클릭 방식이 더 편할 수 있으므로 두 조작을 병행 지원하는 쪽으로 확장했다.
+- 다만 드래그 직후 click 이벤트가 이어서 들어오면 의도치 않은 재선택이 생길 수 있으므로, 드래그 시작 시 선택을 비우고 드래그 종료 직후 짧은 클릭 잠금을 두는 방식으로 충돌을 줄였다.
+
+## 2026-04-03 v1.4.41
+- 관리자 기본 아이템 업로드는 운영자가 한 번에 많은 캐릭터 이미지를 정리하는 작업이 잦으므로, 서버 개별 파일 제한뿐 아니라 한 요청당 업로드 개수와 프록시 본문 크기 제한도 같이 넉넉하게 올려두는 편이 맞다고 판단했다.
+- 다중 업로드가 프런트에서 한 번의 `FormData` 요청으로 묶여 나가는 구조라면, 백엔드 `multer`만 올리고 Nginx `client_max_body_size`를 그대로 두면 병목이 남을 수 있으므로 프런트 프록시 제한도 함께 상향하는 쪽으로 정리했다.
+
 ## 2026-04-03 v1.4.40
 - 공유 링크 진입 화면은 사용자가 조작 가능한 편집 화면보다 `뷰어 모드`로 명확히 분리하는 편이 안전하므로, 비로그인 사용자와 타인 티어표는 기본적으로 드래그 없는 완성본 열람 상태를 보여주기로 정리했다.
 - 공유 링크를 받은 비로그인 사용자도 다시 전달할 수 있어야 하므로 `공유하기`는 로그인 여부와 무관하게 뷰어 모드에서 열어두고, `내 티어표로 복사`는 로그인한 타인 열람자에게만 노출하는 쪽으로 권한을 나눴다.
@@ -569,6 +727,18 @@
 - 작성자가 자기 티어표를 직접 삭제할 수 있어야 관리 흐름이 완결되므로, `내 티어표` 화면에 삭제 기능을 추가하기로 결정했다.
 - 사용자 커스텀 이미지는 서버 용량을 계속 차지하므로, 참조가 하나도 남지 않은 이미지(미사용 항목)를 식별하고 관리자 화면에서 개별/일괄 정리할 수 있도록 하기로 결정했다.
 
+## 2026-04-03 v1.4.65
+- 운영 환경에서 루트 정적 favicon 요청이 계속 `403`으로 떨어지는 상황에서는 원인을 프록시/권한 계층에서 끝까지 추적하기보다, 브라우저 탭용 파비콘을 인라인 데이터 URL로 제공해 해당 요청 자체를 없애는 편이 더 단순하고 안정적이라고 판단했다.
+- 다만 iOS 홈 화면용 `apple-touch-icon.png`와 외부 공유용 `og-card.png`는 실제 파일이 필요하므로, 일반 브라우저 탭 favicon만 인라인 처리하는 선으로 범위를 제한했다.
+
+## 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,18 +7,18 @@
 
 ## `/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`
 - 화면 파일: `frontend/src/views/LoginView.vue`
-- 역할: 로그인/회원가입 전환, 첫 가입 안내
-- 연동 API: `GET /api/auth/meta`, `POST /api/auth/login`, `POST /api/auth/signup`
+- 역할: 로그인/회원가입 전환, 첫 가입 안내, 일반 회원가입 후 이메일 인증 안내와 인증 메일 재전송, 비밀번호 재설정 메일 요청, `?verifyToken=...` 인증 링크 처리, `?resetToken=...` 새 비밀번호 설정 처리
+- 연동 API: `GET /api/auth/meta`, `POST /api/auth/login`, `POST /api/auth/signup`, `POST /api/auth/email/verify`, `POST /api/auth/email/resend`, `POST /api/auth/password-reset/request`, `POST /api/auth/password-reset/confirm`
 
 ## `/me`
 - 화면 파일: `frontend/src/views/MyTierListsView.vue`
@@ -30,6 +30,16 @@
 - 역할: 즐겨찾기한 티어표 목록 조회, 검색/정렬, 라이브러리 카드형 표시, 편집 화면 이동, 즐겨찾기 상태 확인
 - 연동 API: `GET /api/tierlists/favorites/me`, `DELETE /api/tierlists/:id/favorite`
 
+## `/following`
+- 화면 파일: `frontend/src/views/FollowingFeedView.vue`
+- 역할: 팔로우한 작성자의 공개 티어표를 최신 업데이트순 카드 목록으로 모아보기, 제목/주제/작성자 검색, 티어표 상세 이동, 작성자 프로필 이동
+- 연동 API: `GET /api/users/following-feed`
+
+## `/users/:userId`
+- 화면 파일: `frontend/src/views/UserProfileView.vue`
+- 역할: 작성자 공개 프로필, 팔로워/팔로잉/공개 티어표 수 표시, 로그인 사용자의 팔로우/언팔로우 전환, 해당 작성자의 공개 티어표 목록 조회와 상세 이동
+- 연동 API: `GET /api/users/:userId`, `GET /api/users/:userId/tierlists`, `POST /api/users/:userId/follow`, `DELETE /api/users/:userId/follow`
+
 ## `/search`
 - 화면 파일: `frontend/src/views/SearchResultsView.vue`
 - 역할: 좌측 전역 검색 입력에서 넘긴 키워드로 공개 티어표 전체를 검색하고, 자체 검색 툴바 없이 `상단 썸네일 / 제목+좋아요 / 작성자+최종 수정일` 카드 목록으로 표시
@@ -37,17 +47,17 @@
 
 ## `/admin`
 - 화면 파일: `frontend/src/views/AdminView.vue`
-- 역할: 공통 우측 패널 대신 전용 `320px` 운영 패널을 사용해 `템플릿 관리 / 아이템 관리 / 티어표 관리 / 회원 관리` 탭과 검색·필터·빠른 작업을 우측에 배치하고, 중앙에는 선택된 템플릿 상세, 커스텀 아이템 목록, 템플릿 요청/전체 티어표, 회원 카드 등 실제 관리 대상만 표시, 기본 아이템 다중 드래그 앤 드롭 업로드, 기본 아이템 이름 수정, 사용자 커스텀 아이템 검색/페이지네이션/사용 횟수 확인/미사용 이미지 개별·일괄 삭제, 사용자 커스텀 아이템의 기본 템플릿 승격, 전체 티어표 검색/페이지네이션/공개 여부 확인/썸네일 클릭 기반 완성본 보기, 티어표의 추가 커스텀 아이템을 모달 기반으로 기존 템플릿 또는 새 템플릿에 가져오기, 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/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`
+- 역할: 공통 우측 패널 대신 전용 `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`
 - 화면 파일: `frontend/src/views/ProfileView.vue`
-- 역할: 프로필 표시, 작성자 닉네임 수정, 아바타 미리보기 후 저장, 설정 화면 하단 로그아웃 처리
-- 연동 API: `GET /api/auth/me`, `POST /api/auth/profile`
+- 역할: 넓은 화면에서는 왼쪽 프로필 정보 카드와 오른쪽 비밀번호 변경 카드로 나뉘는 설정 화면, 프로필 표시, 작성자 닉네임 수정, 아바타 미리보기 후 저장, 중복/예약어 닉네임 오류 안내, 현재 비밀번호 확인 기반 비밀번호 변경, 설정 화면 로그아웃 처리
+- 연동 API: `GET /api/auth/me`, `POST /api/auth/profile`, `POST /api/auth/password`
 
 ## 공통 레이아웃
 - 앱 셸 파일: `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` 푸터 안에서 항상 보이도록 유지하면서 아래쪽 패딩으로 여백을 확보한다.
 
 ## 백엔드 진입점
@@ -56,6 +66,8 @@
 - 로컬 DB 실행 설정: `docker-compose.yml`
 - 로컬 MariaDB 가이드: `docs/local-mariadb.md`
 - 인증 라우트: `backend/src/routes/auth.js`
+- 메일 발송 유틸: `backend/src/lib/mailer.js`
 - 주제 라우트: `backend/src/routes/topics.js`
 - 티어표 라우트: `backend/src/routes/tierlists.js`
+- 사용자/팔로우 라우트: `backend/src/routes/users.js`
 - 관리자 라우트: `backend/src/routes/admin.js`

docs/spec.md

@@ -8,7 +8,7 @@
 - 업로드 저장소: 로컬 파일 시스템(`backend/uploads/`)
 - 운영 배포: `frontend(Nginx 정적 서빙 + /api,/uploads 프록시) + backend + mariadb` Docker Compose 구조
 - NAS HTTPS 리버스 프록시 운영 시 프런트 Nginx는 백엔드로 `X-Forwarded-Proto: https`를 전달하고, Express 세션은 프록시 환경에서 `secure` 쿠키를 허용하도록 설정한다.
-- 프런트 파비콘은 운영 정적 파일 차단 영향을 줄이기 위해 `index.html`의 인라인 데이터 URL로 제공한다.
+- 프런트 브라우저 탭 파비콘은 운영 정적 파일 차단 영향을 줄이기 위해 `index.html`의 인라인 SVG 데이터 URL로 제공하고, iOS 홈 화면용 `apple-touch-icon.png`와 공유 미리보기용 `og-card.png`만 정적 파일로 유지한다.
 - 프런트 앱 셸은 `좌측 내비게이션 / 중앙 워크스페이스 / 우측 컨텍스트 패널` 3단 구조로 재정의되었고, `preview=1` 모드에서도 같은 셸을 유지한 채 중앙 본문만 완성본 프리뷰로 렌더링한다.
 - 좌측 패널은 `248px`, 우측 패널은 `320px` 기준 폭을 사용하며, 우측 패널은 상단 토글 버튼으로 접고 펼칠 수 있다.
 - 좌측 패널은 필요 시 축소형 레일로 접을 수 있으며, 접힌 상태에서는 아이콘 중심 내비게이션과 축약된 바로가기만 유지한다.
@@ -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 참조 치환을 함께 처리한다.
 
 ## 화면 구조
 - 좌측 패널
@@ -45,7 +47,7 @@
   - 좌우 레일의 주요 CTA는 스크롤되는 본문과 분리된 하단 `56px` 액션 영역에 배치한다.
   - 하단 액션은 화면 바닥에 바로 붙지 않도록 푸터 내부에 추가 하단 여백을 둔다.
   - 홈 화면 기준 우측 패널은 임시 정보 카드 여러 개보다 핵심 CTA 하나만 남겨, 시안처럼 단순한 보조 레일 역할을 우선 유지한다.
-  - 광고 영역은 상단 헤더와 시각적으로 너무 붙지 않도록 `78px` 상단 여백을 두고, 하단 카피라이트는 중앙 정렬된 공통 footer로 표시한다.
+  - 광고 영역은 상단 헤더와 시각적으로 너무 붙지 않도록 `78px` 상단 여백을 두고, 하단 카피라이트는 중앙 정렬된 공통 footer로 표시한다. 카피라이트 링크는 다크/라이트 테마 모두에서 읽히도록 고정 민트색 대신 테마 텍스트 색과 굵기를 사용한다.
 - 티어표 편집 화면
   - 공통 우측 패널 대신 전용 로컬 편집 패널을 사용한다.
   - 공통 `workspaceBody` 카드 컨테이너를 벗기고, 중앙 보드 영역은 메인 컬럼에, 우측 `320px` 편집 패널은 공통 셸의 세 번째 컬럼 aside에 배치한다.
@@ -64,20 +66,43 @@
   - `email`: string
   - `nickname`: string
   - `passwordHash`: string
+  - `emailVerified`: boolean
   - `isAdmin`: boolean
   - `avatarSrc`: string
+  - `lastLoginAt`: number
   - `createdAt`: number
-- `games`
+  - 관리자 목록 집계 응답에서는 `tierListCount`, `followerCount`, `receivedFavoriteCount`, `lastLoginAt`, `recentActivityAt`도 함께 내려준다.
+- `emailVerificationTokens`
   - `id`: string
+  - `userId`: string
+  - `tokenHash`: string
+  - `expiresAt`: number
+  - `consumedAt`: number
+  - `createdAt`: number
+- `passwordResetTokens`
+  - `id`: string
+  - `userId`: string
+  - `tokenHash`: string
+  - `expiresAt`: number
+  - `consumedAt`: number
+  - `createdAt`: number
+- `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
@@ -88,12 +113,16 @@
 - `tierLists`
   - `id`: string
   - `authorId`: string
-  - `gameId`: string
+  - `topicId`: string
+    - DB에는 내부 `topics.id`를 저장하고, API 응답에는 공개 경로용 `topicSlug`도 함께 내려준다.
   - `title`: string
   - `thumbnailSrc`: string
     - 사용자가 직접 지정하지 않으면 저장 시 티어표 대표 아이템 이미지로 자동 채운다.
   - `description`: string
   - `isPublic`: boolean
+  - `isFeatured`: boolean
+  - `featuredAt`: number
+  - `featuredBy`: string
   - `groups`: `{ id, name, itemIds[] }[]`
   - `pool`: `{ id, src, label, origin }[]`
   - `createdAt`: number
@@ -102,25 +131,63 @@
   - `userId`: string
   - `tierListId`: string
   - `createdAt`: number
-- `gameSuggestions`
-  - `id`: string
-  - `name`: string
+- `userFollows`
+  - `followerId`: string
+  - `followingId`: string
   - `createdAt`: number
+- `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
 - 인증
   - `POST /api/auth/signup`
+    - 첫 관리자 계정은 바로 로그인 세션을 만들고, 이후 일반 계정은 인증 메일 발송 후 `verificationRequired` 상태를 반환한다.
   - `POST /api/auth/login`
+    - 이메일 인증이 끝나지 않은 계정은 `email_unverified`로 차단한다.
   - `POST /api/auth/logout`
   - `GET /api/auth/me`
+    - 로그인 세션이 살아 있는 사용자의 `last_login_at`을 주기적으로 갱신해, 회원 관리에서 `마지막 접속일`을 따로 볼 수 있게 한다.
   - `GET /api/auth/meta`
   - `POST /api/auth/profile`
+  - `POST /api/auth/password`
+    - 로그인한 사용자가 현재 비밀번호를 확인한 뒤 새 비밀번호로 직접 변경한다.
+  - `POST /api/auth/email/verify`
+    - `login?verifyToken=...` 링크에서 받은 토큰으로 이메일 인증을 완료하고 바로 로그인 세션을 만든다.
+    - 인증 완료 직후 로그인 세션이 열리면서 `last_login_at`도 함께 갱신한다.
+  - `POST /api/auth/email/resend`
+    - 미인증 계정의 인증 메일을 다시 발송한다.
+  - `POST /api/auth/password-reset/request`
+    - 입력한 이메일로 비밀번호 재설정 링크를 발송한다.
+  - `POST /api/auth/password-reset/confirm`
+    - `login?resetToken=...` 링크의 토큰과 새 비밀번호로 비밀번호를 재설정하고 바로 로그인 세션을 만든다.
+    - 재설정 완료 직후 로그인 세션이 열리면서 `last_login_at`도 함께 갱신한다.
 - 주제
   - `GET /api/topics`
   - `GET /api/topics/:topicId`
+    - `:topicId`는 공개 URL에서는 보통 `slug`를 받지만, 내부 ID를 넘겨도 같은 템플릿을 찾을 수 있게 서버가 레코드를 해석한다.
 - 티어표
   - `GET /api/tierlists/public`
-    - `topicId` 없이 `q`만 전달하면 전체 공개 티어표 검색에 사용한다.
+    - `featuredTierLists`와 일반 공개 `tierLists`를 분리해서 반환한다.
+    - `topicId`에는 주제 `slug`를 우선 전달하며, `topicId` 없이 `q`만 전달하면 전체 공개 티어표 검색에 사용한다.
   - `GET /api/tierlists/me`
   - `GET /api/tierlists/favorites/me`
   - `GET /api/tierlists/:id`
@@ -131,13 +198,29 @@
   - `POST /api/tierlists/thumbnail`
   - `POST /api/tierlists/custom-items`
   - `POST /api/tierlists`
+- 사용자/팔로우
+  - `GET /api/users/following-feed`
+    - 로그인한 사용자가 팔로우한 작성자의 공개 티어표를 최신 업데이트순으로 조회한다.
+  - `GET /api/users/:userId`
+    - 작성자 공개 프로필, 공개 티어표 수, 팔로워/팔로잉 수, 현재 로그인 사용자의 팔로우 여부를 반환한다.
+  - `GET /api/users/:userId/tierlists`
+    - 해당 작성자의 공개 티어표 목록을 반환한다.
+  - `POST /api/users/:userId/follow`
+  - `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개`까지 업로드할 수 있고, 별도 라벨이 없으면 파일명 기준으로 기본 아이템 이름을 만든다.
   - `PATCH /api/admin/templates/:templateId/items/:itemId`
   - `GET /api/admin/tierlists`
+    - `sort=recent|created|favorites`, `minFavorites`, `topicId`, `q`, `page`, `limit`으로 인기 티어표 후보를 정렬/필터링할 수 있다.
+  - `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`
@@ -145,10 +228,13 @@
   - `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`
   - `GET /api/admin/users`
+    - `sort=recent|lastLogin|created|tierlists|followers|favorites`, `direction=asc|desc`로 회원을 콘텐츠 활동/마지막 접속/작성량/팔로워/받은 즐겨찾기 기준으로 정렬한다.
   - `PATCH /api/admin/users/:userId`
   - `PATCH /api/admin/users/:userId/password`
   - `DELETE /api/admin/users/:userId`
@@ -163,36 +249,54 @@
 - 아이템 미리보기는 반응형 환경에서도 최대 `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`)를 역추적해 프로필/썸네일 여부를 분류한다. 실제 템플릿 기본 항목은 `템플릿 아이템`, 사용자 커스텀 항목은 `사용자 아이템` 배지를 사용한다.
+- 같은 이미지 `src`가 해시 중복 재사용으로 템플릿 아이템/사용자 아이템과 프로필 아바타 또는 썸네일 자산에서 동시에 공유되더라도, 아바타/썸네일로 참조 중인 `src`는 자산 카드도 함께 유지해 `프로필 이미지`, `썸네일 이미지`, `전체 이미지` 필터에서 누락되지 않게 한다.
 - 관리자 화면에는 별도 `티어표 관리` 탭이 있으며, 내부에서 `템플릿 요청 관리 / 전체 티어표 관리`를 분리해 볼 수 있고, 확인용 완성본은 탐색 UI 없는 preview 전용 모달로 연다.
+- `전체 티어표 관리`에서는 공개 티어표를 `추천 지정 / 추천 해제`할 수 있고, 추천 지정된 티어표는 주제별 공개 목록 상단의 `추천 티어표` 섹션에 먼저 노출된다. 비공개 티어표는 추천 지정할 수 없고, 추천글을 비공개로 바꾸면 추천 상태도 함께 해제된다.
+- `전체 티어표 관리` 카드에는 받은 즐겨찾기 수를 함께 보여주며, 우측 운영 패널에서 즐겨찾기 많은 순 정렬과 최소 즐겨찾기 수 필터로 추천 후보를 좁힐 수 있다.
 - `티어표 관리` 탭의 추가 아이템은 작은 그리드 카드로 표시하고, 클릭 시 `기존 템플릿에 추가 / 새 템플릿 만들기` 모달을 통해 목적지를 선택한다.
 - `티어표 관리` 탭에서는 티어표 안의 커스텀 아이템을 개별 또는 일괄로 기존 게임 템플릿에 복제할 수 있다.
-- `freeform` 티어표는 관리자 화면에서 새 게임 ID/이름을 입력해 새로운 게임 템플릿으로 복제 생성할 수 있다.
+- `freeform` 티어표는 관리자 화면에서 새 템플릿 slug/이름을 입력해 새로운 템플릿으로 복제 생성할 수 있다. 내부 ID는 서버가 자동 생성하므로 운영자가 직접 입력하지 않는다.
 - 관리자 티어표 관리 상단에는 사용자가 보낸 템플릿 등록/업데이트 요청 목록이 별도로 표시되며, 여기서 승인/반려를 바로 처리할 수 있다.
 - 관리자 템플릿 요청 목록에서 `반려 후 숨김`을 누르면 해당 요청은 pending 목록에서 즉시 제외된다.
 - 관리자 화면에서는 회원 이메일/닉네임/권한 수정, 비밀번호 초기화, 계정 삭제가 가능하다.
 - 단, 일반 운영자는 최고 관리자 계정의 프로필 이미지/회원 정보/비밀번호/삭제 버튼을 사용할 수 없고, 최고 관리자만 다른 관리자 권한을 변경할 수 있다.
 - 관리자 회원 정보 수정은 운영상 필요한 경우 예약어 닉네임도 저장할 수 있지만, 일반 회원가입과 개인 프로필 수정에서는 운영자 사칭성 예약어 닉네임을 계속 차단한다.
-- 회원 관리 카드에는 아바타, 작성 티어표 수, 최근 활동 시각을 함께 표시한다.
+- 회원 관리 카드에는 아바타, 작성 티어표 수, 팔로워 수, 받은 즐겨찾기 수, 최근 콘텐츠 활동, 마지막 접속일을 함께 표시한다.
+- 운영자는 회원 목록을 작성 티어표 수뿐 아니라 팔로워 수와 받은 즐겨찾기 수 기준으로도 정렬할 수 있어, 핵심 작성자를 더 빠르게 찾을 수 있다.
+- 마지막 접속일은 로그인/세션 확인 기준, 최근 콘텐츠 활동은 작성한 티어표의 마지막 수정일 기준으로 분리해서 보여준다. 따라서 장기 미접속 계정 정리 판단은 마지막 접속일을 우선 사용하고, 콘텐츠 기여가 최근인지 볼 때는 최근 콘텐츠 활동을 사용한다.
+- 회원 카드의 `프로필 보기` 버튼은 해당 회원의 `/users/:userId` 공개 프로필 화면으로 이동해, 팔로워/공개 티어표 현황을 관리자 화면 밖에서도 바로 확인할 수 있게 한다.
+- 회원 비밀번호를 운영자가 임의로 덮어쓰는 기능은 비상 상황용 API로만 유지하고, 일반 회원 관리 카드에서는 비밀번호 초기화 버튼과 모달을 숨긴다. 평소 사용자 비밀번호 변경은 이메일 재설정 메일과 설정 화면 직접 변경을 우선 사용한다.
 
 ## 티어표 접근 메모
 - `new` 작성 경로는 로그인한 사용자만 진입할 수 있다.
 - 공유 링크로 여는 `preview=1` 화면은 `뷰어 모드`로 취급하며, 드래그/행열 편집/저장 같은 편집 UI 없이 완성본만 렌더링한다.
 - 비로그인 사용자나 작성자 본인이 아닌 로그인 사용자는 저장된 티어표를 기본적으로 뷰어 모드로 열람하며, 일반 편집 URL로 직접 진입해도 소유자가 아니면 `preview=1` 주소로 자동 전환된다.
 - 비로그인 사용자도 뷰어 모드 우측 레일의 `공유하기` 버튼으로 현재 공유 링크를 복사할 수 있다.
-- 로그인한 타인 티어표 열람자는 뷰어 모드 우측 레일에서 `내 티어표로 복사`를 사용할 수 있고, 작성자 본인은 `수정 모드로 전환`을 사용할 수 있다.
+- 로그인한 사용자는 뷰어 모드 우측 레일에서 저장된 티어표를 복사할 수 있고, 타인 티어표면 `내 티어표로 복사`, 본인 티어표면 `복사본 만들기` 문구를 사용한다. 작성자 본인은 `수정 모드로 전환`도 사용할 수 있다.
 - 작성자 본인이 일반 편집 화면에서 저장된 본인 티어표를 보고 있을 때는 우측 패널의 `뷰어 모드로 보기`로 공유 화면 형태를 바로 확인할 수 있다.
+- 편집/뷰어 우측 패널의 `작성자 프로필 보기`로 해당 작성자의 공개 프로필과 공개 티어표 목록을 열 수 있고, 로그인 상태에서는 작성자 프로필에서 팔로우/언팔로우를 전환할 수 있다.
+- `/users/:userId` 공개 프로필 화면 상단 헤더는 고정 제목 `사용자 프로필`과 안내 문구를 보여주고, 실제 닉네임/아바타는 본문 프로필 카드에서만 표시한다. 이메일 앞부분에서 파생된 `@accountName`은 사용자가 직접 설정한 핸들이 아니므로 프로필 UI에 노출하지 않는다.
+- 같은 `TierEditorView` 안에서 `topicId / tierListId / preview` 라우트 값만 바뀌어도 화면이 이전 티어표 데이터에 남지 않도록, 라우트 변경마다 에디터 상태를 다시 로드한다.
+- 복사한 티어표 상단의 `원본` 링크를 누르면 원본 티어표로 이동하며, 편집 모드에서 저장하지 않은 변경이 있으면 이동 전에 `저장 없이 이동` 확인 모달을 먼저 띄운다.
+- 본인 티어표도 저장된 상태라면 편집/뷰어 우측 패널에서 복사본을 만들 수 있고, 편집 중 저장하지 않은 수정이 남아 있으면 복사 직전에 현재 수정본을 먼저 저장해 최신 상태 기준 복사본을 만든다.
 - 비공개 티어표라도 관리자는 편집 화면에서 완성본을 열람할 수 있다.
 - 공개 티어표는 목록과 상세 화면에서 즐겨찾기 토글 및 개수를 함께 표시한다.
 - 카드형 목록에서는 즐겨찾기 수/상태만 표시하고, 실제 토글은 상세 화면에서 처리한다.
 - 공개 티어표 목록은 현재 게임 기준으로 제목/작성자 검색을 지원한다.
+- 주제별 공개 티어표 화면은 관리자 추천글을 상단 `추천 티어표` 섹션으로 먼저 보여주고, 일반 공개 목록은 아래 `전체 공개 티어표` 섹션으로 분리해 중복 없이 렌더링한다. 추천 섹션은 최대 16개까지 표시한다.
 - `내 즐겨찾기` 화면에서는 즐겨찾기한 순, 최신 업데이트순, 인기순 정렬을 제공한다.
 - 커스텀 이미지 추가는 다중 파일 선택과 드래그 앤 드롭을 모두 지원한다.
 - 사용자가 직접 추가한 커스텀 아이템 이름은 편집 화면 우측 목록에서 정리할 수 있고, 저장 시 원본 커스텀 아이템 라벨과 함께 동기화된다.
 - 티어 행은 기본 5단으로 시작하지만, 사용자가 직접 추가하거나 제거할 수 있다.
 - 티어 행에 넣은 아이템은 작은 제거 버튼으로 다시 우측 아이템 풀로 되돌릴 수 있다.
+- 편집 가능한 티어표에서는 아이템을 드래그로 옮길 수 있고, 아이템을 클릭해 선택한 뒤 원하는 셀이나 아이템 풀 빈 영역을 클릭하는 방식으로도 위치를 바꿀 수 있다.
+- 클릭 배치 모드에서 선택된 아이템은 파란 포커스 테두리로 표시하며, 드래그를 시작하면 선택 상태를 해제하고 드래그 직후 짧은 클릭 입력은 무시해 드래그/클릭 조작이 섞이지 않게 한다.
+- 보드 칸이나 미사용 아이템 풀의 아이템을 우클릭하면 `아이템 복제` 메뉴가 열리고, 실행 시 같은 이미지/이름/출처를 가진 새 아이템 인스턴스를 미사용 풀 맨 앞에 추가한다. 복제본은 `dup-...` 형태의 새 ID를 쓰므로 원본과 복제본을 서로 다른 칸에 동시에 배치할 수 있다.
 - 기존 저장 티어표/복사본을 수정 가능한 상태로 다시 열 때는 저장본의 그룹/풀을 먼저 복원하고, 이후 현재 템플릿에 새로 추가된 기본 아이템만 미사용 풀 끝에 병합한다.
 - 관리자 템플릿에서 삭제된 기본 아이템이라도 이미 저장된 티어표의 그룹/풀에 포함되어 있던 항목은 자동 제거하지 않고 그대로 보존한다.
 - 신규 티어표의 공개 여부 기본값은 `ON`이며, 기존 티어표는 편집 화면과 `내 티어표` 목록에서 직접 삭제할 수 있다.
@@ -216,11 +320,14 @@
 - 저장/삭제/가져오기 같은 사용자 행동 피드백은 전역 우측 상단 토스트로 표시한다.
 - 전역 토스트는 동일 메시지/타입이 연속 발생하면 하나로 합쳐 카운트를 올리고, 종료 시 짧은 페이드아웃 애니메이션을 사용한다.
 - 홈 게임 목록은 관리자 상단 고정 순서가 있으면 그 순서를 먼저 적용하고, 그 외 게임은 최근 생성순으로 뒤에 이어진다.
+- 홈 주제 템플릿 목록의 실제 정렬 우선순위는 `즐겨찾기 여부 → 관리자 수동 순서(displayRank) → 최신 생성순(createdAt DESC) → 이름순`이다.
 - `커스텀 티어표 만들기`는 카드가 아니라 홈 우측 상단 버튼으로 진입한다.
 
 ## 업로드 제한 메모
 - 프로필 아바타 업로드는 파일당 최대 `3MB`다.
-- 관리자 게임 썸네일/기본 아이템 업로드와 사용자 커스텀 이미지 업로드는 파일당 최대 `6MB`다.
+- 관리자 템플릿 썸네일/기본 아이템 업로드는 파일당 최대 `20MB`다.
+- 사용자 커스텀 이미지 업로드는 파일당 최대 `6MB`다.
+- 운영 프런트 Nginx는 다중 이미지 업로드 한 번의 요청 본문을 최대 `1024MB`까지 허용한다.
 - 현재는 업로드 전에 이미지 리사이즈/압축을 하지 않고 원본 파일을 그대로 저장한다.
 
 ## 운영 환경 변수
@@ -238,6 +345,22 @@
   - `TRUST_PROXY`: 프록시 홉 수
   - `SESSION_COOKIE_SECURE`: `true`면 HTTPS 전용 쿠키
   - `SESSION_COOKIE_SAME_SITE`: 기본 `lax`
+  - `APP_ORIGIN`: 이메일 인증/비밀번호 재설정 링크를 만들 때 사용할 서비스 기준 주소
+  - `SMTP_HOST`: 메일 서버 호스트, Gmail SMTP 사용 시 보통 `smtp.gmail.com`
+  - `SMTP_PORT`: 메일 서버 포트, Gmail SSL SMTP 기준 보통 `465`
+  - `SMTP_SECURE`: `true`면 SMTP SSL/TLS 연결을 사용
+  - `SMTP_USER`: 발신용 Gmail 계정
+  - `SMTP_PASS`: Gmail 앱 비밀번호
+  - `SMTP_FROM`: 실제 메일 From 주소, 비워두면 `SMTP_USER`를 기본값으로 사용한다
+
+## 회원 인증 메모
+- 첫 번째 가입 계정은 운영 초기 부트스트랩을 위해 이메일 인증 없이 바로 최고 관리자 계정으로 활성화한다.
+- 두 번째 이후 일반 회원가입은 가입 직후 로그인 세션을 만들지 않고, 인증 메일 링크를 눌러 `email_verified=1`이 된 뒤에만 로그인할 수 있게 한다.
+- 인증 메일/비밀번호 재설정 메일 토큰은 원문을 DB에 저장하지 않고 SHA-256 해시만 저장하며, 새 토큰을 발급할 때는 같은 사용자의 이전 미사용 토큰을 먼저 만료 처리한다.
+- 이메일 인증 토큰은 24시간, 비밀번호 재설정 토큰은 1시간 유효 기간을 사용한다.
+- 비밀번호 재설정 링크로 새 비밀번호를 저장한 사용자는 같은 메일 주소를 확인한 것으로 보고, 기존에 미인증 상태였더라도 저장과 함께 이메일 인증을 완료 처리한다.
+- 로그인한 상태로도 `login?resetToken=...` 재설정 링크를 열 수 있으며, 이때는 기존 로그인 세션이 있어도 자동으로 내 티어표 화면으로 보내지 않고 새 비밀번호 입력 화면을 먼저 보여준다.
+- 설정 화면의 직접 비밀번호 변경은 현재 비밀번호가 맞는지 먼저 확인하고, 맞지 않으면 `invalid_current_password`로 차단한다.
 
 ## 운영 배포 메모
 - 프로덕션 컴포즈 파일은 [docker-compose.prod.yml](/Users/bicute/Desktop/zenn.dev/tier-cursor/docker-compose.prod.yml)이다.

docs/todo.md

@@ -1,6 +1,61 @@
 # 할 일 및 이슈
 
 ## 단기 확인
+- `v1.4.68`에서 아이템 우클릭 처리를 `window` 캡처 단계로 보강했으므로, 보드에 배치된 아이템/미사용 풀 아이템/아이템 썸네일 이미지 위에서 각각 우클릭했을 때 브라우저 기본 메뉴 대신 `아이템 복제` 메뉴가 바로 뜨는지 QA한다.
+- `v1.4.67`에서 같은 `src`가 프로필 아바타와 템플릿/사용자 아이템으로 동시에 쓰여도 자산 카드를 유지하도록 바꿨으므로, 운영 관리자 화면의 `전체 이미지`와 `프로필 이미지` 필터에서 실제 아바타가 보이고 상세 모달의 공유 참조 목록도 자연스럽게 읽히는지 QA한다.
+- 아이템 우클릭 복제 기능을 추가했으므로, 템플릿 아이템 복제/커스텀 아이템 복제/이미 보드에 배치된 아이템 복제 각각에서 복제본이 미사용 풀 맨 앞에 생기고 원본과 복제본을 서로 다른 칸에 동시에 둘 수 있는지 QA한다.
+- 복제본은 `dup-...` 새 ID로 저장되므로, 저장 후 재진입/티어표 복사본 생성/뷰어 모드 열람에서도 복제본이 그대로 유지되는지와, 템플릿 업데이트 요청에 복제된 커스텀 아이템이 포함될 때 운영상 이상이 없는지 확인한다.
+- `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` 공개 프로필 화면으로 이동하는지 확인한다.
+- `v1.4.54`에서 관리자 전체 티어표 카드에 즐겨찾기 수와 인기순 정렬/최소 즐겨찾기 필터를 붙였으므로, 즐겨찾기 많은 순으로 바꿨을 때 실제 받은 즐겨찾기 수가 큰 글부터 보이고 최소값을 올리면 추천 후보만 남는지 확인한다.
+- 관리자 전체 티어표 통계 카드도 최소 즐겨찾기 필터가 적용된 범위 기준으로 `전체/추천/공개/비공개` 숫자가 바뀌는지 QA한다.
+- `v1.4.54`에서 회원 관리 카드에 팔로워 수와 받은 즐겨찾기 수를 추가했으므로, 팔로워 많은 순/받은 즐겨찾기 많은 순 정렬이 실제 운영 데이터 순서와 맞고 최고 관리자 보호 로직도 그대로 유지되는지 확인한다.
+- 관리자 회원 카드에서 `비밀번호 초기화` 버튼과 모달을 숨겼으므로, 일반 운영 동선에서는 비밀번호 직접 조작 UI가 보이지 않고 기존 회원 정보 수정/삭제/썸네일 변경은 그대로 동작하는지 확인한다.
+- `v1.4.53`에서 본인 티어표 복사 버튼을 다시 열었으므로, 작성자 본인 편집 모드와 뷰어 모드 모두에서 `복사본 만들기`가 보이고, 복사 후 새 복사본 화면으로 실제 이동하는지 확인한다.
+- 본인 티어표를 수정한 뒤 저장하지 않은 상태로 `복사본 만들기`를 누르면 복사 직전에 원본이 먼저 저장되고, 새 복사본이 방금 수정한 최신 내용 기준으로 생성되는지 QA한다.
+- `/users/:userId` 작성자 프로필에서 비로그인 사용자는 팔로우 버튼이 안 보이고, 로그인 사용자는 타인 프로필에서 `팔로우 / 팔로잉` 전환과 팔로워 수 갱신이 정상이며, 자기 프로필에서는 팔로우 버튼이 숨겨지는지 확인한다.
+- `/following` 팔로우 피드는 팔로우한 작성자의 공개 티어표만 최신 업데이트순으로 보이고, 비로그인 진입 시 `/login?redirect=/following`으로 이동하며, 검색어로 제목/주제/작성자를 필터링할 수 있는지 확인한다.
+- 티어표 편집/뷰어 우측 패널의 `작성자 프로필 보기`가 현재 티어표 작성자 프로필로 정확히 이동하고, 복사본에서는 복사본 작성자 자신 프로필로, 원본 링크는 기존처럼 원본 티어표로 이동하는지 함께 QA한다.
+- `v1.4.51`에서 주제별 공개 목록을 `추천 티어표 / 전체 공개 티어표`로 분리했으므로, 추천 지정된 티어표가 상단 강조 섹션에만 나오고 아래 일반 목록에는 중복되지 않는지, 추천 해제 즉시 아래 일반 목록으로 내려가는지 확인한다.
+- 관리자 `전체 티어표 관리`에서 공개 글은 `추천 지정 / 추천 해제`가 정상 동작하고, 비공개 글은 추천 지정 버튼이 비활성화되며, 추천글을 비공개로 바꾸면 추천 상태가 자동 해제되는지 QA한다.
+- 추천 섹션은 최대 16개까지만 보여주도록 잘라두었으므로, 17개 이상 추천 지정 시 최근 지정순과 좋아요 수 보조 정렬이 기대대로 적용되는지 한 번 더 확인한다.
+- `v1.4.50`에서 설정 화면을 좌우 2열 카드형으로 나눴으므로, 데스크톱 폭에서는 프로필 정보가 왼쪽, 비밀번호 변경이 오른쪽에 나란히 보이고, 모바일/좁은 폭에서는 두 카드가 자연스럽게 위아래로 쌓이는지 확인한다.
+- `v1.4.49`에서 설정 화면에 비밀번호 변경 섹션을 추가했으므로, 현재 비밀번호가 틀린 경우 `현재 비밀번호가 일치하지 않아요.`, 새 비밀번호 확인이 다른 경우 `비밀번호 확인이 일치하지 않아요.`, 성공 시 `비밀번호를 변경했어요.` 토스트가 각각 정확히 뜨는지 확인한다.
+- 설정 화면 닉네임 저장도 중복/예약어 에러를 구체적으로 보여주도록 바꿨으므로, 이미 사용 중인 닉네임과 예약어 닉네임을 각각 넣었을 때 서버 문제처럼 보이지 않고 원인 문구가 정확히 뜨는지 QA한다.
+- 로그인한 상태로 비밀번호 재설정 메일의 `login?resetToken=...` 링크를 눌렀을 때도 바로 내 티어표 화면으로 튕기지 않고 `새 비밀번호 설정` 화면이 먼저 뜨는지 확인한다.
+- `v1.4.48`에서 로컬 `APP_ORIGIN`을 `localhost:5173`으로 먼저 주입하도록 바꿨으므로, 백엔드를 다시 띄운 뒤 새 회원가입 인증 메일과 비밀번호 재설정 메일 링크가 운영 도메인이 아니라 로컬 주소로 열리는지 확인한다.
+- `v1.4.47`에서 로컬 백엔드가 루트 `.env.production`을 읽도록 바꿨으므로, `SMTP_PASS` 교체 후 백엔드를 다시 띄우고 로컬 회원가입이 더 이상 `mail_not_configured` 503으로 떨어지지 않는지 확인한다.
+- `.env.production`의 `SMTP_PASS=여기에_Gmail_앱_비밀번호_입력` placeholder를 실제 Gmail 앱 비밀번호로 교체한 뒤, 운영 컨테이너를 재기동해서 회원가입 인증 메일과 비밀번호 재설정 메일이 실제로 발송되는지 확인한다.
+- `v1.4.45`에서 이메일 인증/비밀번호 재설정 메일 발송을 Gmail SMTP로 붙였으므로, 운영 `.env`에 `SMTP_USER`, `SMTP_PASS`, `SMTP_HOST`, `SMTP_PORT`, `SMTP_SECURE`, `SMTP_FROM`, `APP_ORIGIN`을 넣은 뒤 실제 회원가입 인증 메일과 비밀번호 재설정 메일이 도착하는지 확인한다.
+- 일반 회원가입 직후에는 자동 로그인되지 않고 인증 안내 문구가 떠야 하며, 메일의 `login?verifyToken=...` 링크를 누르면 이메일 인증과 로그인 세션 생성이 함께 끝나는지 QA한다.
+- 미인증 계정으로 로그인하면 `email_unverified` 상태 안내가 뜨고, `인증 메일 재전송` 버튼으로 같은 메일 주소에 인증 링크를 다시 보낼 수 있는지 확인한다.
+- `비밀번호를 잊으셨나요?`에서 재설정 메일을 요청한 뒤 `login?resetToken=...` 링크로 들어가면 새 비밀번호 입력 화면이 열리고, 저장 후 바로 로그인 상태로 내 티어표 화면으로 이동하는지 확인한다.
+- Gmail 주소 그대로 발송하는 1차 단계에서는 도메인 DNS 인증을 당장 쓰지 않지만, 이후 `noreply@sori.studio` 같은 도메인 발신 주소로 바꿀 경우 Cloudflare DNS에 SPF/DKIM/DMARC를 설정하는 후속 작업이 필요하다.
+- `v1.4.44`에서 공통 카피라이트 `zenn` 링크를 테마 텍스트 색으로 바꿨으므로, 다크/라이트 모드 양쪽에서 하단 링크가 배경에 묻히지 않고 hover 상태도 자연스러운지 확인한다.
+- `v1.4.43`에서 같은 `TierEditorView` 라우트 안에서도 `topicId / tierListId / preview`가 바뀌면 상태를 다시 불러오게 했으므로, 타인 티어표 복사 직후 화면이 내 복사본으로 바뀌는지와 상단 원본 링크 클릭 시 실제 원본 티어표 내용으로 전환되는지 확인한다.
+- 편집 중 미저장 변경이 있는 상태에서 상단 원본 링크를 눌렀을 때는 경고 모달이 뜨고, `계속 편집`은 현재 화면 유지, `저장 없이 이동`은 원본으로 이동하면서 변경분을 버리는지 QA한다.
+- `v1.4.42`에서 홈 템플릿 정렬을 `즐겨찾기 → 수동 순서 → 최신 생성순 → 이름순`으로 바꿨으므로, 관리자에서 아무 수동 정렬을 하지 않은 신규 템플릿이 가장 앞쪽에 보이고, 즐겨찾기/수동 고정 항목은 기존 우선순위를 유지하는지 확인한다.
+- 티어표 편집기의 클릭 배치를 추가했으므로, 풀 아이템 클릭→빈 셀 클릭, 셀 아이템 클릭→다른 셀 클릭, 셀 아이템 클릭→풀 빈 영역 클릭, 같은 아이템 재클릭 선택 해제, 드래그 직후 의도치 않은 재선택 방지까지 한 번씩 QA한다.
+- 클릭 배치에서 이미 아이템이 들어 있는 셀 안의 빈 영역을 눌렀을 때는 해당 셀 끝에 추가되고, 같은 셀을 다시 누르면 선택만 해제되는지 확인한다.
+- `v1.4.41`에서 관리자 템플릿 기본 아이템 다중 업로드를 `100개/파일당 20MB`와 Nginx `client_max_body_size 1024m`으로 올렸으므로, 운영 NAS 앞단 리버스 프록시에도 별도 본문 크기 제한이 있으면 같은 수준으로 맞춰야 하는지 확인한다.
+- 실제 QA에서는 10개 이상, 50개 이상, 100개 근처의 이미지 묶음을 한 번에 올렸을 때 브라우저/프런트 Nginx/백엔드 중 어느 단계에서도 `413`이나 업로드 실패가 나지 않는지 확인한다.
 - `v1.4.40`에서 `preview=1` 공유 화면을 뷰어 모드로 정리했으므로, 비로그인/로그인한 타인/작성자 본인 세 경우에 드래그 편집이 막히고 오른쪽 레일 버튼이 각각 `공유하기`, `내 티어표로 복사`, `수정 모드로 전환` 조건대로 노출되는지 확인한다. 특히 비로그인/타인이 일반 편집 URL로 직접 들어왔을 때도 자동으로 `preview=1`로 바뀌는지 본다.
 - 작성자 본인 편집 화면에는 `뷰어 모드로 보기`가 추가됐으므로, 저장된 본인 티어표에서 뷰어 모드로 진입한 뒤 다시 `수정 모드로 전환`으로 돌아오는 왕복 라우팅이 자연스러운지 QA한다.
 - 뷰어 모드 오른쪽 레일이 공통 로컬 레일 마운트를 다시 사용하게 바뀌었으므로, 데스크톱/태블릿 폭에서 광고가 상단에 나오고 액션 카드가 하단으로 내려가며, 우측 레일 접기/펼치기 시 콘텐츠가 깨지지 않는지 확인한다.
@@ -65,6 +120,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한다.
+- 브라우저 탭 파비콘은 다시 인라인 SVG로 돌려 정적 `/favicon.svg`, `/favicon-32x32.png` 요청 자체를 끊었으므로, 최신 배포 후 강력 새로고침 기준으로 favicon 403 로그가 실제로 사라졌는지 한 번 더 QA한다.
+- 우측 레일 Teleport 대상 DOM을 상시 유지하는 방식으로 바꿨으므로, 관리자 `/admin/...` → 설정 `/profile` → 홈 `/`처럼 전용 우측 레일과 일반 우측 레일을 오가는 라우트 전환에서 콘솔 오류가 더 이상 재현되지 않는지 운영 브라우저로 한 번 더 QA한다.
 - 내부 리네이밍 2단계로 관리자 `selectedTemplate / templates / loadTemplate / refreshTemplates` 묶음까지 정리했으므로, 다음 단계에서는 `/games/:gameId` 라우트와 프런트 API 호출부를 어디까지 `topic/template` 의미로 감쌀지 범위를 먼저 정리한다.
 - 화면/문서 층의 용어 정리는 거의 마무리됐으므로, 다음 단계에서는 내부 `gameId / games` 모델을 실제로 옮길지, 아니면 라우트 alias/리다이렉트부터 둘지 점진 전환 순서를 정한다.
 - 관리자 화면까지 포함한 사용자 노출 `게임` 문구를 3차까지 정리했으므로, 실제 운영 흐름에서 뜨는 확인창/토스트/선택 모달까지 표현이 자연스러운지 한 번 더 QA한다.
@@ -112,6 +170,10 @@
 - 아이템 관리의 같은 이미지 참조 요약과 상세 모달은 붙였으므로, 실제 운영 데이터에서 카드 수치와 모달 목록이 기대한 참조 관계와 맞는지 한 번 더 QA한다.
 
 ## 중기 개선
+- 목록 카드의 작성자 메타를 카드 전체 열기 버튼과 충돌 없이 직접 프로필 링크로 분리하는 후속 UX를 검토한다.
+- 추천 티어표는 전체 누적 즐겨찾기 기준 정렬/필터부터 붙였으므로, 다음 단계에서는 최근 N일 기준 급상승 추천 후보 필터와 추천 섹션 노출 개수 설정을 관리자 화면에 추가할지 검토한다.
+- 이메일 인증/비밀번호 재설정 1차 구현이 들어갔으므로, 다음 단계에서는 Gmail 발신 기반이 실제 운영에서 스팸함으로 얼마나 가는지 보고 필요하면 Cloudflare DNS의 SPF/DKIM/DMARC와 도메인 발신 주소 전환을 정리한다.
+- 구글 계정 로그인은 아직 붙이지 않았으므로, 이메일 인증 안정화 후 Google OAuth 클라이언트를 만들고 일반 이메일 계정과 같은 이메일의 구글 계정을 자동 연결할지 정책을 먼저 결정한다.
 - 신규 템플릿 요청은 현재 `첫 생성 1회 후 요청과 게임을 연결해 재사용` 단계까지 정리했으므로, 다음 단계에서는 정말로 게임을 DB에 만들기 전까지 임시 작업 상태로 유지할지 여부를 운영 흐름 기준으로 결정한다.
 - 관리자 템플릿 요청은 동일 `src` 중복 생성 방지와 `연결된 게임/이미 반영 n개` 표시까지 붙였으므로, 이후에는 요청별 반영 이력(예: 어떤 아이템을 언제 반영했는지)까지 별도로 남길지 검토한다.
 - 관리자 URL 분리는 시작했으므로, 다음 단계에서는 `AdminView.vue` 단일 대형 파일을 섹션별 뷰/컴포저블로 쪼개고 직접 진입 시 선택 게임/요청 작업 상태 복원 범위도 함께 정리한다.
@@ -125,7 +187,7 @@
 - 라이트모드/다크모드 2차 보정까지 반영했으므로, 남은 작업은 전체 화면을 실제 사용 흐름으로 돌려 보며 대비·명도·아이콘 가독성을 미세하게 QA하는 최종 테마 점검 단계로 가져간다.
 - 라이트모드 공통 토큰 재정비와 카드/아바타/즐겨찾기 버튼 보정까지 반영했으므로, 다음 QA에서는 로그인/홈/주제 허브/에디터/관리자 순으로 실제 플로우를 돌리며 남은 하드코딩 색과 과한 대비가 없는지 확인한다.
 - 관리자용 티어표 승인/숨김 처리, 아이템 정렬 UI를 추가한다.
-- 회원 일괄 작업(다중 선택, 일괄 비밀번호 초기화, 활동 저조 계정 정리) 같은 관리 보조 기능을 추가한다.
+- 회원 일괄 작업(다중 선택, 활동 저조 계정 정리) 같은 관리 보조 기능을 추가한다. 비밀번호는 평소 운영자가 직접 덮어쓰기보다 이메일 재설정 흐름을 우선하므로, 관리자 일괄 비밀번호 초기화는 별도 긴급 대응 정책이 생긴 뒤에만 다시 검토한다.
 - 티어 행 프리셋 저장, 색상 관리, 행 복제 같은 고급 편집 기능을 추가한다.
 - 로그인/회원가입/관리자 비밀번호 초기화에 요청 횟수 제한을 추가한다.
 - 업로드 파일은 MIME 타입뿐 아니라 파일 시그니처 기반 검증까지 확장한다.

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,220 @@
 # 업데이트 로그
 
+## 2026-04-06 v1.4.85
+- 관리자 아이템 관리의 `미사용 이미지` 범위를 다시 정리해, 사용자 업로드 미사용 항목뿐 아니라 현재 어디에도 연결되지 않은 관리자 자산(`asset`)도 같은 미사용 이미지 목록에서 함께 보이도록 통합했다.
+- 그래서 이제 관리자 업로드 이미지라도 템플릿 아이템, 사용자 아이템, 썸네일, 프로필 등 어느 경로에도 연결되지 않으면 `미사용 이미지`로 보고 일괄 삭제할 수 있다.
+- 필터 UI도 함께 다듬어, 다른 필터를 보고 있을 때는 위험한 삭제 버튼 대신 `미사용 이미지 확인` 버튼을 보여주고, 그 화면에 들어왔을 때만 `미사용 이미지 일괄 삭제` 버튼이 나타나도록 바꿨다.
+- 확인: `node --check backend/src/db.js`, `node --check backend/src/routes/admin.js`, `npm run build`
+
+## 2026-04-06 v1.4.84
+- 대체된 사용자 업로드 아이템은 이미 다른 이미지로 참조가 옮겨진 상태라면, 관리자 개별 삭제에서 더 이상 `삭제 실패`로 막히지 않도록 삭제 조건을 보정했다.
+- `미사용 아이템` 필터 화면과 `미사용 아이템 일괄 삭제` API가 같은 기준으로 움직이도록 맞췄다. 이제 사용 중인 티어표가 0개이고 템플릿 연결도 없을 때만 일반 미사용으로 잡히고, 대체된 아이템은 별도 예외로 계속 정리 대상에 포함된다.
+- 커스텀 이미지 레코드를 지운 뒤 실제 업로드 파일을 정리할 때는, 다른 곳에서 같은 파일 경로를 아직 참조 중이면 파일은 남겨 두도록 안전장치를 추가했다.
+
+## 2026-04-06 v1.4.83
+- 관리자 아이템 관리 필터에 `대체된 아이템` 모드를 추가해, 이미지 대체 이력이 있는 사용자 업로드 항목만 따로 모아 볼 수 있게 했다.
+- 이 필터는 `replaced_at` 메타가 있는 사용자 아이템만 대상으로 하므로, 운영자는 대체 이력 검수와 후속 정리를 일반 사용자 업로드 목록과 분리해 확인할 수 있다.
+- 확인: `node --check backend/src/db.js`, `node --check backend/src/routes/admin.js`, `npm run build`
+
+## 2026-04-06 v1.4.82
+- 관리자 이미지 대체 구조를 다시 정리해, 대체 후에도 원본 A 아이템은 원래 썸네일/라벨 그대로 남고 `대체됨` 메타만 표시되도록 맞췄다. 더 이상 원본 카드가 F 이미지처럼 덮여 보이지 않는다.
+- 실제 대체는 이제 `A 아이템 ID`가 가리키는 저장본 표시 정보만 새 이미지/라벨로 바꾸는 방식이라, 대체된 원본 카드에서 `원래 이미지로 복구`를 눌러 A 기준으로 되돌릴 수 있다.
+- 대체된 사용자 아이템은 사용량 집계가 남아 있어도 운영상 이미 정리 가능한 상태로 간주해 `미사용 아이템 일괄 삭제`와 개별 삭제 대상에 포함되도록 조정했다.
+- 확인: `node --check backend/src/db.js`, `node --check backend/src/routes/admin.js`, `npm run build`
+
+## 2026-04-06 v1.4.81
+- 관리자 이미지 대체 시 원본 사용자 아이템 레코드의 `src / label`까지 대체 대상 이미지로 덮어써져, 카드와 상세 모달에서 원래 A 이미지 정보를 다시 볼 수 없던 문제를 바로잡았다.
+- 이제 대체 처리에서는 티어표/요청/템플릿 참조만 새 이미지로 옮기고, 원본 사용자 아이템 레코드는 원래 이미지와 이름을 그대로 유지한 채 `대체됨` 메타만 남긴다.
+- 그래서 관리자 화면에서는 원래 A 썸네일과 A 라벨을 계속 확인하면서도, 이 아이템이 어떤 대상(Y)으로 대체되었는지 함께 보고 이후 수동 정리나 복구 판단을 할 수 있다.
+- 확인: `node --check backend/src/db.js`, `node --check backend/src/routes/admin.js`, `npm run build`
+
+## 2026-04-06 v1.4.80
+- 관리자 이미지 대체는 더 이상 원본 사용자 아이템을 즉시 삭제하지 않고, 원본 레코드와 파일을 남겨 둔 채 `어떤 아이템으로 대체됐는지` 메타만 기록하도록 바꿨다.
+- 따라서 대체 후에도 원본 이미지는 아이템 라이브러리에서 계속 확인할 수 있고, 카드와 상세 모달에서 `대체됨` 상태와 대체 대상 라벨을 함께 볼 수 있다.
+- 다만 이 원본은 이미 참조가 옮겨진 미사용 사용자 아이템이므로, 기존 `미사용 아이템 일괄 삭제`와 개별 삭제 대상에는 그대로 포함되게 유지해 운영자가 원할 때 정리할 수 있게 했다.
+- 확인: `node --check backend/src/db.js`, `node --check backend/src/routes/admin.js`, `npm run build`
+
+## 2026-04-06 v1.4.79
+- 관리자 이미지 대체 모달은 처음 열었을 때 기존 목록을 자동으로 보여주지 않고, 검색을 실행한 뒤에만 대체 후보를 표시하도록 바꿨다. 같은 티어표/같은 문맥의 항목이 처음부터 섞여 보여 혼란스럽던 점을 줄이기 위한 조정이다.
+- 사용자 업로드 아이템을 다른 이미지로 대체할 때는 이제 원본 항목을 그대로 `대상 이미지와 라벨`로 덮어써 중복 항목을 남기지 않고, 참조를 옮긴 뒤 원본 사용자 아이템 레코드와 파일을 함께 정리해 관리자 라이브러리에 동일 이미지가 두 번 보이지 않도록 맞췄다.
+- 이미지 대체 기능은 현재 사용자 업로드 아이템에만 노출되도록 제한해, 템플릿 기본 아이템이나 보관 자산까지 같은 방식으로 다뤄 생길 수 있는 오해를 줄였다.
+- 확인: `node --check backend/src/routes/admin.js`, `npm run build`
+
+## 2026-04-06 v1.4.78
+- 관리자 아이템 관리 모달에 `선택한 이미지로 대체` 기능을 추가했다. 운영자는 대체할 원본 아이템을 연 뒤, 모달 안에서 다른 라이브러리 이미지를 검색·선택해 수동으로 치환할 수 있다.
+- 이 치환은 단순히 `src`만 바꾸는 것이 아니라, 선택한 대상 이미지의 `라벨`도 함께 따라가도록 처리해 사용자 업로드 아이템과 티어표 저장 JSON 안의 표기가 같은 이름으로 정리되게 맞췄다.
+- 백엔드의 업로드 참조 치환 로직은 이제 `custom_items`, `topic_items`, `tierlists.pool_json`, `template_requests.items_json / board_items_json`까지 `src + label`을 함께 갱신하므로, 같은 캐릭터를 서로 다른 저화질 이미지로 올린 경우도 관리자가 고화질 기준 이미지 하나로 수동 통합할 수 있다.
+- 치환 후 기존 이미지 참조가 0이 되면, 기존처럼 미사용 이미지 정리 대상으로 후속 삭제할 수 있다.
+- 확인: `node --check backend/src/routes/admin.js`, `node --check backend/src/db.js`, `npm run build`
+
+## 2026-04-06 v1.4.77
+- 작성자 프로필 보기 화면에서 공개 티어표 카드의 내부 콘텐츠가 카드 라운드 테두리 밖으로 밀려 보이거나 일부가 잘려 보일 수 있던 문제를 정리했다.
+- `UserProfileView`의 카드 본문/헤더에 `overflow: hidden`을 맞추고 썸네일 래퍼에도 `min-width: 0`을 추가해, 다른 목록 화면과 같은 카드 경계 안에서 안정적으로 렌더링되도록 조정했다.
+- 티어표 프리뷰 화면에서는 더 이상 `남은 아이템` 풀을 노출하지 않도록 바꿔, 실제 완성본과 공유 미리보기가 같은 기준으로 보이게 맞췄다.
+
+## 2026-04-03 v1.4.76
+- 모바일 티어표 프리뷰에서 오른쪽 레일의 `VIEWER MODE` 카드가 패널 바닥에 딱 붙고, 카피라이트 문구가 카드 뒤쪽 중간 높이에 겹쳐 보일 수 있던 배치를 보정했다.
+- 모바일 오른쪽 overlay 레일에서는 `rightRail__content`가 남는 높이를 억지로 채우지 않도록 `flex: 0 0 auto`로 풀고, `localRightRailRoot`의 최소 높이도 `auto`로 낮춰 footer와 콘텐츠가 자연스럽게 순서대로 쌓이게 했다.
+- 프리뷰 전용 `viewerSidebar__section`의 `margin-top: auto`는 모바일에서만 끄고, 광고 아래에 바로 카드가 이어지도록 조정했다.
+
+## 2026-04-03 v1.4.75
+- 모바일에서 오른쪽 레일을 열었을 때 패널이 `calc(100vw - 20px)` 폭의 좁은 서랍처럼 떠서 화면 전체를 채우지 못하고, 아래쪽도 어색하게 비어 보이던 부분을 조정했다.
+- 모바일 오른쪽 레일 overlay는 `inset: 0`, `width: 100vw`, `height: 100dvh`로 화면 전체를 덮는 패널처럼 열리게 바꾸고, 하단 액션/공유 버튼이 바닥에 붙거나 잘려 보이지 않도록 내부 패딩을 `32px + safe-area`까지 늘렸다.
+
+## 2026-04-03 v1.4.74
+- 모바일 본문 영역에서 `workspaceBody` 배경색이 좌우 마진 안쪽에만 칠해져 중앙에 어설픈 배경 박스가 떠 있는 것처럼 보이던 부분을 정리했다.
+- 모바일에서는 공통 워크스페이스 배경을 투명하게 두고, 실제 화면별 카드/섹션 배경만 남겨 덜 미완성처럼 보이도록 조정했다.
+
+## 2026-04-03 v1.4.73
+- 모바일에서 왼쪽 레일 아래 메인 컨텐츠가 화면 중간부터 시작하는 것처럼 보이던 회귀를 수정했다.
+- 원인은 모바일 `.appShell`이 1열 그리드로 바뀐 상태에서 세로 행 정의가 없어 `leftRail` 행과 `appMain` 행이 남는 높이를 나눠 가지며 위쪽이 불필요하게 늘어날 수 있던 점이었다. 모바일 그리드를 `auto + minmax(0, 1fr)` 행으로 고정하고 `align-content: start`를 적용해 상단 레일 바로 아래에 본문이 이어지도록 보정했다.
+
+## 2026-04-03 v1.4.72
+- 모바일 공통 상단 헤더(`railHeader`) 좌우 패딩을 `20px`로 넓혀, 오른쪽 레일 토글 버튼과 화면 가장자리 간격이 왼쪽 유저 카드 쪽과 더 자연스럽게 맞도록 조정했다.
+- 모바일에서 오른쪽 레일 열기/닫기 아이콘도 왼쪽 네비게이션 토글과 같은 버튼형 카드 스타일로 보이도록 `42px` 크기, 테두리, 배경, 둥근 모서리를 맞췄다.
+
+## 2026-04-03 v1.4.71
+- 모바일에서 본문 페이지나 로그인 화면 하단이 카드/버튼 바로 아래에서 끊겨 보여 답답했던 부분을 줄이기 위해, 공통 워크스페이스 본문 하단에 모바일 safe-area 기반 여백을 추가했다.
+- 모바일 왼쪽 네비게이션은 유저 프로필 카드 오른쪽 토글 버튼으로 접고 펼칠 수 있게 바꾸고, 닫힘/열림 전환 시 검색창과 메뉴가 위아래로 부드럽게 스르륵 접히는 애니메이션을 추가했다.
+- 모바일 진입 시 오른쪽 레일은 기본 닫힘으로 시작하고, 모바일에서 직접 오른쪽 레일을 열었을 때도 레일 하단 컨텐츠가 화면 바닥에 붙지 않도록 safe-area 여백을 더했다.
+- 티어표 편집기 모바일 터치 조작에서 아이템을 짧게 탭하면 선택만 하고, 길게 누른 뒤 움직일 때 드래그가 시작되도록 Sortable 터치 시작 지연과 이동 임계값을 추가했다.
+- 서버 점검 안내 문구는 `서비스 내부 점검이 필요합니다.` 대신 `서비스 내부 점검중입니다.`로 다듬었고, 프런트 프로덕션 빌드(`npm run build`) 통과를 확인했다.
+
+## 2026-04-03 v1.4.70
+- 저장된 티어표의 `공유하기` 버튼이 기존 `preview=1` 편집기 주소 대신 `/share/editor/:topicId/:tierListId` 공유 전용 주소를 복사하도록 바꿨다.
+- 이 공유 전용 주소는 공개 티어표인 경우 해당 티어표의 제목, 설명, 썸네일을 기반으로 Open Graph/Twitter 메타 태그를 서버에서 동적으로 생성한 뒤, 실제 뷰어 화면 `/editor/:topicId/:tierListId?preview=1`로 즉시 이동시킨다.
+- 비공개 티어표이거나 주제 경로와 티어표 소속이 맞지 않는 경우에는 개별 제목/설명/썸네일을 노출하지 않고 서비스 기본 공유 메타를 사용하도록 제한했다.
+- 운영 프런트 Nginx에서 `/share/` 경로를 백엔드로 프록시하도록 추가해, 카카오톡/디스코드/X 같은 크롤러가 JS 실행 전에 공유 메타를 먼저 읽을 수 있게 했다.
+- `backend/index.js`, `backend/src/routes/share.js` 문법 검사와 프런트 프로덕션 빌드(`npm run build`)까지 통과하는 것을 확인했다.
+
+## 2026-04-03 v1.4.69
+- 티어표 편집 화면의 아이템 검색에서 한글 아이템명이 검색어와 눈으로는 같아 보여도 내부 유니코드 정규형 차이 때문에 일부 항목이 매칭되지 않을 수 있던 문제를 보강했다.
+- 검색어와 아이템 라벨을 비교하기 전에 `NFC`로 정규화하도록 바꾸고, 커스텀 이미지 파일명에서 기본 라벨을 만들 때도 같은 정규화를 거쳐 한글 조합형 차이로 검색이 빗나가는 상황을 줄였다.
+- 프런트 프로덕션 빌드(`npm run build`)까지 통과하는 것을 확인했다.
+
+## 2026-04-03 v1.4.68
+- 티어표 편집 화면에서 아이템을 우클릭해도 브라우저 기본 컨텍스트 메뉴가 먼저 떠서 `아이템 복제` 메뉴를 누르기 어려울 수 있던 부분을 보강했다.
+- 기존에는 각 아이템 카드의 `@contextmenu.prevent`에 주로 의존했지만, 이제는 `window` 캡처 단계에서 `[data-item-id]` 대상 우클릭을 먼저 잡아 기본 메뉴를 막고 커스텀 복제 메뉴를 열도록 바꿨다.
+- 아이템 썸네일 이미지에도 `draggable="false"`를 명시해, 이미지 자체의 기본 드래그/컨텍스트 동작이 편집 조작보다 앞서는 상황을 줄였다.
+
+## 2026-04-03 v1.4.67
+- 관리자 아이템 관리에서 프로필 아바타가 `전체 이미지`와 `프로필 이미지` 필터에 보이지 않을 수 있던 문제를 수정했다.
+- 원인은 `image_assets`의 같은 `src`가 템플릿 아이템이나 사용자 아이템에서도 쓰이는 경우, 자산 카드 생성 단계에서 해당 `src`를 무조건 제외하던 필터였다. 이제는 `users.avatar_src`나 각종 썸네일 참조로 실제 사용 중인 자산이면 같은 이미지가 다른 아이템에 재사용되더라도 자산 카드도 함께 유지한다.
+- 로컬 MariaDB를 새로 만든 뒤 `프로필 아바타`와 사용자 아이템이 같은 `src`를 공유하는 테스트 데이터를 직접 넣고, `listCustomItems({ filterMode: 'avatar' })`와 `filterMode: 'all'` 결과에 프로필 자산 카드가 포함되는 것까지 확인했다.
+
+## 2026-04-03 v1.4.66
+- 티어표 편집 화면에서 보드 위 아이템이나 미사용 아이템 풀의 아이템을 우클릭하면 `아이템 복제` 메뉴가 뜨고, 선택한 아이템의 이미지/이름/출처를 유지한 새 복제본을 미사용 풀 맨 앞에 추가하도록 구현했다.
+- 기존 아이템 ID를 그대로 다시 쓰면 같은 항목을 서로 다른 칸에 동시에 둘 수 없으므로, 복제 시 `dup-...` 새 ID를 발급해 원본과 복제본을 별도 아이템 인스턴스로 저장하도록 정리했다.
+- 우클릭 메뉴는 메뉴 밖 클릭, 다른 곳 우클릭, 스크롤, 창 포커스 이탈 시 닫히도록 했고, 화면 가장자리에서는 메뉴가 뷰포트 밖으로 나가지 않게 좌표를 보정했다.
+
+## 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차 채워 오래된 계정도 빈 값 없이 정렬할 수 있게 했다.
+- 관리자 회원 목록 정렬에 `마지막 접속순`을 추가하고, 회원 카드의 `회원 정보 수정` 옆에 `프로필 보기` 버튼을 붙여 해당 유저의 `/users/:userId` 공개 프로필 화면으로 바로 이동할 수 있게 했다.
+
+## 2026-04-03 v1.4.54
+- 관리자 `전체 티어표 관리` 카드에 받은 즐겨찾기 수를 표시하고, 우측 운영 패널에 `최근 수정순 / 최근 생성순 / 즐겨찾기 많은 순` 정렬과 `최소 즐겨찾기 수` 필터를 추가해, 운영자가 추천 후보가 될 만한 인기 티어표를 더 빨리 찾을 수 있게 했다.
+- 관리자 회원 관리 카드에 `팔로워 수`와 `받은 즐겨찾기 수`를 추가하고, 정렬 기준에도 `팔로워 많은 순`, `받은 즐겨찾기 많은 순`을 붙여 어떤 작성자가 핵심 기여자인지 운영자가 더 쉽게 파악할 수 있게 했다.
+- 이메일 인증과 비밀번호 재설정 메일이 들어간 뒤에는 운영자가 회원 비밀번호를 직접 바꾸는 버튼이 평소 화면에 드러나 있을 필요가 작다고 보고, 회원 카드의 `비밀번호 초기화` 버튼과 해당 모달 UI를 숨겼다. 서버의 관리자 비밀번호 변경 API는 비상 상황용 최후 수단으로 남겨두되, 일반 운영 동선에서는 직접 조작처럼 보이지 않도록 정리했다.
+
+## 2026-04-03 v1.4.53
+- 티어표 복사 버튼이 타인 티어표에서만 보이도록 묶여 있어 본인 티어표에서는 숨겨지던 문제를 고쳐, 저장된 본인 티어표도 `복사본 만들기`로 새 복사본을 만들 수 있게 복구했다.
+- 본인 티어표를 편집 중 저장하지 않은 변경이 있는 상태로 복사본을 만들면 화면에 보이는 최신 수정 내용이 빠질 수 있었으므로, 복사 실행 직전에 현재 수정본을 먼저 저장한 뒤 복사본을 생성하도록 보정했다.
+- 작성자 프로필 화면(`/users/:userId`)과 팔로우 피드 화면(`/following`)을 추가하고, 백엔드에 `user_follows` 테이블과 팔로우/언팔로우/작성자 공개 티어표/팔로잉 피드 API를 붙였다.
+- 티어표 편집/뷰어 우측 패널에 `작성자 프로필 보기` 진입점을 추가하고, 왼쪽 내비게이션에도 `팔로우 피드` 메뉴를 노출해 팔로우한 작성자의 공개 티어표를 따로 모아 볼 수 있게 했다.
+- 프런트 HTML 메타 제목/설명에서도 `게임 템플릿` 표현을 `템플릿` 기준 문구로 맞춰, 실제 서비스가 특정 게임만 다루는 것처럼 보이지 않도록 한 번 더 정리했다.
+
+## 2026-04-03 v1.4.52
+- 관리자 전체 티어표 카드 컴포넌트의 `추천 지정 / 추천 해제` 버튼과 `추천 노출중` 배지, 추천 개수 통계 표시가 실제 릴리스 커밋에 함께 포함되도록 누락 파일을 다시 묶었다.
+
+## 2026-04-03 v1.4.51
+- 주제별 공개 티어표 목록을 `추천 티어표`와 `전체 공개 티어표`로 분리해, 관리자가 추천 지정한 글은 상단 강조 섹션에 먼저 보여주고 아래 일반 목록에서는 중복 노출되지 않도록 정리했다.
+- 관리자 `전체 티어표 관리` 카드에 `추천 지정 / 추천 해제` 버튼과 `추천 노출중` 배지를 추가하고, 상단 통계에도 추천 개수를 함께 표시하도록 보강했다.
+- 백엔드 `tierlists`에 `is_featured`, `featured_at`, `featured_by`를 추가하고, 공개 목록 API가 추천 티어표 최대 16개와 일반 공개 티어표 목록을 분리해서 내려주도록 확장했다.
+- 비공개 티어표를 추천으로 지정하려는 경우는 서버에서 `public_tierlist_required`로 차단하고, 이미 추천된 글을 비공개로 전환하면 추천 상태도 자동 해제되도록 맞췄다.
+
+## 2026-04-03 v1.4.50
+- 설정 화면 메인 영역이 `max-width: 620px` 단일 컬럼으로 고정되어 넓은 화면에서 오른쪽 공간이 많이 비어 보였으므로, 프로필 정보 카드와 비밀번호 변경 카드를 좌우 2열 그리드로 나누고 좁은 화면에서만 1열로 내려가도록 레이아웃을 재정리했다.
+- 왼쪽 카드는 아바타/닉네임/이메일/로그아웃/프로필 저장을, 오른쪽 카드는 현재 비밀번호 확인과 새 비밀번호 저장을 담당하게 분리해, 설정 화면의 정보 묶음이 더 명확하게 읽히도록 맞췄다.
+
+## 2026-04-03 v1.4.49
+- 설정 화면에 현재 비밀번호 확인 후 새 비밀번호를 직접 저장하는 `비밀번호 변경` 섹션을 추가하고, 백엔드에는 로그인 사용자용 `POST /api/auth/password` API를 붙였다.
+- 프로필 닉네임 저장 실패가 모두 `프로필 저장에 실패했어요.`로 뭉뚱그려 보이던 부분을 고쳐, 중복 닉네임은 `닉네임이 이미 사용 중이에요.`, 예약어 닉네임은 `사용할 수 없는 닉네임이에요.`처럼 회원가입 화면과 같은 맥락의 원인 안내로 분리했다.
+- 로그인한 상태로 `login?resetToken=...` 비밀번호 재설정 링크를 열면 기존 로그인 감시가 바로 내 티어표 화면으로 보내버릴 수 있었으므로, 인증/재설정 토큰이 있는 동안에는 자동 리다이렉트를 멈추고 재설정 입력 화면을 우선 보여주도록 보정했다.
+
+## 2026-04-03 v1.4.48
+- 로컬 백엔드도 `.env.production`을 읽는 구조가 되면서 이메일 인증/비밀번호 재설정 링크의 `APP_ORIGIN`이 운영 도메인으로 잡히던 문제를 막기 위해, `backend`의 `dev/start` 스크립트에서 로컬 실행 시 `APP_ORIGIN=http://localhost:5173`을 먼저 주입하도록 분리했다.
+- 이로써 로컬 개발에서는 인증 메일 링크가 `localhost:5173`으로 열리고, 상용 Docker 배포에서는 `docker-compose.prod.yml`의 `APP_ORIGIN=https://tmaker.sori.studio`를 그대로 사용하도록 환경이 구분된다.
+
+## 2026-04-03 v1.4.47
+- 로컬 개발 서버를 `npm run dev:backend`로 띄울 때 루트 `.env.production`의 `SMTP_*` 값이 자동으로 들어가지 않아 일반 회원가입이 `mail_not_configured` 503으로 실패할 수 있었으므로, 백엔드 엔트리에서 `dotenv`로 루트 `.env.production`을 먼저 로드하도록 보강했다.
+- 이 변경으로 Docker Compose 운영 환경은 기존 컨테이너 환경변수를 그대로 쓰면서, 로컬 개발 서버도 같은 `.env.production`의 Gmail SMTP 설정을 읽어 이메일 인증/비밀번호 재설정 메일 발송을 테스트할 수 있게 됐다.
+
+## 2026-04-03 v1.4.46
+- 운영용 `.env.production`에는 Git에 올리지 않는 로컬 비밀값을 유지한 채, Gmail SMTP 발송에 필요한 `APP_ORIGIN`, `SMTP_HOST`, `SMTP_PORT`, `SMTP_SECURE`, `SMTP_USER`, `SMTP_PASS`, `SMTP_FROM` 항목을 추가했다.
+- Git에 추적되는 `.env.production.example`에도 같은 SMTP 환경변수 예시를 추가해, 실제 배포 설정에서 어떤 키를 채워야 하는지 파일만 보고도 바로 알 수 있게 정리했다.
+
+## 2026-04-03 v1.4.45
+- Gmail SMTP를 사용하는 이메일 인증/비밀번호 재설정 1차 흐름을 추가했다. 첫 관리자 계정은 기존처럼 바로 활성화되지만, 일반 회원은 가입 직후 인증 메일을 받고 `login?verifyToken=...` 링크로 인증을 마쳐야 로그인할 수 있게 바꿨다.
+- 로그인 화면에 `인증 메일 재전송`, `비밀번호를 잊으셨나요?`, `login?resetToken=...` 기반 새 비밀번호 설정 UI를 추가해, 메일 링크를 받은 사용자가 같은 `/login` 화면에서 인증 완료와 비밀번호 재설정을 이어서 처리할 수 있게 했다.
+- 백엔드 `users`에 `email_verified`를 추가하고, 이메일 인증/비밀번호 재설정 토큰을 해시로 저장하는 전용 테이블과 API를 추가했다. 운영 배포용 `docker-compose.prod.yml`에는 `APP_ORIGIN`, `SMTP_*` 환경변수 자리를 열어 Gmail 앱 비밀번호를 코드에 넣지 않고 주입할 수 있게 정리했다.
+
+## 2026-04-03 v1.4.44
+- 오른쪽 레일 공통 카피라이트의 `zenn` 링크가 민트 단색이라 라이트 모드에서 배경과 충분히 분리되지 않을 수 있었으므로, 테마 텍스트 색 기반의 굵은 링크 스타일로 바꿔 다크/라이트 양쪽에서 읽히도록 조정했다.
+
+## 2026-04-03 v1.4.43
+- 다른 사람 티어표를 복사한 직후 URL은 복사본 ID로 바뀌었는데 화면 데이터가 기존 원본에 남아 있을 수 있었던 문제를 고치기 위해, `TierEditorView`가 같은 컴포넌트 안에서 `topicId / tierListId / preview` 라우트 값이 바뀔 때마다 편집기 상태를 다시 로드하도록 바꿨다.
+- 복사한 티어표 상단의 원본 링크를 클릭했을 때도 주소만 바뀌고 화면이 그대로 남지 않도록, 원본 이동 버튼이 같은 재로딩 흐름을 타게 정리했다.
+- 작성자 본인 편집 모드에서 저장하지 않은 수정 내용이 있는 상태로 원본 링크를 누르면, 현재 변경 내용이 사라진다는 확인 모달을 먼저 띄우고 `저장 없이 이동`을 선택한 경우에만 원본 티어표로 이동하도록 보강했다.
+
+## 2026-04-03 v1.4.42
+- 홈 주제 템플릿 목록 정렬에서 수동 고정 순서가 같은 항목끼리 이름순으로 다시 정렬되던 부분을 바꿔, 즐겨찾기 우선과 관리자 수동 순서를 유지하되 수동 순서가 없는 템플릿은 최신 생성순으로 먼저 보이도록 맞췄다.
+- 티어표 편집기에서 아이템을 클릭으로도 옮길 수 있게 해, 아이템을 한 번 클릭하면 선택 포커스가 표시되고 원하는 티어 셀이나 아이템 풀 빈 영역을 클릭하면 해당 위치로 이동하도록 보강했다.
+- 클릭 배치와 기존 드래그 배치가 충돌하지 않도록 드래그 시작 시 선택 상태를 해제하고, 드래그 직후 짧은 시간 동안 아이템 클릭 선택을 무시하는 보호를 추가했다.
+
+## 2026-04-03 v1.4.41
+- 관리자 템플릿 기본 아이템 다중 업로드 제한을 한 번에 `100개`, 파일당 `20MB`까지 받을 수 있도록 백엔드 `multer` 설정과 업로드 라우트 배열 제한을 함께 상향했다.
+- 프런트 Nginx 프록시에도 `client_max_body_size 1024m`을 추가해, 여러 이미지를 한 번의 `FormData` 요청으로 올릴 때 합산 본문 크기 제한 때문에 먼저 `413`으로 막히는 상황을 줄였다.
+
 ## 2026-04-03 v1.4.40
 - 공유 링크로 여는 `preview=1` 화면을 `뷰어 모드`로 정의하고, 드래그/편집 없이 완성본만 보이는 상태에서 오른쪽 레일 상단에는 광고, 하단에는 공유·복사·수정 전환 액션을 노출하도록 정리했다.
 - 비로그인 사용자나 작성자 본인이 아닌 사용자가 일반 편집 URL로 저장된 티어표를 직접 열어도 자동으로 `preview=1` 뷰어 모드 주소로 전환되도록 로딩 후 라우팅을 보정했다.
@@ -1091,6 +1306,19 @@
 - **아이템 카드 레이아웃 개선**: 아이템 목록과 추가 미리보기를 1:1 비율 기준으로 재구성하고 더 촘촘한 카드 그리드로 조정
 - **레거시 파일 역할 정리**: `db.json`과 lowdb 관련 코드는 현재 MariaDB 기본 런타임에는 필수가 아니며, 마이그레이션/예외 fallback 용도임을 문서에 명시
 
+## 2026-04-03 v1.4.65
+- **파비콘 403 재발 차단**: 운영 환경에서 `/favicon.svg`, `/favicon-32x32.png` 정적 요청이 계속 `403 Forbidden`으로 떨어지던 문제를 피하기 위해, 브라우저 탭 파비콘을 다시 `index.html` 인라인 SVG 데이터 URL로 전환하고 해당 정적 favicon 링크를 제거
+- **광고 스크립트 외부 DNS 오류 분리**: `e.dlx.addthis.com ... net::ERR_NAME_NOT_RESOLVED`는 애드센스/광고 네트워크에서 발생한 외부 도메인 해석 실패 로그로, 서비스 파비콘/관리자 API 오류와는 별개 현상으로 분리
+
+## 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/index.html

@@ -3,27 +3,30 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tier Maker | 게임 템플릿으로 만드는 티어표</title>
+    <title>Tier Maker | 템플릿으로 쉽게 만드는 티어표</title>
     <meta
       name="description"
-      content="게임 템플릿과 커스텀 이미지로 티어표를 만들고 저장하고 공유하세요. 관리자 요청과 템플릿 업데이트 흐름까지 한 번에 관리할 수 있습니다."
+      content="템플릿과 커스텀 이미지로 티어표를 만들고 저장하고 공유하세요. 관리자 요청과 템플릿 업데이트 흐름까지 한 번에 관리할 수 있습니다."
     />
     <meta name="theme-color" content="#090d16" />
     <meta name="application-name" content="Tier Maker" />
 
     <link rel="canonical" href="https://tmaker.sori.studio/" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='18' fill='%23090d16'/%3E%3Cpath d='M17 15h30v10H36v24H26V25H17V15Z' fill='%237fe7d6'/%3E%3Cpath d='M39 31h8v18h-8V31Z' fill='%235fcaff' opacity='.9'/%3E%3C/svg%3E"
+    />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
 
     <meta property="og:site_name" content="Tier Maker" />
     <meta property="og:locale" content="ko_KR" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://tmaker.sori.studio/" />
-    <meta property="og:title" content="Tier Maker | 게임 템플릿으로 만드는 티어표" />
+    <meta property="og:title" content="Tier Maker | 템플릿으로 쉽게 만드는 티어표" />
     <meta
       property="og:description"
-      content="게임 템플릿과 커스텀 이미지로 티어표를 만들고 저장하고 공유하세요. 관리자 요청과 템플릿 업데이트 흐름까지 한 번에 관리할 수 있습니다."
+      content="템플릿과 커스텀 이미지로 티어표를 만들고 저장하고 공유하세요. 관리자 요청과 템플릿 업데이트 흐름까지 한 번에 관리할 수 있습니다."
     />
     <meta property="og:image" content="https://tmaker.sori.studio/og-card.png" />
     <meta property="og:image:alt" content="Tier Maker 공유 썸네일" />
@@ -31,10 +34,10 @@
     <meta property="og:image:height" content="630" />
 
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Tier Maker | 게임 템플릿으로 만드는 티어표" />
+    <meta name="twitter:title" content="Tier Maker | 템플릿으로 쉽게 만드는 티어표" />
     <meta
       name="twitter:description"
-      content="게임 템플릿과 커스텀 이미지로 티어표를 만들고 저장하고 공유하세요."
+      content="템플릿과 커스텀 이미지로 티어표를 만들고 저장하고 공유하세요."
     />
     <meta name="twitter:image" content="https://tmaker.sori.studio/og-card.png" />
   </head>

frontend/nginx.conf

@@ -1,6 +1,7 @@
 server {
   listen 80;
   server_name _;
+  client_max_body_size 1024m;
 
   root /usr/share/nginx/html;
   index index.html;
@@ -18,6 +19,15 @@ server {
     proxy_set_header X-Forwarded-Proto https;
   }
 
+  location /share/ {
+    proxy_pass http://backend:5179/share/;
+    proxy_http_version 1.1;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto https;
+  }
+
   location /uploads/ {
     proxy_pass http://backend:5179/uploads/;
     proxy_http_version 1.1;

frontend/src/App.vue

@@ -2,7 +2,7 @@
 import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from './stores/auth'
-import { editorNewPath, favoritesPath, homePath, loginPath, mePath } from './lib/paths'
+import { editorNewPath, favoritesPath, followingFeedPath, homePath, loginPath, mePath } from './lib/paths'
 import { toApiUrl } from './lib/runtime'
 import { useToast } from './composables/useToast'
 import iconDockToLeft from './assets/icons/dock_to_left.svg'
@@ -14,6 +14,7 @@ import iconAddNotes from './assets/icons/add_notes.svg'
 import iconDashboardCustomize from './assets/icons/dashboard_customize.svg'
 import iconSearch from './assets/icons/search.svg'
 import iconSettings from './assets/icons/settings.svg'
+import iconKidStar from './assets/icons/kid_star.svg'
 import iconMenuBook from './assets/icons/menu_book.svg'
 import RightRailAd from './components/RightRailAd.vue'
 import SvgIcon from './components/SvgIcon.vue'
@@ -26,6 +27,7 @@ const RIGHT_RAIL_COPYRIGHT_URL = 'https://x.com/zennbox'
 const currentTopicId = computed(() => route.params.topicId || '')
 
 const leftRailCollapsed = ref(false)
+const mobileLeftNavOpen = ref(false)
 const rightRailOpen = ref(true)
 const searchQuery = ref('')
 const leftRailSearchPlaceholder = '주제 템플릿 검색'
@@ -69,6 +71,7 @@ const leftNavItems = computed(() => {
     { key: 'home', label: '주제 선택', path: '/', iconSrc: iconGridView },
     { key: 'me', label: '나의 티어표', path: '/me', iconSrc: iconLists, requiresAuth: true },
     { key: 'favorites', label: '즐겨찾기', path: '/favorites', iconSrc: iconFavorite, requiresAuth: true },
+    { key: 'followingFeed', label: '팔로우 피드', path: '/following', iconSrc: iconKidStar, requiresAuth: true },
     { key: 'profile', label: '설정', path: '/profile', iconSrc: iconSettings, requiresAuth: true },
   ]
   return items.filter((item) => !item.requiresAuth || (authReady.value && auth.user))
@@ -143,6 +146,7 @@ const showSettingsThemePanel = computed(() => route.name === 'profile')
 const showTopicViewToggle = computed(() => route.name === 'topicHub')
 const topicViewMode = computed(() => (route.query.view === 'list' ? 'list' : 'grid'))
 const showBackendFallback = computed(() => !isPreviewMode.value && ['maintenance', 'offline'].includes(backendState.value))
+const shouldLockRightRailBodyScroll = computed(() => isRightRailOverlay.value && rightRailOpen.value && !showBackendFallback.value)
 const leftBottomPrimaryAction = computed(() => {
   if (!authReady.value) return null
   if (route.name === 'home' && auth.user) {
@@ -221,6 +225,26 @@ const routeMeta = computed(() => {
       action: () => router.push(mePath()),
     }
   }
+  if (route.name === 'followingFeed') {
+    return {
+      title: '팔로우 피드',
+      subtitle: '팔로우한 작성자의 새 티어표',
+      contextTitle: '구독 목록',
+      contextText: '작성자 프로필에서 팔로우한 사람의 공개 티어표를 한곳에서 볼 수 있어요.',
+      actionLabel: '즐겨찾기 보기',
+      action: () => router.push(favoritesPath()),
+    }
+  }
+  if (route.name === 'userProfile') {
+    return {
+      title: '작성자 프로필',
+      subtitle: '공개 티어표와 팔로우',
+      contextTitle: '작성자 탐색',
+      contextText: auth.user ? '마음에 드는 작성자를 팔로우하고 새 공개 티어표를 피드에서 이어서 볼 수 있어요.' : '로그인하면 작성자를 팔로우할 수 있어요.',
+      actionLabel: auth.user ? '팔로우 피드 보기' : '로그인하러 가기',
+      action: () => router.push(auth.user ? followingFeedPath() : loginPath(route.fullPath)),
+    }
+  }
   if (route.name === 'profile') {
     return {
       title: '설정',
@@ -273,6 +297,11 @@ function toggleTheme() {
   applyTheme(isLightTheme.value ? 'dark' : 'light')
 }
 
+function syncRightRailBodyScrollLock(shouldLock) {
+  if (typeof document === 'undefined') return
+  document.body.style.overflow = shouldLock ? 'hidden' : ''
+}
+
 onMounted(async () => {
   if (typeof window !== 'undefined') {
     const savedTheme = window.localStorage.getItem('tier-maker:theme')
@@ -290,6 +319,12 @@ onMounted(async () => {
     const saved = window.localStorage.getItem('tier-maker:right-rail-open')
     if (saved === '0') rightRailOpen.value = false
   }
+  if (isMobileLayout.value) {
+    mobileLeftNavOpen.value = false
+    rightRailOpen.value = false
+  } else {
+    rightRailOpen.value = true
+  }
   searchQuery.value = typeof route.query.q === 'string' ? route.query.q : ''
 })
 
@@ -309,6 +344,7 @@ onBeforeUnmount(() => {
     window.removeEventListener('resize', syncViewportWidth)
     window.removeEventListener('keydown', handleGlobalKeydown)
   }
+  syncRightRailBodyScrollLock(false)
 })
 
 watch(
@@ -317,13 +353,27 @@ watch(
     searchQuery.value = typeof route.query.q === 'string' ? route.query.q : ''
     isCollapsedSearchOpen.value = false
     isGuideModalOpen.value = false
+    if (isMobileLayout.value) {
+      mobileLeftNavOpen.value = false
+      rightRailOpen.value = false
+    }
   }
 )
 
 watch(
   isMobileLayout,
   (mobile) => {
-    if (mobile) leftRailCollapsed.value = false
+    if (mobile) {
+      leftRailCollapsed.value = false
+      mobileLeftNavOpen.value = false
+      rightRailOpen.value = false
+      return
+    }
+    mobileLeftNavOpen.value = false
+    rightRailOpen.value = true
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem('tier-maker:right-rail-open', '1')
+    }
   },
   { immediate: true }
 )
@@ -331,7 +381,7 @@ watch(
 watch(
   usesLocalRightRail,
   (needed) => {
-    if (!needed || rightRailOpen.value) return
+    if (!needed || rightRailOpen.value || isMobileLayout.value) return
     rightRailOpen.value = true
     if (typeof window !== 'undefined') {
       window.localStorage.setItem('tier-maker:right-rail-open', '1')
@@ -340,13 +390,24 @@ watch(
   { immediate: true }
 )
 
+watch(
+  shouldLockRightRailBodyScroll,
+  (shouldLock) => {
+    syncRightRailBodyScrollLock(shouldLock)
+  },
+  { immediate: true }
+)
+
 function isRouteActive(path) {
   if (path === '/') return route.path === '/'
   return route.path.startsWith(path)
 }
 
 function toggleLeftRail() {
-  if (isMobileLayout.value) return
+  if (isMobileLayout.value) {
+    mobileLeftNavOpen.value = !mobileLeftNavOpen.value
+    return
+  }
   leftRailCollapsed.value = !leftRailCollapsed.value
   if (typeof window !== 'undefined') {
     window.localStorage.setItem('tier-maker:left-rail-collapsed', leftRailCollapsed.value ? '1' : '0')
@@ -427,6 +488,7 @@ function reloadApp() {
     class="appShell"
     :class="{
       'appShell--leftCollapsed': leftRailCollapsed,
+      'appShell--mobileNavClosed': isMobileLayout && !mobileLeftNavOpen,
       'appShell--rightClosed': !rightRailOpen,
       'appShell--rightOverlay': isRightRailOverlay,
     }"
@@ -461,7 +523,7 @@ function reloadApp() {
 
         <div class="leftRail__body">
         <div class="leftRail__content">
-        <div v-if="authReady && auth.user" class="appUserCard">
+        <div v-if="authReady" class="appUserCard">
           <div class="appUserCard__button">
             <img v-if="avatarUrl" :src="avatarUrl" class="appUserCard__avatar" alt="avatar" draggable="false" />
             <div v-else class="appUserCard__avatar appUserCard__avatar--fallback">{{ accountName[0]?.toUpperCase() || 'U' }}</div>
@@ -469,40 +531,52 @@ function reloadApp() {
               <div class="appUserCard__name">{{ accountName }}</div>
               <div class="appUserCard__email">{{ accountEmail }}</div>
             </div>
+            <button
+              v-if="isMobileLayout"
+              class="appUserCard__navToggle"
+              type="button"
+              :aria-label="mobileLeftNavOpen ? '네비게이션 메뉴 닫기' : '네비게이션 메뉴 열기'"
+              :aria-expanded="mobileLeftNavOpen"
+              @click="toggleLeftRail"
+            >
+              <SvgIcon :src="mobileLeftNavOpen ? iconDockToLeft : iconDockToRight" :size="24" />
+            </button>
           </div>
         </div>
 
-        <form class="searchStub" @submit.prevent="submitGlobalSearch">
-          <button class="searchStub__iconButton" type="button" :aria-label="leftRailCollapsed ? '검색 열기' : '검색'" @click="handleLeftRailSearch">
-            <span class="searchStub__icon">
-              <SvgIcon :src="iconSearch" :size="24" />
-            </span>
-          </button>
-          <input v-model="searchQuery" class="searchStub__input" type="search" :placeholder="leftRailCollapsed ? '' : leftRailSearchPlaceholder" />
-        </form>
+        <div class="leftRail__mobileMenu">
+          <form class="searchStub" @submit.prevent="submitGlobalSearch">
+            <button class="searchStub__iconButton" type="button" :aria-label="leftRailCollapsed ? '검색 열기' : '검색'" @click="handleLeftRailSearch">
+              <span class="searchStub__icon">
+                <SvgIcon :src="iconSearch" :size="24" />
+              </span>
+            </button>
+            <input v-model="searchQuery" class="searchStub__input" type="search" :placeholder="leftRailCollapsed ? '' : leftRailSearchPlaceholder" />
+          </form>
 
-        <nav
-          class="leftNav"
-          :class="{ 'leftNav--hasActive': activeLeftNavIndex >= 0 }"
-          :style="{ '--left-nav-active-index': String(Math.max(activeLeftNavIndex, 0)) }"
-        >
-          <span class="leftNav__indicator" aria-hidden="true"></span>
-          <RouterLink
-            v-for="item in leftNavItems"
-            :key="item.key"
-            :to="item.path"
-            class="leftNav__item"
-            :class="{ 'leftNav__item--active': isRouteActive(item.path) }"
-            :title="leftRailCollapsed ? item.label : ''"
-            :aria-label="leftRailCollapsed ? item.label : undefined"
+          <nav
+            class="leftNav"
+            :class="{ 'leftNav--hasActive': activeLeftNavIndex >= 0 }"
+            :style="{ '--left-nav-active-index': String(Math.max(activeLeftNavIndex, 0)) }"
           >
-            <span class="leftNav__glyph">
-              <SvgIcon v-if="item.iconSrc" :src="item.iconSrc" :size="24" />
-              <svg v-else viewBox="0 0 24 24" aria-hidden="true"><path :d="item.icon" /></svg>
-            </span>
-            <span class="leftNav__label">{{ item.label }}</span>
-          </RouterLink>
-        </nav>
+            <span class="leftNav__indicator" aria-hidden="true"></span>
+            <RouterLink
+              v-for="item in leftNavItems"
+              :key="item.key"
+              :to="item.path"
+              class="leftNav__item"
+              :class="{ 'leftNav__item--active': isRouteActive(item.path) }"
+              :title="leftRailCollapsed ? item.label : ''"
+              :aria-label="leftRailCollapsed ? item.label : undefined"
+            >
+              <span class="leftNav__glyph">
+                <SvgIcon v-if="item.iconSrc" :src="item.iconSrc" :size="24" />
+                <svg v-else viewBox="0 0 24 24" aria-hidden="true"><path :d="item.icon" /></svg>
+              </span>
+              <span class="leftNav__label">{{ item.label }}</span>
+            </RouterLink>
+          </nav>
+        </div>
 
         </div>
         <div class="leftRail__bottom">
@@ -637,8 +711,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>
@@ -942,6 +1020,25 @@ function reloadApp() {
   transition: opacity 180ms ease, max-width 220ms ease, transform 220ms ease;
 }
 
+.leftRail__mobileMenu {
+  display: grid;
+}
+
+.appUserCard__navToggle {
+  display: none;
+  width: 42px;
+  height: 42px;
+  margin-left: auto;
+  border: 0;
+  border-radius: 14px;
+  background: var(--theme-surface-soft);
+  color: var(--theme-text-soft);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
 .appUserCard__name {
   font-size: 14px;
   font-weight: 800;
@@ -1318,12 +1415,13 @@ function reloadApp() {
 }
 
 .rightRail__footer a {
-  color: #00ffff;
+  color: var(--theme-text-strong);
+  font-weight: 700;
   text-decoration: none;
 }
 
 .rightRail__footer a:hover {
-  color: #00ffff;
+  color: var(--theme-text);
   text-decoration: underline;
 }
 
@@ -1757,6 +1855,10 @@ function reloadApp() {
   gap: 14px;
 }
 
+.localRightRailRoot--hidden {
+  display: none;
+}
+
 .toastStack {
   position: fixed;
   top: 18px;
@@ -1944,9 +2046,15 @@ function reloadApp() {
 @media (max-width: 860px) {
   .appShell {
     grid-template-columns: 1fr;
+    grid-template-rows: auto minmax(0, 1fr);
+    align-content: start;
     min-height: 100dvh;
   }
 
+  .railHeader {
+    padding: 0 20px;
+  }
+
   .leftRail {
     min-height: auto;
     height: auto;
@@ -1963,6 +2071,43 @@ function reloadApp() {
     padding: 12px 14px;
   }
 
+  .appUserCard {
+    margin-bottom: 0;
+  }
+
+  .appUserCard__button {
+    padding: 8px 6px;
+  }
+
+  .appUserCard__meta {
+    max-width: none;
+  }
+
+  .appUserCard__navToggle {
+    display: inline-flex;
+  }
+
+  .workspaceHead .ghostIcon--iconOnly,
+  .rightRail__top .ghostIcon--iconOnly {
+    width: 42px;
+    height: 42px;
+    min-width: 42px;
+    border: 1px solid var(--theme-border);
+    border-radius: 14px;
+    background: var(--theme-surface-soft);
+    color: var(--theme-text-soft);
+  }
+
+  .rightRail--overlay {
+    inset: 0;
+    width: 100vw;
+    min-width: 0;
+    height: 100dvh;
+    min-height: 100dvh;
+    border-left: 0;
+    box-shadow: none;
+  }
+
   .appMain {
     min-height: auto;
     border-left: 0;
@@ -1980,6 +2125,18 @@ function reloadApp() {
     overflow: visible;
   }
 
+  .leftRail__mobileMenu {
+    max-height: 540px;
+    opacity: 1;
+    transform: translateY(0);
+    overflow: hidden;
+    transition:
+      max-height 260ms ease,
+      opacity 220ms ease,
+      transform 220ms ease,
+      margin-top 220ms ease;
+  }
+
   .appShell--leftCollapsed .leftRail__top {
     display: none;
   }
@@ -2015,17 +2172,44 @@ function reloadApp() {
   }
 
   .workspaceBody {
-    padding: 0;
+    padding: 0 0 calc(28px + env(safe-area-inset-bottom));
     border-radius: 0;
+    background: transparent;
     margin: 14px 14px 0;
   }
 
   .workspaceBody--localRail {
-    padding: 0;
+    padding: 0 0 calc(28px + env(safe-area-inset-bottom));
     border-radius: 0;
+    background: transparent;
     margin: 14px 14px 0;
   }
 
+  .appShell--mobileNavClosed .leftRail__mobileMenu {
+    max-height: 0;
+    margin-top: -8px;
+    opacity: 0;
+    transform: translateY(-8px);
+    pointer-events: none;
+  }
+
+  .appShell--mobileNavClosed .leftRail__bottom {
+    display: none;
+  }
+
+  .rightRail--overlay .rightRail__body {
+    padding: 14px 20px calc(32px + env(safe-area-inset-bottom));
+  }
+
+  .rightRail--overlay .rightRail__content {
+    flex: 0 0 auto;
+    overflow: visible;
+  }
+
+  .rightRail--overlay .localRightRailRoot {
+    min-height: auto;
+  }
+
   .collapsedSearchModal {
     padding: 72px 16px 16px;
   }

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,16 @@ 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>
+        <span v-if="item.replacedAt" class="customItemCard__badge customItemCard__badge--replaced">대체됨</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/components/admin/AdminTierlistsSection.vue

@@ -23,6 +23,7 @@ const props = defineProps({
   adminTierListTotal: { type: Number, required: true },
   adminTierListStats: { type: Object, required: true },
   openAdminTierListManageModal: { type: Function, required: true },
+  toggleAdminTierListFeatured: { type: Function, required: true },
   moveAdminTierListPage: { type: Function, required: true },
 })
 </script>
@@ -128,6 +129,7 @@ const props = defineProps({
         <div class="panel__title">전체 티어표 관리</div>
         <div class="tierAdminHeaderStats">
           <span class="pill">전체 {{ props.adminTierListStats.total || 0 }}개</span>
+          <span class="pill pill--accent">추천 {{ props.adminTierListStats.featuredCount || 0 }}개</span>
           <span class="pill pill--soft">공개 {{ props.adminTierListStats.publicCount || 0 }}개</span>
           <span class="pill pill--soft">비공개 {{ props.adminTierListStats.privateCount || 0 }}개</span>
         </div>
@@ -156,6 +158,8 @@ const props = defineProps({
 
           <div class="tierAdminCard__stats">
             <span class="pill" :class="tierList.isPublic ? 'pill--public' : 'pill--private'">{{ props.tierListVisibilityLabel(tierList) }}</span>
+            <span v-if="tierList.isFeatured" class="pill pill--accent">추천 노출중</span>
+            <span class="pill pill--soft">즐겨찾기 {{ tierList.favoriteCount || 0 }}개</span>
             <span class="pill">전체 아이템 {{ tierList.itemCount }}개</span>
             <span class="pill" :class="{ 'pill--accent': tierList.extraItemCount > 0 }">추가 아이템 {{ tierList.extraItemCount }}개</span>
           </div>
@@ -177,6 +181,14 @@ const props = defineProps({
           </div>
 
           <div class="tierAdminSection__actions">
+            <button
+              class="btn btn--small"
+              :class="tierList.isFeatured ? 'btn--ghost' : 'btn--primary'"
+              :disabled="!tierList.isPublic && !tierList.isFeatured"
+              @click="props.toggleAdminTierListFeatured(tierList)"
+            >
+              {{ tierList.isFeatured ? '추천 해제' : '추천 지정' }}
+            </button>
             <button class="btn btn--ghost btn--small" @click="props.openAdminTierListManageModal(tierList)">관리</button>
           </div>
         </div>

frontend/src/components/admin/AdminUsersSection.vue

@@ -17,14 +17,12 @@ const props = defineProps({
   removeUserAvatar: { type: Function, required: true },
   canEditUserAvatar: { type: Function, required: true },
   canEditUserInfo: { type: Function, required: true },
-  canResetUserPassword: { type: Function, required: true },
   canDeleteUser: { type: Function, required: true },
   roleLabelOf: { type: Function, required: true },
   fmt: { type: Function, required: true },
-  openUserPasswordModal: { type: Function, required: true },
+  openUserProfile: { type: Function, required: true },
   openUserDeleteModal: { type: Function, required: true },
   openUserEditModal: { type: Function, required: true },
-  lockResetIcon: { type: String, required: true },
   deleteIcon: { type: String, required: true },
 })
 
@@ -49,16 +47,19 @@ const userSortDirectionModel = computed({
     <div class="sectionHeader">
       <div>
         <div class="panel__title">회원 관리</div>
-        <div class="hint hint--tight">회원 프로필을 정리하고, 필요한 경우에만 권한 변경과 비밀번호 초기화를 진행할 수 있어요.</div>
+        <div class="hint hint--tight">팔로워·즐겨찾기 지표로 핵심 작성자를 확인하고, 회원 정보와 권한만 최소한으로 관리해요.</div>
       </div>
     </div>
 
     <div class="toolbar toolbar--secondary">
       <input v-model="userQueryModel" class="input toolbar__search" placeholder="이메일, 닉네임 검색" @keydown.enter.prevent="props.submitUserFilters" />
       <select v-model="userSortModel" class="select toolbar__select" @change="props.submitUserFilters">
-        <option value="recent">최근 활동순</option>
+        <option value="recent">최근 콘텐츠 활동순</option>
+        <option value="lastLogin">마지막 접속순</option>
         <option value="created">가입순</option>
         <option value="tierlists">작성 티어표 많은 순</option>
+        <option value="followers">팔로워 많은 순</option>
+        <option value="favorites">받은 즐겨찾기 많은 순</option>
       </select>
       <select v-model="userSortDirectionModel" class="select toolbar__select" @change="props.submitUserFilters">
         <option value="desc">내림차순</option>
@@ -113,22 +114,16 @@ const userSortDirectionModel = computed({
         <div class="userInfoList">
           <div class="userInfoLine"><span>가입일</span><strong>{{ props.fmt(user.createdAt) }}</strong></div>
           <div class="userInfoLine"><span>작성 티어표</span><strong>{{ user.tierListCount }}개</strong></div>
-          <div class="userInfoLine"><span>최근 활동</span><strong>{{ props.fmt(user.recentActivityAt || user.createdAt) }}</strong></div>
+          <div class="userInfoLine"><span>팔로워</span><strong>{{ user.followerCount || 0 }}명</strong></div>
+          <div class="userInfoLine"><span>받은 즐겨찾기</span><strong>{{ user.receivedFavoriteCount || 0 }}개</strong></div>
+          <div class="userInfoLine"><span>최근 콘텐츠 활동</span><strong>{{ props.fmt(user.recentActivityAt || user.createdAt) }}</strong></div>
+          <div class="userInfoLine"><span>마지막 접속일</span><strong>{{ user.lastLoginAt ? props.fmt(user.lastLoginAt) : '기록 없음' }}</strong></div>
           <div class="userInfoLine"><span>계정명</span><strong>{{ user.email }}</strong></div>
           <div class="userInfoLine"><span>닉네임</span><strong>{{ user.nickname || '미설정' }}</strong></div>
           <div class="userInfoLine"><span>권한</span><strong>{{ props.roleLabelOf(user) }}</strong></div>
         </div>
 
         <div class="userCard__actions userCard__actions--compact">
-          <button
-            class="iconActionButton"
-            type="button"
-            title="비밀번호 초기화"
-            :disabled="!props.canResetUserPassword(user)"
-            @click="props.openUserPasswordModal(user)"
-          >
-            <SvgIcon class="iconActionButton__icon" :src="props.lockResetIcon" :size="18" />
-          </button>
           <button
             class="iconActionButton iconActionButton--danger"
             type="button"
@@ -146,6 +141,13 @@ const userSortDirectionModel = computed({
           >
             회원 정보 수정
           </button>
+          <button
+            class="btn btn--ghost userSaveButton"
+            type="button"
+            @click="props.openUserProfile(user)"
+          >
+            프로필 보기
+          </button>
         </div>
       </article>
     </div>

frontend/src/composables/useAdminCustomItems.js

@@ -16,6 +16,11 @@ export function useAdminCustomItems({
   customItemModalDraftLabel,
   customItemModalLabelSaving,
   customItemModalTargetTemplateId,
+  customItemReplacementQuery,
+  customItemReplacementItems,
+  customItemReplacementLoading,
+  customItemReplacementTargetId,
+  customItemReplacementBusy,
   templates,
   selectedTemplateId,
   refreshCustomItems,
@@ -56,10 +61,38 @@ export function useAdminCustomItems({
     customItemModalHistoryActive.value = true
   }
 
+  async function refreshReplacementCandidates() {
+    const currentItemId = modalTargetCustomItem.value?.id || ''
+    if (!currentItemId) {
+      customItemReplacementItems.value = []
+      return
+    }
+
+    try {
+      customItemReplacementLoading.value = true
+      const data = await api.listAdminCustomItems({
+        q: customItemReplacementQuery.value,
+        page: 1,
+        limit: 50,
+        filter: 'all',
+      })
+      customItemReplacementItems.value = (data.items || []).filter((item) => item?.id && item.id !== currentItemId)
+    } catch (e) {
+      error.value = '대체할 이미지 목록을 불러오지 못했어요.'
+      customItemReplacementItems.value = []
+    } finally {
+      customItemReplacementLoading.value = false
+    }
+  }
+
   function openCustomItemModal(item) {
     modalTargetCustomItem.value = item || null
     customItemModalDraftLabel.value = item?.label || ''
     customItemModalTargetTemplateId.value = ''
+    customItemReplacementQuery.value = ''
+    customItemReplacementItems.value = []
+    customItemReplacementTargetId.value = ''
+    customItemReplacementBusy.value = false
     customItemModalOpen.value = true
     pushCustomItemModalHistoryState()
   }
@@ -71,6 +104,11 @@ export function useAdminCustomItems({
     customItemModalDraftLabel.value = ''
     customItemModalLabelSaving.value = false
     customItemModalTargetTemplateId.value = ''
+    customItemReplacementQuery.value = ''
+    customItemReplacementItems.value = []
+    customItemReplacementTargetId.value = ''
+    customItemReplacementLoading.value = false
+    customItemReplacementBusy.value = false
 
     if (fromPopState) {
       customItemModalHistoryActive.value = false
@@ -85,7 +123,7 @@ export function useAdminCustomItems({
 
   function openCustomItemDeleteModal(item) {
     if (!item) return
-    if (item.sourceType === 'user' && (item.usageCount > 0 || item.linkedTemplates.length > 0)) {
+    if (item.sourceType === 'user' && !item.replacedAt && (item.usageCount > 0 || item.linkedTemplates.length > 0)) {
       error.value = '사용 중이거나 템플릿에 연결된 사용자 업로드 이미지는 먼저 참조를 정리해야 삭제할 수 있어요.'
       return
     }
@@ -109,7 +147,7 @@ export function useAdminCustomItems({
   async function removeCustomItem(item = modalTargetCustomItem.value) {
     resetMessages()
     if (!item) return
-    if (item.sourceType === 'user' && (item.usageCount > 0 || item.linkedTemplates.length > 0)) {
+    if (item.sourceType === 'user' && !item.replacedAt && (item.usageCount > 0 || item.linkedTemplates.length > 0)) {
       error.value = '사용 중이거나 템플릿에 연결된 사용자 업로드 이미지는 먼저 참조를 정리해야 삭제할 수 있어요.'
       return
     }
@@ -119,26 +157,44 @@ 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'
+            ? '이미지 자산 삭제에 실패했어요.'
+            : '사용자 업로드 이미지 삭제에 실패했어요.'
     }
   }
 
   async function removeUnusedCustomItems() {
     resetMessages()
-    const ok = window.confirm('현재 검색 조건에 맞는 미사용 커스텀 이미지를 모두 삭제할까요?')
+    const ok = window.confirm('현재 검색 조건에 맞는 미사용 이미지를 모두 삭제할까요?')
     if (!ok) return
 
     try {
       const data = await api.deleteAdminUnusedCustomItems({ q: customItemQuery.value })
       await refreshCustomItems()
-      success.value = `${data.deletedCount || 0}개의 미사용 사용자 업로드 이미지를 삭제했어요.`
+      success.value = `${data.deletedCount || 0}개의 미사용 이미지를 삭제했어요.`
     } catch (e) {
-      error.value = '미사용 커스텀 이미지 일괄 삭제에 실패했어요.'
+      error.value = '미사용 이미지 일괄 삭제에 실패했어요.'
     }
   }
 
+  function showUnusedCustomItems() {
+    if (customItemFilter.value === 'unused') return
+    resetMessages()
+    customItemFilter.value = 'unused'
+    customItemPage.value = 1
+    refreshCustomItems()
+  }
+
   async function saveCustomItemModalLabel() {
     const item = modalTargetCustomItem.value
     const nextLabel = customItemModalDraftLabel.value.trim().slice(0, 60)
@@ -180,6 +236,56 @@ export function useAdminCustomItems({
     }
   }
 
+  async function replaceCustomItem(item = modalTargetCustomItem.value) {
+    resetMessages()
+    const targetItem = customItemReplacementItems.value.find((entry) => entry.id === customItemReplacementTargetId.value)
+    if (!item?.id) {
+      error.value = '대체할 원본 아이템을 찾지 못했어요.'
+      return
+    }
+    if (!targetItem?.id) {
+      error.value = '대체할 대상 이미지를 먼저 선택해주세요.'
+      return
+    }
+
+    try {
+      customItemReplacementBusy.value = true
+      const data = await api.replaceAdminCustomItem(item.id, {
+        targetItemId: targetItem.id,
+        targetSourceType: targetItem.sourceType || 'user',
+      })
+      if (selectedTemplateId.value) await loadTemplate()
+      await refreshCustomItems()
+      closeCustomItemModal()
+      success.value = `"${item.label}" 이미지를 "${data.targetItem?.label || targetItem.label}" 기준으로 대체했어요.`
+    } catch (e) {
+      error.value = e?.status === 409 ? '같은 이미지/이름으로는 대체할 수 없어요.' : '이미지 대체에 실패했어요.'
+    } finally {
+      customItemReplacementBusy.value = false
+    }
+  }
+
+  async function restoreCustomItem(item = modalTargetCustomItem.value) {
+    resetMessages()
+    if (!item?.id || !item.replacedAt) {
+      error.value = '복구할 대체 이력이 없어요.'
+      return
+    }
+
+    try {
+      customItemReplacementBusy.value = true
+      await api.restoreAdminCustomItem(item.id)
+      if (selectedTemplateId.value) await loadTemplate()
+      await refreshCustomItems()
+      closeCustomItemModal()
+      success.value = `"${item.label}" 아이템을 원래 이미지로 복구했어요.`
+    } catch (e) {
+      error.value = '원래 이미지로 복구하지 못했어요.'
+    } finally {
+      customItemReplacementBusy.value = false
+    }
+  }
+
   return {
     submitCustomItemSearch,
     changeCustomItemFilter,
@@ -193,7 +299,11 @@ export function useAdminCustomItems({
     jumpToTemplateAdmin,
     removeCustomItem,
     removeUnusedCustomItems,
+    showUnusedCustomItems,
     saveCustomItemModalLabel,
     promoteCustomItem,
+    refreshReplacementCandidates,
+    replaceCustomItem,
+    restoreCustomItem,
   }
 }

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/lib/api.js

@@ -39,7 +39,7 @@ async function request(path, { method = 'GET', body, headers } = {}) {
     } else if (res.status >= 500) {
       emitBackendStatus({
         state: 'maintenance',
-        message: '서비스 내부 점검이 필요합니다. 잠시 후 다시 이용해주세요.',
+        message: '서비스 내부 점검중입니다. 잠시 후 다시 이용해주세요.',
         path,
       })
     }
@@ -57,6 +57,13 @@ export const api = {
   authMeta: () => request('/api/auth/meta'),
   signup: ({ email, nickname, password }) => request('/api/auth/signup', { method: 'POST', body: { email, nickname, password } }),
   login: ({ email, password }) => request('/api/auth/login', { method: 'POST', body: { email, password } }),
+  verifyEmail: ({ token }) => request('/api/auth/email/verify', { method: 'POST', body: { token } }),
+  resendVerificationEmail: ({ email }) => request('/api/auth/email/resend', { method: 'POST', body: { email } }),
+  requestPasswordReset: ({ email }) => request('/api/auth/password-reset/request', { method: 'POST', body: { email } }),
+  confirmPasswordReset: ({ token, password }) =>
+    request('/api/auth/password-reset/confirm', { method: 'POST', body: { token, password } }),
+  changePassword: ({ currentPassword, nextPassword }) =>
+    request('/api/auth/password', { method: 'POST', body: { currentPassword, nextPassword } }),
   logout: () => request('/api/auth/logout', { method: 'POST' }),
 
   listTopics: () => request('/api/topics'),
@@ -74,12 +81,14 @@ export const api = {
     request(
       `/api/admin/custom-items?q=${encodeURIComponent(q)}&page=${encodeURIComponent(page)}&limit=${encodeURIComponent(limit)}&filter=${encodeURIComponent(filter)}`
     ),
-  listAdminTierLists: ({ q = '', topicId = '', page = 1, limit = 50 } = {}) =>
-    request(`/api/admin/tierlists?q=${encodeURIComponent(q)}&topicId=${encodeURIComponent(topicId)}&page=${encodeURIComponent(page)}&limit=${encodeURIComponent(limit)}`),
-  getAdminTierListStats: ({ q = '', topicId = '' } = {}) =>
-    request(`/api/admin/tierlists/stats?q=${encodeURIComponent(q)}&topicId=${encodeURIComponent(topicId)}`),
+  listAdminTierLists: ({ q = '', topicId = '', sort = 'recent', minFavorites = 0, page = 1, limit = 50 } = {}) =>
+    request(`/api/admin/tierlists?q=${encodeURIComponent(q)}&topicId=${encodeURIComponent(topicId)}&sort=${encodeURIComponent(sort)}&minFavorites=${encodeURIComponent(minFavorites)}&page=${encodeURIComponent(page)}&limit=${encodeURIComponent(limit)}`),
+  getAdminTierListStats: ({ q = '', topicId = '', minFavorites = 0 } = {}) =>
+    request(`/api/admin/tierlists/stats?q=${encodeURIComponent(q)}&topicId=${encodeURIComponent(topicId)}&minFavorites=${encodeURIComponent(minFavorites)}`),
   updateAdminTierList: (tierListId, payload) =>
     request(`/api/admin/tierlists/${encodeURIComponent(tierListId)}`, { method: 'PATCH', body: payload }),
+  updateAdminTierListFeatured: (tierListId, payload) =>
+    request(`/api/admin/tierlists/${encodeURIComponent(tierListId)}/featured`, { method: 'PATCH', body: payload }),
   deleteAdminTierList: (tierListId) =>
     request(`/api/admin/tierlists/${encodeURIComponent(tierListId)}`, { method: 'DELETE' }),
   listAdminTemplateRequests: () => request('/api/admin/template-requests'),
@@ -95,6 +104,10 @@ export const api = {
   cleanupAdminUnusedImageAssets: (payload) => request('/api/admin/image-assets/cleanup', { method: 'POST', body: payload || {} }),
   promoteAdminTemplateItem: (itemId, payload) =>
     request(`/api/admin/custom-items/${encodeURIComponent(itemId)}/promote`, { method: 'POST', body: payload }),
+  replaceAdminCustomItem: (itemId, payload) =>
+    request(`/api/admin/custom-items/${encodeURIComponent(itemId)}/replace`, { method: 'POST', body: payload }),
+  restoreAdminCustomItem: (itemId) =>
+    request(`/api/admin/custom-items/${encodeURIComponent(itemId)}/restore`, { method: 'POST', body: {} }),
   updateAdminCustomItemLabel: (itemId, payload) =>
     request(`/api/admin/custom-items/${encodeURIComponent(itemId)}/label`, { method: 'PATCH', body: payload }),
   promoteAdminTierListItems: (tierListId, payload) =>
@@ -146,6 +159,13 @@ export const api = {
   listMyTierLists: () => request('/api/tierlists/me'),
   listMyFavoriteTierLists: ({ q = '', sort = 'favorited' } = {}) =>
     request(`/api/tierlists/favorites/me?q=${encodeURIComponent(q)}&sort=${encodeURIComponent(sort)}`),
+  getUserProfile: (userId) => request(`/api/users/${encodeURIComponent(userId)}`),
+  listUserPublicTierLists: (userId, { q = '' } = {}) =>
+    request(`/api/users/${encodeURIComponent(userId)}/tierlists?q=${encodeURIComponent(q || '')}`),
+  listFollowingFeed: ({ q = '' } = {}) =>
+    request(`/api/users/following-feed?q=${encodeURIComponent(q || '')}`),
+  followUser: (userId) => request(`/api/users/${encodeURIComponent(userId)}/follow`, { method: 'POST', body: {} }),
+  unfollowUser: (userId) => request(`/api/users/${encodeURIComponent(userId)}/follow`, { method: 'DELETE' }),
   getTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}`),
   favoriteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/favorite`, { method: 'POST' }),
   unfavoriteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/favorite`, { method: 'DELETE' }),

frontend/src/lib/paths.js

@@ -25,6 +25,10 @@ export function editorPath(topicId, tierListId, { preview = false } = {}) {
   return preview ? `${base}?preview=1` : base
 }
 
+export function shareEditorPath(topicId, tierListId) {
+  return `/share/editor/${encodeSegment(topicId)}/${encodeSegment(tierListId)}`
+}
+
 export function mePath() {
   return '/me'
 }
@@ -33,6 +37,14 @@ export function favoritesPath() {
   return '/favorites'
 }
 
+export function followingFeedPath() {
+  return '/following'
+}
+
 export function profilePath() {
   return '/profile'
 }
+
+export function userProfilePath(userId) {
+  return `/users/${encodeSegment(userId)}`
+}

frontend/src/router/index.js

@@ -6,6 +6,8 @@ import TierEditorView from '../views/TierEditorView.vue'
 import LoginView from '../views/LoginView.vue'
 import MyTierListsView from '../views/MyTierListsView.vue'
 import FavoriteTierListsView from '../views/FavoriteTierListsView.vue'
+import FollowingFeedView from '../views/FollowingFeedView.vue'
+import UserProfileView from '../views/UserProfileView.vue'
 import AdminView from '../views/AdminView.vue'
 import ProfileView from '../views/ProfileView.vue'
 import SearchResultsView from '../views/SearchResultsView.vue'
@@ -22,6 +24,7 @@ export function createRouter() {
       { path: '/login', name: 'login', component: LoginView },
       { path: '/me', name: 'me', component: MyTierListsView },
       { path: '/favorites', name: 'favorites', component: FavoriteTierListsView },
+      { path: '/following', name: 'followingFeed', component: FollowingFeedView },
       { path: '/search', name: 'search', component: SearchResultsView },
       { path: '/admin', redirect: '/admin/featured' },
       { path: '/admin/featured', name: 'adminFeatured', component: AdminView },
@@ -30,6 +33,7 @@ export function createRouter() {
       { path: '/admin/tierlists', name: 'adminTierlists', component: AdminView },
       { path: '/admin/users', name: 'adminUsers', component: AdminView },
       { path: '/profile', name: 'profile', component: ProfileView },
+      { path: '/users/:userId', name: 'userProfile', component: UserProfileView },
     ],
   })
 

frontend/src/stores/auth.js

@@ -30,16 +30,28 @@ export const useAuthStore = defineStore('auth', {
       return refreshPromise
     },
     async signup(email, nickname, password) {
-      const user = await api.signup({ email, nickname, password })
-      this.user = user
+      const data = await api.signup({ email, nickname, password })
+      this.user = data?.user || null
       this.hydrated = true
-      return user
+      return data
     },
     async login(email, password) {
-      const user = await api.login({ email, password })
-      this.user = user
+      const data = await api.login({ email, password })
+      this.user = data?.user || null
       this.hydrated = true
-      return user
+      return data?.user || null
+    },
+    async verifyEmail(token) {
+      const data = await api.verifyEmail({ token })
+      this.user = data?.user || null
+      this.hydrated = true
+      return this.user
+    },
+    async confirmPasswordReset(token, password) {
+      const data = await api.confirmPasswordReset({ token, password })
+      this.user = data?.user || null
+      this.hydrated = true
+      return this.user
     },
     async logout() {
       await api.logout()

frontend/src/views/AdminView.vue

@@ -2,9 +2,8 @@
 import { Teleport, computed, inject, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
-import { editorPath } from '../lib/paths'
+import { editorPath, userProfilePath } from '../lib/paths'
 import { toApiUrl } from '../lib/runtime'
-import lockResetIcon from '../assets/icons/lock_reset.svg'
 import deleteIcon from '../assets/icons/delete.svg'
 import SvgIcon from '../components/SvgIcon.vue'
 import AdminFeaturedSection from '../components/admin/AdminFeaturedSection.vue'
@@ -45,16 +44,23 @@ 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 customItemReplacementQuery = ref('')
+const customItemReplacementItems = ref([])
+const customItemReplacementLoading = ref(false)
+const customItemReplacementTargetId = ref('')
+const customItemReplacementBusy = ref(false)
 
 const adminTierLists = ref([])
 const adminTierListQuery = ref('')
 const adminTierListTopicId = ref('')
+const adminTierListSort = ref('recent')
+const adminTierListMinFavorites = ref(0)
 const adminTierListPage = ref(1)
 const adminTierListLimit = ref(50)
 const adminTierListTotal = ref(0)
-const adminTierListStats = ref({ total: 0, publicCount: 0, privateCount: 0 })
+const adminTierListStats = ref({ total: 0, publicCount: 0, privateCount: 0, featuredCount: 0 })
 const selectedTemplateTierListStats = ref({ total: 0, publicCount: 0, privateCount: 0 })
 const templateRequests = ref([])
 const importModalOpen = ref(false)
@@ -109,6 +115,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([])
@@ -176,6 +185,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)
@@ -202,7 +222,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)
   })
 
@@ -212,6 +232,9 @@ const filteredTemplatePickerTemplates = computed(() => {
   })
 })
 const customItemTargetTemplate = computed(() => templates.value.find((template) => template.id === customItemModalTargetTemplateId.value) || null)
+const customItemReplacementTarget = computed(
+  () => customItemReplacementItems.value.find((item) => item.id === customItemReplacementTargetId.value) || null
+)
 const importModalItemCount = computed(() => importModalItems.value.length)
 const activeTabTitle = computed(() => {
   if (activeTab.value === 'featured') return '목록 관리'
@@ -230,7 +253,7 @@ const activeTabDescription = computed(() => {
     return '템플릿 생성, 선택, 썸네일, 기본 아이템 관리를 전용 작업 화면으로 분리했습니다.'
   }
   if (activeTab.value === 'items') {
-    return '사용자 업로드와 관리자 템플릿 이미지를 함께 검수하고, 필요한 템플릿에 직접 연결할 수 있어요.'
+    return '사용자 아이템과 템플릿 아이템을 함께 검수하고, 필요한 템플릿에 직접 연결할 수 있어요.'
   }
   if (activeTab.value === 'tierlists') {
     return tierlistsMode.value === 'requests'
@@ -241,7 +264,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') {
@@ -263,8 +291,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') {
@@ -277,6 +306,7 @@ const adminOverviewStats = computed(() => {
         ]
       : [
           { label: '검색 결과', value: `${adminTierListStats.value.total || 0}` },
+          { label: '추천', value: `${adminTierListStats.value.featuredCount || 0}` },
           { label: '공개', value: `${adminTierListStats.value.publicCount || 0}` },
           { label: '비공개', value: `${adminTierListStats.value.privateCount || 0}` },
           { label: '현재 페이지', value: `${adminTierListPage.value}/${adminTierListPageCount.value}` },
@@ -454,6 +484,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 }
@@ -488,7 +520,7 @@ watch(
 
     if (tab === 'items') {
       customItemQuery.value = ''
-      customItemFilter.value = 'all'
+      customItemFilter.value = 'library'
       customItemPage.value = 1
       await refreshCustomItems()
       return
@@ -597,13 +629,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(() => {
@@ -622,6 +655,18 @@ const visibleLinkedTemplates = computed(() =>
   (modalTargetCustomItem.value?.linkedTemplates || []).filter((template) => template?.id && template.id !== 'freeform')
 )
 const linkedCustomItemTemplateIds = computed(() => new Set(visibleLinkedTemplates.value.map((template) => template.id).filter(Boolean)))
+const canReplaceModalTarget = computed(() => modalTargetCustomItem.value?.sourceType === 'user')
+const replacementCandidateCount = computed(() => customItemReplacementItems.value.length)
+const hasDeletableUnusedItems = computed(() =>
+  customItems.value.some(
+    (item) =>
+      (item?.sourceType === 'user' &&
+        (!!item.replacedAt ||
+          (Number(item.usageCount || 0) === 0 && !(Array.isArray(item.linkedTemplates) && item.linkedTemplates.length > 0)))) ||
+      item?.sourceType === 'asset' ||
+      !!item?.isAssetLibraryItem
+  )
+)
 
 const imageStatsPeriodLabel = computed(() => (imageStatsMonth.value ? `${imageStatsMonth.value} 기준` : '전체 기간'))
 const imageStatsYearOptions = computed(() => {
@@ -745,7 +790,7 @@ function setTab(tab) {
   }
   if (tab === 'items') {
     customItemQuery.value = ''
-    customItemFilter.value = 'all'
+    customItemFilter.value = 'library'
     customItemPage.value = 1
     refreshCustomItems()
   }
@@ -823,6 +868,8 @@ async function refreshAdminTierLists() {
     const data = await api.listAdminTierLists({
       q: adminTierListQuery.value,
       topicId: adminTierListTopicId.value,
+      sort: adminTierListSort.value,
+      minFavorites: adminTierListMinFavorites.value,
       page: adminTierListPage.value,
       limit: adminTierListLimit.value,
     })
@@ -839,14 +886,19 @@ async function refreshAdminTierLists() {
 async function refreshAdminTierListStats() {
   if (!auth.user?.isAdmin) return
   try {
-    const data = await api.getAdminTierListStats({ q: adminTierListQuery.value, topicId: adminTierListTopicId.value })
+    const data = await api.getAdminTierListStats({
+      q: adminTierListQuery.value,
+      topicId: adminTierListTopicId.value,
+      minFavorites: adminTierListMinFavorites.value,
+    })
     adminTierListStats.value = {
       total: data.total || 0,
       publicCount: data.publicCount || 0,
       privateCount: data.privateCount || 0,
+      featuredCount: data.featuredCount || 0,
     }
   } catch (e) {
-    adminTierListStats.value = { total: 0, publicCount: 0, privateCount: 0 }
+    adminTierListStats.value = { total: 0, publicCount: 0, privateCount: 0, featuredCount: 0 }
   }
 }
 
@@ -877,7 +929,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 || '새 템플릿'}`
@@ -1007,8 +1059,12 @@ const {
   jumpToTemplateAdmin,
   removeCustomItem,
   removeUnusedCustomItems,
+  showUnusedCustomItems,
   saveCustomItemModalLabel,
   promoteCustomItem,
+  refreshReplacementCandidates,
+  replaceCustomItem,
+  restoreCustomItem,
 } = useAdminCustomItems({
   api,
   toast,
@@ -1025,6 +1081,11 @@ const {
   customItemModalDraftLabel,
   customItemModalLabelSaving,
   customItemModalTargetTemplateId,
+  customItemReplacementQuery,
+  customItemReplacementItems,
+  customItemReplacementLoading,
+  customItemReplacementTargetId,
+  customItemReplacementBusy,
   templates,
   selectedTemplateId,
   refreshCustomItems,
@@ -1196,6 +1257,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
@@ -1310,6 +1409,17 @@ function submitAdminTierListSearch() {
   refreshAdminTierLists()
 }
 
+function changeAdminTierListSort() {
+  adminTierListPage.value = 1
+  refreshAdminTierLists()
+}
+
+function changeAdminTierListMinFavorites() {
+  adminTierListMinFavorites.value = Math.max(Number(adminTierListMinFavorites.value) || 0, 0)
+  adminTierListPage.value = 1
+  refreshAdminTierLists()
+}
+
 function setAdminTierListTopicId(topicId) {
   adminTierListTopicId.value = topicId || ''
   adminTierListPage.value = 1
@@ -1369,7 +1479,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 : [],
@@ -1472,6 +1582,27 @@ async function deleteAdminTierListEntry() {
   }
 }
 
+async function toggleAdminTierListFeatured(tierList) {
+  if (!tierList?.id) return
+  const nextFeatured = !tierList.isFeatured
+  resetMessages()
+
+  try {
+    const data = await api.updateAdminTierListFeatured(tierList.id, { isFeatured: nextFeatured })
+    const updated = data.tierList || {}
+    adminTierLists.value = adminTierLists.value.map((entry) => (entry.id === tierList.id ? { ...entry, ...updated } : entry))
+    if (previewTierList.value?.id === tierList.id) previewTierList.value = { ...previewTierList.value, ...updated }
+    if (modalTargetAdminTierList.value?.id === tierList.id) {
+      modalTargetAdminTierList.value = { ...modalTargetAdminTierList.value, ...updated }
+    }
+    await refreshAdminTierListStats()
+    success.value = nextFeatured ? '추천 티어표로 지정했어요.' : '추천 지정을 해제했어요.'
+  } catch (e) {
+    error.value =
+      e?.data?.error === 'public_tierlist_required' ? '공개 티어표만 추천으로 지정할 수 있어요.' : '추천 상태 변경에 실패했어요.'
+  }
+}
+
 function openAdminTierList(tierList) {
   previewTierList.value = tierList
   previewModalOpen.value = true
@@ -1555,8 +1686,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) {
@@ -1571,9 +1703,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
 }
 
@@ -1607,15 +1740,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,
       })
@@ -1636,11 +1769,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(() => {
@@ -1667,6 +1800,11 @@ function userAvatarFallback(user) {
   return (user?.email?.trim()?.[0] || '?').toUpperCase()
 }
 
+function openUserProfile(user) {
+  if (!user?.id) return
+  router.push(userProfilePath(user.id))
+}
+
 </script>
 
 <template>
@@ -1715,6 +1853,11 @@ function userAvatarFallback(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"
@@ -1782,6 +1925,7 @@ function userAvatarFallback(user) {
               :admin-tier-list-total="adminTierListTotal"
               :admin-tier-list-stats="adminTierListStats"
               :open-admin-tier-list-manage-modal="openAdminTierListManageModal"
+              :toggle-admin-tier-list-featured="toggleAdminTierListFeatured"
               :move-admin-tier-list-page="moveAdminTierListPage"
             />
 
@@ -1801,14 +1945,12 @@ function userAvatarFallback(user) {
               :remove-user-avatar="removeUserAvatar"
               :can-edit-user-avatar="canEditUserAvatar"
               :can-edit-user-info="canEditUserInfo"
-              :can-reset-user-password="canResetUserPassword"
               :can-delete-user="canDeleteUser"
               :role-label-of="roleLabelOf"
               :fmt="fmt"
-              :open-user-password-modal="openUserPasswordModal"
+              :open-user-profile="openUserProfile"
               :open-user-delete-modal="openUserDeleteModal"
               :open-user-edit-modal="openUserEditModal"
-              :lock-reset-icon="lockResetIcon"
               :delete-icon="deleteIcon"
               @update:user-query="userQuery = $event"
               @update:user-sort="userSort = $event"
@@ -1816,9 +1958,9 @@ function userAvatarFallback(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>
@@ -1826,15 +1968,15 @@ function userAvatarFallback(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" />
@@ -1882,31 +2024,6 @@ function userAvatarFallback(user) {
               </div>
             </div>
 
-            <div v-if="userPasswordModalOpen" class="modalOverlay" @click.self="closeUserPasswordModal">
-              <div class="modalCard" role="dialog" aria-modal="true">
-                <div class="modalCard__title">비밀번호 초기화</div>
-                <div class="modalCard__desc">{{ modalTargetUser ? `${userDisplayName(modalTargetUser)} 계정에 설정할 새 비밀번호를 입력해주세요.` : '' }}</div>
-                <div class="modalCard__form">
-                  <label class="field">
-                    <span class="field__label">새 비밀번호</span>
-                    <input
-                      v-model="modalPasswordDraft"
-                      class="field__input"
-                      type="password"
-                      maxlength="120"
-                      placeholder="초기화할 비밀번호 입력"
-                      @keydown.enter.prevent="confirmUserPasswordReset"
-                    />
-                    <span class="field__hint">6~120자 권장 · {{ modalPasswordDraft.length }}/120자</span>
-                  </label>
-                </div>
-                <div class="modalCard__actions">
-                  <button class="btn btn--ghost" @click="closeUserPasswordModal">취소</button>
-                  <button class="btn btn--primary" :disabled="!modalPasswordDraft.trim()" @click="confirmUserPasswordReset">초기화</button>
-                </div>
-              </div>
-            </div>
-
             <div v-if="userDeleteModalOpen" class="modalOverlay" @click.self="closeUserDeleteModal">
               <div class="modalCard" role="dialog" aria-modal="true">
                 <div class="modalCard__title">회원 삭제</div>
@@ -1961,7 +2078,7 @@ function userAvatarFallback(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>
 
@@ -1985,12 +2102,60 @@ function userAvatarFallback(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>
                       <button class="btn btn--ghost btn--small customItemModal__createTemplateButton" type="button" @click="openTemplateCreateModal">새 템플릿 만들기</button>
                     </div>
+                    <template v-if="canReplaceModalTarget">
+                      <div class="customItemModal__pickerHead">
+                        <div class="customItemModal__pickerEyebrow">IMAGE REPLACEMENT</div>
+                        <div class="customItemModal__pickerTitle">대체할 이미지 선택</div>
+                      </div>
+                      <div class="adminSelectionCard">
+                        <div class="adminSelectionCard__label">선택한 대체 이미지</div>
+                        <div class="adminSelectionCard__title">{{ customItemReplacementTarget?.label || '아직 선택하지 않음' }}</div>
+                        <div class="adminSelectionCard__meta">{{ customItemReplacementTarget?.sourceLabel || '검색 후 대체할 이미지를 골라 주세요.' }}</div>
+                      </div>
+                      <div class="customItemModal__pickerActions">
+                        <input
+                          v-model="customItemReplacementQuery"
+                          class="input"
+                          type="text"
+                          maxlength="120"
+                          placeholder="대체할 이미지 이름 또는 파일명 검색"
+                          @keydown.enter.prevent="refreshReplacementCandidates"
+                        />
+                        <button class="btn btn--ghost btn--small" type="button" @click="refreshReplacementCandidates">
+                          {{ customItemReplacementLoading ? '검색중...' : '대체 이미지 검색' }}
+                        </button>
+                      </div>
+                      <div class="customItemModal__replacementList">
+                        <button
+                          v-for="item in customItemReplacementItems"
+                          :key="item.id"
+                          class="adminTemplatePicker__item"
+                          :class="{ 'adminTemplatePicker__item--active': customItemReplacementTargetId === item.id }"
+                          type="button"
+                          @click="customItemReplacementTargetId = item.id"
+                        >
+                          <span class="customItemModal__replacementRow">
+                            <img class="customItemModal__replacementThumb" :src="toApiUrl(item.src)" :alt="item.label" />
+                            <span class="customItemModal__replacementCopy">
+                              <span class="adminTemplatePicker__name">{{ item.label }}</span>
+                              <span class="adminTemplatePicker__meta">{{ item.sourceLabel }} · {{ item.ownerName || '알 수 없음' }}</span>
+                            </span>
+                          </span>
+                        </button>
+                        <div v-if="!customItemReplacementLoading && !replacementCandidateCount" class="hint hint--tight">
+                          검색 전에는 대체 후보를 보여주지 않아요. 검색어를 입력한 뒤 직접 찾아 선택해주세요.
+                        </div>
+                      </div>
+                    </template>
+                    <div v-else class="hint hint--tight">
+                      이미지 대체는 현재 사용자 업로드 아이템에서만 지원합니다.
+                    </div>
                   </aside>
                   <div class="customItemModal__body">
                     <button class="customItemModal__close" type="button" @click="closeCustomItemModal">닫기</button>
@@ -2026,12 +2191,31 @@ function userAvatarFallback(user) {
                       </div>
                       <div v-else class="hint hint--tight">아직 템플릿에 연결된 항목이 없어요.</div>
                     </div>
+                      <div v-if="modalTargetCustomItem.replacedAt" class="customItemModal__linked">
+                        <span class="customItemModal__label">대체 상태</span>
+                        <div class="customItemModal__titleRow">
+                          <div>
+                            <div class="customItemModal__title">{{ modalTargetCustomItem.replacedByLabel || '대체 대상 이름 없음' }}</div>
+                            <div class="customItemModal__source">이 아이템은 위 대상 이미지로 대체된 상태예요.</div>
+                          </div>
+                        </div>
+                        <div class="customItemModal__metaRow">
+                          <span>대체 시각</span>
+                          <strong>{{ fmt(modalTargetCustomItem.replacedAt) }}</strong>
+                        </div>
+                      </div>
                       <div class="customItemModal__actions">
                         <a class="btn btn--ghost customItemModal__action" :href="toApiUrl(modalTargetCustomItem.src)" :download="modalTargetCustomItem.label">이미지 다운로드</a>
                         <button class="btn btn--ghost customItemModal__action" :disabled="!customItemModalTargetTemplateId || modalTargetCustomItem.isPromoting" @click="promoteCustomItem(modalTargetCustomItem)">
                           {{ modalTargetCustomItem.isPromoting ? '추가중...' : '기본 템플릿에 추가' }}
                         </button>
-                        <button v-if="modalTargetCustomItem.canDelete" class="btn btn--danger customItemModal__action" :disabled="modalTargetCustomItem.sourceType === 'user' && (modalTargetCustomItem.usageCount > 0 || visibleLinkedTemplates.length > 0)" @click="openCustomItemDeleteModal(modalTargetCustomItem)">삭제</button>
+                        <button v-if="canReplaceModalTarget" class="btn btn--primary customItemModal__action" :disabled="!customItemReplacementTargetId || customItemReplacementBusy" @click="replaceCustomItem(modalTargetCustomItem)">
+                          {{ customItemReplacementBusy ? '대체중...' : '선택한 이미지로 대체' }}
+                        </button>
+                        <button v-if="modalTargetCustomItem.replacedAt" class="btn btn--ghost customItemModal__action" :disabled="customItemReplacementBusy" @click="restoreCustomItem(modalTargetCustomItem)">
+                          {{ customItemReplacementBusy ? '복구중...' : '원래 이미지로 복구' }}
+                        </button>
+                        <button v-if="modalTargetCustomItem.canDelete" class="btn btn--danger customItemModal__action" :disabled="modalTargetCustomItem.sourceType === 'user' && !modalTargetCustomItem.replacedAt && (modalTargetCustomItem.usageCount > 0 || visibleLinkedTemplates.length > 0)" @click="openCustomItemDeleteModal(modalTargetCustomItem)">삭제</button>
                       </div>
                     </div>
                   </div>
@@ -2051,7 +2235,7 @@ function userAvatarFallback(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>
@@ -2083,7 +2267,7 @@ function userAvatarFallback(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>
@@ -2249,7 +2433,7 @@ function userAvatarFallback(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>
@@ -2270,16 +2454,26 @@ function userAvatarFallback(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="replaced-user">대체된 아이템</option>
+            <option value="thumbnail">썸네일 이미지</option>
+            <option value="avatar">프로필 이미지</option>
+            <option value="unused">미사용 이미지</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
+            v-if="customItemFilter === 'unused'"
+            class="btn btn--danger"
+            :disabled="!hasDeletableUnusedItems"
+            @click="removeUnusedCustomItems"
+          >
+            미사용 이미지 일괄 삭제
+          </button>
+          <button v-else class="btn btn--ghost" @click="showUnusedCustomItems">미사용 이미지 확인</button>
         </div>
         <div class="adminSidebar__stats">
           <div class="sidebarStat">
@@ -2326,6 +2520,21 @@ function userAvatarFallback(user) {
               <option :value="50">50개씩 보기</option>
               <option :value="200">200개씩 보기</option>
             </select>
+            <select v-model="adminTierListSort" class="select" @change="changeAdminTierListSort">
+              <option value="recent">최근 수정순</option>
+              <option value="created">최근 생성순</option>
+              <option value="favorites">즐겨찾기 많은 순</option>
+            </select>
+            <input
+              v-model.number="adminTierListMinFavorites"
+              class="input"
+              type="number"
+              min="0"
+              max="1000000"
+              placeholder="최소 즐겨찾기 수"
+              @change="changeAdminTierListMinFavorites"
+              @keydown.enter.prevent="changeAdminTierListMinFavorites"
+            />
           </div>
           <div class="adminSidebar__actions">
             <button class="btn btn--ghost" @click="refreshAdminTierLists">새로고침</button>
@@ -3445,6 +3654,14 @@ function userAvatarFallback(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__badge--replaced {
+  top: 40px;
+  background: rgba(245, 158, 11, 0.2);
+  color: #fde68a;
+}
 .adminUiScope .customItemCard:hover {
   border-color: rgba(126, 162, 255, 0.42);
   background: rgba(255, 255, 255, 0.06);
@@ -3504,6 +3721,29 @@ function userAvatarFallback(user) {
   display: grid;
   gap: 10px;
 }
+.adminUiScope .customItemModal__replacementList {
+  display: grid;
+  gap: 8px;
+}
+.adminUiScope .customItemModal__replacementRow {
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+}
+.adminUiScope .customItemModal__replacementThumb {
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: 12px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
+}
+.adminUiScope .customItemModal__replacementCopy {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+}
 .adminUiScope .customItemModal__createTemplateButton {
   justify-self: start;
 }
@@ -3629,7 +3869,7 @@ function userAvatarFallback(user) {
 }
 .adminUiScope .customItemModal__actions {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 12px;
   align-self: end;
 }

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

@@ -0,0 +1,328 @@
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { api } from '../lib/api'
+import { editorPath, loginPath, userProfilePath } from '../lib/paths'
+import { toApiUrl } from '../lib/runtime'
+import { useToast } from '../composables/useToast'
+
+const router = useRouter()
+const toast = useToast()
+
+const tierLists = ref([])
+const query = ref('')
+const isLoading = ref(false)
+const error = ref('')
+const brokenThumbnailIds = ref({})
+
+watch(error, (message) => {
+  if (!message) return
+  toast.error(message)
+  error.value = ''
+})
+
+function fmt(ts) {
+  return new Date(ts).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  })
+}
+
+function displayNameOf(tierList) {
+  return tierList.authorName || '알 수 없음'
+}
+
+function avatarSrcOf(tierList) {
+  return tierList.authorAvatarSrc ? toApiUrl(tierList.authorAvatarSrc) : ''
+}
+
+function avatarFallbackOf(tierList) {
+  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
+}
+
+function tierListThumbnailUrl(tierList) {
+  if (!tierList?.id || brokenThumbnailIds.value[tierList.id]) return ''
+  return tierList.thumbnailSrc ? toApiUrl(tierList.thumbnailSrc) : ''
+}
+
+function handleThumbnailError(tierListId) {
+  if (!tierListId || brokenThumbnailIds.value[tierListId]) return
+  brokenThumbnailIds.value = { ...brokenThumbnailIds.value, [tierListId]: true }
+}
+
+async function loadFollowingFeed() {
+  isLoading.value = true
+  try {
+    const data = await api.listFollowingFeed({ q: query.value })
+    brokenThumbnailIds.value = {}
+    tierLists.value = data.tierLists || []
+  } catch (e) {
+    toast.error('로그인이 필요해요.')
+    router.push(loginPath('/following'))
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function openTierList(tierList) {
+  router.push(editorPath(tierList.topicSlug || tierList.topicId, tierList.id))
+}
+
+function openAuthorProfile(tierList) {
+  if (!tierList?.authorId) return
+  router.push(userProfilePath(tierList.authorId))
+}
+
+onMounted(loadFollowingFeed)
+</script>
+
+<template>
+  <section class="pageWrap">
+    <section class="pageHead">
+      <div class="pageHead__main">
+        <div class="pageHead__eyebrow">Following</div>
+        <h2 class="pageHead__title">팔로우 피드</h2>
+        <div class="pageHead__desc">팔로우한 작성자가 공개한 티어표를 최신 업데이트순으로 모아봅니다.</div>
+      </div>
+      <div class="pageHead__aside toolbar">
+        <input v-model="query" class="input" placeholder="제목, 주제, 작성자 검색" @keydown.enter.prevent="loadFollowingFeed" />
+        <button class="btn" :disabled="isLoading" @click="loadFollowingFeed">{{ isLoading ? '검색중...' : '검색' }}</button>
+      </div>
+    </section>
+
+    <section class="panel">
+      <div v-if="isLoading" class="empty">팔로우 피드를 불러오고 있어요.</div>
+      <div v-else-if="tierLists.length === 0" class="empty">아직 팔로우한 작성자의 공개 티어표가 없어요.</div>
+      <div v-else class="list">
+        <article v-for="tierList in tierLists" :key="tierList.id" class="boardCard">
+          <button class="boardCard__body" type="button" @click="openTierList(tierList)">
+            <div class="boardCard__thumbWrap">
+              <img
+                v-if="tierListThumbnailUrl(tierList)"
+                class="boardCard__thumb"
+                :src="tierListThumbnailUrl(tierList)"
+                :alt="tierList.title"
+                draggable="false"
+                @error="handleThumbnailError(tierList.id)"
+              />
+              <div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
+            </div>
+            <div class="boardCard__head">
+              <div class="boardCard__titleRow">
+                <div class="boardCard__title">{{ tierList.title }}</div>
+                <div class="favoriteStat">{{ tierList.isFavorited ? '♥' : '♡' }} {{ tierList.favoriteCount || 0 }}</div>
+              </div>
+              <div class="boardCard__topic">{{ tierList.topicName || tierList.topicId }}</div>
+            </div>
+          </button>
+
+          <button class="authorLink" type="button" @click="openAuthorProfile(tierList)">
+            <div class="authorLink__main">
+              <img
+                v-if="avatarSrcOf(tierList)"
+                class="boardCard__avatar"
+                :src="avatarSrcOf(tierList)"
+                :alt="displayNameOf(tierList)"
+                draggable="false"
+              />
+              <div v-else class="boardCard__avatar boardCard__avatar--fallback">{{ avatarFallbackOf(tierList) }}</div>
+              <span class="authorLink__name">{{ displayNameOf(tierList) }}</span>
+            </div>
+            <span class="authorLink__date">{{ fmt(tierList.updatedAt) }}</span>
+          </button>
+        </article>
+      </div>
+    </section>
+  </section>
+</template>
+
+<style scoped>
+.panel {
+  background: transparent;
+  border-radius: 0;
+  padding: 0;
+}
+.toolbar {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.input {
+  min-width: 240px;
+  padding: 11px 13px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
+  color: var(--theme-text);
+}
+.btn {
+  padding: 11px 13px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft-2);
+  color: var(--theme-text);
+  font-weight: 800;
+  cursor: pointer;
+}
+.empty {
+  opacity: 0.75;
+}
+.list {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 18px;
+}
+.boardCard {
+  min-width: 0;
+  border-radius: 22px;
+  border: 1px solid var(--theme-card-border);
+  background: var(--theme-card-bg);
+  color: var(--theme-text);
+  overflow: hidden;
+  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
+  transition:
+    transform 0.16s ease,
+    background 0.16s ease;
+}
+.boardCard:hover {
+  background: var(--theme-card-bg-hover);
+  transform: translateY(-2px);
+}
+.boardCard__body {
+  width: 100%;
+  min-width: 0;
+  text-align: left;
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  display: grid;
+}
+.boardCard__thumbWrap {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  padding: 14px 14px 0;
+  box-sizing: border-box;
+}
+.boardCard__thumb,
+.boardCard__thumbPlaceholder {
+  width: 100%;
+  height: 100%;
+  border-radius: 18px;
+  display: block;
+}
+.boardCard__thumb {
+  object-fit: cover;
+}
+.boardCard__thumbPlaceholder {
+  display: grid;
+  place-items: center;
+  background: var(--theme-thumb-fallback-bg);
+  color: var(--theme-text-faint);
+  font-size: 13px;
+  font-weight: 700;
+}
+.boardCard__head {
+  min-width: 0;
+  padding: 16px 18px 0;
+  display: grid;
+  gap: 6px;
+}
+.boardCard__titleRow {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: flex-start;
+}
+.boardCard__title {
+  min-width: 0;
+  font-weight: 800;
+  font-size: 18px;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+.boardCard__topic,
+.favoriteStat {
+  font-size: 13px;
+  color: var(--theme-text-faint);
+}
+.favoriteStat {
+  white-space: nowrap;
+}
+.authorLink {
+  width: calc(100% - 28px);
+  margin: 14px;
+  padding: 12px 14px;
+  border-radius: 16px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.authorLink__main {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.authorLink__name {
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 800;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.authorLink__date {
+  flex: 0 0 auto;
+  font-size: 10px;
+  color: var(--theme-text-faint);
+}
+.boardCard__avatar {
+  width: 22px;
+  height: 22px;
+  border-radius: 9999px;
+  object-fit: cover;
+  border: 1px solid var(--theme-avatar-border);
+  background: var(--theme-border);
+  flex: 0 0 auto;
+}
+.boardCard__avatar--fallback {
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  font-weight: 900;
+}
+@media (max-width: 1400px) {
+  .list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@media (max-width: 1200px) {
+  .list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 720px) {
+  .list {
+    grid-template-columns: 1fr;
+  }
+
+  .input {
+    min-width: 0;
+    width: 100%;
+  }
+}
+</style>

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)
     })
 
@@ -30,6 +30,9 @@ const templates = computed(() => {
     const rankA = a.displayRank == null ? Number.MAX_SAFE_INTEGER : a.displayRank
     const rankB = b.displayRank == null ? Number.MAX_SAFE_INTEGER : b.displayRank
     if (rankA !== rankB) return rankA - rankB
+    if (Number(a.createdAt || 0) !== Number(b.createdAt || 0)) {
+      return Number(b.createdAt || 0) - Number(a.createdAt || 0)
+    }
     return (a.name || '').localeCompare(b.name || '', 'ko')
   })
 })
@@ -46,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) {
@@ -96,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/LoginView.vue

@@ -15,24 +15,92 @@ const password = ref('')
 const passwordConfirm = ref('')
 const mode = ref('login')
 const error = ref('')
+const notice = ref('')
 const hasUsers = ref(true)
 const emailError = ref('')
 const nicknameError = ref('')
+const pendingVerificationEmail = ref('')
+const isSubmitting = ref(false)
 
-const title = computed(() => (mode.value === 'signup' ? '회원가입' : '로그인'))
-const description = computed(() =>
-  mode.value === 'signup'
-    ? '티어표를 저장하고 즐겨찾기, 개인 설정을 관리할 수 있도록 계정을 만들어요.'
-    : '저장한 티어표와 즐겨찾기, 프로필 설정을 이어서 관리할 수 있어요.'
-)
-const submitLabel = computed(() => (mode.value === 'signup' ? '가입하기' : '로그인'))
+const title = computed(() => {
+  if (mode.value === 'signup') return '회원가입'
+  if (mode.value === 'reset-request') return '비밀번호 재설정'
+  if (mode.value === 'reset-confirm') return '새 비밀번호 설정'
+  return '로그인'
+})
+const description = computed(() => {
+  if (mode.value === 'signup') return '티어표를 저장하고 즐겨찾기, 개인 설정을 관리할 수 있도록 계정을 만들어요.'
+  if (mode.value === 'reset-request') return '가입한 이메일로 비밀번호 재설정 링크를 보내드릴게요.'
+  if (mode.value === 'reset-confirm') return '메일로 받은 재설정 링크를 확인했어요. 새 비밀번호를 입력해주세요.'
+  return '저장한 티어표와 즐겨찾기, 프로필 설정을 이어서 관리할 수 있어요.'
+})
+const submitLabel = computed(() => {
+  if (mode.value === 'signup') return '가입하기'
+  if (mode.value === 'reset-request') return '재설정 메일 보내기'
+  if (mode.value === 'reset-confirm') return '새 비밀번호 저장'
+  return '로그인'
+})
 const authReady = computed(() => auth.hydrated)
 const checkingSession = computed(() => !authReady.value || auth.status === 'loading')
+const resetToken = computed(() => (typeof route.query.resetToken === 'string' ? route.query.resetToken : ''))
+const verifyToken = computed(() => (typeof route.query.verifyToken === 'string' ? route.query.verifyToken : ''))
+const redirectPath = computed(() => (typeof route.query.redirect === 'string' ? route.query.redirect : mePath()))
+
+function clearFormFeedback() {
+  error.value = ''
+  emailError.value = ''
+  nicknameError.value = ''
+}
+
+function clearAuthQueryTokens() {
+  if (!resetToken.value && !verifyToken.value) return
+  const nextQuery = { ...route.query }
+  delete nextQuery.resetToken
+  delete nextQuery.verifyToken
+  router.replace({ path: route.path, query: nextQuery })
+}
+
+function switchMode(nextMode) {
+  if (mode.value === nextMode) return
+  mode.value = nextMode
+  clearFormFeedback()
+  notice.value = ''
+  pendingVerificationEmail.value = ''
+  password.value = ''
+  passwordConfirm.value = ''
+  if (nextMode !== 'signup') nickname.value = ''
+  if (nextMode !== 'reset-confirm') clearAuthQueryTokens()
+}
+
+async function completeEmailVerification(token) {
+  isSubmitting.value = true
+  try {
+    await auth.verifyEmail(token)
+    notice.value = '이메일 인증이 완료됐어요. 내 티어표 화면으로 이동합니다.'
+    router.replace(redirectPath.value)
+  } catch (e) {
+    mode.value = 'login'
+    error.value = '인증 링크가 만료되었거나 유효하지 않아요. 다시 로그인하거나 인증 메일을 재전송해주세요.'
+    clearAuthQueryTokens()
+  } finally {
+    isSubmitting.value = false
+  }
+}
 
 onMounted(async () => {
   if (!auth.hydrated) await auth.refresh()
+  if (verifyToken.value) {
+    await completeEmailVerification(verifyToken.value)
+    return
+  }
+  if (resetToken.value) {
+    mode.value = 'reset-confirm'
+    password.value = ''
+    passwordConfirm.value = ''
+    return
+  }
   if (auth.user) {
-    router.replace(typeof route.query.redirect === 'string' ? route.query.redirect : mePath())
+    router.replace(redirectPath.value)
     return
   }
   try {
@@ -47,15 +115,14 @@ watch(
   () => [auth.hydrated, auth.user],
   ([hydrated, user]) => {
     if (!hydrated || !user) return
-    router.replace(typeof route.query.redirect === 'string' ? route.query.redirect : mePath())
+    if (verifyToken.value || resetToken.value) return
+    router.replace(redirectPath.value)
   },
   { immediate: true }
 )
 
 watch(mode, () => {
-  error.value = ''
-  emailError.value = ''
-  nicknameError.value = ''
+  clearFormFeedback()
 })
 
 watch(email, () => {
@@ -68,23 +135,81 @@ watch(nickname, () => {
   if (error.value === '닉네임이 이미 사용 중이에요.' || error.value === '사용할 수 없는 닉네임이에요.') error.value = ''
 })
 
+watch(
+  () => route.query.resetToken,
+  (value) => {
+    if (typeof value === 'string' && value) {
+      switchMode('reset-confirm')
+    }
+  }
+)
+
+async function resendVerificationEmail() {
+  const targetEmail = email.value.trim() || pendingVerificationEmail.value
+  if (!targetEmail) {
+    emailError.value = '이메일을 먼저 입력해주세요.'
+    error.value = '인증 메일을 다시 받을 이메일이 필요해요.'
+    return
+  }
+
+  clearFormFeedback()
+  isSubmitting.value = true
+  try {
+    await api.resendVerificationEmail({ email: targetEmail })
+    pendingVerificationEmail.value = targetEmail
+    notice.value = `${targetEmail} 주소로 인증 메일을 다시 보냈어요. 메일함과 스팸함을 함께 확인해주세요.`
+  } catch (e) {
+    const code = e?.data?.error
+    error.value = code === 'mail_not_configured'
+      ? '메일 발송 설정이 아직 완료되지 않았어요. 잠시 후 다시 시도해주세요.'
+      : '인증 메일 재전송에 실패했어요.'
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
 async function submit() {
-  error.value = ''
-  emailError.value = ''
-  nicknameError.value = ''
+  clearFormFeedback()
+  notice.value = ''
   if (mode.value === 'signup' && nickname.value.trim().length < 2) {
     nicknameError.value = '닉네임은 2자 이상 입력해주세요.'
     error.value = '닉네임을 확인해주세요.'
     return
   }
-  if (mode.value === 'signup' && password.value !== passwordConfirm.value) {
+  if ((mode.value === 'signup' || mode.value === 'reset-confirm') && password.value !== passwordConfirm.value) {
     error.value = '비밀번호 확인이 일치하지 않아요.'
     return
   }
+  if (mode.value === 'reset-confirm' && !resetToken.value) {
+    error.value = '재설정 토큰이 없어 비밀번호를 바꿀 수 없어요. 메일 링크를 다시 확인해주세요.'
+    return
+  }
+
+  isSubmitting.value = true
   try {
-    if (mode.value === 'signup') await auth.signup(email.value, nickname.value, password.value)
-    else await auth.login(email.value, password.value)
-    router.push(typeof route.query.redirect === 'string' ? route.query.redirect : mePath())
+    if (mode.value === 'signup') {
+      const result = await auth.signup(email.value, nickname.value, password.value)
+      if (result?.verificationRequired) {
+        pendingVerificationEmail.value = result.email || email.value.trim()
+        mode.value = 'login'
+        password.value = ''
+        passwordConfirm.value = ''
+        notice.value = `${pendingVerificationEmail.value} 주소로 인증 메일을 보냈어요. 인증 후 로그인해주세요.`
+        return
+      }
+    } else if (mode.value === 'reset-request') {
+      const targetEmail = email.value.trim()
+      await api.requestPasswordReset({ email: targetEmail })
+      switchMode('login')
+      notice.value = `${targetEmail} 주소로 비밀번호 재설정 메일을 보냈어요. 메일함과 스팸함을 함께 확인해주세요.`
+      return
+    } else if (mode.value === 'reset-confirm') {
+      await auth.confirmPasswordReset(resetToken.value, password.value)
+      clearAuthQueryTokens()
+    } else {
+      await auth.login(email.value, password.value)
+    }
+    router.push(redirectPath.value)
   } catch (e) {
     const code = e?.data?.error
     if (mode.value === 'signup') {
@@ -103,8 +228,35 @@ async function submit() {
         error.value = '사용할 수 없는 닉네임이에요.'
         return
       }
+      if (code === 'mail_not_configured') {
+        error.value = '메일 발송 설정이 아직 완료되지 않아 이메일 인증을 보낼 수 없어요.'
+        return
+      }
+      if (code === 'mail_send_failed') {
+        error.value = '인증 메일 발송에 실패했어요. 잠시 후 다시 시도해주세요.'
+        return
+      }
     }
-    error.value = mode.value === 'signup' ? '회원가입에 실패했어요.' : '로그인에 실패했어요.'
+    if (mode.value === 'login' && code === 'email_unverified') {
+      pendingVerificationEmail.value = e?.data?.email || email.value.trim()
+      error.value = '이메일 인증이 아직 완료되지 않았어요. 아래 버튼으로 인증 메일을 다시 받을 수 있어요.'
+      return
+    }
+    if (mode.value === 'reset-request') {
+      error.value = code === 'mail_not_configured'
+        ? '메일 발송 설정이 아직 완료되지 않아 재설정 메일을 보낼 수 없어요.'
+        : '재설정 메일 발송에 실패했어요.'
+      return
+    }
+    if (mode.value === 'reset-confirm') {
+      error.value = code === 'invalid_or_expired_token'
+        ? '재설정 링크가 만료되었거나 유효하지 않아요. 비밀번호 재설정을 다시 요청해주세요.'
+        : '새 비밀번호 저장에 실패했어요.'
+      return
+    }
+    error.value = '로그인에 실패했어요.'
+  } finally {
+    isSubmitting.value = false
   }
 }
 </script>
@@ -126,18 +278,23 @@ async function submit() {
     <section v-else class="authScreen">
       <div class="authTabs" :class="{ 'authTabs--signup': mode === 'signup' }" role="tablist" aria-label="로그인 또는 회원가입">
         <span class="authTabs__indicator" aria-hidden="true"></span>
-        <button type="button" class="authTabs__button" :class="{ 'authTabs__button--active': mode === 'login' }" @click="mode = 'login'">
+        <button
+          type="button"
+          class="authTabs__button"
+          :class="{ 'authTabs__button--active': mode === 'login' || mode === 'reset-request' || mode === 'reset-confirm' }"
+          @click="switchMode('login')"
+        >
           로그인
         </button>
-        <button type="button" class="authTabs__button" :class="{ 'authTabs__button--active': mode === 'signup' }" @click="mode = 'signup'">
+        <button type="button" class="authTabs__button" :class="{ 'authTabs__button--active': mode === 'signup' }" @click="switchMode('signup')">
           회원가입
         </button>
       </div>
 
       <form class="authFields" @submit.prevent="submit">
-        <label class="field">
+        <label v-if="mode !== 'reset-confirm'" class="field">
           <span class="field__label">이메일</span>
-          <input v-model="email" class="field__input" placeholder="you@example.com" autocomplete="email" maxlength="255" />
+          <input v-model="email" class="field__input" type="email" placeholder="you@example.com" autocomplete="email" maxlength="255" />
           <span v-if="emailError" class="field__error">{{ emailError }}</span>
           <span class="field__hint">로그인과 알림에 사용되는 계정 이메일입니다. {{ email.length }}/255자</span>
         </label>
@@ -149,20 +306,20 @@ async function submit() {
           <span class="field__hint">다른 사용자와 구분되는 이름으로 2~40자까지 입력할 수 있어요.</span>
         </label>
 
-        <label class="field">
-          <span class="field__label">비밀번호</span>
+        <label v-if="mode !== 'reset-request'" class="field">
+          <span class="field__label">{{ mode === 'reset-confirm' ? '새 비밀번호' : '비밀번호' }}</span>
           <input
             v-model="password"
             class="field__input"
             type="password"
             placeholder="********"
-            autocomplete="current-password"
+            :autocomplete="mode === 'login' ? 'current-password' : 'new-password'"
             maxlength="120"
           />
           <span class="field__hint">6~120자 입력 가능 · {{ password.length }}/120자</span>
         </label>
 
-        <label v-if="mode === 'signup'" class="field">
+        <label v-if="mode === 'signup' || mode === 'reset-confirm'" class="field">
           <span class="field__label">비밀번호 확인</span>
           <input
             v-model="passwordConfirm"
@@ -175,12 +332,28 @@ async function submit() {
           <span class="field__hint">같은 비밀번호를 한 번 더 입력해주세요. {{ passwordConfirm.length }}/120자</span>
         </label>
 
-        <div v-if="!hasUsers" class="roleBadge">첫 회원가입 계정은 자동으로 관리자 권한이 부여됩니다.</div>
+        <div v-if="mode === 'signup' && !hasUsers" class="roleBadge">첫 회원가입 계정은 자동으로 관리자 권한이 부여됩니다.</div>
+        <div v-if="notice" class="authNotice">{{ notice }}</div>
         <div v-if="error" class="authError">{{ error }}</div>
 
+        <div v-if="mode === 'login'" class="authHelpRow">
+          <button type="button" class="linkAction" @click="switchMode('reset-request')">비밀번호를 잊으셨나요?</button>
+          <button
+            v-if="pendingVerificationEmail || error === '이메일 인증이 아직 완료되지 않았어요. 아래 버튼으로 인증 메일을 다시 받을 수 있어요.'"
+            type="button"
+            class="linkAction"
+            :disabled="isSubmitting"
+            @click="resendVerificationEmail"
+          >
+            인증 메일 재전송
+          </button>
+        </div>
+
         <div class="authActions">
-          <button class="secondaryAction" type="button" @click="router.push(homePath())">취소</button>
-          <button class="primaryAction" type="submit">{{ submitLabel }}</button>
+          <button class="secondaryAction" type="button" @click="mode === 'reset-request' || mode === 'reset-confirm' ? switchMode('login') : router.push(homePath())">
+            {{ mode === 'reset-request' || mode === 'reset-confirm' ? '로그인으로 돌아가기' : '취소' }}
+          </button>
+          <button class="primaryAction" type="submit" :disabled="isSubmitting">{{ isSubmitting ? '처리 중...' : submitLabel }}</button>
         </div>
       </form>
     </section>
@@ -316,6 +489,40 @@ async function submit() {
   font-weight: 700;
 }
 
+.authNotice {
+  padding: 10px 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(34, 197, 94, 0.28);
+  background: rgba(34, 197, 94, 0.1);
+  color: #7ddf97;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.authHelpRow {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-top: -6px;
+}
+
+.linkAction {
+  border: 0;
+  background: transparent;
+  color: var(--theme-text-muted);
+  font-size: 13px;
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+
+.linkAction:disabled {
+  opacity: 0.5;
+  cursor: progress;
+}
+
 .authActions {
   display: flex;
   gap: 12px;
@@ -337,6 +544,11 @@ async function submit() {
   color: var(--theme-accent-text);
 }
 
+.primaryAction:disabled {
+  opacity: 0.65;
+  cursor: progress;
+}
+
 .secondaryAction {
   border: 1px solid var(--theme-border-strong);
   background: var(--theme-surface-soft);

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/ProfileView.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth'
+import { api } from '../lib/api'
 import { homePath, loginPath } from '../lib/paths'
 import { toApiUrl } from '../lib/runtime'
 import { useToast } from '../composables/useToast'
@@ -12,11 +13,18 @@ const toast = useToast()
 
 const error = ref('')
 const saving = ref(false)
+const passwordSaving = ref(false)
 const nickname = ref('')
+const nicknameError = ref('')
 const previewUrl = ref('')
 const avatarFile = ref(null)
 const removeAvatar = ref(false)
 const fileInput = ref(null)
+const currentPassword = ref('')
+const nextPassword = ref('')
+const nextPasswordConfirm = ref('')
+const currentPasswordError = ref('')
+const nextPasswordError = ref('')
 
 watch(error, (message) => {
   if (!message) return
@@ -67,6 +75,15 @@ function onAvatarChange(e) {
   previewUrl.value = URL.createObjectURL(file)
 }
 
+function clearProfileFieldErrors() {
+  nicknameError.value = ''
+}
+
+function clearPasswordFieldErrors() {
+  currentPasswordError.value = ''
+  nextPasswordError.value = ''
+}
+
 function clearAvatar() {
   error.value = ''
   avatarFile.value = null
@@ -80,6 +97,14 @@ function clearAvatar() {
 
 async function saveProfile() {
   error.value = ''
+  clearProfileFieldErrors()
+
+  if (nickname.value.trim().length < 2) {
+    nicknameError.value = '닉네임은 2자 이상 입력해주세요.'
+    error.value = '닉네임을 확인해주세요.'
+    return
+  }
+
   saving.value = true
   try {
     const fd = new FormData()
@@ -92,8 +117,13 @@ async function saveProfile() {
       credentials: 'include',
       body: fd,
     })
-    if (!res.ok) throw new Error('upload_failed')
     const data = await res.json()
+    if (!res.ok) {
+      const requestError = new Error('profile_update_failed')
+      requestError.data = data
+      requestError.status = res.status
+      throw requestError
+    }
     auth.user = data.user
     avatarFile.value = null
     removeAvatar.value = false
@@ -104,12 +134,60 @@ async function saveProfile() {
     if (fileInput.value) fileInput.value.value = ''
     toast.success('프로필을 저장했어요.')
   } catch (e2) {
-    error.value = '프로필 저장에 실패했어요.'
+    const code = e2?.data?.error
+    if (code === 'nickname_taken') {
+      nicknameError.value = '이미 사용 중인 닉네임입니다.'
+      error.value = '닉네임이 이미 사용 중이에요.'
+    } else if (code === 'nickname_reserved') {
+      nicknameError.value = '운영자/관리자처럼 혼동될 수 있는 닉네임은 사용할 수 없어요.'
+      error.value = '사용할 수 없는 닉네임이에요.'
+    } else {
+      error.value = '프로필 저장에 실패했어요.'
+    }
   } finally {
     saving.value = false
   }
 }
 
+async function savePassword() {
+  error.value = ''
+  clearPasswordFieldErrors()
+
+  if (nextPassword.value.length < 6) {
+    nextPasswordError.value = '새 비밀번호는 6자 이상 입력해주세요.'
+    error.value = '새 비밀번호를 확인해주세요.'
+    return
+  }
+
+  if (nextPassword.value !== nextPasswordConfirm.value) {
+    nextPasswordError.value = '비밀번호 확인이 일치하지 않아요.'
+    error.value = '비밀번호 확인이 일치하지 않아요.'
+    return
+  }
+
+  passwordSaving.value = true
+  try {
+    const data = await api.changePassword({
+      currentPassword: currentPassword.value,
+      nextPassword: nextPassword.value,
+    })
+    auth.user = data.user
+    currentPassword.value = ''
+    nextPassword.value = ''
+    nextPasswordConfirm.value = ''
+    toast.success('비밀번호를 변경했어요.')
+  } catch (e2) {
+    if (e2?.data?.error === 'invalid_current_password') {
+      currentPasswordError.value = '현재 비밀번호가 일치하지 않아요.'
+      error.value = '현재 비밀번호가 일치하지 않아요.'
+    } else {
+      error.value = '비밀번호 변경에 실패했어요.'
+    }
+  } finally {
+    passwordSaving.value = false
+  }
+}
+
 async function logout() {
   await auth.logout()
   toast.success('로그아웃했어요.')
@@ -132,56 +210,114 @@ async function logout() {
     </section>
 
     <section v-else-if="auth.user" class="settingsScreen">
-      <div class="settingsIdentity">
-        <div class="avatarButtonWrap">
-          <button class="avatarButton" type="button" @click="openAvatarPicker">
-            <img v-if="avatarUrl" :src="avatarUrl" class="avatarButton__image" alt="avatar" draggable="false" />
-            <div v-else class="avatarButton__fallback">{{ displayInitial }}</div>
-            <div class="avatarButton__overlay">
-              <span>{{ avatarUrl ? '이미지 변경' : '이미지 추가' }}</span>
+      <div class="settingsGrid">
+        <article class="settingsPanel">
+          <div class="settingsIdentity">
+            <div class="avatarButtonWrap">
+              <button class="avatarButton" type="button" @click="openAvatarPicker">
+                <img v-if="avatarUrl" :src="avatarUrl" class="avatarButton__image" alt="avatar" draggable="false" />
+                <div v-else class="avatarButton__fallback">{{ displayInitial }}</div>
+                <div class="avatarButton__overlay">
+                  <span>{{ avatarUrl ? '이미지 변경' : '이미지 추가' }}</span>
+                </div>
+              </button>
+              <button
+                v-if="avatarUrl || previewUrl"
+                class="avatarButton__remove"
+                type="button"
+                aria-label="프로필 이미지 삭제"
+                @click="clearAvatar"
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M6 6l12 12M18 6L6 18" />
+                </svg>
+              </button>
             </div>
-          </button>
-          <button
-            v-if="avatarUrl || previewUrl"
-            class="avatarButton__remove"
-            type="button"
-            aria-label="프로필 이미지 삭제"
-            @click="clearAvatar"
-          >
-            <svg viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M6 6l12 12M18 6L6 18" />
-            </svg>
-          </button>
-        </div>
 
-        <div class="identityMeta">
-          <div class="identityMeta__eyebrow">Profile Photo</div>
-          <div class="identityMeta__title">프로필 이미지</div>
-          <div class="identityMeta__desc">아바타를 클릭해서 이미지를 추가하거나 교체할 수 있습니다.</div>
-        </div>
+            <div class="identityMeta">
+              <div class="identityMeta__eyebrow">Profile Photo</div>
+              <div class="identityMeta__title">프로필 정보</div>
+              <div class="identityMeta__desc">아바타와 닉네임을 정리하고, 현재 계정 이메일을 확인할 수 있어요.</div>
+            </div>
 
-        <input ref="fileInput" class="hiddenInput" type="file" accept="image/*" :disabled="saving" @change="onAvatarChange" />
-      </div>
+            <input ref="fileInput" class="hiddenInput" type="file" accept="image/*" :disabled="saving" @change="onAvatarChange" />
+          </div>
 
-      <div class="settingsFields">
-        <label class="field">
-          <span class="field__label">닉네임</span>
-          <input v-model="nickname" class="field__input" maxlength="40" placeholder="작성자 닉네임" />
-          <span class="field__hint">티어표 작성자 이름으로 표시됩니다. {{ nickname.length }}/40자</span>
-        </label>
+          <div class="settingsFields">
+            <label class="field">
+              <span class="field__label">닉네임</span>
+              <input v-model="nickname" class="field__input" maxlength="40" placeholder="작성자 닉네임" />
+              <span v-if="nicknameError" class="field__error">{{ nicknameError }}</span>
+              <span class="field__hint">티어표 작성자 이름으로 표시됩니다. {{ nickname.length }}/40자</span>
+            </label>
 
-        <label class="field">
-          <span class="field__label">이메일</span>
-          <input :value="auth.user.email" class="field__input field__input--readonly" readonly />
-          <span class="field__hint">현재 로그인에 사용 중인 계정입니다.</span>
-        </label>
+            <label class="field">
+              <span class="field__label">이메일</span>
+              <input :value="auth.user.email" class="field__input field__input--readonly" readonly />
+              <span class="field__hint">현재 로그인에 사용 중인 계정입니다.</span>
+            </label>
 
-        <div v-if="auth.user.isAdmin" class="roleBadge">Administrator</div>
-      </div>
+            <div v-if="auth.user.isAdmin" class="roleBadge">Administrator</div>
+          </div>
 
-      <div class="settingsActions">
-        <button class="primaryAction" :disabled="saving" @click="saveProfile">{{ saving ? '저장 중...' : '변경사항 저장' }}</button>
-        <button class="secondaryAction" type="button" @click="logout">로그아웃</button>
+          <div class="settingsActions">
+            <button class="primaryAction" :disabled="saving" @click="saveProfile">{{ saving ? '저장 중...' : '변경사항 저장' }}</button>
+            <button class="secondaryAction" type="button" @click="logout">로그아웃</button>
+          </div>
+        </article>
+
+        <article class="settingsPanel">
+          <div class="identityMeta__eyebrow">Password</div>
+          <div class="identityMeta__title">비밀번호 변경</div>
+          <div class="identityMeta__desc">현재 비밀번호를 확인한 뒤 새 비밀번호로 바꿀 수 있어요.</div>
+
+          <div class="settingsFields settingsFields--password">
+            <label class="field">
+              <span class="field__label">현재 비밀번호</span>
+              <input
+                v-model="currentPassword"
+                class="field__input"
+                type="password"
+                autocomplete="current-password"
+                maxlength="120"
+                placeholder="현재 비밀번호"
+              />
+              <span v-if="currentPasswordError" class="field__error">{{ currentPasswordError }}</span>
+            </label>
+
+            <label class="field">
+              <span class="field__label">새 비밀번호</span>
+              <input
+                v-model="nextPassword"
+                class="field__input"
+                type="password"
+                autocomplete="new-password"
+                maxlength="120"
+                placeholder="새 비밀번호"
+              />
+              <span v-if="nextPasswordError" class="field__error">{{ nextPasswordError }}</span>
+              <span class="field__hint">6~120자 입력 가능 · {{ nextPassword.length }}/120자</span>
+            </label>
+
+            <label class="field">
+              <span class="field__label">새 비밀번호 확인</span>
+              <input
+                v-model="nextPasswordConfirm"
+                class="field__input"
+                type="password"
+                autocomplete="new-password"
+                maxlength="120"
+                placeholder="새 비밀번호 확인"
+              />
+            </label>
+          </div>
+
+          <div class="settingsActions">
+            <button class="primaryAction" type="button" :disabled="passwordSaving" @click="savePassword">
+              {{ passwordSaving ? '변경 중...' : '비밀번호 변경' }}
+            </button>
+          </div>
+        </article>
       </div>
     </section>
   </section>
@@ -190,8 +326,7 @@ async function logout() {
 <style scoped>
 .settingsScreen {
   display: grid;
-  gap: 32px;
-  max-width: 620px;
+  gap: 24px;
   padding-top: 4px;
 }
 
@@ -212,6 +347,22 @@ async function logout() {
   align-items: center;
 }
 
+.settingsGrid {
+  display: grid;
+  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
+  gap: 24px;
+  align-items: start;
+}
+
+.settingsPanel {
+  min-width: 0;
+  padding: 28px;
+  border: 1px solid var(--theme-border);
+  border-radius: 28px;
+  background: var(--theme-surface);
+  box-shadow: var(--theme-card-shadow);
+}
+
 .avatarButtonWrap {
   position: relative;
   width: 120px;
@@ -355,6 +506,12 @@ async function logout() {
   color: var(--theme-text-soft);
 }
 
+.field__error {
+  font-size: 12px;
+  color: #ff7b7b;
+  font-weight: 700;
+}
+
 .roleBadge {
   width: fit-content;
   padding: 6px 10px;
@@ -373,6 +530,10 @@ async function logout() {
   padding-top: 8px;
 }
 
+.settingsFields--password {
+  padding-top: 24px;
+}
+
 .primaryAction,
 .secondaryAction {
   padding: 12px 18px;
@@ -394,6 +555,15 @@ async function logout() {
 }
 
 @media (max-width: 720px) {
+  .settingsGrid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .settingsPanel {
+    padding: 22px;
+    border-radius: 24px;
+  }
+
   .settingsIdentity {
     grid-template-columns: 1fr;
   }

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() {
@@ -46,7 +46,14 @@ async function loadResults() {
   error.value = ''
   try {
     const data = await api.searchAllPublicTierLists(query.value)
-    tierLists.value = data.tierLists || []
+    const featuredItems = Array.isArray(data.featuredTierLists) ? data.featuredTierLists : []
+    const publicItems = Array.isArray(data.tierLists) ? data.tierLists : []
+    const seen = new Set()
+    tierLists.value = [...featuredItems, ...publicItems].filter((tierList) => {
+      if (!tierList?.id || seen.has(tierList.id)) return false
+      seen.add(tierList.id)
+      return true
+    })
   } catch (e) {
     error.value = '검색 결과를 불러오지 못했어요.'
   } finally {

frontend/src/views/TierEditorView.vue

@@ -10,7 +10,7 @@ import addPhotoAlternateIcon from '../assets/icons/add_photo_alternate.svg'
 import shareIcon from '../assets/icons/share.svg'
 import RightRailAd from '../components/RightRailAd.vue'
 import { api } from '../lib/api'
-import { editorNewPath, editorPath, loginPath, mePath, topicPath } from '../lib/paths'
+import { editorNewPath, editorPath, loginPath, mePath, shareEditorPath, topicPath, userProfilePath } from '../lib/paths'
 import { toApiUrl } from '../lib/runtime'
 import { useAuthStore } from '../stores/auth'
 import { useToast } from '../composables/useToast'
@@ -56,8 +56,10 @@ const templateRequestDraftDescription = ref('')
 const isDeleteModalOpen = ref(false)
 const isGroupDeleteModalOpen = ref(false)
 const isColumnDeleteModalOpen = ref(false)
+const isNavigationConfirmModalOpen = ref(false)
 const pendingRemoveGroupId = ref('')
 const pendingRemoveColumnIndex = ref(-1)
+const pendingNavigationPath = ref('')
 const ownerId = ref('')
 const authorName = ref('')
 const authorAccountName = ref('')
@@ -74,6 +76,16 @@ const isFavorited = ref(false)
 const isRequestingTemplate = ref(false)
 const isDeleting = ref(false)
 const poolSearchQuery = ref('')
+const selectedItemId = ref('')
+const recentDragFinishedAt = ref(0)
+const savedEditorSnapshot = ref('')
+const itemContextMenu = ref({
+  open: false,
+  x: 0,
+  y: 0,
+  itemId: '',
+})
+let editorLoadToken = 0
 
 const boardEl = ref(null)
 const exportBoardEl = ref(null)
@@ -90,6 +102,12 @@ const isNewTierList = computed(() => tierListId.value === 'new')
 const isOwnTierList = computed(() => !!auth.user && !!ownerId.value && ownerId.value === auth.user.id)
 const canEdit = computed(() => !!auth.user && !previewMode.value && (!ownerId.value || ownerId.value === auth.user.id))
 const iconSizeOptions = [48, 64, 80, 96, 112]
+const touchSortableOptions = {
+  delayOnTouchOnly: true,
+  delay: 180,
+  touchStartThreshold: 8,
+  fallbackTolerance: 8,
+}
 const hasCustomTitle = computed(() => !!(title.value || '').trim())
 const fallbackTimestamp = computed(() => (updatedAt.value ? updatedAt.value : Date.now()))
 const effectiveAuthorName = computed(() => {
@@ -116,18 +134,20 @@ const untitledWarning = computed(
     '제목 없이 저장된 티어표는 무분별한 도배 방지를 위해 관리자에 의해 임의 삭제될 수 있어요.'
 )
 const canFavorite = computed(() => !!auth.user && !isNewTierList.value && !canEdit.value)
-const canDuplicate = computed(() => !!auth.user && hasSavedTierList.value && !isOwnTierList.value)
+const canDuplicate = computed(() => !!auth.user && hasSavedTierList.value)
 const canSwitchToViewerMode = computed(() => isOwnTierList.value && hasSavedTierList.value && !previewMode.value)
 const canSwitchToEditMode = computed(() => isOwnTierList.value && hasSavedTierList.value && previewMode.value)
+const duplicateActionLabel = computed(() => (isOwnTierList.value ? '복사본 만들기' : '내 티어표로 복사'))
+const canOpenAuthorProfile = computed(() => !!ownerId.value && hasSavedTierList.value)
 const copiedFromLabel = computed(() => {
   if (!sourceTierListId.value) return ''
   const parts = []
-  if (sourceSnapshotTitle.value) parts.push(`원본 ${sourceSnapshotTitle.value}`)
+  if (sourceSnapshotTitle.value) parts.push(sourceSnapshotTitle.value)
   if (sourceSnapshotAuthor.value) parts.push(sourceSnapshotAuthor.value)
   return parts.join(' · ') || '복사해 온 티어표'
 })
 const customItems = computed(() => getOrderedItems().filter((item) => item?.origin === 'custom'))
-const normalizedPoolSearchQuery = computed(() => poolSearchQuery.value.trim().toLowerCase())
+const normalizedPoolSearchQuery = computed(() => normalizeSearchText(poolSearchQuery.value))
 const hasSavedTierList = computed(() => !!(persistedTierListId.value || (tierListId.value && tierListId.value !== 'new')))
 const canRequestTemplateCreate = computed(
   () => canEdit.value && hasSavedTierList.value && templateId.value === 'freeform' && customItems.value.length > 0
@@ -141,8 +161,9 @@ const templateRequestTargetLabel = computed(() => (templateId.value === 'freefor
 const shareTierListUrl = computed(() => {
   const savedTierListId = persistedTierListId.value || (tierListId.value && tierListId.value !== 'new' ? tierListId.value : '')
   if (!savedTierListId) return ''
-  if (typeof window === 'undefined') return editorPath(templateId.value, savedTierListId, { preview: true })
-  return new URL(editorPath(templateId.value, savedTierListId, { preview: true }), window.location.origin).toString()
+  const sharePath = shareEditorPath(templateId.value, savedTierListId)
+  if (typeof window === 'undefined') return sharePath
+  return new URL(sharePath, window.location.origin).toString()
 })
 watch(error, (message) => {
   if (!message) return
@@ -150,6 +171,13 @@ watch(error, (message) => {
   error.value = ''
 })
 
+function normalizeSearchText(text) {
+  return String(text || '')
+    .normalize('NFC')
+    .trim()
+    .toLowerCase()
+}
+
 function createAutoTierListTitle() {
   const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
   const pick = (size) => Array.from({ length: size }, () => chars[Math.floor(Math.random() * chars.length)]).join('')
@@ -215,7 +243,7 @@ function isPoolItemVisible(itemId) {
   const query = normalizedPoolSearchQuery.value
   if (!query) return true
   const item = itemsById.value[itemId]
-  const label = String(item?.label || itemId || '').toLowerCase()
+  const label = normalizeSearchText(item?.label || itemId || '')
   return label.includes(query)
 }
 
@@ -278,6 +306,33 @@ function buildGroupPayload() {
   }))
 }
 
+function createEditorSnapshot() {
+  return JSON.stringify({
+    title: (title.value || '').trim(),
+    description: description.value || '',
+    isPublic: !!isPublic.value,
+    showCharacterNames: !!showCharacterNames.value,
+    iconSize: Number(iconSize.value || 80),
+    columns: columns.value.map((column) => ({ id: column.id, name: column.name || '' })),
+    groups: buildGroupPayload(),
+    pool: pool.value.map((itemId) => {
+      const item = itemsById.value[itemId]
+      return {
+        id: item?.id || itemId,
+        src: item?.src || '',
+        label: item?.label || '',
+        origin: item?.origin || 'template',
+      }
+    }),
+  })
+}
+
+function syncSavedEditorSnapshot() {
+  savedEditorSnapshot.value = createEditorSnapshot()
+}
+
+const hasUnsavedChanges = computed(() => canEdit.value && savedEditorSnapshot.value && createEditorSnapshot() !== savedEditorSnapshot.value)
+
 function removeItemFromGroup(groupId, columnIndex, itemId) {
   if (!canEdit.value || !groupId || columnIndex == null || !itemId) return
   const targetGroup = groups.value.find((group) => group.id === groupId)
@@ -287,6 +342,162 @@ function removeItemFromGroup(groupId, columnIndex, itemId) {
   targetGroup.cells = nextCells
   syncGroupItemIds(targetGroup)
   pool.value = [itemId, ...pool.value.filter((id) => id !== itemId)]
+  if (selectedItemId.value === itemId) selectedItemId.value = ''
+}
+
+function shouldIgnoreItemClick() {
+  return Date.now() - recentDragFinishedAt.value < 180
+}
+
+function closeItemContextMenu() {
+  if (!itemContextMenu.value.open) return
+  itemContextMenu.value = {
+    open: false,
+    x: 0,
+    y: 0,
+    itemId: '',
+  }
+}
+
+function openItemContextMenu(itemId, event) {
+  if (!canEdit.value || !itemId || !itemsById.value[itemId] || shouldIgnoreItemClick()) return
+  selectedItemId.value = itemId
+  const viewportWidth = typeof window === 'undefined' ? 0 : window.innerWidth
+  const viewportHeight = typeof window === 'undefined' ? 0 : window.innerHeight
+  const menuX = Number(event?.clientX || 0)
+  const menuY = Number(event?.clientY || 0)
+  itemContextMenu.value = {
+    open: true,
+    x: viewportWidth ? Math.max(12, Math.min(menuX, viewportWidth - 180)) : menuX,
+    y: viewportHeight ? Math.max(12, Math.min(menuY, viewportHeight - 72)) : menuY,
+    itemId,
+  }
+}
+
+function getItemLocation(itemId) {
+  if (!itemId) return { type: null, groupId: '', columnIndex: -1, index: -1 }
+
+  const poolIndex = pool.value.findIndex((id) => id === itemId)
+  if (poolIndex >= 0) {
+    return { type: 'pool', groupId: '', columnIndex: -1, index: poolIndex }
+  }
+
+  for (const group of groups.value) {
+    for (let columnIndex = 0; columnIndex < columns.value.length; columnIndex += 1) {
+      const index = getGroupCellIds(group, columnIndex).findIndex((id) => id === itemId)
+      if (index >= 0) {
+        return { type: 'group', groupId: group.id, columnIndex, index }
+      }
+    }
+  }
+
+  return { type: null, groupId: '', columnIndex: -1, index: -1 }
+}
+
+function detachItemById(itemId) {
+  if (!itemId) return
+  pool.value = pool.value.filter((id) => id !== itemId)
+  groups.value.forEach((group) => {
+    group.cells = (group.cells || []).map((cell) => (cell || []).filter((id) => id !== itemId))
+    syncGroupItemIds(group)
+  })
+}
+
+function selectItemByClick(itemId) {
+  if (!canEdit.value || !itemId || shouldIgnoreItemClick()) return
+  selectedItemId.value = selectedItemId.value === itemId ? '' : itemId
+}
+
+function placeSelectedItemInGroup(groupId, columnIndex) {
+  if (!canEdit.value || !selectedItemId.value || !groupId || !Number.isInteger(columnIndex)) return
+  if (shouldIgnoreItemClick()) return
+
+  const targetGroup = groups.value.find((group) => group.id === groupId)
+  if (!targetGroup) return
+
+  const selectedId = selectedItemId.value
+  const currentLocation = getItemLocation(selectedId)
+  const sameTarget =
+    currentLocation.type === 'group' &&
+    currentLocation.groupId === groupId &&
+    currentLocation.columnIndex === columnIndex
+
+  if (sameTarget) {
+    selectedItemId.value = ''
+    return
+  }
+
+  detachItemById(selectedId)
+  const nextCells = [...targetGroup.cells]
+  nextCells[columnIndex] = [...getGroupCellIds(targetGroup, columnIndex), selectedId]
+  targetGroup.cells = nextCells
+  syncGroupItemIds(targetGroup)
+  selectedItemId.value = ''
+}
+
+function moveSelectedItemToPool() {
+  if (!canEdit.value || !selectedItemId.value || shouldIgnoreItemClick()) return
+
+  const selectedId = selectedItemId.value
+  const currentLocation = getItemLocation(selectedId)
+  if (currentLocation.type === 'pool') {
+    selectedItemId.value = ''
+    return
+  }
+
+  detachItemById(selectedId)
+  pool.value = [selectedId, ...pool.value]
+  selectedItemId.value = ''
+}
+
+function duplicateItemToPool() {
+  if (!canEdit.value || !itemContextMenu.value.itemId) return
+
+  const sourceItem = itemsById.value[itemContextMenu.value.itemId]
+  if (!sourceItem) {
+    closeItemContextMenu()
+    return
+  }
+
+  const clonedId = createClonedItemId()
+  itemsById.value = {
+    ...itemsById.value,
+    [clonedId]: {
+      ...sourceItem,
+      id: clonedId,
+    },
+  }
+  pool.value = [clonedId, ...pool.value]
+  selectedItemId.value = clonedId
+  closeItemContextMenu()
+  toast.success('아이템 추가 완료')
+}
+
+function handleGlobalContextMenu(event) {
+  const target = event?.target
+  if (target?.closest?.('[data-item-context-menu]')) {
+    event?.preventDefault?.()
+    event?.stopPropagation?.()
+    return
+  }
+
+  const itemEl = target?.closest?.('[data-item-id]')
+  if (canEdit.value && itemEl?.dataset?.itemId) {
+    event?.preventDefault?.()
+    event?.stopPropagation?.()
+    openItemContextMenu(itemEl.dataset.itemId, event)
+    return
+  }
+
+  if (!itemContextMenu.value.open) return
+  closeItemContextMenu()
+}
+
+function handleGlobalPointerDown(event) {
+  if (!itemContextMenu.value.open) return
+  const target = event?.target
+  if (target?.closest?.('[data-item-context-menu]')) return
+  closeItemContextMenu()
 }
 
 function setGroupDropEl(groupId, columnIndex, el) {
@@ -342,6 +553,7 @@ async function initSortables() {
   destroySortables()
 
   groupSortable.value = Sortable.create(groupListEl.value, {
+    ...touchSortableOptions,
     animation: 160,
     handle: '[data-group-handle]',
     ghostClass: 'ghost',
@@ -355,22 +567,36 @@ async function initSortables() {
   })
 
   poolSortable.value = Sortable.create(poolEl.value, {
+    ...touchSortableOptions,
     group: 'tier-items',
     animation: 160,
     draggable: '[data-item-id]',
     ghostClass: 'ghost',
     chosenClass: 'chosen',
+    onStart: () => {
+      selectedItemId.value = ''
+    },
+    onEnd: () => {
+      recentDragFinishedAt.value = Date.now()
+    },
     onSort: () => normalizeSort(poolEl.value),
     onAdd: () => normalizeSort(poolEl.value),
   })
 
   dropSortables.value = Object.entries(groupDropEls.value).map(([, el]) =>
     Sortable.create(el, {
+      ...touchSortableOptions,
       group: 'tier-items',
       animation: 160,
       draggable: '[data-item-id]',
       ghostClass: 'ghost',
       chosenClass: 'chosen',
+      onStart: () => {
+        selectedItemId.value = ''
+      },
+      onEnd: () => {
+        recentDragFinishedAt.value = Date.now()
+      },
       onSort: () => normalizeSort(el),
       onAdd: () => normalizeSort(el),
     })
@@ -409,6 +635,7 @@ function createColumnName(index = columns.value.length) {
 
 function createCustomItemLabel(fileName = '') {
   const normalized = String(fileName || '')
+    .normalize('NFC')
     .replace(/\.[^.]+$/, '')
     .replace(/[_-]+/g, ' ')
     .replace(/\s+/g, ' ')
@@ -416,6 +643,10 @@ function createCustomItemLabel(fileName = '') {
   return (normalized || 'custom').slice(0, 60)
 }
 
+function createClonedItemId() {
+  return `dup-${Date.now()}-${Math.random().toString(16).slice(2, 10)}`
+}
+
 async function addGroup() {
   groups.value = [
     ...groups.value,
@@ -732,6 +963,8 @@ async function persistTierList({ showModal = false } = {}) {
   authorAccountName.value = res.tierList?.authorAccountName || authorAccountName.value
   favoriteCount.value = Number(res.tierList?.favoriteCount || favoriteCount.value || 0)
   isFavorited.value = !!res.tierList?.isFavorited
+  await nextTick()
+  syncSavedEditorSnapshot()
   if (showModal) isSaveModalOpen.value = true
   return { ...res, savedTierListId }
 }
@@ -784,6 +1017,39 @@ function openEditMode() {
   router.push(editorPath(templateId.value, persistedTierListId.value || tierListId.value))
 }
 
+function closeNavigationConfirmModal() {
+  isNavigationConfirmModalOpen.value = false
+  pendingNavigationPath.value = ''
+}
+
+function requestEditorNavigation(path) {
+  if (!path) return
+  if (hasUnsavedChanges.value) {
+    pendingNavigationPath.value = path
+    isNavigationConfirmModalOpen.value = true
+    return
+  }
+  router.push(path)
+}
+
+function confirmNavigationDiscard() {
+  const nextPath = pendingNavigationPath.value
+  closeNavigationConfirmModal()
+  if (!nextPath) return
+  savedEditorSnapshot.value = ''
+  router.push(nextPath)
+}
+
+function openSourceTierList() {
+  if (!sourceTierListId.value) return
+  requestEditorNavigation(editorPath(templateId.value, sourceTierListId.value))
+}
+
+function openAuthorProfile() {
+  if (!canOpenAuthorProfile.value) return
+  router.push(userProfilePath(ownerId.value))
+}
+
 function closeSaveModal() {
   isSaveModalOpen.value = false
 }
@@ -842,6 +1108,9 @@ async function confirmDeleteTierList() {
 async function duplicateCurrentTierList() {
   if (!canDuplicate.value) return
   try {
+    if (canEdit.value && hasUnsavedChanges.value) {
+      await persistTierList({ showModal: false })
+    }
     const data = await api.duplicateTierList(tierListId.value)
     const duplicatedId = data.tierList?.id
     if (!duplicatedId) throw new Error('duplicate_failed')
@@ -923,90 +1192,173 @@ async function requestTemplate(type) {
   }
 }
 
-onMounted(() => {
-  ;(async () => {
-    await auth.refresh()
-    authorName.value = (auth.user?.nickname || '').trim()
-    authorAccountName.value = ((auth.user?.email || '').trim().split('@')[0] || '').trim()
+function resetEditorStateForRoute() {
+  destroySortables()
+  if (thumbnailPreviewUrl.value) {
+    URL.revokeObjectURL(thumbnailPreviewUrl.value)
+    thumbnailPreviewUrl.value = ''
+  }
+  columns.value = [{ id: 'col-1', name: '' }]
+  groups.value = normalizeLoadedGroups([], columns.value)
+  pool.value = []
+  itemsById.value = {}
+  title.value = ''
+  persistedTierListId.value = ''
+  thumbnailSrc.value = ''
+  pendingThumbnailFile.value = null
+  description.value = ''
+  isPublic.value = true
+  showCharacterNames.value = false
+  isSaveModalOpen.value = false
+  isTemplateRequestModalOpen.value = false
+  isTemplateUpdateModalOpen.value = false
+  isDeleteModalOpen.value = false
+  isGroupDeleteModalOpen.value = false
+  isColumnDeleteModalOpen.value = false
+  isNavigationConfirmModalOpen.value = false
+  pendingRemoveGroupId.value = ''
+  pendingRemoveColumnIndex.value = -1
+  pendingNavigationPath.value = ''
+  ownerId.value = ''
+  authorName.value = ''
+  authorAccountName.value = ''
+  updatedAt.value = 0
+  sourceTierListId.value = ''
+  sourceSnapshotTitle.value = ''
+  sourceSnapshotAuthor.value = ''
+  isDragActive.value = false
+  isThumbnailDragActive.value = false
+  iconSize.value = 80
+  isFavoriteBusy.value = false
+  favoriteCount.value = 0
+  isFavorited.value = false
+  isRequestingTemplate.value = false
+  isDeleting.value = false
+  poolSearchQuery.value = ''
+  selectedItemId.value = ''
+  recentDragFinishedAt.value = 0
+  savedEditorSnapshot.value = ''
+  closeItemContextMenu()
+  resetTemplateRequestDrafts()
+}
 
-    if (isNewTierList.value && !auth.user) {
-      router.replace(loginPath(editorNewPath(templateId.value)))
-      return
-    }
+async function loadEditorState() {
+  const loadToken = ++editorLoadToken
+  resetEditorStateForRoute()
+  await auth.refresh()
+  if (loadToken !== editorLoadToken) return
 
-    let currentTemplateItems = []
+  authorName.value = (auth.user?.nickname || '').trim()
+  authorAccountName.value = ((auth.user?.email || '').trim().split('@')[0] || '').trim()
+
+  if (isNewTierList.value && !auth.user) {
+    router.replace(loginPath(editorNewPath(templateId.value)))
+    return
+  }
+
+  let currentTemplateItems = []
+  try {
+    const topicRes = await api.getTopic(templateId.value)
+    if (loadToken !== editorLoadToken) return
+
+    templateName.value = topicRes.topic?.name || templateId.value
+    const base = (topicRes.items || []).map((img) => ({
+      id: img.id,
+      src: img.src,
+      label: img.label,
+      origin: 'template',
+    }))
+    currentTemplateItems = base
+    const map = {}
+    base.forEach((it) => (map[it.id] = it))
+    itemsById.value = map
+    pool.value = base.map((it) => it.id)
+  } catch (e) {
+    if (loadToken !== editorLoadToken) return
+    error.value = '기본 템플릿 이미지를 불러오지 못했어요.'
+  }
+
+  if (tierListId.value && tierListId.value !== 'new') {
     try {
-      const topicRes = await api.getTopic(templateId.value)
-      templateName.value = topicRes.topic?.name || templateId.value
-      const base = (topicRes.items || []).map((img) => ({
-        id: img.id,
-        src: img.src,
-        label: img.label,
-        origin: 'template',
-      }))
-      currentTemplateItems = base
-      const map = {}
-      base.forEach((it) => (map[it.id] = it))
-      itemsById.value = map
-      pool.value = base.map((it) => it.id)
-    } catch (e) {
-      error.value = '기본 템플릿 이미지를 불러오지 못했어요.'
-    }
+      const res = await api.getTierList(tierListId.value)
+      if (loadToken !== editorLoadToken) return
 
-    if (tierListId.value && tierListId.value !== 'new') {
-      try {
-        const res = await api.getTierList(tierListId.value)
-        const t = res.tierList
-        ownerId.value = t.authorId
-        persistedTierListId.value = t.id || ''
-        title.value = t.title
-        thumbnailSrc.value = t.thumbnailSrc || ''
-        description.value = t.description || ''
-        isPublic.value = !!t.isPublic
-        showCharacterNames.value = !!t.showCharacterNames
-        iconSize.value = Number(t.iconSize || 80)
-        authorName.value = t.authorName || ''
-        authorAccountName.value = t.authorAccountName || ''
-        updatedAt.value = Number(t.updatedAt || 0)
-        sourceTierListId.value = t.sourceTierListId || ''
-        sourceSnapshotTitle.value = t.sourceSnapshotTitle || ''
-        sourceSnapshotAuthor.value = t.sourceSnapshotAuthor || ''
-        favoriteCount.value = Number(t.favoriteCount || 0)
-        isFavorited.value = !!t.isFavorited
+      const t = res.tierList
+      ownerId.value = t.authorId
+      persistedTierListId.value = t.id || ''
+      title.value = t.title
+      thumbnailSrc.value = t.thumbnailSrc || ''
+      description.value = t.description || ''
+      isPublic.value = !!t.isPublic
+      showCharacterNames.value = !!t.showCharacterNames
+      iconSize.value = Number(t.iconSize || 80)
+      authorName.value = t.authorName || ''
+      authorAccountName.value = t.authorAccountName || ''
+      updatedAt.value = Number(t.updatedAt || 0)
+      sourceTierListId.value = t.sourceTierListId || ''
+      sourceSnapshotTitle.value = t.sourceSnapshotTitle || ''
+      sourceSnapshotAuthor.value = t.sourceSnapshotAuthor || ''
+      favoriteCount.value = Number(t.favoriteCount || 0)
+      isFavorited.value = !!t.isFavorited
 
-        if (!previewMode.value && !canEdit.value) {
-          router.replace(editorPath(templateId.value, t.id, { preview: true }))
-          return
-        }
-
-        columns.value = normalizeLoadedColumns(t.groups)
-        groups.value = normalizeLoadedGroups(t.groups, columns.value)
-        const map = {}
-        ;(t.pool || []).forEach((it) => (map[it.id] = it))
-        const grouped = new Set()
-        groups.value.forEach((group) => group.itemIds.forEach((id) => grouped.add(id)))
-        const merged = mergeLatestTemplateItemsIntoPool(
-          map,
-          Object.keys(map).filter((id) => !grouped.has(id)),
-          currentTemplateItems,
-          grouped,
-          canEdit.value && !previewMode.value
-        )
-        itemsById.value = merged.nextMap
-        pool.value = merged.nextPoolIds
-      } catch (e) {
-        error.value = '티어표를 불러오지 못했어요.'
+      if (!previewMode.value && !canEdit.value) {
+        router.replace(editorPath(templateId.value, t.id, { preview: true }))
+        return
       }
-    }
 
-    await nextTick()
-    if (canEdit.value) {
-      await initSortables()
+      columns.value = normalizeLoadedColumns(t.groups)
+      groups.value = normalizeLoadedGroups(t.groups, columns.value)
+      const map = {}
+      ;(t.pool || []).forEach((it) => (map[it.id] = it))
+      const grouped = new Set()
+      groups.value.forEach((group) => group.itemIds.forEach((id) => grouped.add(id)))
+      const merged = mergeLatestTemplateItemsIntoPool(
+        map,
+        Object.keys(map).filter((id) => !grouped.has(id)),
+        currentTemplateItems,
+        grouped,
+        canEdit.value && !previewMode.value
+      )
+      itemsById.value = merged.nextMap
+      pool.value = merged.nextPoolIds
+    } catch (e) {
+      if (loadToken !== editorLoadToken) return
+      error.value = '티어표를 불러오지 못했어요.'
     }
-  })()
+  }
+
+  await nextTick()
+  if (loadToken !== editorLoadToken) return
+
+  syncSavedEditorSnapshot()
+  if (canEdit.value) {
+    await initSortables()
+  }
+}
+
+watch(
+  () => [route.params.topicId, route.params.tierListId, route.query.preview],
+  () => {
+    loadEditorState()
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  if (typeof window === 'undefined') return
+  window.addEventListener('pointerdown', handleGlobalPointerDown)
+  window.addEventListener('contextmenu', handleGlobalContextMenu, true)
+  window.addEventListener('blur', closeItemContextMenu)
+  window.addEventListener('scroll', closeItemContextMenu, true)
 })
 
 onUnmounted(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('pointerdown', handleGlobalPointerDown)
+    window.removeEventListener('contextmenu', handleGlobalContextMenu, true)
+    window.removeEventListener('blur', closeItemContextMenu)
+    window.removeEventListener('scroll', closeItemContextMenu, true)
+  }
   if (thumbnailPreviewUrl.value) URL.revokeObjectURL(thumbnailPreviewUrl.value)
   destroySortables()
 })
@@ -1044,14 +1396,6 @@ onUnmounted(() => {
           </div>
         </div>
       </div>
-      <div v-if="pool.length" class="previewOnly__pool">
-        <div class="previewOnly__poolTitle">남은 아이템</div>
-        <div class="previewOnly__poolGrid">
-          <div v-for="id in pool" :key="id" class="previewOnly__poolItem previewOnly__poolItem--inactive">
-            <img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
-          </div>
-        </div>
-      </div>
       <div class="previewOnly__footer">
         <span>{{ effectiveAuthorName }}</span>
         <span>{{ formatExportDate(fallbackTimestamp) }}</span>
@@ -1073,11 +1417,14 @@ onUnmounted(() => {
               공유하기
             </button>
             <button v-if="canDuplicate" class="btn btn--save viewerSidebar__button" type="button" @click="duplicateCurrentTierList">
-              내 티어표로 복사
+              {{ duplicateActionLabel }}
             </button>
             <button v-if="canSwitchToEditMode" class="btn btn--save viewerSidebar__button" type="button" @click="openEditMode">
               수정 모드로 전환
             </button>
+            <button v-if="canOpenAuthorProfile" class="btn btn--ghost viewerSidebar__button" type="button" @click="openAuthorProfile">
+              작성자 프로필 보기
+            </button>
           </div>
         </div>
       </template>
@@ -1096,6 +1443,19 @@ onUnmounted(() => {
     </div>
   </div>
 
+  <div v-if="isNavigationConfirmModalOpen" class="modalOverlay" @click.self="closeNavigationConfirmModal">
+    <div class="modalCard" role="dialog" aria-modal="true" aria-labelledby="navigationConfirmTitle">
+      <div id="navigationConfirmTitle" class="modalCard__title">원본 티어표로 이동</div>
+      <div class="modalCard__desc">
+        아직 저장하지 않은 수정 내용이 있어요. 이대로 이동하면 현재 변경 내용은 사라집니다.
+      </div>
+      <div class="modalCard__actions">
+        <button class="btn btn--ghost" type="button" @click="closeNavigationConfirmModal">계속 편집</button>
+        <button class="btn btn--danger" type="button" @click="confirmNavigationDiscard">저장 없이 이동</button>
+      </div>
+    </div>
+  </div>
+
   <div v-if="isTemplateRequestModalOpen" class="modalOverlay" @click.self="closeTemplateRequestModal">
     <div class="modalCard" role="dialog" aria-modal="true" aria-labelledby="templateRequestTitle">
       <div id="templateRequestTitle" class="modalCard__title">템플릿 등록 요청</div>
@@ -1213,8 +1573,8 @@ onUnmounted(() => {
             </template>
           </div>
           <div v-if="sourceTierListId" class="editorMain__sourceNote">
-            <span>복사본</span>
-            <button class="editorMain__sourceLink" type="button" @click="router.push(editorPath(templateId, sourceTierListId))">{{ copiedFromLabel }}</button>
+            <span>원본</span>
+            <button class="editorMain__sourceLink" type="button" @click="openSourceTierList">{{ copiedFromLabel }}</button>
           </div>
         </div>
       </section>
@@ -1294,11 +1654,25 @@ onUnmounted(() => {
                       :data-group-id="g.id"
                       :data-column-index="columnIndex"
                       :ref="(el) => setGroupDropEl(g.id, columnIndex, el)"
+                      :class="{ 'row__drop--clickTarget': canEdit && !!selectedItemId }"
+                      @click="placeSelectedItemInGroup(g.id, columnIndex)"
                     >
                       <div v-if="columns.length > 1" class="row__columnBadge">{{ column.name || '열 ' + (columnIndex + 1) }}</div>
                       <div v-if="!isExporting" class="row__empty" v-show="getGroupCellIds(g, columnIndex).length === 0">여기로 드래그해서 배치</div>
-                      <div v-for="id in getGroupCellIds(g, columnIndex)" :key="id" class="cell" :data-item-id="id">
-                        <img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
+                      <div
+                        v-for="id in getGroupCellIds(g, columnIndex)"
+                        :key="id"
+                        class="cell"
+                        :class="{ 'cell--selected': selectedItemId === id }"
+                        :data-item-id="id"
+                        @click.stop="selectItemByClick(id)"
+                      >
+                        <img
+                          :src="resolveItemSrc(itemsById[id])"
+                          class="thumb"
+                          :alt="itemsById[id]?.label || id"
+                          draggable="false"
+                        />
                         <div v-if="showCharacterNames" class="itemNameOverlay">{{ itemsById[id]?.label || id }}</div>
                         <button
                           v-if="canEdit && !isExporting"
@@ -1351,7 +1725,7 @@ onUnmounted(() => {
             <div class="sidebar__count">{{ visiblePoolCount }} / {{ pool.length }}</div>
           </div>
           <div class="sidebar__hint">
-            {{ canEdit ? '등록된 아이템 리스트입니다. 드래그해서 표에 넣을 수 있습니다.' : '공개 티어표는 보기 전용입니다.' }}
+            {{ canEdit ? '아이템을 드래그하거나, 클릭으로 선택한 뒤 원하는 셀/풀을 클릭해서 옮길 수 있어요.' : '공개 티어표는 보기 전용입니다.' }}
           </div>
           <input
             v-model="poolSearchQuery"
@@ -1360,15 +1734,31 @@ onUnmounted(() => {
             maxlength="60"
             placeholder="아이템 이름 검색"
           />
-          <div ref="poolEl" class="pool" data-list-type="pool">
+          <div
+            ref="poolEl"
+            class="pool"
+            :class="{ 'pool--clickTarget': canEdit && !!selectedItemId }"
+            data-list-type="pool"
+            @click.self="moveSelectedItemToPool"
+          >
             <div
               v-for="id in pool"
               :key="id"
               class="poolItem"
-              :class="{ 'poolItem--readonly': !canEdit, 'poolItem--hidden': !isPoolItemVisible(id) }"
+              :class="{
+                'poolItem--readonly': !canEdit,
+                'poolItem--hidden': !isPoolItemVisible(id),
+                'poolItem--selected': selectedItemId === id,
+              }"
               :data-item-id="id"
+              @click.stop="selectItemByClick(id)"
             >
-              <img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
+              <img
+                :src="resolveItemSrc(itemsById[id])"
+                class="thumb"
+                :alt="itemsById[id]?.label || id"
+                draggable="false"
+              />
               <div class="poolItem__label">{{ itemsById[id]?.label || id }}</div>
               <div v-if="!canEdit" class="poolItem__state">미배치</div>
             </div>
@@ -1376,6 +1766,19 @@ onUnmounted(() => {
         </div>
       </div>
 
+      <div
+        v-if="itemContextMenu.open && canEdit"
+        class="itemContextMenu"
+        :style="{ left: `${itemContextMenu.x}px`, top: `${itemContextMenu.y}px` }"
+        data-item-context-menu
+        @click.stop
+        @contextmenu.prevent.stop
+      >
+        <button class="itemContextMenu__action" type="button" @click="duplicateItemToPool">
+          아이템 복제
+        </button>
+      </div>
+
     </div>
 
   </section>
@@ -1473,8 +1876,9 @@ onUnmounted(() => {
             <SvgIcon :src="shareIcon" :size="16" />
             <span>공유하기</span>
           </button>
+          <button v-if="canOpenAuthorProfile" class="editorSidebar__utilityLink" @click="openAuthorProfile">작성자 프로필 보기</button>
           <button v-if="canEdit && hasSavedTierList" class="editorSidebar__utilityLink editorSidebar__utilityLink--danger" @click="openDeleteModal">삭제하기</button>
-          <button v-if="canDuplicate" class="editorSidebar__utilityLink" @click="duplicateCurrentTierList">복사해서 내 티어표로 가져오기</button>
+          <button v-if="canDuplicate" class="editorSidebar__utilityLink" @click="duplicateCurrentTierList">{{ duplicateActionLabel }}</button>
           <button
             v-if="canRequestTemplateCreate"
             class="editorSidebar__utilityLink"
@@ -2214,6 +2618,11 @@ onUnmounted(() => {
   overflow: hidden;
   position: relative;
 }
+.row__drop--clickTarget {
+  cursor: copy;
+  border-color: rgba(96, 165, 250, 0.42);
+  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.12);
+}
 .row__empty {
   opacity: 0.6;
   font-size: 13px;
@@ -2227,6 +2636,11 @@ onUnmounted(() => {
   display: inline-flex;
   flex: 0 0 auto;
   position: relative;
+  cursor: pointer;
+  border-radius: 12px;
+}
+.cell--selected {
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.92), 0 0 0 6px rgba(96, 165, 250, 0.18);
 }
 .itemNameOverlay {
   position: absolute;
@@ -2606,6 +3020,9 @@ onUnmounted(() => {
   gap: 10px;
   align-content: start;
 }
+.pool--clickTarget {
+  cursor: copy;
+}
 .poolItem {
   min-width: 0;
   display: grid;
@@ -2617,11 +3034,17 @@ onUnmounted(() => {
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: var(--theme-pill-bg);
+  cursor: pointer;
 }
 .poolItem--readonly {
+  cursor: default;
   opacity: 0.58;
   filter: grayscale(0.25) brightness(0.78);
 }
+.poolItem--selected {
+  border-color: rgba(96, 165, 250, 0.58);
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.92), 0 0 0 6px rgba(96, 165, 250, 0.18);
+}
 .poolItem .thumb {
   width: 100%;
   max-width: var(--thumb-size, 80px);
@@ -2650,6 +3073,35 @@ onUnmounted(() => {
 .poolItem--hidden {
   display: none;
 }
+
+.itemContextMenu {
+  position: fixed;
+  z-index: 50;
+  min-width: 150px;
+  padding: 8px;
+  border-radius: 16px;
+  border: 1px solid var(--theme-border);
+  background: color-mix(in srgb, var(--theme-main-bg) 96%, transparent);
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
+}
+
+.itemContextMenu__action {
+  width: 100%;
+  border: 0;
+  border-radius: 12px;
+  padding: 11px 12px;
+  background: transparent;
+  color: var(--theme-text);
+  font-size: 13px;
+  font-weight: 800;
+  text-align: left;
+  cursor: pointer;
+}
+
+.itemContextMenu__action:hover {
+  background: var(--theme-pill-bg);
+}
+
 .hidden {
   display: none;
 }
@@ -2738,6 +3190,9 @@ onUnmounted(() => {
   .previewOnly {
     padding: 14px;
   }
+  .viewerSidebar__section {
+    margin-top: 0;
+  }
   .pool {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }

frontend/src/views/TopicHubView.vue

@@ -12,6 +12,7 @@ const auth = useAuthStore()
 
 const topicId = computed(() => route.params.topicId)
 const topicName = ref('')
+const featuredTierLists = ref([])
 const tierLists = ref([])
 const error = ref('')
 const query = ref('')
@@ -19,6 +20,7 @@ const brokenThumbnailIds = ref({})
 const isTopicLoading = ref(false)
 const isListView = computed(() => route.query.view === 'list')
 const topicTitle = computed(() => topicName.value || (isTopicLoading.value ? '주제 불러오는 중...' : ''))
+const publicTierLists = computed(() => tierLists.value.filter((tierList) => !tierList.isFeatured))
 
 function fmt(ts) {
   return new Date(ts).toLocaleDateString(undefined, {
@@ -59,6 +61,7 @@ async function loadTierLists() {
     ])
     topicName.value = topicRes.topic?.name || ''
     brokenThumbnailIds.value = {}
+    featuredTierLists.value = listRes.featuredTierLists || []
     tierLists.value = listRes.tierLists || []
   } catch (e) {
     error.value = '주제 정보를 불러오지 못했어요.'
@@ -110,10 +113,65 @@ watch(
     </section>
 
     <div v-if="error" class="error">{{ error }}</div>
+    <section v-if="featuredTierLists.length" class="featuredPanel">
+      <div class="featuredHead">
+        <div>
+          <div class="featuredHead__eyebrow">Featured</div>
+          <h3 class="featuredHead__title">추천 티어표</h3>
+        </div>
+        <div class="featuredHead__count">{{ featuredTierLists.length }}개</div>
+      </div>
+      <div class="list featuredList" :class="{ 'list--table': isListView }">
+        <article
+          v-for="t in featuredTierLists"
+          :key="`featured-${t.id}`"
+          class="boardCard boardCard--featured"
+          :class="{ 'boardCard--list': isListView }"
+        >
+          <button class="boardCard__body" :class="{ 'boardCard__body--list': isListView }" @click="openTierList(t.id)">
+            <div class="boardCard__thumbWrap">
+              <img
+                v-if="tierListThumbnailUrl(t)"
+                class="boardCard__thumb"
+                :src="tierListThumbnailUrl(t)"
+                alt=""
+                draggable="false"
+                @error="handleThumbnailError(t.id)"
+              />
+              <div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
+            </div>
+            <div class="boardCard__head">
+              <div class="boardCard__titleRow">
+                <div class="boardCard__title">{{ t.title }}</div>
+                <div class="favoriteStat" :title="t.isFavorited ? '이미 즐겨찾기한 티어표' : '즐겨찾기 수'">
+                  {{ t.isFavorited ? '♥' : '♡' }} {{ t.favoriteCount || 0 }}
+                </div>
+              </div>
+              <div class="boardCard__metaRow">
+                <div class="boardCard__author">
+                  <img
+                    v-if="avatarSrcOf(t)"
+                    class="boardCard__avatar"
+                    :src="avatarSrcOf(t)"
+                    :alt="displayNameOf(t)"
+                    draggable="false"
+                  />
+                  <div v-else class="boardCard__avatar boardCard__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
+                  <span class="boardCard__authorName">{{ displayNameOf(t) }}</span>
+                </div>
+                <div class="boardCard__date">{{ fmt(t.updatedAt) }}</div>
+              </div>
+            </div>
+          </button>
+        </article>
+      </div>
+    </section>
+
     <section class="panel">
-    <div v-if="tierLists.length === 0" class="empty">아직 공개 티어표가 없어요.</div>
+    <div class="sectionLabel">전체 공개 티어표</div>
+    <div v-if="publicTierLists.length === 0" class="empty">아직 일반 공개 티어표가 없어요.</div>
     <div v-else class="list" :class="{ 'list--table': isListView }">
-      <article v-for="t in tierLists" :key="t.id" class="boardCard" :class="{ 'boardCard--list': isListView }">
+      <article v-for="t in publicTierLists" :key="t.id" class="boardCard" :class="{ 'boardCard--list': isListView }">
         <button class="boardCard__body" :class="{ 'boardCard__body--list': isListView }" @click="openTierList(t.id)">
           <div class="boardCard__thumbWrap">
             <img v-if="tierListThumbnailUrl(t)" class="boardCard__thumb" :src="tierListThumbnailUrl(t)" alt="" draggable="false" @error="handleThumbnailError(t.id)" />
@@ -148,6 +206,44 @@ watch(
   border-radius: 0;
   padding: 0;
 }
+.featuredPanel {
+  margin-bottom: 28px;
+  padding: 24px;
+  border-radius: 28px;
+  border: 1px solid var(--theme-card-border);
+  background: linear-gradient(180deg, var(--theme-surface-soft) 0%, var(--theme-surface) 100%);
+  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
+}
+.featuredHead {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+}
+.featuredHead__eyebrow,
+.sectionLabel {
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--theme-text-faint);
+}
+.featuredHead__title {
+  margin: 6px 0 0;
+  font-size: 22px;
+  font-weight: 900;
+  color: var(--theme-text);
+}
+.featuredHead__count {
+  flex: 0 0 auto;
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--theme-text-muted);
+}
+.sectionLabel {
+  margin-bottom: 14px;
+}
 .toolbar {
   display: flex;
   gap: 10px;
@@ -206,6 +302,12 @@ watch(
   background: var(--theme-card-bg-hover);
   transform: translateY(-2px);
 }
+.boardCard--featured {
+  border-color: color-mix(in srgb, var(--theme-accent) 35%, var(--theme-card-border));
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--theme-accent) 7%, transparent), transparent 55%),
+    var(--theme-card-bg);
+}
 .boardCard__body {
   min-width: 0;
   text-align: left;
@@ -361,6 +463,17 @@ watch(
 }
 
 @media (max-width: 720px) {
+  .featuredPanel {
+    padding: 18px;
+    border-radius: 22px;
+  }
+
+  .featuredHead {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+  }
+
   .list {
     grid-template-columns: 1fr;
   }

frontend/src/views/UserProfileView.vue

@@ -0,0 +1,469 @@
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { api } from '../lib/api'
+import { editorPath, followingFeedPath, loginPath } from '../lib/paths'
+import { toApiUrl } from '../lib/runtime'
+import { useAuthStore } from '../stores/auth'
+import { useToast } from '../composables/useToast'
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+const toast = useToast()
+
+const userId = computed(() => route.params.userId || '')
+const profile = ref(null)
+const tierLists = ref([])
+const query = ref('')
+const isLoading = ref(false)
+const isFollowBusy = ref(false)
+const error = ref('')
+const brokenThumbnailIds = ref({})
+
+const profileAvatarUrl = computed(() => (profile.value?.avatarSrc ? toApiUrl(profile.value.avatarSrc) : ''))
+const profileDisplayName = computed(() => profile.value?.nickname || profile.value?.accountName || '알 수 없음')
+const profileFallback = computed(() => (profile.value?.accountName || 'u').trim().charAt(0).toUpperCase() || '?')
+const canFollow = computed(() => !!auth.user && !!profile.value && !profile.value.isSelf)
+
+watch(error, (message) => {
+  if (!message) return
+  toast.error(message)
+  error.value = ''
+})
+
+function fmt(ts) {
+  return new Date(ts).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  })
+}
+
+function displayNameOf(tierList) {
+  return tierList.authorName || profileDisplayName.value
+}
+
+function avatarSrcOf(tierList) {
+  return tierList.authorAvatarSrc ? toApiUrl(tierList.authorAvatarSrc) : profileAvatarUrl.value
+}
+
+function avatarFallbackOf(tierList) {
+  return (tierList.authorAccountName || profile.value?.accountName || 'u').trim().charAt(0).toUpperCase() || '?'
+}
+
+function tierListThumbnailUrl(tierList) {
+  if (!tierList?.id || brokenThumbnailIds.value[tierList.id]) return ''
+  return tierList.thumbnailSrc ? toApiUrl(tierList.thumbnailSrc) : ''
+}
+
+function handleThumbnailError(tierListId) {
+  if (!tierListId || brokenThumbnailIds.value[tierListId]) return
+  brokenThumbnailIds.value = { ...brokenThumbnailIds.value, [tierListId]: true }
+}
+
+async function loadProfile() {
+  isLoading.value = true
+  try {
+    if (!auth.hydrated) await auth.refresh()
+    const [profileRes, tierListsRes] = await Promise.all([
+      api.getUserProfile(userId.value),
+      api.listUserPublicTierLists(userId.value, { q: query.value }),
+    ])
+    profile.value = profileRes.user || null
+    tierLists.value = tierListsRes.tierLists || []
+    brokenThumbnailIds.value = {}
+  } catch (e) {
+    error.value = '작성자 프로필을 불러오지 못했어요.'
+    profile.value = null
+    tierLists.value = []
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function toggleFollow() {
+  if (!canFollow.value || !profile.value?.id || isFollowBusy.value) return
+  try {
+    isFollowBusy.value = true
+    const data = profile.value.isFollowing
+      ? await api.unfollowUser(profile.value.id)
+      : await api.followUser(profile.value.id)
+    profile.value = data.user || profile.value
+    toast.success(profile.value.isFollowing ? '팔로우했어요.' : '팔로우를 해제했어요.')
+  } catch (e) {
+    if (e?.status === 401) {
+      router.push(loginPath(route.fullPath))
+      return
+    }
+    error.value = '팔로우 상태를 변경하지 못했어요.'
+  } finally {
+    isFollowBusy.value = false
+  }
+}
+
+function openTierList(tierList) {
+  router.push(editorPath(tierList.topicSlug || tierList.topicId, tierList.id))
+}
+
+watch(userId, loadProfile, { immediate: true })
+</script>
+
+<template>
+  <section class="pageWrap">
+    <section class="pageHead">
+      <div class="pageHead__main">
+        <div class="pageHead__eyebrow">User Profile</div>
+        <h2 class="pageHead__title">사용자 프로필</h2>
+        <div class="pageHead__desc">
+          이 사용자가 공개한 티어표를 모아볼 수 있어요.
+        </div>
+      </div>
+      <div class="pageHead__aside profileActions">
+        <button v-if="canFollow" class="btn btn--primary" :disabled="isFollowBusy" type="button" @click="toggleFollow">
+          {{ profile?.isFollowing ? '팔로잉' : '팔로우' }}
+        </button>
+        <button v-if="auth.user" class="btn" type="button" @click="router.push(followingFeedPath())">팔로우 피드</button>
+      </div>
+    </section>
+
+    <section class="profileHero">
+      <div class="profileCard">
+        <img v-if="profileAvatarUrl" class="profileAvatar" :src="profileAvatarUrl" :alt="profileDisplayName" draggable="false" />
+        <div v-else class="profileAvatar profileAvatar--fallback">{{ profileFallback }}</div>
+        <div class="profileMeta">
+          <div class="profileMeta__name">{{ profileDisplayName }}</div>
+        </div>
+      </div>
+      <div class="profileStats">
+        <article class="profileStat">
+          <span class="profileStat__label">공개 티어표</span>
+          <strong class="profileStat__value">{{ profile?.publicTierListCount || 0 }}</strong>
+        </article>
+        <article class="profileStat">
+          <span class="profileStat__label">팔로워</span>
+          <strong class="profileStat__value">{{ profile?.followerCount || 0 }}</strong>
+        </article>
+        <article class="profileStat">
+          <span class="profileStat__label">팔로잉</span>
+          <strong class="profileStat__value">{{ profile?.followingCount || 0 }}</strong>
+        </article>
+      </div>
+    </section>
+
+    <section class="listToolbar">
+      <input v-model="query" class="input" placeholder="이 작성자의 공개 티어표 검색" @keydown.enter.prevent="loadProfile" />
+      <button class="btn" :disabled="isLoading" type="button" @click="loadProfile">{{ isLoading ? '검색중...' : '검색' }}</button>
+    </section>
+
+    <div v-if="isLoading" class="empty">작성자 티어표를 불러오고 있어요.</div>
+    <div v-else-if="!tierLists.length" class="empty">아직 공개 티어표가 없어요.</div>
+    <div v-else class="list">
+      <article v-for="tierList in tierLists" :key="tierList.id" class="boardCard">
+        <button class="boardCard__body" type="button" @click="openTierList(tierList)">
+          <div class="boardCard__thumbWrap">
+            <img
+              v-if="tierListThumbnailUrl(tierList)"
+              class="boardCard__thumb"
+              :src="tierListThumbnailUrl(tierList)"
+              :alt="tierList.title"
+              draggable="false"
+              @error="handleThumbnailError(tierList.id)"
+            />
+            <div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
+          </div>
+          <div class="boardCard__head">
+            <div class="boardCard__titleRow">
+              <div class="boardCard__title">{{ tierList.title }}</div>
+              <div class="favoriteStat">{{ tierList.isFavorited ? '♥' : '♡' }} {{ tierList.favoriteCount || 0 }}</div>
+            </div>
+            <div class="boardCard__metaRow">
+              <div class="boardCard__author">
+                <img
+                  v-if="avatarSrcOf(tierList)"
+                  class="boardCard__avatar"
+                  :src="avatarSrcOf(tierList)"
+                  :alt="displayNameOf(tierList)"
+                  draggable="false"
+                />
+                <div v-else class="boardCard__avatar boardCard__avatar--fallback">{{ avatarFallbackOf(tierList) }}</div>
+                <span class="boardCard__authorName">{{ displayNameOf(tierList) }}</span>
+              </div>
+              <div class="boardCard__date">{{ fmt(tierList.updatedAt) }}</div>
+            </div>
+          </div>
+        </button>
+      </article>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.profileActions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.btn {
+  padding: 11px 13px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft-2);
+  color: var(--theme-text);
+  font-weight: 800;
+  cursor: pointer;
+}
+.btn--primary {
+  border: 0;
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  color: #fff;
+}
+.profileHero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
+  gap: 18px;
+  margin-bottom: 22px;
+}
+.profileCard,
+.profileStat {
+  border-radius: 24px;
+  border: 1px solid var(--theme-card-border);
+  background: var(--theme-card-bg);
+  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
+}
+.profileCard {
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  min-width: 0;
+}
+.profileAvatar {
+  width: 82px;
+  height: 82px;
+  border-radius: 9999px;
+  object-fit: cover;
+  border: 1px solid var(--theme-avatar-border);
+  background: var(--theme-border);
+  flex: 0 0 auto;
+}
+.profileAvatar--fallback {
+  display: grid;
+  place-items: center;
+  font-size: 28px;
+  font-weight: 900;
+}
+.profileMeta {
+  min-width: 0;
+  display: grid;
+  gap: 6px;
+}
+.profileMeta__name {
+  font-size: 24px;
+  font-weight: 900;
+  color: var(--theme-text);
+  word-break: break-word;
+}
+.profileStats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+.profileStat {
+  padding: 18px;
+  display: grid;
+  gap: 8px;
+  align-content: center;
+}
+.profileStat__label {
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--theme-text-faint);
+}
+.profileStat__value {
+  font-size: 26px;
+  font-weight: 900;
+  color: var(--theme-text);
+}
+.listToolbar {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 18px;
+}
+.input {
+  min-width: 260px;
+  padding: 11px 13px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
+  color: var(--theme-text);
+}
+.empty {
+  opacity: 0.76;
+}
+.list {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 18px;
+}
+.boardCard {
+  min-width: 0;
+  border-radius: 22px;
+  border: 1px solid var(--theme-card-border);
+  background: var(--theme-card-bg);
+  color: var(--theme-text);
+  overflow: hidden;
+  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
+  transition:
+    transform 0.16s ease,
+    background 0.16s ease;
+}
+.boardCard:hover {
+  background: var(--theme-card-bg-hover);
+  transform: translateY(-2px);
+}
+.boardCard__body {
+  width: 100%;
+  min-width: 0;
+  text-align: left;
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  display: grid;
+  overflow: hidden;
+}
+.boardCard__thumbWrap {
+  min-width: 0;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  padding: 14px 14px 0;
+  box-sizing: border-box;
+}
+.boardCard__thumb,
+.boardCard__thumbPlaceholder {
+  width: 100%;
+  height: 100%;
+  border-radius: 18px;
+  display: block;
+}
+.boardCard__thumb {
+  object-fit: cover;
+}
+.boardCard__thumbPlaceholder {
+  display: grid;
+  place-items: center;
+  background: var(--theme-thumb-fallback-bg);
+  color: var(--theme-text-faint);
+  font-size: 13px;
+  font-weight: 700;
+}
+.boardCard__head {
+  min-width: 0;
+  padding: 16px 18px 18px;
+  display: grid;
+  gap: 8px;
+  overflow: hidden;
+}
+.boardCard__titleRow,
+.boardCard__metaRow {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+}
+.boardCard__titleRow {
+  align-items: flex-start;
+}
+.boardCard__metaRow {
+  align-items: flex-end;
+}
+.boardCard__title {
+  min-width: 0;
+  font-weight: 800;
+  font-size: 18px;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+.boardCard__author {
+  min-width: 0;
+  max-width: 100%;
+  display: inline-flex;
+  gap: 7px;
+  align-items: center;
+  font-size: 13px;
+  opacity: 0.86;
+  overflow: hidden;
+}
+.boardCard__authorName {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.boardCard__avatar {
+  width: 22px;
+  height: 22px;
+  border-radius: 9999px;
+  object-fit: cover;
+  border: 1px solid var(--theme-avatar-border);
+  background: var(--theme-border);
+  flex: 0 0 auto;
+}
+.boardCard__avatar--fallback {
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  font-weight: 900;
+}
+.boardCard__date,
+.favoriteStat {
+  flex: 0 0 auto;
+  min-width: 0;
+  max-width: 100%;
+  font-size: 13px;
+  color: var(--theme-text-faint);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.boardCard__date {
+  font-size: 10px;
+}
+@media (max-width: 1400px) {
+  .list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@media (max-width: 1200px) {
+  .profileHero {
+    grid-template-columns: 1fr;
+  }
+
+  .list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 720px) {
+  .profileCard {
+    padding: 18px;
+  }
+
+  .profileStats,
+  .list {
+    grid-template-columns: 1fr;
+  }
+
+  .input {
+    min-width: 0;
+    width: 100%;
+  }
+}
+</style>