🚀 2단계 - 페이먼츠(카드 목록) #118

ChaMinZi · 2025-03-23T14:33:38Z

2단계 리뷰 잘 부탁드립니다 🙇‍♀️

[ 기능 추가 사항 ]

카드 목록 화면을 구현하여 카드 추가 화면과 연결
- navigation 이용
새로운 카드가 추가되었을 때 카드 목록이 업데이트
카드 목록 상태에 따른 UI 변경사항을 노출한다.
- 카드 목록이 비어있을 때에는 "새로운 카드를 등록해주세요" 안내가 노출
- 카드 목록에 카드가 한 개 있을 때의 카드 추가 UI는 목록 하단에 노출
- 카드 목록에 카드가 여러 개 있을 때의 카드 추가 UI는 상단바에 노출

Screen shot

Screen_recording_20250323_232847.mp4

change - CreditCardUiState 추가 - Card 목록 개수에 따른 컴포넌트 분리

laco-dev

구현해주신 것 잘 봤습니다.
네비게이션을 사용해주신 것과 도메인 로직을 꼼꼼히 작성해주신 점 인상깊게 보았습니다.

다만 뷰모델 하나로 모든 로직을 다 넣은 점은 조금 아쉬웠습니다.
몇가지 의견 남겨드렸으니 확인 해주세요.

정규 강의 시간은 모두 종료되어서 24시간 내에 리뷰 답변을 드리지 못할 확률이 높습니다.
이 점 양해 부탁드립니다.

laco-dev · 2025-03-25T12:07:10Z

app/src/main/java/nextstep/payments/navigate/NavigateScreen.kt

+            PaymentCardsScreen(
+                uiState = creditCardUiState,
+                onAddClick = {
+                    navController.navigate(Destination.ADD_CARD.name)
+                },
+                modifier = Modifier.fillMaxSize()
+            )


하나의 뷰모델에서 모든 처리가 이루어 지고 있는데,
PaymentCardsScreen을 위한 뷰모델을 가지도록 만들어보시면 좋겠습니다.

laco-dev · 2025-03-25T12:08:31Z

app/src/main/java/nextstep/payments/model/Card.kt

+interface Card {
+    val cardNumber: String
+    val expiredDate: String
+    val ownerName: String
+    val password: String
+
+    fun getFormattedCardNumber(): String
+    fun getFormattedExpiredDate(): String
+}


Card를 인터페이스로 만든 이유가 있을까요?

이후 신용/체크/멤버십 카드 등 여러가지 카드로 분리될 수도 있을 것 같고, 각 변수는 카드라면 기본적으로 가지는 값으로 보여 interface 로 작성해봤습니다 : )

laco-dev · 2025-03-25T12:09:30Z

app/src/main/java/nextstep/payments/ui/paymentcards/PaymentCardsScreen.kt

+            is CreditCardUiState.One -> OneCardScreen(
+                card = uiState.card,
+                modifier.padding(innerPadding),
+                onAddClick
+            )


어떤건 이름을 지정하고 어떤건 안하고 하다보면 가독성이 많이 떨어집니다. 모두 이름을 지정해주면 어떨까요?

laco-dev · 2025-03-25T12:10:42Z

app/src/main/java/nextstep/payments/ui/paymentcards/PaymentCardsTopBar.kt

+            if (uiState is CreditCardUiState.Many) {
+                Text(
+                    text = stringResource(R.string.add),
+                    fontSize = 18.sp,
+                    fontWeight = FontWeight.Bold,
+                    modifier = Modifier
+                        .padding(end = 16.dp)
+                        .clickable { onAddClick() }
+                )
+            }


TopBar가 "추가" 버튼만 결정하면 될 것 같은데 UiState에 의존할 필요가 있을까요?

laco-dev · 2025-03-25T12:11:34Z

app/src/main/java/nextstep/payments/ui/paymentcards/PaymentCard.kt

+    Box(
+        contentAlignment = Alignment.BottomCenter,
+        modifier = modifier
+            .shadow(8.dp)
+            .size(width = 208.dp, height = 124.dp)
+            .background(
+                color = Color(0xFF333333),
+                shape = RoundedCornerShape(5.dp),
+            )
+    ) {


모양을 비롯한 여러가지 설정을 위해서 Surface를 활용해보셔도 좋습니다.

laco-dev · 2025-03-25T12:12:48Z

app/src/main/java/nextstep/payments/ui/paymentcards/ManyCardsScreen.kt

+    LazyColumn(
+        modifier = modifier.padding(top = 12.dp),
+        verticalArrangement = Arrangement.spacedBy(36.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {


LazyColumn의 contentPaddding은 Modifier.padding()과 어떤 차이가 있을까요?

item의 개수가 늘어났을 때, 차이가 아래와 같이 보이는 것을 확인했습니다!
contentPadding을 적용했을 때와 같이 동작할 것이라 생각했는데, UI 확인 시 좀 더 세심히 봐야겠네요😭😭
꼼꼼한 리뷰 감사합니다.

[Modifier.padding() 적용시]

[LazyColumn의 contentPadding 적용시]

laco-dev · 2025-03-25T12:13:31Z

app/src/main/java/nextstep/payments/ui/paymentcards/ManyCardsScreen.kt

+        items(cards) {
+            PaymentCard(
+                cardNumber = it.getFormattedCardNumber(),
+                expiredDate = it.getFormattedExpiredDate(),
+                ownerName = it.ownerName
+            )
+        }


items를 지정할 때 key값을 명시하는 것을 권장합니다.
이 key값이 어떤 동작을 하는지는 공식 문서를 참고 해보세요
https://developer.android.com/develop/ui/compose/lists?hl=ko#item-keys

laco-dev · 2025-03-25T12:19:20Z

app/src/main/java/nextstep/payments/navigate/NavigateScreen.kt

+                navigateToCardList = {
+                    navController.popBackStack()
+                    newCardViewModel.resetAddCard()
+                },


참고로 navigate { ... } 를 할때 특정 Stack까지 Popup을 하는 기능을 이용해서 화면을 이동하는 방법도 있습니다.

laco-dev · 2025-03-25T12:20:18Z

app/src/main/java/nextstep/payments/model/CreditCard.kt

+    override fun getFormattedCardNumber(): String {
+        return cardNumber.chunked(4)
+            .mapIndexed { index, part ->
+                if (index in 2..3) {
+                    "****"
+                } else {
+                    part
+                }
+            }
+            .joinToString("-")
+    }
+
+    override fun getFormattedExpiredDate(): String {
+        return expiredDate.chunked(2).joinToString(" / ")
+    }


포매팅 해서 문자열을 출력하는 것은 모델이 할 일인가요? UI가 할 일인가요?

change - Main Screen 별로 ViewModel 나누기 (NewCardScreen, PaymentCardsScreen) - 컴포저블 함수 사용 시, 모든 매개변수명 지정 - PaymentCardsTopBar에서 CreditCardUiState 의존성 제거 - Box 대신 Surface 사용하여 스타일 지정 - LazyColumn items에 Key 지정 - CardNumber, ExpiredDate 포맷팅을 UI 레이어에서 처리하도록 변경

change - navigate 시 특정 Stack까지 Popup하는 기능을 이용하여 이동하도록 수정

ChaMinZi · 2025-04-02T10:31:12Z

안녕하세요! 2단계 리뷰 사항들 반영하였습니다!
시간 되실 때 확인 부탁드립니다~

laco-dev

고생 많으셨습니다.

여러가지 다 해보기에는 미션 범위나 요구사항이 적절하지는 않아서 지금은 익숙해지는 정도로만 봐주시고 나중에 더 연습하실 기회가 많을거에요.

laco-dev · 2025-04-09T13:32:04Z

app/src/main/java/nextstep/payments/MainActivity.kt

+                NavigateScreen(
+                    newCardViewModel = newCardViewModel,
+                    paymentCardViewModel = paymentCardViewModel
+                )


hiltViewModel을 사용하지 않으면 뷰모델을 위에서 모두 초기화 하고 내려줘야 할 것 같군요.

지금은 아니지만, 나중에 더 연습하실 때는 참고해보시면 도움이 될 것 같습니다.
https://medium.com/kenneth-android/compose-hiltviewmodel-%EA%B3%BC-viewmodel-%EC%B0%A8%EC%9D%B4-6d5412efcb19

laco-dev · 2025-04-09T13:35:55Z

app/src/main/java/nextstep/payments/ui/paymentcards/PaymentCardsScreenContent.kt

+@Preview
+@Composable
+private fun ManyPaymentCardsPreview() {


마이너한 부분이지만, Preview 함수 이름을 매번 만드는게 번거로워서 저는 개인적으로 이렇게 작성하고는 합니다.
팀마다 사람마다 다르더라구요

@Preview(name = "...") fun Preview1() ...

ChaMinZi added 15 commits March 19, 2025 14:34

docs: 2단계 요구사항 업데이트

4a69117

feat: 입력 항목별 유효성 검사 추가

7f817e3

refactor: NewCardScreenContent 컴포넌트 이름 변경 및 분리

a33daa1

feat: 카드 데이터 저장소 힌트 추가

af99f21

feat: 카드 목록에 새로운 카드 생성 버튼 추가

5dcbff9

feat: 카드 번호, 만료일, 소유자명 UI 추가

c28cd7c

feat: Navigation 추가

f8a2428

feat: 카드 목록이 비어있을 때에는 "새로운 카드를 등록해주세요" 안내가 노출

fe51f1b

feat: 새로운 카드가 추가되면 카드 리스트 화면으로 이동

54234cc

feat:카드 목록 상태에 따른 UI 변경 반영

73a5b0e

change - CreditCardUiState 추가 - Card 목록 개수에 따른 컴포넌트 분리

feat: 카드 목록에 카드가 여러 개 있을 때, 카드 추가 UI를 상단바에 노출하도록 변경

2aa79d6

feat: 카드 추가 시, 카드 목록 화면 업데이트

4c998c2

feat: 상단 바 카드 UI에 카드 추가 리스너 추가

6b70394

refactor: 카드 Input 단위 테스트 코드 수정

54541f3

feat: 카드 번호 포맷 변경 및 테스트 코드 추가

a8182cd

laco-dev requested changes Mar 25, 2025

View reviewed changes

ChaMinZi added 2 commits April 2, 2025 15:03

refactor: 2단계 리뷰 사항 반영

3170309

change - navigate 시 특정 Stack까지 Popup하는 기능을 이용하여 이동하도록 수정

ChaMinZi added 2 commits April 2, 2025 19:34

docs: 2단계 리뷰 사항 업데이트

fa4878f

test: ManyCardsScreen 화면 Preview key 값 변경

52c137d

laco-dev approved these changes Apr 9, 2025

View reviewed changes

laco-dev merged commit a350895 into next-step:chaminzi Apr 9, 2025

🚀 2단계 - 페이먼츠(카드 목록) #118

🚀 2단계 - 페이먼츠(카드 목록) #118

Uh oh!

Conversation

ChaMinZi commented Mar 23, 2025

[ 기능 추가 사항 ]

Screen shot

Uh oh!

laco-dev left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ChaMinZi Apr 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

[Modifier.padding() 적용시]

[LazyColumn의 contentPadding 적용시]

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ChaMinZi commented Apr 2, 2025

Uh oh!

laco-dev left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ChaMinZi Apr 2, 2025 •

edited

Loading