에디터 헤더 규칙 정리

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;