릴리스: v1.4.3 사용자 노출 용어 정리 3차

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,16 +30,27 @@ 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()
 
@@ -53,30 +72,75 @@ 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'
+}
 
-const avatarUpload = 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: 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', requireAdmin, async (req, res) => {
-  const schema = z.object({ id: z.string().min(1), name: z.string().min(1).max(60) })
+  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)
+  }
+  res.json({ game: await findGameById(game.id) })
+})
+
+router.patch('/games/:gameId', 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 game = await findGameById(req.params.gameId)
+  if (!game) return res.status(404).json({ error: 'not_found' })
+
+  const updated = await updateGameVisibility(game.id, parsed.data.isPublic)
+  res.json({ game: updated })
 })
 
 router.patch('/games/display-order', requireAdmin, async (req, res) => {
@@ -86,18 +150,42 @@ router.patch('/games/display-order', requireAdmin, async (req, res) => {
   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 })
 })
 
+router.patch('/games/:gameId/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 game = await findGameById(req.params.gameId)
+  if (!game) return res.status(404).json({ error: 'not_found' })
+
+  const items = await updateGameItemDisplayOrder(game.id, parsed.data.itemIds)
+  res.json({ items })
+})
+
 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)
   if (!game) return res.status(404).json({ error: 'not_found' })
-  const updated = await updateGameThumbnail(req.params.gameId, `/uploads/games/${req.file.filename}`)
+
+  const optimized = await writeOptimizedImage({
+    file: req.file,
+    directory: 'games',
+    width: 1280,
+    height: 1280,
+    fit: 'inside',
+    quality: 84,
+  })
+
+  const updated = await updateGameThumbnail(req.params.gameId, optimized.src)
   res.json({ game: updated })
 })
 
@@ -107,18 +195,29 @@ router.post('/games/:gameId/images', requireAdmin, upload.array('images', 50), a
   const game = await findGameById(req.params.gameId)
   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 })
@@ -151,16 +250,38 @@ router.delete('/games/:gameId', requireAdmin, async (req, res) => {
   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' })
@@ -169,7 +290,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)
 })
@@ -177,6 +298,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),
   })
@@ -185,6 +307,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 || '',
@@ -192,11 +315,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) => {
@@ -211,34 +440,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) {
@@ -272,10 +502,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(),
@@ -284,13 +521,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)
@@ -313,7 +577,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)
@@ -329,15 +593,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) => {
@@ -351,9 +631,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 })
 })
 
@@ -405,6 +697,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' })
@@ -442,6 +762,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' })
@@ -466,8 +898,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) => {
@@ -479,21 +922,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' })
@@ -509,20 +965,33 @@ router.post('/users/:userId/avatar', requireAdmin, avatarUpload.single('avatar')
   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 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 ? '' : req.file ? `/uploads/avatars/${req.file.filename}` : user.avatarSrc || ''
+  const nextAvatarSrc = shouldRemoveAvatar ? '' : optimized?.src || targetUser.avatarSrc || ''
   const updated = await adminUpdateUser({
-    id: user.id,
-    email: user.email,
-    nickname: user.nickname || '',
-    isAdmin: !!user.isAdmin,
+    id: targetUser.id,
+    email: targetUser.email,
+    nickname: targetUser.nickname || '',
+    isAdmin: !!targetUser.isAdmin,
     avatarSrc: nextAvatarSrc,
   })
 
-  res.json({ user: updated })
+  res.json({ user: decorateAdminUser(updated, primaryAdmin) })
 })
 
 router.delete('/users/:userId', requireAdmin, async (req, res) => {
@@ -530,10 +999,19 @@ router.delete('/users/:userId', requireAdmin, async (req, res) => {
     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 })
 })
 
@@ -544,11 +1022,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),
@@ -31,6 +26,38 @@ const profileSchema = z.object({
   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' })
@@ -43,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) => {
@@ -63,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) => {
@@ -87,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)
@@ -109,19 +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 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
-    ? ''
-    : req.file
-      ? `/uploads/avatars/${req.file.filename}`
-      : user.avatarSrc || ''
+  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,16 +1,36 @@
 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()
+  const games = await listGames(req.session?.userId || '', { includePrivate: !!req.session?.isAdmin })
   res.json({ 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 })
+})
+
+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 })
+})
+
 router.get('/:gameId', async (req, res) => {
   const detail = await getGameDetail(req.params.gameId)
   if (!detail) return res.status(404).json({ error: 'not_found' })
+  if (!detail.game.isPublic && !req.session?.isAdmin) return res.status(404).json({ error: 'not_found' })
   res.json({ game: detail.game, items: detail.items })
 })
 

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({
@@ -84,12 +92,16 @@ const tierListUpsertSchema = z.object({
   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({
@@ -131,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' })
@@ -166,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,
   })
 
@@ -178,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) {
@@ -246,6 +290,10 @@ router.post('/', requireAuth, async (req, res) => {
       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,
     })
@@ -261,6 +309,10 @@ router.post('/', requireAuth, async (req, res) => {
     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,191 @@
 # 의사결정 이력
 
+## 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`으로 확보해야 버튼 자체는 항상 보이고 여백만 남는다고 판단했다.

docs/map.md

@@ -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

@@ -49,12 +49,12 @@
   - 공통 우측 패널 대신 전용 로컬 편집 패널을 사용한다.
   - 공통 `workspaceBody` 카드 컨테이너를 벗기고, 중앙 보드 영역은 메인 컬럼에, 우측 `320px` 편집 패널은 공통 셸의 세 번째 컬럼 aside에 배치한다.
   - 공통 상단 토글 버튼은 Teleport로 이동한 로컬 편집 패널의 접힘/펼침 상태와도 연결되어, 우측 패널을 숨기면 중앙 보드 영역이 확장된다.
-  - 제목, 설명, 대표 썸네일, 공개 여부, 저장/삭제/요청 액션을 우측 로컬 패널에 배치한다.
+  - 제목, 설명, 대표 썸네일, 공개 여부, 저장/삭제/요청 액션을 우측 로컬 패널에 배치한다. 템플릿 등록/업데이트 요청 버튼은 저장된 티어표가 있을 때만 노출하며, 제목이 비어 있는 상태에서 저장하면 랜덤 고유 제목을 먼저 부여해 저장본을 만든다.
   - 보드 바로 옆에는 드래그용 아이템 풀을 별도 패널로 두고, 커스텀 아이템 이름 정리 목록은 우측 편집 패널 내부에서 관리한다.
 - 관리자 화면
   - 공통 우측 패널 대신 전용 로컬 운영 패널을 사용한다.
   - 공통 `workspaceBody` 카드 컨테이너를 벗기고, 중앙 관리 목록은 메인 컬럼에, 우측 운영 패널은 공통 셸의 세 번째 컬럼 aside에 배치한다.
-  - 우측 로컬 패널에는 `게임/아이템/티어표/회원 관리` 탭, 검색, 필터, 새로고침, 빠른 작업 제어를 배치하고, 중앙 영역에는 실제 관리 대상 목록과 상세만 렌더링한다.
+  - 우측 로컬 패널에는 `게임/아이템/티어표/회원 관리` 탭, 검색, 필터, 새로고침, 빠른 작업 제어를 배치하고, 중앙 영역에는 실제 관리 대상 목록과 상세만 렌더링한다. 템플릿 요청 카드는 전체 티어표 카드와 같은 썸네일 좌측/정보 우측 구조를 따르며, 요청 미리보기는 일반 티어표 완성본과 같은 행·열 보드 문법으로 검수한다.
   - 상단 헤더에는 현재 탭 기준 요약 통계 카드를 배치해 운영 상태를 먼저 읽고, 각 관리 카드는 공통 대시보드 카드 문법(두꺼운 반경, 얕은 레이어 배경, 강조된 액션 버튼)을 공유한다.
 
 ## DB 스키마
@@ -196,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,51 +1,74 @@
 # 할 일 및 이슈
 
-## 즉시 확인 필요
-- 피그마 기반 리디자인은 현재 공통 셸과 카드 목록 화면, 포커스 화면 안정화까지만 반영된 상태이므로, 에디터/관리자 우측 옵션 패널을 시안 구조에 맞게 실제 기능 패널로 이관하는 작업이 남아 있다.
-- 홈/게임 허브/내 티어표/즐겨찾기 카드 문법은 어느 정도 통일됐지만, 아직 실제 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 사이의 버전 차이가 크지 않도록 유지한다.
+## 단기 확인
+- 관리자 화면까지 포함한 사용자 노출 `게임` 문구를 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,478 @@
 # 업데이트 로그
 
+## 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와 게임 이름 라벨을 추가해 구분을 명확히 함.

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/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/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

@@ -77,15 +77,16 @@ onMounted(async () => {
 }
 
 .rightRailAd__frame {
-  min-height: 520px;
-  padding: 14px;
-  border-radius: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.02);
+  width: min(100%, 300px);
+  min-height: 600px;
+  margin: 0 auto;
 }
 
 .rightRailAd__slot {
-  width: 100%;
-  min-height: 490px;
+  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({
+  featuredGames: { type: Array, required: true },
+  availableGamesForFeatured: { type: Array, required: true },
+  featuredGameIds: { type: Array, required: true },
+  featuredListRef: { type: Function, required: true },
+  saveFeaturedOrder: { type: Function, required: true },
+  moveFeaturedGame: { type: Function, required: true },
+  removeFeaturedGame: { type: Function, required: true },
+  addFeaturedGame: { 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.featuredGames.length" class="hint">아직 상단 고정 템플릿이 없어요.</div>
+        <div v-else :ref="props.featuredListRef" class="featuredList">
+          <article v-for="(game, index) in props.featuredGames" :key="game.id" class="featuredCard" :data-featured-id="game.id">
+            <div class="featuredCard__meta">
+              <span class="featuredCard__rank">{{ index + 1 }}</span>
+              <div>
+                <div class="featuredCard__title">{{ game.name }}</div>
+                <div class="featuredCard__id">{{ game.id }}</div>
+              </div>
+            </div>
+            <div class="featuredCard__actions">
+              <button class="btn btn--ghost btn--small" data-featured-handle>드래그</button>
+              <button class="btn btn--ghost btn--small" :disabled="index === 0" @click="props.moveFeaturedGame(game.id, -1)">위로</button>
+              <button class="btn btn--ghost btn--small" :disabled="index === props.featuredGames.length - 1" @click="props.moveFeaturedGame(game.id, 1)">아래로</button>
+              <button class="btn btn--danger btn--small" @click="props.removeFeaturedGame(game.id)">제외</button>
+            </div>
+          </article>
+        </div>
+      </div>
+
+      <div class="featuredOrderPanel__picker">
+        <div class="section__title">템플릿 추가</div>
+        <div class="featuredPickerList">
+          <button
+            v-for="game in props.availableGamesForFeatured"
+            :key="game.id"
+            class="featuredPickerItem"
+            :disabled="props.featuredGameIds.length >= 50"
+            @click="props.addFeaturedGame(game.id)"
+          >
+            <span>{{ game.name }}</span>
+            <span class="featuredPickerItem__id">{{ game.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 },
+  openGameCreateModal: { type: Function, required: true },
+  isGameLoading: { type: Boolean, required: true },
+  hasSelectedGame: { type: Boolean, required: true },
+  selectedGame: { 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 },
+  removeGame: { type: Function, required: true },
+  toggleSelectedGameVisibility: { 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 },
+  hasGameItemOrderChanges: { type: Boolean, required: true },
+  saveGameItemOrder: { type: Function, required: true },
+  gameItemListRef: { type: Function, required: true },
+  saveGameItemLabel: { type: Function, required: true },
+  removeGameItem: { type: Function, required: true },
+  selectedGameId: { 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.openGameCreateModal"
+      >
+        새 템플릿 만들기
+      </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.hasSelectedGame" 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.selectedGame.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.selectedGame.game.name }} · {{ props.selectedGame.game.id }}</div>
+        <label class="toggleSwitch" :class="{ 'toggleSwitch--disabled': props.gameVisibilitySaving }">
+          <input :checked="!!props.selectedGame.game.isPublic" type="checkbox" @change="props.toggleSelectedGameVisibility($event.target.checked)" />
+          <span class="toggleSwitch__label">{{ props.selectedGame.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.removeGame">템플릿 삭제</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.hasGameItemOrderChanges" @click="props.saveGameItemOrder">순서 저장</button>
+      </div>
+      <div v-if="!props.selectedGame?.items?.length" class="hint">아직 등록된 기본 아이템이 없어요.</div>
+      <div v-else :ref="setGameItemListElement" class="thumbGrid">
+        <div v-for="item in props.selectedGame.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.saveGameItemLabel(item)"
+            >
+              {{ item.isSavingLabel ? '저장중...' : '이름 저장' }}
+            </button>
+            <button class="btn btn--danger btn--small" data-no-drag @click="props.removeGameItem(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.selectedGameId" 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,198 @@
+import { nextTick } from 'vue'
+
+export function useAdminCustomItems({
+  api,
+  toast,
+  customItems,
+  customItemPage,
+  customItemLimit,
+  customItemPageCount,
+  customItemQuery,
+  customItemFilter,
+  customItemModalOpen,
+  customItemDeleteModalOpen,
+  customItemModalHistoryActive,
+  modalTargetCustomItem,
+  customItemModalDraftLabel,
+  customItemModalLabelSaving,
+  customItemModalTargetGameId,
+  games,
+  selectedGameId,
+  refreshCustomItems,
+  loadGame,
+  setTab,
+  selectAdminGame,
+  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 || ''
+    customItemModalTargetGameId.value = ''
+    customItemModalOpen.value = true
+    pushCustomItemModalHistoryState()
+  }
+
+  function closeCustomItemModal({ fromPopState = false } = {}) {
+    customItemModalOpen.value = false
+    customItemDeleteModalOpen.value = false
+    modalTargetCustomItem.value = null
+    customItemModalDraftLabel.value = ''
+    customItemModalLabelSaving.value = false
+    customItemModalTargetGameId.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 jumpToGameAdmin(gameId) {
+    if (!gameId) return
+    closeCustomItemModal()
+    setTab('game-admin')
+    nextTick(() => {
+      selectAdminGame(gameId)
+    })
+  }
+
+  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 (!customItemModalTargetGameId.value) {
+      error.value = '추가할 템플릿을 먼저 선택해주세요.'
+      return
+    }
+
+    try {
+      item.isPromoting = true
+      await api.promoteAdminCustomItem(item.id, { gameId: customItemModalTargetGameId.value })
+      const targetGameName = games.value.find((game) => game.id === customItemModalTargetGameId.value)?.name || customItemModalTargetGameId.value
+      if (selectedGameId.value === customItemModalTargetGameId.value) await loadGame()
+      closeCustomItemModal()
+      success.value = `"${item.label}" 이미지를 ${targetGameName} 템플릿으로 추가했어요.`
+    } catch (e) {
+      error.value = '선택한 이미지를 템플릿으로 추가하지 못했어요.'
+    } finally {
+      item.isPromoting = false
+    }
+  }
+
+  return {
+    submitCustomItemSearch,
+    changeCustomItemFilter,
+    changeCustomItemLimit,
+    moveCustomItemPage,
+    pushCustomItemModalHistoryState,
+    openCustomItemModal,
+    closeCustomItemModal,
+    openCustomItemDeleteModal,
+    closeCustomItemDeleteModal,
+    jumpToGameAdmin,
+    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,
+  featuredGameIds,
+  games,
+  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 = [...featuredGameIds.value]
+        const [moved] = nextIds.splice(evt.oldIndex, 1)
+        nextIds.splice(evt.newIndex, 0, moved)
+        featuredGameIds.value = nextIds
+      },
+    })
+  }
+
+  function addFeaturedGame(gameId) {
+    resetMessages()
+    if (!gameId || featuredGameIds.value.includes(gameId)) return
+    if (featuredGameIds.value.length >= 50) {
+      error.value = '상단 고정 템플릿은 최대 50개까지만 설정할 수 있어요.'
+      return
+    }
+    featuredGameIds.value = [...featuredGameIds.value, gameId]
+    syncFeaturedSortable()
+  }
+
+  function removeFeaturedGame(gameId) {
+    resetMessages()
+    featuredGameIds.value = featuredGameIds.value.filter((id) => id !== gameId)
+    syncFeaturedSortable()
+  }
+
+  function moveFeaturedGame(gameId, direction) {
+    const currentIndex = featuredGameIds.value.indexOf(gameId)
+    const nextIndex = currentIndex + direction
+    if (currentIndex < 0 || nextIndex < 0 || nextIndex >= featuredGameIds.value.length) return
+    const nextIds = [...featuredGameIds.value]
+    const [moved] = nextIds.splice(currentIndex, 1)
+    nextIds.splice(nextIndex, 0, moved)
+    featuredGameIds.value = nextIds
+    syncFeaturedSortable()
+  }
+
+  async function saveFeaturedOrder() {
+    resetMessages()
+    try {
+      const data = await api.updateAdminGameDisplayOrder({ gameIds: featuredGameIds.value })
+      games.value = data.games || []
+      featuredGameIds.value = games.value
+        .filter((game) => game.displayRank != null)
+        .sort((a, b) => a.displayRank - b.displayRank)
+        .map((game) => game.id)
+      success.value = '홈 화면 템플릿 순서를 저장했어요.'
+    } catch (e) {
+      error.value = '템플릿 순서 저장에 실패했어요.'
+    }
+  }
+
+  return {
+    destroyFeaturedSortable,
+    syncFeaturedSortable,
+    addFeaturedGame,
+    removeFeaturedGame,
+    moveFeaturedGame,
+    saveFeaturedOrder,
+  }
+}

frontend/src/composables/useAdminGameManager.js

@@ -0,0 +1,372 @@
+import { nextTick } from 'vue'
+import Sortable from 'sortablejs'
+
+export function useAdminGameManager({
+  api,
+  toApiUrl,
+  selectedGameId,
+  selectedGame,
+  uploadFiles,
+  uploadItemDrafts,
+  thumbFile,
+  itemPreviewUrls,
+  itemFileInput,
+  gameItemListEl,
+  gameItemSortable,
+  savedGameItemOrderIds,
+  isGameLoading,
+  activeTemplateRequest,
+  templateRequests,
+  customItemModalOpen,
+  customItemModalTargetGameId,
+  newGameId,
+  newGameName,
+  newGameIsPublic,
+  clearPreviewUrl,
+  resetFileInput,
+  resetUploadState,
+  refreshGames,
+  closeGameCreateModal,
+  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 || !selectedGame.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 = [...(selectedGame.value?.items || [])]
+        const [moved] = nextItems.splice(evt.oldIndex, 1)
+        nextItems.splice(evt.newIndex, 0, moved)
+        selectedGame.value = {
+          ...selectedGame.value,
+          items: nextItems,
+        }
+      },
+    })
+  }
+
+  function mergeRequestItemsIntoDrafts(request) {
+    const requestId = request?.id
+    if (!requestId) return
+    const existingGameSrcs = new Set((selectedGame.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) => !existingGameSrcs.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 loadGame(options = {}) {
+    const preserveUploadState = !!options.preserveUploadState
+    resetMessages()
+    if (!preserveUploadState) resetUploadState()
+
+    if (!selectedGameId.value) {
+      selectedGame.value = null
+      savedGameItemOrderIds.value = []
+      destroyGameItemSortable()
+      return
+    }
+
+    try {
+      isGameLoading.value = true
+      const data = await api.getGame(selectedGameId.value)
+      selectedGame.value = {
+        ...data,
+        items: (data.items || []).map((item) => ({
+          ...item,
+          draftLabel: item.label,
+        })),
+      }
+      savedGameItemOrderIds.value = (data.items || []).map((item) => item.id)
+      await syncGameItemSortable()
+    } catch (e) {
+      selectedGame.value = null
+      error.value = '템플릿 정보를 불러오지 못했어요.'
+    } finally {
+      isGameLoading.value = false
+    }
+  }
+
+  async function createGame(options = {}) {
+    const nextGameId = typeof options.gameId === 'string' ? options.gameId.trim() : newGameId.value.trim()
+    const nextGameName = typeof options.gameName === 'string' ? options.gameName.trim() : newGameName.value.trim()
+    const preserveUploadState = !!options.preserveUploadState
+    resetMessages()
+    try {
+      const res = await fetch(toApiUrl('/api/admin/games'), {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          id: nextGameId,
+          name: nextGameName,
+          isPublic: !!newGameIsPublic.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 refreshGames()
+      selectedGameId.value = data.game.id
+      if (customItemModalOpen.value) customItemModalTargetGameId.value = data.game.id
+      closeGameCreateModal()
+      await loadGame({ 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 (!selectedGameId.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 createGame({
+          gameId: draftGameId,
+          gameName: draftGameName,
+          preserveUploadState: true,
+        })
+      }
+
+      if (!selectedGameId.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/games/${encodeURIComponent(selectedGameId.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: selectedGameId.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 loadGame()
+      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 saveGameItemOrder() {
+    resetMessages()
+    if (!selectedGameId.value || !selectedGame.value?.items?.length) return
+
+    try {
+      const data = await api.updateAdminGameItemDisplayOrder(selectedGameId.value, {
+        itemIds: selectedGame.value.items.map((item) => item.id),
+      })
+      selectedGame.value = {
+        ...selectedGame.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,
+    loadGame,
+    createGame,
+    handleItemFiles,
+    onFile,
+    openItemFilePicker,
+    clearItemFiles,
+    uploadItem,
+    saveGameItemOrder,
+  }
+}

frontend/src/composables/useAdminTemplateRequests.js

@@ -0,0 +1,111 @@
+export function useAdminTemplateRequests({
+  api,
+  activeTemplateRequest,
+  refreshTemplateRequests,
+  setTab,
+  openGameCreateModal,
+  newGameId,
+  newGameName,
+  selectAdminGame,
+  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 `/editor/${request.sourceGameId}/${request.sourceTierListId}?preview=1`
+  }
+
+  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 selectAdminGame(linkedGameId)
+        } else {
+          openGameCreateModal()
+          newGameId.value = (syncedRequest.draftGameId || '').trim()
+          newGameName.value = (syncedRequest.draftGameName || '').trim()
+        }
+        mergeRequestItemsIntoDrafts(syncedRequest)
+      } else {
+        const nextGameId = syncedRequest.targetGameId || syncedRequest.sourceGameId || ''
+        if (nextGameId) await selectAdminGame(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

@@ -32,26 +32,61 @@ export const api = {
 
   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 }),
-  listAdminCustomItems: ({ q = '', page = 1, limit = 50, orphanOnly = false } = {}) =>
+  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'),
+  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 || {} }),
   promoteAdminCustomItem: (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) =>
     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) =>
@@ -88,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()

frontend/src/router/index.js

@@ -9,9 +9,10 @@ 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 },
@@ -22,8 +23,27 @@ export function createRouter() {
       { 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);
@@ -99,19 +158,19 @@ p {
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.42);
+  color: var(--theme-text-soft);
 }
 
 .pageHead__title {
   font-size: 32px;
   line-height: 1.05;
   letter-spacing: -0.04em;
-  color: rgba(255, 255, 255, 0.96);
+  color: var(--theme-text-strong);
 }
 
 .pageHead__desc {
   max-width: 720px;
-  color: rgba(255, 255, 255, 0.58);
+  color: var(--theme-text-muted);
 }
 
 .pageHead__aside {

frontend/src/views/FavoriteTierListsView.vue

@@ -58,11 +58,11 @@ onMounted(loadFavorites)
     <div class="pageHead">
       <div class="pageHead__main">
         <div class="pageHead__eyebrow">Collection</div>
-        <h2 class="pageHead__title">내 즐겨찾기</h2>
+        <h2 class="pageHead__title">즐겨찾기</h2>
         <div class="pageHead__desc">마음에 드는 티어표를 모아보고, 원하는 기준으로 정렬할 수 있어요.</div>
       </div>
       <div class="pageHead__aside toolbar">
-        <input v-model="query" class="input" placeholder="제목, 게임, 작성자 검색" @keydown.enter.prevent="loadFavorites" />
+        <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 +77,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 +87,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>
@@ -110,16 +110,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;
 }
@@ -133,18 +133,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;
@@ -172,10 +172,10 @@ 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;
 }
@@ -222,7 +222,7 @@ onMounted(loadFavorites)
   height: 22px;
   border-radius: 9999px;
   object-fit: cover;
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--theme-border);
   flex: 0 0 auto;
 }
 .boardCard__avatar--fallback {
@@ -235,7 +235,7 @@ 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;
 }
 

frontend/src/views/GameHubView.vue

@@ -15,6 +15,8 @@ const gameName = ref('')
 const tierLists = ref([])
 const error = ref('')
 const query = ref('')
+const brokenThumbnailIds = ref({})
+const isListView = computed(() => route.query.view === 'list')
 
 function fmt(ts) {
   return new Date(ts).toLocaleDateString(undefined, {
@@ -37,9 +39,15 @@ 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 () => {
   await loadTierLists()
 })
@@ -51,9 +59,10 @@ async function loadTierLists() {
       api.searchPublicTierLists(gameId.value, query.value),
     ])
     gameName.value = gameRes.game?.name || gameId.value
+    brokenThumbnailIds.value = {}
     tierLists.value = listRes.tierLists || []
   } catch (e) {
-    error.value = '게임 정보를 불러오지 못했어요.'
+    error.value = '주제 정보를 불러오지 못했어요.'
   }
 }
 
@@ -79,7 +88,7 @@ function submitSearch() {
     <div class="dashboardHero__left">
       <div class="dashboardHero__eyebrow">Collection</div>
       <h2 class="dashboardHero__title">{{ gameName || gameId }}</h2>
-      <p class="dashboardHero__desc">이 게임의 공개 티어표를 탐색하고, 바로 새 보드를 만들어 같은 흐름으로 이어갈 수 있어요.</p>
+      <p class="dashboardHero__desc">이 주제의 공개 티어표를 탐색하고, 바로 새 보드를 만들어 같은 흐름으로 이어갈 수 있어요.</p>
     </div>
   </section>
 
@@ -96,11 +105,11 @@ function submitSearch() {
       </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 +121,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>
@@ -140,7 +149,7 @@ function submitSearch() {
 }
 .dashboardHero__eyebrow {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.42);
+  color: var(--theme-text-soft);
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }
@@ -148,15 +157,15 @@ function submitSearch() {
   margin: 4px 0 6px;
   font-size: 32px;
   letter-spacing: -0.04em;
-  color: rgba(255, 255, 255, 0.96);
+  color: var(--theme-text-strong);
 }
 .dashboardHero__desc {
   margin: 0;
-  color: rgba(255, 255, 255, 0.58);
+  color: var(--theme-text-muted);
   max-width: 720px;
 }
 .panel {
-  /* border: 1px solid rgba(255, 255, 255, 0.08); */
+  /* border: 1px solid var(--theme-border); */
   background: transparent;
   border-radius: 0;
   padding: 0;
@@ -165,8 +174,8 @@ function submitSearch() {
   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);
+  border: 1px solid var(--theme-danger-border);
+  background: var(--theme-danger-bg);
 }
 .panel__title {
   font-weight: 800;
@@ -174,7 +183,7 @@ function submitSearch() {
 }
 .panel__sub {
   margin-top: 6px;
-  color: rgba(255, 255, 255, 0.56);
+  color: var(--theme-text-muted);
   font-size: 13px;
 }
 .panel__head {
@@ -195,16 +204,16 @@ function submitSearch() {
   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);
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
+  color: var(--theme-text);
 }
 .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);
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft-2);
+  color: var(--theme-text);
   font-weight: 800;
   cursor: pointer;
 }
@@ -216,23 +225,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 +257,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 +282,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,21 +306,35 @@ 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: 6px;
+  gap: 8px;
+}
+
+.boardCard--list .boardCard__head {
+  height: 100%;
+  padding: 14px 16px 14px 0;
+  align-content: center;
 }
 .boardCard__titleRow,
 .boardCard__metaRow {
-  display: flex;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: 10px;
-  align-items: center;
-  justify-content: space-between;
+}
+
+.boardCard__titleRow {
+  align-items: flex-start;
 }
 
 .boardCard__metaRow {
@@ -293,11 +342,13 @@ function submitSearch() {
 }
 .boardCard__author {
   min-width: 0;
+  max-width: 100%;
   display: inline-flex;
   gap: 7px;
   align-items: center;
   font-size: 13px;
   opacity: 0.86;
+  overflow: hidden;
 }
 .boardCard__authorName {
   min-width: 0;
@@ -311,7 +362,7 @@ function submitSearch() {
   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 {
@@ -323,28 +374,37 @@ 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;
 }
 
 .boardCard__date {
   font-size: 10px;
 }
-@media (max-width: 1400px) {
-  .list {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-@media (max-width: 1024px) {
-  .list {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+@media (max-width: 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 {
     min-width: 0;
     width: 100%;

frontend/src/views/HomeView.vue

@@ -1,28 +1,73 @@
 <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 { useAuthStore } from '../stores/auth'
 
+const route = useRoute()
 const router = useRouter()
+const auth = useAuthStore()
 
 const items = 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 games = computed(() => {
+  const filtered = items.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 loadGames() {
   try {
     const data = await api.listGames()
     items.value = data.games || []
   } catch (e) {
     error.value = '백엔드에 연결할 수 없어요. backend 서버가 실행 중인지 확인해주세요.'
   }
-})
+}
+
+onMounted(loadGames)
+watch(() => auth.user?.id, loadGames)
 
 function goGame(gameId) {
   router.push(`/games/${gameId}`)
 }
 
+async function toggleFavorite(game, event) {
+  event?.stopPropagation()
+  if (!auth.user) {
+    router.push(`/login?redirect=${encodeURIComponent(route.fullPath || '/')}`)
+    return
+  }
+  if (!game?.id || loadingFavoriteId.value === game.id) return
+
+  try {
+    loadingFavoriteId.value = game.id
+    const res = game.isFavorited ? await api.unfavoriteGame(game.id) : await api.favoriteGame(game.id)
+    items.value = items.value.map((entry) => (entry.id === game.id ? { ...entry, ...res.game } : entry))
+  } catch (e) {
+    error.value = '즐겨찾기 변경에 실패했어요.'
+  } finally {
+    loadingFavoriteId.value = ''
+  }
+}
+
 function thumbUrl(g) {
   return g.thumbnailSrc ? toApiUrl(g.thumbnailSrc) : ''
 }
@@ -32,24 +77,37 @@ function thumbUrl(g) {
   <section class="pageHead">
     <div class="pageHead__main">
       <div class="pageHead__eyebrow">Workspace</div>
-      <h1 class="pageHead__title">Game Library</h1>
-      <p class="pageHead__desc">자주 쓰는 게임 템플릿을 빠르게 고르고, 필요하면 바로 커스텀 티어표를 시작할 수 있어요.</p>
+      <h1 class="pageHead__title">Topic Library</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="games.length" name="libraryCard" tag="section" class="libraryGrid">
+    <article v-for="g in games" :key="g.id" class="libraryCard">
+      <button
+        class="libraryCard__favorite"
+        type="button"
+        :class="{ 'libraryCard__favorite--active': g.isFavorited }"
+        :disabled="loadingFavoriteId === g.id"
+        @click.stop="toggleFavorite(g, $event)"
+      >
+        <SvgIcon class="libraryCard__favoriteIcon" :src="kidStarIcon" :size="18" />
+      </button>
+      <button class="libraryCard__main" type="button" @click="goGame(g.id)">
+        <div class="libraryCard__thumbWrap">
+        <img v-if="thumbUrl(g)" class="libraryCard__thumb" :src="thumbUrl(g)" :alt="g.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">{{ g.id }}</div>
-      </div>
-    </button>
-  </section>
+        <div class="libraryCard__body">
+          <div class="libraryCard__title">{{ g.name }}</div>
+          <div class="libraryCard__meta">{{ g.id }}</div>
+        </div>
+      </button>
+    </article>
+  </TransitionGroup>
+  <div v-else class="libraryEmpty">{{ query ? '검색어에 맞는 주제 템플릿이 없어요.' : '표시할 주제 템플릿이 없어요.' }}</div>
 </template>
 
 <style scoped>
@@ -62,35 +120,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;
@@ -102,7 +204,7 @@ function thumbUrl(g) {
 }
 .libraryCard__thumbFallback {
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--theme-text-faint);
 }
 .libraryCard__body {
   display: grid;
@@ -113,12 +215,34 @@ function thumbUrl(g) {
   font-size: 18px;
 }
 .libraryCard__meta {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--theme-text-soft);
   font-size: 13px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.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 {
     grid-template-columns: repeat(3, minmax(0, 1fr));

frontend/src/views/LoginView.vue

@@ -30,8 +30,15 @@ const description = computed(() =>
     : '저장한 티어표와 즐겨찾기, 프로필 설정을 이어서 관리할 수 있어요.'
 )
 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 : '/me')
+    return
+  }
   try {
     const meta = await api.authMeta()
     hasUsers.value = !!meta.hasUsers
@@ -40,6 +47,15 @@ onMounted(async () => {
   }
 })
 
+watch(
+  () => [auth.hydrated, auth.user],
+  ([hydrated, user]) => {
+    if (!hydrated || !user) return
+    router.replace(typeof route.query.redirect === 'string' ? route.query.redirect : '/me')
+  },
+  { immediate: true }
+)
+
 async function submit() {
   error.value = ''
   if (mode.value === 'signup' && password.value !== passwordConfirm.value) {
@@ -66,8 +82,13 @@ async function submit() {
       </div>
     </header>
 
-    <section class="authScreen">
-      <div class="authTabs" role="tablist" aria-label="로그인 또는 회원가입">
+    <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>
@@ -79,8 +100,8 @@ async function submit() {
       <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" />
-          <span class="field__hint">로그인과 알림에 사용되는 계정 이메일입니다.</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>
 
         <label class="field">
@@ -91,8 +112,9 @@ async function submit() {
             type="password"
             placeholder="********"
             autocomplete="current-password"
+            maxlength="120"
           />
-          <span class="field__hint">8자 이상으로 설정하면 더 안전하게 사용할 수 있어요.</span>
+          <span class="field__hint">6~120자 입력 가능 · {{ password.length }}/120자</span>
         </label>
 
         <label v-if="mode === 'signup'" class="field">
@@ -103,8 +125,9 @@ async function submit() {
             type="password"
             placeholder="********"
             autocomplete="new-password"
+            maxlength="120"
           />
-          <span class="field__hint">같은 비밀번호를 한 번 더 입력해주세요.</span>
+          <span class="field__hint">같은 비밀번호를 한 번 더 입력해주세요. {{ passwordConfirm.length }}/120자</span>
         </label>
 
         <div v-if="!hasUsers" class="roleBadge">첫 회원가입 계정은 자동으로 관리자 권한이 부여됩니다.</div>
@@ -126,30 +149,62 @@ async function submit() {
   padding-top: 4px;
 }
 
+.authScreen--loading {
+  min-height: 220px;
+  align-items: center;
+}
+
+.authLoading {
+  color: var(--theme-text-muted);
+  font-size: 15px;
+}
+
 .authTabs {
+  position: relative;
   display: inline-flex;
-  gap: 8px;
+  gap: 0;
   width: fit-content;
   padding: 6px;
   border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
+  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: rgba(255, 255, 255, 0.62);
+  color: var(--theme-text-muted);
   font-weight: 700;
   cursor: pointer;
+  transition: color 180ms ease;
+  z-index: 1;
 }
 
 .authTabs__button--active {
-  background: rgba(76, 133, 245, 0.22);
-  color: rgba(255, 255, 255, 0.96);
+  color: var(--theme-text-strong);
 }
 
 .authFields {
@@ -164,16 +219,16 @@ async function submit() {
 
 .field__label {
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.62);
+  color: var(--theme-text-muted);
 }
 
 .field__input {
   width: 100%;
   padding: 14px 0;
   border: 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  border-bottom: 1px solid var(--theme-border-strong);
   background: transparent;
-  color: rgba(255, 255, 255, 0.94);
+  color: var(--theme-text);
   outline: none;
   font-size: 18px;
   letter-spacing: -0.02em;
@@ -185,7 +240,7 @@ async function submit() {
 
 .field__hint {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.42);
+  color: var(--theme-text-soft);
 }
 
 .roleBadge {
@@ -194,7 +249,7 @@ async function submit() {
   border-radius: 999px;
   border: 1px solid rgba(96, 165, 250, 0.28);
   background: rgba(96, 165, 250, 0.1);
-  color: rgba(191, 219, 254, 0.92);
+  color: var(--theme-text);
   font-size: 12px;
   font-weight: 700;
 }
@@ -216,14 +271,14 @@ async function submit() {
 
 .primaryAction {
   border: 1px solid rgba(76, 133, 245, 0.96);
-  background: rgba(76, 133, 245, 0.92);
-  color: #fff;
+  background: var(--theme-accent-bg);
+  color: var(--theme-accent-text);
 }
 
 .secondaryAction {
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.04);
-  color: rgba(255, 255, 255, 0.86);
+  border: 1px solid var(--theme-border-strong);
+  background: var(--theme-surface-soft);
+  color: var(--theme-text);
 }
 
 @media (max-width: 720px) {

frontend/src/views/MyTierListsView.vue

@@ -9,6 +9,7 @@ const router = useRouter()
 const toast = useToast()
 const myLists = ref([])
 const error = ref('')
+const brokenThumbnailIds = ref({})
 
 watch(error, (message) => {
   if (!message) return
@@ -37,12 +38,19 @@ 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('로그인이 필요해요.')
@@ -51,79 +59,63 @@ onMounted(async () => {
 })
 
 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(
+    "/editor/" + t.gameId + "/" + t.id,
+  )
 }
 </script>
 
 <template>
-  <section class="pageWrap">
-    <header class="pageHead">
-      <div class="pageHead__main">
-        <div class="pageHead__eyebrow">Library</div>
-        <h2 class="pageHead__title">내 티어표</h2>
-        <div class="pageHead__desc">직접 저장한 티어표를 같은 카드 레이아웃으로 다시 열고 정리할 수 있어요.</div>
-      </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">Library</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>
-.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;
 }
@@ -133,23 +125,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;
@@ -157,9 +148,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;
@@ -175,45 +169,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: 6px;
+  gap: 8px;
+  overflow: hidden;
 }
 .boardCard__titleRow,
 .boardCard__metaRow {
-  display: flex;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: 10px;
-  align-items: center;
-  justify-content: space-between;
 }
-
+.boardCard__titleRow {
+  align-items: flex-start;
+}
 .boardCard__metaRow {
   align-items: flex-end;
 }
 .boardCard__author {
   min-width: 0;
+  max-width: 100%;
   display: inline-flex;
   gap: 7px;
   align-items: center;
   font-size: 13px;
-  opacity: 0.84;
+  opacity: 0.86;
+  overflow: hidden;
 }
 .boardCard__authorName {
   min-width: 0;
@@ -227,7 +231,7 @@ async function removeList(t) {
   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 {
@@ -239,29 +243,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;
 }
 .boardCard__date {
   font-size: 10px;
 }
-.link--danger {
-  background: rgba(239, 68, 68, 0.14);
-  border-color: rgba(239, 68, 68, 0.28);
-  margin: 0 18px 18px;
-}
 @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) {
+@media (max-width: 900px) {
   .list {
     grid-template-columns: 1fr;
   }

frontend/src/views/ProfileView.vue

@@ -30,14 +30,19 @@ const avatarUrl = computed(() => {
   return toApiUrl(auth.user.avatarSrc)
 })
 
+const authReady = computed(() => auth.hydrated)
+
 const displayInitial = computed(() => {
   const email = auth.user?.email || 'U'
   return email[0].toUpperCase()
 })
 
 onMounted(async () => {
-  await auth.refresh()
-  if (!auth.user) router.push('/login')
+  if (!auth.hydrated) await auth.refresh()
+  if (!auth.user) {
+    router.replace('/login')
+    return
+  }
   nickname.value = auth.user?.nickname || ''
   removeAvatar.value = false
 })
@@ -116,16 +121,20 @@ async function logout() {
     <header class="pageHead">
       <div class="pageHead__main">
         <div class="pageHead__eyebrow">Account</div>
-        <h2 class="pageHead__title">Settings</h2>
+        <h2 class="pageHead__title">설정</h2>
         <div class="pageHead__desc">계정 정보를 간결하게 정리하고, 프로필 이미지를 클릭해서 바로 변경할 수 있어요.</div>
       </div>
     </header>
 
-    <section v-if="auth.user" class="settingsScreen">
+    <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" />
+            <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>
@@ -156,8 +165,8 @@ async function logout() {
       <div class="settingsFields">
         <label class="field">
           <span class="field__label">닉네임</span>
-          <input v-model="nickname" class="field__input" placeholder="작성자 닉네임" />
-          <span class="field__hint">티어표 작성자 이름으로 표시됩니다.</span>
+          <input v-model="nickname" class="field__input" maxlength="40" placeholder="작성자 닉네임" />
+          <span class="field__hint">티어표 작성자 이름으로 표시됩니다. {{ nickname.length }}/40자</span>
         </label>
 
         <label class="field">
@@ -185,6 +194,16 @@ async function logout() {
   padding-top: 4px;
 }
 
+.settingsScreen--loading {
+  min-height: 240px;
+  align-items: center;
+}
+
+.settingsLoading {
+  color: var(--theme-text-muted);
+  font-size: 15px;
+}
+
 .settingsIdentity {
   display: grid;
   grid-template-columns: 120px minmax(0, 1fr);
@@ -202,15 +221,15 @@ async function logout() {
   position: relative;
   width: 120px;
   height: 120px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--theme-border-strong);
   border-radius: 9999px;
-  background: rgba(255, 255, 255, 0.03);
-  color: rgba(255, 255, 255, 0.92);
+  background: var(--theme-pill-bg);
+  color: var(--theme-text);
   overflow: hidden;
   cursor: pointer;
   display: grid;
   place-items: center;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  box-shadow: var(--theme-card-shadow);
 }
 
 .avatarButton__image {
@@ -222,7 +241,7 @@ async function logout() {
 .avatarButton__fallback {
   font-size: 34px;
   font-weight: 900;
-  color: rgba(255, 255, 255, 0.86);
+  color: var(--theme-text);
 }
 
 .avatarButton__overlay {
@@ -232,7 +251,7 @@ async function logout() {
   background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
   font-size: 12px;
   font-weight: 700;
-  color: rgba(255, 255, 255, 0.82);
+  color: var(--theme-text);
 }
 
 .avatarButton__remove {
@@ -243,8 +262,8 @@ async function logout() {
   height: 30px;
   border: 0;
   border-radius: 999px;
-  background: rgba(10, 10, 10, 0.72);
-  color: rgba(255, 255, 255, 0.88);
+  background: var(--theme-shell-bg);
+  color: var(--theme-text);
   display: grid;
   place-items: center;
   cursor: pointer;
@@ -264,7 +283,7 @@ async function logout() {
 
 .avatarButton__remove:hover {
   background: rgba(190, 24, 24, 0.88);
-  color: #fff;
+  color: var(--theme-accent-text);
 }
 
 .identityMeta {
@@ -276,7 +295,7 @@ async function logout() {
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.36);
+  color: var(--theme-text-soft);
 }
 
 .identityMeta__title {
@@ -286,7 +305,7 @@ async function logout() {
 }
 
 .identityMeta__desc {
-  color: rgba(255, 255, 255, 0.58);
+  color: var(--theme-text-muted);
   line-height: 1.6;
 }
 
@@ -307,16 +326,16 @@ async function logout() {
 
 .field__label {
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.62);
+  color: var(--theme-text-muted);
 }
 
 .field__input {
   width: 100%;
   padding: 14px 0;
   border: 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  border-bottom: 1px solid var(--theme-border-strong);
   background: transparent;
-  color: rgba(255, 255, 255, 0.94);
+  color: var(--theme-text);
   outline: none;
   font-size: 18px;
   letter-spacing: -0.02em;
@@ -327,12 +346,12 @@ async function logout() {
 }
 
 .field__input--readonly {
-  color: rgba(255, 255, 255, 0.58);
+  color: var(--theme-text-muted);
 }
 
 .field__hint {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.42);
+  color: var(--theme-text-soft);
 }
 
 .roleBadge {
@@ -341,7 +360,7 @@ async function logout() {
   border-radius: 999px;
   border: 1px solid rgba(96, 165, 250, 0.28);
   background: rgba(96, 165, 250, 0.1);
-  color: rgba(191, 219, 254, 0.92);
+  color: var(--theme-text);
   font-size: 12px;
   font-weight: 700;
 }
@@ -363,14 +382,14 @@ async function logout() {
 
 .primaryAction {
   border: 1px solid rgba(76, 133, 245, 0.96);
-  background: rgba(76, 133, 245, 0.92);
-  color: #fff;
+  background: var(--theme-accent-bg);
+  color: var(--theme-accent-text);
 }
 
 .secondaryAction {
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.04);
-  color: rgba(255, 255, 255, 0.86);
+  border: 1px solid var(--theme-border-strong);
+  background: var(--theme-surface-soft);
+  color: var(--theme-text);
 }
 
 @media (max-width: 720px) {

frontend/src/views/SearchResultsView.vue

@@ -67,7 +67,7 @@ watch(
   <section class="wrap">
     <div class="head">
       <div>
-        <div class="head__eyebrow">Search</div>
+        <div class="head__eyebrow">검색</div>
         <h2 class="title">전체 티어표 검색</h2>
         <div class="desc">공개된 모든 티어표를 제목과 작성자 기준으로 찾아볼 수 있어요.</div>
       </div>
@@ -80,7 +80,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 +92,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>
@@ -122,24 +122,24 @@ watch(
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.42);
+  color: var(--theme-text-soft);
 }
 .title {
   margin: 4px 0 0;
   font-size: 32px;
-  color: rgba(255, 255, 255, 0.96);
+  color: var(--theme-text-strong);
   letter-spacing: -0.04em;
 }
 .desc {
   margin-top: 6px;
-  color: rgba(255, 255, 255, 0.58);
+  color: var(--theme-text-muted);
 }
 .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 +151,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,10 +188,10 @@ 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;
 }
@@ -238,7 +238,7 @@ watch(
   height: 22px;
   border-radius: 9999px;
   object-fit: cover;
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--theme-border);
   flex: 0 0 auto;
 }
 .boardCard__avatar--fallback {
@@ -251,7 +251,7 @@ watch(
 .favoriteStat {
   flex: 0 0 auto;
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.64);
+  color: var(--theme-text-faint);
   white-space: nowrap;
 }
 

package.json

@@ -8,7 +8,10 @@
     "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"
+    "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": "",

update.md

@@ -1,9 +0,0 @@
-# Update Log Entry Point
-
-이 프로젝트의 상세 업데이트 로그는 [docs/update.md](/Users/bicute/Desktop/zenn.dev/tier-cursor/docs/update.md)에 계속 누적됩니다.
-
-## 2026-03-30
-
-- 루트 `package.json`에 공용 실행 스크립트(`dev:frontend`, `dev:backend`, `build`, `start`)를 추가했습니다.
-- 루트에서도 바로 `npm run build` 같은 공용 명령을 사용할 수 있게 정리했습니다.
-- 업데이트 로그 진입점을 루트 `update.md`로 추가해, 이후 작업 시 파일 위치를 바로 찾을 수 있게 했습니다.