Skip to content

Commit

Permalink
[Fix] 프로필 생성 페이지 QA 작업 (#113)
Browse files Browse the repository at this point in the history 
* [refactor] : 에러캡션 Ui에 아이콘 파라미터로 받게끔 변경

* [fix] : 지하철 칩 UI 수정

* [fix] : 드롭다운 메뉴 높이 수정

* [fix] : FunchDropDownMenu PopUp 제거 및 UX 개선

* [chore] : reformat

* [fix] : 프로필 생성시 토스트 메시지 추가

* [fix] : 지하철 텍스트 필드 포커스시 최하단으로 스크롤
  • Loading branch information
@ham2174
ham2174 authored Feb 27, 2024
1 parent d183286 commit 928d27d
Show file tree
Hide file tree
Showing 4 changed files with 228 additions and 160 deletions.
31 changes: 23 additions & 8 deletions core/designsystem/src/main/java/com/moya/funch/ui/FunchCaption.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,15 @@ import com.moya.funch.theme.Coral500
import com.moya.funch.theme.FunchTheme

@Composable
fun FunchErrorCaption(modifier: Modifier = Modifier, errorText: String, description: String = "") {
fun FunchErrorCaption(modifier: Modifier = Modifier, errorText: String, errorIcon: @Composable (() -> Unit)? = null) {
Row(
modifier = modifier,
verticalAlignment = Alignment.CenterVertically
) {
Icon(
painter = painterResource(id = FunchIconAsset.Etc.information_24),
contentDescription = description,
tint = Coral500
)
Spacer(modifier = Modifier.width(4.dp))
if (errorIcon != null) {
errorIcon()
Spacer(modifier = Modifier.width(4.dp))
}
Text(
text = errorText,
color = Coral500,
Expand All @@ -37,9 +35,26 @@ fun FunchErrorCaption(modifier: Modifier = Modifier, errorText: String, descript

// ============================== Preview =================================

@Preview("Error Caption", showBackground = true, backgroundColor = 0xFF2C2C2C)
@Preview("Error Caption With Icon", showBackground = true, backgroundColor = 0xFF2C2C2C)
@Composable
private fun Preview1() {
FunchTheme {
FunchErrorCaption(
errorIcon = {
Icon(
painter = painterResource(id = FunchIconAsset.Etc.information_24),
tint = Coral500,
contentDescription = null
)
},
errorText = "errorText"
)
}
}

@Preview("Only Text Error Caption", showBackground = true, backgroundColor = 0xFF2C2C2C)
@Composable
private fun Preview2() {
FunchTheme {
FunchErrorCaption(
errorText = "errorText"
Expand Down
160 changes: 85 additions & 75 deletions core/designsystem/src/main/java/com/moya/funch/ui/FunchDropDown.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,14 @@ import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.absoluteOffset
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Divider
import androidx.compose.material3.Icon
import androidx.compose.material3.Surface
Expand All @@ -32,15 +34,13 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.layout.boundsInWindow
import androidx.compose.ui.layout.boundsInRoot
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Popup
import com.moya.funch.icon.FunchIconAsset
import com.moya.funch.modifier.ScrollBarConfig
import com.moya.funch.modifier.verticalScrollWithScrollbar
Expand All @@ -50,7 +50,6 @@ import com.moya.funch.theme.Gray500
import com.moya.funch.theme.Gray800
import com.moya.funch.theme.LocalBackgroundTheme
import com.moya.funch.theme.White
import kotlin.math.roundToInt

@Composable
fun FunchDropDownButton(
Expand Down Expand Up @@ -116,59 +115,46 @@ fun FunchDropDownButton(

@Composable
fun FunchDropDownMenu(
modifier: Modifier = Modifier,
items: List<String>,
buttonBounds: Rect,
onItemSelected: (String) -> Unit,
scrollState: ScrollState = rememberScrollState()
modifier: Modifier = Modifier,
scrollState: ScrollState = rememberScrollState(),
onItemSelected: (String) -> Unit
) {
Popup(
alignment = Alignment.TopStart,
offset = IntOffset(
x = 0,
y = with(LocalDensity.current) {
(buttonBounds.height).toInt() + 8.dp.toPx().roundToInt()
}
)
) {
Column(
modifier = modifier
.width(with(LocalDensity.current) { buttonBounds.width.toDp() })
.height(144.dp)
.background(
color = Gray800,
shape = FunchTheme.shapes.medium
)
.clip(FunchTheme.shapes.medium)
.verticalScrollWithScrollbar(
state = scrollState,
scrollbarConfig = ScrollBarConfig(
indicatorHeight = 39.dp,
indicatorThickness = 4.dp,
indicatorColor = Gray300,
padding = PaddingValues(
top = 16.dp,
bottom = 16.dp,
end = 4.dp
)
Column(
modifier = modifier
.background(
color = Gray800,
shape = FunchTheme.shapes.medium
)
.clip(FunchTheme.shapes.medium)
.verticalScrollWithScrollbar(
state = scrollState,
scrollbarConfig = ScrollBarConfig(
indicatorHeight = 39.dp,
indicatorThickness = 4.dp,
indicatorColor = Gray300,
padding = PaddingValues(
top = 16.dp,
bottom = 16.dp,
end = 4.dp
)
)
) {
items.forEachIndexed { index, option ->
val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()
FunchDropDownItem(
option = option,
onItemSelected = { onItemSelected(option) },
isPressed = isPressed,
interactionSource = interactionSource
)
) {
items.forEachIndexed { index, option ->
val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()
FunchDropDownItem(
option = option,
onItemSelected = { onItemSelected(option) },
isPressed = isPressed,
interactionSource = interactionSource
)
if (index < items.lastIndex) {
Divider(
color = Gray500,
thickness = 0.5f.dp
)
if (index < items.lastIndex) {
Divider(
color = Gray500,
thickness = 0.5f.dp
)
}
}
}
}
Expand Down Expand Up @@ -219,47 +205,71 @@ private fun Preview1() {
modifier = Modifier.fillMaxSize(),
color = backgroundColor
) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
) {
val bloodTypes = listOf("A형", "B형", "O형", "AB형")
var placeHolder by remember { mutableStateOf(bloodTypes[0]) }
var isDropDownMenuExpanded by remember { mutableStateOf(true) }
val buttonBounds = remember { mutableStateOf(Rect.Zero) }
val bloodTypes = listOf("A형", "B형", "O형", "AB형")
var placeHolder by remember { mutableStateOf(bloodTypes[0]) }
var isDropDownMenuExpanded by remember { mutableStateOf(true) }
var buttonBounds by remember { mutableStateOf(Rect.Zero) }
val dropDownMenuHeight = 192.dp

Text(
text = "Hello, World!",
fontSize = 50.sp,
color = White
)
Box {
Box(modifier = Modifier.fillMaxSize()) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
.verticalScroll(rememberScrollState())
) {
Text(
text = "Hello, World!",
fontSize = 50.sp,
color = White
)
Text(
text = "Hello, World!",
fontSize = 50.sp,
color = White
)
Text(
text = "Hello, World!",
fontSize = 50.sp,
color = White
)
FunchDropDownButton(
placeHolder = placeHolder,
onClick = { isDropDownMenuExpanded = !isDropDownMenuExpanded },
isDropDownMenuExpanded = isDropDownMenuExpanded,
indication = null,
modifier = Modifier.onGloballyPositioned { coordinates ->
buttonBounds.value = coordinates.boundsInWindow()
buttonBounds = coordinates.boundsInRoot()
println(buttonBounds.top)
}
)
if (isDropDownMenuExpanded) {
for (i in 0 until 10) {
Text(
text = "Hello, World!",
fontSize = 50.sp,
color = White
)
}
}
if (isDropDownMenuExpanded) {
Box(
modifier = Modifier
.absoluteOffset(
x = with(LocalDensity.current) { buttonBounds.left.toDp() },
y = with(LocalDensity.current) { buttonBounds.top.toDp() - dropDownMenuHeight - 8.dp }
)
.width(with(LocalDensity.current) { buttonBounds.width.toDp() })
.height(dropDownMenuHeight)
) {
FunchDropDownMenu(
items = bloodTypes,
buttonBounds = buttonBounds.value,
onItemSelected = { text ->
placeHolder = text
isDropDownMenuExpanded = false
}
)
}
}
Text(
text = "Hello, World!",
fontSize = 50.sp,
color = White
)
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions feature/profile/src/main/java/com/moya/funch/CreatePofileViewModel.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ data class CreateProfileUiState(
)

internal sealed class CreateProfileEvent {
data object NavigateToHome : CreateProfileEvent()
data class NavigateToHome(val message: String) : CreateProfileEvent()
data class ShowError(val message: String) : CreateProfileEvent()
}

Expand Down Expand Up @@ -165,7 +165,7 @@ internal class CreateProfileViewModel @Inject constructor(
)
)
createUserProfileUseCase(profile).onSuccess {
_event.emit(CreateProfileEvent.NavigateToHome)
_event.emit(CreateProfileEvent.NavigateToHome("프로필을 생성했어요"))
}.onFailure {
_uiState.update { currentState -> currentState.copy(isLoading = false) }
_event.emit(CreateProfileEvent.ShowError(it.message ?: "Error"))
Expand Down
Loading

0 comments on commit 928d27d

Please sign in to comment.