CSS 모달창을 만들어보자구나!

뭔가 나만의 모달창을 라이브러리처럼 만들어놓고 싶어서, 만들어보았다.

import React from "react";
import styled from "styled-components";

const NotifModal = ({ setModalOpen, content }) => {
  // 모달창 노출
  const closeModal = () => {
    setModalOpen(false);
    console.log(1);
  };

  return (
    <Wrap onClick={closeModal}>
      {" "}
      <ModalCtn onClick={(e) => e.stopPropagation()}>
        <ContentBox>{content}</ContentBox>{" "}
        <CloseBtn onClick={closeModal}>확인</CloseBtn>
      </ModalCtn>
    </Wrap>
  );
};

const Wrap = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 998;
`;

const ModalCtn = styled.div`
  /* 모달창 크기 */
  width: 90%;
  height: 50%;
  padding: 20px;
  display: flex;
  flex-direction: column;

  /* 최상단 위치 */
  z-index: 999;

  /* 중앙 배치 */
  /* top, bottom, left, right 는 브라우저 기준으로 작동한다. */
  /* translate는 본인의 크기 기준으로 작동한다. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* 모달창 디자인 */
  background-color: #ddd;
  border: 1px solid black;
  border-radius: 8px;
`;

const CloseBtn = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 30px;
  background-color: white;
  border-radius: 10px;
  :active {
    background-color: gray;
  }
`;
const ContentBox = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80%;
`;

export default NotifModal;

위와 같은 코드는 가장 베이식한 모달창이고, 안에 내용이나 디자인등을 넣어 활용하면 될 것 같다.

 

 

페이지를 따로 만들어, 라우터를 달아주는 것보다 가끔은 모달창으로 표현하는 것이 데이터를 넘기기에도 편하고, 사용자 측면에서도 훨씬 좋은 인터렉션을 끌어낼 수 있다.

기본 모달창 이미지

 

닫기버튼을 어떻게 만들까?

 

 

 

이제 모달창을 닫을 때, 사용자의 편의성을 최대한 고려해보아야한다. 기존의 방식이라면 닫기버튼을 만들었겠지만

화면의 전체 면적에 비해서 버튼의 크기가 너무 작아, 사용자입장에서 불편할 것이라 생각되어 모달창 외부 클릭시에도, 닫기가 활성화되도록 만들어주자.

 

 

외부 클릭 시, 닫기 활성화 예시

 

 

 

가장 먼저, 아래 코드예시를 보면서 event.stopPropagation()에 대해 알아보자.

 

 

 

 

 

    <Wrap onClick={closeModal}>
      {" "}
      <ModalCtn onClick={(e) => e.stopPropagation()}>
        <ContentBox>{content}</ContentBox>{" "}
        <CloseBtn onClick={closeModal}>확인</CloseBtn>
      </ModalCtn>
    </Wrap>

 

 

 

 

 

웹페이지 내부에서는 자식태그의 onClick 이벤트가 실행되면, 순차적으로 올라가며 부모 태그들의 onClick 이벤트가 실행된다. 이것을 버블 업(Bubble-Up)이라고 한다.

 

위의 코드에서 닫기버튼이 클릭되면,   CloseBtn => ModalCtn  =>  Wrap  순서로 onClick 이벤트가 실행된다. 이러한 의도치 않은 클릭이벤트를 막기 위해, event.stopPropagation() 을 사용해준다. propagation은 영어로 전파,확산이라는 의미이다. 즉 , 전파되는 것을 막아주는 함수인 것이다.

 

다시 위의 코드를 보면, ModalCtn에 e.stopPropagation()가 들어가있는 것을 볼 수 있다.

그러면, 자식태그인 CloseBtn의 클릭이벤트가 실행되어도 가장 부모인 Wrap까지 확산되는 것을 막을 수 있다.

 

 

 

 

---

오늘 한 것

 

• Modal css 만들기
• Event.Propagation( ) 이란 무엇인가