[TIL] 0531 | 페이지 진입시 모달 띄우기

구현 기능

1. 페이지 진입시 팝업 모달을 띄운다.
2. 오늘 하루 그만보기 버튼을 누르면, 하루동안 해당 팝업 모달이 뜨지 않도록 한다.

먼저, 팝업을 띄워줄 모달 컴포넌트를 생성한다.

interface EventBannerModalProps {
  onClose: () => unknown;
  VISITED_BEFORE_DATE: string | null;
}

function EventBannerModal({
  onClose,
  VISITED_BEFORE_DATE,
}: EventBannerModalProps) {
  // 하루 동안 팝업을 닫을지 말지를 결정하는 boolean 타입의 상태를 생성
  const [popupVisible, setPopupVisible] = React.useState(true);
  
  // 이미 로컬 스토리지에 저장되어 있을지 모르는 현재 날짜를 구한다.
  const VISITED_NOW_DATE = String(Math.floor(new Date().getDate()));

  
  React.useEffect(() => {
    if (VISITED_BEFORE_DATE !== null) {
      // 날짜가 같은 경우 모달 노출시키기
      if (VISITED_BEFORE_DATE === VISITED_NOW_DATE) {
        localStorage.removeItem('visited');
        setPopupVisible(true);
      }
      
      // 날짜가 다를 경우 모달을 노출시키지 않기
      if (VISITED_BEFORE_DATE !== VISITED_NOW_DATE) {
        setPopupVisible(false);
      }
    }
  }, [VISITED_BEFORE_DATE, VISITED_NOW_DATE, setPopupVisible]);

  // 하루동안 팝업 닫기
  const dayCloseModalHandler = () => {
    if (popupVisible) {
      setPopupVisible(false);
      onClose();

      // 날짜가 다른 경우 (popupVisible가 true인 경우)
      const expiry = new Date();
      // +1일 계산하여
      const expiryDate = expiry.getDate() + 1;
      // 로컬스토리지에 저장하도록 한다.
      localStorage.setItem('visited', String(expiryDate));
    }
  };

  return (
    <Container>
      <Content>
        <EventBannerImg src={GuidePopImage} alt="event banner image" />
        <ButtonWrap>
          <Button onClick={() => onClose()}>닫기</Button>
          <Button onClick={() => dayCloseModalHandler()}>
            오늘 하루 그만보기
          </Button>
        </ButtonWrap>
      </Content>
    </Container>
  );
}

export default EventBannerModal;

해당 팝업 모달을 띄울 메인 컴포넌트에서 popupOpenModal() 훅을 이용하여 조건식(이전 방문 날짜가 로컬스토리지에 저장되어 있지 않을 경우)에 따라 띄워질 수 있도록 처리한다.

...
// 모달을 띄우기 위한 Hook을 따로 만들어서 가져왔다.
  const {
    openModal: popupOpenModal,
    closeModal: popupCloseModal,
    modal: popupModal,
  } = useModal();
 
    ...

  // 이전 방문 날짜 구하기
  const VISITED_BEFORE_DATE = localStorage.getItem('visited');

  // 페이지 진입 시, 이전 방문 날짜가 아닌 경우 해당 모달을 띄우도록 작성했다.
  React.useEffect(() => {
    if (!VISITED_BEFORE_DATE) {
      popupOpenModal(
        <EventModalHelp>
          <EventModalBody>
            <EventBannerModal
              onClose={popupCloseModal} 
              VISITED_BEFORE_DATE={VISITED_BEFORE_DATE} 
            />
            // onClose : 모달을 닫는 hook 함수를 props로 전달
            // VISITED_BEFORE_DATE : 저장되어 있을지도 모르는 이전 방문 날짜의 로컬스토리지 값을 props로 전달
          </EventModalBody>
        </EventModalHelp>
      );
    }
  }, [VISITED_BEFORE_DATE, popupCloseModal, popupOpenModal]);


return (
    <Container>
    	...
        <Modal {...popupModal} />
    	...
    </Container>

⚡️ 출처

https://sycdev.tistory.com/19