[UI/#156] 제보 상세 화면 제보 이미지간 간격 추가

[l5x5l]

[ PR Content ]

제보 상세 화면에서 제보 이미지간 간격을 추가합니다.

Related issue

• closed [UI] 제보 상세 조회 화면에서 이미지간 간격을 추가합니다. #156

Screenshot 📸

Work Description

• 제보 이미지간 간격 추가

To Reviewers 📢

• 🖼️

Summary by CodeRabbit

릴리스 노트

• UI 개선
  • 리포트 상세 페이지에서 이미지 갤러리 내 이미지들 사이의 간격이 개선되어 더욱 명확한 시각적 구분이 제공됩니다.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

워크스루

보고 상세 조회 화면의 이미지 행(Row)에 8dp 수평 간격을 추가하고, 프리뷰 상태에서 두 개의 빈 이미지 URL을 제공하여 미리보기 표시를 개선했습니다.

변경 사항

집단 / 파일	변경 요약
UI 간격 개선 presentation/src/main/java/com/threegap/bitnagil/presentation/reportdetail/ReportDetailScreen.kt	이미지 행에 horizontalArrangement = Arrangement.spacedBy(8.dp) 추가하여 이미지 간 수평 간격 설정. 프리뷰의 Init 상태에 imageUrls = listOf("", "") 제공.

예상 코드 리뷰 노력

🎯 1 (Trivial) | ⏱️ ~3분

• 단일 파일의 단순한 UI 레이아웃 조정으로, 간격 값(8.dp) 적절성 확인 및 프리뷰 동작 검증만 필요합니다.

시

🐰 Spaces bloom between the frames,
Eight pixels dance in gentle reigns,
The preview now shows what was meant,
A cleaner detail, elegantly spent! ✨

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목이 풀 리퀘스트의 주요 변경사항(제보 상세 화면에서 이미지 간 간격 추가)을 명확하게 설명하고 있습니다.
Description check	✅ Passed	PR 설명이 템플릿 구조를 따르고 관련 이슈, 스크린샷, 작업 설명을 모두 포함하고 있습니다.
Linked Issues check	✅ Passed	코드 변경사항(Row에 horizontalArrangement = Arrangement.spacedBy(8.dp) 추가)이 연결된 이슈 #156의 요구사항(이미지 간 간격 추가)을 충족합니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 이슈 #156의 범위 내에 있으며, 제보 이미지 간격 추가라는 목표에만 집중되어 있습니다.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch ui/report_detail_image_space

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

presentation/src/main/java/com/threegap/bitnagil/presentation/reportdetail/ReportDetailScreen.kt (2)

88-90: 이미지 간 간격이 정확하게 적용되었습니다.

Arrangement.spacedBy(8.dp)를 사용하여 이미지 간 간격을 깔끔하게 구현했습니다.

다만, 이미지가 많을 경우(4-5개 이상) 화면을 벗어날 수 있으니, 향후 필요시 LazyRow와 가로 스크롤을 고려해보시기 바랍니다.

향후 가로 스크롤이 필요한 경우 다음과 같이 개선할 수 있습니다:

-            Row(
-                horizontalArrangement = Arrangement.spacedBy(8.dp),
-            ) {
-                state.imageUrls.forEach { imageUrl ->
+            LazyRow(
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+            ) {
+                items(state.imageUrls) { imageUrl ->
                     AsyncImage(
                         model = ImageRequest.Builder(LocalContext.current)
                             .data(imageUrl)
                             .build(),
                         modifier = Modifier
                             .size(74.dp)
                             .clip(shape = RoundedCornerShape(9.dp))
                             .background(color = BitnagilTheme.colors.black),
                         contentScale = ContentScale.Crop,
                         contentDescription = null,
                     )
                 }
             }

---

148-148: 프리뷰에 이미지 URL을 추가하여 레이아웃을 확인할 수 있도록 개선되었습니다.

다만, 빈 문자열 대신 플레이스홀더 이미지 URL을 사용하면 프리뷰에서 실제 이미지 표시를 확인할 수 있어 더 유용할 것 같습니다.

예시:

-                imageUrls = listOf("", ""),
+                imageUrls = listOf(
+                    "https://via.placeholder.com/74",
+                    "https://via.placeholder.com/74"
+                ),

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1bfff58 and 2cbf224.

📒 Files selected for processing (1)

• presentation/src/main/java/com/threegap/bitnagil/presentation/reportdetail/ReportDetailScreen.kt (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build