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

frontend/src/views/FavoriteTierListsView.vue

@@ -54,14 +54,14 @@ onMounted(loadFavorites)
 </script>
 
 <template>
-  <section class="wrap">
-    <div class="head">
-      <div>
-        <div class="head__eyebrow">Collection</div>
-        <h2 class="title">내 즐겨찾기</h2>
-        <div class="desc">마음에 드는 티어표를 모아보고, 원하는 기준으로 정렬할 수 있어요.</div>
+  <section class="pageWrap">
+    <div class="pageHead">
+      <div class="pageHead__main">
+        <div class="pageHead__eyebrow">Collection</div>
+        <h2 class="pageHead__title">내 즐겨찾기</h2>
+        <div class="pageHead__desc">마음에 드는 티어표를 모아보고, 원하는 기준으로 정렬할 수 있어요.</div>
       </div>
-      <div class="toolbar">
+      <div class="pageHead__aside toolbar">
         <input v-model="query" class="input" placeholder="제목, 게임, 작성자 검색" @keydown.enter.prevent="loadFavorites" />
         <select v-model="sort" class="select" @change="loadFavorites">
           <option value="favorited">즐겨찾기한 순</option>
@@ -101,34 +101,6 @@ onMounted(loadFavorites)
 </template>
 
 <style scoped>
-.wrap {
-  display: grid;
-  gap: 18px;
-}
-.head {
-  display: flex;
-  gap: 14px;
-  justify-content: space-between;
-  align-items: flex-end;
-  flex-wrap: wrap;
-  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 0;
-  font-size: 32px;
-  color: rgba(255, 255, 255, 0.96);
-  letter-spacing: -0.04em;
-}
-.desc {
-  margin-top: 6px;
-  color: rgba(255, 255, 255, 0.58);
-}
 .toolbar {
   display: flex;
   gap: 10px;
@@ -210,15 +182,19 @@ onMounted(loadFavorites)
 .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__title {
   min-width: 0;
   font-weight: 800;
@@ -244,7 +220,7 @@ onMounted(loadFavorites)
 .boardCard__avatar {
   width: 22px;
   height: 22px;
-  border-radius: 6px;
+  border-radius: 9999px;
   object-fit: cover;
   background: rgba(255, 255, 255, 0.08);
   flex: 0 0 auto;
@@ -262,6 +238,10 @@ onMounted(loadFavorites)
   color: rgba(255, 255, 255, 0.64);
   white-space: nowrap;
 }
+
+.boardCard__date {
+  font-size: 10px;
+}
 @media (max-width: 1400px) {
   .list {
     grid-template-columns: repeat(3, minmax(0, 1fr));