Step2 pr 입니다!

README.md

@@ -1,5 +1,29 @@
 # android-shopping-cart
 
+## Step2
+
+### 기능 요구 사항
+- [x] 상품 상세 화면을 구현한다.
+- [x] 상품 목록에서 상품을 누르면 상품 상세 화면으로 이동한다.
+- [x] 뒤로 가기 버튼이나 아이콘을 누르면 직전 화면으로 돌아간다.
+- [x] 장바구니 화면의 빈 껍데기를 연결한다.
+- [x] 상품 목록에서 장바구니 아이콘을 누르면 장바구니 화면으로 이동한다.
+- [x] 상품 상세에서 장바구니 담기 버튼을 누르면 장바구니 화면으로 이동한다.
+- [x] 뒤로 가기 버튼이나 아이콘을 누르면 직전 화면으로 돌아간다.
+- [x] 장바구니에 실제로 상품이 담기는 기능은 이 단계에서 고려하지 않는다
+
+### 프로그래밍 요구 사항
+- [x] 장바구니에 실제로 상품이 담기는 기능은 이 단계에서 고려하지 않는다.
+- [x] 컴포저블 함수가 너무 많은 일을 하지 않도록 분리하기 위해 노력해 본다.
+- [x] 의미있는 단위의 함수를 모아 별도의 파일로 분리해본다.
+
+### 기능 구현 목록
+- [x] 상품 목록 화면 툴바 구성하기
+- [x] 성퓸 목록 mock data list 구성하기
+- [x] 상품 목록 리스트 item 뷰 구성하기
+- [x] 상품 목록 리스트 화면에 구현하기
+
+
 ## Step1
 
 ### 기능 요구 사항
@@ -15,4 +39,4 @@
 - [x] 상품 목록 화면 툴바 구성하기
 - [x] 성퓸 목록 mock data list 구성하기
 - [x] 상품 목록 리스트 item 뷰 구성하기 
-- [x] 상품 목록 리스트 화면에 구현하기 
+- [x] 상품 목록 리스트 화면에 구현하기 

app/build.gradle.kts

@@ -51,6 +51,8 @@ android {
 }
 
 dependencies {
+    val nav_version = "2.7.7"
+    implementation("androidx.navigation:navigation-compose:$nav_version")
     implementation("androidx.core:core-ktx:1.12.0")
     implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.7.0")
     implementation("androidx.activity:activity-compose:1.8.2")

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

@@ -4,13 +4,6 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
 import nextstep.shoppingcart.ui.theme.ShoppingCartTheme
 
 class MainActivity : ComponentActivity() {
@@ -19,7 +12,7 @@ class MainActivity : ComponentActivity() {
         enableEdgeToEdge()
         setContent {
             ShoppingCartTheme {
-                ShoppingCartScreen()
+                MainScreen()
             }
         }
     }

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

@@ -0,0 +1,79 @@
+package nextstep.shoppingcart
+
+import androidx.compose.animation.EnterTransition
+import androidx.compose.animation.ExitTransition
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.rememberNavController
+import nextstep.shoppingcart.enums.ScreenRouteType
+import nextstep.shoppingcart.navigation.navigateToProductDetail
+import nextstep.shoppingcart.navigation.navigateToShoppingCart
+import nextstep.shoppingcart.navigation.productDetailScreen
+import nextstep.shoppingcart.navigation.productListScreen
+import nextstep.shoppingcart.navigation.shoppingCartScreen
+import nextstep.shoppingcart.ui.theme.ShoppingCartTheme
+
+
+/**
+ * Create Date: 2024. 9. 2.
+ *
+ * 장바구니 앱 - 화면 이동 처리를 위한 메인 화면
+ * navhost 구성
+ * @author LeeDongHun
+ *
+ *
+ **/
+@Composable
+fun MainScreen(
+    modifier: Modifier = Modifier,
+) {
+    val navHostController = rememberNavController()
+    NavHost(
+        modifier = modifier.padding(0.dp),
+        navController = navHostController,
+        startDestination = ScreenRouteType.SHOPPING_ITEM_LIST.navRoute,
+        enterTransition = { EnterTransition.None },
+        exitTransition = { ExitTransition.None }
+    ) {
+        // 상품 리스트 화면
+        productListScreen(
+            onShoppingCartIconClicked = {
+                navHostController.navigateToShoppingCart()
+            },
+            onProductItemClicked = { clickedProductId ->
+                navHostController.navigateToProductDetail(productId = clickedProductId)
+            }
+        )
+        // 상품 상세 화면
+        productDetailScreen(
+            addCartButtonClicked = {
+                navHostController.navigateToShoppingCart()
+            },
+            toolbarBackBtnClicked = {
+                navHostController.popBackStack()
+            }
+        )
+        // 쇼핑카트 화면
+        shoppingCartScreen(
+            toolbarBackBtnClicked = {
+                navHostController.popBackStack()
+            }
+        )
+    }
+}
+
+/**
+ * MainScreen 프리뷰 함수
+ */
+@Preview
+@Composable
+fun MainScreenPreview() {
+    ShoppingCartTheme {
+        MainScreen()
+    }
+}
+

app/src/main/java/nextstep/shoppingcart/component/button/AddCartButton.kt

@@ -0,0 +1,62 @@
+package nextstep.shoppingcart.component.button
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import nextstep.shoppingcart.R
+import nextstep.shoppingcart.ui.theme.Blue50
+import nextstep.shoppingcart.ui.theme.ShoppingCartTheme
+
+/**
+ * Create Date: 2024. 9. 15.
+ *
+ * 장바구니 담기 버튼
+ * @author LeeDongHun
+ *
+ *
+ **/
+@Composable
+fun AddCartButton(
+    modifier: Modifier = Modifier,
+    addCartButtonClicked: () -> Unit = {}
+) {
+    Button(
+        colors = ButtonDefaults.buttonColors(Blue50),
+        modifier = modifier
+            .height(54.dp)
+            .fillMaxWidth(),
+        shape = RectangleShape,
+        onClick = {
+            addCartButtonClicked()
+        }, content = {
+            Text(
+                text = stringResource(id = R.string.add_cart),
+                color = Color.White,
+                fontWeight = FontWeight.Bold,
+                fontSize = 20.sp,
+            )
+        }
+    )
+}
+
+/**
+ * AddCartButton 프리뷰 함수
+**/
+@Preview
+@Composable
+fun AddCartButtonPreview() {
+    ShoppingCartTheme {
+        AddCartButton()
+    }
+}

app/src/main/java/nextstep/shoppingcart/component/image/ProductImage.kt

@@ -0,0 +1,53 @@
+package nextstep.shoppingcart.component.image
+
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.tooling.preview.Preview
+import coil.compose.AsyncImage
+
+/**
+ * Create Date: 2024. 9. 16.
+ *
+ * 상품 이미지는  리스트 화면이랑, 상세 화면에서 사용되므로 component화 시킴
+ * @author LeeDongHun
+ *
+ *
+**/
+@Composable
+fun ProductImage(
+    productThumbnail:String,
+    imageRatio:ProductImageRatioType = ProductImageRatioType.SHOPPING_ITEM_THUMBNAIL_RATIO
+){
+    AsyncImage(
+        modifier = Modifier.aspectRatio(imageRatio.ratio),
+        contentScale = ContentScale.Crop,
+        model = productThumbnail,
+        contentDescription = "상품 썸네일 이미지",
+    )
+}
+
+/**
+ * 상품 이미지 비율 타입
+ */
+enum class ProductImageRatioType(val ratio:Float) {
+    SHOPPING_ITEM_THUMBNAIL_RATIO(0.98f / 1f),
+    SHOPPING_ITEM_DETAIL_RATIO(1f)
+}
+
+
+/**
+ * ProductImage 프리뷰 함수
+ **/
+@Preview(
+    showBackground = true,
+    backgroundColor = 0xFFFFFFFFL
+)
+@Composable
+fun ProductImagePreview() {
+    ProductImage(
+        productThumbnail = "https://picsum.photos/200/300",
+        imageRatio = ProductImageRatioType.SHOPPING_ITEM_DETAIL_RATIO,
+    )
+}

app/src/main/java/nextstep/shoppingcart/component/product/ProductItem.kt

@@ -1,49 +1,45 @@
 package nextstep.shoppingcart.component.product
 
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 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
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import coil.compose.AsyncImage
+import nextstep.shoppingcart.component.image.ProductImage
+import nextstep.shoppingcart.component.image.ProductImageRatioType
 import nextstep.shoppingcart.ui.theme.ShoppingCartTheme
 import nextstep.shoppingcart.util.getLocalCurrencyFormat
 import java.util.Locale
 
-/**
- * 쇼핑카트 상품목록 상품 아이템 이미지 비율
- */
-const val SHOPPING_ITEM_THUMBNAIL_RATIO = 0.98f / 1f
 
 /**
  * 쇼핑카트 상품목록 상품 아이템
  **/
 @Composable
-fun ShoppingItem(
+fun ProductItem(
     modifier: Modifier = Modifier,
     productThumbnail:String,
     productTitle: String,
     productPrice: Long,
+    onItemClick: () -> Unit = {},
 ) {
     Column(
-        modifier = modifier
+        modifier = modifier.clickable {
+            onItemClick()
+        },
     ) {
-        AsyncImage(
-            contentScale = ContentScale.Crop,
-            modifier = Modifier
-                .aspectRatio(SHOPPING_ITEM_THUMBNAIL_RATIO),
-            model = productThumbnail,
-            contentDescription = "상품 이미지",
+        ProductImage(
+            productThumbnail = productThumbnail,
+            imageRatio = ProductImageRatioType.SHOPPING_ITEM_THUMBNAIL_RATIO,
         )
         Text(
             modifier = Modifier.padding(start = 5.dp),
@@ -73,9 +69,9 @@ fun ShoppingItem(
     backgroundColor = 0xFFFFFFFFL
 )
 @Composable
-fun ShoppingItemPreview() {
+fun ProductItemPreview() {
     ShoppingCartTheme {
-        ShoppingItem(
+        ProductItem(
             modifier = Modifier
                 .wrapContentWidth()
                 .wrapContentHeight(),
@@ -84,4 +80,4 @@ fun ShoppingItemPreview() {
             productPrice = 100000,
         )
     }
-}
+}

app/src/main/java/nextstep/shoppingcart/component/product/ProductList.kt

@@ -38,11 +38,14 @@ fun ProductList(
             items = productList,
             key = { item -> item.id }
         ) { item ->
-            ShoppingItem(
+            ProductItem(
                 modifier = Modifier.padding(5.dp),
                 productThumbnail = item.productThumbnail,
                 productTitle = item.productTitle,
-                productPrice = item.productPrice
+                productPrice = item.productPrice,
+                onItemClick = {
+                    onItemClick(item)
+                }
             )
         }
     }
@@ -65,4 +68,4 @@ fun ProductListPreview() {
         productList = shoppingItemMockList,
         onItemClick = {}
     )
-}
+}