에디터 헤더 규칙 정리

docs/history.md

@@ -1,5 +1,10 @@
 # 의사결정 이력
 
+## 2026-04-07 v1.1.27
+- 티어표 화면 헤더도 다른 주요 페이지와 같은 `eyebrow / title / desc` 문법을 따라야 전체 앱 톤이 정리된다고 판단했다.
+- 편집 가능한 화면과 보기 전용 화면은 헤더에서 전달해야 할 정보가 다르므로, 같은 문법은 유지하되 내용 규칙은 분리하는 편이 맞다고 정리했다. 편집 화면은 “무엇을 만들고 있는가”, 보기 화면은 “무엇을 보고 있는가”가 더 중요하다.
+- 템플릿 이동 액션은 제목보다 아이브로우가 더 자연스럽다. 제목은 티어표 자체 이름으로 남겨두고, 상위 맥락인 템플릿 이름만 링크 역할을 맡기는 쪽이 이해하기 쉽다고 정리했다.
+
 ## 2026-04-07 v1.1.26
 - `주제 불러오는 중...` 같은 임시 문구는 스켈레톤보다 더 거슬리게 보일 수 있으므로, 짧은 로딩 구간에서는 텍스트 fallback 대신 빈 자리 + 스켈레톤으로 처리하는 편이 낫다고 정리했다.
 - 저장용 랜덤 제목이나 내부 `tierListId`는 시스템 식별자 역할일 뿐 화면 표시용 카피가 아니므로, 사용자가 보는 제목 fallback 으로 직접 노출하지 않는 쪽이 맞다고 정리했다.

docs/map.md

@@ -17,7 +17,7 @@
 
 ## `/editor/:topicId/new`, `/editor/:topicId/:tierListId`
 - 화면 파일: `frontend/src/views/TierEditorView.vue`
-- 역할: 주제 slug 기반 에디터 진입, 티어 그룹 편집, 티어 행 추가/삭제, 보드 옆 아이템 풀에서 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 아이템 클릭 선택 후 셀/풀 재배치, 아이템 우클릭 메뉴 기반 복제본 생성, 상단 템플릿 제목 클릭 시 해당 주제 허브로 이동, 공통 오른쪽 레일 안에 직접 배치되는 우측 편집 섹션에서 티어표 제목/설명/대표 썸네일/공개 여부/저장 제어와 커스텀 아이템 이름 정리, 읽기 전용 상태의 즐겨찾기 단독 CTA, PNG 다운로드, 저장된 티어표 기준 템플릿 등록/업데이트 요청, 댓글 카드 표시, 데이터가 준비되기 전에는 편집 모드/프리뷰 모드 모두 전용 스켈레톤 레이아웃을 먼저 보여주고, 저장용 랜덤 제목이나 내부 ID는 화면 표시용 제목으로 직접 노출하지 않으며, `?preview=1` 진입 시 공통 앱 셸은 유지한 채 중앙 본문에서 완성본 프리뷰와 하단 댓글 카드를 렌더링하며, 우측 뷰어 카드(`공유 티어표 보기`)는 스폰서 카드 바로 아래에서 유지하고 즐겨찾기 CTA도 함께 노출
+- 역할: 주제 slug 기반 에디터 진입, 티어 그룹 편집, 티어 행 추가/삭제, 보드 옆 아이템 풀에서 관리자 아이템/커스텀 아이템 다중 드래그 앤 드롭 업로드, 아이템 클릭 선택 후 셀/풀 재배치, 아이템 우클릭 메뉴 기반 복제본 생성, 헤더는 공통 `pageHead` 문법을 따르며 편집 가능 상태에서는 `NEW/EDIT + 템플릿 이름 + 작업 가이드`, 보기 전용 상태에서는 `템플릿 이름 + 티어표 제목 + 설명` 구조를 사용하고 아이브로우 클릭 시 해당 주제 허브로 이동, 공통 오른쪽 레일 안에 직접 배치되는 우측 편집 섹션에서 티어표 제목/설명/대표 썸네일/공개 여부/저장 제어와 커스텀 아이템 이름 정리, 읽기 전용 상태의 즐겨찾기 단독 CTA, PNG 다운로드, 저장된 티어표 기준 템플릿 등록/업데이트 요청, 댓글 카드 표시, 데이터가 준비되기 전에는 편집 모드/프리뷰 모드 모두 전용 스켈레톤 레이아웃을 먼저 보여주고, 저장용 랜덤 제목이나 내부 ID는 화면 표시용 제목으로 직접 노출하지 않으며, `?preview=1` 진입 시 공통 앱 셸은 유지한 채 중앙 본문에서 완성본 프리뷰와 하단 댓글 카드를 렌더링하며, 우측 뷰어 카드(`공유 티어표 보기`)는 스폰서 카드 바로 아래에서 유지하고 즐겨찾기 CTA도 함께 노출
 - 연동 API: `GET /api/topics/:topicId`, `GET /api/tierlists/:id`, `GET /api/tierlists/:id/comments`, `POST /api/tierlists/:id/comments`, `DELETE /api/tierlists/:id/comments/:commentId`, `POST /api/tierlists/:id/favorite`, `DELETE /api/tierlists/:id/favorite`, `POST /api/tierlists/thumbnail`, `POST /api/tierlists/custom-items`, `POST /api/tierlists`, `POST /api/tierlists/template-request`
 
 ## `/comments`

docs/spec.md

@@ -97,8 +97,9 @@
   - 공통 상단 토글 버튼은 Teleport로 이동한 로컬 편집 패널의 접힘/펼침 상태와도 연결되어, 우측 패널을 숨기면 중앙 보드 영역이 확장된다.
   - 편집 모드와 `preview=1` 뷰어 모드 모두 제목/보드/우측 패널 데이터가 준비되기 전까지는 실제 화면 대신 전용 스켈레톤 레이아웃을 먼저 보여준다.
   - 저장용 랜덤 제목은 내부 저장/도배 방지용으로만 쓰고, 화면 표시용 제목 fallback 에서는 내부 `tierListId`나 랜덤 문자열을 직접 노출하지 않는다.
+  - 헤더 문법은 공통 `pageHead` 흐름을 따르되, 편집 가능 상태에서는 `NEW/EDIT + 현재 템플릿 이름 + 작업 가이드`, 보기 전용 상태에서는 `템플릿 이름 + 티어표 제목 + 티어표 설명` 규칙을 사용한다.
   - 제목, 설명, 대표 썸네일, 공개 여부, 저장/삭제/요청 액션을 우측 로컬 패널에 배치한다. 템플릿 등록/업데이트 요청 버튼은 저장된 티어표가 있을 때만 노출하며, 제목이 비어 있는 상태에서 저장하면 랜덤 고유 제목을 먼저 부여해 저장본을 만든다.
-  - 상단 템플릿 제목은 해당 주제 허브로 이동하는 액션으로 사용하며, 미저장 변경이 있으면 이동 전에 확인 모달을 띄운다.
+  - 보기 전용 상태에서 상단 아이브로우(템플릿 이름)는 해당 주제 허브로 이동하는 액션으로 사용하며, 편집 중 미저장 변경이 있으면 이동 전에 확인 모달을 띄운다.
   - 보드 바로 옆에는 드래그용 아이템 풀을 별도 패널로 두고, 커스텀 아이템 이름 정리 목록은 우측 편집 패널 내부에서 관리한다.
 - 관리자 화면
   - 공통 우측 패널 대신 전용 로컬 운영 패널을 사용한다.

docs/todo.md

@@ -1,6 +1,9 @@
 # 할 일 및 이슈
 
 ## 단기 확인
+- `v1.1.27` 이후 편집 가능한 티어표 화면에서 헤더가 `NEW/EDIT → 템플릿 이름 → 작업 가이드` 순서로 자연스럽게 보이는지 확인한다.
+- `v1.1.27` 이후 보기 전용 티어표 화면에서는 아이브로우만 템플릿 이동 링크로 동작하고, 제목은 더 이상 클릭 가능한 요소처럼 보이지 않는지 확인한다.
+- `v1.1.27` 이후 freeform 티어표도 헤더 제목이 비지 않고 `커스텀 티어표`로 안정적으로 보이는지 확인한다.
 - `v1.1.26` 이후 템플릿 카드 클릭 시 `주제 불러오는 중...` 문구가 더 이상 보이지 않고, 주제명 헤더 스켈레톤 뒤에 실제 이름이 자연스럽게 붙는지 확인한다.
 - `v1.1.26` 이후 템플릿 A에서 템플릿 B로 빠르게 연속 이동해도 이전 주제의 공개 티어표 카드가 잠깐 남지 않는지 확인한다.
 - `v1.1.26` 이후 저장 제목이 없는 티어표를 열 때 내부 ID나 자동 생성 문자열 대신 주제명 기반 표시 제목만 보이는지 확인한다.

docs/update.md

@@ -1,5 +1,13 @@
 # 업데이트 로그
 
+## 2026-04-07 v1.1.27
+- 티어표 편집 화면 헤더를 다른 주요 화면과 같은 `pageHead__main` 3단 문법으로 재구성했다. 이제 편집 가능한 화면도 `eyebrow / title / desc` 흐름을 그대로 따른다.
+- 보기 전용 티어표 화면은 `템플릿 이름 / 티어표 제목 / 티어표 설명` 규칙으로 정리했다. 기존처럼 제목 클릭으로 템플릿 화면으로 이동하지 않고, 아이브로우(템플릿 이름)만 클릭 이동 대상으로 바꾸고 hover/focus 스타일도 함께 넣었다.
+- 편집 가능한 티어표 화면은 제목/설명이 우측 패널에 따로 있는 점을 반영해 `NEW 또는 EDIT / 현재 템플릿 이름 / 작업 가이드 문구` 구조로 정리했다.
+- 커스텀 티어표(freeform)는 템플릿 이름이 비어도 `커스텀 티어표`라는 편집 헤더 제목이 보이도록 보정했다.
+- 내보내기용 제목도 사용자 표시용 제목 기준으로 맞춰, 제목이 비어 있는 티어표에서 내부 식별자나 랜덤 문자열이 직접 노출되지 않게 정리했다.
+- 확인: `npm run build`
+
 ## 2026-04-07 v1.1.26
 - 템플릿 주제 화면(`TopicHubView`)의 제목 fallback 문자열 `주제 불러오는 중...`을 제거했다. 이제 주제 데이터가 준비되기 전에는 실제 문구 대신 제목/설명 영역 스켈레톤을 보여준다.
 - 주제 전환 시 이전 템플릿의 공개 티어표 목록이 잠깐 남아 보이지 않도록, `topicName`, `featuredTierLists`, `tierLists`, `brokenThumbnailIds`를 먼저 비우고 다시 불러오게 정리했다.

frontend/src/views/TierEditorView.vue

@@ -173,6 +173,17 @@ const currentUserId = computed(() => auth.user?.id || '')
 const canSubmitTemplateCreateRequest = computed(() => !!templateRequestDraftTitle.value.trim() && !!templateRequestDraftDescription.value.trim())
 const canSubmitTemplateUpdateRequest = computed(() => !!templateRequestDraftTitle.value.trim() && !!templateRequestDraftDescription.value.trim())
 const templateRequestTargetLabel = computed(() => (templateId.value === 'freeform' ? '새로운 템플릿' : (templateName.value || templateId.value || '선택한 주제')))
+const editorEyebrowLabel = computed(() => (isNewTierList.value ? 'NEW' : 'EDIT'))
+const editorHeaderTitle = computed(() => {
+  const currentTemplateName = (templateName.value || '').trim()
+  if (currentTemplateName) return currentTemplateName
+  return templateId.value === 'freeform' ? '커스텀 티어표' : '티어표 만들기'
+})
+const editorHeaderDescription = computed(() =>
+  canEdit.value
+    ? '행/열 이름과 순서를 바꾸고 아이템을 드래그해서 배치할 수 있어요.'
+    : '공개된 티어표를 보는 중입니다. 로그인한 작성자만 수정할 수 있어요.'
+)
 const shareTierListUrl = computed(() => {
   const savedTierListId = persistedTierListId.value || (tierListId.value && tierListId.value !== 'new' ? tierListId.value : '')
   if (!savedTierListId) return ''
@@ -1482,7 +1493,16 @@ onUnmounted(() => {
     <header class="pageHead">
       <div class="pageHead__main">
         <div class="pageHead__eyebrow">Preview</div>
-        <h1 class="pageHead__title">{{ effectiveTitle }}</h1>
+        <button
+          class="pageHead__eyebrow pageHead__eyebrowButton"
+          type="button"
+          title="이 템플릿 화면으로 이동"
+          @click="openTemplateTopic"
+          @keydown.space.prevent="openTemplateTopic"
+        >
+          {{ templateName || templateId }}
+        </button>
+        <h1 class="pageHead__title">{{ displayTitle }}</h1>
         <p v-if="description" class="pageHead__desc">{{ description }}</p>
       </div>
     </header>
@@ -1709,24 +1729,10 @@ onUnmounted(() => {
   <section class="layout" :style="{ '--thumb-size': `${iconSize}px` }">
     <div class="editorMain">
       <section class="head">
-        <div class="editorMain__headCopy">
-          <button
-            class="editorMain__title editorMain__titleButton"
-            type="button"
-            title="이 템플릿 화면으로 이동"
-            @click="openTemplateTopic"
-            @keydown.space.prevent="openTemplateTopic"
-          >
-            {{ templateName || templateId }}
-          </button>
-          <div class="editorMain__subtitle">
-            <template v-if="canEdit">
-              행/열 이름과 순서를 바꾸고 아이템을 드래그해서 배치할 수 있어요.
-            </template>
-            <template v-else>
-              공개된 티어표를 보는 중입니다. 로그인한 작성자만 수정할 수 있어요.
-            </template>
-          </div>
+        <div class="pageHead__main">
+          <div class="pageHead__eyebrow">{{ editorEyebrowLabel }}</div>
+          <div class="pageHead__title">{{ editorHeaderTitle }}</div>
+          <div class="pageHead__desc">{{ editorHeaderDescription }}</div>
           <div v-if="sourceTierListId" class="editorMain__sourceNote">
             <span>원본</span>
             <button class="editorMain__sourceLink" type="button" @click="openSourceTierList">{{ copiedFromLabel }}</button>
@@ -1761,7 +1767,7 @@ onUnmounted(() => {
             </div>
           </div>
           <div ref="exportBoardEl" class="exportBoard" :class="{ 'exportBoard--active': isExporting }">
-            <div v-if="isExporting" class="exportBoard__title">{{ effectiveTitle }}</div>
+            <div v-if="isExporting" class="exportBoard__title">{{ displayTitle }}</div>
             <div v-if="isExporting && description" class="exportBoard__description">{{ description }}</div>
             <div v-if="columns.length > 1" class="boardColumnsHeader" :class="{ 'boardColumnsHeader--export': isExporting }">
               <div class="boardColumnsHeader__spacer" aria-hidden="true"></div>
@@ -2228,7 +2234,12 @@ onUnmounted(() => {
   font-weight: 900;
   letter-spacing: -0.04em;
 }
-.editorMain__titleButton {
+.editorMain__subtitle {
+  color: var(--theme-text-soft);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.pageHead__eyebrowButton {
   width: fit-content;
   max-width: 100%;
   border: 0;
@@ -2237,20 +2248,17 @@ onUnmounted(() => {
   color: inherit;
   text-align: left;
   cursor: pointer;
+  transition: color 160ms ease, opacity 160ms ease;
 }
-.editorMain__titleButton:hover {
+.pageHead__eyebrowButton:hover {
   color: var(--theme-text-strong);
+  opacity: 1;
 }
-.editorMain__titleButton:focus-visible {
+.pageHead__eyebrowButton:focus-visible {
   outline: 2px solid color-mix(in srgb, var(--theme-accent) 70%, white);
   outline-offset: 4px;
   border-radius: 8px;
 }
-.editorMain__subtitle {
-  color: var(--theme-text-soft);
-  font-size: 13px;
-  line-height: 1.5;
-}
 .editorMain__sourceNote {
   margin-top: 4px;
   display: inline-flex;