릴리스: v1.4.7 컬렉션 레이아웃 정리와 topics 경로 1차

2026-04-02 18:47:37 +09:00
parent 20955e277c
commit de640de4a1
7 changed files with 38 additions and 78 deletions
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,9 @@
 # 의사결정 이력

+## 2026-04-02 v1.4.7
+- 주제 상세 컬렉션 화면도 즐겨찾기·나의 티어표와 같은 `pageHead` 문법으로 맞춰야, 네비게이션으로 이동하는 주요 화면들의 리듬이 더 자연스럽다고 판단했다.
+- 라우트 전환은 한 번에 `/games`를 없애기보다, 먼저 `/topics`를 기본 진입 경로로 세우고 기존 `/games`는 alias로 유지하는 점진 전환이 더 안전하다고 정리했다.
+
 ## 2026-04-02 v1.4.6
 - 내부 리네이밍 2단계는 관리자 화면처럼 상태와 액션이 많은 영역부터 정리해 두는 편이, 이후 `/games` 라우트와 API 계층을 손볼 때 위험을 줄이는 데 더 유리하다고 판단했다.

--- a/docs/todo.md
+++ b/docs/todo.md
@@ -1,6 +1,8 @@
 # 할 일 및 이슈

 ## 단기 확인
+- 주제 상세 컬렉션 화면은 `pageHead` 공통 레이아웃과 `/topics` 기본 경로로 옮겼으므로, 직접 진입·뒤로가기·검색 후 재진입 시 주소와 헤더 흐름이 자연스러운지 한 번 더 QA한다.
+- `/topics/:gameId`를 기본 경로로 세우고 `/games/:gameId`는 alias로 남겼으므로, 다음 단계에서는 에디터/검색/공유 흐름에서 어떤 링크를 새 경로로 더 전환할지 범위를 정한다.
 - 내부 리네이밍 2단계로 관리자 `selectedTemplate / templates / loadTemplate / refreshTemplates` 묶음까지 정리했으므로, 다음 단계에서는 `/games/:gameId` 라우트와 프런트 API 호출부를 어디까지 `topic/template` 의미로 감쌀지 범위를 먼저 정리한다.
 - 화면/문서 층의 용어 정리는 거의 마무리됐으므로, 다음 단계에서는 내부 `gameId / games` 모델을 실제로 옮길지, 아니면 라우트 alias/리다이렉트부터 둘지 점진 전환 순서를 정한다.
 - 관리자 화면까지 포함한 사용자 노출 `게임` 문구를 3차까지 정리했으므로, 실제 운영 흐름에서 뜨는 확인창/토스트/선택 모달까지 표현이 자연스러운지 한 번 더 QA한다.
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,9 @@
 # 업데이트 로그

+## 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` 기준으로 정리했다.
 - 요청 검토, 템플릿 생성 모달, 아이템 추가/정렬, 템플릿 선택 모달 흐름도 같은 기준으로 맞춰, 관리자 화면을 읽을 때 내부 이름과 사용자 노출 용어가 덜 어긋나게 정리했다.
--- a/frontend/src/router/index.js
+++ b/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 },
--- a/frontend/src/views/GameHubView.vue
+++ b/frontend/src/views/GameHubView.vue
@@ -83,26 +83,20 @@ function submitSearch() {
 </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">{{ topicName || topicId }}</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 +128,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 +146,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 +155,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 +350,11 @@ function submitSearch() {
    grid-template-columns: 1fr;
  }

-  .searchBar__input {
+  .toolbar {
+    width: 100%;
+  }
+
+  .input {
    min-width: 0;
    width: 100%;
  }
--- a/frontend/src/views/HomeView.vue
+++ b/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) {
--- a/frontend/src/views/TierEditorView.vue
+++ b/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 {