릴리스: v1.3.10 게임 허브 카드 폭과 SVG 아이콘 렌더링 정리

frontend/src/views/HomeView.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
+import SvgIcon from '../components/SvgIcon.vue'
 import kidStarIcon from '../assets/icons/kid_star.svg'
 import { toApiUrl } from '../lib/runtime'
 import { useAuthStore } from '../stores/auth'
@@ -92,7 +93,7 @@ function thumbUrl(g) {
         :disabled="loadingFavoriteId === g.id"
         @click.stop="toggleFavorite(g, $event)"
       >
-        <img class="libraryCard__favoriteIcon" :src="kidStarIcon" alt="" aria-hidden="true" />
+        <SvgIcon class="libraryCard__favoriteIcon" :src="kidStarIcon" :size="18" />
       </button>
       <button class="libraryCard__main" type="button" @click="goGame(g.id)">
         <div class="libraryCard__thumbWrap">
@@ -179,15 +180,12 @@ function thumbUrl(g) {
   border-color: rgba(255, 216, 107, 0.28);
 }
 .libraryCard__favoriteIcon {
-  width: 18px;
-  height: 18px;
-  display: block;
   opacity: 0.76;
-  filter: brightness(0) saturate(100%) invert(100%);
+  color: rgba(255, 255, 255, 0.94);
 }
 .libraryCard__favorite--active .libraryCard__favoriteIcon {
   opacity: 1;
-  filter: brightness(0) saturate(100%) invert(86%) sepia(45%) saturate(529%) hue-rotate(351deg) brightness(103%) contrast(101%);
+  color: #ffd86b;
 }
 .libraryCard__thumbWrap {
   width: 100%;