Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Fix] 프로필 생성 페이지 QA 작업 #113

Merged
merged 7 commits into from
Feb 27, 2024
Merged

[Fix] 프로필 생성 페이지 QA 작업 #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
41527fe
[refactor] : 에러캡션 Ui에 아이콘 파라미터로 받게끔 변경
ham2174 Feb 26, 2024
49d3dac
[fix] : 지하철 칩 UI 수정
ham2174 Feb 26, 2024
63b4099
[fix] : 드롭다운 메뉴 높이 수정
ham2174 Feb 26, 2024
b306bea
[fix] : FunchDropDownMenu PopUp 제거 및 UX 개선
ham2174 Feb 26, 2024
0d5440e
[chore] : reformat
ham2174 Feb 26, 2024
b9405a6
[fix] : 프로필 생성시 토스트 메시지 추가
ham2174 Feb 26, 2024
930aa06
[fix] : 지하철 텍스트 필드 포커스시 최하단으로 스크롤
ham2174 Feb 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 23 additions & 8 deletions core/designsystem/src/main/java/com/moya/funch/ui/FunchCaption.kt
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading