[UI] 클릭 이펙트 추가

core/ui/src/main/java/pokitmons/pokit/core/ui/components/atom/button/subcomponents/container/PokitButtonContainerModifier.kt

@@ -2,13 +2,10 @@ package pokitmons.pokit.core.ui.components.atom.button.subcomponents.container
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
@@ -22,6 +19,7 @@ import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitButtonStat
 import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitButtonStyle
 import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitButtonType
 import pokitmons.pokit.core.ui.theme.PokitTheme
+import pokitmons.pokit.core.ui.utils.scaleClickable
 
 @Composable
 internal fun Modifier.pokitButtonContainerModifier(
@@ -44,11 +42,9 @@ internal fun Modifier.pokitButtonContainerModifier(
         .clip(
             shape = buttonShape
         )
-        .clickable(
+        .scaleClickable(
             enabled = (state != PokitButtonState.DISABLE),
-            onClick = onClick,
-            indication = null,
-            interactionSource = remember { MutableInteractionSource() }
+            onClick = onClick
         )
         .background(
             shape = buttonShape,

core/ui/src/main/java/pokitmons/pokit/core/ui/components/atom/checkbox/PokitCheckbox.kt

@@ -5,10 +5,12 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -36,10 +38,17 @@ fun PokitCheckbox(
     val iconTintColor = getIconTintColor(style = style, checked = checked, enabled = enabled)
     val strokeColor = getStrokeColor(style = style, checked = checked, enabled = enabled)
 
+    val pressedBackgroundColor = getPressedBackgroundColor(style = style)
+    val pressedIconTintColor = getPressedIconTintColor(style = style)
+    val pressedStrokeColor = getPressedStrokeColor(style = style)
+
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+
     Image(
         painter = painterResource(id = R.drawable.icon_24_check),
         contentDescription = null,
-        colorFilter = ColorFilter.tint(iconTintColor),
+        colorFilter = ColorFilter.tint(if (isPressed) pressedIconTintColor else iconTintColor),
         modifier = Modifier
             .size(24.dp)
             .clip(
@@ -50,19 +59,19 @@ fun PokitCheckbox(
             ) {
                 clickable(
                     indication = null,
-                    interactionSource = remember { MutableInteractionSource() },
+                    interactionSource = interactionSource,
                     enabled = enabled,
                     onClick = {
                         onClick?.invoke(!checked)
                     }
                 )
             }
             .background(
-                color = backgroundColor
+                color = if (isPressed) pressedBackgroundColor else backgroundColor
             )
             .border(
                 width = 1.dp,
-                color = strokeColor,
+                color = if (isPressed) pressedStrokeColor else strokeColor,
                 shape = checkboxShape
             )
     )
@@ -156,3 +165,32 @@ private fun getBackgroundColor(
         }
     }
 }
+
+@Composable
+private fun getPressedIconTintColor(style: PokitCheckboxStyle): Color {
+    return when (style) {
+        PokitCheckboxStyle.FILLED -> PokitTheme.colors.inverseWh
+        PokitCheckboxStyle.STROKE -> PokitTheme.colors.brandLight
+        PokitCheckboxStyle.ICON_ONLY -> PokitTheme.colors.brandLight
+    }
+}
+
+@Composable
+private fun getPressedStrokeColor(style: PokitCheckboxStyle): Color {
+    return when (style) {
+        PokitCheckboxStyle.FILLED -> Color.Unspecified
+        PokitCheckboxStyle.STROKE -> PokitTheme.colors.brandLight
+        PokitCheckboxStyle.ICON_ONLY -> Color.Unspecified
+    }
+}
+
+@Composable
+private fun getPressedBackgroundColor(
+    style: PokitCheckboxStyle,
+): Color {
+    return when (style) {
+        PokitCheckboxStyle.FILLED -> PokitTheme.colors.brandLight
+        PokitCheckboxStyle.STROKE -> PokitTheme.colors.backgroundBase
+        PokitCheckboxStyle.ICON_ONLY -> Color.Unspecified
+    }
+}

core/ui/src/main/java/pokitmons/pokit/core/ui/components/atom/chip/subcomponents/container/PokitChipContainerModifier.kt

@@ -2,13 +2,10 @@ package pokitmons.pokit.core.ui.components.atom.chip.subcomponents.container
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
@@ -18,6 +15,7 @@ import pokitmons.pokit.core.ui.components.atom.chip.attributes.PokitChipSize
 import pokitmons.pokit.core.ui.components.atom.chip.attributes.PokitChipState
 import pokitmons.pokit.core.ui.components.atom.chip.attributes.PokitChipType
 import pokitmons.pokit.core.ui.theme.PokitTheme
+import pokitmons.pokit.core.ui.utils.scaleClickable
 
 @Composable
 internal fun Modifier.pokitChipContainerModifier(
@@ -35,11 +33,9 @@ internal fun Modifier.pokitChipContainerModifier(
         .clip(
             shape = RoundedCornerShape(9999.dp)
         )
-        .clickable(
+        .scaleClickable(
             enabled = (onClick != null && state != PokitChipState.DISABLED),
-            onClick = onClick ?: {},
-            interactionSource = remember { MutableInteractionSource() },
-            indication = null
+            onClick = onClick ?: {}
         )
         .background(
             shape = RoundedCornerShape(9999.dp),

core/ui/src/main/java/pokitmons/pokit/core/ui/components/atom/input/subcomponents/icon/PokitInputIcon.kt

@@ -2,9 +2,11 @@ package pokitmons.pokit.core.ui.components.atom.input.subcomponents.icon
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -20,20 +22,25 @@ internal fun PokitInputIcon(
     onClick: (() -> Unit)? = null,
 ) {
     val iconColor = getColor(state = state)
+    val pressedIconColor = PokitTheme.colors.iconDisable
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
 
     Icon(
         painter = painterResource(id = resourceId),
         contentDescription = null,
-        tint = iconColor,
-        modifier = Modifier.size(24.dp).then(
-            other = onClick?.let { method ->
-                Modifier.clickable(
-                    indication = null,
-                    interactionSource = remember { MutableInteractionSource() },
-                    onClick = method
-                )
-            } ?: Modifier
-        )
+        tint = if (isPressed) pressedIconColor else iconColor,
+        modifier = Modifier
+            .size(24.dp)
+            .then(
+                other = onClick?.let { method ->
+                    Modifier.clickable(
+                        onClick = method,
+                        indication = null,
+                        interactionSource = interactionSource
+                    )
+                } ?: Modifier
+            )
     )
 }
 

core/ui/src/main/java/pokitmons/pokit/core/ui/components/atom/loginbutton/PokitLoginButton.kt

@@ -1,6 +1,9 @@
 package pokitmons.pokit.core.ui.components.atom.loginbutton
 
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.border
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -12,8 +15,11 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.scale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import pokitmons.pokit.core.ui.R
@@ -29,9 +35,13 @@ fun PokitLoginButton(
     text: String,
 ) {
     val loginResource: PokitLoginResource = getLoginResource(loginType)
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val scale by animateFloatAsState(targetValue = if (isPressed) 0.95f else 1f, label = "scale")
 
     Surface(
         modifier = Modifier
+            .scale(scale)
             .height(50.dp)
             .border(
                 shape = RoundedCornerShape(8.dp),
@@ -40,7 +50,8 @@ fun PokitLoginButton(
             ),
         shape = RoundedCornerShape(8.dp),
         color = loginResource.backgroundColor,
-        onClick = onClick
+        onClick = onClick,
+        interactionSource = interactionSource
     ) {
         Row(
             modifier = modifier.fillMaxWidth(),

core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/linkcard/LinkCard.kt

@@ -36,7 +36,7 @@ import pokitmons.pokit.core.ui.R
 import pokitmons.pokit.core.ui.components.atom.checkbox.PokitCheckbox
 import pokitmons.pokit.core.ui.components.atom.checkbox.attributes.PokitCheckboxStyle
 import pokitmons.pokit.core.ui.theme.PokitTheme
-import pokitmons.pokit.core.ui.utils.noRippleClickable
+import pokitmons.pokit.core.ui.utils.scaleClickable
 
 @Composable
 fun<T> LinkCard(
@@ -58,7 +58,9 @@ fun<T> LinkCard(
         Row(
             modifier = Modifier
                 .clip(RoundedCornerShape(8.dp))
-                .noRippleClickable { onClickItem(item) }
+                .scaleClickable(pressedScale = 0.98f) {
+                    onClickItem(item)
+                }
         ) {
             Box(
                 modifier = Modifier

core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/linkurlcard/LinkUrlCard.kt

@@ -1,7 +1,11 @@
 package pokitmons.pokit.core.ui.components.block.linkurlcard
 
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.IntrinsicSize
@@ -15,15 +19,17 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.unit.dp
 import pokitmons.pokit.core.ui.theme.PokitTheme
 import pokitmons.pokit.core.ui.utils.conditional
-import pokitmons.pokit.core.ui.utils.noRippleClickable
 import pokitmons.pokit.core.ui.utils.shimmerEffect
 
 @Composable
@@ -36,13 +42,20 @@ fun LinkUrlCard(
     isLoading: Boolean = false,
 ) {
     val uriHandler = LocalUriHandler.current
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val scale by animateFloatAsState(targetValue = if (isPressed) 0.98f else 1f, label = "scale")
 
     Row(
         modifier = modifier
             .fillMaxWidth()
+            .scale(scale)
             .clip(RoundedCornerShape(12.dp))
             .height(IntrinsicSize.Min)
-            .noRippleClickable {
+            .clickable(
+                indication = null,
+                interactionSource = interactionSource
+            ) {
                 if (openWebBrowserByClick && !isLoading) {
                     uriHandler.openUri(url)
                 }
@@ -54,13 +67,20 @@ fun LinkUrlCard(
             )
     ) {
         if (isLoading) {
-            Box(modifier = Modifier.width(124.dp).fillMaxHeight().shimmerEffect())
+            Box(
+                modifier = Modifier
+                    .width(124.dp)
+                    .fillMaxHeight()
+                    .shimmerEffect()
+            )
         } else {
             Image(
                 painter = thumbnailPainter,
                 contentDescription = null,
                 contentScale = ContentScale.Crop,
-                modifier = Modifier.width(124.dp).fillMaxHeight()
+                modifier = Modifier
+                    .width(124.dp)
+                    .fillMaxHeight()
             )
         }
 
@@ -70,7 +90,9 @@ fun LinkUrlCard(
                 .weight(1f)
         ) {
             Text(
-                modifier = Modifier.fillMaxWidth().conditional(isLoading) { shimmerEffect() },
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .conditional(isLoading) { shimmerEffect() },
                 text = title,
                 maxLines = 2,
                 style = PokitTheme.typography.body3Medium.copy(color = PokitTheme.colors.textSecondary)
@@ -79,7 +101,9 @@ fun LinkUrlCard(
             Spacer(modifier = Modifier.height(8.dp))
 
             Text(
-                modifier = Modifier.fillMaxWidth().conditional(isLoading) { shimmerEffect() },
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .conditional(isLoading) { shimmerEffect() },
                 text = url,
                 maxLines = 2,
                 style = PokitTheme.typography.detail2.copy(color = PokitTheme.colors.textTertiary)

core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/pokitcard/PokitCard.kt

@@ -26,7 +26,7 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import pokitmons.pokit.core.ui.R
 import pokitmons.pokit.core.ui.theme.PokitTheme
-import pokitmons.pokit.core.ui.utils.noRippleClickable
+import pokitmons.pokit.core.ui.utils.scaleClickable
 
 @Composable
 fun PokitCard(
@@ -42,11 +42,11 @@ fun PokitCard(
             .clip(
                 shape = RoundedCornerShape(8.dp)
             )
+            .scaleClickable { onClick() }
             .background(
                 color = PokitTheme.colors.backgroundPrimary,
                 shape = RoundedCornerShape(8.dp)
             )
-            .noRippleClickable { onClick() }
             .padding(top = 12.dp, start = 12.dp, bottom = 8.dp, end = 8.dp)
     ) {
         Row(