문제: 댓글을 정상적으로 전송해도 댓글창이 비워지지 않는다?!
배경
현재 코드에서는 CommentDialog 에서 CommentViewModel 의 ResponseUiState 를 옵저빙하고 있다.
댓글 요청이 정상적으로 완료되면 ResponseUiState 를 Loading → Succeed 로 업데이트해준다.
그리고 만약 Succeed 라면 editText 의 값을 비워주는 간단한 로직이 있다.
최초로 다이얼로그를 show 한 후 댓글을 작성했을 때 uiState가 Success 로 제대로 observing 되었고, 따라서 아래 영상과 같이 editText 가 정상적으로 비워지는 것을 볼 수 있다.
문제 상황
그러나 문제 상황은 다이얼로그를 닫고 다시 show 할 때 발생했다.
이때 댓글을 작성할 경우 CommentViewModel 에서 로그를 찍어보면 ResponseUiState 가 Success 상태로 바뀌었고 observing 도 제대로 이뤄졌지만 editText 가 정상적으로 비워지지 않는 것을 볼 수 있다.
왜 이런 문제가 발생했을까?
추측1
하단의 editText 는 다이얼로그 화면위에 별도로 추가된 화면이기 때문에 둘이 참조하고 있는 ViewModel 인스턴스가 다른건 아닐까?
로그를 찍어보자.
editText 의 전송 버튼이 눌렀을 때 호출되는 ViewModel 의 해시값과 Dialog 에서 observing 하고 있는 ViewModel 의 해시값이 동일한 것을 알 수 있다.
즉, 하단 뷰와 다이얼로그 뷰는 동일한 ViewModel 인스턴스를 사용하고 있으므로 이것이 원인은 아니다.
추측2
그렇다면 화면에 띄워진 하단 뷰 객체와 Dialog 클래스에서 observing 하는 시점에서의 하단 뷰 객체가 다를건 아닐까?
이 또한 로그를 찍어보자.
최초로 다이얼로그가 띄워졌을 때, observing 하는 시점에서의 뷰 객체와 화면에 띄워진 뷰 객체는 동일하다.
그럼 다이얼로그를 닫고 다시 띄웠을 때는 어떨까?
😱뷰 객체가 다른 것을 볼 수 있다.
이게 원인이었다.
현재 코드에서 다이얼로그가 onViewCreated 될때마다 새로운 뷰를 생성해주지만 실제 화면에 띄워지는 뷰는 갱신이 안되는 것이다.
CommentDialog 객체는 Activity 가 생성될 때 한번만 생성되는 인스턴스다.
하단 뷰를 띄울 때는 BottomFixedItemBottomSheetDialog 클래스에서 아래와 같이 bottomFixedItemView에 담긴 뷰를 동적으로 addView 해주고 있다.
bottomFixedItemView 는 CommentDialog 가 생성될 때의 값이 들어가있기 때문에 하단 뷰를 띄울는 시점에는 업데이트 된 뷰가 아닌 처음 뷰의 값이 들어가있게 된다. 그러므로 이전 뷰를 띄우게 되는 것이다.
해결
따라서 하단 뷰 바인딩 객체를 계속 생성하는 것이 아니라 하나의 인스턴스를 공유하도록 하면 다이얼로그를 다시 띄워도 정상적으로 editText 가 비워지는 것을 볼 수 있다 ㅎㅎ
+ 번외 문제: 마지막 댓글이 보이지 않는다?!
위의 문제를 해결하다가 또 다른 문제를 발견했다.
문제 상황
처음 댓글창을 열었을 때는 마지막 댓글까지 잘 보인다.
그러나 다시 댓글창을 열었을 때는 마지막 댓글이 보이지 않는다.
이 또한 위의 문제와 같은 원인이다.
BottomSheetDialogFragment 클래스에서 아래와 같이 하단 뷰 높이만큼 padding 줘서 마지막 댓글이 보일 수 있도록 하는 코드이다. 여기서 View 는 dialogView 를 가리킨다.
CommentDialog 클래스에서 dialogBinding 객체는 계속 업데이트 되지만 dialogView 의 값은 업데이트 되지 않기 때문에 BottomSheetDialogFragment 에서 사용하는 뷰는 여전히 이전 뷰를 가리키게 되어 padding 이 적용되지 않은 것 처럼 보였던 것이다.
해결
<기존 코드>
따라서 dialogView 에 접근할 때 값이 업데이트될 수 있도록 커스텀 게터를 이용하면 해결된다!
<수정 코드>
이제 다이얼로그를 다시 열었을 때도 마지막 댓글까지 잘 보이는 것을 확인할 수 있다!!
