nextjs app router에서는

router.event가 없어졌기에 아래와 같이 이벤트 리스너를 추가해서

해당 페이지의 이벤트를 제한해야한다.

하지만 링크 이동은 막을 수 없기에 Link 컴포넌트를 래핑하여 따로 처리해주어야함.

import { useEffect } from 'react';

// 브라우저 닫기와 뒤로가기 이벤트를 막습니다.
export function usePreventNavigation() {
  useEffect(() => {
    const handleWindowClose = (e: BeforeUnloadEvent) => {
      e.preventDefault();
    };

    const handlePopState = (e: PopStateEvent) => {
      e.preventDefault();
      window.dispatchEvent(new Event('beforeunload'));
    };

    window.addEventListener('beforeunload', handleWindowClose);
    window.addEventListener('popstate', handlePopState);

    return () => {
      window.removeEventListener('beforeunload', handleWindowClose);
      window.removeEventListener('popstate', handlePopState);
    };
  }, []);
}