From f77ce2a580d6d1c59cae50cfdc2602685366a76e Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Tue, 31 Mar 2026 16:06:20 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A6=B4=EB=A6=AC=EC=8A=A4:=20v1.2.67=20?=
 =?UTF-8?q?=ED=99=88=20=EC=A6=90=EA=B2=A8=EC=B0=BE=EA=B8=B0=20=EC=9E=AC?=
 =?UTF-8?q?=EC=A0=95=EB=A0=AC=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/update.md                  |  4 ++++
 frontend/src/views/HomeView.vue | 27 +++++++++++++++++++++++----
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/docs/update.md b/docs/update.md
index 52af5e3..fef936f 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,9 @@
 # 업데이트 로그
 
+## 2026-03-31 v1.2.67
+- 홈 화면 게임 템플릿 즐겨찾기 버튼 위치 변경은 유지하면서, 즐겨찾기 on/off 시 카드가 즉시 튀지 않고 부드럽게 재정렬되도록 이동/페이드 전환을 추가함.
+- 별 아이콘을 눌렀을 때 카드가 즐겨찾기 우선순위 위치로 자연스럽게 이동해 전체 라이브러리 전환감이 덜 거칠게 보이도록 보정함.
+
 ## 2026-03-31 v1.2.66
 - 내 티어표 카드 하단의 큰 삭제 버튼은 제거하고, 삭제는 상세 편집 화면에서만 하도록 흐름을 단순화함.
 - 내 티어표 카드 그리드를 고정 4/3/2열에서 `auto-fit` 기반 최소 폭 카드로 바꾸고, 제목/메타가 좁은 화면에서도 말줄임과 유연한 폭 계산을 유지하도록 보정함.
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index a2769a4..b5d7ec5 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -82,7 +82,7 @@ function thumbUrl(g) {
   </section>
 
   <div v-if="error" class="error">{{ error }}</div>
-  <section v-if="games.length" class="libraryGrid">
+  <TransitionGroup v-if="games.length" name="libraryCard" tag="section" class="libraryGrid">
     <article v-for="g in games" :key="g.id" class="libraryCard">
       <button
         class="libraryCard__favorite"
@@ -104,7 +104,7 @@ function thumbUrl(g) {
         </div>
       </button>
     </article>
-  </section>
+  </TransitionGroup>
   <div v-else class="libraryEmpty">{{ query ? '검색어에 맞는 게임 템플릿이 없어요.' : '표시할 게임 템플릿이 없어요.' }}</div>
 </template>
 
@@ -139,6 +139,7 @@ function thumbUrl(g) {
   gap: 12px;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
   transition: transform 0.16s ease, background 0.16s ease;
+  will-change: transform, opacity;
 }
 .libraryCard:hover {
   background: rgba(70, 70, 70, 0.96);
@@ -156,8 +157,8 @@ function thumbUrl(g) {
 }
 .libraryCard__favorite {
   position: absolute;
-  top: 12px;
-  right: 12px;
+  bottom: 24px;
+  right: 14px;
   width: 34px;
   height: 34px;
   border-radius: 999px;
@@ -206,6 +207,24 @@ function thumbUrl(g) {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.libraryCard-move,
+.libraryCard-enter-active,
+.libraryCard-leave-active {
+  transition: transform 280ms ease, opacity 220ms ease;
+}
+
+.libraryCard-enter-from,
+.libraryCard-leave-to {
+  opacity: 0;
+  transform: translateY(10px) scale(0.985);
+}
+
+.libraryCard-leave-active {
+  position: absolute;
+  width: calc(100% - 0px);
+  pointer-events: none;
+}
+
 .libraryEmpty {
   padding: 20px 0;
   color: rgba(255, 255, 255, 0.62);