IceCraft - 팝업 만들기 (쿠키 라이브러리)

프로젝트에서 우리가 캠과 마이크가 필요한 게임을 만들다 보니 사용자에게 공지사항겸 팝업창을 만들기로 하였다.

팝업은 자바스크립트나 제이쿼리를 사용해서 만들었던 기억이 있었는데 리액트는 어떻게 구현하나 찾아보던 중

쿠키 라이브러리가 있었다.

 

 

 

쿠키 라이브러리 

react-cookie

 

 

 

간단하게 버튼으로 하루 창 닫기와 닫기 버튼을 만들 예정이라 간단하게 구현하였다.

"use client";

import React, { useEffect, useState } from "react";
import S from "@/style/commons/commons.module.css";
import { useCookies } from "react-cookie";
import Link from "next/link";

const Popup = () => {
  const [open, setOpen] = useState(false);
  const [cookies, setCookie] = useCookies(["IceCraft_Cookie"]);

  //닫기
  const closeModal = () => {
    setOpen(false);
  };

  //하루 보지 않기
  const closeForADay = () => {
    const expires = getExpiredDate(1);
    setCookie("IceCraft_Cookie", true, { expires });
    setOpen(false);
  };

  const getExpiredDate = (days: number) => {
    const date = new Date();
    date.setDate(date.getDate() + days);
    return date;
  };

  useEffect(() => {
    setOpen(true);
    if (cookies["IceCraft_Cookie"]) {
      setOpen(false);
    }
  }, []);

  if (!open) return null;

  return (
    <article className={S.article}>
      <div className={S.popupContent}>
        <h2>공지사항</h2>
        <div>
          <p>IceCraft를 방문해 주셔서 감사합니다.</p>
          <p>
            현재 마피아 게임은 <span>&quot;캠&quot;</span>과 <span>&quot;마이크&quot;</span>가 있으신 분들만 게임이
            가능합니다. 이용에 참고해 주시기 바랍니다.
          </p>
          <Link href="">오류 및 버그 문의하기 &#40;클릭&#41;</Link>
        </div>
      </div>
      <div className={S.closeButton}>
        <button onClick={closeForADay}>하루 보지 않기</button>
        <button onClick={closeModal}>닫기</button>
      </div>
    </article>
  );
};

export default Popup;

 

useState훅으로 open상태를 true,false로 만든다.

useCookies훅을 사용하여 IceCraft_Cookie라는 이름의 쿠키를 관리하였다.

 

 

 

 

먼저 쿠키의 유효기간을 지정하는 함수를 생성한다.

getExpiredDate 함수는 현재 날짜에 지정한 일수를 더한 만료일을 반환한다.

  // 쿠키의 유효기한을 지정하는 함수
  const getExpiredDate = (days: number) => {
    const date = new Date(); // 현재 시간을 받아온다
    date.setDate(date.getDate() + days);
    // 현재시간 날짜 + days 만큼 더하여 유효기간을 지정해준다.
    return date;
  };

 

 

 

그리고  getExpiredDate 함수를 호출하여 1일뒤의 만료일을 계산한다.

setCookie 함수를 사용하여 IceCraft_Cookie를 설정하고 유효기간을 지정한다.

  //하루 보지 않기
  const closeForADay = () => {
    const expires = getExpiredDate(1);
    setCookie("IceCraft_Cookie", true, { path: "/", expires });
    setOpen(false);
  };

 

setCookie("IceCraft_Cookie", true, { path: "/", expires });

이 내용은 라이브러리의 setCookie함수를 사용하여 쿠키를 설정하는 코드이다.

IceCraft_Cookie : 쿠키 이름

true : 쿠키에 저장할 값 

{ path: "/", expires } : 쿠키의 옵션을 설정하는 객체, path는 유효한 URL경로를 지정한다

"/"로 설정하면 도메인의 모든 경로에서 쿠키가 유효하도록 가능하다.

expires : 쿠키의 만료 날짜 지정, getExpiredDate 함수로 쿠키의 만료 날짜를 지정해주었음.

 

 

 

 

useEffect로 컴포넌트가 마운트될때 IceCrraft_Cookie가 존재하는지 확인하고 쿠키가 존재하면 팝업을 닫는다.

  useEffect(() => {
    setOpen(true);
    if (cookies["IceCraft_Cookie"]) {
      setOpen(false);
    }
  }, []);

 

 

 

 

약간의 트러블 슈팅?

setOpen을 기본으로 useState훅에다가 true로 넣었었는데 새로고침할때마다 깜빡이면서 사라지는 현상이 있었다.

그냥 처음부터 false로 두고 useEffect훅 안에 넣어 컴포넌트가 마운트될때 setOpen(true)를 넣어버렸다.

쉽게 해결하였음