릴리스: v1.4.8 주제 헤더 안정화와 검색 헤더 통일

docs/history.md

@@ -1,5 +1,13 @@
 # 의사결정 이력
 
+## 2026-04-02 v1.4.8
+- 주제 상세 화면 제목은 내부 ID를 잠깐 보여주는 것보다, 로딩 문구를 거쳐 실제 이름으로 자연스럽게 바뀌는 편이 사용자 체감상 더 안정적이라고 판단했다.
+- 주요 목록 화면은 `pageHead` 문법을 계속 통일해 두는 편이, 이후 검색/필터 툴바를 더 붙이더라도 구조를 예측하기 쉽다고 판단했다.
+
+## 2026-04-02 v1.4.7
+- 주제 상세 컬렉션 화면도 즐겨찾기·나의 티어표와 같은 `pageHead` 문법으로 맞춰야, 네비게이션으로 이동하는 주요 화면들의 리듬이 더 자연스럽다고 판단했다.
+- 라우트 전환은 한 번에 `/games`를 없애기보다, 먼저 `/topics`를 기본 진입 경로로 세우고 기존 `/games`는 alias로 유지하는 점진 전환이 더 안전하다고 정리했다.
+
 ## 2026-04-02 v1.4.6
 - 내부 리네이밍 2단계는 관리자 화면처럼 상태와 액션이 많은 영역부터 정리해 두는 편이, 이후 `/games` 라우트와 API 계층을 손볼 때 위험을 줄이는 데 더 유리하다고 판단했다.
 

docs/todo.md

@@ -1,6 +1,10 @@
 # 할 일 및 이슈
 
 ## 단기 확인
+- 주제 상세 화면 제목은 ID fallback 대신 로딩 문구를 쓰도록 바꿨으므로, 직접 진입·뒤로가기·다른 주제로 연속 이동할 때 헤더가 깜빡이거나 이전 제목을 잠깐 유지하지 않는지 한 번 더 QA한다.
+- 검색 결과 화면도 `pageHead` 구조로 맞췄으므로, 주요 목록 화면들 간 상단 여백과 타이포 리듬이 자연스러운지 한 번 더 비교 QA한다.
+- 주제 상세 컬렉션 화면은 `pageHead` 공통 레이아웃과 `/topics` 기본 경로로 옮겼으므로, 직접 진입·뒤로가기·검색 후 재진입 시 주소와 헤더 흐름이 자연스러운지 한 번 더 QA한다.
+- `/topics/:gameId`를 기본 경로로 세우고 `/games/:gameId`는 alias로 남겼으므로, 다음 단계에서는 에디터/검색/공유 흐름에서 어떤 링크를 새 경로로 더 전환할지 범위를 정한다.
 - 내부 리네이밍 2단계로 관리자 `selectedTemplate / templates / loadTemplate / refreshTemplates` 묶음까지 정리했으므로, 다음 단계에서는 `/games/:gameId` 라우트와 프런트 API 호출부를 어디까지 `topic/template` 의미로 감쌀지 범위를 먼저 정리한다.
 - 화면/문서 층의 용어 정리는 거의 마무리됐으므로, 다음 단계에서는 내부 `gameId / games` 모델을 실제로 옮길지, 아니면 라우트 alias/리다이렉트부터 둘지 점진 전환 순서를 정한다.
 - 관리자 화면까지 포함한 사용자 노출 `게임` 문구를 3차까지 정리했으므로, 실제 운영 흐름에서 뜨는 확인창/토스트/선택 모달까지 표현이 자연스러운지 한 번 더 QA한다.

docs/update.md

@@ -1,5 +1,13 @@
 # 업데이트 로그
 
+## 2026-04-02 v1.4.8
+- 주제 상세 컬렉션 화면은 제목을 `topicId` fallback으로 먼저 노출하지 않도록 바꾸고, 주제 전환 시에는 로딩 문구를 거쳐 실제 이름으로 자연스럽게 바뀌게 정리했다.
+- 검색 결과 화면도 공통 `pageHead` 문법으로 맞춰 주요 목록 화면들의 상단 리듬을 한 번 더 통일했다.
+
+## 2026-04-02 v1.4.7
+- 주제 선택 뒤에 들어가는 `Collection` 화면을 공통 `pageHead` 레이아웃으로 다시 맞추고, 검색 입력을 즐겨찾기 화면처럼 상단 우측 툴바로 정리했다.
+- `공개 티어표` 보조 설명 줄은 제거해 헤더 밀도를 줄였고, 사용자 진입 경로는 `/topics/:gameId`를 기본으로 전환하면서 기존 `/games/:gameId`는 alias로 유지했다.
+
 ## 2026-04-02 v1.4.6
 - 관리자 내부 리네이밍 2단계로 `AdminView`와 관련 composable/component의 핵심 상태명을 `selectedTemplate / templates / loadTemplate / refreshTemplates / createTemplate` 기준으로 정리했다.
 - 요청 검토, 템플릿 생성 모달, 아이템 추가/정렬, 템플릿 선택 모달 흐름도 같은 기준으로 맞춰, 관리자 화면을 읽을 때 내부 이름과 사용자 노출 용어가 덜 어긋나게 정리했다.

frontend/src/router/index.js

@@ -16,7 +16,7 @@ export function createRouter() {
     history: createWebHistory(),
     routes: [
       { path: '/', name: 'home', component: HomeView },
-      { path: '/games/:gameId', name: 'gameHub', component: GameHubView },
+      { path: '/topics/:gameId', alias: ['/games/:gameId'], name: 'gameHub', component: GameHubView },
       { path: '/editor/:gameId/new', name: 'newEditor', component: TierEditorView },
       { path: '/editor/:gameId/:tierListId', name: 'editEditor', component: TierEditorView },
       { path: '/login', name: 'login', component: LoginView },

frontend/src/views/GameHubView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
@@ -15,7 +15,9 @@ const tierLists = ref([])
 const error = ref('')
 const query = ref('')
 const brokenThumbnailIds = ref({})
+const isTopicLoading = ref(false)
 const isListView = computed(() => route.query.view === 'list')
+const topicTitle = computed(() => topicName.value || (isTopicLoading.value ? '주제 불러오는 중...' : ''))
 
 function fmt(ts) {
   return new Date(ts).toLocaleDateString(undefined, {
@@ -47,21 +49,20 @@ function handleThumbnailError(tierListId) {
   brokenThumbnailIds.value = { ...brokenThumbnailIds.value, [tierListId]: true }
 }
 
-onMounted(async () => {
-  await loadTierLists()
-})
-
 async function loadTierLists() {
+  isTopicLoading.value = true
   try {
     const [gameRes, listRes] = await Promise.all([
       api.getGame(topicId.value),
       api.searchPublicTierLists(topicId.value, query.value),
     ])
-    topicName.value = gameRes.game?.name || topicId.value
+    topicName.value = gameRes.game?.name || ''
     brokenThumbnailIds.value = {}
     tierLists.value = listRes.tierLists || []
   } catch (e) {
     error.value = '주제 정보를 불러오지 못했어요.'
+  } finally {
+    isTopicLoading.value = false
   }
 }
 
@@ -80,29 +81,33 @@ function openTierList(id) {
 function submitSearch() {
   loadTierLists()
 }
+
+watch(
+  topicId,
+  () => {
+    topicName.value = ''
+    error.value = ''
+    loadTierLists()
+  },
+  { immediate: true }
+)
 </script>
 
 <template>
-  <section class="dashboardHero">
-    <div class="dashboardHero__left">
-      <div class="dashboardHero__eyebrow">Collection</div>
-      <h2 class="dashboardHero__title">{{ topicName || topicId }}</h2>
-      <p class="dashboardHero__desc">이 주제의 공개 티어표를 탐색하고, 바로 새 보드를 만들어 같은 흐름으로 이어갈 수 있어요.</p>
+  <section class="pageHead">
+    <div class="pageHead__main">
+      <div class="pageHead__eyebrow">Collection</div>
+      <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>
   <section class="panel">
-    <div class="panel__head">
-      <div>
-        <div class="panel__title">공개 티어표</div>
-        <div class="panel__sub">제목이나 작성자로 빠르게 좁혀볼 수 있어요.</div>
-      </div>
-      <div class="searchBar">
-        <input v-model="query" class="searchBar__input" placeholder="제목 또는 작성자 검색" @keydown.enter.prevent="submitSearch" />
-        <button class="searchBar__button" @click="submitSearch">검색</button>
-      </div>
-    </div>
     <div v-if="tierLists.length === 0" class="empty">아직 공개 티어표가 없어요.</div>
     <div v-else class="list" :class="{ 'list--table': isListView }">
       <article v-for="t in tierLists" :key="t.id" class="boardCard" :class="{ 'boardCard--list': isListView }">
@@ -134,72 +139,17 @@ function submitSearch() {
 </template>
 
 <style scoped>
-.dashboardHero {
-  display: flex;
-  gap: 18px;
-  align-items: flex-start;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  padding: 6px 2px 18px;
-}
-.dashboardHero__left {
-  display: grid;
-  gap: 8px;
-}
-.dashboardHero__eyebrow {
-  font-size: 12px;
-  color: var(--theme-text-soft);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-.dashboardHero__title {
-  margin: 4px 0 6px;
-  font-size: 32px;
-  letter-spacing: -0.04em;
-  color: var(--theme-text-strong);
-}
-.dashboardHero__desc {
-  margin: 0;
-  color: var(--theme-text-muted);
-  max-width: 720px;
-}
 .panel {
-  /* border: 1px solid var(--theme-border); */
   background: transparent;
   border-radius: 0;
   padding: 0;
 }
-.error {
-  margin: 10px 0 14px;
-  padding: 10px 12px;
-  border-radius: 12px;
-  border: 1px solid var(--theme-danger-border);
-  background: var(--theme-danger-bg);
-}
-.panel__title {
-  font-weight: 800;
-  font-size: 18px;
-}
-.panel__sub {
-  margin-top: 6px;
-  color: var(--theme-text-muted);
-  font-size: 13px;
-}
-.panel__head {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  margin-bottom: 18px;
-}
-.searchBar {
+.toolbar {
   display: flex;
   gap: 10px;
-  align-items: center;
   flex-wrap: wrap;
 }
-.searchBar__input {
+.input {
   min-width: 240px;
   padding: 11px 13px;
   border-radius: 14px;
@@ -207,8 +157,8 @@ function submitSearch() {
   background: var(--theme-surface-soft);
   color: var(--theme-text);
 }
-.searchBar__button {
-  padding: 11px 14px;
+.btn {
+  padding: 11px 13px;
   border-radius: 14px;
   border: 1px solid var(--theme-border);
   background: var(--theme-surface-soft-2);
@@ -216,6 +166,13 @@ function submitSearch() {
   font-weight: 800;
   cursor: pointer;
 }
+.error {
+  margin: 10px 0 14px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--theme-danger-border);
+  background: var(--theme-danger-bg);
+}
 .empty {
   opacity: 0.75;
 }
@@ -404,7 +361,11 @@ function submitSearch() {
     grid-template-columns: 1fr;
   }
 
-  .searchBar__input {
+  .toolbar {
+    width: 100%;
+  }
+
+  .input {
     min-width: 0;
     width: 100%;
   }

frontend/src/views/HomeView.vue

@@ -46,7 +46,7 @@ onMounted(loadTemplates)
 watch(() => auth.user?.id, loadTemplates)
 
 function openTopic(templateId) {
-  router.push(`/games/${templateId}`)
+  router.push(`/topics/${templateId}`)
 }
 
 async function toggleFavorite(template, event) {

frontend/src/views/SearchResultsView.vue

@@ -65,13 +65,13 @@ watch(
 
 <template>
   <section class="wrap">
-    <div class="head">
-      <div>
-        <div class="head__eyebrow">검색</div>
-        <h2 class="title">전체 티어표 검색</h2>
-        <div class="desc">공개된 모든 티어표를 제목과 작성자 기준으로 찾아볼 수 있어요.</div>
+    <section class="pageHead">
+      <div class="pageHead__main">
+        <div class="pageHead__eyebrow">Search</div>
+        <h2 class="pageHead__title">전체 티어표 검색</h2>
+        <div class="pageHead__desc">공개된 티어표를 제목과 작성자 기준으로 다시 찾아볼 수 있어요.</div>
       </div>
-    </div>
+    </section>
 
     <div v-if="error" class="error">{{ error }}</div>
     <div v-else-if="loading" class="empty">검색 중이에요.</div>
@@ -110,30 +110,6 @@ watch(
   display: grid;
   gap: 18px;
 }
-.head {
-  display: flex;
-  gap: 14px;
-  justify-content: space-between;
-  align-items: flex-end;
-  flex-wrap: wrap;
-  padding: 6px 2px 8px;
-}
-.head__eyebrow {
-  font-size: 11px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--theme-text-soft);
-}
-.title {
-  margin: 4px 0 0;
-  font-size: 32px;
-  color: var(--theme-text-strong);
-  letter-spacing: -0.04em;
-}
-.desc {
-  margin-top: 6px;
-  color: var(--theme-text-muted);
-}
 .error {
   margin: 0 0 8px;
   padding: 10px 12px;

frontend/src/views/TierEditorView.vue

@@ -793,7 +793,7 @@ async function confirmDeleteTierList() {
     await api.deleteTierList(currentTierListId)
     closeDeleteModal()
     toast.success('티어표를 삭제했어요.')
-    router.push(templateId.value === 'freeform' ? '/me' : `/games/${templateId.value}`)
+    router.push(templateId.value === 'freeform' ? '/me' : `/topics/${templateId.value}`)
   } catch (e) {
     error.value = '티어표 삭제에 실패했어요.'
   } finally {