릴리스: v1.2.6 목록 화면 카드 레이아웃 정리

frontend/src/views/FavoriteTierListsView.vue

@@ -62,6 +62,7 @@ onMounted(loadFavorites)
   <section class="wrap">
     <div class="head">
       <div>
+        <div class="head__eyebrow">Collection</div>
         <h2 class="title">내 즐겨찾기</h2>
         <div class="desc">마음에 드는 티어표를 모아보고, 원하는 기준으로 정렬할 수 있어요.</div>
       </div>
@@ -78,23 +79,23 @@ onMounted(loadFavorites)
 
     <div v-if="favorites.length === 0" class="empty">즐겨찾기한 티어표가 없어요.</div>
     <div v-else class="list">
-      <article v-for="tierList in favorites" :key="tierList.id" class="row">
-        <button class="row__body" @click="openTierList(tierList)">
-          <div class="row__thumbWrap">
-            <img v-if="tierListThumbnailUrl(tierList)" class="row__thumb" :src="tierListThumbnailUrl(tierList)" :alt="tierList.title" />
-            <div v-else class="row__thumbPlaceholder"></div>
+      <article v-for="tierList in favorites" :key="tierList.id" class="boardCard">
+        <button class="boardCard__body" @click="openTierList(tierList)">
+          <div class="boardCard__thumbWrap">
+            <img v-if="tierListThumbnailUrl(tierList)" class="boardCard__thumb" :src="tierListThumbnailUrl(tierList)" :alt="tierList.title" />
+            <div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
           </div>
-          <div class="row__head">
-            <div class="row__title">{{ tierList.title }}</div>
-            <div class="row__author">
-              <img v-if="avatarSrcOf(tierList)" class="row__avatar" :src="avatarSrcOf(tierList)" :alt="displayNameOf(tierList)" />
-              <div v-else class="row__avatar row__avatar--fallback">{{ avatarFallbackOf(tierList) }}</div>
+          <div class="boardCard__head">
+            <div class="boardCard__title">{{ tierList.title }}</div>
+            <div class="boardCard__author">
+              <img v-if="avatarSrcOf(tierList)" class="boardCard__avatar" :src="avatarSrcOf(tierList)" :alt="displayNameOf(tierList)" />
+              <div v-else class="boardCard__avatar boardCard__avatar--fallback">{{ avatarFallbackOf(tierList) }}</div>
               <span>by {{ displayNameOf(tierList) }}</span>
             </div>
           </div>
         </button>
-        <div class="row__foot">
-          <div class="row__meta">
+        <div class="boardCard__foot">
+          <div class="boardCard__meta">
             <div>{{ tierList.gameName || tierList.gameId }}</div>
             <div>{{ sortLabel }}: {{ fmt(sort === 'favorited' ? tierList.favoritedAt : tierList.updatedAt) }}</div>
           </div>
@@ -117,9 +118,15 @@ onMounted(loadFavorites)
   align-items: flex-end;
   flex-wrap: wrap;
 }
+.head__eyebrow {
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.42);
+}
 .title {
-  margin: 0;
-  font-size: 30px;
+  margin: 4px 0 0;
+  font-size: 32px;
   color: rgba(255, 255, 255, 0.96);
   letter-spacing: -0.04em;
 }
@@ -157,15 +164,16 @@ onMounted(loadFavorites)
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px;
 }
-.row {
-  border-radius: 14px;
+.boardCard {
+  border-radius: 18px;
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: rgba(62, 62, 62, 0.82);
   overflow: hidden;
   display: grid;
   gap: 10px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
-.row__body {
+.boardCard__body {
   border: 0;
   background: transparent;
   color: inherit;
@@ -175,60 +183,67 @@ onMounted(loadFavorites)
   display: grid;
   gap: 10px;
 }
-.row__thumbWrap {
+.boardCard__thumbWrap {
   width: 100%;
   aspect-ratio: 16 / 9;
   background: #555;
+  display: grid;
+  place-items: center;
 }
-.row__thumb,
-.row__thumbPlaceholder {
+.boardCard__thumb,
+.boardCard__thumbPlaceholder {
   width: 100%;
   height: 100%;
   display: block;
 }
-.row__thumb {
+.boardCard__thumb {
   object-fit: cover;
 }
-.row__thumbPlaceholder {
+.boardCard__thumbPlaceholder {
   background: #555;
+  display: grid;
+  place-items: center;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 13px;
+  font-weight: 700;
 }
-.row__head {
+.boardCard__head {
   padding: 14px 14px 0;
   display: grid;
   gap: 10px;
 }
-.row__title {
+.boardCard__title {
   font-weight: 800;
   font-size: 18px;
 }
-.row__author {
+.boardCard__author {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   opacity: 0.86;
 }
-.row__avatar {
+.boardCard__avatar {
   width: 28px;
   height: 28px;
   border-radius: 999px;
   object-fit: cover;
   background: rgba(255, 255, 255, 0.08);
 }
-.row__avatar--fallback {
+.boardCard__avatar--fallback {
   display: grid;
   place-items: center;
   font-size: 12px;
   font-weight: 900;
 }
-.row__foot {
+.boardCard__foot {
   padding: 0 14px 14px;
   display: flex;
   gap: 12px;
   align-items: center;
   justify-content: space-between;
 }
-.row__meta {
+.boardCard__meta {
   display: grid;
   gap: 4px;
   opacity: 0.78;