[Feature/#22] 앱 최초 실행 화면 흐름 구현

app/src/main/AndroidManifest.xml

@@ -9,9 +9,9 @@
         android:allowBackup="true"
         android:dataExtractionRules="@xml/data_extraction_rules"
         android:fullBackupContent="@xml/backup_rules"
-        android:icon="@mipmap/ic_launcher"
+        android:icon="@mipmap/ic_bitnagil_launcher"
         android:label="@string/app_name"
-        android:roundIcon="@mipmap/ic_launcher_round"
+        android:roundIcon="@mipmap/ic_bitnagil_launcher_round"
         android:supportsRtl="true"
         android:theme="@style/Theme.Bitnagil"
         tools:targetApi="31">

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/mipmap-anydpi-v26/ic_bitnagil_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_bitnagil_launcher_background"/>
+    <foreground android:drawable="@drawable/ic_bitnagil_launcher_foreground"/>
+</adaptive-icon>

app/src/main/res/mipmap-anydpi-v26/ic_bitnagil_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_bitnagil_launcher_background"/>
+    <foreground android:drawable="@drawable/ic_bitnagil_launcher_foreground"/>
+</adaptive-icon>

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

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_bitnagil_launcher_background">#FFFFFF</color>
+</resources>

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>

gradle/libs.versions.toml

@@ -51,6 +51,7 @@ material = "1.12.0"
 orbit = "6.1.0"
 javax = "1"
 kakaoLogin = "2.21.4"
+lottie-compose = "6.6.0"
 
 [libraries]
 ## Android Gradle Plugin
@@ -117,6 +118,7 @@ kotlin-coroutines-test = { group = "org.jetbrains.kotlinx", name = "kotlinx-coro
 ## Other
 material = { group = "com.google.android.material", name = "material", version.ref = "material" }
 kakao-v2-user = { group = "com.kakao.sdk", name = "v2-user", version.ref = "kakaoLogin" }
+lottie-compose = { group = "com.airbnb.android", name = "lottie-compose", version.ref = "lottie-compose" }
 
 [bundles]
 androidx-core = [

presentation/build.gradle.kts

@@ -18,6 +18,7 @@ dependencies {
     implementation(libs.bundles.orbit)
     implementation(libs.kakao.v2.user)
     implementation(libs.kotlinx.serialization.json)
+    implementation(libs.lottie.compose)
 
     testImplementation(libs.junit)
     testImplementation(libs.kotlin.coroutines.test)

presentation/src/main/java/com/threegap/bitnagil/presentation/intro/IntroScreen.kt

@@ -1,6 +1,7 @@
 package com.threegap.bitnagil.presentation.intro
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
@@ -57,7 +58,9 @@ private fun IntroScreen(
 
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
-        modifier = modifier.fillMaxSize(),
+        modifier = modifier
+            .fillMaxSize()
+            .background(BitnagilTheme.colors.white),
     ) {
         Spacer(modifier = Modifier.height(screenHeight * 0.0748f))
 

presentation/src/main/java/com/threegap/bitnagil/presentation/login/LoginScreen.kt

@@ -1,20 +1,35 @@
 package com.threegap.bitnagil.presentation.login
 
+import androidx.compose.foundation.Image
 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.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Button
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalWindowInfo
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
 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.designsystem.modifier.clickableWithoutRipple
 import com.threegap.bitnagil.presentation.login.kakao.KakaoLoginHandlerImpl
 import com.threegap.bitnagil.presentation.login.model.LoginSideEffect
 import org.orbitmvi.orbit.compose.collectSideEffect
@@ -59,25 +74,66 @@ private fun LoginScreen(
     onKakaoLoginClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Box(
+    val windowInfo = LocalWindowInfo.current
+    val screenHeight = with(LocalDensity.current) {
+        windowInfo.containerSize.height.toDp()
+    }
+
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
         modifier = modifier
             .fillMaxSize()
-            .background(Color.White),
+            .background(BitnagilTheme.colors.white),
     ) {
+        Spacer(modifier = Modifier.height(screenHeight * 0.0748f))
+
         Text(
-            text = "빛나길 로고",
-            modifier = Modifier.align(Alignment.Center),
+            text = "빛나길에 오신걸 환영해요!",
+            color = BitnagilTheme.colors.navy500,
+            style = BitnagilTheme.typography.title2Bold,
+            textAlign = TextAlign.Center,
+            modifier = Modifier.fillMaxWidth(),
+        )
+
+        Spacer(modifier = Modifier.height(screenHeight * 0.185f))
+
+        Image(
+            painter = painterResource(R.drawable.intro_character),
+            contentDescription = null,
+            contentScale = ContentScale.Fit,
+            modifier = Modifier
+                .padding(50.dp)
+                .aspectRatio(260f / 295f),
         )
 
-        Button(
-            onClick = onKakaoLoginClick,
+        Spacer(modifier = Modifier.weight(1f))
+
+        Box(
             modifier = Modifier
-                .align(Alignment.BottomCenter)
-                .padding(20.dp),
+                .padding(start = 16.dp, end = 16.dp, bottom = 20.dp)
+                .clickableWithoutRipple { onKakaoLoginClick() }
+                .background(
+                    color = BitnagilTheme.colors.kakao,
+                    shape = RoundedCornerShape(12.dp),
+                )
+                .fillMaxWidth()
+                .padding(vertical = 18.dp),
+            contentAlignment = Alignment.Center,
+
         ) {
-            Text(
-                text = "카카오 로그인버튼",
-            )
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+            ) {
+                BitnagilIcon(
+                    id = R.drawable.ic_kakao_login,
+                )
+                Text(
+                    text = "카카오로 시작하기",
+                    color = BitnagilTheme.colors.black,
+                    style = BitnagilTheme.typography.button2,
+                )
+            }
         }
     }
 }

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

@@ -8,7 +8,6 @@ import com.threegap.bitnagil.presentation.splash.model.SplashIntent
 import com.threegap.bitnagil.presentation.splash.model.SplashSideEffect
 import com.threegap.bitnagil.presentation.splash.model.SplashState
 import dagger.hilt.android.lifecycle.HiltViewModel
-import kotlinx.coroutines.async
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 import org.orbitmvi.orbit.syntax.simple.SimpleSyntax
@@ -23,44 +22,58 @@ 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)
         }
     }
 }