신문규 Skyler.Shin, 강진호 Eddy.Kang, 이호용 Yong.E 카카오페이 Copyright 2022. Kakao Corp. All rights reserved. Redistribution or public display is not permitted without written permission from Kakao. if(kakao)2022 : DI, 모듈화, UI를 중심으로 카카오페이 앱 리빌딩 스토리
카카오페이 앱 DI 구현 상황 - Koin 라이브러리 사용 - 쉽게 사용이 가능한 factory, single 함수 사용 빈도가 잦음 - 올바른 scope로 객체가 생성 되었는지 알 수 없음 // 호출할 때마다 객체를 새로 생성 factory { PayPaymentOfflineLocalDataSource() } // 앱 내에 하나의 객체만 생성 single { PayPaymentOfflineLocalDataSource() }
- Custom scope인 경우 hilt의 미리 정의된 scope와 맞출지 판단 필요 - Navigation graph scope로 문제 해결 // parent fragment scope val viewModel: PayOfflineViewModel by navGraphViewModels(R.id.payment_offline_graph) // child fragment val parentsViewModel: PayOfflineViewModel by viewModels({requireParentFragment()}) Hilt 도입의 어려운 점
화면과 화면 사이 연결하기 - Navigator를 활용해 feature간 activity 실행 정리 - Dependency graph 최적화 과정 필요 :feature¶payment¶presentation :domain :data :core :design§system :feature¶money¶presentation
화면과 화면 사이 연결하기 - Navigator를 활용해 feature간 activity 실행 정리 - Dependency graph 최적화 과정 필요 :feature¶payment¶presentation :domain :data :core :design§system :feature¶money¶presentation
화면과 화면 사이 연결하기 - Navigator를 활용해 feature간 activity 실행 정리 - Dependency graph 최적화 과정 필요 :feature¶payment¶presentation :domain :data :core :design§system :feature¶money¶presentation
화면과 화면 사이 연결하기 - Navigator를 활용해 feature간 activity 실행 정리 - Dependency graph 최적화 과정 필요 :feature¶payment¶presentation :domain :data :core :design§system :feature¶money¶presentation
화면과 화면 사이 연결하기 - Navigator를 활용해 feature간 activity 실행 정리 - Dependency graph 최적화 과정 필요 :feature¶payment¶presentation :domain :data :core :design§system :feature¶money¶presentation
화면과 화면 사이 연결하기 - Navigator를 활용해 feature간 activity 실행 정리 - Dependency graph 최적화 과정 필요 :feature¶payment¶presentation :domain :data :core :design§system :feature¶money¶presentation
화면과 화면 사이 연결하기 - Navigator를 활용해 feature간 activity 실행 정리 - Dependency graph 최적화 과정 필요 :feature¶payment¶presentation :domain :data :core :design§system :feature¶money¶presentation
Navigator로 Feature 사이 연결 - Activity 실행 기능 - Fragment 실행 기능 - Scheme 실행 기능 // Activity 실행 navigator.start(this@PayHomeFragment, Direction.NotificationFeed) // Scheme 실행 openSchemeList.collect { navigator.start(activity = this, directionsList = it) }
android:id="@+id/btn_success" style="@style/Widget.MaterialComponents.Button.UnelevatedButton" android:layout_width="0dp" android:layout_height="52dp" android:background="@android:color/transparent" android:insetLeft="0dp" android:insetTop="0dp" android:insetRight="0dp" android:insetBottom="0dp" android:minWidth="0dp" android:minHeight="0dp" android:padding="0dp" android:text="@string/pay_ok" android:textAppearance="@style/PayApp.Text.Medium.Bold" android:textColor="@color/pay_grey800_daynight" app:backgroundTint="@color/pay_grey200_daynight" app:backgroundTintMode="src_atop" app:cornerRadius="0dp" app:rippleColor="@color/pay_grey300_daynight" /> Case1. 디자인 시스템 도입 전 버튼 활용 예시 필요에 따라 일부 Style 및 attribute로 작성
- Color - Size - Typography android:id="@+id/btn_success" style="@style/Widget.MaterialComponents.Button.UnelevatedButton" android:layout_width="0dp" android:layout_height="52dp" android:background="@android:color/transparent" android:insetLeft="0dp" android:insetTop="0dp" android:insetRight="0dp" android:insetBottom="0dp" android:minWidth="0dp" android:minHeight="0dp" android:padding="0dp" android:text="@string/pay_ok" android:textAppearance="@style/PayApp.Text.Medium.Bold" android:textColor="@color/pay_grey800_daynight" app:backgroundTint="@color/pay_grey200_daynight" app:backgroundTintMode="src_atop" app:cornerRadius="0dp" app:rippleColor="@color/pay_grey300_daynight" /> Case1. 디자인 시스템 도입 전 버튼 활용 예시 필요에 따라 일부 Style 및 attribute로 작성
CustomView + Style으로 간단하게 구현 가능 Case1. 디자인 시스템 도입 전 버튼 활용 예시 android:id="@+id/btn_success" android:layout_width="match_parent" android:layout_height="52dp" android:text="@string/pay_ok" style="@style/Widget.Fit.FitButton.Primary" />
기존 방식의 한계점 - Background 색상이 달라지면, System Bar 색상도 변경해주어야 함 - 휴먼 에러 발생 확률이 높음 / / StatusBar 색상 변경 setStatusBarColor(R.color.Red) / / NavigationBar 색상 변경 setNavigationBarColor(R.color.Red)