릴리스: v1.4.12 topics/templates API 경로 정리

.cursorrules

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

.gitignore

@@ -10,3 +10,5 @@ backend/uploads/games/
 backend/uploads/custom/
 
 .DS_Store
+.env.production
+.vscode/

backend/index.js

@@ -80,6 +80,7 @@ app.use(async (req, res, next) => {
 
 app.use('/api/auth', authRoutes)
 app.use('/api/games', gamesRoutes)
+app.use('/api/topics', gamesRoutes)
 app.use('/api/tierlists', tierListsRoutes)
 app.use('/api/admin', adminRoutes)
 

backend/package-lock.json

@@ -17,12 +17,488 @@
         "mysql2": "^3.20.0",
         "nanoid": "^5.1.7",
         "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 +844,15 @@
         "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/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -1381,7 +1866,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 +1942,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 +2163,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

@@ -5,7 +5,10 @@
   "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"
+    "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",
+    "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",
+    "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": "",
@@ -20,6 +23,7 @@
     "mysql2": "^3.20.0",
     "nanoid": "^5.1.7",
     "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', 'games', '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-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('game-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,218 @@
+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 filename = nanoid() + '.webp'
+  const absoluteDir = path.join(UPLOAD_ROOT, OPTIMIZED_DIR)
+  const absolutePath = path.join(absoluteDir, filename)
+  const src = '/uploads/' + OPTIMIZED_DIR + '/' + 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/routes/admin.js

@@ -8,13 +8,21 @@ const { nanoid } = require('nanoid')
 const {
   findUserById,
   findGameById,
+  findGameItemById,
+  listGameItems,
+  findImageAssetById,
   createGame,
   listGames,
   updateGameThumbnail,
+  updateGameVisibility,
   createGameItem,
   updateGameItemLabel,
+  updateGameItemDisplayOrder,
+  updateCustomItemLabel,
+  updateImageAssetLabel,
   deleteGameItem,
   deleteGame,
+  deleteTierList,
   updateGameDisplayOrder,
   listCustomItems,
   findCustomItemById,
@@ -22,19 +30,34 @@ const {
   findCustomItemsByIds,
   deleteCustomItems,
   listUsers,
+  findPrimaryAdminUser,
   listAdminTierLists,
+  summarizeAdminTierLists,
   findTierListById,
+  updateAdminTierListMeta,
   listAdminTemplateRequests,
   findTemplateRequestById,
   updateTemplateRequestStatus,
+  updateTemplateRequestTargetGame,
   adminUpdateUser,
   adminUpdateUserPassword,
   adminDeleteUser,
+  listUnusedImageAssets,
+  deleteImageAssets,
+  getImageAssetStats,
+  listRecentImageOptimizationJobs,
+  clearImageOptimizationJobs,
+  cleanupMissingUploadReferences,
 } = require('../db')
 const { requireAdmin } = require('../middleware/auth')
+const { createMemoryUpload, writeOptimizedImage, getImageOptimizationQueueState } = require('../lib/image-storage')
 
 const router = express.Router()
 
+function getTemplateIdParam(req) {
+  return req.params.templateId || req.params.gameId || ''
+}
+
 function buildUploadFilename(file) {
   const ext = path.extname(file.originalname || '').toLowerCase()
   const safeExt = ext && /^[.a-z0-9]+$/.test(ext) ? ext : ''
@@ -53,82 +76,175 @@ function buildItemLabelFromFilename(file) {
   return normalized || 'item'
 }
 
-const upload = multer({
-  storage: multer.diskStorage({
-    destination: (req, file, cb) => cb(null, path.join(__dirname, '..', '..', 'uploads', 'games')),
-    filename: (req, file, cb) => cb(null, buildUploadFilename(file)),
-  }),
-  limits: { fileSize: 6 * 1024 * 1024 },
-})
+function buildItemLabelFromSrc(src) {
+  const raw = typeof src === 'string' ? src : ''
+  const base = path.basename(raw.split('?')[0] || '', path.extname(raw.split('?')[0] || ''))
+  const normalized = base
+    .replace(/[_-]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .slice(0, 60)
+  return normalized || 'item'
+}
 
-router.post('/games', requireAdmin, async (req, res) => {
-  const schema = z.object({ id: z.string().min(1), name: z.string().min(1).max(60) })
+const upload = createMemoryUpload(multer, { fileSize: 8 * 1024 * 1024, maxCount: 50 })
+const avatarUpload = createMemoryUpload(multer, { fileSize: 4 * 1024 * 1024 })
+
+function decorateAdminUser(user, primaryAdmin) {
+  if (!user) return null
+  const isPrimaryAdmin = !!user.isAdmin && primaryAdmin?.id === user.id
+  return {
+    ...user,
+    isPrimaryAdmin,
+    isOperator: !!user.isAdmin && !isPrimaryAdmin,
+    role: isPrimaryAdmin ? 'owner' : user.isAdmin ? 'operator' : 'user',
+  }
+}
+
+async function getAdminUserContext(targetUserId, actingUserId) {
+  const [targetUser, actingUser, primaryAdmin] = await Promise.all([
+    findUserById(targetUserId),
+    findUserById(actingUserId),
+    findPrimaryAdminUser(),
+  ])
+  return { targetUser, actingUser, primaryAdmin }
+}
+
+function canManageAdminRole(actingUser, primaryAdmin) {
+  return !!actingUser?.isAdmin && primaryAdmin?.id === actingUser.id
+}
+
+router.post(['/games', '/templates'], requireAdmin, async (req, res) => {
+  const schema = z.object({
+    id: z.string().min(1),
+    name: z.string().min(1).max(60),
+    isPublic: z.boolean().optional().default(false),
+    thumbnailSrc: z.string().max(255).optional().default(''),
+  })
   const parsed = schema.safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
   const exists = await findGameById(parsed.data.id)
   if (exists) return res.status(409).json({ error: 'game_id_taken' })
-  const game = await createGame({ id: parsed.data.id, name: parsed.data.name })
-  res.json({ game })
+  const game = await createGame({ id: parsed.data.id, name: parsed.data.name, isPublic: parsed.data.isPublic })
+  if (parsed.data.thumbnailSrc) {
+    const copiedThumb = await copyUploadIntoGameAsset(parsed.data.thumbnailSrc)
+    await updateGameThumbnail(game.id, copiedThumb)
+  }
+  const template = await findGameById(game.id)
+  res.json({ game: template, template })
 })
 
-router.patch('/games/display-order', requireAdmin, async (req, res) => {
+router.patch(['/games/:gameId', '/templates/:templateId'], requireAdmin, async (req, res) => {
+  const schema = z.object({
+    isPublic: z.boolean(),
+  })
+  const parsed = schema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const templateId = getTemplateIdParam(req)
+  const game = await findGameById(templateId)
+  if (!game) return res.status(404).json({ error: 'not_found' })
+
+  const updated = await updateGameVisibility(game.id, parsed.data.isPublic)
+  res.json({ game: updated, template: updated })
+})
+
+router.patch(['/games/display-order', '/templates/display-order'], requireAdmin, async (req, res) => {
   const schema = z.object({
     gameIds: z.array(z.string().min(1)).max(50),
   })
   const parsed = schema.safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
 
-  const games = await listGames()
+  const games = await listGames('', { includePrivate: true })
   const validGameIds = new Set(games.map((game) => game.id))
   const filteredIds = parsed.data.gameIds.filter((gameId) => validGameIds.has(gameId))
   const updatedGames = await updateGameDisplayOrder(filteredIds)
-  res.json({ games: updatedGames })
+  res.json({ games: updatedGames, templates: updatedGames })
 })
 
-router.post('/games/:gameId/thumbnail', requireAdmin, upload.single('thumbnail'), async (req, res) => {
-  if (!req.file) return res.status(400).json({ error: 'file_required' })
-  const game = await findGameById(req.params.gameId)
+router.patch(['/games/:gameId/items/display-order', '/templates/:templateId/items/display-order'], requireAdmin, async (req, res) => {
+  const schema = z.object({
+    itemIds: z.array(z.string().min(1)).min(1),
+  })
+  const parsed = schema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const templateId = getTemplateIdParam(req)
+  const game = await findGameById(templateId)
   if (!game) return res.status(404).json({ error: 'not_found' })
-  const updated = await updateGameThumbnail(req.params.gameId, `/uploads/games/${req.file.filename}`)
-  res.json({ game: updated })
+
+  const items = await updateGameItemDisplayOrder(game.id, parsed.data.itemIds)
+  res.json({ items })
 })
 
-router.post('/games/:gameId/images', requireAdmin, upload.array('images', 50), async (req, res) => {
+router.post(['/games/:gameId/thumbnail', '/templates/:templateId/thumbnail'], requireAdmin, upload.single('thumbnail'), async (req, res) => {
+  if (!req.file) return res.status(400).json({ error: 'file_required' })
+  const templateId = getTemplateIdParam(req)
+  const game = await findGameById(templateId)
+  if (!game) return res.status(404).json({ error: 'not_found' })
+
+  const optimized = await writeOptimizedImage({
+    file: req.file,
+    directory: 'games',
+    width: 1280,
+    height: 1280,
+    fit: 'inside',
+    quality: 84,
+  })
+
+  const updated = await updateGameThumbnail(templateId, optimized.src)
+  res.json({ game: updated, template: updated })
+})
+
+router.post(['/games/:gameId/images', '/templates/:templateId/images'], requireAdmin, upload.array('images', 50), async (req, res) => {
   const files = Array.isArray(req.files) ? req.files : []
   if (!files.length) return res.status(400).json({ error: 'file_required' })
-  const game = await findGameById(req.params.gameId)
+  const templateId = getTemplateIdParam(req)
+  const game = await findGameById(templateId)
   if (!game) return res.status(404).json({ error: 'not_found' })
 
-  const manualLabel = typeof req.body?.label === 'string' ? req.body.label.trim() : ''
-  if (manualLabel && manualLabel.length > 60) return res.status(400).json({ error: 'bad_request' })
+  const labelsRaw = req.body?.labels
+  const labels = Array.isArray(labelsRaw) ? labelsRaw : labelsRaw ? [labelsRaw] : []
+  const normalizedLabels = labels.map((label) => (typeof label === 'string' ? label.trim().slice(0, 60) : ''))
+  if (normalizedLabels.some((label) => label.length > 60)) return res.status(400).json({ error: 'bad_request' })
 
   const items = await Promise.all(
-    files.map((file, index) =>
-      createGameItem({
+    files.map(async (file, index) => {
+      const optimized = await writeOptimizedImage({
+        file,
+        directory: 'games',
+        width: 512,
+        height: 512,
+        fit: 'inside',
+        quality: 84,
+      })
+
+      return createGameItem({
         id: nanoid(),
         gameId: game.id,
-        src: `/uploads/games/${file.filename}`,
-        label: index === 0 && manualLabel ? manualLabel : buildItemLabelFromFilename(file),
+        src: optimized.src,
+        label: normalizedLabels[index] || buildItemLabelFromFilename(file),
       })
-    )
+    })
   )
 
   res.json({ item: items[0], items })
 })
 
-router.delete('/games/:gameId/items/:itemId', requireAdmin, async (req, res) => {
-  const game = await findGameById(req.params.gameId)
+router.delete(['/games/:gameId/items/:itemId', '/templates/:templateId/items/:itemId'], requireAdmin, async (req, res) => {
+  const game = await findGameById(getTemplateIdParam(req))
   if (!game) return res.status(404).json({ error: 'not_found' })
   await deleteGameItem(req.params.itemId)
   res.json({ ok: true })
 })
 
-router.patch('/games/:gameId/items/:itemId', requireAdmin, async (req, res) => {
+router.patch(['/games/:gameId/items/:itemId', '/templates/:templateId/items/:itemId'], requireAdmin, async (req, res) => {
   const schema = z.object({ label: z.string().trim().min(1).max(60) })
   const parsed = schema.safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
 
-  const game = await findGameById(req.params.gameId)
+  const game = await findGameById(getTemplateIdParam(req))
   if (!game) return res.status(404).json({ error: 'not_found' })
 
   const updated = await updateGameItemLabel(req.params.itemId, parsed.data.label)
@@ -136,23 +252,46 @@ router.patch('/games/:gameId/items/:itemId', requireAdmin, async (req, res) => {
   res.json({ item: updated })
 })
 
-router.delete('/games/:gameId', requireAdmin, async (req, res) => {
-  const game = await findGameById(req.params.gameId)
+router.delete(['/games/:gameId', '/templates/:templateId'], requireAdmin, async (req, res) => {
+  const templateId = getTemplateIdParam(req)
+  const game = await findGameById(templateId)
   if (!game) return res.status(404).json({ error: 'not_found' })
-  await deleteGame(req.params.gameId)
+  await deleteGame(templateId)
   res.json({ ok: true })
 })
 
+router.patch('/custom-items/:itemId/label', requireAdmin, async (req, res) => {
+  const schema = z.object({
+    label: z.string().trim().min(1).max(60),
+    sourceType: z.enum(['template', 'user']).optional().default('user'),
+  })
+  const parsed = schema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const itemId = req.params.itemId
+  if (itemId.startsWith('asset:')) {
+    const updated = await updateImageAssetLabel(itemId.slice(6), parsed.data.label)
+    if (!updated) return res.status(404).json({ error: 'not_found' })
+    return res.json({ item: updated })
+  }
+
+  if (parsed.data.sourceType === 'template') {
+    const updated = await updateGameItemLabel(itemId, parsed.data.label)
+    if (!updated) return res.status(404).json({ error: 'not_found' })
+    return res.json({ item: updated })
+  }
+
+  const updated = await updateCustomItemLabel(itemId, parsed.data.label)
+  if (!updated) return res.status(404).json({ error: 'not_found' })
+  return res.json({ item: updated })
+})
+
 router.get('/custom-items', requireAdmin, async (req, res) => {
   const schema = z.object({
     q: z.string().trim().max(120).optional().default(''),
     page: z.coerce.number().int().min(1).optional().default(1),
     limit: z.coerce.number().int().min(1).max(200).optional().default(50),
-    orphanOnly: z
-      .union([z.literal('true'), z.literal('false'), z.boolean()])
-      .optional()
-      .default('false')
-      .transform((value) => value === true || value === 'true'),
+    filter: z.enum(['all', 'user', 'template', 'asset', 'unused-user', 'unused-admin']).optional().default('all'),
   })
   const parsed = schema.safeParse(req.query)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
@@ -161,7 +300,7 @@ router.get('/custom-items', requireAdmin, async (req, res) => {
     queryText: parsed.data.q,
     page: parsed.data.page,
     limit: parsed.data.limit,
-    orphanOnly: parsed.data.orphanOnly,
+    filterMode: parsed.data.filter,
   })
   res.json(result)
 })
@@ -169,6 +308,7 @@ router.get('/custom-items', requireAdmin, async (req, res) => {
 router.get('/tierlists', requireAdmin, async (req, res) => {
   const schema = z.object({
     q: z.string().trim().max(120).optional().default(''),
+    gameId: z.string().trim().max(120).optional().default(''),
     page: z.coerce.number().int().min(1).optional().default(1),
     limit: z.coerce.number().int().min(1).max(200).optional().default(50),
   })
@@ -177,6 +317,7 @@ router.get('/tierlists', requireAdmin, async (req, res) => {
 
   const result = await listAdminTierLists({
     queryText: parsed.data.q,
+    gameId: parsed.data.gameId,
     page: parsed.data.page,
     limit: parsed.data.limit,
     currentUserId: req.session?.userId || '',
@@ -184,11 +325,117 @@ router.get('/tierlists', requireAdmin, async (req, res) => {
   res.json(result)
 })
 
+router.get('/tierlists/stats', requireAdmin, async (req, res) => {
+  const schema = z.object({
+    q: z.string().trim().max(120).optional().default(''),
+    gameId: 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 result = await summarizeAdminTierLists({
+    queryText: parsed.data.q,
+    gameId: parsed.data.gameId,
+  })
+  res.json(result)
+})
+
 router.get('/template-requests', requireAdmin, async (req, res) => {
-  const requests = await listAdminTemplateRequests({ status: 'pending' })
+  const requests = await listAdminTemplateRequests({ statuses: ['pending', 'reviewing'] })
   res.json({ requests })
 })
 
+router.get('/image-assets/orphans', requireAdmin, async (req, res) => {
+  const schema = z.object({
+    limit: z.coerce.number().int().min(1).max(500).optional().default(100),
+    minAgeHours: z.coerce.number().min(0).max(24 * 365).optional().default(24),
+  })
+  const parsed = schema.safeParse(req.query)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const assets = await listUnusedImageAssets(parsed.data)
+  res.json({ assets })
+})
+
+async function removeImageAssetFiles(assets) {
+  await Promise.all(
+    (assets || []).map(async (asset) => {
+      if (!asset?.src || !asset.src.startsWith('/uploads/')) return
+      const absolutePath = path.join(__dirname, '..', '..', asset.src.replace(/^\//, ''))
+      try {
+        await fs.unlink(absolutePath)
+      } catch (error) {
+        if (error?.code !== 'ENOENT') throw error
+      }
+    })
+  )
+}
+
+router.post('/image-assets/cleanup', requireAdmin, async (req, res) => {
+  const schema = z.object({
+    limit: z.coerce.number().int().min(1).max(500).optional().default(100),
+    minAgeHours: z.coerce.number().min(0).max(24 * 365).optional().default(24),
+  })
+  const parsed = schema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const assets = await listUnusedImageAssets(parsed.data)
+  const deleted = await deleteImageAssets(assets.map((asset) => asset.id))
+  await removeImageAssetFiles(deleted)
+  res.json({ deletedCount: deleted.length, assets: deleted })
+})
+
+router.get('/image-assets/stats', requireAdmin, async (req, res) => {
+  const schema = z.object({
+    month: z.string().regex(/^\d{4}-\d{2}$/).optional(),
+    limit: z.coerce.number().int().min(1).max(24).optional().default(12),
+  })
+  const parsed = schema.safeParse(req.query)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const filters = { month: parsed.data.month }
+  const [stats, recentJobs] = await Promise.all([
+    getImageAssetStats(filters),
+    listRecentImageOptimizationJobs(parsed.data.limit, filters),
+  ])
+  res.json({
+    stats,
+    filters,
+    queue: getImageOptimizationQueueState(),
+    recentJobs,
+  })
+})
+
+router.post('/image-assets/stats/reset', requireAdmin, async (req, res) => {
+  const schema = z.object({
+    month: z.string().regex(/^\d{4}-\d{2}$/).optional().nullable(),
+  })
+  const parsed = schema.safeParse(req.body || {})
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const deletedCount = await clearImageOptimizationJobs({ month: parsed.data.month || undefined })
+  res.json({ deletedCount })
+})
+
+router.post('/image-assets/missing/cleanup', requireAdmin, async (req, res) => {
+  const result = await cleanupMissingUploadReferences()
+  res.json({ result })
+})
+
+async function removeUploadFiles(srcs) {
+  await Promise.all(
+    (srcs || []).map(async (src) => {
+      if (!src || !src.startsWith('/uploads/')) return
+      const absolutePath = path.join(__dirname, '..', '..', src.replace(/^\//, ''))
+      try {
+        await fs.unlink(absolutePath)
+      } catch (e) {
+        if (e?.code !== 'ENOENT') throw e
+      }
+    })
+  )
+}
+
 async function removeCustomItemFiles(items) {
   await Promise.all(
     items.map(async (item) => {
@@ -203,34 +450,35 @@ async function removeCustomItemFiles(items) {
   )
 }
 
-async function promoteCustomItemToGameItem({ customItem, gameId }) {
-  const originalName = path.basename(customItem.src || '')
-  const nextFilename = buildUploadFilename({ originalname: originalName })
-  const sourcePath = path.join(__dirname, '..', '..', customItem.src.replace(/^\//, ''))
-  const targetRelativePath = path.join('uploads', 'games', nextFilename)
-  const targetPath = path.join(__dirname, '..', '..', targetRelativePath)
-
-  await fs.copyFile(sourcePath, targetPath)
-
+async function promoteLibraryItemToGameItem({ item, gameId }) {
   return createGameItem({
     id: nanoid(),
     gameId,
-    src: `/${targetRelativePath.replace(/\\/g, '/')}`,
-    label: customItem.label,
+    src: item.src || '',
+    label: item.label,
   })
 }
 
 async function copyUploadIntoGameAsset(src) {
-  if (typeof src !== 'string' || !src.startsWith('/uploads/')) return src || ''
+  if (typeof src !== 'string') return ''
+  const raw = src.trim()
+  if (!raw) return ''
 
-  const originalName = path.basename(src)
-  const nextFilename = buildUploadFilename({ originalname: originalName })
-  const sourcePath = path.join(__dirname, '..', '..', src.replace(/^\//, ''))
-  const targetRelativePath = path.join('uploads', 'games', nextFilename)
-  const targetPath = path.join(__dirname, '..', '..', targetRelativePath)
+  if (raw.startsWith('/uploads/')) {
+    if (raw.startsWith('/uploads/assets/')) return raw
+    return raw
+  }
 
-  await fs.copyFile(sourcePath, targetPath)
-  return `/${targetRelativePath.replace(/\\/g, '/')}`
+  try {
+    const url = new URL(raw)
+    if (url.pathname.startsWith('/uploads/')) {
+      return url.pathname
+    }
+  } catch (error) {
+    return raw
+  }
+
+  return raw
 }
 
 function uniqueTierListPoolItems(tierList) {
@@ -264,10 +512,17 @@ async function promoteTierListItemsToGame({ tierList, gameId, itemIds = [] }) {
 }
 
 async function promoteSnapshotItemsToGame({ items, gameId }) {
+  const existingItems = await listGameItems(gameId)
+  const existingSrcs = new Set(
+    existingItems
+      .map((item) => (typeof item?.src === 'string' ? item.src.trim() : ''))
+      .filter(Boolean)
+  )
   const createdItems = []
 
   for (const item of items || []) {
     const copiedSrc = await copyUploadIntoGameAsset(item.src)
+    if (!copiedSrc || existingSrcs.has(copiedSrc)) continue
     createdItems.push(
       await createGameItem({
         id: nanoid(),
@@ -276,13 +531,40 @@ async function promoteSnapshotItemsToGame({ items, gameId }) {
         label: item.label,
       })
     )
+    existingSrcs.add(copiedSrc)
   }
 
   return createdItems
 }
 
+function pickTemplateRequestItems(templateRequest, itemIds = [], itemLabels = {}, itemSrcs = []) {
+  const requestedIds = new Set((itemIds || []).filter(Boolean))
+  const requestedSrcs = new Set((itemSrcs || []).filter((src) => typeof src === 'string' && src.trim()).map((src) => src.trim()))
+  const items = Array.isArray(templateRequest?.items) ? templateRequest.items : []
+  const filtered =
+    requestedIds.size || requestedSrcs.size
+      ? items.filter((item) => (item?.id && requestedIds.has(item.id)) || (typeof item?.src === 'string' && requestedSrcs.has(item.src.trim())))
+      : items
+  return filtered
+    .filter((item) => typeof item?.src === 'string' && item.src.trim())
+    .map((item) => {
+      const draftLabel =
+        typeof itemLabels?.[item.id] === 'string' && itemLabels[item.id].trim()
+          ? itemLabels[item.id].trim().slice(0, 60)
+          : typeof item?.label === 'string' && item.label.trim()
+            ? item.label.trim().slice(0, 60)
+            : buildItemLabelFromSrc(item.src)
+
+      return {
+        ...item,
+        src: item.src.trim(),
+        label: draftLabel,
+      }
+    })
+}
+
 async function createGameTemplateFromTierList({ tierList, gameId, gameName }) {
-  await createGame({ id: gameId, name: gameName })
+  await createGame({ id: gameId, name: gameName, isPublic: false })
   if (tierList.thumbnailSrc) {
     const copiedThumb = await copyUploadIntoGameAsset(tierList.thumbnailSrc)
     await updateGameThumbnail(gameId, copiedThumb)
@@ -305,7 +587,7 @@ async function createGameTemplateFromTierList({ tierList, gameId, gameName }) {
 }
 
 async function createGameTemplateFromRequest({ templateRequest, gameId, gameName }) {
-  await createGame({ id: gameId, name: gameName })
+  await createGame({ id: gameId, name: gameName, isPublic: false })
 
   if (templateRequest.thumbnailSrc) {
     const copiedThumb = await copyUploadIntoGameAsset(templateRequest.thumbnailSrc)
@@ -321,15 +603,31 @@ async function createGameTemplateFromRequest({ templateRequest, gameId, gameName
 }
 
 router.delete('/custom-items/:itemId', requireAdmin, async (req, res) => {
-  const result = await listCustomItems({ page: 1, limit: 200, orphanOnly: false })
+  const result = await listCustomItems({ page: 1, limit: 10000, filterMode: 'all' })
   const target = result.items.find((item) => item.id === req.params.itemId)
   if (!target) return res.status(404).json({ error: 'not_found' })
+  if (target.sourceType === 'template') {
+    if (String(target.id || '').startsWith('asset:')) {
+      const assetId = String(target.id).slice('asset:'.length)
+      const asset = await findImageAssetById(assetId)
+      if (!asset) return res.status(404).json({ error: 'not_found' })
+      await deleteImageAssets([assetId])
+      await removeUploadFiles([asset.src])
+      return res.json({ ok: true, sourceType: 'template-asset' })
+    }
+
+    await deleteGameItem(target.id)
+    return res.json({ ok: true, sourceType: 'template' })
+  }
+
+  if (!target.canDelete) return res.status(409).json({ error: 'item_locked' })
+  if (target.linkedGames.length > 0) return res.status(409).json({ error: 'item_linked' })
   if (target.usageCount > 0) return res.status(409).json({ error: 'item_in_use' })
 
   const items = await findCustomItemsByIds([target.id])
   await deleteCustomItems([target.id])
   await removeCustomItemFiles(items)
-  res.json({ ok: true })
+  res.json({ ok: true, sourceType: 'user' })
 })
 
 router.post('/custom-items/:itemId/promote', requireAdmin, async (req, res) => {
@@ -343,9 +641,21 @@ router.post('/custom-items/:itemId/promote', requireAdmin, async (req, res) => {
   if (!game) return res.status(404).json({ error: 'game_not_found' })
 
   const customItem = await findCustomItemById(req.params.itemId)
-  if (!customItem) return res.status(404).json({ error: 'not_found' })
+  const gameItem = customItem ? null : await findGameItemById(req.params.itemId)
+  const assetItemId = String(req.params.itemId || '')
+  const imageAsset = !customItem && !gameItem && assetItemId.startsWith('asset:') ? await findImageAssetById(assetItemId.slice(6)) : null
+  const sourceItem =
+    customItem ||
+    gameItem ||
+    (imageAsset
+      ? {
+          src: imageAsset.src || '',
+          label: imageAsset.labelOverride || path.basename(imageAsset.src || '', path.extname(imageAsset.src || '')) || 'item',
+        }
+      : null)
+  if (!sourceItem) return res.status(404).json({ error: 'not_found' })
 
-  const item = await promoteCustomItemToGameItem({ customItem, gameId: game.id })
+  const item = await promoteLibraryItemToGameItem({ item: sourceItem, gameId: game.id })
   res.json({ item })
 })
 
@@ -397,6 +707,34 @@ router.post('/tierlists/:tierListId/create-game-template', requireAdmin, async (
   res.json(result)
 })
 
+router.patch('/tierlists/:tierListId', requireAdmin, async (req, res) => {
+  const schema = z.object({
+    title: z.string().trim().min(1).max(120),
+    description: z.string().max(500).optional().default(''),
+    isPublic: z.boolean(),
+  })
+  const parsed = schema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const tierList = await findTierListById(req.params.tierListId)
+  if (!tierList) return res.status(404).json({ error: 'not_found' })
+
+  const updated = await updateAdminTierListMeta({
+    id: tierList.id,
+    title: parsed.data.title,
+    description: parsed.data.description || '',
+    isPublic: parsed.data.isPublic,
+  })
+  res.json({ tierList: updated })
+})
+
+router.delete('/tierlists/:tierListId', requireAdmin, async (req, res) => {
+  const tierList = await findTierListById(req.params.tierListId)
+  if (!tierList) return res.status(404).json({ error: 'not_found' })
+  await deleteTierList(tierList.id)
+  res.json({ ok: true })
+})
+
 router.post('/template-requests/:requestId/approve', requireAdmin, async (req, res) => {
   const templateRequest = await findTemplateRequestById(req.params.requestId)
   if (!templateRequest) return res.status(404).json({ error: 'not_found' })
@@ -434,6 +772,118 @@ router.post('/template-requests/:requestId/approve', requireAdmin, async (req, r
   res.json({ request, ...result })
 })
 
+router.post('/template-requests/:requestId/review', requireAdmin, async (req, res) => {
+  let templateRequest = await findTemplateRequestById(req.params.requestId)
+  if (!templateRequest) return res.status(404).json({ error: 'not_found' })
+  if (templateRequest.status === 'completed' || templateRequest.status === 'rejected' || templateRequest.status === 'approved') {
+    return res.status(409).json({ error: 'request_already_handled' })
+  }
+
+  if (templateRequest.type === 'create' && templateRequest.targetGameId && !templateRequest.targetGameName) {
+    templateRequest = await updateTemplateRequestTargetGame({
+      id: templateRequest.id,
+      targetGameId: '',
+    })
+  }
+
+  if (templateRequest.status === 'reviewing') {
+    return res.json({ request: templateRequest })
+  }
+
+  const request = await updateTemplateRequestStatus({ id: templateRequest.id, status: 'reviewing' })
+  res.json({ request })
+})
+
+router.post('/template-requests/:requestId/link-game', requireAdmin, async (req, res) => {
+  const schema = z.object({
+    gameId: z.string().trim().min(1).max(120),
+  })
+  const parsed = schema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const templateRequest = await findTemplateRequestById(req.params.requestId)
+  if (!templateRequest) return res.status(404).json({ error: 'not_found' })
+  if (templateRequest.type !== 'create') return res.status(409).json({ error: 'create_request_required' })
+  if (!['pending', 'reviewing'].includes(templateRequest.status)) {
+    return res.status(409).json({ error: 'request_already_handled' })
+  }
+
+  const game = await findGameById(parsed.data.gameId)
+  if (!game) return res.status(404).json({ error: 'game_not_found' })
+
+  const request = await updateTemplateRequestTargetGame({
+    id: templateRequest.id,
+    targetGameId: game.id,
+  })
+  res.json({ request })
+})
+
+router.post('/template-requests/:requestId/promote-items', requireAdmin, async (req, res) => {
+  const schema = z.object({
+    gameId: z.string().trim().min(1).max(120),
+    itemIds: z.array(z.string().min(1)).optional().default([]),
+    itemSrcs: z.array(z.string().min(1)).optional().default([]),
+    itemLabels: z.record(z.string(), z.string().min(1).max(60)).optional().default({}),
+  })
+  const parsed = schema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const templateRequest = await findTemplateRequestById(req.params.requestId)
+  if (!templateRequest) return res.status(404).json({ error: 'not_found' })
+  if (!['pending', 'reviewing'].includes(templateRequest.status)) {
+    return res.status(409).json({ error: 'request_already_handled' })
+  }
+
+  const game = await findGameById(parsed.data.gameId)
+  if (!game) return res.status(404).json({ error: 'game_not_found' })
+
+  const promotableItems = pickTemplateRequestItems(templateRequest, parsed.data.itemIds, parsed.data.itemLabels, parsed.data.itemSrcs)
+  if (!promotableItems.length) {
+    return res.status(400).json({ error: 'no_items_selected' })
+  }
+
+  let items = []
+  try {
+    items = await promoteSnapshotItemsToGame({
+      items: promotableItems,
+      gameId: game.id,
+    })
+  } catch (error) {
+    console.error('[admin] template request promote-items failed', {
+      requestId: templateRequest.id,
+      gameId: game.id,
+      itemCount: promotableItems.length,
+      message: error?.message || 'unknown_error',
+      code: error?.code || '',
+      stack: error?.stack || '',
+    })
+    return res.status(500).json({
+      error: 'promote_items_failed',
+      detail: error?.message || 'unknown_error',
+      code: error?.code || '',
+    })
+  }
+
+  const request =
+    templateRequest.status === 'reviewing'
+      ? templateRequest
+      : await updateTemplateRequestStatus({ id: templateRequest.id, status: 'reviewing' })
+
+  res.json({ request, items })
+})
+
+router.post('/template-requests/:requestId/complete', requireAdmin, async (req, res) => {
+  const templateRequest = await findTemplateRequestById(req.params.requestId)
+  if (!templateRequest) return res.status(404).json({ error: 'not_found' })
+  if (templateRequest.status === 'completed') return res.json({ request: templateRequest })
+  if (templateRequest.status === 'rejected' || templateRequest.status === 'approved') {
+    return res.status(409).json({ error: 'request_already_handled' })
+  }
+
+  const request = await updateTemplateRequestStatus({ id: templateRequest.id, status: 'completed' })
+  res.json({ request })
+})
+
 router.post('/template-requests/:requestId/reject', requireAdmin, async (req, res) => {
   const templateRequest = await findTemplateRequestById(req.params.requestId)
   if (!templateRequest) return res.status(404).json({ error: 'not_found' })
@@ -458,8 +908,19 @@ router.delete('/custom-items', requireAdmin, async (req, res) => {
 })
 
 router.get('/users', requireAdmin, async (req, res) => {
-  const users = await listUsers()
-  res.json({ users })
+  const schema = z.object({
+    q: z.string().trim().max(120).optional().default(''),
+    sort: z.enum(['recent', 'created', 'tierlists']).optional().default('recent'),
+    direction: z.enum(['asc', 'desc']).optional().default('desc'),
+  })
+  const parsed = schema.safeParse(req.query)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const [users, primaryAdmin] = await Promise.all([
+    listUsers({ queryText: parsed.data.q, sort: parsed.data.sort, direction: parsed.data.direction }),
+    findPrimaryAdminUser(),
+  ])
+  res.json({ users: users.map((user) => decorateAdminUser(user, primaryAdmin)) })
 })
 
 router.patch('/users/:userId', requireAdmin, async (req, res) => {
@@ -471,21 +932,34 @@ router.patch('/users/:userId', requireAdmin, async (req, res) => {
   const parsed = schema.safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
 
+  const { targetUser, actingUser, primaryAdmin } = await getAdminUserContext(req.params.userId, req.session.userId)
+  if (!targetUser) return res.status(404).json({ error: 'not_found' })
+
+  const actingIsPrimaryAdmin = canManageAdminRole(actingUser, primaryAdmin)
+  const targetIsPrimaryAdmin = primaryAdmin?.id === targetUser.id
+  const roleChanged = parsed.data.isAdmin !== !!targetUser.isAdmin
+
   if (req.params.userId === req.session.userId && !parsed.data.isAdmin) {
     return res.status(400).json({ error: 'self_admin_required' })
   }
-
-  const user = await findUserById(req.params.userId)
-  if (!user) return res.status(404).json({ error: 'not_found' })
+  if (targetIsPrimaryAdmin && !actingIsPrimaryAdmin) {
+    return res.status(403).json({ error: 'primary_admin_protected' })
+  }
+  if (targetIsPrimaryAdmin && !parsed.data.isAdmin) {
+    return res.status(400).json({ error: 'primary_admin_required' })
+  }
+  if (roleChanged && !actingIsPrimaryAdmin) {
+    return res.status(403).json({ error: 'primary_admin_only' })
+  }
 
   try {
     const updated = await adminUpdateUser({
-      id: user.id,
+      id: targetUser.id,
       email: parsed.data.email,
       nickname: parsed.data.nickname,
       isAdmin: parsed.data.isAdmin,
     })
-    res.json({ user: updated })
+    res.json({ user: decorateAdminUser(updated, primaryAdmin) })
   } catch (e) {
     if (e && e.code === 'ER_DUP_ENTRY') {
       return res.status(409).json({ error: 'email_taken' })
@@ -494,15 +968,60 @@ router.patch('/users/:userId', requireAdmin, async (req, res) => {
   }
 })
 
+router.post('/users/:userId/avatar', requireAdmin, avatarUpload.single('avatar'), async (req, res) => {
+  const schema = z.object({
+    removeAvatar: z.union([z.literal('1'), z.undefined()]).optional(),
+  })
+  const parsed = schema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const { targetUser, actingUser, primaryAdmin } = await getAdminUserContext(req.params.userId, req.session.userId)
+  if (!targetUser) return res.status(404).json({ error: 'not_found' })
+  if (primaryAdmin?.id === targetUser.id && !canManageAdminRole(actingUser, primaryAdmin)) {
+    return res.status(403).json({ error: 'primary_admin_protected' })
+  }
+
+  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 || targetUser.avatarSrc || ''
+  const updated = await adminUpdateUser({
+    id: targetUser.id,
+    email: targetUser.email,
+    nickname: targetUser.nickname || '',
+    isAdmin: !!targetUser.isAdmin,
+    avatarSrc: nextAvatarSrc,
+  })
+
+  res.json({ user: decorateAdminUser(updated, primaryAdmin) })
+})
+
 router.delete('/users/:userId', requireAdmin, async (req, res) => {
   if (req.params.userId === req.session.userId) {
     return res.status(400).json({ error: 'cannot_delete_self' })
   }
 
-  const user = await findUserById(req.params.userId)
-  if (!user) return res.status(404).json({ error: 'not_found' })
+  const { targetUser, actingUser, primaryAdmin } = await getAdminUserContext(req.params.userId, req.session.userId)
+  if (!targetUser) return res.status(404).json({ error: 'not_found' })
 
-  await adminDeleteUser(user.id)
+  const actingIsPrimaryAdmin = canManageAdminRole(actingUser, primaryAdmin)
+  const targetIsPrimaryAdmin = primaryAdmin?.id === targetUser.id
+  if (targetIsPrimaryAdmin) {
+    return res.status(400).json({ error: 'cannot_delete_primary_admin' })
+  }
+  if (targetUser.isAdmin && !actingIsPrimaryAdmin) {
+    return res.status(403).json({ error: 'primary_admin_only' })
+  }
+
+  await adminDeleteUser(targetUser.id)
   res.json({ ok: true })
 })
 
@@ -513,11 +1032,14 @@ router.patch('/users/:userId/password', requireAdmin, async (req, res) => {
   const parsed = schema.safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
 
-  const user = await findUserById(req.params.userId)
-  if (!user) return res.status(404).json({ error: 'not_found' })
+  const { targetUser, actingUser, primaryAdmin } = await getAdminUserContext(req.params.userId, req.session.userId)
+  if (!targetUser) return res.status(404).json({ error: 'not_found' })
+  if (primaryAdmin?.id === targetUser.id && !canManageAdminRole(actingUser, primaryAdmin)) {
+    return res.status(403).json({ error: 'primary_admin_protected' })
+  }
 
   const passwordHash = await bcrypt.hash(parsed.data.password, 10)
-  await adminUpdateUserPassword({ id: user.id, passwordHash })
+  await adminUpdateUserPassword({ id: targetUser.id, passwordHash })
   res.json({ ok: true })
 })
 

backend/src/routes/auth.js

@@ -1,5 +1,4 @@
 const express = require('express')
-const path = require('path')
 const bcrypt = require('bcryptjs')
 const { z } = require('zod')
 const { nanoid } = require('nanoid')
@@ -10,17 +9,13 @@ const {
   findUserById,
   createUser,
   updateUserProfile,
+  findPrimaryAdminUser,
 } = require('../db')
 const { requireAuth } = require('../middleware/auth')
+const { createMemoryUpload, writeOptimizedImage } = require('../lib/image-storage')
 
 const router = express.Router()
 
-function buildUploadFilename(file) {
-  const ext = path.extname(file.originalname || '').toLowerCase()
-  const safeExt = ext && /^[.a-z0-9]+$/.test(ext) ? ext : ''
-  return `${Date.now()}-${nanoid()}${safeExt}`
-}
-
 const signupSchema = z.object({
   email: z.string().email(),
   password: z.string().min(6),
@@ -28,8 +23,41 @@ const signupSchema = z.object({
 
 const profileSchema = z.object({
   nickname: z.string().trim().min(1).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
+
+  return {
+    id: user.id,
+    email: user.email,
+    nickname: user.nickname || '',
+    isAdmin: !!user.isAdmin,
+    isPrimaryAdmin,
+    isOperator: !!user.isAdmin && !isPrimaryAdmin,
+    role: isPrimaryAdmin ? 'owner' : user.isAdmin ? 'operator' : 'user',
+    avatarSrc: user.avatarSrc || '',
+    createdAt: user.createdAt,
+  }
+}
+
 router.post('/signup', async (req, res) => {
   const parsed = signupSchema.safeParse(req.body)
   if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
@@ -42,13 +70,12 @@ router.post('/signup', async (req, res) => {
   const isAdmin = (await countUsers()) === 0
   const user = await createUser({ id: nanoid(), email, nickname: '', passwordHash, isAdmin })
 
-  req.session.userId = user.id
-  req.session.isAdmin = !!user.isAdmin
-  // 세션을 응답 전에 명시적으로 저장해 Set-Cookie가 확실히 내려오도록 보강
-  req.session.save((err) => {
-    if (err) return res.status(500).json({ error: 'session_save_failed' })
-    res.json(user)
-  })
+  try {
+    await establishSession(req, user)
+    res.json(await serializeUser(user))
+  } catch (err) {
+    return res.status(500).json({ error: 'session_save_failed' })
+  }
 })
 
 router.post('/login', async (req, res) => {
@@ -62,19 +89,12 @@ router.post('/login', async (req, res) => {
   const ok = await bcrypt.compare(password, user.passwordHash)
   if (!ok) return res.status(401).json({ error: 'invalid_credentials' })
 
-  req.session.userId = user.id
-  req.session.isAdmin = !!user.isAdmin
-  req.session.save((err) => {
-    if (err) return res.status(500).json({ error: 'session_save_failed' })
-    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)
+    res.json(await serializeUser(user))
+  } catch (err) {
+    return res.status(500).json({ error: 'session_save_failed' })
+  }
 })
 
 router.post('/logout', async (req, res) => {
@@ -86,20 +106,14 @@ router.get('/me', async (req, res) => {
   if (!req.session || !req.session.userId) return res.json({ user: null })
   const user = await findUserById(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 },
-})
+const upload = createMemoryUpload(multer, { fileSize: 4 * 1024 * 1024 })
 
 router.post('/profile', requireAuth, upload.single('avatar'), async (req, res) => {
   const parsed = profileSchema.safeParse(req.body)
@@ -108,14 +122,26 @@ router.post('/profile', requireAuth, upload.single('avatar'), async (req, res) =
   const user = await findUserById(req.session.userId)
   if (!user) return res.status(404).json({ error: 'not_found' })
 
-  const nextAvatarSrc = req.file ? `/uploads/avatars/${req.file.filename}` : user.avatarSrc || ''
+  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,
     avatarSrc: nextAvatarSrc,
   })
 
-  res.json({ user: updated })
+  res.json({ user: await serializeUser(updated) })
 })
 
 module.exports = router

backend/src/routes/games.js

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

backend/src/routes/tierlists.js

@@ -1,5 +1,4 @@
 const express = require('express')
-const path = require('path')
 const multer = require('multer')
 const { z } = require('zod')
 const { nanoid } = require('nanoid')
@@ -15,8 +14,10 @@ const {
   findUserById,
   favoriteTierList,
   unfavoriteTierList,
+  duplicateTierListForUser,
 } = require('../db')
 const { requireAuth } = require('../middleware/auth')
+const { createMemoryUpload, writeOptimizedImage } = require('../lib/image-storage')
 
 const router = express.Router()
 const FREEFORM_GAME_ID = 'freeform'
@@ -54,26 +55,33 @@ function getCustomTemplateItems(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}`
-}
+const upload = createMemoryUpload(multer, { fileSize: 6 * 1024 * 1024 })
+const thumbnailUpload = createMemoryUpload(multer, { fileSize: 8 * 1024 * 1024 })
 
-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 thumbnailUpload = multer({
-  storage: multer.diskStorage({
-    destination: (req, file, cb) => cb(null, path.join(__dirname, '..', '..', 'uploads', 'tierlists')),
-    filename: (req, file, cb) => cb(null, buildUploadFilename(file)),
-  }),
-  limits: { fileSize: 6 * 1024 * 1024 },
+const templateRequestSchema = z.object({
+  type: z.enum(['create', 'update']),
+  sourceTierListId: z.string().max(64).optional().default(''),
+  gameId: z.string().min(1).max(120),
+  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()).optional().default([]),
+    }).passthrough()
+  ),
+  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(['game', 'custom']).default('game'),
+    })
+  ),
 })
 
 const tierListUpsertSchema = z.object({
@@ -83,12 +91,17 @@ const tierListUpsertSchema = z.object({
   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()),
-    })
+      itemIds: z.array(z.string()).optional().default([]),
+    }).passthrough()
   ),
   pool: z.array(
     z.object({
@@ -130,6 +143,15 @@ router.get('/:id', async (req, res) => {
   res.json({ tierList: normalizeTierList(t) })
 })
 
+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, req.session.userId)
   if (!tierList) return res.status(404).json({ error: 'not_found' })
@@ -165,10 +187,19 @@ 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,
   })
 
@@ -177,44 +208,58 @@ router.post('/custom-items', requireAuth, upload.single('image'), async (req, re
 
 router.post('/thumbnail', requireAuth, thumbnailUpload.single('thumbnail'), async (req, res) => {
   if (!req.file) return res.status(400).json({ error: 'file_required' })
-  res.json({ thumbnailSrc: `/uploads/tierlists/${req.file.filename}` })
+
+  const optimized = await writeOptimizedImage({
+    file: req.file,
+    directory: 'tierlists',
+    width: 1280,
+    height: 1280,
+    fit: 'inside',
+    quality: 84,
+  })
+
+  res.json({ thumbnailSrc: optimized.src })
 })
 
-router.post('/:id/template-request', requireAuth, async (req, res) => {
-  const schema = z.object({
-    type: z.enum(['create', 'update']),
-  })
-  const parsed = schema.safeParse(req.body)
+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 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' })
-
-  const customItems = getCustomTemplateItems(tierList)
+  const payload = parsed.data
+  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 (parsed.data.type === 'create') {
-    if (tierList.gameId !== FREEFORM_GAME_ID) return res.status(400).json({ error: 'freeform_required' })
-    if (!(tierList.title || '').trim() || (tierList.title || '').trim() === FREEFORM_DEFAULT_TITLE) {
-      return res.status(400).json({ error: 'title_required' })
-    }
-  } else {
-    if (tierList.gameId === FREEFORM_GAME_ID) return res.status(400).json({ error: 'game_template_required' })
+  if (payload.type === 'create') {
+    if (payload.gameId !== FREEFORM_GAME_ID) return res.status(400).json({ error: 'freeform_required' })
+  } else if (payload.gameId === FREEFORM_GAME_ID) {
+    return res.status(400).json({ error: 'game_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: parsed.data.type,
+      type: payload.type,
       requesterId: req.session.userId,
-      sourceTierListId: tierList.id,
-      sourceGameId: tierList.gameId,
-      targetGameId: parsed.data.type === 'update' ? tierList.gameId : '',
-      title: tierList.title,
-      description: tierList.description || '',
-      thumbnailSrc: tierList.thumbnailSrc || '',
+      sourceTierListId: sourceTierList?.id || '',
+      sourceGameId: payload.gameId,
+      targetGameId: payload.type === 'update' ? payload.gameId : '',
+      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) {
@@ -244,6 +289,11 @@ router.post('/', requireAuth, async (req, res) => {
       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,
     })
@@ -258,6 +308,11 @@ router.post('/', requireAuth, async (req, res) => {
     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,
   })

docs/history.md

@@ -1,5 +1,229 @@
 # 의사결정 이력
 
+## 2026-04-02 v1.4.12
+- 프런트 이름만 바꾸는 단계가 끝난 뒤에는, 백엔드도 새 `/api/topics`, `/api/admin/templates` 경로를 열고 기존 `/games`는 호환용으로 남기는 점진 전환이 가장 안전하다고 판단했다.
+
+## 2026-04-02 v1.4.11
+- 백엔드 `/api/games` 경로를 바로 바꾸기보다, 프런트 API 객체에서 먼저 `topic/template` 의미 이름을 제공하고 호출부를 옮기는 편이 위험이 훨씬 낮다고 판단했다.
+
+## 2026-04-02 v1.4.10
+- 사용자 주소는 이미 `/topics`로 옮기기 시작했으므로, 라우트 이름과 기본 파라미터도 `topicHub / topicId` 기준으로 맞추고 기존 `gameId`는 호환 fallback으로만 남기는 편이 더 자연스럽다고 판단했다.
+
+## 2026-04-02 v1.4.9
+- 경로 전환은 화면마다 문자열을 직접 고치는 방식보다, 공용 경로 헬퍼를 먼저 세워 주제·에디터·로그인 리다이렉트 흐름을 한 기준으로 묶는 편이 이후 리네이밍 비용을 훨씬 줄인다고 판단했다.
+
+## 2026-04-02 v1.4.8
+- 주제 상세 화면 제목은 내부 ID를 잠깐 보여주는 것보다, 로딩 문구를 거쳐 실제 이름으로 자연스럽게 바뀌는 편이 사용자 체감상 더 안정적이라고 판단했다.
+- 주요 목록 화면은 `pageHead` 문법을 계속 통일해 두는 편이, 이후 검색/필터 툴바를 더 붙이더라도 구조를 예측하기 쉽다고 판단했다.
+
+## 2026-04-02 v1.4.7
+- 주제 상세 컬렉션 화면도 즐겨찾기·나의 티어표와 같은 `pageHead` 문법으로 맞춰야, 네비게이션으로 이동하는 주요 화면들의 리듬이 더 자연스럽다고 판단했다.
+- 라우트 전환은 한 번에 `/games`를 없애기보다, 먼저 `/topics`를 기본 진입 경로로 세우고 기존 `/games`는 alias로 유지하는 점진 전환이 더 안전하다고 정리했다.
+
+## 2026-04-02 v1.4.6
+- 내부 리네이밍 2단계는 관리자 화면처럼 상태와 액션이 많은 영역부터 정리해 두는 편이, 이후 `/games` 라우트와 API 계층을 손볼 때 위험을 줄이는 데 더 유리하다고 판단했다.
+
+## 2026-04-02 v1.4.5
+- 내부 리네이밍은 한 번에 API와 DB까지 건드리기보다, 홈·주제 화면·에디터처럼 영향 범위가 비교적 명확한 프런트 핵심 흐름부터 `game` 의존 이름을 줄여 나가는 편이 더 안전하다고 판단했다.
+
+## 2026-04-02 v1.4.4
+- 용어 정리 마무리 단계에서는 눈에 잘 띄는 영어 헤더를 그대로 두기보다, 홈과 관리자처럼 진입 빈도가 높은 화면의 상단 라벨까지 한국어로 맞춰야 전체 제품 인상이 더 자연스럽다고 판단했다.
+
+## 2026-04-02 v1.4.3
+- 용어 전환은 메뉴 타이틀만 바꾸는 것으로 끝나지 않고, 관리자 작업 중 반복해서 보게 되는 토스트와 확인창까지 맞춰야 실제 체감 일관성이 살아난다고 판단했다.
+
+## 2026-04-02 v1.4.2
+- 용어 정리를 시작한 뒤에는 일부 화면만 바꾸는 것보다, 관리자 모달과 확인 메시지처럼 실제 운영 중 많이 보는 문구도 함께 맞춰 주는 편이 체감 일관성이 더 높다고 판단했다.
+
+## 2026-04-02 v1.4.1
+- 좌측 메뉴와 화면 타이틀의 명칭이 서로 다르면 사용자가 현재 위치를 직관적으로 매칭하기 어렵기 때문에, 메뉴 이름과 진입 타이틀을 같은 문구로 맞추는 편이 맞다고 판단했다.
+
+## 2026-04-02 v1.4.0
+- 서비스가 게임 외 주제 전반을 다룰 수 있는 단계에 온 만큼, 내부 모델명은 유지하더라도 사용자에게 보이는 주요 용어는 `주제 / 템플릿` 기준으로 먼저 정리하는 편이 맞다고 판단했다.
+- 대규모 내부 리네이밍은 API와 DB까지 손대야 하므로, 이번 단계에서는 사용자 화면 문구만 우선 바꾸고 내부 `game` 모델은 그대로 두는 점진적 전환이 더 안전하다고 정리했다.
+
+## 2026-04-02 v1.3.93
+- 목록 카드 썸네일은 드래그 대상이 아니라 클릭 대상에 가깝기 때문에, 브라우저 기본 이미지 드래그 프리뷰는 전부 막아 두는 편이 UX 측면에서 맞다고 판단했다.
+
+## 2026-04-02 v1.3.92
+- 왼쪽 레일 활성 메뉴도 로그인 토글과 같은 이동형 배경 문법을 쓰는 편이 앱 전체 인터랙션 언어를 더 일관되게 만든다고 판단했다.
+
+## 2026-04-02 v1.3.91
+- 로그인/회원가입 탭은 즉시 배경 교체보다, 선택 배경이 실제로 이동하는 토글 문법이 더 직관적이고 상태 전환이 잘 읽힌다고 판단했다.
+
+## 2026-04-02 v1.3.90
+- 경고 수준의 CSS 진단이라도 실제 의미 없는 속성이나 벤더 전용 속성 누락이라면 바로 정리해 두는 편이 이후 유지보수 피로를 줄인다고 판단했다.
+
+## 2026-04-02 v1.3.89
+- 더 이상 참조되지 않는 Vite 기본 자산과 레거시 public 아이콘 묶음은 남겨둘수록 혼동만 커지므로, 실제 사용 파일만 남기고 정리하는 편이 맞다고 판단했다.
+- 공유용 썸네일은 코드 수정과 별개로 시각 자산 손질이 자주 일어날 수 있으므로, 이번처럼 워크트리에 이미 반영된 최신 이미지 수정본은 함께 릴리스에 포함하는 편이 맞다고 정리했다.
+
+## 2026-04-02 v1.3.88
+- 헤더의 `by zenn`은 이미 공통 카피라이트 링크가 생긴 뒤 역할이 겹치므로, 브랜드 영역은 서비스명 중심으로 정리하는 편이 맞다고 판단했다.
+- 외부 공유 미리보기는 메타 태그만 넣는 것보다 실제 전용 썸네일 자산을 함께 두는 편이 메신저/소셜/모바일 홈 화면까지 더 안정적으로 동작한다고 정리했다.
+- 파비콘은 인라인 data URL 하나에 의존하기보다 `svg + png + apple-touch-icon` 조합으로 두는 편이 브라우저와 기기 호환성 측면에서 안전하다고 판단했다.
+
+## 2026-04-02 v1.3.86
+- 아이콘 크기는 이미지 다운로드 결과에만 반영되고 저장본에는 남지 않으면 사용자가 체감상 “저장되지 않는 설정”으로 느끼게 되므로, 티어표 본문 설정으로 저장하는 편이 맞다고 정리했다.
+- 저장 경로를 고친 뒤에도 프리뷰 화면이 기본값으로 보인다면, 데이터보다 프런트 렌더링 루트에 동일 CSS 변수가 전달되는지 먼저 확인하는 편이 맞다고 정리했다.
+
+## 2026-04-02 v1.3.83
+- 모바일에서 열 헤더가 칸과 시각적으로 분리되는 문제는 전체 레이아웃을 다시 갈아엎기보다, 각 칸 안에 열 이름 배지를 같이 보여주는 편이 가장 적은 변경으로 효과를 낸다고 정리했다.
+- 배지를 쓰는 반응형 구간에서는 기존 상단 열 헤더까지 남겨두면 중복 정보가 되므로, 같은 브레이크포인트에서 헤더는 숨기고 칸 배지 하나만 남기는 편이 맞다고 정리했다.
+- 반응형 보정은 한 미디어 구간 안에서 서로 다른 규칙이 다시 덮어쓰지 않게 정리해야 하므로, 모바일용 `1fr` 레이아웃을 선언한 뒤 예전 `140px/150px` 규칙은 제거하는 편이 맞다고 판단했다.
+
+## 2026-04-02 v1.3.82
+- 프리뷰 완성본도 결국 공유/열람용 결과물이므로, 이미지 다운로드 결과와 같은 작성자/저장 시각 메타를 같이 보여주는 편이 자연스럽다고 정리했다.
+- 관리자 템플릿 요청 카드는 “요청 티어표 보기”가 실제로 새창 이동용이라면 하단 버튼과 썸네일 클릭을 둘 다 유지하기보다, 썸네일 클릭 하나로 통합하는 편이 더 단순하고 직관적이라고 판단했다.
+
+## 2026-04-02 v1.3.81
+- 저장된 티어표 공유는 별도 새 페이지를 만들기보다, 이미 완성본 열람에 쓰고 있는 `preview=1` 주소를 그대로 공유 링크로 재사용하는 편이 가장 단순하고 일관적이라고 정리했다.
+- 공유 액션은 저장/삭제처럼 저장본 전제의 보조 기능이므로, 메인 저장 버튼 영역보다 하단 유틸리티 링크 영역에 두는 편이 더 자연스럽다고 판단했다.
+
+## 2026-04-02 v1.3.79
+- 카피라이트처럼 앱 전체 브랜딩 성격의 footer는 관리자 텔레포트 안에 두기보다, `App.vue`의 공통 오른쪽 레일 footer로 두는 편이 위치도 안정적이고 화면 간 일관성도 높다고 정리했다.
+
+## 2026-04-02 v1.3.78
+- 축소 상태에서는 텍스트가 사라지므로 같은 `티어표 만들기` 계열 액션이라도 커스텀 제작과 템플릿 기반 제작을 아이콘으로 구분해 주는 편이 맞다고 정리했다.
+- 관리자 우측 카피라이트처럼 “사이드바 하단”에 붙어야 하는 정보는 텔레포트 루트의 형제 노드로 두기보다, 실제 사이드바 컨테이너 내부의 마지막 행으로 두는 편이 레이아웃상 안전하다고 판단했다.
+
+## 2026-04-02 v1.3.77
+- 왼쪽 레일을 접었을 때 하단 액션을 완전히 숨기면 `새 티어표 만들기` 진입점이 사라지므로, 펼친 상태의 하단 위치는 유지하되 축소 상태에서는 같은 위치의 아이콘 전용 버튼으로 바꿔 남겨두는 편이 맞다고 정리했다.
+
+## 2026-04-02 v1.3.76
+- 왼쪽 사이드 레일을 접었을 때는 텍스트가 사라진 뒤에도 행 높이가 제각각이면 아이콘 전용 탐색기로 읽히지 않으므로, 아바타/검색/내비 항목의 높이를 같은 규격으로 통일하는 편이 맞다고 정리했다.
+- 왼쪽 레일 검색은 화면에 따라 티어표 검색으로 바뀌면 사용자가 사이드 검색과 메인 검색 역할을 구분하기 어려우므로, 사이드는 게임 검색으로 고정하고 티어표 검색은 메인 화면 문맥에 맡기는 편이 더 자연스럽다고 판단했다.
+
+## 2026-04-02 v1.3.75
+- 관리자 공용 모달은 기본 카드 여백을 계속 쓰되, 내부에 자체 셸을 가진 대형 상세 모달까지 같은 패딩을 강제로 받으면 오히려 레이아웃이 무너지므로 예외 클래스로 분리하는 편이 맞다고 정리했다.
+- 관리자 표기 링크는 텍스트만 두기보다, 추후 주소 변경이 쉬운 한 곳짜리 상수와 새 창 링크로 관리하는 편이 운영 측면에서 더 낫다고 판단했다.
+- 왼쪽 사이드 레일 접힘 상태는 요소를 좁히는 것만으로는 높이와 정렬 문제가 계속 남으므로, 메타 텍스트는 실제로 숨기고 아이콘 중심 문법으로 따로 정리하는 편이 맞다고 판단했다.
+
+## 2026-04-02 v1.3.74
+- 관리자 공용 게임 선택 모달은 단순 검색만 제공하기보다, 현재 문맥에서 이미 선택 불가능한 대상을 `이미 추가됨`으로 명시하고 막아 주는 편이 운영 실수를 줄이는 데 더 효과적이라고 정리했다.
+- 프로젝트 표기는 관리자 헤더 상단보다 사이드바 최하단의 작은 카피라이트 문구로 빼는 편이 정보 밀도를 덜 방해한다고 판단했다.
+
+## 2026-04-02 v1.3.73
+- 게임 선택이 여러 관리자 화면에 퍼지기 시작한 시점에서는 일부 화면만 셀렉트나 내부 리스트를 유지하기보다, 공용 검색 모달 하나로 통일하는 편이 장기적으로 더 일관되고 확장에 강하다고 정리했다.
+- 검색 입력과 실행 버튼은 세로로 같은 문법으로 쌓기보다, 입력은 입력끼리 실행은 액션으로 읽히게 한 줄 배치로 적당히 구분해주는 편이 운영 화면에서 덜 답답하다고 판단했다.
+
+## 2026-04-02 v1.3.72
+- 라우트 복원용 watcher가 composable 반환값 초기화보다 먼저 돌 수 있는 구간에서는 직접 함수를 즉시 호출하기보다, 초기화 완료 뒤 실행되도록 한 템포 미루는 편이 안전하다고 정리했다.
+
+## 2026-04-02 v1.3.71
+- 관리자에서 게임 선택 지점이 늘어나는 구조라면 각 화면마다 셀렉트/긴 리스트를 따로 두기보다, 공용 검색 모달 하나로 통일하는 편이 이후 100개 이상 게임이 쌓여도 더 안정적이라고 정리했다.
+- 아이템 모달은 참조 정보 정리 뒤에도 왼쪽 선택 요약 카드가 여전히 과하다고 판단해, 예전처럼 게임 선택 자체에 더 집중한 구조로 한 단계 더 되돌리는 편이 맞다고 판단했다.
+
+## 2026-04-02 v1.3.70
+- 관리자 티어표 목록은 페이지 단위 열람만으로는 운영 개입이 부족하므로, 게임별 필터와 카드 단위 관리 액션을 함께 붙여 실제 검수 도구로 쓰는 편이 맞다고 정리했다.
+- 공개 여부는 문장 속 메타보다 배지로 따로 떼어 보여주는 편이 다른 관리자 카드들과 문법이 맞고, 공개/비공개 전환도 같은 관리 모달 안에서 바로 처리하는 쪽이 운영 흐름상 자연스럽다고 판단했다.
+
+## 2026-04-02 v1.3.69
+- 관리자 아이템 라이브러리의 참조 수는 저장 구조 설명에는 도움이 되지만 실제 운영에서는 대부분 의미가 약하므로, 카드와 모달에서 계속 전면에 두기보다 다시 숨기고 필요한 경우 내부 데이터로만 남기는 편이 맞다고 정리했다.
+- 관리자 상단 요약 수치는 `활성/대기` 같은 상태 문구보다 실제 운영 판단에 바로 쓰이는 `공개/비공개 개수`가 더 중요하므로, 게임 관리와 티어표 관리 모두 공개 상태 집계를 먼저 보여주는 편이 낫다고 판단했다.
+- 공개/비공개 수치는 현재 페이지 일부를 세면 오해가 생기기 쉬우므로, 검색/게임 기준 전체 결과를 집계하는 별도 관리자 API로 계산하는 편이 맞다고 정리했다.
+
+## 2026-04-02 v1.3.68
+- 관리자 아이템 상세는 새 모달을 겹쳐 올리는 방식보다 기존 모달 안에서 `왼쪽 선택 대상 / 오른쪽 작업과 참조 정보` 역할만 분명히 나누는 편이 더 안정적이라고 정리했다.
+- 같은 이미지를 두 위치에서 반복 노출하면 “모달이 두 개 겹친 것처럼” 느껴질 수 있으므로, 선택 썸네일은 한 곳에만 두고 양쪽 패널은 각자 스크롤되는 구조로 정리하는 편이 맞다고 판단했다.
+
+## 2026-04-02 v1.3.67
+- 같은 이미지 공유 구조는 저장 효율에는 유리하지만 운영자가 관계를 읽기 어렵기 때문에, 카드 단계에서는 참조 수를 바로 보여주고 상세 모달에서는 같은 `src`를 가리키는 기록들을 함께 펼쳐 보여주는 편이 맞다고 정리했다.
+- 삭제 제한을 과하게 두기보다, 삭제 전 영향 범위를 문구와 개수로 먼저 보여주는 쪽이 운영 측면에서 더 현실적이라고 판단했다.
+
+## 2026-04-02 v1.3.66
+- 누락 참조 정리 도구는 커스텀 아이템 누락이 없어도 티어표/요청 썸네일 누락을 항상 따로 정리해야 하므로, 썸네일 정리를 커스텀 아이템 분기에 묶어두면 안 된다고 정리했다.
+
+## 2026-04-02 v1.3.65
+- 누락 파일 수치가 계속 쌓이는 상태에서는 원인 분석만으로는 운영 부담이 줄지 않으므로, 실제 파일이 없는 참조만 골라 썸네일/아바타/게임 아이템/커스텀 아이템 참조를 정리하는 관리자 액션을 제공하는 편이 맞다고 정리했다.
+
+## 2026-04-02 v1.3.64
+- 관리자 이미지 최적화 기록은 “재사용” 자체보다 이번 업로드와 재사용 자산의 관계가 더 중요하므로, 용량 숫자와 설명을 함께 보여주는 편이 운영자가 오해하지 않기 쉽다고 정리했다.
+- 관리자 아이템 라이브러리는 `사용자 업로드 미사용만` 같은 단일 체크박스보다 출처와 사용 상태를 함께 고를 수 있는 필터 모드가 더 실용적이므로, 사용자·템플릿·보관 자산·미사용 상태를 분리해 보는 구조가 맞다고 판단했다.
+- 게임 목록이 커질수록 선택 게임 설정을 사이드바 하단에 두는 구조는 스크롤 부담이 커지므로, 공개 상태와 썸네일 관리 액션은 선택된 게임 본문 상단 카드로 올리는 편이 더 안정적이라고 정리했다.
+
+## 2026-04-02 v1.3.63
+- 이미지 최적화 기록은 내부 라우트 카테고리를 그대로 보여주면 운영자가 실제 의미를 해석해야 하므로, 관리자 화면에는 기능 기준의 한국어 라벨과 재사용 여부를 함께 보여주는 편이 맞다고 정리했다.
+
+## 2026-04-02 v1.3.62
+- 커스텀 이미지가 많은 상태에서 저장할 때 사용자 체감 순서가 흔들리는 것은 업로드 성공보다 더 직접적인 UX 문제이므로, 내부 객체 키 순서가 아니라 현재 화면 배치 순서를 저장 기준으로 삼는 편이 맞다고 정리했다.
+- 템플릿 요청이 저장본에서만 가능하다면 삭제도 같은 기준을 따르는 편이 흐름상 자연스러우므로, 저장되지 않은 초안에는 삭제 액션을 노출하지 않는 쪽으로 판단했다.
+
+## 2026-04-02 v1.3.61
+- 업로드 드롭존은 기능만 같고 생김새가 다르면 운영자와 사용자 모두 맥락 전환 비용이 생기므로, 관리자와 에디터에서 같은 아이콘·점선 보더·버튼 문법으로 읽히게 맞추는 편이 낫다고 정리했다.
+- 썸네일 교체 영역은 일반 입력 필드처럼 보이면 클릭 가능성이 떨어지므로, 이미지 미리보기 위에서도 업로드 박스라는 인상이 유지되게 밝은 배경과 아이콘을 함께 쓰는 쪽으로 판단했다.
+
+## 2026-04-02 v1.3.60
+- 관리자 접근 차단은 유지하되, 이미 로그인된 관리자가 새로고침할 때 홈으로 튕기는 체감은 권한 제어보다 더 큰 문제이므로 인증 결과가 나올 때까지 같은 세션 확인 요청을 기다리는 편이 맞다고 정리했다.
+- 관리자 썸네일 드롭존과 에디터 보드 드롭존은 기능은 같아도 현재 상태가 문구와 형태로 바로 드러나야 하므로, 빈 상태와 교체 상태를 텍스트로 구분하고 점선 박스 형태를 더 적극적으로 드러내는 쪽으로 판단했다.
+
+## 2026-04-02 v1.3.59
+- 템플릿 요청 아이템 반영은 관리자 주의에만 맡기기보다, 서버에서 같은 게임 안의 동일 `src` 중복 생성을 막고 프런트에서도 이미 반영된 요청 아이템을 다시 드래프트에 올리지 않는 편이 운영 안정성에 더 낫다고 정리했다.
+- 신규 템플릿 요청은 “완전한 임시 게임” 구조로 바로 바꾸기보다, 우선 한 번 만든 게임을 요청과 연결해 다시 `확인하기`를 눌러도 같은 게임을 재사용하게 만드는 편이 리스크 대비 효과가 크다고 판단했다.
+- 신규 템플릿 요청 카드는 생성 여부가 관리자의 머릿속 상태가 아니라 UI 메타로 드러나야 하므로, `연결된 게임 있음/없음`과 `이미 반영 n개`를 카드와 작업 패널 양쪽에서 함께 보여주는 편이 맞다고 정리했다.
+
+## 2026-04-02 v1.3.55
+- 관리자 요청/업로드 배지는 문구만 다르면 빠르게 구분하기 어려우므로, 같은 `pill` 구조를 유지하되 색으로도 역할을 나누는 편이 운영 판단에 더 적합하다고 정리했다.
+- 신규 템플릿 요청으로 새 게임을 만들 때는 아이템만 가져오고 썸네일이 비어 있으면 식별성이 떨어지므로, 요청 썸네일도 기본값으로 함께 승계하는 편이 맞다고 판단했다.
+
+## 2026-04-02 v1.3.54
+- 관리자 요청 카드는 운영자가 이미 흐름을 알고 있다는 전제에서, 설명형 힌트보다 즉시 판단에 필요한 메타와 액션만 남기는 편이 더 적합하다고 정리했다.
+- 요청 종류 표시는 중복 텍스트보다 오른쪽 상단의 짧은 상태 배지 하나로 고정하고, 하단 액션 줄은 `보조 링크는 왼쪽 / 실제 처리 버튼은 오른쪽` 구조가 더 읽기 쉽다고 판단했다.
+
+## 2026-04-02 v1.3.53
+- 관리자 후속 리팩터링은 남은 큰 액션 묶음인 `상단 고정 게임 정렬`과 `커스텀 아이템 검수`부터 composable로 분리하는 편이 `AdminView.vue` 체감 복잡도를 가장 빨리 낮춘다고 판단했다.
+- 이 단계에서도 레이아웃이나 문구보다 로직 책임 경계를 먼저 옮기고, 실제 스타일 파일 분리는 그 다음 단계로 이어가는 편이 안전하다고 정리했다.
+
+## 2026-04-02 v1.3.52
+- 관리자 화면은 본문을 컴포넌트로 나눈 뒤에도 같은 시각 문법을 유지해야 하므로, `scoped`를 유지한 채 각 섹션에 스타일을 복붙하기보다 관리자 범위 공통 스타일로 다시 묶는 편이 더 안전하다고 정리했다.
+- `템플릿 요청 관리 / 전체 티어표 관리` 내부 모드 값은 URL과 버튼 상태가 어긋나지 않도록 `all` 하나로 통일하는 편이 맞다고 판단했다.
+- 릴리스 기록은 문서 버전만 올라가고 태그가 빠지면 추적이 끊기므로, 뒤늦게라도 누락 태그를 다시 맞춰 버전 흐름을 복구하는 편이 낫다고 정리했다.
+
+## 2026-04-02 v1.3.51
+- 관리자 리팩터링은 본문 분리 다음 단계에서 `회원 관리`처럼 모달과 부수 액션이 많은 영역을 composable로 떼어내는 편이 효과가 크다고 판단했다.
+- 이 단계에서는 UI 문구나 사용자가 이미 손본 CSS를 다시 건드리기보다, 현재 동작을 유지한 채 책임 경계만 옮기는 쪽이 더 안전하다고 정리했다.
+
+## 2026-04-02 v1.3.50
+- 템플릿 요청 카드는 게임 이름/ID만 남기기보다 대표 썸네일까지 유지하는 편이 운영자가 요청 대상을 훨씬 빨리 구분할 수 있다고 정리했다.
+- 템플릿 요청의 `확인하기`는 단순히 해당 게임을 선택하는 동작이 아니라, 게임 관리 화면에서 요청 아이템 후보가 실제 작업 상태로 복원되어야 한다고 판단했다.
+- 관리자 화면은 기능이 많아진 만큼 단일 `/admin` 상태보다 섹션별 경로를 갖는 편이 뒤로가기와 직접 진입 모두에서 더 안정적이라고 정리했다.
+- 관리자 URL은 보이기만 막는 수준이 아니라, 라우터 단계에서 비로그인/비관리자 접근 자체를 차단하는 편이 맞다고 정리했다.
+- 티어표 에디터의 커스텀 아이템 이름 편집 목록은 “사전순 재정렬”보다 입력 안정성이 더 중요하므로, 실시간 라벨 기준 정렬은 제거하는 쪽으로 결정했다.
+- 게임 기본 아이템은 최신 추가 항목이 먼저 보이도록 하되, 관리자가 필요하면 직접 드래그해 기준 순서를 고정할 수 있어야 한다고 판단했다.
+- 관리자 리팩터링은 한 번에 로직까지 갈아엎기보다, 먼저 각 관리 본문을 섹션 컴포넌트로 분리해 `AdminView.vue`의 책임을 줄이는 단계형 접근이 더 안전하다고 정리했다.
+- 본문 템플릿 분리 다음 단계에서는 `게임 관리`와 `템플릿 요청`처럼 상태가 무거운 영역부터 composable로 옮겨, 뷰 파일과 업무 로직 파일의 경계를 먼저 세우는 편이 맞다고 판단했다.
+
+## 2026-04-01 v1.3.49
+- 템플릿 요청은 임시 편집 상태에 기대기보다, 먼저 저장된 티어표를 기준으로 요청 스냅샷을 만드는 편이 훨씬 안정적이라고 정리했다. 그래서 요청 버튼은 저장본이 있을 때만 노출하고, 제목이 비어 있으면 사람이 쓰는 기본 문구 대신 고유한 랜덤 제목으로 먼저 저장본을 만든 뒤 요청을 이어가도록 했다.
+- 관리자 템플릿 요청 미리보기는 별도 요청 전용 보드 레이아웃을 유지하기보다, 일반 티어표 완성본과 같은 행·열·남은 아이템 문법을 그대로 재사용하는 편이 검수 체감이 가장 자연스럽다고 판단했다.
+## 2026-04-01 v1.3.48
+- 관리자 탭 데이터는 첫 진입 로딩만 믿기보다, 인증 완료와 탭 전환 시점에 필요한 목록을 다시 채워 넣는 편이 실제 운영 화면에서 더 안정적이라고 정리했다.
+- 템플릿 요청 미리보기는 일반 티어표 보기와 완전히 같은 구현을 억지로 분기하기보다, 같은 내부 프레임 문법과 정보 밀도를 먼저 맞춰 체감 차이를 줄이는 쪽이 현실적이라고 판단했다.
+## 2026-04-01 v1.3.47
+- 관리자 `사용자 템플릿 요청`도 결국 검수용 카드이므로, 요청 전용 카드 문법을 따로 두기보다 `전체 티어표 관리`와 같은 카드 구조를 재사용하는 편이 더 직관적이라고 정리했다.
+- 새 템플릿 생성 요청의 기본 게임 ID는 사람이 읽기 어려운 난수보다 요청 단위에서 유일한 임시값을 먼저 채워두고, 승인 전에 관리자가 수정하는 흐름이 더 현실적이라고 판단했다.
+
+## 2026-04-01 v1.3.46
+- 관리자 전체 티어표 카드에서는 좌측 영역 전체를 버튼처럼 만드는 것보다, 실제 썸네일 이미지만 미리보기 진입점으로 읽히게 두는 편이 카드 정보 구조가 덜 흔들린다고 정리했다.
+- 템플릿 요청 미리보기는 일반 티어표 보기와 다른 요약 레이아웃을 새로 두기보다, 같은 내부 프레임 문법 안에서 보드 자체를 먼저 보여주는 편이 사용자가 더 자연스럽게 이해한다고 판단했다.
+
+## 2026-04-01 v1.3.45
+- 템플릿 요청에서 `내 티어리스트에도 저장`은 별도 부가 기능이 아니라 실제 저장본 생성 경로를 타므로, 새 저장본 ID는 호출자에 기대지 말고 저장 함수 내부에서 항상 보장하는 편이 더 안전하다고 정리했다.
+- 개발 단계의 내부 조치 문구인 `백엔드 재시작` 같은 표현은 사용자 토스트에 직접 노출하지 않고, 운영형 재시도 안내로 낮추는 편이 맞다고 판단했다.
+
+## 2026-04-01 v1.3.44
+- 관리자 티어표 목록에서는 `보기` 버튼을 없애더라도 완성본 확인 기능 자체는 유지해야 하므로, 별도 액션 버튼보다 카드 썸네일 클릭을 미리보기 진입점으로 쓰는 편이 더 자연스럽다고 정리했다.
+- 템플릿 요청 미리보기도 별도 요약 카드보다 실제 보드 구조를 우선 보여주는 쪽이 관리자 검수 흐름에 더 맞으므로, 일반 티어표 미리보기와 가까운 방향으로 통일하기로 했다.
+
+## 2026-03-30 v1.2.25
+- 홈 게임 카드는 메인 썸네일까지 없애는 것보다, 큰 썸네일은 유지하고 ID 옆의 작은 보조 표시만 제거하는 편이 원래 의도와 맞다고 정리했다.
+- 좌우 하단 액션 여백은 `margin`으로 푸터 전체를 밀기보다, 푸터 내부 `padding-bottom`으로 확보해야 버튼 자체는 항상 보이고 여백만 남는다고 판단했다.
+
+## 2026-03-30 v1.2.24
+- `내 티어표` 헤더의 저장 개수 stat은 정보 가치보다 시각 잡음이 더 크다고 보고, 제목/설명 중심 헤더로 단순화하는 편이 낫다고 정리했다.
+- 게임 선택 카드는 티어표 카드와 달리 템플릿 선택 진입점이므로, 썸네일까지 반복하기보다 제목과 ID만 간결하게 보여주는 편이 더 적합하다고 판단했다.
+- 좌우 하단 액션 버튼은 푸터 블록 안에 있더라도 화면 바닥에 너무 붙으면 무거워 보이므로, 추가 하단 여백을 두어 숨을 쉬게 하는 편이 낫다고 정리했다.
+
 ## 2026-03-30 v1.2.23
 - 홈 화면의 게임 카드도 다른 목록 카드와 같은 밀도를 따라가야 하므로, 메인 라이브러리 역시 데스크톱 기본 4열을 기준으로 두는 편이 더 일관되다고 정리했다.
 - 게임 허브에서 새 티어표 만들기 버튼이 본문과 우측 패널에 동시에 있으면 역할이 겹치므로, 생성 CTA는 우측 사이드 하나만 남기는 편이 맞다고 판단했다.

docs/map.md

@@ -2,7 +2,7 @@
 
 ## `/`
 - 화면 파일: `frontend/src/views/HomeView.vue`
-- 역할: 데스크톱 기본 4열 게임 카드 라이브러리 대시보드, 게임 카드 클릭 이동, `직접 티어표 만들기` 진입
+- 역할: 데스크톱 기본 4열 게임 카드 라이브러리 대시보드, 상단 메인 썸네일과 `게임명 + 작은 ID` 메타를 가진 템플릿 선택 카드, 게임 카드 클릭 이동, `직접 티어표 만들기` 진입
 - 연동 API: `GET /api/games`
 
 ## `/games/:gameId`
@@ -12,8 +12,8 @@
 
 ## `/editor/:gameId/new`, `/editor/:gameId/:tierListId`
 - 화면 파일: `frontend/src/views/TierEditorView.vue`
-- 역할: 티어 그룹 편집, 티어 행 추가/삭제, 보드 옆 아이템 풀에서 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 공통 오른쪽 레일 안에 직접 배치되는 우측 편집 섹션에서 티어표 제목/설명/대표 썸네일/공개 여부/저장 제어와 커스텀 아이템 이름 정리, 즐겨찾기 토글, PNG 다운로드
-- 연동 API: `GET /api/games/:gameId`, `GET /api/tierlists/:id`, `POST /api/tierlists/:id/favorite`, `DELETE /api/tierlists/:id/favorite`, `POST /api/tierlists/thumbnail`, `POST /api/tierlists/custom-items`, `POST /api/tierlists`
+- 역할: 티어 그룹 편집, 티어 행 추가/삭제, 보드 옆 아이템 풀에서 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 공통 오른쪽 레일 안에 직접 배치되는 우측 편집 섹션에서 티어표 제목/설명/대표 썸네일/공개 여부/저장 제어와 커스텀 아이템 이름 정리, 즐겨찾기 토글, PNG 다운로드, 저장된 티어표 기준 템플릿 등록/업데이트 요청
+- 연동 API: `GET /api/games/:gameId`, `GET /api/tierlists/:id`, `POST /api/tierlists/:id/favorite`, `DELETE /api/tierlists/:id/favorite`, `POST /api/tierlists/thumbnail`, `POST /api/tierlists/custom-items`, `POST /api/tierlists`, `POST /api/tierlists/template-request`
 
 ## `/login`
 - 화면 파일: `frontend/src/views/LoginView.vue`
@@ -37,7 +37,7 @@
 
 ## `/admin`
 - 화면 파일: `frontend/src/views/AdminView.vue`
-- 역할: 공통 우측 패널 대신 전용 `320px` 운영 패널을 사용해 `게임 관리 / 아이템 관리 / 티어표 관리 / 회원 관리` 탭과 검색·필터·빠른 작업을 우측에 배치하고, 중앙에는 선택된 게임 상세, 커스텀 아이템 목록, 템플릿 요청/전체 티어표, 회원 카드 등 실제 관리 대상만 표시, 기본 아이템 다중 드래그 앤 드롭 업로드, 기본 아이템 이름 수정, 사용자 커스텀 아이템 검색/페이지네이션/사용 횟수 확인/미사용 이미지 개별·일괄 삭제, 사용자 커스텀 아이템의 기본 템플릿 승격, 전체 티어표 검색/페이지네이션/공개 여부 확인/완성본 이동, 티어표의 추가 커스텀 아이템을 모달 기반으로 기존 템플릿 또는 새 템플릿에 가져오기, freeform 티어표의 게임 템플릿화, 사용자 템플릿 등록/업데이트 요청 승인·반려, 회원 비밀번호 초기화 포함 회원 관리, 파일 입력 초기화, 아이템 삭제, 게임 삭제
+- 역할: 공통 우측 패널 대신 전용 `320px` 운영 패널을 사용해 `게임 관리 / 아이템 관리 / 티어표 관리 / 회원 관리` 탭과 검색·필터·빠른 작업을 우측에 배치하고, 중앙에는 선택된 게임 상세, 커스텀 아이템 목록, 템플릿 요청/전체 티어표, 회원 카드 등 실제 관리 대상만 표시, 기본 아이템 다중 드래그 앤 드롭 업로드, 기본 아이템 이름 수정, 사용자 커스텀 아이템 검색/페이지네이션/사용 횟수 확인/미사용 이미지 개별·일괄 삭제, 사용자 커스텀 아이템의 기본 템플릿 승격, 전체 티어표 검색/페이지네이션/공개 여부 확인/썸네일 클릭 기반 완성본 보기, 티어표의 추가 커스텀 아이템을 모달 기반으로 기존 템플릿 또는 새 템플릿에 가져오기, freeform 티어표의 게임 템플릿화, 사용자 템플릿 등록/업데이트 요청 승인·반려와 일반 완성본과 같은 보드 문법의 요청 미리보기, 회원 비밀번호 초기화 포함 회원 관리, 파일 입력 초기화, 아이템 삭제, 게임 삭제
 - 연동 API: `POST /api/admin/games`, `POST /api/admin/games/:gameId/thumbnail`, `POST /api/admin/games/:gameId/images`, `PATCH /api/admin/games/:gameId/items/:itemId`, `GET /api/admin/custom-items`, `POST /api/admin/custom-items/:itemId/promote`, `DELETE /api/admin/custom-items/:itemId`, `DELETE /api/admin/custom-items`, `GET /api/admin/tierlists`, `GET /api/admin/template-requests`, `POST /api/admin/template-requests/:requestId/approve`, `POST /api/admin/template-requests/:requestId/reject`, `POST /api/admin/tierlists/:tierListId/promote-items`, `POST /api/admin/tierlists/:tierListId/create-game-template`, `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`
 
 ## `/profile`
@@ -48,7 +48,7 @@
 ## 공통 레이아웃
 - 앱 셸 파일: `frontend/src/App.vue`
 - 역할: 좌측 내비게이션, 중앙 워크스페이스, 우측 컨텍스트 패널로 구성된 공통 앱 셸 렌더링, 로그인 상태 반영, 최근 즐겨찾기 바로가기와 전역 검색 입력, 관리자 메뉴 노출 제어, 실제 SVG 에셋과 선형 SVG 아이콘이 혼합된 레일 UI, 전역 우측 상단 토스트 렌더링
-- 세부: 좌측 패널은 `248px` 기준 폭을 사용하되 축소 시 아이콘 중심의 좁은 레일로 전환하고, 우측 패널은 `320px` 기준 폭을 사용한다. 세 컬럼 모두 상단에 높이 `56px`의 헤더 블록을 유지한다. 중앙 헤더에는 고정 브랜드 `Tier Maker by zenn`이 표시되고, 우측 패널 토글은 닫혀 있을 때 중앙 헤더, 열려 있을 때 우측 헤더에 아이콘만 표시된다. 좌우 레일의 주요 액션은 각각 하단 `56px` 푸터 영역에 배치된다.
+- 세부: 좌측 패널은 `248px` 기준 폭을 사용하되 축소 시 아이콘 중심의 좁은 레일로 전환하고, 우측 패널은 `320px` 기준 폭을 사용한다. 세 컬럼 모두 상단에 높이 `56px`의 헤더 블록을 유지한다. 중앙 헤더에는 고정 브랜드 `Tier Maker`와 서비스 설명이 표시되고, 우측 패널 토글은 닫혀 있을 때 중앙 헤더, 열려 있을 때 우측 헤더에 아이콘만 표시된다. 좌우 레일의 주요 액션은 각각 하단 `56px` 푸터 안에서 항상 보이도록 유지하면서 아래쪽 패딩으로 여백을 확보한다.
 
 ## 백엔드 진입점
 - 서버 엔트리: `backend/index.js`

docs/spec.md

@@ -35,6 +35,7 @@
   - 현재 라우트의 핵심 콘텐츠를 렌더링하는 영역이며, 홈/목록 계열 화면은 카드형 대시보드 레이아웃을 우선 적용한다.
   - 공통 `workspaceBody`는 별도 외곽 카드 테두리 없이 셸 여백만 제공하고, 실제 카드/패널 레이어는 각 화면 내부에서만 구성한다.
   - 홈, 게임 허브, 내 티어표, 즐겨찾기, 검색 결과 화면은 같은 카드 문법(상단 16:9 썸네일, `제목+좋아요` 1행, `작성자+최종 수정일` 1행)을 공유하며, 데스크톱 기준 기본 4열 카드 그리드를 사용한다.
+  - 단, 홈 게임 선택 카드는 템플릿 선택용이므로 상단 메인 썸네일은 유지하되, 하단 메타는 `게임명 + 작은 ID`만 간결하게 표시한다.
   - 목록 계열 화면의 상단 도구 영역은 통계 카드와 액션 버튼을 공통 높이/반경으로 맞춰, 같은 라이브러리 대시보드로 읽히도록 정리한다.
 - 우측 패널
   - 현재 화면 문맥에 맞는 설명, 빠른 액션, 계정 상태 같은 보조 정보를 배치한다.
@@ -42,17 +43,18 @@
   - 공통 토글 버튼은 패널이 닫혀 있을 때 중앙 헤더, 열려 있을 때 우측 헤더에 각각 아이콘만 표시하는 방식으로 동작한다.
   - 오른쪽 패널 토글은 열기/닫기 모두 `dock_to_left`, 왼쪽 패널 토글은 `dock_to_right` 아이콘으로 통일한다.
   - 좌우 레일의 주요 CTA는 스크롤되는 본문과 분리된 하단 `56px` 액션 영역에 배치한다.
+  - 하단 액션은 화면 바닥에 바로 붙지 않도록 푸터 내부에 추가 하단 여백을 둔다.
   - 홈 화면 기준 우측 패널은 임시 정보 카드 여러 개보다 핵심 CTA 하나만 남겨, 시안처럼 단순한 보조 레일 역할을 우선 유지한다.
 - 티어표 편집 화면
   - 공통 우측 패널 대신 전용 로컬 편집 패널을 사용한다.
   - 공통 `workspaceBody` 카드 컨테이너를 벗기고, 중앙 보드 영역은 메인 컬럼에, 우측 `320px` 편집 패널은 공통 셸의 세 번째 컬럼 aside에 배치한다.
   - 공통 상단 토글 버튼은 Teleport로 이동한 로컬 편집 패널의 접힘/펼침 상태와도 연결되어, 우측 패널을 숨기면 중앙 보드 영역이 확장된다.
-  - 제목, 설명, 대표 썸네일, 공개 여부, 저장/삭제/요청 액션을 우측 로컬 패널에 배치한다.
+  - 제목, 설명, 대표 썸네일, 공개 여부, 저장/삭제/요청 액션을 우측 로컬 패널에 배치한다. 템플릿 등록/업데이트 요청 버튼은 저장된 티어표가 있을 때만 노출하며, 제목이 비어 있는 상태에서 저장하면 랜덤 고유 제목을 먼저 부여해 저장본을 만든다.
   - 보드 바로 옆에는 드래그용 아이템 풀을 별도 패널로 두고, 커스텀 아이템 이름 정리 목록은 우측 편집 패널 내부에서 관리한다.
 - 관리자 화면
   - 공통 우측 패널 대신 전용 로컬 운영 패널을 사용한다.
   - 공통 `workspaceBody` 카드 컨테이너를 벗기고, 중앙 관리 목록은 메인 컬럼에, 우측 운영 패널은 공통 셸의 세 번째 컬럼 aside에 배치한다.
-  - 우측 로컬 패널에는 `게임/아이템/티어표/회원 관리` 탭, 검색, 필터, 새로고침, 빠른 작업 제어를 배치하고, 중앙 영역에는 실제 관리 대상 목록과 상세만 렌더링한다.
+  - 우측 로컬 패널에는 `게임/아이템/티어표/회원 관리` 탭, 검색, 필터, 새로고침, 빠른 작업 제어를 배치하고, 중앙 영역에는 실제 관리 대상 목록과 상세만 렌더링한다. 템플릿 요청 카드는 전체 티어표 카드와 같은 썸네일 좌측/정보 우측 구조를 따르며, 요청 미리보기는 일반 티어표 완성본과 같은 행·열 보드 문법으로 검수한다.
   - 상단 헤더에는 현재 탭 기준 요약 통계 카드를 배치해 운영 상태를 먼저 읽고, 각 관리 카드는 공통 대시보드 카드 문법(두꺼운 반경, 얕은 레이어 배경, 강조된 액션 버튼)을 공유한다.
 
 ## DB 스키마
@@ -194,7 +196,7 @@
 - 티어표에 썸네일을 직접 지정하지 않으면 저장 시 대표 아이템 이미지 하나를 기본 썸네일로 자동 선택한다.
 - 편집 화면 상단 헤더는 좌측 제목/설명, 우측 썸네일 카드 구조를 사용하며 모바일에서는 한 열로 접힌다.
 - 티어표 편집 화면의 우측 패널은 공통 `rightRail`의 `localRightRailRoot`에 직접 section들을 쌓는 구조이며, 별도 외곽 래퍼 카드 없이 공통 오른쪽 컬럼 문법을 그대로 따른다.
-- 공통 앱 셸은 좌측/중앙/우측 컬럼마다 높이 `56px`의 상단 헤더 블록을 유지하며, 중앙 헤더에는 고정 사이트 타이틀 `Tier Maker by zenn`을 표시한다.
+- 공통 앱 셸은 좌측/중앙/우측 컬럼마다 높이 `56px`의 상단 헤더 블록을 유지하며, 중앙 헤더에는 사이트 타이틀 `Tier Maker`와 현재 서비스 설명을 표시한다.
 - 티어표 편집기의 아이콘 기본 크기는 `80px`이며, 사용자가 `48 / 60 / 80 / 100 / 120` 단계로 즉시 조절할 수 있다.
 - 공개 티어표 목록과 `내 티어표` 목록은 제목 옆에 작성자 아바타와 표시명을 함께 보여준다.
 - 작성자 아바타 이미지가 없을 경우 목록 썸네일 fallback은 닉네임이 아니라 계정명 기준 첫 글자를 사용한다.

docs/todo.md

@@ -1,49 +1,88 @@
 # 할 일 및 이슈
 
-## 즉시 확인 필요
-- 피그마 기반 리디자인은 현재 공통 셸과 카드 목록 화면, 포커스 화면 안정화까지만 반영된 상태이므로, 에디터/관리자 우측 옵션 패널을 시안 구조에 맞게 실제 기능 패널로 이관하는 작업이 남아 있다.
-- 홈/게임 허브/내 티어표/즐겨찾기 카드 문법은 어느 정도 통일됐지만, 아직 실제 SVG 아이콘, 미세 간격, hover/selection 상태 같은 디테일은 더 다듬을 필요가 있다.
-- 목록 화면 상단 도구 막대는 공통 카드 문법으로 거의 맞췄지만, 실제 피그마처럼 필터 토글/정렬 상태를 시각적으로 더 강하게 드러내는 디테일은 남아 있다.
-- 현재 공통 셸에는 임시 선형 SVG 아이콘을 사용하므로, 최종 머티리얼 아이콘 에셋을 받으면 교체하고 아이콘 크기/정렬을 다시 미세 조정할 필요가 있다.
-- 공통 셸과 에디터에는 일부 실제 SVG 아이콘을 연결했지만, 아직 즐겨찾기/설정/관리자 등 나머지 내비 아이콘은 임시 선형 SVG이므로 추가 에셋 교체가 남아 있다.
-- 공통 우측 패널의 토글과 독립 컬럼 구조는 반영되었지만, 현재는 안내 카드 중심이므로 실제 화면별 기능 컨트롤을 이 패널로 옮기는 작업이 남아 있다.
-- 티어표 편집 화면과 관리자 화면 모두 로컬 우측 패널 구조로 옮겼지만, 아직 세부 카드 밀도와 아이콘/모션 디테일은 피그마 시안 수준으로 더 다듬을 필요가 있다.
-- 에디터/관리자 로컬 우측 패널은 셸 카드에서 분리됐지만, 아직 실제 피그마처럼 패널 토글 전환 모션과 상태 강조가 더 필요하다.
-- 에디터 로컬 우측 패널은 공통 토글과 연결됐지만, 아직 완전한 피그마 수준의 패널 애니메이션과 내부 카드 재배치는 더 다듬을 필요가 있다.
-- 에디터 우측 패널은 셸의 세 번째 컬럼으로 옮겼지만, 내부 카드 간격과 섹션 구분선은 아직 첨부 시안처럼 더 촘촘하게 정리할 필요가 있다.
-- 에디터 우측 패널 외곽 래퍼는 제거했으므로, 다음 단계는 공통 오른쪽 컬럼 안에서 입력/버튼/구분선 간격을 시안처럼 더 정교하게 다듬는 작업이다.
-- 공통 56px 셸 헤더는 반영했으므로, 다음 단계는 좌/중앙/우 헤더 안에 실제 아이콘/상태 요소를 시안 순서에 맞게 하나씩 채워 넣는 작업이다.
-- 좌측 레일은 최근 즐겨찾기와 전역 검색까지 붙었으므로, 다음 단계는 검색 자동완성이나 즐겨찾기 썸네일 품질 같은 디테일을 더 다듬는 작업이다.
-- 좌측 레일 축소형은 반영했으므로, 다음 단계는 축소 상태에서 관리자/로그인 진입점과 hover 툴팁 같은 보조 UX를 더 다듬는 작업이다.
-- 좌우 하단 액션 영역은 분리했으므로, 다음 단계는 축소된 왼쪽 레일에서도 관리자/로그인 버튼을 아이콘형으로 어떻게 유지할지 검토할 수 있다.
-- 카드 목록은 4열 기준과 메타 줄 구성까지 통일했으므로, 다음 단계는 필터 상태 배지나 hover·selection 강조 같은 상호작용 디테일을 더 다듬는 작업이다.
-- 검색 결과 화면은 좌측 전역 검색 입력만 쓰도록 정리됐으므로, 다음 단계는 결과 필터/정렬 여부를 검토하는 식으로 확장하면 된다.
-- 공통 3단 셸 구조는 고정했지만, 관리자/에디터 우측 패널 내부에 아직 바디에 남아 있는 제어 요소를 더 옮겨야 한다.
-- 홈 화면 우측 사이드는 CTA 하나만 남긴 상태이므로, 이후 필요할 때도 임시 정보 카드 다수를 다시 넣기보다 실제 필요한 기능만 선별해 추가해야 한다.
-- 관리자 화면은 헤더 요약 통계와 카드 계층까지 정리됐지만, 아직 표준 SVG 아이콘 교체와 더 세밀한 상태 색상/선택 상태 표현은 남아 있다.
-- 머티리얼 아이콘 SVG는 아직 임시 문자/배지 스타일로 대체된 부분이 있으므로, 최종 아이콘 에셋을 받아 반영하는 작업이 필요하다.
-- 미사용 커스텀 이미지 일괄 삭제는 현재 "참조가 없는 항목" 기준이며, 보관 기간 정책 같은 운영 규칙은 아직 없다.
-- 업로드 이미지는 현재 원본 파일을 그대로 저장하므로, 운영 부담이 커지면 서버 저장 전 리사이즈/압축(예: 긴 변 제한, WebP 변환) 도입이 필요하다.
-- 관리자 기본 아이템 다중 업로드는 현재 파일명 기반 자동 라벨만 지원하므로, 필요하면 업로드 후 일괄 라벨 수정/정렬 UX를 추가 검토한다.
-- 사용자 커스텀 아이템 승격은 현재 수동 복제 방식이므로, 필요하면 중복 감지나 “비슷한 항목 추천” 같은 보조 UX를 검토한다.
-- 템플릿 등록/업데이트 요청은 현재 승인/반려만 지원하므로, 필요하면 관리자 코멘트나 사용자용 요청 상태 이력 화면을 추가 검토한다.
-- 관리자 티어표 관리의 템플릿 생성은 현재 `freeform`만 직접 지원하므로, 필요하면 일반 게임 티어표의 전체 아이템을 복제한 파생 템플릿 생성 UX도 검토한다.
-- 관리자 티어표 관리의 추가 아이템 승격은 현재 커스텀(origin=`custom`) 아이템 기준이므로, 필요하면 “기존 게임 아이템과 비교한 차집합” 기준으로 더 정교하게 확장할 수 있다.
-- 즐겨찾기는 현재 `내 즐겨찾기` 목록과 정렬까지 지원하므로, 필요하면 폴더 분류나 메모 같은 개인 정리 기능을 추가 검토한다.
-- 전역 토스트는 중복 합치기와 페이드아웃까지 지원하므로, 필요하면 액션 링크나 수동 고정(pin) 같은 상호작용 확장을 검토한다.
-- 공개 티어표 검색은 현재 게임별 허브 안에서만 제공하므로, 필요하면 홈 전역 통합 검색도 검토한다.
-- 즐겨찾기 토글은 현재 상세 화면 중심이므로, 필요하면 카드 목록에서도 안전한 보조 인터랙션(예: 길게 누르기, 별도 메뉴)을 검토한다.
-
-## 배포 전 작업
-- 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 사이의 버전 차이가 크지 않도록 유지한다.
+## 단기 확인
+- `/api/topics`, `/api/admin/templates` alias를 연 뒤 프런트 호출도 새 경로로 옮겼으므로, 실제 브라우저에서 주제 목록/즐겨찾기/주제 상세/관리자 템플릿 관리가 모두 같은 세션으로 자연스럽게 동작하는지 한 번 더 QA한다.
+- 다음 마지막 단계에서는 DB 스키마와 백엔드 함수/변수명까지 실제로 옮길지, 아니면 현재 alias 구조를 안정판으로 남길지 최종 결정한다.
+- 프런트 API 호출부는 `topic/template` 의미 이름으로 옮겼으므로, 다음 단계에서는 `api.js` 안의 레거시 alias를 얼마나 더 유지할지와 백엔드 API 경로를 실제로 바꿀지 범위를 정한다.
+- 관리자 템플릿/주제 화면과 홈·에디터·즐겨찾기에서 새 API 이름층으로 바뀐 뒤에도 저장, 즐겨찾기, 템플릿 생성, 아이템 정렬 흐름이 자연스러운지 한 번 더 QA한다.
+- `topicHub / topicId`를 기본 라우트 기준으로 세웠으므로, 기존 `/games/...` 북마크와 새 `/topics/...` 주소 양쪽에서 주제 상세와 에디터 진입이 모두 자연스럽게 이어지는지 한 번 더 QA한다.
+- 다음 단계에서는 `api.getGame`, `listGames`, `favoriteGame`처럼 남아 있는 프런트 API 이름을 어느 수준까지 `topic/template` 의미로 감쌀지 정리한다.
+- 경로 헬퍼를 사용자 주요 화면에 연결했으므로, 로그인 리다이렉트·공유 프리뷰·복사본 이동·주제 복귀 흐름이 실제 브라우저에서 모두 같은 주소 체계로 자연스럽게 이어지는지 한 번 더 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로 남겼으므로, 다음 단계에서는 에디터/검색/공유 흐름에서 어떤 링크를 새 경로로 더 전환할지 범위를 정한다.
+- 내부 리네이밍 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한다.
 
 ## 중기 개선
-- 게임/이미지/티어표 삭제 후 복구 또는 수정 이력 관리 기능을 추가한다.
-- 자동 테스트와 최소한의 배포 체크리스트를 만든다.
+- 신규 템플릿 요청은 현재 `첫 생성 1회 후 요청과 게임을 연결해 재사용` 단계까지 정리했으므로, 다음 단계에서는 정말로 게임을 DB에 만들기 전까지 임시 작업 상태로 유지할지 여부를 운영 흐름 기준으로 결정한다.
+- 관리자 템플릿 요청은 동일 `src` 중복 생성 방지와 `연결된 게임/이미 반영 n개` 표시까지 붙였으므로, 이후에는 요청별 반영 이력(예: 어떤 아이템을 언제 반영했는지)까지 별도로 남길지 검토한다.
+- 관리자 URL 분리는 시작했으므로, 다음 단계에서는 `AdminView.vue` 단일 대형 파일을 섹션별 뷰/컴포저블로 쪼개고 직접 진입 시 선택 게임/요청 작업 상태 복원 범위도 함께 정리한다.
+- 관리자 본문 컴포넌트 분리와 `게임/템플릿 요청/회원 관리/아이템 관리/목록 관리` composable 분리는 시작했으므로, 다음 단계에서는 공통 모달 상태를 어느 계층에서 소유할지 정리하고 남은 관리자 유틸 함수를 더 줄인다.
+- 관리자 화면은 섹션 경로 분리까지 끝났으므로, 다음 단계에서는 `AdminView.vue`를 실제 레이아웃 뷰와 섹션별 라우트 컴포넌트로 더 쪼갤지 결정한다.
+- 관리자 공통 스타일은 `adminUiScope` 기준으로 다시 묶었으므로, 다음 단계에서는 각 섹션을 별도 파일로 완전히 분리할 때 스타일도 `admin.css` 또는 섹션별 스타일로 옮길지 결정한다.
+- 관리자 요청 카드 밀도는 줄였으므로, 다음 단계에서는 전체 티어표 카드와 요청 카드의 상단/하단 액션 정렬을 한 번 더 통일할지 비교 QA한다.
+- 신규 템플릿 요청 썸네일 기본 승계는 붙였으므로, 다음 단계에서는 요청 아이템 반영 후 `처리 완료`까지의 관리자 흐름을 실제 데이터로 한 번 더 QA한다.
+- 관리자 게임 아이템 순서 저장은 추가됐으므로, 다음 단계에서는 새 아이템 추가 직후 `자동 맨 앞 배치`와 `관리자 수동 고정 순서`의 우선순위를 실제 운영 흐름 기준으로 한 번 더 QA한다.
+- 관리자 템플릿 요청 미리보기는 실제 완성본 iframe 방식과의 체감 차이를 마지막으로 한 번 더 QA한다.
+- 라이트모드/다크모드 2차 보정까지 반영했으므로, 남은 작업은 전체 화면을 실제 사용 흐름으로 돌려 보며 대비·명도·아이콘 가독성을 미세하게 QA하는 최종 테마 점검 단계로 가져간다.
 - 관리자용 티어표 승인/숨김 처리, 아이템 정렬 UI를 추가한다.
-- 회원 검색/필터, 일괄 권한 변경 같은 관리 보조 기능을 추가한다.
+- 회원 일괄 작업(다중 선택, 일괄 비밀번호 초기화, 활동 저조 계정 정리) 같은 관리 보조 기능을 추가한다.
 - 티어 행 프리셋 저장, 색상 관리, 행 복제 같은 고급 편집 기능을 추가한다.
+- 로그인/회원가입/관리자 비밀번호 초기화에 요청 횟수 제한을 추가한다.
+- 업로드 파일은 MIME 타입뿐 아니라 파일 시그니처 기반 검증까지 확장한다.
+- production에서 SESSION_SECRET 누락 시 서버가 부팅되지 않도록 강제한다.
+- helmet 기반 보안 헤더와 업로드 정적 응답 헤더를 정리한다.
+- 책 아이콘 기반 사용법 모달은 제작 흐름뿐 아니라 복사, 템플릿 업데이트 요청, 새 템플릿 요청까지 확장했으므로, 실제 16:9 스크린샷 자산과 단계별 문구를 운영 톤에 맞게 채운다.
+- 관리자 아이템 라이브러리에서 동일 이미지(src)를 여러 템플릿이 공유하는 경우, 필요하면 묶어서 보거나 대표 카드로 합쳐 보는 후속 정리 옵션을 검토한다.
+- 라이트모드 최종 QA 시 홈/설정/관리자/에디터를 실제 사용 흐름으로 돌리며, 남아 있는 하드코딩 텍스트 색과 플레이스홀더 배경을 한 번 더 점검한다.
+- 관리자 아이템 라이브러리는 보관 자산까지 노출되므로, 이후에는 `활성 템플릿 / 보관 자산` 분리 필터나 그룹 보기까지 검토한다.
+- 가이드 모달과 관리자 아이템 모달은 현재 같은 톤의 큰 셸을 쓰므로, 이후 공통 모달 레이아웃 컴포넌트로 분리할지 검토한다.
+- 관리자 아이템 라이브러리 이름 변경은 템플릿·사용자 업로드·보관 자산까지 모두 가능하므로, 이후에는 일괄 이름 정리나 중복 이름 감지 보조 기능까지 검토한다.
+- 관리자 템플릿 요청 카드와 전체 티어표 카드가 같은 문법으로 맞춰졌으므로, 이후에는 라이트모드까지 포함해 두 카드의 썸네일 높이·입력창 밀도·아이템 그리드를 한 번 더 비교 QA한다.
+- 템플릿 요청 저장 흐름은 저장된 티어표 기준으로 바뀌었으므로, 이후 실제 데이터로 빈 제목 저장 시 자동 생성 제목·요청 버튼 노출 시점·관리자 요청 미리보기 밀도를 한 번 더 비교 QA한다.

docs/update.md

@@ -1,5 +1,667 @@
 # 업데이트 로그
 
+## 2026-04-02 v1.4.12
+- 백엔드에 `/api/topics`와 `/api/admin/templates` alias 경로를 추가하고, 주제/템플릿 응답도 `topic/topics`, `template/templates` 키를 함께 내려주도록 정리했다.
+- 프런트의 새 의미 이름은 이제 실제로도 `/api/topics`, `/api/admin/templates`를 타도록 연결해, 경로 이름과 호출 이름이 다시 어긋나지 않게 맞췄다.
+
+## 2026-04-02 v1.4.11
+- 프런트 API 이름층을 한 단계 더 정리해 `listTopics / getTopic / favoriteTopic`, `updateAdminTemplate*`, `searchPublicTierListsByTopic` 같은 의미 기반 이름을 추가하고 실제 호출부도 이 기준으로 옮겼다.
+- 백엔드 경로와 응답 구조는 그대로 유지한 채 프런트에서 읽는 이름만 먼저 바꿔, 다음 단계의 API/모델 리네이밍 부담을 더 줄였다.
+
+## 2026-04-02 v1.4.10
+- 주제 상세 라우트 이름을 `topicHub`로, 기본 경로 파라미터를 `topicId`로 바꾸고 기존 `gameId` 주소는 alias로 유지했다.
+- 앱 셸, 주제 상세, 티어표 편집기는 이제 내부에서 `topicId`를 우선 읽고, 레거시 주소로 들어온 경우에만 `gameId` fallback을 쓰도록 정리했다.
+
+## 2026-04-02 v1.4.9
+- `frontend/src/lib/paths.js`를 추가해 주제 진입, 에디터 이동, 로그인 리다이렉트, 공유 프리뷰 주소 같은 사용자 표면 경로를 공용 함수로 모았다.
+- 홈, 주제 상세, 나의 티어표, 즐겨찾기, 검색 결과, 로그인, 설정, 관리자 미리보기, 티어표 편집기까지 이 경로 헬퍼를 쓰도록 바꿔 이후 `topics` 전환을 더 안전하게 이어갈 수 있는 기반을 만들었다.
+
+## 2026-04-02 v1.4.8
+- 주제 상세 컬렉션 화면은 제목을 `topicId` fallback으로 먼저 노출하지 않도록 바꾸고, 주제 전환 시에는 로딩 문구를 거쳐 실제 이름으로 자연스럽게 바뀌게 정리했다.
+- 검색 결과 화면도 공통 `pageHead` 문법으로 맞춰 주요 목록 화면들의 상단 리듬을 한 번 더 통일했다.
+
+## 2026-04-02 v1.4.7
+- 주제 선택 뒤에 들어가는 `Collection` 화면을 공통 `pageHead` 레이아웃으로 다시 맞추고, 검색 입력을 즐겨찾기 화면처럼 상단 우측 툴바로 정리했다.
+- `공개 티어표` 보조 설명 줄은 제거해 헤더 밀도를 줄였고, 사용자 진입 경로는 `/topics/:gameId`를 기본으로 전환하면서 기존 `/games/:gameId`는 alias로 유지했다.
+
+## 2026-04-02 v1.4.6
+- 관리자 내부 리네이밍 2단계로 `AdminView`와 관련 composable/component의 핵심 상태명을 `selectedTemplate / templates / loadTemplate / refreshTemplates / createTemplate` 기준으로 정리했다.
+- 요청 검토, 템플릿 생성 모달, 아이템 추가/정렬, 템플릿 선택 모달 흐름도 같은 기준으로 맞춰, 관리자 화면을 읽을 때 내부 이름과 사용자 노출 용어가 덜 어긋나게 정리했다.
+
+## 2026-04-02 v1.4.5
+- 내부 리네이밍 1단계를 시작해 홈, 주제 화면, 티어표 편집기, 앱 셸에서 `games / gameId / gameName` 중심의 로컬 상태명을 `templates / topicId / templateId / templateName` 계열로 먼저 정리했다.
+- 경로와 API는 그대로 둔 채 프런트 내부에서 자주 읽는 상태명부터 바꿔, 이후 `/games` 라우트와 관리자 상태를 손볼 때 의미 충돌이 덜 나도록 기반을 만들었다.
+
+## 2026-04-02 v1.4.4
+- 홈 화면 `Topic Library`와 일부 영어 헤더를 `주제 선택 / 티어표 / 관리자 작업실 / 티어표 만들기 / 작업 공간`으로 정리해, 화면 타이틀과 상단 레이블까지 한국어 기준으로 거의 통일했다.
+
+## 2026-04-02 v1.4.3
+- 관리자 토스트, 확인창, 요청 처리 안내처럼 실제로 자주 보이는 운영 문구까지 `주제 / 템플릿` 기준으로 한 번 더 정리해, 화면 제목뿐 아니라 작업 피드백도 더 일관되게 맞췄다.
+
+## 2026-04-02 v1.4.2
+- 관리자 화면과 보조 모달에 남아 있던 사용자 노출 `게임` 문구를 추가로 걷어내고, `템플릿 / 주제` 기준 표현으로 더 통일했다.
+
+## 2026-04-02 v1.4.1
+- 왼쪽 사이드 메뉴를 `주제 선택 / 나의 티어표 / 즐겨찾기 / 설정` 한글 문구로 통일하고, 해당 화면 진입 시 헤더 타이틀도 같은 이름 기준으로 맞췄다.
+
+## 2026-04-02 v1.4.0
+- 사용자 노출 용어 1차 정리를 시작해 홈/좌측 레일/가이드/주제 화면에서는 `게임` 대신 `주제`, 관리자 핵심 화면에서는 `게임 관리` 대신 `템플릿 관리` 중심 표현으로 바꿨다.
+- 내부 데이터 모델과 API의 `gameId`, `/games` 구조는 아직 유지하고, 이번 단계는 화면 문구와 안내 텍스트를 먼저 정리하는 안전한 1차 리네이밍 범위로 제한했다.
+
+## 2026-04-02 v1.3.93
+- 게임 목록, 티어표 리스트, 사용자 아바타 버튼 등 목록성 썸네일 이미지에 `draggable=\"false\"`를 적용해 브라우저 기본 이미지 드래그 프리뷰가 뜨지 않도록 정리함.
+
+## 2026-04-02 v1.3.92
+- 왼쪽 네비게이션의 활성 메뉴 배경은 개별 항목에 즉시 붙는 방식에서, 공용 인디케이터가 현재 메뉴 위치로 미끄러져 이동하는 토글형 인터랙션으로 정리함.
+
+## 2026-04-02 v1.3.91
+- 로그인 화면 상단의 `로그인 / 회원가입` 전환은 선택된 버튼 배경이 즉시 바뀌던 방식에서, 뒤쪽 하이라이트가 토글처럼 좌우로 미끄러져 이동하는 인터랙션으로 정리함.
+
+## 2026-04-02 v1.3.90
+- 관리자 화면 CSS 경고를 줄이기 위해 `display: block` 요소에 의미 없던 `vertical-align`을 제거하고, `line-clamp` 표준 속성을 함께 선언해 VS Code 진단을 정리함.
+
+## 2026-04-02 v1.3.89
+- 현재 코드에서 참조되지 않던 `frontend/public/icons.svg`, `frontend/src/assets/hero.png`, `frontend/src/assets/vite.svg`, `frontend/src/assets/vue.svg`를 삭제해 템플릿 잔재 자산을 정리함.
+- 홈페이지 공유용 `og-card.svg`, `og-card.png`는 이번 워크트리에서 직접 수정된 최신 이미지 상태를 그대로 반영해 함께 정리함.
+
+## 2026-04-02 v1.3.88
+- 중앙 워크스페이스 헤더의 `by zenn` 링크는 공통 카피라이트 footer가 이미 역할을 대신하므로 제거하고, 기본 서브타이틀도 서비스 설명 문구로 정리함.
+- 홈페이지 공유용 메타를 정리해 `title`, `description`, `canonical`, Open Graph, Twitter 카드 정보를 `tmaker.sori.studio` 기준으로 연결함.
+- 외부 공유용 `og-card.svg`와 실제 썸네일 `og-card.png`, 브라우저/모바일용 `favicon-32x32.png`, `apple-touch-icon.png`를 추가해 링크 공유와 파비콘 노출을 함께 보강함.
+
+## 2026-04-02 v1.3.86
+- 티어표 편집의 `아이콘 크기`는 이제 임시 화면 상태가 아니라 저장 데이터에 함께 포함되며, 저장 후 다시 열기와 프리뷰 화면에서도 같은 크기로 복원되도록 정리함.
+- 이를 위해 티어표 저장 payload, 서버 검증, DB 저장/조회에 `iconSize`를 추가하고 기존 데이터는 기본값 `80`으로 안전하게 보정되게 맞춤.
+- 이후 공유 프리뷰 화면이 여전히 80으로 고정되던 문제는 `previewOnly` 레이아웃에서 `--thumb-size` 스타일 바인딩이 빠져 있던 탓이었고, 프리뷰 루트에도 같은 값을 전달해 저장된 크기가 그대로 반영되게 보정함.
+
+## 2026-04-02 v1.3.83
+- 티어표 편집/프리뷰 화면에서 열을 여러 개 쓰는 경우, 모바일처럼 좁은 화면에서는 기존 상단 열 헤더만으로 각 칸의 의미를 읽기 어려웠으므로 각 칸 상단에 작은 열 이름 배지를 추가함.
+- 이 배지는 모바일 구간에서만 보이고 데스크톱 레이아웃은 그대로 유지되므로, 작은 화면에서는 `메인 / 밸런스 / 서포트` 같은 열 맥락을 스크롤 중에도 잃지 않게 정리함.
+- 이후 배지가 칸 기준이 아니라 화면 한쪽에 겹치던 문제를 바로잡기 위해 각 칸을 기준점으로 다시 잡았고, 배지가 보이는 구간에서는 기존 상단 열 제목을 함께 숨겨 중복 표기를 제거함.
+- 추가로 같은 미디어 구간 안에서 행/열 모바일 레이아웃을 다시 `140px/150px`로 덮어쓰던 중복 규칙을 제거해, 모바일에서는 행 라벨이 화면 절반을 차지하지 않고 실제로 한 줄 전체 폭 기준 레이아웃으로 정리되게 맞춤.
+
+## 2026-04-02 v1.3.82
+- 프리뷰 전용 완성본 화면에도 이미지 다운로드 결과와 같은 하단 메타를 붙여, 작성자 이름과 마지막 저장 시각을 바로 확인할 수 있게 정리함.
+- 관리자 `티어표 관리 > 템플릿 요청 관리`에서는 더 이상 썸네일 클릭으로 요청 미리보기 모달을 열지 않고, 썸네일 자체가 `요청 티어표 보기` 새창 링크 역할을 하도록 바꿨으며, 하단의 중복 `요청 티어표 보기` 버튼은 제거함.
+
+## 2026-04-02 v1.3.81
+- 티어표 만들기 화면에는 저장된 티어표에서만 보이는 `공유하기` 액션을 추가하고, 누르면 현재 티어표의 완성본 링크(`preview=1`)를 클립보드에 복사한 뒤 토스트로 안내하도록 정리함.
+- 공유 링크는 관리자가 새 창에서 보던 완성본 주소와 같은 문법을 사용하므로, 저장된 티어표를 그대로 외부에 전달하거나 다시 열람하는 흐름으로 바로 이어짐.
+
+## 2026-04-02 v1.3.79
+- 우측 카피라이트는 관리자 전용 레이아웃에서 분리해 앱 공통 `rightRail` footer로 올렸고, 이제 관리자 페이지뿐 아니라 오른쪽 사이드가 보이는 모든 화면에서 같은 최하단 위치에 표시됨.
+- 따라서 관리자 패널 길이나 페이지별 로컬 사이드바 내용과 무관하게, 카피라이트는 항상 오른쪽 레일 전체 기준 바닥에 고정되는 공통 footer 역할로 정리됨.
+
+## 2026-04-02 v1.3.78
+- 왼쪽 레일 축소 상태의 하단 액션 아이콘은 문맥에 따라 구분되도록 바꿔, 홈의 `커스텀 티어표 만들기`는 `dashboard_customize` 아이콘을 쓰고 게임 허브의 일반 `티어표 만들기`만 `add_notes` 아이콘을 유지하도록 정리함.
+- 관리자 우측 카피라이트 문구는 사이드바 바깥 형제로 밀려 보이지 않을 수 있었으므로, 다시 관리자 사이드바 `aside` 내부 최하단으로 옮겨 레이아웃 안에서 안정적으로 보이게 정리함.
+
+## 2026-04-02 v1.3.77
+- 왼쪽 사이드 레일을 축소했을 때도 홈과 게임 허브에서 바로 새 티어표를 만들 수 있도록, 최하단 액션 영역에 `add_notes` 아이콘 기반의 축소 전용 `티어표 만들기` 버튼을 추가함.
+- 펼친 상태에서는 기존 텍스트 버튼을 그대로 유지하고, 축소 상태에서는 같은 위치에 아이콘 버튼만 남기도록 분기해 하단 액션 위치 감각은 유지하면서도 좁은 레일 폭에 맞게 정리함.
+
+## 2026-04-02 v1.3.76
+- 앱 왼쪽 사이드 레일은 축소 상태에서 아바타, 검색 버튼, 네비게이션 아이콘 버튼 높이를 모두 50px 기준으로 맞추고 검색 아래 여백도 정리해, 아이콘만 보이는 상태에서도 각 줄 높이가 제각각처럼 보이지 않게 정리함.
+- 왼쪽 사이드 검색은 라우트에 따라 의미가 바뀌지 않도록 `게임 템플릿 검색`으로 고정하고, 축소 검색 모달 역시 같은 플레이스홀더와 같은 동작으로 홈 게임 목록 검색을 수행하도록 통일함.
+
+## 2026-04-02 v1.3.75
+- 관리자 공용 모달 카드의 기본 `padding: 20px`는 그대로 두되, 아이템 상세처럼 내부 레이아웃이 이미 큰 셸을 가진 모달은 `modalCard--customItem`에서 다시 덮어쓰지 않도록 분리해 상세 모달 크기와 내부 배치가 무너지지 않게 정리함.
+- 관리자 우측 사이드바 최하단의 카피라이트 문구는 이제 별도 상수 URL을 참조하는 외부 링크로 바꿔 새 창에서 열리게 했고, 추후 주소를 바꿔야 할 때 한 곳만 수정하면 되도록 정리함.
+- 앱 왼쪽 사이드 레일의 접힘 상태는 메타 텍스트를 단순히 투명하게 남겨두는 대신 실제로 숨기고, 아바타/검색/내비 아이콘을 다시 중앙 정렬해 접었을 때 높이가 비정상적으로 늘어나거나 간격이 남아 보이던 레이아웃을 정리함.
+
+## 2026-04-02 v1.3.74
+- 아이템 관리 상세에서 템플릿 추가 대상 게임을 고를 때, 이미 해당 이미지가 연결된 게임은 공용 게임 선택 모달에서 `이미 추가됨`으로 표시하고 비활성화해 중복 추가 실수를 미리 막도록 정리함.
+- 관리자 우측 사이드바 최하단에는 작은 카피라이트 문구를 추가해, 헤더에 관리 정보만 남기고 프로젝트 표기는 하단에서 조용히 보이도록 정리함.
+
+## 2026-04-02 v1.3.73
+- 전체 티어표 관리 카드 썸네일은 `draggable="false"`로 바꿔, 미리보기 진입 시 브라우저 기본 이미지 드래그가 클릭을 방해하지 않도록 정리함.
+- 관리자 사이드바의 검색 입력과 검색 버튼은 한 줄로 묶어, 입력/선택/실행 버튼이 모두 같은 크기의 세로 스택처럼 보이던 답답함을 조금 줄이고 역할 구분을 더 분명하게 함.
+- 아이템 관리 상세 모달의 템플릿 추가 대상 선택도 내부 전용 게임 리스트 대신 공용 `게임 선택` 검색 모달을 쓰도록 바꿔, 향후 게임 수가 많아져도 같은 선택 문법으로 이어지게 정리함.
+
+## 2026-04-02 v1.3.72
+- 관리자 화면 초기화 중 `/admin/games?gameId=...` 경로를 즉시 처리하는 watcher가 `loadGame` 초기화보다 먼저 실행되어 브라우저 콘솔에 `Cannot access 'loadGame' before initialization` 오류가 나던 문제를 수정함.
+- 게임 라우트 진입 시 실제 게임 로딩 호출은 컴포넌트 초기화가 끝난 뒤 microtask로 미뤄 실행하도록 바꿔, 첫 진입/새로고침에서도 게임 선택 복원 흐름이 안전하게 이어지게 정리함.
+
+## 2026-04-02 v1.3.71
+- 관리자 아이템 모달은 최근 추가했던 선택 요약 카드를 다시 걷어내고, 더 단순한 `게임 선택 패널 + 상세 작업 영역` 구조로 되돌려 이전 흐름에 가깝게 정리함.
+- 관리자 `게임 관리`와 `전체 티어표 관리`의 게임 선택은 긴 셀렉트/목록 대신 공용 `게임 선택` 검색 모달로 바꿔, 게임 수가 많아져도 이름·ID 검색으로 바로 찾아 선택할 수 있게 함.
+- 전체 티어표 관리의 게임 필터 해제도 같은 모달 흐름에 맞춰 `모든 게임 보기`로 처리하고, 사이드바에는 현재 선택된 게임만 요약 카드로 보여줘 긴 리스트가 계속 쌓이지 않게 정리함.
+
+## 2026-04-02 v1.3.70
+- 관리자 `전체 티어표 관리`는 이제 게임별 필터를 지원해, 특정 게임에서 만들어진 티어표만 따로 골라 보며 공개/비공개 분포를 확인할 수 있게 함.
+- 전체 티어표 카드는 공개 여부를 텍스트 대신 다른 관리자 화면과 같은 배지 형식으로 표시하고, 카드의 `관리` 액션에서 제목·설명 수정, 공개/비공개 전환, 삭제를 바로 처리할 수 있게 보강함.
+- 이를 위해 관리자 전용 티어표 수정/삭제 API와 게임 기준/검색 기준 공개 집계 로직을 함께 추가해, 관리자 화면에서 비공개 개입과 운영성 검수가 한 흐름으로 이어지게 정리함.
+
+## 2026-04-02 v1.3.69
+- 관리자 아이템 라이브러리는 참조 수/공유 기록 UI가 실제 운영 판단에 비해 노이즈가 커 보여 카드 수치, 상세 모달의 같은 이미지 참조 섹션, 삭제 확인 문구의 참조 강조를 걷어내고 다시 항목 자체 관리 흐름 위주로 정리함.
+- 관리자 게임 관리 상단 요약은 더 이상 `선택 상태`처럼 추상적인 문구를 보여주지 않고, 선택된 게임 기준으로 만들어진 티어표의 `전체 / 공개 / 비공개` 개수를 바로 보여주도록 바꿈.
+- 전체 티어표 관리 상단에도 검색 결과 기준 `전체 / 공개 / 비공개` 수치를 함께 노출하고, 이를 위해 관리자 티어표 집계 API를 별도로 추가해 페이지 단위가 아니라 실제 전체 결과 기준 숫자를 안정적으로 표시함.
+
+## 2026-04-02 v1.3.68
+- 관리자 아이템 상세 모달은 같은 이미지를 왼쪽 선택 카드와 오른쪽 본문에서 두 번 보여주던 중복 미리보기를 제거해, 한 모달 안에서 정보가 겹쳐 보이던 문제를 정리함.
+- 왼쪽 게임 선택 패널과 오른쪽 상세 정보 패널은 각각 독립 스크롤이 되도록 바꾸고, 스크롤바도 다시 보이게 조정해 긴 목록이나 긴 참조 정보가 있어도 레이아웃이 깨지지 않고 탐색할 수 있게 함.
+- 현재 선택한 이미지 요약 카드에는 별도 배경과 테두리를 추가해, 기존 클릭 모달의 “선택 대상”과 오른쪽 작업 영역이 한눈에 구분되도록 시각 계층을 정리함.
+
+## 2026-04-02 v1.3.67
+- 관리자 아이템 관리 카드에는 이제 같은 `src`를 공유하는 참조 수와 연결 게임 수를 함께 표시해, 같은 이미지가 얼마나 넓게 쓰이는지 목록 단계에서 바로 파악할 수 있게 함.
+- 아이템 상세 모달은 왼쪽 패널 상단에 현재 선택한 이미지와 `총 참조 / 사용자 업로드 / 템플릿 항목 / 보관 자산` 요약을 보여주고, 오른쪽에는 같은 이미지를 가리키는 다른 기록 목록을 함께 표시해 실제로 어떤 참조들이 묶여 있는지 모달 안에서 바로 확인할 수 있게 함.
+- 삭제 확인 문구도 이제 단순 타입 설명만 하지 않고 `같은 이미지 참조 n건 중 현재 항목만 다룬다`는 영향을 함께 보여, 삭제 전에 범위를 더 명확히 이해할 수 있게 정리함.
+
+## 2026-04-02 v1.3.66
+- `누락 참조 정리`는 처음엔 누락 커스텀 아이템이 있을 때만 티어표/요청 썸네일까지 함께 보던 조건 때문에, 누락 썸네일만 남아 있으면 수치가 줄지 않던 문제가 있었으므로 분기를 풀어 티어표 썸네일과 요청 썸네일도 항상 실제 파일 존재 여부를 확인해 정리하도록 수정함.
+- 정리 완료 메시지에도 `티어표 썸네일`, `요청 썸네일` 항목을 추가해 어떤 종류의 누락 참조가 실제로 정리됐는지 바로 알 수 있게 함.
+
+## 2026-04-02 v1.3.65
+- 관리자 이미지 최적화 패널에 `누락 참조 정리` 액션을 추가해, 실제 파일이 없는 `/uploads/...` 참조만 대상으로 썸네일/아바타는 비우고 누락된 게임 아이템·커스텀 아이템은 관련 티어표/템플릿 요청 참조와 함께 정리할 수 있게 함.
+- 따라서 예전 수동 파일 정리나 레거시 데이터로 인해 쌓인 `누락 파일`은 단순 통계로만 남지 않고, 관리자 화면에서 실제로 줄일 수 있는 관리 도구를 갖게 됨.
+
+## 2026-04-02 v1.3.64
+- 관리자 이미지 최적화 최근 작업에서 `기존 최적화 파일 재사용` 건은 이제 `이번 업로드 용량 · 재사용 자산 용량` 형태로 표시하고, 동일한 최적화 결과가 이미 있어 새 파일을 다시 만들지 않았다는 설명을 함께 보여 혼동을 줄임.
+- 관리자 아이템 관리는 기존의 `미사용 사용자 업로드만 보기` 체크박스 대신 `전체 / 사용자 업로드 / 템플릿 사용 이미지 / 관리자 보관 자산 / 미사용 사용자 / 미사용 관리자` 필터로 바꿔, 관리자 업로드 자산도 별도로 확인할 수 있게 정리함.
+- 게임 관리의 선택된 게임 설정은 더 이상 우측 사이드바 아래쪽에 쌓지 않고, 본문 상단에 썸네일과 공개 상태·썸네일 적용·게임 삭제 액션을 함께 둔 카드로 옮겨 게임 목록이 많아져도 작업 영역을 더 안정적으로 읽을 수 있게 조정함.
+
+## 2026-04-02 v1.3.63
+- 관리자 이미지 최적화 최근 작업 목록은 더 이상 내부 카테고리 문자열 `custom / tierlists / games / avatars`를 그대로 노출하지 않고, 각각 `커스텀 아이템 / 티어표 썸네일 / 게임·템플릿 이미지 / 프로필 아바타`처럼 사람이 이해할 수 있는 이름으로 표시함.
+- 같은 이미지 해시를 다시 업로드해 기존 최적화 파일을 재사용한 경우에는 최근 작업 목록에 `기존 최적화 파일 재사용` 문구를 함께 보여, 새로 압축된 건지 중복 자산이 재사용된 건지 운영자가 바로 구분할 수 있게 함.
+
+## 2026-04-02 v1.3.62
+- 티어표 저장과 템플릿 요청 전 커스텀 이미지 업로드에서는 더 이상 `itemsById` 객체 키 순서에 기대지 않고, 실제 화면에 보이는 `아이템 영역 + 보드 배치 순서` 기준으로 아이템 배열을 만들도록 바꿔 저장 중 이미지 목록이 흔들리던 현상을 줄임.
+- 따라서 커스텀 아이템 이름 정리 목록, 저장 payload, 템플릿 요청 payload 모두 같은 순서 기준을 공유하게 되어, 이미지를 여러 장 올린 뒤 저장해도 사용자가 보고 있던 흐름이 덜 흔들리도록 정리함.
+- 티어표 삭제 버튼은 이제 템플릿 요청과 같은 기준으로 `저장된 티어표`에서만 노출되며, 실제 삭제도 저장본 ID가 있을 때만 동작하도록 맞춰 저장 전 초안 상태의 어색한 삭제 액션을 제거함.
+
+## 2026-04-02 v1.3.61
+- 관리자 게임 관리의 썸네일 드롭존, 관리자 기본 아이템 추가 드롭존, 티어표 에디터의 커스텀 이미지 드롭존에 `add_photo_alternate` 아이콘을 넣어 업로드 영역임을 더 빠르게 인식할 수 있게 정리함.
+- 관리자와 에디터 드롭존은 점선 보더 굵기, 라운드, 밝은 배경 톤, 활성화 상태 색 변화, 파일 선택 버튼 크기를 같은 계열로 맞춰 서로 다른 화면에서도 같은 업로드 컴포넌트처럼 읽히도록 통일함.
+- 썸네일 드롭존 역시 배경을 일반 입력 필드보다 더 밝고 넓은 업로드 박스처럼 보이게 조정해, 일반 폼 필드와 대표 이미지 교체 영역을 시각적으로 더 분명하게 구분함.
+
+## 2026-04-02 v1.3.60
+- 관리자 게임 관리의 대표 썸네일 드롭존은 이제 썸네일이 없을 때는 `클릭 & 드래그`, 이미 등록된 썸네일이 있을 때는 `썸네일 변경`으로 문구가 바뀌어 현재 동작을 더 바로 읽을 수 있게 함.
+- 관리자 인증 상태는 라우터 가드와 앱 셸이 동시에 `/api/auth/me`를 호출할 때, 가드가 아직 끝나지 않은 요청을 기다리지 못해 새로고침 직후 홈으로 튕기던 흐름이 있었으므로 인증 스토어에서 진행 중인 `refresh` Promise를 재사용하도록 정리함.
+- 따라서 관리자 계정으로 로그인된 상태에서는 `/admin/...` 경로를 새로고침해도 세션 확인이 끝날 때까지 같은 요청을 기다린 뒤 관리자 화면에 남도록 안정성을 보강함.
+- 티어표 만들기 화면의 보드 드롭존은 점선 테두리, 더 높은 박스, 중앙 정렬된 안내 문구와 버튼을 적용해 커스텀 이미지 추가 영역임을 더 즉시 인식할 수 있게 조정함.
+
+## 2026-04-02 v1.3.59
+- 관리자 템플릿 요청의 `promote-items` 처리에서는 잘못된 `z.record` 스키마 때문에 500이 나던 서버 파싱 버그를 수정하고, 요청 아이템 `src`까지 함께 받아 실제 요청 데이터와 더 안정적으로 매칭하도록 보강함.
+- 요청 아이템을 게임에 반영할 때는 이제 같은 게임 안에 동일한 `src`가 이미 있으면 새 기본 아이템을 다시 만들지 않도록 막고, 관리자 화면에서도 이미 반영된 요청 아이템은 드래프트에 다시 올리지 않게 정리함.
+- 신규 템플릿 요청으로 새 게임을 한 번 만들면 해당 요청과 새 게임을 연결해 저장하고, 이후 같은 요청에서 다시 `확인하기`를 눌렀을 때는 새 게임을 또 만들지 않고 기존에 연결된 게임으로 바로 복귀하도록 흐름을 정리함.
+- 따라서 요청 카드와 게임 관리 작업 패널에서는 `연결된 게임`, `이미 반영 n개` 같은 상태를 함께 보여, 처리 완료 전에도 현재 진행 정도와 재작업 위험을 더 쉽게 구분할 수 있게 함.
+
+## 2026-04-02 v1.3.55
+- 관리자 요청 카드 오른쪽 상단의 `신규 템플릿 / 보유 템플릿` 배지는 서로 다른 색상으로 분리해, 카드 타입을 텍스트보다 더 빠르게 구분할 수 있게 조정함.
+- 게임 관리의 기본 아이템 추가 미리보기에서도 `요청 아이템 / 직접 추가 파일` 배지를 서로 다른 색상으로 구분해, 요청 반영분과 직접 업로드분이 한눈에 섞이지 않도록 정리함.
+- 신규 템플릿 요청에서 `새 게임 만들기`를 진행할 때는 요청 티어표 대표 썸네일도 함께 새 게임 썸네일로 복사되도록 보강해, 관리자가 이후 수정하더라도 초기 식별용 썸네일은 바로 이어받을 수 있게 함.
+
+## 2026-04-02 v1.3.54
+- 관리자 `티어표 관리` 요청 카드에서는 사용법 힌트 문구와 중복 타입 텍스트를 제거해, 카드 본문이 관리 정보만 더 빠르게 읽히도록 정리함.
+- `신규 템플릿 / 보유 템플릿` 구분은 카드 오른쪽 상단의 별도 배지로 옮기고, 기존 `추가 아이템 / 확인함 여부` 배지는 그대로 유지해 정보 계층을 더 단순하게 맞춤.
+- `요청 티어표 보기` 링크는 하단 액션 줄의 왼쪽으로 옮기고 `확인하기 / 처리 완료` 버튼은 오른쪽에 정렬해, 실제 작업 버튼과 보조 링크의 역할이 한 줄 안에서도 분명하게 보이도록 조정함.
+
+## 2026-04-02 v1.3.53
+- 관리자 리팩터링 4차로 `목록 관리` 정렬 로직과 `아이템 관리` 모달/삭제/승격 액션을 각각 `useAdminFeaturedGames`, `useAdminCustomItems` composable로 분리해 `AdminView.vue`의 직접 액션 코드를 더 줄임.
+- 따라서 관리자 메인 뷰는 섹션 연결과 공통 상태 중심으로 더 가까워졌고, 상단 고정 게임 정렬과 커스텀 아이템 처리 흐름은 각 영역 책임에 맞는 파일로 옮겨 유지보수 범위를 좁힘.
+
+## 2026-04-02 v1.3.52
+- 관리자 본문 섹션을 컴포넌트로 나눈 뒤 `AdminView.vue` 스타일이 `scoped`에 묶여 자식 컴포넌트까지 제대로 닿지 않던 문제를 정리하고, 관리자 전용 공통 스타일을 `adminUiScope` 범위로 다시 묶어 각 페이지 CSS가 함께 살아나도록 보강함.
+- 템플릿 요청 카드의 신규 게임 입력 영역에는 `게임 이름 / 게임 ID` 필드 스타일을 다시 붙여, 요청 카드만 따로 풀린 것처럼 보이던 레이아웃을 복구함.
+- 관리자 사이드바의 `전체 티어표 관리` 모드는 내부 값이 `lists`와 `all`로 엇갈리던 상태를 `all` 기준으로 통일해, 버튼 활성 상태와 실제 목록 전환이 어긋나지 않게 정리함.
+- 운영 이력 정합성을 위해 누락돼 있던 릴리스 태그도 다시 점검하고, `v1.3.50`, `v1.3.51`, `v1.3.52` 흐름으로 이어서 관리함.
+
+## 2026-04-02 v1.3.51
+- 관리자 리팩터링 3차로 회원 관리 액션을 `useAdminUsers` composable로 분리해, 아바타 변경, 회원 정보 수정, 비밀번호 초기화, 권한 변경, 삭제 모달 흐름을 `AdminView.vue` 밖으로 옮김.
+- 따라서 관리자 메인 뷰는 섹션 연결과 공통 상태에 더 집중하고, 회원 관리 로직은 다른 관리자 영역과 같은 composable 분리 기준으로 맞추기 시작함.
+- 이번 정리에서도 관리자 화면에 직접 반영돼 있던 텍스트와 게임 관리 CSS 수정분은 유지한 채 구조만 옮기도록 정리함.
+
+## 2026-04-02 v1.3.50
+- 관리자 `템플릿 요청 관리` 카드에서는 대표 썸네일을 다시 복구해 게임 이름/ID와 함께 요청 대상을 더 빠르게 식별할 수 있게 정리함.
+- `확인하기` 후 게임을 불러오면서 요청 아이템 임시 목록이 비워지던 흐름을 수정하고, 신규 게임 생성 직후에도 요청 아이템이 기본 아이템 추가 미리보기에 유지되도록 보강함.
+- 관리자 상단 작업 모드는 `/admin/featured`, `/admin/games`, `/admin/items`, `/admin/tierlists`, `/admin/users` 경로로 나눠 뒤로가기 시 관리자 밖으로 바로 이탈하던 흐름을 줄임.
+- 관리자 경로는 이제 라우터 가드에서 로그인/관리자 여부를 먼저 확인하고, 권한이 없으면 관리자 화면 자체에 접근하지 못하도록 홈으로 되돌림.
+- 티어표 에디터의 커스텀 아이템 이름 편집 목록은 입력 중 실시간 라벨 정렬을 제거해, 입력 도중 포커스가 풀리거나 글자가 끊기던 현상을 막음.
+- 게임 기본 아이템은 최신 추가 항목이 앞에 오도록 기본 정렬 기준을 바꾸고, 관리자 게임 관리 화면에서 현재 목록을 그대로 드래그해 순서를 저장할 수 있게 함.
+- 관리자 대형 단일 뷰 정리를 시작하면서 `목록/게임/아이템/티어표/회원 관리` 본문을 섹션 컴포넌트로 분리해, `AdminView.vue`는 상태·모달·사이드바 중심 셸로 가볍게 정리함.
+- 관리자 리팩터링 2차로 `게임 관리`와 `템플릿 요청 처리` 로직을 `useAdminGameManager`, `useAdminTemplateRequests` composable로 분리해, `AdminView.vue` 스크립트에서도 섹션별 책임이 더 명확해지도록 정리함.
+
+## 2026-04-01 v1.3.49
+- 티어표 에디터의 템플릿 요청 흐름은 저장된 티어표를 기준으로만 요청을 보낼 수 있도록 다시 정리하고, 요청 모달의 `내 티어리스트에도 저장` 분기는 제거함. 제목이 비어 있는 상태에서 저장하면 `직접 티어표 만들기` 대신 랜덤한 고유 제목을 먼저 부여해 저장본을 만들고, 그 이후에만 템플릿 요청 버튼이 노출되도록 맞춤.
+- 관리자 `사용자 템플릿 요청` 카드는 `전체 티어표 관리`와 같은 카드 문법으로 유지하되, 썸네일은 상단에 고정된 클릭 진입점으로 다시 정리하고 카드 본문과 별도 입력 영역의 밀도를 맞춤.
+- 템플릿 요청 미리보기는 일반 티어표 완성본과 같은 보드 문법으로 다시 구성하고, `cells` 기반 배치 아이템도 남은 아이템 계산에 정확히 반영해 요청 미리보기와 일반 완성본 보기의 차이를 줄임.
+## 2026-04-01 v1.3.48
+- 관리자 화면은 새로고침 직후에도 `티어표 관리 / 회원 관리` 목록이 비지 않도록, 관리자 인증이 확정되거나 탭이 바뀔 때 해당 목록을 다시 불러오는 흐름으로 보강함.
+- 관리자 아이템 모달은 내부 스크롤바를 숨기고 스크롤 체인을 끊어 배경이 함께 움직이지 않게 했고, 게임 선택 패널과 본문 패널의 상단 정렬도 다시 맞춤.
+- 템플릿 요청 미리보기는 누락돼 있던 `requestPreview__frame / __header` 스타일을 보강해 일반 티어표 완성본과 더 비슷한 내부 프레임 구조와 보드 밀도로 다시 정리함.
+## 2026-04-01 v1.3.47
+- 관리자 `사용자 템플릿 요청` 카드는 별도 요청 전용 레이아웃 대신 `전체 티어표 관리`와 같은 카드 문법으로 맞추고, 왼쪽 썸네일 클릭으로 같은 미리보기 모달이 열리도록 정리함.
+- 새 템플릿 요청에는 썸네일 아래에 `게임 이름 / 게임 ID` 입력을 두고, 초기 `게임 ID`는 `new-template` 대신 요청 ID 기반의 임시 고유값으로 채워 나중에 수정하기 쉽게 바꿈.
+- 요청 카드 오른쪽에는 제목, 설명, 요청 메타, 추가 아이템 목록, 승인/반려 버튼을 같은 정보 계층으로 배치해 전체 티어표 관리와 읽는 흐름을 통일함.
+
+## 2026-04-01 v1.3.46
+- 관리자 `전체 티어표 관리`의 썸네일 영역은 카드 좌측 전체가 눌리는 버튼처럼 보이지 않도록 이미지 영역만 상단에 붙여 클릭 진입점으로 유지하고, 카드 본문과의 시각적 분리를 다시 다듬음.
+- `템플릿 요청 관리` 미리보기는 별도 썸네일 요약형이 아니라, 제목·설명·행/열 보드·남은 아이템이 하나의 내부 프레임 안에서 이어지는 실제 티어표 완성본형 레이아웃으로 다시 정리함.
+
+## 2026-04-01 v1.3.45
+- 템플릿 요청에서 `내 티어리스트에도 저장`이 켜져 있을 때 발생하던 500 오류는 새 저장본 생성 시 `tierlists.id`에 `undefined`가 들어가던 문제였고, 이제 `saveTierList()`가 생성 시 자동으로 `nanoid()`를 부여하도록 고쳐 저장 분기 자체를 안정화함.
+- 사용자에게 노출되던 `백엔드를 재시작해주세요` 문구는 제거하고, 저장 분기 실패 시에도 일반적인 재시도 안내만 보이도록 조정함.
+- 루트에 잘못 남아 있던 `update.md` 진입점 파일은 제거하고, 업데이트 기록은 다시 `docs/update.md` 한 곳으로 정리함.
+
+## 2026-04-01 v1.3.44
+- 관리자 `전체 티어표 관리`에서는 별도 `완성본 보기` 버튼은 다시 두지 않되, 카드 썸네일 자체를 눌러 기존처럼 완성본 미리보기 모달을 열 수 있게 복구함.
+- `템플릿 요청 관리`의 요청 미리보기는 요약 썸네일 중심 레이아웃을 줄이고, 실제 보드 구조를 먼저 읽는 방향으로 정리해 일반 티어표 완성본을 보는 흐름과 더 비슷하게 맞춤.
+
+## 2026-04-01 v1.3.43
+- 템플릿 요청 모달은 `내 티어리스트에도 저장` 토글 상태를 요청 직전에 별도로 고정해 사용하도록 바꿔, 모달이 닫히며 draft가 초기화된 뒤 성공 토스트가 반대로 나오던 문제를 바로잡음.
+- 따라서 저장을 끈 상태에서는 `요청만 보냈어요` 문구가 정확히 유지되고, 저장을 켠 상태에서 500이 나는 경우에는 저장 단계에서 실패했다는 안내를 더 분명하게 보여주도록 보강함.
+
+## 2026-04-01 v1.3.42
+- 템플릿 요청 시 `내 티어리스트에도 저장`이 켜져 있을 때만 500 오류가 날 수 있던 레거시 `tierlists.source_tierlist_id` nullability 문제도 함께 보강해, 오래된 DB 스키마에서도 요청 전 저장 흐름이 막히지 않도록 정리함.
+- 따라서 템플릿 요청 관련 레거시 호환 보정은 `template_requests`와 `tierlists` 양쪽에 모두 반영됐고, 실제 적용을 위해서는 백엔드 재시작 후 재확인이 필요함.
+
+## 2026-04-01 v1.3.41
+- 템플릿 요청 등록 시 500 오류가 날 수 있던 레거시 DB 호환 문제를 보강해, 기존 `template_requests` 테이블에 `request_type`, `source_game_id`, `target_game_id`, `status` 컬럼이 빠져 있어도 서버 시작 시 자동으로 마이그레이션되도록 함.
+- 따라서 저장 여부와 무관하게 템플릿 요청 흐름은 유지되고, 구버전 DB를 사용 중이더라도 백엔드 재시작 후 같은 요청이 정상 저장되도록 안정성을 높임.
+
+## 2026-04-01 v1.3.40
+- 관리자 아이템 상세 모달은 내부 스크롤바를 숨기고 본문 스크롤이 배경으로 전파되지 않도록 body scroll lock과 ESC 닫기를 추가해, 검수 중 배경 화면이 함께 움직이던 불편을 줄임.
+- 관리자 티어표 관리에서는 `완성본 보기` 흐름을 제거하고, 전체 티어표의 추가 아이템을 클릭하면 같은 아이템 관리 모달로 열어 게임 검색·템플릿 추가·새 템플릿 생성까지 같은 문법으로 처리할 수 있게 통일함.
+- 템플릿 요청 관리의 `요청 미리보기`는 단순 썸네일이 아니라 행·열 구조, 열 이름, 배치된 아이템, 미사용 아이템까지 함께 보이는 실제 보드형 미리보기로 다시 구성해 요청 내용을 한 번에 검수할 수 있게 함.
+
+## 2026-04-01 v1.3.39
+- 관리자 템플릿 요청 미리보기는 요청 시 저장된 보드 스냅샷이 비어 있을 경우 요청 아이템 배열을 fallback으로 사용해, 대표 썸네일만 보이는 상황을 줄이고 요청 내용을 더 안정적으로 확인할 수 있게 보정함.
+- 관리자 아이템 상세 모달에는 아이템 이름 입력과 저장 버튼을 추가해, 템플릿 아이템·사용자 업로드·보관 자산 모두 파일명과 무관하게 사람이 읽기 좋은 이름으로 다시 정리할 수 있게 함.
+- 보관 자산용 image asset에는 이름 override 컬럼을 추가해, 무작위 WebP 파일명을 그대로 노출하지 않고 라이브러리 표시명만 따로 관리할 수 있게 확장함.
+
+## 2026-04-01 v1.3.38
+- Settings 화면 오른쪽 사이드의 테마 설정 패널은 다시 쓰기 전까지 숨김 처리하고, 현재 기본 다크모드를 유지한 채 다른 화면과 동일하게 스폰서 광고만 노출되도록 정리함.
+- 관리자 아이템 모달에서 템플릿에 사용 중인 게임 배지는 다크모드에서도 읽히는 텍스트 색으로 맞추고, hover/focus 전환 효과를 추가해 상호작용이 더 분명하게 보이도록 보강함.
+- 관리자 아이템 모달은 데스크톱에서 최소 폭을 800px로 늘리고 최대 높이를 뷰포트 안으로 제한했으며, 16:9 이미지는 높이 상한을 둬서 모달이 넓어질 때도 이미지와 하단 버튼이 과하게 뭉개지지 않도록 정리함.
+
+## 2026-04-01 v1.3.37
+- 가이드 모달은 모바일에서 왼쪽 단계 목록 대신 현재 단계만 선택하는 셀렉트형 피커를 중심으로 쓰도록 높이와 내부 스크롤 구조를 다시 잡아, 작은 화면에서도 내용이 잘리지 않고 조작할 수 있게 정리함.
+- 관리자 아이템 상세 모달은 가이드 모달과 같은 큰 2단 셸 문법으로 다시 묶어, 왼쪽 게임 선택 패널과 오른쪽 이미지·메타·액션 영역이 더 넓고 여유 있게 보이도록 재구성함.
+- 아이템 상세 모달 내부 정보 카드와 액션 영역도 같은 톤의 패널형 블록으로 정리해, 가이드와 관리자 모달 사이의 시각적 통일감을 높임.
+
+## 2026-04-01 v1.3.36
+- `내 티어표` 화면 헤더를 공통 `pageHead` 문법으로 통일하고, 라이트모드에서는 공통 `railHeader` 배경을 사이드 레일과 같은 톤으로 맞춰 화면 간 상단 밀도 차를 줄임.
+- 관리자 아이템 상세 모달은 더 넓은 비율로 키우고, 템플릿에 연결된 게임 이름은 hover 가능한 버튼으로 바꿔 클릭 시 해당 게임이 선택된 `게임 관리` 탭으로 바로 이동할 수 있게 함.
+- 관리자 아이템 라이브러리는 이제 게임에 연결된 템플릿 이미지뿐 아니라 연결이 해제된 `/uploads/assets/` 보관 자산도 함께 보여줘, 게임 목록에서 아이템을 제거해도 아이템 관리에서는 계속 검수·재연결할 수 있게 정리함.
+- 아이템 관리 탭은 다른 탭으로 이동했다가 돌아오면 검색어와 필터를 초기화해, 결과가 남아 있어 목록이 비어 보이는 오해를 줄이도록 조정함.
+
+## 2026-04-01 v1.3.35
+- 라이트모드에서 홈 게임 카드의 메타 텍스트와 대표 썸네일 플레이스홀더, 브랜드 타이틀 색을 다시 정리하고, 전체 밝기도 약간 눌러 눈부심이 덜한 회백색 톤으로 보정함.
+- 관리자 아이템 상세 모달은 더 넓은 2단 레이아웃으로 키우고, 브라우저 뒤로가기 시 페이지 이탈 대신 모달이 먼저 닫히도록 히스토리 동작을 보강함.
+- 아이템 라이브러리의 삭제 기준을 다시 정리해, 사용자 업로드는 어디에도 연결되지 않았을 때만 삭제하고 관리자 템플릿 이미지는 라이브러리에서도 해당 템플릿 항목을 제거할 수 있게 확장함.
+
+## 2026-04-01 v1.3.34
+- 관리자 아이템 관리 오른쪽 사이드에서는 `가져올 게임` 셀렉트를 제거하고, 사용자 업로드와 관리자 템플릿 이미지를 함께 검수하는 라이브러리 흐름으로 단순화함.
+- 아이템 상세 모달은 좌측에 검색/정렬 가능한 게임 리스트를 두고 우측에 이미지·메타·액션을 배치하는 2단 레이아웃으로 재구성해, 많은 게임 속에서도 직접 검수 후 템플릿에 연결하기 쉽게 정리함.
+- 아이템 라이브러리에는 이제 관리자 템플릿 이미지도 함께 표시하고, 배지로 `사용자 업로드 / 관리자 템플릿`을 구분하며 새 업로드 WebP 파일명에서는 시간 정보처럼 보이는 접두 숫자를 제거함.
+- 템플릿 아이템까지 함께 보이는 구조에 맞춰 삭제 API도 사용자 업로드이면서 템플릿에 연결되지 않은 항목만 지울 수 있도록 안전 장치를 보강함.
+
+## 2026-04-01 v1.3.33
+- 라이트모드/다크모드 2차 보정으로 관리자 화면과 티어 에디터의 카드, 패널, 입력창, 모달, 썸네일 프레임을 전역 테마 변수 기준으로 다시 맞춰, 후속 화면에서도 명도 차가 더 자연스럽게 이어지도록 정리함.
+- 공통 셸도 함께 손봐서 좌측 사이드 아이콘 필터와 텍스트 대비를 테마 변수 기반으로 전환하고, 가이드 모달·축소 검색 모달·내비 활성 상태까지 라이트모드에서 읽기 쉬운 톤으로 보정함.
+- 전역 스타일 변수의 다크 기본값과 아이콘 필터 값을 바로잡아, 카드 배경과 텍스트 변수의 자기참조/오동작 가능성을 줄이고 이후 테마 QA 기준을 더 안정적으로 맞춤.
+
+## 2026-04-01 v1.3.32
+- 전역 테마 변수와 로컬 저장 기반 테마 토글을 추가해, Settings 화면 오른쪽 사이드에서 라이트모드/다크모드를 전환하고 재방문 시 같은 테마를 유지할 수 있게 함.
+- 앱 셸, 홈, 게임 허브, 내 티어표, 즐겨찾기, 검색, 로그인, 설정 화면의 공통 카드·입력·텍스트 색을 테마 변수 기준으로 바꿔, 주요 사용자 화면은 라이트/다크 전환이 자연스럽게 이어지도록 1차 정리함.
+- 관리자 화면과 티어 에디터처럼 스타일 밀도가 높은 화면은 후속 단계에서 세부 톤을 더 정교하게 맞추도록 todo 기준도 갱신함.
+
+## 2026-04-01 v1.3.31
+- 관리자 게임 관리의 오른쪽 사이드 게임 선택 리스트는 더 많은 항목을 한 번에 볼 수 있도록 최대 높이를 늘리고, 게임 카드 내부 간격도 사용자가 조정한 CSS 기준으로 반영해 목록 밀도를 다시 다듬음.
+
+## 2026-04-01 v1.3.30
+- 헤더의 `Tier Maker` 로고는 레인보우 그라데이션 텍스트로 바꿔 서비스 첫인상이 더 또렷하게 보이도록 정리하고, `by zenn`은 새 창으로 프로필 페이지를 여는 외부 링크로 연결함.
+- 다음 단계 작업용으로 라이트모드/다크모드 전환 항목을 todo 문서에 추가해, 현재의 다크 톤 UI를 유지하면서도 이후 테마 확장 흐름을 공식 작업 목록에 올림.
+
+## 2026-04-01 v1.3.29
+- 책 아이콘 사용법 모달 진입점은 항상 보이는 오른쪽 사이드 하단 버튼 대신, Settings 화면에서만 왼쪽 사이드 하단의 보조 액션 버튼으로 옮겨 더 필요할 때만 찾게 되는 문맥형 진입 방식으로 정리함.
+- 인증 스토어에 초기 세션 동기화 완료 상태를 추가하고, 앱 셸·로그인 화면·프로필 화면은 세션 확인 전까지 비로그인 UI를 먼저 그리지 않도록 보강해 첫 진입 시 화면이 갑자기 로그인 상태로 뒤집히는 플래시를 줄임.
+
+## 2026-04-01 v1.3.28
+- 책 아이콘 기반 사용법 모달은 기존의 단순 제작 흐름 안내를 넘어, 다른 사람 티어표 복사, 템플릿 업그레이드 요청, 새 템플릿 추가 요청, 즐겨찾기/내 티어표 관리까지 포함한 전체 기능 안내 허브로 확장함.
+- 사용법 모달 제목과 단계 표기를 더 넓은 개념의 `기능 안내` 기준으로 정리하고, 실제 스크린샷이 없어도 설명만으로 핵심 기능을 순서대로 이해할 수 있게 단계 문구를 전면 보강함.
+
+## 2026-04-01 v1.3.27
+- 오른쪽 사이드 하단에 책 아이콘 진입점을 추가하고, 중앙 대형 사용법 모달을 열어 좌측 기능 리스트와 우측 16:9 설명 영역, 좌우 이동, 하단 페이지네이션까지 포함한 기본 가이드 흐름을 붙임.
+- 사용법 모달의 스크린샷 영역은 우선 16:9 플레이스홀더와 설명 텍스트만 배치해, 실제 이미지 자산은 나중에 채워 넣을 수 있게 구조를 먼저 준비함.
+
+## 2026-04-01 v1.3.26
+- 오른쪽 사이드는 실제 광고 슬롯 기준을 300x600 세로 비율로 잡고, 데스크톱 우측 레일 폭도 325px로 조정해 300px 광고가 내부 패딩과 보더를 제외한 실폭 안에 자연스럽게 들어가도록 보정함.
+
+## 2026-04-01 v1.3.25
+- todo 문서에서는 운영 정책/배포 체크 성격 항목을 우선 제거하고, 제품/보안 후속 작업 중심으로 다시 정리함.
+- 관리자 게임 관리는 우측 셀렉트 박스 대신 검색 가능한 리스트와 최신순/오래된순 정렬로 바꿔, 게임 수가 많아져도 실제로 선택 가능한 구조로 개선함.
+- 로그인과 회원가입은 기존 세션을 그대로 덮어쓰지 않고 세션을 재생성한 뒤 사용자 정보를 저장하도록 바꿔, 세션 고정 공격 방어를 보강함.
+
+## 2026-04-01 v1.3.24
+- 게임 선택 후 보이는 공개 티어표 목록 그리드도 auto-fit 최대폭 방식 대신 4/3/2/1열 고정 반응형 규칙으로 바꿔, 넓은 화면에서 카드 한 장이 애매하게 다음 줄로 넘어가며 공백이 크게 남던 문제를 줄임.
+
+## 2026-04-01 v1.3.23
+- 내 티어표 목록 그리드는 auto-fit 최대폭 방식 대신 게임 목록과 같은 4/3/2/1열 고정 반응형 규칙으로 맞춰, 넓은 화면에서 카드 한 장이 애매하게 다음 줄로 떨어지며 여백이 크게 남던 문제를 줄임.
+
+## 2026-04-01 v1.3.22
+- 내 티어표 카드는 게임 목록과 같은 상단 히어로/패널 문법으로 다시 맞추고, 깨진 썸네일은 alt 텍스트가 카드 폭을 밀지 않도록 플레이스홀더로 즉시 대체해 카드 수와 헤더 폭이 흔들리지 않게 보정함.
+- 오른쪽 사이드 광고 프레임은 별도 보더·패딩·배경을 제거해, 광고 자체가 가진 각진 형태와 색이 그대로 보이도록 더 담백하게 정리함.
+
+## 2026-04-01 v1.3.21
+- 내 티어표 카드는 게임 목록 화면과 같은 카드 폭/헤더/메타 배치 문법으로 맞춰, 화면 간 카드 크기와 정보 정렬이 더 통일된 인상으로 보이도록 정리함.
+
+## 2026-04-01 v1.3.20
+- 내 티어표 카드 그리드는 카드 최대폭 우선 규칙 대신 더 촘촘한 auto-fill 기준으로 조정해, 넓은 화면에서도 한 줄에 더 많은 카드가 자연스럽게 배치되도록 보정함.
+
+## 2026-04-01 v1.3.19
+- 관리자 Image Optimization 기간 선택은 연도/월을 가로로 나란히 두고, 연도를 고르기 전에는 월 셀렉트를 숨겨 비어 있는 박스처럼 보이던 상태를 없앰.
+- 전체 초기화 버튼도 실제 월이 선택된 경우에만 보이도록 정리해, 사이드바 상단 필터 줄이 더 단정하게 보이도록 보정함.
+
+## 2026-04-01 v1.3.18
+- 커스텀 아이템 기본 이름은 파일명 전체를 그대로 쓰지 않고 확장자 제거·공백 정리·60자 제한을 먼저 적용하도록 바꿔, 템플릿 요청 전에 커스텀 업로드가 길이 제한으로 실패하던 흐름을 줄임.
+- 템플릿 요청 실패 안내는 커스텀 이미지 업로드 실패와 일반 bad request를 구분해, 사용자가 제목/설명/아이템 이름 길이 제한 문제를 더 쉽게 파악할 수 있게 보강함.
+- 관리자 Image Optimization 월 필터는 기본 month input 대신 연도/월 셀렉트와 전체 초기화 버튼으로 바꿔, 기간 선택을 더 직관적으로 조작할 수 있게 정리함.
+
+## 2026-04-01 v1.3.17
+- 티어 에디터 열 헤더 입력창과 행 라벨은 좌우 패딩을 대칭으로 다시 잡아, 드래그 핸들과 삭제 아이콘이 있어도 제목이 한쪽으로 쏠려 보이지 않도록 보정함.
+- 열 삭제도 이제 행 삭제와 같은 확인 모달을 거쳐 진행되도록 바꿔, 실수로 즉시 제거되던 문제를 막음.
+- 내보내기 보드는 여전히 960px 고정 폭이라 열 수가 늘수록 각 칸 폭이 줄어드는 구조라는 점을 기준으로 정리했고, 현재 보정은 헤더 정렬 문제를 우선 해결하는 쪽에 맞춤.
+
+## 2026-04-01 v1.3.16
+- 티어 에디터의 행 삭제와 열 삭제는 다시 작은 X 아이콘 액션으로 정리해, 행/열 이름 주변의 반복 텍스트 때문에 보드가 답답해 보이던 문제를 줄임.
+- 열 헤더 편집 영역은 입력창 오른쪽에 아이콘 삭제만 남기고, 행 라벨도 상단 우측의 작은 제거 버튼으로 맞춰 더 압축된 편집 밀도를 유지하도록 조정함.
+- 저장 이미지에서 열 제목이 살짝 위로 떠 보이던 문제는 내보내기 헤더의 비대칭 패딩을 제거하고 flex 중앙 정렬로 바꿔, 시각적으로 정확한 중앙에 오도록 보정함.
+
+## 2026-04-01 v1.3.15
+- 티어 에디터의 열 이름은 각 행 안에서 반복 렌더링되지 않도록 공통 상단 헤더로 분리해, 행 제목과 같은 구조로 더 또렷하게 구분되도록 수정함.
+- 행 추가/열 추가 액션은 새 SVG 아이콘 버튼으로 압축해, 텍스트 때문에 보드 상단 툴바 높이가 과하게 커지던 문제를 정리함.
+- 미리보기와 삭제 모달 문구도 행/열 기준으로 함께 정리해, 전체 티어 에디터 흐름을 더 일관된 용어와 레이아웃으로 다듬음.
+
+## 2026-04-01 v1.3.14
+- 티어 에디터를 단일 세로 랭크형에서 행/열 혼합 보드로 확장해, 공격·방어·지원 같은 가로 열을 추가하고 각 열 이름도 직접 입력할 수 있게 함.
+- 에디터 액션 문구를 `행 추가 / 열 추가` 기준으로 정리하고, 행 라벨 폭과 드래그 아이콘 위치를 다듬어 실제 사용 빈도에 맞는 더 압축된 보드 레이아웃으로 보정함.
+- 이름 오버레이 정렬과 저장용 미리보기 보드도 함께 손봐서, 이미지 다운로드 시 라벨 텍스트가 하단 중앙에 더 안정적으로 배치되도록 수정함.
+
+## 2026-04-01 v1.3.13
+- 템플릿 등록/업데이트 요청 모달은 이제 현재 티어표 제목·설명을 기본값으로 가져오고, 비어 있더라도 모달 안에서 바로 작성해 요청할 수 있도록 흐름을 단순화함.
+- 템플릿 요청 시 `내 티어 리스트에도 저장` 토글을 추가해, 요청 스냅샷만 관리자에게 전달할지 아니면 현재 양식도 내 티어표로 함께 저장할지 분리함.
+- 관리자 템플릿 요청 관리는 더 이상 원본 티어표 링크에 의존하지 않고, 요청 시점의 그룹/아이템/이름표시 상태를 그대로 담은 스냅샷 미리보기를 직접 열어 확인할 수 있게 확장함.
+
+## 2026-04-01 v1.3.12
+- 관리자 회원 관리 상단에 정렬 방향 선택을 추가해, 최근 활동순·가입순·작성 티어표순을 각각 오름차순/내림차순으로 다시 볼 수 있게 확장함.
+- 회원 정보 수정, 새 게임 생성, 비밀번호 초기화 모달은 Settings 톤 입력 스타일을 유지하면서 각 입력칸에 글자 수 피드백을 함께 보여주도록 정리함.
+- 로그인, 설정, 티어 에디터 제목·설명·요청 제목·요청 설명·티어 행 이름에도 최대 길이와 현재 입력 길이 안내를 붙여, 제출 전에 제한을 바로 인지할 수 있게 개선함.
+
+## 2026-04-01 v1.3.11
+- **회원 관리 편집 모달 전환**: 관리자 회원 카드를 읽기 전용 정보 카드로 바꾸고, `회원 정보 수정` 버튼으로 Settings 톤의 편집 모달에서 이메일/닉네임/운영자 권한을 저장하도록 재구성
+- **회원 검색/정렬 추가**: 회원 관리 상단에 이메일/닉네임 검색과 `최근 활동순`, `가입순`, `작성 티어표 많은 순` 정렬을 추가해 운영자가 원하는 기준으로 목록을 다시 볼 수 있도록 확장
+- **최고 관리자 보호 도입**: 가장 먼저 생성된 관리자 계정을 `최고 관리자`로 구분하고, 운영자는 최고 관리자 권한/아바타/비밀번호/삭제를 변경할 수 없도록 백엔드 보호 로직과 역할 메타데이터를 추가
+
+## 2026-04-01 v1.3.10
+- 게임 허브 공개 티어표 카드 그리드는 최소/최대 폭을 고정해, 목록이 1~2장뿐일 때도 카드가 화면 전체를 먹으며 과하게 커지지 않도록 보정함.
+- 티어표 행 삭제는 상단 아이콘 대신 우측 하단의 작은 텍스트 액션으로 바꿔, 랭크 카드 안에서 더 조용하고 정돈된 편집 흐름으로 정리함.
+- 공통 `SvgIcon` 컴포넌트를 추가하고 앱 셸, 홈 즐겨찾기, 관리자 회원 액션 같은 UI 아이콘은 `img` 대신 SVG 아이콘 컴포넌트로 렌더링하도록 전환함.
+
+## 2026-04-01 v1.3.9
+- 관리자 오른쪽 사이드의 Image Optimization 패널은 이제 기본 탭인 목록 관리에서만 노출되도록 줄여, 게임/아이템/티어표/회원 관리 화면에서는 실제 작업 패널에 더 집중할 수 있게 정리함.
+- 커스텀 아이템 상세의 '이미 사용 중인 게임' 목록에서는 개인 보드용 freeform 템플릿을 제외하고, 실제 템플릿에 연결된 게임만 보이도록 다듬음.
+- 티어표 행 삭제는 큰 버튼 대신 우측 상단의 작은 x 아이콘으로 바꾸고, 삭제 시 아이템이 풀 영역으로 돌아간다는 안내를 포함한 확인 모달을 거친 뒤 삭제되도록 개선함.
+
+## 2026-03-31 v1.3.8
+- 홈 화면 게임 즐겨찾기 버튼은 일반 문자 별 대신 'kid_star.svg' 아이콘을 사용하도록 바꿔, 기존 아이콘 시스템과 같은 문법으로 정리함.
+- 실제로 더 이상 참조되지 않는 예전 업로드 파일을 정리하는 레거시 업로드 클린업 스크립트를 추가하고, 루트/백엔드 실행 스크립트도 함께 연결함.
+- todo 문서도 이제 운영 반영 후 레거시 파일 정리 배치를 주기화하는 쪽으로 기준을 갱신함.
+
+## 2026-03-31 v1.3.7
+- 현재 참조 중인 레거시 업로드를 다시 최적화 자산 경로로 편입하고 DB 참조를 일괄 교체하는 1회 마이그레이션 스크립트를 추가함.
+- 아바타/썸네일/아이템 역할에 따라 기존 업로드를 512px 또는 1280px 규격으로 다시 정리해, 실제 참조 경로도 '/uploads/assets/' 체계에 점진적으로 수렴시킬 수 있게 함.
+- 루트와 백엔드에 레거시 마이그레이션 실행 스크립트를 연결하고, todo 문서도 다음 단계 기준으로 갱신함.
+
+## 2026-03-31 v1.3.6
+- 현재 참조 중인 레거시 업로드 파일을 'image_assets' 메타에 안전하게 편입하는 1회 백필 스크립트를 추가해, 과거 이미지도 최적화 대시보드와 같은 통계 체계 안에서 집계할 수 있게 함.
+- 루트와 백엔드에 백필 실행 스크립트를 연결해 운영 중 필요할 때 즉시 재실행할 수 있도록 정리함.
+- todo 문서의 즉시 확인 항목도 백필 완료 상태에 맞춰 후속 마이그레이션 과제로 갱신함.
+
+## 2026-03-31 v1.3.5
+- 관리자 이미지 최적화 대시보드는 이제 'image_assets'만이 아니라 현재 실제로 참조 중인 업로드 파일 전체를 합산해, 기존 레거시 업로드까지 포함한 실사용 용량을 함께 보여주도록 확장함.
+- 최근 최적화 작업은 기본 12건으로 늘리고 6/12/24건 선택과 월 단위 필터를 지원해, 특정 기간 사용량과 최적화 이력을 운영 관점에서 바로 확인할 수 있게 정리함.
+- 관리자에서 월별 또는 전체 최적화 기록을 비우는 정리 액션을 추가하고, todo 문서도 현재 이미지 최적화 흐름에 맞게 갱신함.
+
+## 2026-03-31 v1.3.4
+- 관리자 API에 이미지 자산 통계 엔드포인트를 추가해 총 자산 수, 현재 용량, 원본 대비 절감 용량/절감률, 작업 누적 상태를 조회할 수 있게 확장함.
+- 관리자 오른쪽 사이드 하단에 `Image Optimization` 패널을 추가해 큐 상태, 절감 통계, 최근 최적화 작업을 바로 확인할 수 있도록 대시보드를 구성함.
+- 미사용 자산 정리 API와 작업 기록 큐를 기반으로, 운영 중 이미지 스토리지 상태를 관리자 화면에서 직접 점검할 수 있는 흐름을 완성함.
+
+## 2026-03-31 v1.3.3
+- `image_assets` 참조를 전수 점검해 아무 곳에서도 사용하지 않는 최적화 이미지 자산만 추려내는 정리 배치 로직을 추가함.
+- 관리자용 미사용 자산 조회/정리 API를 추가해 오래된 고아 이미지 자산을 미리 확인하거나 실제로 삭제할 수 있도록 확장함.
+- 관리자 승격/템플릿 생성 과정은 기존 `/uploads/assets/` 자산을 그대로 재사용하도록 바꿔, 불필요한 복제 파일이 다시 생기지 않게 정리함.
+
+## 2026-03-31 v1.3.2
+- 업로드 최적화는 이제 백엔드 내부 대기열을 통해 처리되어, 다수 이미지가 한 번에 들어와도 설정된 동시성 안에서 순차적으로 안정적으로 변환되도록 정리함.
+- `image_optimization_jobs` 작업 기록 테이블을 추가해 queued/processing/completed/failed 상태와 원본·최적화 용량, 재사용 여부, 시작/종료 시각을 저장하도록 확장함.
+- 현재 라우트 응답 방식은 유지하면서도 내부적으로는 큐를 타도록 구조를 바꿔, 이후 관리자 대시보드와 작업 통계 화면을 바로 얹을 수 있는 기반을 마련함.
+
+## 2026-03-31 v1.3.1
+- 최적화된 WebP 결과물 기준으로 SHA-256 해시를 계산해, 같은 이미지가 다시 업로드되면 새 파일을 저장하지 않고 기존 자산을 재사용하도록 중복 이미지 해시 검사를 추가함.
+- 이미지 자산 메타데이터를 저장하는 `image_assets` 테이블을 도입해 파일 경로, 해시, 원본 대비 최적화 용량, 해상도를 함께 기록하도록 확장함.
+- 중복 업로드 경쟁 상황에서도 고유 해시 충돌을 안전하게 처리하고, 새 파일 저장에 실패하면 즉시 정리하도록 업로드 헬퍼를 보강함.
+
+## 2026-03-31 v1.3.0
+- 백엔드 업로드 파이프라인을 메모리 기반으로 전환하고, 대표 썸네일·게임 썸네일·커스텀 아이템·게임 기본 아이템·아바타를 서버에서 즉시 WebP로 변환해 저장하도록 정리함.
+- 아이템 이미지는 최대 512px 규격으로 리사이즈하고, 티어표/게임 썸네일은 긴 변 기준 1280px 안쪽으로 최적화해 원본 이미지를 별도로 보관하지 않는 흐름으로 전환함.
+- 업로드 최적화 공통 헬퍼를 추가해 앞으로 중복 해시 검사, 비동기 최적화 큐, 용량 통계 대시보드를 같은 경로 위에 확장할 수 있는 기반을 마련함.
+
+## 2026-03-31 v1.2.73
+- 게임 허브 리스트형 보기의 썸네일을 48px 밀도로 축소해 한 줄이 과하게 커 보이던 인상을 줄이고, 더 많은 티어표를 한눈에 볼 수 있게 조정함.
+- 깨진 대표 썸네일은 `img` alt 텍스트가 길게 노출되지 않도록 에러 시 즉시 플레이스홀더로 대체하고, 제목/메타 말줄임을 더 보강해 레이아웃 붕괴를 막음.
+
+## 2026-03-31 v1.2.72
+- 게임 허브 공개 티어표 목록은 카드 폭과 제목/메타 줄 계산을 다시 조정해, 브라우저 폭에 따라 썸네일과 정보가 카드 밖으로 넘치던 레이아웃 깨짐을 보정함.
+- 상단 워크스페이스 헤더에 grid/list 보기 토글을 추가하고, 게임 허브는 그리드 카드형과 가로 리스트형을 즉시 전환해 볼 수 있도록 확장함.
+
+## 2026-03-31 v1.2.71
+- 게임 허브 공개 티어표 카드는 자동 폭 그리드와 2줄 제목/유연한 메타 배치로 보정해, 브라우저 폭이 줄어들어도 썸네일과 텍스트가 카드 밖으로 넘치지 않도록 정리함.
+- 공개 티어표 상세에서는 다른 사용자의 티어표를 복사해 내 작업본으로 가져오는 기능을 추가하고, 복사본에는 원본 제목/작성자 정보를 작은 출처 메모로 남기도록 확장함.
+- 보기 전용 티어표의 미배치 아이템은 더 어둡고 흐리게 표시하고 `미배치` 상태를 붙여, 내 보드처럼 조작 가능한 인상을 줄이도록 보정함.
+
+## 2026-03-31 v1.2.70
+- 관리자 게임 관리의 썸네일 드롭존을 카드 안 카드 구조 대신, 썸네일 전체 위에 하단 오버레이 문구를 얹는 단일 미디어 영역으로 정리함.
+- 게임 관리 본문 상단 안내 패널과 과한 설명 문구를 제거하고, 비선택 상태는 `게임을 선택해 주세요.` 한 줄 중심의 empty 상태로 단순화함.
+- 새 게임 생성 버튼은 게임 선택과 함께 오른쪽 사이드로 옮겨, 게임 관리 흐름을 선택·생성·썸네일 지정까지 한쪽 패널에서 처리하도록 정리함.
+
+## 2026-03-31 v1.2.69
+- 좌우 사이드 축소/확대 시 텍스트를 즉시 `display:none` 처리하던 방식을 줄이고, 폭·투명도 기반 전환으로 바꿔 아이콘이 떨리는 듯한 느낌을 완화함.
+- 관리자 게임 관리는 오른쪽 사이드에서 게임 선택과 썸네일 지정을 담당하도록 재배치하고, 본문은 기본 아이템 추가/이름 입력/목록 관리에 집중하도록 정리함.
+- 게임 기본 아이템 추가는 업로드 직후 각 파일 이름을 바로 수정할 수 있는 draft 입력 행을 넣고, 선택한 이름이 서버에 함께 저장되도록 관리자 업로드 API를 확장함.
+
+## 2026-03-31 v1.2.68
+- 내 티어표 카드 그리드는 각 카드가 화면 전체 너비를 과도하게 먹지 않도록 최대 폭을 제한해, 1~2개만 있을 때도 적당한 카드 크기를 유지하도록 조정함.
+- 새 티어표 기본 그룹은 기존 S/A/B/C/D 5줄 대신 S/A/B/C 4줄로 시작하게 바꾸고, 좌우 사이드 토글 아이콘 버튼은 외곽선과 배경을 제거해 더 가볍게 정리함.
+
+## 2026-03-31 v1.2.67
+- 홈 화면 게임 템플릿 즐겨찾기 버튼 위치 변경은 유지하면서, 즐겨찾기 on/off 시 카드가 즉시 튀지 않고 부드럽게 재정렬되도록 이동/페이드 전환을 추가함.
+- 별 아이콘을 눌렀을 때 카드가 즐겨찾기 우선순위 위치로 자연스럽게 이동해 전체 라이브러리 전환감이 덜 거칠게 보이도록 보정함.
+
+## 2026-03-31 v1.2.66
+- 내 티어표 카드 하단의 큰 삭제 버튼은 제거하고, 삭제는 상세 편집 화면에서만 하도록 흐름을 단순화함.
+- 내 티어표 카드 그리드를 고정 4/3/2열에서 `auto-fit` 기반 최소 폭 카드로 바꾸고, 제목/메타가 좁은 화면에서도 말줄임과 유연한 폭 계산을 유지하도록 보정함.
+
+## 2026-03-31 v1.2.65
+- 에디터 옵션 토글의 라벨과 스위치 순서를 바꾼 뒤 체크 상태 셀렉터가 끊긴 문제를 보정해, 왼쪽 라벨·오른쪽 스위치 배치에서도 정상 동작하도록 수정함.
+- 왼쪽 사이드 축소 상태 검색은 전용 모달의 기본 스타일이 빠져 있던 문제를 복구해, 다시 중앙 상단 검색 오버레이로 열리도록 정리함.
+
+## 2026-03-31 v1.2.64
+- 메인 콘텐츠가 길어질 때 스크롤 끝이 화면 바닥에 붙지 않도록 중앙 워크스페이스 하단 여백을 추가하고, 긴 작업 화면에서도 마감선이 답답하지 않게 보정함.
+- 템플릿 요청 모달 입력창을 Settings 화면과 같은 어두운 언더라인 입력 문법으로 통일하고, 에디터의 공개/이름 표시 옵션은 체크박스 대신 스위치형 토글로 재구성함.
+
+## 2026-03-31 v1.2.63
+- 앱 셸과 워크스페이스에 걸려 있던 고정 `100dvh` 높이를 풀어, 본문이 길어질 때 중앙 `main` 영역이 잘리거나 접히는 현상을 보정함.
+- 좌우 레일은 그대로 화면 기준 높이를 유지하되, 중앙 작업 영역은 내용만큼 자연스럽게 늘어나도록 높이 계산을 다시 정리함.
+
+## 2026-03-31 v1.2.62
+- 템플릿 요청 모달의 제목/설명 입력을 Settings 화면과 같은 어두운 입력 문법으로 맞춰 흰 배경/흰 글자처럼 보이던 문제를 정리함.
+- 앱 셸은 사이드 기본 바탕색을 중심으로 재정리하고, 중앙 바디에 배경과 좌우 보더를 줘 긴 스크롤에서도 사이드가 잘리는 듯한 인상을 줄이도록 조정함.
+
+## 2026-03-31 v1.2.61
+- Game Library 왼쪽 검색을 전체 티어표 검색이 아니라 게임 템플릿 검색으로 바꾸고, 홈 화면에서 검색어에 맞는 게임만 필터링하도록 조정함.
+- 게임 템플릿에 사용자별 즐겨찾기 별 아이콘을 추가하고, 즐겨찾기한 게임이 관리자 고정 순서보다 우선 노출되도록 백엔드와 홈 화면을 함께 확장함.
+- 앱 셸의 100vh 높이 계산을 100dvh와 고정 행 구조로 정리해, 콘텐츠가 없어도 생기던 불필요한 세로 스크롤을 줄임.
+
+## 2026-03-31 v1.2.60
+- 관리자 티어표 관리 카드에서 사용자가 입력한 설명을 제목 아래에 함께 노출해 요청 의도를 더 빨리 파악할 수 있게 함.
+- 템플릿 등록/업데이트 요청은 이제 에디터 모달에서 제목과 설명을 별도로 입력받고, 예시 문구와 함께 전송하도록 정리함.
+
+## 2026-03-31 v1.2.59
+- 관리자 아이템 상세 모달의 게임 선택을 전용 상태로 분리해 기본 선택값이 비어 있도록 바꾸고, 썸네일 아래에 배치해 정보/액션과 시각적으로 분리함.
+- 커스텀 아이템이 실제로 사용 중인 게임 목록을 백엔드에서 함께 내려주고, 템플릿 요청 생성 폼에는 게임 ID와 게임 이름 라벨을 추가해 구분을 명확히 함.
+
+## 2026-03-31 v1.2.58
+- 관리자 아이템 관리 카드를 썸네일과 제목만 보이는 compact 카드로 줄여, 대량 업로드된 이미지도 훨씬 높은 밀도로 탐색할 수 있게 정리함.
+- 카드 클릭 시 상세 정보를 모달로 열고 이미지 다운로드, 기본 템플릿 추가, 삭제를 모달 안에서 결정하는 흐름으로 바꿈.
+
+## 2026-03-31 v1.2.57
+- 관리자 오른쪽 사이드에서 Featured, Game Summary, Users 패널을 완전히 제거하고, 티어표 요청 모드에는 모드 전환 탭만 남기도록 정리함.
+
+## 2026-03-31 v1.2.56
+- 관리자 아이템 관리 카드 그리드에 최대 폭을 줘서 결과가 1~2개일 때 카드가 과하게 늘어나지 않도록 조정함.
+- 관리자 오른쪽 사이드에서 Featured, Game Summary, Users 요약 패널과 티어표 요청 새로고침/대기 개수 영역을 제거해 중복 정보를 정리함.
+
+## 2026-03-31 v1.2.55
+- 관리자 게임 관리 썸네일 입력을 파일 버튼 대신 클릭/드래그형 드롭존으로 바꿔 에디터 쪽 업로드 경험과 맞춤.
+- 관리자 아이템 관리 카드를 세로 카드 구조로 재정리해 긴 파일명과 버튼 문구에도 레이아웃이 무너지지 않도록 보정함.
+
+## 2026-03-31 v1.2.54
+- 관리자 게임 상세 로딩 전에 호출되던 preview reset helper를 복구해, 게임 선택 시 런타임 오류로 상세 패널이 비어 있던 문제를 보정함.
+- 선택 실패 시 원인을 더 쉽게 확인할 수 있도록 로딩 실패 안내와 콘솔 에러 로그를 추가함.
+
+## 2026-03-31 v1.2.53
+- 관리자 게임 관리에서 새 게임 만들기 카드를 제거하고, 헤더 버튼으로 여는 모달 기반 생성 흐름으로 정리함.
+- 게임 선택은 명시적인 변경 핸들러로 다시 묶어 선택 즉시 상세 정보를 불러오도록 보강함.
+
+## 2026-03-31 v1.2.52
+- 관리자 게임 관리에서 선택 이벤트를 놓치지 않도록 `selectedGameId`와 탭 진입 시점을 감시해 상세 정보를 자동으로 다시 불러오도록 보정함.
+- 선택 후 잠시 비어 보이던 구간을 줄이기 위해 로딩 상태와 선택된 게임 ID 안내를 추가함.
+
+## 2026-03-31 v1.2.51
+- 운영 비밀값이 들어 있는 `.env.production`과 로컬 에디터 설정 `.vscode/`를 `.gitignore`에 추가해 푸시 대상에서 제외함.
+
+## 2026-03-31 v1.2.50
+- 관리자 회원 아바타 삭제 버튼 조건을 명확히 하고 hover 표시를 visibility까지 포함해 보정해 다른 사용자 카드에서도 안정적으로 노출되도록 조정함.
+- 삭제 배지 아이콘을 흰색으로 보정하고 어두운 배경 위에서 더 잘 보이도록 스타일을 다듬음.
+
+## 2026-03-31 v1.2.49
+- 관리자 회원 저장 후 통계 정보가 흔들리던 문제를 줄이기 위해 저장/아바타 변경 뒤 회원 목록을 다시 동기화하도록 보정함.
+- 회원 아바타 액션을 hover 기반으로 재배치해 평소에는 숨기고, 마우스 오버 시에만 수정 오버레이와 삭제 버튼이 나타나도록 조정함.
+
+## 2026-03-31 v1.2.48
+- 관리자 회원 관리 배지를 Settings 화면의 Administrator 스타일로 통일하고, 카드 우측 상단에 걸치는 형태로 재배치함.
+- 관리자 권한 체크박스를 제거하고 작은 텍스트 액션과 확인 모달을 거쳐 draft 상태만 바꾸는 흐름으로 정리함.
+
+## 2026-03-31 v1.2.47
+- 관리자 회원 관리에서 비밀번호 초기화와 삭제를 실제 모달 플로우로 연결하고, 저장 버튼은 회원 정보 변경 시에만 활성화되도록 정리함.
+- 상단 휴지통 아이콘과 불필요 문구를 제거하고, 관리자도 회원 썸네일을 카드 안에서 바로 수정/삭제할 수 있게 보완함.
+
+## 2026-03-31 v1.2.46
+- **회원 액션 플로우 수정**: 회원 카드의 불필요한 안내 문구와 상단 삭제 아이콘을 제거하고, 비밀번호 초기화/회원 삭제를 각각 전용 확인 모달로 재구성
+- **저장 버튼 활성 조건 정리**: 회원정보 저장은 필드가 실제로 바뀐 경우에만 활성화되고, 비밀번호 초기화와 삭제 아이콘은 즉시 사용할 수 있도록 조정
+
+## 2026-03-31 v1.2.45
+- **회원 카드 액션 재구성**: 비밀번호 초기화와 회원 삭제를 아이콘 액션으로 축소하고, `회원정보 저장` 버튼은 실제 변경이 있을 때만 활성화되도록 조정
+- **관리자 아바타 편집 지원**: 관리자도 회원 아바타를 클릭해 변경하거나 삭제할 수 있도록 전용 업로드 API와 카드 UI를 추가
+
+## 2026-03-31 v1.2.44
+- **관리자 탭 구조 재정리**: `목록 관리`와 `게임 관리`를 분리하고, 게임 생성/선택 흐름을 우측 사이드가 아닌 본문 전용 작업 화면으로 이동
+- **회원/액션 레이아웃 정리**: 회원 카드의 작성 수/최근 활동을 텍스트형 정보로 단순화하고, 관리 버튼의 줄바꿈이 어색하지 않도록 액션 그리드를 보정
+
+## 2026-03-31 v1.2.43
+- **이름 표시 옵션 추가**: 티어 에디터 우측 옵션에 `캐릭터 이름 표시` 토글을 추가하고, 보드 안에서는 이미지 하단 오버레이 라벨로 표시되도록 개선
+- **저장/불러오기 연동**: 이름 표시 옵션이 저장된 티어표와 다운로드 이미지에도 그대로 반영되도록 프런트/백엔드 저장 구조를 확장
+
+## 2026-03-31 v1.2.42
+- **에디터 보드 폭 기준 정리**: 티어표 보드 영역을 저장 이미지 기준에 맞춰 최대 약 `960px` 폭으로 묶고, 넓은 화면에서는 아이템 풀이 남는 공간을 더 가져가도록 조정
+- **아이템 풀 카드형 통일**: 넓은 화면에서도 우측 아이템 목록을 카드형 그리드로 바꿔 한 번에 더 많은 아이템을 보고 드래그할 수 있도록 개선
+
+## 2026-03-31 v1.2.41
+- **에디터 하단 아이템 풀 카드형 전환**: 브라우저 폭이 `980px` 이하로 줄어 아이템 풀이 티어표 아래로 내려오면, 세로 리스트 대신 `이미지 위 / 이름 아래` 카드형 그리드로 전환되도록 조정
+- **소형 폭 열 수 최적화**: 약 `800px` 전후에서는 6열 그리드가 유지되고, 더 작은 폭에서는 4열/3열로 자연스럽게 줄어들며 긴 이름은 가운데 정렬된 말줄임 형태로 보이도록 정리
+
+## 2026-03-31 v1.2.40
+- **목록 카드 메타 정리**: `내 티어표`, `즐겨찾기`, `검색 결과`, `게임 목록` 카드의 작성자 썸네일을 원형으로 통일하고, 메타 행 간격과 날짜 크기(`10px`)를 조정했으며 날짜 정렬을 위해 `boardCard__metaRow`를 `align-items: flex-end`로 보정
+- **게임 허브 CTA 좌측 하단 이동**: 게임 목록 화면의 `새 티어표 만들기` 버튼을 오른쪽 사이드에서 제거하고, 왼쪽 하단 액션 영역으로 옮겨 관리자 메뉴와 같은 버튼 문법으로 정리
+- **필수 우측 패널 자동 열기**: 티어 메이커/관리자처럼 오른쪽 사이드 사용이 필요한 페이지는 패널이 닫혀 있더라도 진입 시 자동으로 열리게 해, 도구 접근성과 이후 광고 노출 흐름을 함께 보정
+
+## 2026-03-31 v1.2.39
+- **홈 하단 액션 재배치**: 홈 오른쪽 사이드의 `커스텀 티어표 만들기` CTA를 제거하고, 로그인/관리자 메뉴가 있던 왼쪽 하단 액션 영역으로 옮겨 같은 버튼 문법으로 정리
+- **우측 중복 액션 축소**: 일반 화면에서 중복되던 `로그인 하러가기` 계열 우측 CTA는 제거하고, 오른쪽 레일은 광고/도구 용도로만 유지하도록 단순화
+- **회원가입 확인 입력 추가**: 로그인 화면 회원가입 모드에 비밀번호 확인 필드를 추가하고, 버튼 문구를 `로그인 / 가입하기 / 취소` 같은 한글 흐름으로 정리
+
+## 2026-03-31 v1.2.38
+- **로그인 화면 문법 통일**: 로그인/회원가입 화면을 기존 카드형에서 Settings와 같은 단일 컬럼 계정 설정 스타일로 재구성해 두 화면의 톤을 통일
+- **일반 우측 레일 광고 슬롯 전환**: 에디터/관리자처럼 실제 도구가 필요한 화면을 제외하면 오른쪽 레일은 중복 액션 버튼 대신 AdSense 수직형 반응형 슬롯을 기본으로 표시하도록 정리
+
+## 2026-03-31 v1.2.37
+- **대표 썸네일 드래그 업로드 추가**: 우측 대표 썸네일 영역도 드래그앤드롭으로 이미지를 받을 수 있게 하고, 여러 파일을 드롭하면 첫 번째만 사용된다는 안내 토스트를 표시하도록 수정
+- **삭제/업데이트 요청 액션 경량화**: 우측 하단의 삭제와 템플릿 업데이트 요청을 무거운 정식 버튼 대신 작은 보조 링크형 액션으로 정리해 실제 주 행동과 시각적으로 분리
+- **확인 모달 보강**: 템플릿 업데이트 요청과 티어표 삭제는 이제 브라우저 기본 얼럿 대신 전용 확인 모달을 통해 안내 후 진행되도록 변경
+
+## 2026-03-31 v1.2.36
+- **축소 검색 모달 재정의**: 좌측 레일 축소 상태에서는 검색 아이콘 클릭 시 카드형 다이얼로그 대신, 화면 중앙보다 약간 위에 뜨는 단일 검색 바와 은은한 암전 오버레이로 재구성하고 `ESC`/바깥 클릭으로 닫을 수 있게 보정
+- **드롭 영역 위치 재조정**: 커스텀 이미지 추가 영역을 전체 `editorCanvas` 하단이 아니라 왼쪽 티어표 컬럼 내부의 보드 바로 아래로 옮겨, 오른쪽 아이템 목록 길이와 무관하게 가까운 위치에서 추가할 수 있도록 수정
+
+## 2026-03-31 v1.2.35
+- **축소 좌측 검색 동작 수정**: 접힌 상태의 검색 아이콘은 이제 즉시 모달을 열고, 일반 상태에서만 폼 제출이 되도록 분기해 실제 팝업이 보이도록 수정
+- **우측 레일 높이 제한 해제**: 공통 `max-height: calc(100vh - 56px)` 규칙은 왼쪽 레일에만 남기고, 오버레이 상태를 포함한 오른쪽 레일은 별도 높이 제한 없이 내용 전체가 자연스럽게 흐르도록 조정
+- **커스텀 업로드 영역 하단 이동**: 커스텀 이미지 드래그 영역과 파일 선택 버튼을 아이템 풀 아래가 아니라 티어표 섹션 하단으로 옮겨, 긴 아이템 목록과 충돌하지 않도록 정리
+
+## 2026-03-31 v1.2.34
+- **축소 좌측 검색 팝업 추가**: 왼쪽 레일이 접힌 상태에서 검색 아이콘을 누르면 즉시 검색 입력이 가능한 모달 팝업이 뜨도록 바꾸고, 셸 톤에 맞는 블러/글래스 스타일로 정리
+- **에디터 빈 우측 섹션 제거**: 티어 메이커 우측 패널의 네 번째 빈 박스는 `즐겨찾기` 버튼 래퍼였고, 조건이 맞지 않을 때 박스만 남지 않도록 섹션 자체를 조건부 렌더링으로 수정
+- **우측 레일 스크롤 구조 완화**: 오른쪽 패널은 이제 본문 전체가 자연스럽게 세로 스크롤되고, 로컬 패널 루트의 불필요한 최소 높이를 제거해 내용이 늘어나도 잘려 보이는 느낌을 줄임
+
+## 2026-03-31 v1.2.33
+- **우측 패널 토글 위치 보정**: 소형 해상도에서도 오른쪽 패널 열기 버튼이 본문 아래로 내려가지 않도록 워크스페이스 헤더 최상단 액션 영역으로 이동
+- **모바일 좌측 레일 단순화**: 모바일에서는 좌측 레일 접기 버튼을 숨기고, 축소 상태가 남아 있더라도 텍스트와 사용자 메타를 다시 보여주도록 보정해 아이콘만 덩그러니 남는 상황을 제거
+- **모바일 축소 상태 자동 해제**: 화면 폭이 모바일 범위로 들어오면 좌측 레일 축소 상태를 자동으로 풀어, 작은 화면에서는 항상 읽을 수 있는 메뉴 형태를 유지
+
+## 2026-03-31 v1.2.32
+- **왼쪽 레일 축소 상태 재정의**: 축소 시 사용자 정보는 아바타만 남기고, 메뉴는 아이콘만 보이도록 숨김 처리해 중앙 정렬이 자연스럽게 되도록 정리
+- **축소 레일 검색/관리자 처리 보정**: 접힌 상태에서는 검색 입력을 숨기고 아이콘 중심으로 단순화했으며, 아이콘이 없는 하단 관리자 버튼은 축소 모드에서 숨김 유지
+- **우측 패널 소형 해상도 오버레이 전환**: `1200px` 이하에서는 오른쪽 패널을 고정 컬럼 대신 오버레이 패널로 띄우고, 본문 상단 쪽에 다시 열기 버튼을 배치해 패널을 잃어버리지 않도록 수정
+
+## 2026-03-31 v1.2.31
+- **사이드 아이콘 에셋 정리**: 좌측 `Favorites` 메뉴도 제공된 `favorite.svg`를 사용하도록 바꿔, 다른 사이드 아이콘 및 패널 토글 SVG와 같은 자산 흐름으로 통일
+- **프로필 아바타 삭제 UX 개선**: `Settings`에서 텍스트형 `이미지 제거` 버튼을 없애고, 아바타 썸네일 우측 상단의 고정 아이콘 버튼으로 삭제하도록 변경해 레이아웃 흔들림을 제거
+- **셸 코드 정리**: `App.vue`의 비어 있던 감시 코드를 제거해 현재 사용자 수정 위에 불필요한 잔여 로직이 남지 않도록 정리
+
+## 2026-03-31 v1.2.30
+- **왼쪽 즐겨찾기 섹션 제거**: 좌측 레일의 `즐겨찾기 보기` 섹션을 삭제하고, 상단 내비의 즐겨찾기 메뉴만 진입점으로 유지
+- **Settings 화면 리디자인**: 프로필 설정 화면을 카드형 대신 단일 컬럼의 미니멀한 계정 설정 레이아웃으로 재구성
+- **아바타 클릭 업로드/삭제 UX**: 파일 input 노출을 없애고, 아바타를 클릭해 이미지 업로드와 제거를 처리하는 최근 앱 스타일 인터랙션으로 변경
+- **백엔드 아바타 제거 지원**: 프로필 저장 API가 아바타 삭제 요청도 함께 처리하도록 확장
+
+## 2026-03-30 v1.2.29
+- **왼쪽 즐겨찾기 목록 제거**: 좌측 레일의 최근 즐겨찾기 목록과 관련 데이터 로딩 로직을 제거하고, `즐겨찾기 보기` 링크만 유지하도록 단순화
+- **불필요한 즐겨찾기 API 호출 제거**: 사이드바 표시만을 위해 수행되던 즐겨찾기 목록 요청을 없애 초기 렌더 비용을 줄임
+
+## 2026-03-30 v1.2.28
+- **사이드 스크롤 영역 재분리**: 좌우 레일에서 스크롤되는 콘텐츠 영역과 하단 액션 영역을 분리해, 상단 헤더 높이와 무관하게 버튼이 항상 최초 화면 안에 보이도록 수정
+- **레일 바디 overflow 구조 수정**: 레일 전체가 아니라 내부 콘텐츠만 스크롤되게 바꿔, 하단 버튼이 다시 스크롤 아래로 밀리는 문제를 해소
+
+## 2026-03-30 v1.2.27
+- **사이드 하단 버튼 즉시 노출**: 좌우 하단 액션 버튼을 별도 푸터가 아니라 각 레일의 스크롤 바디 안으로 옮기고, 남는 공간을 밀어내는 spacer 구조로 바꿔 스크롤 없이도 처음부터 하단에 보이도록 수정
+- **56px 하단 여백 제거**: 기존 고정 푸터 높이와 추가 하단 패딩을 제거해, 하단 액션이 자연스럽게 레일 마지막 줄에 붙도록 정리
+
+## 2026-03-30 v1.2.26
+- **페이지 헤더 정렬 통일**: `Games`, `내 리스트`, `즐겨찾기`, `Settings` 화면이 모두 같은 전역 헤더 문법과 높이를 사용하도록 정리해, 페이지 이동 시 상단 블록 위치가 미묘하게 흔들리던 문제를 완화
+- **헤더 내부 패딩 제거**: 워크스페이스 본문에 이미 좌우 여백이 있는 점을 반영해, 각 페이지 헤더 내부의 작은 추가 패딩을 제거하고 동일한 배치 규칙으로 맞춤
+- **Settings 헤더 문법 통일**: 프로필 화면도 다른 목록 화면과 동일한 eyebrow/title/description 구조를 갖도록 보강해 전체 화면 톤을 통일
+
+## 2026-03-30 v1.2.25
+- **홈 게임 카드 썸네일 복구**: 메인 게임 선택 카드는 상단 메인 썸네일을 다시 표시하고, 하단 ID 라인 옆의 작은 보조 표시만 제거하도록 보정
+- **사이드 하단 버튼 고정 가시성 보정**: 좌우 하단 액션 버튼이 스크롤을 해야 보이지 않던 문제를 수정하고, 버튼 자체는 항상 보이면서 아래쪽 여백만 확보되도록 조정
+
+## 2026-03-30 v1.2.24
+- **내 티어표 상단 stat 제거**: `내 티어표` 화면 헤더 오른쪽의 저장 개수 stat 카드를 제거해 제목/설명만 남도록 단순화
+- **홈 게임 카드 메타 단순화**: 게임 선택 카드에서 썸네일과 점형 메타를 제거하고, 한글 게임 제목과 아래 작은 ID만 보이는 형태로 정리
+- **좌우 하단 액션 여백 보정**: 왼쪽 로그인/관리자 버튼과 오른쪽 빠른 액션 버튼은 바닥에 바로 붙지 않도록 하단에 추가 여백을 확보
+
 ## 2026-03-30 v1.2.23
 - **홈 게임 카드 4열 정리**: 메인 게임 목록 화면도 카드형 레이아웃에서 데스크톱 기준 기본 4열로 보이도록 그리드를 조정
 - **게임 허브 중복 생성 CTA 제거**: 게임 선택 화면 본문 상단의 `새로운 티어표 만들기` 버튼을 제거하고, 우측 사이드 하단 CTA만 유지하도록 정리
@@ -261,6 +923,101 @@
 - **미사용 아이콘 필터 수정**: 관리자 아이템 관리의 `미사용 아이콘 보기` 체크 상태가 실제 API 요청의 `orphanOnly` 파라미터로 전달되도록 수정
 - **삭제 활성화 흐름 정상화**: 미사용 아이콘만 조회했을 때 `usageCount = 0` 항목의 개별 삭제 버튼이 의도대로 활성화되도록 정리
 
+## 2026-03-19 v0.1.17
+- **내 티어표 삭제 추가**: `내 티어표` 목록에서 작성자가 자신의 티어표를 직접 삭제할 수 있도록 삭제 버튼과 API를 추가
+- **미사용 커스텀 이미지 관리 추가**: 관리자 아이템 탭에서 커스텀 이미지의 사용 횟수를 표시하고, 미사용 항목만 따로 필터링해 개별/일괄 삭제할 수 있도록 보강
+
+## 2026-03-19 v0.1.16
+- **티어표 헤더 마감 정리**: 제목/설명 입력을 각각 한 줄 폭으로 정리하고, 액션 영역과 분리해 헤더 가독성을 개선
+- **export 정보 보강**: 이미지 저장 시 제목 아래에 설명이 함께 표시되도록 보강
+- **보드 여백/정렬 정리**: 보드 내부 패딩을 늘리고, 티어 그룹 제목을 중앙 정렬로 조정해 완성본 느낌을 개선
+
+## 2026-03-19 v0.1.15
+- **셀렉트 화살표 여백 정리**: 전역 `select` 스타일에 커스텀 화살표 위치와 오른쪽 여백을 추가해 텍스트와 화살표가 지나치게 붙지 않도록 조정
+- **티어표 다운로드 결과 개선**: `TierEditorView`의 이미지 저장을 Blob 다운로드 방식으로 바꾸고, 캡처 대상을 보드 영역만 포함하는 전용 export 뷰로 분리해 우측 아이템 영역과 편집용 버튼/입력 UI가 저장 이미지에 섞이지 않도록 수정
+
+## 2026-03-19 v0.1.14
+- **커스텀 아이템 카드 반응형 수정**: 관리자 아이템 관리 탭의 커스텀 아이템 카드에서 이미지 폭을 유동값으로 조정하고, 텍스트 영역에 `min-width: 0`과 강제 줄바꿈 기준을 추가해 카드 바깥 overflow를 방지
+
+## 2026-03-19 v0.1.13
+- **관리자 탭 구조 정리**: 관리자 페이지를 `게임 관리 / 아이템 관리 / 회원 관리` 탭으로 분리하고 기능별 작업 영역을 명확히 분리
+- **커스텀 아이템 조회 강화**: 사용자 커스텀 아이템 목록에 파일명 검색, `50/200` 단위 페이지네이션, 다운로드 흐름 추가
+- **회원 비밀번호 초기화 추가**: 관리자 페이지와 API에서 회원 비밀번호를 직접 재설정할 수 있도록 기능 추가
+- **가변 티어 행 지원**: 티어표 에디터에서 `S~D` 고정 5단이 아니라 티어 행을 직접 추가/삭제할 수 있도록 보강
+
+## 2026-03-19 v0.1.12
+- **전역 레이아웃 폭 정리**: 앱 메인 영역의 고정 최대 너비를 제거해 배경과 페이지 폭이 잘린 듯 보이지 않도록 조정
+- **작성 권한 제한**: 비로그인 사용자는 새 티어표 작성 화면으로 직접 진입할 수 없도록 하고, 공개된 티어표는 읽기 전용으로만 보이게 조정
+- **커스텀 이미지 업로드 개선**: 에디터의 커스텀 이미지 추가 영역에 다중 파일 선택과 드래그 앤 드롭 업로드를 추가
+- **회원 관리 추가**: 관리자 페이지에서 가입 회원 목록 조회, 이메일/닉네임/권한 수정, 계정 삭제가 가능한 관리 영역과 API를 추가
+
+## 2026-03-19 v0.1.11
+- **관리자 레이아웃 재구성**: 인라인 스타일을 제거하고, 썸네일 적용과 아이템 추가를 상단 2열 카드로 재배치한 뒤 아이템 목록은 하단 리스트로 분리
+- **직접 티어표 만들기 추가**: 홈 화면에 게임 카드와 동일한 형태의 `직접 티어표 만들기` 진입점을 추가하고, 내부 전용 `freeform` 게임 레코드로 1회성 빈 티어표 저장 흐름을 지원
+- **게임 제안 흐름 제거**: 홈 화면의 `새로운 게임 제안` 버튼/모달과 관련 프런트 API를 제거해 현재 운영 흐름에 맞게 단순화
+- **커스텀 아이템 검토 영역 추가**: 관리자 페이지에서 사용자 업로드 커스텀 아이템을 목록으로 보고 다운로드할 수 있는 검토 영역과 조회 API를 추가
+
+## 2026-03-19 v0.1.10
+- **관리자 썸네일 액션 정리**: 썸네일 버튼 문구를 `썸네일 적용`으로 바꾸고, 파일 선택 전에는 비활성화되도록 조정
+- **아이템 추가 폼 정리**: 아이템 이름 입력 너비를 줄이고, 과한 미리보기 안내 문구를 제거해 작업 집중도를 높임
+- **반응형 미리보기 보정**: 태블릿 이하 화면에서도 아이템 1:1 미리보기가 최대 `192px` 범위 안에서 보이도록 조정
+- **파일 재선택 버그 수정**: 아이템 추가나 게임 전환 뒤 파일 입력 값을 초기화해 같은 이미지를 다시 선택해도 정상 인식되도록 수정
+
+## 2026-03-19 v0.1.9
+- **MariaDB 전용 전환 완료**: `backend/src/db.js`에서 lowdb 분기와 `DB_CLIENT` 기반 fallback을 제거하고 MariaDB 전용 저장 계층으로 정리
+- **레거시 파일 제거**: `backend/data/db.json`, `backend/scripts/migrate-lowdb-to-mariadb.js`, `dev:lowdb/start:lowdb/migrate:lowdb` 스크립트 및 `lowdb` 의존성 제거
+- **실행 문서 정리**: `README.md`, `docs/local-mariadb.md`, `docs/spec.md`, `docs/todo.md`, `docs/history.md`를 현재 MariaDB 전용 개발/배포 흐름 기준으로 갱신
+
+## 2026-03-19 v0.1.8
+- **관리자 업로드 UX 개선**: 썸네일과 아이템 추가 시 파일 선택 직후 미리보기 표시
+- **썸네일 비율 정리**: 관리자 썸네일 미리보기와 대표 썸네일 표시를 16:9, 약 256px 폭 기준으로 조정
+- **아이템 카드 레이아웃 개선**: 아이템 목록과 추가 미리보기를 1:1 비율 기준으로 재구성하고 더 촘촘한 카드 그리드로 조정
+- **레거시 파일 역할 정리**: `db.json`과 lowdb 관련 코드는 현재 MariaDB 기본 런타임에는 필수가 아니며, 마이그레이션/예외 fallback 용도임을 문서에 명시
+
+## 2026-03-19 v0.1.7
+- **AI 작업 규칙 보강**: `ai-rules.md`에 Git 작성자 정보, 한국어 커밋 메시지, 버전/태그 동기화, 민감 정보 확인 규칙 추가
+- **관리자 화면 재구성**: `/admin`을 좌우 병렬 구조에서 `모드 선택 → 게임 선택/생성 → 선택된 게임 상세 관리` 흐름으로 재구성
+- **관리자 삭제 기능 추가**: 등록된 게임 자체 삭제 및 등록된 아이템 개별 삭제 기능 추가
+- **데이터 정합성 보강**: 관리자 아이템 삭제 시 관련 티어표의 `groups/pool` 참조를 함께 정리하도록 백엔드 로직 보강
+
+## 2026-03-19 v0.1.6
+- **저장소 메타데이터 정리**: Git 작성자 정보를 프로젝트 계정 기준으로 통일하고, 초기 릴리스 커밋 메시지를 한국어 기준으로 재작성
+- **버전 관리 규칙 보강**: 커밋 메시지 한국어 작성 및 문서 버전과 Git 태그를 함께 맞추는 규칙을 문서에 반영
+
+## 2026-03-19 v0.1.5
+- **로컬 개발 환경 정렬**: 기본 백엔드 실행 기준을 lowdb가 아닌 로컬 MariaDB로 전환
+- **개발용 인프라 추가**: 루트 `docker-compose.yml`에 `MariaDB + phpMyAdmin` 추가
+- **실행 문서 정리**: `README.md`, `docs/local-mariadb.md`, `docs/spec.md`에 로컬 MariaDB 실행 절차 반영
+- **Fallback 분리**: `backend/package.json`에 `dev:lowdb`, `start:lowdb` 예외 스크립트 추가
+
+## 2026-03-19 v0.1.4
+- **DB 마이그레이션 준비**: 런타임 저장소를 `MariaDB(MySQL 호환)` 기준으로 재구성하고 `backend/scripts/migrate-lowdb-to-mariadb.js` 마이그레이션 스크립트 추가
+- **데이터 구조 분리**: 관리자 지정 아이템은 `game_items`, 유저 커스텀 이미지는 `custom_items`로 분리
+- **프로필 개선**: 작성자 닉네임 저장 지원, 아바타는 파일 선택 시 미리보기만 변경되고 저장 버튼 클릭 시 실제 반영되도록 수정
+- **공개 티어표 목록 개선**: 공개 티어표 목록에 작성자 닉네임(없으면 이메일) 표시
+- **관리자 UI 개편**: 게임 선택 전에는 우측 관리 패널을 숨기고, 선택 후에만 썸네일/아이템 관리가 보이도록 단계형 흐름으로 수정
+- **관리자 레이아웃 수정**: 새 게임 입력 필드와 카드 셀 overflow 문제를 줄이도록 `box-sizing`, 썸네일/아이템 카드 레이아웃 정리
+- **커스텀 아이템 저장 흐름 수정**: 에디터의 커스텀 이미지는 저장 시 서버 업로드 후 티어표에 반영되도록 변경
+
+## 2026-03-19 v0.1.3
+- **배포 설정 개선**: 프런트엔드의 API/정적 파일 주소 하드코딩(`http://localhost:5179`)을 `VITE_API_ORIGIN` 기반으로 통합
+- **백엔드 운영 설정 추가**: `CORS_ORIGINS`, `TRUST_PROXY`, `SESSION_COOKIE_SECURE`, `SESSION_COOKIE_SAME_SITE`, `SESSION_SECRET` 환경변수 기반으로 NAS/리버스 프록시 배포 대응
+- **업로드 파일명 안정화**: 한글 원본 파일명 기반 저장을 제거하고 ASCII 안전 파일명으로 저장하도록 변경
+- **티어표 데이터 정규화**: 게임 이미지 경로가 절대 로컬 URL로 저장되지 않도록 저장/조회 시 `/uploads/...` 상대 경로로 정규화
+- **프로젝트 점검 결과 문서화**: DB 구조, 화면-파일 매핑, 코딩 규칙, 기술 명세, 남은 위험 요소를 `docs/`에 신규 정리
+
+## 2026-03-19 v0.1.2
+- **로그인 UI 개선**: 로그인 카드 중앙 배치, 중복 타이틀 제거, 입력 overflow 수정, 엔터로 로그인/회원가입 제출
+- **안내문 조건화**: “첫 회원가입 계정은 admin” 문구는 유저가 0명일 때만 표시(`/api/auth/meta`)
+- **게임 목록 UI 개선**: 게임 카드에 썸네일 표시, 중복 텍스트 제거, “새로운 게임 제안” 모달 추가
+- **관리자 기능 추가**: 게임 썸네일 업로드 API(`/api/admin/games/:gameId/thumbnail`) 및 UI 추가
+- **에디터 레이아웃 개선**: 등급(그룹) 라벨 칼럼 확장으로 텍스트 잘림 방지, 설명 입력 1줄, 정렬을 좌측 기준으로 조정
+
+## 2026-03-19 v0.1.1
+- **티어표 메타데이터 개선**: 제목 미입력 시 저장 시점에 게임 이름 기반 자동 제목 적용, 설명(선택) 필드 추가
+- **시간 정보 표시**: 내 티어표/공개 목록에서 저장 시간(createdAt)과 업데이트 시간(updatedAt)을 시:분:초까지 표시
+- **에디터 UX 수정**: 빈 티어 칸 안내 문구가 첫 드래그 배치를 가리던 문제 수정(오버레이 처리), 제목 상단에 게임 이름 표시
+
 ## 2026-03-19 v0.1.0
 - **초기 스캐폴딩**: `frontend/`에 Vue3(Vite, JavaScript) 프로젝트 생성
 - **라우팅/화면 골격**: 게임 선택(`/`), 게임 허브(`/games/:gameId`), 에디터(`/editor/:gameId/...`), 로그인(`/login`), 내 티어표(`/me`), 관리자(`/admin`) 라우트 추가
@@ -273,98 +1030,3 @@
 - **네비/권한 UX**: 관리자 메뉴는 admin 로그인 시에만 노출, 로그인 대신 아바타 버튼/메뉴 노출
 - **프로필**: `/profile` 페이지 추가, 아바타 업로드 API(`/api/auth/avatar`) 및 표시 지원
 - **에디터 버그 수정**: 드래그 시 아이템들이 “묶음”으로 같이 움직이던 문제 해결(드롭 영역 DOM 구조/Sortable 옵션 수정), 드롭 영역 overflow/배치 레이아웃 개선
-
-## 2026-03-19 v0.1.1
-- **티어표 메타데이터 개선**: 제목 미입력 시 저장 시점에 게임 이름 기반 자동 제목 적용, 설명(선택) 필드 추가
-- **시간 정보 표시**: 내 티어표/공개 목록에서 저장 시간(createdAt)과 업데이트 시간(updatedAt)을 시:분:초까지 표시
-- **에디터 UX 수정**: 빈 티어 칸 안내 문구가 첫 드래그 배치를 가리던 문제 수정(오버레이 처리), 제목 상단에 게임 이름 표시
-
-## 2026-03-19 v0.1.2
-- **로그인 UI 개선**: 로그인 카드 중앙 배치, 중복 타이틀 제거, 입력 overflow 수정, 엔터로 로그인/회원가입 제출
-- **안내문 조건화**: “첫 회원가입 계정은 admin” 문구는 유저가 0명일 때만 표시(`/api/auth/meta`)
-- **게임 목록 UI 개선**: 게임 카드에 썸네일 표시, 중복 텍스트 제거, “새로운 게임 제안” 모달 추가
-- **관리자 기능 추가**: 게임 썸네일 업로드 API(`/api/admin/games/:gameId/thumbnail`) 및 UI 추가
-- **에디터 레이아웃 개선**: 등급(그룹) 라벨 칼럼 확장으로 텍스트 잘림 방지, 설명 입력 1줄, 정렬을 좌측 기준으로 조정
-
-## 2026-03-19 v0.1.3
-- **배포 설정 개선**: 프런트엔드의 API/정적 파일 주소 하드코딩(`http://localhost:5179`)을 `VITE_API_ORIGIN` 기반으로 통합
-- **백엔드 운영 설정 추가**: `CORS_ORIGINS`, `TRUST_PROXY`, `SESSION_COOKIE_SECURE`, `SESSION_COOKIE_SAME_SITE`, `SESSION_SECRET` 환경변수 기반으로 NAS/리버스 프록시 배포 대응
-- **업로드 파일명 안정화**: 한글 원본 파일명 기반 저장을 제거하고 ASCII 안전 파일명으로 저장하도록 변경
-- **티어표 데이터 정규화**: 게임 이미지 경로가 절대 로컬 URL로 저장되지 않도록 저장/조회 시 `/uploads/...` 상대 경로로 정규화
-- **프로젝트 점검 결과 문서화**: DB 구조, 화면-파일 매핑, 코딩 규칙, 기술 명세, 남은 위험 요소를 `docs/`에 신규 정리
-
-## 2026-03-19 v0.1.4
-- **DB 마이그레이션 준비**: 런타임 저장소를 `MariaDB(MySQL 호환)` 기준으로 재구성하고 `backend/scripts/migrate-lowdb-to-mariadb.js` 마이그레이션 스크립트 추가
-- **데이터 구조 분리**: 관리자 지정 아이템은 `game_items`, 유저 커스텀 이미지는 `custom_items`로 분리
-- **프로필 개선**: 작성자 닉네임 저장 지원, 아바타는 파일 선택 시 미리보기만 변경되고 저장 버튼 클릭 시 실제 반영되도록 수정
-- **공개 티어표 목록 개선**: 공개 티어표 목록에 작성자 닉네임(없으면 이메일) 표시
-- **관리자 UI 개편**: 게임 선택 전에는 우측 관리 패널을 숨기고, 선택 후에만 썸네일/아이템 관리가 보이도록 단계형 흐름으로 수정
-- **관리자 레이아웃 수정**: 새 게임 입력 필드와 카드 셀 overflow 문제를 줄이도록 `box-sizing`, 썸네일/아이템 카드 레이아웃 정리
-- **커스텀 아이템 저장 흐름 수정**: 에디터의 커스텀 이미지는 저장 시 서버 업로드 후 티어표에 반영되도록 변경
-
-## 2026-03-19 v0.1.5
-- **로컬 개발 환경 정렬**: 기본 백엔드 실행 기준을 lowdb가 아닌 로컬 MariaDB로 전환
-- **개발용 인프라 추가**: 루트 `docker-compose.yml`에 `MariaDB + phpMyAdmin` 추가
-- **실행 문서 정리**: `README.md`, `docs/local-mariadb.md`, `docs/spec.md`에 로컬 MariaDB 실행 절차 반영
-- **Fallback 분리**: `backend/package.json`에 `dev:lowdb`, `start:lowdb` 예외 스크립트 추가
-
-## 2026-03-19 v0.1.6
-- **저장소 메타데이터 정리**: Git 작성자 정보를 프로젝트 계정 기준으로 통일하고, 초기 릴리스 커밋 메시지를 한국어 기준으로 재작성
-- **버전 관리 규칙 보강**: 커밋 메시지 한국어 작성 및 문서 버전과 Git 태그를 함께 맞추는 규칙을 문서에 반영
-
-## 2026-03-19 v0.1.7
-- **AI 작업 규칙 보강**: `ai-rules.md`에 Git 작성자 정보, 한국어 커밋 메시지, 버전/태그 동기화, 민감 정보 확인 규칙 추가
-- **관리자 화면 재구성**: `/admin`을 좌우 병렬 구조에서 `모드 선택 → 게임 선택/생성 → 선택된 게임 상세 관리` 흐름으로 재구성
-- **관리자 삭제 기능 추가**: 등록된 게임 자체 삭제 및 등록된 아이템 개별 삭제 기능 추가
-- **데이터 정합성 보강**: 관리자 아이템 삭제 시 관련 티어표의 `groups/pool` 참조를 함께 정리하도록 백엔드 로직 보강
-
-## 2026-03-19 v0.1.8
-- **관리자 업로드 UX 개선**: 썸네일과 아이템 추가 시 파일 선택 직후 미리보기 표시
-- **썸네일 비율 정리**: 관리자 썸네일 미리보기와 대표 썸네일 표시를 16:9, 약 256px 폭 기준으로 조정
-- **아이템 카드 레이아웃 개선**: 아이템 목록과 추가 미리보기를 1:1 비율 기준으로 재구성하고 더 촘촘한 카드 그리드로 조정
-- **레거시 파일 역할 정리**: `db.json`과 lowdb 관련 코드는 현재 MariaDB 기본 런타임에는 필수가 아니며, 마이그레이션/예외 fallback 용도임을 문서에 명시
-
-## 2026-03-19 v0.1.9
-- **MariaDB 전용 전환 완료**: `backend/src/db.js`에서 lowdb 분기와 `DB_CLIENT` 기반 fallback을 제거하고 MariaDB 전용 저장 계층으로 정리
-- **레거시 파일 제거**: `backend/data/db.json`, `backend/scripts/migrate-lowdb-to-mariadb.js`, `dev:lowdb/start:lowdb/migrate:lowdb` 스크립트 및 `lowdb` 의존성 제거
-- **실행 문서 정리**: `README.md`, `docs/local-mariadb.md`, `docs/spec.md`, `docs/todo.md`, `docs/history.md`를 현재 MariaDB 전용 개발/배포 흐름 기준으로 갱신
-
-## 2026-03-19 v0.1.10
-- **관리자 썸네일 액션 정리**: 썸네일 버튼 문구를 `썸네일 적용`으로 바꾸고, 파일 선택 전에는 비활성화되도록 조정
-- **아이템 추가 폼 정리**: 아이템 이름 입력 너비를 줄이고, 과한 미리보기 안내 문구를 제거해 작업 집중도를 높임
-- **반응형 미리보기 보정**: 태블릿 이하 화면에서도 아이템 1:1 미리보기가 최대 `192px` 범위 안에서 보이도록 조정
-- **파일 재선택 버그 수정**: 아이템 추가나 게임 전환 뒤 파일 입력 값을 초기화해 같은 이미지를 다시 선택해도 정상 인식되도록 수정
-
-## 2026-03-19 v0.1.11
-- **관리자 레이아웃 재구성**: 인라인 스타일을 제거하고, 썸네일 적용과 아이템 추가를 상단 2열 카드로 재배치한 뒤 아이템 목록은 하단 리스트로 분리
-- **직접 티어표 만들기 추가**: 홈 화면에 게임 카드와 동일한 형태의 `직접 티어표 만들기` 진입점을 추가하고, 내부 전용 `freeform` 게임 레코드로 1회성 빈 티어표 저장 흐름을 지원
-- **게임 제안 흐름 제거**: 홈 화면의 `새로운 게임 제안` 버튼/모달과 관련 프런트 API를 제거해 현재 운영 흐름에 맞게 단순화
-- **커스텀 아이템 검토 영역 추가**: 관리자 페이지에서 사용자 업로드 커스텀 아이템을 목록으로 보고 다운로드할 수 있는 검토 영역과 조회 API를 추가
-
-## 2026-03-19 v0.1.12
-- **전역 레이아웃 폭 정리**: 앱 메인 영역의 고정 최대 너비를 제거해 배경과 페이지 폭이 잘린 듯 보이지 않도록 조정
-- **작성 권한 제한**: 비로그인 사용자는 새 티어표 작성 화면으로 직접 진입할 수 없도록 하고, 공개된 티어표는 읽기 전용으로만 보이게 조정
-- **커스텀 이미지 업로드 개선**: 에디터의 커스텀 이미지 추가 영역에 다중 파일 선택과 드래그 앤 드롭 업로드를 추가
-- **회원 관리 추가**: 관리자 페이지에서 가입 회원 목록 조회, 이메일/닉네임/권한 수정, 계정 삭제가 가능한 관리 영역과 API를 추가
-
-## 2026-03-19 v0.1.13
-- **관리자 탭 구조 정리**: 관리자 페이지를 `게임 관리 / 아이템 관리 / 회원 관리` 탭으로 분리하고 기능별 작업 영역을 명확히 분리
-- **커스텀 아이템 조회 강화**: 사용자 커스텀 아이템 목록에 파일명 검색, `50/200` 단위 페이지네이션, 다운로드 흐름 추가
-- **회원 비밀번호 초기화 추가**: 관리자 페이지와 API에서 회원 비밀번호를 직접 재설정할 수 있도록 기능 추가
-- **가변 티어 행 지원**: 티어표 에디터에서 `S~D` 고정 5단이 아니라 티어 행을 직접 추가/삭제할 수 있도록 보강
-
-## 2026-03-19 v0.1.14
-- **커스텀 아이템 카드 반응형 수정**: 관리자 아이템 관리 탭의 커스텀 아이템 카드에서 이미지 폭을 유동값으로 조정하고, 텍스트 영역에 `min-width: 0`과 강제 줄바꿈 기준을 추가해 카드 바깥 overflow를 방지
-
-## 2026-03-19 v0.1.15
-- **셀렉트 화살표 여백 정리**: 전역 `select` 스타일에 커스텀 화살표 위치와 오른쪽 여백을 추가해 텍스트와 화살표가 지나치게 붙지 않도록 조정
-- **티어표 다운로드 결과 개선**: `TierEditorView`의 이미지 저장을 Blob 다운로드 방식으로 바꾸고, 캡처 대상을 보드 영역만 포함하는 전용 export 뷰로 분리해 우측 아이템 영역과 편집용 버튼/입력 UI가 저장 이미지에 섞이지 않도록 수정
-
-## 2026-03-19 v0.1.16
-- **티어표 헤더 마감 정리**: 제목/설명 입력을 각각 한 줄 폭으로 정리하고, 액션 영역과 분리해 헤더 가독성을 개선
-- **export 정보 보강**: 이미지 저장 시 제목 아래에 설명이 함께 표시되도록 보강
-- **보드 여백/정렬 정리**: 보드 내부 패딩을 늘리고, 티어 그룹 제목을 중앙 정렬로 조정해 완성본 느낌을 개선
-
-## 2026-03-19 v0.1.17
-- **내 티어표 삭제 추가**: `내 티어표` 목록에서 작성자가 자신의 티어표를 직접 삭제할 수 있도록 삭제 버튼과 API를 추가
-- **미사용 커스텀 이미지 관리 추가**: 관리자 아이템 탭에서 커스텀 이미지의 사용 횟수를 표시하고, 미사용 항목만 따로 필터링해 개별/일괄 삭제할 수 있도록 보강

frontend/index.html

@@ -1,13 +1,42 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link
-      rel="icon"
-      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='16' fill='%230b1220'/%3E%3Cpath d='M18 18h28v8H36v20h-8V26H18z' fill='%23f8fafc'/%3E%3C/svg%3E"
-    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tier Maker</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="/favicon.svg" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <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/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/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/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/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/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/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,92 @@
+<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;
+}
+
+.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/admin/AdminFeaturedSection.vue

@@ -0,0 +1,64 @@
+<script setup>
+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 },
+})
+</script>
+
+<template>
+  <div class="panel">
+    <div class="sectionHeader">
+      <div>
+        <div class="panel__title">홈 화면 상단 고정 순서</div>
+        <div class="hint hint--tight">여기에 넣은 템플릿은 지정한 순서대로 먼저 노출되고, 나머지 템플릿은 최근 생성순으로 뒤에 이어집니다. 최대 50개까지 설정할 수 있어요.</div>
+      </div>
+      <button class="btn btn--primary" @click="props.saveFeaturedOrder">순서 저장</button>
+    </div>
+
+    <div class="featuredOrderPanel">
+      <div class="featuredOrderPanel__list">
+        <div class="section__title">상단 고정 목록</div>
+        <div v-if="!props.featuredTemplates.length" class="hint">아직 상단 고정 템플릿이 없어요.</div>
+        <div v-else :ref="props.featuredListRef" 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.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>
+        </div>
+      </div>
+
+      <div class="featuredOrderPanel__picker">
+        <div class="section__title">템플릿 추가</div>
+        <div class="featuredPickerList">
+          <button
+            v-for="template in props.availableTemplatesForFeatured"
+            :key="template.id"
+            class="featuredPickerItem"
+            :disabled="props.featuredTemplateIds.length >= 50"
+            @click="props.addFeaturedTemplate(template.id)"
+          >
+            <span>{{ template.name }}</span>
+            <span class="featuredPickerItem__id">{{ template.id }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/components/admin/AdminGamesSection.vue

@@ -0,0 +1,244 @@
+<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 },
+  isGameLoading: { type: Boolean, required: true },
+  hasSelectedTemplate: { type: Boolean, required: true },
+  selectedTemplate: { type: Object, default: null },
+  displayThumbnailUrl: { type: String, default: '' },
+  canApplyThumbnail: { type: Boolean, required: true },
+  gameVisibilitySaving: { 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 },
+  gameItemListRef: { type: Function, required: true },
+  saveTemplateItemLabel: { type: Function, required: true },
+  removeTemplateItem: { type: Function, required: true },
+  selectedTemplateId: { type: String, default: '' },
+})
+
+function setGameItemListElement(el) {
+  props.gameItemListRef(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.targetGameId
+                ? '이미 연결된 신규 템플릿이 있어요. 필요한 아이템만 골라 저장하세요.'
+                : '새 템플릿을 한 번 만든 뒤 필요한 아이템만 골라 저장하세요.')
+              : '필요한 아이템만 남긴 뒤 기본 아이템 추가 버튼으로 반영하세요.'
+          }}
+        </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.targetGameName || props.activeTemplateRequest.targetGameId)" class="pill pill--soft">
+          연결된 템플릿 · {{ props.activeTemplateRequest.targetGameName || props.activeTemplateRequest.targetGameId }}
+        </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.targetGameId"
+        class="btn btn--ghost btn--small"
+        type="button"
+        @click="props.openTemplateCreateModal"
+      >
+        새 템플릿 만들기
+      </button>
+    </div>
+  </div>
+
+  <div v-if="props.isGameLoading" 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 gameSettingsCard">
+      <div class="gameSettingsCard__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.game.name" />
+          <div v-else class="selectedThumb selectedThumb--empty selectedThumb--sidebar">대표 썸네일</div>
+          <div class="thumbDropZone__copy">
+            <div class="thumbDropZone__iconWrap">
+              <SvgIcon :src="addPhotoAlternateIcon" alt="" class="thumbDropZone__icon" />
+            </div>
+            <div class="thumbDropZone__title">{{ props.displayThumbnailUrl ? '썸네일 변경' : '클릭 & 드래그' }}</div>
+          </div>
+        </button>
+      </div>
+      <div class="gameSettingsCard__body">
+        <div class="panel__title">템플릿 설정</div>
+        <div class="gameSettingsCard__meta">{{ props.selectedTemplate.game.name }} · {{ props.selectedTemplate.game.id }}</div>
+        <label class="toggleSwitch" :class="{ 'toggleSwitch--disabled': props.gameVisibilitySaving }">
+          <input :checked="!!props.selectedTemplate.game.isPublic" type="checkbox" @change="props.toggleSelectedTemplateVisibility($event.target.checked)" />
+          <span class="toggleSwitch__label">{{ props.selectedTemplate.game.isPublic ? '템플릿 공개중' : '비공개 상태' }}</span>
+          <span class="toggleSwitch__track"><span class="toggleSwitch__thumb"></span></span>
+        </label>
+        <div class="gameSettingsCard__actions">
+          <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' ? '요청 아이템' : '직접 추가 파일' }}
+                    </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="setGameItemListElement" class="thumbGrid">
+        <div v-for="item in props.selectedTemplate.items" :key="item.id" class="thumbCard" :data-game-item-id="item.id">
+          <img class="thumb thumb--game" :src="toApiUrl(item.src)" :alt="item.label" draggable="false" />
+          <input v-model="item.draftLabel" class="input input--labelEdit" placeholder="아이템 이름" data-no-drag />
+          <div class="thumbCard__actions">
+            <button
+              class="btn btn--ghost btn--small"
+              data-no-drag
+              :disabled="item.isSavingLabel || !item.draftLabel?.trim() || item.draftLabel.trim() === item.label"
+              @click="props.saveTemplateItemLabel(item)"
+            >
+              {{ item.isSavingLabel ? '저장중...' : '이름 저장' }}
+            </button>
+            <button class="btn btn--danger btn--small" data-no-drag @click="props.removeTemplateItem(item.id)">아이템 삭제</button>
+          </div>
+        </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>

frontend/src/components/admin/AdminItemsSection.vue

@@ -0,0 +1,31 @@
+<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' }">{{ item.sourceLabel }}</span>
+        <img class="customItemCard__image" :src="toApiUrl(item.src)" :alt="item.label" />
+        <div class="customItemCard__title" :title="item.label">{{ item.label }}</div>
+      </button>
+    </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/AdminTierlistsSection.vue

@@ -0,0 +1,193 @@
+<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 },
+  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)"
+            @click.prevent="props.templateRequestSourceUrl(request) && window.open(props.templateRequestSourceUrl(request), '_blank', 'noopener,noreferrer')"
+          >
+            <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.draftGameName" class="input" placeholder="새 템플릿 이름" />
+              </label>
+              <label class="templateRequestField">
+                <span class="templateRequestField__label">템플릿 ID</span>
+                <input v-model="request.draftGameId" class="input" placeholder="임시 템플릿 ID" />
+              </label>
+            </template>
+            <template v-else>
+              <div class="templateRequestCard__thumbLabel">템플릿 이름</div>
+              <div class="templateRequestCard__thumbValue">{{ request.draftGameName || request.sourceGameName || '-' }}</div>
+              <div class="templateRequestCard__thumbLabel">템플릿 ID</div>
+              <div class="templateRequestCard__thumbValue">{{ request.draftGameId || request.sourceGameId || '-' }}</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.targetGameName || request.targetGameId)" class="pill pill--soft">
+              연결됨 · {{ request.targetGameName || request.targetGameId }}
+            </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.targetGameName || request.targetGameId)
+                      ? '연결된 템플릿 열기'
+                      : '확인하기'
+                }}
+              </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--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.gameName || tierList.gameId }} · {{ 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 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.gameId === 'freeform'" class="btn btn--primary btn--small" @click="props.openTierListImportModal(tierList, tierList.extraItems)">
+                새 템플릿으로 가져오기
+              </button>
+            </div>
+          </div>
+
+          <div class="tierAdminSection__actions">
+            <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,125 @@
+<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 },
+  roleLabelOf: { type: Function, required: true },
+  fmt: { type: Function, required: true },
+  openUserPasswordModal: { type: Function, required: true },
+  openUserDeleteModal: { type: Function, required: true },
+  openUserEditModal: { type: Function, required: true },
+  lockResetIcon: { type: String, 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="created">가입순</option>
+        <option value="tierlists">작성 티어표 많은 순</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" @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"
+                @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>{{ props.fmt(user.recentActivityAt || user.createdAt) }}</strong></div>
+          <div class="userInfoLine"><span>계정명</span><strong>{{ user.email }}</strong></div>
+          <div class="userInfoLine"><span>닉네임</span><strong>{{ user.nickname || '미설정' }}</strong></div>
+          <div class="userInfoLine"><span>권한</span><strong>{{ props.roleLabelOf(user) }}</strong></div>
+        </div>
+
+        <div class="userCard__actions userCard__actions--compact">
+          <button class="iconActionButton" type="button" title="비밀번호 초기화" @click="props.openUserPasswordModal(user)">
+            <SvgIcon class="iconActionButton__icon" :src="props.lockResetIcon" :size="18" />
+          </button>
+          <button class="iconActionButton iconActionButton--danger" type="button" title="회원 삭제" @click="props.openUserDeleteModal(user)">
+            <SvgIcon class="iconActionButton__icon" :src="props.deleteIcon" :size="18" />
+          </button>
+          <button class="btn btn--ghost userSaveButton" type="button" @click="props.openUserEditModal(user)">회원 정보 수정</button>
+        </div>
+      </article>
+    </div>
+  </div>
+</template>

frontend/src/composables/useAdminCustomItems.js

@@ -0,0 +1,199 @@
+import { nextTick } from 'vue'
+
+export function useAdminCustomItems({
+  api,
+  toast,
+  customItems,
+  customItemPage,
+  customItemLimit,
+  customItemPageCount,
+  customItemQuery,
+  customItemFilter,
+  customItemModalOpen,
+  customItemDeleteModalOpen,
+  customItemModalHistoryActive,
+  modalTargetCustomItem,
+  customItemModalDraftLabel,
+  customItemModalLabelSaving,
+  customItemModalTargetTemplateId,
+  templates,
+  selectedTemplateId,
+  refreshCustomItems,
+  loadTemplate,
+  setTab,
+  selectAdminTemplate,
+  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
+  }
+
+  function openCustomItemModal(item) {
+    modalTargetCustomItem.value = item || null
+    customItemModalDraftLabel.value = item?.label || ''
+    customItemModalTargetTemplateId.value = ''
+    customItemModalOpen.value = true
+    pushCustomItemModalHistoryState()
+  }
+
+  function closeCustomItemModal({ fromPopState = false } = {}) {
+    customItemModalOpen.value = false
+    customItemDeleteModalOpen.value = false
+    modalTargetCustomItem.value = null
+    customItemModalDraftLabel.value = ''
+    customItemModalLabelSaving.value = false
+    customItemModalTargetTemplateId.value = ''
+
+    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.usageCount > 0 || item.linkedGames.length > 0)) {
+      error.value = '사용 중이거나 템플릿에 연결된 사용자 업로드 이미지는 먼저 참조를 정리해야 삭제할 수 있어요.'
+      return
+    }
+    modalTargetCustomItem.value = item
+    customItemDeleteModalOpen.value = true
+  }
+
+  function closeCustomItemDeleteModal() {
+    customItemDeleteModalOpen.value = false
+  }
+
+  function jumpToTemplateAdmin(templateId) {
+    if (!templateId) return
+    closeCustomItemModal()
+    setTab('game-admin')
+    nextTick(() => {
+      selectAdminTemplate(templateId)
+    })
+  }
+
+  async function removeCustomItem(item = modalTargetCustomItem.value) {
+    resetMessages()
+    if (!item) return
+    if (item.sourceType === 'user' && (item.usageCount > 0 || item.linkedGames.length > 0)) {
+      error.value = '사용 중이거나 템플릿에 연결된 사용자 업로드 이미지는 먼저 참조를 정리해야 삭제할 수 있어요.'
+      return
+    }
+
+    try {
+      await api.deleteAdminCustomItem(item.id)
+      closeCustomItemDeleteModal()
+      closeCustomItemModal()
+      await refreshCustomItems()
+      success.value = item.sourceType === 'template' ? '선택한 템플릿 아이템을 제거했어요.' : '사용자 업로드 이미지를 삭제했어요.'
+    } catch (e) {
+      error.value = item.sourceType === 'template' ? '템플릿 아이템 제거에 실패했어요.' : '사용자 업로드 이미지 삭제에 실패했어요.'
+    }
+  }
+
+  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 = '미사용 커스텀 이미지 일괄 삭제에 실패했어요.'
+    }
+  }
+
+  async function saveCustomItemModalLabel() {
+    const item = modalTargetCustomItem.value
+    const nextLabel = customItemModalDraftLabel.value.trim().slice(0, 60)
+    if (!item || !nextLabel || nextLabel === item.label || customItemModalLabelSaving.value) return
+
+    try {
+      customItemModalLabelSaving.value = true
+      const data = await api.updateAdminCustomItemLabel(item.id, { label: nextLabel, sourceType: item.sourceType })
+      item.label = data.item?.label || nextLabel
+      customItemModalDraftLabel.value = item.label
+      customItems.value = customItems.value.map((entry) => (entry.id === item.id ? { ...entry, label: item.label } : 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, { gameId: 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
+    }
+  }
+
+  return {
+    submitCustomItemSearch,
+    changeCustomItemFilter,
+    changeCustomItemLimit,
+    moveCustomItemPage,
+    pushCustomItemModalHistoryState,
+    openCustomItemModal,
+    closeCustomItemModal,
+    openCustomItemDeleteModal,
+    closeCustomItemDeleteModal,
+    jumpToTemplateAdmin,
+    removeCustomItem,
+    removeUnusedCustomItems,
+    saveCustomItemModalLabel,
+    promoteCustomItem,
+  }
+}

frontend/src/composables/useAdminFeaturedGames.js

@@ -0,0 +1,93 @@
+import { nextTick } from 'vue'
+import Sortable from 'sortablejs'
+
+export function useAdminFeaturedGames({
+  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
+    syncFeaturedSortable()
+  }
+
+  async function saveFeaturedOrder() {
+    resetMessages()
+    try {
+      const data = await api.updateAdminTemplateDisplayOrder({ gameIds: featuredTemplateIds.value })
+      templates.value = data.games || []
+      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/useAdminGameManager.js

@@ -0,0 +1,372 @@
+import { nextTick } from 'vue'
+import Sortable from 'sortablejs'
+
+export function useAdminGameManager({
+  api,
+  toApiUrl,
+  selectedTemplateId,
+  selectedTemplate,
+  uploadFiles,
+  uploadItemDrafts,
+  thumbFile,
+  itemPreviewUrls,
+  itemFileInput,
+  gameItemListEl,
+  gameItemSortable,
+  savedGameItemOrderIds,
+  isGameLoading,
+  activeTemplateRequest,
+  templateRequests,
+  customItemModalOpen,
+  customItemModalTargetTemplateId,
+  newTemplateId,
+  newTemplateName,
+  newTemplateIsPublic,
+  clearPreviewUrl,
+  resetFileInput,
+  resetUploadState,
+  refreshTemplates,
+  closeTemplateCreateModal,
+  resetMessages,
+  success,
+  error,
+}) {
+  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 destroyGameItemSortable() {
+    if (gameItemSortable.value) {
+      gameItemSortable.value.destroy()
+      gameItemSortable.value = null
+    }
+  }
+
+  async function syncGameItemSortable() {
+    await nextTick()
+    destroyGameItemSortable()
+    if (!gameItemListEl.value || !selectedTemplate.value?.items?.length) return
+
+    gameItemSortable.value = Sortable.create(gameItemListEl.value, {
+      animation: 160,
+      draggable: '[data-game-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 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
+      savedGameItemOrderIds.value = []
+      destroyGameItemSortable()
+      return
+    }
+
+    try {
+      isGameLoading.value = true
+      const data = await api.getTopic(selectedTemplateId.value)
+      selectedTemplate.value = {
+        ...data,
+        items: (data.items || []).map((item) => ({
+          ...item,
+          draftLabel: item.label,
+        })),
+      }
+      savedGameItemOrderIds.value = (data.items || []).map((item) => item.id)
+      await syncGameItemSortable()
+    } catch (e) {
+      selectedTemplate.value = null
+      error.value = '템플릿 정보를 불러오지 못했어요.'
+    } finally {
+      isGameLoading.value = false
+    }
+  }
+
+  async function createTemplate(options = {}) {
+    const nextGameId = typeof options.gameId === 'string' ? options.gameId.trim() : newTemplateId.value.trim()
+    const nextGameName = typeof options.gameName === 'string' ? options.gameName.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({
+          id: nextGameId,
+          name: nextGameName,
+          isPublic: !!newTemplateIsPublic.value,
+          thumbnailSrc: activeTemplateRequest.value?.type === 'create' ? (activeTemplateRequest.value?.thumbnailSrc || '') : '',
+        }),
+      })
+      if (!res.ok) throw new Error('failed')
+
+      const data = await res.json()
+      if (activeTemplateRequest.value?.type === 'create' && activeTemplateRequest.value?.id) {
+        const linkData = await api.linkAdminTemplateRequestGame(activeTemplateRequest.value.id, {
+          gameId: data.game.id,
+        })
+        activeTemplateRequest.value = {
+          ...activeTemplateRequest.value,
+          targetGameId: linkData.request?.targetGameId || data.game.id,
+          targetGameName: linkData.request?.targetGameName || data.game.name || nextGameName,
+        }
+        const requestIndex = templateRequests.value.findIndex((entry) => entry.id === activeTemplateRequest.value.id)
+        if (requestIndex >= 0) {
+          templateRequests.value.splice(requestIndex, 1, {
+            ...templateRequests.value[requestIndex],
+            targetGameId: linkData.request?.targetGameId || data.game.id,
+            targetGameName: linkData.request?.targetGameName || data.game.name || nextGameName,
+          })
+        }
+      }
+      await refreshTemplates()
+      selectedTemplateId.value = data.game.id
+      if (customItemModalOpen.value) customItemModalTargetTemplateId.value = data.game.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) {
+      error.value = '템플릿 생성 실패(관리자 권한/중복 ID 확인)'
+    }
+  }
+
+  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?.targetGameId) {
+        const draftGameId = (activeTemplateRequest.value?.draftGameId || '').trim()
+        const draftGameName = (activeTemplateRequest.value?.draftGameName || '').trim()
+        if (!draftGameId || !draftGameName) {
+          error.value = '먼저 신규 템플릿의 이름과 템플릿 ID를 저장해주세요.'
+          return
+        }
+        await createTemplate({
+          gameId: draftGameId,
+          gameName: draftGameName,
+          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')
+      let uploadCount = 0
+
+      if (fileDrafts.length) {
+        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) throw new Error('failed')
+        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, {
+            gameId: 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
+        }
+      }
+
+      resetUploadState()
+      await loadTemplate()
+      success.value = `템플릿 기본 아이템 ${uploadCount}개 추가를 완료했어요.`
+    } catch (e) {
+      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 === 'game_not_found') {
+        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,
+        })),
+      }
+      savedGameItemOrderIds.value = (data.items || []).map((item) => item.id)
+      await syncGameItemSortable()
+      success.value = '기본 아이템 순서를 저장했어요.'
+    } catch (e) {
+      error.value = '기본 아이템 순서 저장에 실패했어요.'
+    }
+  }
+
+  return {
+    requestItemFilename,
+    destroyGameItemSortable,
+    syncGameItemSortable,
+    mergeRequestItemsIntoDrafts,
+    removeUploadDraft,
+    loadTemplate,
+    createTemplate,
+    handleItemFiles,
+    onFile,
+    openItemFilePicker,
+    clearItemFiles,
+    uploadItem,
+    saveTemplateItemOrder,
+  }
+}

frontend/src/composables/useAdminTemplateRequests.js

@@ -0,0 +1,113 @@
+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 || '',
+      draftGameId: request.draftGameId || '',
+      draftGameName: request.draftGameName || '',
+      draftGameIsPublic: !!request.draftGameIsPublic,
+      sourceTierListId: request.sourceTierListId || '',
+      sourceGameId: request.sourceGameId || '',
+      sourceTierListTitle: request.sourceTierListTitle || '',
+      targetGameId: request.targetGameId || '',
+      targetGameName: request.targetGameName || '',
+      requesterName: request.requesterName || '',
+    }
+  }
+
+  function templateRequestStatusLabel(request) {
+    return request.status === 'reviewing' ? '확인함' : '미확인'
+  }
+
+  function templateRequestSourceUrl(request) {
+    if (!request?.sourceGameId || !request?.sourceTierListId) return ''
+    return editorPath(request.sourceGameId, 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 || {}),
+        draftGameId: request.draftGameId || '',
+        draftGameName: request.draftGameName || '',
+        draftGameIsPublic: !!request.draftGameIsPublic,
+      }
+      Object.assign(request, syncedRequest)
+      request.status = syncedRequest.status || 'reviewing'
+      updateActiveTemplateRequest(syncedRequest)
+      setTab('game-admin')
+
+      if (request.type === 'create') {
+        const linkedGameId = syncedRequest.targetGameId || ''
+        if (linkedGameId) {
+          await selectAdminTemplate(linkedGameId)
+        } else {
+          openTemplateCreateModal()
+          newTemplateId.value = (syncedRequest.draftGameId || '').trim()
+          newTemplateName.value = (syncedRequest.draftGameName || '').trim()
+        }
+        mergeRequestItemsIntoDrafts(syncedRequest)
+      } else {
+        const nextGameId = syncedRequest.targetGameId || syncedRequest.sourceGameId || ''
+        if (nextGameId) await selectAdminTemplate(nextGameId)
+        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,265 @@
+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
+  })
+
+  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) {
+    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 (!user?.avatarSrc) return
+    await uploadUserAvatar(user, null, { remove: true })
+  }
+
+  function openUserEditModal(user) {
+    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) {
+    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) {
+    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,
+    isUserEditDirty,
+    roleLabelOf,
+    openUserAvatarPicker,
+    onUserAvatarChange,
+    removeUserAvatar,
+    openUserEditModal,
+    closeUserEditModal,
+    saveUserEdit,
+    openUserPasswordModal,
+    closeUserPasswordModal,
+    confirmUserPasswordReset,
+    openUserDeleteModal,
+    closeUserDeleteModal,
+    confirmUserDelete,
+    openUserRoleModal,
+    closeUserRoleModal,
+    confirmUserRoleDraft,
+    submitUserFilters,
+    userDisplayName,
+  }
+}

frontend/src/lib/api.js

@@ -30,38 +30,91 @@ export const api = {
   login: ({ email, password }) => request('/api/auth/login', { method: 'POST', body: { email, password } }),
   logout: () => request('/api/auth/logout', { method: 'POST' }),
 
-  listGames: () => request('/api/games'),
-  getGame: (gameId) => request(`/api/games/${encodeURIComponent(gameId)}`),
-  updateAdminGameDisplayOrder: (payload) => request('/api/admin/games/display-order', { method: 'PATCH', body: payload }),
-  updateAdminGameItem: (gameId, itemId, payload) =>
-    request(`/api/admin/games/${encodeURIComponent(gameId)}/items/${encodeURIComponent(itemId)}`, { method: 'PATCH', body: payload }),
-  listAdminCustomItems: ({ q = '', page = 1, limit = 50, orphanOnly = false } = {}) =>
+  listTopics: () => request('/api/topics'),
+  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' } = {}) =>
     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)}`
     ),
-  listAdminTierLists: ({ q = '', page = 1, limit = 50 } = {}) =>
-    request(`/api/admin/tierlists?q=${encodeURIComponent(q)}&page=${encodeURIComponent(page)}&limit=${encodeURIComponent(limit)}`),
+  listAdminTierLists: ({ q = '', gameId = '', page = 1, limit = 50 } = {}) =>
+    request(
+      `/api/admin/tierlists?q=${encodeURIComponent(q)}&gameId=${encodeURIComponent(gameId)}&page=${encodeURIComponent(page)}&limit=${encodeURIComponent(limit)}`
+    ),
+  getAdminTierListStats: ({ q = '', gameId = '' } = {}) =>
+    request(`/api/admin/tierlists/stats?q=${encodeURIComponent(q)}&gameId=${encodeURIComponent(gameId)}`),
+  updateAdminTierList: (tierListId, payload) =>
+    request(`/api/admin/tierlists/${encodeURIComponent(tierListId)}`, { method: 'PATCH', body: payload }),
+  deleteAdminTierList: (tierListId) =>
+    request(`/api/admin/tierlists/${encodeURIComponent(tierListId)}`, { method: 'DELETE' }),
   listAdminTemplateRequests: () => request('/api/admin/template-requests'),
-  promoteAdminCustomItem: (itemId, payload) =>
+  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 }),
+  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 }),
-  createAdminGameTemplateFromTierList: (tierListId, payload) =>
+  createAdminTemplateFromTierList: (tierListId, payload) =>
     request(`/api/admin/tierlists/${encodeURIComponent(tierListId)}/create-game-template`, { method: 'POST', body: payload }),
+  startAdminTemplateRequestReview: (requestId) =>
+    request(`/api/admin/template-requests/${encodeURIComponent(requestId)}/review`, { method: 'POST', body: {} }),
+  linkAdminTemplateRequestGame: (requestId, payload) =>
+    request(`/api/admin/template-requests/${encodeURIComponent(requestId)}/link-game`, { 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: () => request('/api/admin/users'),
+  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 || '')}`),
-  searchPublicTierLists: (gameId, q = '') =>
-    request(`/api/tierlists/public?gameId=${encodeURIComponent(gameId || '')}&q=${encodeURIComponent(q || '')}`),
+  listPublicTierListsByTopic: (topicId) =>
+    request(`/api/tierlists/public?gameId=${encodeURIComponent(topicId || '')}`),
+  searchPublicTierListsByTopic: (topicId, q = '') =>
+    request(`/api/tierlists/public?gameId=${encodeURIComponent(topicId || '')}&q=${encodeURIComponent(q || '')}`),
   searchAllPublicTierLists: (q = '') => request(`/api/tierlists/public?q=${encodeURIComponent(q || '')}`),
   listMyTierLists: () => request('/api/tierlists/me'),
   listMyFavoriteTierLists: ({ q = '', sort = 'favorited' } = {}) =>
@@ -70,7 +123,8 @@ export const api = {
   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' }),
-  requestTierListTemplate: (id, payload) => request(`/api/tierlists/${encodeURIComponent(id)}/template-request`, { method: 'POST', body: payload }),
+  duplicateTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/duplicate`, { method: 'POST' }),
+  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()
@@ -92,4 +146,24 @@ export const api = {
   deleteAdminCustomItem: (itemId) => request(`/api/admin/custom-items/${encodeURIComponent(itemId)}`, { method: 'DELETE' }),
   deleteAdminUnusedCustomItems: ({ q = '' } = {}) =>
     request(`/api/admin/custom-items?q=${encodeURIComponent(q)}`, { method: 'DELETE' }),
+
+  listGames: () => request('/api/games'),
+  getGame: (gameId) => request(`/api/games/${encodeURIComponent(gameId)}`),
+  favoriteGame: (gameId) => request(`/api/games/${encodeURIComponent(gameId)}/favorite`, { method: 'POST' }),
+  unfavoriteGame: (gameId) => request(`/api/games/${encodeURIComponent(gameId)}/favorite`, { method: 'DELETE' }),
+  updateAdminGameDisplayOrder: (payload) => request('/api/admin/games/display-order', { method: 'PATCH', body: payload }),
+  updateAdminGameItemDisplayOrder: (gameId, payload) =>
+    request(`/api/admin/games/${encodeURIComponent(gameId)}/items/display-order`, { method: 'PATCH', body: payload }),
+  updateAdminGame: (gameId, payload) =>
+    request(`/api/admin/games/${encodeURIComponent(gameId)}`, { method: 'PATCH', body: payload }),
+  updateAdminGameItem: (gameId, itemId, payload) =>
+    request(`/api/admin/games/${encodeURIComponent(gameId)}/items/${encodeURIComponent(itemId)}`, { method: 'PATCH', body: payload }),
+  promoteAdminCustomItem: (itemId, payload) =>
+    request(`/api/admin/custom-items/${encodeURIComponent(itemId)}/promote`, { method: 'POST', body: payload }),
+  createAdminGameTemplateFromTierList: (tierListId, payload) =>
+    request(`/api/admin/tierlists/${encodeURIComponent(tierListId)}/create-game-template`, { method: 'POST', body: payload }),
+  listPublicTierLists: (gameId) =>
+    request(`/api/tierlists/public?gameId=${encodeURIComponent(gameId || '')}`),
+  searchPublicTierLists: (gameId, q = '') =>
+    request(`/api/tierlists/public?gameId=${encodeURIComponent(gameId || '')}&q=${encodeURIComponent(q || '')}`),
 }

frontend/src/lib/paths.js

@@ -0,0 +1,38 @@
+function encodeSegment(value) {
+  return encodeURIComponent(String(value || '').trim())
+}
+
+export function homePath(query = '') {
+  const normalized = String(query || '').trim()
+  return normalized ? `/?q=${encodeURIComponent(normalized)}` : '/'
+}
+
+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 mePath() {
+  return '/me'
+}
+
+export function favoritesPath() {
+  return '/favorites'
+}
+
+export function profilePath() {
+  return '/profile'
+}

frontend/src/router/index.js

@@ -9,21 +9,41 @@ import FavoriteTierListsView from '../views/FavoriteTierListsView.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: '/topics/:topicId', alias: ['/games/:gameId'], name: 'topicHub', component: GameHubView },
+      { path: '/editor/:topicId/new', alias: ['/editor/:gameId/new'], name: 'newEditor', component: TierEditorView },
+      { path: '/editor/:topicId/:tierListId', alias: ['/editor/:gameId/:tierListId'], name: 'editEditor', component: TierEditorView },
       { path: '/login', name: 'login', component: LoginView },
       { path: '/me', name: 'me', component: MyTierListsView },
       { path: '/favorites', name: 'favorites', component: FavoriteTierListsView },
       { path: '/search', name: 'search', component: SearchResultsView },
-      { path: '/admin', name: 'admin', component: AdminView },
+      { path: '/admin', redirect: '/admin/featured' },
+      { path: '/admin/featured', name: 'adminFeatured', component: AdminView },
+      { path: '/admin/games', name: 'adminGames', 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 },
     ],
   })
+
+  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,50 @@
 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
+      this.hydrated = true
       return user
     },
     async login(email, password) {
       const user = await api.login({ email, password })
       this.user = user
+      this.hydrated = true
       return user
     },
     async logout() {
       await api.logout()
       this.user = null
+      this.hydrated = true
     },
   },
 })
-

frontend/src/style.css

@@ -2,12 +2,69 @@
   font-family: 'Pretendard', 'Inter', 'Segoe UI', sans-serif;
   line-height: 1.5;
   font-weight: 400;
-  color: rgba(255, 255, 255, 0.92);
-  background: #121212;
+  color: var(--theme-text);
+  background: var(--theme-body-bg);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  --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-text: #fff;
+  --theme-icon-filter: brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(207%) hue-rotate(186deg) brightness(96%) contrast(92%);
+}
+
+:root[data-theme='light'] {
+  --theme-body-bg: #e7ebf2;
+  --theme-shell-bg: rgba(237, 241, 247, 0.98);
+  --theme-rail-bg: rgba(243, 246, 251, 0.97);
+  --theme-main-bg: rgba(232, 236, 243, 0.98);
+  --theme-workspace-bg: rgba(247, 249, 252, 0.96);
+  --theme-card-bg: rgba(252, 253, 255, 0.98);
+  --theme-card-bg-hover: rgba(244, 247, 251, 0.98);
+  --theme-card-border: rgba(31, 41, 55, 0.11);
+  --theme-card-shadow: 0 18px 34px rgba(31, 41, 55, 0.07);
+  --theme-surface-soft: rgba(30, 41, 59, 0.055);
+  --theme-surface-soft-2: rgba(30, 41, 59, 0.075);
+  --theme-surface-soft-3: rgba(30, 41, 59, 0.105);
+  --theme-pill-bg: rgba(30, 41, 59, 0.045);
+  --theme-border: rgba(30, 41, 59, 0.11);
+  --theme-border-strong: rgba(30, 41, 59, 0.16);
+  --theme-text: rgba(20, 27, 40, 0.92);
+  --theme-text-strong: rgba(10, 15, 28, 0.98);
+  --theme-text-muted: rgba(55, 65, 81, 0.76);
+  --theme-text-soft: rgba(75, 85, 99, 0.72);
+  --theme-text-faint: rgba(100, 116, 139, 0.88);
+  --theme-thumb-fallback-bg: #f6f8fb;
+  --theme-select-arrow: rgba(55, 65, 81, 0.74);
+  --theme-danger-bg: rgba(239, 68, 68, 0.1);
+  --theme-danger-border: rgba(239, 68, 68, 0.22);
+  --theme-accent-bg: rgba(64, 110, 226, 0.94);
+  --theme-accent-text: #fff;
+  --theme-icon-filter: brightness(0) saturate(100%) invert(14%) sepia(14%) saturate(652%) hue-rotate(182deg) brightness(95%) contrast(91%);
 }
 
 * {
@@ -22,7 +79,9 @@ body,
 
 body {
   margin: 0;
-  background: #121212;
+  background: var(--theme-body-bg);
+  color: var(--theme-text);
+  transition: background 220ms ease, color 220ms ease;
 }
 
 button,
@@ -43,7 +102,7 @@ a {
 input,
 select,
 textarea {
-  color: rgba(255, 255, 255, 0.92);
+  color: var(--theme-text);
 }
 
 select {
@@ -51,8 +110,8 @@ select {
   -webkit-appearance: none;
   -moz-appearance: none;
   background-image:
-    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.72) 50%),
-    linear-gradient(135deg, rgba(255, 255, 255, 0.72) 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% - 20px) calc(50% - 2px),
     calc(100% - 14px) calc(50% - 2px);
@@ -72,3 +131,52 @@ p {
 #app {
   width: 100%;
 }
+
+.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/FavoriteTierListsView.vue

@@ -4,6 +4,7 @@ import { 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'
 
 const router = useRouter()
 const toast = useToast()
@@ -42,27 +43,27 @@ async function loadFavorites() {
     favorites.value = data.tierLists || []
   } catch (e) {
     toast.error('로그인이 필요해요.')
-    router.push('/login?redirect=/favorites')
+    router.push(loginPath('/favorites'))
   }
 }
 
 function openTierList(tierList) {
-  router.push(`/editor/${tierList.gameId}/${tierList.id}`)
+  router.push(editorPath(tierList.gameId, tierList.id))
 }
 
 onMounted(loadFavorites)
 </script>
 
 <template>
-  <section class="wrap">
-    <div class="head">
-      <div>
-        <div class="head__eyebrow">Collection</div>
-        <h2 class="title">내 즐겨찾기</h2>
-        <div class="desc">마음에 드는 티어표를 모아보고, 원하는 기준으로 정렬할 수 있어요.</div>
+  <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="toolbar">
-        <input v-model="query" class="input" placeholder="제목, 게임, 작성자 검색" @keydown.enter.prevent="loadFavorites" />
+      <div class="pageHead__aside toolbar">
+        <input v-model="query" class="input" placeholder="제목, 주제, 작성자 검색" @keydown.enter.prevent="loadFavorites" />
         <select v-model="sort" class="select" @change="loadFavorites">
           <option value="favorited">즐겨찾기한 순</option>
           <option value="updated">최신 업데이트순</option>
@@ -77,7 +78,7 @@ onMounted(loadFavorites)
       <article v-for="tierList in favorites" :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" />
+            <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">
@@ -87,7 +88,7 @@ onMounted(loadFavorites)
             </div>
             <div class="boardCard__metaRow">
               <div class="boardCard__author">
-                <img v-if="avatarSrcOf(tierList)" class="boardCard__avatar" :src="avatarSrcOf(tierList)" :alt="displayNameOf(tierList)" />
+                <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>
@@ -101,34 +102,6 @@ onMounted(loadFavorites)
 </template>
 
 <style scoped>
-.wrap {
-  display: grid;
-  gap: 18px;
-}
-.head {
-  display: flex;
-  gap: 14px;
-  justify-content: space-between;
-  align-items: flex-end;
-  flex-wrap: wrap;
-  padding: 6px 2px 8px;
-}
-.head__eyebrow {
-  font-size: 11px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.42);
-}
-.title {
-  margin: 4px 0 0;
-  font-size: 32px;
-  color: rgba(255, 255, 255, 0.96);
-  letter-spacing: -0.04em;
-}
-.desc {
-  margin-top: 6px;
-  color: rgba(255, 255, 255, 0.58);
-}
 .toolbar {
   display: flex;
   gap: 10px;
@@ -138,16 +111,16 @@ onMounted(loadFavorites)
 .select {
   padding: 11px 13px;
   border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.05);
-  color: rgba(255, 255, 255, 0.92);
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
+  color: var(--theme-text);
 }
 .btn {
   padding: 11px 13px;
   border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.06);
-  color: rgba(255, 255, 255, 0.92);
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft-2);
+  color: var(--theme-text);
   font-weight: 800;
   cursor: pointer;
 }
@@ -161,18 +134,18 @@ onMounted(loadFavorites)
 }
 .boardCard {
   border-radius: 22px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  background: rgba(62, 62, 62, 0.82);
+  border: 1px solid var(--theme-card-border);
+  background: var(--theme-card-bg);
   overflow: hidden;
   display: grid;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  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: rgba(70, 70, 70, 0.96);
+  background: var(--theme-card-bg-hover);
 }
 .boardCard__body {
   border: 0;
@@ -200,25 +173,29 @@ onMounted(loadFavorites)
   object-fit: cover;
 }
 .boardCard__thumbPlaceholder {
-  background: #555;
+  background: var(--theme-thumb-fallback-bg);
   display: grid;
   place-items: center;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--theme-text-faint);
   font-size: 13px;
   font-weight: 700;
 }
 .boardCard__head {
   padding: 16px 18px 18px;
   display: grid;
-  gap: 10px;
+  gap: 6px;
 }
 .boardCard__titleRow,
 .boardCard__metaRow {
   display: flex;
-  gap: 12px;
+  gap: 10px;
   align-items: center;
   justify-content: space-between;
 }
+
+.boardCard__metaRow {
+  align-items: flex-end;
+}
 .boardCard__title {
   min-width: 0;
   font-weight: 800;
@@ -244,9 +221,9 @@ onMounted(loadFavorites)
 .boardCard__avatar {
   width: 22px;
   height: 22px;
-  border-radius: 6px;
+  border-radius: 9999px;
   object-fit: cover;
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--theme-border);
   flex: 0 0 auto;
 }
 .boardCard__avatar--fallback {
@@ -259,9 +236,13 @@ onMounted(loadFavorites)
 .favoriteStat {
   flex: 0 0 auto;
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.64);
+  color: var(--theme-text-faint);
   white-space: nowrap;
 }
+
+.boardCard__date {
+  font-size: 10px;
+}
 @media (max-width: 1400px) {
   .list {
     grid-template-columns: repeat(3, minmax(0, 1fr));

frontend/src/views/GameHubView.vue

@@ -1,20 +1,24 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
+import { editorNewPath, editorPath, loginPath } from '../lib/paths'
 import { useAuthStore } from '../stores/auth'
 
 const route = useRoute()
 const router = useRouter()
 const auth = useAuthStore()
 
-const gameId = computed(() => route.params.gameId)
-
-const gameName = ref('')
+const topicId = computed(() => route.params.topicId || route.params.gameId)
+const topicName = ref('')
 const tierLists = ref([])
 const error = ref('')
 const query = ref('')
+const brokenThumbnailIds = ref({})
+const isTopicLoading = ref(false)
+const isListView = computed(() => route.query.view === 'list')
+const topicTitle = computed(() => topicName.value || (isTopicLoading.value ? '주제 불러오는 중...' : ''))
 
 function fmt(ts) {
   return new Date(ts).toLocaleDateString(undefined, {
@@ -37,70 +41,81 @@ function avatarFallbackOf(tierList) {
 }
 
 function tierListThumbnailUrl(tierList) {
+  if (!tierList?.id || brokenThumbnailIds.value[tierList.id]) return ''
   return tierList.thumbnailSrc ? toApiUrl(tierList.thumbnailSrc) : ''
 }
 
-onMounted(async () => {
-  await loadTierLists()
-})
+function handleThumbnailError(tierListId) {
+  if (!tierListId || brokenThumbnailIds.value[tierListId]) return
+  brokenThumbnailIds.value = { ...brokenThumbnailIds.value, [tierListId]: true }
+}
 
 async function loadTierLists() {
+  isTopicLoading.value = true
   try {
     const [gameRes, listRes] = await Promise.all([
-      api.getGame(gameId.value),
-      api.searchPublicTierLists(gameId.value, query.value),
+      api.getTopic(topicId.value),
+      api.searchPublicTierListsByTopic(topicId.value, query.value),
     ])
-    gameName.value = gameRes.game?.name || gameId.value
+    topicName.value = gameRes.game?.name || ''
+    brokenThumbnailIds.value = {}
     tierLists.value = listRes.tierLists || []
   } catch (e) {
-    error.value = '게임 정보를 불러오지 못했어요.'
+    error.value = '주제 정보를 불러오지 못했어요.'
+  } finally {
+    isTopicLoading.value = false
   }
 }
 
 function createNew() {
+  const target = editorNewPath(topicId.value)
   if (!auth.user) {
-    router.push(`/login?redirect=/editor/${gameId.value}/new`)
+    router.push(loginPath(target))
     return
   }
-  router.push(`/editor/${gameId.value}/new`)
+  router.push(target)
 }
 
 function openTierList(id) {
-  router.push(`/editor/${gameId.value}/${id}`)
+  router.push(editorPath(topicId.value, id))
 }
 
 function submitSearch() {
   loadTierLists()
 }
+
+watch(
+  topicId,
+  () => {
+    topicName.value = ''
+    error.value = ''
+    loadTierLists()
+  },
+  { immediate: true }
+)
 </script>
 
 <template>
-  <section class="dashboardHero">
-    <div class="dashboardHero__left">
-      <div class="dashboardHero__eyebrow">Collection</div>
-      <h2 class="dashboardHero__title">{{ gameName || gameId }}</h2>
-      <p class="dashboardHero__desc">이 게임의 공개 티어표를 탐색하고, 바로 새 보드를 만들어 같은 흐름으로 이어갈 수 있어요.</p>
+  <section class="pageHead">
+    <div class="pageHead__main">
+      <div class="pageHead__eyebrow">Collection</div>
+      <h2 class="pageHead__title">{{ topicTitle }}</h2>
+      <div class="pageHead__desc">이 주제의 공개 티어표를 같은 카드 레이아웃으로 살펴보고 이어서 새 티어표를 만들 수 있어요.</div>
+    </div>
+    <div class="pageHead__aside toolbar">
+      <input v-model="query" class="input" placeholder="제목 또는 작성자 검색" @keydown.enter.prevent="submitSearch" />
+      <button class="btn" @click="submitSearch">검색</button>
     </div>
   </section>
 
   <div v-if="error" class="error">{{ error }}</div>
   <section class="panel">
-    <div class="panel__head">
-      <div>
-        <div class="panel__title">공개 티어표</div>
-        <div class="panel__sub">제목이나 작성자로 빠르게 좁혀볼 수 있어요.</div>
-      </div>
-      <div class="searchBar">
-        <input v-model="query" class="searchBar__input" placeholder="제목 또는 작성자 검색" @keydown.enter.prevent="submitSearch" />
-        <button class="searchBar__button" @click="submitSearch">검색</button>
-      </div>
-    </div>
     <div v-if="tierLists.length === 0" class="empty">아직 공개 티어표가 없어요.</div>
-    <div v-else class="list">
-      <article v-for="t in tierLists" :key="t.id" class="boardCard">
-        <button class="boardCard__body" @click="openTierList(t.id)">
+    <div v-else class="list" :class="{ 'list--table': isListView }">
+      <article v-for="t in tierLists" :key="t.id" class="boardCard" :class="{ 'boardCard--list': isListView }">
+        <button class="boardCard__body" :class="{ 'boardCard__body--list': isListView }" @click="openTierList(t.id)">
           <div class="boardCard__thumbWrap">
-            <img v-if="tierListThumbnailUrl(t)" class="boardCard__thumb" :src="tierListThumbnailUrl(t)" :alt="t.title" />
+            <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">
@@ -112,7 +127,7 @@ function submitSearch() {
             </div>
             <div class="boardCard__metaRow">
               <div class="boardCard__author">
-                <img v-if="avatarSrcOf(t)" class="boardCard__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
+                <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>
@@ -126,87 +141,39 @@ function submitSearch() {
 </template>
 
 <style scoped>
-.dashboardHero {
-  display: flex;
-  gap: 18px;
-  align-items: flex-start;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  padding: 6px 2px 18px;
-}
-.dashboardHero__left {
-  display: grid;
-  gap: 8px;
-}
-.dashboardHero__eyebrow {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.42);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-.dashboardHero__title {
-  margin: 4px 0 6px;
-  font-size: 32px;
-  letter-spacing: -0.04em;
-  color: rgba(255, 255, 255, 0.96);
-}
-.dashboardHero__desc {
-  margin: 0;
-  color: rgba(255, 255, 255, 0.58);
-  max-width: 720px;
-}
 .panel {
-  /* border: 1px solid rgba(255, 255, 255, 0.08); */
   background: transparent;
   border-radius: 0;
   padding: 0;
 }
+.toolbar {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.input {
+  min-width: 240px;
+  padding: 11px 13px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
+  color: var(--theme-text);
+}
+.btn {
+  padding: 11px 13px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft-2);
+  color: var(--theme-text);
+  font-weight: 800;
+  cursor: pointer;
+}
 .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;
-  font-size: 18px;
-}
-.panel__sub {
-  margin-top: 6px;
-  color: rgba(255, 255, 255, 0.56);
-  font-size: 13px;
-}
-.panel__head {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  margin-bottom: 18px;
-}
-.searchBar {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.searchBar__input {
-  min-width: 240px;
-  padding: 11px 13px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.05);
-  color: rgba(255, 255, 255, 0.92);
-}
-.searchBar__button {
-  padding: 11px 14px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.06);
-  color: rgba(255, 255, 255, 0.92);
-  font-weight: 800;
-  cursor: pointer;
+  border: 1px solid var(--theme-danger-border);
+  background: var(--theme-danger-bg);
 }
 .empty {
   opacity: 0.75;
@@ -216,23 +183,29 @@ function submitSearch() {
   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 rgba(255, 255, 255, 0.16);
-  background: rgba(62, 62, 62, 0.82);
-  color: rgba(255, 255, 255, 0.92);
+  border: 1px solid var(--theme-card-border);
+  background: var(--theme-card-bg);
+  color: var(--theme-text);
   display: grid;
   overflow: hidden;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
   transition:
     transform 0.16s ease,
     background 0.16s ease;
 }
 .boardCard:hover {
-  background: rgba(70, 70, 70, 0.96);
+  background: var(--theme-card-bg-hover);
   transform: translateY(-2px);
 }
 .boardCard__body {
+  min-width: 0;
   text-align: left;
   padding: 0;
   border: 0;
@@ -242,12 +215,24 @@ function submitSearch() {
   width: 100%;
   display: grid;
 }
+
+.boardCard__body--list {
+  grid-template-columns: 76px minmax(0, 1fr);
+  align-items: center;
+}
 .boardCard__thumbWrap {
+  min-width: 0;
   width: 100%;
   aspect-ratio: 16 / 9;
   padding: 14px 14px 0;
   box-sizing: border-box;
 }
+
+.boardCard--list .boardCard__thumbWrap {
+  aspect-ratio: auto;
+  height: 100%;
+  padding: 14px 0 14px 14px;
+}
 .boardCard__thumb {
   width: 100%;
   height: 100%;
@@ -255,13 +240,21 @@ function submitSearch() {
   display: block;
   border-radius: 18px;
 }
+
+.boardCard--list .boardCard__thumb,
+.boardCard--list .boardCard__thumbPlaceholder {
+  width: 48px;
+  height: 48px;
+  min-height: 48px;
+  border-radius: 12px;
+}
 .boardCard__thumbPlaceholder {
   width: 100%;
   height: 100%;
-  background: #555;
+  background: var(--theme-thumb-fallback-bg);
   display: grid;
   place-items: center;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--theme-text-faint);
   font-size: 13px;
   font-weight: 700;
   border-radius: 18px;
@@ -271,29 +264,49 @@ function submitSearch() {
   min-width: 0;
   font-size: 18px;
   line-height: 1.35;
-  white-space: nowrap;
+  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: 10px;
+  gap: 8px;
+}
+
+.boardCard--list .boardCard__head {
+  height: 100%;
+  padding: 14px 16px 14px 0;
+  align-content: center;
 }
 .boardCard__titleRow,
 .boardCard__metaRow {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  justify-content: space-between;
+  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: 8px;
+  gap: 7px;
   align-items: center;
   font-size: 13px;
   opacity: 0.86;
+  overflow: hidden;
 }
 .boardCard__authorName {
   min-width: 0;
@@ -304,10 +317,10 @@ function submitSearch() {
 .boardCard__avatar {
   width: 22px;
   height: 22px;
-  border-radius: 6px;
+  border-radius: 9999px;
   object-fit: cover;
   border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--theme-border);
   flex: 0 0 auto;
 }
 .boardCard__avatar--fallback {
@@ -319,25 +332,42 @@ function submitSearch() {
 .boardCard__date,
 .favoriteStat {
   flex: 0 0 auto;
+  min-width: 0;
+  max-width: 100%;
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.64);
+  color: var(--theme-text-faint);
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-@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));
+
+.boardCard__date {
+  font-size: 10px;
+}
+@media (max-width: 900px) {
+  .boardCard__body--list {
+    grid-template-columns: 1fr;
+  }
+
+  .boardCard--list .boardCard__head {
+    padding: 0 18px 18px;
+  }
+
+  .boardCard--list .boardCard__thumbWrap {
+    padding: 14px 14px 0;
   }
 }
+
 @media (max-width: 720px) {
   .list {
     grid-template-columns: 1fr;
   }
-  .searchBar__input {
+
+  .toolbar {
+    width: 100%;
+  }
+
+  .input {
     min-width: 0;
     width: 100%;
   }

frontend/src/views/HomeView.vue

@@ -1,106 +1,117 @@
 <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 SvgIcon from '../components/SvgIcon.vue'
+import kidStarIcon from '../assets/icons/kid_star.svg'
 import { toApiUrl } from '../lib/runtime'
+import { loginPath, topicPath } from '../lib/paths'
 import { useAuthStore } from '../stores/auth'
 
+const route = useRoute()
 const router = useRouter()
 const auth = useAuthStore()
 
-const items = ref([])
+const templateRecords = ref([])
 const error = ref('')
-const games = computed(() => items.value.filter((item) => item.id !== 'freeform'))
+const loadingFavoriteId = ref('')
+const query = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim().toLowerCase() : ''))
+const templates = computed(() => {
+  const filtered = templateRecords.value
+    .filter((item) => item.id !== 'freeform')
+    .filter((item) => {
+      if (!query.value) return true
+      const haystack = `${item.name || ''} ${item.id || ''}`.toLowerCase()
+      return haystack.includes(query.value)
+    })
 
-onMounted(async () => {
+  return filtered.slice().sort((a, b) => {
+    if (!!a.isFavorited !== !!b.isFavorited) return a.isFavorited ? -1 : 1
+    const rankA = a.displayRank == null ? Number.MAX_SAFE_INTEGER : a.displayRank
+    const rankB = b.displayRank == null ? Number.MAX_SAFE_INTEGER : b.displayRank
+    if (rankA !== rankB) return rankA - rankB
+    return (a.name || '').localeCompare(b.name || '', 'ko')
+  })
+})
+
+async function loadTemplates() {
   try {
-    const data = await api.listGames()
-    items.value = data.games || []
+    const data = await api.listTopics()
+    templateRecords.value = data.games || []
   } catch (e) {
     error.value = '백엔드에 연결할 수 없어요. backend 서버가 실행 중인지 확인해주세요.'
   }
-})
-
-function goGame(gameId) {
-  router.push(`/games/${gameId}`)
 }
 
-function goFreeform() {
+onMounted(loadTemplates)
+watch(() => auth.user?.id, loadTemplates)
+
+function openTopic(templateId) {
+  router.push(topicPath(templateId))
+}
+
+async function toggleFavorite(template, event) {
+  event?.stopPropagation()
   if (!auth.user) {
-    router.push('/login?redirect=/editor/freeform/new')
+    router.push(loginPath(route.fullPath || '/'))
     return
   }
-  router.push('/editor/freeform/new')
+  if (!template?.id || loadingFavoriteId.value === template.id) return
+
+  try {
+    loadingFavoriteId.value = template.id
+    const res = template.isFavorited ? await api.unfavoriteTopic(template.id) : await api.favoriteTopic(template.id)
+    templateRecords.value = templateRecords.value.map((entry) => (entry.id === template.id ? { ...entry, ...res.game } : entry))
+  } catch (e) {
+    error.value = '즐겨찾기 변경에 실패했어요.'
+  } finally {
+    loadingFavoriteId.value = ''
+  }
 }
 
-function thumbUrl(g) {
-  if (!g.thumbnailSrc) return ''
-  return toApiUrl(g.thumbnailSrc)
+function templateThumbUrl(template) {
+  return template.thumbnailSrc ? toApiUrl(template.thumbnailSrc) : ''
 }
-
 </script>
 
 <template>
-  <section class="dashboardHero">
-    <div class="dashboardHero__copy">
-      <div class="dashboardHero__eyebrow">Workspace</div>
-      <h1 class="dashboardHero__title">Game Library</h1>
-      <p class="dashboardHero__desc">자주 쓰는 게임 템플릿을 빠르게 고르고, 필요하면 바로 커스텀 티어표를 시작할 수 있어요.</p>
+  <section class="pageHead">
+    <div class="pageHead__main">
+      <div class="pageHead__eyebrow">Topic</div>
+      <h1 class="pageHead__title">주제 선택</h1>
+      <p class="pageHead__desc">자주 쓰는 주제 템플릿을 빠르게 고르고, 필요하면 바로 커스텀 티어표를 시작할 수 있어요.</p>
+      <p v-if="query" class="pageHead__searchState">"{{ query }}"에 맞는 주제 템플릿만 보고 있어요.</p>
     </div>
   </section>
 
   <div v-if="error" class="error">{{ error }}</div>
-  <section class="libraryGrid">
-    <button v-for="g in games" :key="g.id" class="libraryCard" @click="goGame(g.id)">
-      <div class="libraryCard__thumbWrap">
-        <img v-if="thumbUrl(g)" class="libraryCard__thumb" :src="thumbUrl(g)" :alt="g.name" />
+  <TransitionGroup v-if="templates.length" name="libraryCard" tag="section" class="libraryGrid">
+    <article v-for="template in templates" :key="template.id" class="libraryCard">
+      <button
+        class="libraryCard__favorite"
+        type="button"
+        :class="{ 'libraryCard__favorite--active': template.isFavorited }"
+        :disabled="loadingFavoriteId === template.id"
+        @click.stop="toggleFavorite(template, $event)"
+      >
+        <SvgIcon class="libraryCard__favoriteIcon" :src="kidStarIcon" :size="18" />
+      </button>
+      <button class="libraryCard__main" type="button" @click="openTopic(template.id)">
+        <div class="libraryCard__thumbWrap">
+        <img v-if="templateThumbUrl(template)" class="libraryCard__thumb" :src="templateThumbUrl(template)" :alt="template.name" draggable="false" />
         <div v-else class="libraryCard__thumbFallback">대표 썸네일</div>
       </div>
-      <div class="libraryCard__body">
-        <div class="libraryCard__title">{{ g.name }}</div>
-        <div class="libraryCard__meta">
-          <span class="libraryCard__metaDot"></span>
-          <span>{{ g.id }}</span>
+        <div class="libraryCard__body">
+          <div class="libraryCard__title">{{ template.name }}</div>
+          <div class="libraryCard__meta">{{ template.id }}</div>
         </div>
-      </div>
-    </button>
-  </section>
+      </button>
+    </article>
+  </TransitionGroup>
+  <div v-else class="libraryEmpty">{{ query ? '검색어에 맞는 주제 템플릿이 없어요.' : '표시할 주제 템플릿이 없어요.' }}</div>
 </template>
 
 <style scoped>
-.dashboardHero {
-  display: flex;
-  gap: 18px;
-  justify-content: space-between;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  margin-top: 2px;
-  margin-bottom: 18px;
-  padding: 6px 2px 18px;
-}
-.dashboardHero__copy {
-  display: grid;
-  gap: 8px;
-  max-width: 720px;
-}
-.dashboardHero__eyebrow {
-  font-size: 11px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.42);
-}
-.dashboardHero__title {
-  margin: 0;
-  font-size: 34px;
-  letter-spacing: -0.04em;
-  color: rgba(255, 255, 255, 0.96);
-}
-.dashboardHero__desc {
-  margin: 0;
-  color: rgba(255, 255, 255, 0.58);
-  line-height: 1.5;
-  max-width: 720px;
-}
 .libraryGrid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -110,35 +121,79 @@ function thumbUrl(g) {
   margin: 0 0 16px;
   padding: 10px 12px;
   border-radius: 12px;
-  border: 1px solid rgba(239, 68, 68, 0.18);
-  background: rgba(239, 68, 68, 0.1);
-  color: rgba(255, 255, 255, 0.92);
+  border: 1px solid var(--theme-danger-border);
+  background: var(--theme-danger-bg);
+  color: var(--theme-text);
+}
+.pageHead__searchState {
+  margin-top: 8px;
+  color: var(--theme-text-muted);
 }
 .libraryCard {
+  position: relative;
   text-align: left;
   padding: 14px;
   border-radius: 22px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  background: rgba(62, 62, 62, 0.82);
-  color: rgba(255, 255, 255, 0.92);
+  border: 1px solid var(--theme-card-border);
+  background: var(--theme-card-bg);
+  color: var(--theme-text);
   cursor: pointer;
   display: grid;
   gap: 12px;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
-  transition:
-    transform 0.16s ease,
-    background 0.16s ease;
+  box-shadow: inset 0 1px 0 var(--theme-card-shadow);
+  transition: transform 0.16s ease, background 0.16s ease;
+  will-change: transform, opacity;
 }
 .libraryCard:hover {
-  background: rgba(70, 70, 70, 0.96);
+  background: var(--theme-card-bg-hover);
   transform: translateY(-2px);
 }
+.libraryCard__main {
+  display: grid;
+  gap: 12px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.libraryCard__favorite {
+  position: absolute;
+  bottom: 24px;
+  right: 14px;
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(15, 15, 15, 0.72);
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 17px;
+  line-height: 1;
+  cursor: pointer;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.libraryCard__favorite--active {
+  background: rgba(54, 45, 10, 0.92);
+  border-color: rgba(255, 216, 107, 0.28);
+}
+.libraryCard__favoriteIcon {
+  opacity: 0.76;
+  color: rgba(255, 255, 255, 0.94);
+}
+.libraryCard__favorite--active .libraryCard__favoriteIcon {
+  opacity: 1;
+  color: #ffd86b;
+}
 .libraryCard__thumbWrap {
   width: 100%;
   aspect-ratio: 16 / 9;
   border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: #555;
+  border: 1px solid var(--theme-surface-soft-2);
+  background: var(--theme-thumb-fallback-bg);
   overflow: hidden;
   display: grid;
   place-items: center;
@@ -149,32 +204,45 @@ function thumbUrl(g) {
   object-fit: cover;
 }
 .libraryCard__thumbFallback {
-  font-size: 13px;
-  font-weight: 700;
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--theme-text-faint);
 }
 .libraryCard__body {
   display: grid;
-  gap: 8px;
 }
 .libraryCard__title {
   font-weight: 800;
   letter-spacing: -0.02em;
-  font-size: 16px;
+  font-size: 18px;
 }
 .libraryCard__meta {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--theme-text-soft);
   font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.libraryCard__metaDot {
-  width: 10px;
-  height: 10px;
-  border-radius: 3px;
-  background: rgba(255, 255, 255, 0.9);
+.libraryCard-move,
+.libraryCard-enter-active,
+.libraryCard-leave-active {
+  transition: transform 280ms ease, opacity 220ms ease;
+}
+
+.libraryCard-enter-from,
+.libraryCard-leave-to {
+  opacity: 0;
+  transform: translateY(10px) scale(0.985);
+}
+
+.libraryCard-leave-active {
+  position: absolute;
+  width: calc(100% - 0px);
+  pointer-events: none;
+}
+
+.libraryEmpty {
+  padding: 20px 0;
+  color: var(--theme-text-muted);
 }
 @media (max-width: 1400px) {
   .libraryGrid {
@@ -192,17 +260,6 @@ function thumbUrl(g) {
   }
 }
 @media (max-width: 720px) {
-  .dashboardHero {
-    align-items: stretch;
-  }
-  .dashboardToolbar {
-    width: 100%;
-  }
-  .dashboardToolbar__ghost,
-  .dashboardToolbar__stat,
-  .customTierBtn {
-    flex: 1 1 100%;
-  }
   .libraryGrid {
     grid-template-columns: 1fr;
   }

frontend/src/views/LoginView.vue

@@ -1,8 +1,9 @@
 <script setup>
-import { onMounted, ref, watch } 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'
 import { useToast } from '../composables/useToast'
 
 const router = useRouter()
@@ -12,6 +13,7 @@ const toast = useToast()
 
 const email = ref('')
 const password = ref('')
+const passwordConfirm = ref('')
 const mode = ref('login')
 const error = ref('')
 const hasUsers = ref(true)
@@ -22,7 +24,22 @@ watch(error, (message) => {
   error.value = ''
 })
 
+const title = computed(() => (mode.value === 'signup' ? '회원가입' : '로그인'))
+const description = computed(() =>
+  mode.value === 'signup'
+    ? '티어표를 저장하고 즐겨찾기, 개인 설정을 관리할 수 있도록 계정을 만들어요.'
+    : '저장한 티어표와 즐겨찾기, 프로필 설정을 이어서 관리할 수 있어요.'
+)
+const submitLabel = computed(() => (mode.value === 'signup' ? '가입하기' : '로그인'))
+const authReady = computed(() => auth.hydrated)
+const checkingSession = computed(() => !authReady.value || auth.status === 'loading')
+
 onMounted(async () => {
+  if (!auth.hydrated) await auth.refresh()
+  if (auth.user) {
+    router.replace(typeof route.query.redirect === 'string' ? route.query.redirect : mePath())
+    return
+  }
   try {
     const meta = await api.authMeta()
     hasUsers.value = !!meta.hasUsers
@@ -31,12 +48,25 @@ onMounted(async () => {
   }
 })
 
+watch(
+  () => [auth.hydrated, auth.user],
+  ([hydrated, user]) => {
+    if (!hydrated || !user) return
+    router.replace(typeof route.query.redirect === 'string' ? route.query.redirect : mePath())
+  },
+  { immediate: true }
+)
+
 async function submit() {
   error.value = ''
+  if (mode.value === 'signup' && password.value !== passwordConfirm.value) {
+    error.value = '비밀번호 확인이 일치하지 않아요.'
+    return
+  }
   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')
+    router.push(typeof route.query.redirect === 'string' ? route.query.redirect : mePath())
   } catch (e) {
     error.value = '로그인/회원가입에 실패했어요.'
   }
@@ -44,104 +74,223 @@ async function submit() {
 </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' }" @click="mode = '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="mode = 'signup'">
           회원가입
         </button>
       </div>
-      <label class="label">이메일</label>
-      <input v-model="email" class="input" placeholder="you@example.com" autocomplete="email" />
 
-      <label class="label">비밀번호</label>
-      <input
-        v-model="password"
-        class="input"
-        type="password"
-        placeholder="********"
-        autocomplete="current-password"
-      />
+      <form class="authFields" @submit.prevent="submit">
+        <label class="field">
+          <span class="field__label">이메일</span>
+          <input v-model="email" class="field__input" placeholder="you@example.com" autocomplete="email" maxlength="255" />
+          <span class="field__hint">로그인과 알림에 사용되는 계정 이메일입니다. {{ email.length }}/255자</span>
+        </label>
 
-      <button class="btn" type="submit">{{ mode === 'signup' ? '회원가입' : '로그인' }}</button>
+        <label class="field">
+          <span class="field__label">비밀번호</span>
+          <input
+            v-model="password"
+            class="field__input"
+            type="password"
+            placeholder="********"
+            autocomplete="current-password"
+            maxlength="120"
+          />
+          <span class="field__hint">6~120자 입력 가능 · {{ password.length }}/120자</span>
+        </label>
 
-      <div v-if="!hasUsers" class="hint">첫 회원가입 계정은 자동으로 admin 권한이 부여됩니다(개발용).</div>
-    </form>
+        <label v-if="mode === 'signup'" 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="roleBadge">첫 회원가입 계정은 자동으로 관리자 권한이 부여됩니다.</div>
+
+        <div class="authActions">
+          <button class="secondaryAction" type="button" @click="router.push(homePath())">취소</button>
+          <button class="primaryAction" type="submit">{{ 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);
-}
-.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%;
-  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);
+
+.field__input:focus {
+  border-bottom-color: rgba(96, 165, 250, 0.9);
+}
+
+.field__hint {
+  font-size: 12px;
+  color: var(--theme-text-soft);
+}
+
+.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;
+}
+
+.authActions {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding-top: 8px;
+}
+
+.primaryAction,
+.secondaryAction {
+  padding: 12px 18px;
+  border-radius: 999px;
+  font-weight: 700;
   cursor: pointer;
-  font-weight: 800;
 }
-.btn:hover {
-  background: rgba(96, 165, 250, 0.26);
+
+.primaryAction {
+  border: 1px solid rgba(76, 133, 245, 0.96);
+  background: var(--theme-accent-bg);
+  color: var(--theme-accent-text);
 }
-.hint {
-  margin-top: 10px;
-  opacity: 0.72;
-  font-size: 13px;
+
+.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

@@ -4,11 +4,13 @@ import { 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'
 
 const router = useRouter()
 const toast = useToast()
 const myLists = ref([])
 const error = ref('')
+const brokenThumbnailIds = ref({})
 
 watch(error, (message) => {
   if (!message) return
@@ -37,143 +39,82 @@ function avatarFallbackOf(tierList) {
 }
 
 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) {
     toast.error('로그인이 필요해요.')
-    router.push('/login?redirect=/me')
+    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)
-    toast.success('티어표를 삭제했어요.')
-  } catch (e) {
-    error.value = '티어표 삭제에 실패했어요.'
-  }
+  router.push(editorPath(t.gameId, t.id))
 }
 </script>
 
 <template>
-  <section class="wrap">
-    <header class="head">
-      <div>
-        <div class="head__eyebrow">Library</div>
-        <h2 class="title">내 티어표</h2>
-        <div class="desc">직접 저장한 티어표를 같은 카드 레이아웃으로 다시 열고 정리할 수 있어요.</div>
-      </div>
-      <div class="head__stat">
-        <span class="head__statLabel">Saved Lists</span>
-        <strong class="head__statValue">{{ myLists.length }}</strong>
-      </div>
-    </header>
-    <div class="card">
-      <div v-if="myLists.length === 0" class="empty">아직 저장한 티어표가 없어요.</div>
-      <div v-else class="list">
-        <article v-for="t in myLists" :key="t.id" class="boardCard">
-          <button class="boardCard__body" @click="openList(t)">
-            <div class="boardCard__thumbWrap">
-              <img v-if="tierListThumbnailUrl(t)" class="boardCard__thumb" :src="tierListThumbnailUrl(t)" :alt="t.title" />
-              <div v-else class="boardCard__thumbPlaceholder">대표 썸네일</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 class="list">
+      <article v-for="t in myLists" :key="t.id" class="boardCard">
+        <button class="boardCard__body" @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="boardCard__head">
-              <div class="boardCard__titleRow">
-                <div class="boardCard__title">{{ t.title }}</div>
-                <div class="favoriteStat">♡ {{ t.favoriteCount || 0 }}</div>
-              </div>
-              <div class="boardCard__metaRow">
-                <div class="boardCard__author">
-                  <img v-if="avatarSrcOf(t)" class="boardCard__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
-                  <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 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>
-          </button>
-          <button class="link link--danger" @click="removeList(t)">삭제</button>
-        </article>
-      </div>
+          </div>
+        </button>
+      </article>
     </div>
   </section>
 </template>
 
 <style scoped>
-.wrap {
-  padding: 4px 2px;
-}
-.head {
-  display: flex;
-  gap: 16px;
-  align-items: flex-start;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  margin-bottom: 18px;
-  padding: 6px 2px 8px;
-}
-.head__eyebrow {
-  font-size: 11px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.42);
-}
-.title {
-  margin: 4px 0 6px;
-  font-size: 32px;
-  letter-spacing: -0.04em;
-  color: rgba(255, 255, 255, 0.96);
-}
-.desc {
-  color: rgba(255, 255, 255, 0.58);
-}
-.head__stat {
-  display: grid;
-  gap: 2px;
-  min-width: 112px;
-  padding: 12px 14px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.045);
-}
-.head__statLabel {
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.48);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-.head__statValue {
-  font-size: 18px;
-  font-weight: 900;
-}
-.card {
-  border: 0;
+.panel {
   background: transparent;
   border-radius: 0;
   padding: 0;
 }
-.link {
-  padding: 10px 12px;
-  border-radius: 14px;
-  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;
-}
 .empty {
   opacity: 0.75;
 }
@@ -183,23 +124,22 @@ async function removeList(t) {
   gap: 18px;
 }
 .boardCard {
-  display: grid;
+  min-width: 0;
   border-radius: 22px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  background: rgba(62, 62, 62, 0.82);
-  color: rgba(255, 255, 255, 0.92);
+  border: 1px solid var(--theme-card-border);
+  background: var(--theme-card-bg);
+  color: var(--theme-text);
   overflow: hidden;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  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: rgba(70, 70, 70, 0.96);
+  background: var(--theme-card-bg-hover);
 }
 .boardCard__body {
-  flex: 1 1 auto;
   min-width: 0;
   text-align: left;
   cursor: pointer;
@@ -207,9 +147,12 @@ async function removeList(t) {
   background: transparent;
   color: inherit;
   padding: 0;
+  width: 100%;
   display: grid;
+  overflow: hidden;
 }
 .boardCard__thumbWrap {
+  min-width: 0;
   width: 100%;
   aspect-ratio: 16 / 9;
   padding: 14px 14px 0;
@@ -225,41 +168,55 @@ async function removeList(t) {
 .boardCard__thumbPlaceholder {
   width: 100%;
   height: 100%;
-  background: #555;
+  background: var(--theme-thumb-fallback-bg);
   display: grid;
   place-items: center;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--theme-text-faint);
   font-size: 13px;
   font-weight: 700;
   border-radius: 18px;
 }
 .boardCard__title {
-  font-weight: 900;
+  font-weight: 800;
   min-width: 0;
   font-size: 18px;
-  white-space: nowrap;
+  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: 10px;
+  gap: 8px;
+  overflow: hidden;
 }
 .boardCard__titleRow,
 .boardCard__metaRow {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  justify-content: space-between;
+  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: 8px;
+  gap: 7px;
   align-items: center;
   font-size: 13px;
-  opacity: 0.84;
+  opacity: 0.86;
+  overflow: hidden;
 }
 .boardCard__authorName {
   min-width: 0;
@@ -270,10 +227,10 @@ async function removeList(t) {
 .boardCard__avatar {
   width: 22px;
   height: 22px;
-  border-radius: 6px;
+  border-radius: 9999px;
   object-fit: cover;
   border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--theme-border);
   flex: 0 0 auto;
 }
 .boardCard__avatar--fallback {
@@ -285,29 +242,28 @@ async function removeList(t) {
 .boardCard__date,
 .favoriteStat {
   flex: 0 0 auto;
+  min-width: 0;
+  max-width: 100%;
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.64);
+  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);
-  margin: 0 18px 18px;
+.boardCard__date {
+  font-size: 10px;
 }
 @media (max-width: 1400px) {
   .list {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
-@media (max-width: 1024px) {
+@media (max-width: 1200px) {
   .list {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
-@media (max-width: 720px) {
-  .head__stat {
-    width: 100%;
-  }
+@media (max-width: 900px) {
   .list {
     grid-template-columns: 1fr;
   }

frontend/src/views/ProfileView.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth'
+import { homePath, loginPath } from '../lib/paths'
 import { toApiUrl } from '../lib/runtime'
 import { useToast } from '../composables/useToast'
 
@@ -14,6 +15,8 @@ const saving = ref(false)
 const nickname = ref('')
 const previewUrl = ref('')
 const avatarFile = ref(null)
+const removeAvatar = ref(false)
+const fileInput = ref(null)
 
 watch(error, (message) => {
   if (!message) return
@@ -23,26 +26,58 @@ watch(error, (message) => {
 
 const avatarUrl = computed(() => {
   if (previewUrl.value) return previewUrl.value
+  if (removeAvatar.value) return ''
   if (!auth.user?.avatarSrc) return ''
   return toApiUrl(auth.user.avatarSrc)
 })
 
-onMounted(async () => {
-  await auth.refresh()
-  if (!auth.user) router.push('/login')
-  nickname.value = auth.user?.nickname || ''
+const authReady = computed(() => auth.hydrated)
+
+const displayInitial = computed(() => {
+  const email = auth.user?.email || 'U'
+  return email[0].toUpperCase()
 })
 
+onMounted(async () => {
+  if (!auth.hydrated) await auth.refresh()
+  if (!auth.user) {
+    router.replace(loginPath())
+    return
+  }
+  nickname.value = auth.user?.nickname || ''
+  removeAvatar.value = false
+})
+
+onBeforeUnmount(() => {
+  if (previewUrl.value) URL.revokeObjectURL(previewUrl.value)
+})
+
+function openAvatarPicker() {
+  fileInput.value?.click()
+}
+
 function onAvatarChange(e) {
   const file = e.target.files && e.target.files[0]
   if (!file) return
 
   error.value = ''
+  removeAvatar.value = false
   avatarFile.value = file
   if (previewUrl.value) URL.revokeObjectURL(previewUrl.value)
   previewUrl.value = URL.createObjectURL(file)
 }
 
+function clearAvatar() {
+  error.value = ''
+  avatarFile.value = null
+  removeAvatar.value = true
+  if (previewUrl.value) {
+    URL.revokeObjectURL(previewUrl.value)
+    previewUrl.value = ''
+  }
+  if (fileInput.value) fileInput.value.value = ''
+}
+
 async function saveProfile() {
   error.value = ''
   saving.value = true
@@ -50,6 +85,8 @@ async function saveProfile() {
     const fd = new FormData()
     fd.append('nickname', nickname.value)
     if (avatarFile.value) fd.append('avatar', avatarFile.value)
+    if (removeAvatar.value) fd.append('removeAvatar', '1')
+
     const res = await fetch(toApiUrl('/api/auth/profile'), {
       method: 'POST',
       credentials: 'include',
@@ -59,10 +96,12 @@ async function saveProfile() {
     const data = await res.json()
     auth.user = data.user
     avatarFile.value = null
+    removeAvatar.value = false
     if (previewUrl.value) {
       URL.revokeObjectURL(previewUrl.value)
       previewUrl.value = ''
     }
+    if (fileInput.value) fileInput.value.value = ''
     toast.success('프로필을 저장했어요.')
   } catch (e2) {
     error.value = '프로필 저장에 실패했어요.'
@@ -74,150 +113,299 @@ async function saveProfile() {
 async function logout() {
   await auth.logout()
   toast.success('로그아웃했어요.')
-  router.push('/')
+  router.push(homePath())
 }
 </script>
 
 <template>
-  <section class="wrap">
-    <h2 class="title">프로필</h2>
-
-    <div class="card" v-if="auth.user">
-      <div class="row">
-        <div class="avatar">
-          <img v-if="avatarUrl" :src="avatarUrl" class="avatarImg" alt="avatar" />
-          <div v-else class="avatarFallback">{{ (auth.user.email || 'U')[0].toUpperCase() }}</div>
-        </div>
-        <div class="meta">
-          <div class="email">{{ auth.user.email }}</div>
-          <input v-model="nickname" class="nicknameInput" placeholder="작성자 닉네임" />
-          <div class="badge" v-if="auth.user.isAdmin">admin</div>
-        </div>
+  <section class="pageWrap">
+    <header class="pageHead">
+      <div class="pageHead__main">
+        <div class="pageHead__eyebrow">Account</div>
+        <h2 class="pageHead__title">설정</h2>
+        <div class="pageHead__desc">계정 정보를 간결하게 정리하고, 프로필 이미지를 클릭해서 바로 변경할 수 있어요.</div>
       </div>
+    </header>
 
-      <div class="upload">
-        <label class="label">아바타 업로드</label>
-        <input class="file" type="file" accept="image/*" :disabled="saving" @change="onAvatarChange" />
-        <div class="hint">파일 선택은 미리보기만 바뀌고, 실제 반영은 저장 버튼을 눌렀을 때 진행됩니다.</div>
-        <div class="actions">
-          <button class="saveBtn" :disabled="saving" @click="saveProfile">
-            {{ saving ? '저장중...' : '프로필 저장' }}
+    <section v-if="!authReady" class="settingsScreen settingsScreen--loading">
+      <div class="settingsLoading">계정 정보를 불러오고 있어요.</div>
+    </section>
+
+    <section v-else-if="auth.user" class="settingsScreen">
+      <div class="settingsIdentity">
+        <div class="avatarButtonWrap">
+          <button class="avatarButton" type="button" @click="openAvatarPicker">
+            <img v-if="avatarUrl" :src="avatarUrl" class="avatarButton__image" alt="avatar" draggable="false" />
+            <div v-else class="avatarButton__fallback">{{ displayInitial }}</div>
+            <div class="avatarButton__overlay">
+              <span>{{ avatarUrl ? '이미지 변경' : '이미지 추가' }}</span>
+            </div>
+          </button>
+          <button
+            v-if="avatarUrl || previewUrl"
+            class="avatarButton__remove"
+            type="button"
+            aria-label="프로필 이미지 삭제"
+            @click="clearAvatar"
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M6 6l12 12M18 6L6 18" />
+            </svg>
           </button>
-          <button class="logoutBtn" type="button" @click="logout">로그아웃</button>
         </div>
+
+        <div class="identityMeta">
+          <div class="identityMeta__eyebrow">Profile Photo</div>
+          <div class="identityMeta__title">프로필 이미지</div>
+          <div class="identityMeta__desc">아바타를 클릭해서 이미지를 추가하거나 교체할 수 있습니다.</div>
+        </div>
+
+        <input ref="fileInput" class="hiddenInput" type="file" accept="image/*" :disabled="saving" @change="onAvatarChange" />
       </div>
-    </div>
+
+      <div class="settingsFields">
+        <label class="field">
+          <span class="field__label">닉네임</span>
+          <input v-model="nickname" class="field__input" maxlength="40" placeholder="작성자 닉네임" />
+          <span class="field__hint">티어표 작성자 이름으로 표시됩니다. {{ nickname.length }}/40자</span>
+        </label>
+
+        <label class="field">
+          <span class="field__label">이메일</span>
+          <input :value="auth.user.email" class="field__input field__input--readonly" readonly />
+          <span class="field__hint">현재 로그인에 사용 중인 계정입니다.</span>
+        </label>
+
+        <div v-if="auth.user.isAdmin" class="roleBadge">Administrator</div>
+      </div>
+
+      <div class="settingsActions">
+        <button class="primaryAction" :disabled="saving" @click="saveProfile">{{ saving ? '저장 중...' : '변경사항 저장' }}</button>
+        <button class="secondaryAction" type="button" @click="logout">로그아웃</button>
+      </div>
+    </section>
   </section>
 </template>
 
 <style scoped>
-.wrap {
-  padding: 10px 2px;
+.settingsScreen {
+  display: grid;
+  gap: 32px;
+  max-width: 620px;
+  padding-top: 4px;
 }
-.title {
-  margin: 0 0 10px;
-  font-size: 26px;
-  letter-spacing: -0.02em;
-}
-.card {
-  max-width: 520px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: 16px;
-  padding: 14px;
-}
-.row {
-  display: flex;
-  gap: 12px;
+
+.settingsScreen--loading {
+  min-height: 240px;
   align-items: center;
 }
-.avatar {
-  width: 68px;
-  height: 68px;
-  border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(0, 0, 0, 0.16);
+
+.settingsLoading {
+  color: var(--theme-text-muted);
+  font-size: 15px;
+}
+
+.settingsIdentity {
+  display: grid;
+  grid-template-columns: 120px minmax(0, 1fr);
+  gap: 24px;
+  align-items: center;
+}
+
+.avatarButtonWrap {
+  position: relative;
+  width: 120px;
+  height: 120px;
+}
+
+.avatarButton {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  border: 1px solid var(--theme-border-strong);
+  border-radius: 9999px;
+  background: var(--theme-pill-bg);
+  color: var(--theme-text);
   overflow: hidden;
+  cursor: pointer;
   display: grid;
   place-items: center;
+  box-shadow: var(--theme-card-shadow);
 }
-.avatarImg {
+
+.avatarButton__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.avatarFallback {
+
+.avatarButton__fallback {
+  font-size: 34px;
   font-weight: 900;
-  font-size: 20px;
-  opacity: 0.9;
+  color: var(--theme-text);
 }
-.meta {
+
+.avatarButton__overlay {
+  position: absolute;
+  inset: auto 0 0 0;
+  padding: 12px 10px;
+  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--theme-text);
+}
+
+.avatarButton__remove {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 30px;
+  height: 30px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--theme-shell-bg);
+  color: var(--theme-text);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  z-index: 2;
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
+  backdrop-filter: blur(10px);
+}
+
+.avatarButton__remove svg {
+  width: 14px;
+  height: 14px;
+  stroke: currentColor;
+  stroke-width: 2.1;
+  fill: none;
+  stroke-linecap: round;
+}
+
+.avatarButton__remove:hover {
+  background: rgba(190, 24, 24, 0.88);
+  color: var(--theme-accent-text);
+}
+
+.identityMeta {
   display: grid;
   gap: 6px;
-  flex: 1;
 }
-.email {
-  font-weight: 900;
+
+.identityMeta__eyebrow {
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--theme-text-soft);
 }
-.nicknameInput {
+
+.identityMeta__title {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+
+.identityMeta__desc {
+  color: var(--theme-text-muted);
+  line-height: 1.6;
+}
+
+
+.hiddenInput {
+  display: none;
+}
+
+.settingsFields {
+  display: grid;
+  gap: 20px;
+}
+
+.field {
+  display: grid;
+  gap: 8px;
+}
+
+.field__label {
+  font-size: 13px;
+  color: var(--theme-text-muted);
+}
+
+.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;
 }
-.badge {
+
+.field__input:focus {
+  border-bottom-color: rgba(96, 165, 250, 0.9);
+}
+
+.field__input--readonly {
+  color: var(--theme-text-muted);
+}
+
+.field__hint {
   font-size: 12px;
-  padding: 2px 8px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  border-radius: 999px;
+  color: var(--theme-text-soft);
+}
+
+.roleBadge {
   width: fit-content;
-  opacity: 0.9;
+  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;
 }
-.upload {
-  margin-top: 14px;
-  padding-top: 12px;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-}
-.label {
-  display: block;
-  font-size: 13px;
-  opacity: 0.78;
-  margin-bottom: 6px;
-}
-.file {
-  width: 100%;
-}
-.hint {
-  margin-top: 8px;
-  opacity: 0.72;
-  font-size: 13px;
-}
-.saveBtn {
-  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;
-}
-.actions {
-  margin-top: 12px;
+
+.settingsActions {
   display: flex;
-  gap: 10px;
+  gap: 12px;
   flex-wrap: wrap;
+  padding-top: 8px;
 }
-.logoutBtn {
-  padding: 10px 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(239, 68, 68, 0.24);
-  background: rgba(239, 68, 68, 0.12);
-  color: rgba(255, 255, 255, 0.92);
+
+.primaryAction,
+.secondaryAction {
+  padding: 12px 18px;
+  border-radius: 999px;
+  font-weight: 700;
   cursor: pointer;
-  font-weight: 800;
+}
+
+.primaryAction {
+  border: 1px solid rgba(76, 133, 245, 0.96);
+  background: var(--theme-accent-bg);
+  color: var(--theme-accent-text);
+}
+
+.secondaryAction {
+  border: 1px solid var(--theme-border-strong);
+  background: var(--theme-surface-soft);
+  color: var(--theme-text);
+}
+
+@media (max-width: 720px) {
+  .settingsIdentity {
+    grid-template-columns: 1fr;
+  }
+
+  .avatarButtonWrap {
+    width: 108px;
+    height: 108px;
+  }
+
+  .avatarButton {
+    width: 108px;
+    height: 108px;
+  }
 }
 </style>

frontend/src/views/SearchResultsView.vue

@@ -3,6 +3,7 @@ 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'
 
 const route = useRoute()
 const router = useRouter()
@@ -37,7 +38,7 @@ function tierListThumbnailUrl(tierList) {
 }
 
 function openTierList(tierList) {
-  router.push(`/editor/${tierList.gameId}/${tierList.id}`)
+  router.push(editorPath(tierList.gameId, tierList.id))
 }
 
 async function loadResults() {
@@ -65,13 +66,13 @@ watch(
 
 <template>
   <section class="wrap">
-    <div class="head">
-      <div>
-        <div class="head__eyebrow">Search</div>
-        <h2 class="title">전체 티어표 검색</h2>
-        <div class="desc">공개된 모든 티어표를 제목과 작성자 기준으로 찾아볼 수 있어요.</div>
+    <section class="pageHead">
+      <div class="pageHead__main">
+        <div class="pageHead__eyebrow">Search</div>
+        <h2 class="pageHead__title">전체 티어표 검색</h2>
+        <div class="pageHead__desc">공개된 티어표를 제목과 작성자 기준으로 다시 찾아볼 수 있어요.</div>
       </div>
-    </div>
+    </section>
 
     <div v-if="error" class="error">{{ error }}</div>
     <div v-else-if="loading" class="empty">검색 중이에요.</div>
@@ -80,7 +81,7 @@ watch(
       <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" />
+            <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">
@@ -92,7 +93,7 @@ watch(
             </div>
             <div class="boardCard__metaRow">
               <div class="boardCard__author">
-                <img v-if="avatarSrcOf(tierList)" class="boardCard__avatar" :src="avatarSrcOf(tierList)" :alt="displayNameOf(tierList)" />
+                <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>
@@ -110,36 +111,12 @@ watch(
   display: grid;
   gap: 18px;
 }
-.head {
-  display: flex;
-  gap: 14px;
-  justify-content: space-between;
-  align-items: flex-end;
-  flex-wrap: wrap;
-  padding: 6px 2px 8px;
-}
-.head__eyebrow {
-  font-size: 11px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.42);
-}
-.title {
-  margin: 4px 0 0;
-  font-size: 32px;
-  color: rgba(255, 255, 255, 0.96);
-  letter-spacing: -0.04em;
-}
-.desc {
-  margin-top: 6px;
-  color: rgba(255, 255, 255, 0.58);
-}
 .error {
   margin: 0 0 8px;
   padding: 10px 12px;
   border-radius: 12px;
-  border: 1px solid rgba(239, 68, 68, 0.18);
-  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid var(--theme-danger-border);
+  background: var(--theme-danger-bg);
 }
 .empty {
   opacity: 0.76;
@@ -151,16 +128,16 @@ watch(
 }
 .boardCard {
   border-radius: 22px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  background: rgba(62, 62, 62, 0.82);
+  border: 1px solid var(--theme-card-border);
+  background: var(--theme-card-bg);
   overflow: hidden;
   display: grid;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  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: rgba(70, 70, 70, 0.96);
+  background: var(--theme-card-bg-hover);
 }
 .boardCard__body {
   border: 0;
@@ -188,25 +165,29 @@ watch(
   object-fit: cover;
 }
 .boardCard__thumbPlaceholder {
-  background: #555;
+  background: var(--theme-thumb-fallback-bg);
   display: grid;
   place-items: center;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--theme-text-faint);
   font-size: 13px;
   font-weight: 700;
 }
 .boardCard__head {
   padding: 16px 18px 18px;
   display: grid;
-  gap: 10px;
+  gap: 6px;
 }
 .boardCard__titleRow,
 .boardCard__metaRow {
   display: flex;
-  gap: 12px;
+  gap: 10px;
   align-items: center;
   justify-content: space-between;
 }
+
+.boardCard__metaRow {
+  align-items: flex-end;
+}
 .boardCard__title {
   min-width: 0;
   font-weight: 800;
@@ -232,9 +213,9 @@ watch(
 .boardCard__avatar {
   width: 22px;
   height: 22px;
-  border-radius: 6px;
+  border-radius: 9999px;
   object-fit: cover;
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--theme-border);
   flex: 0 0 auto;
 }
 .boardCard__avatar--fallback {
@@ -247,9 +228,16 @@ watch(
 .favoriteStat {
   flex: 0 0 auto;
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.64);
+  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));

package.json

@@ -4,7 +4,14 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev:frontend": "npm --prefix frontend run dev",
+    "dev:backend": "npm --prefix backend run dev",
+    "build": "npm --prefix frontend run build",
+    "start": "npm --prefix backend run start",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "images:backfill": "npm --prefix backend run images:backfill",
+    "images:migrate-legacy": "npm --prefix backend run images:migrate-legacy",
+    "uploads:cleanup-legacy": "npm --prefix backend run uploads:cleanup-legacy"
   },
   "keywords": [],
   "author": "",