[MOB-1676] 버튼 미구현 컨텐츠 구현

bezier/src/main/java/io/channel/bezier/compose/component/button/BezierButton.kt

@@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.Icon
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -20,16 +19,23 @@ import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import io.channel.bezier.BezierIcons
 import io.channel.bezier.BezierTheme
+import io.channel.bezier.compose.R
+import io.channel.bezier.compose.component.loader.BezierLoader
+import io.channel.bezier.compose.component.loader.properties.BezierLoaderSize
+import io.channel.bezier.compose.component.loader.properties.BezierLoaderVariant
+import io.channel.bezier.compose.component.avatar.BezierAvatar
 import io.channel.bezier.compose.component.button.properties.BezierButtonColor
 import io.channel.bezier.compose.component.button.properties.BezierButtonContent
 import io.channel.bezier.compose.component.button.properties.BezierButtonSize
 import io.channel.bezier.compose.component.button.properties.BezierButtonVariant
 import io.channel.bezier.extension.thenIf
+import io.channel.bezier.extension.toEmojiPainter
 import io.channel.bezier.icon.ArrowRight
 import io.channel.bezier.icon.Plus
 
@@ -62,10 +68,9 @@ fun BezierButton(
             contentAlignment = Alignment.Center,
     ) {
         if (isLoading) {
-            // TODO : 베지어 로더로 변경 예정
-            CircularProgressIndicator(
-                    modifier = Modifier.size(size.iconSize),
-                    color = contentColor,
+            BezierLoader(
+                    variant = BezierLoaderVariant.OnOverlay,
+                    size = BezierLoaderSize.Small,
             )
         }
 
@@ -118,16 +123,15 @@ private fun BezierButtonContent(
                 tint = contentColor,
         )
 
-        // TODO : Not Implementation
-        is BezierButtonContent.Avatar -> Box(
-                modifier = Modifier,
+        is BezierButtonContent.Avatar -> BezierAvatar(
+                painter = content.painter,
+                size = size.avatarSize,
         )
 
-        // TODO : Not Implementation
         is BezierButtonContent.Emoji -> Image(
-                modifier = Modifier.size(size.iconSize),
-                painter = content.painter,
-                contentDescription = null,
+                modifier = Modifier.size(size.emojiSize),
+                painter = content.name.toEmojiPainter,
+                contentDescription = content.name,
         )
     }
 }
@@ -201,6 +205,22 @@ private fun BezierButtonOnlyTextPreview() {
     }
 }
 
+@Composable
+@Preview(showBackground = true)
+private fun BezierButtonOtherContentsPreview() {
+    BezierTheme {
+        BezierButton(
+                text = "Label",
+                size = BezierButtonSize.Medium,
+                variant = BezierButtonVariant.Primary,
+                color = BezierButtonColor.Blue,
+                onClick = { },
+                prefixContent = BezierButtonContent.Avatar(painterResource(id = R.drawable.unknown)),
+                suffixContent = BezierButtonContent.Emoji("smile")
+        )
+    }
+}
+
 @Composable
 @Preview(showBackground = true)
 private fun BezierButtonLoadingPreview() {

bezier/src/main/java/io/channel/bezier/compose/component/button/properties/BezierButtonContent.kt

@@ -1,12 +1,35 @@
 package io.channel.bezier.compose.component.button.properties
 
+import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
 import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
+import coil.compose.rememberAsyncImagePainter
 import io.channel.bezier.BezierIcon
+import io.channel.bezier.compose.R
 
 @Stable
 sealed interface BezierButtonContent {
     data class Icon(val icon: BezierIcon) : BezierButtonContent
-    data class Avatar(val painter: Painter) : BezierButtonContent
-    data class Emoji(val painter: Painter) : BezierButtonContent
+    class Avatar : BezierButtonContent {
+        private val _painter: @Composable () -> Painter
+        val painter: Painter
+            @Composable
+            get() = _painter()
+
+        constructor(url: String, error: Painter? = null) {
+            _painter = {
+                rememberAsyncImagePainter(
+                        model = url,
+                        error = error ?: painterResource(id = R.drawable.unknown),
+                )
+            }
+        }
+
+        constructor(painter: Painter) {
+            _painter = { painter }
+        }
+    }
+
+    data class Emoji(val name: String) : BezierButtonContent
 }

bezier/src/main/java/io/channel/bezier/compose/component/button/properties/BezierButtonSize.kt

@@ -6,47 +6,60 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import io.channel.bezier.BezierTheme
+import io.channel.bezier.compose.component.avatar.properties.BezierAvatarSize
 
 enum class BezierButtonSize(
         internal val textStyle: @Composable () -> TextStyle,
         internal val radius: Dp,
         internal val containerPadding: PaddingValues,
         internal val textPadding: PaddingValues,
         internal val iconSize: Dp,
+        internal val emojiSize: Dp,
+        internal val avatarSize: BezierAvatarSize,
 ) {
     XSmall(
             textStyle = { BezierTheme.typography.caption2SemiBold },
             radius = 8.dp,
             containerPadding = PaddingValues(horizontal = 6.dp, vertical = 3.dp),
             textPadding = PaddingValues(horizontal = 3.dp, vertical = 0.dp),
             iconSize = 16.dp,
+            emojiSize = 16.dp,
+            avatarSize = BezierAvatarSize.Size16,
     ),
     Small(
             textStyle = { BezierTheme.typography.caption1SemiBold },
             radius = 10.dp,
             containerPadding = PaddingValues(horizontal = 8.dp, vertical = 6.dp),
             textPadding = PaddingValues(horizontal = 4.dp, vertical = 1.dp),
             iconSize = 16.dp,
+            emojiSize = 16.dp,
+            avatarSize = BezierAvatarSize.Size16,
     ),
     Medium(
             textStyle = { BezierTheme.typography.body2SemiBold },
             radius = 12.dp,
             containerPadding = PaddingValues(horizontal = 12.dp, vertical = 9.dp),
             textPadding = PaddingValues(horizontal = 4.dp, vertical = 0.dp),
             iconSize = 20.dp,
+            emojiSize = 20.dp,
+            avatarSize = BezierAvatarSize.Size20,
     ),
     Large(
             textStyle = { BezierTheme.typography.body1SemiBold },
             radius = 14.dp,
             containerPadding = PaddingValues(horizontal = 14.dp, vertical = 11.dp),
             textPadding = PaddingValues(horizontal = 5.dp, vertical = 1.dp),
             iconSize = 20.dp,
+            emojiSize = 20.dp,
+            avatarSize = BezierAvatarSize.Size20,
     ),
     XLarge(
             textStyle = { BezierTheme.typography.title2SemiBold },
             radius = 16.dp,
             containerPadding = PaddingValues(horizontal = 16.dp, vertical = 15.dp),
             textPadding = PaddingValues(horizontal = 6.dp, vertical = 0.dp),
             iconSize = 24.dp,
+            emojiSize = 24.dp,
+            avatarSize = BezierAvatarSize.Size24,
     ),
 }

bezier/src/main/java/io/channel/bezier/extension/EmojiExtensions.kt

@@ -2,11 +2,19 @@ package io.channel.bezier.extension
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.platform.LocalInspectionMode
 import coil.compose.rememberAsyncImagePainter
+import io.channel.bezier.BezierIcons
+import io.channel.bezier.icon.FaceSmile
 import java.net.URLEncoder
 
 private const val emojiUrl = "https://cf.channel.io/asset/emoji/images/80/%s.png"
 
 internal val String.toEmojiPainter: Painter
     @Composable
-    get() = rememberAsyncImagePainter(model = emojiUrl.format(URLEncoder.encode(this, "UTF-8")))
+    get() = if (LocalInspectionMode.current) {
+        rememberVectorPainter(image = BezierIcons.FaceSmile.imageVector)
+    } else {
+        rememberAsyncImagePainter(model = emojiUrl.format(URLEncoder.encode(this, "UTF-8")))
+    }