릴리스: v1.3.13 템플릿 요청 스냅샷과 저장 분리

2026-04-01 11:50:54 +09:00
parent b2a838ff34
commit 7fe4eff7b7
7 changed files with 366 additions and 90 deletions
--- a/frontend/src/lib/api.js
+++ b/frontend/src/lib/api.js
@@ -101,7 +101,7 @@ export const api = {
  unfavoriteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/favorite`, { method: 'DELETE' }),
  deleteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}`, { method: 'DELETE' }),
  duplicateTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}/duplicate`, { method: 'POST' }),
-  requestTierListTemplate: (id, payload) => request(`/api/tierlists/${encodeURIComponent(id)}/template-request`, { method: 'POST', body: payload }),
+  requestTierListTemplate: (payload) => request('/api/tierlists/template-request', { method: 'POST', body: payload }),
  saveTierList: (payload) => request('/api/tierlists', { method: 'POST', body: payload }),
  uploadTierListThumbnail: async (file) => {
    const fd = new FormData()
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -1065,6 +1065,38 @@ function openAdminTierList(tierList) {
  previewModalOpen.value = true
 }

+function previewRequestItemsById(preview) {
+  const items = Array.isArray(preview?.snapshotItems) ? preview.snapshotItems : []
+  return items.reduce((acc, item) => {
+    if (item?.id) acc[item.id] = item
+    return acc
+  }, {})
+}
+
+function previewRequestGroupItems(preview, group) {
+  const itemsById = previewRequestItemsById(preview)
+  return (group?.itemIds || []).map((itemId) => itemsById[itemId]).filter(Boolean)
+}
+
+function previewRequestPoolItems(preview) {
+  const groupedIds = new Set((preview?.snapshotGroups || []).flatMap((group) => group.itemIds || []))
+  return (preview?.snapshotItems || []).filter((item) => !groupedIds.has(item.id))
+}
+
+function openTemplateRequestPreview(request) {
+  previewTierList.value = {
+    id: request.id,
+    title: request.sourceTierListTitle || '템플릿 요청 미리보기',
+    description: request.sourceDescription || '',
+    thumbnailSrc: request.thumbnailSrc || '',
+    requestPreview: true,
+    snapshotGroups: request.snapshotGroups || [],
+    snapshotItems: request.snapshotItems || [],
+    snapshotShowCharacterNames: !!request.snapshotShowCharacterNames,
+  }
+  previewModalOpen.value = true
+}
+
 function closePreviewModal() {
  previewModalOpen.value = false
  previewTierList.value = null
@@ -1470,13 +1502,14 @@ async function saveFeaturedOrder() {
                <div class="templateRequestCard__head">
                  <div>
                    <div class="templateRequestCard__title">{{ request.sourceTierListTitle }}</div>
+                    <div v-if="request.sourceDescription" class="templateRequestCard__desc">{{ request.sourceDescription }}</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 class="btn btn--ghost btn--small" @click="openTemplateRequestPreview(request)">
+                    요청 미리보기
                  </button>
                </div>

@@ -1886,8 +1919,45 @@ async function saveFeaturedOrder() {
                  <div class="modalCard__title">{{ previewTierList?.title || '티어표 미리보기' }}</div>
                  <button class="btn btn--ghost btn--small" @click="closePreviewModal">닫기</button>
                </div>
+                <div v-if="previewTierList?.requestPreview" class="requestPreview">
+                  <img
+                    v-if="previewTierList.thumbnailSrc"
+                    class="requestPreview__thumb"
+                    :src="toApiUrl(previewTierList.thumbnailSrc)"
+                    :alt="previewTierList.title"
+                  />
+                  <div v-if="previewTierList.description" class="requestPreview__desc">{{ previewTierList.description }}</div>
+                  <div class="requestPreview__rows">
+                    <div v-for="group in previewTierList.snapshotGroups" :key="group.id" class="requestPreview__row">
+                      <div class="requestPreview__rowLabel">{{ group.name }}</div>
+                      <div class="requestPreview__rowItems">
+                        <div
+                          v-for="item in previewRequestGroupItems(previewTierList, group)"
+                          :key="item.id"
+                          class="requestPreview__item"
+                        >
+                          <img class="requestPreview__itemThumb" :src="toApiUrl(item.src)" :alt="item.label" />
+                          <div v-if="previewTierList.snapshotShowCharacterNames" class="requestPreview__itemLabel">{{ item.label }}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div v-if="previewRequestPoolItems(previewTierList).length" class="requestPreview__pool">
+                    <div class="requestPreview__poolLabel">남은 아이템</div>
+                    <div class="requestPreview__rowItems">
+                      <div
+                        v-for="item in previewRequestPoolItems(previewTierList)"
+                        :key="item.id"
+                        class="requestPreview__item requestPreview__item--muted"
+                      >
+                        <img class="requestPreview__itemThumb" :src="toApiUrl(item.src)" :alt="item.label" />
+                        <div v-if="previewTierList.snapshotShowCharacterNames" class="requestPreview__itemLabel">{{ item.label }}</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
                <iframe
-                  v-if="previewTierList"
+                  v-else-if="previewTierList"
                  class="previewFrame"
                  :src="previewTierListUrl(previewTierList)"
                  title="티어표 미리보기"
@@ -3224,6 +3294,12 @@ async function saveFeaturedOrder() {
  font-weight: 900;
  font-size: 18px;
 }
+.templateRequestCard__desc {
+  margin-top: 6px;
+  color: rgba(255, 255, 255, 0.74);
+  line-height: 1.55;
+  white-space: pre-line;
+}
 .templateRequestCard__meta {
  margin-top: 4px;
  font-size: 13px;
@@ -3272,6 +3348,76 @@ async function saveFeaturedOrder() {
  justify-content: flex-end;
  flex-wrap: wrap;
 }
+.requestPreview {
+  display: grid;
+  gap: 18px;
+}
+.requestPreview__thumb {
+  width: 100%;
+  max-height: 240px;
+  object-fit: cover;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.04);
+}
+.requestPreview__desc {
+  color: rgba(255, 255, 255, 0.74);
+  line-height: 1.6;
+  white-space: pre-line;
+}
+.requestPreview__rows,
+.requestPreview__pool {
+  display: grid;
+  gap: 12px;
+}
+.requestPreview__row {
+  display: grid;
+  grid-template-columns: 88px minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+}
+.requestPreview__rowLabel,
+.requestPreview__poolLabel {
+  font-size: 13px;
+  font-weight: 800;
+  color: rgba(255, 255, 255, 0.86);
+}
+.requestPreview__rowItems {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
+  gap: 10px;
+}
+.requestPreview__item {
+  position: relative;
+  overflow: hidden;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.04);
+  min-height: 72px;
+}
+.requestPreview__item--muted {
+  opacity: 0.52;
+  filter: grayscale(0.2) brightness(0.78);
+}
+.requestPreview__itemThumb {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  display: block;
+}
+.requestPreview__itemLabel {
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  bottom: 8px;
+  padding: 4px 6px;
+  border-radius: 8px;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.7));
+  font-size: 11px;
+  font-weight: 700;
+  text-align: center;
+  line-height: 1.3;
+}
 .tierAdminList {
  margin-top: 14px;
  display: grid;
--- a/frontend/src/views/TierEditorView.vue
+++ b/frontend/src/views/TierEditorView.vue
@@ -44,6 +44,7 @@ const isTemplateRequestModalOpen = ref(false)
 const isTemplateUpdateModalOpen = ref(false)
 const templateRequestDraftTitle = ref('')
 const templateRequestDraftDescription = ref('')
+const templateRequestSaveToMyTierList = ref(true)
 const isDeleteModalOpen = ref(false)
 const isGroupDeleteModalOpen = ref(false)
 const pendingRemoveGroupId = ref('')
@@ -119,14 +120,7 @@ const canRequestTemplateCreate = computed(
 const canRequestTemplateUpdate = computed(
  () => canEdit.value && !isNewTierList.value && gameId.value !== 'freeform' && customItems.value.length > 0
 )
-const templateRequestChecks = computed(() => [
-  {
-    id: 'title',
-    label: '티어표 이름(게임 이름)을 직접 입력했는지',
-    passed: !!(title.value || '').trim() && (title.value || '').trim() !== (gameName.value || '').trim(),
-  },
-])
-const canSubmitTemplateCreateRequest = computed(() => templateRequestChecks.value.every((item) => item.passed) && !!templateRequestDraftTitle.value.trim() && !!templateRequestDraftDescription.value.trim())
+const canSubmitTemplateCreateRequest = computed(() => !!templateRequestDraftTitle.value.trim() && !!templateRequestDraftDescription.value.trim())
 const canSubmitTemplateUpdateRequest = computed(() => !!templateRequestDraftTitle.value.trim() && !!templateRequestDraftDescription.value.trim())
 const templateRequestTargetLabel = computed(() => (gameId.value === 'freeform' ? '새로운 템플릿' : (gameName.value || gameId.value || '선택한 게임')))

@@ -547,8 +541,9 @@ function closeSaveModal() {
 }

 function resetTemplateRequestDrafts() {
-  templateRequestDraftTitle.value = ''
-  templateRequestDraftDescription.value = ''
+  templateRequestDraftTitle.value = (title.value || '').trim()
+  templateRequestDraftDescription.value = (description.value || '').trim()
+  templateRequestSaveToMyTierList.value = true
 }

 function openTemplateRequestModal() {
@@ -624,27 +619,54 @@ async function toggleFavorite() {
 }

 async function requestTemplate(type) {
-  if (isNewTierList.value) {
-    toast.error('요청 전에 먼저 티어표를 저장해주세요.')
-    return
-  }
-
  try {
    isRequestingTemplate.value = true
-    const persisted = await persistTierList({ showModal: false })
-    await api.requestTierListTemplate(persisted.savedTierListId, {
+    await uploadPendingCustomItems()
+    const uploadedThumbnailSrc = await uploadPendingThumbnail()
+    const response = await api.requestTierListTemplate({
      type,
+      sourceTierListId: tierListId.value !== 'new' ? tierListId.value : '',
+      gameId: gameId.value,
      requestTitle: templateRequestDraftTitle.value.trim(),
      requestDescription: templateRequestDraftDescription.value.trim(),
+      thumbnailSrc: uploadedThumbnailSrc || thumbnailSrc.value || '',
+      isPublic: !!isPublic.value,
+      showCharacterNames: !!showCharacterNames.value,
+      saveToMyTierList: !!templateRequestSaveToMyTierList.value,
+      groups: groups.value.map((group) => ({
+        id: group.id,
+        name: group.name,
+        itemIds: [...group.itemIds],
+      })),
+      boardItems: Object.values(itemsById.value),
    })
+
+    const savedTierList = response?.savedTierList
+    if (savedTierList) {
+      title.value = savedTierList.title || title.value
+      description.value = savedTierList.description || ''
+      updatedAt.value = Number(savedTierList.updatedAt || Date.now())
+      authorName.value = savedTierList.authorName || effectiveAuthorName.value
+      authorAccountName.value = savedTierList.authorAccountName || authorAccountName.value
+      favoriteCount.value = Number(savedTierList.favoriteCount || favoriteCount.value || 0)
+      isFavorited.value = !!savedTierList.isFavorited
+      if (tierListId.value === 'new' && savedTierList.id) {
+        await router.replace(`/editor/${gameId.value}/${savedTierList.id}`)
+      }
+    }
+
    if (type === 'create') closeTemplateRequestModal()
    if (type === 'update') closeTemplateUpdateModal()
-    toast.success(type === 'create' ? '템플릿 등록 요청을 보냈어요.' : '템플릿 업데이트 요청을 보냈어요.')
+    toast.success(
+      type === 'create'
+        ? templateRequestSaveToMyTierList.value
+          ? '템플릿 등록 요청과 내 티어표 저장을 함께 완료했어요.'
+          : '템플릿 등록 요청을 보냈어요.'
+        : templateRequestSaveToMyTierList.value
+          ? '템플릿 업데이트 요청과 내 티어표 저장을 함께 완료했어요.'
+          : '템플릿 업데이트 요청을 보냈어요.'
+    )
  } catch (e) {
-    if (e?.status === 400 && e?.data?.error === 'title_required') {
-      toast.error('템플릿 등록 요청 전에는 티어표 이름을 직접 입력해주세요.')
-      return
-    }
    if (e?.status === 409) {
      toast.error('이미 처리 대기 중인 같은 요청이 있어요.')
      return
@@ -773,18 +795,7 @@ onUnmounted(() => {
    <div class="modalCard" role="dialog" aria-modal="true" aria-labelledby="templateRequestTitle">
      <div id="templateRequestTitle" class="modalCard__title">템플릿 등록 요청</div>
      <div class="modalCard__desc">
-        여러 사용자가 비슷한 주제로 요청할 수 있으니, 관리자에게 전달되기 전에 아래 조건을 먼저 확인해주세요.
-      </div>
-      <div class="requestChecklist">
-        <div
-          v-for="check in templateRequestChecks"
-          :key="check.id"
-          class="requestChecklist__item"
-          :class="{ 'requestChecklist__item--passed': check.passed }"
-        >
-          <span class="requestChecklist__label">{{ check.label }}</span>
-          <span class="requestChecklist__icon">{{ check.passed ? '완료' : '확인 필요' }}</span>
-        </div>
+        티어표에 적어둔 제목과 설명이 있다면 그대로 가져와 두었어요. 비어 있다면 여기서 바로 작성해도 괜찮아요.
      </div>
      <div class="requestChecklist__hint">
        제목과 설명을 함께 적어두면 관리자가 어떤 신규 템플릿인지 훨씬 빠르게 파악할 수 있어요.
@@ -792,15 +803,23 @@ onUnmounted(() => {
      </div>
      <div class="templateRequestDraft">
        <label class="templateRequestDraft__field">
-          <span class="templateRequestDraft__label">요청 제목</span>
-          <input v-model="templateRequestDraftTitle" class="templateRequestDraft__input" maxlength="80" placeholder="예: 템플릿 등록 요청" />
-          <span class="templateRequestDraft__hint">{{ templateRequestDraftTitle.length }}/80자</span>
+          <span class="templateRequestDraft__label">티어표 제목</span>
+          <input v-model="templateRequestDraftTitle" class="templateRequestDraft__input" maxlength="120" placeholder="예: 템플릿 등록 요청" />
+          <span class="templateRequestDraft__hint">{{ templateRequestDraftTitle.length }}/120자</span>
        </label>
        <label class="templateRequestDraft__field">
-          <span class="templateRequestDraft__label">요청 설명</span>
-          <textarea v-model="templateRequestDraftDescription" class="templateRequestDraft__input templateRequestDraft__textarea" maxlength="240" placeholder="예: 여름 이벤트 한정 캐릭터 추가용으로 신규 템플릿이 필요합니다." />
-          <span class="templateRequestDraft__hint">{{ templateRequestDraftDescription.length }}/240자</span>
+          <span class="templateRequestDraft__label">티어표 설명</span>
+          <textarea v-model="templateRequestDraftDescription" class="templateRequestDraft__input templateRequestDraft__textarea" maxlength="1000" placeholder="예: 여름 이벤트 한정 캐릭터 추가용으로 신규 템플릿이 필요합니다." />
+          <span class="templateRequestDraft__hint">{{ templateRequestDraftDescription.length }}/1000자</span>
        </label>
+        <label class="toggleSwitch">
+          <input v-model="templateRequestSaveToMyTierList" type="checkbox" />
+          <span class="toggleSwitch__label">내 티어 리스트에도 저장</span>
+          <span class="toggleSwitch__track"><span class="toggleSwitch__thumb"></span></span>
+        </label>
+        <div class="templateRequestDraft__note">
+          저장을 끄면 요청 시점 스냅샷만 관리자에게 전달되고, 내 티어 리스트에는 별도로 남기지 않아요.
+        </div>
      </div>
      <div class="modalCard__actions">
        <button class="btn btn--ghost" @click="closeTemplateRequestModal">취소</button>
@@ -815,7 +834,7 @@ onUnmounted(() => {
    <div class="modalCard" role="dialog" aria-modal="true" aria-labelledby="templateUpdateTitle">
      <div id="templateUpdateTitle" class="modalCard__title">템플릿 요청하기</div>
      <div class="modalCard__desc">
-        {{ templateRequestTargetLabel }}에 직접 추가한 아이템을 포함해 달라고 관리자에게 요청을 보냅니다.
+        {{ templateRequestTargetLabel }}에 직접 추가한 아이템을 포함해 달라고 관리자에게 요청합니다. 현재 티어표 제목과 설명은 그대로 가져와 두었어요.
      </div>
      <div class="modalCard__note">
        모두가 사용하는 기본 템플릿이니 개인적인 항목이 아닌 공통된 항목만 추가한 뒤 신청해주세요.
@@ -823,15 +842,23 @@ onUnmounted(() => {
      </div>
      <div class="templateRequestDraft">
        <label class="templateRequestDraft__field">
-          <span class="templateRequestDraft__label">요청 제목</span>
-          <input v-model="templateRequestDraftTitle" class="templateRequestDraft__input" maxlength="80" placeholder="예: 템플릿 업데이트 요청" />
-          <span class="templateRequestDraft__hint">{{ templateRequestDraftTitle.length }}/80자</span>
+          <span class="templateRequestDraft__label">티어표 제목</span>
+          <input v-model="templateRequestDraftTitle" class="templateRequestDraft__input" maxlength="120" placeholder="예: 템플릿 업데이트 요청" />
+          <span class="templateRequestDraft__hint">{{ templateRequestDraftTitle.length }}/120자</span>
        </label>
        <label class="templateRequestDraft__field">
-          <span class="templateRequestDraft__label">요청 설명</span>
-          <textarea v-model="templateRequestDraftDescription" class="templateRequestDraft__input templateRequestDraft__textarea" maxlength="240" placeholder="예: 여름 이벤트 한정 캐릭터 추가" />
-          <span class="templateRequestDraft__hint">{{ templateRequestDraftDescription.length }}/240자</span>
+          <span class="templateRequestDraft__label">티어표 설명</span>
+          <textarea v-model="templateRequestDraftDescription" class="templateRequestDraft__input templateRequestDraft__textarea" maxlength="1000" placeholder="예: 여름 이벤트 한정 캐릭터 추가" />
+          <span class="templateRequestDraft__hint">{{ templateRequestDraftDescription.length }}/1000자</span>
        </label>
+        <label class="toggleSwitch">
+          <input v-model="templateRequestSaveToMyTierList" type="checkbox" />
+          <span class="toggleSwitch__label">내 티어 리스트에도 저장</span>
+          <span class="toggleSwitch__track"><span class="toggleSwitch__thumb"></span></span>
+        </label>
+        <div class="templateRequestDraft__note">
+          저장을 끄면 관리자 확인용 요청 스냅샷만 남고, 현재 작업 중인 티어표는 따로 저장하지 않아요.
+        </div>
      </div>
      <div class="modalCard__actions">
        <button class="btn btn--ghost" @click="closeTemplateUpdateModal">요청 취소</button>
@@ -1449,6 +1476,11 @@ onUnmounted(() => {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.46);
 }
+.templateRequestDraft__note {
+  font-size: 12px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.6);
+}
 .templateRequestDraft__input {
  width: 100%;
  padding: 14px 0;