feat: DesignSystem 초기 구성#32
Conversation
Walkthrough디자인 시스템의 초기 구성을 위한 대규모 변경이 이루어졌습니다. 색상, 타이포그래피, 간격, 반경, 테두리 등 디자인 토큰이 새롭게 정의되었고, 버튼, 앱바, 체크박스, 바텀시트 등 기본 UI 컴포넌트가 Jetpack Compose 기반으로 구현되었습니다. 기존 테마 및 컴포넌트 사용처도 새로운 시스템으로 전환되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UIComponent
participant ReedTheme
participant DesignToken
User->>UIComponent: 버튼/앱바/체크박스 등 사용
UIComponent->>ReedTheme: 테마 속성(colors, typography 등) 참조
ReedTheme->>DesignToken: 색상/타이포그래피/간격 등 반환
UIComponent-->>User: 커스텀 스타일 UI 렌더링
Assessment against linked issues
Poem
✨ 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: 20
🔭 Outside diff range comments (1)
feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/LoginScreen.kt (1)
77-106: LoginScreen.kt에서 BooketButton → ReedButton 호출부 및 import 수정 필요아래 두 부분을 모두 반영했는지 확인해주세요.
• Import 변경
-import com.ninecraft.booket.core.designsystem.component.button.BooketButton +import com.ninecraft.booket.core.designsystem.component.button.ReedButton• 호출부 변경 및 필수 파라미터 추가
- BooketButton( + ReedButton( onClick = { state.eventSink(LoginScreen.Event.OnKakaoLoginButtonClick) }, modifier = Modifier .fillMaxWidth() .padding(start = 32.dp, end = 32.dp, bottom = 32.dp) .height(56.dp) .align(Alignment.BottomCenter), - containerColor = Kakao, - contentColor = Color(0xFF121212), + colorStyle = /* ReedButtonColorStyle 중 적절한 값 */, + sizeStyle = /* ButtonSizeStyle 중 적절한 값 */, text = { Text( text = stringResource(id = R.string.kakao_login), fontSize = 18.sp, style = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 18.sp, lineHeight = 25.sp, ), ) }, leadingIcon = { Icon( imageVector = ImageVector.vectorResource(id = R.drawable.ic_kakao), contentDescription = "Kakao Icon", tint = Color.Unspecified, ) }, )ReedButton은
colorStyle및sizeStyle파라미터가 필수이므로, 누락 없이 올바른 스타일 값이 전달되었는지 꼭 확인 부탁드립니다.
♻️ Duplicate comments (3)
core/designsystem/src/main/res/drawable/ic_check.xml (1)
6-12: 색상·스타일 리소스화 누락
ic_star.xml과 동일 이슈입니다. 모든 벡터 드로어블에서 동일한 하드코딩 색상이 반복되므로, 색상 리소스를 공통화해 주세요.core/designsystem/src/main/res/drawable/ic_menu.xml (1)
6-12: 색상 토큰 분리 필요같은 이유로
strokeColor를 디자인 시스템의 컬러 토큰으로 치환해 주세요.core/designsystem/src/main/res/drawable/ic_book_open.xml (1)
6-12: 테마 대응을 위한 색상 리소스화앞서 언급한 아이콘들과 동일한 개선 사항입니다.
🧹 Nitpick comments (22)
feature/main/src/main/kotlin/com/ninecraft/booket/feature/main/component/MainBottomBar.kt (1)
150-158: 프리뷰에서 하드코딩 컬러 사용 → 테마 토큰으로 치환 권장선택/비선택 라벨 색을
#1F1F1F,#9E9E9E로 직접 지정하면 다크모드·고대비 모드에서 시인성이 떨어질 수 있습니다.MaterialTheme.colorScheme.onSurface등 디자인 토큰으로 치환해 주세요.feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/SearchScreen.kt (1)
58-65: 프리뷰 명확성 향상프리뷰 안에서
modifier = Modifier.fillMaxSize()등 실제 레이아웃을 지정해주면 캔버스 상에서 컴포넌트 위치를 확인하기 수월합니다. 큰 이슈는 아니지만 UX 측면에서 도움이 됩니다.feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeScreen.kt (1)
58-65: 프리뷰 내 하드코딩 텍스트 → string 리소스로 분리 권장
"홈"문자열을 string 리소스로 이동하면 다국어 대응 및 일관성 유지가 쉬워집니다.core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/Button.kt (1)
88-96: 프리뷰에서 MultipleEventsCutter 동작 확인 어려움프리뷰에서는 클릭 이벤트가 발생하지 않으므로
MultipleEventsCutter호출이 무의미합니다. preview 전용 플래그를 두어 이벤트 컷터를 우회하면 빌드·테스트 속도를 미세하게나마 개선할 수 있습니다.core/designsystem/src/main/res/drawable/ic_star.xml (1)
6-12: 아이콘 색상 하드코딩 대신 테마 리소스 사용 권장
strokeColor="#181D27"처럼 색상이 직접 하드코딩되어 있으면 다크모드·하이콘트라스트 모드 전환에 대응하기 어렵습니다. 디자인 토큰(or@color/리소스)로 분리해두면 유지보수성과 확장성이 높아집니다.
예시:- android:strokeColor="#181D27" + android:strokeColor="@color/reed_icon_primary"feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/LibraryScreen.kt (2)
96-116: Text 설정 중 중복fontSize제거 및 타이포그래피 토큰 사용 제안
fontSize = 18.sp를 인자로 전달하면서, 동시에TextStyle안에서도fontSize = 18.sp를 지정하고 있어 중복입니다.
또한 직접 숫자를 쓰기보다는ReedTheme.typography의 토큰을 활용하면 디자인 시스템 일관성이 높아집니다.-Text( - text = stringResource(id = R.string.logout), - fontSize = 18.sp, - style = TextStyle( - fontWeight = FontWeight.SemiBold, - fontSize = 18.sp, - lineHeight = 25.sp, - ), -) +Text( + text = stringResource(id = R.string.logout), + style = ReedTheme.typography.button.copy( + fontWeight = FontWeight.SemiBold, + ), +)
62-89:modifier.fillMaxSize()중복 적용
Library,LibraryContent,Box세 곳에서 모두modifier.fillMaxSize()를 호출하고 있습니다.
외부에서 전달된modifier가 예상치 못하게 세 번 중첩될 수 있으니, 가장 안쪽 컨테이너(예:Box) 한 곳에서만 처리하도록 단순화하는 것을 권장합니다.core/designsystem/src/main/res/drawable/ic_chevron_up.xml (1)
7-12: 아이콘 색상 하드코딩 대신 테마 색상 리소스 사용 권장
android:strokeColor="#181D27"값을 직접 지정하면 다크 모드 및 테마 전환 시 색상이 고정되어 디자인 시스템의 유연성이 떨어집니다.
?attr/colorOnSurface또는 별도의@color/reed_icon리소스로 분리해 두면 전체 테마 색상 변경이 수월해집니다.core/designsystem/src/main/res/drawable/ic_chevron_down.xml (1)
7-12: 아이콘 스트로크 색상 리소스로 분리 필요위 파일과 동일하게
#181D27을 직접 사용하고 있습니다. 테마 대응을 위해 색상을 리소스나 속성으로 추출해 주세요.core/designsystem/src/main/res/drawable/ic_loader.xml (1)
7-12: 로더 아이콘도 테마 대응 색상으로 전환 권장여러 경로가 동일한 색상을 사용하므로, 하드코딩 대신 색상 리소스 적용 시 유지 보수성이 향상됩니다. 또한 회전 애니메이션 적용 시 알파·틴트 속성으로도 제어 가능하니 고려 바랍니다.
core/designsystem/src/main/res/drawable/ic_chevron_right.xml (1)
7-12: 색상 하드코딩 제거 제안다른 아이콘과 동일하게
strokeColor를 공통 리소스로 치환해 주세요.core/designsystem/src/main/res/drawable/ic_maximize.xml (1)
6-19: 색상 리소스화 및 경로 그룹화 검토
- 두 경로 모두 동일한
#181D27색상을 사용하므로 색상 리소스로 분리해 주세요.- 스트로크 속성이 동일하므로
<group>태그로 묶으면 XML 크기를 조금 줄일 수 있습니다.core/designsystem/src/main/res/drawable/ic_edit_3.xml (1)
10-11: 테마 색상 리소스 사용을 고려해 주세요
strokeColor="#181D27"처럼 하드코딩된 HEX 값은 다크/라이트 테마 전환 시 유연성이 떨어집니다.@color/리소스나?attr/colorOnSurface와 같은 테마 속성으로 분리해 두면 추후 유지‧확장이 편해집니다.core/designsystem/src/main/res/drawable/ic_alert_circle.xml (1)
10-11: 아이콘 색상 하드코딩 제거 제안
다른 아이콘과 동일하게#181D27이 직접 기재되어 있습니다. 디자인 시스템 전체에서 색상을 통일 관리하려면 색상 리소스로 분리해 주세요.core/designsystem/src/main/res/drawable/ic_bell_off.xml (1)
6-16:clip-path·group불필요 사용 여부 확인
단순 벡터라면<group>과<clip-path>를 제거해도 동일한 렌더링 결과를 얻을 수 있습니다. 레이어가 줄어들면 렌더 성능과 APK 크기에 미세하게나마 도움이 됩니다. 제거 가능성 한번 검토해 주세요.core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Border.kt (1)
7-14: 의미 기반 네이밍으로 변경 권장
border0,border1… 숫자 기반 식별자는 실제 의미 파악이 어렵습니다.
예)none,hairline,thin,medium,thick등 의미형 네이밍이 유지보수와 코드 가독성에 더 도움이 됩니다.
또한1.5.dp사용이 필요한 케이스가 드물다면 제거하여 값 종류를 축소하는 것도 고려해 보세요.core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Radius.kt (1)
8-18:full = 1000.dp대신Dp.Unspecified또는CornerSize(percent = 50)고려
완전한 pill 형태를 위한 radius라면 고정값 1000.dp보다는CornerSize(percent = 50)같은 비율 기반 표현이 더 안전합니다. 기기 크기가 달라도 항상 원형이 보장됩니다.core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Spacing.kt (1)
7-21: 간격 정의가 잘 구현되어 있습니다.디자인 시스템의 표준 간격 체계를 잘 정의했습니다.
@Immutable애노테이션 사용으로 Compose 성능 최적화도 적절합니다.다만 네이밍 컨벤션에서
spacing7이 빠져있고spacing8이 있는 점과, 프로퍼티 이름의 숫자가 실제 dp 값과 직접적으로 연결되지 않는 점(예:spacing16 = 64.dp)을 고려해볼 필요가 있습니다. 피그마 디자인 가이드와 일치하는지 확인해보세요.core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Typography.kt (1)
25-29: 다크 모드 지원을 위한 색상 처리 개선 필요
baseTextStyle에서 텍스트 색상이Neutral800으로 하드코딩되어 있습니다. 다크 모드를 지원할 경우 문제가 될 수 있으므로, 테마의 동적 색상을 사용하도록 수정하는 것을 고려해보세요.core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/CircleCheckBox.kt (1)
49-49: 콘텐츠 설명 현지화 필요
contentDescription이 영어로 하드코딩되어 있습니다. 접근성을 위해 한국어로 변경하거나 파라미터로 받을 수 있도록 수정하세요.- contentDescription = "Circle Checkbox", + contentDescription = "원형 체크박스",core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ReedButton.kt (2)
80-85: Text 컴포넌트의 중복된 색상 설정 제거텍스트 색상이 이미
ButtonDefaults.buttonColors에서contentColor와disabledContentColor로 설정되므로,Text의 스타일에서 색상을 다시 설정할 필요가 없습니다.Text( text = text, - style = sizeStyle.textStyle.copy( - color = if (enabled) colorStyle.contentColor() else colorStyle.disabledContentColor(), - ), + style = sizeStyle.textStyle, )
99-352: Preview 함수에 ReedTheme 래핑 필요모든 Preview 함수들이
ReedTheme으로 래핑되어 있지 않습니다. 테마가 적용된 상태에서 프리뷰를 확인할 수 있도록 수정이 필요합니다.@Preview(showBackground = true) @Composable private fun ReedLargeButtonPreview() { + ReedTheme { Column( verticalArrangement = Arrangement.spacedBy(20.dp), ) { // ... existing content ... } + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
core/designsystem/src/main/res/font/pretendard_bold.ttfis excluded by!**/*.ttfcore/designsystem/src/main/res/font/pretendard_medium.ttfis excluded by!**/*.ttfcore/designsystem/src/main/res/font/pretendard_regular.ttfis excluded by!**/*.ttfcore/designsystem/src/main/res/font/pretendard_semi_bold.ttfis excluded by!**/*.ttf
📒 Files selected for processing (43)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/appbar/ReedTopAppBar.kt(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/Button.kt(4 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonColorStyle.kt(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonSizeStyle.kt(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ReedButton.kt(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/CircleCheckBox.kt(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/SquareCheckBox.kt(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/TickOnlyCheckBox.kt(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Border.kt(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Color.kt(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Radius.kt(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Spacing.kt(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Theme.kt(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Type.kt(0 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Typography.kt(1 hunks)core/designsystem/src/main/res/drawable/ic_alert_circle.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_bell.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_bell_off.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_book_open.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_bookmark.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_check.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_chevron_down.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_chevron_left.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_chevron_right.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_chevron_up.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_close.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_edit.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_edit_2.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_edit_3.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_loader.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_maximize.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_menu.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_more_horizontal.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_more_vertical.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_plus.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_search.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_settings.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_star.xml(1 hunks)feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeScreen.kt(2 hunks)feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/LibraryScreen.kt(2 hunks)feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/LoginScreen.kt(2 hunks)feature/main/src/main/kotlin/com/ninecraft/booket/feature/main/component/MainBottomBar.kt(2 hunks)feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/SearchScreen.kt(2 hunks)
💤 Files with no reviewable changes (1)
- core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Type.kt
🧰 Additional context used
🧬 Code Graph Analysis (7)
feature/main/src/main/kotlin/com/ninecraft/booket/feature/main/component/MainBottomBar.kt (1)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Theme.kt (1)
ReedTheme(14-21)
feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/SearchScreen.kt (1)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Theme.kt (1)
ReedTheme(14-21)
feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeScreen.kt (1)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Theme.kt (1)
ReedTheme(14-21)
feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/LoginScreen.kt (1)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Theme.kt (1)
ReedTheme(14-21)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/Button.kt (1)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Theme.kt (1)
ReedTheme(14-21)
feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/LibraryScreen.kt (1)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Theme.kt (1)
ReedTheme(14-21)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/TickOnlyCheckBox.kt (1)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Theme.kt (1)
ReedTheme(14-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 (17)
core/designsystem/src/main/res/drawable/ic_more_horizontal.xml (1)
1-27: 아이콘 벡터 정의 이상 없음화면 크기·색상·stroke 스타일이 기존 아이콘들과 일관되며 접근성 문제도 보이지 않습니다. 문제 없이 병합해도 될 것으로 판단됩니다.
feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/SearchScreen.kt (1)
11-12: ReedTheme 적용 시 MaterialTheme 의존성 동일 문제위와 같은 이유로
SearchPreview도 실제 색상·타이포그래피가 의도와 다를 수 있습니다.ReedTheme내부에 색상·폰트 정의가 추가되기 전까지는 임시로MaterialTheme래퍼를 한 단계 더 두는 방안도 고려해 주세요.feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeScreen.kt (1)
11-12: ReedTheme 구현 상태 확인 필요Home 역시 동일한 테마 의존성 문제를 가집니다.
ReedTheme가 완비되기 전에는 프리뷰/런타임에서 의도하지 않은 색상이 출력될 수 있으니 전역 테마 작업 우선순위를 높여 주세요.core/designsystem/src/main/res/drawable/ic_settings.xml (1)
1-25: 아이콘 구현이 잘 되어있습니다.벡터 드로어블 정의가 Android 표준을 잘 따르고 있으며, 스트로크 기반 렌더링으로 일관된 스타일을 유지하고 있습니다. 다른 아이콘들과 동일한 스타일 속성(stroke width 1.5, color #181D27)을 사용하여 디자인 일관성을 보장하고 있습니다.
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/TickOnlyCheckBox.kt (1)
19-33: 체크박스 컴포넌트가 잘 구현되어 있습니다.ReedTheme를 사용한 색상 적용과 noRippleClickable 확장 함수 사용이 적절합니다. 체크 상태에 따른 색상 변화도 직관적으로 구현되어 있습니다.
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/SquareCheckBox.kt (1)
25-53: 사각형 체크박스 컴포넌트가 잘 구현되어 있습니다.배경색, 테두리, 아이콘 색상의 조건부 스타일링이 체크 상태에 따라 적절하게 적용되어 있습니다. ReedTheme의 색상과 반경 속성을 올바르게 사용하고 있습니다.
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonSizeStyle.kt (2)
10-15: 버튼 사이즈 스타일 데이터 클래스가 잘 설계되어 있습니다.패딩, 반경, 텍스트 스타일, 아이콘 간격을 하나의 데이터 클래스로 묶어 관리하는 구조가 효율적입니다. 색상 스타일과 분리된 설계도 좋습니다.
17-48: 사이즈별 버튼 스타일이 일관성 있게 구현되어 있습니다.Large, Medium, Small 버튼 각각에 대해 적절한 패딩과 스타일을 적용하였고, ReedTheme의 속성들을 올바르게 활용하고 있습니다. Composable 프로퍼티로 테마 값에 접근하는 방식도 적절합니다.
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Typography.kt (1)
13-77: 타이포그래피 구조 잘 구성되었습니다!Pretendard 폰트를 사용한 타이포그래피 시스템이 체계적으로 잘 구성되었습니다. Title, Heading, Body, Label, Caption으로 분류된 구조가 명확하고, 음수 자간 값도 한글 폰트에 적절합니다.
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonColorStyle.kt (1)
6-28: 버튼 색상 스타일 구현이 깔끔합니다!
ReedButtonColorStyleenum이 Composable 함수를 활용하여 테마 색상을 효과적으로 관리하고 있습니다. 모든 스타일에서 동일한 disabled 색상을 사용하는 것도 일관성 있는 좋은 선택입니다.core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Theme.kt (1)
8-12: 다크/라이트 모드 지원 확인 필요기존 Material3 테마에서 제공하던 다크/라이트 모드 전환 기능이 제거되었습니다. 디자인 시스템에서 다크 모드를 지원할 계획이 있는지 확인이 필요합니다.
추후 다크 모드 지원을 위한 색상 스킴 전환 로직이 필요할 수 있습니다. 현재는 단일 색상 스킴만 지원하도록 구현되어 있습니다.
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/appbar/ReedTopAppBar.kt (2)
26-84: 잘 구현된 TopAppBar 컴포넌트입니다.레이아웃 구조가 명확하고 조건부 렌더링으로 아이콘이 없을 때 Spacer를 사용하여 일관된 정렬을 유지하는 것이 좋습니다. 매개변수 설계도 적절합니다.
116-138: Preview 함수들이 잘 작성되었습니다.각 AppBar 변형에 대한 Preview가 적절히 제공되어 개발 중 UI 확인이 용이합니다.
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Color.kt (4)
3-3: @immutable 어노테이션 사용이 적절합니다.Compose에서 성능 최적화를 위해
@Immutable어노테이션을 사용한 것이 좋습니다.
6-67: 체계적이고 완성도 높은 컬러 팔레트입니다.Neutral, Green, Red, Yellow, Blue 각 색상에 대해 50-900/950 단계로 세분화된 컬러 팔레트가 잘 정의되어 있습니다. 디자인 시스템의 일관성을 위해 좋은 접근입니다.
68-103: 의미론적 컬러 스키마 구조가 우수합니다.Base, Background, Content, Border, Divider로 그룹화하여 각 색상의 용도가 명확하게 정의되어 있습니다. 특히 pressed 상태와 disabled 상태에 대한 고려가 잘 되어 있습니다.
84-93: 콘텐츠 색상의 의미론적 역할이 잘 정의되어 있습니다.Primary, Secondary, Tertiary부터 Error, Info, Success, Warning까지 다양한 상태와 의미를 나타내는 색상들이 적절히 할당되어 있습니다. 접근성과 사용성을 고려한 좋은 설계입니다.
| android:fillColor="#00000000" | ||
| android:strokeColor="#181D27" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
색상을 리소스로 추출해 주세요
android:strokeColor="#181D27" 처럼 하드코딩된 HEX 값은 다크/라이트 테마 전환이나 일괄 팔레트 변경 시 유지·관리 비용이 큽니다.
디자인 토큰(colors.xml)으로 분리해 @color/reed_grey_900 등으로 참조하도록 수정하면 재사용성과 테마 대응력이 향상됩니다.
- android:strokeColor="#181D27"
+ android:strokeColor="@color/reed_grey_900"📝 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.
| android:fillColor="#00000000" | |
| android:strokeColor="#181D27" | |
| android:fillColor="#00000000" | |
| android:strokeColor="@color/reed_grey_900" |
🤖 Prompt for AI Agents
In core/designsystem/src/main/res/drawable/ic_close.xml at lines 10 to 11, the
strokeColor is hardcoded as a HEX value "#181D27". To improve maintainability
and support theme changes, extract this color value into the colors.xml resource
file as a named color (e.g., reed_grey_900) and replace the hardcoded HEX value
with a reference to this color resource using @color/reed_grey_900.
| android:fillColor="#00000000" | ||
| android:strokeColor="#181D27" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
색상 하드코딩 문제
다른 아이콘과 동일하게 스트로크 색상이 HEX 값으로 고정돼 있습니다.
디자인 시스템 관점에서 색상 토큰으로 분리하는 편이 일관성과 유지보수성에 유리합니다.
🤖 Prompt for AI Agents
In core/designsystem/src/main/res/drawable/ic_chevron_left.xml at lines 10 to
11, the strokeColor is hardcoded as a HEX value. Replace this hardcoded color
with a reference to a color token defined in the design system's color resources
to ensure consistency and easier maintenance across icons.
| android:fillColor="#00000000" | ||
| android:strokeColor="#181D27" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
테마 연동을 위해 strokeColor 하드코딩 제거 권장
#181D27 값 대신 @color/... 리소스로 교체해 주세요.
향후 다크모드 지원 시 아이콘 색상이 자동으로 바뀌도록 하기 위함입니다.
🤖 Prompt for AI Agents
In core/designsystem/src/main/res/drawable/ic_bookmark.xml at lines 10 to 11,
the strokeColor is hardcoded as #181D27. Replace this hardcoded color value with
a reference to a color resource using @color/..., so that the icon color can
automatically adapt to theme changes like dark mode.
| android:fillColor="#00000000" | ||
| android:strokeColor="#181D27" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
아이콘 색상 리소스화 필요
다른 아이콘들과 동일한 이슈입니다. 색상을 XML 리소스로 분리하여 디자인 토큰을 일관되게 적용해 주세요.
🤖 Prompt for AI Agents
In core/designsystem/src/main/res/drawable/ic_plus.xml at lines 10 to 11, the
icon colors are hardcoded as hex values. To maintain consistency with other
icons and apply design tokens uniformly, extract these color values into XML
color resource files and reference them here instead of using direct hex codes.
| android:fillColor="#00000000" | ||
| android:strokeColor="#181D27" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
색상 토큰 적용 누락
HEX 색상 하드코딩은 유지보수에 불리합니다. @color/reed_grey_900 같은 토큰으로 교체하여 테마 대응성을 확보해 주세요.
🤖 Prompt for AI Agents
In core/designsystem/src/main/res/drawable/ic_bell.xml at lines 10 to 11,
replace the hardcoded HEX color values for android:fillColor and
android:strokeColor with appropriate color tokens like @color/reed_grey_900 to
improve maintainability and support theming.
| fun ReedTheme( | ||
| content: @Composable () -> Unit, | ||
| ) { | ||
| val colorScheme = when { | ||
| dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> { | ||
| val context = LocalContext.current | ||
| if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context) | ||
| } | ||
|
|
||
| darkTheme -> DarkColorScheme | ||
| else -> LightColorScheme | ||
| } | ||
|
|
||
| MaterialTheme( | ||
| colorScheme = colorScheme, | ||
| typography = Typography, | ||
| CompositionLocalProvider( | ||
| content = content, | ||
| ) | ||
| } |
There was a problem hiding this comment.
CompositionLocalProvider에 로컬 값이 제공되지 않음
CompositionLocalProvider가 아무런 값도 제공하지 않고 있어, 테마가 항상 기본값만 사용하게 됩니다. 정의된 로컬 컴포지션들을 실제로 제공해야 합니다.
@Composable
fun ReedTheme(
content: @Composable () -> Unit,
) {
CompositionLocalProvider(
+ LocalColorScheme provides ReedColorScheme(),
+ LocalTypography provides ReedTypography(),
+ LocalSpacing provides ReedSpacing(),
+ LocalRadius provides ReedRadius(),
+ LocalBorder provides ReedBorder(),
content = content,
)
}🤖 Prompt for AI Agents
In
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Theme.kt
around lines 15 to 21, the CompositionLocalProvider is called without providing
any local values, causing the theme to always use default values. Fix this by
passing the defined CompositionLocal values as parameters to
CompositionLocalProvider so that the theme can properly apply the intended
values within the provided content composable.
There was a problem hiding this comment.
다크모드나 라이트모드 대응 계획이 없고 기본값만 쓸 것 같은데 제공해야할까?
There was a problem hiding this comment.
@seoyoon513 네, 기본값만 사용하더라도 CompositionLocalProvider에 값을 제공해야 합니다. 이유는 다음과 같습니다:
-
올바른 Compose 패턴: CompositionLocalProvider는 값을 제공하지 않으면 의미가 없습니다. 현재 코드는 composition local의 올바른 사용법을 따르지 않고 있습니다.
-
테마 시스템의 정상 동작:
ReedTheme.colors,ReedTheme.typography등이 올바르게 동작하려면 composition context가 제대로 설정되어야 합니다. -
미래 확장성: 나중에 테마 값을 동적으로 변경해야 할 경우 (사용자 설정, A/B 테스트 등)를 대비할 수 있습니다.
기본값만 사용하더라도 다음과 같이 명시적으로 제공하는 것이 좋습니다:
@Composable
fun ReedTheme(
content: @Composable () -> Unit,
) {
CompositionLocalProvider(
LocalColorScheme provides ReedColorScheme(),
LocalTypography provides ReedTypography(),
LocalSpacing provides ReedSpacing(),
LocalRadius provides ReedRadius(),
LocalBorder provides ReedBorder(),
content = content,
)
}이렇게 하면 코드가 더 명확해지고 올바른 Compose 패턴을 따르게 됩니다.
✏️ Learnings added
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.682Z
Learning: Reed Android 프로젝트에서는 다크모드/라이트모드 대응 계획이 없고 기본 테마 값만 사용할 예정이다.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
There was a problem hiding this comment.
음.. 지금 글로벌한 변수로 사용하는데는 큰 문제가 없어서 나중에 테마 대응하거나 할 때 적용할게
There was a problem hiding this comment.
@seoyoon513 네, 이해했습니다! 현재 글로벌 변수로 사용하는 방식으로 충분하다면 나중에 테마 대응이 필요할 때 적용하시는 것이 좋겠네요. 현재 구조로도 디자인 시스템의 기본 기능은 잘 동작할 것 같습니다.
🧠 Learnings used
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 프로젝트에서는 다크모드/라이트모드 대응 계획이 없고 기본 테마 값만 사용할 예정이다.
| @Preview | ||
| @Composable | ||
| fun ReedTopAppBarPreview() { | ||
| ReedTopAppBar( |
There was a problem hiding this comment.
Preview 함수는 다른 곳에서 사용되지 않는 관계로 private 접근 제어자 붙여주고, ReedTheme으로 감싸주면 될것같음
| import com.ninecraft.booket.core.common.utils.get | ||
|
|
||
| @Composable | ||
| fun ReedButton( |
There was a problem hiding this comment.
ReedButton 만들었으니, 기존의 BooketButton 사용하던 곳(로그인 버튼) ReedButton으로 교체하고 BooketButton은 제거하면 될듯 함다
There was a problem hiding this comment.
ButtonColorStyle에 KAKAO 타입 추가해서 적용했습니다~ 03eefb2
|
|
||
| @Preview | ||
| @Composable | ||
| fun CircleCheckboxPreview() { |
There was a problem hiding this comment.
| fun CircleCheckboxPreview() { | |
| private fun CircleCheckboxPreview() { |
https://github.com/slackhq/circuit/blob/main/gradle/libs.versions.toml Circuit Overlay 들이 내부적으로 material3 의존성을 가지고 있는데, 현재 사용 버전이 stable 최신버전인 1.3.2 로 보여 gesture등을 막아야 하는 경우(바텀시트 구현 요구사항이 X버튼으로만 닫혀야 한다던지) 1.4 버전(alpha 버전)을 사용하는 것이 낫기에, 이 부분 질문 남겼는데 답변 오는대로 결정하면 될듯함니다. |
|
안닫히게 해야한다네여 M3 BottomSheet 로 gogo 합시다! |
그러면 요 브랜치에서 M3 BottomSheet까지 제작하고 마무리하겟습니다 |
easyhooon
left a comment
easyhooon
left a comment
There was a problem hiding this comment.
LGTM!
원래 디자인 시스템은 한번에 완성되는게 아니기 때문에, 이후 필요한게 보이면 추가하면서 작업합세다
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/bottomsheet/ReedBottomSheet.kt (2)
21-40: 하드코딩된 값들을 디자인 토큰으로 교체하는 것을 고려해보세요.컴포넌트의 전체적인 구현은 제스처 기반 해제를 방지하는 요구사항을 잘 충족하고 있습니다. 하지만 몇 가지 개선사항이 있습니다:
RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp)- 반경 값을 디자인 토큰으로 교체containerColor = White- 테마의 색상 시스템 사용다음과 같이 개선할 수 있습니다:
- shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp), + shape = RoundedCornerShape(topStart = ReedTheme.radius.large, topEnd = ReedTheme.radius.large), - containerColor = White, + containerColor = ReedTheme.colors.white,
42-66: 프리뷰의 SheetState 구성을 개선해보세요.프리뷰 함수는 컴포넌트 사용법을 잘 보여주고 있습니다. 하지만
SheetState구성에서 임계값 함수들이0f를 반환하는 것은 실제 사용에서 문제가 될 수 있습니다.더 현실적인 프리뷰를 위해 다음과 같이 개선할 수 있습니다:
- val sheetState = SheetState( - skipPartiallyExpanded = true, - initialValue = SheetValue.Expanded, - positionalThreshold = { 0f }, - velocityThreshold = { 0f }, - ) + val sheetState = rememberModalBottomSheetState( + skipPartiallyExpanded = true + )또는 기본
rememberModalBottomSheetState()를 사용하여 더 간단하게 만들 수 있습니다.
📜 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(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/bottomsheet/ReedBottomSheet.kt(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonColorStyle.kt(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/CircleCheckBox.kt(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/SquareCheckBox.kt(1 hunks)core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/TickOnlyCheckBox.kt(1 hunks)feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/LibraryScreen.kt(4 hunks)feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/LoginScreen.kt(4 hunks)feature/login/src/main/res/drawable/ic_kakao.xml(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/LoginScreen.kt
🚧 Files skipped from review as they are similar to previous changes (5)
- feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/LibraryScreen.kt
- core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/TickOnlyCheckBox.kt
- core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/SquareCheckBox.kt
- core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/appbar/ReedTopAppBar.kt
- core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/CircleCheckBox.kt
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
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 프로젝트에서는 다크모드/라이트모드 대응 계획이 없고 기본 테마 값만 사용할 예정이다.
⏰ 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 (6)
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/bottomsheet/ReedBottomSheet.kt (1)
1-20: 임포트 구성이 깔끔하고 적절합니다.패키지 선언과 임포트문들이 잘 정리되어 있으며, 필요한 의존성들이 적절히 포함되어 있습니다.
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonColorStyle.kt (3)
7-8: 버튼 색상 스타일 enum 정의가 명확합니다.4가지 버튼 색상 스타일(PRIMARY, SECONDARY, TERTIARY, KAKAO)을 깔끔하게 정의했습니다. 디자인 시스템의 일관성을 위해 좋은 접근입니다.
18-24: 콘텐츠 색상 매핑이 적절합니다.각 버튼 스타일에 맞는 콘텐츠 색상을 ReedTheme에서 가져오는 로직이 잘 구현되어 있습니다.
26-31: disabled 상태 색상 처리가 일관성 있게 구현되었습니다.모든 버튼 스타일에서 동일한 disabled 색상을 사용하는 것은 UX 일관성 측면에서 좋은 접근입니다.
feature/login/src/main/res/drawable/ic_kakao.xml (2)
2-5: 아이콘 크기 표준화가 잘 되어 있습니다.24dp x 24dp 크기로 표준화된 것은 Material Design 가이드라인에 맞는 좋은 접근입니다.
6-8: 단일 path로 간소화된 구조가 좋습니다.복잡한 구조에서 단일 path로 간소화된 것은 성능과 유지보수성 측면에서 개선사항입니다. 색상도 디자인 시스템에 맞게 #262626으로 통일되어 있습니다.
| @Composable | ||
| fun containerColor(isPressed: Boolean) = when (this) { | ||
| PRIMARY -> if (isPressed) ReedTheme.colors.bgPrimaryPressed else ReedTheme.colors.bgPrimary | ||
| SECONDARY -> if (isPressed) ReedTheme.colors.bgSecondaryPressed else ReedTheme.colors.bgSecondary | ||
| TERTIARY -> if (isPressed) ReedTheme.colors.bgTertiaryPressed else ReedTheme.colors.bgTertiary | ||
| KAKAO -> Kakao | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
KAKAO 스타일의 pressed 상태 처리를 확인해주세요.
KAKAO 스타일의 경우 isPressed 상태에 관계없이 항상 동일한 Kakao 색상을 반환합니다. 사용자에게 적절한 시각적 피드백을 제공하기 위해 pressed 상태에 대한 별도 색상 처리가 필요할 수 있습니다.
- KAKAO -> Kakao
+ KAKAO -> if (isPressed) /* pressed 상태 색상 */ else Kakao📝 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.
| @Composable | |
| fun containerColor(isPressed: Boolean) = when (this) { | |
| PRIMARY -> if (isPressed) ReedTheme.colors.bgPrimaryPressed else ReedTheme.colors.bgPrimary | |
| SECONDARY -> if (isPressed) ReedTheme.colors.bgSecondaryPressed else ReedTheme.colors.bgSecondary | |
| TERTIARY -> if (isPressed) ReedTheme.colors.bgTertiaryPressed else ReedTheme.colors.bgTertiary | |
| KAKAO -> Kakao | |
| } | |
| @Composable | |
| fun containerColor(isPressed: Boolean) = when (this) { | |
| PRIMARY -> if (isPressed) ReedTheme.colors.bgPrimaryPressed else ReedTheme.colors.bgPrimary | |
| SECONDARY -> if (isPressed) ReedTheme.colors.bgSecondaryPressed else ReedTheme.colors.bgSecondary | |
| TERTIARY -> if (isPressed) ReedTheme.colors.bgTertiaryPressed else ReedTheme.colors.bgTertiary | |
| KAKAO -> if (isPressed) /* pressed 상태 색상 */ else Kakao | |
| } |
🤖 Prompt for AI Agents
In
core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonColorStyle.kt
between lines 10 and 16, the containerColor function does not handle the pressed
state for the KAKAO style and always returns the same color. To fix this, add a
conditional check for isPressed when the style is KAKAO and return a distinct
pressed color for KAKAO, ensuring visual feedback changes appropriately when
pressed.
There was a problem hiding this comment.
디자이너가 따로 pressed 컬러 정의를 안해줬어
There was a problem hiding this comment.
@seoyoon513 이해했습니다! 디자이너가 KAKAO 스타일에 대해 pressed 상태 색상을 별도로 정의하지 않았다면, 현재 구현이 올바르네요. 디자인 시스템에서는 모든 인터랙션 상태에 대해 항상 별도의 시각적 피드백이 필요한 것은 아니죠.
현재 구현대로 KAKAO 스타일은 pressed 상태에서도 동일한 색상을 유지하는 것이 디자인 의도에 맞습니다.
🐰
╭─────╮
│ 알겠 │
│ 어요 │
╰─────╯
✏️ Learnings added
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.823Z
Learning: Reed Android 프로젝트에서 KAKAO 버튼 스타일은 디자이너가 pressed 상태 색상을 별도로 정의하지 않았기 때문에 pressed 상태에서도 동일한 Kakao 색상을 사용한다.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
🧠 Learnings used
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 프로젝트에서는 다크모드/라이트모드 대응 계획이 없고 기본 테마 값만 사용할 예정이다.
2 participants
🔗 관련 이슈
📙 작업 설명
📸 스크린샷 또는 시연 영상
💬 추가 설명 or 리뷰 포인트
Summary by CodeRabbit
New Features
Refactor
Style