[TnT-85] 1차 컴포넌트 구현 #14
Conversation
- TextButton, IconButton, BottomButton - ButtonUtils에서 버튼 설정 관리
| enum class ButtonSize { | ||
| XLarge, | ||
| Large, | ||
| Medium, | ||
| Small, | ||
| XSmall, | ||
| } |
There was a problem hiding this comment.
요기 있는 클래스들 모두 패키징이 필요해보입니다!
component > button > model 로 패키징하는거 어떨까요?
| ) | ||
|
|
||
| @Composable | ||
| fun getButtonConfig(size: ButtonSize, variant: ButtonType, enabled: Boolean): ButtonConfig { |
There was a problem hiding this comment.
ButtonConfig 를 따로 분리하신 이유가 있으실까요?
제 생각에 height, contentPadding 과 같은 필드들은 ButtonSize 에서,
color, stroke 와 같은 필드들은 ButtonType 내의 프로퍼티 혹은 메소드로 분리할 수 있을 것처럼 보여요!
| size: ButtonSize = ButtonSize.Medium, | ||
| type: ButtonType = ButtonType.Primary, | ||
| text: String, | ||
| enabled: Boolean = true, | ||
| onClick: () -> Unit, | ||
| modifier: Modifier = Modifier, |
There was a problem hiding this comment.
컴포즈에서는 권장되는 파라미터 순서가 있어요!
일반적으로 필수 파라미터 (text)는 가장 최상위에, 옵셔널한 파라미터는 그 하위에 작성하도록 권장하고 있습니다!
그 중에서도, modifier 는 옵셔널한 파라미터 중 최상단에 위치하기를 권장하고 있어요!
| Column( | ||
| modifier = Modifier.fillMaxSize(), | ||
| verticalArrangement = Arrangement.Top, | ||
| horizontalAlignment = Alignment.CenterHorizontally, | ||
| ) { | ||
| Text( | ||
| text = text, | ||
| style = TnTTheme.typography.h4, | ||
| ) | ||
| } |
There was a problem hiding this comment.
| Column( | |
| modifier = Modifier.fillMaxSize(), | |
| verticalArrangement = Arrangement.Top, | |
| horizontalAlignment = Alignment.CenterHorizontally, | |
| ) { | |
| Text( | |
| text = text, | |
| style = TnTTheme.typography.h4, | |
| ) | |
| } | |
| Text( | |
| text = text, | |
| style = TnTTheme.typography.h4, | |
| modifier = Modifier.align(Alignment.Top) | |
| ) |
Column 안감싸고 Text 로만 하위 컴포저블 구현 가능할 것 같아요 !_!
| isSingleLine: Boolean = false, | ||
| showWarning: Boolean = false, | ||
| warningMessage: String? = null, | ||
| rightComponent: @Composable () -> Unit = {}, |
There was a problem hiding this comment.
우리 버튼 포지션에서 Trailing, Leading 이라는 표현을 썼으니까 요기서도 적용해봐요!
| enabled = enabled, | ||
| colors = config.colors, | ||
| shape = RoundedCornerShape(config.cornerRadius), | ||
| border = BorderStroke(width = config.stroke, color = config.borderColor), |
There was a problem hiding this comment.
| border = BorderStroke(width = config.stroke, color = config.borderColor), | |
| border = BorderStroke( | |
| width = config.stroke, | |
| color = config.borderColor, | |
| ), |
취향차이긴 한데 파라미터 두 개이상인 경우 개행해주는거 어떨까요 ?.?
|
|
||
| @Preview(showBackground = true, heightDp = 100) | ||
| @Composable | ||
| fun TnTTextFieldPreview() { |
There was a problem hiding this comment.
모든 프리뷰 컴포저블 함수는 private 하게 선언해주세요!
| @Composable | ||
| fun TnTTextField( | ||
| value: String, | ||
| placeholder: String, |
There was a problem hiding this comment.
placeHolder 도 nullable 한 타입으로 선언해주는건 어떨까요?
필요하지 않은 경우도 있을 것 같아서요!
| .padding(end = 8.dp), | ||
| ) { | ||
| if (value.isEmpty()) { | ||
| Text( |
There was a problem hiding this comment.
오호 이렇게 구현하는 것도 괜찮기는 한데, BasicTextField 내 decorationBox 활용하면, PlaceHolder 구현 가능해요!
| // back button | ||
| @Preview(showBackground = true) | ||
| @Composable | ||
| fun TnTTopBarPreview1() { |
There was a problem hiding this comment.
1, 2, 3 숫자 대신 좀 더 의미있는 함수명을 작성해봅시당!
TnTTopBarOnlyBackButtonPreview 와 같은 이름은 어때요? ㅎㅎ
📝 작업 내용
1차로 확정된 컴포넌트들을 구현했습니다.
Button은
ButtonUtils의 getButtonConfig를 통해Size(XLarge, Large, Medium, ...) 와Type(Primary, Gray, GrayOutline, RedOutline), enabled에 맞는 설정을 넘겨받습니다.TopBar는
뒤로가기만,뒤로가기 + 제목,뒤로가기 + 제목 + component의 3가지 옵션이 있습니다.TextField는 입력란과 right component, 에러문구를 보여주는
TnTTextField와 제목과 counter까지 보여주는TnTLabeledTextField로 구현했습니다.추가로 기존 Typo와 Color를 추가 및 수정했습니다.
📸 실행 화면
🙆🏻 리뷰 요청 사항
없습니다
👀 레퍼런스
버튼 최소 크기 수정
TextField 커스텀