릴리스: v1.2.26 관리자 회원 관리와 셸 UI 개선

frontend/src/views/MyTierListsView.vue

@@ -69,12 +69,12 @@ async function removeList(t) {
 </script>
 
 <template>
-  <section class="wrap">
-    <header class="head">
-      <div>
-        <div class="head__eyebrow">Library</div>
-        <h2 class="title">내 티어표</h2>
-        <div class="desc">직접 저장한 티어표를 같은 카드 레이아웃으로 다시 열고 정리할 수 있어요.</div>
+  <section class="pageWrap">
+    <header class="pageHead">
+      <div class="pageHead__main">
+        <div class="pageHead__eyebrow">Library</div>
+        <h2 class="pageHead__title">내 티어표</h2>
+        <div class="pageHead__desc">직접 저장한 티어표를 같은 카드 레이아웃으로 다시 열고 정리할 수 있어요.</div>
       </div>
     </header>
     <div class="card">
@@ -109,33 +109,6 @@ async function removeList(t) {
 </template>
 
 <style scoped>
-.wrap {
-  padding: 4px 2px;
-}
-.head {
-  display: flex;
-  gap: 16px;
-  align-items: flex-start;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  margin-bottom: 18px;
-  padding: 6px 2px 8px;
-}
-.head__eyebrow {
-  font-size: 11px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.42);
-}
-.title {
-  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);
-}
 .card {
   border: 0;
   background: transparent;
@@ -221,19 +194,23 @@ async function removeList(t) {
 .boardCard__head {
   padding: 16px 18px 18px;
   display: grid;
-  gap: 10px;
+  gap: 6px;
 }
 .boardCard__titleRow,
 .boardCard__metaRow {
   display: flex;
-  gap: 12px;
+  gap: 10px;
   align-items: center;
   justify-content: space-between;
 }
+
+.boardCard__metaRow {
+  align-items: flex-end;
+}
 .boardCard__author {
   min-width: 0;
   display: inline-flex;
-  gap: 8px;
+  gap: 7px;
   align-items: center;
   font-size: 13px;
   opacity: 0.84;
@@ -247,7 +224,7 @@ async function removeList(t) {
 .boardCard__avatar {
   width: 22px;
   height: 22px;
-  border-radius: 6px;
+  border-radius: 9999px;
   object-fit: cover;
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(255, 255, 255, 0.08);
@@ -266,6 +243,9 @@ async function removeList(t) {
   color: rgba(255, 255, 255, 0.64);
   white-space: nowrap;
 }
+.boardCard__date {
+  font-size: 10px;
+}
 .link--danger {
   background: rgba(239, 68, 68, 0.14);
   border-color: rgba(239, 68, 68, 0.28);