Component, Screen Preview 구성 #153
Conversation
androidx-compose-ui-tooling 의존성 추가, Preview 정상 동작 테스트 완료
LoadingScreen -> LoadingIndicator, Loading 은 화면이 아니라 컴포넌트임
CompleteScreenPreview 정상 동작 확인
preview 지원이 원할하도록, uiState 를 전달 받는 것이 아닌, uiState 내에 필요한 파라미터만을 전달 받는 방식으로 변경, bandalartBottomSheet 의 경우 viewModel 이 생성자 parameter 에 포함되어 있어 preview 지원 불가능
preview 를 지원하기 위해 viewModel 이 포함된 composable 과 포함되지 않는 composable 로 분리, DummyBandalartCellData 추가
easyhooon
added
feature
|
|
||
| import androidx.compose.ui.tooling.preview.Preview | ||
|
|
||
| @Preview(showBackground = true) |
There was a problem hiding this comment.
색상을 따로 지정해주지 않으면, 뒷 배경이 아무 색이 없는 상태인건가?
There was a problem hiding this comment.
https://alexzh.com/jetpack-compose-preview/
default backgroundColor 로 지정해줘
|
|
||
| @Composable | ||
| fun LoadingScreen( | ||
| fun LoadingIndicator( |
There was a problem hiding this comment.
회사에 들어간다면 이런 네이밍도 지적 당하기 좋았을 듯 좀 더 생각하고 이름도 짜야겠어..
| letterSpacing = (-0.32).sp, | ||
| lineHeight = 21.sp, | ||
| ) | ||
| } | ||
|
|
There was a problem hiding this comment.
아니 ㅋㅋ 근데 프리뷰 관심 없어 보이더니, 어떤 원인으로 갑자기 추가 된게야
There was a problem hiding this comment.
다른 프로젝트하면서 프리뷰를 적용해봤는데 장점이 많더라고 ㅇㅇ
일단 빌드를 할 필요 없이 화면의 변경사항을 확인해볼 수 있는거랑(새로고침을 눌러줘야 하는 건 불편)
preview 를 그려볼 수 있다는 것 자체가, 그 화면을 제법 나쁘지 않게 그렸다는 의미이기도하고(viewModel 이 해당 컴포저블 내에 parameter 로 포함되어있지 않고, 어느정도 stateless 하며 stable 하다는 의미)
그리고 UiTest 를 어느정도 대신 할 수 있다는 점도(interactive mode) 장점 인듯! 예전보다 성능도 좋아졌구 ㅇㅇ
composable 함수들 관련한 권장사항들, Api guideline 을 지키는 방향으로 리팩토링 했던 것도 프리뷰를 그릴 수 있고, test 작성에 용이하도록 의 목적이 있으니까, 프리뷰나 test 작성을 해야 리팩토링을 한 목적을 이룰 수 있다고 생각했어
|
|
||
| import androidx.compose.ui.tooling.preview.Preview | ||
|
|
||
| @Preview( |
There was a problem hiding this comment.
이렇게 디바이스를 두개를 설정해놓으면 어떤 식으로 볼 수 있게 되는거야? 탭이 이렇게 생기는 건가? 둘 다 볼 수 있는?
There was a problem hiding this comment.
이렇게 디바이스를 두개를 설정해놓으면 어떤 식으로 볼 수 있게 되는거야? 탭이 이렇게 생기는 건가? 둘 다 볼 수 있는?
branch checkout 해서 확인해보면 알 수 있긴 한데 이렇게 각각의 기기에서 동일한 화면에 대해 어떻게 그려지는지 확인해볼 수 있음!
생각해보니까 두 기기가 크게 유의미하게 다르진 않은데 그냥 같은 기기에 대해 세로모드, 가로모드 이렇게 만들어놓는게 더 낫긴하겠다., 아니면 하나는 핸드폰 하나는 태블릿 이런식으로
디바이스 사이즈 알아와서 그것도 나중에 추가해봐야겄어
| } | ||
| } | ||
|
|
||
| BandalartBottomSheetContent( |
There was a problem hiding this comment.
어우 이거 떼내는거 머리 좀 지끈 거렸을 듯 ㄷㄷ
| import kotlinx.coroutines.flow.asStateFlow | ||
| import kotlinx.coroutines.launch | ||
| import timber.log.Timber | ||
|
|
There was a problem hiding this comment.
아 이거 말하려 했는데, 선수 채였구만,, 허헣
ㄱㅅㄱㅅ 형도 새복많~ |
https://youtu.be/bhrN7yFG0D4?si=1eeCqT9GkM5Dgg5M 어려워보이던데 화이팅 ㄱㄱ혓! 일단은 이 PR 이랑 이 위에 PR 만 merge 한 후에 한번 update 쳐 보자구, 변경사항이 많아서 버그가 있을수도있겠구만 |
custom composable 정의한 파라미터 순서에 맞게 사용되는 곳에 파라미터 순서를 변경
-> uiState 를 하위 컴포저블에 그대로 전달하지 않고, 하위 컴포저블에서 사용하는 uiState.parameter 만을 전달
-> Composable 의 생성자 파라미터에 viewModel 이 포함된 경우, preview 를 구성하는데 어려움이 있으므로, viewModel 이 존재하는 composable과 viewModel 이 존재하지 않는 컴포저블로 분리(BandalartBottomSheet 컴포저블 참고)
P.S ModalBottomSheet 의 경우 preview 화면에서 화면이 제대로 보이지 않는 문제가 발생하는데 emulator 혹은, 실기기로 preview 를 확인해보면 정상적으로 확인 가능함, 또는 interactive mode 로 확인