🚀 3단계 - GitHub(UI 상태)

app/src/main/java/nextstep/github/data/model/GithubRepoResponse.kt

@@ -9,7 +9,7 @@ data class GithubRepoResponse(
     @SerialName("id")
     val id: Long,
     @SerialName("full_name")
-    val fullName: String?,
+    val fullName: String,
     @SerialName("description")
     val description: String?,
 )

app/src/main/java/nextstep/github/model/GithubRepo.kt

@@ -2,6 +2,6 @@ package nextstep.github.model
 
 data class GithubRepo(
     val id: Long,
-    val fullName: String?,
+    val fullName: String,
     val description: String?,
 )

app/src/main/java/nextstep/github/ui/github/GithubRepoListScreen.kt

@@ -1,60 +1,80 @@
 package nextstep.github.ui.github
 
-import android.util.Log
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.CenterAlignedTopAppBar
-import androidx.compose.material3.Divider
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.SnackbarHost
+import androidx.compose.material3.SnackbarHostState
+import androidx.compose.material3.SnackbarResult
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.viewmodel.compose.viewModel
+import kotlinx.coroutines.launch
+import nextstep.github.R
 import nextstep.github.model.GithubRepo
-import nextstep.github.ui.github.component.GithubRepoItem
+import nextstep.github.ui.github.component.GithubRepoLoading
+import nextstep.github.ui.github.component.GithubRepoSuccess
 import nextstep.github.ui.theme.GithubTheme
 
 @Composable
 fun GithubRepositoryListScreen(
     modifier: Modifier = Modifier,
     viewModel: GithubRepoViewModel = viewModel(factory = GithubRepoViewModel.Factory),
 ) {
-    val repositoryList by viewModel.githubRepositories.collectAsStateWithLifecycle()
-    GithubRepositoryListScreen(repositories = repositoryList)
+    val uiState by viewModel.githubUiState.collectAsStateWithLifecycle()
+    val context = LocalContext.current
+    val snackBarHostState = remember { SnackbarHostState() }
+    val coroutineScope = rememberCoroutineScope()
+
+    LaunchedEffect(true) {
+        viewModel.errorFlow.collect {
+            coroutineScope.launch {
+                val snackBarResult = snackBarHostState.showSnackbar(
+                    message = context.getString(R.string.error_message),
+                    actionLabel = context.getString(R.string.error_retry)
+                )
+                if (snackBarResult == SnackbarResult.ActionPerformed) run { viewModel::retryGithubRepo }
+            }
+        }
+    }
+    GithubRepositoryListScreen(
+        uiState = uiState,
+        snackBarHostState = snackBarHostState,
+    )
 }
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun GithubRepositoryListScreen(
-    repositories: List<GithubRepo>,
+    uiState: GithubRepoUiState,
+    snackBarHostState: SnackbarHostState,
     modifier: Modifier = Modifier
 ) {
     Scaffold(
         topBar = {
             CenterAlignedTopAppBar(
-                title = { Text("NEXTSTEP Repositories") }
+                title = { Text(stringResource(R.string.top_bar_title)) }
             )
-        }
+        },
+        snackbarHost = { SnackbarHost(hostState = snackBarHostState)}
     ) {
-        LazyColumn(
-            modifier = modifier
-                .fillMaxSize()
-                .padding(it),
-        ) {
-            items(repositories) {repo ->
-                GithubRepoItem(githubRepo = repo)
-                HorizontalDivider()
-            }
+        if (uiState.isLoading) {
+            GithubRepoLoading(modifier = Modifier.padding(it))
         }
+        GithubRepoSuccess(
+            modifier = Modifier.padding(it),
+            repositories = uiState.repositories
+        )
     }
 }
 
@@ -63,14 +83,50 @@ private fun GithubRepositoryListScreen(
 private fun GithubRepositoryListScreenPreview() {
     GithubTheme {
         GithubRepositoryListScreen(
-            repositories = listOf(
-                GithubRepo(1, "NextStep/Test", "테스트 저장소"),
-                GithubRepo(2, "NextStep/Test2", "테스트 저장소2"),
-                GithubRepo(3, "NextStep/Test3", "테스트 저장소3"),
-                GithubRepo(4, "NextStep/Test4", "테스트 저장소4"),
-                GithubRepo(5, "NextStep/Test5", "테스트 저장소5"),
-                GithubRepo(6, "NextStep/Test6", "테스트 저장소6"),
+            uiState = GithubRepoUiState(
+                isLoading = false,
+                repositories = listOf(
+                    GithubRepo(1, "NextStep/Test", "테스트 저장소"),
+                    GithubRepo(2, "NextStep/Test2", "테스트 저장소2"),
+                    GithubRepo(3, "NextStep/Test3", "테스트 저장소3"),
+                    GithubRepo(4, "NextStep/Test4", "테스트 저장소4"),
+                    GithubRepo(5, "NextStep/Test5", "테스트 저장소5"),
+                    GithubRepo(6, "NextStep/Test6", "테스트 저장소6"),
+                ),
+            ),
+            snackBarHostState = SnackbarHostState()
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun GithubRepositoryListScreenErrorPreview() {
+    val coroutineScope = rememberCoroutineScope()
+    val snackBarHostState = remember { SnackbarHostState() }
+    LaunchedEffect(Unit) {
+        coroutineScope.launch {
+            snackBarHostState.showSnackbar(
+                message = "에러 메세지",
+                actionLabel = "재시도"
             )
+        }
+    }
+    GithubTheme {
+        GithubRepositoryListScreen(
+            uiState = GithubRepoUiState(isLoading = true),
+            snackBarHostState = snackBarHostState
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun GithubRepositoryListScreenLoadingPreview() {
+    GithubTheme {
+        GithubRepositoryListScreen(
+            uiState = GithubRepoUiState(isLoading = true),
+            snackBarHostState = SnackbarHostState()
         )
     }
 }

app/src/main/java/nextstep/github/ui/github/GithubRepoUiState.kt

@@ -0,0 +1,9 @@
+package nextstep.github.ui.github
+
+import nextstep.github.model.GithubRepo
+
+data class GithubRepoUiState (
+    val isLoading: Boolean = false,
+    val repositories: List<GithubRepo> = emptyList(),
+)
+

app/src/main/java/nextstep/github/ui/github/GithubRepoViewModel.kt

@@ -5,25 +5,46 @@ import androidx.lifecycle.ViewModelProvider
 import androidx.lifecycle.viewModelScope
 import androidx.lifecycle.viewmodel.initializer
 import androidx.lifecycle.viewmodel.viewModelFactory
-import kotlinx.coroutines.flow.SharingStarted
+import kotlinx.coroutines.CoroutineExceptionHandler
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.SharedFlow
 import kotlinx.coroutines.flow.StateFlow
-import kotlinx.coroutines.flow.flow
-import kotlinx.coroutines.flow.stateIn
+import kotlinx.coroutines.flow.asSharedFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
 import nextstep.github.GithubApplication
 import nextstep.github.data.repository.GithubRepository
-import nextstep.github.model.GithubRepo
 
 class GithubRepoViewModel(
     private val githubRepoRepository: GithubRepository,
 ) : ViewModel() {
 
-    val githubRepositories: StateFlow<List<GithubRepo>> = flow<List<GithubRepo>> {
-        emit(githubRepoRepository.getRepositories("next-step"))
-    }.stateIn(
-        viewModelScope,
-        SharingStarted.WhileSubscribed(),
-        emptyList()
-    )
+    private val _githubUiState: MutableStateFlow<GithubRepoUiState> = MutableStateFlow(GithubRepoUiState())
+    val githubUiState: StateFlow<GithubRepoUiState> = _githubUiState.asStateFlow()
+
+    private val _errorFlow = MutableSharedFlow<Throwable>()
+    val errorFlow = _errorFlow.asSharedFlow()
+
+    init {
+        fetchRepositories()
+    }
+
+    private fun fetchRepositories() {
+        viewModelScope.launch(CoroutineExceptionHandler { _, throwable ->
+            _errorFlow.tryEmit(throwable)
+        }) {
+            _githubUiState.update { it.copy(isLoading = true) }
+            val repositories = githubRepoRepository.getRepositories("next-step")
+            _githubUiState.update { it.copy(repositories = repositories, isLoading = false) }
+        }
+    }
+
+    fun retryGithubRepo() {
+        fetchRepositories()
+    }
+
 
     companion object {
         val Factory: ViewModelProvider.Factory = viewModelFactory {

app/src/main/java/nextstep/github/ui/github/component/GithubRepoItem.kt

@@ -23,7 +23,7 @@ fun GithubRepoItem(
             .padding(16.dp),
     ) {
         Text(
-            text = githubRepo.fullName ?: "Unknown",
+            text = githubRepo.fullName,
             style = MaterialTheme.typography.titleLarge,
         )
         Text(

app/src/main/java/nextstep/github/ui/github/component/GithubRepoLoading.kt

@@ -0,0 +1,27 @@
+package nextstep.github.ui.github.component
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+
+@Composable
+fun GithubRepoLoading(
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier = modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        CircularProgressIndicator()
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun GithubRepoLoadingPreview() {
+    GithubRepoLoading()
+}

app/src/main/java/nextstep/github/ui/github/component/GithubRepoSuccess.kt

@@ -0,0 +1,41 @@
+package nextstep.github.ui.github.component
+
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import nextstep.github.model.GithubRepo
+import nextstep.github.ui.theme.GithubTheme
+
+@Composable
+fun GithubRepoSuccess(
+    repositories: List<GithubRepo>,
+    modifier: Modifier = Modifier,
+) {
+    LazyColumn(modifier = modifier.fillMaxSize()) {
+        items(repositories) { repo ->
+            GithubRepoItem(githubRepo = repo)
+            HorizontalDivider()
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun GithubRepoSuccessPreview() {
+    GithubTheme {
+        GithubRepoSuccess(
+            repositories = listOf(
+                GithubRepo(1, "NextStep/Test", "테스트 저장소"),
+                GithubRepo(2, "NextStep/Test2", "테스트 저장소2"),
+                GithubRepo(3, "NextStep/Test3", "테스트 저장소3"),
+                GithubRepo(4, "NextStep/Test4", "테스트 저장소4"),
+                GithubRepo(5, "NextStep/Test5", "테스트 저장소5"),
+                GithubRepo(6, "NextStep/Test6", "테스트 저장소6"),
+            )
+        )
+    }
+}

app/src/main/res/values/strings.xml

@@ -1,3 +1,6 @@
 <resources>
     <string name="app_name">GitHub</string>
+    <string name="top_bar_title">"NEXTSTEP Repositories"</string>
+    <string name="error_message">예상치 못한 오류가 발생했습니다.</string>
+    <string name="error_retry">재시도</string>
 </resources>