[개발일지] 네비게이션 오버레이 페이지네이션 버그 수정

어제 추가한 네비게이션 로딩 오버레이에서 페이지네이션과 관련된 버그를 발견하고 수정한 날입니다.

오버레이가 사라지지 않는 버그

게시판을 돌아다니다가 페이지네이션 버튼을 눌렀는데
오버레이가 떠오른 채로 사라지지 않는 상황이 발생했습니다.

한참 기다려도 그대로여서, 결국 새로고침으로 빠져나왔습니다.

오버레이 컴포넌트에서 usePathname 만 감지하고 있었던 게 원인이었습니다.

useEffect(() => {
  setVisible(false);
}, [pathname]);

페이지네이션은 /games/fc-online?page=2 처럼 pathname 은 그대로고
쿼리 파라미터만 바뀌는 방식입니다.

오버레이는 "pathname이 바뀌면 꺼라" 라는 조건만 보고 있었기 때문에
쿼리 파라미터 변경은 아예 감지하지 못하고 계속 켜져 있었던 겁니다.

useSearchParams 를 추가해서 pathname 과 쿼리 파라미터 둘 다 감지하도록 바꿨습니다.

useEffect(() => {
  setVisible(false);
}, [pathname, searchParams]);

같은 페이지 링크 비교도 함께 수정했습니다.
기존에는 href === pathname 으로 현재 페이지인지 확인했는데,
/games/fc-online?page=2 같은 링크는 pathname 만 비교하면 현재 페이지 여부를 잘못 판단합니다.

const currentFull = pathname + (searchParams.toString() ? `?${searchParams.toString()}` : '');
if (href === currentFull) return;

pathname 과 쿼리 파라미터를 합쳐서 전체 URL 기준으로 비교하도록 바꿨습니다.

Next.js 에서 useSearchParams 를 쓰려면 Suspense 로 감싸야 한다는 요건이 있어서
컴포넌트를 inner / outer 로 분리해 Suspense 를 적용했습니다.

어제 추가한 기능에서 바로 버그가 나오니 쓴웃음이 나왔지만,
이렇게 실제로 써보면서 바로 발견하는 게 낫긴 합니다.