Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b1d5355123 | |||
| c1575783f0 | |||
| b58a641453 | |||
| b3f9f8e4d0 | |||
| 2374cd9272 | |||
| d4ab4b2cd1 | |||
| 7bc1af268f | |||
| 8af2726574 | |||
| 85ee6e3649 | |||
| a1afa658c2 | |||
| b97d7eacda | |||
| f6a031cfe4 | |||
| c71a19873d | |||
| f9ae036890 | |||
| beaec9326b |
@@ -37,13 +37,6 @@ VITE_API_ORIGIN=http://localhost:5179 npm run dev
|
||||
|
||||
- 접속: `http://localhost:5173`
|
||||
|
||||
### 4) 기존 lowdb 데이터 이관
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
npm run migrate:lowdb
|
||||
```
|
||||
|
||||
자세한 내용은 [docs/local-mariadb.md](/Users/bicute/Desktop/zenn.dev/tier-cursor/docs/local-mariadb.md)를 참고하세요.
|
||||
|
||||
## 사용 흐름(현재 구현)
|
||||
|
||||
@@ -4,6 +4,12 @@
|
||||
- 모든 대화와 문서는 **한국어**로 작성한다.
|
||||
- 코드 내 주석은 반드시 **JSDoc 형식**을 사용한다.
|
||||
|
||||
## 🧾 Git 및 버전 관리 규칙
|
||||
- Git 작성자 정보는 프로젝트 기준 계정으로 통일한다.
|
||||
- Git 커밋 메시지는 반드시 **한국어**로 작성한다.
|
||||
- 버전이 올라가는 작업은 `docs/update.md`에 먼저 반영하고, 같은 버전명을 Git 태그에도 맞춘다.
|
||||
- 원격 저장소에 푸시하기 전, 민감 정보(실명, 개인 이메일, 비밀키, 로컬 경로)가 포함되지 않았는지 확인한다.
|
||||
|
||||
## 📂 문서 자동 관리 규칙
|
||||
모든 작업 수행 후, AI는 관련 내용을 아래 지정된 파일에 즉시 반영해야 한다.
|
||||
|
||||
@@ -28,4 +34,4 @@
|
||||
|
||||
## ⚠️ 실행 지침
|
||||
- 새로운 코드를 작성하거나 수정하기 전, 반드시 `docs/` 내 관련 문서들을 먼저 참조한다.
|
||||
- 작업 완료 후 위 문서들의 업데이트가 누락되지 않도록 확인한다.
|
||||
- 작업 완료 후 위 문서들의 업데이트가 누락되지 않도록 확인한다.
|
||||
|
||||
@@ -1,341 +0,0 @@
|
||||
{
|
||||
"users": [
|
||||
{
|
||||
"id": "nsTJTtyrDHSqfmRu5glSN",
|
||||
"email": "zenn.message@gmail.com",
|
||||
"passwordHash": "$2b$10$DxSEaZctF5u8A5rYDQRZOu4rkRNEaCytX0m0raQn6Fwjx.G0h9k8K",
|
||||
"isAdmin": true,
|
||||
"createdAt": 1773887700454,
|
||||
"avatarSrc": "/uploads/avatars/1773889900538-fef80900076ae-áá
³áá
³á
á
µá«áá
£áº 2026-03-19 áá
©áá
¥á« 11.38.05.png"
|
||||
}
|
||||
],
|
||||
"games": [
|
||||
{
|
||||
"id": "example-game",
|
||||
"name": "예시 게임",
|
||||
"createdAt": 1773887395598
|
||||
},
|
||||
{
|
||||
"id": "another-game",
|
||||
"name": "다른 예시 게임",
|
||||
"createdAt": 1773887395598
|
||||
},
|
||||
{
|
||||
"id": "stellasora",
|
||||
"name": "스텔라소라",
|
||||
"createdAt": 1773887727309,
|
||||
"thumbnailSrc": "/uploads/games/1773890252955-fbdff9a881edf-áá
³áá
³á
á
µá«áá
£áº 2026-03-19 áá
©áá
¥á« 11.23.48(2).png"
|
||||
}
|
||||
],
|
||||
"gameImages": [
|
||||
{
|
||||
"id": "img-1",
|
||||
"gameId": "example-game",
|
||||
"src": "/uploads/seeds/example1.png",
|
||||
"label": "샘플 1",
|
||||
"createdAt": 1773887395598
|
||||
},
|
||||
{
|
||||
"id": "img-2",
|
||||
"gameId": "example-game",
|
||||
"src": "/uploads/seeds/example2.png",
|
||||
"label": "샘플 2",
|
||||
"createdAt": 1773887395598
|
||||
},
|
||||
{
|
||||
"id": "dVx9t49q3CbKe_dnY9Zit",
|
||||
"gameId": "stellasora",
|
||||
"src": "/uploads/games/1773887834722-a3ce962de80228-Chitose-head-xxl.webp",
|
||||
"label": "치토세",
|
||||
"createdAt": 1773887834727
|
||||
},
|
||||
{
|
||||
"id": "Tf3MgX_4Pk4YZszOTfGEQ",
|
||||
"gameId": "stellasora",
|
||||
"src": "/uploads/games/1773887843354-3dd04644093c5-Freesia-head-xxl.webp",
|
||||
"label": "프리지아",
|
||||
"createdAt": 1773887843356
|
||||
},
|
||||
{
|
||||
"id": "ceaMtFXf7Jq-83f66T-UM",
|
||||
"gameId": "stellasora",
|
||||
"src": "/uploads/games/1773887854172-ea9752e9139b-Donna-head-xxl.webp",
|
||||
"label": "도나",
|
||||
"createdAt": 1773887854174
|
||||
},
|
||||
{
|
||||
"id": "2odX6CHJOyFroPZ8s57oe",
|
||||
"gameId": "stellasora",
|
||||
"src": "/uploads/games/1773887863903-3635cbc2e569e8-Fuyuka-head-xxl.webp",
|
||||
"label": "후유카",
|
||||
"createdAt": 1773887863905
|
||||
},
|
||||
{
|
||||
"id": "OfDKYixqM12e57ZAAcGlW",
|
||||
"gameId": "stellasora",
|
||||
"src": "/uploads/games/1773887879061-801daab97ebb98-Snowish_Laru-head-xxl.webp",
|
||||
"label": "라루(크리스마스)",
|
||||
"createdAt": 1773887879064
|
||||
},
|
||||
{
|
||||
"id": "P1BOwa2sMv_YbAOkhMPVS",
|
||||
"gameId": "stellasora",
|
||||
"src": "/uploads/games/1773890202889-54aedfa2cea6e-áá
³áá
³á
á
µá«áá
£áº 2026-03-16 áá
©áá
® 6.35.30.png",
|
||||
"label": "기본이미지?",
|
||||
"createdAt": 1773890202906
|
||||
}
|
||||
],
|
||||
"tierLists": [
|
||||
{
|
||||
"id": "PiAKeKNvjJb68IPYiUv-r",
|
||||
"authorId": "nsTJTtyrDHSqfmRu5glSN",
|
||||
"gameId": "stellasora",
|
||||
"title": "새 티어표1",
|
||||
"isPublic": false,
|
||||
"groups": [
|
||||
{
|
||||
"id": "gS",
|
||||
"name": "S",
|
||||
"itemIds": [
|
||||
"dVx9t49q3CbKe_dnY9Zit"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "gA",
|
||||
"name": "A",
|
||||
"itemIds": [
|
||||
"ceaMtFXf7Jq-83f66T-UM"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "gB",
|
||||
"name": "B",
|
||||
"itemIds": [
|
||||
"2odX6CHJOyFroPZ8s57oe",
|
||||
"OfDKYixqM12e57ZAAcGlW"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "gC",
|
||||
"name": "C",
|
||||
"itemIds": [
|
||||
"Tf3MgX_4Pk4YZszOTfGEQ"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "gD",
|
||||
"name": "D",
|
||||
"itemIds": []
|
||||
}
|
||||
],
|
||||
"pool": [
|
||||
{
|
||||
"id": "dVx9t49q3CbKe_dnY9Zit",
|
||||
"src": "http://localhost:5179/uploads/games/1773887834722-a3ce962de80228-Chitose-head-xxl.webp",
|
||||
"label": "치토세",
|
||||
"origin": "game"
|
||||
},
|
||||
{
|
||||
"id": "Tf3MgX_4Pk4YZszOTfGEQ",
|
||||
"src": "http://localhost:5179/uploads/games/1773887843354-3dd04644093c5-Freesia-head-xxl.webp",
|
||||
"label": "프리지아",
|
||||
"origin": "game"
|
||||
},
|
||||
{
|
||||
"id": "ceaMtFXf7Jq-83f66T-UM",
|
||||
"src": "http://localhost:5179/uploads/games/1773887854172-ea9752e9139b-Donna-head-xxl.webp",
|
||||
"label": "도나",
|
||||
"origin": "game"
|
||||
},
|
||||
{
|
||||
"id": "2odX6CHJOyFroPZ8s57oe",
|
||||
"src": "http://localhost:5179/uploads/games/1773887863903-3635cbc2e569e8-Fuyuka-head-xxl.webp",
|
||||
"label": "후유카",
|
||||
"origin": "game"
|
||||
},
|
||||
{
|
||||
"id": "OfDKYixqM12e57ZAAcGlW",
|
||||
"src": "http://localhost:5179/uploads/games/1773887879061-801daab97ebb98-Snowish_Laru-head-xxl.webp",
|
||||
"label": "라루(크리스마스)",
|
||||
"origin": "game"
|
||||
}
|
||||
],
|
||||
"createdAt": 1773888446012,
|
||||
"updatedAt": 1773888446013
|
||||
},
|
||||
{
|
||||
"id": "F1qD3tWgW1aPJkLPjeWWA",
|
||||
"authorId": "nsTJTtyrDHSqfmRu5glSN",
|
||||
"gameId": "stellasora",
|
||||
"title": "새 티어표1",
|
||||
"isPublic": true,
|
||||
"groups": [
|
||||
{
|
||||
"id": "gS",
|
||||
"name": "S",
|
||||
"itemIds": [
|
||||
"dVx9t49q3CbKe_dnY9Zit"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "gA",
|
||||
"name": "A",
|
||||
"itemIds": [
|
||||
"ceaMtFXf7Jq-83f66T-UM"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "gB",
|
||||
"name": "B",
|
||||
"itemIds": [
|
||||
"2odX6CHJOyFroPZ8s57oe",
|
||||
"OfDKYixqM12e57ZAAcGlW"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "gC",
|
||||
"name": "C",
|
||||
"itemIds": [
|
||||
"Tf3MgX_4Pk4YZszOTfGEQ"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "gD",
|
||||
"name": "D",
|
||||
"itemIds": [
|
||||
"c-1773888464832-e963464a5f73e8"
|
||||
]
|
||||
}
|
||||
],
|
||||
"pool": [
|
||||
{
|
||||
"id": "dVx9t49q3CbKe_dnY9Zit",
|
||||
"src": "http://localhost:5179/uploads/games/1773887834722-a3ce962de80228-Chitose-head-xxl.webp",
|
||||
"label": "치토세",
|
||||
"origin": "game"
|
||||
},
|
||||
{
|
||||
"id": "Tf3MgX_4Pk4YZszOTfGEQ",
|
||||
"src": "http://localhost:5179/uploads/games/1773887843354-3dd04644093c5-Freesia-head-xxl.webp",
|
||||
"label": "프리지아",
|
||||
"origin": "game"
|
||||
},
|
||||
{
|
||||
"id": "ceaMtFXf7Jq-83f66T-UM",
|
||||
"src": "http://localhost:5179/uploads/games/1773887854172-ea9752e9139b-Donna-head-xxl.webp",
|
||||
"label": "도나",
|
||||
"origin": "game"
|
||||
},
|
||||
{
|
||||
"id": "2odX6CHJOyFroPZ8s57oe",
|
||||
"src": "http://localhost:5179/uploads/games/1773887863903-3635cbc2e569e8-Fuyuka-head-xxl.webp",
|
||||
"label": "후유카",
|
||||
"origin": "game"
|
||||
},
|
||||
{
|
||||
"id": "OfDKYixqM12e57ZAAcGlW",
|
||||
"src": "http://localhost:5179/uploads/games/1773887879061-801daab97ebb98-Snowish_Laru-head-xxl.webp",
|
||||
"label": "라루(크리스마스)",
|
||||
"origin": "game"
|
||||
},
|
||||
{
|
||||
"id": "c-1773888464832-e963464a5f73e8",
|
||||
"src": "blob:http://localhost:5174/10e01324-bbc9-403f-bfe4-0dd7e47eace7",
|
||||
"label": "Chixia-head-xxl.webp",
|
||||
"origin": "custom"
|
||||
}
|
||||
],
|
||||
"createdAt": 1773888448774,
|
||||
"updatedAt": 1773890284754,
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"id": "zq8qdUD6q541v5l6X0wAg",
|
||||
"authorId": "nsTJTtyrDHSqfmRu5glSN",
|
||||
"gameId": "stellasora",
|
||||
"title": "스텔라소라 개쩜",
|
||||
"description": "설명 이렇게 적어봄 이건 개쩌는 티어표임",
|
||||
"isPublic": true,
|
||||
"groups": [
|
||||
{
|
||||
"id": "gS",
|
||||
"name": "S",
|
||||
"itemIds": [
|
||||
"dVx9t49q3CbKe_dnY9Zit",
|
||||
"ceaMtFXf7Jq-83f66T-UM"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "gA",
|
||||
"name": "A",
|
||||
"itemIds": [
|
||||
"Tf3MgX_4Pk4YZszOTfGEQ"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "gC",
|
||||
"name": "C",
|
||||
"itemIds": [
|
||||
"OfDKYixqM12e57ZAAcGlW"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "gB",
|
||||
"name": "B",
|
||||
"itemIds": [
|
||||
"2odX6CHJOyFroPZ8s57oe"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "gD",
|
||||
"name": "쓰레기",
|
||||
"itemIds": [
|
||||
"P1BOwa2sMv_YbAOkhMPVS"
|
||||
]
|
||||
}
|
||||
],
|
||||
"pool": [
|
||||
{
|
||||
"id": "dVx9t49q3CbKe_dnY9Zit",
|
||||
"src": "http://localhost:5179/uploads/games/1773887834722-a3ce962de80228-Chitose-head-xxl.webp",
|
||||
"label": "치토세",
|
||||
"origin": "game"
|
||||
},
|
||||
{
|
||||
"id": "Tf3MgX_4Pk4YZszOTfGEQ",
|
||||
"src": "http://localhost:5179/uploads/games/1773887843354-3dd04644093c5-Freesia-head-xxl.webp",
|
||||
"label": "프리지아",
|
||||
"origin": "game"
|
||||
},
|
||||
{
|
||||
"id": "ceaMtFXf7Jq-83f66T-UM",
|
||||
"src": "http://localhost:5179/uploads/games/1773887854172-ea9752e9139b-Donna-head-xxl.webp",
|
||||
"label": "도나",
|
||||
"origin": "game"
|
||||
},
|
||||
{
|
||||
"id": "2odX6CHJOyFroPZ8s57oe",
|
||||
"src": "http://localhost:5179/uploads/games/1773887863903-3635cbc2e569e8-Fuyuka-head-xxl.webp",
|
||||
"label": "후유카",
|
||||
"origin": "game"
|
||||
},
|
||||
{
|
||||
"id": "OfDKYixqM12e57ZAAcGlW",
|
||||
"src": "http://localhost:5179/uploads/games/1773887879061-801daab97ebb98-Snowish_Laru-head-xxl.webp",
|
||||
"label": "라루(크리스마스)",
|
||||
"origin": "game"
|
||||
},
|
||||
{
|
||||
"id": "P1BOwa2sMv_YbAOkhMPVS",
|
||||
"src": "http://localhost:5179/uploads/games/1773890202889-54aedfa2cea6e-áá
³áá
³á
á
µá«áá
£áº 2026-03-16 áá
©áá
® 6.35.30.png",
|
||||
"label": "기본이미지?",
|
||||
"origin": "game"
|
||||
}
|
||||
],
|
||||
"createdAt": 1773890445513,
|
||||
"updatedAt": 1773890445513
|
||||
}
|
||||
],
|
||||
"customItems": [],
|
||||
"gameSuggestions": []
|
||||
}
|
||||
28
backend/package-lock.json
generated
28
backend/package-lock.json
generated
@@ -13,7 +13,6 @@
|
||||
"cors": "^2.8.6",
|
||||
"express": "^5.2.1",
|
||||
"express-session": "^1.19.0",
|
||||
"lowdb": "^7.0.1",
|
||||
"multer": "^2.1.1",
|
||||
"mysql2": "^3.20.0",
|
||||
"nanoid": "^5.1.7",
|
||||
@@ -889,21 +888,6 @@
|
||||
"integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/lowdb": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/lowdb/-/lowdb-7.0.1.tgz",
|
||||
"integrity": "sha512-neJAj8GwF0e8EpycYIDFqEPcx9Qz4GUho20jWFR7YiFeXzF1YMLdxB36PypcTSPMA+4+LvgyMacYhlr18Zlymw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"steno": "^4.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/typicode"
|
||||
}
|
||||
},
|
||||
"node_modules/lru.min": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/lru.min/-/lru.min-1.1.4.tgz",
|
||||
@@ -1589,18 +1573,6 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/steno": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/steno/-/steno-4.0.2.tgz",
|
||||
"integrity": "sha512-yhPIQXjrlt1xv7dyPQg2P17URmXbuM5pdGkpiMB3RenprfiBlvK415Lctfe0eshk90oA7/tNq7WEiMK8RSP39A==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/typicode"
|
||||
}
|
||||
},
|
||||
"node_modules/streamsearch": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
|
||||
|
||||
@@ -4,11 +4,8 @@
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "DB_CLIENT=mariadb 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_CLIENT=mariadb DB_HOST=127.0.0.1 DB_PORT=3307 DB_USER=tier_cursor DB_PASSWORD=tier_cursor1234 DB_NAME=tier_cursor node index.js",
|
||||
"dev:lowdb": "nodemon --legacy-watch --watch index.js --watch src index.js",
|
||||
"start:lowdb": "node index.js",
|
||||
"migrate:lowdb": "DB_CLIENT=mariadb DB_HOST=127.0.0.1 DB_PORT=3307 DB_USER=tier_cursor DB_PASSWORD=tier_cursor1234 DB_NAME=tier_cursor node scripts/migrate-lowdb-to-mariadb.js"
|
||||
"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"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
@@ -19,7 +16,6 @@
|
||||
"cors": "^2.8.6",
|
||||
"express": "^5.2.1",
|
||||
"express-session": "^1.19.0",
|
||||
"lowdb": "^7.0.1",
|
||||
"multer": "^2.1.1",
|
||||
"mysql2": "^3.20.0",
|
||||
"nanoid": "^5.1.7",
|
||||
|
||||
@@ -1,103 +0,0 @@
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
|
||||
const {
|
||||
ensureData,
|
||||
findUserByEmail,
|
||||
createUser,
|
||||
findGameById,
|
||||
createGame,
|
||||
updateGameThumbnail,
|
||||
createGameItem,
|
||||
createCustomItem,
|
||||
findTierListById,
|
||||
saveTierList,
|
||||
createGameSuggestion,
|
||||
} = require('../src/db')
|
||||
|
||||
async function run() {
|
||||
const sourcePath = path.join(__dirname, '..', 'data', 'db.json')
|
||||
const raw = fs.readFileSync(sourcePath, 'utf8')
|
||||
const data = JSON.parse(raw)
|
||||
|
||||
await ensureData()
|
||||
|
||||
for (const user of data.users || []) {
|
||||
const existing = await findUserByEmail(user.email)
|
||||
if (!existing) {
|
||||
await createUser({
|
||||
id: user.id,
|
||||
email: user.email,
|
||||
nickname: user.nickname || '',
|
||||
passwordHash: user.passwordHash,
|
||||
isAdmin: !!user.isAdmin,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
for (const game of data.games || []) {
|
||||
const existing = await findGameById(game.id)
|
||||
if (!existing) {
|
||||
await createGame({ id: game.id, name: game.name })
|
||||
}
|
||||
if (game.thumbnailSrc) {
|
||||
await updateGameThumbnail(game.id, game.thumbnailSrc)
|
||||
}
|
||||
}
|
||||
|
||||
for (const item of data.gameImages || []) {
|
||||
try {
|
||||
await createGameItem({
|
||||
id: item.id,
|
||||
gameId: item.gameId,
|
||||
src: item.src,
|
||||
label: item.label,
|
||||
})
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
for (const suggestion of data.gameSuggestions || []) {
|
||||
try {
|
||||
await createGameSuggestion({ id: suggestion.id, name: suggestion.name })
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
const seenCustomIds = new Set()
|
||||
for (const tierList of data.tierLists || []) {
|
||||
for (const item of tierList.pool || []) {
|
||||
if (item.origin !== 'custom' || seenCustomIds.has(item.id)) continue
|
||||
seenCustomIds.add(item.id)
|
||||
try {
|
||||
await createCustomItem({
|
||||
id: item.id,
|
||||
ownerId: tierList.authorId,
|
||||
src: item.src,
|
||||
label: item.label,
|
||||
})
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
|
||||
for (const tierList of data.tierLists || []) {
|
||||
const existing = await findTierListById(tierList.id)
|
||||
if (!existing) {
|
||||
await saveTierList({
|
||||
id: tierList.id,
|
||||
authorId: tierList.authorId,
|
||||
gameId: tierList.gameId,
|
||||
title: tierList.title,
|
||||
description: tierList.description || '',
|
||||
isPublic: !!tierList.isPublic,
|
||||
groups: tierList.groups || [],
|
||||
pool: tierList.pool || [],
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
console.log('migrate-lowdb-to-mariadb: done')
|
||||
}
|
||||
|
||||
run().catch((error) => {
|
||||
console.error(error)
|
||||
process.exit(1)
|
||||
})
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,13 +1,28 @@
|
||||
const fs = require('fs/promises')
|
||||
const path = require('path')
|
||||
const express = require('express')
|
||||
const multer = require('multer')
|
||||
const bcrypt = require('bcryptjs')
|
||||
const { z } = require('zod')
|
||||
const { nanoid } = require('nanoid')
|
||||
const {
|
||||
findUserById,
|
||||
findGameById,
|
||||
createGame,
|
||||
listGames,
|
||||
updateGameThumbnail,
|
||||
createGameItem,
|
||||
deleteGameItem,
|
||||
deleteGame,
|
||||
updateGameDisplayOrder,
|
||||
listCustomItems,
|
||||
findUnusedCustomItems,
|
||||
findCustomItemsByIds,
|
||||
deleteCustomItems,
|
||||
listUsers,
|
||||
adminUpdateUser,
|
||||
adminUpdateUserPassword,
|
||||
adminDeleteUser,
|
||||
} = require('../db')
|
||||
const { requireAdmin } = require('../middleware/auth')
|
||||
|
||||
@@ -37,6 +52,20 @@ router.post('/games', requireAdmin, async (req, res) => {
|
||||
res.json({ game })
|
||||
})
|
||||
|
||||
router.patch('/games/display-order', requireAdmin, async (req, res) => {
|
||||
const schema = z.object({
|
||||
gameIds: z.array(z.string().min(1)).max(50),
|
||||
})
|
||||
const parsed = schema.safeParse(req.body)
|
||||
if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
|
||||
|
||||
const games = await listGames()
|
||||
const 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.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)
|
||||
@@ -61,4 +90,145 @@ router.post('/games/:gameId/images', requireAdmin, upload.single('image'), async
|
||||
res.json({ item })
|
||||
})
|
||||
|
||||
router.delete('/games/:gameId/items/:itemId', requireAdmin, async (req, res) => {
|
||||
const game = await findGameById(req.params.gameId)
|
||||
if (!game) return res.status(404).json({ error: 'not_found' })
|
||||
await deleteGameItem(req.params.itemId)
|
||||
res.json({ ok: true })
|
||||
})
|
||||
|
||||
router.delete('/games/:gameId', requireAdmin, async (req, res) => {
|
||||
const game = await findGameById(req.params.gameId)
|
||||
if (!game) return res.status(404).json({ error: 'not_found' })
|
||||
await deleteGame(req.params.gameId)
|
||||
res.json({ ok: true })
|
||||
})
|
||||
|
||||
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'),
|
||||
})
|
||||
const parsed = schema.safeParse(req.query)
|
||||
if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
|
||||
|
||||
const result = await listCustomItems({
|
||||
queryText: parsed.data.q,
|
||||
page: parsed.data.page,
|
||||
limit: parsed.data.limit,
|
||||
orphanOnly: parsed.data.orphanOnly,
|
||||
})
|
||||
res.json(result)
|
||||
})
|
||||
|
||||
async function removeCustomItemFiles(items) {
|
||||
await Promise.all(
|
||||
items.map(async (item) => {
|
||||
if (!item?.src || !item.src.startsWith('/uploads/custom/')) return
|
||||
const absolutePath = path.join(__dirname, '..', '..', item.src.replace(/^\//, ''))
|
||||
try {
|
||||
await fs.unlink(absolutePath)
|
||||
} catch (e) {
|
||||
if (e?.code !== 'ENOENT') throw e
|
||||
}
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
router.delete('/custom-items/:itemId', requireAdmin, async (req, res) => {
|
||||
const result = await listCustomItems({ page: 1, limit: 200, orphanOnly: false })
|
||||
const target = result.items.find((item) => item.id === req.params.itemId)
|
||||
if (!target) return res.status(404).json({ error: 'not_found' })
|
||||
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 })
|
||||
})
|
||||
|
||||
router.delete('/custom-items', requireAdmin, async (req, res) => {
|
||||
const schema = z.object({
|
||||
q: z.string().trim().max(120).optional().default(''),
|
||||
})
|
||||
const parsed = schema.safeParse(req.query)
|
||||
if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
|
||||
|
||||
const items = await findUnusedCustomItems({ queryText: parsed.data.q })
|
||||
const ids = items.map((item) => item.id)
|
||||
await deleteCustomItems(ids)
|
||||
await removeCustomItemFiles(items)
|
||||
res.json({ ok: true, deletedCount: ids.length })
|
||||
})
|
||||
|
||||
router.get('/users', requireAdmin, async (req, res) => {
|
||||
const users = await listUsers()
|
||||
res.json({ users })
|
||||
})
|
||||
|
||||
router.patch('/users/:userId', requireAdmin, async (req, res) => {
|
||||
const schema = z.object({
|
||||
email: z.string().email(),
|
||||
nickname: z.string().trim().max(40).default(''),
|
||||
isAdmin: z.boolean(),
|
||||
})
|
||||
const parsed = schema.safeParse(req.body)
|
||||
if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
|
||||
|
||||
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' })
|
||||
|
||||
try {
|
||||
const updated = await adminUpdateUser({
|
||||
id: user.id,
|
||||
email: parsed.data.email,
|
||||
nickname: parsed.data.nickname,
|
||||
isAdmin: parsed.data.isAdmin,
|
||||
})
|
||||
res.json({ user: updated })
|
||||
} catch (e) {
|
||||
if (e && e.code === 'ER_DUP_ENTRY') {
|
||||
return res.status(409).json({ error: 'email_taken' })
|
||||
}
|
||||
throw e
|
||||
}
|
||||
})
|
||||
|
||||
router.delete('/users/:userId', requireAdmin, async (req, res) => {
|
||||
if (req.params.userId === req.session.userId) {
|
||||
return res.status(400).json({ error: 'cannot_delete_self' })
|
||||
}
|
||||
|
||||
const user = await findUserById(req.params.userId)
|
||||
if (!user) return res.status(404).json({ error: 'not_found' })
|
||||
|
||||
await adminDeleteUser(user.id)
|
||||
res.json({ ok: true })
|
||||
})
|
||||
|
||||
router.patch('/users/:userId/password', requireAdmin, async (req, res) => {
|
||||
const schema = z.object({
|
||||
password: z.string().min(6).max(120),
|
||||
})
|
||||
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 passwordHash = await bcrypt.hash(parsed.data.password, 10)
|
||||
await adminUpdateUserPassword({ id: user.id, passwordHash })
|
||||
res.json({ ok: true })
|
||||
})
|
||||
|
||||
module.exports = router
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
const express = require('express')
|
||||
const { z } = require('zod')
|
||||
const { nanoid } = require('nanoid')
|
||||
const { listGames, getGameDetail, createGameSuggestion } = require('../db')
|
||||
const { listGames, getGameDetail } = require('../db')
|
||||
|
||||
const router = express.Router()
|
||||
|
||||
@@ -16,16 +14,4 @@ router.get('/:gameId', async (req, res) => {
|
||||
res.json({ game: detail.game, items: detail.items })
|
||||
})
|
||||
|
||||
router.post('/suggest', async (req, res) => {
|
||||
const schema = z.object({ name: z.string().min(1).max(60) })
|
||||
const parsed = schema.safeParse(req.body)
|
||||
if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
|
||||
|
||||
const suggestion = await createGameSuggestion({
|
||||
id: nanoid(),
|
||||
name: parsed.data.name,
|
||||
})
|
||||
res.json({ suggestion })
|
||||
})
|
||||
|
||||
module.exports = router
|
||||
|
||||
@@ -7,6 +7,7 @@ const {
|
||||
findTierListById,
|
||||
listPublicTierLists,
|
||||
listUserTierLists,
|
||||
deleteTierList,
|
||||
saveTierList,
|
||||
createCustomItem,
|
||||
} = require('../db')
|
||||
@@ -94,6 +95,15 @@ router.get('/:id', async (req, res) => {
|
||||
res.json({ tierList: normalizeTierList(t) })
|
||||
})
|
||||
|
||||
router.delete('/:id', requireAuth, async (req, res) => {
|
||||
const tierList = await findTierListById(req.params.id)
|
||||
if (!tierList) return res.status(404).json({ error: 'not_found' })
|
||||
if (tierList.authorId !== req.session.userId) return res.status(403).json({ error: 'forbidden' })
|
||||
|
||||
await deleteTierList(tierList.id)
|
||||
res.json({ ok: true })
|
||||
})
|
||||
|
||||
router.post('/custom-items', requireAuth, upload.single('image'), async (req, res) => {
|
||||
if (!req.file) return res.status(400).json({ error: 'file_required' })
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
- 경로, 주소, 운영 설정은 하드코딩보다 환경변수 기반 구성을 우선한다.
|
||||
- Git 커밋 메시지는 한국어로 작성한다.
|
||||
- 버전 릴리스가 포함된 작업은 `docs/update.md`의 버전 표기와 Git 태그를 함께 맞춘다.
|
||||
- Git 푸시 전에는 민감 정보(실명, 개인 이메일, 비밀키, 로컬 절대 경로) 포함 여부를 다시 확인한다.
|
||||
|
||||
## 프런트엔드
|
||||
- API 호출은 `frontend/src/lib/api.js` 또는 런타임 유틸을 통해 통합한다.
|
||||
|
||||
@@ -26,3 +26,69 @@
|
||||
|
||||
## 2026-03-19 v0.1.6
|
||||
- 저장소 운영 규칙을 정리하면서 Git 작성자 정보는 프로젝트 기준 계정으로 통일하고, 커밋 메시지는 한국어로 남기기로 결정했다.
|
||||
|
||||
## 2026-03-19 v0.1.7
|
||||
- 관리자 페이지는 여러 작업을 동시에 나열하는 구조보다 “하나의 작업 모드를 선택하고 그 작업에 집중하는 구조”가 더 적합하다고 판단해 단계형 UI로 전환했다.
|
||||
- 관리자에게는 생성뿐 아니라 삭제 책임도 필요하므로 게임 삭제와 아이템 삭제 기능을 추가하기로 결정했다.
|
||||
- 아이템 삭제는 단순 파일/레코드 삭제만으로 끝내면 안 되고, 기존 티어표 데이터의 참조까지 함께 정리해야 한다고 결정했다.
|
||||
|
||||
## 2026-03-19 v0.1.8
|
||||
- 관리자 업로드 작업은 선택 즉시 결과를 예측할 수 있어야 하므로, 썸네일과 아이템 모두 “파일 선택 → 미리보기 → 실제 업로드” 흐름으로 보강했다.
|
||||
- 게임 썸네일은 대표 이미지 성격이 강하므로 16:9 비율로, 아이템은 캐릭터/오브젝트 단위 식별이 중요하므로 1:1 비율로 보는 방향을 채택했다.
|
||||
- 현재 `db.json`과 lowdb 관련 코드는 기본 운영 런타임이 아니라 마이그레이션/예외 fallback 성격임을 분명히 정리했다.
|
||||
|
||||
## 2026-03-19 v0.1.9
|
||||
- 로컬과 운영 환경을 완전히 같은 DB 계층으로 맞추기 위해 lowdb fallback을 제거하고 MariaDB만 지원하는 코드베이스로 정리했다.
|
||||
- 마이그레이션 종료 이후에는 레거시 JSON 저장소와 예외 실행 스크립트를 남겨두는 비용이 더 크다고 판단해 삭제하기로 결정했다.
|
||||
|
||||
## 2026-03-19 v0.1.10
|
||||
- 관리자 업로드 작업은 "파일 선택 후 적용"이 더 정확하므로, 썸네일 버튼 문구와 활성화 조건을 그 흐름에 맞추기로 결정했다.
|
||||
- 작은 화면에서 미리보기가 실제 작업 영역을 압박하지 않도록, 아이템 미리보기는 정사각형을 유지하되 최대 크기를 제한하는 방향을 채택했다.
|
||||
- 파일 입력은 업로드 성공 후와 게임 전환 시 초기화해 같은 파일 재선택이 막히지 않도록 정리했다.
|
||||
|
||||
## 2026-03-19 v0.1.11
|
||||
- 관리자 화면은 좌우 여백이 크게 남는 구조보다, 상단 2열 작업 카드와 하단 목록 영역으로 나누는 편이 더 안정적이라고 판단해 레이아웃을 재정리했다.
|
||||
- 게임 목록에 없는 주제로도 바로 작업할 수 있도록, 시스템 전용 `freeform` 게임을 내부적으로 유지하고 홈 화면에서는 `직접 티어표 만들기` 카드로 노출하기로 결정했다.
|
||||
- 게임 제안은 현재 운영 흐름과 맞지 않아 사용자 진입점과 프런트 API에서 제거하고, 대신 관리자에게는 사용자 커스텀 아이템 검토 기능을 제공하기로 했다.
|
||||
|
||||
## 2026-03-19 v0.1.12
|
||||
- 앱 전체 배경은 화면 폭 전체를 사용하고, 개별 콘텐츠만 필요한 만큼 정렬하는 방향이 더 자연스럽다고 판단해 전역 최대 폭 제한을 제거했다.
|
||||
- 비로그인 사용자가 새 티어표를 편집하다 저장 단계에서 막히는 경험은 손실 위험이 크므로, 작성 시작 자체를 로그인 사용자로 제한하고 공개 티어표는 읽기 전용으로 보여주기로 결정했다.
|
||||
- 커스텀 이미지 업로드는 단일 파일 선택만으로는 불편하므로, 다중 선택과 드래그 앤 드롭을 기본 흐름으로 보강했다.
|
||||
- 관리자에게는 게임 관리뿐 아니라 회원 관리 책임도 필요하므로, 회원 목록 조회/수정/삭제 기능을 추가하기로 결정했다.
|
||||
|
||||
## 2026-03-19 v0.1.13
|
||||
- 관리자 페이지는 기능 수가 늘어난 만큼 게임, 아이템, 회원 관리 탭으로 나누는 편이 더 안전하다고 판단했다.
|
||||
- 사용자 커스텀 아이템은 수량이 빠르게 커질 수 있으므로, 검색과 페이지네이션을 기본 제공하는 관리 화면으로 보는 방향을 채택했다.
|
||||
- 메일 기반 복구가 없으므로, 관리자가 회원 비밀번호를 직접 초기화할 수 있는 기능을 제공하기로 결정했다.
|
||||
- 티어표 구조는 게임마다 다르므로, 기본 5단은 시작 템플릿일 뿐 사용자가 행을 직접 추가/삭제할 수 있어야 한다고 결정했다.
|
||||
|
||||
## 2026-03-19 v0.1.17
|
||||
- 작성자가 자기 티어표를 직접 삭제할 수 있어야 관리 흐름이 완결되므로, `내 티어표` 화면에 삭제 기능을 추가하기로 결정했다.
|
||||
- 사용자 커스텀 이미지는 서버 용량을 계속 차지하므로, 참조가 하나도 남지 않은 이미지(미사용 항목)를 식별하고 관리자 화면에서 개별/일괄 정리할 수 있도록 하기로 결정했다.
|
||||
|
||||
## 2026-03-19 v0.1.19
|
||||
- 티어표 공개 여부는 운영 기준상 대부분 공개 공유가 목적이므로, 신규 작성 시 기본값을 `공개 ON`으로 두기로 결정했다.
|
||||
- 에디터에서 저장 관련 행동은 좌우로 역할을 나눠 `다운로드/삭제`와 `공개/저장`으로 묶는 편이 더 빠르게 인지된다고 판단했다.
|
||||
- 공개 목록과 내 목록에서 제목만으로는 식별이 어려우므로, 제목 옆에 작성자 아바타와 표시명을 함께 노출하기로 결정했다.
|
||||
- 티어표 카드 메타 정보는 저장 시각과 업데이트 시각을 동시에 노출하는 대신, 최종 업데이트 시각만 남겨 단순화하기로 결정했다.
|
||||
|
||||
## 2026-03-26 v0.1.21
|
||||
- 목록 썸네일 fallback 문자는 닉네임보다 계정 기준이 더 일관되므로, 아바타 이미지가 없을 때는 계정명 첫 글자를 사용하기로 결정했다.
|
||||
- 저장 성공은 화면 이동보다 현 위치 유지가 더 중요하므로, 편집을 계속할 수 있는 확인형 모달로 피드백을 제공하기로 결정했다.
|
||||
- PNG export는 가장자리 여백이 없는 결과보다 중앙 정렬된 카드형 결과물이 더 완성도 있게 보이므로, export 전용 보드에 충분한 바깥 패딩을 포함하기로 했다.
|
||||
|
||||
## 2026-03-26 v0.1.22
|
||||
- 무제목 저장은 게임 이름 기본값보다 `이름 없음 + 날짜`가 더 명확하다고 판단해 자동 제목 규칙을 변경했다.
|
||||
- 제목이 비어 있는 티어표는 품질 관리 대상이 될 수 있으므로, 작성 중 단계에서 관리자 임의 삭제 가능성을 미리 안내하기로 결정했다.
|
||||
- 다운로드 이미지에는 편집용 빈 칸 안내 문구를 제외하고, 더 넓은 보드 폭과 하단 작성자/날짜 메타를 포함해 공유용 완성도를 높이기로 결정했다.
|
||||
|
||||
## 2026-03-26 v0.1.23
|
||||
- 홈 화면 정렬은 단순 생성순 하나보다 `관리자 상단 고정 순서 + 나머지 최신 생성순` 조합이 운영과 신규 노출을 함께 만족시킨다고 판단했다.
|
||||
- 상단 고정은 전체 수동 정렬보다 최대 50개만 관리하는 방식이 운영 부담이 적으므로, 관리자에게는 제한된 상단 고정 목록만 직접 편집하게 하기로 결정했다.
|
||||
- `커스텀 티어표 만들기`는 일반 게임 카드와 성격이 다르므로 카드형 목록에서 분리해 우측 상단 버튼으로 노출하기로 결정했다.
|
||||
|
||||
## 2026-03-26 v0.1.24
|
||||
- 상단 고정 게임이 50개까지 늘어날 수 있으므로, 위/아래 버튼만으로는 불편하다고 판단해 드래그 정렬을 함께 제공하기로 결정했다.
|
||||
- export 결과가 지나치게 넓으면 아이콘이 한 줄에 과도하게 몰리므로, 공유용 이미지 폭을 줄이고 pixel ratio도 낮춰 균형을 맞추기로 결정했다.
|
||||
- 현재 업로드는 파일 크기 제한만 있고 서버 저장 전 최적화는 없으므로, 운영 문서에 현황을 명확히 남기고 향후 리사이즈/압축 도입 여부를 검토하기로 했다.
|
||||
|
||||
@@ -33,14 +33,6 @@ cd frontend
|
||||
VITE_API_ORIGIN=http://localhost:5179 npm run dev
|
||||
```
|
||||
|
||||
## 5. 기존 lowdb 데이터 이관
|
||||
MariaDB 컨테이너와 백엔드 의존성이 준비된 뒤 아래 명령을 실행한다.
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
npm run migrate:lowdb
|
||||
```
|
||||
|
||||
## 메모
|
||||
- 긴급 확인용으로만 `npm run dev:lowdb`를 남겨두었고, 기본 개발 기준은 MariaDB다.
|
||||
- 현재 코드베이스는 MariaDB 전용이며, 로컬과 NAS 모두 같은 DB 계층을 사용한다.
|
||||
- NAS 배포 시에도 동일하게 MariaDB를 사용하므로 로컬과 운영 간 DB 계층 차이를 줄일 수 있다.
|
||||
|
||||
14
docs/map.md
14
docs/map.md
@@ -2,8 +2,8 @@
|
||||
|
||||
## `/`
|
||||
- 화면 파일: `frontend/src/views/HomeView.vue`
|
||||
- 역할: 게임 목록 표시, 게임 카드 클릭 이동, 새 게임 제안 모달
|
||||
- 연동 API: `GET /api/games`, `POST /api/games/suggest`
|
||||
- 역할: 게임 목록 표시, 게임 카드 클릭 이동, `직접 티어표 만들기` 진입
|
||||
- 연동 API: `GET /api/games`
|
||||
|
||||
## `/games/:gameId`
|
||||
- 화면 파일: `frontend/src/views/GameHubView.vue`
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
## `/editor/:gameId/new`, `/editor/:gameId/:tierListId`
|
||||
- 화면 파일: `frontend/src/views/TierEditorView.vue`
|
||||
- 역할: 티어 그룹 편집, 관리자 아이템/커스텀 아이템 드래그 앤 드롭, 저장, 공개 여부 설정, PNG 다운로드
|
||||
- 역할: 티어 그룹 편집, 티어 행 추가/삭제, 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 작성 권한 제어, 저장, 공개 여부 설정, PNG 다운로드
|
||||
- 연동 API: `GET /api/games/:gameId`, `GET /api/tierlists/:id`, `POST /api/tierlists/custom-items`, `POST /api/tierlists`
|
||||
|
||||
## `/login`
|
||||
@@ -22,13 +22,13 @@
|
||||
|
||||
## `/me`
|
||||
- 화면 파일: `frontend/src/views/MyTierListsView.vue`
|
||||
- 역할: 내 티어표 목록 조회, 편집 화면으로 이동
|
||||
- 연동 API: `GET /api/tierlists/me`
|
||||
- 역할: 내 티어표 목록 조회, 편집 화면으로 이동, 작성자 본인 티어표 삭제
|
||||
- 연동 API: `GET /api/tierlists/me`, `DELETE /api/tierlists/:id`
|
||||
|
||||
## `/admin`
|
||||
- 화면 파일: `frontend/src/views/AdminView.vue`
|
||||
- 역할: 게임 추가, 게임 선택 후 썸네일 업로드, 관리자 아이템 추가, 현재 아이템 목록 확인
|
||||
- 연동 API: `POST /api/admin/games`, `POST /api/admin/games/:gameId/thumbnail`, `POST /api/admin/games/:gameId/images`
|
||||
- 역할: `게임 관리 / 아이템 관리 / 회원 관리` 탭 분리, 선택된 게임의 썸네일/기본 아이템 관리, 사용자 커스텀 아이템 검색/페이지네이션/사용 횟수 확인/미사용 이미지 개별·일괄 삭제, 회원 비밀번호 초기화 포함 회원 관리, 파일 입력 초기화, 아이템 삭제, 게임 삭제
|
||||
- 연동 API: `POST /api/admin/games`, `POST /api/admin/games/:gameId/thumbnail`, `POST /api/admin/games/:gameId/images`, `GET /api/admin/custom-items`, `DELETE /api/admin/custom-items/:itemId`, `DELETE /api/admin/custom-items`, `GET /api/admin/users`, `PATCH /api/admin/users/:userId`, `PATCH /api/admin/users/:userId/password`, `DELETE /api/admin/users/:userId`, `DELETE /api/admin/games/:gameId/items/:itemId`, `DELETE /api/admin/games/:gameId`
|
||||
|
||||
## `/profile`
|
||||
- 화면 파일: `frontend/src/views/ProfileView.vue`
|
||||
|
||||
49
docs/spec.md
49
docs/spec.md
@@ -15,7 +15,6 @@
|
||||
- 아바타: `backend/uploads/avatars/`
|
||||
- 커스텀 아이템: `backend/uploads/custom/`
|
||||
- 시드 이미지: `backend/uploads/seeds/`
|
||||
- 레거시 마이그레이션 소스: `backend/data/db.json`
|
||||
|
||||
## DB 스키마
|
||||
- `users`
|
||||
@@ -31,6 +30,7 @@
|
||||
- `name`: string
|
||||
- `thumbnailSrc`: string
|
||||
- `createdAt`: number
|
||||
- 시스템 전용 `freeform` 레코드는 홈 화면의 `직접 티어표 만들기` 저장 대상이며 일반 게임 목록에서는 숨긴다.
|
||||
- `gameItems`
|
||||
- `id`: string
|
||||
- `gameId`: string
|
||||
@@ -70,23 +70,61 @@
|
||||
- 게임
|
||||
- `GET /api/games`
|
||||
- `GET /api/games/:gameId`
|
||||
- `POST /api/games/suggest`
|
||||
- 티어표
|
||||
- `GET /api/tierlists/public`
|
||||
- `GET /api/tierlists/me`
|
||||
- `GET /api/tierlists/:id`
|
||||
- `DELETE /api/tierlists/:id`
|
||||
- `POST /api/tierlists/custom-items`
|
||||
- `POST /api/tierlists`
|
||||
- 관리자
|
||||
- `POST /api/admin/games`
|
||||
- `POST /api/admin/games/:gameId/thumbnail`
|
||||
- `POST /api/admin/games/:gameId/images`
|
||||
- `GET /api/admin/custom-items`
|
||||
- `DELETE /api/admin/custom-items/:itemId`
|
||||
- `DELETE /api/admin/custom-items`
|
||||
- `GET /api/admin/users`
|
||||
- `PATCH /api/admin/users/:userId`
|
||||
- `PATCH /api/admin/users/:userId/password`
|
||||
- `DELETE /api/admin/users/:userId`
|
||||
- `DELETE /api/admin/games/:gameId/items/:itemId`
|
||||
- `DELETE /api/admin/games/:gameId`
|
||||
|
||||
## 관리자 화면 메모
|
||||
- 썸네일은 16:9 비율 미리보기 후 `썸네일 적용` 버튼으로 실제 반영한다.
|
||||
- 게임 기본 아이템 추가는 이름 입력, 파일 선택, 1:1 미리보기 확인 뒤 저장하는 흐름이다.
|
||||
- 아이템 미리보기는 반응형 환경에서도 최대 `192px` 크기 안에서 표시한다.
|
||||
- 게임 전환 또는 업로드 성공 뒤에는 파일 입력값을 초기화해 같은 파일도 다시 선택할 수 있다.
|
||||
- 게임 관리 탭에서는 홈 화면 상단에 먼저 노출할 게임을 최대 50개까지 지정하고, 드래그 또는 위/아래 버튼으로 순서를 저장할 수 있다.
|
||||
- 사용자 업로드 커스텀 아이템은 관리자 화면의 아이템 관리 탭에서 검색, 페이지네이션, 다운로드할 수 있다.
|
||||
- 커스텀 아이템은 사용 횟수(`usageCount`)를 표시하며, 미사용 항목만 필터링해 개별/일괄 삭제할 수 있다.
|
||||
- 관리자 화면에서는 회원 이메일/닉네임/권한 수정, 비밀번호 초기화, 계정 삭제가 가능하다.
|
||||
|
||||
## 티어표 접근 메모
|
||||
- `new` 작성 경로는 로그인한 사용자만 진입할 수 있다.
|
||||
- 비로그인 사용자는 공개된 티어표를 열람만 할 수 있고, 편집 UI와 저장 동작은 비활성화된다.
|
||||
- 커스텀 이미지 추가는 다중 파일 선택과 드래그 앤 드롭을 모두 지원한다.
|
||||
- 티어 행은 기본 5단으로 시작하지만, 사용자가 직접 추가하거나 제거할 수 있다.
|
||||
- 신규 티어표의 공개 여부 기본값은 `ON`이며, 기존 티어표는 편집 화면과 `내 티어표` 목록에서 직접 삭제할 수 있다.
|
||||
- 제목이 비어 있는 상태로 저장하면 내부 제목은 `이름 없음 + 날짜` 형식으로 자동 생성한다.
|
||||
- 제목 입력이 비어 있는 동안에는 무분별한 도배 방지를 위한 관리자 임의 삭제 가능성 안내 문구를 표시한다.
|
||||
- 공개 티어표 목록과 `내 티어표` 목록은 제목 옆에 작성자 아바타와 표시명을 함께 보여준다.
|
||||
- 작성자 아바타 이미지가 없을 경우 목록 썸네일 fallback은 닉네임이 아니라 계정명 기준 첫 글자를 사용한다.
|
||||
- 티어표 목록 메타 정보는 최종 업데이트 시각만 간략하게 표시한다.
|
||||
- 저장 성공 시에는 에디터 안에서 반투명 오버레이 기반 확인 모달을 띄우고, PNG export 이미지는 약 `1360px` 폭과 `pixelRatio 1.5`, 외곽 여백, 작성자/날짜 하단 메타를 포함해 생성한다.
|
||||
- 홈 게임 목록은 관리자 상단 고정 순서가 있으면 그 순서를 먼저 적용하고, 그 외 게임은 최근 생성순으로 뒤에 이어진다.
|
||||
- `커스텀 티어표 만들기`는 카드가 아니라 홈 우측 상단 버튼으로 진입한다.
|
||||
|
||||
## 업로드 제한 메모
|
||||
- 프로필 아바타 업로드는 파일당 최대 `3MB`다.
|
||||
- 관리자 게임 썸네일/기본 아이템 업로드와 사용자 커스텀 이미지 업로드는 파일당 최대 `6MB`다.
|
||||
- 현재는 업로드 전에 이미지 리사이즈/압축을 하지 않고 원본 파일을 그대로 저장한다.
|
||||
|
||||
## 운영 환경 변수
|
||||
- 프런트엔드
|
||||
- `VITE_API_ORIGIN`: API 및 업로드 파일 절대 기준 주소
|
||||
- 백엔드
|
||||
- `DB_CLIENT`: 기본 개발 기준은 `mariadb`
|
||||
- `DB_HOST`: MariaDB 호스트
|
||||
- `DB_PORT`: MariaDB 포트
|
||||
- `DB_USER`: MariaDB 계정
|
||||
@@ -105,9 +143,8 @@
|
||||
- MariaDB 컨테이너 또는 NAS 패키지 설치
|
||||
- phpMyAdmin 또는 Adminer 설치
|
||||
- 앱은 환경변수로 해당 DB에 연결
|
||||
- 레거시 `db.json` 데이터는 `node backend/scripts/migrate-lowdb-to-mariadb.js`로 이관한다.
|
||||
|
||||
## 로컬 개발 기준
|
||||
- 기본 로컬 개발도 `docker compose`로 띄운 MariaDB를 사용한다.
|
||||
- 기본 백엔드 실행 스크립트 `backend/package.json`의 `dev`, `start`, `migrate:lowdb`는 로컬 MariaDB(`127.0.0.1:3307`) 기준으로 맞춰져 있다.
|
||||
- 예외적으로만 `dev:lowdb`, `start:lowdb`를 사용한다.
|
||||
- 기본 백엔드 실행 스크립트 `backend/package.json`의 `dev`, `start`는 로컬 MariaDB(`127.0.0.1:3307`) 기준으로 맞춰져 있다.
|
||||
- `backend/src/db.js`는 MariaDB만 대상으로 동작하며, 파일 기반 fallback은 제거되었다.
|
||||
|
||||
13
docs/todo.md
13
docs/todo.md
@@ -1,9 +1,10 @@
|
||||
# 할 일 및 이슈
|
||||
|
||||
## 즉시 확인 필요
|
||||
- 관리자 화면에 게임 제안(`gameSuggestions`) 조회/처리 UI가 아직 없다.
|
||||
- MariaDB 실제 서버가 준비되면 `backend/scripts/migrate-lowdb-to-mariadb.js`를 실행해 기존 `db.json` 데이터를 이관해야 한다.
|
||||
- 기존 `backend/data/db.json`의 절대 로컬 URL/깨진 파일명 데이터는 마이그레이션 후 수동 정리가 필요할 수 있다.
|
||||
- 사용자 커스텀 아이템을 관리자 기본 템플릿으로 승격하는 승인/복제 흐름은 아직 없다.
|
||||
- 회원 관리에서 아바타/작성 티어표 수/최근 활동 같은 보조 정보는 아직 표시하지 않는다.
|
||||
- 미사용 커스텀 이미지 일괄 삭제는 현재 "참조가 없는 항목" 기준이며, 보관 기간 정책 같은 운영 규칙은 아직 없다.
|
||||
- 업로드 이미지는 현재 원본 파일을 그대로 저장하므로, 운영 부담이 커지면 서버 저장 전 리사이즈/압축(예: 긴 변 제한, WebP 변환) 도입이 필요하다.
|
||||
|
||||
## 배포 전 작업
|
||||
- NAS 실제 도메인 기준으로 `VITE_API_ORIGIN`, `CORS_ORIGINS`, `SESSION_SECRET`, `SESSION_COOKIE_SECURE`, `TRUST_PROXY` 값을 설정한다.
|
||||
@@ -13,6 +14,8 @@
|
||||
- 로컬 docker compose와 NAS MariaDB 사이의 버전 차이가 크지 않도록 유지한다.
|
||||
|
||||
## 중기 개선
|
||||
- 게임/이미지/티어표 삭제 및 수정 이력 관리 기능을 추가한다.
|
||||
- 게임/이미지/티어표 삭제 후 복구 또는 수정 이력 관리 기능을 추가한다.
|
||||
- 자동 테스트와 최소한의 배포 체크리스트를 만든다.
|
||||
- 관리자용 게임 제안 승인/반려, 아이템 삭제/정렬 UI를 추가한다.
|
||||
- 관리자용 커스텀 아이템 승인/복제, 아이템 정렬 UI를 추가한다.
|
||||
- 회원 검색/필터, 일괄 권한 변경 같은 관리 보조 기능을 추가한다.
|
||||
- 티어 행 프리셋 저장, 색상 관리, 행 복제 같은 고급 편집 기능을 추가한다.
|
||||
|
||||
@@ -1,5 +1,40 @@
|
||||
# 업데이트 로그
|
||||
|
||||
## 2026-03-26 v0.1.24
|
||||
- **관리자 게임 순서 드래그 정렬 추가**: 상단 고정 게임 목록을 위/아래 버튼뿐 아니라 드래그로도 순서를 바꿀 수 있도록 보강
|
||||
- **export 크기 재조정**: 티어표 PNG export를 약 `1360px` 폭과 `pixelRatio 1.5` 기준으로 낮춰 아이콘이 과도하게 한 줄에 몰리지 않도록 수정
|
||||
- **업로드 정책 문서화**: 현재 아바타 `3MB`, 게임/커스텀 이미지 `6MB` 제한이 있으며 서버 저장 전 리사이즈/압축은 아직 하지 않는다는 점을 문서에 명시
|
||||
|
||||
## 2026-03-26 v0.1.23
|
||||
- **홈 게임 정렬 규칙 변경**: 일반 게임 목록은 `상단 고정 순서 → 나머지 최신 생성순`으로 정렬되도록 변경
|
||||
- **관리자 게임 순서 편집 추가**: 관리자 게임 관리 탭에서 최대 50개의 게임을 상단 고정 목록으로 선택하고 위/아래 순서를 저장할 수 있도록 추가
|
||||
- **커스텀 티어표 진입점 변경**: 홈 화면의 `직접 티어표 만들기` 카드를 제거하고 우측 상단 버튼형 진입점으로 변경
|
||||
|
||||
## 2026-03-26 v0.1.22
|
||||
- **무제목 저장 규칙 변경**: 제목을 비워두고 저장하면 내부 저장 제목을 `이름 없음 + 날짜` 형식으로 생성하도록 변경
|
||||
- **무제목 안내 문구 추가**: 제목 입력이 비어 있는 동안 관리자 임의 삭제 가능성을 알리는 경고 문구를 제목 입력 아래에 표시
|
||||
- **export 보드 확장**: 다운로드용 티어표 이미지는 빈 칸 안내 문구를 숨기고, 약 `1600px` 폭과 더 넉넉한 여백, 하단 작성자/날짜 메타 정보를 포함하도록 조정
|
||||
|
||||
## 2026-03-26 v0.1.21
|
||||
- **아바타 fallback 기준 통일**: 티어표 목록에서 작성자 아바타 이미지가 없을 때 닉네임이 아니라 계정명 기준 첫 글자를 표시하도록 정리
|
||||
- **저장 완료 모달 추가**: 에디터에서 저장 성공 시 반투명 오버레이와 확인 버튼이 있는 피드백 모달을 표시하도록 추가
|
||||
- **다운로드 이미지 여백 보강**: PNG export 전용 보드에 외곽 패딩과 배경 여백을 넣어 콘텐츠가 가장자리에 붙어 보이지 않도록 조정
|
||||
|
||||
## 2026-03-19 v0.1.20
|
||||
- **게임 선택 카드 순서 조정**: 홈 화면에서 일반 게임 카드를 먼저 보여주고 `직접 티어표 만들기` 카드는 마지막에 배치
|
||||
- **게임 카드 3열 레이아웃**: PC 기준 게임 선택 화면 카드를 3열로 재구성하고, 썸네일을 16:9 비율로 통일
|
||||
- **공개 티어표 카드 3열 레이아웃**: 게임 허브의 공개 티어표 목록도 PC 기준 3열 카드형으로 재배치하고 태블릿/모바일에서는 자동 줄바꿈되도록 조정
|
||||
|
||||
## 2026-03-19 v0.1.19
|
||||
- **에디터 저장 영역 재정렬**: 공개 기본값을 `ON`으로 바꾸고, 액션 영역을 `이미지 다운로드 / 삭제 / 공개 ON·OFF / 저장` 흐름으로 재배치
|
||||
- **에디터 삭제 진입점 추가**: 기존 티어표는 편집 화면에서 바로 삭제할 수 있도록 버튼을 추가
|
||||
- **목록 작성자 표시 개선**: 공개 티어표와 내 티어표 목록의 제목 옆에 원형 아바타와 `by 닉네임(없으면 계정명)`을 표시
|
||||
- **목록 메타 단순화**: 티어표 카드 하단 정보는 게임 ID, 저장 시각, 라벨 문구를 제거하고 최종 업데이트 시각만 간략하게 노출
|
||||
|
||||
## 2026-03-19 v0.1.18
|
||||
- **미사용 아이콘 필터 수정**: 관리자 아이템 관리의 `미사용 아이콘 보기` 체크 상태가 실제 API 요청의 `orphanOnly` 파라미터로 전달되도록 수정
|
||||
- **삭제 활성화 흐름 정상화**: 미사용 아이콘만 조회했을 때 `usageCount = 0` 항목의 개별 삭제 버튼이 의도대로 활성화되도록 정리
|
||||
|
||||
## 2026-03-19 v0.1.0
|
||||
- **초기 스캐폴딩**: `frontend/`에 Vue3(Vite, JavaScript) 프로젝트 생성
|
||||
- **라우팅/화면 골격**: 게임 선택(`/`), 게임 허브(`/games/:gameId`), 에디터(`/editor/:gameId/...`), 로그인(`/login`), 내 티어표(`/me`), 관리자(`/admin`) 라우트 추가
|
||||
@@ -50,3 +85,60 @@
|
||||
## 2026-03-19 v0.1.6
|
||||
- **저장소 메타데이터 정리**: Git 작성자 정보를 프로젝트 계정 기준으로 통일하고, 초기 릴리스 커밋 메시지를 한국어 기준으로 재작성
|
||||
- **버전 관리 규칙 보강**: 커밋 메시지 한국어 작성 및 문서 버전과 Git 태그를 함께 맞추는 규칙을 문서에 반영
|
||||
|
||||
## 2026-03-19 v0.1.7
|
||||
- **AI 작업 규칙 보강**: `ai-rules.md`에 Git 작성자 정보, 한국어 커밋 메시지, 버전/태그 동기화, 민감 정보 확인 규칙 추가
|
||||
- **관리자 화면 재구성**: `/admin`을 좌우 병렬 구조에서 `모드 선택 → 게임 선택/생성 → 선택된 게임 상세 관리` 흐름으로 재구성
|
||||
- **관리자 삭제 기능 추가**: 등록된 게임 자체 삭제 및 등록된 아이템 개별 삭제 기능 추가
|
||||
- **데이터 정합성 보강**: 관리자 아이템 삭제 시 관련 티어표의 `groups/pool` 참조를 함께 정리하도록 백엔드 로직 보강
|
||||
|
||||
## 2026-03-19 v0.1.8
|
||||
- **관리자 업로드 UX 개선**: 썸네일과 아이템 추가 시 파일 선택 직후 미리보기 표시
|
||||
- **썸네일 비율 정리**: 관리자 썸네일 미리보기와 대표 썸네일 표시를 16:9, 약 256px 폭 기준으로 조정
|
||||
- **아이템 카드 레이아웃 개선**: 아이템 목록과 추가 미리보기를 1:1 비율 기준으로 재구성하고 더 촘촘한 카드 그리드로 조정
|
||||
- **레거시 파일 역할 정리**: `db.json`과 lowdb 관련 코드는 현재 MariaDB 기본 런타임에는 필수가 아니며, 마이그레이션/예외 fallback 용도임을 문서에 명시
|
||||
|
||||
## 2026-03-19 v0.1.9
|
||||
- **MariaDB 전용 전환 완료**: `backend/src/db.js`에서 lowdb 분기와 `DB_CLIENT` 기반 fallback을 제거하고 MariaDB 전용 저장 계층으로 정리
|
||||
- **레거시 파일 제거**: `backend/data/db.json`, `backend/scripts/migrate-lowdb-to-mariadb.js`, `dev:lowdb/start:lowdb/migrate:lowdb` 스크립트 및 `lowdb` 의존성 제거
|
||||
- **실행 문서 정리**: `README.md`, `docs/local-mariadb.md`, `docs/spec.md`, `docs/todo.md`, `docs/history.md`를 현재 MariaDB 전용 개발/배포 흐름 기준으로 갱신
|
||||
|
||||
## 2026-03-19 v0.1.10
|
||||
- **관리자 썸네일 액션 정리**: 썸네일 버튼 문구를 `썸네일 적용`으로 바꾸고, 파일 선택 전에는 비활성화되도록 조정
|
||||
- **아이템 추가 폼 정리**: 아이템 이름 입력 너비를 줄이고, 과한 미리보기 안내 문구를 제거해 작업 집중도를 높임
|
||||
- **반응형 미리보기 보정**: 태블릿 이하 화면에서도 아이템 1:1 미리보기가 최대 `192px` 범위 안에서 보이도록 조정
|
||||
- **파일 재선택 버그 수정**: 아이템 추가나 게임 전환 뒤 파일 입력 값을 초기화해 같은 이미지를 다시 선택해도 정상 인식되도록 수정
|
||||
|
||||
## 2026-03-19 v0.1.11
|
||||
- **관리자 레이아웃 재구성**: 인라인 스타일을 제거하고, 썸네일 적용과 아이템 추가를 상단 2열 카드로 재배치한 뒤 아이템 목록은 하단 리스트로 분리
|
||||
- **직접 티어표 만들기 추가**: 홈 화면에 게임 카드와 동일한 형태의 `직접 티어표 만들기` 진입점을 추가하고, 내부 전용 `freeform` 게임 레코드로 1회성 빈 티어표 저장 흐름을 지원
|
||||
- **게임 제안 흐름 제거**: 홈 화면의 `새로운 게임 제안` 버튼/모달과 관련 프런트 API를 제거해 현재 운영 흐름에 맞게 단순화
|
||||
- **커스텀 아이템 검토 영역 추가**: 관리자 페이지에서 사용자 업로드 커스텀 아이템을 목록으로 보고 다운로드할 수 있는 검토 영역과 조회 API를 추가
|
||||
|
||||
## 2026-03-19 v0.1.12
|
||||
- **전역 레이아웃 폭 정리**: 앱 메인 영역의 고정 최대 너비를 제거해 배경과 페이지 폭이 잘린 듯 보이지 않도록 조정
|
||||
- **작성 권한 제한**: 비로그인 사용자는 새 티어표 작성 화면으로 직접 진입할 수 없도록 하고, 공개된 티어표는 읽기 전용으로만 보이게 조정
|
||||
- **커스텀 이미지 업로드 개선**: 에디터의 커스텀 이미지 추가 영역에 다중 파일 선택과 드래그 앤 드롭 업로드를 추가
|
||||
- **회원 관리 추가**: 관리자 페이지에서 가입 회원 목록 조회, 이메일/닉네임/권한 수정, 계정 삭제가 가능한 관리 영역과 API를 추가
|
||||
|
||||
## 2026-03-19 v0.1.13
|
||||
- **관리자 탭 구조 정리**: 관리자 페이지를 `게임 관리 / 아이템 관리 / 회원 관리` 탭으로 분리하고 기능별 작업 영역을 명확히 분리
|
||||
- **커스텀 아이템 조회 강화**: 사용자 커스텀 아이템 목록에 파일명 검색, `50/200` 단위 페이지네이션, 다운로드 흐름 추가
|
||||
- **회원 비밀번호 초기화 추가**: 관리자 페이지와 API에서 회원 비밀번호를 직접 재설정할 수 있도록 기능 추가
|
||||
- **가변 티어 행 지원**: 티어표 에디터에서 `S~D` 고정 5단이 아니라 티어 행을 직접 추가/삭제할 수 있도록 보강
|
||||
|
||||
## 2026-03-19 v0.1.14
|
||||
- **커스텀 아이템 카드 반응형 수정**: 관리자 아이템 관리 탭의 커스텀 아이템 카드에서 이미지 폭을 유동값으로 조정하고, 텍스트 영역에 `min-width: 0`과 강제 줄바꿈 기준을 추가해 카드 바깥 overflow를 방지
|
||||
|
||||
## 2026-03-19 v0.1.15
|
||||
- **셀렉트 화살표 여백 정리**: 전역 `select` 스타일에 커스텀 화살표 위치와 오른쪽 여백을 추가해 텍스트와 화살표가 지나치게 붙지 않도록 조정
|
||||
- **티어표 다운로드 결과 개선**: `TierEditorView`의 이미지 저장을 Blob 다운로드 방식으로 바꾸고, 캡처 대상을 보드 영역만 포함하는 전용 export 뷰로 분리해 우측 아이템 영역과 편집용 버튼/입력 UI가 저장 이미지에 섞이지 않도록 수정
|
||||
|
||||
## 2026-03-19 v0.1.16
|
||||
- **티어표 헤더 마감 정리**: 제목/설명 입력을 각각 한 줄 폭으로 정리하고, 액션 영역과 분리해 헤더 가독성을 개선
|
||||
- **export 정보 보강**: 이미지 저장 시 제목 아래에 설명이 함께 표시되도록 보강
|
||||
- **보드 여백/정렬 정리**: 보드 내부 패딩을 늘리고, 티어 그룹 제목을 중앙 정렬로 조정해 완성본 느낌을 개선
|
||||
|
||||
## 2026-03-19 v0.1.17
|
||||
- **내 티어표 삭제 추가**: `내 티어표` 목록에서 작성자가 자신의 티어표를 직접 삭제할 수 있도록 삭제 버튼과 API를 추가
|
||||
- **미사용 커스텀 이미지 관리 추가**: 관리자 아이템 탭에서 커스텀 이미지의 사용 횟수를 표시하고, 미사용 항목만 따로 필터링해 개별/일괄 삭제할 수 있도록 보강
|
||||
|
||||
@@ -143,8 +143,8 @@ async function logout() {
|
||||
}
|
||||
.app-main {
|
||||
padding: 20px 18px 60px;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.user {
|
||||
|
||||
@@ -32,11 +32,25 @@ export const api = {
|
||||
|
||||
listGames: () => request('/api/games'),
|
||||
getGame: (gameId) => request(`/api/games/${encodeURIComponent(gameId)}`),
|
||||
suggestGame: (name) => request('/api/games/suggest', { method: 'POST', body: { name } }),
|
||||
updateAdminGameDisplayOrder: (payload) => request('/api/admin/games/display-order', { method: 'PATCH', body: payload }),
|
||||
listAdminCustomItems: ({ q = '', page = 1, limit = 50, orphanOnly = false } = {}) =>
|
||||
request(
|
||||
`/api/admin/custom-items?q=${encodeURIComponent(q)}&page=${encodeURIComponent(page)}&limit=${encodeURIComponent(limit)}&orphanOnly=${encodeURIComponent(orphanOnly)}`
|
||||
),
|
||||
listAdminUsers: () => request('/api/admin/users'),
|
||||
updateAdminUser: (userId, payload) =>
|
||||
request(`/api/admin/users/${encodeURIComponent(userId)}`, { method: 'PATCH', body: payload }),
|
||||
updateAdminUserPassword: (userId, payload) =>
|
||||
request(`/api/admin/users/${encodeURIComponent(userId)}/password`, { method: 'PATCH', body: payload }),
|
||||
deleteAdminUser: (userId) => request(`/api/admin/users/${encodeURIComponent(userId)}`, { method: 'DELETE' }),
|
||||
|
||||
listPublicTierLists: (gameId) =>
|
||||
request(`/api/tierlists/public?gameId=${encodeURIComponent(gameId || '')}`),
|
||||
listMyTierLists: () => request('/api/tierlists/me'),
|
||||
getTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}`),
|
||||
deleteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}`, { method: 'DELETE' }),
|
||||
saveTierList: (payload) => request('/api/tierlists', { method: 'POST', body: payload }),
|
||||
deleteAdminCustomItem: (itemId) => request(`/api/admin/custom-items/${encodeURIComponent(itemId)}`, { method: 'DELETE' }),
|
||||
deleteAdminUnusedCustomItems: ({ q = '' } = {}) =>
|
||||
request(`/api/admin/custom-items?q=${encodeURIComponent(q)}`, { method: 'DELETE' }),
|
||||
}
|
||||
|
||||
@@ -54,6 +54,21 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background-image:
|
||||
linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.78) 50%),
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.78) 50%, transparent 50%);
|
||||
background-position:
|
||||
calc(100% - 18px) calc(50% - 2px),
|
||||
calc(100% - 12px) calc(50% - 2px);
|
||||
background-size: 6px 6px, 6px 6px;
|
||||
background-repeat: no-repeat;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: var(--heading);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,9 +2,12 @@
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { api } from '../lib/api'
|
||||
import { toApiUrl } from '../lib/runtime'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const gameId = computed(() => route.params.gameId)
|
||||
|
||||
@@ -19,10 +22,21 @@ function fmt(ts) {
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
function displayNameOf(tierList) {
|
||||
return tierList.authorName || '알 수 없음'
|
||||
}
|
||||
|
||||
function avatarSrcOf(tierList) {
|
||||
return tierList.authorAvatarSrc ? toApiUrl(tierList.authorAvatarSrc) : ''
|
||||
}
|
||||
|
||||
function avatarFallbackOf(tierList) {
|
||||
return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const [gameRes, listRes] = await Promise.all([api.getGame(gameId.value), api.listPublicTierLists(gameId.value)])
|
||||
@@ -34,6 +48,10 @@ onMounted(async () => {
|
||||
})
|
||||
|
||||
function createNew() {
|
||||
if (!auth.user) {
|
||||
router.push(`/login?redirect=/editor/${gameId.value}/new`)
|
||||
return
|
||||
}
|
||||
router.push(`/editor/${gameId.value}/new`)
|
||||
}
|
||||
|
||||
@@ -50,7 +68,7 @@ function openTierList(id) {
|
||||
<p class="desc">새 티어표를 만들거나, 다른 사람들이 올린 티어표를 확인하세요.</p>
|
||||
</div>
|
||||
<div class="head__right">
|
||||
<button class="primary" @click="createNew">새로운 티어표 만들기</button>
|
||||
<button class="primary" @click="createNew">{{ auth.user ? '새로운 티어표 만들기' : '로그인 후 새 티어표 만들기' }}</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -60,10 +78,15 @@ function openTierList(id) {
|
||||
<div v-if="tierLists.length === 0" class="empty">아직 공개 티어표가 없어요.</div>
|
||||
<div v-else class="list">
|
||||
<button v-for="t in tierLists" :key="t.id" class="row" @click="openTierList(t.id)">
|
||||
<div class="row__title">{{ t.title }}</div>
|
||||
<div class="row__meta">
|
||||
작성자: {{ t.authorName || '알 수 없음' }} · 저장: {{ fmt(t.createdAt || t.updatedAt) }} · 업데이트: {{ fmt(t.updatedAt) }}
|
||||
<div class="row__head">
|
||||
<div class="row__title">{{ t.title }}</div>
|
||||
<div class="row__author">
|
||||
<img v-if="avatarSrcOf(t)" class="row__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
|
||||
<div v-else class="row__avatar row__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
|
||||
<span>by {{ displayNameOf(t) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row__meta">{{ fmt(t.updatedAt) }}</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
@@ -125,26 +148,72 @@ function openTierList(id) {
|
||||
}
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
.row {
|
||||
text-align: left;
|
||||
padding: 12px;
|
||||
border-radius: 14px;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
align-content: start;
|
||||
min-height: 168px;
|
||||
}
|
||||
.row:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.row__title {
|
||||
font-weight: 800;
|
||||
min-width: 0;
|
||||
font-size: 18px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.row__head {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
align-content: start;
|
||||
}
|
||||
.row__author {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
opacity: 0.86;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.row__avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 999px;
|
||||
object-fit: cover;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.row__avatar--fallback {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
.row__meta {
|
||||
opacity: 0.78;
|
||||
margin-top: 6px;
|
||||
font-size: 13px;
|
||||
margin-top: auto;
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.list {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,15 +3,14 @@ import { computed, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { api } from '../lib/api'
|
||||
import { toApiUrl } from '../lib/runtime'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const items = ref([])
|
||||
const error = ref('')
|
||||
const games = computed(() => items.value)
|
||||
const suggestOpen = ref(false)
|
||||
const suggestName = ref('')
|
||||
const suggestError = ref('')
|
||||
const games = computed(() => items.value.filter((item) => item.id !== 'freeform'))
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
@@ -26,37 +25,28 @@ function goGame(gameId) {
|
||||
router.push(`/games/${gameId}`)
|
||||
}
|
||||
|
||||
function goFreeform() {
|
||||
if (!auth.user) {
|
||||
router.push('/login?redirect=/editor/freeform/new')
|
||||
return
|
||||
}
|
||||
router.push('/editor/freeform/new')
|
||||
}
|
||||
|
||||
function thumbUrl(g) {
|
||||
if (!g.thumbnailSrc) return ''
|
||||
return toApiUrl(g.thumbnailSrc)
|
||||
}
|
||||
|
||||
async function submitSuggest() {
|
||||
suggestError.value = ''
|
||||
const name = (suggestName.value || '').trim()
|
||||
if (!name) {
|
||||
suggestError.value = '게임 이름을 입력해주세요.'
|
||||
return
|
||||
}
|
||||
try {
|
||||
await api.suggestGame(name)
|
||||
suggestName.value = ''
|
||||
suggestOpen.value = false
|
||||
} catch (e) {
|
||||
suggestError.value = '제안 전송에 실패했어요.'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="hero">
|
||||
<h1 class="hero__title">티어표 메이커</h1>
|
||||
<p class="hero__desc">
|
||||
게임을 선택하면 새 티어표를 만들거나, 다른 사람들이 올린 티어표를 볼 수 있어요.
|
||||
</p>
|
||||
<div class="hero__actions">
|
||||
<button class="smallBtn" @click="suggestOpen = true">새로운 게임 제안</button>
|
||||
<section class="topBar">
|
||||
<div class="topBar__copy">
|
||||
<h1 class="topBar__title">게임 선택</h1>
|
||||
<p class="topBar__desc">관리자 고정 순서가 있으면 먼저 보여주고, 그 외 게임은 최근 생성순으로 정렬됩니다.</p>
|
||||
</div>
|
||||
<button class="customTierBtn" @click="goFreeform">{{ auth.user ? '커스텀 티어표 만들기' : '로그인 후 커스텀 티어표 만들기' }}</button>
|
||||
</section>
|
||||
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
@@ -69,59 +59,43 @@ async function submitSuggest() {
|
||||
<div class="card__title">{{ g.name }}</div>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<div v-if="suggestOpen" class="modalBack" @click.self="suggestOpen = false">
|
||||
<div class="modal">
|
||||
<div class="modal__title">새로운 게임 제안</div>
|
||||
<div class="modal__desc">목록에 없는 게임을 입력해 주세요. (관리자가 확인 후 추가)</div>
|
||||
<input v-model="suggestName" class="modal__input" placeholder="게임 이름" @keydown.enter.prevent="submitSuggest" />
|
||||
<div v-if="suggestError" class="modal__error">{{ suggestError }}</div>
|
||||
<div class="modal__actions">
|
||||
<button class="smallBtn" @click="suggestOpen = false">닫기</button>
|
||||
<button class="smallBtn smallBtn--primary" @click="submitSuggest">제안하기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hero {
|
||||
padding: 18px 2px 14px;
|
||||
.topBar {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.hero__title {
|
||||
font-size: 34px;
|
||||
letter-spacing: -0.03em;
|
||||
margin: 0 0 8px;
|
||||
.topBar__copy {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
.hero__desc {
|
||||
.topBar__title {
|
||||
margin: 0;
|
||||
opacity: 0.86;
|
||||
font-size: 30px;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
.topBar__desc {
|
||||
margin: 0;
|
||||
opacity: 0.78;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hero__actions {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.smallBtn {
|
||||
padding: 8px 10px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
.customTierBtn {
|
||||
padding: 12px 16px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(96, 165, 250, 0.28);
|
||||
background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(16, 185, 129, 0.16));
|
||||
color: rgba(255, 255, 255, 0.96);
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
font-weight: 800;
|
||||
}
|
||||
.smallBtn:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.smallBtn--primary {
|
||||
background: rgba(96, 165, 250, 0.18);
|
||||
}
|
||||
.smallBtn--primary:hover {
|
||||
background: rgba(96, 165, 250, 0.24);
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
@@ -150,7 +124,7 @@ async function submitSuggest() {
|
||||
}
|
||||
.thumbWrap {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
@@ -172,58 +146,20 @@ async function submitSuggest() {
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.modalBack {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
z-index: 50;
|
||||
}
|
||||
.modal {
|
||||
width: min(520px, 92vw);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: rgba(11, 18, 32, 0.92);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 14px;
|
||||
}
|
||||
.modal__title {
|
||||
font-weight: 900;
|
||||
font-size: 18px;
|
||||
}
|
||||
.modal__desc {
|
||||
margin-top: 6px;
|
||||
opacity: 0.78;
|
||||
font-size: 13px;
|
||||
}
|
||||
.modal__input {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.modal__error {
|
||||
margin-top: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
}
|
||||
.modal__actions {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.topBar {
|
||||
align-items: stretch;
|
||||
}
|
||||
.customTierBtn {
|
||||
width: 100%;
|
||||
}
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@media (min-width: 721px) and (max-width: 1100px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { api } from '../lib/api'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const email = ref('')
|
||||
@@ -27,7 +28,7 @@ async function submit() {
|
||||
try {
|
||||
if (mode.value === 'signup') await auth.signup(email.value, password.value)
|
||||
else await auth.login(email.value, password.value)
|
||||
router.push('/me')
|
||||
router.push(typeof route.query.redirect === 'string' ? route.query.redirect : '/me')
|
||||
} catch (e) {
|
||||
error.value = '로그인/회원가입에 실패했어요.'
|
||||
}
|
||||
@@ -146,4 +147,3 @@ async function submit() {
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { api } from '../lib/api'
|
||||
import { toApiUrl } from '../lib/runtime'
|
||||
|
||||
const router = useRouter()
|
||||
const myLists = ref([])
|
||||
@@ -14,10 +15,21 @@ function fmt(ts) {
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
function displayNameOf(tierList) {
|
||||
return tierList.authorName || '알 수 없음'
|
||||
}
|
||||
|
||||
function avatarSrcOf(tierList) {
|
||||
return tierList.authorAvatarSrc ? toApiUrl(tierList.authorAvatarSrc) : ''
|
||||
}
|
||||
|
||||
function avatarFallbackOf(tierList) {
|
||||
return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const data = await api.listMyTierLists()
|
||||
@@ -30,6 +42,18 @@ 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)
|
||||
} catch (e) {
|
||||
error.value = '티어표 삭제에 실패했어요.'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -42,12 +66,20 @@ function openList(t) {
|
||||
</div>
|
||||
<div v-if="myLists.length === 0" class="empty">아직 저장한 티어표가 없어요.</div>
|
||||
<div v-else class="list">
|
||||
<button v-for="t in myLists" :key="t.id" class="row" @click="openList(t)">
|
||||
<div class="row__title">{{ t.title }}</div>
|
||||
<div class="row__meta">
|
||||
{{ t.gameId }} · 저장: {{ fmt(t.createdAt || t.updatedAt) }} · 업데이트: {{ fmt(t.updatedAt) }}
|
||||
</div>
|
||||
</button>
|
||||
<article v-for="t in myLists" :key="t.id" class="row">
|
||||
<button class="row__body" @click="openList(t)">
|
||||
<div class="row__head">
|
||||
<div class="row__title">{{ t.title }}</div>
|
||||
<div class="row__author">
|
||||
<img v-if="avatarSrcOf(t)" class="row__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
|
||||
<div v-else class="row__avatar row__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
|
||||
<span>by {{ displayNameOf(t) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row__meta">{{ fmt(t.updatedAt) }}</div>
|
||||
</button>
|
||||
<button class="link link--danger" @click="removeList(t)">삭제</button>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -96,21 +128,65 @@ function openList(t) {
|
||||
gap: 10px;
|
||||
}
|
||||
.row {
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
.row__body {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
.row__title {
|
||||
font-weight: 900;
|
||||
min-width: 0;
|
||||
}
|
||||
.row__head {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.row__author {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
opacity: 0.84;
|
||||
}
|
||||
.row__avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 999px;
|
||||
object-fit: cover;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.row__avatar--fallback {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
.row__meta {
|
||||
margin-top: 6px;
|
||||
opacity: 0.76;
|
||||
font-size: 13px;
|
||||
}
|
||||
.link--danger {
|
||||
background: rgba(239, 68, 68, 0.14);
|
||||
border-color: rgba(239, 68, 68, 0.28);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
<script setup>
|
||||
import { computed, nextTick, onMounted, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import Sortable from 'sortablejs'
|
||||
import * as htmlToImage from 'html-to-image'
|
||||
import { api } from '../lib/api'
|
||||
import { toApiUrl } from '../lib/runtime'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
const gameId = computed(() => route.params.gameId)
|
||||
const tierListId = computed(() => route.params.tierListId)
|
||||
const gameName = ref('')
|
||||
@@ -24,18 +27,76 @@ const itemsById = ref({})
|
||||
|
||||
const title = ref('')
|
||||
const description = ref('')
|
||||
const isPublic = ref(false)
|
||||
const isPublic = ref(true)
|
||||
const error = ref('')
|
||||
const isSaving = ref(false)
|
||||
const isExporting = ref(false)
|
||||
const isSaveModalOpen = ref(false)
|
||||
const ownerId = ref('')
|
||||
const authorName = ref('')
|
||||
const authorAccountName = ref('')
|
||||
const updatedAt = ref(0)
|
||||
const isDragActive = ref(false)
|
||||
|
||||
const boardEl = ref(null)
|
||||
const exportBoardEl = ref(null)
|
||||
const groupListEl = ref(null)
|
||||
const poolEl = ref(null)
|
||||
const groupDropEls = ref({})
|
||||
const fileEl = ref(null)
|
||||
const groupSortable = ref(null)
|
||||
const poolSortable = ref(null)
|
||||
const dropSortables = ref([])
|
||||
|
||||
const isNewTierList = computed(() => tierListId.value === 'new')
|
||||
const canEdit = computed(() => !!auth.user && (!ownerId.value || ownerId.value === auth.user.id))
|
||||
const hasCustomTitle = computed(() => !!(title.value || '').trim())
|
||||
const fallbackTimestamp = computed(() => (updatedAt.value ? updatedAt.value : Date.now()))
|
||||
const effectiveAuthorName = computed(() => {
|
||||
const currentNickname = (auth.user?.nickname || '').trim()
|
||||
if (currentNickname) return currentNickname
|
||||
if ((authorName.value || '').trim()) return authorName.value.trim()
|
||||
const currentEmail = (auth.user?.email || '').trim()
|
||||
if (currentEmail) return currentEmail.split('@')[0] || currentEmail
|
||||
return (authorAccountName.value || '').trim() || 'unknown'
|
||||
})
|
||||
const effectiveTitle = computed(() => {
|
||||
const customTitle = (title.value || '').trim()
|
||||
if (customTitle) return customTitle
|
||||
return `이름 없음 ${formatTitleDate(fallbackTimestamp.value)}`
|
||||
})
|
||||
const untitledWarning = computed(
|
||||
() =>
|
||||
canEdit.value &&
|
||||
!hasCustomTitle.value &&
|
||||
'제목 없이 저장된 티어표는 무분별한 도배 방지를 위해 관리자에 의해 임의 삭제될 수 있어요.'
|
||||
)
|
||||
|
||||
function formatTitleDate(ts) {
|
||||
const date = new Date(ts)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const hours = String(date.getHours()).padStart(2, '0')
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}`
|
||||
}
|
||||
|
||||
function formatExportDate(ts) {
|
||||
return new Date(ts).toLocaleString('ko-KR', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
function setGroupDropEl(groupId, el) {
|
||||
if (!el) return
|
||||
if (!el) {
|
||||
delete groupDropEls.value[groupId]
|
||||
return
|
||||
}
|
||||
groupDropEls.value[groupId] = el
|
||||
}
|
||||
|
||||
@@ -67,7 +128,9 @@ function resolveItemSrc(item) {
|
||||
async function initSortables() {
|
||||
if (!poolEl.value || !groupListEl.value) return
|
||||
|
||||
Sortable.create(groupListEl.value, {
|
||||
destroySortables()
|
||||
|
||||
groupSortable.value = Sortable.create(groupListEl.value, {
|
||||
animation: 160,
|
||||
handle: '[data-group-handle]',
|
||||
ghostClass: 'ghost',
|
||||
@@ -80,7 +143,7 @@ async function initSortables() {
|
||||
},
|
||||
})
|
||||
|
||||
Sortable.create(poolEl.value, {
|
||||
poolSortable.value = Sortable.create(poolEl.value, {
|
||||
group: 'tier-items',
|
||||
animation: 160,
|
||||
draggable: '[data-item-id]',
|
||||
@@ -90,7 +153,7 @@ async function initSortables() {
|
||||
onAdd: () => normalizeSort(poolEl.value),
|
||||
})
|
||||
|
||||
Object.entries(groupDropEls.value).forEach(([gid, el]) => {
|
||||
dropSortables.value = Object.entries(groupDropEls.value).map(([gid, el]) =>
|
||||
Sortable.create(el, {
|
||||
group: 'tier-items',
|
||||
animation: 160,
|
||||
@@ -100,10 +163,60 @@ async function initSortables() {
|
||||
onSort: () => normalizeSort(el),
|
||||
onAdd: () => normalizeSort(el),
|
||||
})
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
function destroySortables() {
|
||||
if (groupSortable.value) {
|
||||
groupSortable.value.destroy()
|
||||
groupSortable.value = null
|
||||
}
|
||||
if (poolSortable.value) {
|
||||
poolSortable.value.destroy()
|
||||
poolSortable.value = null
|
||||
}
|
||||
dropSortables.value.forEach((instance) => instance.destroy())
|
||||
dropSortables.value = []
|
||||
}
|
||||
|
||||
async function syncSortables() {
|
||||
await nextTick()
|
||||
if (canEdit.value) {
|
||||
await initSortables()
|
||||
}
|
||||
}
|
||||
|
||||
function createGroupName() {
|
||||
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
|
||||
const index = groups.value.length
|
||||
if (index < alphabet.length) return alphabet[index]
|
||||
return `Tier ${index + 1}`
|
||||
}
|
||||
|
||||
async function addGroup() {
|
||||
groups.value = [
|
||||
...groups.value,
|
||||
{
|
||||
id: `g-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`,
|
||||
name: createGroupName(),
|
||||
itemIds: [],
|
||||
},
|
||||
]
|
||||
await syncSortables()
|
||||
}
|
||||
|
||||
async function removeGroup(groupId) {
|
||||
if (groups.value.length <= 1) return
|
||||
const target = groups.value.find((group) => group.id === groupId)
|
||||
if (!target) return
|
||||
pool.value = [...target.itemIds, ...pool.value]
|
||||
groups.value = groups.value.filter((group) => group.id !== groupId)
|
||||
delete groupDropEls.value[groupId]
|
||||
await syncSortables()
|
||||
}
|
||||
|
||||
function addCustomImage(file) {
|
||||
if (!file || !file.type.startsWith('image/')) return
|
||||
const url = URL.createObjectURL(file)
|
||||
const id = `c-${Date.now()}-${Math.random().toString(16).slice(2)}`
|
||||
itemsById.value = {
|
||||
@@ -114,23 +227,56 @@ function addCustomImage(file) {
|
||||
}
|
||||
|
||||
function openFile() {
|
||||
if (!canEdit.value) return
|
||||
fileEl.value?.click()
|
||||
}
|
||||
|
||||
function onFileChange(e) {
|
||||
const file = e.target.files && e.target.files[0]
|
||||
if (!file) return
|
||||
addCustomImage(file)
|
||||
const files = Array.from(e.target.files || [])
|
||||
if (!files.length) return
|
||||
files.forEach(addCustomImage)
|
||||
e.target.value = ''
|
||||
}
|
||||
|
||||
function onDragEnter() {
|
||||
if (!canEdit.value) return
|
||||
isDragActive.value = true
|
||||
}
|
||||
|
||||
function onDragLeave(event) {
|
||||
if (!event.currentTarget.contains(event.relatedTarget)) {
|
||||
isDragActive.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function onDropFiles(event) {
|
||||
if (!canEdit.value) return
|
||||
isDragActive.value = false
|
||||
const files = Array.from(event.dataTransfer?.files || []).filter((file) => file.type.startsWith('image/'))
|
||||
files.forEach(addCustomImage)
|
||||
}
|
||||
|
||||
async function downloadImage() {
|
||||
if (!boardEl.value) return
|
||||
const dataUrl = await htmlToImage.toPng(boardEl.value, { pixelRatio: 2, backgroundColor: '#0b1220' })
|
||||
const a = document.createElement('a')
|
||||
a.href = dataUrl
|
||||
a.download = `${(title.value || gameName.value || 'tierlist').trim()}.png`
|
||||
a.click()
|
||||
isExporting.value = true
|
||||
await nextTick()
|
||||
|
||||
try {
|
||||
const targetEl = exportBoardEl.value || boardEl.value
|
||||
const blob = await htmlToImage.toBlob(targetEl, { pixelRatio: 1.5, backgroundColor: '#0b1220' })
|
||||
if (!blob) throw new Error('image_export_failed')
|
||||
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `${effectiveTitle.value.trim()}.png`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
a.remove()
|
||||
URL.revokeObjectURL(url)
|
||||
} finally {
|
||||
isExporting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function uploadPendingCustomItems() {
|
||||
@@ -171,7 +317,7 @@ async function uploadPendingCustomItems() {
|
||||
}
|
||||
|
||||
function buildPayload(existingId) {
|
||||
const finalTitle = (title.value || '').trim() || `${(gameName.value || gameId.value).trim()} 티어표`
|
||||
const finalTitle = effectiveTitle.value
|
||||
return {
|
||||
id: existingId || undefined,
|
||||
gameId: gameId.value,
|
||||
@@ -191,6 +337,10 @@ async function save() {
|
||||
const payload = buildPayload(tierListId.value && tierListId.value !== 'new' ? tierListId.value : null)
|
||||
const res = await api.saveTierList(payload)
|
||||
if (tierListId.value === 'new') history.replaceState({}, '', `/editor/${gameId.value}/${res.tierList.id}`)
|
||||
updatedAt.value = Number(res.tierList?.updatedAt || Date.now())
|
||||
authorName.value = res.tierList?.authorName || effectiveAuthorName.value
|
||||
authorAccountName.value = res.tierList?.authorAccountName || authorAccountName.value
|
||||
isSaveModalOpen.value = true
|
||||
} catch (e) {
|
||||
error.value = '저장 실패: 로그인 상태인지 확인해주세요.'
|
||||
} finally {
|
||||
@@ -198,8 +348,34 @@ async function save() {
|
||||
}
|
||||
}
|
||||
|
||||
function closeSaveModal() {
|
||||
isSaveModalOpen.value = false
|
||||
}
|
||||
|
||||
async function removeTierList() {
|
||||
if (!canEdit.value || isNewTierList.value) return
|
||||
error.value = ''
|
||||
try {
|
||||
const ok = window.confirm(`"${title.value || gameName.value || '이 티어표'}"를 삭제할까요?`)
|
||||
if (!ok) return
|
||||
await api.deleteTierList(tierListId.value)
|
||||
router.push(gameId.value === 'freeform' ? '/me' : `/games/${gameId.value}`)
|
||||
} catch (e) {
|
||||
error.value = '티어표 삭제에 실패했어요.'
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
;(async () => {
|
||||
await auth.refresh()
|
||||
authorName.value = (auth.user?.nickname || '').trim()
|
||||
authorAccountName.value = ((auth.user?.email || '').trim().split('@')[0] || '').trim()
|
||||
|
||||
if (isNewTierList.value && !auth.user) {
|
||||
router.replace(`/login?redirect=/editor/${gameId.value}/new`)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const gameRes = await api.getGame(gameId.value)
|
||||
gameName.value = gameRes.game?.name || gameId.value
|
||||
@@ -221,9 +397,13 @@ onMounted(() => {
|
||||
try {
|
||||
const res = await api.getTierList(tierListId.value)
|
||||
const t = res.tierList
|
||||
ownerId.value = t.authorId
|
||||
title.value = t.title
|
||||
description.value = t.description || ''
|
||||
isPublic.value = !!t.isPublic
|
||||
authorName.value = t.authorName || ''
|
||||
authorAccountName.value = t.authorAccountName || ''
|
||||
updatedAt.value = Number(t.updatedAt || 0)
|
||||
groups.value = t.groups
|
||||
const map = {}
|
||||
;(t.pool || []).forEach((it) => (map[it.id] = it))
|
||||
@@ -237,44 +417,84 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
await nextTick()
|
||||
await initSortables()
|
||||
if (canEdit.value) {
|
||||
await initSortables()
|
||||
}
|
||||
})()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
destroySortables()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="head">
|
||||
<div>
|
||||
<div class="head__meta">
|
||||
<div class="kicker">{{ gameName || gameId }}</div>
|
||||
<input v-model="title" class="titleInput" placeholder="티어표 이름을 입력하세요" />
|
||||
<input v-model="title" class="titleInput" placeholder="티어표 이름을 입력하세요" :readonly="!canEdit" />
|
||||
<div v-if="untitledWarning" class="titleNotice">{{ untitledWarning }}</div>
|
||||
<input
|
||||
v-model="description"
|
||||
class="descInput"
|
||||
placeholder="설명(선택): 이 티어표의 기준/룰"
|
||||
:readonly="!canEdit"
|
||||
/>
|
||||
<div class="hint">
|
||||
그룹 이름/순서 변경과 아이템 드래그&드롭이 가능합니다. 저장하려면 로그인 후 <b>저장</b>을 누르세요.
|
||||
<template v-if="canEdit">
|
||||
그룹 이름/순서 변경과 아이템 드래그&드롭이 가능합니다. 저장하려면 <b>저장</b>을 누르세요.
|
||||
</template>
|
||||
<template v-else>
|
||||
공개된 티어표를 보는 중입니다. 로그인한 작성자만 수정할 수 있어요.
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<label class="toggle">
|
||||
<input v-model="isPublic" type="checkbox" />
|
||||
<span>공개</span>
|
||||
</label>
|
||||
<button class="btn" :disabled="isSaving" @click="save">{{ isSaving ? '저장중...' : '저장' }}</button>
|
||||
<button class="btn btn--primary" @click="downloadImage">이미지로 다운로드</button>
|
||||
<div class="actions__left">
|
||||
<button class="btn btn--download" @click="downloadImage">이미지 다운로드</button>
|
||||
<button v-if="canEdit && !isNewTierList" class="btn btn--danger" @click="removeTierList">삭제</button>
|
||||
</div>
|
||||
<div class="actions__right">
|
||||
<label class="toggle" :class="{ 'toggle--disabled': !canEdit }">
|
||||
<input v-model="isPublic" type="checkbox" :disabled="!canEdit" />
|
||||
<span>{{ isPublic ? '공개 ON' : '공개 OFF' }}</span>
|
||||
</label>
|
||||
<button v-if="canEdit" class="btn btn--save" :disabled="isSaving" @click="save">{{ isSaving ? '저장중...' : '저장' }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
|
||||
<div v-if="isSaveModalOpen" class="modalOverlay" @click.self="closeSaveModal">
|
||||
<div class="modalCard" role="dialog" aria-modal="true" aria-labelledby="saveModalTitle">
|
||||
<div id="saveModalTitle" class="modalCard__title">저장 완료</div>
|
||||
<div class="modalCard__desc">티어표가 저장되었어요. 이어서 더 수정한 뒤 다시 저장할 수도 있어요.</div>
|
||||
<div class="modalCard__actions">
|
||||
<button class="btn btn--save" @click="closeSaveModal">확인</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="layout">
|
||||
<div ref="boardEl" class="board">
|
||||
<div ref="groupListEl" class="rows">
|
||||
<div v-if="canEdit && !isExporting" class="boardTools">
|
||||
<button class="btn btn--ghost" @click="addGroup">티어 추가</button>
|
||||
</div>
|
||||
<div ref="exportBoardEl" class="exportBoard" :class="{ 'exportBoard--active': isExporting }">
|
||||
<div v-if="isExporting" class="exportBoard__title">{{ effectiveTitle }}</div>
|
||||
<div v-if="isExporting && description" class="exportBoard__description">{{ description }}</div>
|
||||
<div ref="groupListEl" class="rows">
|
||||
<div v-for="g in groups" :key="g.id" class="row">
|
||||
<div class="row__label">
|
||||
<span class="grab" title="드래그로 순서 변경" data-group-handle>↕</span>
|
||||
<input v-model="g.name" class="groupName" />
|
||||
<template v-if="isExporting">
|
||||
<div class="row__exportName">{{ g.name }}</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="grab" title="드래그로 순서 변경" data-group-handle>↕</span>
|
||||
<input v-model="g.name" class="groupName" :readonly="!canEdit" />
|
||||
<button v-if="canEdit" class="rowRemoveBtn" :disabled="groups.length <= 1" @click="removeGroup(g.id)">삭제</button>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
class="row__drop"
|
||||
@@ -282,46 +502,65 @@ onMounted(() => {
|
||||
:data-group-id="g.id"
|
||||
:ref="(el) => setGroupDropEl(g.id, el)"
|
||||
>
|
||||
<div class="row__empty" v-show="g.itemIds.length === 0">여기로 드래그해서 배치</div>
|
||||
<div v-if="!isExporting" class="row__empty" v-show="g.itemIds.length === 0">여기로 드래그해서 배치</div>
|
||||
<div v-for="id in g.itemIds" :key="id" class="cell" :data-item-id="id">
|
||||
<img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isExporting" class="exportBoard__footer">
|
||||
<span>{{ effectiveAuthorName }}</span>
|
||||
<span>{{ formatExportDate(fallbackTimestamp) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="sidebar__title">아이템</div>
|
||||
<div class="sidebar__hint">게임별 기본 이미지 + 커스텀 업로드를 여기에 모읍니다.</div>
|
||||
<div class="sidebar__hint">
|
||||
{{ canEdit ? '게임별 기본 이미지와 커스텀 업로드를 여기에 모읍니다.' : '공개 티어표는 보기 전용입니다.' }}
|
||||
</div>
|
||||
<div ref="poolEl" class="pool" data-list-type="pool">
|
||||
<div v-for="id in pool" :key="id" class="poolItem" :data-item-id="id">
|
||||
<img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
|
||||
<div class="poolItem__label">{{ itemsById[id]?.label || id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<input ref="fileEl" type="file" accept="image/*" class="hidden" @change="onFileChange" />
|
||||
<button class="btn btn--ghost" @click="openFile">커스텀 이미지 추가</button>
|
||||
<div
|
||||
v-if="canEdit"
|
||||
class="dropzone"
|
||||
:class="{ 'dropzone--active': isDragActive }"
|
||||
@dragenter.prevent="onDragEnter"
|
||||
@dragover.prevent="onDragEnter"
|
||||
@dragleave="onDragLeave"
|
||||
@drop.prevent="onDropFiles"
|
||||
>
|
||||
<div class="dropzone__title">커스텀 이미지 추가</div>
|
||||
<div class="dropzone__desc">여러 이미지를 한 번에 드래그하거나 파일 선택으로 추가할 수 있어요.</div>
|
||||
</div>
|
||||
<input ref="fileEl" type="file" accept="image/*" multiple class="hidden" @change="onFileChange" />
|
||||
<button v-if="canEdit" class="btn btn--ghost" @click="openFile">파일 선택</button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.head {
|
||||
display: flex;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 6px 2px 14px;
|
||||
}
|
||||
.head__meta {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
.kicker {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.titleInput {
|
||||
width: min(520px, 92vw);
|
||||
width: min(100%, 920px);
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
@@ -333,8 +572,7 @@ onMounted(() => {
|
||||
outline: none;
|
||||
}
|
||||
.descInput {
|
||||
margin-top: 10px;
|
||||
width: min(520px, 92vw);
|
||||
width: min(100%, 920px);
|
||||
padding: 10px 12px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
@@ -345,13 +583,26 @@ onMounted(() => {
|
||||
}
|
||||
.hint {
|
||||
opacity: 0.78;
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.titleNotice {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: rgba(251, 191, 36, 0.94);
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.actions__left,
|
||||
.actions__right {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.toggle {
|
||||
display: inline-flex;
|
||||
@@ -369,6 +620,10 @@ onMounted(() => {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.toggle--disabled {
|
||||
opacity: 0.55;
|
||||
pointer-events: none;
|
||||
}
|
||||
.btn {
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
@@ -387,6 +642,27 @@ onMounted(() => {
|
||||
.btn--primary:hover {
|
||||
background: rgba(110, 231, 183, 0.24);
|
||||
}
|
||||
.btn--download {
|
||||
justify-self: flex-start;
|
||||
}
|
||||
.btn--save {
|
||||
min-width: 112px;
|
||||
padding: 12px 18px;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
background: rgba(96, 165, 250, 0.22);
|
||||
border-color: rgba(96, 165, 250, 0.36);
|
||||
}
|
||||
.btn--save:hover {
|
||||
background: rgba(96, 165, 250, 0.3);
|
||||
}
|
||||
.btn--danger {
|
||||
background: rgba(239, 68, 68, 0.14);
|
||||
border-color: rgba(239, 68, 68, 0.28);
|
||||
}
|
||||
.btn--danger:hover {
|
||||
background: rgba(239, 68, 68, 0.22);
|
||||
}
|
||||
.btn--ghost {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
@@ -395,6 +671,7 @@ onMounted(() => {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 320px;
|
||||
gap: 14px;
|
||||
align-items: start;
|
||||
}
|
||||
.error {
|
||||
margin: 10px 0 14px;
|
||||
@@ -407,7 +684,82 @@ onMounted(() => {
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
padding: 20px;
|
||||
align-self: start;
|
||||
}
|
||||
.modalOverlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 20px;
|
||||
background: rgba(4, 8, 16, 0.68);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.modalCard {
|
||||
width: min(100%, 420px);
|
||||
border-radius: 20px;
|
||||
padding: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(11, 18, 32, 0.96));
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
.modalCard__title {
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.modalCard__desc {
|
||||
line-height: 1.6;
|
||||
opacity: 0.82;
|
||||
}
|
||||
.modalCard__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.boardTools {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.exportBoard--active {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
width: 1360px;
|
||||
max-width: none;
|
||||
box-sizing: border-box;
|
||||
padding: 44px 52px;
|
||||
border-radius: 28px;
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(96, 165, 250, 0.14), transparent 38%),
|
||||
rgba(11, 18, 32, 0.98);
|
||||
}
|
||||
.exportBoard__title {
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.03em;
|
||||
text-align: left;
|
||||
}
|
||||
.exportBoard__description {
|
||||
margin-top: -4px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
opacity: 0.74;
|
||||
text-align: left;
|
||||
}
|
||||
.exportBoard__footer {
|
||||
margin-top: 12px;
|
||||
padding-top: 18px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
font-size: 15px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.rows {
|
||||
display: grid;
|
||||
@@ -426,7 +778,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
justify-content: center;
|
||||
padding: 10px 8px;
|
||||
font-weight: 900;
|
||||
overflow: hidden;
|
||||
@@ -451,10 +803,30 @@ onMounted(() => {
|
||||
border-radius: 10px;
|
||||
padding: 6px 8px;
|
||||
font-weight: 900;
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
min-width: 0;
|
||||
}
|
||||
.row__exportName {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 900;
|
||||
word-break: break-word;
|
||||
}
|
||||
.rowRemoveBtn {
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(239, 68, 68, 0.28);
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
cursor: pointer;
|
||||
font-weight: 800;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.rowRemoveBtn:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.row__drop {
|
||||
border-radius: 14px;
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
@@ -504,6 +876,27 @@ onMounted(() => {
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.dropzone {
|
||||
margin-top: 12px;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
border: 1px dashed rgba(255, 255, 255, 0.18);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
text-align: center;
|
||||
}
|
||||
.dropzone--active {
|
||||
border-color: rgba(110, 231, 183, 0.6);
|
||||
background: rgba(110, 231, 183, 0.08);
|
||||
}
|
||||
.dropzone__title {
|
||||
font-weight: 900;
|
||||
}
|
||||
.dropzone__desc {
|
||||
margin-top: 6px;
|
||||
opacity: 0.74;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.pool {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
@@ -536,6 +929,16 @@ onMounted(() => {
|
||||
.layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.actions {
|
||||
justify-content: stretch;
|
||||
}
|
||||
.actions__left,
|
||||
.actions__right {
|
||||
width: 100%;
|
||||
}
|
||||
.actions__right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.row {
|
||||
grid-template-columns: 150px 1fr;
|
||||
}
|
||||
|
||||
28
package-lock.json
generated
28
package-lock.json
generated
@@ -13,7 +13,6 @@
|
||||
"cors": "^2.8.6",
|
||||
"express": "^5.2.1",
|
||||
"express-session": "^1.19.0",
|
||||
"lowdb": "^7.0.1",
|
||||
"multer": "^2.1.1",
|
||||
"nanoid": "^5.1.7",
|
||||
"session-file-store": "^1.5.0",
|
||||
@@ -839,21 +838,6 @@
|
||||
"node": ">6"
|
||||
}
|
||||
},
|
||||
"node_modules/lowdb": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/lowdb/-/lowdb-7.0.1.tgz",
|
||||
"integrity": "sha512-neJAj8GwF0e8EpycYIDFqEPcx9Qz4GUho20jWFR7YiFeXzF1YMLdxB36PypcTSPMA+4+LvgyMacYhlr18Zlymw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"steno": "^4.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/typicode"
|
||||
}
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
@@ -1475,18 +1459,6 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/steno": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/steno/-/steno-4.0.2.tgz",
|
||||
"integrity": "sha512-yhPIQXjrlt1xv7dyPQg2P17URmXbuM5pdGkpiMB3RenprfiBlvK415Lctfe0eshk90oA7/tNq7WEiMK8RSP39A==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/typicode"
|
||||
}
|
||||
},
|
||||
"node_modules/streamsearch": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
|
||||
|
||||
@@ -15,7 +15,6 @@
|
||||
"cors": "^2.8.6",
|
||||
"express": "^5.2.1",
|
||||
"express-session": "^1.19.0",
|
||||
"lowdb": "^7.0.1",
|
||||
"multer": "^2.1.1",
|
||||
"nanoid": "^5.1.7",
|
||||
"session-file-store": "^1.5.0",
|
||||
|
||||
Reference in New Issue
Block a user