Skip to content

Commit

Permalink
feature/#33: modal view component SizeSelection 구현
Browse files Browse the repository at this point in the history
  • Loading branch information
@kangyein9892
kangyein9892 committed Nov 26, 2024
1 parent b34f7e1 commit fbcdb88
Show file tree
Hide file tree
Showing 6 changed files with 369 additions and 1 deletion.
256 changes: 256 additions & 0 deletions .../main/java/org/techtown/twosomeheart/presentation/detail/modal/component/SizeSelection.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,256 @@
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.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.SizeType
import org.techtown.twosomeheart.presentation.detail.model.TemperatureType
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 SizeSelection(
onClick: (SizeType) -> Unit,
modifier: Modifier = Modifier
) {
val selectedType = remember { mutableStateOf<SizeType?>(null) }

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

Text(
text = stringResource(R.string.menu_detail_modal_size_text),
style = TwosomeHeartTypography.body1B14,
)

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

Row(
modifier = Modifier
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
SizeButton(
sizeType = SizeType.REGULAR,
isSelected = selectedType.value == SizeType.REGULAR,
onClick = {
if (selectedType.value != SizeType.REGULAR) {
selectedType.value = SizeType.REGULAR
onClick(SizeType.REGULAR)
}
},
modifier = Modifier
.zIndex(
if (selectedType.value == SizeType.REGULAR) 1f else 0f
)
)

SizeButton(
sizeType = SizeType.LARGE,
isSelected = selectedType.value == SizeType.LARGE,
onClick = {
if (selectedType.value != SizeType.LARGE) {
selectedType.value = SizeType.LARGE
onClick(SizeType.LARGE)
}
},
modifier = Modifier
.offset {
IntOffset(
x = (-2).dp.roundToPx(),
y = 0
)
}
.zIndex(
if (selectedType.value == SizeType.LARGE) 1f else 0f
)
)
}

}
}

@Composable
fun SizeButton(
sizeType: SizeType,
isSelected: Boolean,
onClick: () -> Unit,
modifier: Modifier = Modifier
) {
Box(
modifier = modifier
.noRippleClickable { onClick() }
.border(
width = 1.dp,
color = if (isSelected) Black else Gray30,
shape = when (sizeType) {
SizeType.REGULAR -> {
RoundedCornerShape(
topStart = 5.dp,
topEnd = 0.dp,
bottomEnd = 0.dp,
bottomStart = 5.dp
)
}
SizeType.LARGE -> RoundedCornerShape(
topStart = 0.dp,
topEnd = 5.dp,
bottomEnd = 5.dp,
bottomStart = 0.dp
)
}
)
.background(
color = White,
shape = when (sizeType) {
SizeType.REGULAR -> RoundedCornerShape(
topStart = 5.dp,
topEnd = 0.dp,
bottomEnd = 0.dp,
bottomStart = 5.dp
)
SizeType.LARGE -> RoundedCornerShape(
topStart = 0.dp,
topEnd = 5.dp,
bottomEnd = 5.dp,
bottomStart = 0.dp
)
}
)
.padding(
when (sizeType) {
SizeType.REGULAR -> {
if(isSelected){
PaddingValues(
top = 16.dp,
bottom = 10.dp,
start = 38.dp,
end = 37.dp
)
} else {
PaddingValues(
top = 16.dp,
bottom = 10.dp,
start = 40.dp,
end = 39.dp
)
}
}
SizeType.LARGE -> {
if(isSelected){
PaddingValues(
top = 12.dp,
bottom = 10.dp,
start = 45.dp,
end = 46.dp
)
} else {
PaddingValues(
top = 12.dp,
bottom = 10.dp,
start = 43.dp,
end = 44.dp
)
}
}
}
),
contentAlignment = Alignment.Center
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
when(sizeType){
SizeType.REGULAR -> {
Icon(
imageVector = if (isSelected) ImageVector.vectorResource(R.drawable.ic_modal_regular_select) else ImageVector.vectorResource(R.drawable.ic_modal_regular_diselect),
contentDescription = stringResource(R.string.menu_detail_modal_size_regular_text)
)
Spacer(Modifier.height(5.dp))

Text(
text = stringResource(R.string.menu_detail_modal_size_regular_text),
color = if (isSelected){
Black
} else {
Gray60
},
style = if (isSelected){
TwosomeHeartTypography.body2B13
} else {
TwosomeHeartTypography.body2R13
},
textAlign = TextAlign.Center
)
}

SizeType.LARGE -> {
Icon(
imageVector = if (isSelected) ImageVector.vectorResource(R.drawable.ic_modal_large_select) else ImageVector.vectorResource(R.drawable.ic_modal_large_diselect),
contentDescription = stringResource(R.string.menu_detail_modal_size_large_text)
)
Spacer(Modifier.height(1.dp))

Text(
text = stringResource(R.string.menu_detail_modal_size_large_text),
color = if (isSelected){
Black
} else {
Gray60
},
style = if (isSelected){
TwosomeHeartTypography.body2B13
} else {
TwosomeHeartTypography.body2R13
},
textAlign = TextAlign.Center
)
}
}
}
}
}

@Preview
@Composable
fun SizeSelectionPreview() {
SizeSelection(
onClick = { }
)
}
27 changes: 27 additions & 0 deletions app/src/main/res/drawable/ic_modal_large_diselect.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="40dp"
android:height="40dp"
android:viewportWidth="40"
android:viewportHeight="40">
<path
android:pathData="M6,3.234V9.52V17.092V25.688C6,29.304 8.932,32.236 12.549,32.236H22.957C26.574,32.236 29.506,29.304 29.506,25.688V22.53M29.506,3.234V10.163M29.506,10.163V17.092V22.53M29.506,10.163V10.163C31.831,10.163 33.716,12.048 33.716,14.373V18.32C33.716,20.645 31.831,22.53 29.506,22.53V22.53"
android:strokeWidth="1.40334"
android:fillColor="#00000000"
android:strokeColor="#707070"
android:strokeLineCap="round"/>
<path
android:pathData="M6,3H29.506"
android:strokeWidth="1.40334"
android:fillColor="#00000000"
android:strokeColor="#707070"
android:strokeLineCap="round"/>
<path
android:pathData="M11.613,9.549h11.928v8.186h-11.928z"
android:fillColor="#999999"/>
<path
android:pathData="M6,37.265H29.623"
android:strokeWidth="1.40334"
android:fillColor="#00000000"
android:strokeColor="#707070"
android:strokeLineCap="round"/>
</vector>
27 changes: 27 additions & 0 deletions app/src/main/res/drawable/ic_modal_large_select.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="40dp"
android:height="40dp"
android:viewportWidth="40"
android:viewportHeight="40">
<path
android:pathData="M6,3.234V9.52V17.092V25.688C6,29.304 8.932,32.236 12.549,32.236H22.957C26.574,32.236 29.506,29.304 29.506,25.688V22.53M29.506,3.234V10.163M29.506,10.163V17.092V22.53M29.506,10.163V10.163C31.831,10.163 33.716,12.048 33.716,14.373V18.32C33.716,20.645 31.831,22.53 29.506,22.53V22.53"
android:strokeWidth="1.40334"
android:fillColor="#00000000"
android:strokeColor="#000000"
android:strokeLineCap="round"/>
<path
android:pathData="M6,3H29.506"
android:strokeWidth="1.40334"
android:fillColor="#00000000"
android:strokeColor="#000000"
android:strokeLineCap="round"/>
<path
android:pathData="M11.613,9.549h11.928v8.186h-11.928z"
android:fillColor="#000000"/>
<path
android:pathData="M6,37.265H29.623"
android:strokeWidth="1.40334"
android:fillColor="#00000000"
android:strokeColor="#000000"
android:strokeLineCap="round"/>
</vector>
27 changes: 27 additions & 0 deletions app/src/main/res/drawable/ic_modal_regular_diselect.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="32dp"
android:height="32dp"
android:viewportWidth="32"
android:viewportHeight="32">
<path
android:pathData="M5,2.188V7.216V13.274V20.15C5,23.044 7.346,25.389 10.239,25.389H18.566C21.459,25.389 23.805,23.044 23.805,20.15V17.624M23.805,2.188V7.731M23.805,7.731V13.274V17.624M23.805,7.731V7.731C25.665,7.731 27.173,9.239 27.173,11.099V14.256C27.173,16.116 25.665,17.624 23.805,17.624V17.624"
android:strokeWidth="1.26301"
android:fillColor="#00000000"
android:strokeColor="#707070"
android:strokeLineCap="round"/>
<path
android:pathData="M5,2H23.805"
android:strokeWidth="1.26301"
android:fillColor="#00000000"
android:strokeColor="#707070"
android:strokeLineCap="round"/>
<path
android:pathData="M5,29.623H23.898"
android:strokeWidth="1.26301"
android:fillColor="#00000000"
android:strokeColor="#707070"
android:strokeLineCap="round"/>
<path
android:pathData="M9.725,6.865h9.473v6.501h-9.473z"
android:fillColor="#999999"/>
</vector>
27 changes: 27 additions & 0 deletions app/src/main/res/drawable/ic_modal_regular_select.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="32dp"
android:height="32dp"
android:viewportWidth="32"
android:viewportHeight="32">
<path
android:pathData="M5,2.188V7.216V13.274V20.15C5,23.044 7.346,25.389 10.239,25.389H18.566C21.459,25.389 23.805,23.044 23.805,20.15V17.624M23.805,2.188V7.731M23.805,7.731V13.274V17.624M23.805,7.731V7.731C25.665,7.731 27.173,9.239 27.173,11.099V14.256C27.173,16.116 25.665,17.624 23.805,17.624V17.624"
android:strokeWidth="1.26301"
android:fillColor="#00000000"
android:strokeColor="#000000"
android:strokeLineCap="round"/>
<path
android:pathData="M5,2H23.805"
android:strokeWidth="1.26301"
android:fillColor="#00000000"
android:strokeColor="#000000"
android:strokeLineCap="round"/>
<path
android:pathData="M5,29.623H23.898"
android:strokeWidth="1.26301"
android:fillColor="#00000000"
android:strokeColor="#000000"
android:strokeLineCap="round"/>
<path
android:pathData="M9.725,6.865h9.473v6.501h-9.473z"
android:fillColor="#000000"/>
</vector>
6 changes: 5 additions & 1 deletion app/src/main/res/values/strings.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,11 @@
<string name="menu_detail_image">메뉴 상세보기 이미지</string>

// menu detail modal view
<string name ="menu_detail_modal_temperature_text">온도</string>"
<string name ="menu_detail_modal_temperature_text">온도</string>
<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>



</resources>

0 comments on commit fbcdb88

Please sign in to comment.