[#250] 네컷사진 간헐적으로 노출 안되는 이슈

[JeonK1]

Issue No

• close 그룹 상세 네컷사진 간헐적으로 노출 안되는 이슈 #250

Overview (Required)

• 네컷사진 간헐적으로 노출 안되는 이슈
• 처음 앱 들어와서 그룹상세화면 들어갔을때 재현됨
• 히스토리 상세도 문제의 원인이었던 captureIntoCanvas 를 사용할 예정이어서 요거 머지한 다음에 머지할게요~
  => [#289] 히스토리 상세화면 공유하기 기능 추가 #318

원인

• 원인은 Composable 을 bitmap 으로 변경하기 위한 captureIntoCanvas 함수에 있음
• captureIntoCanvas 은 Composable 이 attach 되었을 때 인자로 전달받은 Picture 에 바로 그림을 그려주고, Picture 에 그려진 것을 Composable 에 그리는 식으로 구현되어있다.
• 여기서 사용하고있는 drawWithCache 는 그려둔 것을 캐시해두었다가 영역의 크기가 같거나, state 객체가 변경되지 않으면 캐시한 것을 내보내주어 그리기 횟수를 최소화하기 위한 함수이다. (공식문서 참조링크)
• AsyncImage 는 이미지를 비동기로 가져와서 업데이트가 되면, AsyncImage Composable 에 네트워크로부터 가져온 비트맵 이미지를 업데이트 하는 구조임
• 근데 이게 문제점이 AsyncImage 는 비동기로 가져와서 업데이트하는거라 우리처럼 상위 Composable 의 크기를 업데이트하지 않는 사례가 있음. 그렇다고 상위 Composable 의 state 가 바뀌는 것도 아님.
• 그러보니 우리앱은 이렇게 문제가 발생함
  • [1] attach 되자마자 AsyncImage 가 로드 되기전에 그려버림
  • [2] 그려버리기전에 이미지가 로딩되면 다행이지만, 그렇지 않으면 노출되지 않음
  • [3] 뒤늦게 이미지가 로딩되지만, 상위 Composable 크기를 업데이트하거나 state 를 바꾸는 형태가 아니다보니 draw 를 다시 하지 않으며, 하더라도 cache 했던 미노출 화면이 보여짐
  • [4] 그래서 이미지가 로딩되었지만 노출되지 않은 이슈가 발생

해결방법

• 진짜 진짜 다행히 우리와 같은 상황을 마주한 사람이 있었음.
  • https://blog.shreyaspatil.dev/capturing-composable-to-a-bitmap-without-losing-a-state
• 이 사람은 Flow 가 포함된 controller 를 가지고 있는 Modifier Node 를 커스텀하여 구현함. 그래서 외부에서 CaptureController.captureAsync 와 같은 함수를 통해 내부 flow에 신호를 보내주면, Modifier Node 에서 flow 를 관찰하고 있다가 신호가 들어왔을 때 captureIntoCanvas 의 로직을 실행하고 얻은 Picture 객체를 bitmap 으로 변환하여 반환하는 식으로 구현하였음.
• 그러고서 Compose UI 쪽 issueTracker 에 해당 이슈를 등록했는데, 작년 10월에 등록했는데 아직도 검토중임. P3 라서 딴거 처리하느라 못보는 중인듯.. (IssueTracker 참조링크)
• 그래서 저 블로그 저자가 문제를 해결하기 위해 만든 Capturable 이라는 라이브러리 소스코드를 참조해서 우리 앱에 맞게 살짝 수정해서 적용하였음
  • Capturable github link : https://github.com/PatilShreyas/Capturable/tree/master

Screenshot

Before

_2024_09_22_13_26_02_730.mp4

After

_2024_09_22_13_24_10_219.mp4

[oreocube]

오옹~ 비동기잇슈가 있었구나 멋지다

[SEO-J17]

와 지렸다 계원아.. 이런게 있었구나.. 하나 알아갑니다.. ㄷㄷ (지식 +1)