[React & Next.js] 모달 만들기

[React & Next.js] 모달 만들기

 

영상

 

반응형

---

모달의 형식

기본적인 모달의 형식은 

 

1. 모달 내용 부분

    - 내용 부분이 화면 가운데 오면서 고정되고, 다른 아이템들보다 가장 위에 있어야 한다.

       화면고정 : fixed

       화면 가운데 위치 : top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]

       가장 위에 위치 : z-[1000] (다른 아이템들의 z-index보다 높게 설정하면 됨)

       배경색 : 원하시는 배경색 입력

 

2. 모달 바깥 부분

    - 모든 화면을 포함하고, 반투명한 배경이며, 모달 내용 부분 보단 낮고 다른 아이템들 보다는 위에 있어야 한다. 

    - 모달 바깥 부분(= 모달 내용 부분을 제외한 부분)을 클릭하면 모달 창이 종료되도록 한다.

       화면고정 : fixed

       전체화면 포함 : top-0 left-0 w-full h-full

       두 번째로 위에 위치 : z-[101] (모달 내용 부분보단 낮고, 다른 아이템들보단 높게 설정하면 됨)

       반투명한 배경 : rgba(0, 0, 0, 0.5)

---

코드

import Developer from "@/components/Developer/Developer";
import CloseModalBtn from "@/components/Buttons/CloseModalBtn";

export default function NewsModal({ closeNewsModal }) {
  return (
    <div>
      {/* 모달 내용 */}
      <div
        // 상위 컴포넌트로 이벤트 전파 방지 (버블링 방지)
        onClick={(event) => event.stopPropagation()}
        className="bg-[#fff] fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] rounded-lg w-[615px] z-[1000] p-[20px]"
      >
        <CloseModalBtn onClick={closeNewsModal} />

        <div className="flex flex-row justify-center items-center text-[30px] my-[20px] bg-[#e52448] text-white px-[10px] py-[1px] rounded-lg w-fit">
          새소식
        </div>

        <h3 className="text-[24px] mb-[20px] font-semibold">
          Open Airbnb Clone 2024
        </h3>

        <div className="text-[18px] font-medium">
          안녕하세요. <br />
          에어비앤비 클론코딩 2024에 오신 것을 격하게 환영합니다. 🙇‍♂️
        </div>

        <div className="flex flex-row justify-end items-center mt-[40px] gap-[20px]">
          <div>Developer Github</div>
          <Developer />
        </div>
      </div>

      {/* 모달 바깥 부분 */}
      <div
        onClick={closeNewsModal}
        className="fixed top-0 left-0 w-full h-full z-[101] bg-[var(--modal-outside-bg)]"
      ></div>
    </div>
  );
}