feature/#33: modal view component DetailModalBottomBar 구현

detail modal 하단 고정 부분 구현
SOPT-all · Nov 26, 2024 · 7c3eca3 · 7c3eca3
1 parent 157f6b4
commit 7c3eca3
Show file tree

Hide file tree

Showing 9 changed files with 375 additions and 8 deletions.
diff --git a/app/src/main/java/org/techtown/twosomeheart/core/component/QuantityButton.kt b/app/src/main/java/org/techtown/twosomeheart/core/component/QuantityButton.kt
@@ -36,7 +36,7 @@ fun ModalQuantityButton(
     onClickMinusButton: () -> Unit,
     onClickPlusButton: () -> Unit,
     modifier: Modifier = Modifier,
-    ammount: Int = 1,
+    amount: Int = 1,
 ) {
     Row(
         modifier = modifier
@@ -47,7 +47,12 @@ fun ModalQuantityButton(
         verticalAlignment = Alignment.CenterVertically,
     ) {
         Box(
-            modifier = Modifier.noRippleClickable(onClick = onClickMinusButton)
+            modifier = Modifier
+                .noRippleClickable(
+                    onClick = {
+                        if(amount == 1) return@noRippleClickable else onClickMinusButton()
+                    }
+                )
         ) {
             Icon(
                 imageVector = ImageVector.vectorResource(id = R.drawable.ic_modal_minus),
@@ -67,7 +72,7 @@ fun ModalQuantityButton(
             contentAlignment = Alignment.Center
         ) {
             Text(
-                text = ammount.toString(),
+                text = amount.toString(),
                 color = Black,
                 style = TwosomeHeartTypography.body1B14Tight
             )
@@ -93,7 +98,7 @@ fun OptionQuantityButton(
     onClickMinusButton: () -> Unit,
     onClickPlusButton: () -> Unit,
     modifier: Modifier = Modifier,
-    ammount: Int = 0,
+    amount: Int = 0,
 ) {
     Row(
         modifier = modifier
@@ -106,12 +111,12 @@ fun OptionQuantityButton(
         Box(
             modifier = Modifier.noRippleClickable(
                 onClick = {
-                    if (ammount == 0) else onClickMinusButton()
+                    if (amount == 0) return@noRippleClickable else onClickMinusButton()
                 }
             )
         ) {
             Icon(
-                imageVector = if (ammount == 0) ImageVector.vectorResource(id = R.drawable.ic_option_more_minus_disable) else ImageVector.vectorResource(
+                imageVector = if (amount == 0) ImageVector.vectorResource(id = R.drawable.ic_option_more_minus_disable) else ImageVector.vectorResource(
                     id = R.drawable.ic_option_more_minus_able
                 ),
                 contentDescription = stringResource(R.string.minus),
@@ -130,7 +135,7 @@ fun OptionQuantityButton(
             contentAlignment = Alignment.Center
         ) {
             Text(
-                text = ammount.toString(),
+                text = amount.toString(),
                 color = Black,
                 style = TwosomeHeartTheme.typography.caption1M12
             )
@@ -169,7 +174,7 @@ fun QuantityButtonPreview() {
             OptionQuantityButton(
                 onClickMinusButton = {},
                 onClickPlusButton = {},
-                ammount = 1
+                amount = 1
             )
         }
     }

diff --git a/...ava/org/techtown/twosomeheart/presentation/detail/modal/component/DetailModalBottomBar.kt b/...ava/org/techtown/twosomeheart/presentation/detail/modal/component/DetailModalBottomBar.kt
@@ -0,0 +1,63 @@
+package org.techtown.twosomeheart.presentation.detail.modal.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.techtown.twosomeheart.ui.theme.White
+
+
+@Composable
+fun DetailModalBottomBar(
+    price: String,
+    onQuantityButtonClick: (Int) -> Unit,
+    onStarButtonClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = false
+) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(White)
+    ) {
+        PriceQuantitySelection(
+            price = price,
+            onQuantityButtonClick = onQuantityButtonClick)
+
+        Spacer(Modifier.height(20.dp))
+
+        DetailModalBottomButtons(
+            onStarButtonClick = onStarButtonClick,
+            isEnabled = isEnabled
+        )
+
+    }
+}
+
+@Preview
+@Composable
+fun DetailModalBottomBarPreview() {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(8.dp)
+    ){
+        DetailModalBottomBar(
+            price = "1,000원",
+            onQuantityButtonClick = {},
+            onStarButtonClick = {}
+        )
+
+        DetailModalBottomBar(
+            price = "1,000원",
+            onQuantityButtonClick = {},
+            onStarButtonClick = {},
+            isEnabled = true
+        )
+    }
+
+}
diff --git a/...org/techtown/twosomeheart/presentation/detail/modal/component/DetailModalBottomButtons.kt b/...org/techtown/twosomeheart/presentation/detail/modal/component/DetailModalBottomButtons.kt
@@ -0,0 +1,157 @@
+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.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.dp
+import org.techtown.twosomeheart.R
+import org.techtown.twosomeheart.core.extension.noRippleClickable
+import org.techtown.twosomeheart.ui.theme.Black
+import org.techtown.twosomeheart.ui.theme.Gray20
+import org.techtown.twosomeheart.ui.theme.Gray50
+import org.techtown.twosomeheart.ui.theme.Red40
+import org.techtown.twosomeheart.ui.theme.Red40_40
+import org.techtown.twosomeheart.ui.theme.TwosomeHeartTypography
+import org.techtown.twosomeheart.ui.theme.White
+
+@Composable
+fun DetailModalBottomButtons(
+    onStarButtonClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = false
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(White)
+            .padding(horizontal = 16.dp),
+        horizontalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        ModalCartButton(
+            modifier = modifier,
+            isEnabled = isEnabled
+        )
+        ModalStarButton(
+            onClick = {
+                onStarButtonClick()
+            },
+            modifier = modifier,
+            isEnabled = isEnabled
+        )
+        ModalOrderButton(
+            modifier = modifier,
+            isEnabled = isEnabled
+        )
+    }
+}
+
+@Composable
+fun ModalCartButton(
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = false
+) {
+    Box(
+        modifier = modifier
+            .background(
+                if (isEnabled) Red40 else Red40_40
+            )
+    ) {
+        Icon(
+            imageVector = if (isEnabled) ImageVector.vectorResource(R.drawable.ic_modal_shop_able) else ImageVector.vectorResource(R.drawable.ic_modal_shop_disable),
+            contentDescription = null,
+            tint = Color.Unspecified,
+            modifier = Modifier.padding(
+                vertical = 16.dp,
+                horizontal = 18.dp
+            )
+        )
+    }
+}
+
+@Composable
+fun ModalStarButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = false
+) {
+    Box(
+        modifier = modifier
+            .background(White)
+            .border(
+                width = 1.dp,
+                color = if (isEnabled) Red40 else Red40_40,
+            )
+    ) {
+        Icon(
+            imageVector = if (isEnabled) ImageVector.vectorResource(R.drawable.ic_modal_star_able) else ImageVector.vectorResource(R.drawable.ic_modal_star_disable),
+            contentDescription = null,
+            tint = Color.Unspecified,
+            modifier = Modifier
+                .padding(
+                    vertical = 16.dp,
+                    horizontal = 18.dp
+                )
+                .noRippleClickable {
+                    if(isEnabled) {
+                        onClick()
+                    }
+                }
+        )
+    }
+}
+
+@Composable
+fun ModalOrderButton(
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = false
+) {
+    Text(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(
+                if (isEnabled) Black else Gray20
+            )
+            .padding(
+                top = 4.dp,
+                bottom = 4.dp,
+                start = 62.dp,
+                end = 63.dp
+            ),
+        text = stringResource(R.string.menu_detail_order_text),
+        color = if (isEnabled) White else Gray50,
+        textAlign = TextAlign.Center,
+        style = if (isEnabled) TwosomeHeartTypography.head4B18 else TwosomeHeartTypography.head4M18
+    )
+}
+
+@Preview
+@Composable
+fun DetailModalBottomButtonsPreview() {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        DetailModalBottomButtons(
+            onStarButtonClick = {}
+        )
+
+        DetailModalBottomButtons(
+            onStarButtonClick = {},
+            isEnabled = true
+        )
+    }
+}
diff --git a/...a/org/techtown/twosomeheart/presentation/detail/modal/component/PriceQuantitySelection.kt b/...a/org/techtown/twosomeheart/presentation/detail/modal/component/PriceQuantitySelection.kt
@@ -0,0 +1,84 @@
+package org.techtown.twosomeheart.presentation.detail.modal.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.techtown.twosomeheart.core.component.ModalQuantityButton
+import org.techtown.twosomeheart.ui.theme.Black
+import org.techtown.twosomeheart.ui.theme.TwosomeHeartTypography
+import org.techtown.twosomeheart.ui.theme.White
+
+@Composable
+fun PriceQuantitySelection(
+    price: String,
+    onQuantityButtonClick: (Int) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+
+    val quantity = remember{ mutableIntStateOf(1) }
+
+    Column (
+        modifier = modifier
+            .fillMaxWidth()
+            .background(White)
+            .padding(horizontal = 16.dp)
+    ) {
+
+        HorizontalDivider(
+            thickness = 1.dp,
+            color = Black
+        )
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+        ) {
+            Text(
+                text = price,
+                style = TwosomeHeartTypography.title1B16,
+                color = Black,
+                modifier = Modifier.padding(
+                    top = 28.dp
+                )
+            )
+
+            Spacer(modifier = Modifier.weight(1f))
+
+            ModalQuantityButton(
+                onClickMinusButton = {
+                    quantity.intValue -= 1
+                    onQuantityButtonClick(quantity.intValue)
+                },
+                onClickPlusButton = {
+                    quantity.intValue += 1
+                    onQuantityButtonClick(quantity.intValue)
+                },
+                amount = quantity.intValue,
+                modifier = Modifier
+                    .padding(
+                        top = 24.dp
+                    )
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun PriceQuantitySelectionPreview() {
+    PriceQuantitySelection(
+        price = "1,000원",
+        onQuantityButtonClick = {}
+    )
+}
diff --git a/app/src/main/res/drawable/ic_modal_shop_able.xml b/app/src/main/res/drawable/ic_modal_shop_able.xml
@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M4.152,5.156h15.696v15.788h-15.696z"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"/>
+  <path
+      android:strokeWidth="1"
+      android:pathData="M15.459,5.2H8.519L9.27,3.057H14.709L15.459,5.2Z"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"/>
+</vector>