릴리스: v0.1.19 티어표 저장 UI와 작성자 표시 정리

frontend/src/views/TierEditorView.vue

@@ -27,7 +27,7 @@ const itemsById = ref({})
 
 const title = ref('')
 const description = ref('')
-const isPublic = ref(false)
+const isPublic = ref(true)
 const error = ref('')
 const isSaving = ref(false)
 const isExporting = ref(false)
@@ -299,6 +299,19 @@ async function save() {
   }
 }
 
+async function removeTierList() {
+  if (!canEdit.value || isNewTierList.value) return
+  error.value = ''
+  try {
+    const ok = window.confirm(`"${title.value || gameName.value || '이 티어표'}"를 삭제할까요?`)
+    if (!ok) return
+    await api.deleteTierList(tierListId.value)
+    router.push(gameId.value === 'freeform' ? '/me' : `/games/${gameId.value}`)
+  } catch (e) {
+    error.value = '티어표 삭제에 실패했어요.'
+  }
+}
+
 onMounted(() => {
   ;(async () => {
     await auth.refresh()
@@ -378,12 +391,17 @@ onUnmounted(() => {
       </div>
     </div>
     <div class="actions">
-      <label class="toggle" :class="{ 'toggle--disabled': !canEdit }">
+      <div class="actions__left">
+        <button class="btn btn--download" @click="downloadImage">이미지 다운로드</button>
+        <button v-if="canEdit && !isNewTierList" class="btn btn--danger" @click="removeTierList">삭제</button>
+      </div>
+      <div class="actions__right">
+        <label class="toggle" :class="{ 'toggle--disabled': !canEdit }">
         <input v-model="isPublic" type="checkbox" :disabled="!canEdit" />
-        <span>공개</span>
-      </label>
-      <button v-if="canEdit" class="btn" :disabled="isSaving" @click="save">{{ isSaving ? '저장중...' : '저장' }}</button>
-      <button class="btn btn--primary" @click="downloadImage">이미지로 다운로드</button>
+          <span>{{ isPublic ? '공개 ON' : '공개 OFF' }}</span>
+        </label>
+        <button v-if="canEdit" class="btn btn--save" :disabled="isSaving" @click="save">{{ isSaving ? '저장중...' : '저장' }}</button>
+      </div>
     </div>
   </section>
 
@@ -495,10 +513,17 @@ onUnmounted(() => {
   font-size: 13px;
 }
 .actions {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.actions__left,
+.actions__right {
   display: flex;
   gap: 10px;
   align-items: center;
-  justify-content: flex-end;
   flex-wrap: wrap;
 }
 .toggle {
@@ -539,6 +564,27 @@ onUnmounted(() => {
 .btn--primary:hover {
   background: rgba(110, 231, 183, 0.24);
 }
+.btn--download {
+  justify-self: flex-start;
+}
+.btn--save {
+  min-width: 112px;
+  padding: 12px 18px;
+  font-size: 15px;
+  font-weight: 900;
+  background: rgba(96, 165, 250, 0.22);
+  border-color: rgba(96, 165, 250, 0.36);
+}
+.btn--save:hover {
+  background: rgba(96, 165, 250, 0.3);
+}
+.btn--danger {
+  background: rgba(239, 68, 68, 0.14);
+  border-color: rgba(239, 68, 68, 0.28);
+}
+.btn--danger:hover {
+  background: rgba(239, 68, 68, 0.22);
+}
 .btn--ghost {
   width: 100%;
   margin-top: 10px;
@@ -753,6 +799,16 @@ onUnmounted(() => {
   .layout {
     grid-template-columns: 1fr;
   }
+  .actions {
+    justify-content: stretch;
+  }
+  .actions__left,
+  .actions__right {
+    width: 100%;
+  }
+  .actions__right {
+    justify-content: flex-end;
+  }
   .row {
     grid-template-columns: 150px 1fr;
   }