Skip to content

Commit

Permalink
Merge pull request #49 from SOPT-all/feat/#41-chat-view
Browse files Browse the repository at this point in the history 
[FEAT/#41] 채팅방 뷰 구현
  • Loading branch information
@yskim6772
yskim6772 authored Jan 22, 2025
2 parents 48dd28e + 725f532 commit 95d51e6
Show file tree
Hide file tree
Showing 19 changed files with 593 additions and 45 deletions.
44 changes: 44 additions & 0 deletions app/src/main/java/com/sopt/withsuhyeon/core/component/button/NavigateToPostButton.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
package com.sopt.withsuhyeon.core.component.button

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.sopt.withsuhyeon.R
import com.sopt.withsuhyeon.core.util.modifier.noRippleClickable
import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme.colors
import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme.typography

@Composable
fun NavigateToPostButton(
modifier: Modifier = Modifier,
onClick: () -> Unit
) {
Box(
modifier = modifier
.width(76.dp)
.background(
color = colors.Purple50,
shape = RoundedCornerShape(size = 8.dp)
)
.padding(vertical = 9.dp)
.noRippleClickable(onClick),
contentAlignment = Alignment.Center
)
{
Text(
text = stringResource(R.string.navigate_to_post_button_title),
color = colors.Purple500,
textAlign = TextAlign.Center,
style = typography.caption01_B
)
}
}
76 changes: 76 additions & 0 deletions app/src/main/java/com/sopt/withsuhyeon/core/component/card/ChatRoomInfoCardItem.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
package com.sopt.withsuhyeon.core.component.card

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.sopt.withsuhyeon.core.component.button.NavigateToPostButton
import com.sopt.withsuhyeon.core.util.price.toDecimalFormat
import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme
import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme.colors
import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme.typography

@Composable
fun ChatRoomInfoCardItem(
region: String,
postTitle: String,
price: Int,
modifier: Modifier = Modifier
) {
Column(
modifier = modifier
.fillMaxWidth()
.background(colors.White)
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Column(
verticalArrangement = Arrangement.spacedBy(4.dp),
modifier = Modifier.weight(1f)
) {
Text(
text = region,
style = typography.caption01_B,
color = colors.Grey400
)
Text(
text = postTitle,
style = typography.body03_B,
color = colors.Grey950
)
Text(
text = "${price.toDecimalFormat()}원",
style = typography.body03_B,
color = colors.Grey950
)
}
NavigateToPostButton {}
}
HorizontalDivider(
thickness = 1.dp,
color = colors.Grey100
)
}
}

@Preview
@Composable
private fun ChatRoomInfoCardItemPreview() {
WithSuhyeonTheme {
ChatRoomInfoCardItem("강남/역삼/삼성", "강남역에서 수현이 되어주실 분!", 20000)
}
}
106 changes: 106 additions & 0 deletions app/src/main/java/com/sopt/withsuhyeon/core/component/chat/ChatBubble.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
package com.sopt.withsuhyeon.core.component.chat

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme
import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme.colors
import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme.typography

@Composable
fun ChatBubble(
message: String,
time: String,
isSentByOwner: Boolean,
modifier: Modifier = Modifier
) {
Row(
modifier = modifier
.fillMaxWidth()
.padding(horizontal = 16.dp, vertical = 8.dp),
verticalAlignment = Alignment.Bottom,
horizontalArrangement = if (isSentByOwner) Arrangement.End else Arrangement.Start
) {
if (!isSentByOwner) {
Box(
modifier = Modifier
.size(36.dp)
.background(colors.Grey200, shape = CircleShape)
)
Spacer(modifier = Modifier.width(8.dp))
}

if (!isSentByOwner) {
Box(
modifier = Modifier
.background(
color = colors.Grey50,
shape = RoundedCornerShape(16.dp)
)
.padding(horizontal = 12.dp, vertical = 8.dp)
.widthIn(max = 230.dp)
) {
Text(
text = message,
style = typography.body03_R,
color = colors.Black,
modifier = modifier.align(Alignment.BottomStart)
)
}

Text(
text = time,
style = typography.caption02_R,
color = colors.Grey400,
modifier = Modifier.padding(start = 6.dp)
)
} else {
Text(
text = time,
style = typography.caption02_R,
color = colors.Grey400,
modifier = Modifier.padding(end = 6.dp)
)

Box(
modifier = Modifier
.background(
color = colors.Purple400,
shape = RoundedCornerShape(16.dp)
)
.padding(horizontal = 12.dp, vertical = 8.dp)
.widthIn(max = 260.dp)
) {
Text(
text = message,
style = typography.body03_R,
color = colors.White
)
}
}
}
}

@Preview
@Composable
private fun ChatBubblePreview() {
WithSuhyeonTheme {
ChatBubble("안녕안녕", "오후 04:01", false)
ChatBubble("안녕안녕", "오후 04:01", true)
}
}
43 changes: 43 additions & 0 deletions app/src/main/java/com/sopt/withsuhyeon/core/component/chat/ChatRoomDateInfoItem.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
package com.sopt.withsuhyeon.core.component.chat

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme
import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme.colors
import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme.typography

@Composable
fun ChatRoomDateInfoItem(
date: String,
modifier: Modifier = Modifier
) {
Row(
modifier = modifier
.fillMaxWidth()
.background(colors.White)
.padding(vertical = 16.dp),
horizontalArrangement = Arrangement.Center
) {
Text(
text = date,
style = typography.caption01_SB,
color = colors.Grey500
)
}
}

@Preview
@Composable
private fun Preview() {
WithSuhyeonTheme {
ChatRoomDateInfoItem("2025년 1월 2일")
}
}
4 changes: 3 additions & 1 deletion app/src/main/java/com/sopt/withsuhyeon/core/component/list/TotalChatRoomList.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import com.sopt.withsuhyeon.domain.entity.ChatRoomModel
@Composable
fun TotalChatRoomList(
chatRooms: List<ChatRoomModel>,
onChatRoomListItemClick: () -> Unit,
modifier: Modifier = Modifier
) {
LazyColumn(
Expand All @@ -22,7 +23,8 @@ fun TotalChatRoomList(
partnerName = chatRoom.partnerName,
recentChat = chatRoom.recentChat,
recentChatDateTime = chatRoom.recentChatDateTime,
unreadChatCount = chatRoom.unreadChatCount
unreadChatCount = chatRoom.unreadChatCount,
onChatRoomListItemClick = onChatRoomListItemClick
)
}
}
Expand Down
13 changes: 3 additions & 10 deletions app/src/main/java/com/sopt/withsuhyeon/core/component/listitem/ChatRoomListItem.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,12 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage
import com.sopt.withsuhyeon.R
import com.sopt.withsuhyeon.core.component.chip.SmallChip
import com.sopt.withsuhyeon.core.type.SmallChipType
import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme
import com.sopt.withsuhyeon.core.util.modifier.noRippleClickable
import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme.colors
import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme.typography

Expand All @@ -36,12 +35,14 @@ fun ChatRoomListItem(
recentChat: String,
recentChatDateTime: String,
unreadChatCount: String,
onChatRoomListItemClick: () -> Unit,
modifier: Modifier = Modifier
) {
Column(
modifier = Modifier
.fillMaxWidth()
.background(colors.White)
.noRippleClickable { onChatRoomListItemClick() }
) {
Row(
modifier = Modifier
Expand Down Expand Up @@ -103,12 +104,4 @@ fun ChatRoomListItem(
color = colors.Grey100
)
}
}

@Preview (showBackground = true)
@Composable
private fun ChatRoomListItemPreview() {
WithSuhyeonTheme {
ChatRoomListItem("https://via.placeholder.com/150", "작심이", "나는야 작심이 작심이 작심이 작심이 작심이 작심이", "1월 1일", "+99")
}
}
Loading

0 comments on commit 95d51e6

Please sign in to comment.