zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

페이지 이동 전환 베일 추가

Browse Source
This commit is contained in:
zenn
2026-07-06 12:41:08 +09:00
parent 6cb39603bf
commit 34d2d8e2ea
9 changed files with 66 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/history.md
View File

@@ -1,5 +1,11 @@
# 의사결정 이력
## 2026-07-06 v1.10.46 — 즉시 전환을 유지하되 화면 교체 구간만 가린다
라우터 기본 스크롤을 끄고 Nuxt `page:finish` 이후로 스크롤 적용을 늦춰도, 홈에서 게시물로 이동할 때 이전 홈 화면의 헤더 이미지가 순간적으로 보일 수 있었다. 이는 페이지 컴포넌트 교체와 브라우저 페인트 사이의 짧은 구간에서 발생하는 시각적 문제이므로, 데이터 준비 완료까지 기다리는 방식으로 돌아가기 전에 화면 교체·스크롤 정리 구간만 덮는 전환 베일을 추가한다.
전환 베일은 전체 로딩 오버레이와 다르게 긴 데이터 대기 상태를 표현하지 않는다. 이동 시작부터 새 화면의 스크롤 위치가 정리된 직후까지만 배경색으로 화면을 가려, 즉시 전환 구조는 유지하면서 이전 화면의 상단 노출을 숨긴다.
## 2026-07-06 v1.10.45 — 스크롤 적용은 라우트 확정이 아니라 페이지 렌더 완료를 기준으로 한다
Vue Router의 `afterEach`는 URL과 라우트 상태가 바뀐 직후 실행되지만, Nuxt의 실제 페이지 컴포넌트 교체가 끝났다는 뜻은 아니다. 이 시점에 최상단 스크롤을 적용하면 이전 화면의 헤더 이미지가 먼저 보인 뒤 새 페이지가 붙을 수 있다. 따라서 `afterEach`에서는 이동 정보를 저장만 하고, Nuxt `page:finish` 이후 렌더 프레임을 기다린 뒤 새 화면 기준으로 스크롤을 적용한다.