릴리스: v0.1.47 템플릿 요청과 관리자 승인 흐름 추가

2026-03-27 11:10:45 +09:00
parent e0eeaa01cd
commit 3b314381a0
11 changed files with 725 additions and 15 deletions
--- a/frontend/src/lib/api.js
+++ b/frontend/src/lib/api.js
@@ -41,12 +41,16 @@ export const api = {
    ),
  listAdminTierLists: ({ q = '', page = 1, limit = 50 } = {}) =>
    request(`/api/admin/tierlists?q=${encodeURIComponent(q)}&page=${encodeURIComponent(page)}&limit=${encodeURIComponent(limit)}`),
+  listAdminTemplateRequests: () => request('/api/admin/template-requests'),
  promoteAdminCustomItem: (itemId, payload) =>
    request(`/api/admin/custom-items/${encodeURIComponent(itemId)}/promote`, { method: 'POST', body: payload }),
  promoteAdminTierListItems: (tierListId, payload) =>
    request(`/api/admin/tierlists/${encodeURIComponent(tierListId)}/promote-items`, { method: 'POST', body: payload }),
  createAdminGameTemplateFromTierList: (tierListId, payload) =>
    request(`/api/admin/tierlists/${encodeURIComponent(tierListId)}/create-game-template`, { method: 'POST', body: payload }),
+  approveAdminTemplateRequest: (requestId, payload) =>
+    request(`/api/admin/template-requests/${encodeURIComponent(requestId)}/approve`, { method: 'POST', body: payload || {} }),
+  rejectAdminTemplateRequest: (requestId) => request(`/api/admin/template-requests/${encodeURIComponent(requestId)}/reject`, { method: 'POST', body: {} }),
  listAdminUsers: () => request('/api/admin/users'),
  updateAdminUser: (userId, payload) =>
    request(`/api/admin/users/${encodeURIComponent(userId)}`, { method: 'PATCH', body: payload }),
@@ -65,6 +69,7 @@ export const api = {
  favoriteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/favorite`, { method: 'POST' }),
  unfavoriteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/favorite`, { method: 'DELETE' }),
  deleteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}`, { method: 'DELETE' }),
+  requestTierListTemplate: (id, payload) => request(`/api/tierlists/${encodeURIComponent(id)}/template-request`, { method: 'POST', body: payload }),
  saveTierList: (payload) => request('/api/tierlists', { method: 'POST', body: payload }),
  uploadTierListThumbnail: async (file) => {
    const fd = new FormData()
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -33,6 +33,7 @@ const adminTierListQuery = ref('')
 const adminTierListPage = ref(1)
 const adminTierListLimit = ref(50)
 const adminTierListTotal = ref(0)
+const templateRequests = ref([])
 const importModalOpen = ref(false)
 const importModalMode = ref('existing')
 const importModalTierList = ref(null)
@@ -74,7 +75,7 @@ const importModalItemCount = computed(() => importModalItems.value.length)

 onMounted(async () => {
  await auth.refresh()
-  await Promise.all([refreshGames(), refreshCustomItems(), refreshAdminTierLists(), refreshUsers()])
+  await Promise.all([refreshGames(), refreshCustomItems(), refreshAdminTierLists(), refreshUsers(), refreshTemplateRequests()])
  await syncFeaturedSortable()
 })

@@ -189,6 +190,30 @@ async function refreshAdminTierLists() {
  }
 }

+async function refreshTemplateRequests() {
+  if (!auth.user?.isAdmin) return
+  try {
+    const data = await api.listAdminTemplateRequests()
+    templateRequests.value = (data.requests || []).map((request) => ({
+      ...request,
+      draftGameId:
+        request.type === 'create'
+          ? (request.sourceTierListTitle || '')
+              .toLowerCase()
+              .replace(/[^a-z0-9]+/g, '-')
+              .replace(/^-+|-+$/g, '')
+              .slice(0, 80) || 'new-template'
+          : request.targetGameId || request.sourceGameId || '',
+      draftGameName:
+        request.type === 'create'
+          ? `${request.sourceTierListTitle || request.sourceGameName || '새 템플릿'}`
+          : request.targetGameName || request.sourceGameName || '',
+    }))
+  } catch (e) {
+    error.value = '템플릿 요청 목록을 불러오지 못했어요.'
+  }
+}
+
 async function refreshUsers() {
  if (!auth.user?.isAdmin) return
  try {
@@ -690,6 +715,59 @@ async function confirmTierListImport() {
  }
 }

+function templateRequestTypeLabel(request) {
+  return request.type === 'create' ? '템플릿 등록 요청' : '템플릿 업데이트 요청'
+}
+
+function templateRequestTargetLabel(request) {
+  return request.type === 'create' ? '새 게임 템플릿 생성' : request.targetGameName || request.targetGameId || request.sourceGameName
+}
+
+async function approveTemplateRequest(request) {
+  resetMessages()
+  try {
+    request.isHandling = true
+    if (request.type === 'create') {
+      const nextGameId = (request.draftGameId || '').trim()
+      const nextGameName = (request.draftGameName || '').trim()
+      if (!nextGameId || !nextGameName) {
+        error.value = '새 게임 ID와 이름을 모두 입력해주세요.'
+        return
+      }
+      await api.approveAdminTemplateRequest(request.id, {
+        gameId: nextGameId,
+        name: nextGameName,
+      })
+      await refreshGames()
+      success.value = `"${nextGameName}" 템플릿 생성을 승인했어요.`
+    } else {
+      const data = await api.approveAdminTemplateRequest(request.id)
+      if (selectedGameId.value === (request.targetGameId || request.sourceGameId)) await loadGame()
+      success.value = `${data.items?.length || 0}개의 아이템 추가 요청을 승인했어요.`
+    }
+    await refreshTemplateRequests()
+    await refreshAdminTierLists()
+  } catch (e) {
+    error.value = request.type === 'create' ? '템플릿 등록 요청 승인에 실패했어요.' : '템플릿 업데이트 요청 승인에 실패했어요.'
+  } finally {
+    request.isHandling = false
+  }
+}
+
+async function rejectTemplateRequest(request) {
+  resetMessages()
+  try {
+    request.isHandling = true
+    await api.rejectAdminTemplateRequest(request.id)
+    await refreshTemplateRequests()
+    success.value = '요청을 반려했어요.'
+  } catch (e) {
+    error.value = '요청 반려에 실패했어요.'
+  } finally {
+    request.isHandling = false
+  }
+}
+
 const displayThumbnailUrl = computed(() => {
  if (thumbPreviewUrl.value) return thumbPreviewUrl.value
  if (selectedGame.value?.game?.thumbnailSrc) return toApiUrl(selectedGame.value.game.thumbnailSrc)
@@ -1006,6 +1084,53 @@ async function saveFeaturedOrder() {
        </template>

        <template v-else-if="activeTab === 'tierlists'">
+          <div class="panel">
+            <div class="sectionHeader">
+              <div>
+                <div class="panel__title">사용자 템플릿 요청</div>
+                <div class="hint hint--tight">freeform 템플릿 등록 요청과 기존 게임 템플릿 업데이트 요청을 여기서 승인하거나 반려할 수 있어요.</div>
+              </div>
+              <button class="btn btn--ghost" @click="refreshTemplateRequests">새로고침</button>
+            </div>
+
+            <div v-if="!templateRequests.length" class="hint">현재 처리 대기 중인 템플릿 요청이 없어요.</div>
+            <div v-else class="templateRequestList">
+              <article v-for="request in templateRequests" :key="request.id" class="templateRequestCard">
+                <div class="templateRequestCard__head">
+                  <div>
+                    <div class="templateRequestCard__title">{{ request.sourceTierListTitle }}</div>
+                    <div class="templateRequestCard__meta">
+                      {{ templateRequestTypeLabel(request) }} · {{ request.requesterName }} · {{ fmt(request.createdAt) }}
+                    </div>
+                    <div class="templateRequestCard__meta">{{ templateRequestTargetLabel(request) }}</div>
+                  </div>
+                  <button class="btn btn--ghost btn--small" @click="openAdminTierList({ id: request.sourceTierListId, gameId: request.sourceGameId })">
+                    원본 보기
+                  </button>
+                </div>
+
+                <div v-if="request.items?.length" class="templateRequestItems">
+                  <div v-for="item in request.items" :key="item.id" class="templateRequestItem">
+                    <img class="templateRequestItem__thumb" :src="toApiUrl(item.src)" :alt="item.label" />
+                    <div class="templateRequestItem__label">{{ item.label }}</div>
+                  </div>
+                </div>
+
+                <div v-if="request.type === 'create'" class="templateRequestCard__form">
+                  <input v-model="request.draftGameId" class="input" placeholder="새 게임 ID" />
+                  <input v-model="request.draftGameName" class="input" placeholder="새 게임 이름" />
+                </div>
+
+                <div class="templateRequestCard__actions">
+                  <button class="btn btn--primary" :disabled="request.isHandling" @click="approveTemplateRequest(request)">
+                    {{ request.isHandling ? '처리중...' : '승인' }}
+                  </button>
+                  <button class="btn btn--danger" :disabled="request.isHandling" @click="rejectTemplateRequest(request)">반려</button>
+                </div>
+              </article>
+            </div>
+          </div>
+
          <div class="panel">
            <div class="sectionHeader">
              <div>
@@ -1785,6 +1910,70 @@ async function saveFeaturedOrder() {
 .roleBadge--admin {
  background: rgba(96, 165, 250, 0.18);
 }
+.templateRequestList {
+  margin-top: 14px;
+  display: grid;
+  gap: 14px;
+}
+.templateRequestCard {
+  display: grid;
+  gap: 14px;
+  padding: 16px;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.03);
+}
+.templateRequestCard__head {
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+.templateRequestCard__title {
+  font-weight: 900;
+  font-size: 18px;
+}
+.templateRequestCard__meta {
+  margin-top: 4px;
+  font-size: 13px;
+  opacity: 0.72;
+}
+.templateRequestItems {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+  gap: 10px;
+}
+.templateRequestItem {
+  display: grid;
+  gap: 8px;
+}
+.templateRequestItem__thumb {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.04);
+}
+.templateRequestItem__label {
+  font-size: 12px;
+  font-weight: 800;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.templateRequestCard__form {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+.templateRequestCard__actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
 .tierAdminList {
  margin-top: 14px;
  display: grid;
@@ -1960,7 +2149,8 @@ async function saveFeaturedOrder() {
  .toolbar,
  .itemComposer,
  .tierAdminCard,
-  .userStats {
+  .userStats,
+  .templateRequestCard__form {
    grid-template-columns: 1fr;
  }
  .toolbar--secondary {
--- a/frontend/src/views/TierEditorView.vue
+++ b/frontend/src/views/TierEditorView.vue
@@ -46,6 +46,7 @@ const iconSize = ref(80)
 const isFavoriteBusy = ref(false)
 const favoriteCount = ref(0)
 const isFavorited = ref(false)
+const isRequestingTemplate = ref(false)

 const boardEl = ref(null)
 const exportBoardEl = ref(null)
@@ -84,6 +85,18 @@ const untitledWarning = computed(
    '제목 없이 저장된 티어표는 무분별한 도배 방지를 위해 관리자에 의해 임의 삭제될 수 있어요.'
 )
 const canFavorite = computed(() => !!auth.user && !isNewTierList.value && !canEdit.value)
+const customItems = computed(() =>
+  Object.values(itemsById.value)
+    .filter((item) => item?.origin === 'custom')
+    .sort((a, b) => (a.label || '').localeCompare(b.label || '', 'ko'))
+)
+const hasPlacedItems = computed(() => groups.value.some((group) => (group.itemIds || []).length > 0))
+const canRequestTemplateCreate = computed(
+  () => canEdit.value && !isNewTierList.value && gameId.value === 'freeform' && !hasPlacedItems.value && customItems.value.length > 0
+)
+const canRequestTemplateUpdate = computed(
+  () => canEdit.value && !isNewTierList.value && gameId.value !== 'freeform' && customItems.value.length > 0
+)

 watch(error, (message) => {
  if (!message) return
@@ -258,6 +271,18 @@ function addCustomImage(file) {
  pool.value = [id, ...pool.value]
 }

+function updateCustomItemLabel(itemId, nextLabel) {
+  const item = itemsById.value[itemId]
+  if (!item || item.origin !== 'custom') return
+  itemsById.value = {
+    ...itemsById.value,
+    [itemId]: {
+      ...item,
+      label: nextLabel.slice(0, 60),
+    },
+  }
+}
+
 function openFile() {
  if (!canEdit.value) return
  fileEl.value?.click()
@@ -399,21 +424,26 @@ function buildPayload(existingId) {
  }
 }

+async function persistTierList({ showModal = false } = {}) {
+  await uploadPendingCustomItems()
+  await uploadPendingThumbnail()
+  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
+  favoriteCount.value = Number(res.tierList?.favoriteCount || favoriteCount.value || 0)
+  isFavorited.value = !!res.tierList?.isFavorited
+  if (showModal) isSaveModalOpen.value = true
+  return res
+}
+
 async function save() {
  error.value = ''
  isSaving.value = true
  try {
-    await uploadPendingCustomItems()
-    await uploadPendingThumbnail()
-    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
-    favoriteCount.value = Number(res.tierList?.favoriteCount || favoriteCount.value || 0)
-    isFavorited.value = !!res.tierList?.isFavorited
-    isSaveModalOpen.value = true
+    await persistTierList({ showModal: true })
  } catch (e) {
    error.value = '저장 실패: 로그인 상태인지 확인해주세요.'
  } finally {
@@ -454,6 +484,32 @@ async function toggleFavorite() {
  }
 }

+async function requestTemplate(type) {
+  if (isNewTierList.value) {
+    toast.error('요청 전에 먼저 티어표를 저장해주세요.')
+    return
+  }
+
+  try {
+    isRequestingTemplate.value = true
+    await persistTierList({ showModal: false })
+    await api.requestTierListTemplate(tierListId.value, { type })
+    toast.success(type === 'create' ? '템플릿 등록 요청을 보냈어요.' : '템플릿 업데이트 요청을 보냈어요.')
+  } catch (e) {
+    if (e?.status === 409) {
+      toast.error('이미 처리 대기 중인 같은 요청이 있어요.')
+      return
+    }
+    if (e?.status === 400 && e?.data?.error === 'board_must_be_empty') {
+      toast.error('템플릿 등록 요청은 보드를 비운 상태에서만 보낼 수 있어요.')
+      return
+    }
+    toast.error(type === 'create' ? '템플릿 등록 요청에 실패했어요.' : '템플릿 업데이트 요청에 실패했어요.')
+  } finally {
+    isRequestingTemplate.value = false
+  }
+}
+
 onMounted(() => {
  ;(async () => {
    await auth.refresh()
@@ -569,6 +625,22 @@ onUnmounted(() => {
        <button v-if="canFavorite" class="btn btn--ghost" :disabled="isFavoriteBusy" @click="toggleFavorite">
          {{ isFavorited ? '★ 즐겨찾기' : '☆ 즐겨찾기' }} {{ favoriteCount }}
        </button>
+        <button
+          v-if="canRequestTemplateCreate"
+          class="btn btn--ghost"
+          :disabled="isRequestingTemplate"
+          @click="requestTemplate('create')"
+        >
+          {{ isRequestingTemplate ? '요청중...' : '템플릿 등록 요청' }}
+        </button>
+        <button
+          v-if="canRequestTemplateUpdate"
+          class="btn btn--ghost"
+          :disabled="isRequestingTemplate"
+          @click="requestTemplate('update')"
+        >
+          {{ isRequestingTemplate ? '요청중...' : '템플릿 업데이트 요청' }}
+        </button>
        <label class="toggle" :class="{ 'toggle--disabled': !canEdit }">
        <input v-model="isPublic" type="checkbox" :disabled="!canEdit" />
          <span>{{ isPublic ? '공개 ON' : '공개 OFF' }}</span>
@@ -665,6 +737,24 @@ onUnmounted(() => {
          <div class="poolItem__label">{{ itemsById[id]?.label || id }}</div>
        </div>
      </div>
+      <div v-if="canEdit && customItems.length" class="customItemEditor">
+        <div class="customItemEditor__title">추가한 커스텀 아이템 이름 정리</div>
+        <div class="customItemEditor__desc">
+          템플릿 요청 전에 이름을 정리해두면 관리자가 그대로 기본 템플릿으로 반영할 수 있어요.
+        </div>
+        <div class="customItemEditor__list">
+          <label v-for="item in customItems" :key="item.id" class="customItemEditor__row">
+            <img class="customItemEditor__thumb" :src="resolveItemSrc(item)" :alt="item.label" />
+            <input
+              class="customItemEditor__input"
+              :value="item.label"
+              maxlength="60"
+              placeholder="아이템 이름"
+              @input="updateCustomItemLabel(item.id, $event.target.value)"
+            />
+          </label>
+        </div>
+      </div>
      <div
        v-if="canEdit"
        class="dropzone"
@@ -1144,6 +1234,51 @@ onUnmounted(() => {
  font-size: 13px;
  margin-bottom: 10px;
 }
+.customItemEditor {
+  margin-top: 12px;
+  padding: 12px;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.03);
+}
+.customItemEditor__title {
+  font-weight: 900;
+}
+.customItemEditor__desc {
+  margin-top: 6px;
+  font-size: 12px;
+  line-height: 1.5;
+  opacity: 0.72;
+}
+.customItemEditor__list {
+  margin-top: 12px;
+  display: grid;
+  gap: 10px;
+}
+.customItemEditor__row {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+}
+.customItemEditor__thumb {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  object-fit: cover;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+}
+.customItemEditor__input {
+  width: 100%;
+  min-width: 0;
+  padding: 9px 10px;
+  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;
+}
 .dropzone {
  margin-top: 12px;
  padding: 14px;