Step4 - 페이먼츠(카드 수정)

README.md

@@ -17,4 +17,12 @@
 ## 기능 목록
 - [O] 카드사 목록 화면 구현
 - [O] 선택한 카드사에 따라 카드 미리보기가 바뀌어야 한다.
-- [] 카드사를 선택할 때 적절한 카드사 아이콘을 노출한다.
+- [O] 카드사를 선택할 때 적절한 카드사 아이콘을 노출한다.
+- [O] 카드 등록 시 카드에 카드사 이름이 표시된다.
+
+# Step 4 - 페이먼츠(카드 수정)
+
+## 기능 목록
+- [O] 등록된 카드 선택시 카드 수정 화면으로 이동한다.
+- [O] 카드 수정 시 변경이 일어나지 않으면 수정이 불가능하다.
+- [O] 카드가 수정되면 카드 목록 화면에 변경사항이 반영된다.

app/build.gradle.kts

@@ -1,6 +1,7 @@
 plugins {
     alias(libs.plugins.android.application)
     alias(libs.plugins.jetbrains.kotlin.android)
+    id("kotlin-parcelize")
 }
 
 android {

app/src/androidTest/java/nextstep/payments/screen/card/list/RegisteredCreditCardsScreenTest.kt

@@ -8,6 +8,7 @@ import androidx.compose.ui.test.onNodeWithTag
 import androidx.compose.ui.test.onNodeWithText
 import androidx.test.core.app.ApplicationProvider
 import nextstep.payments.R
+import nextstep.payments.data.BankType
 import nextstep.payments.data.Card
 import nextstep.payments.data.PaymentCardsRepository
 import nextstep.payments.data.RegisteredCreditCards
@@ -50,18 +51,20 @@ class RegisteredCreditCardsScreenTest {
         val registeredCreditCards = RegisteredCreditCards(
             mutableListOf(
                 Card(
+                    id = 1,
                     cardNumber = "1234-5678-1234-5678",
                     ownerName = "홍길동",
                     expiredDate = "12/24",
                     password = "123",
-                    brandColor = Color(context.getColor(R.color.bc_card))
+                    bankType = BankType.BC
                 ),
                 Card(
+                    id = 2,
                     cardNumber = "1234-5678-1234-5628",
                     ownerName = "홍길동",
                     expiredDate = "12/24",
                     password = "123",
-                    brandColor = Color(context.getColor(R.color.bc_card))
+                    bankType = BankType.BC
                 )
             )
         )
@@ -119,21 +122,23 @@ class RegisteredCreditCardsScreenTest {
         // given : 카드 등록이 되어있다.
         PaymentCardsRepository.addCard(
             Card(
+                id = 13,
                 cardNumber = "1234-5678-1234-5628",
                 ownerName = "홍길동",
                 expiredDate = "12/24",
                 password = "123",
-                brandColor = Color(context.getColor(R.color.bc_card))
+                bankType = BankType.BC
             )
         )
         val registeredCreditCards = RegisteredCreditCards(
             mutableListOf(
                 Card(
+                    id = 4,
                     cardNumber = "1234-5678-1234-5628",
                     ownerName = "홍길동",
                     expiredDate = "12/24",
                     password = "123",
-                    brandColor = Color(context.getColor(R.color.bc_card))
+                    bankType = BankType.BC
                 )
             )
         )

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

@@ -17,11 +17,11 @@ import nextstep.payments.ui.card.registration.NewCardActivity
 import nextstep.payments.ui.theme.PaymentsTheme
 
 class MainActivity : ComponentActivity() {
-    override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
 
-        val viewModel by viewModels<CardListViewModel>()
+    private val viewModel: CardListViewModel by viewModels { CardListViewModel.Factory }
 
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
         setContent {
             val launcher =
                 rememberLauncherForActivityResult(ActivityResultContracts.StartActivityForResult()) {
@@ -40,12 +40,28 @@ class MainActivity : ComponentActivity() {
                         onAddCard = {
                             val intent = Intent(this, NewCardActivity::class.java)
                             launcher.launch(intent)
+                        },
+                        onCardClick = { card ->
+                            val intent = Intent(this, NewCardActivity::class.java).apply {
+                                putExtra("card", card)
+                            }
+                            launcher.launch(intent)
                         }
                     )
                 }
             }
         }
     }
+
+    override fun onPause() {
+        super.onPause()
+        viewModel.saveCard()
+    }
+
+    override fun onResume() {
+        super.onResume()
+        viewModel.openCard()
+    }
 }
 
 

app/src/main/java/nextstep/payments/data/BankType.kt

@@ -1,12 +1,13 @@
 package nextstep.payments.data
 
 import androidx.annotation.ColorRes
+import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
 import nextstep.payments.R
 
 enum class BankType(
     @StringRes val companyName: Int,
-    val logo: Int,
+    @DrawableRes val logo: Int,
     @ColorRes val brandColor: Int,
 ) {
     NOT_SELECTED(

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

@@ -1,11 +1,14 @@
 package nextstep.payments.data
 
-import androidx.compose.ui.graphics.Color
+import android.os.Parcelable
+import kotlinx.parcelize.Parcelize
 
+@Parcelize
 data class Card(
+    var id: Int = 0,
     val cardNumber: String,
     val expiredDate: String,
     val ownerName: String,
     val password: String,
-    val brandColor: Color
-)
+    val bankType: BankType
+) : Parcelable

app/src/main/java/nextstep/payments/data/PaymentCardsRepository.kt

@@ -3,13 +3,23 @@ package nextstep.payments.data
 object PaymentCardsRepository {
 
     private val _cards = mutableListOf<Card>()
-    val cards: List<Card> get() = _cards.toList()
+    val cards: List<Card> get() = _cards
 
     fun addCard(card: Card) {
+        if (card.id == 0) card.id = createId()
         _cards.add(card)
     }
 
     fun removeAllCard() {
         _cards.clear()
     }
+
+    fun editCard(newCard: Card) {
+        val index = _cards.indexOfFirst { it.id == newCard.id }
+        _cards[index] = newCard
+    }
+
+    private fun createId(): Int {
+        return _cards.maxOfOrNull { it.id }?.plus(1) ?: 1
+    }
 }

app/src/main/java/nextstep/payments/data/RegisteredCreditCards.kt

@@ -1,8 +1,11 @@
 package nextstep.payments.data
 
+import android.os.Parcelable
+import kotlinx.parcelize.Parcelize
 import nextstep.payments.ui.card.CreditCardUiState
 
-data class RegisteredCreditCards(val cardList: List<Card>) {
+@Parcelize
+data class RegisteredCreditCards(val cardList: List<Card>) : Parcelable {
 
     fun getState(): CreditCardUiState {
         return when (cardList.size) {

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

@@ -1,12 +1,14 @@
 package nextstep.payments.ui
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -26,12 +28,14 @@ import nextstep.payments.ui.card.list.component.card.CardOwnerName
 
 @Composable
 fun PaymentCard(
+    brandColor: Color,
     modifier: Modifier = Modifier,
-    brandColor: Color = Color(0xFF333333)
+    content: @Composable () -> Unit = {}
 ) {
     Box(
         contentAlignment = Alignment.CenterStart,
         modifier = modifier
+            .padding(top = 10.dp)
             .shadow(8.dp)
             .size(width = 208.dp, height = 124.dp)
             .background(
@@ -49,19 +53,26 @@ fun PaymentCard(
                     shape = RoundedCornerShape(4.dp),
                 )
         )
+        content()
     }
 }
 
 @Composable
-fun PaymentCard(
+fun PaymentCardContents(
     card: Card,
     modifier: Modifier = Modifier,
-    content: @Composable () -> Unit = {}
+    onClick: (Card) -> Unit = {}
 ) {
     Box(
-        modifier = Modifier.padding(top = 10.dp)
+        modifier = Modifier
+            .clickable { onClick(card) }
     ) {
-        content()
+        Text(
+            text = card.bankType.name,
+            color = Color.White,
+            modifier = Modifier
+                .padding(start = 14.dp, top = 10.dp)
+        )
 
         CardNumber(
             cardNumber = card.cardNumber,
@@ -90,24 +101,20 @@ fun PaymentCard(
 
 @Preview
 @Composable
-private fun PaymentCardPreview() {
-    PaymentCard(
-        brandColor = colorResource(id = BankType.BC.brandColor)
+private fun NewPaymentCardPreview() {
+    val card = Card(
+        id = 1,
+        cardNumber = "1234-5678-1234-5678",
+        ownerName = "홍길동",
+        expiredDate = "12/34",
+        password = "123",
+        bankType = BankType.BC
     )
-}
 
-@Preview
-@Composable
-private fun NewPaymentCardPreview() {
     PaymentCard(
-        card = Card(
-            cardNumber = "1234-5678-1234-5678",
-            ownerName = "홍길동",
-            expiredDate = "12/34",
-            password = "123",
-            brandColor = colorResource(id = BankType.BC.brandColor)
-        ),
-        modifier = Modifier.size(width = 208.dp, height = 124.dp),
-        content = { PaymentCard() }
+        brandColor = colorResource(id = BankType.BC.brandColor),
+        content = {
+            PaymentCardContents(card = card)
+        }
     )
 }