[#428] refactor joinstep1fragment compose 적용 #429
Conversation
| if(textValue.isEmpty()) return@OutlinedTextField | ||
| IconButton( | ||
| onClick = { | ||
| onValueChange("") |
There was a problem hiding this comment.
여기 ("") 부분도 strings.xml을 활용하면 좋을 것 같아요!
팁을 드리자면,
<string name="sign_in_email_default_value" />
이런식으로 ""와 같은 값을 표현할 수 있어요!
| imeAction: ImeAction = ImeAction.Default | ||
| ){ | ||
| var passwordVisible by rememberSaveable { mutableStateOf(false) } | ||
| val image = if (passwordVisible){ |
There was a problem hiding this comment.
어떤 이미지인지 이름이 명확하면 더 좋을 것 같네요 ㅎㅎ
| @Composable | ||
| fun EmailTextInputField( | ||
| inputTitle: String, | ||
| textValue: String, | ||
| onValueChange: (String) -> Unit, | ||
| isError: Boolean, | ||
| errorMessage: String, | ||
| modifier: Modifier = Modifier, | ||
| imeAction: ImeAction = ImeAction.Default, | ||
| ){ | ||
| Column( | ||
| modifier = modifier | ||
| ) { | ||
| Text( | ||
| text = inputTitle, | ||
| style = TextStyle( | ||
| fontSize = 16.sp, | ||
| ) | ||
| ) |
There was a problem hiding this comment.
inputTitle을 매개변수로 넘겨서 상위 컴포넌트에서 조작할 수 있게 해주셨네요! 좋습니다 ㅎㅎ
현재는 딱 필요한 만큼 타이틀만 지정하셨는데, 혹시 추후에 확장성을 더 높이기 위해서라면 해당 Text 컴포저블을 통째로 넘기는 방법도 있습니다! (만약 Text컴포저블이 아닌 다른 요소가 들어가야한다던가...)
title: @Composable () -> Unit위와 같이 구현하면 됩니다! 이러면 스크린에서 직접 Text컴포저블을 주입할 수 있어요 ㅎ
아래 content 부분에는 같은 위치에 title() 이런식으로 넣어주면 동일하게 작동할거에요!
(지금은 텍스트만으로도 괜찮은 것 같으니 참고만 해주세요 ㅎㅎ)
There was a problem hiding this comment.
컴포저블을 직접 인자로 넣는건 생각못했네요! 참고해보겠습니다
| import kr.co.lion.modigm.R | ||
|
|
||
| @Composable | ||
| fun EmailTextInputField( |
There was a problem hiding this comment.
한 파일에 이메일과 비밀번호 텍스트필드 모두 있군요 ㅎㅎ
추후 단위테스트라던가 프리뷰구현을 위해서는 한 파일에 하나의 컴포저블 함수로 이름도 파일명과 똑같이해서 각각 구현하면 좋을 것 같아요!
그것도 아니라면 JoinTextInputField 하나를 공통 컴포넌트로 잡고 모든 텍스트필드를 그 컴포넌트 하나로 만들 수 있게 구현하는 것도 방법이겠구요!
There was a problem hiding this comment.
사실 하나의 공통 컴포넌트로 만들어보려했는데 그게 어려워서 공부를 좀 더 해봐야할것같네요;;
| package kr.co.lion.modigm.ui.join.component | ||
|
|
||
| import androidx.compose.foundation.layout.Column | ||
| import androidx.compose.foundation.layout.fillMaxSize | ||
| import androidx.compose.foundation.layout.padding | ||
| import androidx.compose.foundation.rememberScrollState | ||
| import androidx.compose.foundation.verticalScroll | ||
| import androidx.compose.material3.Text | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.res.colorResource | ||
| import androidx.compose.ui.res.stringResource | ||
| import androidx.compose.ui.text.TextStyle | ||
| import androidx.compose.ui.text.input.ImeAction | ||
| import androidx.compose.ui.unit.dp | ||
| import androidx.compose.ui.unit.sp | ||
| import androidx.lifecycle.compose.collectAsStateWithLifecycle | ||
| import kr.co.lion.modigm.R | ||
| import kr.co.lion.modigm.ui.join.vm.JoinStep1EmailAndPwViewModel | ||
|
|
||
| @Composable | ||
| fun JoinStep1EmailAndPwScreen( |
There was a problem hiding this comment.
Screen으로 구현한 부분은 공통 컴포넌트라기보단 최상위 컴포넌트에 가까우니 패키지도 컴포넌트가 아닌 join 아래에 들어가면 더 좋을 것 같습니다! 추후 xml이 정리되고 컴포즈로 다 전환된다면, 싱글액티비티에서 프래그먼트 없이 스크린으로 모든 화면전환이 이루어지게 될거에요!
| binding.composeViewJoinStep1EmailAndPw.apply { | ||
| setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) | ||
| setContent { | ||
| JoinStep1EmailAndPwScreen(joinStep1EmailAndPwViewModel) | ||
| } | ||
| } | ||
| return binding.root | ||
| } |
There was a problem hiding this comment.
xml의 각 요소를 단계별로 전환하는 게 아니라 한 번에 변경한 것이라면 (지금처럼 컴포즈 뷰가 하나라면) return에다가 컴포즈 뷰를 리턴해서 xml을 삭제할 수 있습니다! 뷰바인딩도 필요없어지니 베이스프래그먼트 상속도 없앨 수 있어요!
| // 계정 중복 확인 | ||
| val isDup = joinViewModel.registerEmailUserToFirebaseAuth() | ||
| if(isDup.isNotEmpty()){ | ||
| step1EmailAndPwViewModel.userInputEmailValidation.value = isDup | ||
| step1EmailAndPwViewModel.setUserInputEmailValidationMessage(isDup) | ||
| hideLoading() | ||
| return@launch | ||
| } |
There was a problem hiding this comment.
duplication으로 풀어쓰면 조금 더 가독성이 좋을 것 같아요!
| keyboardOptions = KeyboardOptions( | ||
| imeAction = imeAction |
There was a problem hiding this comment.
이부분도 imeAction 만 넘기셨는데, 확장성을 생각해서 keyboardOptions를 통째로 넘기는 것도 고려해보면 좋겠네요!
앞으로 사용에서 진짜 필요없다 생각되면 넘기셔도 됩니다! ㅎㅎ
| <string name="JOIN_STEP1_PASSWORD_LABEL">비밀번호</string> | ||
| <string name="JOIN_STEP1_PASSWORD_GUIDE">8~20자리, 영문, 숫자, 특수문자 포함 입력</string> | ||
| <string name="JOIN_STEP1_PASSWORD_CHECK_LABEL">비밀번호 확인</string> | ||
| <string name="JOIN_STEP1_INPUT_PLACEHOLDER_TEXT">%1$s 입력</string> |
There was a problem hiding this comment.
%1$s
이런식으로 파라미터를 지정할 수 있는 건 처음알았네요! ㅎㅎ 배워갑니다!
#️⃣연관된 이슈
📝작업 내용
스크린샷 (선택)
💬리뷰 요구사항(선택)