이것도 봐주라 [광고 모달창 만들기]

승환입니다·2024년 2월 22일

Auction

광고를 보여줄 모달창을 만들었다.
구현하면서 내가 어떤 생각을 하면서 만들었는지 기록해보려고 한다.

구현 전 생각

광고 전용 모달창은 1일간 다시보지 않기 라는 기능이 있었기때문에 만료일이 필요했고 사용자가 브라우저를 이탈해도 유지되어 있어야했다.

두가지 방법이 생각났다.

쿠키를 이용
로컬스토리지를 이용
~~세션스토리지를 이용~~ (브라우저를 이탈하면 데이터가 사라진다.)

쿠키

쿠키는 만료일을 내가 설정할 수 있어서 비교적 쉽게 구현이 가능하다고 생각했다.
또한 4kb라는 최대용량은 모달창의 만료일을 저장하기엔 충분한 용량이였다.
사용자가 브라우저를 떠나도 유지되기까지 한다.

하지만 생각해야 할 점이 하나있었다.

쿠키는 http요청을 보냈을 때 서버에 같이 전달된다.

쿠키로 모달창을 컨트롤한다면 모달창이 많아졌을 때 서버에 부하올수도 있나?

아직 서버에 부하가 올 정도로 모달창이 많지않기때문에 쿠키를 우선순위로 두었다.

로컬스토리지

만료일을 내가 직접 구현해야한다.
최대용량 4kb ~ 10kb이기때문에 굉장히 충분한 용량을 가지고 있다.
사용자가 브라우저를 떠나도 유지된다.
서버 부하를 생각안해도 된다.

만료일을 내가 직접 구현해야한다.
내가 만료일을 직접 구현해야한다는 것에 대해 내가 하는 사이드프로젝트에서는 굳이 라는 생각이 들었다.

결론 : 쿠키를 사용해서 만들자.

export default function Home() {
  const [open, setOpen] = useState(false);
  const modalCookie = getCookie('ad-modal');

  useEffect(() => {
    setOpen(!modalCookie);
  }, []);

  return (
    <main className={styles.main}>
      <Banner />
      <MainIntroduce />
      {open && <AdvertisementModal setOpen={setOpen} />}
    </main>
  );
}

'use client';

import React, { useState } from 'react';
import classNamees from 'classnames/bind';
import Image from 'next/image';
import { setCookie } from 'cookies-next';
import styles from './index.module.scss';

type Props = {
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
};

const AdvertisementModal = ({ setOpen }: Props) => {
  const cx = classNamees.bind(styles);

  const oneDayInMillis = 24 * 60 * 60 * 1000;
  const handleGetModalCookie = () => {
    setOpen(false);
    setCookie('ad-modal', true, {
      expires: new Date(Date.now() + oneDayInMillis),
    });
  };

  const handleModalClose = () => {
    setOpen(false);
  };
  return (
    <div className={cx('wrapper')}>
      <div className={cx('image')}>
        <Image
          fill
          src="https://images.unsplash.com/photo-1607083206869-4c7672e72a8a?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt=""
        />
      </div>
      <div className={cx('buttons')}>
        <button
          onClick={handleGetModalCookie}
          className={cx('button-oneDay')}
          type="button"
        >
          1일간 다시 보지 않기
        </button>
        <button
          onClick={handleModalClose}
          className={cx('button-close')}
          type="button"
        >
          닫기
        </button>
      </div>
    </div>
  );
};

export default AdvertisementModal;