목록관리 템플릿 추가 모달 정리

.cursorrules

@@ -1 +1 @@
-모든 작업 시 프로젝트 루트의 .ai-rules.md 지침을 엄격히 준수하고, 작업 종료 시마다 docs/ 폴더 내 문서를 업데이트할 것.
+모든 작업 시 프로젝트 루트의 /ai-rules.md 지침을 엄격히 준수하고, 작업 종료 시마다 docs/ 폴더 내 문서를 업데이트할 것.

.dockerignore

@@ -0,0 +1,11 @@
+.git
+.gitignore
+.DS_Store
+node_modules
+frontend/node_modules
+frontend/dist
+backend/node_modules
+backend/.sessions
+backend/uploads
+docker-compose.yml
+docs

.env.production

@@ -0,0 +1,13 @@
+MARIADB_ROOT_PASSWORD=wps!xldj180204
+MARIADB_DATABASE=tier_db
+MARIADB_USER=zenn
+MARIADB_PASSWORD=wps!xldj180204
+SESSION_SECRET=291fbf7d5d112786a84d8ff62dd2839ce343a820c47d88da746ec78e11d640b3
+APP_ORIGIN=https://tmaker.sori.studio
+SMTP_HOST=smtp.gmail.com
+SMTP_PORT=465
+SMTP_SECURE=true
+SMTP_USER=zenn.sori.studio@gmail.com
+SMTP_PASS=kcasoehxcspqdoxz
+SMTP_FROM="Tier Maker <zenn.sori.studio@gmail.com>"
+NICKNAME_CHANGE_INTERVAL_DAYS=14

.env.production.example

@@ -0,0 +1,12 @@
+MARIADB_ROOT_PASSWORD=change-this-root-password
+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>"

.gitignore

@@ -8,5 +8,8 @@ backend/.sessions/
 backend/uploads/avatars/
 backend/uploads/games/
 backend/uploads/custom/
+backend/uploads/assets/
 
 .DS_Store
+.env.production
+.vscode/

README.md

@@ -39,6 +39,18 @@ VITE_API_ORIGIN=http://localhost:5179 npm run dev
 
 자세한 내용은 [docs/local-mariadb.md](/Users/bicute/Desktop/zenn.dev/tier-cursor/docs/local-mariadb.md)를 참고하세요.
 
+## UGREEN NAS 운영 배포
+
+운영용은 `MariaDB + backend + frontend` 3컨테이너 구조를 권장합니다.
+
+```bash
+cp .env.production.example .env.production
+docker compose --env-file .env.production -f docker-compose.prod.yml up -d --build
+```
+
+- 프로덕션 컴포즈: [docker-compose.prod.yml](/Users/bicute/Desktop/zenn.dev/tier-cursor/docker-compose.prod.yml)
+- 배포 가이드: [docs/ugreen-nas-deploy.md](/Users/bicute/Desktop/zenn.dev/tier-cursor/docs/ugreen-nas-deploy.md)
+
 ## 사용 흐름(현재 구현)
 
 - **게임 선택**: `/`에서 게임 클릭

backend/Dockerfile

@@ -0,0 +1,15 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY backend/package*.json ./
+RUN npm ci --omit=dev
+
+COPY backend/ ./
+
+ENV NODE_ENV=production
+ENV PORT=5179
+
+EXPOSE 5179
+
+CMD ["node", "index.js"]

backend/index.js

@@ -1,15 +1,21 @@
 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 gamesRoutes = require('./src/routes/games')
+const topicsRoutes = require('./src/routes/topics')
 const tierListsRoutes = require('./src/routes/tierlists')
+const commentsRoutes = require('./src/routes/comments')
+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
@@ -24,7 +30,7 @@ const allowedOrigins = (process.env.CORS_ORIGINS || '')
 
 const FileStore = FileStoreFactory(session)
 
-;['uploads/avatars', 'uploads/games', 'uploads/custom', '.sessions'].forEach((relativePath) => {
+;['uploads/avatars', 'uploads/topics', 'uploads/custom', 'uploads/tierlists', '.sessions'].forEach((relativePath) => {
   fs.mkdirSync(path.join(__dirname, relativePath), { recursive: true })
 })
 
@@ -53,6 +59,7 @@ app.use(
       retries: 0,
     }),
     secret: SESSION_SECRET,
+    proxy: TRUST_PROXY > 0,
     resave: false,
     saveUninitialized: false,
     cookie: {
@@ -73,14 +80,18 @@ app.use(async (req, res, next) => {
     await ensureData()
     next()
   } catch (e) {
+    console.error('[backend] db init failed', e)
     res.status(500).json({ error: 'db_init_failed' })
   }
 })
 
 app.use('/api/auth', authRoutes)
-app.use('/api/games', gamesRoutes)
+app.use('/api/topics', topicsRoutes)
 app.use('/api/tierlists', tierListsRoutes)
+app.use('/api/comments', commentsRoutes)
+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,18 +11,496 @@
       "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"
       },
       "devDependencies": {
         "nodemon": "^3.1.14"
       }
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.1.tgz",
+      "integrity": "sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@types/node": {
       "version": "25.5.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.5.0.tgz",
@@ -368,6 +846,27 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "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",
@@ -1109,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",
@@ -1381,7 +1889,6 @@
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
       "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
-      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -1458,6 +1965,50 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "license": "ISC"
     },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
@@ -1635,6 +2186,13 @@
         "nodetouch": "bin/nodetouch.js"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
+      "optional": true
+    },
     "node_modules/type-is": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",

backend/package.json

@@ -4,8 +4,12 @@
   "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": [],
   "author": "",
@@ -14,12 +18,15 @@
   "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"
   },
   "devDependencies": {

backend/scripts/backfill-legacy-image-assets.js

@@ -0,0 +1,106 @@
+const fs = require('fs/promises')
+const path = require('path')
+const crypto = require('crypto')
+const sharp = require('sharp')
+const { nanoid } = require('nanoid')
+const {
+  ensureData,
+  closePool,
+  listReferencedUploadSources,
+  findImageAssetBySrc,
+  createImageAsset,
+} = require('../src/db')
+
+const BACKEND_ROOT = path.join(__dirname, '..')
+
+function inferMimeType(src, metadata) {
+  const format = String(metadata?.format || '').toLowerCase()
+  if (format === 'jpeg' || format === 'jpg') return 'image/jpeg'
+  if (format === 'png') return 'image/png'
+  if (format === 'gif') return 'image/gif'
+  if (format === 'webp') return 'image/webp'
+  if (format === 'svg' || format === 'svg+xml') return 'image/svg+xml'
+  if (format === 'avif') return 'image/avif'
+
+  const ext = path.extname(src || '').toLowerCase()
+  if (ext === '.jpg' || ext === '.jpeg') return 'image/jpeg'
+  if (ext === '.png') return 'image/png'
+  if (ext === '.gif') return 'image/gif'
+  if (ext === '.webp') return 'image/webp'
+  if (ext === '.svg') return 'image/svg+xml'
+  if (ext === '.avif') return 'image/avif'
+  return 'application/octet-stream'
+}
+
+async function main() {
+  await ensureData()
+
+  const referencedSrcs = Array.from(new Set(await listReferencedUploadSources()))
+    .filter((src) => typeof src === 'string' && src.startsWith('/uploads/'))
+    .sort()
+
+  const summary = {
+    scanned: referencedSrcs.length,
+    skippedExisting: 0,
+    backfilled: 0,
+    missingFiles: 0,
+    failed: 0,
+  }
+
+  for (const src of referencedSrcs) {
+    const existing = await findImageAssetBySrc(src)
+    if (existing) {
+      summary.skippedExisting += 1
+      continue
+    }
+
+    const absolutePath = path.join(BACKEND_ROOT, src.replace(/^\//, ''))
+
+    try {
+      const [buffer, stat] = await Promise.all([fs.readFile(absolutePath), fs.stat(absolutePath)])
+      let metadata = {}
+      try {
+        metadata = await sharp(buffer, { failOn: 'none' }).metadata()
+      } catch (error) {
+        metadata = {}
+      }
+
+      const rawHash = crypto.createHash('sha256').update(buffer).digest('hex')
+      const contentHash = crypto.createHash('sha256').update(`${rawHash}|${src}`).digest('hex')
+
+      await createImageAsset({
+        id: nanoid(),
+        contentHash,
+        src,
+        mimeType: inferMimeType(src, metadata),
+        byteSize: Number(stat.size || 0),
+        originalByteSize: Number(stat.size || 0),
+        width: Number(metadata.width || 0),
+        height: Number(metadata.height || 0),
+      })
+      summary.backfilled += 1
+    } catch (error) {
+      if (error?.code === 'ENOENT') {
+        summary.missingFiles += 1
+        continue
+      }
+      if (error?.code === 'ER_DUP_ENTRY') {
+        summary.skippedExisting += 1
+        continue
+      }
+      summary.failed += 1
+      console.error('[backfill-legacy-image-assets] failed:', 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/scripts/cleanup-unreferenced-legacy-uploads.js

@@ -0,0 +1,56 @@
+const fs = require('fs/promises')
+const path = require('path')
+const {
+  ensureData,
+  closePool,
+  listReferencedUploadSources,
+} = require('../src/db')
+
+const BACKEND_ROOT = path.join(__dirname, '..')
+const TARGET_DIRS = ['avatars', 'custom', 'topics', 'tierlists']
+
+async function main() {
+  await ensureData()
+
+  const referenced = new Set(await listReferencedUploadSources())
+  const deleted = []
+  const missing = []
+  let scanned = 0
+
+  for (const dir of TARGET_DIRS) {
+    const absoluteDir = path.join(BACKEND_ROOT, 'uploads', dir)
+    let entries = []
+    try {
+      entries = await fs.readdir(absoluteDir, { withFileTypes: true })
+    } catch (error) {
+      if (error?.code === 'ENOENT') continue
+      throw error
+    }
+
+    for (const entry of entries) {
+      if (!entry.isFile()) continue
+      scanned += 1
+      const src = `/uploads/${dir}/${entry.name}`
+      if (referenced.has(src)) continue
+      const absolutePath = path.join(absoluteDir, entry.name)
+      try {
+        await fs.unlink(absolutePath)
+        deleted.push(src)
+      } catch (error) {
+        if (error?.code === 'ENOENT') missing.push(src)
+        else throw error
+      }
+    }
+  }
+
+  console.log(JSON.stringify({ scanned, deletedCount: deleted.length, missingCount: missing.length, deleted, missing }, null, 2))
+}
+
+main()
+  .catch((error) => {
+    console.error(error)
+    process.exitCode = 1
+  })
+  .finally(async () => {
+    await closePool()
+  })

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/scripts/migrate-legacy-uploads-to-assets.js

@@ -0,0 +1,112 @@
+const fs = require('fs/promises')
+const path = require('path')
+const sharp = require('sharp')
+const {
+  ensureData,
+  closePool,
+  listReferencedUploadUsage,
+  replaceUploadSourceReferences,
+} = require('../src/db')
+const { writeOptimizedImage } = require('../src/lib/image-storage')
+
+const BACKEND_ROOT = path.join(__dirname, '..')
+
+function inferMimeType(src, metadata) {
+  const format = String(metadata?.format || '').toLowerCase()
+  if (format === 'jpeg' || format === 'jpg') return 'image/jpeg'
+  if (format === 'png') return 'image/png'
+  if (format === 'gif') return 'image/gif'
+  if (format === 'webp') return 'image/webp'
+  if (format === 'svg' || format === 'svg+xml') return 'image/svg+xml'
+  if (format === 'avif') return 'image/avif'
+
+  const ext = path.extname(src || '').toLowerCase()
+  if (ext === '.jpg' || ext === '.jpeg') return 'image/jpeg'
+  if (ext === '.png') return 'image/png'
+  if (ext === '.gif') return 'image/gif'
+  if (ext === '.webp') return 'image/webp'
+  if (ext === '.svg') return 'image/svg+xml'
+  if (ext === '.avif') return 'image/avif'
+  return 'application/octet-stream'
+}
+
+function getOptimizationConfig(roles) {
+  const roleSet = new Set(roles || [])
+  if (roleSet.has('avatar')) {
+    return { directory: 'avatars', width: 512, height: 512, fit: 'cover', quality: 82 }
+  }
+  if (roleSet.has('topic-thumbnail') || roleSet.has('tierlist-thumbnail') || roleSet.has('template-thumbnail')) {
+    return { directory: 'legacy-thumbnails', width: 1280, height: 1280, fit: 'inside', quality: 84 }
+  }
+  return { directory: 'legacy-items', width: 512, height: 512, fit: 'inside', quality: 84 }
+}
+
+async function createFileLike(src) {
+  const absolutePath = path.join(BACKEND_ROOT, src.replace(/^\//, ''))
+  const [buffer, stat] = await Promise.all([fs.readFile(absolutePath), fs.stat(absolutePath)])
+  let metadata = {}
+  try {
+    metadata = await sharp(buffer, { failOn: 'none' }).metadata()
+  } catch (error) {
+    metadata = {}
+  }
+  return {
+    file: {
+      originalname: path.basename(src),
+      mimetype: inferMimeType(src, metadata),
+      size: Number(stat.size || 0),
+      buffer,
+    },
+    absolutePath,
+  }
+}
+
+async function main() {
+  await ensureData()
+  const usageEntries = await listReferencedUploadUsage()
+  const legacyEntries = usageEntries.filter((entry) => entry.src && entry.src.startsWith('/uploads/') && !entry.src.startsWith('/uploads/assets/'))
+
+  const summary = {
+    scanned: legacyEntries.length,
+    migrated: 0,
+    reusedAsset: 0,
+    unchanged: 0,
+    missingFiles: 0,
+    failed: 0,
+    updatedRows: 0,
+  }
+
+  for (const entry of legacyEntries) {
+    const config = getOptimizationConfig(entry.roles)
+    try {
+      const { file } = await createFileLike(entry.src)
+      const optimized = await writeOptimizedImage({ file, ...config })
+      if (optimized.src === entry.src) {
+        summary.unchanged += 1
+        continue
+      }
+      const replaced = await replaceUploadSourceReferences({ fromSrc: entry.src, toSrc: optimized.src })
+      summary.updatedRows += Number(replaced.updatedRows || 0)
+      if (optimized.reused) summary.reusedAsset += 1
+      else summary.migrated += 1
+    } catch (error) {
+      if (error?.code === 'ENOENT') {
+        summary.missingFiles += 1
+        continue
+      }
+      summary.failed += 1
+      console.error('[migrate-legacy-uploads-to-assets] failed:', entry.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

@@ -0,0 +1,221 @@
+const fs = require('fs/promises')
+const path = require('path')
+const crypto = require('crypto')
+const sharp = require('sharp')
+const { nanoid } = require('nanoid')
+const {
+  findImageAssetByHash,
+  createImageAsset,
+  createImageOptimizationJob,
+  updateImageOptimizationJobStatus,
+} = require('../db')
+
+const UPLOAD_ROOT = path.join(__dirname, '..', '..', 'uploads')
+const OPTIMIZED_DIR = 'assets'
+const OPTIMIZATION_CONCURRENCY = Math.max(1, Number(process.env.IMAGE_OPTIMIZATION_CONCURRENCY || 1))
+
+let activeCount = 0
+const pendingJobs = []
+
+function ensureImageMimeType(file) {
+  return typeof file?.mimetype === 'string' && file.mimetype.startsWith('image/')
+}
+
+function createMemoryUpload(multer, { fileSize = 6 * 1024 * 1024, maxCount } = {}) {
+  return multer({
+    storage: multer.memoryStorage(),
+    limits: {
+      fileSize,
+      ...(typeof maxCount === 'number' ? { files: maxCount } : {}),
+    },
+    fileFilter: (req, file, cb) => {
+      if (ensureImageMimeType(file)) return cb(null, true)
+      cb(new Error('image_file_required'))
+    },
+  })
+}
+
+function scheduleQueue() {
+  while (activeCount < OPTIMIZATION_CONCURRENCY && pendingJobs.length) {
+    const job = pendingJobs.shift()
+    activeCount += 1
+    processQueuedJob(job)
+      .then(job.resolve)
+      .catch(job.reject)
+      .finally(() => {
+        activeCount = Math.max(0, activeCount - 1)
+        scheduleQueue()
+      })
+  }
+}
+
+async function optimizeAndPersist({ file, width, height, fit, quality }) {
+  const { data, info } = await sharp(file.buffer, { failOn: 'none' })
+    .rotate()
+    .resize({
+      width,
+      height,
+      fit,
+      withoutEnlargement: true,
+    })
+    .webp({ quality })
+    .toBuffer({ resolveWithObject: true })
+
+  const contentHash = crypto.createHash('sha256').update(data).digest('hex')
+  const existing = await findImageAssetByHash(contentHash)
+  if (existing) {
+    return {
+      src: existing.src,
+      size: existing.byteSize,
+      originalSize: existing.originalByteSize,
+      width: existing.width,
+      height: existing.height,
+      contentHash: existing.contentHash,
+      reused: true,
+    }
+  }
+
+  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/' + relativeDir.split(path.sep).join('/') + '/' + filename
+
+  await fs.mkdir(absoluteDir, { recursive: true })
+  await fs.writeFile(absolutePath, data)
+
+  try {
+    const asset = await createImageAsset({
+      id: nanoid(),
+      contentHash,
+      src,
+      mimeType: 'image/webp',
+      byteSize: data.length,
+      originalByteSize: file.size || file.buffer.length,
+      width: info.width || 0,
+      height: info.height || 0,
+    })
+
+    return {
+      src: asset.src,
+      size: asset.byteSize,
+      originalSize: asset.originalByteSize,
+      width: asset.width,
+      height: asset.height,
+      contentHash: asset.contentHash,
+      reused: false,
+    }
+  } catch (error) {
+    try {
+      await fs.unlink(absolutePath)
+    } catch (unlinkError) {
+      if (unlinkError?.code !== 'ENOENT') throw unlinkError
+    }
+
+    if (error?.code === 'ER_DUP_ENTRY') {
+      const asset = await findImageAssetByHash(contentHash)
+      if (asset) {
+        return {
+          src: asset.src,
+          size: asset.byteSize,
+          originalSize: asset.originalByteSize,
+          width: asset.width,
+          height: asset.height,
+          contentHash: asset.contentHash,
+          reused: true,
+        }
+      }
+    }
+
+    throw error
+  }
+}
+
+async function processQueuedJob(job) {
+  await updateImageOptimizationJobStatus({
+    id: job.jobId,
+    status: 'processing',
+    startedAt: Date.now(),
+  })
+
+  try {
+    const result = await optimizeAndPersist(job)
+    await updateImageOptimizationJobStatus({
+      id: job.jobId,
+      status: 'completed',
+      optimizedByteSize: result.size,
+      reusedAsset: result.reused,
+      finishedAt: Date.now(),
+    })
+    return result
+  } catch (error) {
+    await updateImageOptimizationJobStatus({
+      id: job.jobId,
+      status: 'failed',
+      errorMessage: error?.message || 'optimization_failed',
+      finishedAt: Date.now(),
+    })
+    throw error
+  }
+}
+
+async function writeOptimizedImage({
+  file,
+  directory,
+  width,
+  height,
+  fit = 'inside',
+  quality = 82,
+}) {
+  if (!file?.buffer?.length) {
+    const error = new Error('file_required')
+    error.code = 'file_required'
+    throw error
+  }
+
+  if (!ensureImageMimeType(file)) {
+    const error = new Error('image_file_required')
+    error.code = 'image_file_required'
+    throw error
+  }
+
+  const jobId = nanoid()
+  await createImageOptimizationJob({
+    id: jobId,
+    sourceCategory: directory,
+    targetDirectory: OPTIMIZED_DIR,
+    originalByteSize: file.size || file.buffer.length,
+  })
+
+  return new Promise((resolve, reject) => {
+    pendingJobs.push({
+      jobId,
+      file,
+      directory,
+      width,
+      height,
+      fit,
+      quality,
+      resolve: (result) => resolve({ ...result, directory }),
+      reject,
+    })
+    scheduleQueue()
+  })
+}
+
+function getImageOptimizationQueueState() {
+  return {
+    concurrency: OPTIMIZATION_CONCURRENCY,
+    activeCount,
+    pendingCount: pendingJobs.length,
+  }
+}
+
+module.exports = {
+  createMemoryUpload,
+  ensureImageMimeType,
+  writeOptimizedImage,
+  getImageOptimizationQueueState,
+}

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

@@ -0,0 +1,48 @@
+const RESERVED_NICKNAME_KEYWORDS = [
+  'admin',
+  'administrator',
+  'operator',
+  'owner',
+  'master',
+  'staff',
+  'system',
+  'root',
+  'support',
+  'manager',
+  'mod',
+  'moderator',
+  'official',
+  'service',
+  'team',
+  'zenn',
+  '운영자',
+  '관리자',
+  '오너',
+  '마스터',
+  '스태프',
+  '시스템',
+  '루트',
+  '서포트',
+  '매니저',
+  '모더레이터',
+  '공식',
+]
+
+function normalizeNickname(value) {
+  return String(value || '')
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '')
+}
+
+function isReservedNickname(value) {
+  const normalized = normalizeNickname(value)
+  if (!normalized) return false
+  return RESERVED_NICKNAME_KEYWORDS.some((keyword) => normalized.includes(normalizeNickname(keyword)))
+}
+
+module.exports = {
+  RESERVED_NICKNAME_KEYWORDS,
+  normalizeNickname,
+  isReservedNickname,
+}

backend/src/routes/auth.js

@@ -1,54 +1,257 @@
 const express = require('express')
-const path = require('path')
 const bcrypt = require('bcryptjs')
+const crypto = require('crypto')
 const { z } = require('zod')
 const { nanoid } = require('nanoid')
 const multer = require('multer')
 const {
   countUsers,
   findUserByEmail,
+  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
 
-function buildUploadFilename(file) {
-  const ext = path.extname(file.originalname || '').toLowerCase()
-  const safeExt = ext && /^[.a-z0-9]+$/.test(ext) ? ext : ''
-  return `${Date.now()}-${nanoid()}${safeExt}`
+function resolveNicknameChangeIntervalMs() {
+  const rawHours = String(process.env.NICKNAME_CHANGE_INTERVAL_HOURS || '').trim()
+  if (rawHours) {
+    const parsed = Number(rawHours)
+    if (Number.isFinite(parsed) && parsed >= 0) return parsed * 60 * 60 * 1000
+  }
+
+  const rawDays = String(process.env.NICKNAME_CHANGE_INTERVAL_DAYS || '').trim()
+  if (rawDays) {
+    const parsed = Number(rawDays)
+    if (Number.isFinite(parsed) && parsed >= 0) return parsed * 24 * 60 * 60 * 1000
+  }
+
+  return 0
+}
+
+function formatNicknameChangeIntervalLabel(intervalMs) {
+  if (!intervalMs || intervalMs <= 0) return '제한 없음'
+  const oneDayMs = 24 * 60 * 60 * 1000
+  const wholeDays = intervalMs / oneDayMs
+  if (Number.isInteger(wholeDays) && wholeDays >= 7 && wholeDays % 7 === 0) {
+    return `${wholeDays / 7}주`
+  }
+  if (Number.isInteger(wholeDays)) {
+    return `${wholeDays}일`
+  }
+  return `${Math.ceil(wholeDays)}일`
 }
 
 const signupSchema = z.object({
   email: z.string().email(),
+  nickname: z.string().trim().min(2).max(40),
   password: z.string().min(6),
 })
 
-const profileSchema = z.object({
-  nickname: z.string().trim().min(1).max(40),
+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(2).max(40),
+  removeAvatar: z.union([z.string(), z.undefined()]).optional(),
+})
+
+function establishSession(req, user) {
+  return new Promise((resolve, reject) => {
+    req.session.regenerate((regenerateError) => {
+      if (regenerateError) return reject(regenerateError)
+      req.session.userId = user.id
+      req.session.isAdmin = !!user.isAdmin
+      req.session.save((saveError) => {
+        if (saveError) return reject(saveError)
+        resolve()
+      })
+    })
+  })
+}
+
+async function serializeUser(user) {
+  if (!user) return null
+  const primaryAdmin = await findPrimaryAdminUser()
+  const isPrimaryAdmin = !!user.isAdmin && primaryAdmin?.id === user.id
+  const nicknameChangeIntervalMs = resolveNicknameChangeIntervalMs()
+  const nicknameChangeAvailableAt = nicknameChangeIntervalMs > 0 ? (user.nicknameUpdatedAt || 0) + nicknameChangeIntervalMs : 0
+
+  return {
+    id: user.id,
+    email: user.email,
+    nickname: user.nickname || '',
+    nicknameUpdatedAt: user.nicknameUpdatedAt || 0,
+    nicknameChangeAvailableAt,
+    nicknameChangeIntervalMs,
+    nicknameChangeIntervalLabel: formatNicknameChangeIntervalLabel(nicknameChangeIntervalMs),
+    isAdmin: !!user.isAdmin,
+    isPrimaryAdmin,
+    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' })
 
-  const { email, password } = parsed.data
+  const { email, nickname, password } = parsed.data
   const exists = await findUserByEmail(email)
   if (exists) return res.status(409).json({ error: 'email_taken' })
+  if (isReservedNickname(nickname)) return res.status(400).json({ error: 'nickname_reserved' })
+  const nicknameExists = await findUserByNickname(nickname)
+  if (nicknameExists) return res.status(409).json({ error: 'nickname_taken' })
 
   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' })
+  }
 
-  req.session.userId = user.id
-  req.session.isAdmin = !!user.isAdmin
-  res.json(user)
+  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)
+    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' })
+  }
 })
 
 router.post('/login', async (req, res) => {
-  const parsed = signupSchema.safeParse(req.body)
+  const parsed = z.object({
+    email: z.string().email(),
+    password: z.string().min(6),
+  }).safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
 
   const { email, password } = parsed.data
@@ -57,17 +260,15 @@ 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 })
 
-  req.session.userId = user.id
-  req.session.isAdmin = !!user.isAdmin
-  res.json({
-    id: user.id,
-    email: user.email,
-    nickname: user.nickname || '',
-    isAdmin: !!user.isAdmin,
-    avatarSrc: user.avatarSrc || '',
-    createdAt: user.createdAt,
-  })
+  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('/logout', async (req, res) => {
@@ -77,38 +278,159 @@ 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 })
+  res.json({ user: await serializeUser(user) })
 })
 
 router.get('/meta', async (req, res) => {
   res.json({ hasUsers: (await countUsers()) > 0 })
 })
 
-const upload = multer({
-  storage: multer.diskStorage({
-    destination: (req, file, cb) => cb(null, path.join(__dirname, '..', '..', 'uploads', 'avatars')),
-    filename: (req, file, cb) => cb(null, buildUploadFilename(file)),
-  }),
-  limits: { fileSize: 3 * 1024 * 1024 },
+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) => {
   const parsed = profileSchema.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 normalizedNickname = parsed.data.nickname.trim()
+  const nicknameChanged = normalizedNickname !== (user.nickname || '').trim()
+  const nicknameChangeIntervalMs = resolveNicknameChangeIntervalMs()
 
-  const nextAvatarSrc = req.file ? `/uploads/avatars/${req.file.filename}` : user.avatarSrc || ''
+  if (isReservedNickname(normalizedNickname)) return res.status(400).json({ error: 'nickname_reserved' })
+  if (nicknameChanged && nicknameChangeIntervalMs > 0 && user.nicknameUpdatedAt && Date.now() < user.nicknameUpdatedAt + nicknameChangeIntervalMs) {
+    return res.status(429).json({
+      error: 'nickname_change_locked',
+      nicknameChangeAvailableAt: user.nicknameUpdatedAt + nicknameChangeIntervalMs,
+      nicknameChangeIntervalMs,
+      nicknameChangeIntervalLabel: formatNicknameChangeIntervalLabel(nicknameChangeIntervalMs),
+    })
+  }
+
+  const nicknameExists = await findUserByNickname(normalizedNickname, user.id)
+  if (nicknameExists) return res.status(409).json({ error: 'nickname_taken' })
+
+  const optimized = req.file
+    ? await writeOptimizedImage({
+        file: req.file,
+        directory: 'avatars',
+        width: 512,
+        height: 512,
+        fit: 'cover',
+        quality: 82,
+      })
+    : null
+
+  const shouldRemoveAvatar = parsed.data.removeAvatar === '1'
+  const nextAvatarSrc = shouldRemoveAvatar ? '' : optimized?.src || user.avatarSrc || ''
   const updated = await updateUserProfile({
     id: user.id,
-    nickname: parsed.data.nickname,
+    nickname: normalizedNickname,
     avatarSrc: nextAvatarSrc,
+    touchNicknameUpdatedAt: nicknameChanged,
   })
 
-  res.json({ user: updated })
+  res.json({ user: await serializeUser(updated) })
 })
 
 module.exports = router

backend/src/routes/comments.js

@@ -0,0 +1,49 @@
+const express = require('express')
+const { z } = require('zod')
+const {
+  listCommentNotifications,
+  countUnreadCommentNotifications,
+  markCommentNotificationsRead,
+} = require('../db')
+const { requireAuth } = require('../middleware/auth')
+
+const router = express.Router()
+
+router.get('/inbox', requireAuth, async (req, res) => {
+  const schema = z.object({
+    unreadOnly: z
+      .union([z.literal('1'), z.literal('0'), z.literal('true'), z.literal('false')])
+      .optional()
+      .default('0'),
+  })
+  const parsed = schema.safeParse(req.query)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const unreadOnly = ['1', 'true'].includes(parsed.data.unreadOnly)
+  const notifications = await listCommentNotifications(req.session.userId, { unreadOnly })
+  res.json({ notifications })
+})
+
+router.get('/inbox/unread-count', requireAuth, async (req, res) => {
+  const unreadCount = await countUnreadCommentNotifications(req.session.userId)
+  res.json({ unreadCount })
+})
+
+router.post('/inbox/read', requireAuth, async (req, res) => {
+  const schema = z.object({
+    all: z.boolean().optional().default(false),
+    notificationIds: z.array(z.string().min(1).max(64)).max(100).optional().default([]),
+  })
+  const parsed = schema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  await markCommentNotificationsRead(req.session.userId, {
+    all: parsed.data.all,
+    notificationIds: parsed.data.notificationIds,
+  })
+
+  const unreadCount = await countUnreadCommentNotifications(req.session.userId)
+  res.json({ ok: true, unreadCount })
+})
+
+module.exports = router

backend/src/routes/games.js

@@ -1,17 +0,0 @@
-const express = require('express')
-const { listGames, getGameDetail } = require('../db')
-
-const router = express.Router()
-
-router.get('/', async (req, res) => {
-  const games = await listGames()
-  res.json({ games })
-})
-
-router.get('/:gameId', async (req, res) => {
-  const detail = await getGameDetail(req.params.gameId)
-  if (!detail) return res.status(404).json({ error: 'not_found' })
-  res.json({ game: detail.game, items: detail.items })
-})
-
-module.exports = router

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

@@ -1,22 +1,36 @@
 const express = require('express')
-const path = require('path')
 const multer = require('multer')
 const { z } = require('zod')
 const { nanoid } = require('nanoid')
 const {
   findTierListById,
   listPublicTierLists,
+  listFavoriteTierLists,
   listUserTierLists,
   deleteTierList,
   saveTierList,
   createCustomItem,
+  createTemplateRequest,
+  findUserById,
+  findTopicByIdentifier,
+  favoriteTierList,
+  unfavoriteTierList,
+  duplicateTierListForUser,
+  listTierListComments,
+  findTierListCommentById,
+  createTierListComment,
+  deleteTierListComment,
+  createCommentNotificationsForComment,
 } = require('../db')
 const { requireAuth } = require('../middleware/auth')
+const { createMemoryUpload, writeOptimizedImage } = require('../lib/image-storage')
 
 const router = express.Router()
+const FREEFORM_TOPIC_ID = 'freeform'
+const FREEFORM_DEFAULT_TITLE = '직접 티어표 만들기'
 
 function normalizePoolItem(item) {
-  if (!item || item.origin !== 'game' || typeof item.src !== 'string') return item
+  if (!item || item.origin !== 'template' || typeof item.src !== 'string') return item
   if (item.src.startsWith('/uploads/')) return item
 
   try {
@@ -38,47 +52,102 @@ function normalizeTierList(tierList) {
   }
 }
 
-function buildUploadFilename(file) {
-  const ext = path.extname(file.originalname || '').toLowerCase()
-  const safeExt = ext && /^[.a-z0-9]+$/.test(ext) ? ext : ''
-  return `${Date.now()}-${nanoid()}${safeExt}`
+function getCustomTemplateItems(tierList) {
+  const seen = new Set()
+  return (tierList?.pool || []).filter((item) => {
+    if (!item?.id || item.origin !== 'custom' || seen.has(item.id)) return false
+    seen.add(item.id)
+    return true
+  })
 }
 
-const upload = multer({
-  storage: multer.diskStorage({
-    destination: (req, file, cb) => cb(null, path.join(__dirname, '..', '..', 'uploads', 'custom')),
-    filename: (req, file, cb) => cb(null, buildUploadFilename(file)),
-  }),
-  limits: { fileSize: 6 * 1024 * 1024 },
-})
+const upload = createMemoryUpload(multer, { fileSize: 6 * 1024 * 1024 })
+const thumbnailUpload = createMemoryUpload(multer, { fileSize: 8 * 1024 * 1024 })
 
-const tierListUpsertSchema = z.object({
-  id: z.string().optional(),
-  gameId: z.string().min(1),
-  title: z.string().min(1).max(120),
-  description: z.string().max(1000).optional().default(''),
-  isPublic: z.boolean().default(false),
+const templateRequestSchema = z.object({
+  type: z.enum(['create', 'update']),
+  sourceTierListId: z.string().max(64).optional().default(''),
+  topicId: z.string().min(1).max(120).optional(),
+  requestTitle: z.string().trim().min(1).max(120),
+  requestDescription: z.string().trim().min(1).max(1000),
+  thumbnailSrc: z.string().max(255).optional().default(''),
+  isPublic: z.boolean().optional().default(false),
+  showCharacterNames: z.boolean().optional().default(false),
   groups: z.array(
     z.object({
       id: z.string().min(1),
       name: z.string().min(1).max(16),
-      itemIds: z.array(z.string()),
+      itemIds: z.array(z.string()).optional().default([]),
+}).passthrough().superRefine((value, ctx) => {
+  if (!value.topicId) {
+    ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'topicId_required', path: ['topicId'] })
+  }
+})
+  ),
+  boardItems: z.array(
+    z.object({
+      id: z.string().min(1),
+      src: z.string().min(1),
+      label: z.string().min(1).max(60),
+      origin: z.enum(['template', 'custom']).default('template'),
     })
   ),
+})
+
+const tierListUpsertSchema = z.object({
+  id: z.string().optional(),
+  topicId: z.string().min(1).optional(),
+  title: z.string().min(1).max(120),
+  thumbnailSrc: z.string().max(255).optional().default(''),
+  description: z.string().max(1000).optional().default(''),
+  isPublic: z.boolean().default(false),
+  showCharacterNames: z.boolean().optional().default(false),
+  iconSize: z.number().int().min(48).max(112).optional().default(80),
+  sourceTierListId: z.string().max(64).optional().default(''),
+  sourceSnapshotTitle: z.string().max(120).optional().default(''),
+  sourceSnapshotAuthor: z.string().max(120).optional().default(''),
+  groups: z.array(
+    z.object({
+      id: z.string().min(1),
+      name: z.string().min(1).max(16),
+      itemIds: z.array(z.string()).optional().default([]),
+    }).passthrough()
+  ),
   pool: z.array(
     z.object({
       id: z.string().min(1),
       src: z.string().min(1),
       label: z.string().min(1).max(60),
-      origin: z.enum(['game', 'custom']).default('game'),
+      origin: z.enum(['template', 'custom']).default('template'),
     })
   ),
+}).superRefine((value, ctx) => {
+  if (!value.topicId) {
+    ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'topicId_required', path: ['topicId'] })
+  }
 })
 
+const tierListCommentSchema = z.object({
+  content: z.string().trim().min(1).max(2000),
+  parentCommentId: z.string().trim().max(64).optional().default(''),
+})
+
+async function getTierListAccessContext(req, tierListId) {
+  const tierList = await findTierListById(tierListId, req.session?.userId || '')
+  if (!tierList) return { error: 'not_found' }
+  if (tierList.isPublic) return { tierList, canRead: true, canEdit: req.session?.userId === tierList.authorId }
+  if (!req.session?.userId) return { error: 'forbidden' }
+  if (req.session.userId === tierList.authorId) return { tierList, canRead: true, canEdit: true }
+  const currentUser = await findUserById(req.session.userId)
+  if (!currentUser?.isAdmin) return { error: 'forbidden' }
+  return { tierList, canRead: true, canEdit: true, isAdmin: true }
+}
+
 router.get('/public', async (req, res) => {
-  const gameId = req.query.gameId
-  const lists = await listPublicTierLists(gameId)
-  res.json({ tierLists: lists })
+  const topicId = typeof req.query.topicId === 'string' ? req.query.topicId : ''
+  const queryText = typeof req.query.q === 'string' ? req.query.q : ''
+  const result = await listPublicTierLists(topicId, req.session?.userId || '', queryText)
+  res.json(result)
 })
 
 router.get('/me', requireAuth, async (req, res) => {
@@ -86,17 +155,31 @@ router.get('/me', requireAuth, async (req, res) => {
   res.json({ tierLists: lists })
 })
 
+router.get('/favorites/me', requireAuth, async (req, res) => {
+  const queryText = typeof req.query.q === 'string' ? req.query.q : ''
+  const sort = typeof req.query.sort === 'string' ? req.query.sort : 'favorited'
+  const lists = await listFavoriteTierLists(req.session.userId, { queryText, sort })
+  res.json({ tierLists: lists })
+})
+
 router.get('/:id', async (req, res) => {
-  const t = await findTierListById(req.params.id)
-  if (!t) return res.status(404).json({ error: 'not_found' })
-  if (!t.isPublic) {
-    if (!req.session || req.session.userId !== t.authorId) return res.status(403).json({ error: 'forbidden' })
-  }
-  res.json({ tierList: normalizeTierList(t) })
+  const access = await getTierListAccessContext(req, req.params.id)
+  if (access.error === 'not_found') return res.status(404).json({ error: 'not_found' })
+  if (access.error === 'forbidden') return res.status(403).json({ error: 'forbidden' })
+  res.json({ tierList: normalizeTierList(access.tierList) })
+})
+
+router.post('/:id/duplicate', requireAuth, async (req, res) => {
+  const tierList = await findTierListById(req.params.id, req.session.userId)
+  if (!tierList) return res.status(404).json({ error: 'not_found' })
+  if (!tierList.isPublic && tierList.authorId !== req.session.userId) return res.status(403).json({ error: 'forbidden' })
+
+  const duplicated = await duplicateTierListForUser({ tierList, targetUserId: req.session.userId })
+  res.json({ tierList: normalizeTierList(duplicated) })
 })
 
 router.delete('/:id', requireAuth, async (req, res) => {
-  const tierList = await findTierListById(req.params.id)
+  const tierList = await findTierListById(req.params.id, req.session.userId)
   if (!tierList) return res.status(404).json({ error: 'not_found' })
   if (tierList.authorId !== req.session.userId) return res.status(403).json({ error: 'forbidden' })
 
@@ -104,6 +187,81 @@ router.delete('/:id', requireAuth, async (req, res) => {
   res.json({ ok: true })
 })
 
+router.post('/:id/favorite', requireAuth, async (req, res) => {
+  const tierList = await findTierListById(req.params.id, req.session.userId)
+  if (!tierList) return res.status(404).json({ error: 'not_found' })
+  if (!tierList.isPublic && tierList.authorId !== req.session.userId) return res.status(403).json({ error: 'forbidden' })
+
+  await favoriteTierList({ userId: req.session.userId, tierListId: tierList.id })
+  const updated = await findTierListById(tierList.id, req.session.userId)
+  res.json({ tierList: normalizeTierList(updated) })
+})
+
+router.delete('/:id/favorite', requireAuth, async (req, res) => {
+  const tierList = await findTierListById(req.params.id, req.session.userId)
+  if (!tierList) return res.status(404).json({ error: 'not_found' })
+
+  await unfavoriteTierList({ userId: req.session.userId, tierListId: tierList.id })
+  const updated = await findTierListById(tierList.id, req.session.userId)
+  res.json({ tierList: normalizeTierList(updated) })
+})
+
+router.get('/:id/comments', async (req, res) => {
+  const access = await getTierListAccessContext(req, req.params.id)
+  if (access.error === 'not_found') return res.status(404).json({ error: 'not_found' })
+  if (access.error === 'forbidden') return res.status(403).json({ error: 'forbidden' })
+
+  const comments = await listTierListComments(access.tierList.id)
+  res.json({ comments })
+})
+
+router.post('/:id/comments', requireAuth, async (req, res) => {
+  const parsed = tierListCommentSchema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const access = await getTierListAccessContext(req, req.params.id)
+  if (access.error === 'not_found') return res.status(404).json({ error: 'not_found' })
+  if (access.error === 'forbidden') return res.status(403).json({ error: 'forbidden' })
+
+  try {
+    const commentId = await createTierListComment({
+      tierListId: access.tierList.id,
+      authorId: req.session.userId,
+      parentCommentId: parsed.data.parentCommentId,
+      content: parsed.data.content,
+    })
+    await createCommentNotificationsForComment(commentId)
+    const comments = await listTierListComments(access.tierList.id)
+    res.json({ comments, createdCommentId: commentId })
+  } catch (error) {
+    if (error?.code === 'COMMENT_PARENT_INVALID') {
+      return res.status(400).json({ error: 'comment_parent_invalid' })
+    }
+    if (error?.code === 'COMMENT_REPLY_DEPTH_INVALID') {
+      return res.status(400).json({ error: 'comment_reply_depth_invalid' })
+    }
+    throw error
+  }
+})
+
+router.delete('/:id/comments/:commentId', requireAuth, async (req, res) => {
+  const access = await getTierListAccessContext(req, req.params.id)
+  if (access.error === 'not_found') return res.status(404).json({ error: 'not_found' })
+  if (access.error === 'forbidden') return res.status(403).json({ error: 'forbidden' })
+
+  const comment = await findTierListCommentById(req.params.commentId)
+  if (!comment || comment.tierListId !== access.tierList.id) return res.status(404).json({ error: 'not_found' })
+
+  const currentUser = req.session.userId === comment.authorId ? { isAdmin: false } : await findUserById(req.session.userId)
+  if (req.session.userId !== comment.authorId && !currentUser?.isAdmin) {
+    return res.status(403).json({ error: 'forbidden' })
+  }
+
+  await deleteTierListComment(comment.id)
+  const comments = await listTierListComments(access.tierList.id)
+  res.json({ comments })
+})
+
 router.post('/custom-items', requireAuth, upload.single('image'), async (req, res) => {
   if (!req.file) return res.status(400).json({ error: 'file_required' })
 
@@ -111,20 +269,97 @@ router.post('/custom-items', requireAuth, upload.single('image'), async (req, re
   const parsed = schema.safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
 
+  const optimized = await writeOptimizedImage({
+    file: req.file,
+    directory: 'custom',
+    width: 512,
+    height: 512,
+    fit: 'inside',
+    quality: 84,
+  })
+
   const item = await createCustomItem({
     id: nanoid(),
     ownerId: req.session.userId,
-    src: `/uploads/custom/${req.file.filename}`,
+    src: optimized.src,
     label: parsed.data.label,
   })
 
   res.json({ item })
 })
 
+router.post('/thumbnail', requireAuth, thumbnailUpload.single('thumbnail'), async (req, res) => {
+  if (!req.file) return res.status(400).json({ error: 'file_required' })
+
+  const optimized = await writeOptimizedImage({
+    file: req.file,
+    directory: 'tierlists',
+    width: 1280,
+    height: 1280,
+    fit: 'inside',
+    quality: 84,
+  })
+
+  res.json({ thumbnailSrc: optimized.src })
+})
+
+router.post('/template-request', requireAuth, async (req, res) => {
+  const parsed = templateRequestSchema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const payload = parsed.data
+  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 (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' })
+  }
+
+  let sourceTierList = null
+  if (payload.sourceTierListId) {
+    sourceTierList = await findTierListById(payload.sourceTierListId, req.session.userId)
+    if (!sourceTierList) return res.status(404).json({ error: 'not_found' })
+    if (sourceTierList.authorId !== req.session.userId) return res.status(403).json({ error: 'forbidden' })
+  }
+
+  if (!payload.sourceTierListId) return res.status(400).json({ error: 'source_tierlist_required' })
+
+  try {
+    const request = await createTemplateRequest({
+      id: nanoid(),
+      type: payload.type,
+      requesterId: req.session.userId,
+      sourceTierListId: sourceTierList?.id || '',
+      sourceTopicId: topic.id,
+      targetTopicId: payload.type === 'update' ? topic.id : '',
+      title: payload.requestTitle,
+      description: payload.requestDescription,
+      thumbnailSrc: payload.thumbnailSrc || '',
+      items: customItems,
+      groups: payload.groups,
+      boardItems: normalizedBoardItems,
+      showCharacterNames: !!payload.showCharacterNames,
+    })
+    return res.json({ request })
+  } catch (e) {
+    if (e?.code === 'TEMPLATE_REQUEST_EXISTS') {
+      return res.status(409).json({ error: 'template_request_exists' })
+    }
+    throw e
+  }
+})
+
 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 topic = await findTopicByIdentifier(payload.topicId)
+  if (!topic) return res.status(404).json({ error: 'not_found' })
   const normalizedPool = payload.pool.map(normalizePoolItem)
 
   let existing = null
@@ -135,10 +370,16 @@ router.post('/', requireAuth, async (req, res) => {
     const updated = await saveTierList({
       id: existing.id,
       authorId: existing.authorId,
-      gameId: existing.gameId,
+      topicId: existing.topicId,
       title: payload.title,
+      thumbnailSrc: payload.thumbnailSrc || '',
       description: payload.description || '',
       isPublic: !!payload.isPublic,
+      showCharacterNames: !!payload.showCharacterNames,
+      iconSize: Number(payload.iconSize || 80),
+      sourceTierListId: payload.sourceTierListId || existing.sourceTierListId || '',
+      sourceSnapshotTitle: payload.sourceSnapshotTitle || existing.sourceSnapshotTitle || '',
+      sourceSnapshotAuthor: payload.sourceSnapshotAuthor || existing.sourceSnapshotAuthor || '',
       groups: payload.groups,
       pool: normalizedPool,
     })
@@ -148,10 +389,16 @@ router.post('/', requireAuth, async (req, res) => {
   const created = await saveTierList({
     id: nanoid(),
     authorId: req.session.userId,
-    gameId: payload.gameId,
+    topicId: topic.id,
     title: payload.title,
+    thumbnailSrc: payload.thumbnailSrc || '',
     description: payload.description || '',
     isPublic: !!payload.isPublic,
+    showCharacterNames: !!payload.showCharacterNames,
+    iconSize: Number(payload.iconSize || 80),
+    sourceTierListId: payload.sourceTierListId || '',
+    sourceSnapshotTitle: payload.sourceSnapshotTitle || '',
+    sourceSnapshotAuthor: payload.sourceSnapshotAuthor || '',
     groups: payload.groups,
     pool: normalizedPool,
   })

backend/src/routes/topics.js

@@ -0,0 +1,37 @@
+const express = require('express')
+const { listTopics, getTopicDetail, findTopicByIdentifier, favoriteTopic, unfavoriteTopic } = require('../db')
+const { requireAuth } = require('../middleware/auth')
+
+const router = express.Router()
+
+router.get('/', async (req, res) => {
+  const topics = await listTopics(req.session?.userId || '', { includePrivate: false })
+  res.json({ topics })
+})
+
+router.post('/:topicId/favorite', requireAuth, async (req, res) => {
+  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)
+  const updated = topics.find((entry) => entry.id === topic.id) || { ...topic, isFavorited: true }
+  res.json({ topic: updated })
+})
+
+router.delete('/:topicId/favorite', requireAuth, async (req, res) => {
+  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)
+  const updated = topics.find((entry) => entry.id === topic.id) || { ...topic, isFavorited: false }
+  res.json({ topic: updated })
+})
+
+router.get('/:topicId', async (req, res) => {
+  const detail = await getTopicDetail(req.params.topicId)
+  if (!detail) return res.status(404).json({ error: 'not_found' })
+  if (!detail.topic.isPublic && !req.session?.isAdmin) return res.status(404).json({ error: 'not_found' })
+  res.json({ topic: detail.topic, items: detail.items })
+})
+
+module.exports = router

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

@@ -0,0 +1,87 @@
+services:
+  mariadb:
+    image: mariadb:11.4
+    container_name: tmaker-mariadb
+    restart: unless-stopped
+    environment:
+      MARIADB_ROOT_PASSWORD: ${MARIADB_ROOT_PASSWORD}
+      MARIADB_DATABASE: ${MARIADB_DATABASE}
+      MARIADB_USER: ${MARIADB_USER}
+      MARIADB_PASSWORD: ${MARIADB_PASSWORD}
+    command:
+      - --character-set-server=utf8mb4
+      - --collation-server=utf8mb4_unicode_ci
+    volumes:
+      - tmaker_mariadb_data:/var/lib/mysql
+    healthcheck:
+      test: ["CMD-SHELL", "mariadb-admin ping -h 127.0.0.1 -uroot -p$$MARIADB_ROOT_PASSWORD --silent"]
+      start_period: 150s
+      interval: 10s
+      timeout: 5s
+      retries: 20
+
+  backend:
+    build:
+      context: .
+      dockerfile: backend/Dockerfile
+    container_name: tmaker-backend
+    restart: unless-stopped
+    depends_on:
+      mariadb:
+        condition: service_healthy
+    environment:
+      PORT: 5179
+      DB_HOST: mariadb
+      DB_PORT: 3306
+      DB_USER: ${MARIADB_USER}
+      DB_PASSWORD: ${MARIADB_PASSWORD}
+      DB_NAME: ${MARIADB_DATABASE}
+      SESSION_SECRET: ${SESSION_SECRET}
+      SESSION_COOKIE_SECURE: "true"
+      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
+
+  frontend:
+    build:
+      context: .
+      dockerfile: frontend/Dockerfile
+      args:
+        VITE_API_ORIGIN: https://tmaker.sori.studio
+    container_name: tmaker-frontend
+    restart: unless-stopped
+    depends_on:
+      - backend
+    ports:
+      - "18080:80"
+
+  phpmyadmin:
+    image: phpmyadmin:5.2-apache
+    container_name: tmaker-phpmyadmin
+    restart: unless-stopped
+    profiles: ["admin"]
+    depends_on:
+      mariadb:
+        condition: service_healthy
+    environment:
+      PMA_HOST: mariadb
+      PMA_PORT: 3306
+      PMA_USER: ${MARIADB_USER}
+      PMA_PASSWORD: ${MARIADB_PASSWORD}
+    ports:
+      - "18081:80"
+
+volumes:
+  tmaker_mariadb_data:
+  tmaker_uploads:
+  tmaker_sessions:

docs/convention.md

@@ -13,6 +13,9 @@
 - API 호출은 `frontend/src/lib/api.js` 또는 런타임 유틸을 통해 통합한다.
 - 정적 파일 URL 조합은 `toApiUrl()`로 처리한다.
 - 화면 상태는 `ref`, `computed`, `onMounted` 중심의 단순한 Composition API 패턴을 유지한다.
+- 설정/계정처럼 자주 바꾸지 않는 정보는 상시 입력 폼보다 `현재 상태 요약 + 필요 시 모달 편집` 흐름을 우선한다.
+- 모달이 배경 화면 위에 떠 있고 모달 내부 선택이 주 작업인 경우, 열림 상태 동안 `body` 스크롤 잠금을 함께 적용해 뒤쪽 화면 위치가 바뀌지 않게 한다.
+- 정렬 가능한 카드 목록을 버튼으로도 재정렬할 때는 즉시 재렌더링으로 깜빡이게 두지 않고, `TransitionGroup` move 전환 등으로 위치 이동을 부드럽게 표현한다.
 
 ## 백엔드
 - 라우트 검증은 `zod`로 처리한다.

docs/map.md

@@ -2,49 +2,84 @@
 
 ## `/`
 - 화면 파일: `frontend/src/views/HomeView.vue`
-- 역할: 게임 목록 표시, 게임 카드 클릭 이동, `직접 티어표 만들기` 진입
-- 연동 API: `GET /api/games`
+- 역할: 공개 티어표 홈 피드, 상단 `추천 티어표`와 아래 `최신 공개 티어표` 목록을 같은 카드 문법으로 표시, 검색어(`q`)가 있으면 공개 티어표 제목/작성자 기준으로 필터링, 상단 공통 `viewToggle`로 카드형/리스트형 전환, 카드 클릭 시 해당 티어표 화면으로 이동
+- 연동 API: `GET /api/tierlists/public?q=...`
 
-## `/games/:gameId`
-- 화면 파일: `frontend/src/views/GameHubView.vue`
-- 역할: 선택한 게임 정보 표시, 공개 티어표 목록 표시, 작성자 닉네임 노출, 새 티어표 작성 진입
-- 연동 API: `GET /api/games/:gameId`, `GET /api/tierlists/public`
+## `/templates`
+- 화면 파일: `frontend/src/views/TemplatesView.vue`
+- 역할: 공개 템플릿 전용 목록, 관리자 수동 순서와 즐겨찾기 여부를 반영한 주제 템플릿 카드 목록 표시, 템플릿 즐겨찾기 토글, 왼쪽 공통 검색창의 검색어(`q`)가 있으면 템플릿 이름/slug 기준으로 즉시 필터링, 상단 공통 `viewToggle`로 카드형/리스트형 전환
+- 연동 API: `GET /api/topics`, `POST /api/topics/:topicId/favorite`, `DELETE /api/topics/:topicId/favorite`
 
-## `/editor/:gameId/new`, `/editor/:gameId/:tierListId`
+## `/topics/:topicId`
+- 화면 파일: `frontend/src/views/TopicHubView.vue`
+- 역할: 선택한 주제 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 다운로드
-- 연동 API: `GET /api/games/:gameId`, `GET /api/tierlists/:id`, `POST /api/tierlists/custom-items`, `POST /api/tierlists`
+- 역할: 주제 slug 기반 에디터 진입, 티어 그룹 편집, 티어 행 추가/삭제, 보드 옆 아이템 풀에서 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 아이템 클릭 선택 후 셀/풀 재배치, 아이템 우클릭 메뉴 기반 복제본 생성, 헤더는 공통 `pageHead` 문법을 따르며 편집 가능 상태에서는 `NEW/EDIT + 템플릿 이름 + 작업 가이드`, 보기 전용 상태에서는 `템플릿 이름 + 티어표 제목 + 설명` 구조를 사용하고 아이브로우 클릭 시 해당 주제 허브로 이동하며 별도 `Preview` 아이브로우는 두지 않음, 공통 오른쪽 레일 안에 직접 배치되는 우측 편집 섹션에서 티어표 제목/설명/대표 썸네일/공개 여부/저장 제어와 커스텀 아이템 이름 정리, 읽기 전용 상태의 즐겨찾기 단독 CTA, PNG 다운로드, 저장된 티어표 기준 템플릿 등록/업데이트 요청, 댓글 카드 표시, 데이터가 준비되기 전에는 편집 모드/프리뷰 모드 모두 전용 스켈레톤 레이아웃을 먼저 보여주고, 저장용 랜덤 제목이나 내부 ID는 화면 표시용 제목으로 직접 노출하지 않으며, 스켈레톤이 내려간 뒤 실제 보드/풀 DOM에서만 드래그 초기화를 실행하고, `?preview=1` 진입 시 공통 앱 셸은 유지한 채 중앙 본문에서 완성본 프리뷰와 하단 댓글 카드를 렌더링하며, 우측 뷰어 카드(`공유 티어표 보기`)는 스폰서 카드 바로 아래에서 유지하고 즐겨찾기 CTA도 함께 노출
+- 연동 API: `GET /api/topics/:topicId`, `GET /api/tierlists/:id`, `GET /api/tierlists/:id/comments`, `POST /api/tierlists/:id/comments`, `DELETE /api/tierlists/:id/comments/:commentId`, `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`
+
+## `/comments`
+- 화면 파일: `frontend/src/views/CommentInboxView.vue`
+- 역할: 내 티어표에 달린 댓글과 내 댓글에 달린 답글을 시간순 카드로 확인, 기본값이 켜진 `안 읽은 댓글만 보기` 필터, 모두 읽음 처리, 카드별 red dot 표시, 좌측 `썸네일/티어표 제목/템플릿 이름`과 우측 `루트 댓글/새 댓글 또는 답글` 비교 구조 제공, 카드 상단 `읽음 처리` 버튼, 카드 클릭 시 해당 티어표의 특정 댓글 위치로 이동
+- 연동 API: `GET /api/comments/inbox`, `GET /api/comments/inbox/unread-count`, `POST /api/comments/inbox/read`
 
 ## `/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`
-- 역할: 내 티어표 목록 조회, 편집 화면으로 이동, 작성자 본인 티어표 삭제
+- 역할: 내 티어표 목록 조회, 왼쪽 공통 검색창으로 내 저장 티어표 범위만 검색, 상단 공통 `viewToggle`로 카드형/리스트형 전환, 편집 화면으로 이동, 작성자 본인 티어표 삭제
 - 연동 API: `GET /api/tierlists/me`, `DELETE /api/tierlists/:id`
 
+## `/favorites`
+- 화면 파일: `frontend/src/views/FavoriteTierListsView.vue`
+- 역할: 즐겨찾기한 티어표 목록 조회, 왼쪽 공통 검색창으로 내 즐겨찾기 범위만 검색, 정렬 셀렉트 유지, 상단 공통 `viewToggle`로 카드형/리스트형 전환, 편집 화면 이동
+- 연동 API: `GET /api/tierlists/favorites/me`, `DELETE /api/tierlists/:id/favorite`
+
+## `/following`
+- 화면 파일: `frontend/src/views/FollowingFeedView.vue`
+- 역할: 팔로우한 작성자의 공개 티어표를 최신 업데이트순 카드 목록으로 모아보기, 상단 공통 `viewToggle`로 카드형/리스트형 전환, 왼쪽 공통 검색창으로 팔로우 피드 범위만 검색, 티어표 상세 이동, 작성자 프로필 이동
+- 연동 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`
+- 역할: 좌측 전역 검색 입력에서 넘긴 키워드로 공개 티어표 전체를 검색하고, 자체 검색 툴바 없이 `상단 썸네일 / 제목+좋아요 / 작성자+최종 수정일` 카드 목록으로 표시
+- 연동 API: `GET /api/tierlists/public?q=...`
+
 ## `/admin`
 - 화면 파일: `frontend/src/views/AdminView.vue`
-- 역할: `게임 관리 / 아이템 관리 / 회원 관리` 탭 분리, 선택된 게임의 썸네일/기본 아이템 관리, 사용자 커스텀 아이템 검색/페이지네이션/사용 횟수 확인/미사용 이미지 개별·일괄 삭제, 회원 비밀번호 초기화 포함 회원 관리, 파일 입력 초기화, 아이템 삭제, 게임 삭제
-- 연동 API: `POST /api/admin/games`, `POST /api/admin/games/:gameId/thumbnail`, `POST /api/admin/games/:gameId/images`, `GET /api/admin/custom-items`, `DELETE /api/admin/custom-items/:itemId`, `DELETE /api/admin/custom-items`, `GET /api/admin/users`, `PATCH /api/admin/users/:userId`, `PATCH /api/admin/users/:userId/password`, `DELETE /api/admin/users/:userId`, `DELETE /api/admin/games/:gameId/items/:itemId`, `DELETE /api/admin/games/:gameId`
+- 역할: 공통 우측 패널 대신 전용 `320px` 운영 패널을 사용해 `목록 관리 / 템플릿 관리 / 아이템 관리 / 티어표 관리 / 회원 관리` 탭과 검색·필터·빠른 작업을 우측에 배치하고, 중앙에는 홈 상단 고정 템플릿 순서, 선택된 템플릿 상세, 커스텀 아이템 목록, 템플릿 요청/전체 티어표, 회원 카드 등 실제 관리 대상만 표시, 목록 관리에서는 고정 템플릿을 드래그 또는 위/아래 버튼 애니메이션으로 정렬하고 `템플릿 추가` 검색 모달에서 후보를 선택, 템플릿 이름/slug 수정, 기본 아이템 다중 드래그 앤 드롭 업로드, 기본 아이템 이름 수정, 사용자 커스텀 아이템 검색/페이지네이션/사용 횟수 확인/미사용 이미지 개별·일괄 삭제, 사용자 커스텀 아이템의 기본 템플릿 승격, 전체 티어표 검색/페이지네이션/공개 여부 확인/받은 즐겨찾기 수 표시/인기순 정렬/최소 즐겨찾기 필터/추천 지정 토글/썸네일 클릭 기반 완성본 보기, 티어표의 추가 커스텀 아이템을 모달 기반으로 기존 템플릿 또는 새 템플릿에 가져오기, freeform 티어표의 템플릿화, 사용자 템플릿 등록/업데이트 요청 승인·반려와 일반 완성본과 같은 보드 문법의 요청 미리보기, 회원의 작성 티어표·팔로워·받은 즐겨찾기·최근 콘텐츠 활동·마지막 접속일 확인과 회원 정보·권한 수정 및 공개 프로필 보기, 파일 입력 초기화, 아이템 삭제, 템플릿 삭제
+- 연동 API: `GET /api/admin/templates`, `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`
+- 역할: `settingsThemePanel` 계열 톤의 요약 카드 중심 설정 화면, 아바타 원형 버튼 클릭 기반 프로필 이미지 선택/삭제 즉시 저장, 닉네임 변경 가능 시점에만 노출되는 아이콘 버튼 기반 닉네임 변경 모달, 비밀번호 변경 아이콘 버튼, 로그인 계정 이메일의 읽기 전용 표시, 로그아웃 아이콘 버튼 처리
+- 연동 API: `GET /api/auth/me`, `POST /api/auth/profile`, `POST /api/auth/password`
 
 ## 공통 레이아웃
 - 앱 셸 파일: `frontend/src/App.vue`
-- 역할: 상단 내비게이션, 로그인 상태 반영, 아바타 메뉴, 관리자 메뉴 노출 제어
+- 역할: 좌측 내비게이션, 중앙 워크스페이스, 우측 컨텍스트 패널로 구성된 공통 앱 셸 렌더링, `홈 / 템플릿 / 댓글 관리` 네비게이션과 화면별 검색 placeholder 전환, `preview=1` 공유 프리뷰에서도 같은 좌우 레일과 중앙 헤더 유지, 로그인 상태 반영, 최근 즐겨찾기 바로가기와 전역 검색 입력, 댓글 알림 unread dot, 관리자 메뉴 노출 제어, 실제 SVG 에셋과 선형 SVG 아이콘이 혼합된 레일 UI, 전역 우측 상단 토스트 렌더링, 앱 최초 진입 시 `auth.refresh()`와 최소 140ms를 묶은 `bootGate` 초기 스켈레톤 표시, 관리자/에디터 화면이 Teleport로 사용하는 `#local-right-rail-root` 대상 DOM을 상시 유지해 라우트 전환 중 우측 레일 언마운트 순서를 안정화, `S/ㄴ`, `G/ㅎ`, `L/ㅣ`, `A/ㅁ` 같은 전역 단축키 처리, 설정 가이드 모달 단계 이동/높이 안정화
+- 세부: 좌측 패널은 `248px` 기준 폭을 사용하되 축소 시 아이콘 중심의 좁은 레일로 전환하고, 우측 패널은 `320px` 기준 폭을 사용한다. 모바일(`860px` 이하)에서는 좌우 패널 모두 오버레이로 뜨며, 중앙 헤더 오른쪽 버튼으로 각각 열고 닫는다. 중앙 헤더의 브랜드 `Tier Maker`는 홈(`/`)으로 이동하는 터치 타겟으로 유지한다. 좌우 레일의 주요 액션은 각각 하단 `56px` 푸터 안에서 항상 보이도록 유지하면서 아래쪽 패딩으로 여백을 확보한다.
 
 ## 백엔드 진입점
 - 서버 엔트리: `backend/index.js`
 - 데이터 초기화: `backend/src/db.js`
+- 세부: 댓글/알림 관련 테이블(`tierlist_comments`, `comment_notifications`)은 여기서 생성되고, 기존 DB에 누락된 컬럼이 있으면 서버 시작 시 자동 보강한다.
+- 운영 환경 변수 예시: 프로젝트 루트 [`.env.production`](/Users/bicute/Desktop/zenn.dev/tmaker/.env.production) 에 `NICKNAME_CHANGE_INTERVAL_DAYS=20` 를 두면 닉네임 재변경 대기 기간을 20일로 맞출 수 있다.
 - 로컬 DB 실행 설정: `docker-compose.yml`
 - 로컬 MariaDB 가이드: `docs/local-mariadb.md`
 - 인증 라우트: `backend/src/routes/auth.js`
-- 게임 라우트: `backend/src/routes/games.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

@@ -6,6 +6,17 @@
 - 데이터 저장소: MariaDB(MySQL 호환)
 - 세션 저장소: `session-file-store` 기반 파일 세션
 - 업로드 저장소: 로컬 파일 시스템(`backend/uploads/`)
+- 운영 배포: `frontend(Nginx 정적 서빙 + /api,/uploads 프록시) + backend + mariadb` Docker Compose 구조
+- NAS HTTPS 리버스 프록시 운영 시 프런트 Nginx는 백엔드로 `X-Forwarded-Proto: https`를 전달하고, Express 세션은 프록시 환경에서 `secure` 쿠키를 허용하도록 설정한다.
+- 프런트 브라우저 탭 파비콘은 운영 정적 파일 차단 영향을 줄이기 위해 `index.html`의 인라인 SVG 데이터 URL로 제공하고, iOS 홈 화면용 `apple-touch-icon.png`와 공유 미리보기용 `og-card.png`만 정적 파일로 유지한다.
+- 프런트 앱 셸은 `좌측 내비게이션 / 중앙 워크스페이스 / 우측 컨텍스트 패널` 3단 구조로 재정의되었고, `preview=1` 모드에서도 같은 셸을 유지한 채 중앙 본문만 완성본 프리뷰로 렌더링한다.
+- 좌측 패널은 `248px`, 우측 패널은 `320px` 기준 폭을 사용하며, 우측 패널은 상단 토글 버튼으로 접고 펼칠 수 있다.
+- 좌측 패널은 필요 시 축소형 레일로 접을 수 있으며, 접힌 상태에서는 아이콘 중심 내비게이션과 축약된 바로가기만 유지한다.
+- 모바일(`860px` 이하)에서는 좌측 패널도 고정 열을 차지하지 않고, 우측 패널과 같은 오버레이 방식으로 띄운다.
+- 앱 최초 진입 시에는 인증 상태 복원과 최소 140ms 대기 시간을 함께 묶은 `bootGate` 초기 게이트를 먼저 보여주고, 그 뒤에만 실제 앱 셸을 렌더링한다.
+- 이 3단 셸 구조는 홈, 게임 허브, 에디터, 관리자 등 일반 페이지 전반의 공통 뼈대로 유지하고, 페이지별 차이는 중앙/우측에 어떤 콘텐츠를 넣는지만 달라지도록 관리한다.
+- 비로그인 상태의 로그인 유도는 좌측 하단 버튼으로만 노출하고, 좌측 상단 사용자 카드 영역에는 별도 게스트 안내 카드를 렌더링하지 않는다.
+- 공통 셸의 좌측 내비, 우측 패널, 빠른 점프 버튼은 간단한 선형 SVG 아이콘과 두꺼운 카드형 버튼 문법을 공유한다.
 
 ## 데이터 저장 구조
 - 메인 데이터베이스: MariaDB `tier_cursor` (기본값)
@@ -15,27 +26,137 @@
   - 아바타: `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 참조 치환을 함께 처리한다.
+
+## 화면 구조
+- 좌측 패널
+  - 사용자 요약, 전체 공개 티어표 검색 입력, 주요 라우트 내비게이션, 최근 즐겨찾기 티어표 바로가기, 관리자 진입 버튼을 배치한다.
+  - 상단 토글 버튼은 항상 고정되어 있고, 패널을 축소하면 텍스트를 숨기고 아이콘 중심 레일로 전환한다.
+  - `Settings`는 별도 메뉴 항목으로만 진입하며, 사용자 카드 자체는 정보 표시 용도로만 사용한다.
+  - 사용자 아바타는 원형 보더 스타일을 유지하고, `Favorites` 영역은 최근 즐겨찾기 티어표 최대 10개를 메인 메뉴보다 작은 밀도의 바로가기 목록으로 보여준 뒤 하단 `즐겨찾기 더 보기` 링크로 전체 즐겨찾기 화면에 연결한다.
+  - 사용자 아바타가 없을 때 표시하는 fallback 이니셜은 계정명보다 닉네임을 우선한다.
+- 중앙 워크스페이스
+  - 현재 라우트의 핵심 콘텐츠를 렌더링하는 영역이며, 홈/목록 계열 화면은 카드형 대시보드 레이아웃을 우선 적용한다.
+  - 공통 `workspaceBody`는 별도 외곽 카드 테두리 없이 셸 여백만 제공하고, 실제 카드/패널 레이어는 각 화면 내부에서만 구성한다.
+  - 홈, 게임 허브, 내 티어표, 즐겨찾기, 검색 결과 화면은 같은 카드 문법(상단 16:9 썸네일, `제목+좋아요` 1행, `작성자+최종 수정일` 1행)을 공유하며, 데스크톱 기준 기본 4열 카드 그리드를 사용한다.
+  - `/` 홈은 템플릿 선택 화면이 아니라 `공개 티어표 피드`이며, 추천 티어표와 최신 공개 티어표를 같은 보드 카드 문법으로 보여준다.
+  - `/templates`는 공개 템플릿 전용 화면이며, 템플릿 카드는 상단 메인 썸네일과 `주제명 + 작은 slug/id` 메타를 가진다.
+  - 목록 계열 화면의 상단 도구 영역은 통계 카드와 액션 버튼을 공통 높이/반경으로 맞춰, 같은 라이브러리 대시보드로 읽히도록 정리한다.
+
+## 주요 라우트/데이터 규칙
+- 일반 `GET /api/topics`는 로그인한 관리자라도 공개 템플릿만 반환한다.
+- 관리자 전용 템플릿 목록은 `GET /api/admin/templates`를 사용하며, 비공개 템플릿까지 포함한다.
+- 홈 피드(`/`)는 `GET /api/tierlists/public?q=...`를 사용한다.
+  - `featuredTierLists`: 상단 추천 티어표
+  - `tierLists`: 추천 제외 최신 공개 티어표
+- 홈, 템플릿, 나의 티어표, 즐겨찾기, 팔로우 피드 화면은 공통 `viewToggle`로 `그리드 / 리스트` 보기를 전환하며, 상태는 현재 라우트의 `?view=list` 쿼리로 반영한다.
+- 단, 모바일 브레이크포인트(`860px` 이하)에서는 `viewToggle`을 노출하지 않는다.
+- 전역 단축키
+  - `S/ㄴ`: 검색 포커스. 편집 화면에서는 아이템 검색창, 그 외 화면에서는 왼쪽 공통 검색창
+  - `G/ㅎ`: 그리드 보기
+  - `L/ㅣ`: 리스트 보기
+  - `A/ㅁ`: 관리자 계정일 때 관리자 화면으로 이동
+- 설정의 가이드 모달은 좌우 화살표, 점 네비게이션, 좌측 단계 목록으로만 이동하고, 설명 영역은 최소 4줄 높이를 유지해 페이지별 높이 차이를 줄인다.
+- 설정(`/profile`) 화면은 상시 입력 폼보다 `현재 상태 요약 카드 + 필요 시 모달 편집` 흐름을 기본으로 한다. 닉네임과 비밀번호는 작은 액션 버튼으로만 모달을 열어 변경하고, 이메일은 현재 로그인 계정 정보로 읽기 전용 표시를 유지한다. 프로필 이미지는 아바타 원형 버튼 자체를 눌러 변경하며, 선택/삭제 시 즉시 자동 저장한다.
+- 이메일은 로그인 계정 식별자 역할을 하므로 현재 개인 설정 화면에서는 변경 기능을 제공하지 않는다.
+- 닉네임 카드 본문에는 제한 설명을 상시 노출하지 않고, 변경 가능한 시점에만 아이콘 버튼을 보여준다. 제한 안내는 닉네임 변경 모달과 가이드 문구에서만 전달한다.
+- 닉네임 변경 제한 기간은 기본 14일이지만, 서버 환경변수 `NICKNAME_CHANGE_INTERVAL_MS` 또는 `NICKNAME_CHANGE_INTERVAL_DAYS`로 조절할 수 있다. `0`이면 제한을 끈다. 인증 응답에는 `nicknameUpdatedAt`, `nicknameChangeAvailableAt`, `nicknameChangeIntervalMs`, `nicknameChangeIntervalLabel`를 함께 포함하고, 프로필 저장 API는 제한 기간 안의 닉네임 변경 요청에 `nickname_change_locked` 오류를 반환한다.
+- 운영 환경 예시로는 `.env.production`에 `NICKNAME_CHANGE_INTERVAL_DAYS=20`처럼 정수 일수를 넣어 주기를 바꾼다.
+- 왼쪽 공통 검색창은 현재 화면 범위만 검색한다.
+  - 홈: 전체 공개 티어표
+  - 템플릿: 공개 템플릿
+  - 나의 티어표: 내 저장 티어표
+  - 특정 주제 화면: 해당 주제의 공개 티어표
+  - 팔로우 피드: 팔로우한 작성자의 공개 티어표
+  - 즐겨찾기: 내가 즐겨찾기한 티어표
+- 위 네 화면의 목록 데이터는 현재 페이지네이션이나 무한 스크롤 없이 조회 결과 전체를 한 번에 렌더링한다.
+- 특정 주제 화면(`TopicHubView`)의 헤더는 데이터 준비 전 문자열 fallback 대신 제목/설명 스켈레톤만 보여준다.
+- `freeform` 시작 액션과 주요 CTA 문구는 `커스텀 티어표`로 통일한다.
+- 저장된 티어표에는 댓글 스레드가 붙을 수 있다. 작성자 본인 편집 화면에서는 `작업 팁` 아래, 작성자가 아닌 사용자의 보기 전용 화면에서는 `preview` 보드 아래에서 같은 댓글 카드를 사용한다.
+- 댓글 알림 메뉴는 좌측 사이드 `댓글 관리`로 노출하며, 읽지 않은 댓글이 하나라도 있으면 빨간 dot을 표시한다.
+- 댓글 관리(`/comments`)는 기본적으로 `안 읽은 댓글만 보기`를 켠 상태로 시작한다.
+- 댓글 정렬은 루트 댓글 최신순, 각 루트 내부의 답글은 오래된순을 기본 규칙으로 유지한다.
+- 댓글 표시 밀도 제어를 위해 기본 노출 개수는 루트 댓글 10개, 각 루트의 답글 3개로 제한하고 `더 보기` 버튼으로 추가 노출한다.
+- 댓글 관리 카드(`/comments`)는 좌측 `16:9 썸네일 + 티어표 제목 + 템플릿 이름`, 우측 `알림 제목 + 루트 댓글 정보 + 새 댓글/답글 정보`의 2열 구조를 사용한다.
+- 댓글 관리 카드의 상단 우측 배지는 상태 라벨이 아니라 개별 `읽음 처리` 액션으로 사용한다.
+- 티어표 즐겨찾기 API(`POST/DELETE /api/tierlists/:id/favorite`)는 이미 존재하며, 보기 화면 우측 레일에는 이를 직접 호출하는 단독 CTA를 노출한다.
+- 티어표 즐겨찾기는 작성자 본인 저장 티어표에도 사용할 수 있다.
+- 우측 패널
+  - 현재 화면 문맥에 맞는 설명, 빠른 액션, 계정 상태 같은 보조 정보를 배치한다.
+  - 에디터/관리자 세부 옵션은 후속 단계에서 이 패널로 점진 이관한다.
+  - 공통 토글 버튼은 패널이 닫혀 있을 때 중앙 헤더, 열려 있을 때 우측 헤더에 각각 아이콘만 표시하는 방식으로 동작한다.
+  - 오른쪽 패널 토글은 열기/닫기 모두 `dock_to_left`, 왼쪽 패널 토글은 `dock_to_right` 아이콘으로 통일한다.
+  - 모바일에서는 중앙 `workspaceHead` 오른쪽에 좌/우 패널 버튼을 함께 두고, 브랜드 타이틀을 터치하면 홈(`/`)으로 이동한다.
+  - 좌우 레일의 주요 CTA는 스크롤되는 본문과 분리된 하단 `56px` 액션 영역에 배치한다.
+  - 하단 액션은 화면 바닥에 바로 붙지 않도록 푸터 내부에 추가 하단 여백을 둔다.
+  - 홈 화면 기준 우측 패널은 임시 정보 카드 여러 개보다 핵심 CTA 하나만 남겨, 시안처럼 단순한 보조 레일 역할을 우선 유지한다.
+  - 광고 영역은 상단 헤더와 시각적으로 너무 붙지 않도록 `78px` 상단 여백을 두고, 하단 카피라이트는 중앙 정렬된 공통 footer로 표시한다. 카피라이트 링크는 다크/라이트 테마 모두에서 읽히도록 고정 민트색 대신 테마 텍스트 색과 굵기를 사용한다.
+- 티어표 편집 화면
+  - 공통 우측 패널 대신 전용 로컬 편집 패널을 사용한다.
+  - 공통 `workspaceBody` 카드 컨테이너를 벗기고, 중앙 보드 영역은 메인 컬럼에, 우측 `320px` 편집 패널은 공통 셸의 세 번째 컬럼 aside에 배치한다.
+  - 공통 상단 토글 버튼은 Teleport로 이동한 로컬 편집 패널의 접힘/펼침 상태와도 연결되어, 우측 패널을 숨기면 중앙 보드 영역이 확장된다.
+  - 편집 모드와 `preview=1` 뷰어 모드 모두 제목/보드/우측 패널 데이터가 준비되기 전까지는 실제 화면 대신 전용 스켈레톤 레이아웃을 먼저 보여준다.
+  - 저장용 랜덤 제목은 내부 저장/도배 방지용으로만 쓰고, 화면 표시용 제목 fallback 에서는 내부 `tierListId`나 랜덤 문자열을 직접 노출하지 않는다.
+  - 헤더 문법은 공통 `pageHead` 흐름을 따르되, 편집 가능 상태에서는 `NEW/EDIT + 현재 템플릿 이름 + 작업 가이드`, 보기 전용 상태에서는 `템플릿 이름 + 티어표 제목 + 티어표 설명` 규칙을 사용한다.
+  - 보기 전용 헤더에는 별도 `Preview` 아이브로우를 두지 않고, 템플릿 이름 아이브로우만 남긴다.
+  - 드래그 초기화는 스켈레톤이 내려간 뒤 실제 보드/풀 DOM이 렌더링된 다음 `Sortable`을 붙이는 순서를 따른다.
+  - 제목, 설명, 대표 썸네일, 공개 여부, 저장/삭제/요청 액션을 우측 로컬 패널에 배치한다. 템플릿 등록/업데이트 요청 버튼은 저장된 티어표가 있을 때만 노출하며, 제목이 비어 있는 상태에서 저장하면 랜덤 고유 제목을 먼저 부여해 저장본을 만든다.
+  - 보기 전용 상태에서 상단 아이브로우(템플릿 이름)는 해당 주제 허브로 이동하는 액션으로 사용하며, 편집 중 미저장 변경이 있으면 이동 전에 확인 모달을 띄운다.
+  - 보드 바로 옆에는 드래그용 아이템 풀을 별도 패널로 두고, 커스텀 아이템 이름 정리 목록은 우측 편집 패널 내부에서 관리한다.
+- 관리자 화면
+  - 공통 우측 패널 대신 전용 로컬 운영 패널을 사용한다.
+  - 공통 `workspaceBody` 카드 컨테이너를 벗기고, 중앙 관리 목록은 메인 컬럼에, 우측 운영 패널은 공통 셸의 세 번째 컬럼 aside에 배치한다.
+  - 우측 로컬 패널에는 `게임/아이템/티어표/회원 관리` 탭, 검색, 필터, 새로고침, 빠른 작업 제어를 배치하고, 중앙 영역에는 실제 관리 대상 목록과 상세만 렌더링한다. 템플릿 요청 카드는 전체 티어표 카드와 같은 썸네일 좌측/정보 우측 구조를 따르며, 요청 미리보기와 `preview=1` 공유 프리뷰는 공통 앱 셸 안에서 일반 티어표 완성본과 같은 행·열 보드 문법으로 검수한다.
+  - 상단 헤더에는 현재 탭 기준 요약 통계 카드를 배치해 운영 상태를 먼저 읽고, 각 관리 카드는 공통 대시보드 카드 문법(두꺼운 반경, 얕은 레이어 배경, 강조된 액션 버튼)을 공유한다.
 
 ## DB 스키마
 - `users`
   - `id`: string
   - `email`: string
   - `nickname`: string
+  - `nicknameUpdatedAt`: number
+  - `nicknameChangeAvailableAt`: number
+  - `nicknameChangeIntervalMs`: number
+  - `nicknameChangeIntervalLabel`: 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
@@ -46,72 +167,253 @@
 - `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
   - `updatedAt`: number
-- `gameSuggestions`
-  - `id`: string
-  - `name`: string
+- `favoriteTierLists`
+  - `userId`: string
+  - `tierListId`: string
   - `createdAt`: number
+- `userFollows`
+  - `followerId`: string
+  - `followingId`: string
+  - `createdAt`: number
+- `favoriteTopics`
+  - `userId`: string
+  - `topicId`: string
+  - `createdAt`: number
+- `tierListComments`
+  - `id`: string
+  - `tierListId`: string
+  - `authorId`: string
+  - `parentCommentId`: string
+  - `content`: string
+  - `createdAt`: number
+  - `updatedAt`: number
+  - 답글은 1단계까지만 허용한다.
+- `commentNotifications`
+  - `id`: string
+  - `userId`: string
+  - `tierListId`: string
+  - `commentId`: string
+  - `actorUserId`: string
+  - `notificationType`: `tierlist_comment | comment_reply`
+  - `isRead`: boolean
+  - `readAt`: number
+  - `createdAt`: number
+  - 기존 운영 DB에 예전 형태 테이블이 남아 있어도 서버 시작 시 스키마 보정으로 누락 컬럼을 자동 추가한다.
+  - 댓글 관리 카드 구성을 위해 조회 응답에는 `parentCommentContent`, `parentCommentCreatedAt`, `parentAuthorName`, `parentAuthorAccountName`, `parentAuthorAvatarSrc`를 함께 내려준다.
+- `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`
-- 게임
-  - `GET /api/games`
-  - `GET /api/games/:gameId`
+  - `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`
+    - `featuredTierLists`와 일반 공개 `tierLists`를 분리해서 반환한다.
+    - `topicId`에는 주제 `slug`를 우선 전달하며, `topicId` 없이 `q`만 전달하면 전체 공개 티어표 검색에 사용한다.
   - `GET /api/tierlists/me`
+  - `GET /api/tierlists/favorites/me`
   - `GET /api/tierlists/:id`
+  - `GET /api/tierlists/:id/comments`
+  - `POST /api/tierlists/:id/comments`
+  - `DELETE /api/tierlists/:id/comments/:commentId`
+  - `POST /api/tierlists/:id/template-request`
+  - `POST /api/tierlists/:id/favorite`
+  - `DELETE /api/tierlists/:id/favorite`
   - `DELETE /api/tierlists/:id`
+  - `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`
+- 댓글 알림
+  - `GET /api/comments/inbox`
+    - 알림 카드 렌더링을 위해 티어표 썸네일과 부모 댓글 내용도 함께 반환한다.
+  - `GET /api/comments/inbox/unread-count`
+  - `POST /api/comments/inbox/read`
 - 관리자
-  - `POST /api/admin/games`
-  - `POST /api/admin/games/:gameId/thumbnail`
-  - `POST /api/admin/games/:gameId/images`
+  - `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`
+  - `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/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`
-  - `DELETE /api/admin/games/:gameId/items/:itemId`
-  - `DELETE /api/admin/games/:gameId`
+  - `DELETE /api/admin/templates/:templateId/items/:itemId`
+  - `DELETE /api/admin/templates/:templateId`
 
 ## 관리자 화면 메모
 - 썸네일은 16:9 비율 미리보기 후 `썸네일 적용` 버튼으로 실제 반영한다.
-- 게임 기본 아이템 추가는 이름 입력, 파일 선택, 1:1 미리보기 확인 뒤 저장하는 흐름이다.
+- 게임 기본 아이템 추가는 드래그 앤 드롭 또는 다중 파일 선택으로 처리하고, 미리보기 카드에서 여러 장을 함께 확인할 수 있다.
+- 현재 기본 아이템 목록에서는 등록된 아이템 이름을 직접 수정하고 저장할 수 있다.
+- 기본 아이템 이름 저장 버튼은 값이 실제로 바뀐 경우에만 활성화된다.
 - 아이템 미리보기는 반응형 환경에서도 최대 `192px` 크기 안에서 표시한다.
 - 게임 전환 또는 업로드 성공 뒤에는 파일 입력값을 초기화해 같은 파일도 다시 선택할 수 있다.
-- 사용자 업로드 커스텀 아이템은 관리자 화면의 아이템 관리 탭에서 검색, 페이지네이션, 다운로드할 수 있다.
-- 커스텀 아이템은 사용 횟수(`usageCount`)를 표시하며, 미사용 항목만 필터링해 개별/일괄 삭제할 수 있다.
+- 목록 관리 탭에서는 홈 화면 상단에 먼저 노출할 템플릿을 최대 50개까지 지정한다. 새 고정 템플릿은 `템플릿 추가` 모달에서 이름/slug/ID로 검색해 선택하며, 이미 고정된 템플릿은 후보에서 제외한다.
+- 상단 고정 템플릿 순서는 드래그 또는 위/아래 버튼으로 바꿀 수 있고, 버튼 이동도 카드 위치가 부드럽게 전환되는 애니메이션을 사용한다.
+- 상단 고정 템플릿 추가 모달이 열려 있는 동안에는 배경 관리자 화면 스크롤을 잠가 모달 선택 흐름이 뒤쪽 화면 위치를 바꾸지 않도록 한다.
+- 사용자 아이템은 관리자 화면의 아이템 관리 탭에서 검색, 페이지네이션, 다운로드할 수 있다.
+- 사용자 커스텀 아이템은 선택한 게임의 기본 템플릿으로 복제해 가져올 수 있다.
+- 사용자 아이템은 사용 횟수(`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` 티어표는 관리자 화면에서 새 템플릿 slug/이름을 입력해 새로운 템플릿으로 복제 생성할 수 있다. 내부 ID는 서버가 자동 생성하므로 운영자가 직접 입력하지 않는다.
+- 관리자 티어표 관리 상단에는 사용자가 보낸 템플릿 등록/업데이트 요청 목록이 별도로 표시되며, 여기서 승인/반려를 바로 처리할 수 있다.
+- 관리자 템플릿 요청 목록에서 `반려 후 숨김`을 누르면 해당 요청은 pending 목록에서 즉시 제외된다.
 - 관리자 화면에서는 회원 이메일/닉네임/권한 수정, 비밀번호 초기화, 계정 삭제가 가능하다.
+- 단, 일반 운영자는 최고 관리자 계정의 프로필 이미지/회원 정보/비밀번호/삭제 버튼을 사용할 수 없고, 최고 관리자만 다른 관리자 권한을 변경할 수 있다.
+- 관리자 회원 정보 수정은 운영상 필요한 경우 예약어 닉네임도 저장할 수 있지만, 일반 회원가입과 개인 프로필 수정에서는 운영자 사칭성 예약어 닉네임을 계속 차단한다.
+- 회원 관리 카드에는 아바타, 작성 티어표 수, 팔로워 수, 받은 즐겨찾기 수, 최근 콘텐츠 활동, 마지막 접속일을 함께 표시한다.
+- 운영자는 회원 목록을 작성 티어표 수뿐 아니라 팔로워 수와 받은 즐겨찾기 수 기준으로도 정렬할 수 있어, 핵심 작성자를 더 빠르게 찾을 수 있다.
+- 마지막 접속일은 로그인/세션 확인 기준, 최근 콘텐츠 활동은 작성한 티어표의 마지막 수정일 기준으로 분리해서 보여준다. 따라서 장기 미접속 계정 정리 판단은 마지막 접속일을 우선 사용하고, 콘텐츠 기여가 최근인지 볼 때는 최근 콘텐츠 활동을 사용한다.
+- 회원 카드의 `프로필 보기` 버튼은 해당 회원의 `/users/:userId` 공개 프로필 화면으로 이동해, 팔로워/공개 티어표 현황을 관리자 화면 밖에서도 바로 확인할 수 있게 한다.
+- 회원 비밀번호를 운영자가 임의로 덮어쓰는 기능은 비상 상황용 API로만 유지하고, 일반 회원 관리 카드에서는 비밀번호 초기화 버튼과 모달을 숨긴다. 평소 사용자 비밀번호 변경은 이메일 재설정 메일과 설정 화면 직접 변경을 우선 사용한다.
 
 ## 티어표 접근 메모
 - `new` 작성 경로는 로그인한 사용자만 진입할 수 있다.
-- 비로그인 사용자는 공개된 티어표를 열람만 할 수 있고, 편집 UI와 저장 동작은 비활성화된다.
+- 공유 링크로 여는 `preview=1` 화면은 `뷰어 모드`로 취급하며, 드래그/행열 편집/저장 같은 편집 UI 없이 완성본만 렌더링한다.
+- 비로그인 사용자나 작성자 본인이 아닌 로그인 사용자는 저장된 티어표를 기본적으로 뷰어 모드로 열람하며, 일반 편집 URL로 직접 진입해도 소유자가 아니면 `preview=1` 주소로 자동 전환된다.
+- 비로그인 사용자도 뷰어 모드 우측 레일의 `공유하기` 버튼으로 현재 공유 링크를 복사할 수 있다.
+- 로그인한 사용자는 뷰어 모드 우측 레일에서 저장된 티어표를 복사할 수 있고, 타인 티어표면 `내 티어표로 복사`, 본인 티어표면 `복사본 만들기` 문구를 사용한다. 작성자 본인은 `수정 모드로 전환`도 사용할 수 있다.
+- 작성자 본인이 일반 편집 화면에서 저장된 본인 티어표를 보고 있을 때는 우측 패널의 `뷰어 모드로 보기`로 공유 화면 형태를 바로 확인할 수 있다.
+- 편집/뷰어 우측 패널의 `작성자 프로필 보기`로 해당 작성자의 공개 프로필과 공개 티어표 목록을 열 수 있고, 로그인 상태에서는 작성자 프로필에서 팔로우/언팔로우를 전환할 수 있다.
+- `/users/:userId` 공개 프로필 화면 상단 헤더는 고정 제목 `사용자 프로필`과 안내 문구를 보여주고, 실제 닉네임/아바타는 본문 프로필 카드에서만 표시한다. 이메일 앞부분에서 파생된 `@accountName`은 사용자가 직접 설정한 핸들이 아니므로 프로필 UI에 노출하지 않는다.
+- 같은 `TierEditorView` 안에서 `topicId / tierListId / preview` 라우트 값만 바뀌어도 화면이 이전 티어표 데이터에 남지 않도록, 라우트 변경마다 에디터 상태를 다시 로드한다.
+- 복사한 티어표 상단의 `원본` 링크를 누르면 원본 티어표로 이동하며, 편집 모드에서 저장하지 않은 변경이 있으면 이동 전에 `저장 없이 이동` 확인 모달을 먼저 띄운다.
+- 본인 티어표도 저장된 상태라면 편집/뷰어 우측 패널에서 복사본을 만들 수 있고, 편집 중 저장하지 않은 수정이 남아 있으면 복사 직전에 현재 수정본을 먼저 저장해 최신 상태 기준 복사본을 만든다.
+- 비공개 티어표라도 관리자는 편집 화면에서 완성본을 열람할 수 있다.
+- 공개 티어표는 목록과 상세 화면에서 즐겨찾기 토글 및 개수를 함께 표시한다.
+- 카드형 목록에서는 즐겨찾기 수/상태만 표시하고, 실제 토글은 상세 화면에서 처리한다.
+- 공개 티어표 목록은 현재 게임 기준으로 제목/작성자 검색을 지원한다.
+- 주제별 공개 티어표 화면은 관리자 추천글을 상단 `추천 티어표` 섹션으로 먼저 보여주고, 일반 공개 목록은 아래 `전체 공개 티어표` 섹션으로 분리해 중복 없이 렌더링한다. 추천 섹션은 최대 16개까지 표시한다.
+- `내 즐겨찾기` 화면에서는 즐겨찾기한 순, 최신 업데이트순, 인기순 정렬을 제공한다.
 - 커스텀 이미지 추가는 다중 파일 선택과 드래그 앤 드롭을 모두 지원한다.
+- 사용자가 직접 추가한 커스텀 아이템 이름은 편집 화면 우측 목록에서 정리할 수 있고, 저장 시 원본 커스텀 아이템 라벨과 함께 동기화된다.
 - 티어 행은 기본 5단으로 시작하지만, 사용자가 직접 추가하거나 제거할 수 있다.
+- 티어 행에 넣은 아이템은 작은 제거 버튼으로 다시 우측 아이템 풀로 되돌릴 수 있다.
+- 편집 가능한 티어표에서는 아이템을 드래그로 옮길 수 있고, 아이템을 클릭해 선택한 뒤 원하는 셀이나 아이템 풀 빈 영역을 클릭하는 방식으로도 위치를 바꿀 수 있다.
+- 클릭 배치 모드에서 선택된 아이템은 파란 포커스 테두리로 표시하며, 드래그를 시작하면 선택 상태를 해제하고 드래그 직후 짧은 클릭 입력은 무시해 드래그/클릭 조작이 섞이지 않게 한다.
+- 보드 칸이나 미사용 아이템 풀의 아이템을 우클릭하면 `아이템 복제` 메뉴가 열리고, 실행 시 같은 이미지/이름/출처를 가진 새 아이템 인스턴스를 미사용 풀 맨 앞에 추가한다. 복제본은 `dup-...` 형태의 새 ID를 쓰므로 원본과 복제본을 서로 다른 칸에 동시에 배치할 수 있다.
+- 기존 저장 티어표/복사본을 수정 가능한 상태로 다시 열 때는 저장본의 그룹/풀을 먼저 복원하고, 이후 현재 템플릿에 새로 추가된 기본 아이템만 미사용 풀 끝에 병합한다.
+- 관리자 템플릿에서 삭제된 기본 아이템이라도 이미 저장된 티어표의 그룹/풀에 포함되어 있던 항목은 자동 제거하지 않고 그대로 보존한다.
 - 신규 티어표의 공개 여부 기본값은 `ON`이며, 기존 티어표는 편집 화면과 `내 티어표` 목록에서 직접 삭제할 수 있다.
-- 제목이 비어 있는 상태로 저장하면 내부 제목은 `이름 없음 + 날짜` 형식으로 자동 생성한다.
+- 제목이 비어 있는 상태로 저장하면 내부 제목은 현재 게임명을 기본값으로 사용한다.
 - 제목 입력이 비어 있는 동안에는 무분별한 도배 방지를 위한 관리자 임의 삭제 가능성 안내 문구를 표시한다.
+- `freeform` 티어표는 커스텀 아이템이 준비된 상태에서 `템플릿 등록 요청`을 보낼 수 있다.
+- `템플릿 등록 요청` 전에는 체크리스트 모달로 `제목 직접 입력` 여부를 확인하고, 관리자가 식별하기 쉬운 게임 이름을 입력하도록 안내한다.
+- 신규 티어표를 막 저장한 직후에도, 템플릿 요청은 새로 발급된 실제 티어표 ID를 기준으로 이어서 처리한다.
+- 기존 게임 티어표는 커스텀 아이템이 포함되어 있으면 `템플릿 업데이트 요청`을 보낼 수 있다.
+- 티어표는 편집 화면에서 16:9 썸네일 이미지를 별도로 선택해 저장할 수 있고, 목록 카드에서는 그 이미지를 상단 대표 썸네일로 사용한다.
+- 티어표에 썸네일을 직접 지정하지 않으면 저장 시 대표 아이템 이미지 하나를 기본 썸네일로 자동 선택한다.
+- 편집 화면 상단 헤더는 좌측 제목/설명, 우측 썸네일 카드 구조를 사용하며 모바일에서는 한 열로 접힌다.
+- 티어표 편집 화면의 우측 패널은 공통 `rightRail`의 `localRightRailRoot`에 직접 section들을 쌓는 구조이며, 별도 외곽 래퍼 카드 없이 공통 오른쪽 컬럼 문법을 그대로 따른다.
+- 뷰어 모드 우측 패널도 같은 `localRightRailRoot`를 사용하며, 상단에는 광고 블록을, 하단에는 공유/복사/수정 전환 액션 카드를 배치한다.
+- 공통 앱 셸은 좌측/중앙/우측 컬럼마다 높이 `56px`의 상단 헤더 블록을 유지하며, 중앙 헤더에는 사이트 타이틀 `Tier Maker`와 현재 서비스 설명을 표시한다.
+- 티어표 편집기의 아이콘 기본 크기는 `80px`이며, 사용자가 `48 / 60 / 80 / 100 / 120` 단계로 즉시 조절할 수 있다.
 - 공개 티어표 목록과 `내 티어표` 목록은 제목 옆에 작성자 아바타와 표시명을 함께 보여준다.
 - 작성자 아바타 이미지가 없을 경우 목록 썸네일 fallback은 닉네임이 아니라 계정명 기준 첫 글자를 사용한다.
 - 티어표 목록 메타 정보는 최종 업데이트 시각만 간략하게 표시한다.
-- 저장 성공 시에는 에디터 안에서 반투명 오버레이 기반 확인 모달을 띄우고, PNG export 이미지는 약 `1600px` 폭과 외곽 여백, 작성자/날짜 하단 메타를 포함해 생성한다.
+- 저장 성공 시에는 에디터 안에서 반투명 오버레이 기반 확인 모달을 띄우고, PNG export 이미지는 약 `960px` 보드 폭과 `pixelRatio 1.5`, 외곽 여백, 작성자/날짜 하단 메타를 포함해 생성한다.
+- 저장/삭제/가져오기 같은 사용자 행동 피드백은 전역 우측 상단 토스트로 표시한다.
+- 전역 토스트는 동일 메시지/타입이 연속 발생하면 하나로 합쳐 카운트를 올리고, 종료 시 짧은 페이드아웃 애니메이션을 사용한다.
+- 홈 게임 목록은 관리자 상단 고정 순서가 있으면 그 순서를 먼저 적용하고, 그 외 게임은 최근 생성순으로 뒤에 이어진다.
+- 홈 주제 템플릿 목록의 실제 정렬 우선순위는 `즐겨찾기 여부 → 관리자 수동 순서(displayRank) → 최신 생성순(createdAt DESC) → 이름순`이다.
+- `커스텀 티어표 만들기`는 카드가 아니라 홈 우측 상단 버튼으로 진입한다.
+
+## 업로드 제한 메모
+- 프로필 아바타 업로드는 파일당 최대 `3MB`다.
+- 관리자 템플릿 썸네일/기본 아이템 업로드는 파일당 최대 `20MB`다.
+- 사용자 커스텀 이미지 업로드는 파일당 최대 `6MB`다.
+- 운영 프런트 Nginx는 다중 이미지 업로드 한 번의 요청 본문을 최대 `1024MB`까지 허용한다.
+- 현재는 업로드 전에 이미지 리사이즈/압축을 하지 않고 원본 파일을 그대로 저장한다.
 
 ## 운영 환경 변수
 - 프런트엔드
@@ -128,6 +430,28 @@
   - `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)이다.
+- 외부 도메인 `tmaker.sori.studio`는 `frontend` 컨테이너의 `18080` 포트로 리버스 프록시하고, `/api`, `/uploads`, `/health`는 프런트 Nginx가 내부 `backend:5179`로 전달한다.
+- 운영 볼륨은 MariaDB 데이터, 업로드 파일, 세션 파일을 각각 분리해 유지한다.
+- MariaDB healthcheck는 NAS 첫 기동 지연을 고려해 `root` 기준 ping과 긴 `start_period/retries`를 사용한다.
 
 ## NAS 배포 메모
 - 현재 구조는 MariaDB/MySQL 계열이므로 NAS에 MariaDB를 올리면 phpMyAdmin 또는 Adminer로 직접 데이터 확인이 가능하다.

docs/todo.md

@@ -1,21 +1,284 @@
 # 할 일 및 이슈
 
-## 즉시 확인 필요
-- 사용자 커스텀 아이템을 관리자 기본 템플릿으로 승격하는 승인/복제 흐름은 아직 없다.
-- 회원 관리에서 아바타/작성 티어표 수/최근 활동 같은 보조 정보는 아직 표시하지 않는다.
-- 미사용 커스텀 이미지 일괄 삭제는 현재 "참조가 없는 항목" 기준이며, 보관 기간 정책 같은 운영 규칙은 아직 없다.
+## 단기 확인
+- `v1.1.30` 이후 관리자 목록관리에서 `템플릿 추가` 모달을 열고 검색·선택·닫기 흐름이 자연스러운지, 이미 고정된 템플릿이 추가 후보에서 제외되는지 확인한다.
+- `v1.1.30` 이후 상단 고정 템플릿 추가 모달이 열린 동안 마우스 휠/트랙패드/모바일 터치로 뒤쪽 관리자 화면이 스크롤되지 않는지 확인한다.
+- `v1.1.30` 이후 상단 고정 목록의 `위로 / 아래로` 버튼을 눌렀을 때 카드가 깜빡이지 않고 부드럽게 이동하며, 드래그 정렬과 저장 순서가 계속 일치하는지 확인한다.
+- `v1.1.29` 이후 보기 전용 티어표 헤더에서 아이브로우가 템플릿 이름 한 줄만 남고, 더 이상 `Preview`와 중복되지 않는지 확인한다.
+- `v1.1.29` 이후 좌측 빠른 시작 버튼과 템플릿 화면 액션의 `커스텀 티어표` 문구가 전체 화면에서 같은 톤으로 보이는지 확인한다.
+- `v1.1.29` 이후 편집 화면에서 `풀 → 보드`, `보드 → 다른 칸`, `보드 → 풀` 드래그가 모두 다시 동작하는지 최우선으로 확인한다.
+- `v1.1.27` 이후 편집 가능한 티어표 화면에서 헤더가 `NEW/EDIT → 템플릿 이름 → 작업 가이드` 순서로 자연스럽게 보이는지 확인한다.
+- `v1.1.27` 이후 보기 전용 티어표 화면에서는 아이브로우만 템플릿 이동 링크로 동작하고, 제목은 더 이상 클릭 가능한 요소처럼 보이지 않는지 확인한다.
+- `v1.1.27` 이후 freeform 티어표도 헤더 제목이 비지 않고 `커스텀 티어표`로 안정적으로 보이는지 확인한다.
+- `v1.1.26` 이후 템플릿 카드 클릭 시 `주제 불러오는 중...` 문구가 더 이상 보이지 않고, 주제명 헤더 스켈레톤 뒤에 실제 이름이 자연스럽게 붙는지 확인한다.
+- `v1.1.26` 이후 템플릿 A에서 템플릿 B로 빠르게 연속 이동해도 이전 주제의 공개 티어표 카드가 잠깐 남지 않는지 확인한다.
+- `v1.1.26` 이후 저장 제목이 없는 티어표를 열 때 내부 ID나 자동 생성 문자열 대신 주제명 기반 표시 제목만 보이는지 확인한다.
+- `v1.1.25` 이후 첫 진입 시 로그인 상태가 비로그인처럼 잠깐 보였다가 바뀌는 깜빡임이 실제로 줄었는지, 느린 네트워크/빠른 네트워크 양쪽에서 확인한다.
+- `v1.1.25` 이후 티어표 화면 진입 시 제목 자리에 내부 ID가 먼저 노출되지 않고, 편집 모드/프리뷰 모드 둘 다 스켈레톤 뒤에 실제 데이터가 자연스럽게 붙는지 확인한다.
+- 초기 인증 게이트는 최소 140ms를 기다리므로, 초고속 응답에서도 오히려 부트 스켈레톤이 과하게 눈에 띄지 않는지 확인한다.
+- `v1.1.18` 이후 설정 화면이 데스크톱/태블릿/모바일에서 너무 넓게 퍼지지 않고, 요약 카드 간 간격과 제목/설명 밀도가 다른 대시보드 화면과 자연스럽게 맞는지 확인한다.
+- 프로필 이미지 변경 후 저장, 이미지 제거 후 저장, 저장하지 않고 페이지 이탈 세 경우가 모두 의도대로 동작하는지 확인한다.
+- 프로필 이미지 자동 저장으로 바뀐 뒤, 파일 선택 직후와 삭제 직후에 즉시 반영되고 연속 클릭 시 중복 저장 요청이 과도하게 쌓이지 않는지 확인한다.
+- 닉네임 변경 모달에서 제한 안내 문구와 실제 저장 차단 시점이 일치하는지, 제한 중에는 버튼이 비활성화되고 다음 가능 시각이 자연스럽게 보이는지 확인한다.
+- `NICKNAME_CHANGE_INTERVAL_DAYS=1`, `NICKNAME_CHANGE_INTERVAL_MS=0` 같은 운영/테스트 값에서 설정 화면 문구와 백엔드 차단 동작이 함께 바뀌는지 확인한다.
+- 설정 화면의 아이콘 버튼(`닉네임 변경`, `비밀번호 변경`, `로그아웃`)이 좁은 화면에서도 겹치지 않고, `title/aria-label` 기준 접근성도 자연스러운지 확인한다.
+- 닉네임 변경 제한 중일 때 설정 카드에서 아이콘이 완전히 사라지는 흐름이 사용성 측면에서 충분히 명확한지 실제 계정으로 확인한다.
+- 이메일 카드의 읽기 전용 문구만으로도 “로그인용 계정 이메일은 여기서 바꾸지 않는다”는 점이 충분히 전달되는지 확인한다.
+- 운영 배포 환경에서 닉네임 변경 주기를 바꿀 때는 `.env.production`의 `NICKNAME_CHANGE_INTERVAL_DAYS` 값만 바꾸면 된다는 점을 배포 문서에도 추후 분리해둘지 검토한다.
+- `860px` 이하 모바일 폭에서 좌우 레일이 모두 오버레이로 동작할 때, 헤더 버튼으로 열기/닫기와 바깥 영역 탭 닫기가 자연스러운지 확인한다.
+- 모바일에서는 목록 화면 `viewToggle`을 숨기도록 바뀌었으니 홈/템플릿/나의 티어표/즐겨찾기/팔로우 피드에서 헤더 액션 영역이 더 여유롭게 보이는지 확인한다.
+- 편집 화면 상단 템플릿 제목 클릭 시 해당 주제 허브로 이동하고, 미저장 변경이 있을 때는 `저장 없이 이동` 확인 모달이 먼저 뜨는지 확인한다.
+- 오래전에 가입한 기존 계정은 `nickname_updated_at` 백필 후에도 바로 변경 가능하고, 최근 가입/최근 변경 계정은 정확히 14일 제한이 걸리는지 서버 기준으로 확인한다.
+- 비밀번호 변경이 요약 카드의 작은 액션으로만 열리더라도 접근성이 떨어지지 않는지, 모달 `Esc` 닫기와 포커스 이동이 자연스러운지 확인한다.
+- `v1.1.17` 이후 설정의 가이드 모달에서 페이지를 넘길 때 썸네일 영역 위치가 이전보다 안정적으로 유지되는지 확인한다.
+- `v1.1.17` 이후 가이드 하단 `다음` 버튼이 사라지고, 좌우 화살표/점 네비게이션만으로도 단계 이동이 충분히 자연스러운지 확인한다.
+- `v1.1.16` 이후 `S/ㄴ`이 편집 화면에서는 아이템 검색, 일반 목록 화면에서는 왼쪽 공통 검색창 포커스로 정확히 나뉘어 동작하는지 확인한다.
+- `v1.1.16` 이후 `G/ㅎ`, `L/ㅣ`가 목록 화면에서만 그리드/리스트 전환을 수행하고, 입력칸을 타이핑 중일 때는 단축키가 발동하지 않는지 확인한다.
+- 관리자 계정에서만 `A/ㅁ`이 관리자 화면으로 이동하고, 일반 계정에서는 무시되는지 확인한다.
+- `v1.1.15` 이후 `나의 티어표`에서도 왼쪽 공통 검색창이 정상 동작하고, 검색 결과가 없을 때 전용 빈 상태 문구가 자연스럽게 보이는지 확인한다.
+- `v1.1.14` 이후 왼쪽 공통 검색창이 홈/템플릿/주제/팔로우 피드/즐겨찾기 각각의 범위만 정확히 검색하는지 확인한다.
+- `v1.1.14` 이후 주제 허브, 팔로우 피드, 즐겨찾기 화면 상단에서 중복 검색창이 모두 사라졌는지 확인한다.
+- 즐겨찾기 목록에서는 해제 버튼이 숨겨지고, 실제 해제는 해당 티어표 화면 우측 CTA에서만 가능한 흐름이 사용자 의도와 맞는지 확인한다.
+- `v1.1.13` 이후 팔로우 피드에서도 공통 `viewToggle`이 보이고, 리스트형 보기에서 작성자 카드와 썸네일 정렬이 어색하지 않은지 확인한다.
+- `v1.1.12` 이후 홈/템플릿/나의 티어표/즐겨찾기에서 공통 `viewToggle`이 모두 같은 위치/같은 동작으로 보이는지 확인한다.
+- 리스트형 보기에서 홈/템플릿/나의 티어표/즐겨찾기 카드가 데스크톱과 모바일 모두에서 썸네일 비율과 제목 overflow 없이 안정적으로 보이는지 확인한다.
+- 내가 만든 저장 티어표도 즐겨찾기에 추가되고 `/favorites`에 나타나는지, 비공개 내 티어표를 즐겨찾기했을 때 접근/표시 규칙이 자연스러운지 확인한다.
+- 현재 주요 목록 화면은 전체 데이터를 한 번에 가져오는 구조이므로, 실제 데이터가 많아졌을 때 페이지네이션 또는 무한 스크롤이 필요한 시점을 추후 점검한다.
+- `v1.1.11` 이후 즐겨찾기 페이지 카드 우측 상단 `즐겨찾기 해제` 버튼이 카드 열기와 충돌하지 않는지, 해제 직후 목록에서 즉시 빠지고 새로고침 후에도 유지되는지 확인한다.
+- `v1.1.10` 이후 댓글 관리 화면이 기본적으로 안 읽은 댓글만 보이므로, 사용자가 처음 들어왔을 때 빈 화면처럼 느끼지 않는지와 `전체 보기`로 돌렸을 때도 자연스러운지 확인한다.
+- 개별 `읽음 처리` 버튼을 눌렀을 때 카드가 즉시 사라지고 좌측 메뉴 unread dot도 함께 줄어드는지, 마지막 unread 카드까지 처리하면 dot이 사라지는지 확인한다.
+- 티어표 보기 화면 우측 즐겨찾기 단독 CTA가 편집 라우트의 읽기 전용 상태와 `preview=1` 뷰어 모드 양쪽에서 모두 자연스럽게 보이는지 확인한다.
+- `v1.1.9` 이후 댓글 관리 카드에서 좌측 썸네일/티어표 정보와 우측 루트 댓글/새 댓글 정보가 실제로 한눈에 읽히는지, 특히 답글 알림에서 부모 댓글 작성자 정보가 자연스럽게 보이는지 확인한다.
+- `v1.1.9` 이후 `commentInboxCard__lead` 제거로 정보가 부족해지지 않았는지, 제목과 댓글 블록만으로 상태를 이해할 수 있는지 데스크톱/모바일에서 다시 확인한다.
+- `v1.1.8` 이후 댓글 더 보기 규칙(루트 10개, 답글 3개)과 남은 개수 표기가 실제 데이터에서 자연스럽게 동작하는지 확인한다.
+- 댓글 관리 화면의 `안 읽은 댓글만 보기` 토글과 `모두 읽음 처리` 버튼이 설정/에디터의 공통 컨트롤 톤과 이질감이 없는지 확인한다.
+- `v1.1.7` 이후 댓글 관리 카드 썸네일이 실제로 모든 카드에서 16:9로 유지되는지 데스크톱/모바일에서 다시 확인한다.
+- `v1.1.6` 이후 루트 댓글이 최신순으로, 답글은 오래된순으로 정확히 보이는지 실제 댓글 데이터를 여러 개 넣어 확인한다.
+- 뷰어 모드에서 댓글이 길어져도 우측 `공유 티어표 보기` 카드가 스폰서 카드 바로 아래에서 유지되고, 더 이상 하단으로 밀려 보이지 않는지 확인한다.
+- `v1.1.5` 이후 댓글 카드/댓글 관리 카드에서 보더가 과해 보이지 않고, surface/shadow 중심 레이어가 다크/라이트 모드 모두에서 자연스러운지 확인한다.
+- 댓글 등록/답글 등록 버튼이 실제 저장 CTA 톤으로 보이고 hover/disabled 상태도 다른 저장 버튼들과 이질감이 없는지 확인한다.
+- `v1.1.4` 이후 댓글 관리 카드에서 티어표 썸네일, 원댓글/새 댓글 비교 블록이 데스크톱과 모바일에서 모두 자연스럽게 보이는지 확인한다.
+- 댓글 스레드 카드 리디자인 후 답글 연결선, 배지, 본문 말풍선 배경이 라이트/다크 모드 모두에서 과하지 않게 보이는지 확인한다.
+- `v1.1.3` 이후 답글 작성 시 입력창이 열리자마자 포커스를 받고, 포커스 전에도 카드/입력 경계가 분명하게 보이는지 다크/라이트 모드 모두에서 확인한다.
+- `v1.1.2` 반영 후 실제 운영/로컬 DB에서 서버를 다시 띄워 `comment_notifications.is_read` 컬럼이 자동 보강되는지, `댓글 관리` 메뉴 unread dot과 `/api/comments/inbox/unread-count`가 더 이상 SQL 오류 없이 동작하는지 확인한다.
+- `v1.1.1` 댓글 복구 이후 다음 흐름을 우선 QA한다: 공개 티어표 프리뷰 하단 댓글 노출, 댓글 작성/답글 작성/본인 댓글 삭제, 댓글 관리 메뉴 red dot, 댓글 관리 화면에서 `안 읽은 댓글만 보기`와 `모두 읽음 처리`, 카드 클릭 후 해당 댓글 위치 스크롤.
+- 작성자 본인 티어표 편집 화면과 타인 티어표 프리뷰 화면에서 같은 댓글 카드가 모두 자연스럽게 보이는지, 새로고침 후에도 기존 에디터 회귀 없이 댓글 카드만 안정적으로 붙는지 확인한다.
+- 댓글 알림 unread count는 현재 접속 시와 라우트 이동 시 갱신되므로, 다른 탭에서 새 댓글이 생겼을 때 실시간 반영이 필요하면 이후 polling 또는 SSE 도입 여부를 검토한다.
+- `v1.1.0`에서 홈을 공개 티어표 피드로, 템플릿을 `/templates`로 분리했으므로 왼쪽 사이드 `홈 / 템플릿 / 나의 티어표 / 설정` 흐름과 검색 placeholder가 각 화면에서 자연스럽게 바뀌는지 확인한다.
+- 관리자 계정으로 일반 템플릿 목록(`/templates`)에 들어가도 비공개 템플릿이 보이지 않고, 관리자 화면에서는 여전히 비공개 템플릿이 관리 가능한지 확인한다.
+- 홈 피드의 추천 티어표와 최신 공개 티어표 카드가 데스크톱/태블릿/모바일에서 overflow 없이 안정적으로 보이는지 확인한다.
+- 아바타 fallback 이니셜이 썸네일 미등록 상태에서 계정명이 아니라 닉네임 첫 글자로 보이는지 홈/주제 허브/나의 티어표/즐겨찾기/팔로우 피드/검색 결과/사용자 프로필에서 각각 확인한다.
 
-## 배포 전 작업
-- NAS 실제 도메인 기준으로 `VITE_API_ORIGIN`, `CORS_ORIGINS`, `SESSION_SECRET`, `SESSION_COOKIE_SECURE`, `TRUST_PROXY` 값을 설정한다.
-- MariaDB 접속 정보 `DB_HOST`, `DB_PORT`, `DB_USER`, `DB_PASSWORD`, `DB_NAME`를 설정한다.
-- HTTPS를 사용할 경우 `SESSION_COOKIE_SECURE=true`로 설정하고 리버스 프록시 헤더 전달을 확인한다.
-- `backend/uploads/`, `backend/.sessions/`, MariaDB 백업 정책을 정한다.
-- 로컬 docker compose와 NAS MariaDB 사이의 버전 차이가 크지 않도록 유지한다.
+## 다음 작업자 인수인계
+- 현재 기준선은 `v1.0.104`다. 홈 피드와 댓글 기능은 이 버전 위에서 다시 구현해야 하며, 편집 화면 로딩/새로고침 안정성이 먼저다.
+- 홈 피드는 기존 템플릿 메인 화면과 분리된 별도 `/` 화면으로 두되, 데이터 원천은 `공개 티어표 목록` API로만 시작한다. 첫 단계에서는 `최근 공개 티어표` 목록과 `관리자 추천 티어표` 상단 섹션만 붙이고, 템플릿 화면 카드 문법을 최대한 재사용한다.
+- 홈 피드 카드는 새 컴포넌트를 급히 만들기보다, 이미 안정적이던 템플릿/목록 카드 문법을 공통 컴포넌트로 먼저 분리한 뒤 사용한다. 썸네일 비율, 아바타 fallback, 제목/메타 overflow를 카드마다 따로 다시 구현하지 않는다.
+- 댓글 기능은 티어표 편집기 본문 안으로 깊게 섞기보다, 저장된 티어표 하단의 독립 카드 섹션으로 붙인다. 편집 모드와 preview 모드 모두 같은 댓글 카드 컴포넌트를 재사용하는 구조가 안전하다.
+- 댓글 로딩은 에디터 메인 `loadEditorState()`와 분리해, 티어표 본문이 먼저 안정적으로 그려진 뒤 별도 비동기로 붙인다. 댓글 로딩/스크롤/읽음 처리 타이머는 라우트 변경 시 즉시 취소 가능해야 한다.
+- `commentId` 이동, 댓글 관리함, unread dot 같은 부가 기능은 댓글 목록 조회/등록이 안정화된 뒤 2단계로 구현한다. 처음부터 알림, 자동 스크롤, 읽음 처리까지 한 번에 붙이지 않는다.
+- 글로벌 로딩 화면이나 initial loading state는 에디터 본문 전체를 조건부로 갈아끼우기보다, 앱 셸 수준의 고정 오버레이 또는 최소한의 skeleton으로 처리한다. Teleport 우측 레일, RouterView, 편집기 내부 DOM을 동시에 조건부 마운트/언마운트하는 방식은 피한다.
+- 티어표 편집 화면에서는 새로고침 직후 다음 세 가지 QA가 항상 선행되어야 한다: `오른쪽 아이템 풀 복구`, `왼쪽 메뉴 이동 가능`, `콘솔 Vue patch/unmount 오류 없음`.
+
+## 단기 확인
+- `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한다.
+- 뷰어 모드 오른쪽 레일이 공통 로컬 레일 마운트를 다시 사용하게 바뀌었으므로, 데스크톱/태블릿 폭에서 광고가 상단에 나오고 액션 카드가 하단으로 내려가며, 우측 레일 접기/펼치기 시 콘텐츠가 깨지지 않는지 확인한다.
+- `v1.4.39`에서 기존 저장 티어표/복사본을 다시 열 때 최신 템플릿 기본 아이템이 미사용 풀로 합류하도록 바꿨으므로, `12345`로 저장한 티어표를 만든 뒤 관리자 템플릿에 `6789`를 추가하고 다시 열거나 복사했을 때 `6789`만 미사용 상태로 나타나는지 확인한다.
+- 같은 정책에서 관리자 템플릿에서 삭제한 기존 아이템은 과거 저장 티어표의 그룹/풀 안에 남아 있으면 계속 보존되어야 하므로, `5`번을 삭제해도 이미 사용한 옛 티어표에서 사라지지 않는지 다시 확인한다.
+- `v1.4.39`에서 주제별 공개 티어표 화면을 `pageWrap`으로 감쌌으므로, 좁은 브라우저 폭에서 검색창이 아래 줄로 내려온 상태에서도 검색창과 카드 목록 사이 간격이 홈/즐겨찾기 화면과 비슷하게 유지되는지 확인한다.
+- `v1.4.38`에서 운영자 계정의 최고 관리자 관리 버튼을 프런트에서 비활성화했으므로, 최고 관리자/일반 운영자/일반 회원 세 계정 조합으로 회원 정보 수정, 썸네일 변경, 비밀번호 초기화, 삭제 버튼 활성 상태와 서버 차단 응답이 기대대로 맞는지 확인한다.
+- 관리자 회원 정보 수정에서는 예약어 닉네임을 허용하도록 예외를 열었으므로, 일반 회원가입/개인 프로필 수정은 여전히 예약어가 막히고 관리자 수정만 저장되는지 한 번 더 QA한다.
+- `preview=1` 화면이 공통 앱 셸을 그대로 쓰도록 바뀌었으므로, 좌측 레일 접기/펼치기, 우측 레일 닫기/열기, 중앙 헤더 타이틀, 메인 배경색, 오른쪽 광고와 카피라이트 정렬이 홈 화면과 같은 문법으로 보이는지 비교 QA한다.
+- 프리뷰 우측 광고에 `padding-top: 78px`를 넣었으므로, 데스크톱/태블릿 폭에서 광고 시작 위치가 너무 내려가거나 모바일 오버레이 레이아웃에서 어색해지지 않는지 확인한다.
+- `v1.4.33`에서 회원가입에 닉네임 입력과 중복/예약어 검사를 붙였으므로, 실제 QA에서는 이메일 중복, 닉네임 중복, 예약 닉네임, 프로필 닉네임 변경, 관리자 회원 수정 흐름이 같은 규칙으로 막히는지 확인한다.
+- 테마는 저장값이 없을 때 무조건 다크로 시작하게 바꿨고 설정 화면 토글도 다시 열었으므로, 첫 접속/새 브라우저/다른 운영체제에서 기본 다크 시작과 수동 토글 저장이 그대로 정상인지 확인한다.
+- 관리자 템플릿 썸네일 드롭존 빈 상태 아이콘 제거와 아이템 상세 모달 썸네일 프리뷰가 들어갔으므로, 관리자 화면에서 썸네일 교체와 아이템 선택 모달 가독성을 한 번 더 QA한다.
+- `v1.4.32`에서 파일명·composable·관리자 클래스명·백엔드 헬퍼 함수명까지 `topic/template` 기준으로 끝까지 정리했으므로, 다음 실제 QA는 기능 동작 확인에 집중하고 이름층 회귀는 별도 체크만 하면 된다.
+- 현재 `backend/src`, `frontend/src`, `backend/scripts`, `backend/index.js` 기준 `game/Game` 검색은 0건이므로, 이후 남는 확인 작업은 서비스 동작과 배포 환경 쪽에만 집중한다.
+- `v1.4.31`에서 `/games` redirect와 legacy DB 마이그레이션까지 제거했으므로, 실제 QA에서는 오직 현재 주소(`/topics`, `/admin/templates`)와 새 DB 기준 흐름만 집중적으로 확인하면 된다.
+- 현재 `backend/src`, `frontend/src` 기준 `game` 검색은 0건이므로, 이후 남는 확인 작업은 기능 QA와 운영 환경 배포 점검 쪽에만 집중한다.
+- `v1.4.30`에서 빈 로컬 MariaDB 재초기화 검증까지 통과했으므로, 다음 실제 QA에서는 “기존 데이터가 있는 환경”에서 `ensureData()`가 저장 티어표와 템플릿 요청 스냅샷의 legacy origin을 정상 정규화하는지만 추가 확인하면 된다.
+- 개발 환경 기준으로는 새 DB에서 `legacyTierItems=0`, `legacyRequestItems=0`가 확인됐으므로, 이후에는 `origin: 'game'` 호환 코드를 언제 완전히 제거할지 운영 데이터 기준으로만 판단하면 된다.
+- `v1.4.29`에서 새 티어표 데이터 기본 origin을 `template`로 바꿨으므로, 저장 후 다시 열기/복사/요청 생성/관리자 가져오기 흐름에서 예전 데이터와 새 데이터가 함께 섞여도 정상 동작하는지 한 번 더 확인한다.
+- 관리자 아이템 라이브러리 응답 키가 `linkedTemplates`로 정리됐으므로, 사용자 업로드 이미지 삭제 차단과 템플릿 이동 모달이 그대로 정상 동작하는지 확인한다.
+- 현재 남아 있는 `game`는 레거시 redirect, DB 마이그레이션, 호환용 origin만 남겨둔 상태이므로, `v1.4` QA 후에는 이 레거시 층을 언제 제거할지 별도 마감 판단만 하면 된다.
+- `v1.4.28`에서 관리자 템플릿 상세 상태와 기본 아이템 정렬 상태 이름을 `template` 기준으로 더 정리했으므로, 관리자 템플릿 선택/공개 전환/기본 아이템 정렬 저장이 그대로 정상인지 한 번 더 확인한다.
+- 새 템플릿 썸네일/기본 아이템 업로드는 이제 `topics` 디렉터리로 저장되므로, 실제 업로드 후 최적화 작업 분류와 관리자 최근 작업 표시가 자연스럽게 보이는지 확인한다.
+- 현재 코드 검색에 남는 `game`는 레거시 redirect, DB 마이그레이션, `origin: 'game'` 호환이 중심이므로, 이 층까지 실제로 없앨지 여부는 `v1.4` QA 후 안정성 기준으로 다시 판단한다.
+- `v1.4.27`에서 관리자 내부 탭/라우트 이름과 DB alias export까지 더 정리했으므로, 관리자 템플릿 탭 이동, 커스텀 아이템에서 템플릿 관리로 점프, 템플릿 요청 확인하기 이동이 모두 정상인지 한 번 더 확인한다.
+- `v1.4.26`에서 관리자 기본 경로를 `/admin/templates`로 바꾸고 `/api/admin/templates`만 남겼으므로, 관리자 진입/새로고침/뒤로가기와 템플릿 생성·썸네일 업로드·아이템 추가가 모두 정상인지 확인한다.
+- `v1.4.26`에서 공개 API `/api/games`를 제거했으므로, 실제 서버 재시작 후 홈/주제 상세/티어표 편집기에서 `/api/topics`만으로 모두 정상 동작하는지 확인한다.
+- 오래된 관리자 주소 `/admin/games`는 redirect만 남겼으므로, 북마크로 직접 진입해도 `/admin/templates`로 자연스럽게 바뀌는지 본다.
+- `v1.4.25`에서 티어표/요청 응답의 `gameId / gameName` 호환 키를 실제로 제거했으므로, 브라우저에서 홈 목록, 주제 상세, 저장된 티어표 열기, 즐겨찾기, 검색 결과, 관리자 템플릿 요청/전체 티어표 관리가 모두 정상 동작하는지 한 번 더 QA한다.
+- `v1.4.25`에서 관리자 route query와 편집기 저장/request payload를 `topicId` 기준으로 옮겼으므로, `/admin/templates?topicId=...`, `/admin/tierlists?mode=all&topicId=...`, 티어표 저장, 템플릿 요청, 추가 아이템 가져오기 흐름이 모두 정상인지 확인한다.
+- 남은 `gameId`는 의도적으로 유지한 레거시 주소 alias(`/games/:gameId`)와 관리자 alias route path뿐이므로, 오래된 외부 링크 진입 후 주소가 새 `topic` 체계로 자연스럽게 정규화되는지만 마지막으로 본다.
+- `v1.4.24`에서 공개 주제 API와 관리자 템플릿 API의 기본 응답 키를 더 줄였으므로, 실제 브라우저에서 홈 목록, 즐겨찾기 토글, 주제 상세, 티어표 편집기, 관리자 템플릿 공개 전환/생성이 모두 그대로 정상인지 한 번 더 QA한다.
+- 다음 단계에서는 `mapTierListRow`, `mapTemplateRequestRow`, 관리자 route query, 저장 payload 입력 호환에 남아 있는 `gameId/gameName/sourceGameId/targetGameId`를 끝까지 걷어낼지 최종 결정한다.
+- `v1.4.23`에서 프런트 `api.js`의 레거시 `game` 별칭 메서드와 티어표 저장/요청 내부 payload를 더 걷어냈으므로, 실제 브라우저에서 저장/복사/템플릿 요청/관리자 요청 카드 표시가 그대로 정상인지 한 번 더 QA한다.
+- 다음 단계에서는 응답의 `game`, `gameId`, `gameName`, `sourceGameId`, `targetGameId` 호환 키를 실제로 제거할지, 아니면 `v1.4` 마감 후 안정화 기간을 두고 걷어낼지 최종 결정한다.
+- `v1.4.22`에서 공개 주제 라우트 파일을 `topics.js`로 옮겼으므로, 실제 서버 재기동 후 `/api/topics`와 `/api/games` 호환 경로가 모두 정상 응답하는지 한 번 더 QA한다.
+- 다음 단계에서는 응답의 `game`, `gameId`, `gameName` 호환 키를 실제로 어느 범위까지 제거할지, 그리고 관리자/티어표 저장 payload에서 남은 `gameId` 입력 호환을 어디까지 유지할지 최종 결정한다.
+- `v1.4.21`에서 홈/주제 상세/에디터/나의 티어표/즐겨찾기/검색 결과/관리자 템플릿 생성이 `topic/template` 응답 키를 우선 읽도록 바뀌었으므로, 실제 브라우저에서 즐겨찾기 토글과 에디터 이동, 관리자 신규 템플릿 생성이 모두 정상인지 한 번 더 QA한다.
+- 다음 단계에서는 실제 응답의 `game`, `gameId`, `gameName` 호환 키를 어디까지 남길지, 그리고 `/api/games` 호환 경로와 `games.js` 파일명을 언제 걷어낼지 최종 범위를 정한다.
+- `v1.4.20`에서 백엔드 `db` export와 공개/관리자 라우트 내부 이름을 `topic/template` 기준으로 정리했으므로, 실제 브라우저와 관리자 화면에서 주제 목록/즐겨찾기/템플릿 생성/요청 반영 흐름이 모두 정상인지 한 번 더 QA한다.
+- 다음 단계에서는 남아 있는 호환 응답 키 `game`, `gameId`, `gameName`과 레거시 route 파일명 `games.js`를 어디까지 실제 `topic` 이름으로 마감할지 범위를 결정한다.
+- `v1.4.19`에서 템플릿 기본 아이템 삭제는 기존 저장 티어표를 보존하도록 정책이 바뀌었으므로, 실제 운영 데이터에서 삭제 후 예전 티어표의 배치/대기풀이 그대로 유지되는지와 새 티어표 생성 시에만 아이템이 빠지는지 한 번 더 QA한다.
+- `v1.4.19`에서 삭제 전 영향 개수 경고를 붙였으므로, 공개/비공개 티어표가 섞인 템플릿에서 숫자가 기대대로 보이는지와 삭제 취소/확정 후 스크롤 위치가 안정적으로 유지되는지 한 번 더 QA한다.
+- `v1.4.19`에서 템플릿 썸네일 등록 아이콘은 썸네일이 있을 때 숨기도록 정리했으므로, 썸네일 있음/없음 상태 전환과 드래그 오버 활성 상태에서 안내 문구가 겹치지 않는지 한 번 더 QA한다.
+- `v1.4.18`에서 관리자 템플릿 요청 카드 썸네일 클릭을 브라우저 기본 새 창 열기로 정리했으므로, 요청 썸네일 클릭 시 오류 없이 새 탭이 열리고 `전체 티어표 관리` 썸네일 모달 동작과도 섞이지 않는지 한 번 더 QA한다.
+- `v1.4.17`에서 주제 컬렉션 카드 클릭 시 에디터 진입 무한 루프를 끊었으므로, 새 티어표 만들기/기존 티어표 열기/공유 링크 열기 세 흐름이 모두 정상 진입하는지 한 번 더 QA한다.
+- `v1.4.16`에서 장애 전용 안내 화면을 붙였으므로, 실제로 `db_init_failed`와 네트워크 차단 상황에서 각각 `서비스 점검 중`, `서버 연결 확인 중` 화면이 기대대로 분기되는지 한 번 더 QA한다.
+- `v1.4.15`에서 `ensureData()`가 실제 운영 DB 설정으로 `ok`까지 통과한 것은 확인했으므로, 이제는 브라우저에서 `/api/auth/me`, `/api/auth/meta`, `/api/topics` 500이 실제로 사라졌는지와 기존 세션 로그인 흐름이 복구됐는지 한 번 더 QA한다.
+- `v1.4.14`부터는 DB 마이그레이션이 rename 대신 복사 기반으로 바뀌었으므로, 실제 운영 DB에서 서버 재시작 후 `topics` 계열 테이블과 `tierlists.topic_id`, `template_requests.source_topic_id/target_topic_id`가 기대대로 채워지는지 먼저 확인한다.
+- 레거시 `/games/...`와 `/editor/:gameId/...`는 redirect로 남겼으므로, 오래된 북마크 진입 후 주소가 `/topics/...`, `/editor/:topicId/...`로 자연스럽게 정규화되는지 한 번 더 QA한다.
+- `v1.4.13`부터 DB 실명도 `topics / topic_items / favorite_topics / topic_id` 기준으로 옮겼으므로, 기존 운영 DB에서 서버 재시작 후 자동 마이그레이션이 한 번만 자연스럽게 수행되는지 먼저 확인한다.
+- 백엔드 응답은 현재 `topicId / topicName`과 `gameId / gameName`을 함께 내려주고 있으므로, 다음 단계에서는 실제 프런트/관리자에서 더 이상 `gameId` fallback이 필요 없는 지점을 확인해 호환 키 제거 순서를 정한다.
+- 티어표 공개 목록, 관리자 전체 티어표 관리, 저장/요청 API는 `topicId`를 우선 받도록 바꿨으므로, 실제 브라우저에서 검색/저장/공유/관리자 필터가 모두 같은 파라미터 체계로 자연스럽게 이어지는지 한 번 더 QA한다.
+- `/api/topics`, `/api/admin/templates` alias를 연 뒤 프런트 호출도 새 경로로 옮겼으므로, 실제 브라우저에서 주제 목록/즐겨찾기/주제 상세/관리자 템플릿 관리가 모두 같은 세션으로 자연스럽게 동작하는지 한 번 더 QA한다.
+- 프런트 API 호출부는 `topic/template` 의미 이름으로 옮겼으므로, 다음 단계에서는 `api.js` 안의 레거시 alias를 얼마나 더 유지할지와 백엔드 API 경로를 실제로 바꿀지 범위를 정한다.
+- 관리자 템플릿/주제 화면과 홈·에디터·즐겨찾기에서 새 API 이름층으로 바뀐 뒤에도 저장, 즐겨찾기, 템플릿 생성, 아이템 정렬 흐름이 자연스러운지 한 번 더 QA한다.
+- `topicHub / topicId`를 기본 라우트 기준으로 세웠으므로, 기존 `/games/...` 북마크와 새 `/topics/...` 주소 양쪽에서 주제 상세와 에디터 진입이 모두 자연스럽게 이어지는지 한 번 더 QA한다.
+- 경로 헬퍼를 사용자 주요 화면에 연결했으므로, 로그인 리다이렉트·공유 프리뷰·복사본 이동·주제 복귀 흐름이 실제 브라우저에서 모두 같은 주소 체계로 자연스럽게 이어지는지 한 번 더 QA한다.
+- 다음 단계에서는 `router/index.js`의 `gameHub`, `route.params.gameId`, `api.getGame`처럼 남아 있는 프런트 내부 이름도 어디까지 `topic/template` 의미로 감쌀지 범위를 더 좁힌다.
+- 주제 상세 화면 제목은 ID fallback 대신 로딩 문구를 쓰도록 바꿨으므로, 직접 진입·뒤로가기·다른 주제로 연속 이동할 때 헤더가 깜빡이거나 이전 제목을 잠깐 유지하지 않는지 한 번 더 QA한다.
+- 검색 결과 화면도 `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한다.
+- 왼쪽 사이드 메뉴와 각 화면 타이틀을 한글 기준으로 맞췄으므로, 홈/나의 티어표/즐겨찾기/설정 진입 시 실제 체감이 자연스럽고 중복 표현이 어색하지 않은지 한 번 더 QA한다.
+- 사용자 노출 용어는 `주제 / 템플릿` 기준으로 계속 걷어내고 있으므로, 홈/주제 화면/관리자 템플릿 관리에서 어색하게 남은 `게임` 문구가 없는지 한 번 더 QA한다.
+- 내부 모델명은 아직 `game`을 유지하므로, 다음 단계에서는 문서와 보조 화면 문구를 더 정리할지, 아니면 내부 리네이밍 계획을 따로 잡을지 결정한다.
+- 주제 목록과 티어표 카드 썸네일은 기본 이미지 드래그를 막았으므로, 데스크톱 브라우저에서 클릭/드래그 시 원본 이미지 프리뷰가 더 이상 뜨지 않는지 한 번 더 QA한다.
+- 왼쪽 레일 활성 배경은 공용 인디케이터가 이동하는 방식으로 바뀌었으므로, 홈/내 티어표/즐겨찾기/설정 전환과 레일 접힘 상태 양쪽에서 위치 보정이 자연스러운지 한 번 더 QA한다.
+- 로그인 화면 상단 토글은 이동형 인디케이터로 바뀌었으므로, 데스크톱과 모바일에서 `로그인 / 회원가입` 전환 애니메이션이 어색하지 않고 포커스/클릭 상태도 자연스러운지 한 번 더 QA한다.
+- 관리자 카드 설명 줄임은 `line-clamp` 표준 속성까지 함께 선언했으므로, 실제 브라우저별 표시 차이가 없는지 한 번 더 QA한다.
+- 사용하지 않는 기본 자산을 정리했으므로, 배포본에서 누락 참조 없이 파비콘/공유 썸네일/좌측 레일 아이콘이 정상 노출되는지 한 번 더 QA한다.
+- 공유 썸네일 `og-card`는 이번에 이미지 수정본까지 함께 반영했으므로, 실제 메신저 미리보기에서 최신 그림이 캐시 갱신 후 정상 노출되는지 한 번 더 QA한다.
+- 홈페이지 공유 메타와 새 `og-card.png`는 이번에 처음 붙였으므로, 카카오톡/디스코드/슬랙/모바일 브라우저에서 제목·설명·썸네일이 기대대로 보이는지 한 번 더 QA한다.
+- 파비콘은 `svg + 32px png + apple-touch-icon` 조합으로 정리했으므로, 데스크톱 브라우저 탭과 iOS 홈 화면 추가에서 모두 정상 노출되는지 한 번 더 QA한다.
+- 티어표 `아이콘 크기`는 이제 저장 데이터로 승격됐으므로, 저장 후 재진입/프리뷰/복사본 생성에서 같은 크기가 유지되는지 한 번 더 QA한다.
+- 티어표 편집/프리뷰 모바일 열 배지는 새로 붙였으므로, 실제 좁은 화면에서 칸 상단 배지와 아이템 썸네일이 겹치지 않고 열 구분이 자연스러운지 한 번 더 QA한다.
+- 모바일 열 배지는 같은 구간에서 상단 열 제목을 숨기도록 다시 맞췄으므로, 720px 안팎뿐 아니라 980px 이하 전 구간에서 중복 표기 없이 자연스러운지 한 번 더 QA한다.
+- 모바일 티어표 편집 레이아웃은 행 라벨 폭을 다시 덮어쓰던 규칙을 걷어냈으므로, 실제 980px 이하 구간에서 행 라벨이 과하게 넓지 않고 칸 폭을 충분히 남기는지 한 번 더 QA한다.
+- 프리뷰 완성본 하단 메타는 새로 붙였으므로, 작성자/저장 시각이 공개 열람 화면과 이미지 다운로드 결과 기준에서 모두 자연스럽게 읽히는지 한 번 더 QA한다.
+- 관리자 템플릿 요청 카드는 썸네일 클릭이 새창 열기 역할로 바뀌었으므로, 썸네일 클릭과 `확인하기` 액션이 서로 헷갈리지 않는지 한 번 더 QA한다.
+- 티어표 만들기 화면의 `공유하기`는 저장된 티어표에서만 노출되므로, 저장 직후/수정 중/복사본/읽기 전용 상태 각각에서 노출 조건과 클립보드 복사가 자연스러운지 한 번 더 QA한다.
+- 우측 카피라이트는 이제 공통 오른쪽 레일 footer이므로, 관리자 화면뿐 아니라 홈/프로필 등 오른쪽 사이드가 보이는 화면에서도 같은 최하단 위치에 유지되는지 한 번 더 QA한다.
+- 왼쪽 레일 축소 상태의 하단 액션 아이콘은 홈과 주제 화면에서 서로 다른 아이콘을 쓰도록 나눴으므로, 실제로 두 문맥이 한눈에 구분되는지 한 번 더 QA한다.
+- 왼쪽 레일 축소 상태 최하단의 `티어표 만들기` 아이콘 버튼은 새로 추가했으므로, 홈/주제 화면에서 실제로 같은 위치 감각으로 동작하는지 한 번 더 QA한다.
+- 관리자 우측 카피라이트 문구는 사이드바 내부 최하단으로 다시 옮겼으므로, 실제 관리자 화면에서 스크롤/창 크기 변화에도 계속 보이는지 한 번 더 QA한다.
+- 왼쪽 레일 축소 상태는 아이콘 줄 높이를 50px 기준으로 통일했으므로, 실제 데스크톱에서 아바타/검색/메뉴 아이콘이 시각적으로 같은 리듬으로 보이는지 한 번 더 QA한다.
+- 왼쪽 레일 검색은 이제 항상 주제 템플릿 검색으로 홈으로 이동하므로, 홈이 아닌 화면에서 사이드 검색 후 주제 목록 결과로 자연스럽게 이동하는지 한 번 더 QA한다.
+- 앱 왼쪽 사이드 레일은 접힘 상태 레이아웃을 다시 손봤으므로, 데스크톱에서 접기/펼치기 반복 시 아바타 영역 높이, 아이콘 중앙 정렬, 검색 버튼 간격, 네비게이션 히트 영역이 모두 자연스러운지 한 번 더 QA한다.
+- 관리자 우측 사이드바 하단 카피라이트 링크는 새 창 외부 링크로 바꿨으므로, 실제 클릭 시 `zenn.town` 연결과 hover 대비가 자연스러운지 한 번 더 QA한다.
+- 관리자 아이템 상세 모달은 공통 패딩 예외 처리를 다시 넣었으므로, 대형 상세 모달과 일반 템플릿 선택 모달이 각각 기대한 크기로 보이는지 한 번 더 QA한다.
+- 아이템 관리 모달의 공용 템플릿 선택기에서는 이미 연결된 템플릿이 비활성화되므로, 실제 운영 데이터에서 중복 연결 방지와 `이미 추가됨` 표시가 기대대로 읽히는지 한 번 더 QA한다.
+- 공용 템플릿 선택 모달을 아이템 관리 모달에도 붙였으므로, 관리자 `템플릿 관리 / 전체 티어표 관리 / 아이템 관리` 세 흐름에서 같은 검색/선택 UX가 자연스럽게 느껴지는지 한 번 더 QA한다.
+- 관리자 `/admin/games?gameId=...` 직접 진입과 새로고침에서 선택 템플릿이 정상 복원되고 콘솔 오류가 없는지 한 번 더 QA한다.
+- 공용 `템플릿 선택` 검색 모달은 새로 붙였으므로, 템플릿 관리 선택/전체 티어표 관리 필터 양쪽에서 검색어 입력, 선택, 해제, 뒤로가기 흐름을 한 번 더 QA한다.
+- 관리자 `전체 티어표 관리`의 템플릿 필터와 관리 모달은 새로 붙였으므로, 실제 운영 데이터에서 필터 전환 후 공개/비공개 집계, 제목 수정, 비공개 전환, 삭제 흐름이 자연스럽게 이어지는지 한 번 더 QA한다.
+- 관리자 템플릿 관리 상단의 `전체 / 공개 / 비공개` 티어표 수치와 전체 티어표 관리 상단 집계가 실제 운영 데이터와 맞는지, 공개 전환 직후 숫자가 자연스럽게 갱신되는지 한 번 더 QA한다.
+- 관리자 아이템 상세 모달은 왼쪽 선택 카드와 오른쪽 상세 본문으로 다시 정리했으므로, 데스크톱/모바일에서 긴 템플릿 목록과 긴 참조 목록이 각각 자연스럽게 스크롤되는지 한 번 더 QA한다.
+- 관리자 계정으로 `/admin/...`을 직접 새로고침했을 때 홈으로 튕기지 않고 그대로 유지되는지, 실제 세션이 살아 있는 브라우저와 만료된 브라우저 각각에서 한 번 더 QA한다.
+- 티어표 만들기 화면의 보드 드롭존은 점선/높이/중앙 정렬로 존재감이 커졌으므로, 데스크톱과 모바일에서 파일 선택 버튼과 안내 문구 밀도를 한 번 더 QA한다.
+- 관리자 썸네일 드롭존과 기본 아이템 추가 드롭존은 에디터 드롭존과 시각 문법을 맞췄으므로, 라이트모드와 좁은 화면에서 아이콘 대비와 배경 밝기가 과하지 않은지 한 번 더 QA한다.
+- 커스텀 이미지가 많은 티어표를 저장할 때 커스텀 이름 정리 목록과 미배치 아이템 영역 순서가 실제로 안정적으로 유지되는지, 10장 이상 업로드한 상태로 한 번 더 QA한다.
+- 관리자 이미지 최적화 현황은 최근 작업 라벨을 읽기 쉬운 이름으로 바꿨으므로, 실제 운영 데이터에서 `커스텀 아이템 / 티어표 썸네일 / 게임·템플릿 이미지 / 프로필 아바타` 흐름이 기대와 맞게 찍히는지 한 번 더 QA한다.
+- 관리자 게임 설정 카드를 본문 상단으로 옮겼으므로, 긴 게임 목록 상태에서 선택-썸네일 교체-공개 전환-삭제 흐름이 스크롤 없이 자연스러운지 한 번 더 QA한다.
+- `누락 참조 정리`는 실제 파일이 없는 참조만 지우도록 넣었으므로, 운영 데이터에서 실행했을 때 누락 수치가 줄고 대표 썸네일/티어표/템플릿 요청 표시가 기대대로 비워지는지 한 번 더 QA한다.
+- 아이템 관리의 같은 이미지 참조 요약과 상세 모달은 붙였으므로, 실제 운영 데이터에서 카드 수치와 모달 목록이 기대한 참조 관계와 맞는지 한 번 더 QA한다.
 
 ## 중기 개선
-- 게임/이미지/티어표 삭제 후 복구 또는 수정 이력 관리 기능을 추가한다.
-- 자동 테스트와 최소한의 배포 체크리스트를 만든다.
-- 관리자용 커스텀 아이템 승인/복제, 아이템 정렬 UI를 추가한다.
-- 홈 화면 게임 카드와 `직접 티어표 만들기` 카드의 노출 순서를 관리자가 직접 조정할 수 있는 정렬 기능을 추가한다.
-- 회원 검색/필터, 일괄 권한 변경 같은 관리 보조 기능을 추가한다.
+- 목록 카드의 작성자 메타를 카드 전체 열기 버튼과 충돌 없이 직접 프로필 링크로 분리하는 후속 UX를 검토한다.
+- 추천 티어표는 전체 누적 즐겨찾기 기준 정렬/필터부터 붙였으므로, 다음 단계에서는 최근 N일 기준 급상승 추천 후보 필터와 추천 섹션 노출 개수 설정을 관리자 화면에 추가할지 검토한다.
+- 이메일 인증/비밀번호 재설정 1차 구현이 들어갔으므로, 다음 단계에서는 Gmail 발신 기반이 실제 운영에서 스팸함으로 얼마나 가는지 보고 필요하면 Cloudflare DNS의 SPF/DKIM/DMARC와 도메인 발신 주소 전환을 정리한다.
+- 구글 계정 로그인은 아직 붙이지 않았으므로, 이메일 인증 안정화 후 Google OAuth 클라이언트를 만들고 일반 이메일 계정과 같은 이메일의 구글 계정을 자동 연결할지 정책을 먼저 결정한다.
+- 신규 템플릿 요청은 현재 `첫 생성 1회 후 요청과 게임을 연결해 재사용` 단계까지 정리했으므로, 다음 단계에서는 정말로 게임을 DB에 만들기 전까지 임시 작업 상태로 유지할지 여부를 운영 흐름 기준으로 결정한다.
+- 관리자 템플릿 요청은 동일 `src` 중복 생성 방지와 `연결된 게임/이미 반영 n개` 표시까지 붙였으므로, 이후에는 요청별 반영 이력(예: 어떤 아이템을 언제 반영했는지)까지 별도로 남길지 검토한다.
+- 관리자 URL 분리는 시작했으므로, 다음 단계에서는 `AdminView.vue` 단일 대형 파일을 섹션별 뷰/컴포저블로 쪼개고 직접 진입 시 선택 게임/요청 작업 상태 복원 범위도 함께 정리한다.
+- 관리자 본문 컴포넌트 분리와 `게임/템플릿 요청/회원 관리/아이템 관리/목록 관리` composable 분리는 시작했으므로, 다음 단계에서는 공통 모달 상태를 어느 계층에서 소유할지 정리하고 남은 관리자 유틸 함수를 더 줄인다.
+- 관리자 화면은 섹션 경로 분리까지 끝났으므로, 다음 단계에서는 `AdminView.vue`를 실제 레이아웃 뷰와 섹션별 라우트 컴포넌트로 더 쪼갤지 결정한다.
+- 관리자 공통 스타일은 `adminUiScope` 기준으로 다시 묶었으므로, 다음 단계에서는 각 섹션을 별도 파일로 완전히 분리할 때 스타일도 `admin.css` 또는 섹션별 스타일로 옮길지 결정한다.
+- 관리자 요청 카드 밀도는 줄였으므로, 다음 단계에서는 전체 티어표 카드와 요청 카드의 상단/하단 액션 정렬을 한 번 더 통일할지 비교 QA한다.
+- 신규 템플릿 요청 썸네일 기본 승계는 붙였으므로, 다음 단계에서는 요청 아이템 반영 후 `처리 완료`까지의 관리자 흐름을 실제 데이터로 한 번 더 QA한다.
+- 관리자 게임 아이템 순서 저장은 추가됐으므로, 다음 단계에서는 새 아이템 추가 직후 `자동 맨 앞 배치`와 `관리자 수동 고정 순서`의 우선순위를 실제 운영 흐름 기준으로 한 번 더 QA한다.
+- 관리자 템플릿 요청 미리보기는 실제 완성본 iframe 방식과의 체감 차이를 마지막으로 한 번 더 QA한다.
+- 라이트모드/다크모드 2차 보정까지 반영했으므로, 남은 작업은 전체 화면을 실제 사용 흐름으로 돌려 보며 대비·명도·아이콘 가독성을 미세하게 QA하는 최종 테마 점검 단계로 가져간다.
+- 라이트모드 공통 토큰 재정비와 카드/아바타/즐겨찾기 버튼 보정까지 반영했으므로, 다음 QA에서는 로그인/홈/주제 허브/에디터/관리자 순으로 실제 플로우를 돌리며 남은 하드코딩 색과 과한 대비가 없는지 확인한다.
+- 관리자용 티어표 승인/숨김 처리, 아이템 정렬 UI를 추가한다.
+- 회원 일괄 작업(다중 선택, 활동 저조 계정 정리) 같은 관리 보조 기능을 추가한다. 비밀번호는 평소 운영자가 직접 덮어쓰기보다 이메일 재설정 흐름을 우선하므로, 관리자 일괄 비밀번호 초기화는 별도 긴급 대응 정책이 생긴 뒤에만 다시 검토한다.
 - 티어 행 프리셋 저장, 색상 관리, 행 복제 같은 고급 편집 기능을 추가한다.
+- 로그인/회원가입/관리자 비밀번호 초기화에 요청 횟수 제한을 추가한다.
+- 업로드 파일은 MIME 타입뿐 아니라 파일 시그니처 기반 검증까지 확장한다.
+- production에서 SESSION_SECRET 누락 시 서버가 부팅되지 않도록 강제한다.
+- helmet 기반 보안 헤더와 업로드 정적 응답 헤더를 정리한다.
+- 책 아이콘 기반 사용법 모달은 제작 흐름뿐 아니라 복사, 템플릿 업데이트 요청, 새 템플릿 요청까지 확장했으므로, 실제 16:9 스크린샷 자산과 단계별 문구를 운영 톤에 맞게 채운다.
+- 관리자 아이템 라이브러리에서 동일 이미지(src)를 여러 템플릿이 공유하는 경우, 필요하면 묶어서 보거나 대표 카드로 합쳐 보는 후속 정리 옵션을 검토한다.
+- 라이트모드 최종 QA 시 홈/설정/관리자/에디터를 실제 사용 흐름으로 돌리며, 남아 있는 하드코딩 텍스트 색과 플레이스홀더 배경을 한 번 더 점검한다.
+- 템플릿 기본 아이템 다중 업로드는 8개까지 성공, 9개 이상 한 번에 전송 시 실패하는 사례가 있었으므로 NAS/리버스 프록시의 업로드 body 제한(`client_max_body_size` 등)과 실제 응답 코드를 운영 환경에서 확인한다.
+- 프리뷰 우측 광고 레일을 붙였으므로, 실제 운영 환경에서 광고가 로드될 때 프리뷰 본문 폭이 과하게 줄지 않는지 데스크톱 기준으로 한 번 더 확인한다.
+- 관리자 아이템 라이브러리는 보관 자산까지 노출되므로, 이후에는 `활성 템플릿 / 보관 자산` 분리 필터나 그룹 보기까지 검토한다.
+- 가이드 모달과 관리자 아이템 모달은 현재 같은 톤의 큰 셸을 쓰므로, 이후 공통 모달 레이아웃 컴포넌트로 분리할지 검토한다.
+- 관리자 아이템 라이브러리 이름 변경은 템플릿·사용자 업로드·보관 자산까지 모두 가능하므로, 이후에는 일괄 이름 정리나 중복 이름 감지 보조 기능까지 검토한다.
+- 관리자 템플릿 요청 카드와 전체 티어표 카드가 같은 문법으로 맞춰졌으므로, 이후에는 라이트모드까지 포함해 두 카드의 썸네일 높이·입력창 밀도·아이템 그리드를 한 번 더 비교 QA한다.
+- 템플릿 요청 저장 흐름은 저장된 티어표 기준으로 바뀌었으므로, 이후 실제 데이터로 빈 제목 저장 시 자동 생성 제목·요청 버튼 노출 시점·관리자 요청 미리보기 밀도를 한 번 더 비교 QA한다.

docs/ugreen-nas-deploy.md

@@ -0,0 +1,196 @@
+# UGREEN NAS 배포 가이드
+
+## 개요
+- 운영 기본 컨테이너는 `mariadb`, `backend`, `frontend` 3개다.
+- `phpmyadmin`은 필요할 때만 `admin` 프로필로 추가 실행한다.
+- 외부 공개는 `frontend` 컨테이너 하나만 하고, `/api`, `/uploads`, `/health`는 내부적으로 `backend`로 프록시한다.
+- 도메인은 `https://tmaker.sori.studio` 기준으로 설정한다.
+
+## 파일
+- 프로덕션 컴포즈: [docker-compose.prod.yml](/Users/bicute/Desktop/zenn.dev/tier-cursor/docker-compose.prod.yml)
+- 백엔드 이미지: [backend/Dockerfile](/Users/bicute/Desktop/zenn.dev/tier-cursor/backend/Dockerfile)
+- 프런트 이미지: [frontend/Dockerfile](/Users/bicute/Desktop/zenn.dev/tier-cursor/frontend/Dockerfile)
+- 프런트 Nginx 프록시: [frontend/nginx.conf](/Users/bicute/Desktop/zenn.dev/tier-cursor/frontend/nginx.conf)
+- 환경변수 예시: [.env.production.example](/Users/bicute/Desktop/zenn.dev/tier-cursor/.env.production.example)
+
+## 1. 프로젝트 업로드
+- NAS 작업 폴더에 현재 프로젝트를 그대로 업로드한다.
+- 기존 로컬 MariaDB 내용은 무시하고 새 운영 DB로 시작해도 된다.
+
+## 1-1. 권장 방식: Git clone 기반 운영
+- 수동 복사는 처음 1회에는 가능하지만, 이후부터는 로컬과 NAS가 쉽게 어긋난다.
+- 권장 방식은 NAS 작업 폴더를 Git 저장소로 두고, 로컬에서 작업 후 `push`, NAS에서는 `pull`만 하는 구조다.
+- 추천 흐름:
+  - 로컬: 개발 → 테스트 → 커밋 → `git push`
+  - NAS: `git pull` → `docker compose up -d --build`
+
+처음부터 Git으로 시작하려면 NAS에서:
+
+```bash
+cd /volume1/docker/projects/apps
+git clone https://git.sori.studio/zenn/tier-maker.git
+cd tier-maker
+cp .env.production.example .env.production
+```
+
+- 이미 같은 경로에 수동 복사본이 있다면, 가장 깔끔한 방법은 기존 폴더를 다른 이름으로 잠시 옮기고 새로 `clone`하는 것이다.
+- `.env.production`은 Git에 올리지 않고 NAS에만 유지한다.
+
+예시:
+
+```bash
+cd /volume1/docker/projects/apps
+mv tier-maker tier-maker-manual-backup
+git clone https://git.sori.studio/zenn/tier-maker.git
+cd tier-maker
+cp .env.production.example .env.production
+```
+
+- 이후 기존 수동 복사본의 `.env.production` 값을 새 clone 폴더의 `.env.production`에 그대로 옮기면 된다.
+
+## 2. 환경변수 파일 준비
+- 루트에서 `.env.production.example`를 복사해 `.env.production`으로 만든다.
+- 최소 변경값:
+  - `MARIADB_ROOT_PASSWORD`
+  - `MARIADB_PASSWORD`
+  - `SESSION_SECRET`
+
+예시:
+
+```env
+MARIADB_ROOT_PASSWORD=very-strong-root-password
+MARIADB_DATABASE=tier_cursor
+MARIADB_USER=tier_cursor
+MARIADB_PASSWORD=very-strong-app-password
+SESSION_SECRET=very-strong-random-session-secret
+```
+
+## 3. 컨테이너 실행
+
+```bash
+docker compose --env-file .env.production -f docker-compose.prod.yml up -d --build
+```
+
+- phpMyAdmin까지 같이 띄우려면:
+
+```bash
+docker compose --env-file .env.production -f docker-compose.prod.yml --profile admin up -d --build
+```
+
+- MariaDB 첫 초기화는 NAS 환경에서 2분 이상 걸릴 수 있다.
+- 현재 프로덕션 컴포즈는 이를 고려해 `start_period: 150s`, `retries: 20` healthcheck를 사용한다.
+- 로그상 DB가 정상 기동했는데도 `unhealthy`가 뜬 적이 있다면 최신 `docker-compose.prod.yml`로 다시 올리는 것이 좋다.
+
+## 3-1. 이후 업데이트 방식
+- Git clone 기반으로 전환한 뒤에는 파일을 하나씩 NAS에 덮어쓰지 않는다.
+- 로컬에서 커밋과 푸시가 끝난 뒤, NAS에서는 아래 두 줄이 기본 배포 절차다.
+
+```bash
+git pull origin main
+docker compose --env-file .env.production -f docker-compose.prod.yml up -d --build
+```
+
+- Dockerfile, Nginx 설정, 프런트 소스, 백엔드 소스가 바뀐 경우에는 `--build`를 유지한다.
+- 단순 재시작만 필요할 때도 있지만, 운영에서는 실수 방지를 위해 `up -d --build`를 기본값으로 두는 편이 안전하다.
+
+## 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
+cd /volume1/docker/projects/apps/tier-maker
+git pull origin main
+sudo docker compose --env-file .env.production -f docker-compose.prod.yml up -d --build
+```
+
+- 아직 수동 복사 폴더만 있다면:
+
+```bash
+cd /volume1/docker/projects/apps
+mv tier-maker tier-maker-manual-backup
+git clone https://git.sori.studio/zenn/tier-maker.git
+cd tier-maker
+cp .env.production.example .env.production
+# 여기서 기존 .env.production 값을 새 파일에 옮긴다.
+docker compose --env-file .env.production -f docker-compose.prod.yml up -d --build
+```
+
+## 4. NAS 리버스 프록시
+- 외부 도메인: `tmaker.sori.studio`
+- 내부 대상 프로토콜: `http`
+- 내부 대상 호스트: NAS IP 또는 `localhost`
+- 내부 대상 포트: `18080`
+
+즉 NAS 리버스 프록시는 `frontend` 컨테이너의 `18080`만 바라보면 된다.
+
+## 5. HTTPS / 쿠키
+- 현재 프로덕션 컴포즈는 `SESSION_COOKIE_SECURE=true`를 사용한다.
+- 따라서 `tmaker.sori.studio`에는 HTTPS 인증서가 연결되어 있어야 한다.
+- NAS 리버스 프록시가 HTTPS 종료를 하고 내부는 `http://frontend:80` 또는 `localhost:18080`으로 전달하면 된다.
+- 최신 프런트 Nginx 설정은 백엔드로 `X-Forwarded-Proto: https`를 넘기므로, 로그인 직후 세션이 바로 풀리는 경우에는 프런트 이미지를 다시 빌드해 최신 설정이 반영됐는지 먼저 확인한다.
+
+## 6. 데이터 위치
+- MariaDB 데이터: Docker volume `tmaker_mariadb_data`
+- 업로드 파일: Docker volume `tmaker_uploads`
+- 세션 파일: Docker volume `tmaker_sessions`
+
+## 7. 점검 포인트
+- 메인 접속: `https://tmaker.sori.studio`
+- 헬스체크: `https://tmaker.sori.studio/health`
+- 로그인 후 새로고침 또는 `내 티어표` 진입 시 세션이 유지되는지 확인
+- 관리자 로그인 후:
+  - 게임 생성
+  - 썸네일 업로드
+  - 티어표 저장
+  - 이미지 다운로드
+
+## 8. MariaDB가 unhealthy일 때
+- 로그에 `ready for connections`가 보이면 DB 자체는 정상일 가능성이 높다.
+- 이 경우는 대부분 healthcheck 시간이 짧아서 생기는 문제다.
+- 최신 컴포즈 파일 반영 후 아래 순서로 다시 시작한다:
+
+```bash
+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` 기반 최적화 단계를 추가하는 것이 좋다.
+- 프런트/백엔드/Nginx 설정을 바꿨다면 NAS에서 `docker compose --env-file .env.production -f docker-compose.prod.yml up -d --build`로 이미지를 다시 빌드해 반영한다.
+- 운영 중 `.env.production`, 업로드 파일 볼륨, MariaDB 볼륨은 Git과 별개로 NAS 로컬 자산이므로 백업 정책을 따로 잡아야 한다.

frontend/Dockerfile

@@ -0,0 +1,22 @@
+FROM node:20-alpine AS build
+
+WORKDIR /app
+
+COPY frontend/package*.json ./
+RUN npm ci
+
+COPY frontend/ ./
+
+ARG VITE_API_ORIGIN=https://tmaker.sori.studio
+ENV VITE_API_ORIGIN=${VITE_API_ORIGIN}
+
+RUN npm run build
+
+FROM nginx:1.27-alpine
+
+COPY frontend/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

frontend/index.html

@@ -1,10 +1,45 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>frontend</title>
+    <title>Tier Maker | 템플릿으로 쉽게 만드는 티어표</title>
+    <meta
+      name="description"
+      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="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:description"
+      content="템플릿과 커스텀 이미지로 티어표를 만들고 저장하고 공유하세요. 관리자 요청과 템플릿 업데이트 흐름까지 한 번에 관리할 수 있습니다."
+    />
+    <meta property="og:image" content="https://tmaker.sori.studio/og-card.png" />
+    <meta property="og:image:alt" content="Tier Maker 공유 썸네일" />
+    <meta property="og:image:width" content="1200" />
+    <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:description"
+      content="템플릿과 커스텀 이미지로 티어표를 만들고 저장하고 공유하세요."
+    />
+    <meta name="twitter:image" content="https://tmaker.sori.studio/og-card.png" />
   </head>
   <body>
     <div id="app"></div>

frontend/nginx.conf

@@ -0,0 +1,48 @@
+server {
+  listen 80;
+  server_name _;
+  client_max_body_size 1024m;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+
+  location /api/ {
+    proxy_pass http://backend:5179/api/;
+    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 /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;
+    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 /health {
+    proxy_pass http://backend:5179/health;
+    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;
+  }
+}

frontend/public/icons.svg

@@ -1,24 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-  <symbol id="bluesky-icon" viewBox="0 0 16 17">
-    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
-    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
-  </symbol>
-  <symbol id="discord-icon" viewBox="0 0 20 19">
-    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
-  </symbol>
-  <symbol id="documentation-icon" viewBox="0 0 21 20">
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
-  </symbol>
-  <symbol id="github-icon" viewBox="0 0 19 19">
-    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
-  </symbol>
-  <symbol id="social-icon" viewBox="0 0 20 20">
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
-  </symbol>
-  <symbol id="x-icon" viewBox="0 0 19 19">
-    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
-  </symbol>
-</svg>

frontend/src/assets/icons/add_column_right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M160-760v560h240v-560H160ZM80-120v-720h720v160h-80v-80H480v560h240v-80h80v160H80Zm400-360Zm-80 0h80-80Zm0 0Zm320 120v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z"/></svg>

frontend/src/assets/icons/add_notes.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v268q-19-9-39-15.5t-41-9.5v-243H200v560h242q3 22 9.5 42t15.5 38H200Zm0-120v40-560 243-3 280Zm80-40h163q3-21 9.5-41t14.5-39H280v80Zm0-160h244q32-30 71.5-50t84.5-27v-3H280v80Zm0-160h400v-80H280v80ZM720-40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40Zm-20-80h40v-100h100v-40H740v-100h-40v100H600v40h100v100Z"/></svg>

frontend/src/assets/icons/add_photo_alternate.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M480-480ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h320v80H200v560h560v-320h80v320q0 33-23.5 56.5T760-120H200Zm40-160h480L570-480 450-320l-90-120-120 160Zm440-320v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z"/></svg>

frontend/src/assets/icons/add_row_below.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M200-560h560v-240H200v240Zm-80 400v-720h720v720H680v-80h80v-240H200v240h80v80H120Zm360-320Zm0-80v80-80Zm0 0ZM440-80v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z"/></svg>

frontend/src/assets/icons/dashboard_customize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M120-840h320v320H120v-320Zm80 80v160-160Zm320-80h320v320H520v-320Zm80 80v160-160ZM120-440h320v320H120v-320Zm80 80v160-160Zm440-80h80v120h120v80H720v120h-80v-120H520v-80h120v-120Zm-40-320v160h160v-160H600Zm-400 0v160h160v-160H200Zm0 400v160h160v-160H200Z"/></svg>

frontend/src/assets/icons/delete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>

frontend/src/assets/icons/dock_to_left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z"/></svg>

frontend/src/assets/icons/dock_to_right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z"/></svg>

frontend/src/assets/icons/favorite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>

frontend/src/assets/icons/grid_view.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M120-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z"/></svg>

frontend/src/assets/icons/key.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M223.5-423.5Q200-447 200-480t23.5-56.5Q247-560 280-560t56.5 23.5Q360-513 360-480t-23.5 56.5Q313-400 280-400t-56.5-23.5ZM280-240q-100 0-170-70T40-480q0-100 70-170t170-70q67 0 121.5 33t86.5 87h352l120 120-180 180-80-60-80 60-85-60h-47q-32 54-86.5 87T280-240Zm0-80q56 0 98.5-34t56.5-86h125l58 41 82-61 71 55 75-75-40-40H435q-14-52-56.5-86T280-640q-66 0-113 47t-47 113q0 66 47 113t113 47Z"/></svg>

frontend/src/assets/icons/kid_star.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="m305-704 112-145q12-16 28.5-23.5T480-880q18 0 34.5 7.5T543-849l112 145 170 57q26 8 41 29.5t15 47.5q0 12-3.5 24T866-523L756-367l4 164q1 35-23 59t-56 24q-2 0-22-3l-179-50-179 50q-5 2-11 2.5t-11 .5q-32 0-56-24t-23-59l4-165L95-523q-8-11-11.5-23T80-570q0-25 14.5-46.5T135-647l170-57Zm49 69-194 64 124 179-4 191 200-55 200 56-4-192 124-177-194-66-126-165-126 165Zm126 135Z"/></svg>

frontend/src/assets/icons/lists.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M80-160v-160h160v160H80Zm240 0v-160h560v160H320ZM80-400v-160h160v160H80Zm240 0v-160h560v160H320ZM80-640v-160h160v160H80Zm240 0v-160h560v160H320Z"/></svg>

frontend/src/assets/icons/lock_reset.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480h80q0 66 25 124.5t68.5 102q43.5 43.5 102 69T480-159q134 0 227-93t93-227q0-134-93-227t-227-93q-89 0-161.5 43.5T204-640h116v80H80v-240h80v80q55-73 138-116.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-80-240q-17 0-28.5-11.5T360-360v-120q0-17 11.5-28.5T400-520v-40q0-33 23.5-56.5T480-640q33 0 56.5 23.5T560-560v40q17 0 28.5 11.5T600-480v120q0 17-11.5 28.5T560-320H400Zm40-200h80v-40q0-17-11.5-28.5T480-600q-17 0-28.5 11.5T440-560v40Z"/></svg>

frontend/src/assets/icons/logout.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h280v80H200Zm440-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z"/></svg>

frontend/src/assets/icons/menu_book.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M560-564v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-600q-38 0-73 9.5T560-564Zm0 220v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-380q-38 0-73 9t-67 27Zm0-110v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-490q-38 0-73 9.5T560-454ZM260-320q47 0 91.5 10.5T440-278v-394q-41-24-87-36t-93-12q-36 0-71.5 7T120-692v396q35-12 69.5-18t70.5-6Zm260 42q44-21 88.5-31.5T700-320q36 0 70.5 6t69.5 18v-396q-33-14-68.5-21t-71.5-7q-47 0-93 12t-87 36v394Zm-40 118q-48-38-104-59t-116-21q-42 0-82.5 11T100-198q-21 11-40.5-1T40-234v-482q0-11 5.5-21T62-752q46-24 96-36t102-12q58 0 113.5 15T480-740q51-30 106.5-45T700-800q52 0 102 12t96 36q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700-240q-60 0-116 21t-104 59ZM280-494Z"/></svg>

frontend/src/assets/icons/more.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M360-160q-19 0-36-8.5T296-192L80-480l216-288q11-15 28-23.5t36-8.5h440q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H360ZM180-480l180 240h440v-480H360L180-480Zm248.5 28.5Q440-463 440-480t-11.5-28.5Q417-520 400-520t-28.5 11.5Q360-497 360-480t11.5 28.5Q383-440 400-440t28.5-11.5Zm140 0Q580-463 580-480t-11.5-28.5Q557-520 540-520t-28.5 11.5Q500-497 500-480t11.5 28.5Q523-440 540-440t28.5-11.5Zm140 0Q720-463 720-480t-11.5-28.5Q697-520 680-520t-28.5 11.5Q640-497 640-480t11.5 28.5Q663-440 680-440t28.5-11.5ZM580-480Z"/></svg>

frontend/src/assets/icons/open_in_new.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg>

frontend/src/assets/icons/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>

frontend/src/assets/icons/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>

frontend/src/assets/icons/share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M680-80q-50 0-85-35t-35-85q0-6 3-28L282-392q-16 15-37 23.5t-45 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q24 0 45 8.5t37 23.5l281-164q-2-7-2.5-13.5T560-760q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-24 0-45-8.5T598-672L317-508q2 7 2.5 13.5t.5 14.5q0 8-.5 14.5T317-452l281 164q16-15 37-23.5t45-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Zm0-80q17 0 28.5-11.5T720-200q0-17-11.5-28.5T680-240q-17 0-28.5 11.5T640-200q0 17 11.5 28.5T680-160ZM200-440q17 0 28.5-11.5T240-480q0-17-11.5-28.5T200-520q-17 0-28.5 11.5T160-480q0 17 11.5 28.5T200-440Zm508.5-291.5Q720-743 720-760t-11.5-28.5Q697-800 680-800t-28.5 11.5Q640-777 640-760t11.5 28.5Q663-720 680-720t28.5-11.5ZM680-200ZM200-480Zm480-280Z"/></svg>

frontend/src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

frontend/src/components/RightRailAd.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { computed, nextTick, onMounted, ref } from 'vue'
+
+const props = defineProps({
+  className: {
+    type: String,
+    default: '',
+  },
+})
+
+const adEl = ref(null)
+const client = 'ca-pub-4516420168710424'
+const slot = '1236919061'
+const panelClass = computed(() => ['rightRailAd', props.className].filter(Boolean).join(' '))
+
+function ensureAdScript() {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return Promise.resolve()
+  const existing = document.querySelector(`script[data-ad-client="${client}"]`)
+  if (existing) return Promise.resolve()
+
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script')
+    script.async = true
+    script.src = `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${client}`
+    script.crossOrigin = 'anonymous'
+    script.dataset.adClient = client
+    script.onload = () => resolve()
+    script.onerror = () => reject(new Error('adsense_load_failed'))
+    document.head.appendChild(script)
+  })
+}
+
+onMounted(async () => {
+  if (typeof window === 'undefined') return
+  try {
+    await ensureAdScript()
+    await nextTick()
+    if (!adEl.value) return
+    window.adsbygoogle = window.adsbygoogle || []
+    if (!adEl.value.dataset.adsbygoogleStatus) {
+      window.adsbygoogle.push({})
+    }
+  } catch (e) {
+    // Keep the slot quiet when ad blockers or network policies block the script.
+  }
+})
+</script>
+
+<template>
+  <section :class="panelClass">
+    <div class="rightRailAd__eyebrow">Sponsored</div>
+    <div class="rightRailAd__frame">
+      <ins
+        ref="adEl"
+        class="adsbygoogle rightRailAd__slot"
+        style="display:block"
+        :data-ad-client="client"
+        :data-ad-slot="slot"
+        data-ad-format="auto"
+        data-full-width-responsive="true"
+      ></ins>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.rightRailAd {
+  display: grid;
+  gap: 12px;
+  padding-top: 78px;
+}
+
+.rightRailAd__eyebrow {
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.34);
+}
+
+.rightRailAd__frame {
+  width: min(100%, 300px);
+  min-height: 600px;
+  margin: 0 auto;
+}
+
+.rightRailAd__slot {
+  display: block;
+  width: 300px;
+  max-width: 100%;
+  min-height: 600px;
+  margin: 0 auto;
+}
+</style>

frontend/src/components/SvgIcon.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  src: { type: String, required: true },
+  size: { type: [Number, String], default: 20 },
+  color: { type: String, default: 'currentColor' },
+})
+
+const normalizedSize = computed(() => (typeof props.size === "number" ? `${props.size}px` : props.size))
+const iconStyle = computed(() => ({
+  "--svg-icon-src": `url("${props.src}")`,
+  "--svg-icon-size": normalizedSize.value,
+  "--svg-icon-color": props.color,
+}))
+</script>
+
+<template>
+  <span class="svgIcon" :style="iconStyle" aria-hidden="true"></span>
+</template>
+
+<style scoped>
+.svgIcon {
+  display: inline-block;
+  width: var(--svg-icon-size);
+  height: var(--svg-icon-size);
+  background-color: var(--svg-icon-color);
+  -webkit-mask-image: var(--svg-icon-src);
+  mask-image: var(--svg-icon-src);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  flex: 0 0 auto;
+}
+</style>

frontend/src/components/TagBadgeInput.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: Array, default: () => [] },
+  placeholder: { type: String, default: '태그 입력 후 Enter' },
+  disabled: { type: Boolean, default: false },
+  maxTags: { type: Number, default: 30 },
+  maxTagLength: { type: Number, default: 40 },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const draft = ref('')
+const isComposing = ref(false)
+
+const normalizedTags = computed(() =>
+  Array.from(
+    new Set(
+      (Array.isArray(props.modelValue) ? props.modelValue : [])
+        .map((tag) => String(tag || '').trim().replace(/^#/, '').slice(0, props.maxTagLength))
+        .filter(Boolean)
+    )
+  ).slice(0, props.maxTags)
+)
+
+function commitTags(nextTags) {
+  emit(
+    'update:modelValue',
+    Array.from(
+      new Set(
+        (nextTags || [])
+          .map((tag) => String(tag || '').trim().replace(/^#/, '').slice(0, props.maxTagLength))
+          .filter(Boolean)
+      )
+    ).slice(0, props.maxTags)
+  )
+}
+
+function addDraftTag() {
+  if (props.disabled) return
+  const nextTag = String(draft.value || '').trim().replace(/^#/, '').slice(0, props.maxTagLength)
+  if (!nextTag) return
+  commitTags([...normalizedTags.value, nextTag])
+  draft.value = ''
+}
+
+function removeTag(tag) {
+  if (props.disabled) return
+  commitTags(normalizedTags.value.filter((entry) => entry !== tag))
+}
+
+function handleKeydown(event) {
+  if (event.isComposing || isComposing.value) return
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    addDraftTag()
+    return
+  }
+
+  if (event.key === 'Backspace' && !draft.value && normalizedTags.value.length) {
+    removeTag(normalizedTags.value[normalizedTags.value.length - 1])
+  }
+}
+
+function handleBlur() {
+  if (isComposing.value) return
+  addDraftTag()
+}
+
+function handleCompositionStart() {
+  isComposing.value = true
+}
+
+function handleCompositionEnd() {
+  isComposing.value = false
+}
+</script>
+
+<template>
+  <div class="tagBadgeInput" :class="{ 'tagBadgeInput--disabled': disabled }">
+    <div v-if="normalizedTags.length" class="tagBadgeInput__list">
+      <span v-for="tag in normalizedTags" :key="tag" class="tagBadgeInput__badge">
+        <span>#{{ tag }}</span>
+        <button class="tagBadgeInput__remove" type="button" :disabled="disabled" @click="removeTag(tag)">X</button>
+      </span>
+    </div>
+    <input
+      v-model="draft"
+      class="tagBadgeInput__input"
+      type="text"
+      :placeholder="placeholder"
+      :disabled="disabled || normalizedTags.length >= maxTags"
+      :maxlength="maxTagLength"
+      @keydown="handleKeydown"
+      @blur="handleBlur"
+      @compositionstart="handleCompositionStart"
+      @compositionend="handleCompositionEnd"
+    />
+  </div>
+</template>
+
+<style scoped>
+.tagBadgeInput {
+  display: grid;
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  border: 1px solid color-mix(in srgb, var(--theme-border-strong) 72%, rgba(255, 255, 255, 0.08));
+  background: color-mix(in srgb, var(--theme-surface-soft) 82%, rgba(255, 255, 255, 0.02));
+}
+
+.tagBadgeInput--disabled {
+  opacity: 0.72;
+}
+
+.tagBadgeInput__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.tagBadgeInput__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 11px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--theme-accent-soft) 55%, rgba(255, 255, 255, 0.06));
+  color: var(--theme-text);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.tagBadgeInput__remove {
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 11px;
+  font-weight: 800;
+  cursor: pointer;
+  padding: 0;
+}
+
+.tagBadgeInput__input {
+  width: 100%;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--theme-text);
+  font: inherit;
+}
+
+.tagBadgeInput__input::placeholder {
+  color: var(--theme-text-soft);
+}
+</style>

frontend/src/components/TierListCommentsCard.vue

@@ -0,0 +1,689 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
+import { api } from '../lib/api'
+import { displayInitialFrom } from '../lib/display'
+import { loginPath } from '../lib/paths'
+import { toApiUrl } from '../lib/runtime'
+
+const props = defineProps({
+  tierListId: {
+    type: String,
+    default: '',
+  },
+  canWrite: {
+    type: Boolean,
+    default: false,
+  },
+  currentUserId: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '댓글',
+  },
+  description: {
+    type: String,
+    default: '티어표에 대한 의견을 남기고 답글로 대화를 이어갈 수 있어요.',
+  },
+})
+
+const route = useRoute()
+const comments = ref([])
+const isLoading = ref(false)
+const error = ref('')
+const commentDraft = ref('')
+const replyDrafts = ref({})
+const openedReplyComposerId = ref('')
+const submittingTargetId = ref('')
+const deletingCommentId = ref('')
+const replyInputRefs = ref({})
+const visibleRootCount = ref(10)
+const visibleReplyCounts = ref({})
+let activeCommentRetryTimer = 0
+
+const totalCommentCount = computed(() =>
+  comments.value.reduce((count, comment) => count + 1 + (comment.replies?.length || 0), 0)
+)
+const visibleComments = computed(() => comments.value.slice(0, visibleRootCount.value))
+const hasMoreRootComments = computed(() => comments.value.length > visibleRootCount.value)
+const loginTarget = computed(() => loginPath(route.fullPath))
+const highlightedCommentId = computed(() =>
+  typeof route.query.commentId === 'string' ? route.query.commentId.trim() : ''
+)
+
+function avatarUrlOf(user) {
+  return user?.authorAvatarSrc ? toApiUrl(user.authorAvatarSrc) : ''
+}
+
+function avatarFallbackOf(user) {
+  return displayInitialFrom(user?.authorName, user?.authorAccountName, '?')
+}
+
+function displayNameOf(user) {
+  return user?.authorName || '알 수 없음'
+}
+
+function formatDate(ts) {
+  return new Date(Number(ts || 0)).toLocaleString('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+function isOwnComment(comment) {
+  return !!props.currentUserId && props.currentUserId === comment?.authorId
+}
+
+function isHighlighted(commentId) {
+  return !!commentId && highlightedCommentId.value === commentId
+}
+
+function clearActiveCommentRetry() {
+  if (typeof window === 'undefined' || !activeCommentRetryTimer) return
+  window.clearTimeout(activeCommentRetryTimer)
+  activeCommentRetryTimer = 0
+}
+
+async function scrollToHighlightedComment(attempt = 0) {
+  clearActiveCommentRetry()
+  if (!highlightedCommentId.value || typeof document === 'undefined') return
+  await nextTick()
+  const target = document.querySelector(`[data-comment-id="${highlightedCommentId.value}"]`)
+  if (target) {
+    target.scrollIntoView({ behavior: attempt === 0 ? 'auto' : 'smooth', block: 'center' })
+    return
+  }
+  if (attempt >= 6 || typeof window === 'undefined') return
+  activeCommentRetryTimer = window.setTimeout(() => {
+    scrollToHighlightedComment(attempt + 1)
+  }, 180)
+}
+
+async function loadComments() {
+  if (!props.tierListId) {
+    comments.value = []
+    return
+  }
+  isLoading.value = true
+  error.value = ''
+  try {
+    const data = await api.listTierListComments(props.tierListId)
+    comments.value = Array.isArray(data.comments) ? data.comments : []
+    visibleRootCount.value = 10
+    visibleReplyCounts.value = {}
+    scrollToHighlightedComment()
+  } catch (loadError) {
+    error.value = '댓글을 불러오지 못했어요.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function visibleRepliesOf(comment) {
+  const replies = Array.isArray(comment?.replies) ? comment.replies : []
+  const limit = visibleReplyCounts.value[comment?.id] || 3
+  return replies.slice(0, limit)
+}
+
+function hasMoreReplies(comment) {
+  const replies = Array.isArray(comment?.replies) ? comment.replies : []
+  return replies.length > (visibleReplyCounts.value[comment?.id] || 3)
+}
+
+function remainingReplyCount(comment) {
+  const replies = Array.isArray(comment?.replies) ? comment.replies : []
+  return Math.max(0, replies.length - (visibleReplyCounts.value[comment?.id] || 3))
+}
+
+const remainingRootCount = computed(() => Math.max(0, comments.value.length - visibleRootCount.value))
+
+function showMoreRootComments() {
+  visibleRootCount.value += 10
+}
+
+function showMoreReplies(commentId) {
+  if (!commentId) return
+  visibleReplyCounts.value = {
+    ...visibleReplyCounts.value,
+    [commentId]: (visibleReplyCounts.value[commentId] || 3) + 3,
+  }
+}
+
+async function submitComment(parentCommentId = '') {
+  if (!props.canWrite || !props.tierListId) return
+  const isReply = !!parentCommentId
+  const draftValue = isReply ? replyDrafts.value[parentCommentId] || '' : commentDraft.value
+  const content = String(draftValue || '').trim()
+  if (!content) return
+
+  submittingTargetId.value = parentCommentId || 'root'
+  error.value = ''
+  try {
+    const data = await api.createTierListComment(props.tierListId, {
+      content,
+      parentCommentId,
+    })
+    comments.value = Array.isArray(data.comments) ? data.comments : []
+    if (isReply) {
+      replyDrafts.value = { ...replyDrafts.value, [parentCommentId]: '' }
+      openedReplyComposerId.value = ''
+    } else {
+      commentDraft.value = ''
+    }
+    await nextTick()
+    if (data.createdCommentId && typeof window !== 'undefined') {
+      const target = document.querySelector(`[data-comment-id="${data.createdCommentId}"]`)
+      if (target) target.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    }
+  } catch (submitError) {
+    const code = submitError?.data?.error
+    if (code === 'comment_reply_depth_invalid') {
+      error.value = '답글에는 다시 답글을 달 수 없어요.'
+    } else {
+      error.value = '댓글을 저장하지 못했어요.'
+    }
+  } finally {
+    submittingTargetId.value = ''
+  }
+}
+
+async function deleteComment(commentId) {
+  if (!commentId || !props.tierListId) return
+  deletingCommentId.value = commentId
+  error.value = ''
+  try {
+    const data = await api.deleteTierListComment(props.tierListId, commentId)
+    comments.value = Array.isArray(data.comments) ? data.comments : []
+  } catch (deleteError) {
+    error.value = '댓글을 삭제하지 못했어요.'
+  } finally {
+    deletingCommentId.value = ''
+  }
+}
+
+function registerReplyInput(commentId, element) {
+  if (!commentId) return
+  if (element) {
+    replyInputRefs.value[commentId] = element
+    return
+  }
+  delete replyInputRefs.value[commentId]
+}
+
+async function focusReplyInput(commentId) {
+  if (!commentId) return
+  await nextTick()
+  const target = replyInputRefs.value[commentId]
+  if (target && typeof target.focus === 'function') {
+    target.focus()
+    const value = target.value || ''
+    if (typeof target.setSelectionRange === 'function') {
+      target.setSelectionRange(value.length, value.length)
+    }
+  }
+}
+
+async function toggleReplyComposer(commentId) {
+  const nextId = openedReplyComposerId.value === commentId ? '' : commentId
+  openedReplyComposerId.value = nextId
+  if (!nextId) return
+  await focusReplyInput(nextId)
+}
+
+watch(() => props.tierListId, loadComments, { immediate: true })
+watch(highlightedCommentId, () => {
+  scrollToHighlightedComment()
+})
+
+onBeforeUnmount(() => {
+  clearActiveCommentRetry()
+})
+</script>
+
+<template>
+  <section class="commentsCard">
+    <header class="commentsCard__head">
+      <div class="commentsCard__headline">
+        <div class="commentsCard__eyebrow">Comments</div>
+        <h3 class="commentsCard__title">{{ title }}</h3>
+        <p class="commentsCard__desc">{{ description }}</p>
+      </div>
+      <div class="commentsCard__count">{{ totalCommentCount }}개</div>
+    </header>
+
+    <div v-if="error" class="commentsCard__error">{{ error }}</div>
+
+    <div v-if="props.canWrite" class="commentsComposer">
+      <textarea
+        v-model="commentDraft"
+        class="commentsComposer__input"
+        maxlength="2000"
+        rows="3"
+        placeholder="이 티어표에 대한 의견을 남겨보세요."
+      />
+      <div class="commentsComposer__footer">
+        <span class="commentsComposer__hint">{{ commentDraft.length }}/2000</span>
+        <button class="btn btn--save commentsComposer__submit" type="button" :disabled="!commentDraft.trim() || submittingTargetId === 'root'" @click="submitComment()">
+          댓글 등록
+        </button>
+      </div>
+    </div>
+    <div v-else class="commentsLoginCta">
+      <div class="commentsLoginCta__text">로그인하면 댓글과 답글을 남길 수 있어요.</div>
+      <RouterLink class="btn btn--ghost commentsComposer__submit" :to="loginTarget">로그인</RouterLink>
+    </div>
+
+    <div v-if="isLoading" class="commentsCard__empty">댓글을 불러오는 중이에요.</div>
+    <div v-else-if="comments.length === 0" class="commentsCard__empty">아직 댓글이 없어요. 첫 댓글을 남겨보세요.</div>
+
+    <div v-else class="commentsThread">
+      <article
+        v-for="comment in visibleComments"
+        :key="comment.id"
+        class="commentItem"
+        :class="{ 'commentItem--highlighted': isHighlighted(comment.id) }"
+        :data-comment-id="comment.id"
+      >
+        <div class="commentItem__head">
+          <div class="commentItem__author">
+            <img v-if="avatarUrlOf(comment)" class="commentItem__avatar" :src="avatarUrlOf(comment)" :alt="displayNameOf(comment)" draggable="false" />
+            <div v-else class="commentItem__avatar commentItem__avatar--fallback">{{ avatarFallbackOf(comment) }}</div>
+            <div class="commentItem__meta">
+              <div class="commentItem__name">{{ displayNameOf(comment) }}</div>
+              <div class="commentItem__date">{{ formatDate(comment.createdAt) }}</div>
+            </div>
+          </div>
+          <div class="commentItem__actions">
+            <button v-if="props.canWrite" class="commentItem__action" type="button" @click="toggleReplyComposer(comment.id)">답글</button>
+            <button
+              v-if="isOwnComment(comment)"
+              class="commentItem__action commentItem__action--danger"
+              type="button"
+              :disabled="deletingCommentId === comment.id"
+              @click="deleteComment(comment.id)"
+            >
+              삭제
+            </button>
+          </div>
+        </div>
+        <div class="commentItem__body">{{ comment.content }}</div>
+
+        <div v-if="openedReplyComposerId === comment.id && props.canWrite" class="replyComposer">
+          <textarea
+            v-model="replyDrafts[comment.id]"
+            :ref="(element) => registerReplyInput(comment.id, element)"
+            class="commentsComposer__input commentsComposer__input--reply"
+            maxlength="2000"
+            rows="2"
+            placeholder="답글을 입력하세요."
+          />
+          <div class="commentsComposer__footer">
+            <span class="commentsComposer__hint">{{ (replyDrafts[comment.id] || '').length }}/2000</span>
+            <button class="btn btn--save commentsComposer__submit" type="button" :disabled="!(replyDrafts[comment.id] || '').trim() || submittingTargetId === comment.id" @click="submitComment(comment.id)">
+              답글 등록
+            </button>
+          </div>
+        </div>
+
+        <div v-if="comment.replies?.length" class="replyList">
+          <article
+            v-for="reply in visibleRepliesOf(comment)"
+            :key="reply.id"
+            class="commentItem commentItem--reply"
+            :class="{ 'commentItem--highlighted': isHighlighted(reply.id) }"
+            :data-comment-id="reply.id"
+          >
+            <div class="commentItem__head">
+              <div class="commentItem__author">
+                <img v-if="avatarUrlOf(reply)" class="commentItem__avatar" :src="avatarUrlOf(reply)" :alt="displayNameOf(reply)" draggable="false" />
+                <div v-else class="commentItem__avatar commentItem__avatar--fallback">{{ avatarFallbackOf(reply) }}</div>
+                <div class="commentItem__meta">
+                  <div class="commentItem__name">{{ displayNameOf(reply) }}</div>
+                  <div class="commentItem__date">{{ formatDate(reply.createdAt) }}</div>
+                </div>
+              </div>
+              <div class="commentItem__actions">
+                <button
+                  v-if="isOwnComment(reply)"
+                  class="commentItem__action commentItem__action--danger"
+                  type="button"
+                  :disabled="deletingCommentId === reply.id"
+                  @click="deleteComment(reply.id)"
+                >
+                  삭제
+                </button>
+              </div>
+            </div>
+            <div class="commentItem__body">{{ reply.content }}</div>
+          </article>
+          <button v-if="hasMoreReplies(comment)" class="commentMoreButton" type="button" @click="showMoreReplies(comment.id)">
+            답글 {{ remainingReplyCount(comment) }}개 더 보기
+          </button>
+        </div>
+      </article>
+      <button v-if="hasMoreRootComments" class="commentMoreButton commentMoreButton--root" type="button" @click="showMoreRootComments">
+        댓글 {{ remainingRootCount }}개 더 보기
+      </button>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.commentsCard {
+  margin-top: 24px;
+  padding: 18px;
+  border-radius: 22px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-pill-bg);
+}
+
+.commentsCard__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.commentsCard__headline {
+  min-width: 0;
+}
+
+.commentsCard__eyebrow {
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--theme-text-faint);
+}
+
+.commentsCard__title {
+  margin: 6px 0 8px;
+  font-size: 22px;
+  font-weight: 900;
+  letter-spacing: -0.04em;
+}
+
+.commentsCard__desc {
+  margin: 0;
+  color: var(--theme-text-muted);
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.commentsCard__count {
+  flex: 0 0 auto;
+  padding: 8px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
+  color: var(--theme-text-muted);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.commentsCard__error {
+  margin-bottom: 16px;
+  padding: 12px 14px;
+  border-radius: 16px;
+  border: 1px solid var(--theme-danger-border);
+  background: var(--theme-danger-bg);
+  color: var(--theme-text);
+}
+
+.commentsComposer,
+.commentsLoginCta {
+  margin-bottom: 18px;
+  padding: 14px;
+  border-radius: 18px;
+  background: var(--theme-surface-soft);
+}
+
+.commentsComposer__input {
+  width: 100%;
+  min-height: 92px;
+  resize: vertical;
+  padding: 14px 16px;
+  border-radius: 16px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-input-bg);
+  color: var(--theme-text);
+  box-sizing: border-box;
+}
+
+.commentsComposer__input--reply {
+  min-height: 72px;
+  background: var(--theme-input-bg);
+}
+
+.commentsComposer__input:focus {
+  outline: none;
+  border-color: color-mix(in srgb, var(--theme-accent) 60%, var(--theme-field-border));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 16%, transparent);
+}
+
+.commentsComposer__footer,
+.commentsLoginCta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.commentsComposer__footer {
+  margin-top: 12px;
+}
+
+.commentsComposer__hint,
+.commentsLoginCta__text {
+  color: var(--theme-text-muted);
+  font-size: 13px;
+}
+
+.commentsCard__empty {
+  padding: 20px 0;
+  color: var(--theme-text-muted);
+}
+
+.commentsThread {
+  display: grid;
+  gap: 10px;
+}
+
+.commentMoreButton {
+  justify-self: flex-start;
+  margin-top: 10px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--theme-text-muted);
+  font-size: 13px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.commentMoreButton--root {
+  margin-top: 4px;
+}
+
+.commentItem {
+  position: relative;
+  padding: 12px 0 0;
+}
+
+.commentItem--reply {
+  margin-top: 8px;
+  margin-left: 20px;
+  padding-top: 8px;
+}
+
+.commentItem--reply::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -12px;
+  width: 1px;
+  bottom: 0;
+  background: color-mix(in srgb, var(--theme-border) 82%, transparent);
+}
+
+.commentItem--highlighted {
+  border-radius: 18px;
+  background: color-mix(in srgb, var(--theme-accent) 10%, transparent);
+}
+
+.commentItem__head {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 6px;
+}
+
+.commentItem__author {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.commentItem__avatar {
+  width: 38px;
+  height: 38px;
+  border-radius: 999px;
+  object-fit: cover;
+  border: 1px solid var(--theme-avatar-border);
+  background: var(--theme-border);
+  flex: 0 0 auto;
+}
+
+.commentItem__avatar--fallback {
+  display: grid;
+  place-items: center;
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.commentItem__meta {
+  min-width: 0;
+}
+
+.commentItem__name {
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.commentItem__date {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--theme-text-faint);
+}
+
+.commentItem__actions {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.commentItem__action {
+  border: 0;
+  background: transparent;
+  color: var(--theme-text-muted);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.commentItem__action--danger {
+  color: var(--theme-danger-text, #ff8f8f);
+}
+
+.commentItem__body {
+  padding: 12px 14px;
+  border-radius: 16px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface);
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.6;
+}
+
+.replyComposer {
+  margin-top: 12px;
+  padding: 12px;
+  border-radius: 18px;
+  background: var(--theme-surface-soft);
+}
+
+.commentsComposer__submit {
+  min-width: 112px;
+  min-height: 44px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 44px;
+  padding: 12px 18px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
+  color: var(--theme-text);
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 700;
+  transition: background 160ms ease;
+}
+
+.btn:hover {
+  background: var(--theme-surface-soft-3);
+}
+
+.btn:disabled {
+  opacity: 0.58;
+  cursor: default;
+}
+
+.btn--save {
+  min-width: 112px;
+  font-weight: 900;
+  background: rgba(96, 165, 250, 0.22);
+  border-color: rgba(96, 165, 250, 0.36);
+}
+
+.btn--save:hover {
+  background: rgba(96, 165, 250, 0.3);
+}
+
+.btn--ghost {
+  background: color-mix(in srgb, var(--theme-surface-soft) 86%, transparent);
+}
+
+@media (max-width: 860px) {
+  .commentsCard {
+    padding: 18px 16px;
+  }
+
+  .commentsCard__head,
+  .commentsComposer__footer,
+  .commentsLoginCta,
+  .commentItem__head {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .commentItem--reply {
+    margin-left: 14px;
+  }
+
+  .commentItem--reply::before {
+    left: -8px;
+  }
+}
+</style>

frontend/src/components/admin/AdminFeaturedSection.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+const props = defineProps({
+  featuredTemplates: { type: Array, required: true },
+  availableTemplatesForFeatured: { type: Array, required: true },
+  featuredTemplateIds: { type: Array, required: true },
+  featuredListRef: { type: Function, required: true },
+  saveFeaturedOrder: { type: Function, required: true },
+  moveFeaturedTemplate: { type: Function, required: true },
+  removeFeaturedTemplate: { type: Function, required: true },
+  addFeaturedTemplate: { type: Function, required: true },
+})
+
+const featuredTemplateSearchQuery = ref('')
+const featuredTemplatePickerOpen = ref(false)
+
+const filteredAvailableTemplatesForFeatured = computed(() => {
+  const query = featuredTemplateSearchQuery.value.trim().toLowerCase()
+  if (!query) return props.availableTemplatesForFeatured
+  return props.availableTemplatesForFeatured.filter((template) => {
+    const haystack = `${template.name || ''} ${template.slug || ''} ${template.id || ''}`.toLowerCase()
+    return haystack.includes(query)
+  })
+})
+
+function openFeaturedTemplatePicker() {
+  featuredTemplateSearchQuery.value = ''
+  featuredTemplatePickerOpen.value = true
+}
+
+function closeFeaturedTemplatePicker() {
+  featuredTemplatePickerOpen.value = false
+}
+
+function chooseFeaturedTemplate(templateId) {
+  props.addFeaturedTemplate(templateId)
+  closeFeaturedTemplatePicker()
+}
+
+function setFeaturedTransitionListRef(el) {
+  props.featuredListRef(el?.$el || el)
+}
+
+watch(featuredTemplatePickerOpen, (isOpen) => {
+  document.body.classList.toggle('modal-scroll-lock', isOpen)
+})
+
+onUnmounted(() => {
+  document.body.classList.remove('modal-scroll-lock')
+})
+</script>
+
+<template>
+  <div class="panel">
+    <div class="sectionHeader">
+      <div>
+        <div class="panel__title">홈 화면 상단 고정 순서</div>
+        <div class="hint hint--tight">여기에 넣은 템플릿은 지정한 순서대로 먼저 노출되고, 나머지 템플릿은 최근 생성순으로 뒤에 이어집니다. 최대 50개까지 설정할 수 있어요.</div>
+      </div>
+      <div class="featuredOrderPanel__headActions">
+        <button
+          class="btn btn--ghost"
+          :disabled="props.featuredTemplateIds.length >= 50 || !props.availableTemplatesForFeatured.length"
+          @click="openFeaturedTemplatePicker"
+        >
+          템플릿 추가
+        </button>
+        <button class="btn btn--primary" @click="props.saveFeaturedOrder">순서 저장</button>
+      </div>
+    </div>
+
+    <div class="featuredOrderPanel">
+      <div class="featuredOrderPanel__list">
+        <div class="section__title">상단 고정 목록</div>
+        <div v-if="!props.featuredTemplates.length" class="hint">아직 상단 고정 템플릿이 없어요.</div>
+        <TransitionGroup v-else :ref="setFeaturedTransitionListRef" tag="div" name="featured-list" class="featuredList">
+          <article v-for="(template, index) in props.featuredTemplates" :key="template.id" class="featuredCard" :data-featured-id="template.id">
+            <div class="featuredCard__meta">
+              <span class="featuredCard__rank">{{ index + 1 }}</span>
+              <div>
+                <div class="featuredCard__title">{{ template.name }}</div>
+                <div class="featuredCard__id">{{ template.slug || template.id }}</div>
+              </div>
+            </div>
+            <div class="featuredCard__actions">
+              <button class="btn btn--ghost btn--small" data-featured-handle>드래그</button>
+              <button class="btn btn--ghost btn--small" :disabled="index === 0" @click="props.moveFeaturedTemplate(template.id, -1)">위로</button>
+              <button class="btn btn--ghost btn--small" :disabled="index === props.featuredTemplates.length - 1" @click="props.moveFeaturedTemplate(template.id, 1)">아래로</button>
+              <button class="btn btn--danger btn--small" @click="props.removeFeaturedTemplate(template.id)">제외</button>
+            </div>
+          </article>
+        </TransitionGroup>
+      </div>
+    </div>
+
+    <div v-if="featuredTemplatePickerOpen" class="modalOverlay" @click.self="closeFeaturedTemplatePicker">
+      <div class="modalCard" role="dialog" aria-modal="true">
+        <div class="modalCard__titleRow">
+          <div>
+            <div class="modalCard__title">상단 고정 템플릿 추가</div>
+            <div class="modalCard__desc">템플릿 이름, slug, ID로 검색한 뒤 고정 목록에 추가할 항목을 선택하세요.</div>
+          </div>
+          <button class="btn btn--ghost btn--small" @click="closeFeaturedTemplatePicker">닫기</button>
+        </div>
+        <div class="modalCard__form modalCard__form--search">
+          <input v-model="featuredTemplateSearchQuery" class="input" placeholder="템플릿 이름 또는 slug 검색" autofocus />
+          <span class="hint hint--tight">{{ filteredAvailableTemplatesForFeatured.length }}개 결과</span>
+        </div>
+        <div class="templatePickerModalList">
+          <button
+            v-for="template in filteredAvailableTemplatesForFeatured"
+            :key="template.id"
+            class="adminTemplatePicker__item"
+            type="button"
+            @click="chooseFeaturedTemplate(template.id)"
+          >
+            <span class="adminTemplatePicker__name">{{ template.name }}</span>
+            <span class="adminTemplatePicker__meta">{{ template.slug || template.id }}</span>
+          </button>
+          <div v-if="!filteredAvailableTemplatesForFeatured.length" class="hint hint--tight">추가할 수 있는 템플릿이 없어요.</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/components/admin/AdminItemsSection.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { toApiUrl } from '../../lib/runtime'
+
+const props = defineProps({
+  customItems: { type: Array, required: true },
+  openCustomItemModal: { type: Function, required: true },
+  customItemPage: { type: Number, required: true },
+  customItemPageCount: { type: Number, required: true },
+  customItemTotal: { type: Number, required: true },
+  moveCustomItemPage: { type: Function, required: true },
+})
+</script>
+
+<template>
+  <div class="panel">
+    <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',
+            '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>
+    </div>
+
+    <div class="pager">
+      <button class="btn btn--ghost" :disabled="props.customItemPage <= 1" @click="props.moveCustomItemPage(-1)">이전</button>
+      <div class="pager__info">{{ props.customItemPage }} / {{ props.customItemPageCount }} 페이지 · 총 {{ props.customItemTotal }}개</div>
+      <button class="btn btn--ghost" :disabled="props.customItemPage >= props.customItemPageCount" @click="props.moveCustomItemPage(1)">다음</button>
+    </div>
+  </div>
+</template>

frontend/src/components/admin/AdminTemplatesSection.vue

@@ -0,0 +1,302 @@
+<script setup>
+import { toApiUrl } from '../../lib/runtime'
+import SvgIcon from '../SvgIcon.vue'
+import addPhotoAlternateIcon from '../../assets/icons/add_photo_alternate.svg'
+
+const props = defineProps({
+  activeTemplateRequest: { type: Object, default: null },
+  templateRequestSourceUrl: { type: Function, required: true },
+  stagedRequestDraftCount: { type: Number, required: true },
+  appliedRequestItemCount: { type: Number, required: true },
+  openTemplateCreateModal: { type: Function, required: true },
+  openTemplateSourceImportModal: { type: Function, required: true },
+  openTemplateLibraryItemModal: { type: Function, required: true },
+  openTemplateBulkTagModal: { type: Function, required: true },
+  isTemplateLoading: { type: Boolean, required: true },
+  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 },
+  canBulkTagTemplateItems: { type: Boolean, required: true },
+  canApplyThumbnail: { type: Boolean, required: true },
+  templateVisibilitySaving: { type: Boolean, required: true },
+  thumbFileInputRef: { type: Function, required: true },
+  openThumbFilePicker: { type: Function, required: true },
+  onThumb: { type: Function, required: true },
+  onThumbDragEnter: { type: Function, required: true },
+  onThumbDragOver: { type: Function, required: true },
+  onThumbDragLeave: { type: Function, required: true },
+  onThumbDrop: { type: Function, required: true },
+  isThumbDragOver: { type: Boolean, required: true },
+  uploadThumbnail: { type: Function, required: true },
+  removeTemplate: { type: Function, required: true },
+  toggleSelectedTemplateVisibility: { type: Function, required: true },
+  itemFileInputRef: { type: Function, required: true },
+  onFile: { type: Function, required: true },
+  isItemDragOver: { type: Boolean, required: true },
+  onItemDragEnter: { type: Function, required: true },
+  onItemDragOver: { type: Function, required: true },
+  onItemDragLeave: { type: Function, required: true },
+  onItemDrop: { type: Function, required: true },
+  openItemFilePicker: { type: Function, required: true },
+  uploadItemDrafts: { type: Array, required: true },
+  clearItemFiles: { type: Function, required: true },
+  canAddItem: { type: Boolean, required: true },
+  uploadItem: { type: Function, required: true },
+  removeUploadDraft: { type: Function, required: true },
+  hasTemplateItemOrderChanges: { type: Boolean, required: true },
+  saveTemplateItemOrder: { type: Function, required: true },
+  templateItemListRef: { type: Function, required: true },
+  saveTemplateItemLabel: { type: Function, required: true },
+  removeTemplateItem: { type: Function, required: true },
+  selectedTemplateId: { type: String, default: '' },
+})
+
+defineEmits(['update:templateMetaDraftName', 'update:templateMetaDraftSlug'])
+
+function setTemplateItemListElement(el) {
+  props.templateItemListRef(el)
+}
+
+function setThumbFileElement(el) {
+  props.thumbFileInputRef(el)
+}
+</script>
+
+<template>
+  <div v-if="props.activeTemplateRequest" class="panel requestWorkspace">
+    <div class="requestWorkspace__head">
+      <div>
+        <div class="panel__title">진행 중인 요청 작업</div>
+        <div class="requestWorkspace__title">{{ props.activeTemplateRequest.sourceTierListTitle || '템플릿 요청' }}</div>
+        <div class="hint hint--tight">
+          {{
+            props.activeTemplateRequest.type === 'create'
+              ? (props.activeTemplateRequest.targetTopicId
+                ? '이미 연결된 신규 템플릿이 있어요. 필요한 아이템만 골라 저장하세요.'
+                : '새 템플릿을 한 번 만든 뒤 필요한 아이템만 골라 저장하세요.')
+              : '필요한 아이템만 남긴 뒤 기본 아이템 추가 버튼으로 반영하세요.'
+          }}
+        </div>
+      </div>
+      <div class="requestWorkspace__stats">
+        <span class="pill pill--accent">{{ props.activeTemplateRequest.type === 'create' ? '신규 템플릿 요청' : '기존 템플릿 업데이트' }}</span>
+        <span class="pill">요청 아이템 {{ props.stagedRequestDraftCount }}개</span>
+        <span v-if="props.appliedRequestItemCount" class="pill pill--soft">이미 반영 {{ props.appliedRequestItemCount }}개</span>
+        <span v-if="props.activeTemplateRequest.type === 'create' && (props.activeTemplateRequest.targetTopicName || props.activeTemplateRequest.targetTopicId)" class="pill pill--soft">
+          연결된 템플릿 · {{ props.activeTemplateRequest.targetTopicName || props.activeTemplateRequest.targetTopicId }}
+        </span>
+      </div>
+    </div>
+    <div class="requestWorkspace__actions">
+      <a
+        v-if="props.templateRequestSourceUrl(props.activeTemplateRequest)"
+        class="btn btn--ghost btn--small"
+        :href="props.templateRequestSourceUrl(props.activeTemplateRequest)"
+        target="_blank"
+        rel="noreferrer"
+      >
+        요청 티어표 보기
+      </a>
+      <button
+        v-if="props.activeTemplateRequest.type === 'create' && !props.activeTemplateRequest.targetTopicId"
+        class="btn btn--ghost btn--small"
+        type="button"
+        @click="props.openTemplateCreateModal"
+      >
+        새 템플릿 만들기
+      </button>
+    </div>
+  </div>
+
+  <div v-if="props.isTemplateLoading" class="panel panel--empty">
+    <div class="emptyState">
+      <div class="emptyState__title">템플릿 정보를 불러오는 중이에요.</div>
+      <div class="emptyState__desc">선택한 템플릿의 썸네일과 기본 아이템을 곧 표시합니다.</div>
+    </div>
+  </div>
+  <div v-else-if="props.hasSelectedTemplate" class="panel">
+    <section class="adminCard templateSettingsCard">
+      <div class="templateSettingsCard__media">
+        <input :ref="setThumbFileElement" type="file" accept="image/*" class="srOnlyInput" @change="props.onThumb" />
+        <button
+          class="thumbDropZone"
+          :class="{ 'thumbDropZone--active': props.isThumbDragOver }"
+          type="button"
+          @click="props.openThumbFilePicker"
+          @dragenter="props.onThumbDragEnter"
+          @dragover="props.onThumbDragOver"
+          @dragleave="props.onThumbDragLeave"
+          @drop="props.onThumbDrop"
+        >
+          <img v-if="props.displayThumbnailUrl" class="selectedThumb selectedThumb--sidebar" :src="props.displayThumbnailUrl" :alt="props.selectedTemplate.template.name" />
+          <div v-else class="selectedThumb selectedThumb--empty selectedThumb--sidebar">대표 썸네일</div>
+          <div class="thumbDropZone__copy">
+            <div class="thumbDropZone__title">{{ props.displayThumbnailUrl ? '썸네일 변경' : '클릭 & 드래그' }}</div>
+          </div>
+        </button>
+      </div>
+      <div class="templateSettingsCard__body">
+        <div class="panel__title">템플릿 설정</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 ? '저장중...' : '이름/주소 저장' }}
+          </button>
+          <button class="btn btn--ghost" :disabled="!props.canBulkTagTemplateItems" @click="props.openTemplateBulkTagModal">기본 아이템 공통 태그</button>
+          <button class="btn btn--ghost" @click="props.openTemplateLibraryItemModal">개별 아이템 검색</button>
+          <button class="btn btn--ghost" @click="props.openTemplateSourceImportModal">기존 템플릿 가져오기</button>
+          <button class="btn" :disabled="!props.canApplyThumbnail" @click="props.uploadThumbnail">썸네일 적용</button>
+          <button class="btn btn--danger" @click="props.removeTemplate">템플릿 삭제</button>
+        </div>
+      </div>
+    </section>
+
+    <div class="section">
+      <section class="adminCard">
+        <div class="section__title">기본 아이템 추가</div>
+        <div class="itemComposer">
+          <div class="itemComposer__form">
+            <input :ref="props.itemFileInputRef" type="file" accept="image/*" multiple class="srOnlyInput" @change="props.onFile" />
+            <div
+              class="dropZone"
+              :class="{ 'dropZone--active': props.isItemDragOver }"
+              @click="props.openItemFilePicker"
+              @dragenter="props.onItemDragEnter"
+              @dragover="props.onItemDragOver"
+              @dragleave="props.onItemDragLeave"
+              @drop="props.onItemDrop"
+            >
+              <div class="dropZone__iconWrap">
+                <SvgIcon :src="addPhotoAlternateIcon" alt="" class="dropZone__icon" />
+              </div>
+              <div class="dropZone__title">이미지를 드래그해서 기본 아이템으로 추가</div>
+              <div class="dropZone__desc">
+                여러 파일을 한 번에 올릴 수 있고, 저장 라벨은 파일명으로 자동 생성됩니다.
+                <span v-if="props.stagedRequestDraftCount"> 현재 요청에서 가져온 아이템 {{ props.stagedRequestDraftCount }}개도 함께 검토 중이에요.</span>
+              </div>
+              <div class="dropZone__actions">
+                <button class="btn btn--ghost btn--small dropZone__button" type="button" @click.stop="props.openItemFilePicker">파일 선택</button>
+              </div>
+            </div>
+          </div>
+          <div class="itemPreviewCard">
+            <div v-if="props.uploadItemDrafts.length" class="itemDraftList">
+              <div
+                v-for="draft in props.uploadItemDrafts"
+                :key="draft.kind + ':' + (draft.itemId || draft.file?.name || draft.previewUrl)"
+                class="itemDraftRow"
+              >
+                <div class="itemDraftRow__preview">
+                  <img class="itemPreviewImage" :src="draft.previewUrl" :alt="draft.sourceName || 'item preview'" />
+                </div>
+                <div class="itemDraftRow__body">
+                  <input v-model="draft.label" class="input input--labelEdit input--dense" maxlength="60" placeholder="아이템 이름" />
+                  <div class="hint hint--tight">{{ draft.sourceName }}</div>
+                  <div class="itemDraftRow__meta">
+                    <span class="pill" :class="draft.kind === 'request' ? 'pill--requestItem' : 'pill--directFile'">
+                      {{ draft.kind === 'request' ? '요청 아이템' : draft.kind === 'library' ? '기존 템플릿' : '직접 추가 파일' }}
+                    </span>
+                    <button class="btn btn--danger btn--small" type="button" @click="props.removeUploadDraft(draft)">제외</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-else class="itemPreviewEmpty">등록한 기본 아이템 미리보기가 여기에 표시됩니다.</div>
+            <button class="btn itemPreviewCard__submit" :disabled="!props.canAddItem" @click="props.uploadItem">
+              {{ props.uploadItemDrafts.length ? `아이템 ${props.uploadItemDrafts.length}개 추가` : '아이템 추가' }}
+            </button>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <div class="section">
+      <div class="sectionHeader">
+        <div>
+          <div class="section__title">현재 기본 아이템 목록</div>
+          <div class="hint hint--tight">드래그해서 기본 노출 순서를 바꿀 수 있어요. 저장 전까지는 화면에서만 순서가 바뀝니다.</div>
+        </div>
+        <button class="btn btn--primary btn--small" :disabled="!props.hasTemplateItemOrderChanges" @click="props.saveTemplateItemOrder">순서 저장</button>
+      </div>
+      <div v-if="!props.selectedTemplate?.items?.length" class="hint">아직 등록된 기본 아이템이 없어요.</div>
+        <div v-else :ref="setTemplateItemListElement" class="thumbGrid">
+        <div v-for="item in props.selectedTemplate.items" :key="item.id" class="thumbCard" :data-template-item-id="item.id">
+          <div class="thumbCard__media">
+            <img class="thumb thumb--template" :src="toApiUrl(item.src)" :alt="item.label" draggable="false" />
+            <button class="thumbCard__deleteBtn" type="button" data-no-drag @click="props.removeTemplateItem(item)">X</button>
+          </div>
+          <input
+            v-model="item.draftLabel"
+            class="input input--labelEdit"
+            placeholder="아이템 이름"
+            data-no-drag
+            @keydown.enter.prevent="props.saveTemplateItemLabel(item)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-else class="panel panel--empty">
+    <div class="emptyState">
+      <div class="emptyState__title">템플릿을 선택해 주세요.</div>
+      <div v-if="props.activeTemplateRequest?.type === 'create'" class="hint hint--tight">진행 중인 신규 템플릿 요청이 있어요. 위의 `새 템플릿 만들기`로 템플릿을 만든 뒤 아이템을 추가할 수 있습니다.</div>
+      <div v-if="props.selectedTemplateId" class="hint hint--tight">선택한 템플릿을 찾지 못했거나 로딩 중 오류가 발생했어요. 다시 선택해보세요.</div>
+    </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

@@ -0,0 +1,204 @@
+<script setup>
+import { toApiUrl } from '../../lib/runtime'
+
+const props = defineProps({
+  tierlistsMode: { type: String, required: true },
+  templateRequests: { type: Array, required: true },
+  openTemplateRequestPreview: { type: Function, required: true },
+  fmt: { type: Function, required: true },
+  templateRequestTargetLabel: { type: Function, required: true },
+  templateRequestStatusLabel: { type: Function, required: true },
+  templateRequestSourceUrl: { type: Function, required: true },
+  startTemplateRequestReview: { type: Function, required: true },
+  completeTemplateRequest: { type: Function, required: true },
+  adminTierLists: { type: Array, required: true },
+  tierListThumbUrl: { type: Function, required: true },
+  openAdminTierList: { type: Function, required: true },
+  tierListAuthorDisplayName: { type: Function, required: true },
+  tierListVisibilityLabel: { type: Function, required: true },
+  openTierListExtraItemModal: { type: Function, required: true },
+  openTierListImportModal: { type: Function, required: true },
+  adminTierListPage: { type: Number, required: true },
+  adminTierListPageCount: { type: Number, required: true },
+  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>
+
+<template>
+  <div v-if="props.tierlistsMode === 'requests'" class="panel">
+    <div class="sectionHeader">
+      <div>
+        <div class="panel__title">사용자 요청</div>
+      </div>
+    </div>
+
+    <div v-if="!props.templateRequests.length" class="hint">현재 처리 대기 중인 템플릿 요청이 없어요.</div>
+    <div v-else class="templateRequestList">
+      <article v-for="request in props.templateRequests" :key="request.id" class="tierAdminCard templateRequestCard templateRequestCard--aligned">
+        <div class="templateRequestCard__side">
+          <a
+            class="tierAdminCard__preview templateRequestCard__preview"
+            :href="props.templateRequestSourceUrl(request) || undefined"
+            :target="props.templateRequestSourceUrl(request) ? '_blank' : undefined"
+            :rel="props.templateRequestSourceUrl(request) ? 'noreferrer' : undefined"
+            :aria-disabled="!props.templateRequestSourceUrl(request)"
+          >
+            <img v-if="request.thumbnailSrc" class="tierAdminCard__thumb" :src="toApiUrl(request.thumbnailSrc)" :alt="request.sourceTierListTitle" draggable="false" />
+            <div v-else class="tierAdminCard__thumb tierAdminCard__thumb--empty"></div>
+          </a>
+          <div class="templateRequestCard__thumbMeta">
+            <template v-if="request.type === 'create'">
+              <label class="templateRequestField">
+                <span class="templateRequestField__label">템플릿 이름</span>
+                <input v-model="request.draftTopicName" class="input" placeholder="새 템플릿 이름" />
+              </label>
+              <label class="templateRequestField">
+                <span class="templateRequestField__label">템플릿 ID</span>
+                <input v-model="request.draftTopicId" class="input" placeholder="임시 템플릿 ID" />
+              </label>
+            </template>
+            <template v-else>
+              <div class="templateRequestCard__thumbLabel">템플릿 이름</div>
+              <div class="templateRequestCard__thumbValue">{{ request.draftTopicName || request.sourceTopicName || '-' }}</div>
+              <div class="templateRequestCard__thumbLabel">템플릿 ID</div>
+              <div class="templateRequestCard__thumbValue">{{ request.draftTopicId || request.sourceTopicId || '-' }}</div>
+            </template>
+          </div>
+        </div>
+
+        <div class="tierAdminCard__body">
+          <div class="tierAdminCard__head">
+            <div>
+              <span
+                class="pill templateRequestCard__cornerBadge"
+                :class="request.type === 'create' ? 'pill--create' : 'pill--owned'"
+              >
+                {{ request.type === 'create' ? '신규 템플릿' : '보유 템플릿' }}
+              </span>
+              <div class="tierAdminCard__title">{{ request.sourceTierListTitle }}</div>
+              <div v-if="request.sourceDescription" class="tierAdminCard__desc">{{ request.sourceDescription }}</div>
+              <div class="tierAdminCard__meta">
+                {{ request.requesterName }} · {{ props.fmt(request.createdAt) }}
+              </div>
+              <div class="tierAdminCard__meta">{{ props.templateRequestTargetLabel(request) }}</div>
+            </div>
+          </div>
+
+          <div class="tierAdminCard__stats">
+            <span class="pill">추가 아이템 {{ request.items?.length || 0 }}개</span>
+            <span v-if="request.type === 'create' && (request.targetTopicName || request.targetTopicId)" class="pill pill--soft">
+              연결됨 · {{ request.targetTopicName || request.targetTopicId }}
+            </span>
+            <span class="pill" :class="{ 'pill--accent': request.status === 'reviewing' }">{{ props.templateRequestStatusLabel(request) }}</span>
+          </div>
+
+          <div v-if="request.items?.length" class="tierAdminItemList templateRequestCard__items">
+            <button v-for="item in request.items" :key="item.id" class="tierAdminItem" type="button">
+              <img class="tierAdminItem__thumb" :src="toApiUrl(item.src)" :alt="item.label" />
+              <div class="tierAdminItem__title">{{ item.label }}</div>
+            </button>
+          </div>
+
+          <div class="templateRequestCard__footer">
+            <div class="templateRequestCard__footerLeft"></div>
+            <div class="templateRequestCard__actions">
+              <button class="btn btn--primary" :disabled="request.isHandling" @click="props.startTemplateRequestReview(request)">
+                {{
+                  request.isHandling
+                    ? '이동중...'
+                    : request.type === 'create' && (request.targetTopicName || request.targetTopicId)
+                      ? '연결된 템플릿 열기'
+                      : '확인하기'
+                }}
+              </button>
+              <button class="btn btn--ghost" :disabled="request.isHandling || request.status !== 'reviewing'" @click="props.completeTemplateRequest(request)">처리 완료</button>
+            </div>
+          </div>
+        </div>
+      </article>
+    </div>
+  </div>
+
+  <div v-else class="panel">
+    <div class="sectionHeader">
+      <div>
+        <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>
+      </div>
+    </div>
+
+    <div v-if="!props.adminTierLists.length" class="hint">조건에 맞는 티어표가 없어요.</div>
+    <div v-else class="tierAdminList">
+      <article v-for="tierList in props.adminTierLists" :key="tierList.id" class="tierAdminCard">
+        <button class="tierAdminCard__preview" type="button" @click="props.openAdminTierList(tierList)">
+          <img v-if="props.tierListThumbUrl(tierList)" class="tierAdminCard__thumb" :src="props.tierListThumbUrl(tierList)" :alt="tierList.title" draggable="false" />
+          <div v-else class="tierAdminCard__thumb tierAdminCard__thumb--empty"></div>
+        </button>
+
+        <div class="tierAdminCard__body">
+          <div class="tierAdminCard__head">
+            <div>
+              <div class="tierAdminCard__title">{{ tierList.title }}</div>
+              <div v-if="tierList.description" class="tierAdminCard__desc">{{ tierList.description }}</div>
+              <div class="tierAdminCard__meta">
+                {{ tierList.topicName || tierList.topicId }} · {{ props.tierListAuthorDisplayName(tierList) }}
+              </div>
+              <div class="tierAdminCard__meta">{{ props.fmt(tierList.updatedAt) }}</div>
+            </div>
+          </div>
+
+          <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>
+
+          <div v-if="tierList.extraItems?.length" class="tierAdminSection">
+            <div class="tierAdminSection__title">추가로 넣은 아이템</div>
+            <div class="tierAdminItemList">
+              <button v-for="item in tierList.extraItems" :key="item.id" class="tierAdminItem" @click="props.openTierListExtraItemModal(item, tierList)">
+                <img class="tierAdminItem__thumb" :src="toApiUrl(item.src)" :alt="item.label" />
+                <div class="tierAdminItem__title">{{ item.label }}</div>
+              </button>
+            </div>
+            <div class="tierAdminSection__actions">
+              <button class="btn btn--ghost btn--small" @click="props.openTierListImportModal(tierList, tierList.extraItems)">추가 아이템 전체 가져오기</button>
+              <button v-if="tierList.topicId === 'freeform'" class="btn btn--primary btn--small" @click="props.openTierListImportModal(tierList, tierList.extraItems)">
+                새 템플릿으로 가져오기
+              </button>
+            </div>
+          </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>
+      </article>
+    </div>
+
+    <div class="pager">
+      <button class="btn btn--ghost" :disabled="props.adminTierListPage <= 1" @click="props.moveAdminTierListPage(-1)">이전</button>
+      <div class="pager__info">{{ props.adminTierListPage }} / {{ props.adminTierListPageCount }} 페이지 · 총 {{ props.adminTierListTotal }}개</div>
+      <button class="btn btn--ghost" :disabled="props.adminTierListPage >= props.adminTierListPageCount" @click="props.moveAdminTierListPage(1)">다음</button>
+    </div>
+  </div>
+</template>

frontend/src/components/admin/AdminUsersSection.vue

@@ -0,0 +1,155 @@
+<script setup>
+import { computed } from 'vue'
+import SvgIcon from '../SvgIcon.vue'
+
+const props = defineProps({
+  userQuery: { type: String, required: true },
+  userSort: { type: String, required: true },
+  userSortDirection: { type: String, required: true },
+  users: { type: Array, required: true },
+  submitUserFilters: { type: Function, required: true },
+  setUserAvatarInput: { type: Function, required: true },
+  onUserAvatarChange: { type: Function, required: true },
+  openUserAvatarPicker: { type: Function, required: true },
+  userAvatarUrl: { type: Function, required: true },
+  userDisplayName: { type: Function, required: true },
+  userAvatarFallback: { type: Function, required: true },
+  removeUserAvatar: { type: Function, required: true },
+  canEditUserAvatar: { type: Function, required: true },
+  canEditUserInfo: { type: Function, required: true },
+  canDeleteUser: { type: Function, required: true },
+  roleLabelOf: { type: Function, required: true },
+  fmt: { type: Function, required: true },
+  openUserProfile: { type: Function, required: true },
+  openUserDeleteModal: { type: Function, required: true },
+  openUserEditModal: { type: Function, required: true },
+  deleteIcon: { type: String, required: true },
+})
+
+const emit = defineEmits(['update:userQuery', 'update:userSort', 'update:userSortDirection'])
+
+const userQueryModel = computed({
+  get: () => props.userQuery,
+  set: (value) => emit('update:userQuery', value),
+})
+const userSortModel = computed({
+  get: () => props.userSort,
+  set: (value) => emit('update:userSort', value),
+})
+const userSortDirectionModel = computed({
+  get: () => props.userSortDirection,
+  set: (value) => emit('update:userSortDirection', value),
+})
+</script>
+
+<template>
+  <div class="panel">
+    <div class="sectionHeader">
+      <div>
+        <div class="panel__title">회원 관리</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="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>
+        <option value="asc">오름차순</option>
+      </select>
+      <button class="btn btn--ghost toolbar__button" type="button" @click="props.submitUserFilters">조회</button>
+    </div>
+
+    <div v-if="!props.users.length" class="hint">아직 가입한 회원이 없어요.</div>
+    <div v-else class="userList">
+      <article v-for="user in props.users" :key="user.id" class="userCard">
+        <div class="userCard__head">
+          <div class="userCard__identity">
+            <input
+              :ref="(el) => props.setUserAvatarInput(user.id, el)"
+              type="file"
+              accept="image/*"
+              class="srOnlyInput"
+              @change="props.onUserAvatarChange(user, $event)"
+            />
+            <div class="userAvatarWrap">
+              <button
+                class="userAvatar userAvatarButton"
+                type="button"
+                :disabled="user.isAvatarBusy || !props.canEditUserAvatar(user)"
+                @click="props.openUserAvatarPicker(user)"
+              >
+                <img v-if="props.userAvatarUrl(user)" class="userAvatar__image" :src="props.userAvatarUrl(user)" :alt="props.userDisplayName(user)" />
+                <span v-else class="userAvatar__fallback">{{ props.userAvatarFallback(user) }}</span>
+                <span class="userAvatarButton__overlay">{{ user.isAvatarBusy ? '업데이트중...' : '수정' }}</span>
+              </button>
+              <button
+                v-if="user?.avatarSrc"
+                class="userAvatarRemoveButton"
+                type="button"
+                title="회원 썸네일 삭제"
+                :disabled="user.isAvatarBusy || !props.canEditUserAvatar(user)"
+                @click.stop="props.removeUserAvatar(user)"
+              >
+                <SvgIcon class="userAvatarRemoveIcon" :src="props.deleteIcon" :size="12" />
+              </button>
+            </div>
+            <div class="userCard__identityMeta">
+              <div class="userCard__title">{{ props.userDisplayName(user) }}</div>
+              <div class="userCard__meta">{{ user.email }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="user.isAdmin" class="roleBadge userCard__roleBadge">{{ props.roleLabelOf(user) }}</div>
+
+        <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>{{ 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 iconActionButton--danger"
+            type="button"
+            title="회원 삭제"
+            :disabled="!props.canDeleteUser(user)"
+            @click="props.openUserDeleteModal(user)"
+          >
+            <SvgIcon class="iconActionButton__icon" :src="props.deleteIcon" :size="18" />
+          </button>
+          <button
+            class="btn btn--ghost userSaveButton"
+            type="button"
+            :disabled="!props.canEditUserInfo(user)"
+            @click="props.openUserEditModal(user)"
+          >
+            회원 정보 수정
+          </button>
+          <button
+            class="btn btn--ghost userSaveButton"
+            type="button"
+            @click="props.openUserProfile(user)"
+          >
+            프로필 보기
+          </button>
+        </div>
+      </article>
+    </div>
+  </div>
+</template>

frontend/src/composables/useAdminCustomItems.js

@@ -0,0 +1,340 @@
+export function useAdminCustomItems({
+  api,
+  toast,
+  customItems,
+  customItemPage,
+  customItemLimit,
+  customItemPageCount,
+  customItemQuery,
+  customItemFilter,
+  customItemModalOpen,
+  customItemDeleteModalOpen,
+  customItemModalHistoryActive,
+  modalTargetCustomItem,
+  customItemModalDraftLabel,
+  customItemModalDraftTags,
+  customItemModalLabelSaving,
+  customItemModalTargetTemplateId,
+  customItemReplacementQuery,
+  customItemReplacementItems,
+  customItemReplacementLoading,
+  customItemReplacementTargetId,
+  customItemReplacementBusy,
+  templates,
+  selectedTemplateId,
+  refreshCustomItems,
+  loadTemplate,
+  resetMessages,
+  success,
+  error,
+}) {
+  function submitCustomItemSearch() {
+    customItemPage.value = 1
+    refreshCustomItems()
+  }
+
+  function changeCustomItemFilter(filter) {
+    customItemFilter.value = filter
+    customItemPage.value = 1
+    refreshCustomItems()
+  }
+
+  function changeCustomItemLimit(limit) {
+    customItemLimit.value = limit
+    customItemPage.value = 1
+    refreshCustomItems()
+  }
+
+  function moveCustomItemPage(direction) {
+    const nextPage = customItemPage.value + direction
+    if (nextPage < 1 || nextPage > customItemPageCount.value) return
+    customItemPage.value = nextPage
+    refreshCustomItems()
+  }
+
+  function pushCustomItemModalHistoryState() {
+    if (typeof window === 'undefined') return
+    window.history.pushState({ ...(window.history.state || {}), adminCustomItemModal: true }, '', window.location.href)
+    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',
+        collapseShared: true,
+      })
+      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 || ''
+    customItemModalDraftTags.value = Array.isArray(item?.tags) ? [...item.tags] : []
+    customItemModalTargetTemplateId.value = ''
+    customItemReplacementQuery.value = ''
+    customItemReplacementItems.value = []
+    customItemReplacementTargetId.value = ''
+    customItemReplacementBusy.value = false
+    customItemModalOpen.value = true
+    pushCustomItemModalHistoryState()
+  }
+
+  function closeCustomItemModal({ fromPopState = false } = {}) {
+    customItemModalOpen.value = false
+    customItemDeleteModalOpen.value = false
+    modalTargetCustomItem.value = null
+    customItemModalDraftLabel.value = ''
+    customItemModalDraftTags.value = []
+    customItemModalLabelSaving.value = false
+    customItemModalTargetTemplateId.value = ''
+    customItemReplacementQuery.value = ''
+    customItemReplacementItems.value = []
+    customItemReplacementTargetId.value = ''
+    customItemReplacementLoading.value = false
+    customItemReplacementBusy.value = false
+
+    if (fromPopState) {
+      customItemModalHistoryActive.value = false
+      return
+    }
+
+    if (customItemModalHistoryActive.value && typeof window !== 'undefined') {
+      customItemModalHistoryActive.value = false
+      window.history.back()
+    }
+  }
+
+  function openCustomItemDeleteModal(item) {
+    if (!item) return
+    if (item.sourceType === 'user' && !item.replacedAt && (item.usageCount > 0 || item.linkedTemplates.length > 0)) {
+      error.value = '사용 중이거나 템플릿에 연결된 사용자 업로드 이미지는 먼저 참조를 정리해야 삭제할 수 있어요.'
+      return
+    }
+    modalTargetCustomItem.value = item
+    customItemDeleteModalOpen.value = true
+  }
+
+  function closeCustomItemDeleteModal() {
+    customItemDeleteModalOpen.value = false
+  }
+
+  async function removeCustomItem(item = modalTargetCustomItem.value) {
+    resetMessages()
+    if (!item) return
+    if (item.sourceType === 'user' && !item.replacedAt && (item.usageCount > 0 || item.linkedTemplates.length > 0)) {
+      error.value = '사용 중이거나 템플릿에 연결된 사용자 업로드 이미지는 먼저 참조를 정리해야 삭제할 수 있어요.'
+      return
+    }
+
+    try {
+      await api.deleteAdminCustomItem(item.id)
+      closeCustomItemDeleteModal()
+      closeCustomItemModal()
+      await refreshCustomItems()
+      success.value =
+        item.sourceType === 'template'
+          ? '선택한 템플릿 아이템을 제거했어요.'
+          : item.sourceType === 'asset'
+            ? '선택한 이미지 자산을 삭제했어요.'
+            : '사용자 업로드 이미지를 삭제했어요.'
+    } catch (e) {
+      error.value =
+        item.sourceType === 'template'
+          ? '템플릿 아이템 제거에 실패했어요.'
+          : item.sourceType === 'asset'
+            ? '이미지 자산 삭제에 실패했어요.'
+            : '사용자 업로드 이미지 삭제에 실패했어요.'
+    }
+  }
+
+  async function removeUnusedCustomItems() {
+    resetMessages()
+    const ok = window.confirm('현재 검색 조건에 맞는 미사용 이미지를 모두 삭제할까요?')
+    if (!ok) return
+
+    try {
+      const data = await api.deleteAdminUnusedCustomItems({ q: customItemQuery.value })
+      await refreshCustomItems()
+      success.value = `${data.deletedCount || 0}개의 미사용 이미지를 삭제했어요.`
+    } catch (e) {
+      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)
+    const nextTags = Array.from(
+      new Set(
+        (Array.isArray(customItemModalDraftTags.value) ? customItemModalDraftTags.value : [])
+          .map((tag) => tag.trim().replace(/^#/, '').slice(0, 40))
+          .filter(Boolean)
+      )
+    ).slice(0, 30)
+    if (
+      !item ||
+      !nextLabel ||
+      (nextLabel === item.label && JSON.stringify(nextTags) === JSON.stringify(Array.isArray(item.tags) ? item.tags : [])) ||
+      customItemModalLabelSaving.value
+    ) {
+      return
+    }
+
+    try {
+      customItemModalLabelSaving.value = true
+      const data = await api.updateAdminCustomItemLabel(item.id, { label: nextLabel, tags: nextTags, sourceType: item.sourceType })
+      item.label = data.item?.label || nextLabel
+      item.tags = Array.isArray(data.item?.tags) ? data.item.tags : nextTags
+      customItemModalDraftLabel.value = item.label
+      customItemModalDraftTags.value = [...item.tags]
+      customItems.value = customItems.value.map((entry) => (entry.id === item.id ? { ...entry, label: item.label, tags: item.tags } : entry))
+      toast.success('아이템 메타를 변경했어요.')
+    } catch (e) {
+      error.value = '아이템 메타 변경에 실패했어요.'
+    } finally {
+      customItemModalLabelSaving.value = false
+    }
+  }
+
+  async function promoteCustomItem(item) {
+    resetMessages()
+    if (!customItemModalTargetTemplateId.value) {
+      error.value = '추가할 템플릿을 먼저 선택해주세요.'
+      return
+    }
+
+    try {
+      item.isPromoting = true
+      await api.promoteAdminTemplateItem(item.id, { topicId: customItemModalTargetTemplateId.value })
+      const targetTemplateName =
+        templates.value.find((template) => template.id === customItemModalTargetTemplateId.value)?.name || customItemModalTargetTemplateId.value
+      if (selectedTemplateId.value === customItemModalTargetTemplateId.value) await loadTemplate()
+      closeCustomItemModal()
+      success.value = `"${item.label}" 이미지를 ${targetTemplateName} 템플릿으로 추가했어요.`
+    } catch (e) {
+      error.value = '선택한 이미지를 템플릿으로 추가하지 못했어요.'
+    } finally {
+      item.isPromoting = false
+    }
+  }
+
+  async function unlinkCustomItemTemplate(item = modalTargetCustomItem.value, template) {
+    resetMessages()
+    if (!item?.id || !template?.id) {
+      error.value = '제외할 템플릿 정보를 찾지 못했어요.'
+      return
+    }
+
+    const ok = window.confirm(`"${template.name}" 템플릿에서 이 이미지를 제외할까요?`)
+    if (!ok) return
+
+    try {
+      await api.unlinkAdminCustomItemTemplate(item.id, { topicId: template.id })
+      if (selectedTemplateId.value === template.id) await loadTemplate()
+      await refreshCustomItems()
+      modalTargetCustomItem.value = {
+        ...item,
+        linkedTemplates: (item.linkedTemplates || []).filter((entry) => entry.id !== template.id),
+      }
+      success.value = `"${template.name}" 템플릿에서 이미지를 제외했어요.`
+    } catch (e) {
+      error.value = '템플릿 연결 해제에 실패했어요.'
+    }
+  }
+
+  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,
+    changeCustomItemLimit,
+    moveCustomItemPage,
+    pushCustomItemModalHistoryState,
+    openCustomItemModal,
+    closeCustomItemModal,
+    openCustomItemDeleteModal,
+    closeCustomItemDeleteModal,
+    removeCustomItem,
+    removeUnusedCustomItems,
+    showUnusedCustomItems,
+    saveCustomItemModalLabel,
+    promoteCustomItem,
+    unlinkCustomItemTemplate,
+    refreshReplacementCandidates,
+    replaceCustomItem,
+    restoreCustomItem,
+  }
+}

frontend/src/composables/useAdminFeaturedTemplates.js

@@ -0,0 +1,92 @@
+import { nextTick } from 'vue'
+import Sortable from 'sortablejs'
+
+export function useAdminFeaturedTemplates({
+  api,
+  featuredListEl,
+  featuredSortable,
+  featuredTemplateIds,
+  templates,
+  resetMessages,
+  success,
+  error,
+}) {
+  function destroyFeaturedSortable() {
+    if (featuredSortable.value) {
+      featuredSortable.value.destroy()
+      featuredSortable.value = null
+    }
+  }
+
+  async function syncFeaturedSortable() {
+    await nextTick()
+    destroyFeaturedSortable()
+    if (!featuredListEl.value) return
+
+    featuredSortable.value = Sortable.create(featuredListEl.value, {
+      animation: 160,
+      draggable: '[data-featured-id]',
+      handle: '[data-featured-handle]',
+      ghostClass: 'ghost',
+      chosenClass: 'chosen',
+      onEnd: (evt) => {
+        if (evt.oldIndex == null || evt.newIndex == null || evt.oldIndex === evt.newIndex) return
+        const nextIds = [...featuredTemplateIds.value]
+        const [moved] = nextIds.splice(evt.oldIndex, 1)
+        nextIds.splice(evt.newIndex, 0, moved)
+        featuredTemplateIds.value = nextIds
+      },
+    })
+  }
+
+  function addFeaturedTemplate(templateId) {
+    resetMessages()
+    if (!templateId || featuredTemplateIds.value.includes(templateId)) return
+    if (featuredTemplateIds.value.length >= 50) {
+      error.value = '상단 고정 템플릿은 최대 50개까지만 설정할 수 있어요.'
+      return
+    }
+    featuredTemplateIds.value = [...featuredTemplateIds.value, templateId]
+    syncFeaturedSortable()
+  }
+
+  function removeFeaturedTemplate(templateId) {
+    resetMessages()
+    featuredTemplateIds.value = featuredTemplateIds.value.filter((id) => id !== templateId)
+    syncFeaturedSortable()
+  }
+
+  function moveFeaturedTemplate(templateId, direction) {
+    const currentIndex = featuredTemplateIds.value.indexOf(templateId)
+    const nextIndex = currentIndex + direction
+    if (currentIndex < 0 || nextIndex < 0 || nextIndex >= featuredTemplateIds.value.length) return
+    const nextIds = [...featuredTemplateIds.value]
+    const [moved] = nextIds.splice(currentIndex, 1)
+    nextIds.splice(nextIndex, 0, moved)
+    featuredTemplateIds.value = nextIds
+  }
+
+  async function saveFeaturedOrder() {
+    resetMessages()
+    try {
+      const data = await api.updateAdminTemplateDisplayOrder({ topicIds: featuredTemplateIds.value })
+      templates.value = data.templates || []
+      featuredTemplateIds.value = templates.value
+        .filter((template) => template.displayRank != null)
+        .sort((a, b) => a.displayRank - b.displayRank)
+        .map((template) => template.id)
+      success.value = '홈 화면 템플릿 순서를 저장했어요.'
+    } catch (e) {
+      error.value = '템플릿 순서 저장에 실패했어요.'
+    }
+  }
+
+  return {
+    destroyFeaturedSortable,
+    syncFeaturedSortable,
+    addFeaturedTemplate,
+    removeFeaturedTemplate,
+    moveFeaturedTemplate,
+    saveFeaturedOrder,
+  }
+}

frontend/src/composables/useAdminTemplateManager.js

@@ -0,0 +1,488 @@
+import { nextTick } from 'vue'
+import Sortable from 'sortablejs'
+
+export function useAdminTemplateManager({
+  api,
+  toApiUrl,
+  selectedTemplateId,
+  selectedTemplate,
+  uploadFiles,
+  uploadItemDrafts,
+  thumbFile,
+  itemPreviewUrls,
+  itemFileInput,
+  templateItemListEl,
+  templateItemSortable,
+  savedTemplateItemOrderIds,
+  isTemplateLoading,
+  activeTemplateRequest,
+  templateRequests,
+  customItemModalOpen,
+  customItemModalTargetTemplateId,
+  newTemplateId,
+  newTemplateName,
+  newTemplateIsPublic,
+  clearPreviewUrl,
+  resetFileInput,
+  resetUploadState,
+  refreshTemplates,
+  closeTemplateCreateModal,
+  resetMessages,
+  success,
+  error,
+}) {
+  function parseTagsText(value) {
+    return Array.from(
+      new Set(
+        String(value || '')
+          .split(',')
+          .map((tag) => tag.trim().replace(/^#/, '').slice(0, 40))
+          .filter(Boolean)
+      )
+    ).slice(0, 30)
+  }
+
+  function normalizeDraftSrc(src) {
+    if (typeof src !== 'string') return ''
+    const raw = src.trim()
+    if (!raw) return ''
+    if (raw.startsWith('/uploads/')) return raw
+    try {
+      const url = new URL(raw)
+      return url.pathname || raw
+    } catch (e) {
+      return raw
+    }
+  }
+
+  function requestItemFilename(item = {}) {
+    const src = typeof item.src === 'string' ? item.src : ''
+    return src.split('/').pop() || item.file?.name || 'item'
+  }
+
+  function destroyTemplateItemSortable() {
+    if (templateItemSortable.value) {
+      templateItemSortable.value.destroy()
+      templateItemSortable.value = null
+    }
+  }
+
+  async function syncTemplateItemSortable() {
+    await nextTick()
+    destroyTemplateItemSortable()
+    if (!templateItemListEl.value || !selectedTemplate.value?.items?.length) return
+
+    templateItemSortable.value = Sortable.create(templateItemListEl.value, {
+      animation: 160,
+      draggable: '[data-template-item-id]',
+      forceFallback: true,
+      fallbackOnBody: false,
+      filter: '[data-no-drag]',
+      preventOnFilter: false,
+      fallbackClass: 'thumbCard--dragging',
+      ghostClass: 'ghost',
+      chosenClass: 'chosen',
+      onEnd: (evt) => {
+        if (evt.oldIndex == null || evt.newIndex == null || evt.oldIndex === evt.newIndex) return
+        const nextItems = [...(selectedTemplate.value?.items || [])]
+        const [moved] = nextItems.splice(evt.oldIndex, 1)
+        nextItems.splice(evt.newIndex, 0, moved)
+        selectedTemplate.value = {
+          ...selectedTemplate.value,
+          items: nextItems,
+        }
+      },
+    })
+  }
+
+  function mergeRequestItemsIntoDrafts(request) {
+    const requestId = request?.id
+    if (!requestId) return
+    const existingTemplateSrcs = new Set((selectedTemplate.value?.items || []).map((item) => normalizeDraftSrc(item?.src)).filter(Boolean))
+    const existingKeys = new Set(uploadItemDrafts.value.map((draft) => `${draft.kind}:${draft.requestId || ''}:${draft.itemId || draft.file?.name || ''}`))
+    const nextRequestDrafts = (request.items || [])
+      .filter((item) => item?.src)
+      .map((item) => ({
+        kind: 'request',
+        requestId,
+        itemId: item.id,
+        previewUrl: toApiUrl(item.src),
+        label: item.label || '',
+        sourceName: requestItemFilename(item),
+        src: item.src,
+      }))
+      .filter((draft) => !existingTemplateSrcs.has(normalizeDraftSrc(draft.src)))
+      .filter((draft) => !existingKeys.has(`${draft.kind}:${draft.requestId}:${draft.itemId}`))
+
+    if (nextRequestDrafts.length) {
+      uploadItemDrafts.value = [...uploadItemDrafts.value, ...nextRequestDrafts]
+    }
+  }
+
+  function mergeLibraryItemsIntoDrafts(items, sourceLabel = '') {
+    const existingTemplateSrcs = new Set((selectedTemplate.value?.items || []).map((item) => normalizeDraftSrc(item?.src)).filter(Boolean))
+    const existingDraftSrcs = new Set(uploadItemDrafts.value.map((draft) => normalizeDraftSrc(draft?.src)).filter(Boolean))
+    const existingKeys = new Set(uploadItemDrafts.value.map((draft) => `${draft.kind}:${draft.itemSourceType || ''}:${draft.itemId || draft.file?.name || ''}`))
+    const nextDrafts = (items || [])
+      .filter((item) => item?.id && item?.src)
+      .map((item) => ({
+        kind: 'library',
+        itemId: item.id,
+        itemSourceType: item.sourceType || 'template',
+        previewUrl: toApiUrl(item.src),
+        label: item.label || '',
+        tagsText: Array.isArray(item.tags) ? item.tags.join(', ') : '',
+        sourceName: sourceLabel ? `${sourceLabel} · ${item.label || item.id}` : (item.label || item.id),
+        src: item.src,
+      }))
+      .filter((draft) => !existingTemplateSrcs.has(normalizeDraftSrc(draft.src)))
+      .filter((draft) => !existingDraftSrcs.has(normalizeDraftSrc(draft.src)))
+      .filter((draft) => !existingKeys.has(`${draft.kind}:${draft.itemSourceType}:${draft.itemId}`))
+
+    if (nextDrafts.length) {
+      uploadItemDrafts.value = [...uploadItemDrafts.value, ...nextDrafts]
+    }
+    return nextDrafts.length
+  }
+
+  function removeUploadDraft(targetDraft) {
+    const targetKey = `${targetDraft.kind}:${targetDraft.requestId || ''}:${targetDraft.itemId || targetDraft.file?.name || ''}:${targetDraft.previewUrl || ''}`
+    uploadItemDrafts.value = uploadItemDrafts.value.filter((draft) => {
+      const currentKey = `${draft.kind}:${draft.requestId || ''}:${draft.itemId || draft.file?.name || ''}:${draft.previewUrl || ''}`
+      return currentKey !== targetKey
+    })
+    uploadFiles.value = uploadItemDrafts.value.filter((draft) => draft.kind === 'file').map((draft) => draft.file).filter(Boolean)
+  }
+
+  async function loadTemplate(options = {}) {
+    const preserveUploadState = !!options.preserveUploadState
+    resetMessages()
+    if (!preserveUploadState) resetUploadState()
+
+    if (!selectedTemplateId.value) {
+      selectedTemplate.value = null
+      savedTemplateItemOrderIds.value = []
+      destroyTemplateItemSortable()
+      return
+    }
+
+    try {
+      isTemplateLoading.value = true
+      const data = await api.getTopic(selectedTemplateId.value)
+      const loadedTemplate = data.template || data.topic || null
+      selectedTemplate.value = {
+        ...data,
+        template: loadedTemplate,
+        items: (data.items || []).map((item) => ({
+          ...item,
+          draftLabel: item.label,
+          draftTags: Array.isArray(item.tags) ? item.tags.join(', ') : '',
+        })),
+      }
+      savedTemplateItemOrderIds.value = (data.items || []).map((item) => item.id)
+      await syncTemplateItemSortable()
+    } catch (e) {
+      selectedTemplate.value = null
+      error.value = '템플릿 정보를 불러오지 못했어요.'
+    } finally {
+      isTemplateLoading.value = false
+    }
+  }
+
+  async function createTemplate(options = {}) {
+    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()
+    try {
+      const res = await fetch(toApiUrl('/api/admin/templates'), {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          slug: nextTopicSlug,
+          name: nextTopicName,
+          isPublic: !!newTemplateIsPublic.value,
+          thumbnailSrc: activeTemplateRequest.value?.type === 'create' ? (activeTemplateRequest.value?.thumbnailSrc || '') : '',
+        }),
+      })
+      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, {
+          topicId: createdTemplate.id,
+        })
+        activeTemplateRequest.value = {
+          ...activeTemplateRequest.value,
+          targetTopicId: linkData.request?.targetTopicId || createdTemplate.id,
+          targetTopicName: linkData.request?.targetTopicName || createdTemplate.name || nextTopicName,
+        }
+        const requestIndex = templateRequests.value.findIndex((entry) => entry.id === activeTemplateRequest.value.id)
+        if (requestIndex >= 0) {
+          templateRequests.value.splice(requestIndex, 1, {
+            ...templateRequests.value[requestIndex],
+            targetTopicId: linkData.request?.targetTopicId || createdTemplate.id,
+            targetTopicName: linkData.request?.targetTopicName || createdTemplate.name || nextTopicName,
+          })
+        }
+      }
+      await refreshTemplates()
+      selectedTemplateId.value = createdTemplate.id
+      if (customItemModalOpen.value) customItemModalTargetTemplateId.value = createdTemplate.id
+      closeTemplateCreateModal()
+      await loadTemplate({ preserveUploadState })
+      if (!preserveUploadState && activeTemplateRequest.value?.id) {
+        const sourceRequest = templateRequests.value.find((entry) => entry.id === activeTemplateRequest.value.id) || activeTemplateRequest.value
+        mergeRequestItemsIntoDrafts(sourceRequest)
+      }
+      success.value = '템플릿이 생성됐어요. 이어서 썸네일과 기본 아이템을 관리할 수 있어요.'
+    } 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 = '템플릿 생성 실패(관리자 권한/템플릿 주소 중복 확인)'
+    }
+  }
+
+  function handleItemFiles(fileList) {
+    const files = Array.from(fileList || []).filter((file) => (file.type || '').startsWith('image/'))
+    const requestDrafts = uploadItemDrafts.value.filter((draft) => draft.kind === 'request')
+    const previousFileDrafts = uploadItemDrafts.value.filter((draft) => draft.kind === 'file')
+    previousFileDrafts.forEach((draft) => {
+      if (draft.previewUrl) URL.revokeObjectURL(draft.previewUrl)
+    })
+    itemPreviewUrls.value = []
+    uploadFiles.value = files
+    uploadItemDrafts.value = requestDrafts
+    if (!files.length) {
+      resetFileInput('item')
+      return
+    }
+    itemPreviewUrls.value = files.map((file) => URL.createObjectURL(file))
+    const fileDrafts = files.map((file, index) => ({
+      kind: 'file',
+      file,
+      previewUrl: itemPreviewUrls.value[index],
+      label: (file.name || '').replace(/\.[^.]+$/, '').replace(/[_-]+/g, ' ').replace(/\s+/g, ' ').trim().slice(0, 60),
+      sourceName: file.name,
+    }))
+    uploadItemDrafts.value = [...requestDrafts, ...fileDrafts]
+    resetFileInput('item')
+  }
+
+  function onFile(event) {
+    handleItemFiles(event.target.files)
+  }
+
+  function openItemFilePicker() {
+    itemFileInput.value?.click()
+  }
+
+  function clearItemFiles() {
+    uploadFiles.value = []
+    uploadItemDrafts.value = []
+    itemPreviewUrls.value.forEach((url) => {
+      if (url) URL.revokeObjectURL(url)
+    })
+    itemPreviewUrls.value = []
+    resetFileInput('item')
+  }
+
+  async function uploadItem() {
+    resetMessages()
+    if (!uploadItemDrafts.value.length) {
+      error.value = '아이템 파일을 선택해주세요.'
+      return
+    }
+
+    try {
+      if (!selectedTemplateId.value && activeTemplateRequest.value?.type === 'create' && !activeTemplateRequest.value?.targetTopicId) {
+        const draftTopicId = (activeTemplateRequest.value?.draftTopicId || '').trim()
+        const draftTopicName = (activeTemplateRequest.value?.draftTopicName || '').trim()
+        if (!draftTopicId || !draftTopicName) {
+          error.value = '먼저 신규 템플릿의 이름과 템플릿 ID를 저장해주세요.'
+          return
+        }
+        await createTemplate({
+          topicId: draftTopicId,
+          topicName: draftTopicName,
+          preserveUploadState: true,
+        })
+      }
+
+      if (!selectedTemplateId.value) {
+        error.value = '템플릿을 먼저 선택해주세요.'
+        return
+      }
+
+      const fileDrafts = uploadItemDrafts.value.filter((entry) => entry.kind === 'file')
+      const requestDrafts = uploadItemDrafts.value.filter((entry) => entry.kind === 'request')
+      const libraryDrafts = uploadItemDrafts.value.filter((entry) => entry.kind === 'library')
+      const totalUploadBytes = fileDrafts.reduce((sum, entry) => sum + Number(entry.file?.size || 0), 0)
+      let uploadCount = 0
+
+      if (fileDrafts.length) {
+        console.info('[admin] template item upload start', {
+          topicId: selectedTemplateId.value,
+          fileCount: fileDrafts.length,
+          totalBytes: totalUploadBytes,
+          labels: fileDrafts.map((entry) => entry.label.trim()),
+        })
+        const fd = new FormData()
+        fileDrafts.forEach((entry) => {
+          fd.append('images', entry.file)
+          fd.append('labels', entry.label.trim())
+        })
+        const res = await fetch(toApiUrl(`/api/admin/templates/${encodeURIComponent(selectedTemplateId.value)}/images`), {
+          method: 'POST',
+          credentials: 'include',
+          body: fd,
+        })
+        if (!res.ok) {
+          const responseText = await res.text().catch(() => '')
+          console.error('[admin] template item upload failed', {
+            topicId: selectedTemplateId.value,
+            fileCount: fileDrafts.length,
+            totalBytes: totalUploadBytes,
+            status: res.status,
+            body: responseText,
+          })
+          const uploadError = new Error('failed')
+          uploadError.status = res.status
+          uploadError.body = responseText
+          throw uploadError
+        }
+        console.info('[admin] template item upload success', {
+          topicId: selectedTemplateId.value,
+          fileCount: fileDrafts.length,
+          totalBytes: totalUploadBytes,
+        })
+        uploadCount += fileDrafts.length
+      }
+
+      if (requestDrafts.length) {
+        const requestIds = [...new Set(requestDrafts.map((entry) => entry.requestId).filter(Boolean))]
+        for (const requestId of requestIds) {
+          const draftsForRequest = requestDrafts.filter((entry) => entry.requestId === requestId)
+          const result = await api.promoteAdminTemplateRequestItems(requestId, {
+            topicId: selectedTemplateId.value,
+            itemIds: draftsForRequest.map((entry) => entry.itemId).filter(Boolean),
+            itemSrcs: draftsForRequest.map((entry) => entry.src).filter(Boolean),
+            itemLabels: draftsForRequest.reduce((acc, entry) => {
+              if (entry.itemId) acc[entry.itemId] = entry.label.trim()
+              return acc
+            }, {}),
+          })
+          uploadCount += Array.isArray(result?.items) ? result.items.length : 0
+        }
+      }
+
+      if (libraryDrafts.length) {
+        for (const draft of libraryDrafts) {
+          const promoted = await api.promoteAdminTemplateItem(draft.itemId, {
+            topicId: selectedTemplateId.value,
+          })
+          const createdItem = promoted?.item || null
+          if (createdItem?.id) {
+            const nextTags = parseTagsText(draft.tagsText)
+            const needsMetaUpdate =
+              (draft.label || '').trim() !== (createdItem.label || '').trim() ||
+              JSON.stringify(nextTags) !== JSON.stringify(Array.isArray(createdItem.tags) ? createdItem.tags : [])
+            if (needsMetaUpdate) {
+              await api.updateAdminTemplateItem(selectedTemplateId.value, createdItem.id, {
+                label: (draft.label || createdItem.label || '').trim(),
+                tags: nextTags,
+              })
+            }
+            uploadCount += 1
+          }
+        }
+      }
+
+      resetUploadState()
+      await loadTemplate()
+      success.value = `템플릿 기본 아이템 ${uploadCount}개 추가를 완료했어요.`
+    } catch (e) {
+      console.error('[admin] uploadItem error', {
+        message: e?.message || '',
+        status: e?.status || 0,
+        body: e?.body || '',
+        data: e?.data || null,
+      })
+      const apiError = e?.data?.error || ''
+      if (apiError === 'no_items_selected') {
+        error.value = '추가할 요청 아이템이 없어요.'
+        return
+      }
+      if (apiError === 'promote_items_failed') {
+        const detail = e?.data?.detail ? ` (${e.data.detail})` : ''
+        error.value = `요청 아이템을 템플릿 기본 아이템으로 옮기지 못했어요.${detail}`
+        return
+      }
+      if (apiError === 'topic_not_found') {
+        error.value = '선택한 템플릿을 찾지 못했어요.'
+        return
+      }
+      if (e?.status === 413) {
+        error.value = '한 번에 업로드한 파일 용량이 너무 커서 실패했어요.'
+        return
+      }
+      error.value = '아이템 추가에 실패했어요.'
+    }
+  }
+
+  async function saveTemplateItemOrder() {
+    resetMessages()
+    if (!selectedTemplateId.value || !selectedTemplate.value?.items?.length) return
+
+    try {
+      const data = await api.updateAdminTemplateItemDisplayOrder(selectedTemplateId.value, {
+        itemIds: selectedTemplate.value.items.map((item) => item.id),
+      })
+      selectedTemplate.value = {
+        ...selectedTemplate.value,
+        items: (data.items || []).map((item) => ({
+          ...item,
+          draftLabel: item.label,
+          draftTags: Array.isArray(item.tags) ? item.tags.join(', ') : '',
+        })),
+      }
+      savedTemplateItemOrderIds.value = (data.items || []).map((item) => item.id)
+      await syncTemplateItemSortable()
+      success.value = '기본 아이템 순서를 저장했어요.'
+    } catch (e) {
+      error.value = '기본 아이템 순서 저장에 실패했어요.'
+    }
+  }
+
+  return {
+    requestItemFilename,
+    destroyTemplateItemSortable,
+    syncTemplateItemSortable,
+    mergeRequestItemsIntoDrafts,
+    mergeLibraryItemsIntoDrafts,
+    removeUploadDraft,
+    loadTemplate,
+    createTemplate,
+    handleItemFiles,
+    onFile,
+    openItemFilePicker,
+    clearItemFiles,
+    uploadItem,
+    saveTemplateItemOrder,
+  }
+}

frontend/src/composables/useAdminTemplateRequests.js

@@ -0,0 +1,116 @@
+import { editorPath } from '../lib/paths'
+
+export function useAdminTemplateRequests({
+  api,
+  activeTemplateRequest,
+  refreshTemplateRequests,
+  setTab,
+  openTemplateCreateModal,
+  newTemplateId,
+  newTemplateName,
+  selectAdminTemplate,
+  mergeRequestItemsIntoDrafts,
+  resetMessages,
+  success,
+  error,
+}) {
+  function updateActiveTemplateRequest(request) {
+    if (!request?.id) return
+    activeTemplateRequest.value = {
+      id: request.id,
+      type: request.type,
+      status: request.status,
+      thumbnailSrc: request.thumbnailSrc || '',
+      draftTopicId: request.draftTopicId || '',
+      draftTopicName: request.draftTopicName || '',
+      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 || '',
+    }
+  }
+
+  function templateRequestStatusLabel(request) {
+    return request.status === 'reviewing' ? '확인함' : '미확인'
+  }
+
+  function templateRequestSourceUrl(request) {
+    const topicRef = request?.sourceTopicSlug || request?.sourceTopicId || ''
+    if (!topicRef || !request?.sourceTierListId) return ''
+    return editorPath(topicRef, request.sourceTierListId, { preview: true })
+  }
+
+  function templateRequestReviewHint(request) {
+    if (request.type === 'create') return '템플릿 생성 후 필요한 아이템만 골라 추가하고, 끝나면 여기서 처리 완료하세요.'
+    return '확인하기를 누르면 템플릿 관리 화면에 요청 아이템이 임시 추가되어 필요한 것만 선별 저장할 수 있어요.'
+  }
+
+  async function startTemplateRequestReview(request) {
+    resetMessages()
+    try {
+      request.isHandling = true
+      const data = await api.startAdminTemplateRequestReview(request.id)
+      const syncedRequest = {
+        ...request,
+        ...(data.request || {}),
+        draftTopicId: request.draftTopicId || '',
+        draftTopicName: request.draftTopicName || '',
+        draftTopicIsPublic: !!request.draftTopicIsPublic,
+      }
+      Object.assign(request, syncedRequest)
+      request.status = syncedRequest.status || 'reviewing'
+      updateActiveTemplateRequest(syncedRequest)
+      setTab('template-admin')
+
+      if (request.type === 'create') {
+        const linkedTopicId = syncedRequest.targetTopicId || ''
+        if (linkedTopicId) {
+          await selectAdminTemplate(linkedTopicId)
+        } else {
+          openTemplateCreateModal()
+          newTemplateId.value = (syncedRequest.draftTopicId || '').trim()
+          newTemplateName.value = (syncedRequest.draftTopicName || '').trim()
+        }
+        mergeRequestItemsIntoDrafts(syncedRequest)
+      } else {
+        const nextTopicId = syncedRequest.targetTopicId || syncedRequest.sourceTopicId || ''
+        if (nextTopicId) await selectAdminTemplate(nextTopicId)
+        mergeRequestItemsIntoDrafts(syncedRequest)
+      }
+      success.value = '요청 아이템을 템플릿 관리 화면으로 가져왔어요. 필요한 항목만 골라서 추가해 주세요.'
+    } catch (e) {
+      error.value = '요청 확인 단계로 이동하지 못했어요.'
+    } finally {
+      request.isHandling = false
+    }
+  }
+
+  async function completeTemplateRequest(request) {
+    resetMessages()
+    try {
+      request.isHandling = true
+      await api.completeAdminTemplateRequest(request.id)
+      if (activeTemplateRequest.value?.id === request.id) activeTemplateRequest.value = null
+      await refreshTemplateRequests()
+      success.value = '요청 카드를 처리 완료로 정리했어요.'
+    } catch (e) {
+      error.value = '요청 완료 처리에 실패했어요.'
+    } finally {
+      request.isHandling = false
+    }
+  }
+
+  return {
+    updateActiveTemplateRequest,
+    templateRequestStatusLabel,
+    templateRequestSourceUrl,
+    templateRequestReviewHint,
+    startTemplateRequestReview,
+    completeTemplateRequest,
+  }
+}

frontend/src/composables/useAdminUsers.js

@@ -0,0 +1,297 @@
+import { computed } from 'vue'
+
+export function useAdminUsers({
+  api,
+  auth,
+  users,
+  userQuery,
+  userSort,
+  userSortDirection,
+  userAvatarInputs,
+  modalTargetUser,
+  modalPasswordDraft,
+  modalRoleNextAdmin,
+  modalUserDraftEmail,
+  modalUserDraftNickname,
+  modalUserDraftIsAdmin,
+  userEditModalOpen,
+  userPasswordModalOpen,
+  userDeleteModalOpen,
+  userRoleModalOpen,
+  resetMessages,
+  refreshUsers,
+  success,
+  error,
+}) {
+  function setUserAvatarInput(userId, el) {
+    if (!userId) return
+    if (!el) {
+      delete userAvatarInputs.value[userId]
+      return
+    }
+    userAvatarInputs.value[userId] = el
+  }
+
+  const canManageModalRole = computed(() => {
+    if (!auth.user?.isPrimaryAdmin) return false
+    if (!modalTargetUser.value) return false
+    return !modalTargetUser.value.isPrimaryAdmin
+  })
+
+  function canManageUser(user) {
+    if (!user?.isPrimaryAdmin) return true
+    return !!auth.user?.isPrimaryAdmin
+  }
+
+  function canEditUserAvatar(user) {
+    return canManageUser(user)
+  }
+
+  function canEditUserInfo(user) {
+    return canManageUser(user)
+  }
+
+  function canResetUserPassword(user) {
+    return canManageUser(user)
+  }
+
+  function canDeleteUser(user) {
+    if (!canManageUser(user)) return false
+    if (user?.isAdmin && !auth.user?.isPrimaryAdmin) return false
+    return user?.id !== auth.user?.id
+  }
+
+  const isUserEditDirty = computed(() => {
+    if (!modalTargetUser.value) return false
+    return (
+      modalUserDraftEmail.value.trim() !== (modalTargetUser.value.email || '') ||
+      modalUserDraftNickname.value.trim() !== (modalTargetUser.value.nickname || '') ||
+      !!modalUserDraftIsAdmin.value !== !!modalTargetUser.value.isAdmin
+    )
+  })
+
+  function roleLabelOf(user) {
+    if (user?.isPrimaryAdmin) return '최고 관리자'
+    if (user?.isAdmin) return '운영자'
+    return '일반 회원'
+  }
+
+  function openUserAvatarPicker(user) {
+    if (!canEditUserAvatar(user)) return
+    userAvatarInputs.value[user?.id]?.click()
+  }
+
+  async function uploadUserAvatar(user, file, { remove = false } = {}) {
+    resetMessages()
+    if (!user?.id) return
+
+    try {
+      user.isAvatarBusy = true
+      const data = await api.updateAdminUserAvatar(user.id, { file, removeAvatar: remove })
+      const updated = data.user
+      users.value = users.value.map((entry) =>
+        entry.id === updated.id
+          ? {
+              ...entry,
+              ...updated,
+              isAvatarBusy: false,
+            }
+          : entry
+      )
+      if (modalTargetUser.value?.id === updated.id) {
+        modalTargetUser.value = { ...modalTargetUser.value, ...updated }
+      }
+      if (updated.id === auth.user?.id) await auth.refresh()
+      await refreshUsers()
+      success.value = remove ? '회원 썸네일을 삭제했어요.' : '회원 썸네일을 업데이트했어요.'
+    } catch (e) {
+      error.value = remove ? '회원 썸네일 삭제에 실패했어요.' : '회원 썸네일 변경에 실패했어요.'
+    } finally {
+      const target = users.value.find((entry) => entry.id === user.id)
+      if (target) target.isAvatarBusy = false
+    }
+  }
+
+  async function onUserAvatarChange(user, event) {
+    const file = event.target.files && event.target.files[0] ? event.target.files[0] : null
+    event.target.value = ''
+    if (!file) return
+    await uploadUserAvatar(user, file)
+  }
+
+  async function removeUserAvatar(user) {
+    if (!canEditUserAvatar(user)) return
+    if (!user?.avatarSrc) return
+    await uploadUserAvatar(user, null, { remove: true })
+  }
+
+  function openUserEditModal(user) {
+    if (!canEditUserInfo(user)) return
+    resetMessages()
+    modalTargetUser.value = user ? { ...user } : null
+    modalUserDraftEmail.value = user?.email || ''
+    modalUserDraftNickname.value = user?.nickname || ''
+    modalUserDraftIsAdmin.value = !!user?.isAdmin
+    userEditModalOpen.value = true
+  }
+
+  function closeUserEditModal() {
+    userEditModalOpen.value = false
+    modalTargetUser.value = null
+    modalUserDraftEmail.value = ''
+    modalUserDraftNickname.value = ''
+    modalUserDraftIsAdmin.value = false
+  }
+
+  async function saveUserEdit() {
+    resetMessages()
+    if (!modalTargetUser.value?.id) return
+
+    try {
+      const data = await api.updateAdminUser(modalTargetUser.value.id, {
+        email: modalUserDraftEmail.value.trim(),
+        nickname: modalUserDraftNickname.value.trim(),
+        isAdmin: !!modalUserDraftIsAdmin.value,
+      })
+      const updated = data.user
+      users.value = users.value.map((entry) =>
+        entry.id === updated.id
+          ? {
+              ...entry,
+              ...updated,
+              isAvatarBusy: entry.isAvatarBusy || false,
+            }
+          : entry
+      )
+      if (updated.id === auth.user?.id) await auth.refresh()
+      closeUserEditModal()
+      await refreshUsers()
+      success.value = '회원 정보를 저장했어요.'
+    } catch (e) {
+      error.value = '회원 정보 저장에 실패했어요.'
+    }
+  }
+
+  function openUserPasswordModal(user) {
+    if (!canResetUserPassword(user)) return
+    resetMessages()
+    modalTargetUser.value = user ? { ...user } : null
+    modalPasswordDraft.value = ''
+    userPasswordModalOpen.value = true
+  }
+
+  function closeUserPasswordModal() {
+    userPasswordModalOpen.value = false
+    modalTargetUser.value = null
+    modalPasswordDraft.value = ''
+  }
+
+  function userDisplayName(user) {
+    return user?.nickname || user?.email?.split('@')[0] || '알 수 없음'
+  }
+
+  async function confirmUserPasswordReset() {
+    resetMessages()
+    if (!modalTargetUser.value?.id) return
+
+    const password = modalPasswordDraft.value.trim()
+    if (!password) {
+      error.value = '초기화할 비밀번호를 입력해주세요.'
+      return
+    }
+
+    try {
+      await api.updateAdminUserPassword(modalTargetUser.value.id, { password })
+      success.value = `${userDisplayName(modalTargetUser.value)} 계정 비밀번호를 초기화했어요.`
+      closeUserPasswordModal()
+    } catch (e) {
+      error.value = '비밀번호 초기화에 실패했어요.'
+    }
+  }
+
+  function openUserDeleteModal(user) {
+    if (!canDeleteUser(user)) return
+    resetMessages()
+    modalTargetUser.value = user ? { ...user } : null
+    userDeleteModalOpen.value = true
+  }
+
+  function closeUserDeleteModal() {
+    userDeleteModalOpen.value = false
+    modalTargetUser.value = null
+  }
+
+  async function confirmUserDelete() {
+    resetMessages()
+    if (!modalTargetUser.value?.id) return
+
+    try {
+      const deletingSelf = modalTargetUser.value.id === auth.user?.id
+      const deletedName = userDisplayName(modalTargetUser.value)
+      await api.deleteAdminUser(modalTargetUser.value.id)
+      users.value = users.value.filter((entry) => entry.id !== modalTargetUser.value.id)
+      closeUserDeleteModal()
+      success.value = `${deletedName} 계정을 삭제했어요.`
+      if (deletingSelf) await auth.refresh()
+    } catch (e) {
+      error.value = '회원 삭제에 실패했어요.'
+    }
+  }
+
+  function openUserRoleModal(user, nextIsAdmin = !modalUserDraftIsAdmin.value) {
+    resetMessages()
+    modalTargetUser.value = user ? { ...user } : null
+    modalRoleNextAdmin.value = !!nextIsAdmin
+    userRoleModalOpen.value = true
+  }
+
+  function closeUserRoleModal() {
+    userRoleModalOpen.value = false
+    if (!userEditModalOpen.value) modalTargetUser.value = null
+    modalRoleNextAdmin.value = false
+  }
+
+  function confirmUserRoleDraft() {
+    if (!modalTargetUser.value?.id) return
+    modalUserDraftIsAdmin.value = modalRoleNextAdmin.value
+    const targetLabel = modalRoleNextAdmin.value ? '운영자 권한을 저장 대기 상태로 반영했어요.' : '운영자 권한 해제를 저장 대기 상태로 반영했어요.'
+    closeUserRoleModal()
+    success.value = targetLabel
+  }
+
+  function submitUserFilters() {
+    refreshUsers({
+      q: userQuery.value,
+      sort: userSort.value,
+      direction: userSortDirection.value,
+    })
+  }
+
+  return {
+    setUserAvatarInput,
+    canManageModalRole,
+    canEditUserAvatar,
+    canEditUserInfo,
+    canResetUserPassword,
+    canDeleteUser,
+    isUserEditDirty,
+    roleLabelOf,
+    openUserAvatarPicker,
+    onUserAvatarChange,
+    removeUserAvatar,
+    openUserEditModal,
+    closeUserEditModal,
+    saveUserEdit,
+    openUserPasswordModal,
+    closeUserPasswordModal,
+    confirmUserPasswordReset,
+    openUserDeleteModal,
+    closeUserDeleteModal,
+    confirmUserDelete,
+    openUserRoleModal,
+    closeUserRoleModal,
+    confirmUserRoleDraft,
+    submitUserFilters,
+    userDisplayName,
+  }
+}

frontend/src/composables/useToast.js

@@ -0,0 +1,61 @@
+import { readonly, ref } from 'vue'
+
+const toasts = ref([])
+let toastSeq = 0
+const TOAST_EXIT_MS = 220
+
+function clearToastTimer(toast) {
+  if (toast?.timerId) {
+    window.clearTimeout(toast.timerId)
+    toast.timerId = 0
+  }
+}
+
+function removeToast(id) {
+  toasts.value = toasts.value.filter((toast) => toast.id !== id)
+}
+
+function dismissToast(id) {
+  const target = toasts.value.find((toast) => toast.id === id)
+  if (!target || target.isClosing) return
+
+  clearToastTimer(target)
+  target.isClosing = true
+  target.timerId = window.setTimeout(() => removeToast(id), TOAST_EXIT_MS)
+}
+
+function showToast(message, { type = 'info', duration = 2600 } = {}) {
+  if (!message) return ''
+  const duplicated = toasts.value.find((toast) => toast.message === message && toast.type === type && !toast.isClosing)
+
+  if (duplicated) {
+    duplicated.count = (duplicated.count || 1) + 1
+    clearToastTimer(duplicated)
+    if (duration > 0) {
+      duplicated.timerId = window.setTimeout(() => dismissToast(duplicated.id), duration)
+    }
+    toasts.value = [...toasts.value]
+    return duplicated.id
+  }
+
+  const id = `toast-${++toastSeq}`
+  const nextToast = { id, message, type, count: 1, isClosing: false, timerId: 0 }
+  toasts.value = [...toasts.value, nextToast]
+
+  if (duration > 0) {
+    nextToast.timerId = window.setTimeout(() => dismissToast(id), duration)
+  }
+
+  return id
+}
+
+export function useToast() {
+  return {
+    toasts: readonly(toasts),
+    dismissToast,
+    showToast,
+    success: (message, options = {}) => showToast(message, { type: 'success', ...options }),
+    error: (message, options = {}) => showToast(message, { type: 'error', ...options }),
+    info: (message, options = {}) => showToast(message, { type: 'info', ...options }),
+  }
+}

frontend/src/lib/api.js

@@ -1,54 +1,207 @@
 import { toApiUrl } from './runtime'
 
+function emitBackendStatus(detail) {
+  if (typeof window === 'undefined') return
+  window.dispatchEvent(new CustomEvent('tier-maker:backend-status', { detail }))
+}
+
 async function request(path, { method = 'GET', body, headers } = {}) {
-  const res = await fetch(toApiUrl(path), {
-    method,
-    credentials: 'include',
-    headers: {
-      ...(body ? { 'Content-Type': 'application/json' } : {}),
-      ...(headers || {}),
-    },
-    body: body ? JSON.stringify(body) : undefined,
-  })
+  let res
+  try {
+    res = await fetch(toApiUrl(path), {
+      method,
+      credentials: 'include',
+      headers: {
+        ...(body ? { 'Content-Type': 'application/json' } : {}),
+        ...(headers || {}),
+      },
+      body: body ? JSON.stringify(body) : undefined,
+    })
+  } catch (error) {
+    emitBackendStatus({
+      state: 'offline',
+      message: '서버 연결을 확인할 수 없어 잠시 후 다시 시도해주세요.',
+      path,
+    })
+    throw error
+  }
 
   const contentType = res.headers.get('content-type') || ''
   const data = contentType.includes('application/json') ? await res.json() : await res.text()
 
   if (!res.ok) {
+    if (res.status >= 500 && data?.error === 'db_init_failed') {
+      emitBackendStatus({
+        state: 'maintenance',
+        message: '서비스 점검 중이거나 데이터베이스 초기화 중입니다. 잠시 후 다시 이용해주세요.',
+        path,
+      })
+    } else if (res.status >= 500) {
+      emitBackendStatus({
+        state: 'maintenance',
+        message: '서비스 내부 점검중입니다. 잠시 후 다시 이용해주세요.',
+        path,
+      })
+    }
     const err = new Error('request_failed')
     err.status = res.status
     err.data = data
     throw err
   }
+  emitBackendStatus({ state: 'online', path })
   return data
 }
 
 export const api = {
   me: () => request('/api/auth/me'),
   authMeta: () => request('/api/auth/meta'),
-  signup: ({ email, password }) => request('/api/auth/signup', { method: 'POST', body: { email, password } }),
+  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' }),
 
-  listGames: () => request('/api/games'),
-  getGame: (gameId) => request(`/api/games/${encodeURIComponent(gameId)}`),
-  listAdminCustomItems: ({ q = '', page = 1, limit = 50, orphanOnly = false } = {}) =>
+  listTopics: () => request('/api/topics'),
+  listAdminTemplates: () => request('/api/admin/templates'),
+  getTopic: (topicId) => request(`/api/topics/${encodeURIComponent(topicId)}`),
+  favoriteTopic: (topicId) => request(`/api/topics/${encodeURIComponent(topicId)}/favorite`, { method: 'POST' }),
+  unfavoriteTopic: (topicId) => request(`/api/topics/${encodeURIComponent(topicId)}/favorite`, { method: 'DELETE' }),
+  updateAdminTemplateDisplayOrder: (payload) => request('/api/admin/templates/display-order', { method: 'PATCH', body: payload }),
+  updateAdminTemplateItemDisplayOrder: (templateId, payload) =>
+    request(`/api/admin/templates/${encodeURIComponent(templateId)}/items/display-order`, { method: 'PATCH', body: payload }),
+  updateAdminTemplate: (templateId, payload) =>
+    request(`/api/admin/templates/${encodeURIComponent(templateId)}`, { method: 'PATCH', body: payload }),
+  updateAdminTemplateItem: (templateId, itemId, payload) =>
+    request(`/api/admin/templates/${encodeURIComponent(templateId)}/items/${encodeURIComponent(itemId)}`, { method: 'PATCH', body: payload }),
+  listAdminCustomItems: ({ q = '', page = 1, limit = 50, filter = 'all', collapseShared = false } = {}) =>
     request(
-      `/api/admin/custom-items?q=${encodeURIComponent(q)}&page=${encodeURIComponent(page)}&limit=${encodeURIComponent(limit)}&orphanOnly=${encodeURIComponent(orphanOnly)}`
+      `/api/admin/custom-items?q=${encodeURIComponent(q)}&page=${encodeURIComponent(page)}&limit=${encodeURIComponent(limit)}&filter=${encodeURIComponent(filter)}&collapseShared=${encodeURIComponent(collapseShared ? '1' : '0')}`
     ),
-  listAdminUsers: () => request('/api/admin/users'),
+  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'),
+  getAdminImageAssetStats: ({ month = '', limit = 12 } = {}) => {
+    const query = new URLSearchParams()
+    if (month) query.set('month', month)
+    query.set('limit', String(limit))
+    return request(`/api/admin/image-assets/stats?${query.toString()}`)
+  },
+  resetAdminImageAssetStats: (payload) => request('/api/admin/image-assets/stats/reset', { method: 'POST', body: payload || {} }),
+  cleanupAdminMissingImageReferences: () => request('/api/admin/image-assets/missing/cleanup', { method: 'POST', body: {} }),
+  listAdminUnusedImageAssets: ({ limit = 100, minAgeHours = 24 } = {}) => request(`/api/admin/image-assets/orphans?limit=${encodeURIComponent(limit)}&minAgeHours=${encodeURIComponent(minAgeHours)}`),
+  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 }),
+  unlinkAdminCustomItemTemplate: (itemId, payload) =>
+    request(`/api/admin/custom-items/${encodeURIComponent(itemId)}/unlink-template`, { 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) =>
+    request(`/api/admin/tierlists/${encodeURIComponent(tierListId)}/promote-items`, { method: 'POST', body: payload }),
+  createAdminTemplateFromTierList: (tierListId, payload) =>
+    request(`/api/admin/tierlists/${encodeURIComponent(tierListId)}/create-template`, { method: 'POST', body: payload }),
+  startAdminTemplateRequestReview: (requestId) =>
+    request(`/api/admin/template-requests/${encodeURIComponent(requestId)}/review`, { method: 'POST', body: {} }),
+  linkAdminTemplateRequestTemplate: (requestId, payload) =>
+    request(`/api/admin/template-requests/${encodeURIComponent(requestId)}/link-template`, { method: 'POST', body: payload }),
+  promoteAdminTemplateRequestItems: (requestId, payload) =>
+    request(`/api/admin/template-requests/${encodeURIComponent(requestId)}/promote-items`, { method: 'POST', body: payload }),
+  completeAdminTemplateRequest: (requestId) =>
+    request(`/api/admin/template-requests/${encodeURIComponent(requestId)}/complete`, { method: 'POST', body: {} }),
+  approveAdminTemplateRequest: (requestId, payload) =>
+    request(`/api/admin/template-requests/${encodeURIComponent(requestId)}/approve`, { method: 'POST', body: payload || {} }),
+  rejectAdminTemplateRequest: (requestId) => request(`/api/admin/template-requests/${encodeURIComponent(requestId)}/reject`, { method: 'POST', body: {} }),
+  listAdminUsers: ({ q = '', sort = 'recent', direction = 'desc' } = {}) =>
+    request(`/api/admin/users?q=${encodeURIComponent(q)}&sort=${encodeURIComponent(sort)}&direction=${encodeURIComponent(direction)}`),
   updateAdminUser: (userId, payload) =>
     request(`/api/admin/users/${encodeURIComponent(userId)}`, { method: 'PATCH', body: payload }),
   updateAdminUserPassword: (userId, payload) =>
     request(`/api/admin/users/${encodeURIComponent(userId)}/password`, { method: 'PATCH', body: payload }),
+  updateAdminUserAvatar: async (userId, { file, removeAvatar = false } = {}) => {
+    const fd = new FormData()
+    if (file) fd.append('avatar', file)
+    if (removeAvatar) fd.append('removeAvatar', '1')
+    const res = await fetch(toApiUrl(`/api/admin/users/${encodeURIComponent(userId)}/avatar`), {
+      method: 'POST',
+      credentials: 'include',
+      body: fd,
+    })
+    const data = await res.json()
+    if (!res.ok) {
+      const err = new Error('request_failed')
+      err.status = res.status
+      err.data = data
+      throw err
+    }
+    return data
+  },
   deleteAdminUser: (userId) => request(`/api/admin/users/${encodeURIComponent(userId)}`, { method: 'DELETE' }),
 
-  listPublicTierLists: (gameId) =>
-    request(`/api/tierlists/public?gameId=${encodeURIComponent(gameId || '')}`),
+  listPublicTierListsByTopic: (topicId) =>
+    request(`/api/tierlists/public?topicId=${encodeURIComponent(topicId || '')}`),
+  searchPublicTierListsByTopic: (topicId, q = '') =>
+    request(`/api/tierlists/public?topicId=${encodeURIComponent(topicId || '')}&q=${encodeURIComponent(q || '')}`),
+  searchAllPublicTierLists: (q = '') => request(`/api/tierlists/public?q=${encodeURIComponent(q || '')}`),
   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)}`),
+  listTierListComments: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/comments`),
+  createTierListComment: (id, payload) =>
+    request(`/api/tierlists/${encodeURIComponent(id)}/comments`, { method: 'POST', body: payload }),
+  deleteTierListComment: (id, commentId) =>
+    request(`/api/tierlists/${encodeURIComponent(id)}/comments/${encodeURIComponent(commentId)}`, { method: 'DELETE' }),
+  favoriteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/favorite`, { method: 'POST' }),
+  unfavoriteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/favorite`, { method: 'DELETE' }),
   deleteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}`, { method: 'DELETE' }),
+  duplicateTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/duplicate`, { method: 'POST' }),
+  listCommentInbox: ({ unreadOnly = false } = {}) =>
+    request(`/api/comments/inbox?unreadOnly=${encodeURIComponent(unreadOnly ? '1' : '0')}`),
+  getCommentInboxUnreadCount: () => request('/api/comments/inbox/unread-count'),
+  markCommentInboxRead: (payload) => request('/api/comments/inbox/read', { method: 'POST', body: payload }),
+  requestTierListTemplate: (payload) => request('/api/tierlists/template-request', { method: 'POST', body: payload }),
   saveTierList: (payload) => request('/api/tierlists', { method: 'POST', body: payload }),
+  uploadTierListThumbnail: async (file) => {
+    const fd = new FormData()
+    fd.append('thumbnail', file)
+    const res = await fetch(toApiUrl('/api/tierlists/thumbnail'), {
+      method: 'POST',
+      credentials: 'include',
+      body: fd,
+    })
+    const data = await res.json()
+    if (!res.ok) {
+      const err = new Error('request_failed')
+      err.status = res.status
+      err.data = data
+      throw err
+    }
+    return data
+  },
   deleteAdminCustomItem: (itemId) => request(`/api/admin/custom-items/${encodeURIComponent(itemId)}`, { method: 'DELETE' }),
   deleteAdminUnusedCustomItems: ({ q = '' } = {}) =>
     request(`/api/admin/custom-items?q=${encodeURIComponent(q)}`, { method: 'DELETE' }),

frontend/src/lib/display.js

@@ -0,0 +1,9 @@
+export function displayInitialFrom(primaryName = '', fallbackName = '', emptyValue = 'U') {
+  const primary = String(primaryName || '').trim()
+  if (primary) return Array.from(primary)[0] || emptyValue
+
+  const fallback = String(fallbackName || '').trim()
+  if (fallback) return Array.from(fallback)[0] || emptyValue
+
+  return emptyValue
+}

frontend/src/lib/paths.js

@@ -0,0 +1,59 @@
+function encodeSegment(value) {
+  return encodeURIComponent(String(value || '').trim())
+}
+
+export function homePath(query = '') {
+  const normalized = String(query || '').trim()
+  return normalized ? `/?q=${encodeURIComponent(normalized)}` : '/'
+}
+
+export function templatesPath(query = '') {
+  const normalized = String(query || '').trim()
+  return normalized ? `/templates?q=${encodeURIComponent(normalized)}` : '/templates'
+}
+
+export function loginPath(redirect = '') {
+  const normalized = String(redirect || '').trim()
+  return normalized ? `/login?redirect=${encodeURIComponent(normalized)}` : '/login'
+}
+
+export function topicPath(topicId) {
+  return `/topics/${encodeSegment(topicId)}`
+}
+
+export function editorNewPath(topicId) {
+  return `/editor/${encodeSegment(topicId)}/new`
+}
+
+export function editorPath(topicId, tierListId, { preview = false } = {}) {
+  const base = `/editor/${encodeSegment(topicId)}/${encodeSegment(tierListId)}`
+  return preview ? `${base}?preview=1` : base
+}
+
+export function shareEditorPath(topicId, tierListId) {
+  return `/share/editor/${encodeSegment(topicId)}/${encodeSegment(tierListId)}`
+}
+
+export function mePath() {
+  return '/me'
+}
+
+export function favoritesPath() {
+  return '/favorites'
+}
+
+export function followingFeedPath() {
+  return '/following'
+}
+
+export function commentsPath() {
+  return '/comments'
+}
+
+export function profilePath() {
+  return '/profile'
+}
+
+export function userProfilePath(userId) {
+  return `/users/${encodeSegment(userId)}`
+}

frontend/src/lib/runtime.js

@@ -3,7 +3,12 @@ const FALLBACK_API_ORIGIN = 'http://localhost:5179'
 export const API_ORIGIN = (import.meta.env.VITE_API_ORIGIN || FALLBACK_API_ORIGIN).replace(/\/+$/, '')
 
 export function toApiUrl(path = '') {
-  if (!path) return API_ORIGIN
+  const p = path.startsWith('/') ? path : `/${path}`
+
+  // 운영(Nginx 프록시)에서는 같은 도메인/프로토콜로 호출해야
+  // 세션 쿠키(`Set-Cookie`)가 브라우저에 정상 저장됩니다.
+  if (import.meta.env.PROD) return p
+
   if (/^https?:\/\//.test(path)) return path
-  return `${API_ORIGIN}${path.startsWith('/') ? path : `/${path}`}`
+  return `${API_ORIGIN}${p}`
 }

frontend/src/router/index.js

@@ -1,26 +1,57 @@
 import { createRouter as _createRouter, createWebHistory } from 'vue-router'
 
 import HomeView from '../views/HomeView.vue'
-import GameHubView from '../views/GameHubView.vue'
+import TemplatesView from '../views/TemplatesView.vue'
+import TopicHubView from '../views/TopicHubView.vue'
 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 CommentInboxView from '../views/CommentInboxView.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'
+import { useAuthStore } from '../stores/auth'
 
 export function createRouter() {
-  return _createRouter({
+  const router = _createRouter({
     history: createWebHistory(),
     routes: [
       { path: '/', name: 'home', component: HomeView },
-      { path: '/games/:gameId', name: 'gameHub', component: GameHubView },
-      { path: '/editor/:gameId/new', name: 'newEditor', component: TierEditorView },
-      { path: '/editor/:gameId/:tierListId', name: 'editEditor', component: TierEditorView },
+      { path: '/templates', name: 'templates', component: TemplatesView },
+      { path: '/topics/:topicId', name: 'topicHub', component: TopicHubView },
+      { path: '/editor/:topicId/new', name: 'newEditor', component: TierEditorView },
+      { path: '/editor/:topicId/:tierListId', name: 'editEditor', component: TierEditorView },
       { path: '/login', name: 'login', component: LoginView },
       { path: '/me', name: 'me', component: MyTierListsView },
-      { path: '/admin', name: 'admin', component: AdminView },
+      { path: '/favorites', name: 'favorites', component: FavoriteTierListsView },
+      { path: '/following', name: 'followingFeed', component: FollowingFeedView },
+      { path: '/comments', name: 'comments', component: CommentInboxView },
+      { path: '/search', name: 'search', component: SearchResultsView },
+      { path: '/admin', redirect: '/admin/featured' },
+      { path: '/admin/featured', name: 'adminFeatured', component: AdminView },
+      { path: '/admin/templates', name: 'adminTemplates', component: AdminView },
+      { path: '/admin/items', name: 'adminItems', component: AdminView },
+      { 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 },
     ],
   })
-}
 
+  router.beforeEach(async (to) => {
+    const routeName = String(to.name || '')
+    if (!routeName.startsWith('admin')) return true
+
+    const auth = useAuthStore()
+    if (!auth.hydrated) await auth.refresh()
+    if (!auth.user?.isAdmin) {
+      return { path: '/' }
+    }
+    return true
+  })
+
+  return router
+}

frontend/src/stores/auth.js

@@ -1,35 +1,62 @@
 import { defineStore } from 'pinia'
 import { api } from '../lib/api'
 
+let refreshPromise = null
+
 export const useAuthStore = defineStore('auth', {
   state: () => ({
     user: null,
     status: 'idle',
+    hydrated: false,
   }),
   actions: {
     async refresh() {
+      if (refreshPromise) return refreshPromise
       this.status = 'loading'
-      try {
-        const data = await api.me()
-        this.user = data.user
-      } finally {
-        this.status = 'idle'
-      }
+      refreshPromise = (async () => {
+        try {
+          const data = await api.me()
+          this.user = data.user
+          return this.user
+        } catch (error) {
+          this.user = null
+          return null
+        } finally {
+          this.status = 'idle'
+          this.hydrated = true
+          refreshPromise = null
+        }
+      })()
+      return refreshPromise
     },
-    async signup(email, password) {
-      const user = await api.signup({ email, password })
-      this.user = user
-      return user
+    async signup(email, nickname, password) {
+      const data = await api.signup({ email, nickname, password })
+      this.user = data?.user || null
+      this.hydrated = true
+      return data
     },
     async login(email, password) {
-      const user = await api.login({ email, password })
-      this.user = user
-      return user
+      const data = await api.login({ email, password })
+      this.user = data?.user || null
+      this.hydrated = true
+      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()
       this.user = null
+      this.hydrated = true
     },
   },
 })
-

frontend/src/style.css

@@ -1,57 +1,130 @@
 :root {
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
-  --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
-
-  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
-
-  font: 18px/145% var(--sans);
-  letter-spacing: 0.18px;
-  color-scheme: light dark;
-  color: var(--text);
-  background: var(--bg);
+  font-family: 'Pretendard', 'Inter', 'Segoe UI', sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: var(--theme-text);
+  background: var(--theme-body-bg);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  @media (max-width: 1024px) {
-    font-size: 16px;
-  }
+  --theme-body-bg: #121212;
+  --theme-shell-bg: rgba(14, 14, 14, 0.96);
+  --theme-rail-bg: rgba(14, 14, 14, 0.92);
+  --theme-main-bg: rgba(18, 18, 18, 0.98);
+  --theme-workspace-bg: rgba(24, 24, 24, 0.92);
+  --theme-card-bg: rgba(62, 62, 62, 0.82);
+  --theme-card-bg-hover: rgba(70, 70, 70, 0.96);
+  --theme-card-border: rgba(255, 255, 255, 0.16);
+  --theme-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  --theme-surface-soft: rgba(255, 255, 255, 0.05);
+  --theme-surface-soft-2: rgba(255, 255, 255, 0.06);
+  --theme-surface-soft-3: rgba(255, 255, 255, 0.08);
+  --theme-pill-bg: rgba(255, 255, 255, 0.03);
+  --theme-border: rgba(255, 255, 255, 0.08);
+  --theme-border-strong: rgba(255, 255, 255, 0.12);
+  --theme-text: rgba(255, 255, 255, 0.92);
+  --theme-text-strong: rgba(255, 255, 255, 0.98);
+  --theme-text-muted: rgba(255, 255, 255, 0.74);
+  --theme-text-soft: rgba(255, 255, 255, 0.62);
+  --theme-text-faint: rgba(255, 255, 255, 0.4);
+  --theme-thumb-fallback-bg: #555;
+  --theme-select-arrow: rgba(255, 255, 255, 0.68);
+  --theme-danger-bg: rgba(239, 68, 68, 0.1);
+  --theme-danger-border: rgba(239, 68, 68, 0.18);
+  --theme-accent-bg: rgba(76, 133, 245, 0.92);
+  --theme-accent-strong: rgba(137, 183, 255, 0.96);
+  --theme-accent-soft: rgba(76, 133, 245, 0.18);
+  --theme-accent-soft-strong: rgba(76, 133, 245, 0.3);
+  --theme-accent-text: #fff;
+  --theme-overlay-scrim: rgba(0, 0, 0, 0.62);
+  --theme-avatar-border: rgba(255, 255, 255, 0.14);
+  --theme-favorite-bg: rgba(12, 14, 18, 0.72);
+  --theme-favorite-border: rgba(255, 255, 255, 0.14);
+  --theme-favorite-icon: rgba(255, 255, 255, 0.94);
+  --theme-favorite-active-bg: rgba(54, 45, 10, 0.92);
+  --theme-favorite-active-border: rgba(255, 216, 107, 0.28);
+  --theme-favorite-active-icon: #ffd86b;
+  --theme-icon-filter: brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(207%) hue-rotate(186deg) brightness(96%) contrast(92%);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
+:root[data-theme='light'] {
+  --theme-body-bg: #eef2f8;
+  --theme-shell-bg: rgba(241, 245, 251, 0.98);
+  --theme-rail-bg: rgba(248, 250, 253, 0.98);
+  --theme-main-bg: rgba(234, 239, 247, 0.98);
+  --theme-workspace-bg: rgba(250, 252, 255, 0.97);
+  --theme-card-bg: rgba(255, 255, 255, 0.96);
+  --theme-card-bg-hover: rgba(246, 249, 253, 0.98);
+  --theme-card-border: rgba(71, 85, 105, 0.12);
+  --theme-card-shadow: 0 14px 30px rgba(57, 72, 92, 0.08);
+  --theme-surface-soft: rgba(75, 85, 99, 0.052);
+  --theme-surface-soft-2: rgba(75, 85, 99, 0.078);
+  --theme-surface-soft-3: rgba(75, 85, 99, 0.11);
+  --theme-pill-bg: rgba(75, 85, 99, 0.048);
+  --theme-border: rgba(71, 85, 105, 0.12);
+  --theme-border-strong: rgba(71, 85, 105, 0.18);
+  --theme-text: rgba(24, 33, 48, 0.93);
+  --theme-text-strong: rgba(11, 18, 32, 0.98);
+  --theme-text-muted: rgba(51, 65, 85, 0.78);
+  --theme-text-soft: rgba(71, 85, 105, 0.76);
+  --theme-text-faint: rgba(100, 116, 139, 0.9);
+  --theme-thumb-fallback-bg: #f3f6fb;
+  --theme-select-arrow: rgba(51, 65, 85, 0.72);
+  --theme-danger-bg: rgba(239, 68, 68, 0.1);
+  --theme-danger-border: rgba(239, 68, 68, 0.22);
+  --theme-accent-bg: rgba(56, 105, 226, 0.94);
+  --theme-accent-strong: rgba(47, 87, 194, 0.96);
+  --theme-accent-soft: rgba(56, 105, 226, 0.12);
+  --theme-accent-soft-strong: rgba(56, 105, 226, 0.22);
+  --theme-accent-text: #fff;
+  --theme-overlay-scrim: rgba(17, 24, 39, 0.28);
+  --theme-avatar-border: rgba(71, 85, 105, 0.16);
+  --theme-favorite-bg: rgba(255, 255, 255, 0.9);
+  --theme-favorite-border: rgba(71, 85, 105, 0.16);
+  --theme-favorite-icon: rgba(51, 65, 85, 0.92);
+  --theme-favorite-active-bg: rgba(255, 243, 199, 0.96);
+  --theme-favorite-active-border: rgba(217, 119, 6, 0.22);
+  --theme-favorite-active-icon: #b45309;
+  --theme-icon-filter: brightness(0) saturate(100%) invert(14%) sepia(14%) saturate(652%) hue-rotate(182deg) brightness(95%) contrast(91%);
+}
 
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  min-height: 100vh;
 }
 
 body {
   margin: 0;
+  background: var(--theme-body-bg);
+  color: var(--theme-text);
+  transition: background 220ms ease, color 220ms ease;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button {
+  appearance: none;
+}
+
+a {
+  color: inherit;
+}
+
+input,
+select,
+textarea {
+  color: var(--theme-text);
 }
 
 select {
@@ -59,253 +132,73 @@ select {
   -webkit-appearance: none;
   -moz-appearance: none;
   background-image:
-    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.78) 50%),
-    linear-gradient(135deg, rgba(255, 255, 255, 0.78) 50%, transparent 50%);
+    linear-gradient(45deg, transparent 50%, var(--theme-select-arrow) 50%),
+    linear-gradient(135deg, var(--theme-select-arrow) 50%, transparent 50%);
   background-position:
-    calc(100% - 18px) calc(50% - 2px),
-    calc(100% - 12px) calc(50% - 2px);
+    calc(100% - 20px) calc(50% - 2px),
+    calc(100% - 14px) calc(50% - 2px);
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
-  padding-right: 36px;
+  padding-right: 40px;
 }
 
 h1,
-h2 {
-  font-family: var(--heading);
-  font-weight: 500;
-  color: var(--text-h);
-}
-
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
-  }
-}
+h2,
+h3,
+h4,
 p {
   margin: 0;
 }
 
-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
-  border-radius: 4px;
-  color: var(--text-h);
-}
-
-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
-  background: var(--code-bg);
-}
-
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
-}
-
 #app {
-  width: 1126px;
-  max-width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-}
-
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
-}
-
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
-}
-
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
-}
-
-.ticks {
-  position: relative;
   width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
+}
+
+.pageWrap {
+  display: grid;
+  gap: 18px;
+}
+
+.pageHead {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  flex-wrap: wrap;
+  min-height: 96px;
+  padding: 0;
+}
+
+.pageHead__main {
+  display: grid;
+  align-content: start;
+  gap: 6px;
+  min-width: 0;
+}
+
+.pageHead__eyebrow {
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--theme-text-soft);
+}
+
+.pageHead__title {
+  font-size: 32px;
+  line-height: 1.05;
+  letter-spacing: -0.04em;
+  color: var(--theme-text-strong);
+}
+
+.pageHead__desc {
+  max-width: 720px;
+  color: var(--theme-text-muted);
+}
+
+.pageHead__aside {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
 }

frontend/src/views/CommentInboxView.vue

@@ -0,0 +1,621 @@
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { api } from '../lib/api'
+import { displayInitialFrom } from '../lib/display'
+import { editorPath, loginPath } from '../lib/paths'
+import { toApiUrl } from '../lib/runtime'
+import { useToast } from '../composables/useToast'
+
+const router = useRouter()
+const toast = useToast()
+const notifications = ref([])
+const isLoading = ref(false)
+const unreadOnly = ref(true)
+const isMarkingAllRead = ref(false)
+const markingNotificationId = ref('')
+
+const unreadCount = computed(() => notifications.value.filter((item) => !item.isRead).length)
+
+function avatarUrlOf(notification) {
+  return notification.actorAvatarSrc ? toApiUrl(notification.actorAvatarSrc) : ''
+}
+
+function parentAvatarUrlOf(notification) {
+  return notification.parentAuthorAvatarSrc ? toApiUrl(notification.parentAuthorAvatarSrc) : ''
+}
+
+function tierListThumbnailUrl(notification) {
+  return notification.tierListThumbnailSrc ? toApiUrl(notification.tierListThumbnailSrc) : ''
+}
+
+function avatarFallbackOf(notification) {
+  return displayInitialFrom(notification.actorName, notification.actorAccountName, '?')
+}
+
+function parentAvatarFallbackOf(notification) {
+  return displayInitialFrom(notification.parentAuthorName, notification.parentAuthorAccountName, '?')
+}
+
+function parentDisplayNameOf(notification) {
+  return notification.parentAuthorName || '알 수 없음'
+}
+
+function formatDate(ts) {
+  return new Date(Number(ts || 0)).toLocaleString('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+function notificationTitle(notification) {
+  return notification.notificationType === 'comment_reply' ? '내 댓글에 답글이 달렸어요.' : '내 티어표에 새 댓글이 달렸어요.'
+}
+
+function emitUnreadCount(unread) {
+  if (typeof window === 'undefined') return
+  window.dispatchEvent(new CustomEvent('tier-maker:comment-inbox-updated', { detail: { unreadCount: unread } }))
+}
+
+async function loadInbox() {
+  isLoading.value = true
+  try {
+    const data = await api.listCommentInbox({ unreadOnly: unreadOnly.value })
+    notifications.value = Array.isArray(data.notifications) ? data.notifications : []
+    emitUnreadCount(unreadCount.value)
+  } catch (error) {
+    toast.error('댓글 알림을 불러오지 못했어요.')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function markOneAsRead(notificationId) {
+  const target = notifications.value.find((item) => item.id === notificationId)
+  if (!target || target.isRead) return
+  const original = notifications.value.map((item) => ({ ...item }))
+  target.isRead = true
+  if (unreadOnly.value) {
+    notifications.value = notifications.value.filter((item) => item.id !== notificationId)
+  }
+  emitUnreadCount(unreadCount.value)
+  try {
+    await api.markCommentInboxRead({ notificationIds: [notificationId] })
+  } catch (error) {
+    notifications.value = original
+    emitUnreadCount(unreadCount.value)
+  }
+}
+
+async function markNotificationButton(notificationId) {
+  if (!notificationId || markingNotificationId.value) return
+  markingNotificationId.value = notificationId
+  try {
+    await markOneAsRead(notificationId)
+  } finally {
+    markingNotificationId.value = ''
+  }
+}
+
+async function markAllAsRead() {
+  if (!unreadCount.value) return
+  isMarkingAllRead.value = true
+  const original = notifications.value.map((item) => ({ ...item }))
+  notifications.value = notifications.value.map((item) => ({ ...item, isRead: true }))
+  emitUnreadCount(0)
+  try {
+    await api.markCommentInboxRead({ all: true })
+    if (unreadOnly.value) {
+      notifications.value = []
+    }
+  } catch (error) {
+    notifications.value = original
+    emitUnreadCount(unreadCount.value)
+    toast.error('읽음 처리를 완료하지 못했어요.')
+  } finally {
+    isMarkingAllRead.value = false
+  }
+}
+
+async function openNotification(notification) {
+  await markOneAsRead(notification.id)
+  router.push({
+    path: editorPath(notification.topicSlug || notification.topicId, notification.tierListId),
+    query: { commentId: notification.commentId },
+  })
+}
+
+onMounted(async () => {
+  try {
+    await api.me()
+  } catch (error) {
+    toast.error('로그인이 필요해요.')
+    router.push(loginPath('/comments'))
+    return
+  }
+  loadInbox()
+})
+
+watch(unreadOnly, loadInbox)
+</script>
+
+<template>
+  <section class="pageWrap">
+    <section class="pageHead">
+      <div class="pageHead__main">
+        <div class="pageHead__eyebrow">Inbox</div>
+        <h1 class="pageHead__title">댓글 관리</h1>
+        <p class="pageHead__desc">내 티어표에 달린 댓글과, 내 댓글에 달린 답글을 한곳에서 확인하고 바로 이동할 수 있어요.</p>
+      </div>
+    </section>
+
+    <section class="commentInboxToolbar">
+      <label class="toggleSwitch commentInboxToolbar__toggle">
+        <input v-model="unreadOnly" type="checkbox" />
+        <span class="toggleSwitch__label">안 읽은 댓글만 보기</span>
+        <span class="toggleSwitch__track"><span class="toggleSwitch__thumb"></span></span>
+      </label>
+      <button class="btn btn--save commentInboxToolbar__action" type="button" :disabled="!unreadCount || isMarkingAllRead" @click="markAllAsRead">
+        모두 읽음 처리
+      </button>
+    </section>
+
+    <section class="commentInboxPanel">
+      <div v-if="isLoading" class="commentInboxEmpty">댓글 알림을 불러오는 중이에요.</div>
+      <div v-else-if="notifications.length === 0" class="commentInboxEmpty">
+        {{ unreadOnly ? '안 읽은 댓글 알림이 없어요.' : '아직 도착한 댓글 알림이 없어요.' }}
+      </div>
+
+      <div v-else class="commentInboxList">
+        <article
+          v-for="notification in notifications"
+          :key="notification.id"
+          class="commentInboxCard"
+          :class="{ 'commentInboxCard--unread': !notification.isRead }"
+        >
+          <button class="commentInboxCard__body" type="button" @click="openNotification(notification)">
+            <div class="commentInboxCard__aside">
+              <div class="commentInboxCard__thumbWrap">
+                <img
+                  v-if="tierListThumbnailUrl(notification)"
+                  class="commentInboxCard__thumb"
+                  :src="tierListThumbnailUrl(notification)"
+                  :alt="notification.tierListTitle || '티어표 썸네일'"
+                  draggable="false"
+                />
+                <div v-else class="commentInboxCard__thumbFallback">티어표</div>
+              </div>
+              <div class="commentInboxCard__targetTitle">{{ notification.tierListTitle || '제목 없는 티어표' }}</div>
+              <div class="commentInboxCard__targetMeta">{{ notification.topicName || notification.topicSlug || notification.topicId }}</div>
+            </div>
+            <div class="commentInboxCard__main">
+              <div class="commentInboxCard__titleRow">
+                <div class="commentInboxCard__title">{{ notificationTitle(notification) }}</div>
+                <div class="commentInboxCard__status">
+                  <span v-if="!notification.isRead" class="commentInboxCard__dot" aria-label="안 읽음"></span>
+                  <button
+                    v-if="!notification.isRead"
+                    class="commentInboxCard__badge"
+                    type="button"
+                    :disabled="!!markingNotificationId"
+                    @click.stop="markNotificationButton(notification.id)"
+                  >
+                    {{ markingNotificationId === notification.id ? '처리 중...' : '읽음 처리' }}
+                  </button>
+                </div>
+              </div>
+              <div class="commentInboxCard__thread">
+                <div v-if="notification.parentCommentContent" class="commentInboxThread">
+                  <div class="commentInboxThread__label">루트 댓글</div>
+                  <div class="commentInboxThread__body">
+                    <img
+                      v-if="parentAvatarUrlOf(notification)"
+                      class="commentInboxThread__avatar"
+                      :src="parentAvatarUrlOf(notification)"
+                      :alt="parentDisplayNameOf(notification)"
+                      draggable="false"
+                    />
+                    <div v-else class="commentInboxThread__avatar commentInboxThread__avatar--fallback">{{ parentAvatarFallbackOf(notification) }}</div>
+                    <div class="commentInboxThread__content">
+                      <div class="commentInboxThread__meta">
+                        <span class="commentInboxThread__name">{{ parentDisplayNameOf(notification) }}</span>
+                        <span class="commentInboxThread__separator">·</span>
+                        <span class="commentInboxThread__date">{{ formatDate(notification.parentCommentCreatedAt) }}</span>
+                      </div>
+                      <div class="commentInboxThread__text">{{ notification.parentCommentContent }}</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="commentInboxThread commentInboxThread--accent">
+                  <div class="commentInboxThread__label">{{ notification.notificationType === 'comment_reply' ? '새 답글' : '새 댓글' }}</div>
+                  <div class="commentInboxThread__body">
+                    <img
+                      v-if="avatarUrlOf(notification)"
+                      class="commentInboxThread__avatar"
+                      :src="avatarUrlOf(notification)"
+                      :alt="notification.actorName || '작성자'"
+                      draggable="false"
+                    />
+                    <div v-else class="commentInboxThread__avatar commentInboxThread__avatar--fallback">{{ avatarFallbackOf(notification) }}</div>
+                    <div class="commentInboxThread__content">
+                      <div class="commentInboxThread__meta">
+                        <span class="commentInboxThread__name">{{ notification.actorName }}</span>
+                        <span class="commentInboxThread__separator">·</span>
+                        <span class="commentInboxThread__date">{{ formatDate(notification.createdAt) }}</span>
+                      </div>
+                      <div class="commentInboxThread__text">{{ notification.commentContent }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </button>
+        </article>
+      </div>
+    </section>
+  </section>
+</template>
+
+<style scoped>
+.commentInboxToolbar {
+  margin-bottom: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.commentInboxToolbar__toggle {
+  min-width: 220px;
+}
+
+.commentInboxToolbar__action {
+  min-width: 148px;
+}
+
+.commentInboxPanel {
+  padding: 18px;
+  border-radius: 22px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-pill-bg);
+}
+
+.commentInboxEmpty {
+  color: var(--theme-text-muted);
+}
+
+.commentInboxList {
+  display: grid;
+  gap: 14px;
+}
+
+.commentInboxCard {
+  border-radius: 20px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface);
+  overflow: hidden;
+}
+
+.commentInboxCard--unread {
+  border-color: color-mix(in srgb, var(--theme-accent) 28%, var(--theme-border));
+  background: color-mix(in srgb, var(--theme-surface) 92%, var(--theme-accent) 8%);
+}
+
+.commentInboxCard__body {
+  width: 100%;
+  padding: 18px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 140px minmax(0, 1fr);
+  gap: 18px;
+  align-items: start;
+}
+
+.commentInboxCard__aside {
+  min-width: 0;
+  display: grid;
+  gap: 10px;
+}
+
+.commentInboxCard__thumbWrap {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  align-self: start;
+  flex: 0 0 auto;
+  border-radius: 18px;
+  overflow: hidden;
+  background: var(--theme-thumb-fallback-bg);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-card-border) 26%, transparent);
+}
+
+.commentInboxCard__thumb,
+.commentInboxCard__thumbFallback {
+  width: 100%;
+  height: 100%;
+}
+
+.commentInboxCard__thumb {
+  object-fit: cover;
+  display: block;
+}
+
+.commentInboxCard__thumbFallback {
+  display: grid;
+  place-items: center;
+  color: var(--theme-text-faint);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.commentInboxCard__targetTitle {
+  font-size: 15px;
+  font-weight: 800;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.commentInboxCard__targetMeta {
+  color: var(--theme-text-faint);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.commentInboxCard__titleRow {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.commentInboxCard__title {
+  font-size: 17px;
+  font-weight: 900;
+}
+
+.commentInboxCard__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.commentInboxCard__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: #ff4d67;
+  flex: 0 0 auto;
+}
+
+.commentInboxCard__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--theme-accent) 22%, var(--theme-border));
+  background: color-mix(in srgb, var(--theme-accent) 18%, var(--theme-surface-soft));
+  color: var(--theme-text);
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.commentInboxCard__badge:disabled {
+  cursor: default;
+  opacity: 0.7;
+}
+
+.commentInboxCard__thread {
+  margin-top: 14px;
+  display: grid;
+  gap: 12px;
+}
+
+.commentInboxThread {
+  display: grid;
+  gap: 8px;
+}
+
+.commentInboxThread__label {
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--theme-text-faint);
+}
+
+.commentInboxThread__body {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px;
+  border-radius: 18px;
+  background: var(--theme-pill-bg);
+}
+
+.commentInboxThread--accent .commentInboxThread__body {
+  background: color-mix(in srgb, var(--theme-accent) 10%, var(--theme-pill-bg));
+}
+
+.commentInboxThread__avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  object-fit: cover;
+  border: 1px solid var(--theme-avatar-border);
+  background: var(--theme-border);
+  flex: 0 0 auto;
+}
+
+.commentInboxThread__avatar--fallback {
+  display: grid;
+  place-items: center;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.commentInboxThread__content {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.commentInboxThread__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  color: var(--theme-text-muted);
+  font-size: 13px;
+}
+
+.commentInboxThread__name {
+  color: var(--theme-text);
+  font-weight: 800;
+}
+
+.commentInboxThread__separator {
+  color: var(--theme-text-faint);
+}
+
+.commentInboxThread__date {
+  color: var(--theme-text-faint);
+}
+
+.commentInboxThread__text {
+  margin-top: 8px;
+  color: var(--theme-text);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 44px;
+  padding: 12px 18px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
+  color: var(--theme-text);
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 700;
+  transition: background 160ms ease;
+}
+
+.btn:hover {
+  background: var(--theme-surface-soft-3);
+}
+
+.btn:disabled {
+  opacity: 0.58;
+  cursor: default;
+}
+
+.btn--save {
+  min-width: 112px;
+  font-weight: 900;
+  background: rgba(96, 165, 250, 0.22);
+  border-color: rgba(96, 165, 250, 0.36);
+}
+
+.btn--save:hover {
+  background: rgba(96, 165, 250, 0.3);
+}
+
+.toggleSwitch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-pill-bg);
+  cursor: pointer;
+  user-select: none;
+}
+
+.toggleSwitch input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.toggleSwitch__track {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  border-radius: 999px;
+  background: var(--theme-surface-soft-3);
+  border: 1px solid var(--theme-border-strong);
+  transition: background 160ms ease, border-color 160ms ease;
+  flex: 0 0 auto;
+}
+
+.toggleSwitch__thumb {
+  position: absolute;
+  top: 50%;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.92);
+  transform: translateY(-50%);
+  transition: transform 180ms ease;
+}
+
+:root[data-theme='light'] .toggleSwitch__thumb {
+  background: rgba(15, 23, 42, 0.82);
+}
+
+.toggleSwitch__label {
+  min-width: 0;
+  color: var(--theme-text-muted);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.toggleSwitch input:checked ~ .toggleSwitch__track {
+  background: rgba(96, 165, 250, 0.34);
+  border-color: rgba(96, 165, 250, 0.46);
+}
+
+.toggleSwitch input:checked ~ .toggleSwitch__track .toggleSwitch__thumb {
+  transform: translate(18px, -50%);
+}
+
+@media (max-width: 860px) {
+  .commentInboxToolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .commentInboxPanel {
+    padding: 20px;
+  }
+
+  .commentInboxCard__body {
+    grid-template-columns: 1fr;
+  }
+
+  .commentInboxCard__titleRow {
+    flex-direction: column;
+  }
+
+  .commentInboxThread__body {
+    padding: 12px;
+  }
+}
+</style>

frontend/src/views/FavoriteTierListsView.vue

@@ -0,0 +1,308 @@
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { api } from '../lib/api'
+import { toApiUrl } from '../lib/runtime'
+import { useToast } from '../composables/useToast'
+import { editorPath, loginPath } from '../lib/paths'
+import { displayInitialFrom } from '../lib/display'
+
+const router = useRouter()
+const route = useRoute()
+const toast = useToast()
+
+const favorites = ref([])
+const sort = ref('favorited')
+const isListView = computed(() => route.query.view === 'list')
+const query = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim() : ''))
+
+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 displayInitialFrom(tierList.authorName, tierList.authorAccountName, '?')
+}
+
+function tierListThumbnailUrl(tierList) {
+  return tierList.thumbnailSrc ? toApiUrl(tierList.thumbnailSrc) : ''
+}
+
+async function loadFavorites() {
+  try {
+    const data = await api.listMyFavoriteTierLists({ q: query.value, sort: sort.value })
+    favorites.value = data.tierLists || []
+  } catch (e) {
+    toast.error('로그인이 필요해요.')
+    router.push(loginPath('/favorites'))
+  }
+}
+
+function openTierList(tierList) {
+  router.push(editorPath(tierList.topicSlug || tierList.topicId, tierList.id))
+}
+
+onMounted(loadFavorites)
+watch([query, sort], loadFavorites)
+</script>
+
+<template>
+  <section class="pageWrap">
+    <div class="pageHead">
+      <div class="pageHead__main">
+        <div class="pageHead__eyebrow">Collection</div>
+        <h2 class="pageHead__title">즐겨찾기</h2>
+        <div class="pageHead__desc">마음에 드는 티어표를 모아보고, 원하는 기준으로 정렬할 수 있어요.</div>
+      </div>
+      <div class="pageHead__aside toolbar">
+        <select v-model="sort" class="select">
+          <option value="favorited">즐겨찾기한 순</option>
+          <option value="updated">최신 업데이트순</option>
+          <option value="favorites">인기순</option>
+        </select>
+      </div>
+    </div>
+
+    <div v-if="favorites.length === 0" class="empty">즐겨찾기한 티어표가 없어요.</div>
+    <div v-else class="list" :class="{ 'list--table': isListView }">
+      <article v-for="tierList in favorites" :key="tierList.id" class="boardCard" :class="{ 'boardCard--list': isListView }">
+        <button class="boardCard__body" :class="{ 'boardCard__body--list': isListView }" @click="openTierList(tierList)">
+          <div class="boardCard__thumbWrap">
+            <img v-if="tierListThumbnailUrl(tierList)" class="boardCard__thumb" :src="tierListThumbnailUrl(tierList)" :alt="tierList.title" draggable="false" />
+            <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.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>
+.toolbar {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.input,
+.select {
+  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;
+}
+.list--table {
+  grid-template-columns: 1fr;
+}
+.boardCard {
+  position: relative;
+  min-width: 0;
+  border-radius: 22px;
+  border: 1px solid var(--theme-card-border);
+  background: var(--theme-card-bg);
+  overflow: hidden;
+  display: grid;
+  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
+  transition:
+    transform 0.16s ease,
+    background 0.16s ease;
+}
+.boardCard:hover {
+  transform: translateY(-2px);
+  background: var(--theme-card-bg-hover);
+}
+.boardCard__body {
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+  display: grid;
+  width: 100%;
+  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%;
+  display: block;
+  border-radius: 18px;
+}
+.boardCard__thumb {
+  object-fit: cover;
+}
+.boardCard__thumbPlaceholder {
+  background: var(--theme-thumb-fallback-bg);
+  display: grid;
+  place-items: center;
+  color: var(--theme-text-faint);
+  font-size: 13px;
+  font-weight: 700;
+}
+.boardCard__head {
+  min-width: 0;
+  padding: 16px 18px 18px;
+  display: grid;
+  gap: 6px;
+  overflow: hidden;
+}
+.boardCard--list .boardCard__head {
+  align-content: center;
+  padding: 16px 18px 16px 0;
+}
+.boardCard__body--list {
+  grid-template-columns: 200px minmax(0, 1fr);
+  align-items: stretch;
+}
+.boardCard__body--list .boardCard__thumbWrap {
+  height: 100%;
+  padding: 14px;
+}
+.boardCard__body--list .boardCard__thumb,
+.boardCard__body--list .boardCard__thumbPlaceholder {
+  min-height: 100%;
+}
+.boardCard__titleRow,
+.boardCard__metaRow {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+}
+
+.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;
+  align-items: center;
+  gap: 8px;
+  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: 1024px) {
+  .list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 720px) {
+  .list {
+    grid-template-columns: 1fr;
+  }
+
+  .boardCard__body--list {
+    grid-template-columns: 1fr;
+  }
+
+  .boardCard--list .boardCard__head {
+    padding: 16px 18px 18px;
+  }
+
+  .toolbar {
+    width: 100%;
+  }
+  .select {
+    width: 100%;
+  }
+}
+</style>

frontend/src/views/FollowingFeedView.vue

@@ -0,0 +1,331 @@
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, 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'
+import { displayInitialFrom } from '../lib/display'
+
+const router = useRouter()
+const route = useRoute()
+const toast = useToast()
+
+const tierLists = ref([])
+const query = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim() : ''))
+const isLoading = ref(false)
+const error = ref('')
+const brokenThumbnailIds = ref({})
+const isListView = computed(() => route.query.view === 'list')
+
+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 displayInitialFrom(tierList.authorName, tierList.authorAccountName, '?')
+}
+
+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)
+watch(query, 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>
+    </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" :class="{ 'list--table': isListView }">
+        <article v-for="tierList in tierLists" :key="tierList.id" class="boardCard" :class="{ 'boardCard--list': isListView }">
+          <button class="boardCard__body" :class="{ 'boardCard__body--list': isListView }" 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;
+}
+.empty {
+  opacity: 0.75;
+}
+.list {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 18px;
+}
+.list--table {
+  grid-template-columns: 1fr;
+}
+.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__body--list {
+  grid-template-columns: 200px minmax(0, 1fr);
+  align-items: stretch;
+}
+.boardCard__body--list .boardCard__thumbWrap {
+  height: 100%;
+  padding: 14px;
+}
+.boardCard__body--list .boardCard__thumb,
+.boardCard__body--list .boardCard__thumbPlaceholder {
+  min-height: 100%;
+}
+.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;
+  overflow: hidden;
+}
+.boardCard--list .boardCard__head {
+  align-content: center;
+  padding: 16px 18px 16px 0;
+}
+.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;
+  }
+
+  .boardCard__body--list {
+    grid-template-columns: 1fr;
+  }
+
+  .boardCard--list .boardCard__head {
+    padding: 16px 18px 0;
+  }
+
+}
+</style>

frontend/src/views/GameHubView.vue

@@ -1,219 +0,0 @@
-<script setup>
-import { computed, onMounted, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { api } from '../lib/api'
-import { toApiUrl } from '../lib/runtime'
-import { useAuthStore } from '../stores/auth'
-
-const route = useRoute()
-const router = useRouter()
-const auth = useAuthStore()
-
-const gameId = computed(() => route.params.gameId)
-
-const gameName = ref('')
-const tierLists = ref([])
-const error = ref('')
-
-function fmt(ts) {
-  return new Date(ts).toLocaleString(undefined, {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}
-
-function displayNameOf(tierList) {
-  return tierList.authorName || '알 수 없음'
-}
-
-function avatarSrcOf(tierList) {
-  return tierList.authorAvatarSrc ? toApiUrl(tierList.authorAvatarSrc) : ''
-}
-
-function avatarFallbackOf(tierList) {
-  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
-}
-
-onMounted(async () => {
-  try {
-    const [gameRes, listRes] = await Promise.all([api.getGame(gameId.value), api.listPublicTierLists(gameId.value)])
-    gameName.value = gameRes.game?.name || gameId.value
-    tierLists.value = listRes.tierLists || []
-  } catch (e) {
-    error.value = '게임 정보를 불러오지 못했어요.'
-  }
-})
-
-function createNew() {
-  if (!auth.user) {
-    router.push(`/login?redirect=/editor/${gameId.value}/new`)
-    return
-  }
-  router.push(`/editor/${gameId.value}/new`)
-}
-
-function openTierList(id) {
-  router.push(`/editor/${gameId.value}/${id}`)
-}
-</script>
-
-<template>
-  <section class="head">
-    <div class="head__left">
-      <div class="kicker">게임</div>
-      <h2 class="title">{{ gameName || gameId }}</h2>
-      <p class="desc">새 티어표를 만들거나, 다른 사람들이 올린 티어표를 확인하세요.</p>
-    </div>
-    <div class="head__right">
-      <button class="primary" @click="createNew">{{ auth.user ? '새로운 티어표 만들기' : '로그인 후 새 티어표 만들기' }}</button>
-    </div>
-  </section>
-
-  <div v-if="error" class="error">{{ error }}</div>
-  <section class="panel">
-    <div class="panel__title">공개 티어표</div>
-    <div v-if="tierLists.length === 0" class="empty">아직 공개 티어표가 없어요.</div>
-    <div v-else class="list">
-      <button v-for="t in tierLists" :key="t.id" class="row" @click="openTierList(t.id)">
-        <div class="row__head">
-          <div class="row__title">{{ t.title }}</div>
-          <div class="row__author">
-            <img v-if="avatarSrcOf(t)" class="row__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
-            <div v-else class="row__avatar row__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
-            <span>by {{ displayNameOf(t) }}</span>
-          </div>
-        </div>
-        <div class="row__meta">{{ fmt(t.updatedAt) }}</div>
-      </button>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-.head {
-  display: flex;
-  gap: 14px;
-  align-items: flex-end;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  padding: 6px 2px 14px;
-}
-.kicker {
-  font-size: 12px;
-  opacity: 0.7;
-}
-.title {
-  margin: 4px 0 6px;
-  font-size: 26px;
-  letter-spacing: -0.02em;
-}
-.desc {
-  margin: 0;
-  opacity: 0.84;
-}
-.primary {
-  padding: 10px 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(96, 165, 250, 0.2);
-  color: rgba(255, 255, 255, 0.92);
-  cursor: pointer;
-  font-weight: 700;
-}
-.primary:hover {
-  background: rgba(96, 165, 250, 0.26);
-}
-.panel {
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: 16px;
-  padding: 14px;
-}
-.error {
-  margin: 10px 0 14px;
-  padding: 10px 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  background: rgba(239, 68, 68, 0.12);
-}
-.panel__title {
-  font-weight: 800;
-  margin-bottom: 10px;
-}
-.empty {
-  opacity: 0.75;
-}
-.list {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 14px;
-}
-.row {
-  text-align: left;
-  padding: 14px;
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.04);
-  color: rgba(255, 255, 255, 0.92);
-  cursor: pointer;
-  width: 100%;
-  display: grid;
-  gap: 10px;
-  align-content: start;
-  min-height: 168px;
-}
-.row:hover {
-  background: rgba(255, 255, 255, 0.05);
-}
-.row__title {
-  font-weight: 800;
-  min-width: 0;
-  font-size: 18px;
-  line-height: 1.35;
-}
-.row__head {
-  display: grid;
-  gap: 12px;
-  align-content: start;
-}
-.row__author {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  font-size: 13px;
-  opacity: 0.86;
-  flex: 0 0 auto;
-}
-.row__avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 999px;
-  object-fit: cover;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.08);
-}
-.row__avatar--fallback {
-  display: grid;
-  place-items: center;
-  font-size: 12px;
-  font-weight: 900;
-}
-.row__meta {
-  opacity: 0.78;
-  font-size: 13px;
-  margin-top: auto;
-}
-@media (max-width: 1100px) {
-  .list {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-@media (max-width: 720px) {
-  .list {
-    grid-template-columns: 1fr;
-  }
-}
-</style>

frontend/src/views/HomeView.vue

@@ -1,162 +1,402 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
+import { editorPath } from '../lib/paths'
 import { toApiUrl } from '../lib/runtime'
-import { useAuthStore } from '../stores/auth'
+import { displayInitialFrom } from '../lib/display'
 
+const route = useRoute()
 const router = useRouter()
-const auth = useAuthStore()
 
-const items = ref([])
+const featuredTierLists = ref([])
+const tierLists = ref([])
 const error = ref('')
-const games = computed(() => items.value.filter((item) => item.id !== 'freeform'))
+const query = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim() : ''))
+const isListView = computed(() => route.query.view === 'list')
+const brokenThumbnailIds = ref({})
 
-onMounted(async () => {
+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 displayInitialFrom(tierList.authorName, tierList.authorAccountName, '?')
+}
+
+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 loadHomeFeed() {
   try {
-    const data = await api.listGames()
-    items.value = data.games || []
+    const data = await api.searchAllPublicTierLists(query.value)
+    brokenThumbnailIds.value = {}
+    featuredTierLists.value = data.featuredTierLists || []
+    tierLists.value = data.tierLists || []
   } catch (e) {
-    error.value = '백엔드에 연결할 수 없어요. backend 서버가 실행 중인지 확인해주세요.'
+    error.value = '공개 티어표를 불러오지 못했어요.'
   }
-})
-
-function goGame(gameId) {
-  router.push(`/games/${gameId}`)
 }
 
-function goFreeform() {
-  if (!auth.user) {
-    router.push('/login?redirect=/editor/freeform/new')
-    return
-  }
-  router.push('/editor/freeform/new')
-}
-
-function thumbUrl(g) {
-  if (!g.thumbnailSrc) return ''
-  return toApiUrl(g.thumbnailSrc)
+function openTierList(tierList) {
+  router.push(editorPath(tierList.topicSlug || tierList.topicId, tierList.id))
 }
 
+onMounted(loadHomeFeed)
+watch(() => route.query.q, loadHomeFeed)
 </script>
 
 <template>
-  <section class="hero">
-    <h1 class="hero__title">티어표 메이커</h1>
-    <p class="hero__desc">
-      게임을 선택하면 새 티어표를 만들거나, 다른 사람들이 올린 티어표를 볼 수 있어요.
-    </p>
-  </section>
+  <section class="pageWrap">
+    <section class="pageHead">
+      <div class="pageHead__main">
+        <div class="pageHead__eyebrow">Feed</div>
+        <h1 class="pageHead__title">홈</h1>
+        <div class="pageHead__desc">다른 사용자들이 공개한 티어표를 살펴볼 수 있습니다.</div>
+        <div v-if="query" class="pageHead__searchState">"{{ query }}"에 맞는 공개 티어표만 보고 있어요.</div>
+      </div>
+    </section>
 
-  <div v-if="error" class="error">{{ error }}</div>
-  <section class="grid">
-    <button v-for="g in games" :key="g.id" class="card" @click="goGame(g.id)">
-      <div class="thumbWrap">
-        <img v-if="thumbUrl(g)" class="thumb" :src="thumbUrl(g)" :alt="g.name" />
-        <div v-else class="thumbFallback">{{ g.name[0] }}</div>
+    <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="card__title">{{ g.name }}</div>
-    </button>
-    <button class="card card--freeform" @click="goFreeform">
-      <div class="thumbWrap thumbWrap--freeform">
-        <div class="thumbFallback">+</div>
+      <div class="list" :class="{ 'list--table': isListView }">
+        <article v-for="tierList in featuredTierLists" :key="`featured-${tierList.id}`" class="boardCard boardCard--featured" :class="{ 'boardCard--list': isListView }">
+          <button class="boardCard__body" :class="{ 'boardCard__body--list': isListView }" 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.topicSlug || tierList.topicId }}</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>
-      <div class="card__eyebrow">{{ auth.user ? '템플릿 없이 시작' : '로그인 후 작성 가능' }}</div>
-      <div class="card__title">직접 티어표 만들기</div>
-    </button>
+    </section>
+
+    <section class="panel">
+      <div class="sectionLabel">최신 공개 티어표</div>
+      <div v-if="tierLists.length === 0" class="empty">{{ query ? '검색어에 맞는 공개 티어표가 없어요.' : '아직 공개 티어표가 없어요.' }}</div>
+      <div v-else class="list" :class="{ 'list--table': isListView }">
+        <article v-for="tierList in tierLists" :key="tierList.id" class="boardCard" :class="{ 'boardCard--list': isListView }">
+          <button class="boardCard__body" :class="{ 'boardCard__body--list': isListView }" 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.topicSlug || tierList.topicId }}</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>
   </section>
 </template>
 
 <style scoped>
-.hero {
-  padding: 18px 2px 14px;
-}
-.hero__title {
-  font-size: 34px;
-  letter-spacing: -0.03em;
-  margin: 0 0 8px;
-}
-.hero__desc {
-  margin: 0;
-  opacity: 0.86;
-  line-height: 1.5;
-}
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 14px;
-  margin-top: 14px;
+.pageHead__searchState {
+  margin-top: 8px;
+  color: var(--theme-text-muted);
 }
 .error {
-  margin-top: 12px;
+  margin: 0 0 16px;
   padding: 10px 12px;
   border-radius: 12px;
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  background: rgba(239, 68, 68, 0.12);
-  color: rgba(255, 255, 255, 0.92);
+  border: 1px solid var(--theme-danger-border);
+  background: var(--theme-danger-bg);
+  color: var(--theme-text);
 }
-.card {
-  text-align: left;
-  padding: 14px;
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.05);
-  color: rgba(255, 255, 255, 0.92);
-  cursor: pointer;
+.panel {
+  background: transparent;
+  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;
+}
+.empty {
+  opacity: 0.76;
+}
+.list {
   display: grid;
-  gap: 10px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 18px;
 }
-.card:hover {
-  background: rgba(255, 255, 255, 0.07);
-  border-color: rgba(255, 255, 255, 0.18);
+.list--table {
+  grid-template-columns: 1fr;
 }
-.card--freeform {
-  background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(16, 185, 129, 0.12));
+.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;
 }
-.thumbWrap {
+.boardCard:hover {
+  transform: translateY(-2px);
+  background: var(--theme-card-bg-hover);
+}
+.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;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(0, 0, 0, 0.18);
-  overflow: hidden;
-  display: grid;
-  place-items: center;
+  padding: 14px 14px 0;
+  box-sizing: border-box;
 }
-.thumbWrap--freeform {
-  background:
-    radial-gradient(circle at top, rgba(96, 165, 250, 0.18), transparent 50%),
-    rgba(0, 0, 0, 0.18);
-}
-.thumb {
+.boardCard__thumb,
+.boardCard__thumbPlaceholder {
   width: 100%;
   height: 100%;
+  display: block;
+  border-radius: 18px;
+}
+.boardCard__thumb {
   object-fit: cover;
 }
-.thumbFallback {
-  font-weight: 900;
-  font-size: 28px;
-  opacity: 0.85;
+.boardCard__thumbPlaceholder {
+  background: var(--theme-thumb-fallback-bg);
+  display: grid;
+  place-items: center;
+  color: var(--theme-text-faint);
+  font-size: 13px;
+  font-weight: 700;
 }
-.card__title {
+.boardCard__head {
+  min-width: 0;
+  padding: 16px 18px 18px;
+  display: grid;
+  gap: 8px;
+  overflow: hidden;
+}
+.boardCard--list .boardCard__head {
+  align-content: center;
+  padding: 16px 18px 16px 0;
+}
+.boardCard__body--list {
+  grid-template-columns: 200px minmax(0, 1fr);
+  align-items: stretch;
+}
+.boardCard__body--list .boardCard__thumbWrap {
+  height: 100%;
+  padding: 14px;
+}
+.boardCard__body--list .boardCard__thumb,
+.boardCard__body--list .boardCard__thumbPlaceholder {
+  min-height: 100%;
+}
+.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;
-  letter-spacing: -0.02em;
+  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;
 }
-.card__eyebrow {
+.boardCard__topic {
+  min-width: 0;
+  color: var(--theme-text-soft);
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.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: 800;
+  color: var(--theme-text);
+}
+.boardCard__date,
+.favoriteStat {
+  flex: 0 0 auto;
   font-size: 12px;
-  font-weight: 800;
-  opacity: 0.7;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
+  color: var(--theme-text-soft);
 }
-@media (max-width: 720px) {
-  .grid {
-    grid-template-columns: 1fr;
+.favoriteStat {
+  font-weight: 800;
+}
+@media (max-width: 1400px) {
+  .list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
-@media (min-width: 721px) and (max-width: 1100px) {
-  .grid {
+@media (max-width: 1200px) {
+  .list {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+@media (max-width: 900px) {
+  .list {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .boardCard__body--list {
+    grid-template-columns: 1fr;
+  }
+
+  .boardCard--list .boardCard__head {
+    padding: 16px 18px 18px;
+  }
+}
 </style>

frontend/src/views/LoginView.vue

@@ -1,20 +1,108 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth'
 import { api } from '../lib/api'
+import { homePath, mePath } from '../lib/paths'
 
 const router = useRouter()
 const route = useRoute()
 const auth = useAuthStore()
 
 const email = ref('')
+const nickname = ref('')
 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(() => {
+  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(redirectPath.value)
+    return
+  }
   try {
     const meta = await api.authMeta()
     hasUsers.value = !!meta.hasUsers
@@ -23,127 +111,459 @@ onMounted(async () => {
   }
 })
 
-async function submit() {
-  error.value = ''
+watch(
+  () => [auth.hydrated, auth.user],
+  ([hydrated, user]) => {
+    if (!hydrated || !user) return
+    if (verifyToken.value || resetToken.value) return
+    router.replace(redirectPath.value)
+  },
+  { immediate: true }
+)
+
+watch(mode, () => {
+  clearFormFeedback()
+})
+
+watch(email, () => {
+  emailError.value = ''
+  if (error.value === '이메일이 이미 사용 중이에요.') error.value = ''
+})
+
+watch(nickname, () => {
+  nicknameError.value = ''
+  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 {
-    if (mode.value === 'signup') await auth.signup(email.value, password.value)
-    else await auth.login(email.value, password.value)
-    router.push(typeof route.query.redirect === 'string' ? route.query.redirect : '/me')
+    await api.resendVerificationEmail({ email: targetEmail })
+    pendingVerificationEmail.value = targetEmail
+    notice.value = `${targetEmail} 주소로 인증 메일을 다시 보냈어요. 메일함과 스팸함을 함께 확인해주세요.`
   } catch (e) {
-    error.value = '로그인/회원가입에 실패했어요.'
+    const code = e?.data?.error
+    error.value = code === 'mail_not_configured'
+      ? '메일 발송 설정이 아직 완료되지 않았어요. 잠시 후 다시 시도해주세요.'
+      : '인증 메일 재전송에 실패했어요.'
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+async function submit() {
+  clearFormFeedback()
+  notice.value = ''
+  if (mode.value === 'signup' && nickname.value.trim().length < 2) {
+    nicknameError.value = '닉네임은 2자 이상 입력해주세요.'
+    error.value = '닉네임을 확인해주세요.'
+    return
+  }
+  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') {
+      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') {
+      if (code === 'email_taken') {
+        emailError.value = '이미 사용 중인 이메일입니다.'
+        error.value = '이메일이 이미 사용 중이에요.'
+        return
+      }
+      if (code === 'nickname_taken') {
+        nicknameError.value = '이미 사용 중인 닉네임입니다.'
+        error.value = '닉네임이 이미 사용 중이에요.'
+        return
+      }
+      if (code === 'nickname_reserved') {
+        nicknameError.value = '운영자/관리자처럼 혼동될 수 있는 닉네임은 사용할 수 없어요.'
+        error.value = '사용할 수 없는 닉네임이에요.'
+        return
+      }
+      if (code === 'mail_not_configured') {
+        error.value = '메일 발송 설정이 아직 완료되지 않아 이메일 인증을 보낼 수 없어요.'
+        return
+      }
+      if (code === 'mail_send_failed') {
+        error.value = '인증 메일 발송에 실패했어요. 잠시 후 다시 시도해주세요.'
+        return
+      }
+    }
+    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>
 
 <template>
-  <section class="wrap">
-    <form class="card" @submit.prevent="submit">
-      <div class="tabs">
-        <button type="button" class="tab" :class="{ 'tab--active': mode === 'login' }" @click="mode = 'login'">
+  <section class="pageWrap">
+    <header class="pageHead">
+      <div class="pageHead__main">
+        <div class="pageHead__eyebrow">Account</div>
+        <h2 class="pageHead__title">{{ title }}</h2>
+        <div class="pageHead__desc">{{ description }}</div>
+      </div>
+    </header>
+
+    <section v-if="checkingSession" class="authScreen authScreen--loading">
+      <div class="authLoading">로그인 상태를 확인하고 있어요.</div>
+    </section>
+
+    <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' || mode === 'reset-request' || mode === 'reset-confirm' }"
+          @click="switchMode('login')"
+        >
           로그인
         </button>
-        <button type="button" class="tab" :class="{ 'tab--active': mode === 'signup' }" @click="mode = 'signup'">
+        <button type="button" class="authTabs__button" :class="{ 'authTabs__button--active': mode === 'signup' }" @click="switchMode('signup')">
           회원가입
         </button>
       </div>
 
-      <div v-if="error" class="error">{{ error }}</div>
+      <form class="authFields" @submit.prevent="submit">
+        <label v-if="mode !== 'reset-confirm'" class="field">
+          <span class="field__label">이메일</span>
+          <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>
 
-      <label class="label">이메일</label>
-      <input v-model="email" class="input" placeholder="you@example.com" autocomplete="email" />
+        <label v-if="mode === 'signup'" class="field">
+          <span class="field__label">닉네임</span>
+          <input v-model="nickname" class="field__input" placeholder="사용할 닉네임" autocomplete="nickname" maxlength="40" />
+          <span v-if="nicknameError" class="field__error">{{ nicknameError }}</span>
+          <span class="field__hint">다른 사용자와 구분되는 이름으로 2~40자까지 입력할 수 있어요.</span>
+        </label>
 
-      <label class="label">비밀번호</label>
-      <input
-        v-model="password"
-        class="input"
-        type="password"
-        placeholder="********"
-        autocomplete="current-password"
-      />
+        <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="mode === 'login' ? 'current-password' : 'new-password'"
+            maxlength="120"
+          />
+          <span class="field__hint">6~120자 입력 가능 · {{ password.length }}/120자</span>
+        </label>
 
-      <button class="btn" type="submit">{{ mode === 'signup' ? '회원가입' : '로그인' }}</button>
+        <label v-if="mode === 'signup' || mode === 'reset-confirm'" class="field">
+          <span class="field__label">비밀번호 확인</span>
+          <input
+            v-model="passwordConfirm"
+            class="field__input"
+            type="password"
+            placeholder="********"
+            autocomplete="new-password"
+            maxlength="120"
+          />
+          <span class="field__hint">같은 비밀번호를 한 번 더 입력해주세요. {{ passwordConfirm.length }}/120자</span>
+        </label>
 
-      <div v-if="!hasUsers" class="hint">첫 회원가입 계정은 자동으로 admin 권한이 부여됩니다(개발용).</div>
-    </form>
+        <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="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>
   </section>
 </template>
 
 <style scoped>
-.wrap {
-  min-height: calc(100vh - 74px);
+.authScreen {
   display: grid;
-  place-items: center;
-  padding: 14px 2px;
+  gap: 28px;
+  max-width: 620px;
+  padding-top: 4px;
 }
-.card {
-  max-width: 420px;
-  width: min(420px, 92vw);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: 16px;
-  padding: 14px;
-  box-sizing: border-box;
+
+.authScreen--loading {
+  min-height: 220px;
+  align-items: center;
 }
-.tabs {
+
+.authLoading {
+  color: var(--theme-text-muted);
+  font-size: 15px;
+}
+
+.authTabs {
+  position: relative;
+  display: inline-flex;
+  gap: 0;
+  width: fit-content;
+  padding: 6px;
+  border-radius: 999px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-pill-bg);
+  isolation: isolate;
+}
+
+.authTabs__indicator {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  width: calc(50% - 6px);
+  height: calc(100% - 12px);
+  border-radius: 999px;
+  background: rgba(76, 133, 245, 0.22);
+  box-shadow: inset 0 0 0 1px rgba(120, 169, 255, 0.1);
+  transform: translateX(0);
+  transition: transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
+  z-index: 0;
+}
+
+.authTabs--signup .authTabs__indicator {
+  transform: translateX(100%);
+}
+
+.authTabs__button {
+  position: relative;
+  min-width: 112px;
+  padding: 10px 16px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--theme-text-muted);
+  font-weight: 700;
+  cursor: pointer;
+  transition: color 180ms ease;
+  z-index: 1;
+}
+
+.authTabs__button--active {
+  color: var(--theme-text-strong);
+}
+
+.authFields {
+  display: grid;
+  gap: 20px;
+}
+
+.field {
   display: grid;
-  grid-template-columns: 1fr 1fr;
   gap: 8px;
-  margin-bottom: 10px;
 }
-.tab {
-  padding: 10px 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(0, 0, 0, 0.12);
-  color: rgba(255, 255, 255, 0.9);
-  font-weight: 800;
-  cursor: pointer;
-}
-.tab--active {
-  background: rgba(96, 165, 250, 0.18);
-  border-color: rgba(255, 255, 255, 0.16);
-}
-.error {
-  margin-bottom: 10px;
-  padding: 10px 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  background: rgba(239, 68, 68, 0.12);
-}
-.label {
-  display: block;
+
+.field__label {
   font-size: 13px;
-  opacity: 0.78;
-  margin-top: 10px;
-  margin-bottom: 6px;
+  color: var(--theme-text-muted);
 }
-.input {
+
+.field__input {
   width: 100%;
-  padding: 10px 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(0, 0, 0, 0.18);
-  color: rgba(255, 255, 255, 0.92);
+  padding: 14px 0;
+  border: 0;
+  border-bottom: 1px solid var(--theme-border-strong);
+  background: transparent;
+  color: var(--theme-text);
   outline: none;
-  box-sizing: border-box;
+  font-size: 18px;
+  letter-spacing: -0.02em;
 }
-.btn {
-  margin-top: 12px;
-  width: 100%;
+
+.field__input:focus {
+  border-bottom-color: rgba(96, 165, 250, 0.9);
+}
+
+.field__hint {
+  font-size: 12px;
+  color: var(--theme-text-soft);
+}
+
+.field__error {
+  font-size: 12px;
+  color: #ff7b7b;
+  font-weight: 700;
+}
+
+.roleBadge {
+  width: fit-content;
+  padding: 6px 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(96, 165, 250, 0.28);
+  background: rgba(96, 165, 250, 0.1);
+  color: var(--theme-text);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.authError {
   padding: 10px 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(96, 165, 250, 0.2);
-  color: rgba(255, 255, 255, 0.92);
-  cursor: pointer;
-  font-weight: 800;
-}
-.btn:hover {
-  background: rgba(96, 165, 250, 0.26);
-}
-.hint {
-  margin-top: 10px;
-  opacity: 0.72;
+  border-radius: 14px;
+  border: 1px solid rgba(239, 68, 68, 0.28);
+  background: rgba(239, 68, 68, 0.1);
+  color: #ff9b9b;
   font-size: 13px;
+  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;
+  flex-wrap: wrap;
+  padding-top: 8px;
+}
+
+.primaryAction,
+.secondaryAction {
+  padding: 12px 18px;
+  border-radius: 999px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.primaryAction {
+  border: 1px solid rgba(76, 133, 245, 0.96);
+  background: var(--theme-accent-bg);
+  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);
+  color: var(--theme-text);
+}
+
+@media (max-width: 720px) {
+  .authTabs {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .authTabs__button {
+    min-width: 0;
+  }
 }
 </style>

frontend/src/views/MyTierListsView.vue

@@ -1,20 +1,39 @@
 <script setup>
-import { onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
+import { useToast } from '../composables/useToast'
+import { editorPath, loginPath } from '../lib/paths'
+import { displayInitialFrom } from '../lib/display'
 
 const router = useRouter()
+const route = useRoute()
+const toast = useToast()
 const myLists = ref([])
 const error = ref('')
+const brokenThumbnailIds = ref({})
+const isListView = computed(() => route.query.view === 'list')
+const query = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim().toLowerCase() : ''))
+const filteredMyLists = computed(() => {
+  if (!query.value) return myLists.value
+  return myLists.value.filter((tierList) => {
+    const haystack = `${tierList.title || ''} ${tierList.topicName || ''} ${tierList.authorName || ''}`.toLowerCase()
+    return haystack.includes(query.value)
+  })
+})
+
+watch(error, (message) => {
+  if (!message) return
+  toast.error(message)
+  error.value = ''
+})
 
 function fmt(ts) {
-  return new Date(ts).toLocaleString(undefined, {
+  return new Date(ts).toLocaleDateString(undefined, {
     year: 'numeric',
     month: '2-digit',
     day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
   })
 }
 
@@ -27,119 +46,115 @@ function avatarSrcOf(tierList) {
 }
 
 function avatarFallbackOf(tierList) {
-  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
+  return displayInitialFrom(tierList.authorName, tierList.authorAccountName, '?')
+}
+
+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 }
 }
 
 onMounted(async () => {
   try {
     const data = await api.listMyTierLists()
+    brokenThumbnailIds.value = {}
     myLists.value = data.tierLists || []
   } catch (e) {
-    error.value = '로그인이 필요해요.'
+    toast.error('로그인이 필요해요.')
+    router.push(loginPath('/me'))
   }
 })
 
 function openList(t) {
-  router.push(`/editor/${t.gameId}/${t.id}`)
-}
-
-async function removeList(t) {
-  error.value = ''
-  try {
-    const ok = window.confirm(`"${t.title}" 티어표를 삭제할까요?`)
-    if (!ok) return
-    await api.deleteTierList(t.id)
-    myLists.value = myLists.value.filter((entry) => entry.id !== t.id)
-  } catch (e) {
-    error.value = '티어표 삭제에 실패했어요.'
-  }
+  router.push(editorPath(t.topicSlug || t.topicId, t.id))
 }
 </script>
 
 <template>
-  <section class="wrap">
-    <h2 class="title">내 티어표</h2>
-    <div class="card">
-      <div v-if="error" class="error">
-        {{ error }}
-        <button class="link" @click="$router.push('/login')">로그인 하러가기</button>
-      </div>
-      <div v-if="myLists.length === 0" class="empty">아직 저장한 티어표가 없어요.</div>
-      <div v-else class="list">
-        <article v-for="t in myLists" :key="t.id" class="row">
-          <button class="row__body" @click="openList(t)">
-            <div class="row__head">
-              <div class="row__title">{{ t.title }}</div>
-              <div class="row__author">
-                <img v-if="avatarSrcOf(t)" class="row__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
-                <div v-else class="row__avatar row__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
-                <span>by {{ displayNameOf(t) }}</span>
-              </div>
+  <section class="pageHead">
+    <div class="pageHead__main">
+      <div class="pageHead__eyebrow">Tier Lists</div>
+      <h2 class="pageHead__title">나의 티어표</h2>
+      <div class="pageHead__desc">직접 저장한 티어표를 관리할 수 있는 페이지입니다.</div>
+    </div>
+  </section>
+
+  <section class="panel">
+    <div v-if="myLists.length === 0" class="empty">아직 저장한 티어표가 없어요.</div>
+    <div v-else-if="filteredMyLists.length === 0" class="empty">검색어에 맞는 내 티어표가 없어요.</div>
+    <div v-else class="list" :class="{ 'list--table': isListView }">
+      <article v-for="t in filteredMyLists" :key="t.id" class="boardCard" :class="{ 'boardCard--list': isListView }">
+        <button class="boardCard__body" :class="{ 'boardCard__body--list': isListView }" @click="openList(t)">
+          <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">♡ {{ t.favoriteCount || 0 }}</div>
             </div>
-            <div class="row__meta">{{ fmt(t.updatedAt) }}</div>
-          </button>
-          <button class="link link--danger" @click="removeList(t)">삭제</button>
-        </article>
-      </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>
 </template>
 
 <style scoped>
-.wrap {
-  padding: 10px 2px;
-}
-.title {
-  margin: 0 0 10px;
-  font-size: 26px;
-  letter-spacing: -0.02em;
-}
-.card {
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: 16px;
-  padding: 14px;
-}
-.error {
-  margin-bottom: 12px;
-  padding: 10px 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  background: rgba(239, 68, 68, 0.12);
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  justify-content: space-between;
-}
-.link {
-  padding: 8px 10px;
-  border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(255, 255, 255, 0.06);
-  color: rgba(255, 255, 255, 0.92);
-  cursor: pointer;
-  font-weight: 800;
+.panel {
+  background: transparent;
+  border-radius: 0;
+  padding: 0;
 }
 .empty {
   opacity: 0.75;
 }
 .list {
   display: grid;
-  gap: 10px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 18px;
 }
-.row {
-  display: flex;
-  gap: 10px;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 14px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.10);
-  background: rgba(0, 0, 0, 0.16);
-  color: rgba(255, 255, 255, 0.92);
+.list--table {
+  grid-template-columns: 1fr;
 }
-.row__body {
-  flex: 1 1 auto;
+.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 {
+  transform: translateY(-2px);
+  background: var(--theme-card-bg-hover);
+}
+.boardCard__body {
   min-width: 0;
   text-align: left;
   cursor: pointer;
@@ -147,46 +162,149 @@ async function removeList(t) {
   background: transparent;
   color: inherit;
   padding: 0;
+  width: 100%;
+  display: grid;
+  overflow: hidden;
 }
-.row__title {
-  font-weight: 900;
+.boardCard__thumbWrap {
   min-width: 0;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  padding: 14px 14px 0;
+  box-sizing: border-box;
 }
-.row__head {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
-.row__author {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  font-size: 13px;
-  opacity: 0.84;
-}
-.row__avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 999px;
+.boardCard__thumb {
+  width: 100%;
+  height: 100%;
   object-fit: cover;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.08);
+  display: block;
+  border-radius: 18px;
 }
-.row__avatar--fallback {
+.boardCard__thumbPlaceholder {
+  width: 100%;
+  height: 100%;
+  background: var(--theme-thumb-fallback-bg);
   display: grid;
   place-items: center;
-  font-size: 12px;
+  color: var(--theme-text-faint);
+  font-size: 13px;
+  font-weight: 700;
+  border-radius: 18px;
+}
+.boardCard__title {
+  font-weight: 800;
+  min-width: 0;
+  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__head {
+  min-width: 0;
+  padding: 16px 18px 18px;
+  display: grid;
+  gap: 8px;
+  overflow: hidden;
+}
+.boardCard--list .boardCard__head {
+  align-content: center;
+  padding: 16px 18px 16px 0;
+}
+.boardCard__body--list {
+  grid-template-columns: 200px minmax(0, 1fr);
+  align-items: stretch;
+}
+.boardCard__body--list .boardCard__thumbWrap {
+  height: 100%;
+  padding: 14px;
+}
+.boardCard__body--list .boardCard__thumb,
+.boardCard__body--list .boardCard__thumbPlaceholder {
+  min-height: 100%;
+}
+.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__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;
 }
-.row__meta {
-  margin-top: 6px;
-  opacity: 0.76;
+.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;
 }
-.link--danger {
-  background: rgba(239, 68, 68, 0.14);
-  border-color: rgba(239, 68, 68, 0.28);
+.boardCard__date {
+  font-size: 10px;
+}
+@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: 900px) {
+  .list {
+    grid-template-columns: 1fr;
+  }
+
+  .boardCard__body--list {
+    grid-template-columns: 1fr;
+  }
+
+  .boardCard--list .boardCard__head {
+    padding: 16px 18px 18px;
+  }
 }
 </style>

frontend/src/views/SearchResultsView.vue

@@ -0,0 +1,265 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { api } from '../lib/api'
+import { toApiUrl } from '../lib/runtime'
+import { editorPath } from '../lib/paths'
+import { displayInitialFrom } from '../lib/display'
+
+const route = useRoute()
+const router = useRouter()
+
+const tierLists = ref([])
+const loading = ref(false)
+const error = ref('')
+const query = ref('')
+
+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 displayInitialFrom(tierList.authorName, tierList.authorAccountName, '?')
+}
+
+function tierListThumbnailUrl(tierList) {
+  return tierList.thumbnailSrc ? toApiUrl(tierList.thumbnailSrc) : ''
+}
+
+function openTierList(tierList) {
+  router.push(editorPath(tierList.topicSlug || tierList.topicId, tierList.id))
+}
+
+async function loadResults() {
+  loading.value = true
+  error.value = ''
+  try {
+    const data = await api.searchAllPublicTierLists(query.value)
+    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 {
+    loading.value = false
+  }
+}
+
+watch(
+  () => route.query.q,
+  async (nextQuery) => {
+    query.value = typeof nextQuery === 'string' ? nextQuery : ''
+    await loadResults()
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <section class="wrap">
+    <section class="pageHead">
+      <div class="pageHead__main">
+        <div class="pageHead__eyebrow">Search</div>
+        <h2 class="pageHead__title">전체 티어표 검색</h2>
+        <div class="pageHead__desc">공개된 티어표를 제목과 작성자 기준으로 다시 찾아볼 수 있어요.</div>
+      </div>
+    </section>
+
+    <div v-if="error" class="error">{{ error }}</div>
+    <div v-else-if="loading" 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" @click="openTierList(tierList)">
+          <div class="boardCard__thumbWrap">
+            <img v-if="tierListThumbnailUrl(tierList)" class="boardCard__thumb" :src="tierListThumbnailUrl(tierList)" :alt="tierList.title" draggable="false" />
+            <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" :title="tierList.isFavorited ? '이미 즐겨찾기한 티어표' : '즐겨찾기 수'">
+                {{ 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>
+.wrap {
+  display: grid;
+  gap: 18px;
+}
+.error {
+  margin: 0 0 8px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--theme-danger-border);
+  background: var(--theme-danger-bg);
+}
+.empty {
+  opacity: 0.76;
+}
+.list {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 18px;
+}
+.boardCard {
+  border-radius: 22px;
+  border: 1px solid var(--theme-card-border);
+  background: var(--theme-card-bg);
+  overflow: hidden;
+  display: grid;
+  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
+  transition: transform 0.16s ease, background 0.16s ease;
+}
+.boardCard:hover {
+  transform: translateY(-2px);
+  background: var(--theme-card-bg-hover);
+}
+.boardCard__body {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+  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%;
+  display: block;
+  border-radius: 18px;
+}
+.boardCard__thumb {
+  object-fit: cover;
+}
+.boardCard__thumbPlaceholder {
+  background: var(--theme-thumb-fallback-bg);
+  display: grid;
+  place-items: center;
+  color: var(--theme-text-faint);
+  font-size: 13px;
+  font-weight: 700;
+}
+.boardCard__head {
+  padding: 16px 18px 18px;
+  display: grid;
+  gap: 6px;
+}
+.boardCard__titleRow,
+.boardCard__metaRow {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.boardCard__metaRow {
+  align-items: flex-end;
+}
+.boardCard__title {
+  min-width: 0;
+  font-weight: 800;
+  font-size: 18px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.boardCard__author {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  opacity: 0.86;
+}
+.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;
+  font-size: 13px;
+  color: var(--theme-text-faint);
+  white-space: nowrap;
+}
+
+.boardCard__date {
+  font-size: 10px;
+}
+.boardCard__date { 
+  font-size: 10px;
+}
+@media (max-width: 1400px) {
+  .list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@media (max-width: 1024px) {
+  .list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 720px) {
+  .list {
+    grid-template-columns: 1fr;
+  }
+}
+</style>