[UI, FEAT] 메뉴 선택하기 / 검색 기본 화면 구성, CustomTextField, 공통 하단부 버튼 제작 #14 #15
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
casper-jr
changed the title
ikseong00
approved these changes
Jan 11, 2025
Comment on lines
+37
to
+72
| /** | ||
| * @param modifier modifier를 통해 전체 컴포넌트의 크기, border 등을 설정한다. | ||
| * modifier에서 정의한 border는 배경이 아닌 외부 테두리 선에만 영향을 준다 | ||
| * | ||
| * @param visualTransformation 입력된 텍스트의 값은 유지하면서, 화면에 보여지는 방식을 변경시킬 때 사용하는 파라미터이다. | ||
| * 예를 들어서 비밀번호 입력 필드로 사용한다면, | ||
| * PasswordVisualTransformation()을 인자로 주어 실제 값 대신 마스킹 된 값을 보여주도록 설정할 수 있다. | ||
| * VisualTransformation을 직접 정의하여 커스텀할 수도 있다. (숫자에서 3자리 단위로 , 를 찍는 것과 같은 포맷팅 등) | ||
| * | ||
| * @param enabled 텍스트 필드의 활성화 여부를 나타내는 파라미터이고, true인 경우에는 입력이 가능하다 | ||
| * | ||
| * @param singleLine 입력된 텍스트를 한 줄로만 표시할지의 여부를 나타낸다. 기본값은 true | ||
| * | ||
| * @param shape 배경, 내부영역을 포함한 컴포넌트의 전체적인 모양 처리 | ||
| * ex) RoundedCornerShape(8.dp) 등 | ||
| * | ||
| * @param trailingIcon 컴포넌트의 우측 끝에 위치하게 할 Icon 객체를 lambda를 통해 넘겨준다 | ||
| * | ||
| * @param leadingIcon 컴포넌트의 왼쪽 끝에 위치하게 할 Icon 객체를 lambda를 통해 넘겨준다 | ||
| * | ||
| * @param placeHolder placeholder로 사용할 Text 객체를 lambda를 통해 넘겨준다 | ||
| * | ||
| * @param textStyle 입력한 텍스트를 보여줄 스타일에 대한 TextStyle 객체를 통해 정의한다 | ||
| * | ||
| * @param paddingValues 컴포넌트의 텍스트 부분에 대한 padding 값을 PaddingValues 객체를 통해 정의한다 | ||
| * | ||
| * @param containerColor 컴포넌트의 색상을 Color 객체를 통해 지정한다 | ||
| * 기본 값으로는 focused, unfocused에 대한 값을 동일하게 Color.White로 지정 | ||
| * | ||
| * @param cursorColor 커서에 대한 색상을 Color 객체를 통해 지정한다 | ||
| * 기본 값으로는 Color.Black으로 지정 | ||
| * | ||
| * @param keyboardOptions 키보드에 대한 설정을 KeyboardOptions를 통해 지정한다 | ||
| * | ||
| * @param keyboardActions 키보드에서 특정 버튼을 눌렀을 때의 작업을 keyboardActions를 통해 지정한다 | ||
| */ |
There was a problem hiding this comment.
주석 단건 아주 좋습니다. 추가로 파라미터에 대한 설명도 좋지만, 이 커스텀 텍스트 필드를 어떻게 사용하는지와 컴포넌트에 대한 주석이 상단에 달리면, 추후에 이 컴포넌트를 사용할 때 사용하기 편할 것 같아요
There was a problem hiding this comment.
간략한 설명 추가해서 이후 pr에 반영해두겠습니다
Comment on lines
+23
to
+28
| fun BottomHalfWidthButton( | ||
| onClick: () -> Unit, | ||
| containerColor: Color, | ||
| contentColor: Color, | ||
| text: String | ||
| ) { |
There was a problem hiding this comment.
파라미터에 람다식이 하나만 존재하고, Slot Api 로 콘텐트를 넘겨주지 않는 컴포저블이면은 람다식을 가장 마지막 파라미터로 넘겨서 BottomHalfWidthButton(Color(0xFFC2C2C4). Color.White, "취소") { } 이런식으로 람다 표현식의 특징을 살려서 사용할 수 있게 하면 좋을 것 같아요.
There was a problem hiding this comment.
아래의 코드까지 파라미터 수정 사항 반영해두겠습니다
Comment on lines
+22
to
+33
| fun BottomFullWidthButton(onClick: () -> Unit, containerColor: Color, contentColor: Color, text: String) { | ||
| Button( | ||
| onClick = onClick, | ||
| modifier = Modifier | ||
| .fillMaxWidth() | ||
| .size(320.dp, 52.dp) | ||
| .shadow(elevation = 4.dp, shape = RoundedCornerShape(12.dp)), | ||
| shape = RoundedCornerShape(12.dp), | ||
| colors = ButtonDefaults.buttonColors( | ||
| containerColor = containerColor, | ||
| contentColor = contentColor | ||
| ), |
There was a problem hiding this comment.
마찬가지로 onClick 을 마지막 파라미터로 설정
| AddMenuBottomSheetContent() | ||
| }, | ||
| //조건 만족하면 bottom sheet 보여주고, 아니면 화면에 안보이도록 처리 | ||
| sheetPeekHeight = if (showBottomSheet) 100.dp else 0.dp, |
There was a problem hiding this comment.
디자인 상에서는 260정도가 되어보이는데 여기가 100 dp 가 맞을까요 ??
There was a problem hiding this comment.
초반에 작성해두고 확인을 못한 것 같네요. 수정사항 반영해두겠습니다!
Nico1eKim
approved these changes
Jan 11, 2025
Comment on lines
+21
to
+42
| fun AddMenuTopAppBar(topAppbarText : @Composable (() -> Unit)) { | ||
| TopAppBar( | ||
| title = { | ||
| topAppbarText() | ||
| }, | ||
| navigationIcon = { | ||
| IconButton(onClick = { TODO("뒤로가기 구현") }) { | ||
| Icon( | ||
| painter = painterResource(R.drawable.ic_top_bar_back), | ||
| contentDescription = "Back" | ||
| ) | ||
| } | ||
| }, | ||
| modifier = Modifier | ||
| .drawBehind { | ||
| drawRect( | ||
| color = Color.Black | ||
| ) | ||
| } | ||
| .shadow(elevation = 4.dp) | ||
| ) | ||
| } |
There was a problem hiding this comment.
탑바 공통으로 안빼고 이렇게 각 파일에서 만들기로했었나요? (진짜 기억 안나서 물어보는것 ..)
There was a problem hiding this comment.
따로 정하지는 않았던 것 같은데 우선 작업한 화면에서는 공통으로 묶어둔거라 공통으로 뺄지 정해서 수정하면 될 것 같습니다
Comment on lines
+37
to
+38
| Text(text = "아워떡볶이", fontSize = 16.sp, fontWeight = FontWeight.Bold) | ||
| Text(text = "서울 광진구 능동로 112", fontSize = 14.sp, color = Color.Gray) |
There was a problem hiding this comment.
더미데이터라도 이렇게 자주 쓰일만한 text값은 리소스로 빼면 좋을거같아욧 ~
There was a problem hiding this comment.
그리고 늦어져서 죄송 .... 하지만 제가 곧 폰트랑 컬러 올릴거라 설정 다 바꿔야할수도 .... 늦어서 고멘 ...
|
|
||
| @Composable | ||
| fun SelectMenuItem(isSelected: Boolean = false) { | ||
| HorizontalDivider( |
There was a problem hiding this comment.
호옹 그동안 그냥 divider만 사용했었는데 HorizontalDivider로 따로 쓸수있는건 몰랐네요 꿀팁 알아갑니다 ~
There was a problem hiding this comment.
Divider가 deprecated 되고 HorizontalDivider로 바뀐 것 같아요
| Text(text = "메뉴 이름", fontSize = 16.sp, fontWeight = FontWeight.Bold) | ||
| Text(text = "14,000원", fontSize = 14.sp, color = Color.Gray) | ||
| } | ||
| if(isSelected){ |
There was a problem hiding this comment.
이런거 신경써서 자동정렬되게 해주면 좋을거같아요 ~ 아래 else문도 마찬가지 ~
Comment on lines
+37
to
+72
| /** | ||
| * @param modifier modifier를 통해 전체 컴포넌트의 크기, border 등을 설정한다. | ||
| * modifier에서 정의한 border는 배경이 아닌 외부 테두리 선에만 영향을 준다 | ||
| * | ||
| * @param visualTransformation 입력된 텍스트의 값은 유지하면서, 화면에 보여지는 방식을 변경시킬 때 사용하는 파라미터이다. | ||
| * 예를 들어서 비밀번호 입력 필드로 사용한다면, | ||
| * PasswordVisualTransformation()을 인자로 주어 실제 값 대신 마스킹 된 값을 보여주도록 설정할 수 있다. | ||
| * VisualTransformation을 직접 정의하여 커스텀할 수도 있다. (숫자에서 3자리 단위로 , 를 찍는 것과 같은 포맷팅 등) | ||
| * | ||
| * @param enabled 텍스트 필드의 활성화 여부를 나타내는 파라미터이고, true인 경우에는 입력이 가능하다 | ||
| * | ||
| * @param singleLine 입력된 텍스트를 한 줄로만 표시할지의 여부를 나타낸다. 기본값은 true | ||
| * | ||
| * @param shape 배경, 내부영역을 포함한 컴포넌트의 전체적인 모양 처리 | ||
| * ex) RoundedCornerShape(8.dp) 등 | ||
| * | ||
| * @param trailingIcon 컴포넌트의 우측 끝에 위치하게 할 Icon 객체를 lambda를 통해 넘겨준다 | ||
| * | ||
| * @param leadingIcon 컴포넌트의 왼쪽 끝에 위치하게 할 Icon 객체를 lambda를 통해 넘겨준다 | ||
| * | ||
| * @param placeHolder placeholder로 사용할 Text 객체를 lambda를 통해 넘겨준다 | ||
| * | ||
| * @param textStyle 입력한 텍스트를 보여줄 스타일에 대한 TextStyle 객체를 통해 정의한다 | ||
| * | ||
| * @param paddingValues 컴포넌트의 텍스트 부분에 대한 padding 값을 PaddingValues 객체를 통해 정의한다 | ||
| * | ||
| * @param containerColor 컴포넌트의 색상을 Color 객체를 통해 지정한다 | ||
| * 기본 값으로는 focused, unfocused에 대한 값을 동일하게 Color.White로 지정 | ||
| * | ||
| * @param cursorColor 커서에 대한 색상을 Color 객체를 통해 지정한다 | ||
| * 기본 값으로는 Color.Black으로 지정 | ||
| * | ||
| * @param keyboardOptions 키보드에 대한 설정을 KeyboardOptions를 통해 지정한다 | ||
| * | ||
| * @param keyboardActions 키보드에서 특정 버튼을 눌렀을 때의 작업을 keyboardActions를 통해 지정한다 | ||
| */ |
casper-jr
changed the title
ikseong00
changed the title
ikseong00
pushed a commit
that referenced
this pull request
Feb 12, 2025
[ui, feat] 메뉴 선택하기 / 검색 기본 화면 구성, CustomTextField, 공통 하단부 버튼 제작
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🚀 이슈번호
✏️ 변경사항
📷 스크린샷
AddMenuSearchScreen
BottomFullWidthButton
BottomHalfWidthButton
✍️ 사용법
CustomTextField (공통 컴포넌트)
BottomFullWidthButton, BottomHalfWidthButton (공통 컴포넌트)
🎸 기타