Skip to content

Feed UI based on Design QA #1104

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DongJun-H merged 9 commits into from
May 11, 2026
Merged

Feed UI based on Design QA #1104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
61e6036
[QA] FIx comment mention list interaction and padding size
DongJun-H Apr 28, 2026
1d4aa4d
[QA] Fix comment delete snackbar display
DongJun-H Apr 28, 2026
15f37a5
[QA] Fix comment bottom sheet header layout
DongJun-H Apr 28, 2026
a120b2c
[QA] Fix comment bottom sheet dismiss gesture
DongJun-H Apr 28, 2026
17c1f6c
[QA] Fix comment input height
DongJun-H Apr 28, 2026
b5dab32
[QA] Fix Fong Weight
DongJun-H Apr 28, 2026
d4c80b0
[QA] Fix Feed Empty View Image
DongJun-H Apr 28, 2026
d4b45d3
[QA] Fix comment empty state position
DongJun-H Apr 28, 2026
4be88c7
[QA] Fix feed empty button style
DongJun-H Apr 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion presentation/src/main/java/daily/dayo/presentation/screen/feed/FeedScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,12 @@ private fun FeedEmptyView(onEmptyViewClick: () -> Unit) {
Text(text = stringResource(id = R.string.feed_empty_description), style = DayoTheme.typography.caption1.copy(Gray4_C5CAD2))

Spacer(modifier = Modifier.height(36.dp))
FilledButton(onClick = onEmptyViewClick, label = stringResource(id = R.string.feed_empty_button))
FilledButton(
onClick = onEmptyViewClick,
label = stringResource(id = R.string.feed_empty_button),
modifier = Modifier.height(44.dp),
contentPadding = PaddingValues(horizontal = 20.dp, vertical = 11.5.dp),
textStyle = DayoTheme.typography.b5
)
Comment on lines +206 to +212
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

빈 피드 버튼 내부 세로 패딩이 QA 스펙과 다릅니다.

Line 210의 vertical = 11.5.dp는 이 PR 목표(상하 8dp)와 불일치합니다. 스펙대로 맞추는 편이 안전합니다.

수정 제안 
-            contentPadding = PaddingValues(horizontal = 20.dp, vertical = 11.5.dp),
+            contentPadding = PaddingValues(horizontal = 20.dp, vertical = 8.dp),
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
FilledButton(
onClick = onEmptyViewClick,
label = stringResource(id = R.string.feed_empty_button),
modifier = Modifier.height(44.dp),
contentPadding = PaddingValues(horizontal = 20.dp, vertical = 11.5.dp),
textStyle = DayoTheme.typography.b5
)
FilledButton(
onClick = onEmptyViewClick,
label = stringResource(id = R.string.feed_empty_button),
modifier = Modifier.height(44.dp),
contentPadding = PaddingValues(horizontal = 20.dp, vertical = 8.dp),
textStyle = DayoTheme.typography.b5
)
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@presentation/src/main/java/daily/dayo/presentation/screen/feed/FeedScreen.kt`
around lines 206 - 212, The vertical padding for the empty-feed button is
incorrect; update the FilledButton call used for the empty feed (the
FilledButton instance with onEmptyViewClick and label
stringResource(R.string.feed_empty_button)) to use contentPadding with vertical
= 8.dp (matching QA spec) instead of vertical = 11.5.dp so the button
height/padding follows the design.

}
}
1 change: 1 addition & 0 deletions presentation/src/main/java/daily/dayo/presentation/screen/main/MainScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,7 @@ internal fun MainScreen(
onDismissRequest = { bottomSheetController.hide() },
modifier = Modifier.navigationBarsPadding(),
sheetState = bottomSheetState,
sheetGesturesEnabled = false,
dragHandle = null
) {
Box {
Expand Down
12 changes: 4 additions & 8 deletions presentation/src/main/java/daily/dayo/presentation/screen/post/PostScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.SideEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.runtime.mutableStateListOf
Expand Down Expand Up @@ -106,12 +105,10 @@ fun PostScreen(
postViewModel.requestDeletePostComment(commentId)
}
val postCommentDeleteSuccess by postViewModel.postCommentDeleteSuccess.observeAsState(Event(false))
if (postCommentDeleteSuccess.getContentIfNotHandled() == true) {
postViewModel.requestPostComment(postId)
SideEffect {
coroutineScope.launch {
snackBarHostState.showSnackbar(context.getString(R.string.comment_delete_message))
}
LaunchedEffect(postCommentDeleteSuccess) {
if (postCommentDeleteSuccess.getContentIfNotHandled() == true) {
postViewModel.requestPostComment(postId)
snackBarHostState.showSnackbar(context.getString(R.string.comment_delete_message))
}
}
var showReportDialog by remember { mutableStateOf(false) }
Expand Down Expand Up @@ -493,4 +490,3 @@ private fun PreviewPostScreen() {
)
}
}

10 changes: 6 additions & 4 deletions presentation/src/main/java/daily/dayo/presentation/view/Button.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,9 @@ fun FilledButton(
modifier: Modifier = Modifier,
enabled: Boolean = true,
isTonal: Boolean = false,
icon: @Composable (() -> Unit)? = null
icon: @Composable (() -> Unit)? = null,
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
textStyle: TextStyle = DayoTheme.typography.b6
) {
val buttonColors = if (isTonal)
ButtonDefaults.buttonColors(
Expand All @@ -73,10 +75,10 @@ fun FilledButton(
modifier = modifier,
enabled = enabled,
colors = buttonColors,
contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
contentPadding = contentPadding,
content = {
if (icon != null) icon()
Text(text = label, style = DayoTheme.typography.b6)
Text(text = label, style = textStyle)
}
)
}
Expand Down Expand Up @@ -261,4 +263,4 @@ private fun PreviewDayoTextButton() {
Text(text = "입니다.", style = DayoTheme.typography.caption3.copy(Gray4_C5CAD2))
}
}
}
}
113 changes: 56 additions & 57 deletions presentation/src/main/java/daily/dayo/presentation/view/Comment.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,25 @@ import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
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.defaultMinSize
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Text
import androidx.compose.material.TextFieldDefaults
import androidx.compose.material.TextFieldDefaults.TextFieldDecorationBox
import androidx.compose.material.TextFieldDefaults.textFieldColors
import androidx.compose.material3.Icon
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
Expand All @@ -55,7 +49,6 @@ import androidx.compose.ui.text.TextRange
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
Expand Down Expand Up @@ -98,31 +91,35 @@ fun CommentListView(
if (postComments.isEmpty()) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
modifier = Modifier
.background(DayoTheme.colorScheme.background)
.fillMaxSize()
.padding(top = 12.dp, bottom = 30.dp)
.then(modifier)
) {
if (showEmptyIcon) {
Icon(
painter = painterResource(id = R.drawable.ic_comment_empty),
contentDescription = "empty",
tint = Color.Unspecified
Spacer(modifier = Modifier.weight(64f))
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Keep empty-state centering in scrollable post comments

CommentListView now relies on weighted Spacers to center the empty state, but this composable is also used from PostScreen inside a LazyColumn item (PostScreen.kt), where vertical space is unbounded and weight-based centering does not apply. As a result, the empty comment state remains top-aligned on the post detail screen even though the bottom-sheet path was adjusted with fillParentMaxHeight(), so the QA alignment fix is only partially effective.

Useful? React with 👍 / 👎.


Column(horizontalAlignment = Alignment.CenterHorizontally) {
if (showEmptyIcon) {
Icon(
painter = painterResource(id = R.drawable.ic_comment_empty),
contentDescription = "empty",
tint = Color.Unspecified
)
}

Text(
text = stringResource(id = R.string.post_comment_empty),
style = DayoTheme.typography.b5.copy(Gray2_767B83),
modifier = Modifier.padding(top = 12.dp, bottom = 2.dp)
)
Spacer(Modifier.height(2.dp))
Text(
text = stringResource(id = R.string.post_comment_empty_description),
style = DayoTheme.typography.caption4.copy(Gray3_9FA5AE)
)
}

Text(
text = stringResource(id = R.string.post_comment_empty),
style = DayoTheme.typography.b5.copy(Gray2_767B83),
modifier = Modifier.padding(top = 12.dp, bottom = 2.dp)
)
Spacer(Modifier.height(2.dp))
Text(
text = stringResource(id = R.string.post_comment_empty_description),
style = DayoTheme.typography.caption4.copy(Gray3_9FA5AE)
)
Spacer(modifier = Modifier.weight(135f))
}
} else {
Column(
Expand Down Expand Up @@ -329,33 +326,32 @@ fun CommentMentionSearchView(userResults: LazyPagingItems<SearchUser>, onClickFo
modifier = Modifier
.background(DayoTheme.colorScheme.background)
.fillMaxWidth(),
contentPadding = PaddingValues(horizontal = 18.dp)
contentPadding = PaddingValues(start = 18.dp, end = 18.dp, top = 16.dp, bottom = 12.dp),
verticalArrangement = Arrangement.spacedBy(4.dp)
) {
items(userResults.itemCount) { index ->
userResults[index]?.let { user ->
val interactionSource = remember { MutableInteractionSource() }
val isPressed = interactionSource.collectIsPressedAsState().value
Row(
modifier = Modifier
.background(DayoTheme.colorScheme.background)
.fillMaxWidth()
.padding(vertical = 4.dp)
.clip(RoundedCornerShape(8.dp))
.background(if (isPressed) Gray7_F6F6F7 else DayoTheme.colorScheme.background)
.clickableSingle(
indication = ripple(bounded = false, radius = 8.dp, color = Gray7_F6F6F7),
interactionSource = remember { MutableInteractionSource() },
indication = null,
interactionSource = interactionSource,
onClick = { onClickFollowUser(user) }
),
)
.padding(horizontal = 8.dp, vertical = 4.dp),
verticalAlignment = Alignment.CenterVertically
) {
RoundImageView(
imageUrl = "${BuildConfig.BASE_URL}/images/${user.profileImg}",
context = LocalContext.current,
modifier = Modifier
.clip(CircleShape)
.size(24.dp)
.clickableSingle(
interactionSource = remember { MutableInteractionSource() },
indication = null,
onClick = { }
),
.size(24.dp),
imageDescription = "search users profile image",
)
Spacer(modifier = Modifier.width(12.dp))
Expand Down Expand Up @@ -396,7 +392,6 @@ fun CommentReplyDescriptionView(replyCommentState: MutableState<Pair<Long, Comme
}
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun CommentTextField(
enabled: Boolean,
Expand All @@ -417,10 +412,10 @@ fun CommentTextField(
modifier = Modifier
.background(DayoTheme.colorScheme.background)
.fillMaxWidth()
.wrapContentHeight()
.padding(horizontal = 18.dp)
.height(64.dp)
.padding(horizontal = 16.dp)
.padding(top = 12.dp, bottom = 16.dp),
verticalAlignment = Alignment.Bottom
verticalAlignment = Alignment.CenterVertically
) {
val interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
BasicTextField(
Expand Down Expand Up @@ -463,32 +458,36 @@ fun CommentTextField(
}
},
modifier = Modifier
.padding(end = 8.dp)
.heightIn(min = 36.dp)
.weight(1f)
.height(36.dp)
.focusRequester(focusRequester),
textStyle = DayoTheme.typography.b6,
interactionSource = interactionSource,
cursorBrush = SolidColor(Primary_23C882),
decorationBox = @Composable { innerTextField ->
TextFieldDecorationBox(
value = commentText.value.text,
innerTextField = innerTextField,
enabled = true,
singleLine = false,
visualTransformation = VisualTransformation.None,
interactionSource = interactionSource,
placeholder = { Text(text = "댓글을 남겨주세요", style = DayoTheme.typography.b6.copy(Gray4_C5CAD2)) },
shape = DayoTheme.shapes.small.copy(all = CornerSize(12.dp)),
colors = textFieldColors(backgroundColor = Gray7_F6F6F7),
contentPadding = TextFieldDefaults.textFieldWithLabelPadding(top = 8.dp, bottom = 8.dp, start = 12.dp)
)
Box(
modifier = Modifier
.fillMaxSize()
.background(Gray7_F6F6F7, RoundedCornerShape(12.dp))
.padding(horizontal = 12.dp, vertical = 8.dp),
contentAlignment = Alignment.CenterStart
) {
if (commentText.value.text.isEmpty()) {
Text(
text = "댓글을 남겨주세요",
style = DayoTheme.typography.b6.copy(Gray4_C5CAD2)
)
Comment thread
DongJun-H marked this conversation as resolved.
}
innerTextField()
}
}
)

Spacer(modifier = Modifier.width(8.dp))

Box(
modifier = Modifier
.defaultMinSize(minWidth = 64.dp, minHeight = 36.dp)
.height(36.dp)
.clip(RoundedCornerShape(12.dp))
.background(color = if (enabled) Primary_23C882 else PrimaryL1_8FD9B9)
.clickableSingle(enabled = enabled) { onClickPostComment() }
Expand Down Expand Up @@ -545,4 +544,4 @@ private fun PreviewCommentTextField() {
focusRequester = commentFocusRequester,
onClickPostComment = { }
)
}
}
10 changes: 5 additions & 5 deletions presentation/src/main/java/daily/dayo/presentation/view/FeedPostView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,19 +285,19 @@ fun FeedPostView(
// like count
val dec = DecimalFormat("#,###")
Row(modifier = Modifier.weight(1f)) {
Text(text = stringResource(id = R.string.post_like_count_message_1), style = DayoTheme.typography.caption1.copy(Gray2_767B83))
Text(text = stringResource(id = R.string.post_like_count_message_1), style = DayoTheme.typography.caption2.copy(Gray2_767B83))
Text(
text = " ${dec.format(post.heartCount)} ",
style = DayoTheme.typography.caption1,
style = DayoTheme.typography.caption2,
modifier = if (post.heartCount != 0) Modifier.clickableSingle { post.postId?.let { onPostLikeUsersClick(it) } } else Modifier,
color = if (post.heartCount != 0) Primary_23C882 else Gray4_C5CAD2)
Text(text = stringResource(id = R.string.post_like_count_message_2), style = DayoTheme.typography.caption1.copy(Gray2_767B83))
Text(text = stringResource(id = R.string.post_like_count_message_2), style = DayoTheme.typography.caption2.copy(Gray2_767B83))
}

// comment count
Row {
Text(text = " ${dec.format(post.commentCount)} ", style = DayoTheme.typography.caption1, color = if (post.commentCount != 0) Primary_23C882 else Gray4_C5CAD2)
Text(text = stringResource(id = R.string.post_comment_count_message), style = DayoTheme.typography.caption1.copy(Gray2_767B83))
Text(text = " ${dec.format(post.commentCount)} ", style = DayoTheme.typography.caption2, color = if (post.commentCount != 0) Primary_23C882 else Gray4_C5CAD2)
Text(text = stringResource(id = R.string.post_comment_count_message), style = DayoTheme.typography.caption2.copy(Gray2_767B83))
}
}

Expand Down
Loading
Loading