[IDLE-465] CareChatTextBubble 컴포넌트 weight 문제 해결

core/domain/src/main/kotlin/com/idle/domain/usecase/chatting/GetChatMessagesUseCase.kt

@@ -0,0 +1,60 @@
+package com.idle.domain.usecase.chatting
+
+import com.idle.domain.model.chatting.ChatMessage
+import com.idle.domain.model.chatting.Content
+import com.idle.domain.model.chatting.ContentType
+import com.idle.domain.model.chatting.SenderType
+import java.time.LocalDateTime
+import javax.inject.Inject
+
+class GetChatMessagesUseCase @Inject constructor() {
+    suspend operator fun invoke(roomId: String): Result<List<ChatMessage>> = Result.success(
+        listOf(
+            ChatMessage(
+                id = "1",
+                roomId = "room1",
+                senderId = "user1",
+                senderType = SenderType.USER,
+                contents = listOf(
+                    Content(
+                        type = ContentType.TEXT,
+                        value = "안녕하세요! 문의드리고 싶어서 연락드렸습니다."
+                    )
+                ),
+                createdAt = LocalDateTime.now().minusDays(3)
+            ),
+            ChatMessage(
+                id = "2",
+                roomId = "room1",
+                senderId = "user2",
+                senderType = SenderType.USER,
+                contents = listOf(Content(type = ContentType.TEXT, value = "안녕하세요! 어떤 문의사항이신가요?")),
+                createdAt = LocalDateTime.now().minusDays(2)
+            ),
+            ChatMessage(
+                id = "3",
+                roomId = "room1",
+                senderId = "user1",
+                senderType = SenderType.USER,
+                contents = listOf(Content(type = ContentType.TEXT, value = "추가로 여쭤보고 싶은 게 있습니다.")),
+                createdAt = LocalDateTime.now().minusDays(1)
+            ),
+            ChatMessage(
+                id = "4",
+                roomId = "room1",
+                senderId = "user2",
+                senderType = SenderType.USER,
+                contents = listOf(Content(type = ContentType.TEXT, value = "알겠습니다. 무엇이 궁금하신가요?")),
+                createdAt = LocalDateTime.now().minusMinutes(3)
+            ),
+            ChatMessage(
+                id = "5",
+                roomId = "room1",
+                senderId = "user1",
+                senderType = SenderType.USER,
+                contents = listOf(Content(type = ContentType.TEXT, value = "감사합니다! 친절한 답변 감사합니다.")),
+                createdAt = LocalDateTime.now().minusMinutes(1)
+            )
+        )
+    )
+}

core/domain/src/main/kotlin/com/idle/domain/util/TimeUtil.kt

@@ -52,6 +52,11 @@ fun LocalDateTime.formatRelativeTimeDescription(): String {
 }
 
 fun LocalDateTime.formatTimeToHourMinute24(): String {
-    val formatter = DateTimeFormatter.ofPattern("HH:mm").withZone(seoulZone)
+    val formatter = DateTimeFormatter.ofPattern("HH:mm")
+    return this.format(formatter)
+}
+
+fun LocalDateTime.formatYearMonthDate(): String {
+    val formatter = DateTimeFormatter.ofPattern("yyyy년 MM월 dd일")
     return this.format(formatter)
 }

feature/center/chatting/src/main/java/com/idle/center/chatting/CenterChattingFragment.kt

@@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
@@ -21,6 +22,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
@@ -145,9 +147,11 @@ internal fun ChatRoomItem(
                 error = painterResource(com.idle.designresource.R.drawable.ic_notification_placeholder),
                 onError = { Log.d("test", chatRoom.profileImageUrl) },
                 contentDescription = "",
+                contentScale = ContentScale.Crop,
                 modifier = Modifier
-                    .align(Alignment.CenterVertically)
                     .padding(end = 12.dp)
+                    .align(Alignment.CenterVertically)
+                    .clip(CircleShape)
                     .size(48.dp),
             )
 

feature/center/home/src/main/java/com/idle/center/home/CenterHomeFragment.kt

@@ -262,7 +262,7 @@ internal fun CenterHomeScreen(
                                         Spacer(
                                             modifier = Modifier
                                                 .fillMaxWidth()
-                                                .height(28.dp)
+                                                .height(80.dp)
                                         )
                                     }
                                 }

feature/chatting-detail/src/main/java/com/idle/chatting_detail/ChattingDetailFragment.kt

@@ -1,39 +1,48 @@
 package com.idle.chatting_detail
 
-import android.util.Log
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.fragment.app.viewModels
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.compose.LifecycleEventEffect
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.navigation.fragment.findNavController
 import androidx.navigation.fragment.navArgs
+import com.idle.chatting_detail.component.CareChatReceiverTextBubble
+import com.idle.chatting_detail.component.CareChatSenderTextBubble
+import com.idle.chatting_detail.component.CareChatSenderTextBubbleWithImage
 import com.idle.chatting_detail.component.CareChatTextField
 import com.idle.compose.addFocusCleaner
 import com.idle.compose.base.BaseComposeFragment
 import com.idle.designsystem.compose.component.CareSubtitleTopBar
 import com.idle.designsystem.compose.foundation.CareTheme
 import com.idle.domain.model.auth.UserType
 import com.idle.domain.model.chatting.ChatMessage
+import com.idle.domain.model.profile.CenterProfile
+import com.idle.domain.model.profile.WorkerProfile
+import com.idle.domain.util.formatYearMonthDate
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
@@ -48,18 +57,23 @@ internal class ChattingDetailFragment : BaseComposeFragment() {
         val receiverId = rememberSaveable { args.receiverId }
         val senderId = rememberSaveable { args.senderId }
 
-        LifecycleEventEffect(Lifecycle.Event.ON_CREATE) {
-            Log.d("test", "$chattingRoomId $receiverId $receiverUserType $senderId")
-            // Todo
-        }
-
         fragmentViewModel.apply {
             val writingText by writingText.collectAsStateWithLifecycle()
             val chatMessages by chatMessages.collectAsStateWithLifecycle()
+            val workerProfile by workerProfile.collectAsStateWithLifecycle()
+            val centerProfile by centerProfile.collectAsStateWithLifecycle()
+
+            LifecycleEventEffect(Lifecycle.Event.ON_CREATE) {
+                getUserProfile(receiverUserType = receiverUserType, senderId = senderId)
+                getChatMessages(chattingRoomId)
+            }
 
-            if (chatMessages != null) {
+            if (chatMessages != null && workerProfile != null && centerProfile != null) {
                 ChattingDetailScreen(
                     receiverId = receiverId,
+                    receiverUserType = receiverUserType,
+                    workerProfile = workerProfile!!,
+                    centerProfile = centerProfile!!,
                     writingText = writingText,
                     chatMessages = chatMessages!!,
                     onWritingTextChange = ::setWritingText,
@@ -77,12 +91,16 @@ internal class ChattingDetailFragment : BaseComposeFragment() {
 @Composable
 internal fun ChattingDetailScreen(
     receiverId: String,
+    receiverUserType: UserType,
+    workerProfile: WorkerProfile,
+    centerProfile: CenterProfile,
     writingText: String,
     chatMessages: List<ChatMessage>,
     onWritingTextChange: (String) -> Unit,
     navigateUp: () -> Unit,
 ) {
     val focusManager = LocalFocusManager.current
+    var lastDate: String? = null
 
     Scaffold(
         topBar = {
@@ -109,11 +127,84 @@ internal fun ChattingDetailScreen(
                     .background(CareTheme.colors.gray050)
                     .padding(horizontal = 20.dp),
             ) {
-                items(
+                item {
+                    Spacer(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(20.dp)
+                    )
+                }
+
+                itemsIndexed(
                     items = chatMessages,
-                    key = { it.id },
-                ) { chatMessage ->
-
+                    key = { _, item -> item.id },
+                ) { index, chatMessage ->
+                    val isLast = if (index < chatMessages.size - 1) {
+                        val nextIndex = index + 1
+                        chatMessage.senderId != chatMessages[nextIndex].senderId
+                    } else {
+                        true
+                    }
+
+                    val padding = PaddingValues(bottom = if (isLast) 16.dp else 6.dp)
+
+
+                    val messageDate = chatMessage.createdAt.formatYearMonthDate()
+                    val showDate = lastDate != messageDate
+                    if (showDate) {
+                        lastDate = messageDate
+
+                        Text(
+                            text = messageDate,
+                            style = CareTheme.typography.caption1,
+                            color = CareTheme.colors.gray700,
+                            textAlign = TextAlign.Center,
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(
+                                    top = if (index == 0 || isLast) 0.dp else 10.dp,
+                                    bottom = 16.dp
+                                )
+                        )
+                    }
+
+                    val isMyMessage = receiverId == chatMessage.senderId
+                    if (isMyMessage) {
+                        CareChatReceiverTextBubble(
+                            chatMessage = chatMessage,
+                            isLast = isLast,
+                            modifier = Modifier.padding(padding),
+                        )
+                    } else {
+                        val showProfile = if (index > 0) {
+                            val previousIndex = index - 1
+                            chatMessage.senderId != chatMessages[previousIndex].senderId
+                        } else {
+                            true
+                        }
+
+                        if (showProfile) {
+                            CareChatSenderTextBubbleWithImage(
+                                imageUrl = when (receiverUserType) {
+                                    UserType.CENTER -> workerProfile.profileImageUrl
+                                    UserType.WORKER -> centerProfile.profileImageUrl
+                                },
+                                senderName = when (receiverUserType) {
+                                    UserType.CENTER -> workerProfile.workerName
+                                    UserType.WORKER -> centerProfile.centerName
+                                },
+                                chatMessage = chatMessage, isLast = isLast,
+                                modifier = Modifier.padding(padding),
+                            )
+                        } else {
+                            CareChatSenderTextBubble(
+                                chatMessage = chatMessage,
+                                isLast = isLast,
+                                isRead = isLast,
+                                modifier = Modifier.padding(padding),
+                            )
+                        }
+                    }
                 }
             }
 

feature/chatting-detail/src/main/java/com/idle/chatting_detail/ChattingDetailViewModel.kt

@@ -7,6 +7,7 @@ import com.idle.domain.model.chatting.ChatMessage
 import com.idle.domain.model.error.ErrorHandlerHelper
 import com.idle.domain.model.profile.CenterProfile
 import com.idle.domain.model.profile.WorkerProfile
+import com.idle.domain.usecase.chatting.GetChatMessagesUseCase
 import com.idle.domain.usecase.profile.GetCenterProfileUseCase
 import com.idle.domain.usecase.profile.GetLocalMyCenterProfileUseCase
 import com.idle.domain.usecase.profile.GetLocalMyWorkerProfileUseCase
@@ -23,12 +24,13 @@ class ChattingDetailViewModel @Inject constructor(
     private val getLocalMyWorkerProfileUseCase: GetLocalMyWorkerProfileUseCase,
     private val getCenterProfileUseCase: GetCenterProfileUseCase,
     private val getWorkerProfileUseCase: GetWorkerProfileUseCase,
+    private val getChatMessagesUseCase: GetChatMessagesUseCase,
     private val errorHandlerHelper: ErrorHandlerHelper,
 ) : BaseViewModel() {
     private val _writingText = MutableStateFlow<String>("")
     val writingText = _writingText.asStateFlow()
 
-    private val _chatMessages = MutableStateFlow<List<ChatMessage>?>(emptyList())
+    private val _chatMessages = MutableStateFlow<List<ChatMessage>?>(null)
     val chatMessages = _chatMessages.asStateFlow()
 
     private val _workerProfile = MutableStateFlow<WorkerProfile?>(null)
@@ -37,6 +39,10 @@ class ChattingDetailViewModel @Inject constructor(
     private val _centerProfile = MutableStateFlow<CenterProfile?>(null)
     val centerProfile = _centerProfile.asStateFlow()
 
+    internal fun setWritingText(text: String) {
+        _writingText.value = text
+    }
+
     internal fun getUserProfile(
         receiverUserType: UserType,
         senderId: String,
@@ -76,7 +82,9 @@ class ChattingDetailViewModel @Inject constructor(
         }
     }
 
-    internal fun setWritingText(text: String) {
-        _writingText.value = text
+    internal fun getChatMessages(roomId: String) = viewModelScope.launch {
+        getChatMessagesUseCase(roomId).onSuccess {
+            _chatMessages.value = it
+        }
     }
 }