-
Notifications
You must be signed in to change notification settings - Fork 4
[UI] 설정 화면 ui 구현 #20
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[UI] 설정 화면 ui 구현 #20
Conversation
[FEAT] UI, CI 업데이트 사항 반영
[feat]: IOS 등 관련 변경 사항 반영
Walkthrough새 문자열 리소스 7개를 추가하고, Route에 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant MyPage as MyPageScreen
participant Nav as NavController
participant Edit as EditMyInfoScreen
User->>MyPage: 화면 진입
MyPage->>Nav: navigate(Route.UpdateMyInfo) [onNavigateToEdit]
Nav->>Edit: composable<Route.UpdateMyInfo>
note right of Edit: 닉네임 입력 및 완료 버튼 활성화\n리소스: `nickname`, `complete_edit`
Edit-->>Nav: navigate(Route.MyPage)\npopUpTo(UpdateMyInfo) + launchSingleTop
Nav-->>MyPage: composable<Route.MyPage>
User->>MyPage: 뒤로가기
MyPage->>Nav: popBackStack()
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (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). (2)
🔇 Additional comments (1)
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
🧹 Nitpick comments (3)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageButton.kt (1)
24-36: onClick 람다 간소화 제안
onClick = onClick으로 바로 넘기면 한 단계 감싸는 람다를 줄일 수 있어 조금 더 깔끔합니다.- onClick = { onClick() }, + onClick = onClick,composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/EditMyInfoScreen.kt (1)
80-85: 동아리/학과 제목 문자열 리소스 사용 권장
이미strings.xml에my_club_major_list_title을 추가하셨으니 하드코딩 대신 리소스를 사용하면 i18n과 유지보수성이 좋아집니다.- Column( - modifier = Modifier.fillMaxWidth().background(Color.Gray).height(271.dp) - ) { - Text( - "내 동아리 / 학과 목록" - ) - } + Column( + modifier = Modifier.fillMaxWidth().background(Color.Gray).height(271.dp) + ) { + Text( + text = stringResource(Res.string.my_club_major_list_title) + ) + }composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/MyPageScreen.kt (1)
83-87: 동아리/학과 목록 제목도 리소스로 대체해주세요
Edit 화면과 마찬가지로 여기서도 문자열을 직접 넣기보다Res.string.my_club_major_list_title을 사용하면 일관성과 다국어 대응에 도움이 됩니다.- Column( - modifier = Modifier.fillMaxWidth().background(Color.Gray).height(271.dp) - ) { - Text(text = "내 동아리 / 학과 목록") - } + Column( + modifier = Modifier.fillMaxWidth().background(Color.Gray).height(271.dp) + ) { + Text(text = stringResource(Res.string.my_club_major_list_title)) + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
composeApp/src/commonMain/composeResources/drawable/ic_back.pngis excluded by!**/*.pngcomposeApp/src/commonMain/composeResources/files/ic_back.svgis excluded by!**/*.svg
📒 Files selected for processing (7)
composeApp/src/commonMain/composeResources/values/strings.xml(1 hunks)composeApp/src/commonMain/kotlin/org/whosin/client/core/navigation/Route.kt(1 hunks)composeApp/src/commonMain/kotlin/org/whosin/client/core/navigation/WhosInNavGraph.kt(2 hunks)composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/EditMyInfoScreen.kt(1 hunks)composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/MyPageScreen.kt(1 hunks)composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageButton.kt(1 hunks)composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageTopAppBar.kt(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
composeApp/src/commonMain/kotlin/org/whosin/client/core/navigation/WhosInNavGraph.kt (1)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/EditMyInfoScreen.kt (1)
EditMyInfoScreen(35-93)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/EditMyInfoScreen.kt (2)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageTopAppBar.kt (1)
MyPageTopAppBar(23-34)composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageButton.kt (1)
MyPageButton(17-38)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/MyPageScreen.kt (2)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageTopAppBar.kt (1)
MyPageTopAppBar(23-34)composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageButton.kt (1)
MyPageButton(17-38)
⏰ 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: ios-build
- GitHub Check: android-build
🔇 Additional comments (3)
composeApp/src/commonMain/kotlin/org/whosin/client/core/navigation/Route.kt (1)
21-23: UpdateMyInfo Route 추가 확인 완료
새 화면과 내비게이션 그래프 연결을 위해 Route.UpdateMyInfo를 추가하신 부분 문제없이 잘 반영되었습니다.composeApp/src/commonMain/composeResources/values/strings.xml (1)
8-14: 새 문자열 리소스 추가 잘 반영되었습니다
새로운 화면에서 사용할 문자열 키들이 정리되어 있어서 향후 다국어 대응에도 도움이 되겠습니다.composeApp/src/commonMain/kotlin/org/whosin/client/core/navigation/WhosInNavGraph.kt (1)
62-71: UpdateMyInfo 경로 연결 확인
Edit 화면으로의 이동과 완료 시 MyPage로의 복귀 흐름을 안전하게 구성해주셔서 내비게이션 플로우가 자연스럽습니다.
| Row(modifier = modifier.fillMaxWidth().background(Color.White)) { | ||
| Icon( | ||
| painter = painterResource(Res.drawable.ic_back), | ||
| contentDescription = stringResource(Res.string.back_button), | ||
| modifier = modifier.size(24.dp).clickable(onClick = onNavigateBack), | ||
| tint = Color.Unspecified, | ||
| ) | ||
| Spacer(modifier = modifier.weight(1f)) | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
뒤로가기 터치 영역과 Modifier 재사용 수정 필요
현재 아이콘에 걸린 clickable 영역이 24dp에 불과해 권장 최소 터치 영역(48dp)을 충족하지 못하고, 동일한 modifier 인스턴스를 자식들에게도 전달하고 있어 외부에서 패딩이나 testTag를 넘길 때 의도치 않은 레이아웃/테스트 문제가 발생할 수 있습니다. 접근성 이슈이므로 수정이 필요합니다. 아래처럼 별도의 Modifier를 쓰고 48dp 박스를 두르면 해결됩니다(Alignment import 추가 필요).
- Row(modifier = modifier.fillMaxWidth().background(Color.White)) {
- Icon(
- painter = painterResource(Res.drawable.ic_back),
- contentDescription = stringResource(Res.string.back_button),
- modifier = modifier.size(24.dp).clickable(onClick = onNavigateBack),
- tint = Color.Unspecified,
- )
- Spacer(modifier = modifier.weight(1f))
- }
+ Row(
+ modifier = modifier
+ .fillMaxWidth()
+ .background(Color.White),
+ verticalAlignment = Alignment.CenterVertically,
+ ) {
+ Box(
+ modifier = Modifier
+ .size(48.dp)
+ .clickable(onClick = onNavigateBack),
+ contentAlignment = Alignment.Center,
+ ) {
+ Icon(
+ painter = painterResource(Res.drawable.ic_back),
+ contentDescription = stringResource(Res.string.back_button),
+ modifier = Modifier.size(24.dp),
+ tint = Color.Unspecified,
+ )
+ }
+ Spacer(modifier = Modifier.weight(1f))
+ }🤖 Prompt for AI Agents
In
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageTopAppBar.kt
around lines 25 to 33, the Icon currently reuses the incoming modifier and
limits the clickable area to 24dp which breaks accessibility and can cause
unintended layout/test behavior; create and use a dedicated local Modifier for
the back icon (do not reuse the composable's modifier param), give the touch
target a 48dp hit box (e.g., a 48dp size box with the visible icon centered
inside) and attach the clickable to that local modifier, preserve visual icon
size separately, and add the necessary Alignment import for centering.
🚀 이슈번호
✏️ 변경사항
📷 스크린샷
Screen_recording_20250925_160516.webm
✍️ 사용법
🎸 기타
폰트가 따로 적용되지 않아서 이와 관련해 수정이 필요할 거 같습니다.
IOS 환경에선 따로 돌려볼 수 없는 상황이라 확인을 못했습니다...
실제 폰에서도 돌아가는 게 가능한 지 방법 확인 후 확인해보도록 하겠습니다.
Summary by CodeRabbit
신기능
리팩터링
스타일
기타