Date와 인연이 깊은지 날짜 선택 UI를 custom 해서 개발해야 하는 경험을 두 번째 하게 되었다. mui datepicker를 붙이기엔 너무 과해서 react-calendar 라이브러리를 사용하려고 했는데, 문제는 input은 함께 딸려오지 않기 때문에 input 관련 interaction은 직접 구현해야 했다. 인 하우스용 서비스라 여러 라이브러리 참고해서 직접 인터렉션을 정의하고 구현해 보았는데 기록 차 경험을 남겨본다! TL;DR; 전체 구현 결과물은 code sandbox에서 확인할 수 있다. DatePicker 컴포넌트를 개발해 보자! (calendar는 라이브러리를 사용) 딱히 input에 대한 큰 요구사항이 없이 기능 개발을 해야 하는 경우 그냥 react-date-picker를 써라 DatePicker 컴포넌트 개발 dependency react-calendar dayjs props 설계 minDate, maxDate: date range를 지원해야하므로 …

문제상황 dropdown 컴포넌트를 만들었는데, focus가 다른곳으로 이동하면 펼쳐져있던 dropdown이 접혀져야 해서 blur 이벤트 발생시 접히도록 했다. 그랬더니 펼쳐져 있는 항목 중 하나를 click 했을때, 위에서 설정한 blur 이벤트가 먼저 발생하면서 click 이벤트가 호출되지 않는 이슈가 문제였다. dropdown_비정상동작.gif 문제의 코드 TL;DR Touch, mouse 이벤트 순서 touchstart touchmove touchend mouseover mousemove mousedown mouseup click 해결방법 click시 처리해줘야 하는 이벤트 핸들러를 click 이 아닌 mousedown 에서 처리해준다. dropdown_정상동작.gif Dropdown CodeSandbox Touch and mouse 이벤트 그러면 지금부터는 web.dev 문서를 살펴보면서 알게된 touch 이벤트의 도입 배경과 touch, mouse 이벤트를 함께 다루기…

보통 어플리케이션에서 공통된 디자인의 confirm 창을 사용한다. 이때, window.confirm과 같이 고객의 OK/CANCEL 클릭 여부에 따라서 다음 동작을 이어나가게 하고싶다면 어떻게 구현해야할까? 준비물 Modal Component (global 하게 등록) Global State Modal Hook 보통 웹 어플리케이션에서는 공통된 디자인의 confirm을 사용하므로 화면에 보여지는 역할을 하는 Modal Component가 필요하다. 이 컴포넌트는 어플리케이션 전반에 걸쳐서 자주 사용하는 라이브러리이므로 App.js에서 global 하게 로드한다. global 하게 등록된 Modal 컴포넌트를 제어하기 위해서는 어플리케이션 어느 곳에서든 제어 가능하게 하기 위해서 global state가 필요하다. 그래서 modal 관련 state가 변경되었을때, Modal 컴포넌트가 render 되게 한다. 이제 window.confirm 처럼 사용하기 위해 confirm 함수를…