릴리스: v1.3.60 관리자 공개 토글과 인증 새로고침 안정화

2026-04-02 13:41:14 +09:00
parent aa114a170e
commit e3559f4a84
12 changed files with 291 additions and 47 deletions
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -96,6 +96,8 @@ const success = ref('')

 const newGameId = ref('')
 const newGameName = ref('')
+const newGameIsPublic = ref(false)
+const gameVisibilitySaving = ref(false)

 const uploadFiles = ref([])
 const uploadItemDrafts = ref([])
@@ -662,8 +664,15 @@ function setTierlistsMode(mode) {

 function openGameCreateModal() {
  resetMessages()
-  newGameId.value = ''
-  newGameName.value = ''
+  if (activeTemplateRequest.value?.type === 'create' && !activeTemplateRequest.value?.targetGameId) {
+    newGameId.value = activeTemplateRequest.value?.draftGameId || ''
+    newGameName.value = activeTemplateRequest.value?.draftGameName || ''
+    newGameIsPublic.value = !!activeTemplateRequest.value?.draftGameIsPublic
+  } else {
+    newGameId.value = ''
+    newGameName.value = ''
+    newGameIsPublic.value = false
+  }
  gameCreateModalOpen.value = true
 }

@@ -745,6 +754,7 @@ async function refreshTemplateRequests() {
        request.type === 'create'
          ? `${request.sourceTierListTitle || request.sourceGameName || '새 템플릿'}`
          : request.targetGameName || request.sourceGameName || '',
+      draftGameIsPublic: false,
    }))
  } catch (e) {
    error.value = '템플릿 요청 목록을 불러오지 못했어요.'
@@ -825,6 +835,7 @@ const {
  customItemModalTargetGameId,
  newGameId,
  newGameName,
+  newGameIsPublic,
  clearPreviewUrl,
  resetFileInput,
  resetUploadState,
@@ -1029,6 +1040,53 @@ async function uploadThumbnail() {
  }
 }

+async function saveGameVisibility() {
+  if (!selectedGame.value?.game?.id) return
+  try {
+    gameVisibilitySaving.value = true
+    const data = await api.updateAdminGame(selectedGame.value.game.id, {
+      isPublic: !!selectedGame.value.game.isPublic,
+    })
+    selectedGame.value = {
+      ...selectedGame.value,
+      game: {
+        ...selectedGame.value.game,
+        ...data.game,
+      },
+    }
+    await refreshGames()
+    success.value = data.game?.isPublic ? '게임을 공개 상태로 전환했어요.' : '게임을 비공개 상태로 전환했어요.'
+    return true
+  } catch (e) {
+    error.value = '게임 공개 상태를 저장하지 못했어요.'
+    return false
+  } finally {
+    gameVisibilitySaving.value = false
+  }
+}
+
+async function toggleSelectedGameVisibility(nextValue) {
+  if (!selectedGame.value?.game?.id || gameVisibilitySaving.value) return
+  const previous = !!selectedGame.value.game.isPublic
+  selectedGame.value = {
+    ...selectedGame.value,
+    game: {
+      ...selectedGame.value.game,
+      isPublic: !!nextValue,
+    },
+  }
+  const saved = await saveGameVisibility()
+  if (!saved) {
+    selectedGame.value = {
+      ...selectedGame.value,
+      game: {
+        ...selectedGame.value.game,
+        isPublic: previous,
+      },
+    }
+  }
+}
+
 async function removeGameItem(itemId) {
  resetMessages()
  try {
@@ -1496,6 +1554,11 @@ function userAvatarFallback(user) {
                    />
                    <span class="field__hint">영문, 숫자, 하이픈 조합 권장 · {{ newGameId.length }}/120자</span>
                  </label>
+                  <label class="toggleSwitch">
+                    <input v-model="newGameIsPublic" type="checkbox" />
+                    <span class="toggleSwitch__label">{{ newGameIsPublic ? '템플릿 공개중' : '비공개 상태' }}</span>
+                    <span class="toggleSwitch__track"><span class="toggleSwitch__thumb"></span></span>
+                  </label>
                </div>
                <div class="modalCard__actions">
                  <button class="btn btn--ghost" @click="closeGameCreateModal">취소</button>
@@ -1853,6 +1916,11 @@ function userAvatarFallback(user) {
        <div v-if="hasSelectedGame" class="adminSidebar__group">
          <div class="selectedGameSidebar__name">{{ selectedGame.game.name }}</div>
          <div class="selectedGameSidebar__id">{{ selectedGame.game.id }}</div>
+          <label class="toggleSwitch" :class="{ 'toggleSwitch--disabled': gameVisibilitySaving }">
+            <input :checked="!!selectedGame.game.isPublic" type="checkbox" @change="toggleSelectedGameVisibility($event.target.checked)" />
+            <span class="toggleSwitch__label">{{ selectedGame.game.isPublic ? '템플릿 공개중' : '비공개 상태' }}</span>
+            <span class="toggleSwitch__track"><span class="toggleSwitch__thumb"></span></span>
+          </label>
          <input ref="thumbFileInput" type="file" accept="image/*" class="srOnlyInput" @change="onThumb" />
          <button
            class="thumbDropZone"
@@ -1867,7 +1935,7 @@ function userAvatarFallback(user) {
            <img v-if="displayThumbnailUrl" class="selectedThumb selectedThumb--sidebar" :src="displayThumbnailUrl" :alt="selectedGame.game.name" />
            <div v-else class="selectedThumb selectedThumb--empty selectedThumb--sidebar">대표 썸네일</div>
            <div class="thumbDropZone__copy">
-              <div class="thumbDropZone__title">클릭 or 드래그</div>
+              <div class="thumbDropZone__title">{{ displayThumbnailUrl ? '썸네일 변경' : '클릭 & 드래그' }}</div>
            </div>
          </button>
          <div class="adminSidebar__actions adminSidebar__actions--stack">
@@ -3872,6 +3940,59 @@ function userAvatarFallback(user) {
  align-items: center;
  opacity: 0.88;
 }
+.adminUiScope .toggleSwitch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-pill-bg);
+  cursor: pointer;
+  user-select: none;
+}
+.adminUiScope .toggleSwitch input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.adminUiScope .toggleSwitch__track {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  border-radius: 999px;
+  background: var(--theme-surface-soft-3);
+  border: 1px solid var(--theme-border-strong);
+  transition: background 180ms ease, border-color 180ms ease;
+  flex: 0 0 auto;
+}
+.adminUiScope .toggleSwitch__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: var(--theme-text-strong);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
+  transition: transform 180ms ease;
+}
+.adminUiScope .toggleSwitch__label {
+  font-weight: 800;
+  color: var(--theme-text);
+}
+.adminUiScope .toggleSwitch input:checked ~ .toggleSwitch__track {
+  background: rgba(96, 165, 250, 0.34);
+  border-color: rgba(96, 165, 250, 0.42);
+}
+.adminUiScope .toggleSwitch input:checked ~ .toggleSwitch__track .toggleSwitch__thumb {
+  transform: translateX(18px);
+}
+.adminUiScope .toggleSwitch--disabled {
+  opacity: 0.55;
+  pointer-events: none;
+}
 .adminUiScope .checkRow--compact {
  margin-top: 0;
 }
--- a/frontend/src/views/TierEditorView.vue
+++ b/frontend/src/views/TierEditorView.vue
@@ -2073,9 +2073,25 @@ onUnmounted(() => {
 .dropzone--board {
  margin-top: 18px;
  display: flex;
+  flex-direction: column;
  align-items: center;
-  justify-content: space-between;
+  justify-content: center;
  gap: 18px;
+  min-height: 176px;
+  padding: 28px 24px;
+  border: 2px dashed color-mix(in srgb, var(--theme-accent) 48%, var(--theme-border));
+  border-radius: 22px;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--theme-card-bg) 82%, transparent), color-mix(in srgb, var(--theme-card-bg-hover) 74%, transparent)),
+    radial-gradient(circle at top, color-mix(in srgb, var(--theme-accent) 12%, transparent), transparent 58%);
+  text-align: center;
+}
+
+.dropzone--board.dropzone--active {
+  border-color: color-mix(in srgb, var(--theme-accent) 78%, white);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--theme-card-bg-hover) 88%, transparent), color-mix(in srgb, var(--theme-card-bg) 82%, transparent)),
+    radial-gradient(circle at top, color-mix(in srgb, var(--theme-accent) 20%, transparent), transparent 58%);
 }

 .dropzone__actions {
@@ -2083,11 +2099,23 @@ onUnmounted(() => {
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
+  justify-content: center;
 }

 .dropzone__button {
  min-width: 148px;
 }
+
+.dropzone--board .dropzone__title {
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.dropzone--board .dropzone__desc {
+  max-width: 520px;
+  color: var(--theme-text-soft);
+  line-height: 1.6;
+}
 .editorSidebar__section {
  display: grid;
  gap: 10px;