Modal 만들기

알림창을 띄울 때, 로그인 등 입력값을 받아야할 때 등 여러 상황에서 Modal이 쓰인다. 가장 기본적인 기능을 가진 Modal을 만들어보고, 최근에 진행하고 있는 project에 적용시켜보기로 했다.

1. modal component

'open modal' 버튼에 onClick 이벤트를 적용하고, 버튼을 클릭하면 showModal 값이 true로 바뀌도록 상태관리를 해줬다. showModal이 true가 되면 Modal이 나타난다.

const [showModal, setShowModal] = useState(false);

const onShowModal = () => {
  setShowModal(true);
};

const onHideModal = () => {
  setShowModal(false);
};

<div className={styles.container}>
  <button className={styles.modalButton} onClick={onShowModal}>
   Open Modal
  </button>
  {showModal && <div className={styles.modal}>
    <div className={styles.box}>
     <button onClick={onHideModal}>x</button>
     <span>HELLO WORLD</span>
    </div>
   </div>}
</div>

2. CSS

Modal은 사실 로직보다 css가 더 중요한 것 같다. position 속성을 알고 있는지가 관건이다.

부모클래스의 position은 relative로 주고, 자식 클래스 position은 absolute로 하면 부모의 영역 안에서 자식의 위치를 top, left, right, bottom값으로 조정할 수 있다.

modal처럼 부모클래스의 영역을 전부 이용하고 싶다면 width, height를 모두 100%로 설정하면 된다.

.container {
    border: 1px solid grey;
    position: relative;
}


.modal {
    width: 100%;
    height: 100%;
    background-color: #00000080;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    border-radius: 8px;
}

.box {
    width: 50%;
    height: 50%;
    background-color: white;
    border-radius: 10px;
}

3. 완성

4. 적용하기

간단한 일기장을 만들고 있는데, 일기의 등록과 수정은 모두 modal을 띄워진행하기로 했다. 테스트로 테마를 변경하는 중