[IDLE-471] 말풍선 메세지가 너무 길 경우 더보기 버튼 추가 및 전체 채팅 보기 화면 추가

[tgyuuAn]

1. 🔥 변경된 내용

• 채팅 말풍선에서 텍스트가 긴 메세지일 경우 말줄임 및 전체보기 버튼 생기도록 변경
• 채팅 모두 보기 화면 추가 및 네비게이션 연결

2. 📸 스크린샷(선택)

2024-11-04.5.09.34.mov

3. 💡 알게된 부분

Column(modifier = Modifier.padding(horizontal = 14.dp, vertical = 12.dp)) {
    val chatContents = chatMessage.contents.joinToString { it.value }
    var hasOverflow by remember { mutableStateOf(false) }

    Text(
        text = chatContents,
        style = CareTheme.typography.body3,
        color = CareTheme.colors.white000,
        maxLines = 10,
        onTextLayout = { textLayoutResult ->
            hasOverflow = textLayoutResult.hasVisualOverflow
        },
    )

    if (hasOverflow) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween,
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 10.dp)
                .clickable { onSeeAllChatClicked(chatContents) },
        ) {
            Text(
                text = "전체보기",
                style = CareTheme.typography.caption1,
                color = CareTheme.colors.white000,
            )

            Image(
                painter = painterResource(com.idle.designresource.R.drawable.ic_arrow_left_small),
                colorFilter = ColorFilter.tint(CareTheme.colors.white000),
                contentDescription = null,
            )
        }
    }
}

Text 컴포저블의 onTextLayout 을 이용하여 overFlow가 났는지, 혹은 현재 몇 줄을 차지하고 있는지,
너비를 넘었는지 높이를 넘었는 지 등을 파악할 수 있음.

rememberListState를 이용하여 네비게이션이 되어서 돌아와도 이전 스크롤을 유지할 수 있음.