Skip to content

Search Result Screen UI based on Design QA#1096

Open
yuni-ju wants to merge 6 commits intodevelopfrom
qa/search
Open

Search Result Screen UI based on Design QA#1096
yuni-ju wants to merge 6 commits intodevelopfrom
qa/search

Conversation

@yuni-ju
Copy link
Member

@yuni-ju yuni-ju commented Mar 18, 2026

작업 내용

  • 검색 결과 화면의 헤더 텍스트, 간격 수정
  • 검색 결과 탭에 구분선 추가
  • 검색 결과가 없을 때 보여지는 화면의 텍스트와 간격 조정

참고

모듈별 요약: SearchResultScreen UI 개선

1. 기능 및 사용자 대면 변경사항

  • TabRow 하단 Divider 추가
    • 기존 투명 Divider 대신 Gray6_F0F1F3 색상(RGB 약 240,241,243), 두께 1.dp 사용으로 탭 행 하단 구분선이 표시됨.
  • 검색 결과 개수 표시 개선(SearchResultsCount)
    • 결과 개수를 숫자(Primary_23C882, 초록)와 설명("개의 검색 결과")으로 분리하여 노출.
    • Surface에 White 배경과 내부 패딩 적용(컨테이너 높이 44.dp 유지, 내부 Row 높이/레이아웃 조정).
    • 텍스트 간격을 2.dp로 설정하고 typography에 lineHeight(19.5.sp 등) 및 폰트/색상 조정 적용.
    • strings.xml에 search_result_count_description("개의 검색 결과") 리소스 추가.
  • 검색 결과 없음(Empty) 화면 개선
    • 제목 아래 Spacer(2.dp) 추가로 수직 간격 조정.
    • 설명 텍스트 스타일 변경: 색상 Gray4_C5CAD2(약 RGB 197,202,210), fontWeight 500, caption2 typography 적용(기존 패딩 제거).
  • 기타
    • SearchResultScreen 파일에 Gray4_C5CAD2 및 Gray6_F0F1F3 색상 import 추가 및 여러 레이아웃/정렬·간격 소소 조정으로 디자인 QA 반영.

2. 위험 요소 분석

  • 전반적 위험도: 낮음 — 변경사항은 UI 스타일과 레이아웃에 국한되어 비즈니스 로직·네트워크·스레딩에는 영향 없음.
  • 주의 포인트:
    • 테마·컬러 일관성: Gray4/Gray6 색상 상수 추가로 앱 전역 테마와 시각적 일관성 확인 필요(다크모드 영향 포함).
    • 고정 높이/레이아웃: SearchResultsCount의 고정 컨테이너 높이(44.dp)와 내부 Row 고정값으로 인해 긴 텍스트/언어별 확장에서 오버플로우나 클리핑 발생 가능.
    • 접근성(명도 대비): 변경된 설명 색상(Gray4_C5CAD2)과 배경 대비가 WCAG 기준을 만족하는지 검증 필요.
    • 문자열 리소스(i18n): "개의 검색 결과" 분리로 다국어 번역/문장 구조가 올바른지 확인 필요.

3. 필요 검증 및 후속 테스트

  • 필수 검증
    1. Figma와의 픽셀/타입검증: 색상(RGB), 간격(Spacer/Divider 두께 및 여백), 폰트 가중치가 디자인 QA와 일치하는지 확인(여러 해상도에서).
    2. 텍스트 오버플로우/줄바꿈: 결과 개수(숫자 길이 포함)와 설명 텍스트가 고정 높이 영역에서 잘림 없이 표시되는지 확인(특히 큰 숫자, 로케일별 긴 번역).
    3. 라이트/다크 테마 검증: 새 색상과 배경 조합이 두 테마에서 의도대로 보이는지 확인.
    4. 접근성 검증: 색상 대비 기준 충족 여부 확인.
    5. 탭 전환/상태 전환 검증: TabRow 및 Empty/Result 상태 전환 시 레이아웃이 일관되게 동작하는지 확인(애니메이션/리렌더링 이상 유무).
  • 권장 테스트
    • 다양한 기기 크기(폰·태블릿), 화면 밀도에서 레이아웃 점검.
    • 다국어(특히 한국어→영어→장문 언어)에서 문자열 배치·레이아웃 확인.
    • 엣지 케이스: 결과가 0, 1, 수백/수천 개일 때 UI 반응 확인.

@yuni-ju yuni-ju self-assigned this Mar 18, 2026
@yuni-ju yuni-ju added the QA label Mar 18, 2026
@coderabbitai
Copy link

coderabbitai bot commented Mar 18, 2026

Walkthrough

SearchResultScreen의 디자인 QA 수정: 색상 팔레트(Gray4_C5CAD2, Gray6_F0F1F3) 추가 및 적용, Divider 두께/색 변경, 검색 결과 카운트 레이아웃과 빈 상태 텍스트 스타일(간격·폰트웨이트·색상) 조정, 문자열 리소스 추가.

Changes

Cohort / File(s) Summary
검색 결과 화면 스타일링
presentation/src/main/java/daily/dayo/presentation/screen/search/SearchResultScreen.kt
Gray4_C5CAD2, Gray6_F0F1F3 색상 임포트 및 적용; 하단 Divider를 Transparent에서 Gray6_F0F1F3(1.dp)로 교체; SearchResultEmpty에 2.dp Spacer 추가 및 설명 텍스트를 Gray4_C5CAD2·fontWeight=500·caption2로 변경; SearchResultsCount에 White Surface 배경·패딩 추가, 텍스트들에 라인하이트·색상(Primary_23C882, Gray2_767B83) 및 간격(2.dp) 조정.
문자열 리소스 추가
presentation/src/main/res/values/strings.xml
search_result_count_description 문자열("개의 검색 결과") 추가.

개요

SearchResultScreen의 디자인 QA 이슈들을 해결하기 위해 색상 팔레트(Gray4_C5CAD2, Gray6_F0F1F3) 업데이트, 구분선 스타일링 변경, 검색 결과 카운트 표시 개선, 빈 상태 텍스트 스타일링 조정을 수행했습니다.

변경 사항

코호트 / 파일 요약
검색 결과 화면 스타일링
presentation/src/main/java/daily/dayo/presentation/screen/search/SearchResultScreen.kt
구분선 색상을 Gray6_F0F1F3로 통일(두께 1.dp); 검색 결과 카운트 표시를 별도 Text 요소로 분리하여 White 배경 및 패딩 적용; SearchResultEmpty 텍스트 스타일을 caption2 및 Gray4_C5CAD2로 업데이트하고 2.dp 스페이서 추가; 일반 레이아웃 및 색상 일관성 조정.
문자열 리소스 추가
presentation/src/main/res/values/strings.xml
새로운 문자열 리소스 search_result_count_description ("개의 검색 결과") 추가.
🚥 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 모든 연결된 이슈의 요구사항이 충족됩니다: #1024 하단 divider 추가(Gray6_F0F1F3, 1.dp), #1025 검색 결과 텍스트 색상/간격 조정(Primary_23C882, 줄 높이 조정), #1026 메시지 그룹 간격 수정(2.dp Spacer), #1027 설명 폰트 무게/색상 업데이트(500, Gray4_C5CAD2).
Out of Scope Changes check ✅ Passed 모든 변경 사항이 연결된 이슈의 범위 내에 있으며, 검색 결과 화면 UI 업데이트와 직접 관련된 스타일링과 리소스 추가만 포함됩니다.

✏️ 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/search
📝 Coding Plan
  • Generate coding plan for human review comments

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

Tip

You can enable review details to help with troubleshooting, context usage and more.

Enable the reviews.review_details setting to include review details such as the model used, the time taken for each step and more in the review comments.

Copy link

@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

🤖 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/search/SearchResultScreen.kt`:
- Around line 339-345: The Spacer and the Text are both adding vertical spacing,
causing the title-description gap to exceed 2dp; in SearchResultScreen remove
the Text's vertical padding (the Modifier.padding(vertical = 2.dp) on the Text
that uses stringResource(R.string.search_result_empty_description)) so only
Spacer(modifier = Modifier.height(2.dp)) controls the spacing, or replace the
padding with a non-vertical-only modifier (e.g., horizontal padding) if needed.
- Around line 361-370: The horizontal gap between the count and its label is
applied twice: remove one of the spacing rules to avoid doubled space. In
SearchResultScreen (the Row using Arrangement.spacedBy(2.dp)) either delete the
Arrangement.spacedBy(2.dp) or remove the Text modifier = Modifier.padding(end =
2.dp) on the count Text so only a single spacing is used; pick the approach
consistent with surrounding layout and update the remaining spacing value if
needed.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: dc172e80-434b-4614-9b08-330a76902b0e

📥 Commits

Reviewing files that changed from the base of the PR and between 71a27c4 and cff4b31.

📒 Files selected for processing (2)
  • presentation/src/main/java/daily/dayo/presentation/screen/search/SearchResultScreen.kt
  • presentation/src/main/res/values/strings.xml

@yuni-ju yuni-ju requested a review from DongJun-H March 18, 2026 12:47
Copy link

@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.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
presentation/src/main/java/daily/dayo/presentation/screen/search/SearchResultScreen.kt (1)

452-462: ⚠️ Potential issue | 🟡 Minor

!! 연산자 사용으로 인한 잠재적 NPE 위험

users[index]가 null을 반환할 수 있는데, !!로 강제 언래핑하면 런타임 크래시가 발생할 수 있습니다. 안전한 null 처리를 권장합니다.

🛡️ 제안된 수정
             items(users.itemCount) { index ->
                 val item = users[index]
-                SearchResultUserView(
-                    user = item!!,
+                item?.let { user ->
+                    SearchResultUserView(
+                        user = user,
-                    onFollowSuccess = onFollowSuccess,
+                        onFollowSuccess = onFollowSuccess,
-                    onUnFollowSuccess = onUnFollowSuccess,
+                        onUnFollowSuccess = onUnFollowSuccess,
-                    currentUserMemberId = currentUserMemberId,
+                        currentUserMemberId = currentUserMemberId,
-                    onFollowClick = onFollowClick,
+                        onFollowClick = onFollowClick,
-                    onUnFollowClick = onUnFollowClick,
+                        onUnFollowClick = onUnFollowClick,
-                    onClickProfile = onClickProfile
+                        onClickProfile = onClickProfile
-                )
+                    )
+                }
             }
🤖 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/search/SearchResultScreen.kt`
around lines 452 - 462, users[index]를 강제 언래핑하는 부분에서 NPE가 발생할 수 있으므로
SearchResultUserView에 null이 전달되지 않도록 안전하게 처리하세요: items(users.itemCount) 블록 내부에서
users.getOrNull(index)?.let { user -> SearchResultUserView(user = user,
onFollowSuccess = onFollowSuccess, onUnFollowSuccess = onUnFollowSuccess,
currentUserMemberId = currentUserMemberId, onFollowClick = onFollowClick,
onUnFollowClick = onUnFollowClick, onClickProfile = onClickProfile) } 처럼 안전 호출
또는 null 체크를 사용하거나 미리 users를 filterNotNull()으로 정리한 후 반복하도록 변경해
SearchResultScreen.kt의 해당 부분(SearchResultUserView 호출)을 수정하세요.
🧹 Nitpick comments (1)
presentation/src/main/java/daily/dayo/presentation/screen/search/SearchResultScreen.kt (1)

352-365: Surface의 배경색 설정 방식 개선을 권장합니다.

Surfacemodifier.background()와 내부 Row에도 중복으로 .background(White_FFFFFF)가 적용되어 있습니다. Surfacecolor 파라미터를 통해 배경색을 설정하는 것이 권장됩니다.

♻️ 제안된 수정
     Surface(
         modifier = Modifier
             .fillMaxWidth()
             .height(44.dp)
-            .background(White_FFFFFF)
             .padding(horizontal = 18.dp, vertical = 12.dp)
+        color = White_FFFFFF
     ) {
         Row(
             horizontalArrangement = Arrangement.spacedBy(2.dp),
             verticalAlignment = Alignment.CenterVertically,
             modifier = Modifier
                 .height(20.dp)
-                .background(White_FFFFFF)
         ) {
🤖 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/search/SearchResultScreen.kt`
around lines 352 - 365, Surface currently sets its background via
Modifier.background(White_FFFFFF) and the inner Row also repeats
.background(White_FFFFFF); instead, pass the background color to Surface's color
parameter (e.g., Surface(color = White_FFFFFF)) and remove the duplicate
Modifier.background(White_FFFFFF) calls from both the Surface's modifier and the
Row modifier so only Surface controls the background while keeping padding,
height and other modifiers unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In
`@presentation/src/main/java/daily/dayo/presentation/screen/search/SearchResultScreen.kt`:
- Around line 452-462: users[index]를 강제 언래핑하는 부분에서 NPE가 발생할 수 있으므로
SearchResultUserView에 null이 전달되지 않도록 안전하게 처리하세요: items(users.itemCount) 블록 내부에서
users.getOrNull(index)?.let { user -> SearchResultUserView(user = user,
onFollowSuccess = onFollowSuccess, onUnFollowSuccess = onUnFollowSuccess,
currentUserMemberId = currentUserMemberId, onFollowClick = onFollowClick,
onUnFollowClick = onUnFollowClick, onClickProfile = onClickProfile) } 처럼 안전 호출
또는 null 체크를 사용하거나 미리 users를 filterNotNull()으로 정리한 후 반복하도록 변경해
SearchResultScreen.kt의 해당 부분(SearchResultUserView 호출)을 수정하세요.

---

Nitpick comments:
In
`@presentation/src/main/java/daily/dayo/presentation/screen/search/SearchResultScreen.kt`:
- Around line 352-365: Surface currently sets its background via
Modifier.background(White_FFFFFF) and the inner Row also repeats
.background(White_FFFFFF); instead, pass the background color to Surface's color
parameter (e.g., Surface(color = White_FFFFFF)) and remove the duplicate
Modifier.background(White_FFFFFF) calls from both the Surface's modifier and the
Row modifier so only Surface controls the background while keeping padding,
height and other modifiers unchanged.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6955afb6-b0dd-4e00-9cb6-e453efc2df69

📥 Commits

Reviewing files that changed from the base of the PR and between cff4b31 and 5584e11.

📒 Files selected for processing (1)
  • presentation/src/main/java/daily/dayo/presentation/screen/search/SearchResultScreen.kt

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

Status: Todo

1 participant