[UI, FEAT] 메뉴 선택하기 / 검색 기본 화면 구성, CustomTextField, 공통 하단부 버튼 제작 #14 by casper-jr · Pull Request #15 · OurMenu/OurMenu-Android-V2

casper-jr · 2025-01-08T18:09:47Z

🚀 이슈번호

[UI] add menu 중 shop select에 해당하는 화면 ui 구현 #14

✏️ 변경사항

Figma 상의 Android Large - 105에 해당하는 화면의 지도를 제외한 기본 레이아웃 (검색바, Bottom Sheet) 구현
Figma 상의 Android Large - 177에 해당하는 화면을 Bottom Sheet의 내용으로 추가 (버튼 배치는 상의 후 작성할 예정)
Figma 상의 Android Large - 119, 133, 134, 104에 해당하는 화면 구현
위의 177, 173에 해당하는 메뉴에 대한 항목 하나를 나타내는 SelectMenuItem 구현 (isSelected 인자로 버튼 변경 가능)
이후에 TextField 대신 공통으로 사용할 수 있는 CustomTextField를 제작
dummy data로 피자 사진 추가
topappbar에서 사용할 뒤로가기 아이콘(ic_top_bar_back.xml) 추가 (공용 아이콘)
검색바의 돋보기 아이콘(ic_searchbar_search.xml) 추가 (공용 아이콘)
SelectMenuItem의 버튼에 사용할 아이콘(ic_btn_check_white.xml, ic_btn_plus_orange.xml) 추가
식당 주소에 사용할 마커 아이콘(ic_location_info.xml) 추가 (공용 아이콘)
공통으로 사용할 하단 버튼 두 종류 작성 (각각 전체 너비, 전체 너비의 반을 차지하는 버튼)

📷 스크린샷

AddMenuScreen

SelectMenuItem

AddMenuBottomSheet

AddMenuSearchScreen

BottomFullWidthButton

BottomHalfWidthButton

✍️ 사용법

CustomTextField (공통 컴포넌트)

안드로이드에서 제공해주는 TextField 컴포저블의 경우 내부 padding 값을 따로 지정할 수가 없어서 현재 디자인의 텍스트를 입력하는 컴포넌트에 대해서 크기를 지정하면 폰트가 깨지던가 하는 문제를 발견해서 CustomTextField 라는 컴포저블을 따로 제작하였습니다.
해당 컴포넌트의 parameter에 대한 설명도 써놓았으니 읽어보고 이후에 TextField의 세부 값들을 지정해서 사용해야 될 때 잘 사용하면 좋을 것 같습니다.
이게 시간을 너무 잡아먹었는데 그래도 쓸만하게 나온거 같아서 잘 써주세요 궁금한거 있으면 알려드립니다

BottomFullWidthButton, BottomHalfWidthButton (공통 컴포넌트)

화면 하단에 위치할 버튼 두 종류를 제작하였습니다.
BottomFullWidthButton은 화면 너비 전체를 차지하는 버튼이고, BottomHalfWidthButton은 버튼 두 개를 화면 하단에 배치할 때 사용할 버튼입니다. 상위 컴포저블에서 패딩 값 지정하여 사용하면 너비를 조정할 수 있습니다.
두 컴포넌트 모두 인자로는 onClick에 해당하는 함수, 버튼 배경색(container color), 텍스트 색상(contentColor), 버튼의 텍스트인 text 를 사용합니다.

🎸 기타

초기 작업이라 코드 추가된게 많아서 작성한거 preview는 다 만들어놨고, 아마 코드 받아서 preview로 슥슥 보는게 더 빠를 수도 있어요

ikseong00

좋씁니다

ikseong00 · 2025-01-11T03:37:15Z

app/src/main/java/com/kuit/ourmenu/ui/common/CustomTextField.kt

+/**
+ * @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를 통해 지정한다
+ */


주석 단건 아주 좋습니다. 추가로 파라미터에 대한 설명도 좋지만, 이 커스텀 텍스트 필드를 어떻게 사용하는지와 컴포넌트에 대한 주석이 상단에 달리면, 추후에 이 컴포넌트를 사용할 때 사용하기 편할 것 같아요

대뮛 ~ 작성하느라 고생했습니다 🫡

간략한 설명 추가해서 이후 pr에 반영해두겠습니다

ikseong00 · 2025-01-11T03:41:54Z

app/src/main/java/com/kuit/ourmenu/ui/common/BottomHalfWidthButton.kt

+fun BottomHalfWidthButton(
+    onClick: () -> Unit,
+    containerColor: Color,
+    contentColor: Color,
+    text: String
+) {


파라미터에 람다식이 하나만 존재하고, Slot Api 로 콘텐트를 넘겨주지 않는 컴포저블이면은 람다식을 가장 마지막 파라미터로 넘겨서 BottomHalfWidthButton(Color(0xFFC2C2C4). Color.White, "취소") { } 이런식으로 람다 표현식의 특징을 살려서 사용할 수 있게 하면 좋을 것 같아요.

아래의 코드까지 파라미터 수정 사항 반영해두겠습니다

ikseong00 · 2025-01-11T03:42:24Z

app/src/main/java/com/kuit/ourmenu/ui/common/BottomFullWidthButton.kt

+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
+        ),


마찬가지로 onClick 을 마지막 파라미터로 설정

ikseong00 · 2025-01-11T04:03:33Z

app/src/main/java/com/kuit/ourmenu/ui/addmenu/screen/AddMenuScreen.kt

+            AddMenuBottomSheetContent()
+        },
+        //조건 만족하면 bottom sheet 보여주고, 아니면 화면에 안보이도록 처리
+        sheetPeekHeight = if (showBottomSheet) 100.dp else 0.dp,


디자인 상에서는 260정도가 되어보이는데 여기가 100 dp 가 맞을까요 ??

초반에 작성해두고 확인을 못한 것 같네요. 수정사항 반영해두겠습니다!

Nico1eKim

올려준 화면 이미지 보니까 AddMenuScreen에서 검색바의 그림자가 잘못된거같은데 확인 부탁드립니당 ~ 💪

Nico1eKim · 2025-01-11T13:00:16Z

app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/AddMenuTopAppBar.kt

+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)
+    )
+}


탑바 공통으로 안빼고 이렇게 각 파일에서 만들기로했었나요? (진짜 기억 안나서 물어보는것 ..)

따로 정하지는 않았던 것 같은데 우선 작업한 화면에서는 공통으로 묶어둔거라 공통으로 뺄지 정해서 수정하면 될 것 같습니다

Nico1eKim · 2025-01-11T13:00:52Z

app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/RestaurantSearchItem.kt

+            Text(text = "아워떡볶이", fontSize = 16.sp, fontWeight = FontWeight.Bold)
+            Text(text = "서울 광진구 능동로 112", fontSize = 14.sp, color = Color.Gray)


더미데이터라도 이렇게 자주 쓰일만한 text값은 리소스로 빼면 좋을거같아욧 ~

그리고 늦어져서 죄송 .... 하지만 제가 곧 폰트랑 컬러 올릴거라 설정 다 바꿔야할수도 .... 늦어서 고멘 ...

Nico1eKim · 2025-01-11T13:01:59Z

app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/SelectMenuItem.kt

+
+@Composable
+fun SelectMenuItem(isSelected: Boolean = false) {
+    HorizontalDivider(


호옹 그동안 그냥 divider만 사용했었는데 HorizontalDivider로 따로 쓸수있는건 몰랐네요 꿀팁 알아갑니다 ~

Divider가 deprecated 되고 HorizontalDivider로 바뀐 것 같아요

Nico1eKim · 2025-01-11T13:02:24Z

app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/SelectMenuItem.kt

+            Text(text = "메뉴 이름", fontSize = 16.sp, fontWeight = FontWeight.Bold)
+            Text(text = "14,000원", fontSize = 14.sp, color = Color.Gray)
+        }
+        if(isSelected){


이런거 신경써서 자동정렬되게 해주면 좋을거같아요 ~ 아래 else문도 마찬가지 ~

Nico1eKim · 2025-01-11T13:06:23Z

app/src/main/java/com/kuit/ourmenu/ui/common/CustomTextField.kt

+/**
+ * @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를 통해 지정한다
+ */


대뮛 ~ 작성하느라 고생했습니다 🫡

[ui, feat] 메뉴 선택하기 / 검색 기본 화면 구성, CustomTextField, 공통 하단부 버튼 제작

casper-jr added 8 commits January 8, 2025 17:10

[ui]: 기본 composable, preview 생성(OurMenu#14)

60c9a76

[ui]: 검색바 ui 구현, 크기는 추후 조정(OurMenu#14)

42950ad

[ui]: 메뉴 선택하기 화면 ui 구성, 메뉴 항목 아이템 추가(OurMenu#14)

87718ef

[ui]: 커스텀 bottomsheet handle 생성(OurMenu#14)

574805c

[ui]: CustomTextField 제작(OurMenu#14)

f0e82c4

[refactor]:기존의 SearchBar에 CustomTextField 적용(OurMenu#14)

06b7ece

[feat]: CustomTextField에 키보드 옵션 추가(OurMenu#14)

bac438e

[fix]: AddMenuScreen에 SearchBar 변경 반영

edaef0e

casper-jr added ✨ feat Good for newcomers 🎨 ui This will not be worked on labels Jan 8, 2025

casper-jr requested review from Nico1eKim and ikseong00 January 8, 2025 18:09

casper-jr self-assigned this Jan 8, 2025

casper-jr added 5 commits January 9, 2025 21:07

[ui]: 식당 검색 결과 item 추가(OurMenu#14)

0358ab7

[ui]: AddMenu에서 사용할 TopAppBar 컴포넌트 분리

0613acb

[ui]: AddMenu - Search화면 구현(OurMenu#14)

4e6fdc2

[ui]: 하단 전체 너비를 차지하는 공통 버튼 구현

8f9bc05

[ui]: 하단 전체 너비의 반을 차지하는 공통 버튼 구현

f7018ad

casper-jr changed the title ~~[ui, feat] 메뉴 선택하기 기본 화면 구성, CustomTextField 제작~~ [ui, feat] 메뉴 선택하기 / 검색 기본 화면 구성, CustomTextField, 공통 하단부 버튼 제작 Jan 11, 2025

[refactor]: AddMenuSearchScreen의 topappbar 공통 컴포넌트로 수정(OurMenu#14)

532dd7b

ikseong00 approved these changes Jan 11, 2025

View reviewed changes

Nico1eKim approved these changes Jan 11, 2025

View reviewed changes

Nico1eKim merged commit 59f4285 into OurMenu:develop Jan 11, 2025
1 check passed

Nico1eKim added the 🦦재우 label Jan 13, 2025

Nico1eKim assigned casper-jr and unassigned casper-jr Jan 13, 2025

casper-jr changed the title ~~[ui, feat] 메뉴 선택하기 / 검색 기본 화면 구성, CustomTextField, 공통 하단부 버튼 제작~~ [UI, FEAT] 메뉴 선택하기 / 검색 기본 화면 구성, CustomTextField, 공통 하단부 버튼 제작 Jan 27, 2025

ikseong00 changed the title ~~[UI, FEAT] 메뉴 선택하기 / 검색 기본 화면 구성, CustomTextField, 공통 하단부 버튼 제작~~ [UI, FEAT] 메뉴 선택하기 / 검색 기본 화면 구성, CustomTextField, 공통 하단부 버튼 제작 #14 Feb 3, 2025

ikseong00 pushed a commit that referenced this pull request Feb 12, 2025

Merge pull request #15 from casper-jr/ui/addmenu

ea80a3c

[ui, feat] 메뉴 선택하기 / 검색 기본 화면 구성, CustomTextField, 공통 하단부 버튼 제작

		Text(text = "아워떡볶이", fontSize = 16.sp, fontWeight = FontWeight.Bold)
		Text(text = "서울 광진구 능동로 112", fontSize = 14.sp, color = Color.Gray)

Conversation

casper-jr commented Jan 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 이슈번호

✏️ 변경사항

📷 스크린샷

✍️ 사용법

🎸 기타

Uh oh!

ikseong00 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Nico1eKim left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

casper-jr commented Jan 8, 2025 •

edited

Loading