[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/MainActivity.kt

@@ -1,7 +1,10 @@
 package com.threegap.bitnagil
 
+import android.graphics.Color
+import android.os.Build
 import android.os.Bundle
 import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import com.threegap.bitnagil.designsystem.BitnagilTheme
@@ -11,8 +14,20 @@ import dagger.hilt.android.AndroidEntryPoint
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        enableEdgeToEdge()
+        enableEdgeToEdge(
+            statusBarStyle = SystemBarStyle.light(
+                scrim = Color.TRANSPARENT,
+                darkScrim = Color.TRANSPARENT,
+            ),
+            navigationBarStyle = SystemBarStyle.light(
+                scrim = Color.TRANSPARENT,
+                darkScrim = Color.TRANSPARENT,
+            ),
+        )
         setContent {
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+                window.isNavigationBarContrastEnforced = false
+            }
             val mainNavigator = rememberMainNavigator()
             BitnagilTheme {
                 MainScreen(

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/java/com/threegap/bitnagil/MainScreen.kt

@@ -1,10 +1,15 @@
 package com.threegap.bitnagil
 
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.systemBars
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import com.threegap.bitnagil.designsystem.BitnagilTheme
 
 @Composable
 fun MainScreen(
@@ -13,6 +18,8 @@ fun MainScreen(
 ) {
     Scaffold(
         modifier = modifier.fillMaxSize(),
+        contentWindowInsets = WindowInsets.systemBars.only(WindowInsetsSides.Bottom),
+        containerColor = BitnagilTheme.colors.white,
     ) { innerPadding ->
         MainNavHost(
             navigator = navigator,

app/src/main/java/com/threegap/bitnagil/navigation/home/HomeNavHost.kt

@@ -46,7 +46,7 @@ fun HomeNavHost(
 
     DoubleBackButtonPressedHandler()
 
-    Box(modifier = Modifier.fillMaxSize()) {
+    Box(modifier = modifier.fillMaxSize()) {
         Scaffold(
             modifier = Modifier.fillMaxSize(),
             bottomBar = {

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/emotion/EmotionScreen.kt

@@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
@@ -59,6 +60,7 @@ private fun EmotionScreen(
     Column(
         modifier = Modifier
             .fillMaxSize()
+            .statusBarsPadding()
             .background(color = BitnagilTheme.colors.white),
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {

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

@@ -1,13 +1,15 @@
 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
 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.foundation.layout.statusBarsPadding
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -57,7 +59,10 @@ private fun IntroScreen(
 
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
-        modifier = modifier.fillMaxSize(),
+        modifier = modifier
+            .fillMaxSize()
+            .statusBarsPadding()
+            .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.Box
+import androidx.compose.foundation.layout.Arrangement
+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.layout.statusBarsPadding
+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,24 +74,62 @@ 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),
+            .statusBarsPadding()
+            .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(),
         )
 
-        Button(
-            onClick = onKakaoLoginClick,
+        Spacer(modifier = Modifier.height(screenHeight * 0.185f))
+
+        Image(
+            painter = painterResource(R.drawable.intro_character),
+            contentDescription = null,
+            contentScale = ContentScale.Fit,
             modifier = Modifier
-                .align(Alignment.BottomCenter)
-                .padding(20.dp),
+                .padding(50.dp)
+                .aspectRatio(260f / 295f),
+        )
+
+        Spacer(modifier = Modifier.weight(1f))
+
+        Row(
+            modifier = Modifier
+                .padding(start = 16.dp, end = 16.dp, bottom = 20.dp)
+                .height(54.dp)
+                .clickableWithoutRipple { onKakaoLoginClick() }
+                .background(
+                    color = BitnagilTheme.colors.kakao,
+                    shape = RoundedCornerShape(12.dp),
+                )
+                .fillMaxSize(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center,
         ) {
+            BitnagilIcon(
+                id = R.drawable.ic_kakao_login,
+                modifier = Modifier.padding(end = 8.dp),
+            )
             Text(
-                text = "카카오 로그인버튼",
+                text = "카카오로 시작하기",
+                color = BitnagilTheme.colors.black,
+                style = BitnagilTheme.typography.button2,
             )
         }
     }

presentation/src/main/java/com/threegap/bitnagil/presentation/mypage/MyPageScreen.kt

@@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Text
@@ -60,7 +61,8 @@ private fun MyPageScreen(
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .background(color = BitnagilTheme.colors.white),
+            .background(color = BitnagilTheme.colors.white)
+            .statusBarsPadding(),
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
         BitnagilTopBar(

presentation/src/main/java/com/threegap/bitnagil/presentation/onboarding/OnBoardingScreen.kt

@@ -3,6 +3,7 @@ package com.threegap.bitnagil.presentation.onboarding
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -64,6 +65,7 @@ private fun OnBoardingScreen(
 ) {
     Column(
         modifier = Modifier
+            .statusBarsPadding()
             .background(BitnagilTheme.colors.coolGray99),
     ) {
         BitnagilProgressTopBar(

presentation/src/main/java/com/threegap/bitnagil/presentation/recommendroutine/RecommendRoutineScreen.kt

@@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
@@ -81,7 +82,8 @@ private fun RecommendRoutineScreen(
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .background(BitnagilTheme.colors.white),
+            .background(BitnagilTheme.colors.white)
+            .statusBarsPadding(),
     ) {
         BitnagilTopBar(title = "추천 루틴")
 

presentation/src/main/java/com/threegap/bitnagil/presentation/setting/SettingScreen.kt

@@ -10,6 +10,7 @@ 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.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
@@ -85,6 +86,7 @@ private fun SettingScreen(
     Column(
         modifier = Modifier
             .fillMaxSize()
+            .statusBarsPadding()
             .background(color = BitnagilTheme.colors.white),
     ) {
         BitnagilTopBar(