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 11:55:58 +09:00
parent cb5cc68ecf
commit 6cb39603bf
9 changed files with 58 additions and 13 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.45 — 스크롤 적용은 라우트 확정이 아니라 페이지 렌더 완료를 기준으로 한다
Vue Router의 `afterEach`는 URL과 라우트 상태가 바뀐 직후 실행되지만, Nuxt의 실제 페이지 컴포넌트 교체가 끝났다는 뜻은 아니다. 이 시점에 최상단 스크롤을 적용하면 이전 화면의 헤더 이미지가 먼저 보인 뒤 새 페이지가 붙을 수 있다. 따라서 `afterEach`에서는 이동 정보를 저장만 하고, Nuxt `page:finish` 이후 렌더 프레임을 기다린 뒤 새 화면 기준으로 스크롤을 적용한다.
기본 `scrollBehavior: false`는 유지한다. 스크롤 제어 주체를 하나로 유지하면서 적용 시점만 늦춰, 이전 화면을 움직이지 않고 새 화면의 시작 위치를 정리하는 쪽을 선택했다.
## 2026-07-06 v1.10.44 — 스크롤은 라우트 전환 후 새 화면에서만 적용한다
게시물 상세를 즉시 전환 방식으로 바꿔도 Vue Router 기본 스크롤 처리가 남아 있으면, 새 화면이 그려지기 전에 이전 화면이 먼저 최상단으로 이동하는 순간이 보일 수 있다. 사용자는 이를 페이지가 넘어가기 전에 화면이 깜빡이는 현상으로 느끼므로, 라우터 기본 `scrollBehavior`를 끄고 클라이언트 플러그인에서 라우트 확정 후 렌더 프레임을 기다린 다음 새 화면 기준으로만 스크롤을 적용한다.