React 팝업창 띄우기(2) - 하루 동안 보지 않기

앞서 팝업창 띄우기까지 했지만 기능 추가 요청이 들어옴.

바로바로 하루 동안 보지 않기 기능! 

개발엔 안 되는 게 없다는 마인드를 가진(x) 가지려고 노력하는 나.

바로 기능 개발 시작.

예전에 만들어봤었던 방식으로 진행하겠음.

코드는

2022.10.06 - [개발자 모드/React] - React 팝업창 띄우기(1)

React 팝업창 띄우기(1)

전에 만들어놓은 팝업창 그대로 사용하겠음.

팝업 사진

먼저 위 사진처럼 하루 동안 보지 않기 버튼을 추가해줌.

//하루동안 보지 않기 버튼 코드
<div>
  <Link
    to="#"
    onClick={(e) => {
      closePopup(e, popup.id, true);	//기존 x버튼과 차이점을 두기위해 true 값을 파라미터로 전달
    }}
  >
    <span>하루동안 보지 않기</span>
    <i className="fas fa-times-circle"></i>	//fontawesome 태그(위 팝업 사진에는 빠진 상태)
  </Link>
</div>

X 버튼이나 하루 동안 보지 않기 버튼이나 팝업을 닫는 기능이기 때문에 같은 함수를 사용하였고,

구분이 필요했기 때문에 true 값을 3번째 파라미터로 전달함.

 

FontAweSome은 다들 아시겠지만

https://fontawesome.com/

Font Awesome

다양한 무료 아이콘들을 사용할 수 있어서 자주 사용함.

사용 방법은 검색하시면 잘 나와있고 필자도 다음번에 한번 정리해보겠음.

 

버튼을 다 만들었다면 기능을 만들어야 함.

  const closePopup = (e, popupId, check) => {
    e.preventDefault();	//이벤트 작동하지 않도록 해주는 메소드
    if (check) {
      //하루동안 보지않기
      window.sessionStorage.setItem(
        "popupClosedTime" + popupId,	//임의로 설정한 key
        moment().format("YYYY-MM-DD HH:mm")	//현재 시간 값(value)
      );
    }
    //팝업 닫는 기능(저번 글 내용과 같음)
    let prevPopups = popups;
    let newPopups = [];
    prevPopups.forEach((popup) => {
      if (popup.id === popupId) {
        popup.visible = false;
      }
      newPopups.push(popup);
    });
    setPopups(newPopups);
  };

필자는 클라이언트의 sessionStorage를 사용하여 기능을 만들어보았음.

 

※대략적인 흐름

1. 하루동안 보지않기를 클릭한 팝업을 sessionStorage에 등록을 함.(이때 현재 시간 값도 필히 등록해야함)

2. 팝업을 불러올 때 sessionStorage에 있는 값을 비교해 visible : false로 설정함.

3. 팝업 속성 중 visible : true 인 것만 띄움.

 

2과정에서 sessionStorage에 있는 시간 값으로 24시간이 지났는지 안 지났는지 비교함.

 

  //팝업 데이터 가져오는 코드
  if (response.data.content.length > 0) {
    response.data.content.forEach((popup) => {
      const popupClosedTime = window.sessionStorage.getItem(
        "popupClosedTime" + popup.id
      );
      if (isNaN(popupClosedTime)) {
        //sessionStorage에 등록된 팝업이 있을 때
        if (
          parseInt(			//현재 시간과 팝업 닫은 시간 차이를 숫자로 파싱 
            moment.duration(moment().diff(popupClosedTime)).asHours()	
          ) > 24
        ) {
          //24시간 지났을 때
          popup.visible = true;
        } else {
          //24시간 안 지났을 때
          popup.visible = false;
        }
      } else {
        //없을 때
        popup.visible = true;
      }
    });
    setPopups(response.data.content);
  } else {
    setPopupState(false);
  }

이렇게 하면 팝업 하루 동안 보지 않기 기능 완성.

 

이때까지 과거 갓글에 검색해서 얻은 sessionStorage를 이용하는 방법이였음. 끝.

 

 

날씨가 너무 좋은 금요일임. 

다들 감기 조심하시고 연휴 푹 쉬시길.

글 읽어주셔서 감사.