우리는 data class를 이용하여 Todo 데이터의 구조를 맏들 것이다.

그리고 이렇게 만든 데이터 클래스에 데이터를 다음과 같이 집어 넣어 보자

"Todo.kt

package com.dklaw.gogo2.database
 
import java.time.LocalDate
 
data class Todo(
    var id : Int,
    var title : String,
    var createdAt : LocalDateTime
)
 
fun getFakeTodo() : List<Todo> {
    return listOf<Todo>(
        Todo(1, "First todo", LocalDateTime.now()),
        Todo(2, "Seconde todo", LocalDateTime.now()),
        Todo(3, "Third todo", LocalDateTime.now()),
        Todo(4, "This is the last todo", LocalDateTime.now())
    )
}

위의 제목과 만든 날짜를 화면에 간단하게 출력해보자

"TodoListPage.kt"

package com.dklaw.gogo2.pages
 
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.dklaw.gogo2.database.Todo
import com.dklaw.gogo2.database.getFakeTodo
import java.time.format.DateTimeFormatter
 
@Composable
fun ContactsPage() {
 
    val todoList = getFakeTodo()
 
    Column(modifier = Modifier
        .fillMaxHeight()
        .padding(8.dp))
    {
        LazyColumn(
            content = {
                itemsIndexed(todoList) {
                    index : Int, item : Todo ->
                    TodoItem(item = item)
                }
            }
        )
    }
}
 
@Composable
fun TodoItem(item : Todo) {
    val timeFormater : DateTimeFormatter = DateTimeFormatter.ofPattern("yyyy년 M월 d일 a h시 m분")
    val nowString = item.createdAt.format(timeFormater)
 
    Row {
        Column {
            Text(text = nowString)
            Text(text = item.title)
        }
    }
}

"TodoManager.kt"

package com.dklaw.gogo2.database
 
import java.time.LocalDateTime
 
object TodoManager {
 
    private val todoList = mutableListOf<Todo>()
 
    fun getAllTodo() : List<Todo>{
        return todoList
    }
 
    fun addTodo(title : String) {
        todoList.add(Todo(System.currentTimeMillis().toInt(), title, LocalDateTime.now()))
    }
 
    fun deleteTodo(id : Int) {
        todoList.removeIf{
            it.id == id
        }
    }
}

Todo Manager에서 한 데이터 작업을 뷰모델에서 다시 가져온다.

"TodoViewModel.kt"

package com.dklaw.gogo2.database
 
import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
 
class TodoViewModel: ViewModel() {
 
    private var _todoList = MutableLiveData<List<Todo>>()
    val todoList : LiveData<List<Todo>> = _todoList
 
    fun getAllTodo() {
        _todoList.value = TodoManager.getAllTodo()
    }
 
    fun addTodo(title : String) {
        TodoManager.addTodo(title)
        getAllTodo()
    }
 
    fun deleteTodo(id : Int) {
        TodoManager.deleteTodo(id)
        getAllTodo()
    }
}

TodoListPage.kt 에서는 다음과 같이 뷰모델을 상속하여 뷰모델과 동기화할 준비를 한다.

@Composable
fun ContactsPage(viewModel: TodoViewModel) {
 
    val todoList by viewModel.todoList.observeAsState()
    var inputText by remember { mutableStateOf("") }

다음과 같이 mainactivity에 공급자를 지정한다.

class MainActivity : ComponentActivity() {
 
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val todoViewModel = ViewModelProvider(this)[TodoViewModel::class.java]
 
        enableEdgeToEdge()
        setContent {