Feat: 루틴리스트 화면 Ui 구현

wjdrjs00 · wjdrjs00 · commit a62f22a953bd · 2025-08-16T08:21:01.000+09:00
diff --git a/core/designsystem/src/main/java/com/threegap/bitnagil/designsystem/component/atom/BitnagilTextButton.kt b/core/designsystem/src/main/java/com/threegap/bitnagil/designsystem/component/atom/BitnagilTextButton.kt
@@ -114,6 +114,16 @@ data class BitnagilTextButtonColor(
             disabledTextColor = BitnagilTheme.colors.navy500,
         )
 
+        @Composable
+        fun delete(): BitnagilTextButtonColor = BitnagilTextButtonColor(
+            defaultBackgroundColor = BitnagilTheme.colors.error10,
+            pressedBackgroundColor = BitnagilTheme.colors.error10,
+            disabledBackgroundColor = BitnagilTheme.colors.error10,
+            defaultTextColor = BitnagilTheme.colors.white,
+            pressedTextColor = BitnagilTheme.colors.white,
+            disabledTextColor = BitnagilTheme.colors.white,
+        )
+
         @Composable
         fun cancel(): BitnagilTextButtonColor = BitnagilTextButtonColor(
             defaultBackgroundColor = BitnagilTheme.colors.coolGray97,
diff --git a/core/designsystem/src/main/res/drawable/ic_shine.xml b/core/designsystem/src/main/res/drawable/ic_shine.xml
@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#FFBF00"
+        android:pathData="M11.054,3.342C11.144,3.092 11.074,2.702 11.254,2.572C11.454,2.432 11.804,2.342 12.044,2.342C12.284,2.342 12.434,2.712 12.634,2.852C12.824,2.982 13.244,2.982 13.334,3.222C13.474,3.592 13.264,3.662 13.404,4.032C13.544,4.402 13.654,4.352 13.784,4.722C13.914,5.092 14.054,5.032 14.194,5.402C14.334,5.772 14.294,5.782 14.424,6.152C14.554,6.522 14.234,6.642 14.374,7.002C14.514,7.362 14.464,7.392 14.594,7.752C14.724,8.112 14.834,8.082 14.974,8.452C15.094,8.772 15.414,9.042 15.734,9.162C16.104,9.302 16.124,9.242 16.484,9.372C16.844,9.502 16.784,9.672 17.154,9.802C17.524,9.932 17.544,9.872 17.904,10.002C18.264,10.132 18.394,9.802 18.764,9.942C19.134,10.082 19.124,10.082 19.494,10.222C19.864,10.362 19.714,10.762 20.084,10.902C20.454,11.042 20.474,10.992 20.834,11.122C21.084,11.212 21.204,11.332 21.334,11.512C21.474,11.712 21.424,11.882 21.424,12.122C21.424,12.362 21.644,12.652 21.504,12.852C21.374,13.042 21.154,13.242 20.904,13.332C20.534,13.472 20.584,13.592 20.224,13.732C19.864,13.872 19.794,13.692 19.434,13.832C19.074,13.972 18.954,13.662 18.594,13.792C18.234,13.922 18.234,13.942 17.864,14.082C17.494,14.222 17.494,14.202 17.124,14.332C16.754,14.462 16.754,14.462 16.384,14.602C16.014,14.742 16.034,14.782 15.664,14.912C15.344,15.032 15.244,15.532 15.124,15.852C14.984,16.222 14.874,16.172 14.734,16.542C14.594,16.912 14.504,16.872 14.364,17.232C14.224,17.592 14.524,17.702 14.394,18.072C14.264,18.442 14.254,18.442 14.124,18.802C13.994,19.162 13.704,19.062 13.564,19.432C13.424,19.802 13.474,19.812 13.334,20.182C13.194,20.552 13.244,20.562 13.104,20.932C13.014,21.182 12.874,21.342 12.684,21.472C12.484,21.612 12.274,21.452 12.034,21.452C11.794,21.452 11.484,21.762 11.274,21.622C11.084,21.492 10.924,21.232 10.824,20.982C10.684,20.612 10.824,20.562 10.694,20.202C10.564,19.842 10.764,19.762 10.624,19.402C10.484,19.042 10.174,19.152 10.034,18.792C9.894,18.432 9.874,18.432 9.734,18.072C9.594,17.712 9.664,17.682 9.524,17.312C9.384,16.942 9.394,16.942 9.254,16.572C9.114,16.202 9.074,16.222 8.944,15.852C8.824,15.532 8.624,15.282 8.304,15.162C7.934,15.022 7.914,15.092 7.554,14.952C7.194,14.812 7.264,14.622 6.894,14.482C6.524,14.342 6.494,14.442 6.134,14.302C5.774,14.162 5.784,14.122 5.414,13.992C5.044,13.862 5.024,13.912 4.664,13.772C4.304,13.632 4.244,13.772 3.874,13.632C3.504,13.492 3.524,13.452 3.154,13.322C2.904,13.232 2.854,12.912 2.724,12.722C2.584,12.522 2.594,12.342 2.594,12.112C2.594,11.882 2.354,11.542 2.494,11.332C2.624,11.142 3.034,11.302 3.274,11.212C3.644,11.072 3.574,10.912 3.944,10.772C4.314,10.632 4.234,10.432 4.604,10.302C4.974,10.172 5.084,10.492 5.454,10.352C5.824,10.212 5.824,10.232 6.194,10.092C6.564,9.952 6.454,9.662 6.814,9.522C7.174,9.382 7.174,9.382 7.544,9.242C7.914,9.102 7.924,9.142 8.294,9.002C8.614,8.882 9.124,8.792 9.244,8.472C9.384,8.102 9.254,8.062 9.394,7.692C9.534,7.322 9.354,7.262 9.494,6.902C9.634,6.542 9.544,6.502 9.684,6.142C9.824,5.782 10.014,5.852 10.154,5.482C10.294,5.112 10.014,5.012 10.154,4.652C10.294,4.292 10.554,4.392 10.734,4.042C10.914,3.692 10.914,3.682 11.054,3.312V3.342Z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M11.054,3.342C11.144,3.092 11.074,2.702 11.254,2.572C11.454,2.432 11.804,2.342 12.044,2.342C12.284,2.342 12.434,2.712 12.634,2.852C12.824,2.982 13.244,2.982 13.334,3.222C13.474,3.592 13.264,3.662 13.404,4.032C13.544,4.402 13.654,4.352 13.784,4.722C13.914,5.092 14.054,5.032 14.194,5.402C14.334,5.772 14.294,5.782 14.424,6.152C14.554,6.522 14.234,6.642 14.374,7.002C14.514,7.362 14.464,7.392 14.594,7.752C14.724,8.112 14.834,8.082 14.974,8.452C15.094,8.772 15.414,9.042 15.734,9.162C16.104,9.302 16.124,9.242 16.484,9.372C16.844,9.502 16.784,9.672 17.154,9.802C17.524,9.932 17.544,9.872 17.904,10.002C18.264,10.132 18.394,9.802 18.764,9.942C19.134,10.082 19.124,10.082 19.494,10.222C19.864,10.362 19.714,10.762 20.084,10.902C20.454,11.042 20.474,10.992 20.834,11.122C21.084,11.212 21.204,11.332 21.334,11.512C21.474,11.712 21.424,11.882 21.424,12.122C21.424,12.362 21.644,12.652 21.504,12.852C21.374,13.042 21.154,13.242 20.904,13.332C20.534,13.472 20.584,13.592 20.224,13.732C19.864,13.872 19.794,13.692 19.434,13.832C19.074,13.972 18.954,13.662 18.594,13.792C18.234,13.922 18.234,13.942 17.864,14.082C17.494,14.222 17.494,14.202 17.124,14.332C16.754,14.462 16.754,14.462 16.384,14.602C16.014,14.742 16.034,14.782 15.664,14.912C15.344,15.032 15.244,15.532 15.124,15.852C14.984,16.222 14.874,16.172 14.734,16.542C14.594,16.912 14.504,16.872 14.364,17.232C14.224,17.592 14.524,17.702 14.394,18.072C14.264,18.442 14.254,18.442 14.124,18.802C13.994,19.162 13.704,19.062 13.564,19.432C13.424,19.802 13.474,19.812 13.334,20.182C13.194,20.552 13.244,20.562 13.104,20.932C13.014,21.182 12.874,21.342 12.684,21.472C12.484,21.612 12.274,21.452 12.034,21.452C11.794,21.452 11.484,21.762 11.274,21.622C11.084,21.492 10.924,21.232 10.824,20.982C10.684,20.612 10.824,20.562 10.694,20.202C10.564,19.842 10.764,19.762 10.624,19.402C10.484,19.042 10.174,19.152 10.034,18.792C9.894,18.432 9.874,18.432 9.734,18.072C9.594,17.712 9.664,17.682 9.524,17.312C9.384,16.942 9.394,16.942 9.254,16.572C9.114,16.202 9.074,16.222 8.944,15.852C8.824,15.532 8.624,15.282 8.304,15.162C7.934,15.022 7.914,15.092 7.554,14.952C7.194,14.812 7.264,14.622 6.894,14.482C6.524,14.342 6.494,14.442 6.134,14.302C5.774,14.162 5.784,14.122 5.414,13.992C5.044,13.862 5.024,13.912 4.664,13.772C4.304,13.632 4.244,13.772 3.874,13.632C3.504,13.492 3.524,13.452 3.154,13.322C2.904,13.232 2.854,12.912 2.724,12.722C2.584,12.522 2.594,12.342 2.594,12.112C2.594,11.882 2.354,11.542 2.494,11.332C2.624,11.142 3.034,11.302 3.274,11.212C3.644,11.072 3.574,10.912 3.944,10.772C4.314,10.632 4.234,10.432 4.604,10.302C4.974,10.172 5.084,10.492 5.454,10.352C5.824,10.212 5.824,10.232 6.194,10.092C6.564,9.952 6.454,9.662 6.814,9.522C7.174,9.382 7.174,9.382 7.544,9.242C7.914,9.102 7.924,9.142 8.294,9.002C8.614,8.882 9.124,8.792 9.244,8.472C9.384,8.102 9.254,8.062 9.394,7.692C9.534,7.322 9.354,7.262 9.494,6.902C9.634,6.542 9.544,6.502 9.684,6.142C9.824,5.782 10.014,5.852 10.154,5.482C10.294,5.112 10.014,5.012 10.154,4.652C10.294,4.292 10.554,4.392 10.734,4.042C10.914,3.692 10.914,3.682 11.054,3.312V3.342Z"
+        android:strokeWidth="2"
+        android:strokeColor="#FFBF00"
+        android:strokeLineJoin="round" />
+</vector>
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/RoutineListScreen.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/RoutineListScreen.kt
@@ -3,6 +3,7 @@ package com.threegap.bitnagil.presentation.routinelist
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
@@ -11,64 +12,99 @@ import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 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.threegap.bitnagil.designsystem.BitnagilTheme
 import com.threegap.bitnagil.designsystem.component.block.BitnagilTopBar
+import com.threegap.bitnagil.presentation.common.flow.collectAsEffect
 import com.threegap.bitnagil.presentation.home.util.getCurrentWeekDays
+import com.threegap.bitnagil.presentation.routinelist.component.template.DeleteConfirmBottomSheet
 import com.threegap.bitnagil.presentation.routinelist.component.template.RoutineDetailsCard
 import com.threegap.bitnagil.presentation.routinelist.component.template.WeeklyDatePicker
+import com.threegap.bitnagil.presentation.routinelist.model.RoutineListIntent
+import com.threegap.bitnagil.presentation.routinelist.model.RoutineListSideEffect
+import com.threegap.bitnagil.presentation.routinelist.model.RoutineListState
 import java.time.LocalDate
 
 @Composable
 fun RoutineListScreenContainer(
-
+    navigateToBack: () -> Unit,
+    viewModel: RoutineListViewModel = hiltViewModel(),
 ) {
-    RoutineListScreen()
+    val uiState by viewModel.stateFlow.collectAsStateWithLifecycle()
+
+    viewModel.sideEffectFlow.collectAsEffect { sideEffect ->
+        when (sideEffect) {
+            is RoutineListSideEffect.NavigateToBack -> navigateToBack()
+        }
+    }
+
+    if (uiState.deleteConfirmBottomSheetVisible) {
+        DeleteConfirmBottomSheet(
+            onDismissRequest = { viewModel.sendIntent(RoutineListIntent.HideDeleteConfirmBottomSheet) },
+        )
+    }
+
+    RoutineListScreen(
+        uiState = uiState,
+        onDateSelect = { selectedDate ->
+            viewModel.sendIntent(RoutineListIntent.OnDateSelect(selectedDate))
+        },
+        onShowDeleteConfirmBottomSheet = {
+            viewModel.sendIntent(RoutineListIntent.ShowDeleteConfirmBottomSheet)
+        },
+        onBackClick = {
+            viewModel.sendIntent(RoutineListIntent.NavigateToBack)
+        },
+    )
 }
 
 @Composable
 private fun RoutineListScreen(
-    modifier: Modifier = Modifier
+    uiState: RoutineListState,
+    onDateSelect: (LocalDate) -> Unit,
+    onShowDeleteConfirmBottomSheet: () -> Unit,
+    onBackClick: () -> Unit,
+    modifier: Modifier = Modifier,
 ) {
     Column(
         modifier = modifier
             .fillMaxSize()
             .background(BitnagilTheme.colors.coolGray99)
             .statusBarsPadding(),
-        horizontalAlignment = Alignment.CenterHorizontally
+        horizontalAlignment = Alignment.CenterHorizontally,
     ) {
         BitnagilTopBar(
             title = "루틴리스트",
             showBackButton = true,
-            onBackClick = {},
+            onBackClick = onBackClick,
         )
 
-        var selectedDate by remember { mutableStateOf<LocalDate>(LocalDate.now()) }
-
         Spacer(modifier = Modifier.height(4.dp))
 
         WeeklyDatePicker(
-            selectedDate = selectedDate,
-            onDateSelect = { selectedDate = it },
-            weeklyDates = selectedDate.getCurrentWeekDays(),
+            selectedDate = uiState.selectedDate,
+            onDateSelect = onDateSelect,
+            weeklyDates = uiState.selectedDate.getCurrentWeekDays(),
             modifier = Modifier
-                .padding(vertical = 10.dp, horizontal = 16.dp)
+                .padding(vertical = 10.dp, horizontal = 16.dp),
         )
 
         LazyColumn(
             modifier = Modifier
                 .fillMaxSize()
                 .padding(horizontal = 16.dp),
-            verticalArrangement = Arrangement.spacedBy(12.dp)
+            verticalArrangement = Arrangement.spacedBy(12.dp),
+            contentPadding = PaddingValues(bottom = 10.dp),
         ) {
-            items(10) {
-                RoutineDetailsCard()
+            items(5) {
+                RoutineDetailsCard(
+                    onDeleteClick = onShowDeleteConfirmBottomSheet,
+                )
             }
         }
     }
@@ -77,5 +113,10 @@ private fun RoutineListScreen(
 @Preview
 @Composable
 private fun RoutineListScreenPreview() {
-    RoutineListScreen()
+    RoutineListScreen(
+        uiState = RoutineListState(),
+        onDateSelect = {},
+        onShowDeleteConfirmBottomSheet = {},
+        onBackClick = {},
+    )
 }
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/RoutineListViewModel.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/RoutineListViewModel.kt
@@ -0,0 +1,38 @@
+package com.threegap.bitnagil.presentation.routinelist
+
+import androidx.lifecycle.SavedStateHandle
+import com.threegap.bitnagil.domain.routine.usecase.FetchWeeklyRoutinesUseCase
+import com.threegap.bitnagil.presentation.common.mviviewmodel.MviViewModel
+import com.threegap.bitnagil.presentation.routinelist.model.RoutineListIntent
+import com.threegap.bitnagil.presentation.routinelist.model.RoutineListSideEffect
+import com.threegap.bitnagil.presentation.routinelist.model.RoutineListState
+import dagger.hilt.android.lifecycle.HiltViewModel
+import org.orbitmvi.orbit.syntax.simple.SimpleSyntax
+import javax.inject.Inject
+
+@HiltViewModel
+class RoutineListViewModel @Inject constructor(
+    savedStateHandle: SavedStateHandle,
+    private val fetchWeeklyRoutinesUseCase: FetchWeeklyRoutinesUseCase,
+) : MviViewModel<RoutineListState, RoutineListSideEffect, RoutineListIntent>(
+    savedStateHandle = savedStateHandle,
+    initState = RoutineListState(),
+) {
+    override suspend fun SimpleSyntax<RoutineListState, RoutineListSideEffect>.reduceState(
+        intent: RoutineListIntent,
+        state: RoutineListState,
+    ): RoutineListState? {
+        val newState = when (intent) {
+            is RoutineListIntent.OnDateSelect -> state.copy(selectedDate = intent.date)
+            is RoutineListIntent.ShowDeleteConfirmBottomSheet -> state.copy(deleteConfirmBottomSheetVisible = true)
+            is RoutineListIntent.HideDeleteConfirmBottomSheet -> state.copy(deleteConfirmBottomSheetVisible = false)
+
+            is RoutineListIntent.NavigateToBack -> {
+                sendSideEffect(RoutineListSideEffect.NavigateToBack)
+                null
+            }
+        }
+
+        return newState
+    }
+}
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/component/template/RoutineDetailsCard.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/component/template/RoutineDetailsCard.kt
@@ -23,7 +23,8 @@ import com.threegap.bitnagil.designsystem.component.atom.BitnagilIconButton
 
 @Composable
 fun RoutineDetailsCard(
-    modifier: Modifier = Modifier
+    onDeleteClick: () -> Unit,
+    modifier: Modifier = Modifier,
 ) {
     Column(
         modifier = modifier
@@ -32,29 +33,29 @@ fun RoutineDetailsCard(
                 shape = RoundedCornerShape(12.dp),
             )
             .fillMaxWidth()
-            .padding(vertical = 14.dp)
+            .padding(vertical = 14.dp),
     ) {
         Row(
             modifier = Modifier
                 .padding(start = 16.dp, end = 2.dp),
-            verticalAlignment = Alignment.CenterVertically
+            verticalAlignment = Alignment.CenterVertically,
         ) {
             BitnagilIcon(
                 id = R.drawable.ic_wakeup,
                 tint = null,
                 modifier = Modifier
                     .background(
                         color = BitnagilTheme.colors.orange25,
-                        shape = RoundedCornerShape(4.dp)
+                        shape = RoundedCornerShape(4.dp),
                     )
-                    .padding(4.dp)
+                    .padding(4.dp),
             )
 
             Text(
                 text = "개운하게 일어나기",
                 color = BitnagilTheme.colors.coolGray10,
                 style = BitnagilTheme.typography.body1SemiBold,
-                modifier = Modifier.padding(start = 10.dp)
+                modifier = Modifier.padding(start = 10.dp),
             )
 
             Spacer(modifier = Modifier.weight(1f))
@@ -63,27 +64,27 @@ fun RoutineDetailsCard(
                 id = R.drawable.ic_edit,
                 onClick = { /*TODO*/ },
                 tint = null,
-                paddingValues = PaddingValues(12.dp)
+                paddingValues = PaddingValues(12.dp),
             )
 
             BitnagilIconButton(
                 id = R.drawable.ic_trash,
-                onClick = { /*TODO*/ },
+                onClick = onDeleteClick,
                 tint = null,
-                paddingValues = PaddingValues(12.dp)
+                paddingValues = PaddingValues(12.dp),
             )
         }
 
         HorizontalDivider(
             thickness = 1.dp,
             color = BitnagilTheme.colors.coolGray97,
-            modifier = Modifier.padding(horizontal = 16.dp, vertical = 10.dp)
+            modifier = Modifier.padding(horizontal = 16.dp, vertical = 10.dp),
         )
 
         Column(
             modifier = Modifier
                 .padding(horizontal = 16.dp),
-            verticalArrangement = Arrangement.spacedBy(2.dp)
+            verticalArrangement = Arrangement.spacedBy(2.dp),
         ) {
             Text(
                 text = "세부 루틴",
@@ -110,13 +111,13 @@ fun RoutineDetailsCard(
         HorizontalDivider(
             thickness = 1.dp,
             color = BitnagilTheme.colors.coolGray97,
-            modifier = Modifier.padding(horizontal = 16.dp, vertical = 10.dp)
+            modifier = Modifier.padding(horizontal = 16.dp, vertical = 10.dp),
         )
 
         Column(
             modifier = Modifier
                 .padding(horizontal = 16.dp),
-            verticalArrangement = Arrangement.spacedBy(2.dp)
+            verticalArrangement = Arrangement.spacedBy(2.dp),
         ) {
             Text(
                 text = "반복:",
@@ -140,5 +141,7 @@ fun RoutineDetailsCard(
 @Preview
 @Composable
 private fun RoutineDetailsCardPreview() {
-    RoutineDetailsCard()
+    RoutineDetailsCard(
+        onDeleteClick = {},
+    )
 }
diff --git a/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/component/template/WeeklyDatePicker.kt b/presentation/src/main/java/com/threegap/bitnagil/presentation/routinelist/component/template/WeeklyDatePicker.kt
@@ -45,7 +45,7 @@ fun WeeklyDatePicker(
                 isSelected = selectedDate == date,
                 isToday = date == LocalDate.now(),
                 onDateClick = { onDateSelect(date) },
-                modifier = Modifier.padding(bottom = 18.dp)
+                modifier = Modifier.padding(bottom = 18.dp),
             )
         }
     }

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ fun WeeklyDatePicker(`
`45`	`45`	`isSelected = selectedDate == date,`
`46`	`46`	`isToday = date == LocalDate.now(),`
`47`	`47`	`onDateClick = { onDateSelect(date) },`
`48`		`- modifier = Modifier.padding(bottom = 18.dp)`
	`48`	`+ modifier = Modifier.padding(bottom = 18.dp),`
`49`	`49`	`)`
`50`	`50`	`}`
`51`	`51`	`}`