@solb/bottom-sheet 라이브러리 출시🚀

회사에서 유용하게 사용하던 bottom-sheet가 있어

이를 다른 사람들과도 공유하고 싶어 라이브러리로 만들게 되었다!

 

또한 npm에 올려 다른 사람들에게 소스 리뷰, 버그 등을 공유받고 싶은 마음도 있었다.

글로벌하게 사용되었으면 해서 영어로 문서화해 두었다..!

+ 문제점이나 개선 사항은 issue로 남겨주시면 수정해 보겠습니다 💪

 

bottom-sheet 관련 소스는 기존 포스팅에서 수정과 함께 typescript를 적용시켰다!  

@solb/bottom-sheet

pc버전

mobile 버전

순수 자바스크립트로 만든 bottom-sheet로, 모바일 웹이나 앱에서는 bottom-sheet 형태로 나타나고 웹에서는 모달 형태로 나타난다.

자세한 Demo는 여기서 확인할 수 있다 (👉 Demo)

이 컴포넌트는 web components로 만들어 어떤 프레임워크든지 상관없이 사용할 수 있다. React, Vue 공식 문서를 보면 web components를 어떻게 적용할 수 있는지 나와있다. web components를 처음 사용하는 분들을 위해 React.js와 Vue.js 같은 프레임워크에서 사용 예시를 업로드해 두었다.

나의 경우 회사 기술 부채?가 있어 당장 최신 프레임워크를 도입하는 것은 어려운 상황이었다.(기존 소스가 백과 프론트가 합쳐진 레거시가 거대했다!) 이런 환경 안에서, 재사용이 가능한 컴포넌트를 만들고자 했고 순수 자바스크립트만으로 구현이 가능한 web components를 활용했다. 

 

설치

npm

npm i @solb/bottom-sheet

import "@solb/bottom-sheet";
import "@solb/bottom-sheet/style/style.css";

cdn

<script src="https://cdn.jsdelivr.net/npm/@solb/bottom-sheet/dist/index.min.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@solb/bottom-sheet/style/style.css"/>

 

사용법

bottom-sheet 안에 자식 요소들은 무조건 main 태그로 감싸줘야 한다!
직접 React.js, Vue.js, Next.js에서 확인해 봤을 때는 모두 잘 동작했다.

 

기본 사용 예시는 아래와 같고

이외에 다른 예시는 여기서 확인할 수 있다.

<button
  type="button"
  onclick="document.getElementById('testBottomSheet').openSheet()"
>
  openSheet
</button>
<bottom-sheet id="testBottomSheet" title="Title is Lorem ipsum">
  <main class="_example">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </p>
    <div>
      <button
        type="button"
        onclick="document.getElementById('testBottomSheet').closeSheet()"
      >
        closeSheet
      </button>
      <button
        type="button"
        onclick="document.getElementById('testBottomSheet').fullSheet()"
      >
        fullSheet
      </button>
    </div>
  </main>
</bottom-sheet>

 

Props

title(optional)

bottom-sheet에 들어가는 제목을 넣어준다.

 

vh(optional)

기본으로 원하는 vh값이 있다면 그 값을 넣어준다. 값이 없을 경우 안에 들어가는 요소의 높이를 측정해 결정된다.

 

class(optional)

main 태그에 class명을 넣으면 스타일이 적용된다.

 

Methods

openSheet()

bottom-sheet를 연다.

 

openFullSheet()

전체화면으로 꽉 채워 bottom-sheet를 연다.

 

closeSheet()

bottom-sheet를 닫는다.

 

fullSheet()

기존에 열려있던 bottom-sheet를 전체화면으로 바꿔준다.

 

관련 링크

👉github 보러가기

GitHub - y-solb/bottom-sheet: Bottomsheet component made with pure JavaScript.

👉npm 보러가기

@solb/bottom-sheet

 

후기

생각보다 npm에 올리는 과정은 간단했다!

이 글을 보는 분들도 유용하게 사용했던 함수, 컴포넌트 등이 있다면 npm에 올려보는 것도 좋은 경험이 될 거 같다.

이 라이브러리가 누군가에게 도움이 되길 바라며 마무리하겠다 👋