0. 인트로
그래서 이번 포스팅에서는 모달리스의 개념과 모달리스를 구현해나가는 과정을 기록하고자 한다.
1. 개념
(1) Modal(모달)
- 모달은 대화상자(dialog)가 실행될 때 제어권을 독점하게 되어, 대화 상자가 종료되기 전까지는 기존 화면을 제어할 수 없는 방식을 뜻한다.
(2) Modeless(모달리스)
- 모달리스는 대화 상자(dialog)가 실행되더라도 기존 화면을 제어할 수 있는 방식을 뜻한다.
2. 찾아보기
MUI(Material UI)의 Modeless라는 컴포넌트는 따로 존재하지 않았다. 그래서 “mui modeless”라는 키워드를 검색하던 도중 stackoverflow에서 non modal dialog에 대한 질문이 있었다.
링크 : https://stackoverflow.com/questions/55733179/how-to-create-a-non-modal-dialog-in-material-ui
(1) customize Dialog
- 첫번째 답변으로 Dialog 컴포넌트를 쓰되 css 속성 중 pointerEvents: none으로 설정해 사용하라고 한다.
- MUI Dialog : https://mui.com/material-ui/react-dialog/
- Dialog를 브라우저 바깥으로 드래그하면 화면에서 없어진다.
- 브라우저 바깥으로 드래그하면 이동을 제한시키는 로직이 필요하다.
(2) use Popper
- 두번째 답변으로는 Dialog 컴포넌트는 Modal 컴포넌트를 기반으로 상속받은 것이므로, 메인 컨텐츠가 block되게 만들고 싶지 않으면 Dialog 대신 Popper을 쓰라고한다.
- MUI Popper : https://mui.com/material-ui/react-popper/
- 문서를 천천히 읽어보면서 요구 사항에 맞추기 위해서는 너무 많은 커스터마이징이 필요할 것 같다는 생각이 들었다.
(3) Wrapping with react-Draggable
- 사용성을 위해 모달리스 창이 드래그 가능하도록 구현해야한다.
- Dialog 컴포넌트를 커스터마이징해서 쓰되 이를 다시 react-Draggable로 다시 래핑해 사용한다.
- react-Draggable 컴포넌트의 bounds props로 모달리스 창이 특정 영역이 넘어가지 못하도록 드래그를 제한시킨다.
<Draggable bounds="html">{Something}</Draggable>- 브라우저 바깥으로 드래그하면 이동을 제한시킬 수 있다.
- https://codesandbox.io/s/k5n52xq70r?file=/src/components/App.js
참고자료
개발 일지를 작성합니다