[Next.js] 모달 뒷배경 스크롤 위치 유지하기 (intercepting Routes + parallel Routes)

Next.js App Router에서는 패러럴 라우트(parallel Routes)와 인터셉팅 라우트(intercepting Routes)를 활용해서 모달을 띄울 수 있다.

나 또한 패러럴 + 인터셉팅의 조합으로 모달 띄우고 있었다.

모달을 닫으면 기존의 스크롤 위치로 돌아오기는 한다.

이런 현상을 해결해 보고자 했다.

인터셉팅 라우트도 주소가 바뀌는 게 기본 동작이기 때문에

Next.js의 Link를 아래와 같이 사용했다.

import Link from 'next/link'

<Link href="/somewhere"> 
...
</Link>

import Link from 'next/link'

<Link href="/somewhere" scroll={false}> 
...
</Link>

useRouter를 사용한다면 아래와 같이

import { useRouter } from "next/navigation";
const router = useRouter();
router.push("/somewhere", {scroll:false});

수정 전 - 모달 뒷배경 스크롤이 유지되지 않고 위로 올라감.

수정 후 - 모달 뒷배경 스크롤이 유지된다.