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

docs/update.md

@@ -1,5 +1,13 @@
 # 업데이트 로그
 
+## 2026-03-31 v1.2.67
+- 홈 화면 게임 템플릿 즐겨찾기 버튼 위치 변경은 유지하면서, 즐겨찾기 on/off 시 카드가 즉시 튀지 않고 부드럽게 재정렬되도록 이동/페이드 전환을 추가함.
+- 별 아이콘을 눌렀을 때 카드가 즐겨찾기 우선순위 위치로 자연스럽게 이동해 전체 라이브러리 전환감이 덜 거칠게 보이도록 보정함.
+
+## 2026-03-31 v1.2.66
+- 내 티어표 카드 하단의 큰 삭제 버튼은 제거하고, 삭제는 상세 편집 화면에서만 하도록 흐름을 단순화함.
+- 내 티어표 카드 그리드를 고정 4/3/2열에서 `auto-fit` 기반 최소 폭 카드로 바꾸고, 제목/메타가 좁은 화면에서도 말줄임과 유연한 폭 계산을 유지하도록 보정함.
+
 ## 2026-03-31 v1.2.65
 - 에디터 옵션 토글의 라벨과 스위치 순서를 바꾼 뒤 체크 상태 셀렉터가 끊긴 문제를 보정해, 왼쪽 라벨·오른쪽 스위치 배치에서도 정상 동작하도록 수정함.
 - 왼쪽 사이드 축소 상태 검색은 전용 모달의 기본 스타일이 빠져 있던 문제를 복구해, 다시 중앙 상단 검색 오버레이로 열리도록 정리함.

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

frontend/src/views/MyTierListsView.vue

@@ -54,18 +54,6 @@ function openList(t) {
   router.push(`/editor/${t.gameId}/${t.id}`)
 }
 
-async function removeList(t) {
-  error.value = ''
-  try {
-    const ok = window.confirm(`"${t.title}" 티어표를 삭제할까요?`)
-    if (!ok) return
-    await api.deleteTierList(t.id)
-    myLists.value = myLists.value.filter((entry) => entry.id !== t.id)
-    toast.success('티어표를 삭제했어요.')
-  } catch (e) {
-    error.value = '티어표 삭제에 실패했어요.'
-  }
-}
 </script>
 
 <template>
@@ -101,7 +89,6 @@ async function removeList(t) {
               </div>
             </div>
           </button>
-          <button class="link link--danger" @click="removeList(t)">삭제</button>
         </article>
       </div>
     </div>
@@ -115,25 +102,17 @@ async function removeList(t) {
   border-radius: 0;
   padding: 0;
 }
-.link {
-  padding: 10px 12px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(255, 255, 255, 0.06);
-  color: rgba(255, 255, 255, 0.92);
-  cursor: pointer;
-  font-weight: 800;
-}
 .empty {
   opacity: 0.75;
 }
 .list {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 18px;
 }
 .boardCard {
   display: grid;
+  min-width: 0;
   border-radius: 22px;
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: rgba(62, 62, 62, 0.82);
@@ -184,30 +163,40 @@ async function removeList(t) {
   border-radius: 18px;
 }
 .boardCard__title {
-  font-weight: 900;
+  flex: 1 1 auto;
   min-width: 0;
+  font-weight: 900;
   font-size: 18px;
-  white-space: nowrap;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
   overflow: hidden;
-  text-overflow: ellipsis;
 }
 .boardCard__head {
   padding: 16px 18px 18px;
   display: grid;
-  gap: 6px;
+  gap: 8px;
+  min-width: 0;
 }
 .boardCard__titleRow,
 .boardCard__metaRow {
   display: flex;
   gap: 10px;
+  min-width: 0;
   align-items: center;
   justify-content: space-between;
 }
 
+.boardCard__titleRow {
+  align-items: flex-start;
+}
+
 .boardCard__metaRow {
   align-items: flex-end;
 }
 .boardCard__author {
+  flex: 1 1 auto;
   min-width: 0;
   display: inline-flex;
   gap: 7px;
@@ -246,21 +235,6 @@ async function removeList(t) {
 .boardCard__date {
   font-size: 10px;
 }
-.link--danger {
-  background: rgba(239, 68, 68, 0.14);
-  border-color: rgba(239, 68, 68, 0.28);
-  margin: 0 18px 18px;
-}
-@media (max-width: 1400px) {
-  .list {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-@media (max-width: 1024px) {
-  .list {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
 @media (max-width: 720px) {
   .list {
     grid-template-columns: 1fr;