릴리스: v0.1.49 템플릿 요청 UI 분리와 모달 정리

frontend/src/views/AdminView.vue

@@ -13,6 +13,7 @@ const toast = useToast()
 const isAdmin = computed(() => !!auth.user?.isAdmin)
 
 const activeTab = ref('games')
+const tierlistsMode = ref('requests')
 const gameMode = ref('existing')
 
 const games = ref([])
@@ -105,11 +106,19 @@ function resetMessages() {
 function setTab(tab) {
   resetMessages()
   activeTab.value = tab
+  if (tab === 'tierlists') {
+    tierlistsMode.value = 'requests'
+  }
   if (tab === 'items' && !customItemTargetGameId.value && games.value.length) {
     customItemTargetGameId.value = games.value[0].id
   }
 }
 
+function setTierlistsMode(mode) {
+  resetMessages()
+  tierlistsMode.value = mode
+}
+
 async function refreshGames() {
   try {
     const data = await api.listGames()
@@ -1084,7 +1093,16 @@ async function saveFeaturedOrder() {
         </template>
 
         <template v-else-if="activeTab === 'tierlists'">
-          <div class="panel">
+          <div class="modeTabs modeTabs--admin">
+            <button class="modeTab" :class="{ 'modeTab--active': tierlistsMode === 'requests' }" @click="setTierlistsMode('requests')">
+              템플릿 요청 관리
+            </button>
+            <button class="modeTab" :class="{ 'modeTab--active': tierlistsMode === 'lists' }" @click="setTierlistsMode('lists')">
+              전체 티어표 관리
+            </button>
+          </div>
+
+          <div v-if="tierlistsMode === 'requests'" class="panel">
             <div class="sectionHeader">
               <div>
                 <div class="panel__title">사용자 템플릿 요청</div>
@@ -1131,11 +1149,11 @@ async function saveFeaturedOrder() {
             </div>
           </div>
 
-          <div class="panel">
+          <div v-else class="panel">
             <div class="sectionHeader">
               <div>
                 <div class="panel__title">전체 티어표 관리</div>
-                <div class="hint hint--tight">공개/비공개를 포함한 최근 티어표를 모두 확인하고, 추가 아이템을 기존 게임 템플릿으로 승격하거나 커스텀 티어표를 새 게임 템플릿으로 만들 수 있어요.</div>
+                <div class="hint hint--tight">공개/비공개를 포함한 최근 티어표를 모두 확인하고, 추가 아이템을 기존 게임 템플릿으로 승격하거나 커스텀 티어표를 새 게임 템플릿으로 만들 수 있어요. 여기는 요청 목록과 별개로 전체 저장 티어표를 보는 영역입니다.</div>
               </div>
               <button class="btn btn--ghost" @click="refreshAdminTierLists">새로고침</button>
             </div>

frontend/src/views/TierEditorView.vue

@@ -704,8 +704,8 @@ onUnmounted(() => {
           class="requestChecklist__item"
           :class="{ 'requestChecklist__item--passed': check.passed }"
         >
+          <span class="requestChecklist__label">{{ check.label }}</span>
           <span class="requestChecklist__icon">{{ check.passed ? '완료' : '확인 필요' }}</span>
-          <span>{{ check.label }}</span>
         </div>
       </div>
       <div class="requestChecklist__hint">
@@ -1077,13 +1077,19 @@ onUnmounted(() => {
   display: flex;
   justify-content: flex-end;
   margin-top: 8px;
+  flex-wrap: wrap;
+}
+.modalCard__actions .btn {
+  width: auto;
+  min-width: 120px;
 }
 .requestChecklist {
   display: grid;
   gap: 10px;
 }
 .requestChecklist__item {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: 10px;
   align-items: center;
   padding: 10px 12px;
@@ -1096,12 +1102,18 @@ onUnmounted(() => {
   border-color: rgba(52, 211, 153, 0.24);
   background: rgba(52, 211, 153, 0.1);
 }
+.requestChecklist__label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
 .requestChecklist__icon {
   flex: 0 0 auto;
-  min-width: 56px;
+  min-width: 68px;
   font-size: 12px;
   font-weight: 900;
   opacity: 0.9;
+  text-align: right;
+  white-space: nowrap;
 }
 .requestChecklist__hint {
   font-size: 13px;
@@ -1446,5 +1458,14 @@ onUnmounted(() => {
   .descInput {
     border-radius: 16px;
   }
+  .requestChecklist__item {
+    grid-template-columns: 1fr;
+  }
+  .requestChecklist__icon {
+    text-align: left;
+  }
+  .modalCard__actions .btn {
+    width: 100%;
+  }
 }
 </style>