🔗 :: (#45) 버튼 패딩 조절

Team-return · Feb 7, 2024 · 7bc04a9 · 7bc04a9
2 parents fe25a37 + 24f9885
commit 7bc04a9
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 14 deletions.
diff --git a/jobisdesignsystemv2/build.gradle.kts b/jobisdesignsystemv2/build.gradle.kts
@@ -46,7 +46,7 @@ afterEvaluate {
                 from(components["release"])
                 groupId = "team.return.jobis.android"
                 artifactId = "design-system-v2"
-                version = "1.1.0"
+                version = "1.1.1"
             }
         }
     }

diff --git a/jobisdesignsystemv2/src/main/java/team/returm/jobisdesignsystemv2/button/JobisButton.kt b/jobisdesignsystemv2/src/main/java/team/returm/jobisdesignsystemv2/button/JobisButton.kt
@@ -4,9 +4,11 @@ import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -19,7 +21,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -30,8 +31,11 @@ import team.returm.jobisdesignsystemv2.foundation.JobisIcon
 import team.returm.jobisdesignsystemv2.foundation.JobisTheme
 import team.returm.jobisdesignsystemv2.foundation.JobisTypography
 import team.returm.jobisdesignsystemv2.text.JobisText
+import team.returm.jobisdesignsystemv2.utils.DEFAULT_PRESS_DEPTH
 import team.returm.jobisdesignsystemv2.utils.DURATION_MILLIS
+import team.returm.jobisdesignsystemv2.utils.MIN_PRESS_DEPTH
 import team.returm.jobisdesignsystemv2.utils.clickable
+import team.returm.jobisdesignsystemv2.utils.keyboardAsState
 
 private val largeButtonShape = RoundedCornerShape(12.dp)
 private val smallButtonShape = RoundedCornerShape(8.dp)
@@ -46,14 +50,35 @@ private fun BasicButton(
     onClick: () -> Unit,
     content: @Composable () -> Unit,
 ) {
+    val keyboardShow by keyboardAsState()
+    val padding = if (keyboardShow) {
+        PaddingValues(
+            vertical = 0.dp,
+            horizontal = 0.dp,
+        )
+    } else {
+        PaddingValues(
+            vertical = 12.dp,
+            horizontal = 24.dp,
+        )
+    }
+    val (shapeByKeyboardShow, pressDepth) = if (keyboardShow) {
+        RoundedCornerShape(0.dp) to MIN_PRESS_DEPTH
+    } else {
+        shape to DEFAULT_PRESS_DEPTH
+    }
+
     Surface(
         modifier = modifier
             .clickable(
+                pressDepth = pressDepth,
                 enabled = enabled,
                 onPressed = onPressed,
                 onClick = onClick,
-            ),
-        shape = shape,
+            )
+            .padding(padding)
+            .imePadding(),
+        shape = shapeByKeyboardShow,
         color = backgroundColor,
         content = content,
     )
@@ -145,9 +170,7 @@ private fun LargeButton(
     var pressed by remember { mutableStateOf(false) }
 
     ColoredButton(
-        modifier = modifier
-            .fillMaxWidth()
-            .clip(largeButtonShape),
+        modifier = modifier.fillMaxWidth(),
         color = color,
         shape = largeButtonShape,
         enabled = enabled,
@@ -192,7 +215,7 @@ private fun SmallButton(
     var pressed by remember { mutableStateOf(false) }
 
     ColoredButton(
-        modifier = modifier.clip(smallButtonShape),
+        modifier = modifier,
         color = color,
         shape = smallButtonShape,
         enabled = enabled,

diff --git a/...sdesignsystemv2/src/main/java/team/returm/jobisdesignsystemv2/textfield/JobisTextField.kt b/...sdesignsystemv2/src/main/java/team/returm/jobisdesignsystemv2/textfield/JobisTextField.kt
@@ -275,7 +275,10 @@ fun JobisTextField(
     Column(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(vertical = 12.dp),
+            .padding(
+                horizontal = 24.dp,
+                vertical = 12.dp,
+            ),
         horizontalAlignment = Alignment.Start,
         verticalArrangement = Arrangement.Center,
     ) {

diff --git a/jobisdesignsystemv2/src/main/java/team/returm/jobisdesignsystemv2/utils/Clickable.kt b/jobisdesignsystemv2/src/main/java/team/returm/jobisdesignsystemv2/utils/Clickable.kt
@@ -16,6 +16,9 @@ import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.pointerInteropFilter
 
 internal const val DURATION_MILLIS = 200
+internal const val DEFAULT_PRESS_DEPTH = 0.98f
+internal const val MIN_PRESS_DEPTH = 1f
+internal const val DEFAULT_DISABLED_MILLIS = 300L
 
 /**
  * This is the ripple upon click used by Jobis.
@@ -32,10 +35,10 @@ internal const val DURATION_MILLIS = 200
 @Composable
 fun Modifier.clickable(
     enabled: Boolean,
-    pressDepth: Float = 0.98f,
+    pressDepth: Float = DEFAULT_PRESS_DEPTH,
     onPressed: (pressed: Boolean) -> Unit,
     onClick: () -> Unit,
-    disabledMillis: Long = 300L,
+    disabledMillis: Long = DEFAULT_DISABLED_MILLIS,
 ): Modifier {
     var pressed by remember { mutableStateOf(false) }
     var lastClick by remember { mutableLongStateOf(0L) }
@@ -55,17 +58,16 @@ fun Modifier.clickable(
             scaleY = scale
         }
         .pointerInteropFilter { event ->
-            if (enabled && System.currentTimeMillis() - lastClick >= disabledMillis) {
+            if (enabled) {
                 when (event.action) {
                     MotionEvent.ACTION_DOWN -> {
                         pressed = true
                         onPressed(true)
                     }
-
                     MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
                         pressed = false
                         onPressed(false)
-                        if (event.action == MotionEvent.ACTION_UP) {
+                        if (event.action == MotionEvent.ACTION_UP && System.currentTimeMillis() - lastClick >= disabledMillis) {
                             lastClick = System.currentTimeMillis()
                             onClick()
                         }

diff --git a/jobisdesignsystemv2/src/main/java/team/returm/jobisdesignsystemv2/utils/KeyboardAsState.kt b/jobisdesignsystemv2/src/main/java/team/returm/jobisdesignsystemv2/utils/KeyboardAsState.kt
@@ -0,0 +1,14 @@
+package team.returm.jobisdesignsystemv2.utils
+
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.ime
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.ui.platform.LocalDensity
+
+@Composable
+fun keyboardAsState(): State<Boolean> {
+    val isImeVisible = WindowInsets.ime.getBottom(LocalDensity.current) > 0
+    return rememberUpdatedState(newValue = isImeVisible)
+}