Merge pull request #105 from YAPP-Github/ui/#103-withdrawal

Author: wjdrjs00

app/src/main/AndroidManifest.xml

@@ -17,6 +17,7 @@
         tools:targetApi="31">
         <activity
             android:name=".MainActivity"
+            android:windowSoftInputMode="adjustResize"
             android:exported="true"
             android:theme="@style/Theme.Bitnagil">
             <intent-filter>

app/src/main/java/com/threegap/bitnagil/MainNavHost.kt

@@ -16,6 +16,7 @@ import com.threegap.bitnagil.presentation.setting.SettingScreenContainer
 import com.threegap.bitnagil.presentation.splash.SplashScreenContainer
 import com.threegap.bitnagil.presentation.terms.TermsAgreementScreenContainer
 import com.threegap.bitnagil.presentation.webview.BitnagilWebViewScreen
+import com.threegap.bitnagil.presentation.withdrawal.WithdrawalScreenContainer
 import com.threegap.bitnagil.presentation.writeroutine.WriteRoutineScreenContainer
 import com.threegap.bitnagil.presentation.writeroutine.WriteRoutineViewModel
 import com.threegap.bitnagil.presentation.writeroutine.model.navarg.WriteRoutineScreenArg
@@ -166,6 +167,9 @@ fun MainNavHost(
                         }
                     }
                 },
+                navigateToWithdrawal = {
+                    navigator.navController.navigate(Route.Withdrawal)
+                },
             )
         }
 
@@ -223,5 +227,22 @@ fun MainNavHost(
                 },
             )
         }
+
+        composable<Route.Withdrawal> {
+            WithdrawalScreenContainer(
+                navigateToBack = {
+                    if (navigator.navController.previousBackStackEntry != null) {
+                        navigator.navController.popBackStack()
+                    }
+                },
+                navigateToLogin = {
+                    navigator.navController.navigate(Route.Login) {
+                        popUpTo(0) {
+                            inclusive = true
+                        }
+                    }
+                },
+            )
+        }
     }
 }

app/src/main/java/com/threegap/bitnagil/MainScreen.kt

@@ -1,11 +1,11 @@
 package com.threegap.bitnagil
 
 import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.exclude
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.only
+import androidx.compose.foundation.layout.ime
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.systemBars
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -18,7 +18,7 @@ fun MainScreen(
 ) {
     Scaffold(
         modifier = modifier.fillMaxSize(),
-        contentWindowInsets = WindowInsets.systemBars.only(WindowInsetsSides.Bottom),
+        contentWindowInsets = WindowInsets.navigationBars.exclude(WindowInsets.ime),
         containerColor = BitnagilTheme.colors.white,
     ) { innerPadding ->
         MainNavHost(

app/src/main/java/com/threegap/bitnagil/Route.kt

@@ -38,4 +38,7 @@ sealed interface Route {
 
     @Serializable
     data object Emotion : Route
+
+    @Serializable
+    data object Withdrawal : Route
 }

core/designsystem/src/main/java/com/threegap/bitnagil/designsystem/component/atom/BitnagilSelectButton.kt

@@ -1,44 +1,57 @@
 package com.threegap.bitnagil.designsystem.component.atom
 
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsPressedAsState
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
 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.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.semantics.role
 import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.threegap.bitnagil.designsystem.BitnagilTheme
+import com.threegap.bitnagil.designsystem.R
 
 @Composable
 fun BitnagilSelectButton(
     title: String,
     onClick: (() -> Unit)?,
     modifier: Modifier = Modifier,
+    titleTextStyle: TextStyle = BitnagilTheme.typography.subtitle1SemiBold,
     description: String? = null,
     selected: Boolean = false,
     colors: BitnagilSelectButtonColor = BitnagilSelectButtonColor.default(),
     shape: Shape = RoundedCornerShape(12.dp),
 ) {
-    val interactionSource = remember { MutableInteractionSource() }
+    val interactionSource = remember(onClick) { MutableInteractionSource() }
     val isPressed by interactionSource.collectIsPressedAsState()
+    val iconAlpha by animateFloatAsState(
+        targetValue = if (selected) 1f else 0f,
+        animationSpec = tween(200),
+        label = "iconAlpha",
+    )
 
     val backgroundColor = when {
         isPressed -> colors.pressedBackgroundColor
@@ -52,7 +65,7 @@ fun BitnagilSelectButton(
         else -> colors.defaultContentColor
     }
 
-    Column(
+    Row(
         modifier = modifier
             .fillMaxWidth()
             .clip(shape)
@@ -68,30 +81,38 @@ fun BitnagilSelectButton(
                     it
                 }
             }
-            .padding(horizontal = 20.dp, vertical = 16.dp)
+            .padding(horizontal = 20.dp, vertical = 14.dp)
             .semantics {
                 role = Role.Button
             },
-        verticalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically,
     ) {
-        Text(
-            text = title,
-            color = contentColor,
-            style = if (description == null) {
-                BitnagilTheme.typography.body1Regular
-            } else {
-                BitnagilTheme.typography.subtitle1SemiBold
-            },
-        )
-
-        description?.let {
-            Spacer(modifier = Modifier.height(4.dp))
+        Column(
+            modifier = Modifier.weight(1f),
+        ) {
             Text(
-                text = description,
+                text = title,
                 color = contentColor,
-                style = BitnagilTheme.typography.body2Regular,
+                style = titleTextStyle,
             )
+
+            description?.let {
+                Spacer(modifier = Modifier.height(2.dp))
+                Text(
+                    text = description,
+                    color = contentColor,
+                    style = BitnagilTheme.typography.body2Medium,
+                )
+            }
         }
+
+        BitnagilIcon(
+            id = R.drawable.ic_check_circle_orange,
+            tint = null,
+            modifier = Modifier
+                .size(28.dp)
+                .alpha(iconAlpha),
+        )
     }
 }
 
@@ -107,12 +128,22 @@ data class BitnagilSelectButtonColor(
     companion object {
         @Composable
         fun default(): BitnagilSelectButtonColor = BitnagilSelectButtonColor(
-            defaultBackgroundColor = BitnagilTheme.colors.white,
-            selectedBackgroundColor = BitnagilTheme.colors.lightBlue200,
-            pressedBackgroundColor = BitnagilTheme.colors.lightBlue200,
+            defaultBackgroundColor = BitnagilTheme.colors.coolGray99,
+            selectedBackgroundColor = BitnagilTheme.colors.orange50,
+            pressedBackgroundColor = BitnagilTheme.colors.orange50,
             defaultContentColor = BitnagilTheme.colors.coolGray50,
-            selectedContentColor = BitnagilTheme.colors.navy500,
-            pressedContentColor = BitnagilTheme.colors.navy500,
+            selectedContentColor = BitnagilTheme.colors.orange500,
+            pressedContentColor = BitnagilTheme.colors.orange500,
+        )
+
+        @Composable
+        fun withdrawal(): BitnagilSelectButtonColor = BitnagilSelectButtonColor(
+            defaultBackgroundColor = BitnagilTheme.colors.coolGray99,
+            selectedBackgroundColor = BitnagilTheme.colors.orange50,
+            pressedBackgroundColor = BitnagilTheme.colors.orange50,
+            defaultContentColor = BitnagilTheme.colors.coolGray80,
+            selectedContentColor = BitnagilTheme.colors.orange500,
+            pressedContentColor = BitnagilTheme.colors.orange500,
         )
     }
 }
@@ -128,9 +159,26 @@ private fun Preview() {
 
         Spacer(modifier = Modifier.height(12.dp))
 
+        BitnagilSelectButton(
+            title = "루틴명",
+            selected = true,
+            onClick = {},
+        )
+
+        Spacer(modifier = Modifier.height(12.dp))
+
+        BitnagilSelectButton(
+            title = "루틴명",
+            description = "세부 루틴 한 줄 설명",
+            onClick = {},
+        )
+
+        Spacer(modifier = Modifier.height(12.dp))
+
         BitnagilSelectButton(
             title = "루틴명",
             description = "세부 루틴 한 줄 설명",
+            selected = true,
             onClick = {},
         )
     }

core/designsystem/src/main/res/drawable/ic_check_circle_orange.xml

@@ -0,0 +1,23 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#FE7120"
+        android:pathData="M12.174,21.19C11.914,21.19 11.634,21.46 11.374,21.44C11.114,21.42 10.844,21.31 10.594,21.26C10.344,21.21 10.104,21.02 9.854,20.95C9.604,20.88 9.384,20.72 9.134,20.63C8.884,20.54 8.654,20.44 8.414,20.33C8.174,20.22 7.954,20.11 7.724,19.98C7.494,19.85 7.374,19.58 7.164,19.43C6.954,19.28 6.464,19.48 6.264,19.31C6.064,19.14 6.064,18.74 5.884,18.56C5.704,18.38 5.414,18.28 5.244,18.08C5.074,17.88 5.034,17.59 4.884,17.37C4.734,17.15 4.404,17.06 4.274,16.83C4.144,16.6 3.934,16.4 3.824,16.16C3.714,15.92 3.614,15.66 3.524,15.41C3.434,15.16 3.284,14.92 3.214,14.66C3.144,14.4 3.314,14.09 3.274,13.83C3.234,13.57 3.344,13.3 3.324,13.03C3.304,12.76 3.184,12.52 3.184,12.25C3.184,11.98 3.184,11.72 3.204,11.46C3.224,11.2 3.204,10.93 3.244,10.67C3.284,10.41 3.154,10.1 3.224,9.85C3.294,9.6 3.514,9.37 3.604,9.13C3.694,8.89 3.744,8.61 3.854,8.37C3.964,8.13 4.254,7.98 4.384,7.75C4.514,7.52 4.714,7.34 4.864,7.13C5.014,6.92 4.904,6.49 5.074,6.29C5.244,6.09 5.724,6.17 5.904,5.98C6.084,5.79 6.194,5.53 6.394,5.36C6.594,5.19 6.884,5.15 7.104,5C7.324,4.85 7.544,4.74 7.764,4.61C7.984,4.48 8.204,4.37 8.444,4.26C8.684,4.15 8.844,3.88 9.094,3.79C9.344,3.7 9.624,3.78 9.884,3.71C10.144,3.64 10.374,3.6 10.634,3.55C10.894,3.5 11.114,3.28 11.384,3.26C11.654,3.24 11.904,2.97 12.174,2.97C12.444,2.97 12.674,3.5 12.934,3.53C13.194,3.56 13.474,3.34 13.734,3.39C13.994,3.44 14.184,3.74 14.434,3.81C14.684,3.88 14.924,3.91 15.174,4C15.424,4.09 15.734,3.99 15.974,4.1C16.214,4.21 16.574,4.1 16.794,4.24C17.014,4.38 17.274,4.51 17.484,4.66C17.694,4.81 17.734,5.22 17.934,5.38C18.134,5.54 18.514,5.54 18.694,5.72C18.874,5.9 19.074,6.11 19.244,6.31C19.414,6.51 19.374,6.88 19.524,7.1C19.674,7.32 19.814,7.53 19.944,7.76C20.074,7.99 20.084,8.27 20.204,8.5C20.324,8.73 20.614,8.89 20.704,9.14C20.794,9.39 20.674,9.69 20.744,9.95C20.814,10.21 20.824,10.45 20.864,10.71C20.904,10.97 21.324,11.18 21.344,11.44C21.364,11.7 21.314,11.98 21.314,12.24C21.314,12.5 21.304,12.78 21.284,13.04C21.264,13.3 20.904,13.52 20.854,13.77C20.804,14.02 21.164,14.38 21.104,14.63C21.044,14.88 20.684,15.06 20.594,15.3C20.504,15.54 20.314,15.74 20.204,15.98C20.094,16.22 19.914,16.4 19.784,16.63C19.654,16.86 19.494,17.04 19.344,17.26C19.194,17.48 19.244,17.83 19.084,18.03C18.924,18.23 18.664,18.35 18.474,18.53C18.284,18.71 18.154,18.94 17.954,19.11C17.754,19.28 17.704,19.66 17.494,19.81C17.284,19.96 16.894,19.87 16.674,20C16.454,20.13 16.224,20.26 15.984,20.37C15.744,20.48 15.464,20.47 15.224,20.56C14.984,20.65 14.774,20.85 14.524,20.92C14.274,20.99 13.994,20.9 13.734,20.95C13.474,21 13.224,20.99 12.964,21.02C12.704,21.05 12.464,21.15 12.194,21.15L12.174,21.19Z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M12.174,21.19C11.914,21.19 11.634,21.46 11.374,21.44C11.114,21.42 10.844,21.31 10.594,21.26C10.344,21.21 10.104,21.02 9.854,20.95C9.604,20.88 9.384,20.72 9.134,20.63C8.884,20.54 8.654,20.44 8.414,20.33C8.174,20.22 7.954,20.11 7.724,19.98C7.494,19.85 7.374,19.58 7.164,19.43C6.954,19.28 6.464,19.48 6.264,19.31C6.064,19.14 6.064,18.74 5.884,18.56C5.704,18.38 5.414,18.28 5.244,18.08C5.074,17.88 5.034,17.59 4.884,17.37C4.734,17.15 4.404,17.06 4.274,16.83C4.144,16.6 3.934,16.4 3.824,16.16C3.714,15.92 3.614,15.66 3.524,15.41C3.434,15.16 3.284,14.92 3.214,14.66C3.144,14.4 3.314,14.09 3.274,13.83C3.234,13.57 3.344,13.3 3.324,13.03C3.304,12.76 3.184,12.52 3.184,12.25C3.184,11.98 3.184,11.72 3.204,11.46C3.224,11.2 3.204,10.93 3.244,10.67C3.284,10.41 3.154,10.1 3.224,9.85C3.294,9.6 3.514,9.37 3.604,9.13C3.694,8.89 3.744,8.61 3.854,8.37C3.964,8.13 4.254,7.98 4.384,7.75C4.514,7.52 4.714,7.34 4.864,7.13C5.014,6.92 4.904,6.49 5.074,6.29C5.244,6.09 5.724,6.17 5.904,5.98C6.084,5.79 6.194,5.53 6.394,5.36C6.594,5.19 6.884,5.15 7.104,5C7.324,4.85 7.544,4.74 7.764,4.61C7.984,4.48 8.204,4.37 8.444,4.26C8.684,4.15 8.844,3.88 9.094,3.79C9.344,3.7 9.624,3.78 9.884,3.71C10.144,3.64 10.374,3.6 10.634,3.55C10.894,3.5 11.114,3.28 11.384,3.26C11.654,3.24 11.904,2.97 12.174,2.97C12.444,2.97 12.674,3.5 12.934,3.53C13.194,3.56 13.474,3.34 13.734,3.39C13.994,3.44 14.184,3.74 14.434,3.81C14.684,3.88 14.924,3.91 15.174,4C15.424,4.09 15.734,3.99 15.974,4.1C16.214,4.21 16.574,4.1 16.794,4.24C17.014,4.38 17.274,4.51 17.484,4.66C17.694,4.81 17.734,5.22 17.934,5.38C18.134,5.54 18.514,5.54 18.694,5.72C18.874,5.9 19.074,6.11 19.244,6.31C19.414,6.51 19.374,6.88 19.524,7.1C19.674,7.32 19.814,7.53 19.944,7.76C20.074,7.99 20.084,8.27 20.204,8.5C20.324,8.73 20.614,8.89 20.704,9.14C20.794,9.39 20.674,9.69 20.744,9.95C20.814,10.21 20.824,10.45 20.864,10.71C20.904,10.97 21.324,11.18 21.344,11.44C21.364,11.7 21.314,11.98 21.314,12.24C21.314,12.5 21.304,12.78 21.284,13.04C21.264,13.3 20.904,13.52 20.854,13.77C20.804,14.02 21.164,14.38 21.104,14.63C21.044,14.88 20.684,15.06 20.594,15.3C20.504,15.54 20.314,15.74 20.204,15.98C20.094,16.22 19.914,16.4 19.784,16.63C19.654,16.86 19.494,17.04 19.344,17.26C19.194,17.48 19.244,17.83 19.084,18.03C18.924,18.23 18.664,18.35 18.474,18.53C18.284,18.71 18.154,18.94 17.954,19.11C17.754,19.28 17.704,19.66 17.494,19.81C17.284,19.96 16.894,19.87 16.674,20C16.454,20.13 16.224,20.26 15.984,20.37C15.744,20.48 15.464,20.47 15.224,20.56C14.984,20.65 14.774,20.85 14.524,20.92C14.274,20.99 13.994,20.9 13.734,20.95C13.474,21 13.224,20.99 12.964,21.02C12.704,21.05 12.464,21.15 12.194,21.15L12.174,21.19Z"
+        android:strokeWidth="2"
+        android:strokeColor="#FE7120"
+        android:strokeLineCap="round"
+        android:strokeLineJoin="round" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M15.284,10.39C15.004,10.67 15.054,10.72 14.764,11.01C14.474,11.3 14.364,11.18 14.084,11.47C13.804,11.76 13.694,11.65 13.404,11.93C13.114,12.21 13.034,12.13 12.744,12.41C12.454,12.69 12.564,12.8 12.274,13.09C11.984,13.38 11.994,13.38 11.704,13.67C11.414,13.96 11.554,13.98 11.144,14.01C10.794,14.03 10.824,14.12 10.574,13.87C10.324,13.62 10.394,13.55 10.144,13.3C9.894,13.05 9.784,13.16 9.534,12.91C9.284,12.66 9.334,12.61 9.084,12.35"
+        android:strokeWidth="2"
+        android:strokeColor="#ffffff"
+        android:strokeLineCap="round"
+        android:strokeLineJoin="round" />
+</vector>

presentation/src/main/java/com/threegap/bitnagil/presentation/setting/SettingScreen.kt

@@ -30,6 +30,7 @@ import com.threegap.bitnagil.designsystem.modifier.clickableWithoutRipple
 import com.threegap.bitnagil.presentation.common.flow.collectAsEffect
 import com.threegap.bitnagil.presentation.setting.component.atom.settingtitle.SettingTitle
 import com.threegap.bitnagil.presentation.setting.component.block.LogoutConfirmDialog
+import com.threegap.bitnagil.presentation.setting.model.mvi.SettingIntent
 import com.threegap.bitnagil.presentation.setting.model.mvi.SettingSideEffect
 import com.threegap.bitnagil.presentation.setting.model.mvi.SettingState
 
@@ -40,12 +41,14 @@ fun SettingScreenContainer(
     navigateToTermsOfService: () -> Unit,
     navigateToPrivacyPolicy: () -> Unit,
     navigateToLogin: () -> Unit,
+    navigateToWithdrawal: () -> Unit,
 ) {
     val state by viewModel.stateFlow.collectAsState()
 
     viewModel.sideEffectFlow.collectAsEffect { sideEffect ->
         when (sideEffect) {
             SettingSideEffect.NavigateToLogin -> navigateToLogin()
+            SettingSideEffect.NavigateToWithdrawal -> navigateToWithdrawal()
         }
     }
 
@@ -65,7 +68,7 @@ fun SettingScreenContainer(
         onClickTermsOfService = navigateToTermsOfService,
         onClickPrivacyPolicy = navigateToPrivacyPolicy,
         onClickLogout = viewModel::showLogoutDialog,
-        onClickWithdrawal = {},
+        onClickWithdrawal = { viewModel.sendIntent(SettingIntent.OnWithdrawalClick) },
     )
 }
 

presentation/src/main/java/com/threegap/bitnagil/presentation/setting/SettingViewModel.kt

@@ -65,6 +65,11 @@ class SettingViewModel @Inject constructor(
             SettingIntent.LogoutFailure -> {
                 return state.copy(loading = false)
             }
+
+            SettingIntent.OnWithdrawalClick -> {
+                sendSideEffect(SettingSideEffect.NavigateToWithdrawal)
+                return null
+            }
         }
     }
 

presentation/src/main/java/com/threegap/bitnagil/presentation/setting/model/mvi/SettingIntent.kt

@@ -17,4 +17,5 @@ sealed class SettingIntent : MviIntent {
     data object LogoutLoading : SettingIntent()
     data object LogoutSuccess : SettingIntent()
     data object LogoutFailure : SettingIntent()
+    data object OnWithdrawalClick : SettingIntent()
 }

presentation/src/main/java/com/threegap/bitnagil/presentation/setting/model/mvi/SettingSideEffect.kt

@@ -4,4 +4,5 @@ import com.threegap.bitnagil.presentation.common.mviviewmodel.MviSideEffect
 
 sealed class SettingSideEffect : MviSideEffect {
     data object NavigateToLogin : SettingSideEffect()
+    data object NavigateToWithdrawal : SettingSideEffect()
 }