Compare commits

...

2 Commits

Author SHA1 Message Date
360ec5ac3d ui: prevent title space scroll 2026-04-06 13:33:56 +09:00
71a13488d9 ui: let editor title focus workspace 2026-04-06 13:32:56 +09:00
3 changed files with 46 additions and 1 deletions

View File

@@ -1,5 +1,11 @@
# 의사결정 이력
## 2026-04-06 v1.4.96
- 템플릿 제목을 버튼화하면 접근성은 좋아지지만, 포커스가 남은 상태의 `Space` 입력이 브라우저 스크롤과 섞이면 작업 화면을 갑자기 밀어낼 수 있다. 따라서 제목 버튼에서는 `Space` 기본 스크롤을 막고 의도한 본문 이동만 실행하는 편이 맞다고 정리했다.
## 2026-04-06 v1.4.95
- 티어표 편집 중에는 공통 헤더보다 보드와 아이템 풀이 더 중요한 작업 기준점이므로, 템플릿 제목을 본문 위치로 빠르게 이동하는 가벼운 컨트롤로 활용하는 편이 좋다고 정리했다. 별도 버튼을 추가하기보다 기존 제목 클릭 동작으로 두어 화면 복잡도를 늘리지 않는 쪽을 택했다.
## 2026-04-06 v1.4.94
- 아이템 수가 많을 때 오른쪽 풀 때문에 페이지 전체가 길어지면 왼쪽 티어표까지 함께 움직여 방송/녹화 환경에서 기준 화면이 흔들릴 수 있다. 그래서 데스크톱에서는 오른쪽 사이드의 실제 화면 시작 위치를 감안해 높이를 제한하되, 제목과 검색창은 유지하고 아이템 그리드만 스크롤되게 하는 편이 더 적절하다고 정리했다. 모바일에서는 기존처럼 문서 흐름을 유지한다.

View File

@@ -1,5 +1,13 @@
# 업데이트 로그
## 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`

View File

@@ -359,6 +359,11 @@ function closeItemContextMenu() {
}
}
function scrollWorkspaceBodyToTop() {
const workspaceBody = document.querySelector('.workspaceBody')
workspaceBody?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
function openItemContextMenu(itemId, event) {
if (!canEdit.value || !itemId || !itemsById.value[itemId] || shouldIgnoreItemClick()) return
selectedItemId.value = itemId
@@ -1582,7 +1587,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">
/ 이름과 순서를 바꾸고 아이템을 드래그해서 배치할 있어요.
@@ -1974,6 +1987,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;