[UI/YAF-85] 알람 메인 화면 배경을 구현합니다.

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

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="375dp"
+    android:height="161dp"
+    android:viewportWidth="375"
+    android:viewportHeight="161">
+  <path
+      android:pathData="M366.47,-55.59L368.91,-61.56L370.63,-68.96L375.56,-76.36L372.46,-83.95L368.26,-90.69L363.06,-97.17L356.03,-101.77L348.95,-106.7L340.67,-109.85L331.67,-109.18L323.1,-106.31L315.03,-102.03L310.19,-94.05L303.73,-86.73L308.5,-77.06L303.05,-67.78L310.52,-60.95L310.04,-59.77L308.48,-59.7L311,-61.46L305.05,-68.39L298.39,-74.4L289.47,-76.22L281.01,-77.24L272.5,-77.08L265.5,-72L258.95,-67.32L249.71,-64.16L247.46,-55.21L244.5,-46.73L246.63,-37.84L248.66,-29.18L253.25,-22.79L260.76,-20.08L266.67,-15.71L273,-10.64L279.79,-11.02L274.84,-5.83L273.52,2.08L276.33,9.79L271.68,17.71L276.73,24.76L281.8,32.16L290.04,35.67L297.02,40.9L305.61,40.22L314.49,42.73L321.82,37.37L330.7,35.03L334.07,26.29L340.54,19.76L343.25,10.71L342.35,1.58L337.55,-6.53L337.76,-3.53L336.55,-5.08L337.68,-6.93L340.05,2.76L349.65,5.04L356.99,8.52L365.12,12.87L373.28,8.21L383.07,10.38L389.85,3.99L396.13,-2.55L399.85,-10.89L398,-19.65L399.36,-28.63L394.01,-35.69L393.54,-44.34L385.39,-46.48L379.25,-50.23L372.08,-51.89L366.47,-55.59Z"
+      android:strokeAlpha="0.4"
+      android:fillColor="#1C3D5A"
+      android:fillAlpha="0.4"/>
+  <path
+      android:pathData="M96.1,24.9L99.19,17.71L101.45,8.77L107.61,-0.1L104.02,-9.38L99.07,-17.66L92.91,-25.65L84.48,-31.39L76,-37.53L66.03,-41.55L55.09,-40.94L44.61,-37.66L34.73,-32.64L28.67,-23.07L20.66,-14.33L26.22,-2.49L19.4,8.65L28.31,17.12L27.7,18.54L25.81,18.59L28.9,16.51L21.84,7.96L13.89,0.51L3.11,-1.9L-7.13,-3.33L-17.47,-3.33L-26.08,2.67L-34.14,8.2L-45.43,11.82L-48.37,22.63L-52.15,32.86L-49.76,43.7L-47.5,54.26L-42.08,62.12L-33.02,65.58L-25.95,71.02L-18.38,77.32L-10.14,77.02L-16.26,83.2L-18.04,92.77L-14.81,102.19L-20.63,111.71L-14.66,120.37L-8.68,129.48L1.24,133.92L9.59,140.43L20.04,139.8L30.75,143.04L39.78,136.71L50.61,134.07L54.89,123.55L62.9,115.77L66.39,104.84L65.51,93.74L59.87,83.79L60.06,87.43L58.63,85.52L60.05,83.31L62.7,95.12L74.3,98.11L83.13,102.5L92.89,107.96L102.91,102.49L114.74,105.35L123.11,97.75L130.88,89.96L135.59,79.93L133.54,69.25L135.4,58.38L129.07,49.69L128.69,39.17L118.85,36.39L111.48,31.69L102.82,29.52L96.1,24.9Z"
+      android:strokeAlpha="0.4"
+      android:fillColor="#1C3D5A"
+      android:fillAlpha="0.4"/>
+</vector>

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

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <path
+      android:pathData="M9.999,3.167C10.552,3.167 10.999,3.614 10.999,4.167V9H15.833C16.385,9 16.833,9.448 16.833,10C16.833,10.552 16.385,11 15.833,11H10.999V15.833C10.999,16.386 10.552,16.833 9.999,16.833C9.447,16.833 8.999,16.386 8.999,15.833V11H4.166C3.614,11 3.166,10.552 3.166,10C3.166,9.448 3.614,9 4.166,9H8.999V4.167C8.999,3.614 9.447,3.167 9.999,3.167Z"
+      android:fillColor="#17191F"
+      android:fillType="evenOdd"/>
+</vector>

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

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="25dp"
+    android:viewportWidth="24"
+    android:viewportHeight="25">
+  <path
+      android:pathData="M10.092,3.884C9.906,3.747 9.688,3.658 9.459,3.625C9.23,3.592 8.997,3.615 8.779,3.693C7.76,4.067 6.814,4.614 5.983,5.311C5.592,5.639 5.449,6.118 5.492,6.542C5.562,7.247 5.438,7.929 5.098,8.516C4.76,9.104 4.231,9.553 3.584,9.844C3.373,9.938 3.187,10.082 3.044,10.264C2.901,10.446 2.805,10.66 2.764,10.888C2.579,11.955 2.579,13.046 2.764,14.113C2.851,14.616 3.195,14.981 3.584,15.157C4.231,15.448 4.76,15.898 5.099,16.485C5.438,17.073 5.562,17.753 5.492,18.459C5.45,18.883 5.592,19.363 5.983,19.69C6.814,20.387 7.76,20.934 8.779,21.307C8.997,21.385 9.23,21.408 9.459,21.375C9.688,21.342 9.905,21.253 10.091,21.117C10.668,20.702 11.321,20.469 12,20.469C12.679,20.469 13.331,20.702 13.908,21.117C14.255,21.366 14.742,21.483 15.221,21.307C16.24,20.934 17.186,20.387 18.017,19.69C18.408,19.363 18.551,18.884 18.508,18.459C18.438,17.753 18.562,17.072 18.902,16.485C19.24,15.897 19.769,15.449 20.416,15.157C20.804,14.982 21.149,14.616 21.236,14.113C21.421,13.046 21.421,11.955 21.236,10.888C21.195,10.66 21.099,10.446 20.956,10.264C20.813,10.082 20.628,9.938 20.416,9.844C19.769,9.553 19.24,9.104 18.901,8.516C18.562,7.929 18.438,7.247 18.508,6.542C18.533,6.312 18.501,6.08 18.416,5.865C18.33,5.651 18.193,5.46 18.017,5.311C17.186,4.614 16.24,4.067 15.221,3.693C15.004,3.616 14.77,3.592 14.542,3.625C14.313,3.659 14.095,3.747 13.909,3.884C13.331,4.297 12.678,4.532 12,4.532C11.322,4.532 10.669,4.298 10.092,3.884ZM9.188,12.5C9.188,11.754 9.484,11.039 10.011,10.512C10.539,9.984 11.254,9.688 12,9.688C12.746,9.688 13.461,9.984 13.989,10.512C14.516,11.039 14.813,11.754 14.813,12.5C14.813,13.246 14.516,13.962 13.989,14.489C13.461,15.017 12.746,15.313 12,15.313C11.254,15.313 10.539,15.017 10.011,14.489C9.484,13.962 9.188,13.246 9.188,12.5Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+</vector>

core/ui/src/main/java/com/yapp/ui/utils/HeightForScreenPercentage.kt

@@ -0,0 +1,13 @@
+package com.yapp.ui.utils
+
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun Modifier.heightForScreenPercentage(percentage: Float): Modifier {
+    val screenHeight = LocalConfiguration.current.screenHeightDp.dp
+    return this.height(screenHeight * percentage)
+}

feature/home/src/main/java/com/yapp/home/HomeScreen.kt

@@ -1,16 +1,265 @@
 package com.yapp.home
 
+import android.util.Log
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+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.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.ColorMatrix
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
+import com.yapp.designsystem.theme.OrbitTheme
+import com.yapp.domain.model.Alarm
+import com.yapp.ui.utils.heightForScreenPercentage
+import feature.home.R
 
 @Composable
 fun HomeRoute(
     modifier: Modifier = Modifier,
 ) {
-    Box(modifier = modifier.fillMaxSize()) {
-        Text("home")
+    HomeScreen()
+}
+
+@Composable
+fun HomeScreen() {
+    val systemUiController = rememberSystemUiController()
+
+    val statusBarColor = OrbitTheme.colors.gray_900
+
+    DisposableEffect(Unit) {
+        systemUiController.setStatusBarColor(
+            color = Color.Transparent
+        )
+        Log.d("HomeScreen", "statusBarColor: Transparent")
+        onDispose {
+            systemUiController.setStatusBarColor(
+                color = statusBarColor
+            )
+        }
+    }
+
+    val alarms = listOf(
+        Alarm(
+            id = 1,
+            hour = 7,
+            minute = 30,
+        ),
+        Alarm(
+            id = 2,
+            hour = 6,
+            minute = 30,
+        ),
+        Alarm(
+            id = 3,
+            hour = 8,
+            minute = 30,
+        ),
+        Alarm(
+            id = 4,
+            hour = 10,
+            minute = 30,
+        )
+    )
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(OrbitTheme.colors.gray_900)
+    ) {
+        HomeTopBar {
+
+        }
+
+        Spacer(modifier = Modifier.heightForScreenPercentage(0.13f))
+
+        HomeEmpty()
+    }
+}
+
+@Composable
+private fun HomeTopBar(
+    onSettingClick: () -> Unit,
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(
+                horizontal = 20.dp,
+                vertical = 12.dp,
+            ),
+        horizontalArrangement = Arrangement.SpaceBetween,
+    ) {
+        Text(
+            text = stringResource(id = R.string.home_top_bar_title),
+            style = OrbitTheme.typography.heading1SemiBold.copy(
+                fontWeight = FontWeight.Bold,
+            ),
+            color = OrbitTheme.colors.main,
+        )
+
+        Box(
+            modifier = Modifier
+                .size(32.dp)
+                .clip(CircleShape)
+                .clickable {
+                    onSettingClick()
+                },
+            contentAlignment = Alignment.Center
+        ) {
+            Icon(
+                painter = painterResource(id = core.designsystem.R.drawable.ic_setting),
+                contentDescription = "setting",
+                tint = Color.Unspecified,
+            )
+        }
+    }
+}
+
+@Composable
+private fun HomeEmpty() {
+    val colorMatrix = ColorMatrix().apply {
+        setToSaturation(0f)
+    }
+
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Image(
+            painter = painterResource(
+                id = core.designsystem.R.mipmap.img_main_star
+            ),
+            contentDescription = "IMG_MAIN_STAR_GRAY",
+            colorFilter = ColorFilter.colorMatrix(colorMatrix)
+        )
+
+        Spacer(modifier = Modifier.height(35.dp))
+
+        Text(
+            text = stringResource(id = R.string.home_empty_title),
+            style = OrbitTheme.typography.heading1SemiBold,
+            color = OrbitTheme.colors.white
+        )
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        Text(
+            text = stringResource(id = R.string.home_empty_description),
+            style = OrbitTheme.typography.body1Regular,
+            color = OrbitTheme.colors.gray_300,
+            textAlign = TextAlign.Center
+        )
+
+        Spacer(modifier = Modifier.height(32.dp))
+
+        AddAlarmButton(
+            modifier = Modifier.padding(horizontal = 86.dp),
+            onClick = {
+
+            }
+        )
+    }
+}
+
+@Composable
+private fun AddAlarmButton(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+    enabled: Boolean = true,
+    height: Dp = 54.dp,
+    containerColor: Color = OrbitTheme.colors.main,
+    contentColor: Color = OrbitTheme.colors.gray_900,
+    pressedContainerColor: Color = OrbitTheme.colors.main.copy(alpha = 0.8f),
+    pressedContentColor: Color = OrbitTheme.colors.gray_600,
+    disabledContainerColor: Color = OrbitTheme.colors.main.copy(alpha = 0.6f),
+    disabledContentColor: Color = OrbitTheme.colors.gray_400,
+) {
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed = interactionSource.collectIsPressedAsState().value
+
+    val currentContainerColor = if (isPressed) pressedContainerColor else containerColor
+    val currentContentColor = if (isPressed) pressedContentColor else contentColor
+
+    val padding by animateDpAsState(
+        targetValue = if (isPressed) 2.dp else 0.dp,
+        animationSpec = tween(durationMillis = 100),
+        label = "",
+    )
+
+    Button(
+        onClick = onClick,
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(all = padding)
+            .height(height),
+        enabled = enabled,
+        shape = RoundedCornerShape(16.dp),
+        colors = ButtonDefaults.buttonColors(
+            containerColor = currentContainerColor,
+            contentColor = currentContentColor,
+            disabledContainerColor = disabledContainerColor,
+            disabledContentColor = disabledContentColor,
+        ),
+        contentPadding = PaddingValues(0.dp),
+        interactionSource = interactionSource,
+    ) {
+        Icon(
+            painter = painterResource(core.designsystem.R.drawable.ic_plus),
+            tint = Color.Unspecified,
+            contentDescription = "IC_PLUS",
+        )
+
+        Spacer(modifier = Modifier.width(4.dp))
+
+        Text(
+            text = "새 알람 추가하기",
+            style = OrbitTheme.typography.heading1Medium.copy(
+                fontWeight = FontWeight.SemiBold
+            ),
+        )
     }
 }
+
+@Preview(
+    showBackground = true,
+    backgroundColor = 0xFF000000,
+)
+@Composable
+fun HomeScreenPreview() {
+    HomeScreen()
+}

feature/home/src/main/res/values/strings.xml

@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
+    <string name="home_top_bar_title">Orbit</string>
+    <string name="home_empty_title">기상 알림이 없어요</string>
+    <string name="home_empty_description">알림을 추가하여 미래 편지를 받아보세요\n가장 빠른 알람에 운세를 드려요</string>
+    <string name="home_btn_add_alarm">새 알람 추가하기</string>
     <string name="alarm_add_edit_repeat">요일 반복</string>
     <string name="alarm_add_edit_weekdays">평일</string>
     <string name="alarm_add_edit_weekends">주말</string>

gradle/libs.versions.toml

@@ -25,7 +25,6 @@ kotlinx-coroutines = "1.9.0-RC"
 kotlinx-datetime = "0.4.0"
 kotlinx-collections = "0.3.7"
 
-
 ## AndroidX
 androidx-app-compat = "1.7.0"
 androidx-core = "1.15.0"
@@ -38,6 +37,7 @@ androidx-lifecycle = "2.8.7"
 compose-bom = "2024.11.00"
 compose-navigation = "2.8.4"
 compose-material3 = "1.3.1"
+compose-ui = "1.7.6"
 activity-compose = "1.9.3"
 
 ## Hilt
@@ -50,7 +50,6 @@ retrofit = "2.11.0"
 retrofit-kotlinx-serialization-json = "1.0.0"
 coil = "2.4.0"
 
-
 ## Test
 junit = "4.13.2"
 mockito = "3.3.3"
@@ -68,6 +67,7 @@ process-pheonix = "3.0.0"
 lottie = "6.1.0"
 accompanist = "0.37.0"
 
+accompanist = "0.28.0"
 
 [libraries]
 
@@ -97,7 +97,7 @@ androidx-room-paging = { group = "androidx.room", name = "room-paging", version.
 activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activity-compose" }
 compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "compose-bom" }
 compose-navigation = { group = "androidx.navigation", name = "navigation-compose", version.ref = "compose-navigation" }
-compose-ui = { group = "androidx.compose.ui", name = "ui" }
+compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose-ui" }
 compose-material = { group = "androidx.compose.material", name = "material", version.ref = "compose-material3" }
 compose-material3 = { group = "androidx.compose.material3", name = "material3", version.ref = "compose-material3" }
 lifecycle-runtime = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "androidx-lifecycle" }
@@ -111,6 +111,7 @@ compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-mani
 compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
 compose-ui-foundation = { group = "androidx.compose.foundation", name = "foundation" }
 compose-compiler-extension = { module = "org.jetbrains.kotlin:compose-compiler-gradle-plugin", version.ref = "kotlin" }
+accompanist-systemui = { group = "com.google.accompanist", name = "accompanist-systemuicontroller", version.ref = "accompanist" }
 
 # Hilt
 hilt-core = { group = "com.google.dagger", name = "hilt-core", version.ref = "hilt" }