릴리스: v1.2.67 홈 즐겨찾기 재정렬 애니메이션 추가

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