Step2: 페미먼츠(카드목록) - #44
Conversation
ironelder
commented
Aug 28, 2024
- 카드추가를 요청하는 목록 화면을 작성했습니다.
- 카드를 추가하면 목록에 카드가 출력되도록 구현되었습니다
- 카드 추가 및 목록이동에 네비게이션을 적용하였습니다
- 카드 추가시 보여지는 카드 컴포저블 이름 변경 - 카드 추가를 위한 디자인 추가 - 카드가 추가 되면 보여주기 위한 카드 더미 컴포저블 추가
- 0,1,2 에 따라서 카드 리스트 및 추가 화면이 보이도록 구성
laco-dev
left a comment
There was a problem hiding this comment.
카드를 추가한 내용이 목록에 반영이 되지 않고 더미가 보여지고 있어요.
아키텍처는 크게 고려하지 않아도 되지만, 입력했던 내용이 목록에 업데이트 되도록 만들어 보면 좋을 것 같아요.
그 외에도 컴포즈 개발하면서 디테일하게 챙겨볼만한 내용들이 있어 의견을 남겼습니다.
| @Composable | ||
| fun RegisteredPaymentCard( | ||
| modifier: Modifier = Modifier, | ||
| ) { |
| PaymentCardsScreenRoute( | ||
| onAddCardClick = { navHostController.navigate(NavigationModel.AddPaymentCard.route) }, | ||
| ) |
There was a problem hiding this comment.
새로운 카드가 추가되었을 때 카드 목록이 업데이트 되어야 한다. 이러한 상황에서 rememberLauncherForActivityResult()를 활용하면 업데이트 상태를 UI에 반영할 수 있다.
카드를 추가하더라도 항상 더미 데이터로 출력을 하고 있어요.
혹시 의도하신 내용일까요?
| LazyColumn( | ||
| modifier = modifier | ||
| .fillMaxWidth() | ||
| .padding(top = 12.dp), |
There was a problem hiding this comment.
Modifier의 padding과 LazyColumn의 contentPadding은 어떤 차이가 있을까요?
| viewModel.addCard() | ||
| onAddComplete() |
There was a problem hiding this comment.
ViewModel의 cardAdded를 활용할 수 있지 않을까요?
강의자료에 있는 내용을 참고 해보셔도 좋을 것 같아요
| ) { | ||
| Scaffold( | ||
| topBar = { NewCardTopBar(onBackClick = { TODO() }, onSaveClick = { TODO() }) }, | ||
| topBar = { NewCardTopBar(onBackClick = { onBackClick() }, onSaveClick = { onSaveClick() }) }, |
There was a problem hiding this comment.
마이너한 의견입니다.
람다의 타입이 동일한다면 별도로 람다를 생성하는 대신 그대로 전달할 수 있습니다.
onBackClick = onBackClick,
onSaveClick = onSaveClick| modifier = modifier, | ||
| text = "00/00", | ||
| fontSize = 12.sp, | ||
| color = Color.White, |
There was a problem hiding this comment.
색상이 반복된다면, ContentColor를 이용하여 제공하는 방법도 좋습니다.
이는 여러가지 컴포넌트에서 제공하는 contentColor가 동작하는 방식과 동일합니다.
CompositionLocalProvider(
LocalContentColor provides Color.White
) { ... }https://developer.android.com/develop/ui/compose/compositionlocal?hl=ko
| Box( | ||
| modifier = Modifier | ||
| .fillMaxSize() | ||
| .clickable { onClick() }, | ||
| contentAlignment = Alignment.Center |
There was a problem hiding this comment.
클릭 효과가 도형의 모양과 일치하지 않고 직사각형으로 잡히고 있어요.
눌렀을 때 ripple 효과가 어떻게 보이는지 확인하면 됩니다.
Surface 컴포넌트와 같은 곳에서 제공하는 shape 파라미터가 어떻게 동작하는지 살펴볼 수 있습니다.
https://developer.android.com/develop/ui/compose/modifiers?hl=ko#order-modifier-matters
| LaunchedEffect(key1 = Unit, block = { | ||
| viewModel.loadCardPayments() | ||
| }) |
There was a problem hiding this comment.
화면을 회전하면 loadCardPayments()는 다시 호출이 될까요? 안될까요?
| uiState: PaymentCardUiState, | ||
| onAddCardClick: () -> Unit | ||
| ) { | ||
| val visible = uiState is PaymentCardUiState.Many |
