[Feat] 컬렉션 파일 모양 컴포넌트 구현#54
Conversation
…45-collection-file-component
nahy-512
added
🧩 Component
kimjw2003
left a comment
kimjw2003
left a comment
There was a problem hiding this comment.
수고하셨습니다!
가로가 긴 버전의 파일 모양 컴포넌트도 있던데 해당 컴포넌트는 따로 구현하실건가요?
컴포넌트 내부적으로 size가 고정되어있길래 질문 남겨드립니다
| @@ -0,0 +1,13 @@ | |||
| package com.flint.domain.model | |||
|
|
|||
| data class CollectionDetailModel( | |||
There was a problem hiding this comment.
p3
제가 CollectionModel을 만들었는데 어떤 차이점이 있는지 확인해봐야 할 것 같습니다
There was a problem hiding this comment.
data class CollectionModel(
val collectionId: String,
val collectionTitle: String,
val collectionImageUrl: String,
val createdAt: String,
val isBookmarked: Boolean,
val author: AuthorModel
)
There was a problem hiding this comment.
서버 데이터 형식을 정확히 확인해본 건 아닌데, 어차피 받아서 컴포에게 보여줘야할 정보는 url 2개, 북마크 개수 등등이 추가로 들어가야 해서 '컴포넌트가 필요한 최소 정보'를 기준으로 모델을 구현해봤습니다.
dto 내용과 네이밍을 맞춰봐도 좋겠지만(추후 서버 연동 시 수정 필요), 구조 자체는 다르게 가져가도 좋지 않을까 싶습니다.
여쭤봤는데 가로 긴 버전은 쓰이는 곳이 없다고 합니다! @kimjw2003 size도 GridLayout으로 들어갈 때, 가운데 간격만 12.dp로 띄워주면 된다고 해요! |
📝 WalkthroughWalkthrough그림자 렌더링 Modifier 확장, 원형 프로필 이미지 컴포넌트, 컬렉션 상세 모델 데이터 클래스 및 컬렉션 파일 표시용 Compose 컴포넌트가 추가되어 컬렉션 상세 UI 구성을 제공합니다. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes 시
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In
@app/src/main/java/com/flint/presentation/collectiondetail/component/CollectionFileItem.kt:
- Around line 106-119: The dropShadow call currently uses CircleShape while
CollectionPocketItem is clipped inside with RoundedCornerShape(12.dp), causing
mismatched shadow shape; update the dropShadow invocation to use the same
RoundedCornerShape(12.dp) (or obtain the shape from CollectionPocketItem if it
exposes one) so the shadow follows the image's rounded-rect corners, and ensure
any other transformations (rotate/offset) remain applied to the same modifier
chain.
🧹 Nitpick comments (1)
app/src/main/java/com/flint/core/common/extension/ModifierExt.kt (1)
45-54:remember키에density가 누락되어 있습니다.
Paint객체가color와blur만을 키로 remember되고 있지만,blurPx계산에density가 사용됩니다. 화면 밀도가 변경되는 시나리오(예: 폴더블 기기, 멀티윈도우)에서 캐시된 Paint가 업데이트되지 않을 수 있습니다.♻️ 권장 수정
- val paint = remember(color, blur) { + val paint = remember(color, blur, density) {
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
app/src/main/res/drawable/img_folder_fg.pngis excluded by!**/*.png
📒 Files selected for processing (4)
app/src/main/java/com/flint/core/common/extension/ModifierExt.ktapp/src/main/java/com/flint/core/designsystem/component/image/ProfileImage.ktapp/src/main/java/com/flint/domain/model/CollectionDetailModel.ktapp/src/main/java/com/flint/presentation/collectiondetail/component/CollectionFileItem.kt
🧰 Additional context used
🧬 Code graph analysis (1)
app/src/main/java/com/flint/core/designsystem/component/image/ProfileImage.kt (1)
app/src/main/java/com/flint/core/designsystem/component/image/NetworkImage.kt (1)
NetworkImage(22-46)
⏰ 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). (2)
- GitHub Check: PR Lint Check
- GitHub Check: PR Build Check
🔇 Additional comments (7)
app/src/main/java/com/flint/core/common/extension/ModifierExt.kt (1)
56-75: 그림자 렌더링 로직이 잘 구현되어 있습니다.
drawBehind를 사용하여 콘텐츠 뒤에 그림자를 올바르게 렌더링합니다.- 비정상적인 크기에 대한 방어 코드(
shadowWidth <= 0f || shadowHeight <= 0f)가 적절합니다.- canvas save/restore 패턴을 올바르게 사용하고 있습니다.
app/src/main/java/com/flint/core/designsystem/component/image/ProfileImage.kt (1)
11-29: LGTM!
isNullOrBlank()체크와 기본 아바타 fallback 로직이 적절하게 구현되어 있습니다.NetworkImage의shape파라미터를 활용하여 내부적으로 clip이 적용되므로 일관성이 유지됩니다.app/src/main/java/com/flint/domain/model/CollectionDetailModel.kt (1)
3-13: 모델 구조가 적절합니다.도메인 모델이 깔끔하게 정의되어 있습니다. 이미지 URL이 두 개로 고정되어 있는 것은 현재 UI 디자인(두 장의 포스터 오버랩)과 일치합니다.
향후 이미지 개수가 가변적으로 변경될 경우
List<String>타입으로 리팩터링을 고려해볼 수 있습니다.app/src/main/java/com/flint/presentation/collectiondetail/component/CollectionFileItem.kt (4)
41-83: 컴포넌트 구조가 잘 설계되어 있습니다.
- 콘텐츠 영역과 텍스트 영역의 분리가 명확합니다.
maxLines와TextOverflow.Ellipsis설정으로 긴 텍스트 처리가 적절합니다.- PR 설명에 언급된 닉네임 글자 수 정책이 확정되면 해당 부분만 수정하면 됩니다.
162-181: 닉네임 영역의 레이아웃을 확인해주세요.
Row에fillMaxWidth()가 적용되어 있어 닉네임이 길 경우 북마크 아이콘과 겹칠 가능성이 있습니다. PR 설명에서 9글자 닉네임 시 두 줄 처리 정책을 기다리고 있다고 언급되어 있으니, 디자인 확정 후maxWidth제한 추가를 고려해주세요.
186-198: LGTM!포스터 이미지 컴포넌트가 간결하게 구현되어 있습니다. 고정 크기와 라운드 코너 설정이 적절합니다.
200-246: 프리뷰가 다양한 케이스를 잘 커버하고 있습니다.짧은 텍스트와 긴 텍스트(두 줄 처리) 케이스를 모두 포함하여 UI 검증에 유용합니다.
3 participants
📮 관련 이슈
📌 작업 내용
📸 스크린샷
😅 미구현
🫛 To. 리뷰어
닉네임이 글자수가 10글자가 2줄로 표시돼서, 추가 정책에 대해 기획-디자인 논의 결과를 기다릴 예정-> 8글자, 내부 패딩 변경, EllipsisSummary by CodeRabbit
릴리스 노트
✏️ Tip: You can customize this high-level summary in your review settings.