===== 1. Image in the card ===== 

The snippet of image in circle is like this

<code kotlin>
//  이미지 피커 컴퍼저블
Card(shape = CircleShape, modifier = Modifier
    .padding(8.dp)
    .size(100.dp))
{
    Image(painter = if (imageUri.value.isEmpty()) { avatarImage } else { painter },
        contentDescription = "Pick Image",
        modifier = Modifier
            .wrapContentSize()
            .clickable { imageLauncher.launch("image/*") },
        contentScale = ContentScale.Crop)
}
Text(text = "Change Profile Picture")
</code>


===== 2. Icon in the Circle =====

By making a circle by Surface compose, you can align center the icon

<code kotlin>
// Icon in the center of Circcle
@Composable
fun CircleWithIcon(iconColor: Color = MaterialTheme.colorScheme.primary, icon : Painter, description : String) {
    val circleSize = 36.dp
    val iconSize = 32.dp

    Surface(
        modifier = Modifier.size(circleSize),
        shape = CircleShape,
        color = MaterialTheme.colorScheme.secondary
    ) {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Icon(
                painter = icon,
                contentDescription = description,
                modifier = Modifier.size(iconSize),
                tint = iconColor
            )
        }
    }
}
</code>