릴리스: v1.2.21 티어표 카드와 좌측 레일 밀도 조정

frontend/src/views/MyTierListsView.vue

@@ -17,12 +17,10 @@ watch(error, (message) => {
 })
 
 function fmt(ts) {
-  return new Date(ts).toLocaleString(undefined, {
+  return new Date(ts).toLocaleDateString(undefined, {
     year: 'numeric',
     month: '2-digit',
     day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
   })
 }
 
@@ -93,14 +91,19 @@ async function removeList(t) {
               <div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
             </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 class="boardCard__titleRow">
+                <div class="boardCard__title">{{ t.title }}</div>
+                <div class="favoriteStat">♡ {{ t.favoriteCount || 0 }}</div>
+              </div>
+              <div class="boardCard__metaRow">
+                <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 class="boardCard__authorName">{{ displayNameOf(t) }}</span>
+                </div>
+                <div class="boardCard__date">{{ fmt(t.updatedAt) }}</div>
               </div>
             </div>
-            <div class="boardCard__meta">{{ fmt(t.updatedAt) }}</div>
           </button>
           <button class="link link--danger" @click="removeList(t)">삭제</button>
         </article>
@@ -176,12 +179,11 @@ async function removeList(t) {
 }
 .list {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 18px;
 }
 .boardCard {
   display: grid;
-  gap: 10px;
   border-radius: 22px;
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: rgba(62, 62, 62, 0.82);
@@ -206,20 +208,19 @@ async function removeList(t) {
   color: inherit;
   padding: 0;
   display: grid;
-  gap: 10px;
 }
 .boardCard__thumbWrap {
   width: 100%;
   aspect-ratio: 16 / 9;
-  background: #555;
-  display: grid;
-  place-items: center;
+  padding: 14px 14px 0;
+  box-sizing: border-box;
 }
 .boardCard__thumb {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
+  border-radius: 18px;
 }
 .boardCard__thumbPlaceholder {
   width: 100%;
@@ -230,59 +231,77 @@ async function removeList(t) {
   color: rgba(255, 255, 255, 0.4);
   font-size: 13px;
   font-weight: 700;
+  border-radius: 18px;
 }
 .boardCard__title {
   font-weight: 900;
   min-width: 0;
+  font-size: 18px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .boardCard__head {
-  padding: 0 14px;
+  padding: 16px 18px 18px;
+  display: grid;
+  gap: 10px;
+}
+.boardCard__titleRow,
+.boardCard__metaRow {
   display: flex;
   gap: 12px;
   align-items: center;
   justify-content: space-between;
-  flex-wrap: wrap;
 }
 .boardCard__author {
+  min-width: 0;
   display: inline-flex;
   gap: 8px;
   align-items: center;
   font-size: 13px;
   opacity: 0.84;
 }
+.boardCard__authorName {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .boardCard__avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 999px;
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
   object-fit: cover;
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(255, 255, 255, 0.08);
+  flex: 0 0 auto;
 }
 .boardCard__avatar--fallback {
   display: grid;
   place-items: center;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 900;
 }
-.boardCard__meta {
-  padding: 0 14px;
-  margin-top: 6px;
-  opacity: 0.76;
+.boardCard__date,
+.favoriteStat {
+  flex: 0 0 auto;
   font-size: 13px;
+  color: rgba(255, 255, 255, 0.64);
+  white-space: nowrap;
 }
 .link--danger {
   background: rgba(239, 68, 68, 0.14);
   border-color: rgba(239, 68, 68, 0.28);
-  margin: 0 14px 14px;
+  margin: 0 18px 18px;
 }
-@media (max-width: 1100px) {
+@media (max-width: 1400px) {
   .list {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
-@media (max-width: 960px) {
+@media (max-width: 1024px) {
   .list {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 @media (max-width: 720px) {