릴리스: v0.1.17 티어표 삭제와 미사용 이미지 정리 추가

frontend/src/views/MyTierListsView.vue

@@ -30,6 +30,18 @@ onMounted(async () => {
 function openList(t) {
   router.push(`/editor/${t.gameId}/${t.id}`)
 }
+
+async function removeList(t) {
+  error.value = ''
+  try {
+    const ok = window.confirm(`"${t.title}" 티어표를 삭제할까요?`)
+    if (!ok) return
+    await api.deleteTierList(t.id)
+    myLists.value = myLists.value.filter((entry) => entry.id !== t.id)
+  } catch (e) {
+    error.value = '티어표 삭제에 실패했어요.'
+  }
+}
 </script>
 
 <template>
@@ -42,12 +54,15 @@ function openList(t) {
       </div>
       <div v-if="myLists.length === 0" class="empty">아직 저장한 티어표가 없어요.</div>
       <div v-else class="list">
-        <button v-for="t in myLists" :key="t.id" class="row" @click="openList(t)">
-          <div class="row__title">{{ t.title }}</div>
-          <div class="row__meta">
-            {{ t.gameId }} · 저장: {{ fmt(t.createdAt || t.updatedAt) }} · 업데이트: {{ fmt(t.updatedAt) }}
-          </div>
-        </button>
+        <article v-for="t in myLists" :key="t.id" class="row">
+          <button class="row__body" @click="openList(t)">
+            <div class="row__title">{{ t.title }}</div>
+            <div class="row__meta">
+              {{ t.gameId }} · 저장: {{ fmt(t.createdAt || t.updatedAt) }} · 업데이트: {{ fmt(t.updatedAt) }}
+            </div>
+          </button>
+          <button class="link link--danger" @click="removeList(t)">삭제</button>
+        </article>
       </div>
     </div>
   </section>
@@ -96,14 +111,26 @@ function openList(t) {
   gap: 10px;
 }
 .row {
-  text-align: left;
-  cursor: pointer;
-  padding: 12px;
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 14px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.16);
   color: rgba(255, 255, 255, 0.92);
 }
+.row__body {
+  flex: 1 1 auto;
+  min-width: 0;
+  text-align: left;
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+}
 .row__title {
   font-weight: 900;
 }
@@ -112,5 +139,8 @@ function openList(t) {
   opacity: 0.76;
   font-size: 13px;
 }
+.link--danger {
+  background: rgba(239, 68, 68, 0.14);
+  border-color: rgba(239, 68, 68, 0.28);
+}
 </style>
-