web Components로 bottomsheet 만들기

• 웹 컴포넌트를 이용해 바텀시트를 만드는 방법을 설명하며, PC에서는 모달 형태로, 모바일에서는 아래에서 위로 올라오는 바텀시트 형태로 나타나며, 외부에서 열고 닫을 수 있고, 전체 화면으로 당겨질 수 있도록 제작한다.

• 웹 컴포넌트의 생명주기를 이용해 바텀시트를 제어하며, 특정 속성의 추가, 삭제, 변경을 감지하여 실행되는 attributeChangedCallback() 함수를 사용한다.

• 이 코드는 사용자 정의 Bottomsheet를 생성하는 웹 컴포넌트를 설명하고 있습니다. Bottomsheet는 DOM에 추가되면 생성되며, 모바일 환경에서는 드래그 가능한 영역을 포함하고 있습니다.

• Bottomsheet는 제목과 닫기 버튼을 포함한 헤더와 내용을 가지며, 닫기 버튼이나 오버레이를 클릭하면 Bottomsheet가 닫힙니다. 또한, PC 환경에서는 모달로 표시됩니다.