Merged
Conversation
- maBlackButtonColors 추가 - MaTextField 패딩 간격 수정
Walkthrough디자인 시스템에 검은색 버튼 색상 프리셋을 추가하고, 텍스트 필드의 수직 패딩을 조정하며, 전화번호 인증 UI 화면을 새로 구현했습니다. 세 가지 별개의 UI 컴포넌트 개선 작업입니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SignUpPhoneAuthScreen
participant FormField
participant MoaButton
User->>SignUpPhoneAuthScreen: 화면 진입
SignUpPhoneAuthScreen->>SignUpPhoneAuthScreenContent: 렌더링
SignUpPhoneAuthScreenContent->>SignUpPhoneAuthScreenContent: phoneNumber 상태 초기화
SignUpPhoneAuthScreenContent->>SignUpPhoneAuthScreenContent: authNumber 상태 초기화
SignUpPhoneAuthScreenContent->>FormField: 전화번호 입력 필드 생성
SignUpPhoneAuthScreenContent->>MoaButton: 인증 버튼 추가
SignUpPhoneAuthScreenContent->>FormField: 인증번호 입력 필드 생성
User->>FormField: 전화번호 입력
FormField->>SignUpPhoneAuthScreenContent: phoneNumber 업데이트
User->>MoaButton: 인증 버튼 클릭
Note over MoaButton: 인증 요청 (미구현)
User->>FormField: 인증번호 입력
FormField->>SignUpPhoneAuthScreenContent: authNumber 업데이트
User->>MoaButton: 다음 버튼 클릭
Note over MoaButton: 다음 단계 진행
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 분 Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. 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: 3
🧹 Nitpick comments (1)
feature/onboarding/src/main/kotlin/com/moa/app/feature/onboarding/signup/SignUpPhoneAuthScreen.kt (1)
83-83: 불필요한 파라미터를 제거하세요.
enabled = true는MaButton의 기본값이므로 명시할 필요가 없습니다.MaButton( onClick = {}, - enabled = true, colors = MaButtonDefaults.maBlackButtonColors(),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
core/designsystem/src/main/kotlin/com/moa/app/designsystem/component/core/button/MaButton.kt(1 hunks)core/designsystem/src/main/kotlin/com/moa/app/designsystem/component/core/textfield/MaTextField.kt(1 hunks)feature/onboarding/src/main/kotlin/com/moa/app/feature/onboarding/signup/SignUpPhoneAuthScreen.kt(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
feature/onboarding/src/main/kotlin/com/moa/app/feature/onboarding/signup/SignUpPhoneAuthScreen.kt (4)
core/designsystem/src/main/kotlin/com/moa/app/designsystem/component/product/topbar/MaTopAppBar.kt (1)
MaTopAppBar(20-52)core/designsystem/src/main/kotlin/com/moa/app/designsystem/component/product/layout/FormField.kt (1)
FormField(18-37)core/designsystem/src/main/kotlin/com/moa/app/designsystem/component/core/textfield/MaTextField.kt (1)
MaTextField(32-99)core/designsystem/src/main/kotlin/com/moa/app/designsystem/component/core/button/MaButton.kt (1)
MaButton(30-68)
⏰ 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: Run Unit Tests
🔇 Additional comments (3)
core/designsystem/src/main/kotlin/com/moa/app/designsystem/component/core/textfield/MaTextField.kt (1)
81-81: 수직 패딩 조정이 적절합니다.텍스트 필드의 수직 패딩을 12.dp에서 16.dp로 증가시켜 더 나은 수직 리듬과 터치 영역을 제공합니다.
core/designsystem/src/main/kotlin/com/moa/app/designsystem/component/core/button/MaButton.kt (1)
85-94: 검은색 버튼 색상 프리셋 추가가 적절합니다.기존
maButtonColors()와 동일한 패턴을 따르며, disabled 상태에coolGray95를 사용하는 것이 적절합니다. 디자인 시스템의 일관성을 유지하면서 새로운 색상 옵션을 제공합니다.feature/onboarding/src/main/kotlin/com/moa/app/feature/onboarding/signup/SignUpPhoneAuthScreen.kt (1)
31-33: 화면 구조가 적절합니다.Public 진입점과 private 구현을 분리하는 패턴이 적절하며, 추후 비즈니스 로직 통합 시 유연성을 제공합니다.
Comment on lines
+63
to
+96
| FormField( | ||
| isError = true, | ||
| errorMessage = "어쩌구" | ||
| ) { | ||
| MaTextField( | ||
| value = phoneNumber, | ||
| onValueChange = { newValue -> phoneNumber = newValue }, | ||
| isError = true, | ||
| maxLines = 1, | ||
| keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone), | ||
| placeholder = { | ||
| Text( | ||
| text = "예) 010-1234-5678", | ||
| color = MoaTheme.colors.coolGray60, | ||
| style = MoaTheme.typography.body1Medium, | ||
| ) | ||
| }, | ||
| trailingContent = { | ||
| MaButton( | ||
| onClick = {}, | ||
| enabled = true, | ||
| colors = MaButtonDefaults.maBlackButtonColors(), | ||
| shape = RoundedCornerShape(8.dp) | ||
| ) { | ||
| Text( | ||
| text = "인증", | ||
| style = MoaTheme.typography.body2Bold, | ||
| color = MoaTheme.colors.white, | ||
| modifier = Modifier.padding(horizontal = 12.dp, vertical = 4.dp) | ||
| ) | ||
| } | ||
| } | ||
| ) | ||
| } |
There was a problem hiding this comment.
하드코딩된 에러 상태를 제거해야 합니다.
isError = true와 errorMessage = "어쩌구"가 하드코딩되어 있습니다. UI 구현 단계라는 점을 고려하더라도, 프로덕션 코드에 테스트용 하드코딩이 남아있으면 안 됩니다.
다음 중 하나를 선택하세요:
- 실제 상태 변수와 연결 (권장)
- Preview에서만 하드코딩된 값 사용
- 기본값을
false와null로 설정
FormField(
- isError = true,
- errorMessage = "어쩌구"
+ isError = false,
+ errorMessage = null
) {
MaTextField(
value = phoneNumber,
onValueChange = { newValue -> phoneNumber = newValue },
- isError = true,
+ isError = false,📝 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.
Suggested change
| FormField( | |
| isError = true, | |
| errorMessage = "어쩌구" | |
| ) { | |
| MaTextField( | |
| value = phoneNumber, | |
| onValueChange = { newValue -> phoneNumber = newValue }, | |
| isError = true, | |
| maxLines = 1, | |
| keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone), | |
| placeholder = { | |
| Text( | |
| text = "예) 010-1234-5678", | |
| color = MoaTheme.colors.coolGray60, | |
| style = MoaTheme.typography.body1Medium, | |
| ) | |
| }, | |
| trailingContent = { | |
| MaButton( | |
| onClick = {}, | |
| enabled = true, | |
| colors = MaButtonDefaults.maBlackButtonColors(), | |
| shape = RoundedCornerShape(8.dp) | |
| ) { | |
| Text( | |
| text = "인증", | |
| style = MoaTheme.typography.body2Bold, | |
| color = MoaTheme.colors.white, | |
| modifier = Modifier.padding(horizontal = 12.dp, vertical = 4.dp) | |
| ) | |
| } | |
| } | |
| ) | |
| } | |
| FormField( | |
| isError = false, | |
| errorMessage = null | |
| ) { | |
| MaTextField( | |
| value = phoneNumber, | |
| onValueChange = { newValue -> phoneNumber = newValue }, | |
| isError = false, | |
| maxLines = 1, | |
| keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone), | |
| placeholder = { | |
| Text( | |
| text = "예) 010-1234-5678", | |
| color = MoaTheme.colors.coolGray60, | |
| style = MoaTheme.typography.body1Medium, | |
| ) | |
| }, | |
| trailingContent = { | |
| MaButton( | |
| onClick = {}, | |
| enabled = true, | |
| colors = MaButtonDefaults.maBlackButtonColors(), | |
| shape = RoundedCornerShape(8.dp) | |
| ) { | |
| Text( | |
| text = "인증", | |
| style = MoaTheme.typography.body2Bold, | |
| color = MoaTheme.colors.white, | |
| modifier = Modifier.padding(horizontal = 12.dp, vertical = 4.dp) | |
| ) | |
| } | |
| } | |
| ) | |
| } |
🤖 Prompt for AI Agents
In
feature/onboarding/src/main/kotlin/com/moa/app/feature/onboarding/signup/SignUpPhoneAuthScreen.kt
around lines 63-96, the FormField and MaTextField are hardcoding error state
(isError = true, errorMessage = "어쩌구"); replace these hardcoded values with a
real state-driven implementation (e.g., add a phoneError: String? and
phoneIsError: Boolean state, bind errorMessage = phoneError and isError =
phoneIsError), or if this is only for preview move the hardcoded values into the
@Preview composable, otherwise set defaults to isError = false and errorMessage
= null and wire validation logic to update those states when the phone input
changes.
Collaborator
Author
There was a problem hiding this comment.
프로덕션 코드에 테스트용 하드코딩이 남아 있으면 안된다는 말에는 동의 but 해당 플젝은 사플이고, 고도화 전의 ui 단계라 상관없을듯
There was a problem hiding this comment.
@wjdrjs00 이해했습니다! 사이드 프로젝트의 초기 UI 구현 단계라는 점을 고려하면 충분히 합리적인 판단이네요. 나중에 비즈니스 로직을 구현하실 때 실제 상태와 연결하시면 될 것 같습니다. 👍
...re/onboarding/src/main/kotlin/com/moa/app/feature/onboarding/signup/SignUpPhoneAuthScreen.kt
Show resolved
Hide resolved
...re/onboarding/src/main/kotlin/com/moa/app/feature/onboarding/signup/SignUpPhoneAuthScreen.kt
Show resolved
Hide resolved
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related issue 🛠
Work Description ✏️
Screenshot 📸
Uncompleted Tasks 😅
Summary by CodeRabbit
릴리스 노트
새로운 기능
UI 개선