Skip to content

Commit

Permalink
feature/#33: modal view component CoffeeBeanSelection 구현
Browse files Browse the repository at this point in the history
  • Loading branch information
@kangyein9892
kangyein9892 committed Nov 26, 2024
1 parent cea839f commit 76eff78
Show file tree
Hide file tree
Showing 3 changed files with 259 additions and 0 deletions.
250 changes: 250 additions & 0 deletions ...java/org/techtown/twosomeheart/presentation/detail/modal/component/CoffeeBeanSelection.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,250 @@
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.Icon
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.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
import org.techtown.twosomeheart.R
import org.techtown.twosomeheart.core.extension.noRippleClickable
import org.techtown.twosomeheart.presentation.detail.model.CoffeeBeanType
import org.techtown.twosomeheart.ui.theme.Blue20
import org.techtown.twosomeheart.ui.theme.Gray30
import org.techtown.twosomeheart.ui.theme.Gray60
import org.techtown.twosomeheart.ui.theme.Gray70
import org.techtown.twosomeheart.ui.theme.Orange
import org.techtown.twosomeheart.ui.theme.TwosomeHeartTypography
import org.techtown.twosomeheart.ui.theme.White

@Composable
fun CoffeeBeanSelection(
onClick: (CoffeeBeanType) -> Unit,
modifier: Modifier = Modifier
) {
val selectedType = remember { mutableStateOf(CoffeeBeanType.BLACKGROUND) }

Column(
modifier = modifier
.fillMaxWidth()
.background(White)
.padding(horizontal = 16.dp)
) {

Row {
Text(
text = stringResource(R.string.menu_detail_modal_coffeebean_text),
style = TwosomeHeartTypography.body1B14,
modifier = Modifier.padding(top = 1.5.dp)
)

Icon(
imageVector = ImageVector.vectorResource(R.drawable.ic_modal_caution),
contentDescription = stringResource(R.string.menu_detail_modal_coffeebean_caution),
tint = Color.Unspecified
)
}

Spacer(modifier = Modifier.height(9.dp))

Row(
modifier = Modifier
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {

CoffeeBeanButton(
coffeeBeanType = CoffeeBeanType.BLACKGROUND,
isSelected = selectedType.value == CoffeeBeanType.BLACKGROUND,
onClick = {
if (selectedType.value != CoffeeBeanType.BLACKGROUND) {
selectedType.value = CoffeeBeanType.BLACKGROUND
onClick(CoffeeBeanType.BLACKGROUND)
}
},
modifier = Modifier
.offset{
IntOffset(
x = 2.dp.roundToPx(),
y = 0
)
}
.zIndex(
if (selectedType.value == CoffeeBeanType.BLACKGROUND) 1f else 0f
)
)

CoffeeBeanButton(
coffeeBeanType = CoffeeBeanType.AROMANOTE,
isSelected = selectedType.value == CoffeeBeanType.AROMANOTE,
onClick = {
if (selectedType.value != CoffeeBeanType.AROMANOTE) {
selectedType.value = CoffeeBeanType.AROMANOTE
onClick(CoffeeBeanType.AROMANOTE)
}
},
modifier = Modifier
/*.offset{
IntOffset(
x = 2.dp.roundToPx(),
y = 0
)
}*/
.zIndex(
if (selectedType.value == CoffeeBeanType.AROMANOTE) 1f else 0f
)
)

CoffeeBeanButton(
coffeeBeanType = CoffeeBeanType.DECAFFEINE,
isSelected = selectedType.value == CoffeeBeanType.DECAFFEINE,
onClick = {
if (selectedType.value != CoffeeBeanType.DECAFFEINE) {
selectedType.value = CoffeeBeanType.DECAFFEINE
onClick(CoffeeBeanType.DECAFFEINE)
}
},
modifier = Modifier
.offset {
IntOffset(
x = (-2).dp.roundToPx(),
y = 0
)
}
.zIndex(
if (selectedType.value == CoffeeBeanType.DECAFFEINE) 1f else 0f
)
)
}
}
}

@Composable
fun CoffeeBeanButton(
coffeeBeanType: CoffeeBeanType,
isSelected: Boolean,
onClick: () -> Unit,
modifier: Modifier = Modifier
) {
Box(
modifier = modifier
.noRippleClickable { onClick() }
.border(
width = 1.dp,
color = if (isSelected) Color.Transparent else Gray30,
shape = when (coffeeBeanType) {
CoffeeBeanType.BLACKGROUND -> RoundedCornerShape(
topStart = 5.dp,
topEnd = 0.dp,
bottomEnd = 0.dp,
bottomStart = 5.dp
)

CoffeeBeanType.AROMANOTE -> RoundedCornerShape(0.dp)

CoffeeBeanType.DECAFFEINE -> RoundedCornerShape(
topStart = 0.dp,
topEnd = 5.dp,
bottomEnd = 5.dp,
bottomStart = 0.dp
)
}
)
.background(
color = if (isSelected) {
when (coffeeBeanType) {
CoffeeBeanType.BLACKGROUND -> Gray70
CoffeeBeanType.AROMANOTE -> Orange
CoffeeBeanType.DECAFFEINE -> Blue20
}
} else {
White
},
shape = when (coffeeBeanType) {
CoffeeBeanType.BLACKGROUND -> RoundedCornerShape(
topStart = 5.dp,
topEnd = 0.dp,
bottomEnd = 0.dp,
bottomStart = 5.dp
)

CoffeeBeanType.AROMANOTE -> RoundedCornerShape(0.dp)

CoffeeBeanType.DECAFFEINE -> RoundedCornerShape(
topStart = 0.dp,
topEnd = 5.dp,
bottomEnd = 5.dp,
bottomStart = 0.dp
)
}
)
.padding(
when (coffeeBeanType) {
CoffeeBeanType.BLACKGROUND -> {
PaddingValues(
top = 10.dp,
bottom = 9.dp,
start = 19.dp,
end = 18.dp
)
}
CoffeeBeanType.AROMANOTE -> {
PaddingValues(
top = 10.dp,
bottom = 9.dp,
start = 24.dp,
end = 25.dp
)
}
CoffeeBeanType.DECAFFEINE-> {
PaddingValues(
top = 10.dp,
bottom = 9.dp,
start = 16.dp,
end = 16.dp
)
}
}
),
contentAlignment = Alignment.Center
) {
Text(
text = coffeeBeanType.type,
color = if (isSelected) White else Gray60,
style = if (isSelected) TwosomeHeartTypography.body2B13 else TwosomeHeartTypography.body2R13,
textAlign = TextAlign.Center
)
}
}

@Preview
@Composable
fun CoffeeBeanSelectionPreview() {
CoffeeBeanSelection(
onClick = { }
)
}
7 changes: 7 additions & 0 deletions app/src/main/java/org/techtown/twosomeheart/presentation/detail/model/CoffeeBeanType.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
package org.techtown.twosomeheart.presentation.detail.model

enum class CoffeeBeanType(val type: String) {
BLACKGROUND("블랙그라운드"),
AROMANOTE("아로마노트"),
DECAFFEINE("SWP디카페인")
}
2 changes: 2 additions & 0 deletions app/src/main/res/values/strings.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@
<string name ="menu_detail_modal_pickup_togo_text">일회용컵</string>
<string name ="menu_detail_modal_pickup_forhere_text">머그컵</string>
<string name ="menu_detail_modal_pickup_caution">픽업방식 주의사항</string>
<string name ="menu_detail_modal_coffeebean_text">원두</string>
<string name ="menu_detail_modal_coffeebean_caution">원두 주의사항</string>



Expand Down

0 comments on commit 76eff78

Please sign in to comment.