[React] 다시보지않기 / 24시간보지않기 팝업

 

 

Home 접근 시 뜨는 팝업 구현

 

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에 setShowMainPop전달
    </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);