[FEAT] [#4] 로그인 화면 UI 구성

core/designsystem/src/main/kotlin/com/nexters/ilab/android/core/designsystem/theme/Color.kt

@@ -42,3 +42,4 @@ val Gray900 = Color(0xFF121212)
 
 val SystemGreen = Color(0xFF4FCF6B)
 val SystemRed = Color(0xFFFF584E)
+val Kakao = Color(0xFFFBD300)

core/designsystem/src/main/kotlin/com/nexters/ilab/android/core/designsystem/theme/Theme.kt

@@ -1,6 +1,5 @@
 package com.nexters.ilab.android.core.designsystem.theme
 
-import android.app.Activity
 import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.MaterialTheme
@@ -9,12 +8,7 @@ import androidx.compose.material3.dynamicDarkColorScheme
 import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.SideEffect
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalView
-import androidx.core.view.WindowCompat
 
 private val DarkColorScheme = darkColorScheme(
     primary = Purple80,
@@ -53,27 +47,6 @@ fun ILabTheme(
         darkTheme -> DarkColorScheme
         else -> LightColorScheme
     }
-    val view = LocalView.current
-
-    if (!view.isInEditMode) {
-        SideEffect {
-            val window = (view.context as Activity).window
-
-            window.statusBarColor = if (darkTheme) Color.Black.toArgb() else Color.White.toArgb()
-            window.navigationBarColor = if (darkTheme) Color.Black.toArgb() else Color.White.toArgb()
-
-            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
-                // remove unnecessary black screen from bars
-                window.isNavigationBarContrastEnforced = false
-            }
-
-            val windowsInsetsController = WindowCompat.getInsetsController(window, view)
-
-            // status bar's icon always visible
-            windowsInsetsController.isAppearanceLightStatusBars = !darkTheme
-            windowsInsetsController.isAppearanceLightNavigationBars = !darkTheme
-        }
-    }
 
     MaterialTheme(
         colorScheme = colorScheme,

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

@@ -0,0 +1,25 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="110dp"
+    android:height="62dp"
+    android:viewportWidth="110"
+    android:viewportHeight="62">
+  <group>
+    <clip-path
+        android:pathData="M0,0h110v62h-110z"/>
+    <path
+        android:pathData="M0,7.06H5.96V59.29H0V7.06Z"
+        android:fillColor="#12284D"/>
+    <path
+        android:pathData="M10.34,19.88C13.88,17.4 15.72,14.86 15.72,10.82C15.52,10.89 15.33,10.89 15.07,10.89C13.23,10.89 11.46,9.72 11.46,7.44C11.46,5.15 12.97,3.72 15.07,3.72C17.69,3.72 19.33,5.93 19.33,9.85C19.33,15.52 16.7,19.56 11.91,22.42L10.33,19.89L10.34,19.88Z"
+        android:fillColor="#12284D"/>
+    <path
+        android:pathData="M22.74,62C20.18,62 18.39,61.15 17.37,59.44C16.35,57.73 15.84,55.69 15.84,53.32C15.84,50.62 16.34,47.45 17.34,43.81C18.34,40.18 19.66,36.36 21.29,32.36C22.93,28.37 24.73,24.45 26.7,20.63C28.67,16.8 30.64,13.33 32.6,10.21C34.57,7.1 36.4,4.62 38.09,2.76C39.78,0.92 41.13,-0.01 42.13,-0.01C42.79,-0.01 43.36,0.35 43.84,1.07C44.3,1.79 44.68,2.65 44.96,3.67C45.24,4.69 45.37,5.61 45.37,6.45C45.37,7.94 45,9.88 44.25,12.27C43.5,14.67 42.44,17.31 41.09,20.21C39.73,23.1 38.12,26.05 36.26,29.05C34.4,32.05 32.37,34.92 30.14,37.65C27.92,40.38 25.54,42.73 22.99,44.71C22.77,46.08 22.56,47.47 22.36,48.84C22.17,50.22 22.07,51.49 22.07,52.64C22.07,54.68 22.4,56.18 23.03,57.14C23.67,58.11 24.54,58.59 25.66,58.59C27.1,58.59 28.56,57.94 30.02,56.61C31.49,55.29 32.89,53.62 34.22,51.61C35.56,49.6 36.72,47.53 37.72,45.38L39.47,46.37C37.13,51.17 34.55,54.97 31.73,57.78C28.9,60.58 25.91,61.99 22.75,61.99L22.74,62ZM24.24,40.34C26.18,38.36 28,36.15 29.73,33.74C31.45,31.31 33.04,28.82 34.51,26.25C35.98,23.69 37.27,21.21 38.38,18.81C39.49,16.41 40.35,14.26 40.96,12.36C41.57,10.45 41.9,8.95 41.96,7.86C41.96,7.64 41.9,7.44 41.79,7.27C41.35,7.27 40.61,7.92 39.59,9.21C38.56,10.51 37.36,12.26 36.01,14.46C34.65,16.67 33.25,19.2 31.81,22.07C30.36,24.93 28.98,27.94 27.65,31.08C26.32,34.22 25.18,37.31 24.24,40.34V40.34Z"
+        android:fillColor="#12284D"/>
+    <path
+        android:pathData="M42.21,49.47C42.21,41.05 49.61,36.92 66.27,35.07C66.33,29.86 64.69,24.72 58.01,24.72C53.35,24.72 49.18,26.93 46.24,29.01L43.87,24.94C47.25,22.73 52.7,19.88 58.94,19.88C68.35,19.88 72.09,26.22 72.09,35.5V59.4H67.28L66.78,54.68H66.56C62.83,57.82 58.38,60.32 53.5,60.32C47.11,60.32 42.22,56.47 42.22,49.48L42.21,49.47ZM66.27,50.26V38.99C52.56,40.55 47.89,43.83 47.89,49.12C47.89,53.76 51.12,55.61 55.07,55.61C59.01,55.61 62.32,53.76 66.27,50.26Z"
+        android:fillColor="#12284D"/>
+    <path
+        android:pathData="M81.85,55.4H81.71L81.06,59.4H76.46V2.6H82.28V18.37L81.99,25.43C85.65,22.36 90.03,19.87 94.47,19.87C104.6,19.87 109.98,27.64 109.98,39.48C109.98,52.69 102.02,60.31 93.04,60.31C89.45,60.31 85.29,58.46 81.84,55.39L81.85,55.4ZM103.89,39.56C103.89,30.86 100.88,24.79 93.13,24.79C89.75,24.79 86.16,26.72 82.28,30.35V51.18C85.87,54.32 89.54,55.39 92.19,55.39C98.94,55.39 103.89,49.33 103.89,39.55V39.56Z"
+        android:fillColor="#12284D"/>
+  </group>
+</vector>

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

@@ -0,0 +1,32 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <group>
+    <clip-path
+        android:pathData="M2,2h17v17h-17z"/>
+    <path
+        android:pathData="M10.5,2C5.806,2 2,5.275 2,9.314C2,11.942 3.614,14.248 6.032,15.537C5.853,16.26 5.389,18.155 5.293,18.559C5.179,19.064 5.463,19.054 5.649,18.919C5.794,18.812 7.977,17.196 8.92,16.499C9.43,16.583 9.959,16.624 10.497,16.624C15.191,16.624 18.997,13.349 18.997,9.31C18.997,5.271 15.197,2 10.5,2Z"
+        android:fillColor="#381E1E"/>
+    <path
+        android:pathData="M4.539,6.984C4.019,6.984 4.019,7.977 4.539,7.977H5.426C5.426,7.977 5.432,10.66 5.426,11.276C5.426,11.727 6.347,11.75 6.347,11.299V8.071C6.347,8.071 6.647,8.001 7.232,8.001C7.782,8.001 7.782,6.984 7.232,6.984H4.539Z"
+        android:fillColor="#EED823"/>
+    <path
+        android:pathData="M8.889,8.22L9.384,9.899H8.357L8.892,8.22H8.889ZM8.339,7.432C8.119,7.954 7.334,10.421 7.071,11.077C6.882,11.552 7.699,11.935 7.887,11.464L8.064,10.788H9.684C9.684,10.788 9.628,10.814 9.845,11.434C10.018,11.935 10.859,11.589 10.686,11.087C10.438,10.374 9.576,7.799 9.418,7.432C9.344,7.264 9.084,7.143 8.834,7.143C8.626,7.143 8.422,7.227 8.336,7.432"
+        android:fillColor="#FFE600"/>
+    <group>
+      <clip-path
+          android:pathData="M8.889,8.22L9.384,9.899H8.357L8.892,8.22H8.889ZM8.339,7.432C8.119,7.954 7.334,10.421 7.071,11.077C6.882,11.552 7.699,11.935 7.887,11.464L8.064,10.788H9.684C9.684,10.788 9.628,10.814 9.845,11.434C10.018,11.935 10.859,11.589 10.686,11.087C10.438,10.374 9.576,7.799 9.418,7.432C9.344,7.264 9.084,7.143 8.834,7.143C8.626,7.143 8.422,7.227 8.336,7.432"/>
+      <path
+          android:pathData="M10.859,7.143H6.882V11.935H10.859V7.143Z"
+          android:fillColor="#EED823"/>
+    </group>
+    <path
+        android:pathData="M11.032,7.583C11.032,8.421 11.035,11.124 11.035,11.124C11.035,11.124 10.964,11.662 11.387,11.662C11.811,11.662 12.748,11.659 13.165,11.659C13.583,11.659 13.58,10.696 13.165,10.696C12.751,10.696 11.99,10.693 11.99,10.693C11.99,10.693 11.993,8.192 11.99,7.586C11.99,7.294 11.752,7.146 11.511,7.146C11.27,7.146 11.029,7.294 11.032,7.586"
+        android:fillColor="#EED823"/>
+    <path
+        android:pathData="M13.731,7.448C13.74,7.815 13.719,11.141 13.719,11.39C13.719,11.777 14.628,11.777 14.628,11.39C14.628,10.939 14.628,10.08 14.628,10.08L14.894,9.848L16.063,11.582C16.298,11.922 17.04,11.309 16.805,10.969L15.565,9.192C15.565,9.192 16.406,8.199 16.737,7.842C16.931,7.634 16.331,6.977 16.137,7.186C15.948,7.388 14.631,8.825 14.631,8.825C14.631,8.825 14.643,7.923 14.631,7.425C14.628,7.236 14.415,7.146 14.195,7.146C13.963,7.146 13.722,7.25 13.728,7.452"
+        android:fillColor="#EED823"/>
+  </group>
+</vector>

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

@@ -4,6 +4,7 @@
 
     <!--    login-->
     <string name="kakao_login">카카오 로그인</string>
+    <string name="intro_description">반가워요! 아이랩에서 나만의\n프로필을 만들어보세요!</string>
 
     <!--    main-->
     <string name="home">홈</string>

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

@@ -1,6 +1,8 @@
 package com.nexters.ilab.core.ui.component
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
@@ -27,7 +29,7 @@ fun ExampleImage(
     if (LocalInspectionMode.current) {
         Icon(
             imageVector = Icons.Outlined.Person,
-            contentDescription = "Image Icon",
+            contentDescription = "Example Image Icon",
             modifier = Modifier
                 .width(103.dp)
                 .height(139.dp),
@@ -56,7 +58,7 @@ fun NetworkImage(
     if (LocalInspectionMode.current) {
         Icon(
             imageVector = Icons.Outlined.Person,
-            contentDescription = "Image Icon",
+            contentDescription = "Network Image Icon",
             modifier = Modifier
                 .width(186.dp)
                 .aspectRatio(1f),
@@ -74,12 +76,34 @@ fun NetworkImage(
     }
 }
 
+@Composable
+fun BackgroundImage(
+    resId: Int,
+    contentDescription: String,
+    modifier: Modifier = Modifier,
+) {
+    val context = LocalContext.current
+
+    if (LocalInspectionMode.current) {
+        Box(modifier = Modifier.fillMaxSize())
+    } else {
+        AsyncImage(
+            model = ImageRequest.Builder(context)
+                .data(resId)
+                .build(),
+            contentDescription = contentDescription,
+            contentScale = ContentScale.FillBounds,
+            modifier = modifier,
+        )
+    }
+}
+
 @ComponentPreview
 @Composable
 fun ExampleImagePreview() {
     ExampleImage(
         resId = 0,
-        contentDescription = "Image Icon",
+        contentDescription = "Example Image Icon",
     )
 }
 
@@ -88,6 +112,15 @@ fun ExampleImagePreview() {
 fun NetworkImagePreview() {
     NetworkImage(
         imageUrl = "",
-        contentDescription = "Image Icon",
+        contentDescription = "Network Image Icon",
+    )
+}
+
+@ComponentPreview
+@Composable
+fun BackgroundImagePreview() {
+    BackgroundImage(
+        resId = 0,
+        contentDescription = "Background Image Icon",
     )
 }

feature/intro/build.gradle.kts

@@ -12,5 +12,6 @@ dependencies {
     implementations(
         libs.androidx.core,
         libs.timber,
+        libs.system.ui.controller,
     )
 }

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

@@ -4,10 +4,13 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.viewModels
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.ui.graphics.Color
 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
 import dagger.hilt.android.AndroidEntryPoint
+import tech.thdev.compose.exteions.system.ui.controller.rememberExSystemUiController
 import javax.inject.Inject
 
 @AndroidEntryPoint
@@ -23,6 +26,18 @@ class IntroActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
+            val systemUiController = rememberExSystemUiController()
+
+            DisposableEffect(systemUiController) {
+                systemUiController.setSystemBarsColor(
+                    color = Color.White,
+                    darkIcons = true,
+                    isNavigationBarContrastEnforced = false,
+                )
+
+                onDispose {}
+            }
+
             ILabTheme {
                 IntroRoute(
                     navigateToLogin = {

feature/login/build.gradle.kts

@@ -11,7 +11,9 @@ android {
 dependencies {
     implementations(
         libs.androidx.core,
+        libs.androidx.activity.compose,
         libs.timber,
         libs.kakao.auth,
+        libs.system.ui.controller,
     )
 }

feature/login/src/main/kotlin/com/nexters/ilab/android/feature/login/LoginActivity.kt

@@ -3,10 +3,14 @@ package com.nexters.ilab.android.feature.login
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
 import androidx.activity.viewModels
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.ui.graphics.Color
 import com.nexters.ilab.android.core.designsystem.theme.ILabTheme
 import com.nexters.ilab.android.feature.navigator.MainNavigator
 import dagger.hilt.android.AndroidEntryPoint
+import tech.thdev.compose.exteions.system.ui.controller.rememberExSystemUiController
 import javax.inject.Inject
 
 @AndroidEntryPoint
@@ -17,8 +21,22 @@ class LoginActivity : ComponentActivity() {
     lateinit var mainNavigator: MainNavigator
 
     override fun onCreate(savedInstanceState: Bundle?) {
+        enableEdgeToEdge()
         super.onCreate(savedInstanceState)
+
         setContent {
+            val systemUiController = rememberExSystemUiController()
+
+            DisposableEffect(systemUiController) {
+                systemUiController.setSystemBarsColor(
+                    color = Color.Transparent,
+                    darkIcons = true,
+                    isNavigationBarContrastEnforced = false,
+                )
+
+                onDispose {}
+            }
+
             ILabTheme {
                 LoginRoute(
                     navigateToHome = {