프로젝트에서 가장 많이 사용하는 기능은 modal 창인 것 같습니다.
react 라이브러리가 잘 되어있어서 라이브러리를 다운 받아 사용하는 경우도 많지만,
직접 구현해 보는 것도 좋은 공부가 될 것 같아 modal창을 구현해보았습니다.
제가 구현한 방법은 hook
를 이용해 true와 false
에 따라 모달창이 나타나고 사라지도록 하였습니다.
모달창도 하나의 태그이기 때문에 모달창이 나타나면 다른 태그들이 밀림 현상이 나타납니다.
이런 현상을 방지하기 위해 positive
를 활용해 부모 태그에는 position:reletive
를 적용시켜주고 자식 태그(모달창)에는 position:absolute
를 적용시켜줍니다.
이렇게 되면 absolute를 가진 자식 태그(모달창)은 부모의 울타리 안에는 있지만, 그 울타리 안에서는 누구에게도 영향을 받지 않습니다.
그 다음 중요하게 생각할 부분이 모달창을 구현한 뒤 배경만 약간 어둡게 해주어야 모달창이 좀 더 돋보이게 나타날 수 있습니다.
이것을 활용하기 위해 opacity를 사용하면 전체가 어두워지기 때문에 backgorund-color속성에 rgba
를 사용해 투명도를 주면 해당 태그(부모)만 어두워지게 되어 모달창이 돋보이게 적용할 수 있습니다.
아래 코드는 react와 styled-componets를 활용해 구현한 코드입니다.
function Modal() {
const [isModal, setIsModal] = useState(false);
const ModalHandler = () => {
setIsModal((prev) => !prev);
};
return (
<>
<Wrapper>
<Title>Modal</Title>
{isModal ? (
<ModalBackground>
<ModalBox>
<ModalBtn onClick={ModalHandler}>X</ModalBtn>
HELLO CODESTATES!
</ModalBox>
</ModalBackground>
) : (
<OpenModal onClick={ModalHandler}>Open Modal!</OpenModal>
)}
</Wrapper>
</>
);
}
const OpenModal = styled.button`
background-color: ${(props) => props.theme.blue};
width: 150px;
height: 80px;
border: none;
border-radius: 30px;
color: white;
font-size: 20px;
font-weight: 600;
cursor: pointer;
`;
const ModalBackground = styled.div`
position: relative;
width: 100%;
height: 100%;
background-color: rgba(102, 100, 100, 0.3);
display: flex;
justify-content: center;
align-items: center;
`;
const ModalBox = styled.div`
position: relative;
width: 400px;
height: 150px;
z-index: 10;
color: ${(props) => props.theme.blue};
background-color: white;
font-size: 30px;
font-weight: 600;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const ModalBtn = styled.button`
margin-bottom: 30px;
border: none;
background-color: white;
font-size: 20px;
cursor: pointer;
`;