Feat: 스플래시 화면 Lottie 애니메이션 및 토큰 확인 로직 추가

- 스플래시 화면에 Lottie 애니메이션을 추가하고, 애니메이션 완료 후 화면 이동
- 토큰 확인 로직을 추가하여 토큰 유무에 따라 다음 화면으로 분기

Author: wjdrjs00

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

@@ -28,7 +28,11 @@ fun MainNavHost(
     ) {
         composable<Route.Splash> {
             SplashScreenContainer(
-                navigateToIntro = { navigator.navController.navigate(Route.Intro) },
+                navigateToIntro = {
+                    navigator.navController.navigate(Route.Intro) {
+                        popUpTo<Route.Splash> { inclusive = true }
+                    }
+                },
                 navigateToHome = {
                     navigator.navController.navigate(Route.Home) {
                         popUpTo(navigator.navController.graph.startDestinationId) {

app/src/main/res/values/themes.xml

@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
-    <style name="Theme.Bitnagil" parent="android:Theme.Material.Light.NoActionBar" />
+    <style name="Base.Theme.Bitnagil" parent="android:Theme.Material.Light.NoActionBar" />
+
+    <style name="Theme.Bitnagil" parent="Base.Theme.Bitnagil">
+        <item name="android:windowIsTranslucent">true</item>
+    </style>
 </resources>

presentation/src/main/java/com/threegap/bitnagil/presentation/splash/SplashScreen.kt

@@ -1,13 +1,28 @@
 package com.threegap.bitnagil.presentation.splash
 
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.Text
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
+import com.threegap.bitnagil.designsystem.BitnagilTheme
+import com.threegap.bitnagil.designsystem.R
+import com.threegap.bitnagil.designsystem.component.atom.BitnagilIcon
+import com.threegap.bitnagil.presentation.splash.component.template.BitnagilLottieAnimation
 import com.threegap.bitnagil.presentation.splash.model.SplashSideEffect
 import org.orbitmvi.orbit.compose.collectSideEffect
 
@@ -24,26 +39,56 @@ fun SplashScreenContainer(
         }
     }
 
-    SplashScreen()
+    SplashScreen(
+        onCompleted = viewModel::onAnimationCompleted,
+    )
 }
 
 @Composable
 private fun SplashScreen(
+    onCompleted: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Box(
-        modifier = modifier.fillMaxSize(),
+    var showIcon by remember { mutableStateOf(false) }
+
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .background(BitnagilTheme.colors.white),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        Text(
-            text = "야무진 로고 추가 예정",
-            modifier = Modifier
-                .align(Alignment.Center),
-        )
+        Box(
+            contentAlignment = Alignment.Center
+        ) {
+            BitnagilLottieAnimation(
+                lottieJson = R.raw.splash_lottie,
+                onComplete = onCompleted,
+                onStart = {
+                    showIcon = true
+                },
+                maxFrame = 120,
+                modifier = Modifier
+                    .padding(bottom = 36.dp)
+                    .size(204.dp)
+                    .align(Alignment.BottomCenter),
+            )
+
+            androidx.compose.animation.AnimatedVisibility(
+                visible = showIcon,
+                enter = fadeIn(animationSpec = tween(500)),
+                modifier = Modifier.align(Alignment.BottomCenter)
+            ) {
+                BitnagilIcon(id = R.drawable.img_app_name)
+            }
+        }
     }
 }
 
 @Preview(showBackground = true)
 @Composable
 private fun SplashScreenPreview() {
-    SplashScreen()
+    SplashScreen(
+        onCompleted = {},
+    )
 }

presentation/src/main/java/com/threegap/bitnagil/presentation/splash/SplashViewModel.kt

@@ -23,44 +23,59 @@ class SplashViewModel @Inject constructor(
     savedStateHandle = savedStateHandle,
 ) {
 
+    private var hasToken: Boolean? = null
+
     init {
-        checkAutoLogin()
+        checkTokenStatus()
     }
 
     override suspend fun SimpleSyntax<SplashState, SplashSideEffect>.reduceState(
         intent: SplashIntent,
         state: SplashState,
     ): SplashState? =
         when (intent) {
-            is SplashIntent.SetLoading -> {
-                state.copy(isLoading = intent.isLoading)
+
+            is SplashIntent.SetTokenChecked -> {
+                state.copy(isTokenChecked = intent.hasToken != null)
             }
 
             is SplashIntent.NavigateToIntro -> {
                 sendSideEffect(SplashSideEffect.NavigateToIntro)
-                state.copy(isLoading = false)
+                null
             }
 
             is SplashIntent.NavigateToHome -> {
                 sendSideEffect(SplashSideEffect.NavigateToHome)
-                state.copy(isLoading = false)
+                null
             }
         }
 
-    private fun checkAutoLogin() {
+    private fun checkTokenStatus() {
         viewModelScope.launch {
-            sendIntent(SplashIntent.SetLoading(true))
-            val delayDeferred = async { delay(2000L) }
-            val tokenDeferred = async { hasTokenUseCase() }
-
-            delayDeferred.await()
-            val hasToken = tokenDeferred.await()
+            try {
+                hasToken = hasTokenUseCase()
+                sendIntent(SplashIntent.SetTokenChecked(hasToken))
+            } catch (e: Exception) {
+                hasToken = false
+                sendIntent(SplashIntent.SetTokenChecked(false))
+            }
+        }
+    }
 
-            if (hasToken) {
-                sendIntent(SplashIntent.NavigateToHome)
-            } else {
-                sendIntent(SplashIntent.NavigateToIntro)
+    fun onAnimationCompleted() {
+        val tokenResult = hasToken
+        if (tokenResult == null) {
+            viewModelScope.launch {
+                delay(100)
+                onAnimationCompleted()
             }
+            return
+        }
+
+        if (tokenResult) {
+            sendIntent(SplashIntent.NavigateToHome)
+        } else {
+            sendIntent(SplashIntent.NavigateToIntro)
         }
     }
 }

presentation/src/main/java/com/threegap/bitnagil/presentation/splash/model/SplashIntent.kt

@@ -3,7 +3,7 @@ package com.threegap.bitnagil.presentation.splash.model
 import com.threegap.bitnagil.presentation.common.mviviewmodel.MviIntent
 
 sealed class SplashIntent : MviIntent {
-    data class SetLoading(val isLoading: Boolean) : SplashIntent()
+    data class SetTokenChecked(val hasToken: Boolean?) : SplashIntent()
     data object NavigateToIntro : SplashIntent()
     data object NavigateToHome : SplashIntent()
 }

presentation/src/main/java/com/threegap/bitnagil/presentation/splash/model/SplashState.kt

@@ -5,5 +5,5 @@ import kotlinx.parcelize.Parcelize
 
 @Parcelize
 data class SplashState(
-    val isLoading: Boolean = false,
+    val isTokenChecked: Boolean = false,
 ) : MviState