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

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;