[FE] 바텀시트 만들기

바텀시트

• 지도 메인 페이지, 길 찾기 결과 페이지에서 하단에서 시트가 올라오면서 사용자에게 자연스러운 UI로 정보를 제공

적용 방법

1. react-spring-bottom-sheet 라이브러리
2. 직접 구현

발전 과정

• 개발 초기 단계에서 지도 서비스 개발에 더 집중하고자, 바텀시트 같은 UI 부분은 라이브러리를 사용하여 적용시키자는 논의가 진행되었습니다.
• 라이브러리 적용 PR에서 지도 메인페이지에서 적용하였으나
• 직접 구현 PR에서 직접 Framer 라이브러리를 사용하여 자연스러운 애니메이션으로 만들 수 있었습니다.

라이브러리를 사용하지 않은 이유

1. Bottom Sheet Drag

• Bottom Sheet에 대한 여러가지 대안을 찾아봤지만, react-spring-bottom-sheet 라이브러리는 다음과 같은 단점들이 있었습니다.

1. strict mode를 해제해야 한다.
2. 마지막 업데이트가 3년전이다.
3. 사용법이 직관적이지 않다.
4. element 생성을 React Portal로 생성하는 방식을 사용해, body 바로 하위에 바텀 시트를 생성하고, 의도한 부모의 아래 생성되지 않는다.(이게 가장 컸습니다.)

Framer - Motion

• 바텀 시트 라이브러리 중, 쓸만한 것들은 React Native이거나, Custom이 어려워, 결국 직접 제작하기로 했습니다.
• 다만 CSS를 사용하는 방법은 개발 Overhead가 클 것 같아, 잘 나와있는 애니메이션 라이브러리인 Framer - Motion 사용했습니다.

라이브러리 제거 결과

• 라이브러리 제거 결과 자연스러운 애니메이션의 바텀시트를 완성하였고 코드를 변형하여 탑시트에도 애니메이션을 적용할 수 있었습니다.

2025-02-13.12.41.22.mp4

react-spring-bottom-sheet 제거 전 빌드 결과

• 번들 크기 652KB

react-spring-bottom-sheet 제거 후 빌드 결과

• 번들 크기 505KB

PR

• 라이브러리 적용 PR
• 직접 구현 PR
• 라이브러리 제거 결과