Merge pull request #201 from SOPT-all/feat/#199-reigster-step-animation

[FEAT/#199] Register Screen step이동시 애니메이션을 추가합니다.
spooooony · Feb 21, 2025 · 924231c · 924231c
2 parents fd2970e + 9a89d0f
commit 924231c
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 7 deletions.
diff --git a/app/src/main/java/com/spoony/spoony/presentation/register/RegisterScreen.kt b/app/src/main/java/com/spoony/spoony/presentation/register/RegisterScreen.kt
@@ -61,14 +61,13 @@ fun RegisterScreen(
             modifier = modifier
                 .fillMaxSize()
                 .background(SpoonyAndroidTheme.colors.white)
-                .padding(horizontal = 20.dp)
         ) {
             TopLinearProgressBar(
                 currentStep = state.currentStep,
                 totalSteps = 3f,
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(top = 56.dp, bottom = 10.dp)
+                    .padding(top = 56.dp, bottom = 10.dp, start = 20.dp, end = 20.dp)
             )
 
             NavHost(

diff --git a/app/src/main/java/com/spoony/spoony/presentation/register/RegisterStepOneScreen.kt b/app/src/main/java/com/spoony/spoony/presentation/register/RegisterStepOneScreen.kt
@@ -1,5 +1,10 @@
 package com.spoony.spoony.presentation.register
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -72,7 +77,7 @@ fun RegisterStepOneScreen(
             .addFocusCleaner(focusManager)
             .advancedImePadding()
             .verticalScroll(rememberScrollState())
-            .padding(top = 22.dp, bottom = 17.dp)
+            .padding(top = 22.dp, bottom = 17.dp, start = 20.dp, end = 20.dp)
     ) {
         Text(
             text = "나의 찐맛집을 등록해볼까요?",
@@ -291,7 +296,11 @@ private fun MenuSection(
 
         Spacer(modifier = Modifier.height(8.dp))
 
-        if (menuList.size < MAX_MENU_COUNT) {
+        AnimatedVisibility(
+            visible = menuList.size < MAX_MENU_COUNT,
+            enter = slideInVertically(initialOffsetY = { it }) + fadeIn(),
+            exit = slideOutVertically(targetOffsetY = { it }) + fadeOut()
+        ) {
             AddMenuButton(onClick = onMenuAdd)
         }
     }

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
@@ -73,7 +73,7 @@ fun RegisterStepTwoScreen(
             .fillMaxSize()
             .addFocusCleaner(focusManager)
             .verticalScroll(rememberScrollState())
-            .padding(top = 22.dp, bottom = 17.dp)
+            .padding(top = 22.dp, bottom = 17.dp, start = 20.dp, end = 20.dp)
     ) {
         Text(
             text = "거의 다 왔어요!",

diff --git a/app/src/main/java/com/spoony/spoony/presentation/register/navigation/RegisterNavigation.kt b/app/src/main/java/com/spoony/spoony/presentation/register/navigation/RegisterNavigation.kt
@@ -1,5 +1,7 @@
 package com.spoony.spoony.presentation.register.navigation
 
+import androidx.compose.animation.AnimatedContentTransitionScope
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
@@ -39,7 +41,20 @@ fun NavGraphBuilder.registerGraph(
     viewModel: RegisterViewModel,
     onResetRegisterState: () -> Unit
 ) {
-    composable<RegisterRoute.StepOne> {
+    composable<RegisterRoute.StepOne>(
+        enterTransition = {
+            slideIntoContainer(
+                AnimatedContentTransitionScope.SlideDirection.Right,
+                animationSpec = tween(500)
+            )
+        },
+        exitTransition = {
+            slideOutOfContainer(
+                AnimatedContentTransitionScope.SlideDirection.Left,
+                animationSpec = tween(500)
+            )
+        }
+    ) {
         RegisterStepOneScreen(
             viewModel = viewModel,
             onNextClick = {
@@ -52,7 +67,20 @@ fun NavGraphBuilder.registerGraph(
         )
     }
 
-    composable<RegisterRoute.StepTwo> {
+    composable<RegisterRoute.StepTwo>(
+        enterTransition = {
+            slideIntoContainer(
+                AnimatedContentTransitionScope.SlideDirection.Left,
+                animationSpec = tween(500)
+            )
+        },
+        exitTransition = {
+            slideOutOfContainer(
+                AnimatedContentTransitionScope.SlideDirection.Right,
+                animationSpec = tween(500)
+            )
+        }
+    ) {
         RegisterStepTwoScreen(
             viewModel = viewModel,
             onStepTwoComplete = {