검색 동선 통일

frontend/src/views/FavoriteTierListsView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
@@ -12,10 +12,9 @@ const route = useRoute()
 const toast = useToast()
 
 const favorites = ref([])
-const query = ref('')
 const sort = ref('favorited')
-const busyTierListId = ref('')
 const isListView = computed(() => route.query.view === 'list')
+const query = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim() : ''))
 
 function fmt(ts) {
   return new Date(ts).toLocaleDateString(undefined, {
@@ -55,23 +54,8 @@ function openTierList(tierList) {
   router.push(editorPath(tierList.topicSlug || tierList.topicId, tierList.id))
 }
 
-async function removeFavorite(tierListId) {
-  if (!tierListId || busyTierListId.value) return
-  busyTierListId.value = tierListId
-  const original = favorites.value.slice()
-  favorites.value = favorites.value.filter((tierList) => tierList.id !== tierListId)
-  try {
-    await api.unfavoriteTierList(tierListId)
-    toast.success('즐겨찾기에서 제거했어요.')
-  } catch (error) {
-    favorites.value = original
-    toast.error('즐겨찾기 해제에 실패했어요.')
-  } finally {
-    busyTierListId.value = ''
-  }
-}
-
 onMounted(loadFavorites)
+watch([query, sort], loadFavorites)
 </script>
 
 <template>
@@ -83,27 +67,17 @@ onMounted(loadFavorites)
         <div class="pageHead__desc">마음에 드는 티어표를 모아보고, 원하는 기준으로 정렬할 수 있어요.</div>
       </div>
       <div class="pageHead__aside toolbar">
-        <input v-model="query" class="input" placeholder="제목, 주제, 작성자 검색" @keydown.enter.prevent="loadFavorites" />
-        <select v-model="sort" class="select" @change="loadFavorites">
+        <select v-model="sort" class="select">
           <option value="favorited">즐겨찾기한 순</option>
           <option value="updated">최신 업데이트순</option>
           <option value="favorites">인기순</option>
         </select>
-        <button class="btn" @click="loadFavorites">검색</button>
       </div>
     </div>
 
     <div v-if="favorites.length === 0" class="empty">즐겨찾기한 티어표가 없어요.</div>
     <div v-else class="list" :class="{ 'list--table': isListView }">
       <article v-for="tierList in favorites" :key="tierList.id" class="boardCard" :class="{ 'boardCard--list': isListView }">
-        <button
-          class="boardCard__favoriteAction"
-          type="button"
-          :disabled="!!busyTierListId"
-          @click.stop="removeFavorite(tierList.id)"
-        >
-          {{ busyTierListId === tierList.id ? '처리 중...' : '즐겨찾기 해제' }}
-        </button>
         <button class="boardCard__body" :class="{ 'boardCard__body--list': isListView }" @click="openTierList(tierList)">
           <div class="boardCard__thumbWrap">
             <img v-if="tierListThumbnailUrl(tierList)" class="boardCard__thumb" :src="tierListThumbnailUrl(tierList)" :alt="tierList.title" draggable="false" />
@@ -143,15 +117,6 @@ onMounted(loadFavorites)
   background: var(--theme-surface-soft);
   color: var(--theme-text);
 }
-.btn {
-  padding: 11px 13px;
-  border-radius: 14px;
-  border: 1px solid var(--theme-border);
-  background: var(--theme-surface-soft-2);
-  color: var(--theme-text);
-  font-weight: 800;
-  cursor: pointer;
-}
 .empty {
   opacity: 0.76;
 }
@@ -192,25 +157,6 @@ onMounted(loadFavorites)
   width: 100%;
   overflow: hidden;
 }
-.boardCard__favoriteAction {
-  position: absolute;
-  top: 14px;
-  right: 14px;
-  z-index: 1;
-  min-height: 32px;
-  padding: 0 12px;
-  border-radius: 999px;
-  border: 1px solid color-mix(in srgb, var(--theme-danger-border) 70%, var(--theme-border));
-  background: color-mix(in srgb, var(--theme-surface) 92%, var(--theme-danger-bg));
-  color: var(--theme-text);
-  font-size: 12px;
-  font-weight: 800;
-  cursor: pointer;
-}
-.boardCard__favoriteAction:disabled {
-  cursor: default;
-  opacity: 0.72;
-}
 .boardCard__thumbWrap {
   min-width: 0;
   width: 100%;
@@ -355,9 +301,7 @@ onMounted(loadFavorites)
   .toolbar {
     width: 100%;
   }
-  .input,
-  .select,
-  .btn {
+  .select {
     width: 100%;
   }
 }