[React] 오늘 하루 안보기/ 24시간 동안 안보기 팝업 구현

 

화면의 Home page에 접근 시 팝업을 띄우려는 작업 중

오늘 하루 안보기를 구현해보기로 했다.

 

 

대략적인 구현 방법은

Local Storage에 날짜 및 시간을 담는 것이고

Home에 접근 시 Local Storage에 있는 Date을 현재 날짜/시간과 조회하여

조건에 따라 팝업을 노출해 주는 것이다.

 

 

일단 Home에서 state를 만들어주고 제어를 해 준다.

// Home.js

import { useEffect, useState } from "react";
import MainPopup from "../components/mainPopup";

function Home() {
  const [showMainPop, setShowMainPop] = useState(false);
  // 기본 세팅 값은 false
  const HOME_VISITED = localStorage.getItem("homeVisited");
  // localStorage에 homeVisited 조회
  
  useEffect(() => {
    const today = new Date();
    const handleMainPop = () => {
      if (HOME_VISITED && HOME_VISITED > today) {
      // 현재 date가 localStorage의 시간보다 크면 return
        return;
      }
       if (!HOME_VISITED || HOME_VISITED < today) {
      // 저장된 date가 없거나 today보다 작다면 popup 노출
        setShowMainPop(true);
      }
    };
    window.setTimeout(handleMainPop, 1000); // 1초 뒤 실행
  }, [HOME_VISITED]);
  return (
    <main className="home">

    
      {showMainPop && <MainPopup setShowMainPop={setShowMainPop}></MainPopup>}
      // MainPopup에 setShoMainPop전달
    </main>
  );
}

export default Home;

 

//MainPop.js

export default function MainPopup({ setShowMainPop }) {
//props로 setShowMainPop을 받아서 사용

  const closePop = () => {
    setShowMainPop(false);
  };

  const closeTodayPop = () => {
    let expires = new Date();
    expires = expires.setHours(expires.getHours() + 24);
    localStorage.setItem("homeVisited", expires);
    // 현재 시간의 24시간 뒤의 시간을 homeVisited에 저장
    setShowMainPop(false);
  };
  return (
    <div className="popup-wrapper">
      <div className="main-popup">
        <h1>팝업입니다.</h1>
        <button onClick={closeTodayPop}>오늘 하루 열지 않기</button>
        <button onClick={closePop}>닫기</button>
      </div>
    </div>
  );
}

 

오늘 시간은 today = new Date();로 알 수 있고

만약 일주일 뒤로 설정을 한다면 today.setDate(today.getDate()+7);로 설정할 수 있다.

 

 

위의 방법은 현재 날짜 기준으로 24시간이 지난 후 이며

만약 24시간이 아니라 오늘의 23시 59분 59초까지로 설정을 하려면 어떻게 할까?

 

 const closeTodayPop = () => {
    let expires = new Date();
    expires = expires.setHours(23, 59, 59, 0); //오늘 23시 59분 59초로 설정
    localStorage.setItem("homeVisited", expires);
    setShowMainPop(false);
  };