릴리스: v1.2.25 홈 썸네일과 하단 액션 고정 보정

frontend/src/App.vue

@@ -787,7 +787,10 @@ watch(
 
 .leftRail__bottom {
   justify-content: stretch;
-  margin-bottom: 56px;
+  height: auto;
+  min-height: 56px;
+  padding-bottom: 56px;
+  align-items: flex-start;
 }
 
 .adminButton {
@@ -887,7 +890,10 @@ watch(
 }
 
 .rightRail__bottom {
-  margin-bottom: 56px;
+  height: auto;
+  min-height: 56px;
+  padding-bottom: 56px;
+  align-items: flex-start;
 }
 
 .rightRailAction__button {

frontend/src/views/HomeView.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { api } from '../lib/api'
+import { toApiUrl } from '../lib/runtime'
 
 const router = useRouter()
 
@@ -21,6 +22,10 @@ onMounted(async () => {
 function goGame(gameId) {
   router.push(`/games/${gameId}`)
 }
+
+function thumbUrl(g) {
+  return g.thumbnailSrc ? toApiUrl(g.thumbnailSrc) : ''
+}
 </script>
 
 <template>
@@ -35,6 +40,10 @@ function goGame(gameId) {
   <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">{{ g.id }}</div>
@@ -92,13 +101,14 @@ function goGame(gameId) {
 }
 .libraryCard {
   text-align: left;
-  padding: 18px;
+  padding: 14px;
   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: block;
+  display: grid;
+  gap: 12px;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
   transition:
     transform 0.16s ease,
@@ -108,6 +118,25 @@ function goGame(gameId) {
   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: 14px;
+  color: rgba(255, 255, 255, 0.4);
+}
 .libraryCard__body {
   display: grid;
   gap: 6px;