🚀 2단계 - GitHub(UI 레이어) (#47)

mogunjoa · web-flow · commit a526fa5d186e · 2025-03-11T22:38:15.000+09:00
* refactor: GithubResponse &gt; RepositoryResponse로 클래스명 수정

* refactor: remote.api.mapper &gt; remote.mapper 로 이동 및 파일명 수정

* refactor: getRepositories 첫 조회 ViewModel init에서 처리

* refactor: 화면 기준 패키지 재구성

* docs: Step1 - 개선 사항 정의

* docs: Step2 - 요구 사항 정의

* refactor: ViewModel Repository 의존성 주입 로직 수정 및 앱 패키지 구조 변경

* refactor: GithubModel &gt; RepositoryModel 로 클래스명 변경

* feat: GithubViewModel _repositoryList 값 세팅

* feat: GithubScreen 화면 구성 및 repositoryList 데이터 연동

* refactor: appbar title stringResource 적용

* refactor: GithubScreen private 접근제어자 제거

* refactor: Text style 중복 코드 제거

* refactor: Color MaterialTheme.colorScheme 활용

* refactor: RepositoryResponse, RepositoryModel에 id 속성 추가

* refactor: GithubScreen LazyColumn key 속성 추가

* refactor: viewModelScope Dispatchers.IO 제거

* refactor: GithubRepoListContainer, GithubRepoItem 컴포넌트 분리

* refactor: GithubViewModel getRepositories &gt; fetchRepositories 함수명 수정

* feat: GithubScreen GithubScreenEmptyPreview 추가

* test: GithubScreen 화면 테스트 코드 작성
diff --git a/README.md b/README.md
@@ -1,10 +1,22 @@
 # android-github-compose
 
-### 🚀 1단계 - GitHub(데이터 레이어)
+### 🚀 1단계 - GitHub(데이터 레이어) 요구 사항
 - NEXTSTEP 조직의 저장소 목록을 가져오는 Client를 구현한다.
   - GET https://api.github.com/orgs/next-step/repos
   - full_name, description 필드만 가져온다.
 - 네트워크 요청으로 저장소 목록을 가져오는 기능은 data 패키지에 구현되어야 한다.
 - 힌트 코드를 참고하여 수동 DI를 구현한다. (Hilt와 같은 별도의 DI 라이브러리를 활용하지 않는다)
   - 실제로 서버 데이터가 잘 로드되는지 Log로 확인한다.
 
+#### 🚀 1단계 - GitHub(데이터 레이어) 개선 사항
+- GithubResponse 클래스 명 api 호출 의도에 맞게 변경
+- remote.api.mapper > remote.mapper 패키지 이동
+- getRepositories 첫 조회 viewModel init에서 호출하도록 수정
+- 화면 기준 패키지 재구성
+
+### 🚀 2단계 - GitHub(UI 레이어) 요구 사항
+- NEXTSTEP 조직의 저장소 목록을 선형 리스트로 노출한다
+- Material3의 Theme을 활용하여 Typography와 Color를 부여한다.
+- 힌트 코드를 참고하여 ViewModel Factory를 구현한다. (Hilt와 같은 별도의 DI 라이브러리를 활용하지 않는다)
+- 저장소 목록을 노출하는 UI와 관련된 기능은 ui 패키지에 구현되어야 한다.
+- UI 레이어는 데이터 레이어를 의존하지만, 데이터 레이어는 UI 레이어를 의존해선 안 된다.
diff --git a/app/src/androidTest/java/GithubScreenTest.kt b/app/src/androidTest/java/GithubScreenTest.kt
@@ -0,0 +1,48 @@
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onNodeWithText
+import nextstep.github.data.model.RepositoryModel
+import nextstep.github.ui.screen.github.GithubScreen
+import org.junit.Rule
+import org.junit.Test
+
+class GithubScreenTest {
+
+    @get:Rule
+    val composeTestRule = createComposeRule()
+
+    val repositoryList = listOf(
+        RepositoryModel(
+            id = 1,
+            fullName = "next-step/nextstep-docs",
+            description = "nextstep 매뉴얼 및 문서를 관리하는 저장소",
+        ),
+        RepositoryModel(
+            id = 2,
+            fullName = "next-step/holy-moly",
+            description = "nextstep 홀리몰리한 저장소",
+        ),
+        RepositoryModel(
+            id = 3,
+            fullName = "next-step/haly-galy",
+            description = "nextstep 할리갈리한 저장소",
+        ),
+    )
+
+    @Test
+    fun Github_레포지토리_데이터가_정상적으로_화면에_출력된다() {
+        composeTestRule.setContent {
+            GithubScreen(
+                repositoryList = repositoryList,
+            )
+        }
+
+        composeTestRule.onNodeWithText("next-step/nextstep-docs")
+            .assertExists()
+
+        composeTestRule.onNodeWithText("next-step/holy-moly")
+            .assertExists()
+
+        composeTestRule.onNodeWithText("next-step/haly-galy")
+            .assertExists()
+    }
+}
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
@@ -16,7 +16,7 @@
         android:theme="@style/Theme.Github"
         tools:targetApi="31">
         <activity
-            android:name=".MainActivity"
+            android:name=".ui.screen.MainActivity"
             android:exported="true"
             android:label="@string/app_name"
             android:theme="@style/Theme.Github">
diff --git a/app/src/main/java/nextstep/github/data/model/RepositoryModel.kt b/app/src/main/java/nextstep/github/data/model/RepositoryModel.kt
@@ -1,6 +1,7 @@
 package nextstep.github.data.model
 
-data class GithubModel(
+data class RepositoryModel(
+    val id: Int,
     val fullName: String,
     val description: String
 )
diff --git a/app/src/main/java/nextstep/github/data/remote/api/GithubService.kt b/app/src/main/java/nextstep/github/data/remote/api/GithubService.kt
@@ -1,13 +1,13 @@
 package nextstep.github.data.remote.api
 
-import nextstep.github.data.remote.response.GithubResponse
+import nextstep.github.data.remote.response.RepositoryResponse
 import retrofit2.http.GET
 import retrofit2.http.Path
 
 
 interface GithubService {
 
     @GET("orgs/{organization}/repos")
-    suspend fun getRepositories(@Path("organization") organization: String): List<GithubResponse>
+    suspend fun getRepositories(@Path("organization") organization: String): List<RepositoryResponse>
 }
 
diff --git a/app/src/main/java/nextstep/github/data/remote/api/mapper/GithubResponseToDataMapper.kt b/app/src/main/java/nextstep/github/data/remote/api/mapper/GithubResponseToDataMapper.kt
diff --git a/app/src/main/java/nextstep/github/data/remote/mapper/RepositoryResponseToDataMapper.kt b/app/src/main/java/nextstep/github/data/remote/mapper/RepositoryResponseToDataMapper.kt
@@ -0,0 +1,12 @@
+package nextstep.github.data.remote.mapper
+
+import nextstep.github.data.model.RepositoryModel
+import nextstep.github.data.remote.response.RepositoryResponse
+
+fun List<RepositoryResponse>.toDataList(): List<RepositoryModel> = map { it.toData() }
+
+fun RepositoryResponse.toData() = RepositoryModel(
+    id = id,
+    fullName = fullName ?: "",
+    description = description ?: ""
+)
diff --git a/app/src/main/java/nextstep/github/data/remote/response/RepositoryResponse.kt b/app/src/main/java/nextstep/github/data/remote/response/RepositoryResponse.kt
@@ -4,7 +4,8 @@ import kotlinx.serialization.SerialName
 import kotlinx.serialization.Serializable
 
 @Serializable
-data class GithubResponse(
+data class RepositoryResponse(
+    @SerialName("id") val id: Int,
     @SerialName("full_name") val fullName: String?,
     @SerialName("description") val description: String?,
 )
diff --git a/app/src/main/java/nextstep/github/data/repository/GithubRepository.kt b/app/src/main/java/nextstep/github/data/repository/GithubRepository.kt
@@ -1,18 +1,18 @@
 package nextstep.github.data.repository
 
-import nextstep.github.data.model.GithubModel
+import nextstep.github.data.model.RepositoryModel
 import nextstep.github.data.remote.api.GithubService
-import nextstep.github.data.remote.api.mapper.toDataList
+import nextstep.github.data.remote.mapper.toDataList
 
 interface GithubRepository {
-    suspend fun getRepositories(organization: String): Result<List<GithubModel>>
+    suspend fun getRepositories(organization: String): Result<List<RepositoryModel>>
 }
 
 class GithubRepositoryImpl(
     private val githubService: GithubService,
 ) : GithubRepository {
 
-    override suspend fun getRepositories(organization: String): Result<List<GithubModel>> {
+    override suspend fun getRepositories(organization: String): Result<List<RepositoryModel>> {
         return runCatching {
             githubService
                 .getRepositories(organization = organization)
diff --git a/app/src/main/java/nextstep/github/ui/screen/GithubApp.kt b/app/src/main/java/nextstep/github/ui/screen/GithubApp.kt
@@ -1,22 +1,14 @@
 package nextstep.github.ui.screen
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
-import androidx.lifecycle.viewmodel.compose.viewModel
-import nextstep.github.di.AppContainer
-import nextstep.github.ui.viewmodel.GithubViewModel
+import nextstep.github.ui.screen.github.GithubScreen
 
 @Composable
 fun GithubApp(
-    appContainer: AppContainer,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
-    val viewModel: GithubViewModel = viewModel(
-        factory = GithubViewModel.provideFactory(appContainer.githubRepository)
+    GithubScreen(
+        modifier = modifier,
     )
-
-    LaunchedEffect(Unit) {
-        viewModel.getRepositories("next-step")
-    }
 }
diff --git a/app/src/main/java/nextstep/github/ui/screen/MainActivity.kt b/app/src/main/java/nextstep/github/ui/screen/MainActivity.kt
@@ -1,22 +1,17 @@
-package nextstep.github
+package nextstep.github.ui.screen
 
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import nextstep.github.ui.screen.GithubApp
 import nextstep.github.ui.theme.GithubTheme
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
 
-        val appContainer = (application as MainApplication).appContainer
-
         setContent {
             GithubTheme {
-                GithubApp(
-                    appContainer = appContainer
-                )
+                GithubApp()
             }
         }
     }
diff --git a/app/src/main/java/nextstep/github/ui/screen/github/GithubScreen.kt b/app/src/main/java/nextstep/github/ui/screen/github/GithubScreen.kt
@@ -0,0 +1,95 @@
+package nextstep.github.ui.screen.github
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.lifecycle.viewmodel.compose.viewModel
+import nextstep.github.R
+import nextstep.github.data.model.RepositoryModel
+import nextstep.github.ui.screen.github.component.GithubRepoListContainer
+import nextstep.github.ui.theme.White
+
+@Composable
+fun GithubScreen(
+    modifier: Modifier = Modifier,
+    viewModel: GithubViewModel = viewModel(factory = GithubViewModel.Companion.Factory),
+) {
+    val repositoryList by viewModel.repositoryList.collectAsState()
+
+    GithubScreen(
+        repositoryList = repositoryList,
+        modifier = modifier
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun GithubScreen(
+    repositoryList: List<RepositoryModel>,
+    modifier: Modifier = Modifier,
+) {
+    Scaffold(
+        modifier = modifier,
+        topBar = {
+            CenterAlignedTopAppBar(
+                title = {
+                    Text(
+                        text = stringResource(R.string.app_bar_title),
+                        style = MaterialTheme.typography.titleLarge,
+                        fontWeight = FontWeight.W400
+                    )
+                },
+                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
+                    containerColor = White
+                )
+            )
+        }
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(it),
+        ) {
+            GithubRepoListContainer(
+                repositoryList = repositoryList,
+                modifier = modifier
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun GithubScreenPreview() {
+    val dummyList = List(10) {
+        RepositoryModel(
+            id = it,
+            fullName = "next-step/nextstep-docs",
+            description = "nextstep 매뉴얼 및 문서를 관리하는 저장소",
+        )
+    }
+    GithubScreen(
+        repositoryList = dummyList
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun GithubScreenEmptyPreview() {
+    GithubScreen(
+        repositoryList = emptyList()
+    )
+}
diff --git a/app/src/main/java/nextstep/github/ui/screen/github/GithubViewModel.kt b/app/src/main/java/nextstep/github/ui/screen/github/GithubViewModel.kt
@@ -0,0 +1,56 @@
+package nextstep.github.ui.screen.github
+
+import android.util.Log
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.ViewModelProvider
+import androidx.lifecycle.ViewModelProvider.AndroidViewModelFactory.Companion.APPLICATION_KEY
+import androidx.lifecycle.viewModelScope
+import androidx.lifecycle.viewmodel.initializer
+import androidx.lifecycle.viewmodel.viewModelFactory
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.launch
+import nextstep.github.MainApplication
+import nextstep.github.data.model.RepositoryModel
+import nextstep.github.data.repository.GithubRepository
+
+
+class GithubViewModel(
+    private val githubRepository: GithubRepository,
+): ViewModel() {
+
+    private val _repositoryList = MutableStateFlow<List<RepositoryModel>>(emptyList())
+    val repositoryList = _repositoryList
+
+    init {
+        viewModelScope.launch {
+            fetchRepositories("next-step")
+        }
+    }
+
+    suspend fun fetchRepositories(
+        organization: String,
+    ) {
+        githubRepository.getRepositories(
+            organization = organization
+        ).onSuccess {
+            _repositoryList.value = it
+        }.onFailure {
+            Log.d(
+                "GithubViewModel",
+                "getRepositories: ${it.message}",
+                it
+            )
+        }
+    }
+
+    companion object {
+        val Factory: ViewModelProvider.Factory = viewModelFactory {
+            initializer {
+                val githubRepository = (this[APPLICATION_KEY] as MainApplication)
+                    .appContainer
+                    .githubRepository
+                GithubViewModel(githubRepository)
+            }
+        }
+    }
+}
diff --git a/app/src/main/java/nextstep/github/ui/screen/github/component/GithubRepoItem.kt b/app/src/main/java/nextstep/github/ui/screen/github/component/GithubRepoItem.kt
diff --git a/app/src/main/java/nextstep/github/ui/screen/github/component/GithubRepoListContainer.kt b/app/src/main/java/nextstep/github/ui/screen/github/component/GithubRepoListContainer.kt
diff --git a/app/src/main/java/nextstep/github/ui/theme/Color.kt b/app/src/main/java/nextstep/github/ui/theme/Color.kt
diff --git a/app/src/main/java/nextstep/github/ui/viewmodel/GithubViewModel.kt b/app/src/main/java/nextstep/github/ui/viewmodel/GithubViewModel.kt
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`package nextstep.github.data.model`
`2`	`2`
`3`		`-data class GithubModel(`
	`3`	`+data class RepositoryModel(`
	`4`	`+ val id: Int,`
`4`	`5`	`val fullName: String,`
`5`	`6`	`val description: String`
`6`	`7`	`)`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,8 @@ import kotlinx.serialization.SerialName`
`4`	`4`	`import kotlinx.serialization.Serializable`
`5`	`5`
`6`	`6`	`@Serializable`
`7`		`-data class GithubResponse(`
	`7`	`+data class RepositoryResponse(`
	`8`	`+ @SerialName("id") val id: Int,`
`8`	`9`	`@SerialName("full_name") val fullName: String?,`
`9`	`10`	`@SerialName("description") val description: String?,`
`10`	`11`	`)`