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

frontend/src/views/AdminView.vue

@@ -5,6 +5,7 @@ import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
 import lockResetIcon from '../assets/icons/lock_reset.svg'
 import deleteIcon from '../assets/icons/delete.svg'
+import SvgIcon from '../components/SvgIcon.vue'
 import { useAuthStore } from '../stores/auth'
 import { useToast } from '../composables/useToast'
 
@@ -1573,7 +1574,7 @@ async function saveFeaturedOrder() {
                         :disabled="user.isAvatarBusy"
                         @click.stop="removeUserAvatar(user)"
                       >
-                        <img :src="deleteIcon" alt="" />
+                        <SvgIcon class="userAvatarRemoveIcon" :src="deleteIcon" :size="12" />
                       </button>
                     </div>
                     <div class="userCard__identityMeta">
@@ -1604,10 +1605,10 @@ async function saveFeaturedOrder() {
 
                 <div class="userCard__actions userCard__actions--compact">
                   <button class="iconActionButton" type="button" title="비밀번호 초기화" @click="openUserPasswordModal(user)">
-                    <img :src="lockResetIcon" alt="" />
+                    <SvgIcon class="iconActionButton__icon" :src="lockResetIcon" :size="18" />
                   </button>
                   <button class="iconActionButton iconActionButton--danger" type="button" title="회원 삭제" @click="openUserDeleteModal(user)">
-                    <img :src="deleteIcon" alt="" />
+                    <SvgIcon class="iconActionButton__icon" :src="deleteIcon" :size="18" />
                   </button>
                   <button class="btn btn--ghost userSaveButton" :disabled="!isUserDirty(user)" @click="saveUser(user)">회원정보 저장</button>
                 </div>
@@ -2928,10 +2929,8 @@ async function saveFeaturedOrder() {
   transform: translateY(2px) scale(0.96);
   transition: opacity 160ms ease, transform 160ms ease, background 160ms ease, visibility 160ms ease;
 }
-.userAvatarRemoveButton img {
-  width: 12px;
-  height: 12px;
-  filter: brightness(0) invert(1);
+.userAvatarRemoveIcon {
+  color: rgba(255, 255, 255, 0.96);
 }
 .userAvatarRemoveButton:disabled {
   opacity: 0.45;
@@ -3033,9 +3032,8 @@ async function saveFeaturedOrder() {
   background: rgba(255, 255, 255, 0.04);
   cursor: pointer;
 }
-.iconActionButton img {
-  width: 18px;
-  height: 18px;
+.iconActionButton__icon {
+  color: rgba(255, 255, 255, 0.92);
 }
 .iconActionButton:disabled {
   cursor: not-allowed;

frontend/src/views/GameHubView.vue

@@ -222,7 +222,8 @@ function submitSearch() {
 }
 .list {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
+  justify-content: start;
   gap: 18px;
 }
 

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%;

frontend/src/views/TierEditorView.vue

@@ -919,13 +919,13 @@ onUnmounted(() => {
                   <template v-else>
                     <button
                       v-if="canEdit"
-                      class="rowRemoveIcon"
+                      class="rowRemoveText"
                       type="button"
                       title="티어 라인 삭제"
                       :disabled="groups.length <= 1"
                       @click="openGroupDeleteModal(g.id)"
                     >
-                      ×
+                      열 삭제
                     </button>
                     <span class="grab" title="드래그로 순서 변경" data-group-handle>↕</span>
                     <input v-model="g.name" class="groupName" :readonly="!canEdit" />
@@ -1562,7 +1562,7 @@ onUnmounted(() => {
   gap: 8px;
   align-items: center;
   justify-content: center;
-  padding: 10px 12px;
+  padding: 10px 12px 30px;
   font-weight: 900;
   overflow: hidden;
 }
@@ -1590,29 +1590,24 @@ onUnmounted(() => {
   outline: none;
   min-width: 0;
 }
-.rowRemoveIcon {
+.rowRemoveText {
   position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 24px;
-  height: 24px;
-  border-radius: 999px;
-  border: 1px solid rgba(239, 68, 68, 0.2);
-  background: rgba(15, 15, 15, 0.7);
-  color: rgba(255, 255, 255, 0.86);
-  display: grid;
-  place-items: center;
+  right: 12px;
+  bottom: 10px;
   padding: 0;
+  border: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
   cursor: pointer;
-  font-size: 14px;
+  font-size: 12px;
   line-height: 1;
+  font-weight: 800;
 }
-.rowRemoveIcon:hover {
-  background: rgba(70, 20, 20, 0.82);
-  border-color: rgba(239, 68, 68, 0.34);
+.rowRemoveText:hover {
+  color: rgba(255, 255, 255, 0.9);
 }
-.rowRemoveIcon:disabled {
-  opacity: 0.4;
+.rowRemoveText:disabled {
+  opacity: 0.32;
   cursor: not-allowed;
 }
 .row__exportName {