릴리스: v0.1.51 관리자 미리보기와 요청 조건 정리

backend/src/routes/tierlists.js

@@ -45,10 +45,6 @@ function normalizeTierList(tierList) {
   }
 }
 
-function isTierListBoardEmpty(tierList) {
-  return !(tierList?.groups || []).some((group) => Array.isArray(group?.itemIds) && group.itemIds.length > 0)
-}
-
 function getCustomTemplateItems(tierList) {
   const seen = new Set()
   return (tierList?.pool || []).filter((item) => {
@@ -200,7 +196,6 @@ router.post('/:id/template-request', requireAuth, async (req, res) => {
 
   if (parsed.data.type === 'create') {
     if (tierList.gameId !== FREEFORM_GAME_ID) return res.status(400).json({ error: 'freeform_required' })
-    if (!isTierListBoardEmpty(tierList)) return res.status(400).json({ error: 'board_must_be_empty' })
     if (!(tierList.title || '').trim() || (tierList.title || '').trim() === FREEFORM_DEFAULT_TITLE) {
       return res.status(400).json({ error: 'title_required' })
     }

docs/history.md

@@ -1,5 +1,9 @@
 # 의사결정 이력
 
+## 2026-03-27 v0.1.51
+- 관리자 확인은 편집 화면으로 이동하는 것보다 관리 페이지 안에서 닫고 돌아올 수 있는 미리보기 모달이 더 적합하다고 판단했다.
+- 템플릿 등록 요청은 실제로는 배치 상태보다 제목 식별성이 더 중요하므로, `보드 비움` 조건은 제거하고 제목 직접 입력 중심으로 단순화하기로 결정했다.
+
 ## 2026-03-27 v0.1.50
 - 신규 티어표 저장 직후 요청 실패는 별도 요청용 티어표를 또 만드는 것보다, 방금 저장된 실제 티어표 ID를 그대로 이어받아 요청하는 편이 구조가 단순하고 안전하다고 판단했다.
 

docs/spec.md

@@ -124,7 +124,7 @@
 - 사용자 업로드 커스텀 아이템은 관리자 화면의 아이템 관리 탭에서 검색, 페이지네이션, 다운로드할 수 있다.
 - 사용자 커스텀 아이템은 선택한 게임의 기본 템플릿으로 복제해 가져올 수 있다.
 - 커스텀 아이템은 사용 횟수(`usageCount`)를 표시하며, 미사용 항목만 필터링해 개별/일괄 삭제할 수 있다.
-- 관리자 화면에는 별도 `티어표 관리` 탭이 있으며, 내부에서 `템플릿 요청 관리 / 전체 티어표 관리`를 분리해 볼 수 있다.
+- 관리자 화면에는 별도 `티어표 관리` 탭이 있으며, 내부에서 `템플릿 요청 관리 / 전체 티어표 관리`를 분리해 볼 수 있고, 확인용 완성본은 모달 미리보기로 연다.
 - `티어표 관리` 탭의 추가 아이템은 작은 그리드 카드로 표시하고, 클릭 시 `기존 템플릿에 추가 / 새 템플릿 만들기` 모달을 통해 목적지를 선택한다.
 - `티어표 관리` 탭에서는 티어표 안의 커스텀 아이템을 개별 또는 일괄로 기존 게임 템플릿에 복제할 수 있다.
 - `freeform` 티어표는 관리자 화면에서 새 게임 ID/이름을 입력해 새로운 게임 템플릿으로 복제 생성할 수 있다.
@@ -148,8 +148,8 @@
 - 신규 티어표의 공개 여부 기본값은 `ON`이며, 기존 티어표는 편집 화면과 `내 티어표` 목록에서 직접 삭제할 수 있다.
 - 제목이 비어 있는 상태로 저장하면 내부 제목은 현재 게임명을 기본값으로 사용한다.
 - 제목 입력이 비어 있는 동안에는 무분별한 도배 방지를 위한 관리자 임의 삭제 가능성 안내 문구를 표시한다.
-- `freeform` 티어표는 보드가 비어 있고 커스텀 아이템이 준비된 상태에서만 `템플릿 등록 요청`을 보낼 수 있다.
-- `템플릿 등록 요청` 전에는 체크리스트 모달로 `제목 직접 입력`, `보드 비움 상태`를 확인하고 두 조건이 충족될 때만 전송할 수 있다.
+- `freeform` 티어표는 커스텀 아이템이 준비된 상태에서 `템플릿 등록 요청`을 보낼 수 있다.
+- `템플릿 등록 요청` 전에는 체크리스트 모달로 `제목 직접 입력` 여부를 확인하고, 관리자가 식별하기 쉬운 게임 이름을 입력하도록 안내한다.
 - 신규 티어표를 막 저장한 직후에도, 템플릿 요청은 새로 발급된 실제 티어표 ID를 기준으로 이어서 처리한다.
 - 기존 게임 티어표는 커스텀 아이템이 포함되어 있으면 `템플릿 업데이트 요청`을 보낼 수 있다.
 - 티어표는 편집 화면에서 16:9 썸네일 이미지를 별도로 선택해 저장할 수 있고, 목록 카드에서는 그 이미지를 상단 대표 썸네일로 사용한다.

docs/update.md

@@ -1,5 +1,10 @@
 # 업데이트 로그
 
+## 2026-03-27 v0.1.51
+- **관리자 티어표 미리보기 모달 추가**: 템플릿 요청 관리와 전체 티어표 관리에서 `원본 보기 / 완성본 보기`를 눌러도 관리자 화면을 벗어나지 않도록, 확인용 미리보기를 모달 iframe으로 열도록 변경
+- **템플릿 등록 요청 조건 단순화**: freeform 템플릿 등록 요청은 더 이상 `보드 비움`을 요구하지 않고, `제목 직접 입력 + 커스텀 아이템 존재` 조건 중심으로 단순화
+- **등록 요청 안내 문구 조정**: 요청 모달 안내를 “게임 이름을 구체적으로 적어 달라”는 방향으로 정리해, 관리자 식별성을 높이는 쪽으로 보강
+
 ## 2026-03-27 v0.1.50
 - **신규 티어표 등록 요청 타이밍 수정**: 막 저장한 티어표에서 곧바로 템플릿 등록 요청을 보낼 때도 `new`가 아닌 실제 저장된 티어표 ID로 이어서 요청하도록 수정해, 신규 작성 직후 요청 실패 문제를 해결
 

frontend/src/views/AdminView.vue

@@ -1,13 +1,11 @@
 <script setup>
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
 import Sortable from 'sortablejs'
 import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
 import { useAuthStore } from '../stores/auth'
 import { useToast } from '../composables/useToast'
 
-const router = useRouter()
 const auth = useAuthStore()
 const toast = useToast()
 const isAdmin = computed(() => !!auth.user?.isAdmin)
@@ -42,6 +40,8 @@ const importModalItems = ref([])
 const importModalTargetGameId = ref('')
 const importModalNewGameId = ref('')
 const importModalNewGameName = ref('')
+const previewModalOpen = ref(false)
+const previewTierList = ref(null)
 
 const users = ref([])
 
@@ -651,7 +651,18 @@ function tierListVisibilityLabel(tierList) {
 }
 
 function openAdminTierList(tierList) {
-  router.push(`/editor/${tierList.gameId}/${tierList.id}`)
+  previewTierList.value = tierList
+  previewModalOpen.value = true
+}
+
+function closePreviewModal() {
+  previewModalOpen.value = false
+  previewTierList.value = null
+}
+
+function previewTierListUrl(tierList) {
+  if (!tierList?.gameId || !tierList?.id) return ''
+  return `/editor/${tierList.gameId}/${tierList.id}`
 }
 
 function openTierListImportModal(tierList, items) {
@@ -1259,6 +1270,24 @@ async function saveFeaturedOrder() {
               </div>
             </div>
           </div>
+
+          <div v-if="previewModalOpen" class="modalOverlay" @click.self="closePreviewModal">
+            <div class="modalCard modalCard--preview" role="dialog" aria-modal="true">
+              <div class="modalCard__titleRow">
+                <div>
+                  <div class="modalCard__title">{{ previewTierList?.title || '티어표 미리보기' }}</div>
+                  <div class="modalCard__desc">관리 화면을 벗어나지 않고 완성본만 확인할 수 있어요.</div>
+                </div>
+                <button class="btn btn--ghost btn--small" @click="closePreviewModal">닫기</button>
+              </div>
+              <iframe
+                v-if="previewTierList"
+                class="previewFrame"
+                :src="previewTierListUrl(previewTierList)"
+                title="티어표 미리보기"
+              />
+            </div>
+          </div>
         </template>
 
         <template v-else>
@@ -2128,6 +2157,16 @@ async function saveFeaturedOrder() {
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(11, 18, 32, 0.96);
 }
+.modalCard--preview {
+  width: min(1200px, 100%);
+}
+.modalCard__titleRow {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
 .modalCard__title {
   font-size: 18px;
   font-weight: 900;
@@ -2146,6 +2185,13 @@ async function saveFeaturedOrder() {
   justify-content: flex-end;
   flex-wrap: wrap;
 }
+.previewFrame {
+  width: 100%;
+  min-height: min(80vh, 820px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.02);
+}
 .importModeTabs {
   display: flex;
   gap: 10px;

frontend/src/views/TierEditorView.vue

@@ -91,9 +91,8 @@ const customItems = computed(() =>
     .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
+  () => canEdit.value && !isNewTierList.value && gameId.value === 'freeform' && customItems.value.length > 0
 )
 const canRequestTemplateUpdate = computed(
   () => canEdit.value && !isNewTierList.value && gameId.value !== 'freeform' && customItems.value.length > 0
@@ -104,11 +103,6 @@ const templateRequestChecks = computed(() => [
     label: '티어표 이름(게임 이름)을 직접 입력했는지',
     passed: !!(title.value || '').trim() && (title.value || '').trim() !== (gameName.value || '').trim(),
   },
-  {
-    id: 'empty-board',
-    label: '등록한 이미지를 티어에 배치하지 않은 원본 상태인지',
-    passed: !hasPlacedItems.value,
-  },
 ])
 const canSubmitTemplateCreateRequest = computed(() => templateRequestChecks.value.every((item) => item.passed))
 
@@ -530,10 +524,6 @@ async function requestTemplate(type) {
       toast.error('이미 처리 대기 중인 같은 요청이 있어요.')
       return
     }
-    if (e?.status === 400 && e?.data?.error === 'board_must_be_empty') {
-      toast.error('템플릿 등록 요청은 보드를 비운 상태에서만 보낼 수 있어요.')
-      return
-    }
     if (e?.status === 400 && e?.data?.error === 'custom_items_required') {
       toast.error('먼저 커스텀 아이템을 추가한 뒤 요청해주세요.')
       return
@@ -712,7 +702,7 @@ onUnmounted(() => {
         </div>
       </div>
       <div class="requestChecklist__hint">
-        제목이 명확하고, 보드는 비워둔 채 원본 아이템만 정리되어 있을수록 관리자가 새 게임 템플릿으로 빠르게 등록하기 쉬워져요.
+        제목만 명확하게 적어두면 관리자가 어떤 게임 템플릿 요청인지 빠르게 파악할 수 있어요. 여러 사용자가 비슷한 주제로 요청할 수 있으니 게임 이름을 구체적으로 적어주세요.
       </div>
       <div class="modalCard__actions">
         <button class="btn btn--ghost" @click="closeTemplateRequestModal">취소</button>