From 09acebc2d5a517767bcdef4d9fb84fc8968cd24f Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Wed, 1 Apr 2026 13:53:48 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A6=B4=EB=A6=AC=EC=8A=A4:=20v1.3.21=20?=
 =?UTF-8?q?=EB=82=B4=20=ED=8B=B0=EC=96=B4=ED=91=9C=20=EC=B9=B4=EB=93=9C=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=EC=9D=84=20=EA=B2=8C?=
 =?UTF-8?q?=EC=9E=84=20=EB=AA=A9=EB=A1=9D=EA=B3=BC=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/update.md                         |  3 +++
 frontend/src/views/MyTierListsView.vue | 34 ++++++++++++++------------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/docs/update.md b/docs/update.md
index 8eb67cd..f4f4d87 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,8 @@
 # 업데이트 로그
 
+## 2026-04-01 v1.3.21
+- 내 티어표 카드는 게임 목록 화면과 같은 카드 폭/헤더/메타 배치 문법으로 맞춰, 화면 간 카드 크기와 정보 정렬이 더 통일된 인상으로 보이도록 정리함.
+
 ## 2026-04-01 v1.3.20
 - 내 티어표 카드 그리드는 카드 최대폭 우선 규칙 대신 더 촘촘한 auto-fill 기준으로 조정해, 넓은 화면에서도 한 줄에 더 많은 카드가 자연스럽게 배치되도록 보정함.
 
diff --git a/frontend/src/views/MyTierListsView.vue b/frontend/src/views/MyTierListsView.vue
index 5b2f75d..02673e8 100644
--- a/frontend/src/views/MyTierListsView.vue
+++ b/frontend/src/views/MyTierListsView.vue
@@ -107,13 +107,11 @@ function openList(t) {
 }
 .list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
+  justify-content: start;
   gap: 18px;
-
 }
 .boardCard {
-  display: grid;
-  width: 100%;
   min-width: 0;
   border-radius: 22px;
   border: 1px solid rgba(255, 255, 255, 0.16);
@@ -130,7 +128,6 @@ function openList(t) {
   background: rgba(70, 70, 70, 0.96);
 }
 .boardCard__body {
-  flex: 1 1 auto;
   min-width: 0;
   text-align: left;
   cursor: pointer;
@@ -138,9 +135,11 @@ function openList(t) {
   background: transparent;
   color: inherit;
   padding: 0;
+  width: 100%;
   display: grid;
 }
 .boardCard__thumbWrap {
+  min-width: 0;
   width: 100%;
   aspect-ratio: 16 / 9;
   padding: 14px 14px 0;
@@ -165,29 +164,29 @@ function openList(t) {
   border-radius: 18px;
 }
 .boardCard__title {
-  flex: 1 1 auto;
+  font-weight: 800;
   min-width: 0;
-  font-weight: 900;
   font-size: 18px;
-  line-height: 1.3;
+  line-height: 1.35;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
 }
 .boardCard__head {
+  min-width: 0;
   padding: 16px 18px 18px;
   display: grid;
   gap: 8px;
-  min-width: 0;
 }
 .boardCard__titleRow,
 .boardCard__metaRow {
-  display: flex;
-  gap: 10px;
   min-width: 0;
-  align-items: center;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
 }
 
 .boardCard__titleRow {
@@ -198,13 +197,14 @@ function openList(t) {
   align-items: flex-end;
 }
 .boardCard__author {
-  flex: 1 1 auto;
   min-width: 0;
+  max-width: 100%;
   display: inline-flex;
   gap: 7px;
   align-items: center;
   font-size: 13px;
-  opacity: 0.84;
+  opacity: 0.86;
+  overflow: hidden;
 }
 .boardCard__authorName {
   min-width: 0;
@@ -230,9 +230,13 @@ function openList(t) {
 .boardCard__date,
 .favoriteStat {
   flex: 0 0 auto;
+  min-width: 0;
+  max-width: 100%;
   font-size: 13px;
   color: rgba(255, 255, 255, 0.64);
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .boardCard__date {
   font-size: 10px;