🚀 4단계 - 장바구니(수량)

README.md

@@ -22,4 +22,13 @@
 - [x] 장바구니에 더하기 기능 구현
 - [x] 장바구니 수량 조절 기능 구현
 - [x] 장바구니 상품 제거 기능 구현 
-- [x] 장바구니 화면에 대한 테스트 코드 작성
+- [x] 장바구니 화면에 대한 테스트 코드 작성
+
+
+### step4 기능 목록
+- [x] 상품 목록 화면 장바구니 더하기 버튼 추가
+- [x] 상품 목록 화면 수량 조절 버튼 추가
+- [x] 수량 조절 기능 구현
+- [x] 상품 목록, 장바구니 간 상품 수량 동기화 기능 구현
+
+

app/src/androidTest/java/nextstep/shoppingcart/screen/CartScreenTest.kt

@@ -27,6 +27,7 @@ internal class CartScreenTest {
         composeTestRule.setContent {
             ShoppingCartTheme {
                 CartScreen(
+                    cartItems = Cart.items,
                     onClickBack = { },
                     onClickOrder = { },
                 )

app/src/main/java/nextstep/shoppingcart/CartActivity.kt

@@ -3,6 +3,7 @@ package nextstep.shoppingcart
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import nextstep.shoppingcart.model.Cart
 import nextstep.shoppingcart.screen.CartScreen
 import nextstep.shoppingcart.ui.theme.ShoppingCartTheme
 
@@ -14,6 +15,7 @@ class CartActivity : ComponentActivity() {
         setContent {
             ShoppingCartTheme {
                 CartScreen(
+                    cartItems = Cart.items,
                     onClickBack = {
                         finish()
                     },

app/src/main/java/nextstep/shoppingcart/model/CartItem.kt

@@ -1,27 +1,29 @@
 package nextstep.shoppingcart.model
 
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.snapshots.SnapshotStateList
+
 data class CartItem(val product: Product, val count: Int) {
     val totalPrice: Int get() = product.price * count
 }
 
 object Cart {
-    private val _items: MutableList<CartItem> = mutableListOf()
-    val items: List<CartItem> get() = _items.toList()
+    private val _items = mutableStateListOf<CartItem>()
+    val items: SnapshotStateList<CartItem> get() = _items
 
     val totalPrice: Int get() = _items.sumOf { it.totalPrice }
 
-    fun addOne(product: Product): List<CartItem> {
+    fun addOne(product: Product) {
         val item = _items.find { it.product == product }
         if (item == null) {
             _items.add(CartItem(product, 1))
         } else {
             val index = _items.indexOf(item)
             _items[index] = item.copy(count = item.count + 1)
         }
-        return items
     }
 
-    fun removeOne(product: Product): List<CartItem> {
+    fun removeOne(product: Product) {
         _items.find { it.product == product }
             ?.let { item ->
                 if (item.count > 1) {
@@ -31,12 +33,10 @@ object Cart {
                     _items.remove(item)
                 }
             }
-        return items
     }
 
-    fun removeAll(product: Product): List<CartItem> {
+    fun removeAll(product: Product) {
         _items.removeAll { it.product == product }
-        return items
     }
 
     fun getCount(product: Product): Int {

app/src/main/java/nextstep/shoppingcart/screen/CartScreen.kt

@@ -30,10 +30,10 @@ import nextstep.shoppingcart.view.DefaultNavigationBackTopBar
 
 @Composable
 fun CartScreen(
+    cartItems: List<CartItem>,
     onClickBack: () -> Unit,
     onClickOrder: () -> Unit
 ) {
-    var cartItems by remember { mutableStateOf(Cart.items) }
     val totalPrice by remember(cartItems) { mutableIntStateOf(Cart.totalPrice) }
 
     Scaffold(
@@ -51,13 +51,13 @@ fun CartScreen(
                 .padding(paddingValues),
             onClickOrder = onClickOrder,
             onClickRemoveOne = { cartItem ->
-                cartItems = Cart.removeOne(cartItem.product)
+                Cart.removeOne(cartItem.product)
             },
             onClickAddOne = { cartItem ->
-                cartItems = Cart.addOne(cartItem.product)
+                Cart.addOne(cartItem.product)
             },
             onClickRemoveAll = { cartItem ->
-                cartItems = Cart.removeAll(cartItem.product)
+                Cart.removeAll(cartItem.product)
             }
         )
     }

app/src/main/java/nextstep/shoppingcart/view/CartProductItem.kt

@@ -23,7 +23,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -81,7 +80,7 @@ fun CartProductItem(
                         .align(Alignment.TopEnd)
                         .padding(top = 18.dp)
                 )
-                CartProductCount(
+                ProductCount(
                     count = cartItem.count,
                     onClickAddOne = onClickAddOne,
                     onClickRemoveOne = onClickRemoveOne,
@@ -123,46 +122,6 @@ private fun CartProductPrice(price: Int, modifier: Modifier = Modifier) {
     )
 }
 
-@Composable
-private fun CartProductCount(
-    count: Int,
-    onClickAddOne: () -> Unit,
-    onClickRemoveOne: () -> Unit,
-    modifier: Modifier = Modifier
-) {
-    Row(
-        verticalAlignment = Alignment.CenterVertically,
-        modifier = modifier
-    ) {
-        IconButton(
-            onClick = onClickRemoveOne,
-            modifier = Modifier.size(42.dp)
-        ) {
-            Text(
-                text = "-",
-                fontSize = 22.sp,
-                fontWeight = FontWeight.Bold
-            )
-        }
-        Text(
-            text = count.toString(),
-            fontSize = 22.sp,
-            textAlign = TextAlign.Center,
-            modifier = Modifier.padding(horizontal = 18.dp)
-        )
-        IconButton(
-            onClick = onClickAddOne,
-            modifier = Modifier.size(42.dp)
-        ) {
-            Text(
-                text = "+",
-                fontSize = 22.sp,
-                fontWeight = FontWeight.Bold,
-            )
-        }
-    }
-}
-
 @Preview(showBackground = true)
 @Composable
 private fun CartProductItemPreview() {

app/src/main/java/nextstep/shoppingcart/view/ProductCount.kt

@@ -0,0 +1,65 @@
+package nextstep.shoppingcart.view
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun ProductCount(
+    count: Int,
+    onClickAddOne: () -> Unit,
+    onClickRemoveOne: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = modifier
+    ) {
+        IconButton(
+            onClick = onClickRemoveOne,
+            modifier = Modifier.size(42.dp)
+        ) {
+            Text(
+                text = "-",
+                fontSize = 22.sp,
+                fontWeight = FontWeight.Bold
+            )
+        }
+        Text(
+            text = count.toString(),
+            fontSize = 22.sp,
+            textAlign = TextAlign.Center,
+            modifier = Modifier.padding(horizontal = 18.dp)
+        )
+        IconButton(
+            onClick = onClickAddOne,
+            modifier = Modifier.size(42.dp)
+        ) {
+            Text(
+                text = "+",
+                fontSize = 22.sp,
+                fontWeight = FontWeight.Bold,
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun CartProductCountPreview() {
+    ProductCount(
+        count = 2,
+        onClickAddOne = {},
+        onClickRemoveOne = {}
+    )
+}

app/src/main/java/nextstep/shoppingcart/view/ProductsItem.kt

@@ -1,15 +1,27 @@
 package nextstep.shoppingcart.view
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
@@ -22,22 +34,51 @@ import nextstep.shoppingcart.model.Product
 @Composable
 fun ProductsItem(
     product: Product,
-    onClick: (Product) -> Unit,
+    count: Int,
+    onClickItem: (Product) -> Unit,
+    onClickAdd: () -> Unit,
+    onClickAddOne: () -> Unit,
+    onclickRemoveOne: () -> Unit,
     modifier: Modifier = Modifier
 ) {
     Column(
         modifier = modifier
             .width(158.dp)
             .clickable {
-                onClick(product)
+                onClickItem(product)
             }
     ) {
-        AsyncImage(
-            model = product.imageUrl,
-            contentDescription = "product image",
-            contentScale = ContentScale.Crop,
-            modifier = Modifier.aspectRatio(1f)
-        )
+        Box {
+            AsyncImage(
+                model = product.imageUrl,
+                contentDescription = "product image",
+                contentScale = ContentScale.Crop,
+                modifier = Modifier.aspectRatio(1f)
+            )
+            if (count > 0) {
+                ProductCount(
+                    count = count,
+                    onClickAddOne = onClickAddOne,
+                    onClickRemoveOne = onclickRemoveOne,
+                    modifier = Modifier
+                        .align(Alignment.BottomCenter)
+                        .padding(bottom = 12.dp)
+                        .background(Color.White, shape = RoundedCornerShape(4.dp))
+                )
+            } else {
+                IconButton(
+                    onClick = onClickAdd,
+                    modifier = Modifier
+                        .padding(12.dp)
+                        .align(Alignment.BottomEnd)
+                        .clip(CircleShape)
+                        .background(Color.White)
+                        .size(42.dp)
+                ) {
+                    Icon(Icons.Filled.Add, null)
+                }
+            }
+        }
         Spacer(
             modifier = Modifier.height(8.dp)
         )
@@ -58,15 +99,36 @@ fun ProductsItem(
     }
 }
 
-@Preview
+@Preview(showBackground = true)
+@Composable
+private fun ProductsItemCountZeroPreview() {
+    ProductsItem(
+        product = Product(
+            imageUrl = "",
+            name = "상품명상품명상품명상품명상품명상품명상품명상품명",
+            price = 10000
+        ),
+        count = 0,
+        onClickItem = {},
+        onClickAdd = {},
+        onClickAddOne = {},
+        onclickRemoveOne = {}
+    )
+}
+
+@Preview(showBackground = true)
 @Composable
-private fun ProductsItemPreview() {
+private fun ProductsItemCountOnePreview() {
     ProductsItem(
         product = Product(
             imageUrl = "",
             name = "상품명상품명상품명상품명상품명상품명상품명상품명",
             price = 10000
         ),
-        onClick = {}
+        count = 1,
+        onClickItem = {},
+        onClickAdd = {},
+        onClickAddOne = {},
+        onclickRemoveOne = {}
     )
 }