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

frontend/src/views/MyTierListsView.vue

@@ -72,25 +72,35 @@ async function removeList(t) {
 
 <template>
   <section class="wrap">
-    <h2 class="title">내 티어표</h2>
+    <header class="head">
+      <div>
+        <div class="head__eyebrow">Library</div>
+        <h2 class="title">내 티어표</h2>
+        <div class="desc">직접 저장한 티어표를 같은 카드 레이아웃으로 다시 열고 정리할 수 있어요.</div>
+      </div>
+      <div class="head__stat">
+        <span class="head__statLabel">Saved Lists</span>
+        <strong class="head__statValue">{{ myLists.length }}</strong>
+      </div>
+    </header>
     <div class="card">
       <div v-if="myLists.length === 0" class="empty">아직 저장한 티어표가 없어요.</div>
       <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__thumbWrap">
-              <img v-if="tierListThumbnailUrl(t)" class="row__thumb" :src="tierListThumbnailUrl(t)" :alt="t.title" />
-              <div v-else class="row__thumbPlaceholder"></div>
+        <article v-for="t in myLists" :key="t.id" class="boardCard">
+          <button class="boardCard__body" @click="openList(t)">
+            <div class="boardCard__thumbWrap">
+              <img v-if="tierListThumbnailUrl(t)" class="boardCard__thumb" :src="tierListThumbnailUrl(t)" :alt="t.title" />
+              <div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
             </div>
-            <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>
+            <div class="boardCard__head">
+              <div class="boardCard__title">{{ t.title }}</div>
+              <div class="boardCard__author">
+                <img v-if="avatarSrcOf(t)" class="boardCard__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
+                <div v-else class="boardCard__avatar boardCard__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
                 <span>by {{ displayNameOf(t) }}</span>
               </div>
             </div>
-            <div class="row__meta">{{ fmt(t.updatedAt) }}</div>
+            <div class="boardCard__meta">{{ fmt(t.updatedAt) }}</div>
           </button>
           <button class="link link--danger" @click="removeList(t)">삭제</button>
         </article>
@@ -103,12 +113,48 @@ async function removeList(t) {
 .wrap {
   padding: 4px 2px;
 }
+.head {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-bottom: 18px;
+}
+.head__eyebrow {
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.42);
+}
 .title {
-  margin: 0 0 18px;
-  font-size: 30px;
+  margin: 4px 0 6px;
+  font-size: 32px;
   letter-spacing: -0.04em;
   color: rgba(255, 255, 255, 0.96);
 }
+.desc {
+  color: rgba(255, 255, 255, 0.58);
+}
+.head__stat {
+  display: grid;
+  gap: 2px;
+  min-width: 112px;
+  padding: 10px 14px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.04);
+}
+.head__statLabel {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.48);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.head__statValue {
+  font-size: 18px;
+  font-weight: 900;
+}
 .card {
   border: 0;
   background: transparent;
@@ -132,16 +178,17 @@ async function removeList(t) {
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px;
 }
-.row {
+.boardCard {
   display: grid;
   gap: 10px;
-  border-radius: 14px;
+  border-radius: 18px;
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: rgba(62, 62, 62, 0.82);
   color: rgba(255, 255, 255, 0.92);
   overflow: hidden;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
-.row__body {
+.boardCard__body {
   flex: 1 1 auto;
   min-width: 0;
   text-align: left;
@@ -153,27 +200,34 @@ async function removeList(t) {
   display: grid;
   gap: 10px;
 }
-.row__thumbWrap {
+.boardCard__thumbWrap {
   width: 100%;
   aspect-ratio: 16 / 9;
   background: #555;
+  display: grid;
+  place-items: center;
 }
-.row__thumb {
+.boardCard__thumb {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
-.row__thumbPlaceholder {
+.boardCard__thumbPlaceholder {
   width: 100%;
   height: 100%;
   background: #555;
+  display: grid;
+  place-items: center;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 13px;
+  font-weight: 700;
 }
-.row__title {
+.boardCard__title {
   font-weight: 900;
   min-width: 0;
 }
-.row__head {
+.boardCard__head {
   padding: 0 14px;
   display: flex;
   gap: 12px;
@@ -181,14 +235,14 @@ async function removeList(t) {
   justify-content: space-between;
   flex-wrap: wrap;
 }
-.row__author {
+.boardCard__author {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   font-size: 13px;
   opacity: 0.84;
 }
-.row__avatar {
+.boardCard__avatar {
   width: 28px;
   height: 28px;
   border-radius: 999px;
@@ -196,13 +250,13 @@ async function removeList(t) {
   border: 1px solid rgba(255, 255, 255, 0.12);
   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__meta {
+.boardCard__meta {
   padding: 0 14px;
   margin-top: 6px;
   opacity: 0.76;
@@ -224,6 +278,9 @@ async function removeList(t) {
   }
 }
 @media (max-width: 720px) {
+  .head__stat {
+    width: 100%;
+  }
   .list {
     grid-template-columns: 1fr;
   }