Merge pull request #59 from Nexters/feature/splash-ui

[FEAT] [#16] 스플래시 화면 구현

app/src/main/AndroidManifest.xml

@@ -19,7 +19,7 @@
         android:roundIcon="@mipmap/ic_launcher_round"
         android:screenOrientation="portrait"
         android:supportsRtl="true"
-        android:theme="@style/Theme.Ilab"
+        android:theme="@style/Theme.ILab"
         tools:targetApi="31">
 
         <provider

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

@@ -0,0 +1,21 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="64dp"
+    android:height="34dp"
+    android:viewportWidth="64"
+    android:viewportHeight="34">
+  <path
+      android:pathData="M1,4.764H4.149V32.555H1V4.764Z"
+      android:fillColor="#0A235B"/>
+  <path
+      android:pathData="M6.468,11.582C8.339,10.263 9.313,8.913 9.313,6.764C9.209,6.8 9.106,6.8 8.967,6.8C7.998,6.8 7.061,6.177 7.061,4.961C7.061,3.745 7.859,2.982 8.967,2.982C10.353,2.982 11.219,4.162 11.219,6.244C11.219,9.263 9.833,11.412 7.298,12.937L6.464,11.587L6.468,11.582Z"
+      android:fillColor="#0A235B"/>
+  <path
+      android:pathData="M16.163,34C14.813,34 13.866,33.547 13.328,32.636C12.785,31.726 12.516,30.644 12.516,29.379C12.516,27.944 12.781,26.257 13.31,24.319C13.84,22.385 14.535,20.353 15.401,18.227C16.267,16.1 17.218,14.019 18.258,11.982C19.299,9.945 20.34,8.097 21.381,6.437C22.421,4.782 23.39,3.463 24.283,2.476C25.176,1.493 25.889,1 26.419,1C26.769,1 27.069,1.193 27.32,1.574C27.567,1.956 27.769,2.418 27.913,2.96C28.061,3.503 28.132,3.992 28.132,4.436C28.132,5.23 27.935,6.262 27.54,7.536C27.145,8.81 26.585,10.219 25.867,11.758C25.149,13.297 24.297,14.867 23.314,16.464C22.332,18.061 21.255,19.586 20.08,21.04C18.904,22.493 17.644,23.745 16.298,24.799C16.181,25.53 16.069,26.266 15.966,26.997C15.863,27.728 15.813,28.406 15.813,29.02C15.813,30.106 15.984,30.905 16.32,31.416C16.657,31.927 17.119,32.188 17.707,32.188C18.469,32.188 19.241,31.838 20.017,31.133C20.793,30.429 21.533,29.541 22.238,28.473C22.942,27.401 23.556,26.297 24.086,25.153L25.01,25.683C23.776,28.235 22.413,30.259 20.919,31.752C19.425,33.246 17.841,33.995 16.168,33.995L16.163,34ZM16.957,22.475C17.985,21.421 18.949,20.246 19.86,18.958C20.771,17.666 21.614,16.343 22.39,14.974C23.166,13.611 23.848,12.292 24.436,11.013C25.024,9.739 25.477,8.595 25.8,7.581C26.123,6.567 26.298,5.769 26.329,5.186C26.329,5.069 26.298,4.966 26.239,4.876C26.006,4.876 25.616,5.221 25.073,5.908C24.53,6.599 23.897,7.527 23.18,8.703C22.462,9.878 21.722,11.224 20.959,12.749C20.196,14.274 19.465,15.872 18.761,17.545C18.056,19.218 17.455,20.86 16.957,22.471V22.475Z"
+      android:fillColor="#0A235B"/>
+  <path
+      android:pathData="M26.463,27.334C26.463,22.852 30.375,20.654 39.182,19.667C39.217,16.895 38.347,14.163 34.817,14.163C32.349,14.163 30.146,15.338 28.59,16.441L27.338,14.279C29.124,13.104 32.008,11.583 35.31,11.583C40.285,11.583 42.259,14.961 42.259,19.896V32.614H39.715L39.451,30.106H39.339C37.365,31.775 35.009,33.107 32.43,33.107C29.052,33.107 26.468,31.057 26.468,27.338L26.463,27.334ZM39.182,27.751V21.753C31.932,22.587 29.465,24.333 29.465,27.145C29.465,29.613 31.174,30.6 33.26,30.6C35.346,30.6 37.096,29.613 39.182,27.751Z"
+      android:fillColor="#0A235B"/>
+  <path
+      android:pathData="M47.422,30.487H47.346L47.005,32.613H44.574V2.395H47.647V10.784L47.494,14.543C49.432,12.91 51.747,11.582 54.098,11.582C59.45,11.582 62.298,15.718 62.298,22.021C62.298,29.047 58.086,33.107 53.34,33.107C51.442,33.107 49.239,32.12 47.418,30.487H47.422ZM59.077,22.057C59.077,17.428 57.485,14.198 53.384,14.198C51.599,14.198 49.701,15.225 47.651,17.158V28.244C49.549,29.913 51.487,30.482 52.891,30.482C56.458,30.482 59.077,27.257 59.077,22.053V22.057Z"
+      android:fillColor="#0A235B"/>
+</vector>

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

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
-    <style name="Theme.Ilab" parent="android:Theme.Material.Light.NoActionBar" />
+    <style name="Theme.ILab" parent="android:Theme.Material.Light.NoActionBar" />
 </resources>

core/ui/src/main/kotlin/com/nexters/ilab/core/ui/component/Image.kt

@@ -90,14 +90,15 @@ fun BackgroundImage(
     resId: Int,
     contentDescription: String,
     modifier: Modifier = Modifier,
+    contentScale: ContentScale = ContentScale.Fit,
 ) {
     if (LocalInspectionMode.current) {
         Box(modifier = Modifier.fillMaxSize())
     } else {
         Image(
             painter = painterResource(id = resId),
             contentDescription = contentDescription,
-            contentScale = ContentScale.Fit,
+            contentScale = contentScale,
             modifier = modifier,
         )
     }

feature/intro/build.gradle.kts

@@ -11,6 +11,8 @@ android {
 dependencies {
     implementations(
         libs.androidx.core,
+        libs.androidx.activity.compose,
+        libs.androidx.splash,
         libs.timber,
         libs.system.ui.controller,
     )

feature/intro/src/main/AndroidManifest.xml

@@ -7,7 +7,7 @@
             android:name=".IntroActivity"
             android:exported="true"
             android:screenOrientation="portrait"
-            android:theme="@style/Theme.Ilab">
+            android:theme="@style/Theme.ILab">
 
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

feature/intro/src/main/kotlin/com/nexters/ilab/android/feature/intro/IntroActivity.kt

@@ -6,6 +6,8 @@ import androidx.activity.compose.setContent
 import androidx.activity.viewModels
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.ui.graphics.Color
+import androidx.activity.enableEdgeToEdge
+import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
 import com.nexters.ilab.android.core.designsystem.theme.ILabTheme
 import com.nexters.ilab.android.feature.navigator.LoginNavigator
 import com.nexters.ilab.android.feature.navigator.MainNavigator
@@ -24,13 +26,16 @@ class IntroActivity : ComponentActivity() {
     lateinit var mainNavigator: MainNavigator
 
     override fun onCreate(savedInstanceState: Bundle?) {
+        installSplashScreen()
+        enableEdgeToEdge()
         super.onCreate(savedInstanceState)
+
         setContent {
             val systemUiController = rememberExSystemUiController()
 
             DisposableEffect(systemUiController) {
                 systemUiController.setSystemBarsColor(
-                    color = Color.White,
+                    color = Color.Transparent,
                     darkIcons = true,
                     isNavigationBarContrastEnforced = false,
                 )

feature/intro/src/main/kotlin/com/nexters/ilab/android/feature/intro/IntroScreen.kt

@@ -1,14 +1,25 @@
 package com.nexters.ilab.android.feature.intro
 
+import androidx.compose.foundation.Image
 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.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.vectorResource
 import androidx.hilt.navigation.compose.hiltViewModel
+import com.nexters.ilab.android.core.designsystem.R
+import com.nexters.ilab.core.ui.DevicePreview
+import com.nexters.ilab.core.ui.component.BackgroundImage
+import kotlinx.coroutines.delay
 
 @Suppress("unused")
 @Composable
@@ -18,6 +29,7 @@ internal fun IntroRoute(
     viewModel: IntroViewModel = hiltViewModel(),
 ) {
     LaunchedEffect(key1 = Unit) {
+        delay(1000)
         navigateToLogin()
     }
 
@@ -26,11 +38,41 @@ internal fun IntroRoute(
 
 @Composable
 internal fun IntroScreen() {
+    Box(modifier = Modifier.fillMaxSize()) {
+        BackgroundImage(
+            resId = R.drawable.bg_splash_screen,
+            contentDescription = "Background Image for Splash Screen",
+            modifier = Modifier.fillMaxSize(),
+            contentScale = ContentScale.FillBounds,
+        )
+        IntroContent(
+            modifier = Modifier.align(Alignment.Center),
+        )
+    }
+}
+
+@Composable
+fun IntroContent(modifier: Modifier = Modifier) {
     Column(
-        modifier = Modifier.fillMaxSize(),
+        modifier = modifier,
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-        Text(text = "SplashScreen")
+        Image(
+            painter = painterResource(id = R.drawable.ic_splash),
+            contentDescription = "Splash Image",
+            contentScale = ContentScale.Fit,
+        )
+        Icon(
+            imageVector = ImageVector.vectorResource(id = R.drawable.ic_ilab_logo_64),
+            contentDescription = "iLab Logo",
+            tint = Color.Unspecified,
+        )
     }
 }
+
+@DevicePreview
+@Composable
+fun IntroScreenPreview() {
+    IntroScreen()
+}

feature/login/src/main/AndroidManifest.xml

@@ -7,7 +7,7 @@
             android:name=".LoginActivity"
             android:exported="false"
             android:screenOrientation="portrait"
-            android:theme="@style/Theme.Ilab">
+            android:theme="@style/Theme.ILab">
 
         </activity>
 

feature/main/src/main/AndroidManifest.xml

@@ -7,7 +7,7 @@
             android:name=".MainActivity"
             android:exported="false"
             android:screenOrientation="portrait"
-            android:theme="@style/Theme.Ilab">
+            android:theme="@style/Theme.ILab">
 
         </activity>