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

frontend/src/views/MyTierListsView.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { api } from '../lib/api'
+import { toApiUrl } from '../lib/runtime'
 
 const router = useRouter()
 const myLists = ref([])
@@ -14,10 +15,21 @@ function fmt(ts) {
     day: '2-digit',
     hour: '2-digit',
     minute: '2-digit',
-    second: '2-digit',
   })
 }
 
+function displayNameOf(tierList) {
+  return tierList.authorName || '알 수 없음'
+}
+
+function avatarSrcOf(tierList) {
+  return tierList.authorAvatarSrc ? toApiUrl(tierList.authorAvatarSrc) : ''
+}
+
+function avatarFallbackOf(tierList) {
+  return displayNameOf(tierList).trim().charAt(0).toUpperCase() || '?'
+}
+
 onMounted(async () => {
   try {
     const data = await api.listMyTierLists()
@@ -56,10 +68,15 @@ async function removeList(t) {
       <div v-else class="list">
         <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 class="row__head">
+              <div class="row__title">{{ t.title }}</div>
+              <div class="row__author">
+                <img v-if="avatarSrcOf(t)" class="row__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
+                <div v-else class="row__avatar row__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
+                <span>by {{ displayNameOf(t) }}</span>
+              </div>
             </div>
+            <div class="row__meta">{{ fmt(t.updatedAt) }}</div>
           </button>
           <button class="link link--danger" @click="removeList(t)">삭제</button>
         </article>
@@ -133,6 +150,35 @@ async function removeList(t) {
 }
 .row__title {
   font-weight: 900;
+  min-width: 0;
+}
+.row__head {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.row__author {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 13px;
+  opacity: 0.84;
+}
+.row__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  object-fit: cover;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.08);
+}
+.row__avatar--fallback {
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  font-weight: 900;
 }
 .row__meta {
   margin-top: 6px;