팝업창은 어떻게 개발하나요?

웹 서비스를 이용하다보면 다음과 같은 팝업창을 본 적이 있을거에요

이번 글에서는 팝업을 어떤 식으로 개발하는지 알아볼게요

---

팝업을 개발하려면 먼저 다음 두가지에 대해 알고 있어야 합니다.

Cookie

• Cookie는 브라우저에 저장되는 데이터입니다.
  
• 이름, 값, 도메인, 경로, 만료일에 대한 정보를 갖고있습니다.
  
• 만료일이 지나면 자동으로 삭제됩니다.
• 팝업의 오늘 그만 보기 기능을 구현하는데 사용합니다.
  • 사용자가 버튼을 눌렀을 때 쿠키를 생성합니다.
  • 해당 페이지를 다시 방문했을 때 쿠키가 존재하는지를 확인하고, 쿠키가 없을 경우에 팝업을 노출시키는 방식으로 개발할 수 있습니다.
    
    

Dimmed

• 팝업을 강조하기 위해서 팝업 외 다른 부분에 반투명 음영을 넣는 것을 딤드라고 합니다.
• 팝업 외 다른 요소들보다 상위에 위치해야 하므로 z-index 속성을 사용합니다.
• 불투명도를 설정해야 하므로 opacity 속성을 사용합니다.

{
  z-index: 3000;
  opacity: 0.5;
  ...
}

---

React를 사용한 간단한 팝업 코드입니다.

Main.tsx

import * as React from "react";
import { useCookies } from "react-cookie";
import { default as Popup } from "../components/Popup";

function Main() {
  const [cookies, setCookie] = useCookies(["nonePopup"]);

  return (
    <div
      className="main"
      style={{
        backgroundImage: "url(https://edit-edition.com/images/mainbanner.jpg)",
        width: "100%",
        height: "100%",
      }}
    >
      {cookies.nonePopup ? null : <Popup setCookie={setCookie}></Popup>}
    </div>
  );
}

export default Main;

Popup.tsx

import * as React from "react";
import { useState } from "react";
import "../styles/Popup.scss";

interface PopupProps {
  setCookie: (
    name: "nonePopup",
    value: any,
    options?: CookieSetOptions | undefined,
  ) => void;
}

function Popup(props: PopupProps) {
  const [isVisible, setIsVisible] = useState<boolean>(true);

  const handleRightBtnClick = () => {
    setIsVisible(false);
  };

  const handleLeftBtnClick = () => {
    const expires = new Date();
    expires.setDate(expires.getDate() + 1);

    props.setCookie("nonePopup", true, { expires });
  };

  return (
    <>
      {isVisible ? (
        <div className="popup">
          <div className="popup__dimmed"></div>
          <div className="popup__modal">
            <div className="modal__content">
              <p>내용</p>
            </div>
            <div className="modal__bottom">
              <div className="bottom__left-btn" onClick={handleLeftBtnClick}>
                <p>오늘 그만 보기</p>
              </div>
              <div className="bottom__right-btn" onClick={handleRightBtnClick}>
                <p>닫기</p>
              </div>
            </div>
          </div>
        </div>
      ) : null}
    </>
  );
}

export default Popup;

Popup.scss

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3500;

  .popup__dimmed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
  }

  .popup__modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 450px;
    border: solid 1px;
    border-radius: 20px;
    background-color: #fff;

    .modal__content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 410px;
    }

    .modal__bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      display: flex;
      height: 40px;
      border-top: solid 1px;
      color: #000;
      cursor: pointer;

      .bottom__left-btn {
        border-right: solid 1px;
        border-bottom-left-radius: 20px;
        width: 150px;
      }

      .bottom__right-btn {
        border-left: solid 1px;
        border-bottom-right-radius: 20px;
        width: 150px;
      }

      .bottom__left-btn p,
      .bottom__right-btn p {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
      }
    }
  }
}

p {
  font-weight: bold;
  font-size: 15px;
}

---

브라우저에서는 다음과 같이 보여집니다.

• 팝업이 노출됐을 때 화면
  
  

• 팝업이 닫혔을 때 화면
  

• 오늘 그만 보기 버튼을 눌렀을 때 생성된 쿠키