[BOOK-232] feat: 스플래시 화면 Ui 구성 및 플로우 구현

Author: easyhooon

app/src/main/AndroidManifest.xml

@@ -19,7 +19,7 @@
         android:networkSecurityConfig="@xml/network_security_config"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
-        android:theme="@style/Theme.Booket"
+        android:theme="@style/Theme.Booket.Splash"
         tools:targetApi="31">
 
         <provider

core/designsystem/build.gradle.kts

@@ -13,6 +13,8 @@ dependencies {
     implementations(
         projects.core.common,
 
+        libs.androidx.splash,
+
         libs.coil.compose,
         libs.logger,
 

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

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="192"
+    android:viewportHeight="192">
+
+    <path
+        android:fillColor="@color/green_500"
+        android:pathData="M0,0h1200v1200h-1200z" />
+
+</vector>

core/designsystem/src/main/res/values/colors.xml

@@ -7,4 +7,5 @@
     <color name="teal_700">#FF018786</color>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
+    <color name="green_500">#FF2F9647</color>
 </resources>

core/designsystem/src/main/res/values/splash.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="Theme.Booket.Splash" parent="Theme.SplashScreen">
+        <item name="windowSplashScreenBackground">#FF2F9647</item>
+        <item name="windowSplashScreenAnimatedIcon">@drawable/ic_dummy_splash</item>
+        <item name="postSplashScreenTheme">@style/Theme.Booket</item>
+    </style>
+
+</resources>

feature/main/src/main/kotlin/com/ninecraft/booket/feature/main/splash/SplashPresenter.kt

@@ -1,7 +1,10 @@
 package com.ninecraft.booket.feature.main.splash
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
 import com.ninecraft.booket.core.data.api.repository.AuthRepository
 import com.ninecraft.booket.core.data.api.repository.UserRepository
 import com.ninecraft.booket.core.model.AutoLoginState
@@ -13,12 +16,14 @@ import com.ninecraft.booket.feature.screens.SplashScreen
 import com.skydoves.compose.effects.RememberedEffect
 import com.slack.circuit.codegen.annotations.CircuitInject
 import com.slack.circuit.retained.collectAsRetainedState
+import com.slack.circuit.retained.rememberRetained
 import com.slack.circuit.runtime.Navigator
 import com.slack.circuit.runtime.presenter.Presenter
 import dagger.assisted.Assisted
 import dagger.assisted.AssistedFactory
 import dagger.assisted.AssistedInject
 import dagger.hilt.android.components.ActivityRetainedComponent
+import kotlinx.coroutines.delay
 
 class SplashPresenter @AssistedInject constructor(
     @Assisted private val navigator: Navigator,
@@ -30,8 +35,16 @@ class SplashPresenter @AssistedInject constructor(
     override fun present(): SplashUiState {
         val onboardingState by userRepository.onboardingState.collectAsRetainedState(initial = OnboardingState.IDLE)
         val autoLoginState by authRepository.autoLoginState.collectAsRetainedState(initial = AutoLoginState.IDLE)
+        var isSplashTimeCompleted by rememberRetained { mutableStateOf(false) }
+
+        LaunchedEffect(Unit) {
+            delay(3000L)
+            isSplashTimeCompleted = true
+        }
+
+        RememberedEffect(onboardingState, autoLoginState, isSplashTimeCompleted) {
+            if (!isSplashTimeCompleted) return@RememberedEffect
 
-        RememberedEffect(onboardingState, autoLoginState) {
             when (onboardingState) {
                 OnboardingState.NOT_COMPLETED -> {
                     navigator.resetRoot(OnboardingScreen)

feature/main/src/main/kotlin/com/ninecraft/booket/feature/main/splash/SplashUi.kt

@@ -1,17 +1,76 @@
 package com.ninecraft.booket.feature.main.splash
 
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.ninecraft.booket.core.designsystem.DevicePreview
+import com.ninecraft.booket.core.designsystem.theme.Green500
+import com.ninecraft.booket.core.designsystem.theme.ReedTheme
+import com.ninecraft.booket.feature.main.R
 import com.ninecraft.booket.feature.screens.SplashScreen
 import com.slack.circuit.codegen.annotations.CircuitInject
 import dagger.hilt.android.components.ActivityRetainedComponent
+import tech.thdev.compose.exteions.system.ui.controller.rememberSystemUiController
 
 @CircuitInject(SplashScreen::class, ActivityRetainedComponent::class)
 @Composable
 fun SplashUi(
     modifier: Modifier = Modifier,
 ) {
-    Box(modifier = modifier.fillMaxSize())
+    val systemUiController = rememberSystemUiController()
+
+    DisposableEffect(systemUiController) {
+        systemUiController.setSystemBarsColor(
+            color = Green500,
+            darkIcons = false,
+        )
+
+        onDispose {}
+    }
+
+    Box(
+        modifier = modifier
+            .fillMaxSize()
+            .background(ReedTheme.colors.bgPrimary),
+        contentAlignment = Alignment.Center,
+    ) {
+        Column(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Image(
+                painter = painterResource(R.drawable.ic_reed_logo),
+                contentDescription = "Reed Logo",
+                modifier = Modifier.width(182.dp),
+            )
+            Spacer(modifier.height(ReedTheme.spacing.spacing5))
+            Text(
+                text = stringResource(R.string.splash_title),
+                color = ReedTheme.colors.contentInverse,
+                style = ReedTheme.typography.heading2SemiBold,
+            )
+        }
+    }
+}
+
+@DevicePreview
+@Composable
+private fun SplashPreview() {
+    ReedTheme {
+        SplashUi()
+    }
 }

feature/main/src/main/res/drawable/ic_reed_logo.png

@@ -2,4 +2,5 @@
     <string name="home_label">홈</string>
     <string name="search_label">도서 검색</string>
     <string name="library_label">내 서재</string>
+    <string name="splash_title">책 덮기 전 한 문장을 기록해보세요</string>
 </resources>