fix: 디자인 QA 반영#147
Conversation
Walkthrough디자인 QA 반영으로 전반적인 UI 간격, 타이포그래피, 아이콘/버튼 크기, 정렬, 구분선 처리 등을 조정했습니다. 공용 버튼 사이즈 스타일 수치 업데이트, 일부 패딩을 고정 dp로 전환, Divider/Spacer 배치 조정, 텍스트 정렬/스타일 변경 등이 포함됩니다. 로직·공개 API 변경은 없습니다. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Assessment against linked issues
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (2)
feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/component/FilterChip.kt (1)
47-57: 중요: .then 블록에서 파라미터 modifier 재사용으로 수정자 중복 적용 가능성
.then(if (isSelected) { modifier } else { modifier.border(...) })는 파라미터로 받은modifier를 체인 끝에 다시 붙입니다. 호출 측에서modifier에 padding/size/semantics 등이 포함되어 있으면 두 번 적용될 수 있습니다. 의도는 빈 Modifier 또는 border만 추가하는 것이므로 아래처럼 교체 바랍니다.예시:
.then( if (isSelected) { Modifier } else { Modifier.border( width = 1.dp, color = ReedTheme.colors.borderPrimary, shape = RoundedCornerShape(ReedTheme.radius.full), ) }, )feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/RecordItem.kt (1)
62-83: 빈 목록일 때 런타임 크래시 가능 —emotionTags[0]접근 가드 필요
emotionTags가 비어있으면 인덱싱(0)에서 예외가 발생합니다. 실제 Preview에서도 빈 리스트를 넘기고 있어 재현 가능성이 높습니다. 안전하게 처리하도록 가드하거나 기본값을 두는 편이 좋습니다.예시 수정(diff는 해당 블록에 맞춰 최소 변경으로 제안):
Row( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, ) { + val emotion = emotionTags.firstOrNull() Image( - painter = painterResource(getEmotionImageResourceByDisplayName(emotionTags[0])), + painter = painterResource(getEmotionImageResourceByDisplayName(emotion ?: "따뜻함")), contentDescription = "Emotion Graphic", modifier = Modifier .size(40.dp) - .clip(CircleShape) - .background(ReedTheme.colors.basePrimary), + .clip(CircleShape) + .background(ReedTheme.colors.basePrimary, CircleShape), ) Spacer(modifier = Modifier.width(ReedTheme.spacing.spacing2)) Column { - Text( - text = "#${emotionTags[0]}", - color = ReedTheme.colors.contentBrand, - style = ReedTheme.typography.label1SemiBold, - ) + if (emotion != null) { + Text( + text = "#$emotion", + color = ReedTheme.colors.contentBrand, + style = ReedTheme.typography.label1SemiBold, + ) + } Text( text = createdAt, color = ReedTheme.colors.contentTertiary, style = ReedTheme.typography.caption1Regular, ) }
- 필요 시,
emotion == null인 경우에 대한 플레이스홀더(예: 기본 아이콘/태그 숨김) 정책을 디자인과 합의해 주세요.
🧹 Nitpick comments (17)
feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/BookUpdateBottomSheet.kt (1)
31-31: '14.dp' 직접값 사용 — 디자인 토큰(또는 공통 상수)로 추출을 권장합니다이번 PR 전반에서 vertical padding을 14.dp로 표준화하고 있어 유지보수 용이성을 위해 토큰화가 좋습니다. 우선 파일 로컬 상수로 감싸도 효과가 큽니다. (동일 패턴이 BookRegisterBottomSheet.kt에도 존재)
적용 예시:
- .padding(vertical = 14.dp), + .padding(vertical = VerticalPaddingMd),파일 상단(또는 하단)에 다음 상수 추가:
// 파일 상단에 추가 private val VerticalPaddingMd = 14.dp장기적으로는 ReedTheme.spacing 등에 정식 토큰(예: interactiveVerticalMd)을 추가해 전체 코드베이스에서 일관되게 사용할 수 있도록 하는 것을 추천합니다.
Also applies to: 144-144
feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/book/component/BookRegisterBottomSheet.kt (1)
31-31: 중복되는 '14.dp' 매직넘버 — 공통 상수 또는 디자인 토큰으로 치환하면 좋습니다BookUpdateBottomSheet와 동일한 14.dp vertical padding이 반복됩니다. 공통 상수로 감싸거나 디자인 토큰으로 승격하면 이후 스펙 변경 시 수정 범위를 줄일 수 있습니다.
적용 예시:
- .padding(vertical = 14.dp), + .padding(vertical = VerticalPaddingMd),파일 상단(또는 하단)에 다음 상수 추가:
private val VerticalPaddingMd = 14.dp전사적으로는 ReedTheme.spacing에 정식 토큰을 만드는 방향을 추천드립니다.
Also applies to: 143-143
feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/book/component/BookRegisterSuccessBottomSheet.kt (1)
54-61: 여백 조정은 적합. 상단 Spacer 추가 의도 확인 + 이미지 접근성(contentDescription) 재검토 제안
- 상단 패딩(top spacing5) 뒤에 Spacer(spacing3)를 추가하고, 이미지 하단 Spacer를 spacing5로 키운 변경은 시각적 리듬 측면에서 타당해 보입니다. 다만 상단 패딩과 Spacer가 누적되어 과한 여백이 되지 않는지 의도 확인 부탁드립니다.
- 이미지가 장식용이라면 스크린 리더 노이즈를 줄이기 위해 contentDescription = null을 권장합니다. 의미 전달이 필요하다면 stringResource로 관리해 주세요.
적용 예시:
Image( painter = painterResource(R.drawable.img_book_register_complete), - contentDescription = "Book Register Complete Image", + contentDescription = null, modifier = Modifier.height(120.dp), )feature/splash/src/main/kotlin/com/ninecraft/booket/splash/SplashUi.kt (1)
70-74: textAlign을 효과적으로 적용하려면 가로 제약을 부여하세요현재 Text는 기본적으로 wrap content라 textAlign = Center가 실질적으로 영향이 없을 수 있습니다(특히 2줄 이상일 때). 가로 제약을 주기 위해 fillMaxWidth를 추가하는 것을 권장합니다.
Text( text = stringResource(R.string.splash_title), + modifier = Modifier.fillMaxWidth(), color = ReedTheme.colors.contentInverse, textAlign = TextAlign.Center, style = ReedTheme.typography.heading2SemiBold, )feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/component/HomeBanner.kt (1)
76-76: 수평 간격에는 width 사용을 권장Row 내부 수평 간격이라면 의도를 명확히 하기 위해 size보다 width가 가독성에 유리합니다. 동작상 문제는 없으므로 선택적 변경 제안입니다.
-Spacer(modifier = Modifier.size(ReedTheme.spacing.spacing1)) +Spacer(modifier = Modifier.width(ReedTheme.spacing.spacing1))feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/RecordSortBottomSheet.kt (1)
97-103: Divider를 컨텐츠 패딩에 맞춰 인셋하는 것을 제안현재 Divider가 시트 전체 폭으로 그려져 헤더와 리스트의 좌우 여백과 불일치합니다. 컨텐츠 라인에 맞춘 인셋 Divider가 더 자연스러울 수 있습니다. 디자인이 풀블리드 Divider를 요구하지 않는다면 아래처럼 수평 패딩을 맞춰 주세요.
- if (index < recordSortItems.lastIndex) { - HorizontalDivider( - modifier = Modifier.fillMaxWidth(), - thickness = 1.dp, - color = ReedTheme.colors.dividerSm, - ) - } + if (index < recordSortItems.lastIndex) { + HorizontalDivider( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = ReedTheme.spacing.spacing5), + thickness = 1.dp, + color = ReedTheme.colors.dividerSm, + ) + }feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/ocr/OcrUi.kt (1)
316-321: 리스트 상단 여백은 item 대신 contentPadding으로 처리하면 더 간결합니다불필요한 가상 아이템을 줄여 성능·접근성 측면에서 유리하고, 이후 헤더/푸터 추가 시에도 일관성이 좋아집니다.
아래처럼 변경을 제안드립니다.
LazyColumn( modifier = Modifier .weight(1f) - .padding(horizontal = ReedTheme.spacing.spacing5), + .padding(horizontal = ReedTheme.spacing.spacing5), + contentPadding = PaddingValues(top = ReedTheme.spacing.spacing1), verticalArrangement = Arrangement.spacedBy(ReedTheme.spacing.spacing2), ) { - item { - Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing1)) - } items(state.sentenceList.size) { index ->feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUi.kt (1)
193-193: Preview를 Success로 고정한 의도 이해됨 — 샘플 데이터 추가를 고민해보세요현재는 빈 리스트일 경우 Empty 상태만 보여질 수 있습니다. 미리보기에서 실제 콘텐츠 카드/페이저 동작을 확인하려면 더미 recentBooks를 1~2개 넣는 것도 방법입니다.
feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/LibraryUi.kt (1)
170-182: TextAlign.Center만으로는 효과가 제한적 — fillMaxWidth 추가를 권장합니다현재 Column이 wrap-content 폭이라 Text의 textAlign이 실제 화면 너비 기준 중앙 정렬로 보장되지 않습니다. 각 Text에 modifier.fillMaxWidth()를 추가하면 의도한 중앙 정렬이 확실해집니다.
Text( text = stringResource(R.string.library_empty_book_title), color = ReedTheme.colors.contentPrimary, + modifier = Modifier.fillMaxWidth(), textAlign = TextAlign.Center, style = ReedTheme.typography.headline1SemiBold, ) Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing2)) Text( text = stringResource(R.string.library_empty_book_description), color = ReedTheme.colors.contentSecondary, + modifier = Modifier.fillMaxWidth(), textAlign = TextAlign.Center, style = ReedTheme.typography.body1Medium, )feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/book/component/BookItem.kt (2)
27-27: em 단위 사용 시 import 추가 필요아래 제안(문자 간격 em 활용)을 적용하려면 em import가 필요합니다.
import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp +import androidx.compose.ui.unit.sp +import androidx.compose.ui.unit.em
99-103: 문자 간격은 em, lineHeight는 기반 스타일에서 파생값으로 계산 권장하드코딩된 16.sp을 기준으로 곱을 적용하면, 디자인 토큰(typography) 변경 시 여기만 값이 어긋납니다. 기반 스타일(fontSize)에서 파생시키고, letterSpacing은 em 단위를 권장합니다.
- maxLines = 2, - style = ReedTheme.typography.body1SemiBold.copy( - lineHeight = 16.sp * 1.4f, - letterSpacing = 16.sp * 0.01f, - ), + maxLines = 2, + style = ReedTheme.typography.body1SemiBold.copy( + lineHeight = ReedTheme.typography.body1SemiBold.fontSize * 1.4f, + letterSpacing = 0.01.em, + ),참고: letterSpacing의 em 사용은 Compose 버전에 따라 차이가 있을 수 있어, 팀이 사용하는 Compose 버전 호환 여부를 한 번만 확인 부탁드립니다.
feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/component/BookCard.kt (2)
161-162: Seed 카운트 영역의 세로 패딩 9.dp 하드코딩 — 토큰화 여부 확인 요청디자인 요구로 특정 수치(9.dp)가 필요한 경우라면 이해됩니다. 다만 동일 패턴이 반복된다면 spacing 토큰 추가를 고려해 주세요. 재사용성·일관성이 높아집니다.
227-229: EmptyBookCard의 테두리 토큰 전환 일관성 좋습니다 — BookCard 쪽도 동일 의도인지 확인 요청EmptyBookCard는 width=ReedTheme.border.border1, color=borderPrimary로 갱신되었는데, 상단 BookCard의 외곽선(라인 71–74)은 여전히 1.dp + borderSecondary를 사용 중입니다. 의도된 차별화인지, 동일 정책 적용 누락인지 확인 부탁드립니다.
참고(예시):
.border( width = ReedTheme.border.border1, color = ReedTheme.colors.borderPrimary, shape = RoundedCornerShape(ReedTheme.radius.sm), )feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/RecordItem.kt (2)
108-112: 프리뷰 데이터 보강 제안Preview에서 빈 리스트를 전달하면 위 가드가 없을 때 크래시, 가드가 있어도 시각적으로 검증이 어려울 수 있습니다. 대표 값 하나를 넣어 실제 렌더링을 확인하는 편이 좋습니다.
- emotionTags = persistentListOf(), + emotionTags = persistentListOf("따뜻함"),
64-64: 접근성 텍스트의 현지화 고려
contentDescription = "Emotion Graphic"은 영어 하드코딩입니다. 앱 언어에 맞게 문자열 리소스로 분리해 주세요. 장식용 이미지라면null로 설정하는 것도 검토 가능합니다.feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/record/component/ReviewBox.kt (2)
50-57: 중복 패턴 공용화 제안 (Avatar/Chip 컴포넌트로 추출)
RecordItem과 동일한 원형 이미지 + 배경 패턴이 반복됩니다. 크기만 파라미터화한 공용 컴포저블(예:EmotionAvatar(emotion, size))로 추출하면 유지보수성과 디자인 일관성이 좋아집니다.
51-53: 접근성 텍스트의 현지화 고려여기도
contentDescription이 영어 하드코딩입니다. 문자열 리소스로 분리하거나 장식용일 경우null설정을 검토해 주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (25)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonSizeStyle.kt(5 hunks)core/ui/src/main/kotlin/com/ninecraft/booket/core/ui/component/ReedDialog.kt(1 hunks)feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/BookDetailUi.kt(3 hunks)feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/BookItem.kt(1 hunks)feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/BookUpdateBottomSheet.kt(2 hunks)feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/ReadingRecordsHeader.kt(1 hunks)feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/RecordItem.kt(1 hunks)feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/RecordSortBottomSheet.kt(5 hunks)feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/SeedItem.kt(1 hunks)feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/record/component/ReviewBox.kt(1 hunks)feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUi.kt(2 hunks)feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/component/BookCard.kt(3 hunks)feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/component/HomeBanner.kt(1 hunks)feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/LibraryUi.kt(3 hunks)feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/component/FilterChip.kt(2 hunks)feature/login/src/main/kotlin/com/ninecraft/booket/feature/termsagreement/TermsAgreementUi.kt(1 hunks)feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/ocr/OcrUi.kt(1 hunks)feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/ocr/component/SentenceBox.kt(2 hunks)feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/EmotionStep.kt(2 hunks)feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/book/BookSearchUi.kt(1 hunks)feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/book/component/BookItem.kt(3 hunks)feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/book/component/BookRegisterBottomSheet.kt(2 hunks)feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/book/component/BookRegisterSuccessBottomSheet.kt(1 hunks)feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/library/LibrarySearchUi.kt(1 hunks)feature/splash/src/main/kotlin/com/ninecraft/booket/splash/SplashUi.kt(2 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: seoyoon513
PR: YAPP-Github/Reed-Android#46
File: feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/component/InfiniteLazyColumn.kt:83-95
Timestamp: 2025-07-14T00:46:03.843Z
Learning: seoyoon513과 팀은 한국어 주석을 선호하며, 한국어 주석을 영어로 번역하라는 제안을 하지 않아야 함
📚 Learning: 2025-07-31T23:17:40.054Z
Learnt from: easyhooon
PR: YAPP-Github/Reed-Android#88
File: feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/RecordItem.kt:29-37
Timestamp: 2025-07-31T23:17:40.054Z
Learning: Reed-Android 프로젝트에서는 API가 준비되지 않은 상황에서 UI를 먼저 구현하고, API 연동 시점에 하드코딩된 데이터를 실제 데이터로 교체하는 개발 방식을 사용한다. RecordItem 컴포넌트의 emotionTags 매개변수도 API 연동 시점에 `text = emotionTags.joinToString(separator = "·") { "#$it" }`로 적용될 예정이다.
Applied to files:
feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/SeedItem.kt
📚 Learning: 2025-07-22T05:19:10.071Z
Learnt from: seoyoon513
PR: YAPP-Github/Reed-Android#63
File: feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/LibraryPresenter.kt:28-53
Timestamp: 2025-07-22T05:19:10.071Z
Learning: feature/library의 LibraryPresenter에서 현재 FilterChipState의 카운트 값들은 UI 확인용 더미 데이터이며, API가 준비되면 실제 데이터로 교체될 예정입니다.
Applied to files:
feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/component/FilterChip.kt
🧬 Code Graph Analysis (2)
feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/book/BookSearchUi.kt (1)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/ReedDivider.kt (1)
ReedDivider(13-21)
feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/library/LibrarySearchUi.kt (1)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/ReedDivider.kt (1)
ReedDivider(13-21)
⏰ 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: ci-build
🔇 Additional comments (28)
feature/login/src/main/kotlin/com/ninecraft/booket/feature/termsagreement/TermsAgreementUi.kt (1)
62-62: 타이틀 하단 간격을 spacing7로 확대 — 디자인 가이드 반영으로 보이며 문제 없습니다상단 여백(76.dp) 이후 제목-전체동의 블록 간격을 늘려 가독성이 좋아졌습니다. 해당 화면은 스크롤이 없으므로, 소형 기기에서도 오버플로우가 없는지만 한 번만 실제 기기에서 확인해 주세요.
feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/ReadingRecordsHeader.kt (1)
49-49: 정렬 중앙 + 텍스트-아이콘 간격 추가 LGTM정렬과 간격 조정으로 시각적 균형과 클릭 타겟 인지가 개선되었습니다. 디자인 QA 의도에 잘 부합합니다.
Also applies to: 56-56
feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/SeedItem.kt (1)
55-55: 타이포그래피를 label2 계열로 통일 — 일관성 측면에서 적절합니다라벨/카운트에 label2SemiBold/label2Regular 적용으로 DS와의 일관성이 좋아졌습니다. 스펙상 글자 크기 대비 배경 대비(contrast)도 확인해 두면 접근성 측면에서 더 안전합니다.
Also applies to: 63-63
feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/BookItem.kt (1)
97-97: 저자/출판사 행과 발행년도 사이 미세 간격(spacing05) 추가, 가독성 개선 LGTM섬세한 정보 구분에 도움이 됩니다. 동일 패턴의 카드/리스트에도 일관 적용되어 있으면 더욱 좋겠습니다.
feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/library/LibrarySearchUi.kt (1)
89-91: ReedDivider 기본값 사용으로 토큰 일관성 확보, LGTM공용 컴포저블의 기본 크기(예: fillMaxWidth + 고정 높이)를 신뢰하도록 정리한 점 좋습니다. 이후 Spacer(spacing2)로 세로 간격을 조정한 부분도 자연스럽습니다.
feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/component/HomeBanner.kt (1)
80-81: 아이콘 사이즈 명시로 시각적 일관성 개선, LGTM디자인 토큰(spacing5)에 맞춘 아이콘 크기 명시는 배너 내 요소 정렬과 균형에 도움됩니다.
core/ui/src/main/kotlin/com/ninecraft/booket/core/ui/component/ReedDialog.kt (1)
74-76: 제목-설명 사이 Spacer를 description 존재 시에만 노출하도록 변경: 의도에 부합합니다description이 없을 때 불필요한 공백을 제거해 다이얼로그 리듬이 더 깔끔해집니다. 다만 기존에 title만 사용하는 다이얼로그 화면에서 간격이 줄어드는 변화가 있으니 스냅샷/QA로 확인만 부탁드립니다.
feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/EmotionStep.kt (2)
77-77: 본문 하단 Spacer 축소(spacing10 → spacing6): OK한 화면 내 요소 밀도를 높여 주는 적절한 조정으로 보입니다. 스크롤 초기 폴드에서 CTA(다음) 버튼 가려짐 여부만 기기별로 한번 확인해 주세요.
136-142: 선택 상태 보더를 테마 토큰(ReedTheme.border.border15)로 통일: 좋습니다디자인 토큰으로 일관화한 점 좋습니다. 다만 border15의 실제 두께가 이전 2.dp와 달라졌다면(두꺼워졌다면) 214.dp 고정 높이 카드 내부 이미지가 시각적으로 작아 보일 수 있습니다. 시안 대비 차이와 라운드 모서리 경계(clip)에서의 보더 절단 이슈만 한번 확인 부탁드립니다.
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonSizeStyle.kt (2)
20-24: largeButtonStyle 세로 패딩 14.dp로 상향: 사양 반영 OK디자인 가이드(세로 14dp → 버튼 높이 48dp)를 정확히 반영했습니다.
39-40: 24.dp 하드코딩 사용 발견 – 아이콘/컴포넌트 크기 토큰 적용 검토 필요아래 위치에서 여전히
24.dp하드코딩이 사용되고 있습니다. 최근 스타일 토큰(22.dp혹은18.dp)로 교체할 수 있는지 검토해주세요.
- core/ui/src/main/kotlin/com/ninecraft/booket/core/ui/component/LoadStateFooter.kt:36
modifier = Modifier.size(24.dp),feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/BookDetailUi.kt (1)
38-39: 버튼 sizeStyle을 mediumButtonStyle로 조정: 페이지 맥락상 적절합니다상태 변경/기록 등록 버튼 모두 화면 내 위계에 맞는 크기로 다운스케일되어 정보 밀도와 균형이 좋아졌습니다. 트레일링 아이콘도 22.dp로 맞춘 점 일관성 좋습니다.
Also applies to: 184-186, 202-205
feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/RecordSortBottomSheet.kt (4)
57-59: 상단 여백만 부여로 레이아웃 단순화: OK상단만 padding을 주고, 내부 Row/Item에서 수평 여백을 관리하는 구조가 명확합니다.
61-64: 헤더 Row에 수평 패딩과 가로 확장 적용: OK타이틀/닫기 아이콘 정렬이 안정적으로 맞춰집니다.
80-81: 헤더-리스트 사이 간격 축소(spacing5 → spacing3): OK시각적 리듬이 더 촘촘해졌습니다. 터치 타겟과의 충돌은 없어 보입니다.
85-96: forEachIndexed로 인덱스 기반 처리 전환: OK마지막 아이템 뒤 Divider 생략 로직을 단순하게 구현할 수 있어 유지보수성에 이점이 있습니다.
feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/ocr/OcrUi.kt (1)
316-316: LazyColumn 좌우 패딩을 spacing5로 통일한 점 좋습니다하단 버튼 Row의 horizontal padding과 정렬이 자연스럽게 맞춰집니다.
feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUi.kt (1)
129-129: EmptyBookCard 좌우 여백만 주도록 수정한 점 좋습니다상단 섹션들과 동일한 horizontal 기준(spacing5) 유지로 화면 그리드가 더 단정해졌습니다.
feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/ocr/component/SentenceBox.kt (1)
29-56: 선택 상태에 따른 타이포 변화(body1Regular ↔ body1Medium) 적용 적절합니다색상 상태와 타이포의 강조 정도가 자연스럽게 맞습니다. 지역 변수로 분기해 가독성도 좋아졌습니다.
feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/LibraryUi.kt (2)
19-19: TextAlign import 추가 OK아래 EmptyResult에서의 중앙 정렬 적용을 위한 import로 보이며 적절합니다.
101-101: 필터칩 아래 간격(spacing1) 추가 적절합니다필터 영역과 목록 사이의 시각적 구분이 명확해졌습니다.
feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/book/BookSearchUi.kt (1)
107-109: ReedDivider 기본값 사용 + Spacer 간격 축소로 정보 밀도 개선디자인 토큰에 맞는 Divider 높이(기본 8dp)를 활용하면서, 하단 간격을 spacing2로 줄여 상단 검색영역과의 리듬이 더 단정해졌습니다.
feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/book/component/BookItem.kt (2)
105-105: 제목-메타 정보 간 여백 확대(spacing2) 적용 좋습니다가독성이 개선됩니다. 다른 유사 컴포넌트와의 일관성도 좋아 보입니다.
148-148: 프리뷰: 긴 제목으로 2줄 말줄임 동작 검증 👍실제 시나리오에 근접한 케이스로 렌더링 검증에 도움이 됩니다.
feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/component/BookCard.kt (2)
169-169: Seed Count 이미지 사이즈에 테마 토큰 사용 👍상수(32.dp) → ReedTheme.spacing.spacing7 전환으로 일관성 향상.
256-256: 하단 Spacer를 spacing6로 상향 조정한 부분 LGTM컴포넌트 간 여백 리듬이 안정적입니다.
feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/component/FilterChip.kt (2)
33-36: 선택/비선택 상태별 라벨/카운트 색상·타이포 분리 적용 잘되었습니다
- 선택 시: 라벨/카운트 White, 라벨은 SemiBold
- 비선택 시: 라벨 contentSecondary + Medium, 카운트 contentTertiary + SemiBold
디자인 의도와 명확히 부합합니다.
64-66: 텍스트 스타일·색상 적용 변경 LGTMlabelColor/labelStyle, countColor 적용으로 가독성과 상태 구분이 좋아졌습니다.
Also applies to: 70-71
| .clip(CircleShape) | ||
| .background(ReedTheme.colors.basePrimary), | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
원형 배경이 사각으로 렌더링될 수 있음 — background에 Shape 지정 필요
clip(CircleShape) 다음에 background(color)만 호출하면 배경은 사각형으로 그려집니다. 디자인 의도(원형 배경)에 맞추려면 background에 shape를 명시해 주세요.
적용 예시:
- .clip(CircleShape)
- .background(ReedTheme.colors.basePrimary),
+ .clip(CircleShape)
+ .background(ReedTheme.colors.basePrimary, CircleShape),📝 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.
| .clip(CircleShape) | |
| .background(ReedTheme.colors.basePrimary), | |
| ) | |
| .clip(CircleShape) | |
| .background(ReedTheme.colors.basePrimary, CircleShape), | |
| ) |
🤖 Prompt for AI Agents
In
feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/RecordItem.kt
around lines 67-69, the modifier uses .clip(CircleShape) followed by
.background(ReedTheme.colors.basePrimary) which causes the background to render
as a rectangle; update the background call to specify the shape (e.g.,
.background(color = ReedTheme.colors.basePrimary, shape = CircleShape)) so the
background is drawn circularly (you can keep clip for safety or remove it if
redundant).
| .clip(CircleShape) | ||
| .background(ReedTheme.colors.basePrimary), | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
원형 배경이 사각으로 렌더링될 수 있음 — background에 Shape 지정 필요
clip(CircleShape) 뒤의 background(color)는 배경을 사각형으로 그립니다. 원형 배경을 의도하셨다면 shape를 지정해 주세요.
- .clip(CircleShape)
- .background(ReedTheme.colors.basePrimary),
+ .clip(CircleShape)
+ .background(ReedTheme.colors.basePrimary, CircleShape),📝 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.
| .clip(CircleShape) | |
| .background(ReedTheme.colors.basePrimary), | |
| ) | |
| .clip(CircleShape) | |
| .background(ReedTheme.colors.basePrimary, CircleShape), | |
| ) |
🤖 Prompt for AI Agents
In
feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/record/component/ReviewBox.kt
around lines 55 to 57, the call to .background(ReedTheme.colors.basePrimary)
draws a rectangular background despite the preceding .clip(CircleShape); change
the background call to specify the shape so the background is circular (e.g.,
.background(color = ReedTheme.colors.basePrimary, shape = CircleShape)) so the
rendered background matches the clipped CircleShape.
2 participants
🔗 관련 이슈
📙 작업 설명
💬 추가 설명 or 리뷰 포인트
Summary by CodeRabbit