Modal창 사용법

[tkv00]

구현 모습

구현 경로

/src/components/common/Modal.jsx
/src/components/common/Header.jsx

구현 내용

import Button from "./Button";
import ReactDOM from "react-dom";
export default function Modal({
  title,
  inputText,
  onClick,
  type,
  isOpen,
  onClose,
}) {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm z-50">
      <div className="bg-white p-10 rounded-2xl shadow-global min-w-[60vw] h-80 flex flex-col gap-4 relative z-5">
        <h2 className="font-['BagelFatOne'] text-4xl">{title}</h2>
        <input
          className=" border-solid border-black border-[1px] h-14 p-3 rounded-full"
          type="text"
          placeholder={inputText}
        ></input>
        <Button text={"확인"} type={type} isValid={true} onClick={onClick} />
        <button
          className="absolute top-5 right-5 font-bold text-3xl"
          onClick={onClose}
        >
          &times;
        </button>
      </div>
    </div>,
    document.getElementById("modal")
  );
}

사용예시

 const [openModal, setOpenModal] = useState(false);
  //모달창 닫기
  const onClose = () => {
    setOpenModal(false);
  };


<Modal
        title="친구 추가"
        inputText="친구의 아이디를 입력하세요."
        onClick={onClick}
        type="submit"
        onClose={onClose}
        isOpen={openModal}
      />

title : 모달창 표시 제목
inputText : 모달창 입력창 placeholder
onClick : 확인 버튼 클릭 시 수행 함수
type : 모달창 버튼 type값
onClose : 모달창 닫기
isOpen : 모달창 상태useState
onClose 및 isOpen은 구현할 곳에 직접 구현 후 사용