🚀 3단계 - GitHub(UI 상태)

app/build.gradle.kts

@@ -66,7 +66,9 @@ dependencies {
     implementation(libs.androidx.material3)
     implementation(libs.androidx.lifecycle.viewmodel.compose)
     implementation(libs.androidx.lifecycle.runtime.compose)
+    implementation(libs.androidx.junit.ktx)
     testImplementation(libs.junit)
+    testImplementation(libs.kotlinx.coroutines.test)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
     androidTestImplementation(platform(libs.androidx.compose.bom))

app/src/androidTest/java/nextstep/github/ui/github/GithubRepoListScreenKtTest.kt

@@ -0,0 +1,99 @@
+package nextstep.github.ui.github
+
+
+import androidx.compose.material3.SnackbarHostState
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onNodeWithTag
+import androidx.compose.ui.test.onNodeWithText
+import androidx.test.ext.junit.runners.AndroidJUnit4
+import nextstep.github.model.GithubRepo
+import nextstep.github.ui.theme.GithubTheme
+import org.junit.Rule
+import org.junit.Test
+import org.junit.runner.RunWith
+
+@RunWith(AndroidJUnit4::class)
+class GithubRepositoryListScreenTest {
+
+    @get:Rule
+    val composeTestRule = createComposeRule()
+
+    @Test
+    fun 로딩중일때_LoadingIndicator가_나온다() {
+        // Given
+        val uiState = GithubRepoUiState(isLoading = true)
+
+        // When
+        composeTestRule.setContent {
+            GithubTheme {
+                GithubRepositoryListScreen(
+                    uiState = uiState, snackBarHostState = SnackbarHostState()
+                )
+            }
+        }
+
+        // Then
+        composeTestRule.onNodeWithTag("LoadingIndicator").assertExists()
+    }
+
+    @Test
+    fun 저장소를_성공적으로_가져왔을때_저장소리스트가_보여진다() {
+        // Given
+        val repositories = listOf(
+            GithubRepo(1, "NextStep/Test", "테스트 저장소"),
+            GithubRepo(2, "NextStep/Test2", "테스트 저장소2"),
+            GithubRepo(3, "NextStep/Test3", "테스트 저장소3")
+        )
+        val uiState = GithubRepoUiState(
+            isLoading = false, repositories = repositories
+        )
+
+        // When
+        composeTestRule.setContent {
+            GithubTheme {
+                GithubRepositoryListScreen(
+                    uiState = uiState, snackBarHostState = SnackbarHostState()
+                )
+            }
+        }
+
+        // Then
+        repositories.forEach { repo ->
+            composeTestRule.onNodeWithText(repo.fullName).assertExists()
+            val description = repo.description
+            if (description != null) {
+                composeTestRule.onNodeWithText(description).assertExists()
+            }
+        }
+    }
+
+    @Test
+    fun 에러가_발생하면_스낵바가_나온다() {
+        // Given
+        val uiState = GithubRepoUiState()
+
+        // When
+        composeTestRule.setContent {
+            val snackBarHostState = remember { SnackbarHostState() }
+            LaunchedEffect(true) {
+                snackBarHostState.showSnackbar(
+                    message = "에러 메세지", actionLabel = "재시도"
+                )
+            }
+            GithubTheme {
+                GithubRepositoryListScreen(
+                    uiState = uiState, snackBarHostState = snackBarHostState
+                )
+            }
+        }
+
+        // Then
+        composeTestRule.waitForIdle()
+        composeTestRule.onNodeWithText("에러 메세지").assertExists()
+        composeTestRule.onNodeWithText("재시도").assertExists()
+
+    }
+}
+

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.GithubRepoList
 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) viewModel.retryGithubRepo()
+            }
+        }
+    }
+    GithubRepositoryListScreen(
+        uiState = uiState,
+        snackBarHostState = snackBarHostState,
+    )
 }
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-private fun GithubRepositoryListScreen(
-    repositories: List<GithubRepo>,
+fun GithubRepositoryListScreen(
+    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))
         }
+        GithubRepoList(
+            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 = false),
+            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,49 @@ 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 {
+            _githubUiState.update { it.copy(isLoading = true) }
+            runCatching {
+                val repositories = githubRepoRepository.getRepositories("next-step")
+                _githubUiState.update { it.copy(repositories = repositories, isLoading = false) }
+            }.onFailure { throwable ->
+                _githubUiState.update { it.copy(isLoading = false) }
+                _errorFlow.emit(throwable)
+            }
+        }
+    }
+
+    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(