릴리스: v1.2.24 홈 카드와 하단 여백 조정

frontend/src/App.vue

@@ -787,6 +787,7 @@ watch(
 
 .leftRail__bottom {
   justify-content: stretch;
+  margin-bottom: 56px;
 }
 
 .adminButton {
@@ -885,6 +886,10 @@ watch(
   width: 100%;
 }
 
+.rightRail__bottom {
+  margin-bottom: 56px;
+}
+
 .rightRailAction__button {
   width: 100%;
   padding: 12px 14px;

frontend/src/views/HomeView.vue

@@ -2,11 +2,8 @@
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { api } from '../lib/api'
-import { toApiUrl } from '../lib/runtime'
-import { useAuthStore } from '../stores/auth'
 
 const router = useRouter()
-const auth = useAuthStore()
 
 const items = ref([])
 const error = ref('')
@@ -24,20 +21,6 @@ onMounted(async () => {
 function goGame(gameId) {
   router.push(`/games/${gameId}`)
 }
-
-function goFreeform() {
-  if (!auth.user) {
-    router.push('/login?redirect=/editor/freeform/new')
-    return
-  }
-  router.push('/editor/freeform/new')
-}
-
-function thumbUrl(g) {
-  if (!g.thumbnailSrc) return ''
-  return toApiUrl(g.thumbnailSrc)
-}
-
 </script>
 
 <template>
@@ -52,16 +35,9 @@ function thumbUrl(g) {
   <div v-if="error" class="error">{{ error }}</div>
   <section class="libraryGrid">
     <button v-for="g in games" :key="g.id" class="libraryCard" @click="goGame(g.id)">
-      <div class="libraryCard__thumbWrap">
-        <img v-if="thumbUrl(g)" class="libraryCard__thumb" :src="thumbUrl(g)" :alt="g.name" />
-        <div v-else class="libraryCard__thumbFallback">대표 썸네일</div>
-      </div>
       <div class="libraryCard__body">
         <div class="libraryCard__title">{{ g.name }}</div>
-        <div class="libraryCard__meta">
-          <span class="libraryCard__metaDot"></span>
-          <span>{{ g.id }}</span>
-        </div>
+        <div class="libraryCard__meta">{{ g.id }}</div>
       </div>
     </button>
   </section>
@@ -116,14 +92,13 @@ function thumbUrl(g) {
 }
 .libraryCard {
   text-align: left;
-  padding: 14px;
+  padding: 18px;
   border-radius: 22px;
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: rgba(62, 62, 62, 0.82);
   color: rgba(255, 255, 255, 0.92);
   cursor: pointer;
-  display: grid;
-  gap: 12px;
+  display: block;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
   transition:
     transform 0.16s ease,
@@ -133,48 +108,21 @@ function thumbUrl(g) {
   background: rgba(70, 70, 70, 0.96);
   transform: translateY(-2px);
 }
-.libraryCard__thumbWrap {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: #555;
-  overflow: hidden;
-  display: grid;
-  place-items: center;
-}
-.libraryCard__thumb {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.libraryCard__thumbFallback {
-  font-size: 13px;
-  font-weight: 700;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.4);
-}
 .libraryCard__body {
   display: grid;
-  gap: 8px;
+  gap: 6px;
 }
 .libraryCard__title {
   font-weight: 800;
   letter-spacing: -0.02em;
-  font-size: 16px;
+  font-size: 18px;
 }
 .libraryCard__meta {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
   color: rgba(255, 255, 255, 0.6);
   font-size: 13px;
-}
-.libraryCard__metaDot {
-  width: 10px;
-  height: 10px;
-  border-radius: 3px;
-  background: rgba(255, 255, 255, 0.9);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 @media (max-width: 1400px) {
   .libraryGrid {
@@ -195,14 +143,6 @@ function thumbUrl(g) {
   .dashboardHero {
     align-items: stretch;
   }
-  .dashboardToolbar {
-    width: 100%;
-  }
-  .dashboardToolbar__ghost,
-  .dashboardToolbar__stat,
-  .customTierBtn {
-    flex: 1 1 100%;
-  }
   .libraryGrid {
     grid-template-columns: 1fr;
   }

frontend/src/views/MyTierListsView.vue

@@ -76,10 +76,6 @@ async function removeList(t) {
         <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>
@@ -140,25 +136,6 @@ async function removeList(t) {
 .desc {
   color: rgba(255, 255, 255, 0.58);
 }
-.head__stat {
-  display: grid;
-  gap: 2px;
-  min-width: 112px;
-  padding: 12px 14px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.045);
-}
-.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;
@@ -305,9 +282,6 @@ async function removeList(t) {
   }
 }
 @media (max-width: 720px) {
-  .head__stat {
-    width: 100%;
-  }
   .list {
     grid-template-columns: 1fr;
   }