✅ 진행한 기능

• Bottom Sheet : Hide 상태 추가
• 마커 해제시, 백버튼 누를때 Bottom sheet 숨기기
• Sheet 자동 펼치기

💡문제 해결 과정 기록

선택된 클러스터가 없을때, 백버튼을 눌렀을때 sheet가 사라지게 하기 위해 BottomSheetState 에 Hide를 추가해 네가지 상태로 구성했다.

한번에 여러 상태를 건너뛰지 못하는 문제 발생

sheet의 핸들을 드래그가 아니라 클릭했을때 현재 상태와 다음 상태를 정의해두고 이동하는 기능을 추가했었는데 AnchoredDraggableState 외에 별도의 currentState라는 변수를 두고 조작하게 했었다.

AnchoredDraggableState의 현재 상태가 바뀔때마다 currentState를 업데이트하고, 핸들을 클릭했을때 currentState를 업데이트 해 LaunchedEffect블럭에서 다시 AnchoredDraggableState를 조작했는데 이 과정에서 AnchoredDraggableState의 현재 상태가 바뀌었을때 currentState를 다시 업데이트하며 예상치 못한 동작이 발생했다.

AnchoredDraggableState의 상태를 명시적으로 전이시킬때 애니메이션을 사용하기 위해 animateTo 를 사용하는데 코루틴 스코프가 필요해서 초기에는 해당 방식을 사용했었다.

현재 상태를 별도의 변수에 저장해 사용하는것이 불필요하다고 생각해 rememberCoroutineScope 를 사용해 핸들의 클릭 리스너 내에서 sheet의 상태를 이동시키기로 했다.

  .clickable(
      interactionSource = remember { MutableInteractionSource() }, indication = null
  ) {
      scope.launch {
          state.animateTo(
              when (state.currentValue) {
                  BottomSheetState.Hide -> BottomSheetState.Hide
                  BottomSheetState.Collapsed -> BottomSheetState.HalfExpanded
                  BottomSheetState.HalfExpanded -> BottomSheetState.Collapsed
                  BottomSheetState.Expanded -> BottomSheetState.HalfExpanded
              }
          )
      }
  }

BottomSheet가 열려있을때 백버튼시 뒤로가기가 아닌 sheet 숨기기

BackHandler를 사용해 백버튼시 동작을 재정의 해본 경험은 있었지만 현재 상태에 따라 다르게 동작할 방법을 찾아야 했는데 바로 찾을 수 있었다.

BackHandler의 문서를 확인하니 onBack리스너 뿐만 아니라 enabled 파라미터가 추가로 있었고, enabled가 true일때만 onBack을 동작시키는 구조로 이루어져있었다.

enabled를 sheet가 열려있는지 확인하고, onBack에서 sheet를 닫는 구조로 만들 수 있었다.

사용성 개선

Bottom Sheet 컴포저블에 isOpened를 추가해 false일때는 Hide상태로, true일때는 기존에 열려있었으면 상태를 유지하고, Hide였을때는 HalfExpanded로 바꾸면 좋을것 같다는 개선요청이 있어 진행했다.

sheet의 현재 상태를 상위 컴포저블에서 뿌려줄 필요까지는 없을것 같아 isVisible로만 조작하게 했고, 해당 상태가 변화할때만 업데이트를 하기 위해서 isVisible을 key로 하는 LaunchedEffect 블럭 안에서 상태를 업데이트 하도록 했다.

LaunchedEffect(isVisible) {
    if (isVisible) {
        bottomPadding =
            with(density) { mapStatePosition[BottomSheetState.HalfExpanded]!!.toDp() }
        state.animateTo(BottomSheetState.HalfExpanded)
    } else {
        bottomPadding = with(density) { mapStatePosition[BottomSheetState.Hide]!!.toDp() }
        state.animateTo(BottomSheetState.Hide)
    }
}