From 7d571c6737f1a9c2d74f6aa1bf5edec187f9cb8f Mon Sep 17 00:00:00 2001 From: kangyein9892 Date: Tue, 26 Nov 2024 13:20:31 +0900 Subject: [PATCH] =?UTF-8?q?feature/#33:=20modal=20view=20component=20Tempe?= =?UTF-8?q?ratureSelection=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modal/component/TemperatureSelection.kt | 193 ++++++++++++++++++ app/src/main/res/values/strings.xml | 3 + 2 files changed, 196 insertions(+) create mode 100644 app/src/main/java/org/techtown/twosomeheart/presentation/detail/modal/component/TemperatureSelection.kt diff --git a/app/src/main/java/org/techtown/twosomeheart/presentation/detail/modal/component/TemperatureSelection.kt b/app/src/main/java/org/techtown/twosomeheart/presentation/detail/modal/component/TemperatureSelection.kt new file mode 100644 index 0000000..3b6d4a3 --- /dev/null +++ b/app/src/main/java/org/techtown/twosomeheart/presentation/detail/modal/component/TemperatureSelection.kt @@ -0,0 +1,193 @@ +package org.techtown.twosomeheart.presentation.detail.modal.component + +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.layout.Arrangement +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.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.offset +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import org.techtown.twosomeheart.R +import org.techtown.twosomeheart.core.extension.noRippleClickable +import org.techtown.twosomeheart.presentation.detail.model.TemperatureType +import org.techtown.twosomeheart.ui.theme.Blue10 +import org.techtown.twosomeheart.ui.theme.Gray30 +import org.techtown.twosomeheart.ui.theme.Gray60 +import org.techtown.twosomeheart.ui.theme.Red40 +import org.techtown.twosomeheart.ui.theme.TwosomeHeartTypography +import org.techtown.twosomeheart.ui.theme.White + +@Composable +fun TemperatureSelection( + onClick: (TemperatureType) -> Unit, + modifier: Modifier = Modifier +) { + val selectedType = remember { mutableStateOf(null) } + + Column( + modifier = modifier + .fillMaxWidth() + .background(White) + .padding(horizontal = 16.dp) + ) { + + Text( + text = stringResource(R.string.menu_detail_modal_temperature_text), + style = TwosomeHeartTypography.body1B14, + ) + + Spacer(modifier = Modifier.height(12.dp)) + + Row( + modifier = Modifier + .fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.Center + ) { + + TemperatureButton( + temperatureType = TemperatureType.HOT, + isSelected = selectedType.value == TemperatureType.HOT, + onClick = { + if (selectedType.value != TemperatureType.HOT) { + selectedType.value = TemperatureType.HOT + onClick(TemperatureType.HOT) + } + }, + modifier = if (selectedType.value == null) { + Modifier.offset(x = 1.dp) + } else { + Modifier + } + ) + + TemperatureButton( + temperatureType = TemperatureType.ICE, + isSelected = selectedType.value == TemperatureType.ICE, + onClick = { + if (selectedType.value != TemperatureType.ICE) { + selectedType.value = TemperatureType.ICE + onClick(TemperatureType.ICE) + } + } + ) + } + } +} + + +@Composable +fun TemperatureButton( + temperatureType: TemperatureType, + isSelected: Boolean, + onClick: () -> Unit, + modifier: Modifier = Modifier +) { + Box( + modifier = modifier + .noRippleClickable { onClick() } + .border( + width = if (isSelected) 0.dp else 1.dp, + color = if (isSelected) Color.Transparent else Gray30, + shape = when (temperatureType) { + TemperatureType.HOT -> RoundedCornerShape( + topStart = 5.dp, + topEnd = 0.dp, + bottomEnd = 0.dp, + bottomStart = 5.dp + ) + TemperatureType.ICE -> RoundedCornerShape( + topStart = 0.dp, + topEnd = 5.dp, + bottomEnd = 5.dp, + bottomStart = 0.dp + ) + } + ) + .background( + color = if (isSelected) { + when (temperatureType) { + TemperatureType.HOT -> Red40 + TemperatureType.ICE -> Blue10 + } + } else { + White + }, + shape = when (temperatureType) { + TemperatureType.HOT -> RoundedCornerShape( + topStart = 5.dp, + topEnd = 0.dp, + bottomEnd = 0.dp, + bottomStart = 5.dp + ) + TemperatureType.ICE -> RoundedCornerShape( + topStart = 0.dp, + topEnd = 5.dp, + bottomEnd = 5.dp, + bottomStart = 0.dp + ) + } + ) + .padding( + when (temperatureType) { + TemperatureType.HOT -> { + PaddingValues( + top = 10.dp, + bottom = 9.dp, + start = 76.dp, + end = 76.dp + ) + } + TemperatureType.ICE -> { + PaddingValues( + top = 10.dp, + bottom = 9.dp, + start = 64.dp, + end = 64.dp + ) + } + } + ), + contentAlignment = Alignment.Center + ) { + Text( + text = temperatureType.type, + color = if (isSelected){ + White + } else { + Gray60 + }, + style = if (isSelected){ + TwosomeHeartTypography.body2B13 + } else { + TwosomeHeartTypography.body2R13 + }, + textAlign = TextAlign.Center + ) + } +} + +@Preview +@Composable +fun TemperatureSelectionPreview() { + TemperatureSelection( + onClick = { } + ) +} diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 4b56e71..726a5ec 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -39,4 +39,7 @@ 주문하기 메뉴 상세보기 이미지 + // menu detail modal view + 온도" +