feat: Design 컴포넌트 추가 및 코드 스타일 개선 #41
Conversation
Walkthrough이 변경사항은 디자인 시스템의 버튼, 체크박스, 바텀시트, 앱바 컴포넌트의 코드 스타일을 개선하고, 버튼 스타일에 라운드 형태와 아이콘 크기 속성을 추가하며, 프리뷰를 확장합니다. 또한, 관련 기능에서 버튼 파라미터 순서를 일관되게 정렬합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI
participant ReedButton
User->>UI: 버튼 클릭
UI->>ReedButton: ReedButton(onClick, sizeStyle, colorStyle, ...)
ReedButton->>UI: 버튼 렌더링 (스타일, 라운드, 아이콘 크기 적용)
Assessment against linked issues
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (3)
🧰 Additional context used🧠 Learnings (2)📓 Common learningscore/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ReedButton.kt (1)⏰ 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)
🔇 Additional comments (8)
✨ Finishing Touches
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. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
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: 0
🧹 Nitpick comments (1)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/appbar/ReedTopAppBar.kt (1)
95-98: 문자열 리소스 하드코딩 제거 제안
"Back","Close"문자열이 하드코딩되어 있어 다국어 지원 시 누락될 위험이 있습니다. string 리소스로 분리하면 번역·접근성 관리가 쉬워집니다.-import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource ... - startIconDescription = "Back", + startIconDescription = stringResource(id = R.string.back), ... - endIconDescription = "Close", + endIconDescription = stringResource(id = R.string.close),
core/designsystem/src/main/res/values/strings.xml등에back,close키를 정의해 주세요.Also applies to: 110-113
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/appbar/ReedTopAppBar.kt(2 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/bottomsheet/ReedBottomSheet.kt(2 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonSizeStyle.kt(4 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ReedButton.kt(9 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/CircleCheckBox.kt(2 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/SquareCheckBox.kt(2 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/TickOnlyCheckBox.kt(2 hunks)feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/LoginScreen.kt(1 hunks)feature/login/src/main/kotlin/com/ninecraft/booket/feature/termsagreement/TermsAgreementScreen.kt(1 hunks)
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: seoyoon513
PR: YAPP-Github/Reed-Android#32
File: core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonColorStyle.kt:10-16
Timestamp: 2025-07-08T12:33:01.863Z
Learning: Reed Android 프로젝트에서 KAKAO 버튼 스타일은 디자이너가 pressed 상태 색상을 별도로 정의하지 않았기 때문에 pressed 상태에서도 동일한 Kakao 색상을 사용한다.
feature/login/src/main/kotlin/com/ninecraft/booket/feature/termsagreement/TermsAgreementScreen.kt (2)
Learnt from: seoyoon513
PR: YAPP-Github/Reed-Android#35
File: feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/TermsAgreementScreen.kt:127-127
Timestamp: 2025-07-09T01:14:29.836Z
Learning: In the Reed-Android project's TermsAgreementScreen.kt, the OnTermDetailClick event is intentionally passed an empty string for the URL parameter because the actual URLs for terms detail pages haven't been decided yet. This is a temporary implementation that will be updated once the URLs are finalized.
Learnt from: seoyoon513
PR: YAPP-Github/Reed-Android#32
File: core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonColorStyle.kt:10-16
Timestamp: 2025-07-08T12:33:01.863Z
Learning: Reed Android 프로젝트에서 KAKAO 버튼 스타일은 디자이너가 pressed 상태 색상을 별도로 정의하지 않았기 때문에 pressed 상태에서도 동일한 Kakao 색상을 사용한다.
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/bottomsheet/ReedBottomSheet.kt (3)
Learnt from: seoyoon513
PR: YAPP-Github/Reed-Android#35
File: feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/TermsAgreementScreen.kt:127-127
Timestamp: 2025-07-09T01:14:29.836Z
Learning: In the Reed-Android project's TermsAgreementScreen.kt, the OnTermDetailClick event is intentionally passed an empty string for the URL parameter because the actual URLs for terms detail pages haven't been decided yet. This is a temporary implementation that will be updated once the URLs are finalized.
Learnt from: seoyoon513
PR: YAPP-Github/Reed-Android#32
File: core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonColorStyle.kt:10-16
Timestamp: 2025-07-08T12:33:01.863Z
Learning: Reed Android 프로젝트에서 KAKAO 버튼 스타일은 디자이너가 pressed 상태 색상을 별도로 정의하지 않았기 때문에 pressed 상태에서도 동일한 Kakao 색상을 사용한다.
Learnt from: seoyoon513
PR: YAPP-Github/Reed-Android#32
File: core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Theme.kt:15-21
Timestamp: 2025-07-08T03:21:24.693Z
Learning: Reed Android 프로젝트에서는 다크모드/라이트모드 대응 계획이 없고 기본 테마 값만 사용할 예정이다.
feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/LoginScreen.kt (2)
Learnt from: seoyoon513
PR: YAPP-Github/Reed-Android#35
File: feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/TermsAgreementScreen.kt:127-127
Timestamp: 2025-07-09T01:14:29.836Z
Learning: In the Reed-Android project's TermsAgreementScreen.kt, the OnTermDetailClick event is intentionally passed an empty string for the URL parameter because the actual URLs for terms detail pages haven't been decided yet. This is a temporary implementation that will be updated once the URLs are finalized.
Learnt from: seoyoon513
PR: YAPP-Github/Reed-Android#32
File: core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonColorStyle.kt:10-16
Timestamp: 2025-07-08T12:33:01.863Z
Learning: Reed Android 프로젝트에서 KAKAO 버튼 스타일은 디자이너가 pressed 상태 색상을 별도로 정의하지 않았기 때문에 pressed 상태에서도 동일한 Kakao 색상을 사용한다.
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ReedButton.kt (1)
Learnt from: seoyoon513
PR: YAPP-Github/Reed-Android#32
File: core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonColorStyle.kt:10-16
Timestamp: 2025-07-08T12:33:01.863Z
Learning: Reed Android 프로젝트에서 KAKAO 버튼 스타일은 디자이너가 pressed 상태 색상을 별도로 정의하지 않았기 때문에 pressed 상태에서도 동일한 Kakao 색상을 사용한다.
🧬 Code Graph Analysis (1)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/bottomsheet/ReedBottomSheet.kt (1)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ReedButton.kt (1)
ReedButton(33-99)
⏰ 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 (19)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/appbar/ReedTopAppBar.kt (2)
42-44: Row 파라미터 순서 통일 👍
horizontalArrangement→verticalAlignment순서로 맞춰서 다른 컴포저블들과 스타일을 통일하신 점 확인했습니다. 가독성과 유지보수성이 한층 좋아졌어요.
61-66: Text 파라미터 순서 개선 확인
modifier,textAlign뒤에style을 배치해 스타일 관련 인자를 묶어둔 점이 일관성 측면에서 좋습니다. 추가 조치 필요 없어 보입니다.core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/CircleCheckBox.kt (2)
18-20: 벡터 리소스 로딩 방식 개선을 승인합니다.
painterResource에서ImageVector.vectorResource로 변경하여 벡터 아이콘 로딩 방식을 현대적으로 개선했습니다. 이는 다른 체크박스 컴포넌트들과의 일관성을 위한 좋은 변경입니다.
50-50: 아이콘 렌더링 방식 개선을 승인합니다.
ImageVector.vectorResource를 사용하여 아이콘 렌더링 방식을 개선했습니다. 이는 더 효율적이고 일관된 벡터 처리 방식입니다.core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonSizeStyle.kt (3)
15-15: 아이콘 크기 속성 추가를 승인합니다.
ButtonSizeStyle에iconSize속성을 추가하여 버튼 크기에 따른 아이콘 크기 조정을 지원합니다. 기본값 24dp로 설정하여 하위 호환성을 보장합니다.
27-27: 기존 버튼 스타일의 아이콘 크기 명시적 설정을 승인합니다.각 버튼 크기별로 적절한 아이콘 크기를 명시적으로 설정했습니다. 작은 버튼은 22dp, 나머지는 24dp로 설정하여 시각적 균형을 맞췄습니다.
Also applies to: 39-39, 51-51
54-88: 검증 완료: 새로운 라운드 버튼 스타일이 정상적으로 적용되었습니다ReedButton 컴포저블에서
sizeStyle.iconSize와sizeStyle.iconSpacing이 아래 위치에서 올바르게 사용됨을 확인했습니다:
- core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ReedButton.kt
- Line 73, 94:
Box(Modifier.size(sizeStyle.iconSize))- Line 79, 90:
Spacer(Modifier.width(sizeStyle.iconSpacing))모든 라운드 버튼 스타일(large, medium, small)이 기대한 대로 적용되어 있어 추가 작업 없이 승인합니다.
feature/login/src/main/kotlin/com/ninecraft/booket/feature/termsagreement/TermsAgreementScreen.kt (1)
117-118: ReedButton 파라미터 순서 개선을 승인합니다.
sizeStyle과colorStyle파라미터를 선택적 파라미터들보다 앞에 배치하여 일관성을 개선했습니다. 이는 Compose의 일반적인 패턴을 따르며 API를 더 예측 가능하게 만듭니다.core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/SquareCheckBox.kt (2)
18-20: 벡터 리소스 로딩 방식 개선을 승인합니다.
ImageVector와vectorResource임포트를 추가하여 벡터 아이콘 처리 방식을 현대화했습니다. 이는 CircleCheckBox와 일관된 접근 방식입니다.
50-50: 아이콘 렌더링 방식 개선을 승인합니다.
ImageVector.vectorResource를 사용하여 체크 아이콘을 렌더링하도록 변경했습니다. 이는 더 효율적이고 일관된 벡터 처리 방식으로, 다른 체크박스 컴포넌트들과 통일성을 유지합니다.feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/LoginScreen.kt (1)
57-58: ReedButton 파라미터 순서 개선을 승인합니다.
sizeStyle과colorStyle파라미터를modifier와 다른 선택적 파라미터들보다 앞에 배치했습니다. 이는 TermsAgreementScreen과 일관성을 유지하며 전체 코드베이스의 일관성을 향상시킵니다.core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/bottomsheet/ReedBottomSheet.kt (1)
36-36: 파라미터 순서 일관성 개선 승인ModalBottomSheet와 ReedButton 컴포넌트의 파라미터 순서를 일관되게 정렬한 변경사항입니다. 기능적 변경 없이 코드 스타일만 개선되었습니다.
Also applies to: 55-55, 61-61
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/TickOnlyCheckBox.kt (2)
12-12: 아이콘 로딩 방식 표준화 승인ImageVector와 vectorResource 임포트가 적절히 추가되었습니다.
Also applies to: 14-14
28-29: 벡터 리소스 로딩 방식 개선 승인painterResource에서 ImageVector.vectorResource로 변경하여 다른 체크박스 컴포넌트들과 일관성을 맞춘 좋은 개선사항입니다.
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ReedButton.kt (5)
36-37: 파라미터 순서 표준화 승인sizeStyle과 colorStyle 파라미터를 필수 파라미터로 앞으로 이동시켜 PR 목표에 명시된 일관성을 달성했습니다.
52-52: 애니메이션 레이블 포맷 개선 승인애니메이션 레이블의 포맷이 더 명확하게 개선되었습니다.
69-70: Button 컴포넌트 파라미터 순서 개선 승인contentPadding과 interactionSource 파라미터의 순서가 조정되어 일관성이 향상되었습니다.
73-73: 아이콘 크기 처리 개선 승인sizeIn에서 size로 변경하여 ButtonSizeStyle.iconSize 속성을 직접 사용하는 것이 더 명확하고 일관된 접근방식입니다. 이는 PR에서 언급한 아이콘 크기 조정 기능과 잘 맞습니다.
Also applies to: 94-94
130-271: 프리뷰 확장 및 새로운 기능 시연 승인새로운 라운드 버튼 스타일과 비활성화 상태를 포함한 포괄적인 프리뷰가 추가되어 디자인 시스템의 모든 변형을 잘 보여주고 있습니다. 특히 새로운
ReedButtonDisabledPreview는 접근성 테스트에 유용할 것입니다.Also applies to: 304-445, 478-621, 623-691
| ) { | ||
| Icon( | ||
| painter = painterResource(id = R.drawable.ic_check), | ||
| imageVector = ImageVector.vectorResource(id = R.drawable.ic_check), |
🔗 관련 이슈
📙 작업 설명
📸 스크린샷 또는 시연 영상
Button 프리뷰 부분 예쁘게 바꿔봤습니다
💬 추가 설명 or 리뷰 포인트 (선택)
Summary by CodeRabbit
New Features
Style