Merge pull request #28 from SOPT-all/feat/component-balloon

[feat] Balloon 컴포넌트 구현
SOPT-all · Jan 15, 2025 · 0ce2092 · 0ce2092
2 parents 720431c + 1275760
commit 0ce2092
Show file tree

Hide file tree

Showing 6 changed files with 215 additions and 3 deletions.
diff --git a/app/src/main/java/org/android/bbangzip/presentation/component/balloon/BalloonContainer.kt b/app/src/main/java/org/android/bbangzip/presentation/component/balloon/BalloonContainer.kt
@@ -0,0 +1,49 @@
+package org.android.bbangzip.presentation.component.balloon
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+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.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import org.android.bbangzip.presentation.type.BbangZipShadowType
+import org.android.bbangzip.presentation.util.modifier.applyShadows
+import org.android.bbangzip.ui.theme.BbangZipTheme
+
+@Composable
+fun BalloonContainer(
+    text: String,
+    leadingIcon: @Composable () -> Unit = {},
+    trailingIcon: @Composable () -> Unit = {},
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier =
+            modifier
+                .applyShadows(BbangZipShadowType.STRONG, shape = RoundedCornerShape(size = 20.dp))
+                .fillMaxWidth()
+                .background(
+                    color = BbangZipTheme.colors.staticWhite_FFFFFF,
+                    shape = RoundedCornerShape(size = 20.dp),
+                )
+                .padding(horizontal = 16.dp, vertical = 8.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Row {
+            leadingIcon()
+
+            Text(
+                text = text,
+                style = BbangZipTheme.typography.body1Bold,
+                color = BbangZipTheme.colors.labelNormal_282119,
+            )
+
+            trailingIcon()
+        }
+    }
+}
diff --git a/app/src/main/java/org/android/bbangzip/presentation/component/balloon/BottomTailBalloon.kt b/app/src/main/java/org/android/bbangzip/presentation/component/balloon/BottomTailBalloon.kt
@@ -0,0 +1,68 @@
+package org.android.bbangzip.presentation.component.balloon
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import org.android.bbangzip.R
+import org.android.bbangzip.ui.theme.BbangZipTheme
+import org.android.bbangzip.ui.theme.defaultBbangZipColors
+
+@Composable
+fun BottomTailBalloon(
+    text: String,
+    leadingIcon: @Composable () -> Unit = {},
+    trailingIcon: @Composable () -> Unit = {},
+    horizontalPadding: Dp = 0.dp,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier =
+            modifier
+                .fillMaxWidth()
+                .padding(horizontal = horizontalPadding),
+    ) {
+        BalloonContainer(
+            leadingIcon = leadingIcon,
+            text = text,
+            trailingIcon = trailingIcon,
+        )
+
+        Icon(
+            imageVector = ImageVector.vectorResource(R.drawable.ic_balloon_tail_down_8),
+            contentDescription = null,
+            modifier = Modifier.padding(start = 24.dp),
+            tint = BbangZipTheme.colors.staticWhite_FFFFFF,
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun TopBalloonPreview() {
+    Column(
+        Modifier
+            .fillMaxSize()
+            .background(color = defaultBbangZipColors.backgroundAccent_FFDAA0),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Spacer(modifier = Modifier.height(10.dp))
+
+        BottomTailBalloon(
+            text = "사장님의 과제 빵점 탈출을 위해서",
+            horizontalPadding = 16.dp,
+        )
+    }
+}
diff --git a/app/src/main/java/org/android/bbangzip/presentation/component/balloon/TopTailBalloon.kt b/app/src/main/java/org/android/bbangzip/presentation/component/balloon/TopTailBalloon.kt
@@ -0,0 +1,68 @@
+package org.android.bbangzip.presentation.component.balloon
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import org.android.bbangzip.R
+import org.android.bbangzip.ui.theme.BbangZipTheme
+import org.android.bbangzip.ui.theme.defaultBbangZipColors
+
+@Composable
+fun TopTailBalloon(
+    text: String,
+    leadingIcon: @Composable () -> Unit = {},
+    trailingIcon: @Composable () -> Unit = {},
+    horizontalPadding: Dp = 0.dp,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier =
+            modifier
+                .fillMaxWidth()
+                .padding(horizontal = horizontalPadding),
+    ) {
+        Icon(
+            imageVector = ImageVector.vectorResource(R.drawable.ic_balloon_tail_up_8),
+            contentDescription = null,
+            modifier = Modifier.padding(start = 24.dp),
+            tint = BbangZipTheme.colors.staticWhite_FFFFFF,
+        )
+
+        BalloonContainer(
+            leadingIcon = leadingIcon,
+            text = text,
+            trailingIcon = trailingIcon,
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun TopBalloonPreview() {
+    Column(
+        Modifier
+            .fillMaxSize()
+            .background(color = defaultBbangZipColors.backgroundAccent_FFDAA0),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Spacer(modifier = Modifier.height(10.dp))
+
+        TopTailBalloon(
+            text = "사장님의 과제 빵점 탈출을 위해서",
+            horizontalPadding = 16.dp,
+        )
+    }
+}
diff --git a/app/src/main/java/org/android/bbangzip/presentation/util/modifier/ModifierExt.kt b/app/src/main/java/org/android/bbangzip/presentation/util/modifier/ModifierExt.kt
@@ -100,7 +100,16 @@ fun Modifier.applyShadows(
     shadowType: BbangZipShadowType,
     shape: Shape,
 ): Modifier {
-    return shadowType.shadowOptions.fold(this) { acc, shadowOption ->
-        acc.dropShadow(shape = shape, color = shadowOption.color, blur = shadowOption.blur, offsetY = shadowOption.offsetY, offsetX = shadowOption.offsetX, spread = shadowOption.spread)
-    }
+    return shadowType
+        .shadowOptions
+        .fold(this) { acc, shadowOption ->
+            acc.dropShadow(
+                shape = shape,
+                color = shadowOption.color,
+                blur = shadowOption.blur,
+                offsetY = shadowOption.offsetY,
+                offsetX = shadowOption.offsetX,
+                spread = shadowOption.spread,
+            )
+        }
 }
diff --git a/app/src/main/res/drawable/ic_balloon_tail_down_8.xml b/app/src/main/res/drawable/ic_balloon_tail_down_8.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="8dp"
+    android:height="7dp"
+    android:viewportWidth="8"
+    android:viewportHeight="7">
+  <path
+      android:pathData="M5.1618,7C2.1099,4.5808 0.7823,1.3253 0.5,0H7.5C6.0843,2.1154 5.367,5.1297 5.1618,7Z"
+      android:fillColor="#ffffff"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_balloon_tail_up_8.xml b/app/src/main/res/drawable/ic_balloon_tail_up_8.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="8dp"
+    android:height="7dp"
+    android:viewportWidth="8"
+    android:viewportHeight="7">
+  <path
+      android:pathData="M5.1618,0C2.1099,2.4192 0.7823,5.6747 0.5,7H7.5C6.0843,4.8846 5.367,1.8703 5.1618,0Z"
+      android:fillColor="#ffffff"/>
+</vector>