관리자
-
게임 생성 후 선택한 게임에만 썸네일과 관리자 아이템을 등록할 수 있습니다.
+ 먼저 작업 방식을 고르고, 그 다음 선택한 게임의 정보만 집중해서 관리합니다.
로그인이 필요해요.
이 계정은 관리자 권한이 없어요.
- {{ error }}
- {{ success }}
-
-
-
-
게임 선택
-
-
- 새 게임 추가
-
-
-
+
+
+
+
-
-
선택된 게임
-
+
{{ error }}
+ {{ success }}
+
+
+
+
+
+ 등록된 게임 선택
+
+ 게임을 고르면 아래에서 썸네일, 아이템 목록, 삭제 작업을 관리할 수 있어요.
+
+
+
+ 새 게임 정보 입력
+
+
+
+
+
+
![]()
+
-
@@ -217,47 +361,81 @@ async function uploadThumbnail() {
opacity: 0.82;
line-height: 1.5;
}
-.warn {
- margin-top: 10px;
- padding: 10px 12px;
- border-radius: 12px;
- border: 1px solid rgba(245, 158, 11, 0.35);
- background: rgba(245, 158, 11, 0.14);
-}
-.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);
-}
+.warn,
+.error,
.success {
margin-top: 10px;
padding: 10px 12px;
border-radius: 12px;
+}
+.warn {
+ border: 1px solid rgba(245, 158, 11, 0.35);
+ background: rgba(245, 158, 11, 0.14);
+}
+.error {
+ border: 1px solid rgba(239, 68, 68, 0.3);
+ background: rgba(239, 68, 68, 0.12);
+}
+.success {
border: 1px solid rgba(52, 211, 153, 0.32);
background: rgba(52, 211, 153, 0.14);
}
-.grid {
- margin-top: 12px;
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 12px;
+.modeTabs {
+ margin-top: 14px;
+ display: flex;
+ gap: 10px;
+ flex-wrap: wrap;
+}
+.modeTab {
+ padding: 10px 14px;
+ 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);
+ cursor: pointer;
+ font-weight: 800;
+}
+.modeTab--active {
+ background: rgba(96, 165, 250, 0.2);
}
.panel {
+ margin-top: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.12);
border-radius: 16px;
- padding: 12px;
+ padding: 14px;
}
-.panel__title {
+.panel--compact {
+ max-width: 640px;
+}
+.panel__title,
+.section__title {
font-weight: 900;
- margin-bottom: 8px;
}
-.hint {
- opacity: 0.78;
- font-size: 13px;
- margin-bottom: 10px;
+.section {
+ margin-top: 18px;
+ padding-top: 18px;
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+.uploadPreviewCard {
+ margin-top: 10px;
+ display: grid;
+ gap: 12px;
+ align-items: start;
+}
+.uploadPreviewCard--wide {
+ grid-template-columns: minmax(256px, 256px) minmax(0, 1fr);
+}
+.uploadPreviewMeta {
+ display: grid;
+ gap: 8px;
+}
+.uploadPreviewTitle {
+ font-weight: 900;
+}
+.uploadPreviewDesc {
+ opacity: 0.76;
+ line-height: 1.5;
}
.select,
.input {
@@ -269,11 +447,16 @@ async function uploadThumbnail() {
background: rgba(0, 0, 0, 0.18);
color: rgba(255, 255, 255, 0.92);
outline: none;
- margin-bottom: 10px;
+ margin-top: 10px;
+}
+.hint {
+ margin-top: 10px;
+ opacity: 0.78;
+ font-size: 13px;
}
.inputFile {
width: 100%;
- margin-bottom: 10px;
+ margin-top: 12px;
}
.btn {
margin-top: 12px;
@@ -285,25 +468,26 @@ async function uploadThumbnail() {
cursor: pointer;
font-weight: 800;
}
-.btn:hover {
- background: rgba(255, 255, 255, 0.08);
+.btn--primary {
+ background: rgba(96, 165, 250, 0.2);
}
-.thumbGrid {
- display: grid;
- grid-template-columns: repeat(3, minmax(0, 1fr));
- gap: 10px;
+.btn--danger {
+ background: rgba(239, 68, 68, 0.14);
+ border-color: rgba(239, 68, 68, 0.28);
}
-.selectedGame {
+.btn--small {
+ width: 100%;
+}
+.detailHead {
display: flex;
- align-items: center;
- justify-content: space-between;
gap: 12px;
- padding: 12px;
- border-radius: 14px;
- border: 1px solid rgba(255, 255, 255, 0.12);
- background: rgba(255, 255, 255, 0.04);
+ justify-content: space-between;
+ align-items: flex-start;
+ flex-wrap: wrap;
}
.selectedGame__name {
+ margin-top: 8px;
+ font-size: 22px;
font-weight: 900;
}
.selectedGame__id {
@@ -311,13 +495,68 @@ async function uploadThumbnail() {
opacity: 0.72;
word-break: break-all;
}
+.detailHead__actions {
+ display: flex;
+ gap: 8px;
+}
+.thumbnailRow {
+ margin-top: 10px;
+}
.selectedThumb {
- width: 90px;
- height: 90px;
+ width: 256px;
+ aspect-ratio: 16 / 9;
object-fit: cover;
+ border-radius: 16px;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ background: rgba(255, 255, 255, 0.04);
+}
+.selectedThumb--empty {
+ display: grid;
+ place-items: center;
+ color: rgba(255, 255, 255, 0.62);
+}
+.itemComposer {
+ margin-top: 10px;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) 180px;
+ gap: 16px;
+ align-items: start;
+}
+.itemComposer__form {
+ min-width: 0;
+}
+.itemPreviewCard {
+ padding: 10px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
- flex: none;
+ background: rgba(255, 255, 255, 0.04);
+}
+.itemPreviewFrame {
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ border-radius: 12px;
+ overflow: hidden;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ background: rgba(0, 0, 0, 0.18);
+}
+.itemPreviewImage {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+.itemPreviewEmpty {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ place-items: center;
+ color: rgba(255, 255, 255, 0.62);
+ font-size: 13px;
+}
+.thumbGrid {
+ margin-top: 12px;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 12px;
}
.thumbCard {
border: 1px solid rgba(255, 255, 255, 0.12);
@@ -328,7 +567,7 @@ async function uploadThumbnail() {
}
.thumb {
width: 100%;
- height: 92px;
+ aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
@@ -340,8 +579,22 @@ async function uploadThumbnail() {
opacity: 0.9;
word-break: break-word;
}
+.thumbLabel--preview {
+ text-align: center;
+}
@media (max-width: 980px) {
- .grid {
+ .uploadPreviewCard--wide {
+ grid-template-columns: 1fr;
+ }
+ .itemComposer {
+ grid-template-columns: 1fr;
+ }
+}
+@media (max-width: 640px) {
+ .selectedThumb {
+ width: 100%;
+ }
+ .thumbGrid {
grid-template-columns: 1fr;
}
}
diff --git a/package-lock.json b/package-lock.json
index d4e0d5d..4aa17b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 2c62208..fae6738 100644
--- a/package.json
+++ b/package.json
@@ -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",
+
- 선택된 게임 정보
{{ selectedGame.game.name }}
{{ selectedGame.game.id }}
+
+
게임 썸네일 업로드
- 홈 화면의 게임 카드에 바로 반영되는 대표 이미지입니다.
-
-
+
+
- 썸네일
+
+ ![]()
+
+
+
+ 16:9 미리보기
+
+
+ 대표 썸네일
+
+ 파일을 선택하면 먼저 미리보기로 확인되고, 업로드 버튼을 눌렀을 때 실제 저장됩니다.
+
+ 아이템 추가
- 관리자가 지정한 아이템만 이 목록에 포함됩니다.
-
-
-
+
+
- 아이템 추가
+
+
+
+
+
+
+
+
+
+
+ ![item preview]()
+
+ 1:1 미리보기
+ {{ uploadLabel || '아이템 이름 미리보기' }}
+ 현재 아이템 목록
- 아직 등록된 아이템이 없어요.
-
-
+
- ![]()
-
- {{ img.label }}
+
+
현재 아이템 목록
+ 아직 등록된 아이템이 없어요.
+
+
+ ![]()
+
{{ item.label }}
+
+