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

DoTheBestMayB · 2025-03-05T18:15:16Z

면접 준비로 인해 구현이 늦어진 점 양해 부탁드립니다. 🙇‍♂️

구현 내용 및 고민

🛒 1. 장바구니 담긴 정보 관리 방식 개선

변경 사항: 장바구니에 담긴 아이템 목록과 상품 목록을 별도로 관리하지 않고, 하나의 State로 통합하여 관리하도록 변경하였습니다.
변경 이유:
- 장바구니에 담긴 아이템 목록와 상품 목록을 별도의 리스트로 관리하면, 상품 목록에서 해당 상품이 장바구니에 담겼는지 확인하려면 이중 for문을 사용해야 합니다.
- 이를 줄이기 위해 단일 State로 관리하는 방식으로 변경하였습니다.
고민 사항:
- 현재 장바구니에 담긴 아이템을 찾기 위해 filter 연산을 매번 수행하고 있어 성능상 비효율적입니다.
- 이를 개선할 수 있는 적절한 자료구조에 대한 힌트를 얻고 싶습니다. 🙏

🔄 2. 담긴 수량 변경의 책임

장바구니 내 상품의 수량 변경은 비즈니스 로직으로 판단하여,
Repository가 아닌 Presentation Layer에서 처리하도록 수정하였습니다.
현재 ViewModel이 없어서 람다 블록에서 직접 변경하도록 구현하였습니다.

🔍 3. 아이템 Fetch 최적화

아이템을 불러오는 fetch 요청이 최초 한 번만 호출되도록 개선하였습니다.

🏷 4. Parcelable body의 property 관련 질문

Parcelable body의 property가 state를 가져도 괜찮을까요?
→ 관련하여 리뷰어님의 의견을 듣고 싶습니다.
🔗 이전 PR

구현 결과

bandicam.2025-03-06.04-18-54-584.mp4

🚀 4단계 계획

테스트 코드 작성 (피드백 후 진행)
- 코드 구조를 변경할 가능성이 있어 피드백을 받은 후 테스트 코드를 작성하려 합니다.
상품 목록 화면 개선
- Tablayout + ViewPager 추가
- 배달의 민족 스타일의 필터 기능 구현 후 피드백 요청
- 관련 논의: 🔗 이전 PR
- 구현 과정에서 공식 문서를 참고하며 왜 그렇게 작성했는지에 대한 고민도 함께 정리할 예정입니다.

리뷰해주셔서 감사합니다! 🙏
의견이나 피드백 주시면 적극 반영하겠습니다. 🚀

DoTheBestMayB · 2025-03-05T18:16:31Z

app/src/main/java/nextstep/shoppingcart/data/datasource/ProductLocalDataSource.kt

+/**
+ * Room과 같은 역할을 한다고 가정하고 작성했습니다.
+ */
+class ProductLocalDataSource {


CartRepository에서 장바구니에 담긴 아이템 정보를 가지고 있던 CartLocalDataSource를 ProductLocalDataSource로 이름을 변경하고 ProdcutRepository로 옮겼습니다.

DoTheBestMayB · 2025-03-05T18:17:31Z

app/src/main/java/nextstep/shoppingcart/data/datasource/ProductLocalDataSource.kt

+    private val _itemsFlow = MutableStateFlow<List<ProductEntity>>(emptyList())
+    val itemsFlow: Flow<List<ProductEntity>> = _itemsFlow.asStateFlow()


일반 Flow로 선언하면 데이터를 변경할 수 없어서 StateFlow로 선언했습니다.
StateFlow 말고 더 좋은 방법이 있는지 궁금합니다.

이 방법 말고 떠오르는게 지금은 없네요 😅

DoTheBestMayB · 2025-03-05T18:19:55Z

app/src/main/java/nextstep/shoppingcart/data/datasource/ProductLocalDataSource.kt

+    fun update(product: ProductEntity) {
+        _itemsFlow.update { items ->
+            items.map {
+                if (it.id == product.id) {
+                    product
+                } else {
+                    it
+                }
+            }
+        }
+    }


add, remove 등의 함수를 삭제하고, 단지 state를 갱신하도록 변경했습니다.

DoTheBestMayB · 2025-03-05T18:20:47Z

app/src/main/java/nextstep/shoppingcart/data/datasource/ProductLocalDataSource.kt

+    fun replaceAll(items: List<ProductEntity>) {
+        _itemsFlow.update { beforeItems ->
+            items.map { item ->
+                item.copy(
+                    cartQuantity = beforeItems.firstOrNull { it.id == item.id }?.cartQuantity ?: 0
+                )
+            }
+        }
+    }


상품 목록 정보를 불러온 후, 이전에 존재하던 아이템은 장바구니에 담긴 수량을 유지하도록 구현했습니다.

DoTheBestMayB · 2025-03-05T18:21:40Z

app/src/main/java/nextstep/shoppingcart/data/datasource/ProductRemoteDataSource.kt

-    suspend fun fetch(): List<ProductEntity> {
+    suspend fun fetch(): List<ProductResponse> {


API로부터 정보를 불러오는 데이터는 XxxResponse로 이름을 변경하고
API로 불러와서 Local에 들고 있는 데이터를 XxxEntity로 명명했습니다.

DoTheBestMayB · 2025-03-05T18:23:17Z

app/src/main/java/nextstep/shoppingcart/ui/basket/BasketScreen.kt

-    // Q. 화면이 파괴되면 Composable도 recomposition에서 제외되므로, Fragment에서 처럼 repeatOnLifecycle 등으로 Lifecycle을 지정하지 않아도 되나요?
    LaunchedEffect(Unit) {


Composable이 Composition에서 벗어나면(화면에 더 이상 보이지 않는 경우), LaunchedEffect의 코루틴도 자동으로 취소된다고 이해했습니다.

DoTheBestMayB · 2025-03-05T18:24:23Z

app/src/main/java/nextstep/shoppingcart/ui/basket/BasketScreen.kt

+        productRepository.products
            .onStart {
                state = state.copy(
                    isInitialLoading = false,
                )
            }
-            .distinctUntilChanged()
+            .map { items ->
+                items.filter {
+                    it.cartQuantity > 0
+                }
+            }
            .collect { items ->
-                state = state.copy(cartItems = items.map { it.toUi() })
+                state = state.copy(products = items.map { it.toUi() })
            }


전체 상품 목록에서 filter를 이용해 장바구니에 담긴 아이템을 선별하는 과정을 없애고 싶은데, 어떻게 설계해야 할지 아이디어가 떠오르지 않았습니다.

filter를 Screen에서 처리하지않고, ProductRepository에서 하면 어떨까요?
productRepository.productInBasket 라는 느낌 어떠신가요?

장바구니 아이템과 상품 아이템을 별도로 관리하도록 수정했습니다.

refactor: 장바구니 아이템을 별도로 관리하도록 수정

DoTheBestMayB · 2025-03-05T18:24:53Z

app/src/main/java/nextstep/shoppingcart/ui/basket/BasketScreen.kt

-        onRemoveCartItemClick = { cartRepository.removeAll(it.product.toEntity()) },
-        onIncreaseQuantityClick = { cartRepository.addOne(it.product.toEntity()) },
-        onDecreaseQuantityClick = { cartRepository.removeOne(it.product.toEntity()) },
+        onRemoveCartItemClick = { productRepository.update(it.copy(cartQuantity = 0).toEntity()) },
+        onIncreaseQuantityClick = {
+            productRepository.update(
+                it.copy(cartQuantity = it.cartQuantity + 1).toEntity()
+            )
+        },
+        onDecreaseQuantityClick = {
+            productRepository.update(
+                it.copy(cartQuantity = it.cartQuantity - 1).toEntity()
+            )
+        },


상품의 상태 변경에 대한 책임을 Data Layer에서 Presentation Layer로 수정했습니다.

좋습니다! 이런 로직은 나중에 ViewModel에서도 할 수 있겠네요!

DoTheBestMayB · 2025-03-05T18:26:47Z

app/src/main/java/nextstep/shoppingcart/ui/designsystem/Product.kt

+            val quantityModifier = if (product.cartQuantity < 1) {
+                Modifier
+                    .align(Alignment.BottomEnd)
+                    .padding(8.dp)
+            } else {
+                Modifier
+                    .align(Alignment.BottomCenter)
+                    .padding(bottom = 8.dp)
            }
-        )
+            quantityHandler(quantityModifier)


Box Layout에서 수량 변경 Composable의 위치를 조정하기 위해 Modifier를 if문으로 조정했습니다.
작성하면서 코드가 어색하다고 느껴지는데, 어떻게 개선하면 좋을지 힌트를 얻고 싶습니다.

두 곳에서 처리하고 있어서 어색하다는 느낌을 받습니다.
컴포넌트 변경 없이 quantity 변경을 위한 ui를 받으려면 전부 외부에 위임하는게 좋고, 만약 ProductListItem의 quantity 변경이 변경될 일이 없으면 내부에서 전체 처리해도 좋다고 생각합니다.

결론적으로 외부에서만 처리하거나, 내부에서만 처리하거나 하면 좋을 것 같아요

quantityModifier는 Box Layout 내부에서 QuantityHandler의 위치를 조절하기 위한 값입니다. 이 modifier를 외부에서 생성하고 전달되는 QuantityHandler Composable에 적용하는 것은 어색하다고 생각했습니다.
외부에서 Box Scope Modifier를 설정한다는 것은 ProductListItem 내부에서 Box Layout을 사용한다는 것을 안다는 것이고, 이것은 결합성 증가를 의미하며, 내부에서 QuantityHandler Composable을 직접 생성 하는 것과 똑같기 때문입니다.

그래서 외부에서 전달하던 quantityHandler Composable을 내부에서 생성하도록 수정했습니다.

refactor: 장바구니에 담긴 아이템 수량에 따라 QuantityHandler UI 내부에서 변경하도록 수정

DoTheBestMayB · 2025-03-05T18:28:38Z

app/src/main/java/nextstep/shoppingcart/ui/product_list/ProductListScreen.kt

+    // 초기 데이터 로딩
+    LaunchedEffect(Unit) {
+        // 초기에만 로딩되도록 조건문 추가
+        // Navigation에 의해 Composition이 파괴되고 다시 생성될 때, 다시 목록을 불러오지 않도록 방지
        if (state.isInitialLoading) {
-            delay(500L)
-            state = state.copy(
-                isLoadingShow = true,
-            )
+            productRepository.fetch()
        }
    }

-    // Unit으로 설정할 경우, configuration change가 발생해도 호출된다.
-    // 따라서 초기로딩이 되지 않은 경우에만 호출되도록 관련 state를 key로 설정
-    LaunchedEffect(state.isInitialLoading) {
-        state = state.copy(
-            products = productRepository.fetch().map { it.toUi() },
-            isInitialLoading = false,
-        )
+    LaunchedEffect(Unit) {
+        productRepository.products
+            .onStart {
+                state = state.copy(
+                    isInitialLoading = false,
+                )
+            }
+            .collect {
+                state = state.copy(
+                    products = it.map { it.toUi() },
+                    selectedItemCount = it.sumOf { it.cartQuantity },
+                )
+            }
+    }


상품 목록 화면에서 데이터를 처음에만 불러오도록 설정했습니다.

이렇게 LaunchedEffect를 여러 개 사용해도 되는지 궁금합니다. 이러한 요구조건에서 더 좋은 코드 패턴이 있나요?

넵 지금은 이렇게 할 수 밖에 없겠네요.
나중에는 ViewModel을 만들어서 해볼 수 있겠어요!

sjjeong

장바구니 담긴 정보 관리 방식

장바구니 관련해서 고민이 많이 되셨을것 같아요.
지금은 더미데이터와 로컬에서만 만드는 데이터로 하다보니 ProductEntity에 모든 정보를 담았는데 만약 서버에서 상품정보와 장바구니 정보가 따로 온다면 어떻게 구현해야할까요? 아니면 서버에서는 상품정보만 내려주고, 장바구니 정보를 로컬에 저장해야한다면 어떻게 해야할까요?
이런 관점으로 봤을 때 상품정보의 source와 장바구니의 source는 분리될 수 있다고 생각해요.

Parcelable body의 property 관련 질문

남겨주신 warning 같은 경우는 단어 그대로 경고일 뿐이고 이 값은 Parcelable 되지 않아도 되는 정보라고 생각합니다. 추천하는 것처럼 @IgnoredOnParcel 를 추가해줘도 될 것 같아요.

테스트코드나 추가 구현사항 주시면 리뷰 더 하도록 할게요!
미션을 이만 마치고 싶다면 바로 리뷰요청 해주세요~

sjjeong · 2025-03-06T02:21:53Z

app/src/main/java/nextstep/shoppingcart/data/datasource/ProductLocalDataSource.kt

+    private val _itemsFlow = MutableStateFlow<List<ProductEntity>>(emptyList())
+    val itemsFlow: Flow<List<ProductEntity>> = _itemsFlow.asStateFlow()


이 방법 말고 떠오르는게 지금은 없네요 😅

sjjeong · 2025-03-06T02:33:49Z

app/src/main/java/nextstep/shoppingcart/ui/basket/BasketScreen.kt

+        productRepository.products
            .onStart {
                state = state.copy(
                    isInitialLoading = false,
                )
            }
-            .distinctUntilChanged()
+            .map { items ->
+                items.filter {
+                    it.cartQuantity > 0
+                }
+            }
            .collect { items ->
-                state = state.copy(cartItems = items.map { it.toUi() })
+                state = state.copy(products = items.map { it.toUi() })
            }


filter를 Screen에서 처리하지않고, ProductRepository에서 하면 어떨까요?
productRepository.productInBasket 라는 느낌 어떠신가요?

sjjeong · 2025-03-06T05:27:09Z

app/src/main/java/nextstep/shoppingcart/ui/basket/BasketScreen.kt

-        onRemoveCartItemClick = { cartRepository.removeAll(it.product.toEntity()) },
-        onIncreaseQuantityClick = { cartRepository.addOne(it.product.toEntity()) },
-        onDecreaseQuantityClick = { cartRepository.removeOne(it.product.toEntity()) },
+        onRemoveCartItemClick = { productRepository.update(it.copy(cartQuantity = 0).toEntity()) },
+        onIncreaseQuantityClick = {
+            productRepository.update(
+                it.copy(cartQuantity = it.cartQuantity + 1).toEntity()
+            )
+        },
+        onDecreaseQuantityClick = {
+            productRepository.update(
+                it.copy(cartQuantity = it.cartQuantity - 1).toEntity()
+            )
+        },


좋습니다! 이런 로직은 나중에 ViewModel에서도 할 수 있겠네요!

sjjeong · 2025-03-06T05:29:45Z

app/src/main/java/nextstep/shoppingcart/ui/product_list/ProductListScreen.kt

+    // 초기 데이터 로딩
+    LaunchedEffect(Unit) {
+        // 초기에만 로딩되도록 조건문 추가
+        // Navigation에 의해 Composition이 파괴되고 다시 생성될 때, 다시 목록을 불러오지 않도록 방지
        if (state.isInitialLoading) {
-            delay(500L)
-            state = state.copy(
-                isLoadingShow = true,
-            )
+            productRepository.fetch()
        }
    }

-    // Unit으로 설정할 경우, configuration change가 발생해도 호출된다.
-    // 따라서 초기로딩이 되지 않은 경우에만 호출되도록 관련 state를 key로 설정
-    LaunchedEffect(state.isInitialLoading) {
-        state = state.copy(
-            products = productRepository.fetch().map { it.toUi() },
-            isInitialLoading = false,
-        )
+    LaunchedEffect(Unit) {
+        productRepository.products
+            .onStart {
+                state = state.copy(
+                    isInitialLoading = false,
+                )
+            }
+            .collect {
+                state = state.copy(
+                    products = it.map { it.toUi() },
+                    selectedItemCount = it.sumOf { it.cartQuantity },
+                )
+            }
+    }


넵 지금은 이렇게 할 수 밖에 없겠네요.
나중에는 ViewModel을 만들어서 해볼 수 있겠어요!

sjjeong · 2025-03-06T05:31:27Z

app/src/main/java/nextstep/shoppingcart/ui/designsystem/Product.kt

-                        contentDescription = null,
-                        tint = Color.Red,
-                    )
+        Box() {


Box()에 파라미터가 없다면 ()를 제거해도 될 것 같아요~

chore: 코드 정렬 및 import 문 정리

sjjeong · 2025-03-06T05:34:58Z

app/src/main/java/nextstep/shoppingcart/ui/designsystem/Product.kt

+            val quantityModifier = if (product.cartQuantity < 1) {
+                Modifier
+                    .align(Alignment.BottomEnd)
+                    .padding(8.dp)
+            } else {
+                Modifier
+                    .align(Alignment.BottomCenter)
+                    .padding(bottom = 8.dp)
            }
-        )
+            quantityHandler(quantityModifier)


두 곳에서 처리하고 있어서 어색하다는 느낌을 받습니다.
컴포넌트 변경 없이 quantity 변경을 위한 ui를 받으려면 전부 외부에 위임하는게 좋고, 만약 ProductListItem의 quantity 변경이 변경될 일이 없으면 내부에서 전체 처리해도 좋다고 생각합니다.

결론적으로 외부에서만 처리하거나, 내부에서만 처리하거나 하면 좋을 것 같아요

DoTheBestMayB · 2025-03-07T08:36:36Z

[작성중]

장바구니 아이템 관리

장바구니에 담긴 아이템을 상품 목록 한 개에서 관리하지 않고, 장바구니에 담긴 아이템을 별도의 LinkedHashMap으로 관리하도록 분리했습니다.
참고 자료 : https://leetcode.com/problems/intersection-of-two-arrays/description/

상품 목록의 각 아이템이 장바구니에 존재하는지 O(1)만에 확인할 수 있도록 장바구니 아이템을 HashMap을 고려했습니다.
장바구니에 담긴 순서대로 아이템을 표시하도록 HashMap 대신 LinkedHasMap을 사용했습니다.

DoTheBestMayB added 8 commits February 25, 2025 08:19

docs: TODO 리스트 작성

629e84c

fix: 장바구니에 아이템을 추가하는 로직 오류 수정

5b0959f

refactor: 장바구니에 담긴 아이템을 ProductRepository에서 관리하도록 수정

f07f842

chore: 사용하지 않는 import 문 삭제 및 코드 정렬

3c62ca3

feat: 장바구니에 담긴 수량 뱃지로 표시하기

23ee0cd

feat: + 만 존재하는 수량 조절 Composable 구현

725c508

feat: 장바구니 수량 조절 UI 구현

0460aa6

chore: 사용하지 않는 import문 삭제 및 코드 정렬

12570fb

DoTheBestMayB commented Mar 5, 2025

View reviewed changes

sjjeong requested changes Mar 6, 2025

View reviewed changes

DoTheBestMayB added 4 commits March 10, 2025 09:25

refactor: 장바구니 아이템을 별도로 관리하도록 수정

c1bded6

chore: 사용하지 않는 함수, import 문 삭제

0fd44a7

refactor: 장바구니에 담긴 아이템 수량에 따라 QuantityHandler UI 내부에서 변경하도록 수정

59ef046

chore: 코드 정렬 및 import 문 정리

b176b37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

DoTheBestMayB commented Mar 5, 2025 •

edited

Loading

DoTheBestMayB Mar 5, 2025

DoTheBestMayB Mar 5, 2025

sjjeong Mar 6, 2025

DoTheBestMayB Mar 5, 2025

DoTheBestMayB Mar 5, 2025

DoTheBestMayB Mar 5, 2025

DoTheBestMayB Mar 5, 2025

DoTheBestMayB Mar 5, 2025

sjjeong Mar 6, 2025

DoTheBestMayB Mar 10, 2025

DoTheBestMayB Mar 5, 2025

sjjeong Mar 6, 2025

DoTheBestMayB Mar 5, 2025

sjjeong Mar 6, 2025

DoTheBestMayB Mar 10, 2025

DoTheBestMayB Mar 5, 2025

sjjeong Mar 6, 2025

sjjeong left a comment

sjjeong Mar 6, 2025

sjjeong Mar 6, 2025

sjjeong Mar 6, 2025

sjjeong Mar 6, 2025

sjjeong Mar 6, 2025

DoTheBestMayB Mar 10, 2025

sjjeong Mar 6, 2025

DoTheBestMayB commented Mar 7, 2025 •

edited

Loading

		private val _itemsFlow = MutableStateFlow<List<ProductEntity>>(emptyList())
		val itemsFlow: Flow<List<ProductEntity>> = _itemsFlow.asStateFlow()

		suspend fun fetch(): List<ProductEntity> {
		suspend fun fetch(): List<ProductResponse> {

		// Q. 화면이 파괴되면 Composable도 recomposition에서 제외되므로, Fragment에서 처럼 repeatOnLifecycle 등으로 Lifecycle을 지정하지 않아도 되나요?
		LaunchedEffect(Unit) {

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

Are you sure you want to change the base?

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

Conversation

DoTheBestMayB commented Mar 5, 2025 • edited Loading

구현 내용 및 고민

🛒 1. 장바구니 담긴 정보 관리 방식 개선

🔄 2. 담긴 수량 변경의 책임

🔍 3. 아이템 Fetch 최적화

🏷 4. Parcelable body의 property 관련 질문

구현 결과

🚀 4단계 계획

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sjjeong left a comment

Choose a reason for hiding this comment

장바구니 담긴 정보 관리 방식

Parcelable body의 property 관련 질문

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DoTheBestMayB commented Mar 7, 2025 • edited Loading

장바구니 아이템 관리

DoTheBestMayB commented Mar 5, 2025 •

edited

Loading

DoTheBestMayB commented Mar 7, 2025 •

edited

Loading