템플릿 리스트 UI 구현

presentation/home/src/main/java/com/dkin/chevit/presentation/home/Home.kt

@@ -79,8 +79,8 @@ class Home : MVIComposeFragment<HomeIntent, HomeState, HomeEffect>() {
                     .putExtra("android.provider.extra.APP_PACKAGE", requireContext().packageName)
                 startActivity(settingsIntent)
             }
-
             HomeEffect.NavigateToAddTemplate -> {}
+            HomeEffect.NavigateToSortTemplate -> {}
         }
     }
 

presentation/home/src/main/java/com/dkin/chevit/presentation/home/HomeContract.kt

@@ -1,8 +1,10 @@
 package com.dkin.chevit.presentation.home
 
+import androidx.compose.runtime.Stable
 import com.dkin.chevit.core.mvi.ViewEffect
 import com.dkin.chevit.core.mvi.ViewIntent
 import com.dkin.chevit.core.mvi.ViewState
+import com.dkin.chevit.presentation.home.model.Template
 
 sealed interface HomeIntent : ViewIntent {
     data class NoticeClicked(
@@ -14,6 +16,7 @@ sealed interface HomeIntent : ViewIntent {
     object WithdrawClicked : HomeIntent
 }
 
+@Stable
 data class HomeState(
     val userName: String,
     val profileUrl: String,
@@ -69,4 +72,14 @@ sealed interface HomeEffect : ViewEffect {
     object NavigateToNotificationSetting : HomeEffect
 
     object NavigateToAddTemplate : HomeEffect
+
+    object NavigateToSortTemplate : HomeEffect
 }
+
+@Stable
+sealed interface TemplateState {
+    object EMPTY : TemplateState
+    data class Available(
+        val templateList: List<Template>
+    ) : TemplateState
+}

presentation/home/src/main/java/com/dkin/chevit/presentation/home/HomeViewModel.kt

@@ -1,12 +1,33 @@
 package com.dkin.chevit.presentation.home
 
 import com.dkin.chevit.core.mvi.MVIViewModel
+import com.dkin.chevit.presentation.home.model.Template
+import com.dkin.chevit.presentation.home.model.TemplateColor
 import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
 import javax.inject.Inject
 
 @HiltViewModel
 class HomeViewModel @Inject constructor() : MVIViewModel<HomeIntent, HomeState, HomeEffect>() {
 
+    private val _templateState: MutableStateFlow<TemplateState> = MutableStateFlow(TemplateState.EMPTY)
+    val templateState = _templateState.asStateFlow()
+
+    init {
+        _templateState.value = TemplateState.Available(
+            listOf(
+                Template(id = 0, title = "자주 빠뜨리는 것", date = "2023.08.10", colorType = TemplateColor.DAWN),
+                Template(id = 1, title = "가족이랑 갈 때 필수템", date = "2023.08.07", colorType = TemplateColor.AFTERNOON),
+                Template(id = 2, title = "유럽 여행 갈 때", date = "2023.08.05", colorType = TemplateColor.MORNING),
+                Template(id = 3, title = "영상 촬영시 필요한 것들", date = "2023.08.04", colorType = TemplateColor.NIGHT),
+                Template(id = 4, title = "일본 갈 때 필수", date = "2023.08.03", colorType = TemplateColor.SUNSET),
+                Template(id = 5, title = "일본 갈 때 필수2", date = "2023.08.02", colorType = TemplateColor.DAWN),
+                Template(id = 6, title = "일본 갈 때 필수3", date = "2023.08.01", colorType = TemplateColor.AFTERNOON),
+            )
+        )
+    }
+
     override fun createInitialState(): HomeState = HomeState.empty()
 
     override suspend fun processIntent(intent: HomeIntent) {
@@ -59,4 +80,8 @@ class HomeViewModel @Inject constructor() : MVIViewModel<HomeIntent, HomeState,
     fun onClickAddTemplate() {
         setEffect { HomeEffect.NavigateToAddTemplate }
     }
+
+    fun onClickSortTemplate() {
+        setEffect { HomeEffect.NavigateToSortTemplate }
+    }
 }

presentation/home/src/main/java/com/dkin/chevit/presentation/home/contents/TemplateTabContents.kt

@@ -1,36 +1,55 @@
 package com.dkin.chevit.presentation.home.contents
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+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.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import com.dkin.chevit.presentation.home.HomeViewModel
-import com.dkin.chevit.presentation.resource.ChevitButtonFillLarge
+import com.dkin.chevit.presentation.home.TemplateState
+import com.dkin.chevit.presentation.home.model.Template
 import com.dkin.chevit.presentation.resource.ChevitButtonFillMedium
+import com.dkin.chevit.presentation.resource.ChevitFloatingButton
 import com.dkin.chevit.presentation.resource.ChevitTheme
 import com.dkin.chevit.presentation.resource.R
 import com.dkin.chevit.presentation.resource.icon.ChevitIcon
-import com.dkin.chevit.presentation.resource.icon.IconArrowRight
 import com.dkin.chevit.presentation.resource.icon.IconFilterFill
+import com.dkin.chevit.presentation.resource.icon.TemplateAfternoon
+import com.dkin.chevit.presentation.resource.icon.TemplateDawn
+import com.dkin.chevit.presentation.resource.icon.TemplateMorning
+import com.dkin.chevit.presentation.resource.icon.TemplateNight
+import com.dkin.chevit.presentation.resource.icon.TemplateSunset
 
 @Composable
 fun TemplateTabContents(
     modifier: Modifier = Modifier,
     homeViewModel: HomeViewModel,
 ) {
+    val state = homeViewModel.templateState.collectAsState().value
+
     Column(modifier = modifier) {
         Row(
             modifier = modifier
@@ -47,39 +66,122 @@ fun TemplateTabContents(
                 ),
             )
             Icon(
+                modifier = Modifier.clickable { homeViewModel.onClickSortTemplate() },
                 imageVector = ChevitIcon.IconFilterFill,
                 contentDescription = "",
             )
         }
-        Box(
-            Modifier
-                .fillMaxWidth()
-                .weight(1f), contentAlignment = Alignment.Center
-        ) {
-            Column(horizontalAlignment = Alignment.CenterHorizontally) {
-                Image(
-                    modifier = Modifier
-                        .size(140.dp),
-                    painter = painterResource(id = R.drawable.ic_empty_template),
-                    contentDescription = "",
-                )
-                Spacer(modifier = Modifier.height(12.dp))
-                Text(
-                    text = "생성된 항목이 없어요\n나만의 템플릿을 만들어 보아요!",
-                    textAlign = TextAlign.Center,
-                    style = ChevitTheme.typhography.bodyLarge.copy(
-                        color = ChevitTheme.colors.textSecondary
-                    )
-                )
-                Spacer(modifier = Modifier.height(18.dp))
-                ChevitButtonFillMedium(
-                    modifier = Modifier.size(width = 187.dp, height = 54.dp),
-                    onClick = { homeViewModel.onClickAddTemplate() }
+        when (state) {
+            is TemplateState.Available -> {
+                Box(
+                    modifier = modifier
+                        .fillMaxWidth()
+                        .weight(1f)
+                        .padding(horizontal = 24.dp)
                 ) {
-                    Text(text = "추가하기")
+                    val listState = rememberLazyListState()
+                    val templateList = state.templateList
+                    LazyColumn(
+                        state = listState,
+                        contentPadding = PaddingValues(top = 30.dp, bottom = 14.dp),
+                        verticalArrangement = Arrangement.spacedBy(24.dp)
+                    ) {
+                        items(count = templateList.size) {
+                            TemplateItem(template = templateList[it])
+                        }
+                    }
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(bottom = 24.dp)
+                            .align(Alignment.BottomEnd)
+                    ) {
+                        ChevitFloatingButton(
+                            modifier = Modifier.align(Alignment.BottomEnd),
+                            onClick = { homeViewModel.onClickAddTemplate() }
+                        )
+                    }
                 }
             }
 
+            TemplateState.EMPTY -> {
+                Box(
+                    Modifier
+                        .fillMaxWidth()
+                        .weight(1f), contentAlignment = Alignment.Center
+                ) {
+                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                        Image(
+                            modifier = Modifier
+                                .size(140.dp),
+                            painter = painterResource(id = R.drawable.ic_empty_template),
+                            contentDescription = "",
+                        )
+                        Spacer(modifier = Modifier.height(12.dp))
+                        Text(
+                            text = "생성된 항목이 없어요\n나만의 템플릿을 만들어 보아요!",
+                            textAlign = TextAlign.Center,
+                            style = ChevitTheme.typhography.bodyLarge.copy(
+                                color = ChevitTheme.colors.textSecondary
+                            )
+                        )
+                        Spacer(modifier = Modifier.height(18.dp))
+                        ChevitButtonFillMedium(
+                            modifier = Modifier.size(width = 187.dp, height = 54.dp),
+                            onClick = { homeViewModel.onClickAddTemplate() }
+                        ) {
+                            Text(text = "추가하기")
+                        }
+                    }
+
+                }
+            }
         }
     }
 }
+
+
+@Composable
+private fun TemplateItem(
+    template: Template
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(90.dp)
+            .background(color = template.colorType.color, shape = RoundedCornerShape(12.dp))
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 14.5.dp)
+                .align(Alignment.BottomStart)
+        ) {
+            Text(
+                text = template.title,
+                style = ChevitTheme.typhography.headlineSmall.copy(
+                    color = ChevitTheme.colors.white
+                ),
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
+            )
+            Text(
+                text = "생성일:${template.date}",
+                style = ChevitTheme.typhography.bodySmall.copy(
+                    color = ChevitTheme.colors.white
+                ),
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
+            )
+            Spacer(modifier = Modifier.height(12.dp))
+        }
+        Box(
+            modifier = Modifier
+                .align(Alignment.BottomEnd)
+                .padding(end = 19.dp)
+        ) {
+            Image(imageVector = template.colorType.icon, contentDescription = "")
+        }
+    }
+}
+

presentation/home/src/main/java/com/dkin/chevit/presentation/home/model/Template.kt

@@ -0,0 +1,8 @@
+package com.dkin.chevit.presentation.home.model
+
+data class Template(
+    val id: Int,
+    val title: String,
+    val date: String,
+    val colorType: TemplateColor
+)

presentation/home/src/main/java/com/dkin/chevit/presentation/home/model/TemplateColor.kt

@@ -0,0 +1,18 @@
+package com.dkin.chevit.presentation.home.model
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
+import com.dkin.chevit.presentation.resource.icon.TemplateAfternoon
+import com.dkin.chevit.presentation.resource.icon.TemplateDawn
+import com.dkin.chevit.presentation.resource.icon.TemplateMorning
+import com.dkin.chevit.presentation.resource.icon.TemplateNight
+import com.dkin.chevit.presentation.resource.icon.TemplateSunset
+
+enum class TemplateColor(val color: Color, val icon: ImageVector) {
+    DAWN(color = Color(0xFF8785FF), icon = ChevitIcon.TemplateDawn),
+    MORNING(color = Color(0xFF4A47FF), icon = ChevitIcon.TemplateMorning),
+    AFTERNOON(color = Color(0xFFFFAE63), icon = ChevitIcon.TemplateAfternoon),
+    SUNSET(color = Color(0xFFFF9534), icon = ChevitIcon.TemplateSunset),
+    NIGHT(color = Color(0xFF030099), icon = ChevitIcon.TemplateNight)
+}

presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/ChevitFloatingButton.kt

@@ -0,0 +1,36 @@
+package com.dkin.chevit.presentation.resource
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
+import com.dkin.chevit.presentation.resource.icon.IconAddFill
+
+@Composable
+fun ChevitFloatingButton(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit = {}
+) {
+    Box(
+        modifier = modifier
+            .size(50.dp)
+            .clip(CircleShape)
+            .background(color = ChevitTheme.colors.blue7)
+            .clickable { onClick() },
+        contentAlignment = Alignment.Center
+    ) {
+        Icon(
+            imageVector = ChevitIcon.IconAddFill,
+            contentDescription = "",
+            tint = ChevitTheme.colors.white,
+        )
+    }
+}