Refactor : CardListScreen 상태 호이스팅 적용

oyj7677 · oyj7677 · commit 70b7d52208a0 · 2024-08-26T11:04:01.000+09:00
1. 비즈니스 로직이 들어가지 않는 CardListScreen 컴포넌트 추가
2. 파라미터 명 변경 (cards -&gt; registeredCreditCards), cards는 카드 리스트를 의미함
diff --git a/app/src/androidTest/java/nextstep/payments/screen/card/list/RegisteredCreditCardsScreenTest.kt b/app/src/androidTest/java/nextstep/payments/screen/card/list/RegisteredCreditCardsScreenTest.kt
@@ -7,6 +7,7 @@ import androidx.compose.ui.test.onNodeWithText
 import nextstep.payments.data.BcCard
 import nextstep.payments.data.Card
 import nextstep.payments.data.PaymentCardsRepository
+import nextstep.payments.data.RegisteredCreditCards
 import nextstep.payments.ui.card.list.CardListScreen
 import org.junit.Before
 import org.junit.Rule
@@ -28,7 +29,7 @@ class RegisteredCreditCardsScreenTest {
         composeRule
             .setContent {
                 CardListScreen(
-                    cards = PaymentCardsRepository.cards,
+                    registeredCreditCards =  RegisteredCreditCards(mutableListOf()),
                     onAddCard = {}
                 )
             }
@@ -42,30 +43,29 @@ class RegisteredCreditCardsScreenTest {
     @Test
     fun 등록된_카드가_존재할_경우_해당_카드_수만큼_카드_이미지를_노출시키다() {
         // given : 두 개의 카드를 등록한다
-        PaymentCardsRepository.addCard(
-            Card(
-                cardNumber = "1234-5678-1234-5678",
-                ownerName = "홍길동",
-                expiredDate = "12/24",
-                password = "123",
-                cardCompany = BcCard
-            )
-        )
-
-        PaymentCardsRepository.addCard(
-            Card(
-                cardNumber = "1234-5678-1234-5628",
-                ownerName = "홍길동",
-                expiredDate = "12/24",
-                password = "123",
-                cardCompany = BcCard
+        val registeredCreditCards = RegisteredCreditCards(
+            mutableListOf(
+                Card(
+                    cardNumber = "1234-5678-1234-5678",
+                    ownerName = "홍길동",
+                    expiredDate = "12/24",
+                    password = "123",
+                    cardCompany = BcCard
+                ),
+                Card(
+                    cardNumber = "1234-5678-1234-5628",
+                    ownerName = "홍길동",
+                    expiredDate = "12/24",
+                    password = "123",
+                    cardCompany = BcCard
+                )
             )
         )
 
         // when : 화면을 렌더링한다.
         composeRule.setContent {
             CardListScreen(
-                cards = PaymentCardsRepository.cards
+                registeredCreditCards = registeredCreditCards
             )
         }
         val actual = composeRule
@@ -81,7 +81,7 @@ class RegisteredCreditCardsScreenTest {
         // when : 화면을 렌더링한다.
         composeRule.setContent {
             CardListScreen(
-                cards = PaymentCardsRepository.cards
+                registeredCreditCards = RegisteredCreditCards(mutableListOf())
             )
         }
 
@@ -100,7 +100,7 @@ class RegisteredCreditCardsScreenTest {
 //        cardImage
         composeRule.setContent {
             CardListScreen(
-                cards = PaymentCardsRepository.cards
+                registeredCreditCards = RegisteredCreditCards(mutableListOf())
             )
         }
 
@@ -122,11 +122,23 @@ class RegisteredCreditCardsScreenTest {
                 cardCompany = BcCard
             )
         )
+        val registeredCreditCards = RegisteredCreditCards(
+            mutableListOf(
+                Card(
+                    cardNumber = "1234-5678-1234-5628",
+                    ownerName = "홍길동",
+                    expiredDate = "12/24",
+                    password = "123",
+                    cardCompany = BcCard
+                )
+            )
+        )
+
 
         // when : 화면을 렌더링한다.
         composeRule.setContent {
             CardListScreen(
-                cards = PaymentCardsRepository.cards
+                registeredCreditCards = registeredCreditCards
             )
         }
 
diff --git a/app/src/main/java/nextstep/payments/ui/card/list/CardListScreen.kt b/app/src/main/java/nextstep/payments/ui/card/list/CardListScreen.kt
@@ -15,9 +15,9 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.viewmodel.compose.viewModel
 import nextstep.payments.data.BcCard
 import nextstep.payments.data.Card
+import nextstep.payments.data.PaymentCardsRepository
 import nextstep.payments.data.RegisteredCreditCards
 import nextstep.payments.ui.card.CreditCardUiState
-import nextstep.payments.data.PaymentCardsRepository
 import nextstep.payments.ui.card.list.component.card.CardLazyColumn
 import nextstep.payments.ui.card.list.component.card.CardListTopBar
 import nextstep.payments.ui.card.list.component.card.CardListTopBarWithAdd
@@ -31,7 +31,19 @@ fun CardListScreen(
 ) {
     val cards by viewModel.registeredCreditCards.collectAsStateWithLifecycle()
 
-    when (cards.getState()) {
+    CardListScreen(
+        registeredCreditCards = cards,
+        onAddCard = onAddCard,
+    )
+}
+
+@Composable
+fun CardListScreen(
+    registeredCreditCards: RegisteredCreditCards = RegisteredCreditCards(mutableListOf()),
+    onAddCard: () -> Unit = {}
+) {
+
+    when (registeredCreditCards.getState()) {
         is CreditCardUiState.Empty -> {
             CardListScreenEmpty(
                 onAddCard = onAddCard,
@@ -40,14 +52,14 @@ fun CardListScreen(
 
         is CreditCardUiState.One -> {
             CardListScreenOne(
-                cards = cards,
+                cards = registeredCreditCards.cardList,
                 onAddCard = onAddCard,
             )
         }
 
         is CreditCardUiState.Many -> {
             CardListScreenMany(
-                cards = cards,
+                cards = registeredCreditCards.cardList,
                 onAddCard = onAddCard,
             )
         }
@@ -58,9 +70,7 @@ fun CardListScreen(
 fun CardListScreenEmpty(
     onAddCard: () -> Unit = {}
 ) {
-    Scaffold(
-        topBar = { CardListTopBar() }
-    ) { paddingValues ->
+    Scaffold(topBar = { CardListTopBar() }) { paddingValues ->
         Column(
             modifier = Modifier.padding(paddingValues)
         ) {
@@ -77,10 +87,7 @@ fun CardListScreenEmpty(
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(
-                        start = 73.dp,
-                        end = 73.dp,
-                        top = 12.dp,
-                        bottom = 24.dp
+                        start = 73.dp, end = 73.dp, top = 12.dp, bottom = 24.dp
                     )
                     .size(width = 208.dp, height = 124.dp)
             )
@@ -90,12 +97,10 @@ fun CardListScreenEmpty(
 
 @Composable
 fun CardListScreenOne(
-    cards: RegisteredCreditCards,
+    cards: List<Card>,
     onAddCard: () -> Unit = {}
 ) {
-    Scaffold(
-        topBar = { CardListTopBar() }
-    ) { paddingValues ->
+    Scaffold(topBar = { CardListTopBar() }) { paddingValues ->
         Column(
             modifier = Modifier.padding(paddingValues)
         ) {
@@ -107,10 +112,7 @@ fun CardListScreenOne(
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(
-                        start = 73.dp,
-                        end = 73.dp,
-                        top = 12.dp,
-                        bottom = 24.dp
+                        start = 73.dp, end = 73.dp, top = 12.dp, bottom = 24.dp
                     )
                     .size(width = 208.dp, height = 124.dp)
             )
@@ -120,16 +122,14 @@ fun CardListScreenOne(
 
 @Composable
 fun CardListScreenMany(
-    cards: RegisteredCreditCards,
+    cards: List<Card>,
     onAddCard: () -> Unit = {}
 ) {
-    Scaffold(
-        topBar = {
-            CardListTopBarWithAdd(
-                onClickAdd = onAddCard
-            )
-        }
-    ) { paddingValues ->
+    Scaffold(topBar = {
+        CardListTopBarWithAdd(
+            onClickAdd = onAddCard
+        )
+    }) { paddingValues ->
         Column(
             modifier = Modifier.padding(paddingValues)
         ) {
@@ -144,66 +144,57 @@ private fun CardListScreenEmptyPreview() {
     PaymentCardsRepository.removeAllCard()
     PaymentsTheme {
         CardListScreen(
+            registeredCreditCards = RegisteredCreditCards(mutableListOf()),
             onAddCard = {}
         )
     }
 }
 
-
 @Preview
 @Composable
 private fun CardListScreenOnePreview() {
-    PaymentCardsRepository.addCard(
-        Card(
-            cardNumber = "1234-5678-1234-5678",
-            ownerName = "홍길동",
-            expiredDate = "12/24",
-            password = "123",
-            cardCompany = BcCard
-        )
-    )
-
-    val viewModel = CardListViewModel()
-
     PaymentsTheme {
         CardListScreen(
-            viewModel = viewModel,
+            registeredCreditCards = RegisteredCreditCards(
+                cardList = listOf(
+                    Card(
+                        cardNumber = "1234-5678-1234-6654",
+                        ownerName = "홍길동",
+                        expiredDate = "12/24",
+                        password = "123",
+                        cardCompany = BcCard
+                    )
+                )
+            ),
             onAddCard = {}
         )
     }
 }
 
-
 @Preview
 @Composable
 private fun CardListScreenManyPreview() {
-    PaymentCardsRepository.addCard(
-        Card(
-            cardNumber = "1234-5678-1234-6654",
-            ownerName = "홍길동",
-            expiredDate = "12/24",
-            password = "123",
-            cardCompany = BcCard
-        )
-    )
-
-    PaymentCardsRepository.addCard(
-        Card(
-            cardNumber = "1234-5678-1234-1234",
-            ownerName = "홍길동",
-            expiredDate = "12/24",
-            password = "123",
-            cardCompany = BcCard
+    val registeredCreditCards = RegisteredCreditCards(
+        cardList = listOf(
+            Card(
+                cardNumber = "1234-5678-1234-6654",
+                ownerName = "홍길동",
+                expiredDate = "12/24",
+                password = "123",
+                cardCompany = BcCard
+            ),
+            Card(
+                cardNumber = "1234-5678-1234-1234",
+                ownerName = "홍길동",
+                expiredDate = "12/24",
+                password = "123",
+                cardCompany = BcCard
+            )
         )
     )
 
-    val viewModel = CardListViewModel()
-
     PaymentsTheme {
-        CardListScreen(
-            viewModel = viewModel,
-            onAddCard = {}
-        )
+        CardListScreen(registeredCreditCards = registeredCreditCards, onAddCard = {})
     }
 }
 
diff --git a/app/src/main/java/nextstep/payments/ui/card/list/component/card/CardLazyColumn.kt b/app/src/main/java/nextstep/payments/ui/card/list/component/card/CardLazyColumn.kt
@@ -6,18 +6,19 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
+import nextstep.payments.data.Card
 import nextstep.payments.data.RegisteredCreditCards
 import nextstep.payments.data.PaymentCardsRepository
 
 @Composable
-fun CardLazyColumn(cards: RegisteredCreditCards) {
+fun CardLazyColumn(cards: List<Card>) {
     LazyColumn {
         items(
-            count = cards.cardList.size,
-            key = { index -> PaymentCardsRepository.cards[index].cardNumber }
+            count = cards.size,
+            key = { index -> cards[index].cardNumber }
         ) {
             CardImage(
-                card = PaymentCardsRepository.cards[it],
+                card =  cards[it],
                 cardColor = Color(0xFFE5E5E5),
                 modifier = Modifier.padding(
                     start = 73.dp,
