New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🚀 1단계 - 장바구니(상품 목록) #79

Open

DoTheBestMayB wants to merge 17 commits into next-step:dothebestmayb from DoTheBestMayB:step1

DoTheBestMayB commented Feb 13, 2025 •

edited

Loading

고민한 내용과 이렇게 구현한 이유

장바구니에 담긴 아이템 개수를 상품 목록 리스트에서 어떻게 state로 관리할지 고민하기 위한 조건으로, 장바구니 아이콘을 BadgeBox로 구현했습니다. 장바구니에 담긴 아이템의 개수를 숫자로 표시하고자 합니다.
dynamic Color를 false로 설정하지 않으면 배경색이 흰색으로 변경되지 않아 false로 설정했습니다. dynamic color를 고려해 색상을 적용하는 것이 구현 요구사항은 아니므로, 단순히 false로 설정해도 충분할까요?
멀티 모듈을 사용하는 repository를 보면 designsystem 모듈이 있던데, designsystem으로 composable을 구분하는 기준을 배우고자 패키지를 추가했습니다.
preview에서도 이미지를 보여주도록 설정했습니다.
참고자료 : https://www.youtube.com/watch?v=NKtMQd9Izcw
실제 앱에서는 아이템 목록을 불러올텐데, dummy 데이터를 불러오도록 설정했습니다. 또한 ViewModel이 없기 때문에 최상위 Composable LaunchedEffect에서 초기데이터를 불러오도록 설정했습니다.
각각의 Composable에서 개별적인 Scaffold를 가지도록 하기 위해 MainActivity가 아닌 Composable 내부에 선언했습니다. 이렇게 하면 공통으로 둘 때보다 유연성이 더 좋다는 말에 공감이 됐습니다.

wisemuji and others added 17 commits

February 13, 2025 09:08


          build: upgrade to android gradle plugin 8.5.2 and apply Compose Gradl…

50284b0

…e Plugin


          docs: 구현 기능 목록 구현

7494c78


          feat: Scaffold를 이용해 전체 UI 틀 구현하기

ea61182


          style: Color Theme 정의하기


          build: Coil 의존성 추가

c0c75b7


          feat: 상품 Composable 구현

e7da8b3


          style: dynamic color false로 설정

2b04976


          style: top app bar 배경색을 흰색으로 변경

ebebc95


          chore: TopAppBar padding 수정

df58412


          feat: LazyVerticalGrid를 이용해 상품 표시

7f2b557


          feat: 상품 목록 Dummy 데이터 불러오는 로직 추가

8b7a3c2


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

7916d85


          feat: enableEdgeToEdge 적용하기

ed5d3cf


          feat: floatingActionButton 설정하기

8405c2f


          chore: footer 여백 설정

ce52951


          refactor: Product composable 피그마와 동일하게 수정

96111ad


          chore: ProductListScreen에서만 사용하는 TopBar composable에 private 접근자 붙이기

06c58ed

sjjeong requested changes

View reviewed changes

sjjeong left a comment

종성님 안녕하세요! 장바구니 미션 동안 잘 부탁드립니다!
장바구니 미션 1단계를 잘 구현해주셔서 코멘트 드릴게 많이 없네요!
저의 궁금증과 의견을 몇가지 남겨드립니다 ㅎㅎ

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

+                              .padding(top = 8.dp, start = 4.dp)
+                      )
+                      Text(
+                          text = stringResource(R.string.product_price_format, priceFormat.format(product.price)),

sjjeong Feb 14, 2025

10000 이라는 int를 10,000원 이라고 변경하기 위해서 NumberFormat 을 사용하셨네요!

저는 이렇게 간단하게 변경하는 거라면 Int -> String -> String으로 변환하기 보다 string resource에 선언할 때 한번에 formatting 되도록 해볼 것 같아요

제 방식이 정답은 아니지만 이렇게 하는 방법도 있다 정도로 이해해주시면 좋을 것 같습니다
string format 관련해서 검색하시면 자료가 많이 있을꺼라서 참고해보고 반영해보시는 것도 좋을 것 같아요~

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

+                  // viewModel이 없으므로 여기서 아이템 목록을 가져온다.
+                  LaunchedEffect(true) {
+                      state = state.copy(isLoading = true)

sjjeong Feb 14, 2025

ProductListState의 isLoading이 기본값이 true 인데 LauncedEffect 내부에서 true로 초기화 해주시는 이유가 있는지 궁금합니다

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

+                  }
+                  // viewModel이 없으므로 여기서 아이템 목록을 가져온다.
+                  LaunchedEffect(true) {

sjjeong Feb 14, 2025

저는 보통 1회성으로 할 때 Unit을 사용하는 편인데 true인 Boolean값을 넣어주신 이유가 궁금해요

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

Comment on lines +65 to +70

+                  if (!state.isLoading) {
+                      ProductListScreen(
+                          state = state,
+                          modifier = modifier,
+                      )
+                  }

sjjeong Feb 14, 2025

isLoading이 true일 때 케이스도 있으면 더 좋을 것 같은데 어떻게 생각하시나요?

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

Comment on lines +91 to +107

+                          if (showScrollToTopButton) {
+                              FloatingActionButton(
+                                  modifier = Modifier
+                                      .padding(bottom = 16.dp, end = 16.dp),
+                                  onClick = {
+                                      scope.launch {
+                                          lazyState.animateScrollToItem(0)
+                                      }
+                                  },
+                                  containerColor = MaterialTheme.colorScheme.primary
+                              ) {
+                                  Icon(
+                                      imageVector = Icons.Default.KeyboardArrowUp,
+                                      contentDescription = null,
+                                  )
+                              }
+                          }

sjjeong Feb 14, 2025

단순히 if로 visible처리 하는 것 보다 AnimatedVisibility라는 것을 쓰면 더 자연스럽게 만들어 볼 수 있을 것 같아요!

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

Comment on lines +122 to +129

+                          // footer 여백
+                          item {
+                              Box(
+                                  modifier = Modifier
+                                      .fillMaxWidth()
+                                      .height(100.dp)
+                              )
+                          }

sjjeong Feb 14, 2025

스크룰 맨 마지막에 여백을 주고 싶은 거라면 LazyVerticalGrid 파라미터에 contentPadding을 넣어줘도 될 것 같아요! 혹시 다른 의도가 있다면 말씀해주세요~

sjjeong commented Feb 14, 2025

dynamic Color를 false로 설정하지 않으면 배경색이 흰색으로 변경되지 않아 false로 설정했습니다. dynamic color를 고려해 색상을 적용하는 것이 구현 요구사항은 아니므로, 단순히 false로 설정해도 충분할까요?
넵 이번 미션에서 dynamic color는 중요한 사항이 아니기 때문에 신경쓰지 않으셔도 됩니다 ㅎㅎ

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet