Merge branch 'main' into feature/image-upload

# Conflicts: # presentation/src/main/java/com/keyme/presentation/onboarding/nickname/NicknameScreen.kt
Nexters · Aug 18, 2023 · 554e9d3 · 554e9d3
2 parents 1fea4d7 + f54e1f2
commit 554e9d3
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 43 deletions.
diff --git a/presentation/src/main/java/com/keyme/presentation/onboarding/OnboardingScreen.kt b/presentation/src/main/java/com/keyme/presentation/onboarding/OnboardingScreen.kt
@@ -1,18 +1,23 @@
 package com.keyme.presentation.onboarding
 
 import androidx.activity.compose.BackHandler
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.State
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.blur
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -22,6 +27,8 @@ import com.airbnb.lottie.compose.LottieCompositionSpec
 import com.airbnb.lottie.compose.LottieConstants
 import com.airbnb.lottie.compose.rememberLottieComposition
 import com.keyme.presentation.R
+import com.keyme.presentation.designsystem.theme.black_alpha_60
+import com.keyme.presentation.designsystem.theme.keyme_black
 import com.keyme.presentation.onboarding.guide.Guide01Screen
 import com.keyme.presentation.onboarding.guide.Guide02Screen
 import com.keyme.presentation.onboarding.guide.Guide03Screen
@@ -107,19 +114,22 @@ fun OnboardingScreen(
             state = pagerState,
             userScrollEnabled = false,
         ) {
+            val isVisible = it == pagerState.currentPage
+
             when (onboardingSteps[it]) {
                 OnboardingStepsEnum.KAKAO_SIGN_IN -> SignInScreen(
                     signInWithKeyme = viewModel::signInWithKeyme,
                 )
                 OnboardingStepsEnum.NICKNAME -> NicknameScreen(
-                    viewModel = viewModel,
+                    isVisible = isVisible,
                     onBackClick = {
                         coroutineScope.launch {
                             pagerState.scrollToPage(pagerState.currentPage - 1)
                         }
                     },
                 )
                 OnboardingStepsEnum.GUIDE_01 -> Guide01Screen(
+                    isVisible = isVisible,
                     getOnboardingKeymeTestId = viewModel::getOnboardingKeymeTest,
                     onClickNextButton = {
                         coroutineScope.launch {
@@ -128,20 +138,23 @@ fun OnboardingScreen(
                     },
                 )
                 OnboardingStepsEnum.GUIDE_02 -> Guide02Screen(
+                    isVisible = isVisible,
                     onClickNextButton = {
                         coroutineScope.launch {
                             pagerState.scrollToPage(pagerState.currentPage + 1)
                         }
                     },
                 )
                 OnboardingStepsEnum.GUIDE_03 -> Guide03Screen(
+                    isVisible = isVisible,
                     onClickNextButton = {
                         coroutineScope.launch {
                             pagerState.scrollToPage(pagerState.currentPage + 1)
                         }
                     },
                 )
                 OnboardingStepsEnum.GUIDE_04 -> Guide04Screen(
+                    isVisible = isVisible,
                     navigateToOnboardingKeymeTest = navigateToOnboardingKeymeTest,
                 )
                 OnboardingStepsEnum.MY_DAILY -> navigateToMyDaily.invoke()
@@ -150,6 +163,22 @@ fun OnboardingScreen(
     }
 }
 
+@Composable
+fun fadingAnimateFloatAsState(isAnimationFinished: Boolean): State<Float> {
+    return animateFloatAsState(
+        targetValue = if (isAnimationFinished) 1f else 0f,
+        animationSpec = tween(durationMillis = 500),
+    )
+}
+
+@Composable
+fun colorAnimateFloatAsState(isVisible: Boolean): State<Color> {
+    return animateColorAsState(
+        targetValue = if (isVisible) keyme_black else black_alpha_60,
+        animationSpec = tween(durationMillis = 1000),
+    )
+}
+
 @Composable
 @Preview(showBackground = true)
 fun OnboardingScreenPreview() {

diff --git a/presentation/src/main/java/com/keyme/presentation/onboarding/guide/Guide01Screen.kt b/presentation/src/main/java/com/keyme/presentation/onboarding/guide/Guide01Screen.kt
@@ -9,8 +9,12 @@ import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+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.alpha
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -24,21 +28,27 @@ import com.keyme.presentation.designsystem.component.KeymeText
 import com.keyme.presentation.designsystem.component.KeymeTextButton
 import com.keyme.presentation.designsystem.component.KeymeTextType
 import com.keyme.presentation.designsystem.theme.black_alpha_60
+import com.keyme.presentation.designsystem.theme.keyme_white
+import com.keyme.presentation.onboarding.fadingAnimateFloatAsState
 
 @Composable
 fun Guide01Screen(
+    isVisible: Boolean,
     getOnboardingKeymeTestId: () -> Unit,
     onClickNextButton: () -> Unit,
 ) {
     val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.animation_guide_01))
     val progress by animateLottieCompositionAsState(composition)
+    var isAnimationFinished by remember { mutableStateOf(false) }
+    isAnimationFinished = progress == 1.0f
 
     getOnboardingKeymeTestId.invoke()
 
     Box(
         modifier = Modifier
             .fillMaxSize()
-            .background(black_alpha_60),
+            .background(black_alpha_60)
+            .alpha(fadingAnimateFloatAsState(isAnimationFinished = isVisible).value),
     ) {
         LottieAnimation(
             composition = composition,
@@ -49,19 +59,7 @@ fun Guide01Screen(
             iterations = LottieConstants.IterateForever,
             contentScale = ContentScale.Crop,
         )
-        if (progress == 1.0f) {
-            KeymeTextButton(
-                text = "다음",
-                onClick = onClickNextButton,
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .wrapContentHeight()
-                    .padding(horizontal = 16.dp)
-                    .padding(bottom = 54.dp)
-                    .align(Alignment.BottomCenter),
-                enabled = true,
-            )
-        }
+
         KeymeText(
             text = "친구들이 생각하는\n나의 성격을 발견하고",
             keymeTextType = KeymeTextType.HEADING_1,
@@ -71,6 +69,20 @@ fun Guide01Screen(
                     start = 18.dp,
                     top = 74.dp,
                 ),
+            color = keyme_white,
+        )
+
+        KeymeTextButton(
+            text = "다음",
+            onClick = onClickNextButton,
+            modifier = Modifier
+                .fillMaxWidth()
+                .wrapContentHeight()
+                .padding(horizontal = 16.dp)
+                .padding(bottom = 54.dp)
+                .align(Alignment.BottomCenter)
+                .alpha(fadingAnimateFloatAsState(isAnimationFinished = isAnimationFinished).value),
+            enabled = true,
         )
     }
 }
@@ -79,6 +91,7 @@ fun Guide01Screen(
 @Preview(showBackground = true)
 fun Guide01ScreenPreview() {
     Guide01Screen(
+        isVisible = true,
         getOnboardingKeymeTestId = {},
         onClickNextButton = {},
     )

diff --git a/presentation/src/main/java/com/keyme/presentation/onboarding/guide/Guide02Screen.kt b/presentation/src/main/java/com/keyme/presentation/onboarding/guide/Guide02Screen.kt
@@ -9,8 +9,12 @@ import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+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.alpha
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -24,13 +28,18 @@ import com.keyme.presentation.designsystem.component.KeymeText
 import com.keyme.presentation.designsystem.component.KeymeTextButton
 import com.keyme.presentation.designsystem.component.KeymeTextType
 import com.keyme.presentation.designsystem.theme.black_alpha_60
+import com.keyme.presentation.designsystem.theme.keyme_white
+import com.keyme.presentation.onboarding.fadingAnimateFloatAsState
 
 @Composable
 fun Guide02Screen(
+    isVisible: Boolean,
     onClickNextButton: () -> Unit,
 ) {
     val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.animation_guide_02))
     val progress by animateLottieCompositionAsState(composition)
+    var isAnimationFinished by remember { mutableStateOf(false) }
+    isAnimationFinished = progress == 1.0f
 
     Box(
         modifier = Modifier
@@ -46,19 +55,7 @@ fun Guide02Screen(
             iterations = LottieConstants.IterateForever,
             contentScale = ContentScale.Crop,
         )
-        if (progress == 1.0f) {
-            KeymeTextButton(
-                text = "다음",
-                onClick = onClickNextButton,
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .wrapContentHeight()
-                    .padding(horizontal = 16.dp)
-                    .padding(bottom = 54.dp)
-                    .align(Alignment.BottomCenter),
-                enabled = true,
-            )
-        }
+
         KeymeText(
             text = "내가 생각한 나의 성격과\n비교해보세요",
             keymeTextType = KeymeTextType.HEADING_1,
@@ -67,7 +64,22 @@ fun Guide02Screen(
                 .padding(
                     start = 18.dp,
                     top = 74.dp,
-                ),
+                )
+                .alpha(fadingAnimateFloatAsState(isAnimationFinished = isVisible).value),
+            color = keyme_white,
+        )
+
+        KeymeTextButton(
+            text = "다음",
+            onClick = onClickNextButton,
+            modifier = Modifier
+                .fillMaxWidth()
+                .wrapContentHeight()
+                .padding(horizontal = 16.dp)
+                .padding(bottom = 54.dp)
+                .align(Alignment.BottomCenter)
+                .alpha(fadingAnimateFloatAsState(isAnimationFinished = isAnimationFinished).value),
+            enabled = true,
         )
     }
 }
@@ -76,6 +88,7 @@ fun Guide02Screen(
 @Preview(showBackground = true)
 fun Guide02ScreenPreview() {
     Guide02Screen(
+        isVisible = true,
         onClickNextButton = {},
     )
 }
diff --git a/presentation/src/main/java/com/keyme/presentation/onboarding/guide/Guide03Screen.kt b/presentation/src/main/java/com/keyme/presentation/onboarding/guide/Guide03Screen.kt
@@ -16,20 +16,24 @@ import com.airbnb.lottie.compose.LottieCompositionSpec
 import com.airbnb.lottie.compose.animateLottieCompositionAsState
 import com.airbnb.lottie.compose.rememberLottieComposition
 import com.keyme.presentation.R
-import com.keyme.presentation.designsystem.theme.black_alpha_60
+import com.keyme.presentation.onboarding.colorAnimateFloatAsState
 
 @Composable
 fun Guide03Screen(
+    isVisible: Boolean,
     onClickNextButton: () -> Unit,
 ) {
     val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.animation_guide_03))
     val progress by animateLottieCompositionAsState(composition)
 
     Box(
-        modifier = Modifier
-            .fillMaxSize()
-            .background(black_alpha_60),
+        modifier = Modifier.fillMaxSize(),
     ) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(colorAnimateFloatAsState(isVisible = isVisible).value),
+        )
         LottieAnimation(
             composition = composition,
             modifier = Modifier
@@ -46,6 +50,7 @@ fun Guide03Screen(
 @Preview(showBackground = true)
 fun Guide03ScreenPreview() {
     Guide03Screen(
+        isVisible = true,
         onClickNextButton = {},
     )
 }
diff --git a/presentation/src/main/java/com/keyme/presentation/onboarding/guide/Guide04Screen.kt b/presentation/src/main/java/com/keyme/presentation/onboarding/guide/Guide04Screen.kt
@@ -12,6 +12,7 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -25,10 +26,13 @@ import com.keyme.presentation.R
 import com.keyme.presentation.designsystem.component.KeymeText
 import com.keyme.presentation.designsystem.component.KeymeTextType
 import com.keyme.presentation.designsystem.theme.keyme_black
+import com.keyme.presentation.designsystem.theme.keyme_white
 import com.keyme.presentation.onboarding.OnboardingViewModel
+import com.keyme.presentation.onboarding.fadingAnimateFloatAsState
 
 @Composable
 fun Guide04Screen(
+    isVisible: Boolean,
     viewModel: OnboardingViewModel = hiltViewModel(),
     navigateToOnboardingKeymeTest: (testId: Int) -> Unit,
 ) {
@@ -66,7 +70,9 @@ fun Guide04Screen(
                 .padding(
                     start = 18.dp,
                     top = 74.dp,
-                ),
+                )
+                .alpha(fadingAnimateFloatAsState(isAnimationFinished = isVisible).value),
+            color = keyme_white,
         )
     }
 }
@@ -75,6 +81,7 @@ fun Guide04Screen(
 @Preview(showBackground = true)
 fun Guide04ScreenPreview() {
     Guide04Screen(
+        isVisible = true,
         navigateToOnboardingKeymeTest = {},
     )
 }