릴리스: v1.3.35 라이트모드와 아이템 모달 보정

frontend/src/App.vue

@@ -1065,10 +1065,7 @@ function submitGlobalSearch() {
   font-size: 28px;
   font-weight: 900;
   letter-spacing: -0.05em;
-  background-image: linear-gradient(90deg, #ff75c3 0%, #ffa647 20%, #ffe83f 40%, #9fff5b 60%, #70e2ff 80%, #cd93ff 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+  color: var(--theme-text-strong);
 }
 
 .workspaceHead__brandSub {

frontend/src/style.css

@@ -38,28 +38,28 @@
 }
 
 :root[data-theme='light'] {
-  --theme-body-bg: #edf1f7;
-  --theme-shell-bg: rgba(244, 247, 252, 0.98);
-  --theme-rail-bg: rgba(248, 250, 253, 0.96);
-  --theme-main-bg: rgba(241, 244, 249, 0.98);
-  --theme-workspace-bg: rgba(250, 252, 255, 0.95);
-  --theme-card-bg: rgba(255, 255, 255, 0.98);
-  --theme-card-bg-hover: rgba(245, 248, 255, 0.98);
-  --theme-card-border: rgba(26, 32, 44, 0.1);
-  --theme-card-shadow: 0 18px 34px rgba(31, 41, 55, 0.08);
-  --theme-surface-soft: rgba(15, 23, 42, 0.05);
-  --theme-surface-soft-2: rgba(15, 23, 42, 0.07);
-  --theme-surface-soft-3: rgba(15, 23, 42, 0.1);
-  --theme-pill-bg: rgba(15, 23, 42, 0.04);
-  --theme-border: rgba(15, 23, 42, 0.1);
-  --theme-border-strong: rgba(15, 23, 42, 0.14);
-  --theme-text: rgba(20, 27, 40, 0.9);
+  --theme-body-bg: #e7ebf2;
+  --theme-shell-bg: rgba(237, 241, 247, 0.98);
+  --theme-rail-bg: rgba(243, 246, 251, 0.97);
+  --theme-main-bg: rgba(232, 236, 243, 0.98);
+  --theme-workspace-bg: rgba(247, 249, 252, 0.96);
+  --theme-card-bg: rgba(252, 253, 255, 0.98);
+  --theme-card-bg-hover: rgba(244, 247, 251, 0.98);
+  --theme-card-border: rgba(31, 41, 55, 0.11);
+  --theme-card-shadow: 0 18px 34px rgba(31, 41, 55, 0.07);
+  --theme-surface-soft: rgba(30, 41, 59, 0.055);
+  --theme-surface-soft-2: rgba(30, 41, 59, 0.075);
+  --theme-surface-soft-3: rgba(30, 41, 59, 0.105);
+  --theme-pill-bg: rgba(30, 41, 59, 0.045);
+  --theme-border: rgba(30, 41, 59, 0.11);
+  --theme-border-strong: rgba(30, 41, 59, 0.16);
+  --theme-text: rgba(20, 27, 40, 0.92);
   --theme-text-strong: rgba(10, 15, 28, 0.98);
-  --theme-text-muted: rgba(55, 65, 81, 0.74);
-  --theme-text-soft: rgba(75, 85, 99, 0.64);
-  --theme-text-faint: rgba(100, 116, 139, 0.82);
-  --theme-thumb-fallback-bg: #d8dde8;
-  --theme-select-arrow: rgba(55, 65, 81, 0.72);
+  --theme-text-muted: rgba(55, 65, 81, 0.76);
+  --theme-text-soft: rgba(75, 85, 99, 0.72);
+  --theme-text-faint: rgba(100, 116, 139, 0.88);
+  --theme-thumb-fallback-bg: #f6f8fb;
+  --theme-select-arrow: rgba(55, 65, 81, 0.74);
   --theme-danger-bg: rgba(239, 68, 68, 0.1);
   --theme-danger-border: rgba(239, 68, 68, 0.22);
   --theme-accent-bg: rgba(64, 110, 226, 0.94);

frontend/src/views/AdminView.vue

@@ -56,6 +56,7 @@ const userDeleteModalOpen = ref(false)
 const userRoleModalOpen = ref(false)
 const customItemModalOpen = ref(false)
 const customItemDeleteModalOpen = ref(false)
+const customItemModalHistoryActive = ref(false)
 const modalTargetUser = ref(null)
 const modalPasswordDraft = ref('')
 const modalRoleNextAdmin = ref(false)
@@ -194,13 +195,26 @@ const adminOverviewStats = computed(() => {
   ]
 })
 
+function handleAdminPopState() {
+  if (customItemDeleteModalOpen.value) {
+    customItemDeleteModalOpen.value = false
+    if (customItemModalOpen.value) pushCustomItemModalHistoryState()
+    return
+  }
+  if (customItemModalOpen.value) {
+    closeCustomItemModal({ fromPopState: true })
+  }
+}
+
 onMounted(async () => {
+  if (typeof window !== 'undefined') window.addEventListener('popstate', handleAdminPopState)
   await auth.refresh()
   await Promise.all([refreshGames(), refreshCustomItems(), refreshAdminTierLists(), refreshUsers(), refreshTemplateRequests(), refreshImageDiagnostics()])
   await syncFeaturedSortable()
 })
 
 onUnmounted(() => {
+  if (typeof window !== 'undefined') window.removeEventListener('popstate', handleAdminPopState)
   clearPreviewUrl('item')
   clearPreviewUrl('thumb')
   destroyFeaturedSortable()
@@ -1048,26 +1062,44 @@ function moveCustomItemPage(direction) {
   refreshCustomItems()
 }
 
+function pushCustomItemModalHistoryState() {
+  if (typeof window === 'undefined') return
+  window.history.pushState({ ...(window.history.state || {}), adminCustomItemModal: true }, '', window.location.href)
+  customItemModalHistoryActive.value = true
+}
+
 function openCustomItemModal(item) {
   modalTargetCustomItem.value = item || null
   customItemModalTargetGameId.value = ''
   customItemModalGameQuery.value = ''
   customItemModalGameSort.value = 'recent'
   customItemModalOpen.value = true
+  pushCustomItemModalHistoryState()
 }
 
-function closeCustomItemModal() {
+function closeCustomItemModal({ fromPopState = false } = {}) {
   customItemModalOpen.value = false
+  customItemDeleteModalOpen.value = false
   modalTargetCustomItem.value = null
   customItemModalTargetGameId.value = ''
   customItemModalGameQuery.value = ''
   customItemModalGameSort.value = 'recent'
+
+  if (fromPopState) {
+    customItemModalHistoryActive.value = false
+    return
+  }
+
+  if (customItemModalHistoryActive.value && typeof window !== 'undefined') {
+    customItemModalHistoryActive.value = false
+    window.history.back()
+  }
 }
 
 function openCustomItemDeleteModal(item) {
   if (!item) return
-  if (item.usageCount > 0) {
-    error.value = '사용 중인 사용자 업로드 이미지는 먼저 참조를 정리해야 삭제할 수 있어요.'
+  if (item.sourceType === 'user' && (item.usageCount > 0 || item.linkedGames.length > 0)) {
+    error.value = '사용 중이거나 템플릿에 연결된 사용자 업로드 이미지는 먼저 참조를 정리해야 삭제할 수 있어요.'
     return
   }
   modalTargetCustomItem.value = item
@@ -1081,8 +1113,8 @@ function closeCustomItemDeleteModal() {
 async function removeCustomItem(item = modalTargetCustomItem.value) {
   resetMessages()
   if (!item) return
-  if (item.usageCount > 0) {
-    error.value = '사용 중인 사용자 업로드 이미지는 먼저 참조를 정리해야 삭제할 수 있어요.'
+  if (item.sourceType === 'user' && (item.usageCount > 0 || item.linkedGames.length > 0)) {
+    error.value = '사용 중이거나 템플릿에 연결된 사용자 업로드 이미지는 먼저 참조를 정리해야 삭제할 수 있어요.'
     return
   }
 
@@ -1091,9 +1123,9 @@ async function removeCustomItem(item = modalTargetCustomItem.value) {
     closeCustomItemDeleteModal()
     closeCustomItemModal()
     await refreshCustomItems()
-    success.value = '미사용 사용자 업로드 이미지를 삭제했어요.'
+    success.value = item.sourceType === 'template' ? '선택한 템플릿 아이템을 제거했어요.' : '사용자 업로드 이미지를 삭제했어요.'
   } catch (e) {
-    error.value = '커스텀 이미지 삭제에 실패했어요.'
+    error.value = item.sourceType === 'template' ? '템플릿 아이템 제거에 실패했어요.' : '사용자 업로드 이미지 삭제에 실패했어요.'
   }
 }
 
@@ -1939,7 +1971,7 @@ async function saveFeaturedOrder() {
                 <div v-if="modalTargetCustomItem" class="customItemModal">
                   <aside class="customItemModal__pickerPanel">
                     <div class="customItemModal__pickerHead">
-                      <div class="customItemModal__pickerEyebrow">GAME LIBRARY</div>
+                      <div class="customItemModal__pickerEyebrow">GAME PICKER</div>
                       <div class="customItemModal__pickerTitle">템플릿으로 추가할 게임</div>
                     </div>
                     <div class="customItemModal__pickerControls">
@@ -1993,7 +2025,7 @@ async function saveFeaturedOrder() {
                       <button class="btn btn--ghost customItemModal__action" :disabled="!customItemModalTargetGameId || modalTargetCustomItem.isPromoting" @click="promoteCustomItem(modalTargetCustomItem)">
                         {{ modalTargetCustomItem.isPromoting ? '추가중...' : '기본 템플릿에 추가' }}
                       </button>
-                      <button v-if="modalTargetCustomItem.canDelete" class="btn btn--danger customItemModal__action" :disabled="modalTargetCustomItem.usageCount > 0 || visibleLinkedGames.length > 0" @click="openCustomItemDeleteModal(modalTargetCustomItem)">삭제</button>
+                      <button v-if="modalTargetCustomItem.canDelete" class="btn btn--danger customItemModal__action" :disabled="modalTargetCustomItem.sourceType === 'user' && (modalTargetCustomItem.usageCount > 0 || visibleLinkedGames.length > 0)" @click="openCustomItemDeleteModal(modalTargetCustomItem)">삭제</button>
                     </div>
                   </div>
                 </div>
@@ -2002,8 +2034,8 @@ async function saveFeaturedOrder() {
 
             <div v-if="customItemDeleteModalOpen" class="modalOverlay" @click.self="closeCustomItemDeleteModal">
               <div class="modalCard" role="dialog" aria-modal="true">
-                <div class="modalCard__title">커스텀 아이템 삭제</div>
-                <div class="modalCard__desc">{{ modalTargetCustomItem ? '"' + modalTargetCustomItem.label + '" 이미지를 삭제할까요? 사용자 업로드이면서 어디에도 연결되지 않은 이미지에만 삭제를 허용합니다.' : '' }}</div>
+                <div class="modalCard__title">아이템 삭제</div>
+                <div class="modalCard__desc">{{ !modalTargetCustomItem ? '' : modalTargetCustomItem.sourceType === 'template' ? '"' + modalTargetCustomItem.label + '" 항목을 현재 템플릿에서 제거할까요? 이미 저장된 같은 게임의 티어표에서도 함께 빠질 수 있어요.' : '"' + modalTargetCustomItem.label + '" 이미지를 삭제할까요? 사용자 업로드이면서 어디에도 연결되지 않은 이미지에만 삭제를 허용합니다.' }}</div>
                 <div class="modalCard__actions">
                   <button class="btn btn--ghost" @click="closeCustomItemDeleteModal">취소</button>
                   <button class="btn btn--danger" @click="removeCustomItem()">삭제</button>
@@ -2894,6 +2926,7 @@ async function saveFeaturedOrder() {
   display: grid;
   place-items: center;
   color: var(--theme-text-soft);
+  background: var(--theme-card-bg);
 }
 .selectedThumb--sidebar {
   width: 100%;
@@ -3134,12 +3167,12 @@ async function saveFeaturedOrder() {
   font-weight: 800;
   font-size: 13px;
   line-height: 1.3;
-  color: #ffffff;
+  color: var(--theme-text);
 }
 .customItemModal {
   display: grid;
-  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
-  gap: 18px;
+  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
+  gap: 24px;
   align-items: start;
 }
 .customItemModal__pickerPanel {
@@ -3275,7 +3308,7 @@ async function saveFeaturedOrder() {
   text-align: center;
 }
 .modalCard--customItem {
-  width: min(980px, 100%);
+  width: min(1160px, calc(100vw - 48px));
 }
 .pager {
   margin-top: 16px;

frontend/src/views/HomeView.vue

@@ -215,7 +215,7 @@ function thumbUrl(g) {
   font-size: 18px;
 }
 .libraryCard__meta {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--theme-text-soft);
   font-size: 13px;
   white-space: nowrap;
   overflow: hidden;