🪏 새로고침 + 뒤로가기 이탈 모달 구현 삽질기

프로젝트에서 폼 작성 도중 페이지를 벗어나는 상황을 막는 모달을 구현해야 했다.

뒤로가기, 내부 링크 이동, 새로고침 등

사용자가 의도치 않게 페이지를 떠나는 경우를 감지하고

확인 모달을 띄워 이탈 여부를 확인해야 했다.

 

처음에는 단순하게 브라우저 히스토리를 사용하면 될 것이라고 생각했다.

하지만 실제로 구현해보니 새로고침 + 뒤로가기 케이스에서 많은 예외 상황이 존재했다.

이번 글은 그 과정을 간단하게 정리해보려고 한다.

 

1️⃣ 브라우저 히스토리를 가로채기

처음에는 단순하게 뒤로가기를 막으면 된다는 생각으로 구현을 시작했다.

폼에 진입할 때 히스토리를 하나 더 쌓아두고

뒤로가기 이벤트(popstate)가 발생하면 가로채서 확인 모달을 띄우는 방식으로 구현했다.

const handlePopState = () => {
  history.pushState(null, '', location.href);

  overlayStore.push(
    <Dialog
      variant="confirm"
      message={
        <>
          작성 중인 내용이 사라집니다.<br />
          정말 뒤로 가시겠습니까?
        </>
      }
      onConfirm={() => {
        window.removeEventListener('popstate', handlePopState);
        history.go(-2);
      }}
      onCancel={() => overlayStore.pop()}
    />
  );
};

// 초기 방어용 스택
history.pushState(null, '', location.href);

이 방식은 뒤로가기 자체를 막고 모달을 띄우는 건 잘 동작했다.

그런데 새로고침을 섞는 순간 문제가 발생했다.

 

🤯 예상과 달랐던 동작

새로고침 > 브라우저 자체 새로고침 안내 모달 >

모달 새로고침 버튼 클릭 > 폼 수정 > 뒤로가기 > 뒤로가기 안내 모달... 같은 상황에서는

뒤로가기가 한 번에 이전 페이지로 이동하지 않고

중간에서 상태가 멈추거나 예상과 다르게 동작했다.

 

처음에는 단순히 history.go(-2)로 해결하려 했지만

테스트를 반복할수록 히스토리 스택이 항상 동일하지 않다는 걸 알게 되었다.

 

2️⃣ 카운트로 보정하기

그래서 생각한 두 번째 방법이

히스토리 변화 횟수를 ref로 계산하는 방식이었다.

 

pushState가 실행될 때마다 카운트를 증가시키고

뒤로가기 시 해당 횟수만큼 한 번에 이동하도록 구현했다.

const pushCount = useRef(0);

const handlePopState = () => {
  history.pushState(null, '', location.href);
  pushCount.current += 1;

  const targetIndex = -(pushCount.current + 1);
  history.go(targetIndex);
};

이 방식은 일부 케이스에서는 원하는 대로 동작했다.

하지만 또 다른 문제가 발생했다...🤦‍♀️

브라우저 자체 새로고침 모달이 뜨고 유저가 새로고침을 눌렀을 때는

브라우저의 히스토리 스택이 증가해서 문제 없이 뒤로가기가 동작했지만

취소 버튼을 누르는 케이스나 폼에 아무런 입력 없이 새로고침을 했을때는

브라우저 히스토리가 쌓이지 않아서 카운트 방식으로 해결할 수 없다는걸 깨달았다.

 

그래서 히스토리를 기준으로 계산하는 방식은

히스토리를 불러오거나 조작을 할 수 없기 때문에 불안정하다고 느꼈고

다른 방식으로 다시 해결해보려고 했다.

 

3️⃣ URL 관리 방식으로 전환

히스토리를 기준으로 계산하는 대신

어디로 이동해야 하는지 경로를 직접 관리하는 방식으로 변경했다.

 

유저가 방문한 URL을 Zustand에 저장해서 스택처럼 관리했고,

뒤로가기를 할 때 이전 URL로 직접 이동시키는 방식으로 구현했다.

const targetUrl = getPreviousUrl();
router.push(targetUrl);

이렇게 변경했더니 새로고침 여부나 브라우저 히스토리 스택에 상관없이

항상 이동할 URL이 명확해지고 예측 가능한 동작을 만들 수 있었다.

 

🤯 다 끝났는 줄 알았는데..

그런데...URL 기반으로 바꾼 이후에도 한 가지 문제가 더 남아 있었다.

새로고침을 여러 번 반복한 뒤 뒤로가기를 시도하면

모달이 뜨지 않거나 router.push가 간헐적으로 동작하지 않는 문제가 있었다.

 

원인을 찾아보니 Next.js에서 popstate 이벤트가 라우터 상태 복구보다 먼저 실행되어

타이밍 이슈로 동작하지 않았던 것이었다.

setTimeout(() => {
    onPrevent('POPSTATE');
}, 0);

그래서 navigation 처리를 setTimeout로 처리했더니

타이밍 이슈 없이 안정적으로 동작했다.

 

📌 정리

브라우저 히스토리를 직접 제어하는 건 정말 많은 예외가 존재한다.

페이지 이탈 로직에서는 히스토리를 직접 조작하기 보다는

사용자를 어디로 이동시킬지를 생각하는게 더 안정적이라는 걸 배웠다.

 

더 좋은 방법을 알게 된다면 추가 포스팅으로 남겨야겠다🥹