팝업 하루 동안 보이지 않도록 설정하기

앱 서비스를 웹으로 접속하는 경우 앱을 설치하도록 유도하는 팝업을 띄우는 경우가 있는데 이러한 경우 팝업을 끄고 나서도 계속 팝업이 노출되면 사용자의 경험에 안좋은 영향을 끼칠 수 있다.

그래서 팝업을 끌 경우 다음날까지 보이지 않도록 설정하기로 했다.

방법은 매우 간단하다.

  const today = new Date();
  const saveDay = today.getDate();
  
  //return 31 (31일 일 경우)

이렇게 당일 날짜를 구할 수 있고

팝업을 끄는 버튼을 클릭할 시 localStorage 에 해당 일자를 저장한다.

onClick={() => {
 localStorage.setItem('today', saveDay);
}}

const localDate = localStorage.getItem('today')

그리고 메인화면 component에 useEffect를 이용하여 메인 component가 최초 렌더링 될 때 설치 유도 팝업이 뜨는 조건을 설정한다.
1. 앱이 아닐때
2. 오늘 일자와 localStorage에 저장된 일자가 다를때

  useEffect(() => {
      if (!isApp && saveDay !== localDate) {
        setShowPopup(true);
      }
  }, []);