검색 동선 통일

2026-04-07 14:41:20 +09:00
parent a952d2a062
commit ede348be96
9 changed files with 40 additions and 129 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -604,6 +604,13 @@ function handleLeftRailSearch() {
 function submitGlobalSearch() {
  const query = (searchQuery.value || '').trim()
  isCollapsedSearchOpen.value = false
+  if (['home', 'templates', 'topicHub', 'followingFeed', 'favorites'].includes(String(route.name || ''))) {
+    const nextQuery = { ...route.query }
+    if (query) nextQuery.q = query
+    else delete nextQuery.q
+    router.push({ path: route.path, query: nextQuery })
+    return
+  }
  router.push(route.name === 'templates' ? templatesPath(query) : homePath(query))
 }

--- a/frontend/src/views/FavoriteTierListsView.vue
+++ b/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%;
  }
 }
--- a/frontend/src/views/FollowingFeedView.vue
+++ b/frontend/src/views/FollowingFeedView.vue
@@ -12,7 +12,7 @@ const route = useRoute()
 const toast = useToast()

 const tierLists = ref([])
-const query = ref('')
+const query = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim() : ''))
 const isLoading = ref(false)
 const error = ref('')
 const brokenThumbnailIds = ref({})
@@ -78,6 +78,7 @@ function openAuthorProfile(tierList) {
 }

 onMounted(loadFollowingFeed)
+watch(query, loadFollowingFeed)
 </script>

 <template>
@@ -88,10 +89,6 @@ onMounted(loadFollowingFeed)
        <h2 class="pageHead__title">팔로우 피드</h2>
        <div class="pageHead__desc">팔로우한 작성자가 공개한 티어표를 최신 업데이트순으로 모아봅니다.</div>
      </div>
-      <div class="pageHead__aside toolbar">
-        <input v-model="query" class="input" placeholder="제목, 주제, 작성자 검색" @keydown.enter.prevent="loadFollowingFeed" />
-        <button class="btn" :disabled="isLoading" @click="loadFollowingFeed">{{ isLoading ? '검색중...' : '검색' }}</button>
-      </div>
    </section>

    <section class="panel">
@@ -146,28 +143,6 @@ onMounted(loadFollowingFeed)
  border-radius: 0;
  padding: 0;
 }
-.toolbar {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-.input {
-  min-width: 240px;
-  padding: 11px 13px;
-  border-radius: 14px;
-  border: 1px solid var(--theme-border);
-  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.75;
 }
@@ -352,9 +327,5 @@ onMounted(loadFollowingFeed)
    padding: 16px 18px 0;
  }

-  .input {
-    min-width: 0;
-    width: 100%;
-  }
 }
 </style>
--- a/frontend/src/views/TopicHubView.vue
+++ b/frontend/src/views/TopicHubView.vue
@@ -12,11 +12,11 @@ const router = useRouter()
 const auth = useAuthStore()

 const topicId = computed(() => route.params.topicId)
+const query = computed(() => (typeof route.query.q === 'string' ? route.query.q.trim() : ''))
 const topicName = ref('')
 const featuredTierLists = ref([])
 const tierLists = ref([])
 const error = ref('')
-const query = ref('')
 const brokenThumbnailIds = ref({})
 const isTopicLoading = ref(false)
 const isListView = computed(() => route.query.view === 'list')
@@ -84,12 +84,8 @@ function openTierList(id) {
  router.push(editorPath(topicId.value, id))
 }

-function submitSearch() {
-  loadTierLists()
-}
-
 watch(
-  topicId,
+  [topicId, query],
  () => {
    topicName.value = ''
    error.value = ''
@@ -107,10 +103,6 @@ watch(
      <h2 class="pageHead__title">{{ topicTitle }}</h2>
      <div class="pageHead__desc">이 주제의 공개 티어표를 같은 카드 레이아웃으로 살펴보고 이어서 새 티어표를 만들 수 있어요.</div>
    </div>
-    <div class="pageHead__aside toolbar">
-      <input v-model="query" class="input" placeholder="제목 또는 작성자 검색" @keydown.enter.prevent="submitSearch" />
-      <button class="btn" @click="submitSearch">검색</button>
-    </div>
    </section>

    <div v-if="error" class="error">{{ error }}</div>
@@ -245,28 +237,6 @@ watch(
 .sectionLabel {
  margin-bottom: 14px;
 }
-.toolbar {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-.input {
-  min-width: 240px;
-  padding: 11px 13px;
-  border-radius: 14px;
-  border: 1px solid var(--theme-border);
-  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;
-}
 .error {
  margin: 10px 0 14px;
  padding: 10px 12px;