[HOTFIX/#193] QA 및 디테일 수정

spooooony · Jan 29, 2025 · 746b02f · 746b02f
1 parent 6227584
commit 746b02f
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 12 deletions.
diff --git a/app/src/main/java/com/spoony/spoony/core/designsystem/component/tag/LogoTag.kt b/app/src/main/java/com/spoony/spoony/core/designsystem/component/tag/LogoTag.kt
@@ -26,6 +26,7 @@ import com.spoony.spoony.R
 import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme
 import com.spoony.spoony.core.designsystem.theme.SpoonyTypography
 import com.spoony.spoony.core.designsystem.type.TagSize
+import com.spoony.spoony.core.util.extension.rotateClick
 import com.spoony.spoony.core.util.extension.spoonyGradient
 
 @Composable
@@ -45,6 +46,7 @@ fun LogoTag(
 
     Row(
         modifier = modifier
+            .rotateClick()
             .clip(RoundedCornerShape(20.dp))
             .spoonyGradient(20.dp)
             .padding(paddingValues),

diff --git a/app/src/main/java/com/spoony/spoony/core/util/extension/ModifierExt.kt b/app/src/main/java/com/spoony/spoony/core/util/extension/ModifierExt.kt
@@ -1,15 +1,24 @@
 package com.spoony.spoony.core.util.extension
 
+import android.view.HapticFeedbackConstants
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.Indication
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
@@ -22,15 +31,20 @@ import androidx.compose.ui.geometry.RoundRect
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Path
 import androidx.compose.ui.graphics.drawscope.clipPath
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.layout.findRootCoordinates
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.layout.positionInWindow
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalView
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.spoony.spoony.core.designsystem.theme.black
 import com.spoony.spoony.core.designsystem.theme.gray500
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
 
 @Composable
 inline fun Modifier.noRippleClickable(crossinline onClick: () -> Unit): Modifier = composed {
@@ -89,3 +103,114 @@ fun Modifier.advancedImePadding() = composed {
         .consumeWindowInsets(PaddingValues(bottom = (consumePadding / LocalDensity.current.density).dp))
         .imePadding()
 }
+
+@Composable
+fun Modifier.hapticClick(
+    interactionSource: MutableInteractionSource = MutableInteractionSource(),
+    indication: Indication? = null,
+    enabled: Boolean = true,
+    onClickLabel: String? = null,
+    role: Role? = null,
+    onClick: () -> Unit = {},
+): Modifier = composed {
+    val view = LocalView.current
+
+    this.clickable(
+        interactionSource = interactionSource,
+        indication = indication,
+        enabled = enabled,
+        onClickLabel = onClickLabel,
+        role = role,
+        onClick = {
+            onClick()
+            view.performHapticFeedback(HapticFeedbackConstants.KEYBOARD_TAP)
+        }
+    )
+}
+
+@Composable
+fun Modifier.bounceClick(
+    scaleDown: Float = 0.8f,
+    scaleUp: Float = 1.2f,
+    defaultScale: Float = 1.0f,
+    onClick: () -> Unit = {},
+): Modifier = composed {
+    val scope = rememberCoroutineScope()
+    var isClicked by remember { mutableStateOf(false) }
+    val interactionSource = remember { MutableInteractionSource() }
+    val durationMillis by remember { mutableIntStateOf(100) }
+
+    LaunchedEffect(isClicked) {
+        if (isClicked) {
+            delay(150)
+            isClicked = false
+        }
+    }
+
+    val scaleXSate by animateFloatAsState(
+        targetValue = if (isClicked) scaleUp else defaultScale,
+        animationSpec = tween(
+            durationMillis = durationMillis,
+            easing = LinearEasing
+        ),
+        label = ""
+    )
+
+    val scaleYState by animateFloatAsState(
+        targetValue = if (isClicked) scaleDown else defaultScale,
+        animationSpec = tween(
+            durationMillis = durationMillis,
+            easing = LinearEasing
+        ),
+        label = ""
+    )
+
+    this
+        .graphicsLayer {
+            scaleX = scaleXSate
+            scaleY = scaleYState
+        }
+        .hapticClick(
+            interactionSource = interactionSource,
+            indication = null,
+            onClick = {
+                onClick()
+                scope.launch {
+                    // 화면 전환과 동시에 애니메이션이 들어갈 경우 부자연스러워짐을 방지하기 위한 delay
+                    delay(100)
+                    isClicked = true
+                }
+            }
+        )
+}
+
+@Composable
+fun Modifier.rotateClick(
+    scaleDown: Float = 0.01f,
+    rotateMax: Float = 1000f,
+    onClick: () -> Unit = {},
+): Modifier = composed {
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+
+    val scale by animateFloatAsState(
+        if (isPressed) scaleDown else 1f, label = ""
+    )
+
+    val rotation by animateFloatAsState(
+        if (isPressed) rotateMax else 1f, label = ""
+    )
+    this
+        .graphicsLayer {
+            scaleX = scale
+            scaleY = scale
+            rotationX = rotation
+            rotationY = rotation
+            rotationZ = rotation
+        }
+        .hapticClick(
+            interactionSource = interactionSource,
+            indication = null,
+            onClick = onClick
+        )
+}
diff --git a/app/src/main/java/com/spoony/spoony/presentation/main/component/MainBottomBar.kt b/app/src/main/java/com/spoony/spoony/presentation/main/component/MainBottomBar.kt
@@ -7,7 +7,6 @@ import androidx.compose.animation.slideIn
 import androidx.compose.animation.slideOut
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -16,13 +15,11 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.selection.selectable
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.key
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -32,6 +29,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme
+import com.spoony.spoony.core.util.extension.bounceClick
 import com.spoony.spoony.presentation.main.MainTab
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.toPersistentList
@@ -87,13 +85,7 @@ private fun RowScope.MainBottomBarItem(
 ) {
     Column(
         modifier = Modifier
-            .selectable(
-                selected = selected,
-                indication = null,
-                role = null,
-                interactionSource = remember { MutableInteractionSource() },
-                onClick = onClick
-            )
+            .bounceClick(onClick = onClick)
             .weight(1f),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.spacedBy(4.dp)

diff --git a/app/src/main/java/com/spoony/spoony/presentation/map/component/bottomsheet/MapListItem.kt b/app/src/main/java/com/spoony/spoony/presentation/map/component/bottomsheet/MapListItem.kt
@@ -57,7 +57,7 @@ fun MapListItem(
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis,
                     modifier = Modifier
-                        .weight(1f)
+                        .weight(1f,false)
                 )
                 IconTag(
                     text = categoryName,

diff --git a/app/src/main/java/com/spoony/spoony/presentation/register/RegisterStepTwoScreen.kt b/app/src/main/java/com/spoony/spoony/presentation/register/RegisterStepTwoScreen.kt
@@ -81,7 +81,7 @@ fun RegisterStepTwoScreen(
             color = SpoonyAndroidTheme.colors.black
         )
 
-        Spacer(modifier = Modifier.height(28.dp))
+        Spacer(modifier = Modifier.height(32.dp))
 
         ReviewSection(
             oneLineReview = state.oneLineReview,
@@ -147,6 +147,15 @@ private fun ReviewSection(
     modifier: Modifier = Modifier
 ) {
     Column(modifier = modifier) {
+
+        Text(
+            text = "당신의 맛집을 한 줄로 표현해 주세요",
+            style = SpoonyAndroidTheme.typography.body1sb,
+            color = SpoonyAndroidTheme.colors.black
+        )
+
+        Spacer(modifier = Modifier.height(12.dp))
+
         SpoonyLineTextField(
             value = oneLineReview,
             onValueChanged = onOneLineReviewChange,