[React] 팝업 띄우기(feat. Modal, 오늘 그만 보기)

사이트의 메인 페이지에 들어갔을 때 모달창이 뜨고 그 안에 '오늘 그만 보기' input checkbox에 체크를 하고 '닫기'를 누르면 모달창이 닫히도록 구현하고자 한다.

 

설치

npm install react-cookie
npm install dayjs

 

사용

import { useEffect, useState } from 'react';
import { useCookies } from 'react-cookie';
import Modal from '@mui/material/Modal';
import Paper from '@mui/material/Paper';
import dayjs from 'dayjs';

export default function MainPopupModal() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isCheckBoxChecked, setIsCheckBoxChecked] = useState(false); //오늘그만보기체크

  const [cookies, setCookie] = useCookies(['lastClosedDate']);

  const handleClose = () => {
    setIsModalOpen(false);
    document.documentElement.style.overflow = 'auto';
  };

  //오늘그만보기 체크박스 check상태
  const handleChangeCheckBox = (e: any) => {
    setIsCheckBoxChecked(e.target.checked);
  };

//쿠키저장안되어있을 때 모달창이 뜨도록 함
  useEffect(() => {
    if (!cookies.lastClosedDate) {
      setIsModalOpen(true);
    }
  }, []);

  useEffect(() => {
  //스크롤
    if (isModalOpen) {
      document.documentElement.style.overflow = 'hidden';
    } else {
      document.documentElement.style.overflow = 'auto';
    }

	// 오늘그만보기 체크&닫기 눌렀을 경우 쿠키저장
    if (isCheckBoxChecked && !isModalOpen) {
      const currentDate = dayjs().format('YYYY-MM-DD');//누른시간
      const endDate = dayjs().add(1, 'day').startOf('day').toDate(); //끝나는시간
      setCookie('lastClosedDate', currentDate, {
        path: '/',
        expires: endDate, //언제까지 쿠키 저장하는지
      });//쿠키 저장
    }
  }, [isCheckBoxChecked, isModalOpen]);

  const showMainPopup =
    cookies.lastClosedDate !== dayjs().format('YYYY-MM-DD') && isModalOpen;
    //쿠키저장(눌렀던당시)날짜와 현재날짜가 불일치하며 모달창오픈이 된 경우 모달창이 보이도록 설정

  return (
    <div>
      <Modal open={showMainPopup} onBackdropClick={handleClose}>
        <Paper
          elevation={2}
          sx={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            width: 'auto',
            bgcolor: 'background.paper',
            boxShadow: 24,
            p: 4,
            overflowY: 'auto',
            padding: '4rem',
          }}
          className='mainPopupModalWrap'
        >
          <div>
            <h2 className='hehe'>Title</h2>
            <p>texttexttexttexttexttexttext</p>
          </div>

          <div className='mainPopupModalCloseWrap'>
            <label>
              <input type='checkbox' onChange={handleChangeCheckBox} />
              오늘 그만 보기
            </label>
            <button className='modalCloseBtn' onClick={handleClose}>
              닫기
            </button>
          </div>
        </Paper>
      </Modal>
    </div>
  );
}

 

결과화면

크롬검사 >쿠키에 저장된 값을 확인할 수 있다.

 

 

참고사이트

React-cookie ‘오늘 하루 열지 않기’ 팝업 만들기 with Hooks

https://zih0.tistory.com/43

n일 동안 보지 않기 팝업(모달) 구현 ( react-cookie )