ant design 사용해서 모달 만들기

1.ant design 사용해서 모달 만들기
(1) 알림창 만들기

import {Modal} from "antd";


export default function ModealAlertPage(){

    function onClickSuccess(){
        Modal.success({
            content: '게시물 등록에 성공했습니다',
          });
    }
    function onClickFail(){
        Modal.error({
            content: '게시물 등록에 실패했습니다',
          });

    }

return (
<>
<button onClick={onClickSuccess}> 알림창 나타나기!!(실패했을때 메세지)</button>
<button onClick={ onClickFail}> 알림창 나타나기!!(성공했을때 메세지)</button>
</>

)
}

(2) 모달창 열기

import { useState } from "react";
import {Modal, Button} from "antd"

export default function ModalBasicPage(){
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
      setIsModalVisible(true);
    };
  
    const handleOk = () => {
      setIsModalVisible(false);
    };
  
    const handleCancel = () => {
      setIsModalVisible(false);
    };

    return(
  <>
      <Button onClick={showModal}>
        모달창 열기!!
      </Button>
      <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        비밀번호 입력: <input type="password"/>
        
        
      </Modal>
    </>
  );
};