릴리스: v0.1.21 저장 피드백과 썸네일 fallback 정리

frontend/src/views/GameHubView.vue

@@ -34,7 +34,7 @@ function avatarSrcOf(tierList) {
 }
 
 function avatarFallbackOf(tierList) {
-  return displayNameOf(tierList).trim().charAt(0).toUpperCase() || '?'
+  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
 }
 
 onMounted(async () => {

frontend/src/views/MyTierListsView.vue

@@ -27,7 +27,7 @@ function avatarSrcOf(tierList) {
 }
 
 function avatarFallbackOf(tierList) {
-  return displayNameOf(tierList).trim().charAt(0).toUpperCase() || '?'
+  return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
 }
 
 onMounted(async () => {

frontend/src/views/TierEditorView.vue

@@ -31,6 +31,7 @@ const isPublic = ref(true)
 const error = ref('')
 const isSaving = ref(false)
 const isExporting = ref(false)
+const isSaveModalOpen = ref(false)
 const ownerId = ref('')
 const isDragActive = ref(false)
 
@@ -292,6 +293,7 @@ async function save() {
     const payload = buildPayload(tierListId.value && tierListId.value !== 'new' ? tierListId.value : null)
     const res = await api.saveTierList(payload)
     if (tierListId.value === 'new') history.replaceState({}, '', `/editor/${gameId.value}/${res.tierList.id}`)
+    isSaveModalOpen.value = true
   } catch (e) {
     error.value = '저장 실패: 로그인 상태인지 확인해주세요.'
   } finally {
@@ -299,6 +301,10 @@ async function save() {
   }
 }
 
+function closeSaveModal() {
+  isSaveModalOpen.value = false
+}
+
 async function removeTierList() {
   if (!canEdit.value || isNewTierList.value) return
   error.value = ''
@@ -407,6 +413,16 @@ onUnmounted(() => {
 
   <div v-if="error" class="error">{{ error }}</div>
 
+  <div v-if="isSaveModalOpen" class="modalOverlay" @click.self="closeSaveModal">
+    <div class="modalCard" role="dialog" aria-modal="true" aria-labelledby="saveModalTitle">
+      <div id="saveModalTitle" class="modalCard__title">저장 완료</div>
+      <div class="modalCard__desc">티어표가 저장되었어요. 이어서 더 수정한 뒤 다시 저장할 수도 있어요.</div>
+      <div class="modalCard__actions">
+        <button class="btn btn--save" @click="closeSaveModal">확인</button>
+      </div>
+    </div>
+  </div>
+
   <section class="layout">
     <div ref="boardEl" class="board">
       <div v-if="canEdit && !isExporting" class="boardTools">
@@ -609,6 +625,40 @@ onUnmounted(() => {
   padding: 20px;
   align-self: start;
 }
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: grid;
+  place-items: center;
+  padding: 20px;
+  background: rgba(4, 8, 16, 0.68);
+  backdrop-filter: blur(4px);
+}
+.modalCard {
+  width: min(100%, 420px);
+  border-radius: 20px;
+  padding: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(11, 18, 32, 0.96));
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
+  display: grid;
+  gap: 10px;
+}
+.modalCard__title {
+  font-size: 22px;
+  font-weight: 900;
+  letter-spacing: -0.02em;
+}
+.modalCard__desc {
+  line-height: 1.6;
+  opacity: 0.82;
+}
+.modalCard__actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
 .boardTools {
   display: flex;
   justify-content: flex-end;
@@ -617,6 +667,11 @@ onUnmounted(() => {
 .exportBoard--active {
   display: grid;
   gap: 12px;
+  padding: 28px;
+  border-radius: 24px;
+  background:
+    radial-gradient(circle at top, rgba(96, 165, 250, 0.14), transparent 38%),
+    rgba(11, 18, 32, 0.98);
 }
 .exportBoard__title {
   font-size: 28px;