popstate 이벤트 사용

 

최종 프로젝트 피드백 중 결제 창이 띄워진 채로 뒤로가기를 해도 창이 꺼지지 않는데, 

pap state 를 조절해 뒤로가기 시 모듈이 종료되도록 만드는 게 자연스럽다는 피드백을 받았다

 

 

 

 

 

구글링해보니 pop state 이벤트를 이용해 뒤로 가기를 막는 예제가 많이 보였다

다만 뒤로가기를 막는 것 보다는 pop state 이벤트 발생 시 결제 창이 닫히는 것이 더욱 자연스러워 보여서

 

포트원 api의 결제 창 종료 메서드를 찾아보고, 로컬/세션 스토리지 / 쿠키 등을 제거해봤지만 결제 창 종료를 코드상으로 구현 할 방법을 찾지 못했다

 

=> 아쉽지만 창 뒤로가기를 막아두고, 결제 창 종료 후 이용해달라는 토스트를 띄우는 방향으로 구현을 했다

 

//결제창이 열려있는 지 여부를 저장할 useState, 
const [isPaymentOpen, setIsPaymentOpen] = useState<boolean>(false);
const paymentRef = useRef<any>(null);

//...

//1. 결제창 요청 시 세션 기록 스택에 항목 추가
//2. popstate 이벤트 발생 시, toast 띄우기
  useEffect(() => {
    const handlePopstate = (e: PopStateEvent) => {
      if (isPaymentOpen) {
        e.preventDefault();
        toast({
          description: '결제창을 먼저 종료해주세요'
        });
        window.history.pushState(null, '', window.location.href);
      }
    };
    if (isPaymentOpen) {
      window.history.pushState(null, '', window.location.href);
      window.addEventListener('popstate', handlePopstate);
    }
    return () => {
      window.removeEventListener('popstate', handlePopstate);
    };
  }, [isPaymentOpen]);