bottomsheet

회사에서 유용하게 사용하던 bottom-sheet가 있어 이를 다른 사람들과도 공유하고 싶어 라이브러리로 만들게 되었다! 또한 npm에 올려 다른 사람들에게 소스 리뷰, 버그 등을 공유받고 싶은 마음도 있었다. 글로벌하게 사용되었으면 해서 영어로 문서화해 두었다..! + 문제점이나 개선 사항은 issue로 남겨주시면 수정해 보겠습니다 💪 bottom-sheet 관련 소스는 기존 포스팅에서 수정과 함께 typescript를 적용시켰다! @solb/bottom-sheet 순수 자바스크립트로 만든 bottom-sheet로, 모바일 웹이나 앱에서는 bottom-sheet 형태로 나타나고 웹에서는 모달 형태로 나타난다. 자세한 Demo는 여기서 확인할 수 있다 (👉 Demo) 이 컴포넌트는 web componen..

내가 만들고자 하는 바텀시트는 1. pc에서는 모달형태로 나타나고 mobile에서는 아래에서 위로 올라오는 바텀시트 형태로 나타나야 한다. 2. 외부에서 열고 닫을 수 있어야 한다. 3. full(전체가 채워지도록)로 당겨질 수 있어야 한다. 4. 제목과 상단에 닫기 버튼의 여부를 attribute 형태로 전달받는다. 이런 기능을 가지고 있어야 한다. + 미리 결과를 보여주자면...! 순수한 자바스크립트로 바텀시트를 만들어봤다 바텀시트를 여러 곳에서 간편하게 쓰기 위해(함수로도 만들어보고 클래스로 해보려다가...) Web components로 만들게 되었다 ㅎㅎ 리액트나 뷰 등을 사용하지 않고 순수 자바스크립트로 컴포넌트를 만들 수 있는 방법이 있는데 바로 Web components를 사용하면 된다!! ..