Skip to content

Commit

Permalink
feature/#33: modal view component PickUpSelection 구현
Browse files Browse the repository at this point in the history
  • Loading branch information
@kangyein9892
kangyein9892 committed Nov 26, 2024
1 parent fbcdb88 commit 852290c
Show file tree
Hide file tree
Showing 4 changed files with 264 additions and 0 deletions.
235 changes: 235 additions & 0 deletions ...ain/java/org/techtown/twosomeheart/presentation/detail/modal/component/PickUpSelection.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,235 @@
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.PickUpType
import org.techtown.twosomeheart.ui.theme.Black
import org.techtown.twosomeheart.ui.theme.Gray30
import org.techtown.twosomeheart.ui.theme.Gray60
import org.techtown.twosomeheart.ui.theme.TwosomeHeartTypography
import org.techtown.twosomeheart.ui.theme.White

@Composable
fun PickUpSelection(
onClick: (PickUpType) -> Unit,
modifier: Modifier = Modifier
) {
val selectedType = remember { mutableStateOf<PickUpType?>(null) }

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

Row {
Text(
text = stringResource(R.string.menu_detail_modal_pickup_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_pickup_caution),
tint = Color.Unspecified
)
}


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

Row(
modifier = Modifier
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
PickUpButton(
pickUpType = PickUpType.TOGO,
isSelected = selectedType.value == PickUpType.TOGO,
onClick = {
if (selectedType.value != PickUpType.TOGO) {
selectedType.value = PickUpType.TOGO
onClick(PickUpType.TOGO)
}
},
modifier = Modifier
.zIndex(
if (selectedType.value == PickUpType.TOGO) 1f else 0f
)
)

PickUpButton(
pickUpType = PickUpType.FORHERE,
isSelected = selectedType.value == PickUpType.FORHERE,
onClick = {
if (selectedType.value != PickUpType.FORHERE) {
selectedType.value = PickUpType.FORHERE
onClick(PickUpType.FORHERE)
}
},
modifier = Modifier
.offset {
IntOffset(
x = (-2).dp.roundToPx(),
y = 0
)
}
.zIndex(
if (selectedType.value == PickUpType.FORHERE) 1f else 0f
)
)
}

}
}

@Composable
fun PickUpButton(
pickUpType: PickUpType,
isSelected: Boolean,
onClick: () -> Unit,
modifier: Modifier = Modifier
) {
Box(
modifier = modifier
.noRippleClickable { onClick() }
.border(
width = 1.dp,
color = if (isSelected) Black else Gray30,
shape = when (pickUpType) {
PickUpType.TOGO -> {
RoundedCornerShape(
topStart = 5.dp,
topEnd = 0.dp,
bottomEnd = 0.dp,
bottomStart = 5.dp
)
}

PickUpType.FORHERE -> RoundedCornerShape(
topStart = 0.dp,
topEnd = 5.dp,
bottomEnd = 5.dp,
bottomStart = 0.dp
)
}
)
.background(
color = White,
shape = when (pickUpType) {
PickUpType.TOGO -> RoundedCornerShape(
topStart = 5.dp,
topEnd = 0.dp,
bottomEnd = 0.dp,
bottomStart = 5.dp
)

PickUpType.FORHERE -> RoundedCornerShape(
topStart = 0.dp,
topEnd = 5.dp,
bottomEnd = 5.dp,
bottomStart = 0.dp
)
}
)
.padding(
when (pickUpType) {
PickUpType.TOGO -> {
PaddingValues(
top = 11.dp,
bottom = 10.dp,
start = 62.dp,
end = 61.dp
)
}
PickUpType.FORHERE -> {
PaddingValues(
top = 11.dp,
bottom = 10.dp,
start = 66.dp,
end = 67.dp
)
}
}
),
contentAlignment = Alignment.Center
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
when(pickUpType){
PickUpType.TOGO -> {
Text(
text = pickUpType.type,
color = if (isSelected) Black else Gray60,
style = if (isSelected) TwosomeHeartTypography.body2B13 else TwosomeHeartTypography.body2R13,
textAlign = TextAlign.Center
)

Text(
text = stringResource(R.string.menu_detail_modal_pickup_togo_text),
color = if (isSelected) Black else Gray60,
style = TwosomeHeartTypography.caption2R11,
textAlign = TextAlign.Center
)
}

PickUpType.FORHERE -> {
Text(
text = pickUpType.type,
color = if (isSelected) Black else Gray60,
style = if (isSelected) TwosomeHeartTypography.body2B13 else TwosomeHeartTypography.body2R13,
textAlign = TextAlign.Center
)

Text(
text = stringResource(R.string.menu_detail_modal_pickup_forhere_text),
color = if (isSelected) Black else Gray60,
style = TwosomeHeartTypography.caption2R11,
textAlign = TextAlign.Center
)
}
}
}
}
}

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

enum class PickUpType(val type: String) {
TOGO("포장"),
FORHERE("매장")
}
19 changes: 19 additions & 0 deletions app/src/main/res/drawable/ic_modal_caution.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="25dp"
android:viewportWidth="24"
android:viewportHeight="25">
<path
android:pathData="M12,12.5m-7.467,0a7.467,7.467 0,1 1,14.933 0a7.467,7.467 0,1 1,-14.933 0"
android:strokeWidth="1.06667"
android:fillColor="#00000000"
android:strokeColor="#D5D5D5"/>
<path
android:pathData="M12,15.7m-0.533,0a0.533,0.533 0,1 1,1.067 0a0.533,0.533 0,1 1,-1.067 0"
android:fillColor="#D5D5D5"/>
<path
android:pathData="M12,8.767V14.1"
android:strokeWidth="1.06667"
android:fillColor="#00000000"
android:strokeColor="#D5D5D5"/>
</vector>
4 changes: 4 additions & 0 deletions app/src/main/res/values/strings.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,10 @@
<string name ="menu_detail_modal_size_text">사이즈</string>
<string name ="menu_detail_modal_size_regular_text">레귤러 (325ml)</string>
<string name ="menu_detail_modal_size_large_text">라지 (425ml)</string>
<string name ="menu_detail_modal_pickup_text">픽업방식</string>
<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>



Expand Down

0 comments on commit 852290c

Please sign in to comment.