[Feature/#93] compose loading snackbar

core/common/src/main/res/values/strings.xml

@@ -15,4 +15,8 @@
     <string name="label_team_lck">LCK</string>
 
     <string name="dummy">testtesttesttesttesttesttesttesttesttesttesttesttesttest</string>
+
+    <!-- error message -->
+    <string name="error_message_network">네트워크 연결이 원활하지 않습니다</string>
+    <string name="error_message_unknown">알 수 없는 오류가 발생하였습니다</string>
 </resources>

core/designsystem/src/main/java/com/teamwable/designsystem/component/indicator/WableCircularIndicator.kt

@@ -0,0 +1,31 @@
+package com.teamwable.designsystem.component.indicator
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.teamwable.designsystem.theme.WableTheme
+
+@Composable
+fun WableCircularIndicator(
+    modifier: Modifier = Modifier,
+    size: Dp = 32.dp,
+    color: Color = WableTheme.colors.info,
+    strokeWidth: Dp = 2.dp,
+    trackColor: Color = WableTheme.colors.progressBackground,
+) {
+    CircularProgressIndicator(
+        modifier = modifier
+            .size(size)
+            .padding(5.dp),
+        color = color,
+        strokeWidth = strokeWidth,
+        strokeCap = StrokeCap.Round,
+        trackColor = trackColor,
+    )
+}

core/designsystem/src/main/java/com/teamwable/designsystem/component/snackbar/WableSnackBar.kt

@@ -0,0 +1,112 @@
+package com.teamwable.designsystem.component.snackbar
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+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.graphics.Color
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.teamwable.designsystem.R
+import com.teamwable.designsystem.component.indicator.WableCircularIndicator
+import com.teamwable.designsystem.extension.modifier.dropShadow
+import com.teamwable.designsystem.theme.WableTheme
+import com.teamwable.designsystem.type.SnackBarType
+
+const val SNACK_BAR_DURATION = 2000L
+
+@Composable
+fun WableSnackBar(
+    modifier: Modifier = Modifier,
+    message: String = "",
+    snackBarType: SnackBarType = SnackBarType.ERROR,
+    onClick: () -> Unit = {},
+) {
+    Box(
+        modifier = modifier
+            .padding(horizontal = 18.dp)
+            .fillMaxWidth()
+            .border(
+                width = 1.dp,
+                color = WableTheme.colors.gray200,
+                shape = RoundedCornerShape(dimensionResource(id = R.dimen.radius_8)),
+            )
+            .dropShadow(
+                shape = RoundedCornerShape(dimensionResource(id = R.dimen.radius_8)),
+                color = Color.Black.copy(alpha = 0.12f),
+                blur = 4.dp,
+                offsetX = 0.dp,
+                offsetY = 2.dp,
+                spread = 0.dp,
+            )
+            .background(
+                color = WableTheme.colors.gray100.copy(alpha = 0.9f),
+                shape = RoundedCornerShape(dimensionResource(id = R.dimen.radius_8)),
+            ),
+        contentAlignment = Alignment.CenterStart,
+    ) {
+        WableSnackBarContent(
+            snackBarType = snackBarType,
+            message = message,
+        )
+    }
+}
+
+@Composable
+fun WableSnackBarContent(
+    snackBarType: SnackBarType,
+    message: String,
+) {
+    Row(
+        modifier = Modifier
+            .padding(vertical = 8.dp, horizontal = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        when (snackBarType) {
+            SnackBarType.LOADING, SnackBarType.LOADING_PROFILE -> WableCircularIndicator()
+            else -> WableSnackBarImage(snackBarType)
+        }
+        Text(
+            text = when (snackBarType) {
+                SnackBarType.LOADING -> stringResource(id = R.string.snackbar_text_loading)
+                SnackBarType.LOADING_PROFILE -> stringResource(id = R.string.snackbar_text_profile_loading)
+                else -> message
+            },
+            textAlign = TextAlign.Start,
+            color = WableTheme.colors.black,
+            style = WableTheme.typography.body03,
+            modifier = Modifier.padding(start = 6.dp),
+        )
+    }
+}
+
+@Composable
+fun WableSnackBarImage(snackBarType: SnackBarType) {
+    Image(
+        painter = painterResource(id = snackBarType.image),
+        contentDescription = null,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+fun WableButtonDialogPreview() {
+    WableTheme {
+        WableSnackBar(
+            snackBarType = SnackBarType.SUCCESS,
+            message = "프로필 사진을 5MB 이하인 사진으로 바꿔주세요",
+        )
+    }
+}

core/designsystem/src/main/java/com/teamwable/designsystem/component/snackbar/WableSnackBarPopUp.kt

@@ -0,0 +1,58 @@
+package com.teamwable.designsystem.component.snackbar
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Popup
+import androidx.compose.ui.window.PopupProperties
+import com.teamwable.designsystem.theme.WableTheme
+import com.teamwable.designsystem.type.SnackBarType
+
+@Composable
+fun WableSnackBarPopUp(
+    isVisible: Boolean,
+    snackBarType: SnackBarType = SnackBarType.LOADING,
+    onDismissRequest: () -> Unit = {},
+) {
+    if (isVisible) {
+        Popup(
+            onDismissRequest = onDismissRequest,
+            properties = PopupProperties(
+                focusable = false,
+                dismissOnBackPress = true,
+                dismissOnClickOutside = false,
+                excludeFromSystemGesture = true,
+            ),
+        ) {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(WableTheme.colors.white.copy(alpha = 0.5f)),
+            ) {
+                WableSnackBar(
+                    snackBarType = snackBarType,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(top = 30.dp),
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun WableSnackBarPopUpPreview() {
+    WableTheme {
+        WableSnackBarPopUp(
+            isVisible = true,
+            snackBarType = SnackBarType.LOADING,
+        )
+    }
+}

core/designsystem/src/main/java/com/teamwable/designsystem/extension/modifier/ModifierExt.kt

@@ -1,5 +1,6 @@
 package com.teamwable.designsystem.extension.modifier
 
+import android.graphics.BlurMaskFilter
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.runtime.Composable
@@ -10,7 +11,16 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Paint
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.drawOutline
+import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
 import androidx.compose.ui.input.pointer.pointerInteropFilter
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.delay
@@ -46,3 +56,35 @@ fun Modifier.noRippleDebounceClickable(
         true
     }
 }
+
+@Composable
+fun Modifier.dropShadow(
+    shape: Shape,
+    color: Color = Color.Black.copy(alpha = 0.25f),
+    blur: Dp = 4.dp,
+    offsetY: Dp = 4.dp,
+    offsetX: Dp = 0.dp,
+    spread: Dp = 0.dp,
+) = this.drawBehind {
+    val spreadPx = spread.toPx()
+    val shadowSize = Size(size.width + spreadPx, size.height + spreadPx)
+
+    val shadowOutline = shape.createOutline(shadowSize, layoutDirection, this)
+
+    val paint = Paint().apply {
+        this.color = color
+    }
+
+    if (blur.toPx() > 0) {
+        paint.asFrameworkPaint().apply {
+            maskFilter = BlurMaskFilter(blur.toPx(), BlurMaskFilter.Blur.NORMAL)
+        }
+    }
+
+    drawIntoCanvas { canvas ->
+        canvas.save()
+        canvas.translate(offsetX.toPx() - spreadPx / 2, offsetY.toPx() - spreadPx / 2)
+        canvas.drawOutline(shadowOutline, paint)
+        canvas.restore()
+    }
+}

core/designsystem/src/main/java/com/teamwable/designsystem/theme/Color.kt

@@ -22,6 +22,7 @@ val Warning = Color(0xFFEE9209)
 val Error = Color(0xFFF01F1F)
 val SystemNavigationBar = Color(0xFFF5F5F5)
 val SystemLoginSystemAppBar = Color(0xFFEBE2FD)
+val ProgressBackground = Color(0xFFCADFF7)
 
 // Gray Scale
 val Black = Color(0xFF0E0E0E)
@@ -100,6 +101,7 @@ class WableColors(
     kdf10: Color,
     hle50: Color,
     hle10: Color,
+    progressBackground: Color,
 ) {
     var purple50 by mutableStateOf(purple50)
         private set
@@ -181,6 +183,8 @@ class WableColors(
         private set
     var hle10 by mutableStateOf(hle10)
         private set
+    var progressBackground by mutableStateOf(progressBackground)
+        private set
 
     fun copy(): WableColors = WableColors(
         purple50,
@@ -223,6 +227,7 @@ class WableColors(
         kdf10,
         hle50,
         hle10,
+        progressBackground,
     )
 
     fun update(other: WableColors) {
@@ -266,6 +271,7 @@ class WableColors(
         kdf10 = other.kdf10
         hle50 = other.hle50
         hle10 = other.hle10
+        progressBackground = other.progressBackground
     }
 }
 
@@ -310,6 +316,7 @@ fun wableLightColors(
     kdf10: Color = Kdf10,
     hle50: Color = Hle50,
     hle10: Color = Hle10,
+    progressBackground: Color = ProgressBackground,
 ) = WableColors(
     purple50,
     purple100,
@@ -351,4 +358,5 @@ fun wableLightColors(
     kdf10,
     hle50,
     hle10,
+    progressBackground,
 )

core/designsystem/src/main/java/com/teamwable/designsystem/type/SnackBarType.kt

@@ -0,0 +1,16 @@
+package com.teamwable.designsystem.type
+
+import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
+import com.teamwable.designsystem.R
+
+enum class SnackBarType(
+    @DrawableRes val image: Int = com.teamwable.common.R.drawable.ic_home_toast_success,
+    @StringRes val message: Int = R.string.empty,
+) {
+    WARNING(image = com.teamwable.common.R.drawable.ic_home_toast_warning),
+    ERROR(image = com.teamwable.common.R.drawable.ic_home_toast_error),
+    SUCCESS(image = com.teamwable.common.R.drawable.ic_home_toast_success),
+    LOADING(message = R.string.snackbar_text_loading),
+    LOADING_PROFILE(message = R.string.snackbar_text_loading),
+}

core/designsystem/src/main/res/values/dimens.xml

@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
+    <dimen name="radius_8">8dp</dimen>
     <dimen name="radius_12">12dp</dimen>
 </resources>

core/designsystem/src/main/res/values/strings.xml

@@ -29,4 +29,8 @@
     <!--    공통-->
     <string name="empty"> </string>
 
+    <!--    스낵바-->
+    <string name="snackbar_text_loading">회원가입이 거의 마무리 되었어요.\n잠시만 기다려주세요!</string>
+    <string name="snackbar_text_profile_loading">프로필 수정이 거의 마무리 되었어요.\n잠시만 기다려주세요!</string>
+
 </resources>