모달창 구현을 간단하게 해봅니다!
일단 컴포넌트에 모달창을 재사용 가능하도록 넣어줍니다.
모달컴포넌트
import { ReactNode } from "react";
import styled from "styled-components";
interface ModalType {
children?: ReactNode;
isOpen: boolean;
toggle: () => void;
}
const ModalOverlay = styled.div`
z-index: 9999;
width: 100vw;
height: 100vh;
position: absolute;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
`;
const ModalBox = styled.div`
display: block;
background: white;
width: 20%;
height: 50%;
padding: 1rem;
border-radius: 1rem;
margin-bottom: 10%;
text-align: center;
`;
export default function Modal(props: ModalType) {
return (
<>
{props.isOpen && (
<ModalOverlay onClick={props.toggle}>
<ModalBox onClick={(e) => e.stopPropagation()}>{props.children}</ModalBox>
</ModalOverlay>
)}
</>
);
}
모달창 사용 페이지
export default function SignUp() {
const [isOpen, setisOpen] = useState(false);
const toggle = () => {
setisOpen(!isOpen);
};
return (
<Body>
...생략
<span onClick={toggle}>내용보기</span>
<Modal isOpen={isOpen} toggle={toggle}>
<div>개인정보 이용에 대한 안내</div>
<Btn onClick={toggle}>확인</Btn>
</Modal>
</Body>
);
}😊결과화면(아직 내용 작성은 안했습니다)
개발자의 길에 당차게 들어서다!!