React 바텀시트가 제대로 뜨지 않는 문제

Question

모바일에서 react-spring-bottom-sheet 를 사용해 바텀시트를 띄우고 있는데 종종 바텀시트가 아래서 올라오지 않고, 화면 콘텐츠 바로 아래 붙어서 표시됩니다.

제대로 동작하는 페이지와 아닌 페이지에 구조차이가 없어서 문제가 발생하는 원인을 잘 모르겠습니다.

비슷한 문제가 있으셨거나 해결방법을 하시는 분이 계실까요?

이은재 · Answer

제대로 동작하는 페이지와 구조 차이가 없다면 바텀 시트의 자체 스타일이 깨지는 것일 수도 있을 것 같습니다. 찾아보니 사용하시는 라이브러리의 스타일(react-spring-bottom-sheet/dist/style.css)을 따로 import 해주는 것으로 보이는데 확인해보시면 좋을 것 같습니다. 문제가 되지 않는다면 매 컴포넌트에서 스타일을 import 하는 것 보다 최상위 컴포넌트에서 import하는 것이 더 나을 수도 있을 것 같습니다.

문제가 되지 않는다면 매 컴포넌트에서 스타일을 import 하는 것 보다 최상위 컴포넌트에서 import하는 것이 더 나을 수도 있을 것 같습니다.