[UI] 로그인 화면 아이콘, 코드 입력 로직 수정 #24
Conversation
Walkthrough여러 인증/로그인 관련 Compose 화면에서 뒤로가기 아이콘을 painterResource 기반 Icon에서 URI 기반 AsyncImage로 교체했다. EmailVerificationScreen의 포커스 갱신 로직이 조정되었고, NumberInputBox는 입력된 다중 숫자 중 마지막 숫자를 선택하도록 onValueChange 로직이 변경되었다. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant NumberInputBox
participant FocusManager as Focus Manager
participant Screen as EmailVerificationScreen
User->>NumberInputBox: 입력(여러 문자 가능)
Note over NumberInputBox: 숫자 필터링 후 "마지막 숫자" 선택
NumberInputBox-->>Screen: onValueChange(선택된 숫자 또는 빈 문자열)
alt 숫자 입력됨
Screen->>Screen: 코드 상태 업데이트
Screen->>FocusManager: 현재 인덱스로 포커스 설정/다음 칸 이동
else 빈 입력/백스페이스
Screen->>FocusManager: 이전 칸으로 이동(필요 시)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ 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. 🧪 Early access (Sonnet 4.5): enabledWe are currently testing the Sonnet 4.5 model, which is expected to improve code review quality. However, this model may lead to increased noise levels in the review comments. Please disable the early access features if the noise level causes any inconvenience. Note:
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: 0
🧹 Nitpick comments (3)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/login/NicknameInputScreen.kt (1)
61-65: AsyncImage로 백 버튼 전환이 깔끔하게 처리되었습니다.SVG를 URI로 로드하는 방식으로 변경되었고, contentDescription도 잘 유지되고 있습니다. AsyncImage는 로드 실패 시 빈 공간을 표시하는데, 백 버튼이 중요한 네비게이션 요소이니 필요하다면 error나 placeholder 파라미터로 폴백 처리를 고려해볼 수 있습니다. 다만 현재 패턴이 다른 화면들과 일관되게 적용되고 있으니 선택적으로 개선하시면 됩니다.
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/clubcode/ClubCodeInputScreen.kt (1)
35-35: AsyncImage 적용 일관성 확인 및 error/placeholder 파라미터 추가 권장
모든 auth 화면에서AsyncImage(model = Res.getUri("files/ic_back.svg"), contentDescription = …)로 일관 적용되었으며composeApp/src/commonMain/composeResources/files/ic_back.svg파일도 정상 존재합니다. 로딩 실패 시 아이콘이 보이지 않는 문제를 방지하기 위해error = /* fallback */(필요 시placeholder = /* loader */) 파라미터 추가를 검토해주세요.composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/login/EmailVerificationScreen.kt (1)
87-91: 정적 리소스에는 painterResource가 더 적합할 수 있습니다.AsyncImage는 주로 네트워크 이미지나 동적 로딩이 필요한 경우에 사용됩니다. 단순한 정적 아이콘의 경우:
- painterResource가 더 가벼우며 동기적으로 로드되어 깜빡임이 없습니다.
- Coil 의존성 없이 처리 가능합니다.
- AsyncImage는 비동기 로딩 오버헤드와 잠재적인 플랫폼 호환성 이슈가 있을 수 있습니다.
현재 에러 처리나 placeholder도 없어서 로딩 실패 시 아이콘이 보이지 않을 수 있습니다.
AI summary에 따르면 여러 화면에서 동일한 패턴으로 변경되었다고 하니, 이 접근 방식이 프로젝트 전체에서 의도된 것인지 확인해주세요.
필요하다면 다음과 같이 되돌리는 것을 고려해보세요:
- AsyncImage( - model = Res.getUri("files/ic_back.svg"), + Icon( + painter = painterResource(Res.drawable.ic_back), contentDescription = stringResource(Res.string.back_button), modifier = Modifier.size(18.dp) )
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
composeApp/src/commonMain/composeResources/files/ic_back.svgis excluded by!**/*.svg
📒 Files selected for processing (7)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/clubcode/ClubCodeInputScreen.kt(2 hunks)composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/login/EmailVerificationScreen.kt(3 hunks)composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/login/FindPasswordScreen.kt(2 hunks)composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/login/NicknameInputScreen.kt(2 hunks)composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/login/PasswordInputScreen.kt(2 hunks)composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/login/SignupEmailInputScreen.kt(2 hunks)composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/login/component/NumberInputBox.kt(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (4)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/login/FindPasswordScreen.kt (1)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageTopAppBar.kt (2)
MyPageTopAppBar(19-29)AsyncImage(21-28)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/clubcode/ClubCodeInputScreen.kt (2)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageTopAppBar.kt (2)
AsyncImage(21-28)MyPageTopAppBar(19-29)composeApp/src/commonMain/kotlin/org/whosin/client/presentation/home/HomeScreen.kt (1)
Image(99-247)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/login/SignupEmailInputScreen.kt (2)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageTopAppBar.kt (1)
MyPageTopAppBar(19-29)composeApp/src/commonMain/kotlin/org/whosin/client/presentation/home/HomeScreen.kt (2)
AsyncImage(117-139)Image(99-247)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/login/NicknameInputScreen.kt (2)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageTopAppBar.kt (1)
MyPageTopAppBar(19-29)composeApp/src/commonMain/kotlin/org/whosin/client/presentation/home/HomeScreen.kt (1)
AsyncImage(117-139)
⏰ 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: android-build
- GitHub Check: ios-build
🔇 Additional comments (6)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/login/component/NumberInputBox.kt (1)
73-83: 중간 숫자 편집 로직이 잘 구현되었습니다.입력된 숫자 중 마지막 문자를 선택하도록 변경한 로직이 정확합니다. 여러 숫자가 입력되거나 붙여넣기 되었을 때 마지막 숫자를 가져오고, 숫자가 없으면 빈 문자열을 전달하는 방식이 의도한 동작과 일치합니다.
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/login/FindPasswordScreen.kt (1)
60-64: 백 버튼 전환이 잘 적용되었습니다.다른 화면들과 동일한 패턴으로 AsyncImage를 사용하여 일관성이 유지되고 있습니다.
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/login/PasswordInputScreen.kt (1)
66-70: 백 버튼 변경사항이 정확합니다.AsyncImage 적용이 일관되게 이루어졌습니다.
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/login/SignupEmailInputScreen.kt (1)
60-64: 백 버튼 변경이 완료되었습니다.모든 로그인 관련 화면에서 AsyncImage를 사용한 백 버튼이 일관되게 적용되어 코드 통일성이 향상되었습니다.
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/auth/login/EmailVerificationScreen.kt (2)
31-31: LGTM!AsyncImage를 사용하기 위한 적절한 import입니다.
123-125: 마지막 박스 포커스 유지 로직이 추가되었습니다.새로운 else-if 분기는 마지막 인증번호 박스(index 5)에 숫자를 입력했을 때 포커스가 해당 박스에 유지되도록 합니다. 이는 합리적인 변경입니다.
다만 PR 목표에서 언급된 "중간 숫자를 선택한 경우 해당 숫자를 수정할 수 있도록" 기능이 제대로 작동하는지 확인해주세요. 현재 코드만으로는 중간 박스 편집 시 여전히 다음 박스로 포커스가 이동하는 것으로 보입니다. AI summary에 따르면 NumberInputBox 컴포넌트에서 입력 처리 로직이 변경되었다고 하니, 해당 변경사항과 함께 동작을 테스트해보시기 바랍니다.
다음 시나리오를 테스트해주세요:
- 여섯 자리를 모두 입력
- 세 번째 박스를 클릭
- 새로운 숫자 입력
- 예상: 세 번째 박스의 숫자만 변경되고 네 번째 박스로 포커스 이동
2 participants
🚀 이슈번호
✏️ 변경사항
📷 스크린샷
✍️ 사용법
🎸 기타
Summary by CodeRabbit