feat: 7주차 미션_제로#53
Conversation
kimdoyeon1234
left a comment
kimdoyeon1234
left a comment
There was a problem hiding this comment.
수고하셨습니다!
NavController + NavHost 구조를 올바르게 이해하고 사용한 점, CartScreen에서 onOrderClick을 람다로 받아서 Events Flow Up 패턴을 잘 적용한 점 좋았어요
다만 이번 미션의 핵심인 Type-safe Navigation이 아직 적용되지 않았어요!
현재 "home", "shop" 같은 문자열로 Route를 관리하고 있는데, @serializable + data object 방식으로 바꿔주세요 :)
// 현재
sealed class BottomNavItem(val screenRoute: String)
composable(BottomNavItem.Home.screenRoute) { ... }
->
@Serializable sealed interface Screen {
@Serializable data object Home : Screen
...
}
composable<Screen.Home> { HomeScreen() }
그리고 현재 Screens.kt 하나에 모든 화면이 들어있어요!
화면마다 파일을 분리해주시면 더 좋을 것 같아요 :)
Type-safe Navigation만 적용해주시면 완성도가 훨씬 올라갈 거예요! 화이팅 !
| object Home : BottomNavItem("홈", R.drawable.ic_housesimple, "home") | ||
| object Shop : BottomNavItem("구매하기", R.drawable.ic_listmagnifyingglass, "shop") | ||
| object Wishlist : BottomNavItem("위시리스트", R.drawable.ic_heartstraight, "wishlist") | ||
| object Cart : BottomNavItem("장바구니", R.drawable.ic_bagsimple, "cart") | ||
| object Profile : BottomNavItem("프로필", R.drawable.ic_user, "profile") |
There was a problem hiding this comment.
문자열 기반 Route("home", "shop" ...)를 사용하고 있어요!
이번 미션의 핵심인 Type-safe Navigation으로 바꿔주세요 :)
@serializable
sealed interface Screen {
@serializable data object Home : Screen
@serializable data object Shop : Screen
...
}
| composable(BottomNavItem.Home.screenRoute) { | ||
| HomeScreen() | ||
| } |
There was a problem hiding this comment.
문자열로 composable을 등록하고 있어요!
Type-safe Navigation 적용 시 아래처럼 바꿔는것도 좋을거 같습니다!
composable<Screen.Home> { HomeScreen() }
There was a problem hiding this comment.
HomeScreen, ShopScreen, WishlistScreen, CartScreen, ProfileScreen이 Screens.kt 하나에 모두 들어있어요!
화면마다 파일을 분리해주세요 :)
ui/home/HomeScreen.kt
ui/shop/ShopScreen.kt
ui/wishlist/WishlistScreen.kt
ui/cart/CartScreen.kt
ui/profile/ProfileScreen.kt
| } | ||
|
|
||
| @Composable | ||
| fun ShopScreen() { |
There was a problem hiding this comment.
나중에 해야 하는 건지는 모르겠지만, 상단탭을 미리 구현해보는 것도 좋을 것 같아요!
|
|
||
| fun fetchUserProfile(userId: Int) { | ||
| viewModelScope.launch { | ||
| try { |
There was a problem hiding this comment.
try-catch 구조를 사용해서 예외상황에 날 수 있는 에러까지 잡을 수 있는 구조를 만든것이 좋은 것 같습니다
4 participants
📌 feat: 7주차 미션_제로
🔗 관련 이슈
Closes #48
✨ 변경 사항
기존 XML 기반의 UI 구조를 Compose로 마이그레이션하고, Figma에 맞춘 UI와 내비게이션 로직을 구축했습니다.
주요 구현 사항
1. 기본 UI 및 하단 탭 내비게이션 구조 구축
Scaffold 기반 앱 구조 설계
BottomBar 구현 (NavigationBar 사용)
0px -4px 20px 0px #00000008)를 drawBehind기반으로 구현했습니다.BottomNavItem 기반 구조 설계
2. 화면 UI 구현 (Screens.kt)
Figma 디자인 기반으로 각 화면 UI를 Compose로 구현했습니다.
홈 화면
구매하기 화면
위시리스트 화면
장바구니 화면
프로필 화면
3. Navigation 구조 및 화면 전환 로직
navigation-compose 기반 NavHost환경을 구축하여 5개 주요 화면을 연결했습니다.
장바구니 → 구매하기 이동 기능 구현
하단 탭 상태 동기화 처리
옵션을 활용하여 화면 상태와 탭 선택 상태를 일관되게 유지했습니다.
4. 디자인 디테일 및 환경 설정
적용 파일
app/src/main/java/com/example/week7/MainActivity.kt
app/src/main/java/com/example/week7/ui/BottomNavItem.kt
app/src/main/java/com/example/week7/ui/Screens.kt
🔍 테스트
📸 스크린샷 (선택)
🚨 추가 이슈