릴리스: v0.1.12 작성 권한과 회원 관리 보강

frontend/src/views/AdminView.vue

@@ -9,6 +9,7 @@ const isAdmin = computed(() => !!auth.user?.isAdmin)
 
 const games = ref([])
 const customItems = ref([])
+const users = ref([])
 const adminMode = ref('existing')
 const selectedGameId = ref('')
 const selectedGame = ref(null)
@@ -33,7 +34,7 @@ const canAddItem = computed(() => !!uploadFile.value && !!selectedGameId.value)
 
 onMounted(async () => {
   await auth.refresh()
-  await Promise.all([refreshGames(), refreshCustomItems()])
+  await Promise.all([refreshGames(), refreshCustomItems(), refreshUsers()])
 })
 
 onUnmounted(() => {
@@ -60,6 +61,21 @@ async function refreshCustomItems() {
   }
 }
 
+async function refreshUsers() {
+  if (!auth.user?.isAdmin) return
+  try {
+    const data = await api.listAdminUsers()
+    users.value = (data.users || []).map((user) => ({
+      ...user,
+      draftEmail: user.email,
+      draftNickname: user.nickname || '',
+      draftIsAdmin: !!user.isAdmin,
+    }))
+  } catch (e) {
+    error.value = '회원 목록을 불러오지 못했어요.'
+  }
+}
+
 function resetMessages() {
   error.value = ''
   success.value = ''
@@ -258,6 +274,50 @@ async function removeGame() {
   }
 }
 
+async function saveUser(user) {
+  resetMessages()
+  try {
+    const data = await api.updateAdminUser(user.id, {
+      email: user.draftEmail,
+      nickname: user.draftNickname,
+      isAdmin: !!user.draftIsAdmin,
+    })
+    const updated = data.user
+    users.value = users.value.map((entry) =>
+      entry.id === updated.id
+        ? {
+            ...updated,
+            draftEmail: updated.email,
+            draftNickname: updated.nickname || '',
+            draftIsAdmin: !!updated.isAdmin,
+          }
+        : entry
+    )
+    success.value = '회원 정보를 저장했어요.'
+  } catch (e) {
+    error.value = '회원 정보 저장에 실패했어요.'
+  }
+}
+
+async function removeUser(user) {
+  resetMessages()
+  if (user.id === auth.user?.id) {
+    error.value = '현재 로그인한 관리자 계정은 직접 삭제할 수 없어요.'
+    return
+  }
+
+  const ok = window.confirm(`${user.email} 계정을 삭제할까요? 작성한 티어표와 커스텀 이미지도 함께 삭제됩니다.`)
+  if (!ok) return
+
+  try {
+    await api.deleteAdminUser(user.id)
+    users.value = users.value.filter((entry) => entry.id !== user.id)
+    success.value = '회원 계정을 삭제했어요.'
+  } catch (e) {
+    error.value = '회원 삭제에 실패했어요.'
+  }
+}
+
 const displayThumbnailUrl = computed(() => {
   if (thumbPreviewUrl.value) return thumbPreviewUrl.value
   if (selectedGame.value?.game?.thumbnailSrc) return toApiUrl(selectedGame.value.game.thumbnailSrc)
@@ -398,6 +458,43 @@ function fmt(ts) {
             </article>
           </div>
         </div>
+
+        <div class="panel">
+          <div class="sectionHeader">
+            <div>
+              <div class="panel__title">회원 관리</div>
+              <div class="hint hint--tight">가입한 계정의 이메일, 닉네임, 관리자 권한을 수정하거나 계정을 삭제할 수 있어요.</div>
+            </div>
+            <button class="btn btn--ghost" @click="refreshUsers">새로고침</button>
+          </div>
+
+          <div v-if="!users.length" class="hint">아직 가입한 회원이 없어요.</div>
+          <div v-else class="userList">
+            <article v-for="user in users" :key="user.id" class="userCard">
+              <div class="userCard__head">
+                <div>
+                  <div class="userCard__title">{{ user.nickname || '닉네임 없음' }}</div>
+                  <div class="userCard__meta">{{ fmt(user.createdAt) }}</div>
+                </div>
+                <span class="roleBadge" :class="{ 'roleBadge--admin': user.draftIsAdmin }">
+                  {{ user.draftIsAdmin ? '관리자' : '일반 회원' }}
+                </span>
+              </div>
+
+              <input v-model="user.draftEmail" class="input" placeholder="이메일" />
+              <input v-model="user.draftNickname" class="input" placeholder="닉네임" />
+              <label class="checkRow">
+                <input v-model="user.draftIsAdmin" type="checkbox" :disabled="user.id === auth.user?.id" />
+                <span>관리자 권한</span>
+              </label>
+
+              <div class="userCard__actions">
+                <button class="btn btn--ghost" @click="saveUser(user)">회원 저장</button>
+                <button class="btn btn--danger" :disabled="user.id === auth.user?.id" @click="removeUser(user)">회원 삭제</button>
+              </div>
+            </article>
+          </div>
+        </div>
       </template>
     </div>
   </section>
@@ -703,6 +800,55 @@ function fmt(ts) {
   font-size: 13px;
   word-break: break-word;
 }
+.userList {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 12px;
+}
+.userCard {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.04);
+  padding: 14px;
+}
+.userCard__head {
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.userCard__title {
+  font-weight: 900;
+}
+.userCard__meta {
+  margin-top: 4px;
+  opacity: 0.72;
+  font-size: 13px;
+}
+.userCard__actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+.roleBadge {
+  padding: 6px 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  font-size: 12px;
+  font-weight: 800;
+  opacity: 0.8;
+}
+.roleBadge--admin {
+  background: rgba(96, 165, 250, 0.18);
+}
+.checkRow {
+  margin-top: 12px;
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  opacity: 0.88;
+}
 @media (max-width: 980px) {
   .section--topGrid {
     grid-template-columns: 1fr;
@@ -719,7 +865,8 @@ function fmt(ts) {
     width: min(100%, 256px);
   }
   .thumbGrid,
-  .customItemGrid {
+  .customItemGrid,
+  .userList {
     grid-template-columns: 1fr;
   }
   .itemPreviewCard {