[feature/add-empty-view] Add Empty View in LazyColumn (#19)

* Apply internal modifier to DeleteTaskDialog

* Make EmptyTaskView

* Fix alpha of background and add item in list

Author: l2hyunwoo

core/designsystem/src/main/java/com/conf/mad/todo/designsystem/Color.kt

@@ -10,6 +10,7 @@ val Pink = Color(0xFFFFD2D2)
 val Blue = Color(0xFF5182FF)
 val SkyBlue = Color(0xFFE2EFFF)
 val LightBlue = Color(0xFFF8FBFF)
+val AshBlue = Color(0xFFC9DBF0)
 
 // Gray Scale
 val Black = Color(0xFF000000)

feature/home/src/main/java/com/conf/mad/todo/home/HomeScreen.kt

@@ -19,9 +19,11 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.compose.composable
+import com.conf.mad.todo.designsystem.SkyBlue
 import com.conf.mad.todo.designsystem.TodoTheme
 import com.conf.mad.todo.designsystem.preview.DevicePreview
 import com.conf.mad.todo.home.component.DeleteTaskDialog
+import com.conf.mad.todo.home.component.EmptyTaskView
 import com.conf.mad.todo.home.component.HomeBottomAppBar
 import com.conf.mad.todo.home.component.HomeTopAppBar
 import com.conf.mad.todo.home.component.TaskItem
@@ -124,6 +126,17 @@ fun HomeScreen(
                 )
                 Spacer(modifier = Modifier.height(12.dp))
             }
+            if (todos.isEmpty()) {
+                item(key = "empty todo view") {
+                    EmptyTaskView(
+                        modifier = Modifier
+                            .background(SkyBlue.copy(alpha = 0.2f))
+                            .fillMaxWidth()
+                            .padding(top = 20.dp)
+                            .height(128.dp)
+                    )
+                }
+            }
             items(todos, key = { it.id ?: UNDEFINED_ID }) { todo ->
                 TaskItem(
                     modifier = Modifier.fillMaxWidth(),
@@ -155,6 +168,17 @@ fun HomeScreen(
                     )
                     Spacer(modifier = Modifier.height(12.dp))
                 }
+                if (completedTasks.isEmpty()) {
+                    item(key = "empty completed task view") {
+                        EmptyTaskView(
+                            modifier = Modifier
+                                .background(SkyBlue.copy(alpha = 0.2f))
+                                .fillMaxWidth()
+                                .padding(top = 20.dp)
+                                .height(128.dp)
+                        )
+                    }
+                }
                 items(completedTasks) { task ->
                     TaskItem(
                         modifier = Modifier.fillMaxWidth(),

feature/home/src/main/java/com/conf/mad/todo/home/component/DeleteTaskDialog.kt

@@ -24,7 +24,7 @@ import com.conf.mad.todo.designsystem.TodoTheme
 import com.conf.mad.todo.designsystem.preview.DevicePreview
 
 @Composable
-fun DeleteTaskDialog(
+internal fun DeleteTaskDialog(
     onDismissRequest: () -> Unit,
     onConfirm: () -> Unit
 ) {

feature/home/src/main/java/com/conf/mad/todo/home/component/EmptyTaskView.kt

@@ -0,0 +1,53 @@
+package com.conf.mad.todo.home.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+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.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import com.conf.mad.todo.designsystem.AshBlue
+import com.conf.mad.todo.designsystem.SkyBlue
+import com.conf.mad.todo.designsystem.TodoTheme
+import com.conf.mad.todo.designsystem.preview.ComponentPreview
+import com.conf.mad.todo.home.R
+
+@Composable
+internal fun EmptyTaskView(
+    modifier: Modifier = Modifier,
+) {
+    Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) {
+        Image(
+            painter = painterResource(id = R.drawable.ic_clip),
+            contentDescription = "Empty View",
+            modifier = Modifier.padding(vertical = 18.dp)
+        )
+        Spacer(modifier = Modifier.height(4.dp))
+        Text(
+            text = "투두를 추가해보세요",
+            style = TodoTheme.typography.medium2,
+            color = AshBlue
+        )
+    }
+}
+
+@ComponentPreview
+@Composable
+private fun EmptyTaskPreview() {
+    TodoTheme {
+        EmptyTaskView(
+            modifier = Modifier
+                .background(SkyBlue.copy(alpha = 0.3f))
+                .fillMaxWidth()
+                .padding(top = 20.dp)
+                .height(128.dp)
+        )
+    }
+}

feature/home/src/main/res/drawable/ic_clip.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="72dp"
+    android:height="19dp"
+    android:viewportWidth="72"
+    android:viewportHeight="19">
+  <path
+      android:pathData="M59.243,0C67.703,0 71.915,2.988 71.915,8.892V9.504C71.915,15.552 67.703,18.612 59.243,18.612H12.731C10.751,18.612 9.023,18.396 7.475,18.036C5.963,17.64 4.739,17.172 3.803,16.56C2.903,15.984 2.147,15.264 1.535,14.436C0.959,13.608 0.563,12.816 0.347,11.988C0.131,11.196 0.023,10.368 0.023,9.504V8.892C0.023,8.028 0.131,7.2 0.347,6.408C0.563,5.652 0.959,4.824 1.535,4.032C2.111,3.24 2.867,2.52 3.803,1.944C4.703,1.368 5.927,0.9 7.439,0.54C8.987,0.18 10.715,0 12.695,0H59.243ZM65.291,9.288V9.144C65.291,8.028 64.787,7.056 63.743,6.3C62.807,5.58 61.259,5.22 59.171,5.148C59.027,5.148 13.487,5.148 13.343,5.148H13.307C10.931,5.148 9.203,5.544 8.195,6.3C7.187,7.056 6.683,7.992 6.683,9.144V9.288C6.683,10.404 7.187,11.376 8.231,12.168C9.239,12.996 10.931,13.392 13.307,13.392C13.487,13.392 59.063,13.392 59.243,13.392C61.331,13.32 62.807,12.924 63.743,12.168C64.787,11.376 65.291,10.404 65.291,9.288ZM29.723,12.708L34.691,5.868H42.179L37.211,12.708H29.723Z"
+      android:fillColor="#E2EFFF"/>
+</vector>