[FEAT/#66] 홈 화면 UI 구현

app/src/main/java/com/cherrish/android/core/common/extension/ModifierExt.kt

@@ -20,6 +20,7 @@ import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.cherrish.android.core.designsystem.theme.CherrishTheme
 
 @Composable
 inline fun Modifier.noRippleClickable(
@@ -45,7 +46,7 @@ fun Modifier.addFocusCleaner(focusManager: FocusManager): Modifier {
 @Composable
 fun Modifier.dropShadow(
     shape: Shape,
-    color: Color = Color.Black.copy(0.25f),
+    color: Color = CherrishTheme.colors.shadow,
     blur: Dp = 1.dp,
     offsetY: Dp = 1.dp,
     offsetX: Dp = 1.dp,

app/src/main/java/com/cherrish/android/core/designsystem/component/type/CherrishGaugeType.kt

@@ -1,10 +1,15 @@
 package com.cherrish.android.core.designsystem.component.type
 
+import androidx.annotation.DrawableRes
+import com.cherrish.android.R
+
 enum class CherrishGaugeType(
-    val step: Int
+    val step: Int,
+    val percent: Int,
+    @DrawableRes val image: Int
 ) {
-    LEVEL1(1),
-    LEVEL2(2),
-    LEVEL3(3),
-    LEVEL4(4)
+    LEVEL1(step = 1, percent = 25, image = R.drawable.img_lv1),
+    LEVEL2(step = 2, percent = 50, image = R.drawable.img_lv2),
+    LEVEL3(step = 3, percent = 75, image = R.drawable.img_lv3),
+    LEVEL4(step = 4, percent = 100, image = R.drawable.img_lv4)
 }

app/src/main/java/com/cherrish/android/core/designsystem/theme/Color.kt

@@ -37,6 +37,9 @@ val green3 = Color(0xFF9AD342)
 
 val shadow = Color(0xFF9098A7).copy(alpha = 0.12f)
 
+val graStart = Color(0xFFFFF7f7)
+val graEnd = Color(0xFFFFFDFD)
+
 val bottomSheetScrimColor = Color(0x1A464C52)
 
 @Immutable
@@ -69,6 +72,9 @@ data class CherrishColors(
 
     val shadow: Color,
 
+    val graStart: Color,
+    val graEnd: Color,
+
     val bottomSheetScrimColor: Color
 )
 
@@ -101,6 +107,9 @@ val defaultCherrishColors = CherrishColors(
 
     shadow = shadow,
 
+    graStart = graStart,
+    graEnd = graEnd,
+
     bottomSheetScrimColor = bottomSheetScrimColor
 )
 
@@ -222,6 +231,16 @@ private fun CherrishGrayColorsPreview() {
                 style = CherrishTheme.typography.body1M14,
                 color = CherrishTheme.colors.shadow
             )
+            Text(
+                text = "GraStart",
+                style = CherrishTheme.typography.body1M14,
+                color = CherrishTheme.colors.graStart
+            )
+            Text(
+                text = "GraEnd",
+                style = CherrishTheme.typography.body1M14,
+                color = CherrishTheme.colors.graEnd
+            )
             Text(
                 text = "BottomSheetScrimColor",
                 style = CherrishTheme.typography.body1M14,

app/src/main/java/com/cherrish/android/presentation/home/HomeScreen.kt

@@ -1,25 +1,138 @@
 package com.cherrish.android.presentation.home
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
+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.Text
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.cherrish.android.core.common.state.UiState
+import com.cherrish.android.core.designsystem.theme.CherrishTheme
+import com.cherrish.android.core.designsystem.theme.graEnd
+import com.cherrish.android.core.designsystem.theme.graStart
+import com.cherrish.android.presentation.home.component.ChallengeSection
+import com.cherrish.android.presentation.home.component.PlanBoxSection
+import com.cherrish.android.presentation.home.component.UpcomingPlanSection
+import java.time.LocalDate
+import kotlinx.collections.immutable.persistentListOf
 
 @Composable
 fun HomeRoute(
-    paddingValues: PaddingValues
+    paddingValues: PaddingValues,
+    viewModel: HomeViewModel = hiltViewModel()
 ) {
-    HomeScreen(paddingValues = paddingValues)
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+
+    when (val state = uiState) {
+        is UiState.Loading -> {
+        }
+
+        is UiState.Failure -> {
+        }
+
+        is UiState.Success -> {
+            HomeScreen(
+                uiState = state.data,
+                paddingValues = paddingValues,
+                onUpcomingPlanClick = viewModel::onUpcomingPlanClick,
+                onChallengeStartClick = viewModel::onAddChallengeClick,
+                onAddPlanClick = viewModel::onAddPlanClick
+            )
+        }
+
+        else -> {}
+    }
 }
 
 @Composable
 private fun HomeScreen(
+    uiState: HomeUiState,
     paddingValues: PaddingValues,
+    onUpcomingPlanClick: (LocalDate) -> Unit,
+    onChallengeStartClick: () -> Unit,
+    onAddPlanClick: () -> Unit,
     modifier: Modifier = Modifier
 ) {
-    Text(
-        text = "Home",
-        modifier = modifier.padding(paddingValues)
-    )
+    Box(
+        modifier = modifier
+            .fillMaxSize()
+            .background(color = CherrishTheme.colors.graEnd)
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(270.dp)
+                .background(
+                    brush = Brush.verticalGradient(
+                        colors = persistentListOf(
+                            graStart,
+                            graEnd
+                        )
+                    )
+                )
+        )
+
+        LazyColumn(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(paddingValues),
+            contentPadding = PaddingValues(
+                start = 17.dp,
+                end = 17.dp,
+                top = 30.dp,
+                bottom = 20.dp
+            ),
+            verticalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+            item {
+                ChallengeSection(
+                    imageRes = uiState.gauges[uiState.selectedIndex].image,
+                    currentStep = uiState.currentStep,
+                    gauges = uiState.gauges,
+                    onChallengeStartClick = onChallengeStartClick,
+                    challengeName = uiState.challengeName
+                )
+            }
+
+            item {
+                PlanBoxSection(
+                    todayDate = uiState.todayDate,
+                    plans = uiState.plans
+                )
+            }
+
+            item {
+                UpcomingPlanSection(
+                    onAddPlanClick = onAddPlanClick,
+                    plans = uiState.upcomingPlans,
+                    onUpcomingPlanClick = onUpcomingPlanClick
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun Preview() {
+    CherrishTheme {
+        HomeScreen(
+            uiState = HomeUiState.fake,
+            paddingValues = PaddingValues(0.dp),
+            onUpcomingPlanClick = {},
+            onAddPlanClick = {},
+            onChallengeStartClick = {}
+        )
+    }
 }

app/src/main/java/com/cherrish/android/presentation/home/HomeUiState.kt

@@ -0,0 +1,53 @@
+package com.cherrish.android.presentation.home
+
+import androidx.compose.runtime.Immutable
+import com.cherrish.android.core.designsystem.component.type.CherrishGaugeType
+import com.cherrish.android.presentation.home.model.PlanUiModel
+import com.cherrish.android.presentation.home.model.UpcomingPlanUiModel
+import com.cherrish.android.presentation.home.type.DowntimePhase
+import java.time.LocalDate
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.persistentListOf
+import kotlinx.collections.immutable.toImmutableList
+
+@Immutable
+data class HomeUiState(
+    val currentStep: Int,
+    val gauges: ImmutableList<CherrishGaugeType>,
+    val challengeName: String,
+    val todayDate: String,
+    val plans: ImmutableList<PlanUiModel>,
+    val upcomingPlans: ImmutableList<UpcomingPlanUiModel>,
+    val selectedIndex: Int
+) {
+    companion object {
+        val fake = HomeUiState(
+            currentStep = 1,
+            gauges = CherrishGaugeType.entries.toImmutableList(),
+            challengeName = "웰니스 • 마음챙김",
+            todayDate = "2026년 1월 1일 (목)",
+            plans = List(10) {
+                PlanUiModel(
+                    procedureName = "슈링크",
+                    daysSince = 2,
+                    downtimePhase = DowntimePhase.SENSITIVE
+                )
+            }.toImmutableList(),
+            upcomingPlans = persistentListOf(
+                UpcomingPlanUiModel(
+                    upcomingPlanDate = LocalDate.now().plusDays(3),
+                    procedureName = "써마지",
+                    procedureCount = 2,
+                    dDay = 3
+                ),
+                UpcomingPlanUiModel(
+                    upcomingPlanDate = LocalDate.now().plusDays(3),
+                    procedureName = "써마지",
+                    procedureCount = 2,
+                    dDay = 3
+                )
+            ),
+            selectedIndex = 0
+        )
+    }
+}

app/src/main/java/com/cherrish/android/presentation/home/HomeViewModel.kt

@@ -0,0 +1,28 @@
+package com.cherrish.android.presentation.home
+
+import androidx.lifecycle.ViewModel
+import com.cherrish.android.core.common.state.UiState
+import dagger.hilt.android.lifecycle.HiltViewModel
+import java.time.LocalDate
+import javax.inject.Inject
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+
+@HiltViewModel
+class HomeViewModel @Inject constructor() : ViewModel() {
+
+    private val _uiState = MutableStateFlow<UiState<HomeUiState>>(
+        UiState.Success(HomeUiState.fake)
+    )
+    val uiState: StateFlow<UiState<HomeUiState>> = _uiState.asStateFlow()
+
+    fun onUpcomingPlanClick(date: LocalDate) {
+    }
+
+    fun onAddChallengeClick() {
+    }
+
+    fun onAddPlanClick() {
+    }
+}