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

frontend/src/views/GameHubView.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
+import { toApiUrl } from '../lib/runtime'
 import { useAuthStore } from '../stores/auth'
 
 const route = useRoute()
@@ -21,10 +22,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 [gameRes, listRes] = await Promise.all([api.getGame(gameId.value), api.listPublicTierLists(gameId.value)])
@@ -66,10 +78,15 @@ function openTierList(id) {
     <div v-if="tierLists.length === 0" class="empty">아직 공개 티어표가 없어요.</div>
     <div v-else class="list">
       <button v-for="t in tierLists" :key="t.id" class="row" @click="openTierList(t.id)">
-        <div class="row__title">{{ t.title }}</div>
-        <div class="row__meta">
-          작성자: {{ t.authorName || '알 수 없음' }} · 저장: {{ 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>
     </div>
   </section>
@@ -141,12 +158,43 @@ function openTierList(id) {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.92);
   cursor: pointer;
+  width: 100%;
 }
 .row:hover {
   background: rgba(255, 255, 255, 0.05);
 }
 .row__title {
   font-weight: 800;
+  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.86;
+  flex: 0 0 auto;
+}
+.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 {
   opacity: 0.78;