검색 동선 통일

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;