Replace BottomSheetScaffold with ModalBottomSheet

[yuni-ju]

작업 내용

문제 상황

프로필 이미지 수정화면에서 바텀시트 노출 후 뒤로가기 버튼 클릭 시 의도대로 동작하지 않음

해결 과정

1. 기존의 바텀시트 BottomSheetScaffold 를 ModalBottomSheet로 변경

ModalBottomSheet는 Dialog개념으로 닫으면 Dispose되고, 앱의 최상단에 뜨며 뒷배경이 어두워집니다.
반면, BottomSheeetScaffold는 뒷 배경이 어두워지지 않으며 뒤쪽 UI와 동시에 상호작용이 가능한 화면 레이아웃에 해당합니다.

기존에 있던 모든 BottomSheet가 Dialog의 성격에 가까우므로 전체 코드를 변경하기로 했습니다.

2. BottomSheetController생성

ModalBottomSheet를 루트화면(MainScreen, AccountScreen)에서 한번만 생성하고, 하위 화면에서 콘텐츠를 변경하거나 제어하는 방식을 사용합니다.
각 화면에서 BottomSheetController의 setContent에 표시하고 싶은 Dialog를 설정하고, show(), hide()로 제어합니다.

3. CompositionLocalProvider로 불필요한 파라미터 제거

기존에는 bottomSheetState를 하위 컴포저블로 전달해서 사용했었는데, 실제 필요한 컴포저블이 아니더라도 중간의 모든 컴포저블이 이를 깊숙이 전달해야했습니다. 이는 유지 보수가 어렵고, 결합도 증가하는 문제가 있습니다.

이를 개선하기 위해 CompositionLocalProvider(LocalBottomSheetController provides bottomSheetController) 를 추가했습니다.

필요 시 각 컴포저블에서 val bottomSheetController = LocalBottomSheetController.current를 사용해 바텀시트를 제어할 수 있습니다.

작업 결과

모든 바텀 시트의 뒤로가기가 의도대로 동작하였으며,

임의로 뒷배경을 어둡게 하는 코드, BackHandler설정, 불필요한 파라미터 등을 모두 제거할 수 있었습니다.

🤗

참고

• resolved : [bug] Fix back press behavior for bottom sheet #707