이전에는 sweetAlert이라는 라이브러리를 활용하여 모달창을 만들어봤습니다.

타입스크립트를 적용해서 만들어봤습니다.

우선 필요한 건 2개의 컴포넌트 입니다.

1. Modal.jsx
2. base.jsx 2개가 필요합니다.

---

Modal.jsx

Modal.jsx

import React, { PropsWithChildren } from 'react';
import styled from 'styled-components';

interface ModalDefaultType {
  onClickToggleModal: () => void;
}

function Modal({
  onClickToggleModal,
  children,
}: PropsWithChildren<ModalDefaultType>) {
  return (
    <ModalContainer>
      <DialogBox>{children}</DialogBox>
      <Backdrop
        onClick={(e: React.MouseEvent) => {
          e.preventDefault();

          if (onClickToggleModal) {
            onClickToggleModal();
          }
        }}
      />
    </ModalContainer>
  );
}

const ModalContainer = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
`;

const DialogBox = styled.dialog`
  width: 400px;
  height: 200px;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  border: none;
  border-radius: 3px;
  box-shadow: 0 0 30px rgba(30, 30, 30, 0.185);
  box-sizing: border-box;
  background-color: white;
  border: 0.5px solid black;
  z-index: 10000;
  
`;

const Backdrop = styled.div`
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.2);
`;

export default Modal;

base.jsx

base.jsx
import { useState, useCallback } from 'react';
import styled from 'styled-components';
import Modal from 'components/common/Modal';
function Base() {
  const [isOpenModal, setOpenModal] = useState<boolean>(false);

  const onClickToggleModal = useCallback(() => {
    setOpenModal(!isOpenModal);
  }, [isOpenModal]);

  return (
    <Main>
      {isOpenModal && (
        <Modal onClickToggleModal={onClickToggleModal}>
          <ModalTitle>
            <h1>모달 </h1>
          </ModalTitle>
          <ModalContents>
            <p>모달 내용입니다. 잘부탁드려요</p>
          </ModalContents>
          <CloseButton
            onClick={() => {
              setOpenModal(!isOpenModal);
            }}
          >
            Close
          </CloseButton>
        </Modal>
      )}
      <DialogButton onClick={onClickToggleModal}>Open Modal</DialogButton>
    </Main>
  );
}

const Main = styled.main`
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

const ModalTitle = styled.div`
  color: orange;
  margin-top: 30px;
  font-size: 32px;
`;
const ModalContents = styled.div`
  color: orange;
  margin-top: 10px;
  font-size: 18px;
`;

const DialogButton = styled.button`
  width: 160px;
  height: 48px;
  background-color: cornflowerblue;
  color: white;
  font-size: 1.2rem;
  font-weight: 400;
  border-radius: 50px;
  border: none;
  margin-top: 200px;
  cursor: pointer;
`;
const CloseButton = styled.button`
  background: none;
  color: gray;
  border: 2px solid;
  padding: 5px 20px;
  font-size: 18px;
  transition: color 0.2s, border-color 1s, transform 0.5s;
  position: absolute;
  bottom: 10px;
  right: 20px;

  cursor: pointer;

  &:hover {
    border-color: black;
    color: black;
    box-shadow: 0 0.5em 0.5em -0.4em;
    transform: translateY(-5px);
    cursor: pointer;
  }
`;

export default Base;