ui: measure editor sidebar height

docs/history.md

@@ -1,5 +1,23 @@
 # 의사결정 이력
 
+## 2026-04-06 v1.4.97
+- 티어표 편집기의 오른쪽 아이템 패널은 페이지 내부 위치가 헤더, 제목, 스크롤 상태에 따라 달라지므로 `100dvh - 고정값` 방식으로는 왼쪽 레일처럼 하단이 자연스럽게 맞지 않을 수 있다. 실제 패널의 화면 내 시작 위치를 측정해 남은 높이를 계산하는 편이 더 안정적이라고 정리했다.
+
+## 2026-04-06 v1.4.96
+- 템플릿 제목을 버튼화하면 접근성은 좋아지지만, 포커스가 남은 상태의 `Space` 입력이 브라우저 스크롤과 섞이면 작업 화면을 갑자기 밀어낼 수 있다. 따라서 제목 버튼에서는 `Space` 기본 스크롤을 막고 의도한 본문 이동만 실행하는 편이 맞다고 정리했다.
+
+## 2026-04-06 v1.4.95
+- 티어표 편집 중에는 공통 헤더보다 보드와 아이템 풀이 더 중요한 작업 기준점이므로, 템플릿 제목을 본문 위치로 빠르게 이동하는 가벼운 컨트롤로 활용하는 편이 좋다고 정리했다. 별도 버튼을 추가하기보다 기존 제목 클릭 동작으로 두어 화면 복잡도를 늘리지 않는 쪽을 택했다.
+
+## 2026-04-06 v1.4.94
+- 아이템 수가 많을 때 오른쪽 풀 때문에 페이지 전체가 길어지면 왼쪽 티어표까지 함께 움직여 방송/녹화 환경에서 기준 화면이 흔들릴 수 있다. 그래서 데스크톱에서는 오른쪽 사이드의 실제 화면 시작 위치를 감안해 높이를 제한하되, 제목과 검색창은 유지하고 아이템 그리드만 스크롤되게 하는 편이 더 적절하다고 정리했다. 모바일에서는 기존처럼 문서 흐름을 유지한다.
+
+## 2026-04-06 v1.4.93
+- 티어표 편집기의 커스텀 이미지 추가 영역 아래는 아이템 수가 적을 때 비어 보이기 쉬우므로, 이 공간에는 큰 기능보다 방해되지 않는 작은 작업 팁을 두는 편이 자연스럽다고 정리했다. 특히 우클릭 복제, 미사용 아이템 처리, 브라우저 확대/축소처럼 초반 시행착오를 줄여 주는 내용이 효과적이라고 판단했다.
+
+## 2026-04-06 v1.4.92
+- 모바일 왼쪽 레일은 사용자 카드, 검색, 메뉴가 세로로 붙는 구조라 기본 `gap`이 빠지면 브라우저별 렌더링 차이에 따라 훨씬 답답하게 보일 수 있으므로, 이 영역 간격은 명시적으로 주는 편이 안전하다고 정리했다.
+
 ## 2026-04-06 v1.4.91
 - 관리자 화면 모달이 많아질수록 `Esc` 동작이 일부 모달에서만 먹으면 예측 가능성이 떨어지므로, 열려 있는 공통 모달은 모두 `Esc = 취소` 규칙으로 맞추는 편이 더 자연스럽다고 정리했다.
 - 왼쪽 레일 사용자 카드의 두 번째 줄은 로그인된 상태에선 이메일이라 말줄임이 맞지만, 로그인 전/확인 중 메시지는 설명 성격이 강하므로 같은 `nowrap` 규칙을 쓰면 가로 스크롤을 유발할 수 있다. 그래서 이메일과 설명 문구의 줄 처리 정책을 분리하는 쪽이 맞다고 판단했다.

docs/update.md

@@ -1,5 +1,28 @@
 # 업데이트 로그
 
+## 2026-04-06 v1.4.97
+- 티어표 편집 화면의 오른쪽 아이템 패널 높이를 고정 숫자 대신 실제 화면 내 시작 위치 기준으로 계산하도록 바꿨다. 공통 헤더/제목 영역/스크롤 위치가 달라져도 아이템 풀의 하단이 viewport 안에 더 자연스럽게 맞도록 보정했다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.96
+- 티어표 편집 화면의 템플릿 제목에 포커스가 남은 상태에서 `Space`를 누르면 브라우저 기본 스크롤이 섞일 수 있어, 제목 버튼의 `Space` 기본 동작을 막고 본문 이동만 실행되도록 보정했다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.95
+- 티어표 편집 화면의 템플릿 제목을 클릭하면 `workspaceBody`가 화면 최상단에 오도록 부드럽게 스크롤되게 했다. 작업 중 공통 헤더를 화면 밖으로 밀어내고 본문 중심으로 볼 수 있다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.94
+- 티어표 편집 화면에서 아이템이 많을 때 오른쪽 아이템 사이드가 문서 높이를 밀어 왼쪽 티어표까지 함께 움직이던 흐름을 줄였다. 데스크톱에서는 오른쪽 사이드의 실제 화면 시작 위치를 감안해 높이를 제한하고, 아이템 그리드만 내부 스크롤되게 해 검색창은 위에 유지하면서 필요한 아이템을 찾아 가져올 수 있게 했다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.93
+- 티어표 편집 화면의 커스텀 이미지 추가 영역 아래에는 작은 `작업 팁` 안내를 추가했다. 복수 사용, 미사용 아이템 미리보기/저장 제외, 브라우저 확대/축소 활용 같은 자주 묻는 흐름을 바로 확인할 수 있다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.92
+- 모바일 왼쪽 사이드 메뉴(`leftRail__mobileMenu`)에 `gap`이 빠져 일부 브라우저에서 사용자 카드와 검색창/메뉴가 더 붙어 보일 수 있던 간격을 다시 정리했다.
+
 ## 2026-04-06 v1.4.91
 - 관리자 화면의 각종 모달은 이제 `Esc` 키를 누르면 현재 열려 있는 모달이 바로 닫히도록 정리했다. 브라우저 기본 동작 대신 공통 `취소` 흐름으로 맞췄다.
 - 왼쪽 사이드에서 일부 브라우저 환경에 가로 스크롤이 생기던 문제를 보정했다. 사용자 카드와 검색창에 `min-width: 0`을 더 명확히 주고, 이메일은 계속 말줄임 처리하되 로그인 전 안내 문구처럼 긴 설명은 자연스럽게 줄바꿈되도록 분리했다.

frontend/src/views/TierEditorView.vue

@@ -90,6 +90,7 @@ let editorLoadToken = 0
 const boardEl = ref(null)
 const exportBoardEl = ref(null)
 const groupListEl = ref(null)
+const sidebarEl = ref(null)
 const poolEl = ref(null)
 const groupDropEls = ref({})
 const fileEl = ref(null)
@@ -97,6 +98,8 @@ const thumbnailFileEl = ref(null)
 const groupSortable = ref(null)
 const poolSortable = ref(null)
 const dropSortables = ref([])
+const editorSidebarMaxHeight = ref('')
+let editorSidebarMeasureFrame = 0
 
 const isNewTierList = computed(() => tierListId.value === 'new')
 const isOwnTierList = computed(() => !!auth.user && !!ownerId.value && ownerId.value === auth.user.id)
@@ -359,6 +362,30 @@ function closeItemContextMenu() {
   }
 }
 
+function scrollWorkspaceBodyToTop() {
+  const workspaceBody = document.querySelector('.workspaceBody')
+  workspaceBody?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
+function updateEditorSidebarMaxHeight() {
+  if (typeof window === 'undefined' || !sidebarEl.value) return
+  const bottomGap = 14
+  const stickyTop = 14
+  const minHeight = 260
+  const sidebarTop = Math.max(sidebarEl.value.getBoundingClientRect().top, stickyTop)
+  const nextHeight = Math.max(minHeight, Math.floor(window.innerHeight - sidebarTop - bottomGap))
+  editorSidebarMaxHeight.value = `${nextHeight}px`
+}
+
+function scheduleEditorSidebarMeasure() {
+  if (typeof window === 'undefined') return
+  if (editorSidebarMeasureFrame) return
+  editorSidebarMeasureFrame = window.requestAnimationFrame(() => {
+    editorSidebarMeasureFrame = 0
+    updateEditorSidebarMaxHeight()
+  })
+}
+
 function openItemContextMenu(itemId, event) {
   if (!canEdit.value || !itemId || !itemsById.value[itemId] || shouldIgnoreItemClick()) return
   selectedItemId.value = itemId
@@ -1350,6 +1377,7 @@ async function loadEditorState() {
   if (loadToken !== editorLoadToken) return
 
   syncSavedEditorSnapshot()
+  scheduleEditorSidebarMeasure()
   if (canEdit.value) {
     await initSortables()
   }
@@ -1369,6 +1397,9 @@ onMounted(() => {
   window.addEventListener('contextmenu', handleGlobalContextMenu, true)
   window.addEventListener('blur', closeItemContextMenu)
   window.addEventListener('scroll', closeItemContextMenu, true)
+  window.addEventListener('resize', scheduleEditorSidebarMeasure)
+  window.addEventListener('scroll', scheduleEditorSidebarMeasure, true)
+  nextTick(() => scheduleEditorSidebarMeasure())
 })
 
 onUnmounted(() => {
@@ -1377,6 +1408,12 @@ onUnmounted(() => {
     window.removeEventListener('contextmenu', handleGlobalContextMenu, true)
     window.removeEventListener('blur', closeItemContextMenu)
     window.removeEventListener('scroll', closeItemContextMenu, true)
+    window.removeEventListener('resize', scheduleEditorSidebarMeasure)
+    window.removeEventListener('scroll', scheduleEditorSidebarMeasure, true)
+    if (editorSidebarMeasureFrame) {
+      window.cancelAnimationFrame(editorSidebarMeasureFrame)
+      editorSidebarMeasureFrame = 0
+    }
   }
   if (thumbnailPreviewUrl.value) URL.revokeObjectURL(thumbnailPreviewUrl.value)
   destroySortables()
@@ -1582,7 +1619,15 @@ onUnmounted(() => {
     <div class="editorMain">
       <section class="head">
         <div class="editorMain__headCopy">
-          <div class="editorMain__title">{{ templateName || templateId }}</div>
+          <button
+            class="editorMain__title editorMain__titleButton"
+            type="button"
+            title="본문을 화면 위로 이동"
+            @click="scrollWorkspaceBodyToTop"
+            @keydown.space.prevent="scrollWorkspaceBodyToTop"
+          >
+            {{ templateName || templateId }}
+          </button>
           <div class="editorMain__subtitle">
             <template v-if="canEdit">
               행/열 이름과 순서를 바꾸고 아이템을 드래그해서 배치할 수 있어요.
@@ -1746,9 +1791,17 @@ onUnmounted(() => {
               <button class="btn btn--ghost btn--small dropzone__button" @click="openFile">파일 선택</button>
             </div>
           </div>
+          <div class="editorTips">
+            <div class="editorTips__title">작업 팁</div>
+            <ul class="editorTips__list">
+              <li>마우스 오른쪽 클릭으로 아이템을 복수 사용하거나 커스텀 이미지를 빠르게 정리할 수 있어요.</li>
+              <li>미사용 아이템은 미리보기와 이미지 저장 결과에 표시되지 않으니, 필요한 것만 골라 배치해도 괜찮아요.</li>
+              <li>아이템이 많아 한 번에 보기 어렵다면 브라우저 확대/축소(`Ctrl +`, `Ctrl -`)로 화면 밀도를 조절해보세요.</li>
+            </ul>
+          </div>
         </div>
 
-        <div class="sidebar">
+        <div ref="sidebarEl" class="sidebar" :style="{ '--editor-sidebar-max-height': editorSidebarMaxHeight || undefined }">
           <div class="sidebar__titleRow">
             <div class="sidebar__title">아이템</div>
             <div class="sidebar__count">{{ visiblePoolCount }} / {{ pool.length }}</div>
@@ -1966,6 +2019,24 @@ onUnmounted(() => {
   font-weight: 900;
   letter-spacing: -0.04em;
 }
+.editorMain__titleButton {
+  width: fit-content;
+  max-width: 100%;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.editorMain__titleButton:hover {
+  color: var(--theme-text-strong);
+}
+.editorMain__titleButton: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;
@@ -2736,6 +2807,8 @@ onUnmounted(() => {
 }
 .sidebar {
   min-width: 0;
+  display: flex;
+  flex-direction: column;
   border: 1px solid var(--theme-border);
   background: linear-gradient(180deg, color-mix(in srgb, var(--theme-card-bg) 94%, transparent), color-mix(in srgb, var(--theme-card-bg-hover) 88%, transparent));
   border-radius: 22px;
@@ -2743,6 +2816,9 @@ onUnmounted(() => {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
   position: sticky;
   top: 14px;
+  max-height: var(--editor-sidebar-max-height, calc(100dvh - 136px));
+  overflow: hidden;
+  overscroll-behavior: contain;
 }
 
 .dropzone--board {
@@ -3057,6 +3133,9 @@ onUnmounted(() => {
   color: var(--theme-text-faint);
 }
 .pool {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
   gap: 10px;
@@ -3065,6 +3144,30 @@ onUnmounted(() => {
 .pool--clickTarget {
   cursor: copy;
 }
+.editorTips {
+  margin-top: 14px;
+  padding: 12px 14px;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: color-mix(in srgb, var(--theme-card-bg) 82%, transparent);
+}
+.editorTips__title {
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--theme-text-soft);
+}
+.editorTips__list {
+  margin: 8px 0 0;
+  padding-left: 16px;
+  color: var(--theme-text-faint);
+  font-size: 12px;
+  line-height: 1.55;
+}
+.editorTips__list li + li {
+  margin-top: 6px;
+}
 .poolItem {
   position: relative;
   min-width: 0;
@@ -3227,8 +3330,11 @@ onUnmounted(() => {
   }
   .sidebar {
     position: static;
+    max-height: none;
+    overflow: visible;
   }
   .pool {
+    overflow: visible;
     grid-template-columns: repeat(6, minmax(0, 1fr));
     gap: 8px;
   }