[Next.js] 모달 열릴 때 스크롤이 하단으로 가는 문제 해결하기

🚨 문제 상황

Next 15에서 Parallel Routes & Intercepting Routes로 모달을 구현했다.

아래처럼 게임 카드 리스트가 존재하고 특정 게임 카드를 클릭하면 모달이 열려야 한다.

 

문제는 모달을 열면 뒷배경이 페이지의 하단으로 내려간다...

아직 UI 구현 단계라 api 연동을 하지 않아 데이터가 좀 이상한데 첫 번째 줄에 있던 게임 카드를 클릭했는데 스크롤이 아래로 내려간 상황이다.

모달을 닫으면 다시 원위치로 돌아오기는 하지만, 게임 카드 리스트가 무한 스크롤로 구현되어 있기에 모달을 열고 스크롤이 내려가는 과정에서 다음 게임 리스트 네트워크 요청이 가는 문제가 있다...

 

챗지피티한테 물어보니 모달이 열릴 때 body 태그의 overflow 스타일을 hidden으로 설정했다가 모달이 닫힐 때 초기화하라고 한다.

해당 방법은 바디 스크롤을 잠금 하는 방법이다.

위 방법대로 하면 모달이 열려있을 때 뒷배경의 스크롤이 불가능한 건 맞다.

다만 현재 내가 겪고 있는 문제가 해결되진 않았다..

 

스크롤 위치를 기억하는 방법도 빠르게 다시 스크롤을 올리는 것뿐이지 해결되진 않는 것 같다.

눈으로 봤을 때는 해결된 줄 알았으나.. 네트워크 탭을 보니 다음 게임 리스트 요청이 여전히 가고 있었다.

스크롤 아래로 이동했다가 다시 기억해둔 스크롤 위치로 올리는 거였나 보다.

 

🥁 해결 방법

해결은... 생각보다 간단한 방법이었다...

기존 코드에서는 Link 태그를 활용해 게임 카드를 클릭하면 모달을 열도록 하였다.

<Link href={`/shared-games/${sharedGameUuid}`}>
  <GameCard />
</Link>

 

여기에 scroll={false}를 추가했더니 모달을 열어도 스크롤이 내려가지 않았다.

<Link href={`/shared-games/${sharedGameUuid}`} scroll={false}>
  <GameCard />
</Link>

 

Next.js 스크롤 내부 동작에 의해 모달이 열릴 때 스크롤이 내려갔던 거 같다.