feat : 모달 컴포넌트 구현

[SeieunYoo]

🛠 관련 이슈

• Resolved: [feature] 공통 컴포넌트 세팅 #5

🌱 PR 포인트

• Modal 컴포넌트 구현
• Overlay 컴포넌트 사용해서 뒤에 딤 부분을 처리했습니다.
• ModalHeader Content Footer 부분으로 나눠서 합성 컴포넌트 방식으로 구현했습니다.

UseCase

const modalProps = useOpen();

{modalProps.open && (
        <Modal {...modalProps}>
          <Modal.Header>기록을 삭제하시겠습니까?</Modal.Header>
          <Modal.Content>그만하기 선택시 기록중인 글은 저장되지 않고 삭제됩니다.</Modal.Content>
          <Modal.Footer>
            <Modal.Button onClick={modalProps.onClose}>취소</Modal.Button>
            <Modal.Button css={{ color: theme.color.orange }}>그만하기</Modal.Button>
          </Modal.Footer>
        </Modal>
      )}

📸 스크린샷 / 링크

Modal 컴포넌트

📎 레퍼런스

❗ 이슈사항 / 기타사항 / 에러슈팅

[shubug1015]

혹시 overlay 영역 클릭 시 모달 닫는 액션은 따로 없는걸까용?