Skip to content

Feed UI based on Design QA#1104

Open
DongJun-H wants to merge 9 commits intodevelopfrom
qa/feed
Open

Feed UI based on Design QA#1104
DongJun-H wants to merge 9 commits intodevelopfrom
qa/feed

Conversation

@DongJun-H
Copy link
Copy Markdown
Member

@DongJun-H DongJun-H commented Apr 28, 2026

작업 내용

  • 피드 Empty 화면 이미지 색상 및 버튼 높이/패딩 디자인 QA 반영
  • 피드 게시글 좋아요/댓글 수 텍스트 웨이트 및 컬러 스타일 조정
  • 댓글 바텀시트 헤더 높이, 닫기 버튼 여백, 스크롤 중 닫힘 제스처 동작 수정
  • 댓글 Empty 영역 중앙 정렬 및 입력창/등록 버튼 높이 조정
  • 댓글 멘션 리스트 간격 및 항목 터치 상태 스타일 반영
  • 댓글 삭제 완료 스낵바 노출 처리 개선

참고

모듈별 기능 영향 및 사용자 대면 변경사항

피드 화면 (FeedScreen)

  • 빈 상태 UI 개선: 빈 피드 상태의 "친구를 팔로우하세요" 버튼을 높이 44dp, 패딩(좌우 20dp, 상하 11.5dp), b5 텍스트 스타일로 표준화
  • 버튼 재사용성 강화: FilledButton 컴포저블에 contentPaddingtextStyle 파라미터를 추가하여 향후 버튼 스타일 커스터마이징 가능하게 개선

댓글 화면 (Comment & CommentBottomSheetDialog)

  • 입력 필드 높이 통일: 댓글 입력 필드 및 제출 버튼 높이를 36dp로 표준화하여 디자인 일관성 확보
  • 멘션 리스트 상호작용 개선:
    • 멘션 아이템 제시 시 터치 상태에서 배경색 채우기(MutableInteractionSource 활용)
    • 아이템 간 수직 간격 증가
  • 빈 댓글 상태 중앙 정렬: Spacer 기반 가중치 레이아웃으로 empty view 콘텐츠를 화면 중앙에 배치
  • 삭제 완료 피드백: 댓글 삭제 성공 시 "댓글이 삭제되었어요" 토스트 메시지 표시

메인 화면 (MainScreen)

  • 댓글 bottom sheet 스크롤 중 닫기 방지: sheetGesturesEnabled = false 설정으로 사용자가 리스트를 스크롤하는 중에 실수로 sheet를 닫는 것 방지

피드 아이템 (FeedPostView)

  • 메타데이터 텍스트 가중치 조정: 좋아요/댓글 카운트를 caption1에서 caption2로 변경하여 시각적 계층 명확화

피드 빈 상태 이미지 (ic_feed_empty.xml)

  • 색상 팔레트 업데이트: 라이트 핑크/그레이에서 F6F6F7/E8EAEE 그레이로 변경하여 디자인 QA 준수
  • RTL 지원 추가: autoMirrored="true" 속성으로 우-좌 언어 지원

위험 포인트 및 상태 관리

중위험: 비동기 효과(Effect) 패턴 변경

  • 변경 사항: 댓글 삭제 성공 처리를 SideEffect + coroutineScope.launch에서 LaunchedEffect(postCommentDeleteSuccess) 이벤트 기반으로 마이그레이션
  • 위험 요소:
    • Event 래퍼의 getContentIfNotHandled() 동작이 정확히 한 번만 실행되어야 함
    • Compose 리컴포지션 시 중복 실행 방지 필요
    • 네트워크 요청(requestPostComment) 중에 사용자가 sheet를 닫을 경우 Race condition 가능성
  • 검증 필요: 댓글 삭제 후 목록 새로고침이 정확히 한 번만 발생하는지 확인

저위험: UI 상태 일관성

  • 변경 사항: MutableInteractionSource를 멘션 리스트 행에 추가하여 pressed 상태 시각화
  • 위험 요소: 빠른 탭/제스처 시 상태 전환이 즉시 반영되지 않을 수 있음
  • 영향 범위: 제한적(멘션 리스트만 영향)

저위험: bottom sheet 제스처 비활성화

  • 변경 사항: sheetGesturesEnabled = false로 드래그/스와이프 상호작용 완전 차단
  • 부작용: 사용자가 bottom sheet를 드래그로 닫을 수 없음(명시적 close 버튼에만 의존)
  • 검증 필요: close 버튼 가시성 및 접근성 확인

필수 테스트 및 검증 항목

기능 테스트

  1. 댓글 삭제 플로우:

    • 댓글 삭제 후 "댓글이 삭제되었어요" 토스트가 정확히 한 번만 표시되는지 확인
    • 토스트 표시 중 댓글 목록이 자동으로 새로고침되는지 확인
    • 삭제 후 빈 댓글 상태 화면이 중앙에 올바르게 표시되는지 확인
  2. 멘션 목록 상호작용:

    • 멘션 아이템 탭 시 배경색 채우기(터치 상태)가 명확히 시각화되는지 확인
    • 아이템 간 스펙(4dp 간격)이 시각적으로 일관성 있는지 확인
  3. 댓글 입력 필드:

    • 입력 필드와 제출 버튼이 36dp 높이로 정렬되어 있는지 확인
    • 플레이스홀더 텍스트 표시 여부 확인
    • 비활성화 상태 스타일 확인
  4. Bottom sheet 제스처:

    • 드래그/스와이프로 sheet를 닫을 수 없음을 확인
    • close 버튼으로만 닫히는지 확인
    • 스크롤 중 의도치 않은 닫기가 발생하지 않는지 확인
  5. 피드 UI 개선:

    • 빈 피드 버튼 높이(44dp), 패딩, 텍스트 스타일이 디자인 스펙과 일치하는지 확인
    • 좋아요/댓글 카운트 텍스트 크기 변경이 시각적으로 적절한지 확인
    • 피드 빈 상태 이미지 색상이 디자인 QA와 일치하는지 확인

회귀(Regression) 테스트

  1. 다른 bottom sheet UI: CommentBottomSheetDialog 외 다른 modal sheet가 있을 경우 정상 작동 확인
  2. FilledButton 호출처: Button.kt 파라미터 확장으로 기존 호출처에서 호환성 확인 필요
  3. 댓글 네트워크 요청: 느린 네트워크에서 삭제 후 목록 새로고침 중 sheet 닫기 테스트

엣지 케이스 및 상태 검증

  1. 공시 패턴 (Event<T>) 정확성: 댓글 삭제 성공 이벤트가 재처리되지 않는지 확인
  2. Compose 리컴포지션 안정성: 화면 회전, 배경/포그라운드 전환 시 토스트 중복 표시 여부 확인
  3. 빈 댓글 목록 조건: postComments.data가 비어있을 때 empty icon/text/중앙정렬 모두 올바르게 표시되는지 확인

@DongJun-H DongJun-H requested a review from yuni-ju April 28, 2026 15:12
@DongJun-H DongJun-H self-assigned this Apr 28, 2026
@DongJun-H DongJun-H added the QA label Apr 28, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 28, 2026

Walkthrough

피드 및 댓글 관련 UI 컴포넌트의 레이아웃, 타이포그래피, 상호작용을 개선했습니다. 버튼 컴포넌트에 패딩과 텍스트 스타일 파라미터를 추가하고, 댓글 입력 필드와 멘션 목록을 재설계했으며, 삭제 완료 알림 처리를 Compose 효과 기반으로 마이그레이션했습니다.

Changes

Cohort / File(s) Summary
Button 컴포넌트 확장
presentation/src/main/java/daily/dayo/presentation/view/Button.kt, presentation/src/main/java/daily/dayo/presentation/screen/feed/FeedScreen.kt
FilledButton에 configurable contentPaddingtextStyle 파라미터를 추가하여, FeedScreen의 빈 피드 액션 버튼에서 명시적 높이(44dp), 수평/수직 패딩(각 20dp, 8dp), 텍스트 스타일(b5)을 적용 가능하게 함.
댓글 UI 레이아웃 개선
presentation/src/main/java/daily/dayo/presentation/view/Comment.kt, presentation/src/main/java/daily/dayo/presentation/view/dialog/CommentBottomSheetDialog.kt
빈 댓글 목록을 weighted Spacer와 중앙 Column으로 재배치, 멘션 검색 목록 행에서 공유 MutableInteractionSource 기반 pressed 상태 적용(ripple 제거, 배경 색상 변경), 댓글 입력 필드 높이 36dp 고정 및 Material TextFieldDefaults 대신 커스텀 Box 드로잉 적용, 그리고 CommentBottomSheetDialog에서 제목 컨테이너 높이 고정 및 콘텐츠 패딩 조정.
상태 관리 및 상호작용 개선
presentation/src/main/java/daily/dayo/presentation/screen/post/PostScreen.kt, presentation/src/main/java/daily/dayo/presentation/screen/main/MainScreen.kt, presentation/src/main/java/daily/dayo/presentation/view/dialog/CommentBottomSheetDialog.kt
댓글 삭제 성공 처리를 SideEffect에서 LaunchedEffect로 마이그레이션하여 리소스 스냅바 메시지 표시, ModalBottomSheet에 sheetGesturesEnabled = false 추가하여 드래그 상호작용 비활성화, 그리고 CommentListView를 fillParentMaxHeight 조건부 래핑으로 개선.
타이포그래피 및 아이콘 업데이트
presentation/src/main/java/daily/dayo/presentation/view/FeedPostView.kt, presentation/src/main/res/drawable/ic_feed_empty.xml
포스트 메타데이터 카운터(좋아요/댓글)의 텍스트 스타일을 caption1에서 caption2로 변경, 그리고 ic_feed_empty 벡터 드로어블을 RTL 자동 미러링 지원 및 색상 팔레트(F6F6F7/E8EAEE) 개선으로 업데이트.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목은 PR의 주요 변경사항(디자인 QA 기반 피드 UI 수정)을 명확하게 요약하고 있습니다.
Linked Issues check ✅ Passed 모든 연결된 이슈(#1028#1035, #1065#1067)의 요구사항이 코드 변경으로 충족되었습니다.
Out of Scope Changes check ✅ Passed 모든 변경사항이 연결된 이슈의 범위 내에 있으며 디자인 QA 수정과 관련이 있습니다.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch qa/feed

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🧹 Nitpick comments (2)
presentation/src/main/res/drawable/ic_feed_empty.xml (1)

13-64: 반복 색상은 @color 리소스로 추출하는 것을 권장합니다.

Line 13-64에 동일 hex 색상이 반복되어 있어, 추후 디자인 토큰 변경/다크모드 대응 시 수정 지점이 늘어납니다. 공용 color resource가 이미 있다면 참조로 통일해 주세요.

예시 diff
-            android:fillColor="#F6F6F7"
+            android:fillColor="@color/feed_empty_surface"

-            android:fillColor="#E8EAEE"
+            android:fillColor="@color/feed_empty_surface_variant"

-            android:strokeColor="#F6F6F7"
+            android:strokeColor="@color/feed_empty_surface"

As per coding guidelines "Avoid introducing unused IDs or hardcoded values where theme resources already exist."

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@presentation/src/main/res/drawable/ic_feed_empty.xml` around lines 13 - 64,
Multiple path elements (e.g., the paths using android:fillColor="#F6F6F7",
"#E8EAEE", and android:strokeColor="#F6F6F7"/"#00000000") repeat hardcoded hex
colors; extract these hex values into shared color resources (e.g., colors.xml
entries like feed_bg, feed_card, transparent) and replace the literal values in
the drawable by referencing `@color/feed_bg`, `@color/feed_card`, `@color/transparent`
on the android:fillColor and android:strokeColor attributes for the relevant
<path> elements (look for the path entries with android:fillColor and
android:strokeColor in ic_feed_empty.xml).
presentation/src/main/java/daily/dayo/presentation/view/dialog/CommentBottomSheetDialog.kt (1)

328-356: 빈/비어있지 않은 분기에서 CommentListView 호출 중복을 줄여주세요.

현재 두 분기 파라미터가 거의 동일해서 이후 수정 시 누락 가능성이 있습니다. 공통 호출로 묶는 게 유지보수에 유리합니다.

리팩터링 예시
         item {
-            if (postComments.data.isEmpty()) {
-                Box(
-                    modifier = Modifier
-                        .fillParentMaxHeight()
-                        .fillMaxWidth()
-                ) {
-                    CommentListView(
-                        currentMemberId = currentMemberId,
-                        postComments = postComments,
-                        onClickProfile = onClickCommentProfile,
-                        onClickReply = onClickReply,
-                        onClickDelete = onClickDelete,
-                        onClickReport = onClickReport,
-                        modifier = Modifier.padding(horizontal = 18.dp),
-                        showEmptyIcon = true
-                    )
-                }
-            } else {
-                CommentListView(
-                    currentMemberId = currentMemberId,
-                    postComments = postComments,
-                    onClickProfile = onClickCommentProfile,
-                    onClickReply = onClickReply,
-                    onClickDelete = onClickDelete,
-                    onClickReport = onClickReport,
-                    modifier = Modifier.padding(horizontal = 18.dp),
-                    showEmptyIcon = true
-                )
-            }
+            val commentList: `@Composable` () -> Unit = {
+                CommentListView(
+                    currentMemberId = currentMemberId,
+                    postComments = postComments,
+                    onClickProfile = onClickCommentProfile,
+                    onClickReply = onClickReply,
+                    onClickDelete = onClickDelete,
+                    onClickReport = onClickReport,
+                    modifier = Modifier.padding(horizontal = 18.dp),
+                    showEmptyIcon = true
+                )
+            }
+            if (postComments.data.isEmpty()) {
+                Box(
+                    modifier = Modifier
+                        .fillParentMaxHeight()
+                        .fillMaxWidth()
+                ) { commentList() }
+            } else {
+                commentList()
+            }
         }
🤖 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/view/dialog/CommentBottomSheetDialog.kt`
around lines 328 - 356, The duplicate calls to CommentListView in the if/else
should be collapsed: remove the branching that repeats the same CommentListView
invocation and instead call CommentListView once, using the existing condition
(postComments.data.isEmpty()) only to control layout differences (e.g., wrap
with Box when empty). Update CommentBottomSheetDialog to render CommentListView
a single time, keeping the same parameters (currentMemberId, postComments,
onClickProfile, onClickReply, onClickDelete, onClickReport, modifier =
Modifier.padding(horizontal = 18.dp), showEmptyIcon = true) and only
conditionally wrap it with Box when postComments.data.isEmpty().
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@presentation/src/main/java/daily/dayo/presentation/screen/feed/FeedScreen.kt`:
- Around line 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.

In `@presentation/src/main/java/daily/dayo/presentation/view/Comment.kt`:
- Around line 475-479: Replace the hardcoded placeholder "댓글을 남겨주세요" in the Text
composable shown inside the empty-check branch (the block using
commentText.value.text.isEmpty()) with a stringResource lookup; add a new string
resource key (e.g., placeholder_comment) in the strings.xml and call
stringResource(R.string.placeholder_comment) in the Text call so the placeholder
text is localized and maintainable.

---

Nitpick comments:
In
`@presentation/src/main/java/daily/dayo/presentation/view/dialog/CommentBottomSheetDialog.kt`:
- Around line 328-356: The duplicate calls to CommentListView in the if/else
should be collapsed: remove the branching that repeats the same CommentListView
invocation and instead call CommentListView once, using the existing condition
(postComments.data.isEmpty()) only to control layout differences (e.g., wrap
with Box when empty). Update CommentBottomSheetDialog to render CommentListView
a single time, keeping the same parameters (currentMemberId, postComments,
onClickProfile, onClickReply, onClickDelete, onClickReport, modifier =
Modifier.padding(horizontal = 18.dp), showEmptyIcon = true) and only
conditionally wrap it with Box when postComments.data.isEmpty().

In `@presentation/src/main/res/drawable/ic_feed_empty.xml`:
- Around line 13-64: Multiple path elements (e.g., the paths using
android:fillColor="#F6F6F7", "#E8EAEE", and
android:strokeColor="#F6F6F7"/"#00000000") repeat hardcoded hex colors; extract
these hex values into shared color resources (e.g., colors.xml entries like
feed_bg, feed_card, transparent) and replace the literal values in the drawable
by referencing `@color/feed_bg`, `@color/feed_card`, `@color/transparent` on the
android:fillColor and android:strokeColor attributes for the relevant <path>
elements (look for the path entries with android:fillColor and
android:strokeColor in ic_feed_empty.xml).
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f2b02824-2d11-49dc-bc58-b62d781466b2

📥 Commits

Reviewing files that changed from the base of the PR and between ba6f118 and 4be88c7.

📒 Files selected for processing (8)
  • presentation/src/main/java/daily/dayo/presentation/screen/feed/FeedScreen.kt
  • presentation/src/main/java/daily/dayo/presentation/screen/main/MainScreen.kt
  • presentation/src/main/java/daily/dayo/presentation/screen/post/PostScreen.kt
  • presentation/src/main/java/daily/dayo/presentation/view/Button.kt
  • presentation/src/main/java/daily/dayo/presentation/view/Comment.kt
  • presentation/src/main/java/daily/dayo/presentation/view/FeedPostView.kt
  • presentation/src/main/java/daily/dayo/presentation/view/dialog/CommentBottomSheetDialog.kt
  • presentation/src/main/res/drawable/ic_feed_empty.xml

Comment on lines +206 to +212
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
)
Copy link
Copy Markdown

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.

Comment thread presentation/src/main/java/daily/dayo/presentation/view/Comment.kt
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 4be88c72e8

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

painter = painterResource(id = R.drawable.ic_comment_empty),
contentDescription = "empty",
tint = Color.Unspecified
Spacer(modifier = Modifier.weight(64f))
Copy link
Copy Markdown

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 👍 / 👎.

@github-project-automation github-project-automation Bot moved this to In Progress in DAYO 2.0 Apr 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment