[Contributor] 컨트리뷰터 화면 UI 컴포넌트 구현

feature/contributor/build.gradle.kts

@@ -4,6 +4,10 @@ plugins {
 
 android {
     namespace = "com.droidknights.app2023.feature.contributor"
+
+    defaultConfig {
+        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
+    }
 }
 
 dependencies {

feature/contributor/src/androidTest/java/com/droidknights/app2023/feature/contributor/ContributorScreenTest.kt

@@ -0,0 +1,55 @@
+package com.droidknights.app2023.feature.contributor
+
+import androidx.activity.ComponentActivity
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.ui.test.junit4.createAndroidComposeRule
+import androidx.compose.ui.test.onNodeWithText
+import com.droidknights.app2023.core.domain.model.Contributor
+import org.junit.Before
+import org.junit.Rule
+import org.junit.Test
+
+class ContributorScreenTest {
+
+    @get:Rule
+    val composeTestRule = createAndroidComposeRule<ComponentActivity>()
+    private val uiState: MutableState<ContributorsUiState> =
+        mutableStateOf(ContributorsUiState.Loading)
+
+    @Before
+    fun setup() {
+        composeTestRule.setContent {
+            ContributorScreen(uiState.value)
+        }
+    }
+
+    @Test
+    fun 로딩_상태일때는_리스트가_노출되지_않는다() {
+        // when
+        uiState.value = ContributorsUiState.Loading
+
+        // then
+        composeTestRule
+            .onNodeWithText("Contributors")
+            .assertDoesNotExist()
+    }
+
+    @Test
+    fun 컨트리뷰터_리스트가_주어지면_화면에_노출한다() {
+        // when
+        uiState.value = ContributorsUiState.Contributors(
+            listOf(
+                Contributor(
+                    name = "test name",
+                    imageUrl = "test image url"
+                )
+            )
+        )
+
+        // then
+        composeTestRule
+            .onNodeWithText("test name")
+            .assertExists()
+    }
+}

feature/contributor/src/main/java/com/droidknights/app2023/feature/contributor/ContributorScreen.kt

@@ -0,0 +1,141 @@
+package com.droidknights.app2023.feature.contributor
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material3.Divider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.droidknights.app2023.core.domain.model.Contributor
+
+@Composable
+fun ContributorRoute(
+    modifier: Modifier = Modifier,
+    viewModel: ContributorViewModel = hiltViewModel(),
+) {
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+
+    ContributorScreen(
+        uiState = uiState,
+        modifier = modifier,
+    )
+}
+
+@Composable
+internal fun ContributorScreen(
+    uiState: ContributorsUiState,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        ActionBarContent()
+        when (uiState) {
+            ContributorsUiState.Loading -> Unit
+            is ContributorsUiState.Contributors ->
+                Column(
+                    modifier = Modifier.padding(horizontal = 32.dp)
+                ) {
+                    ContributorTitle()
+                    ContributorList(
+                        contributors = uiState.contributors,
+                    )
+                }
+        }
+    }
+}
+
+@Composable
+internal fun ActionBarContent() {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(color = Color(0xFFEEFFE7))
+            .statusBarsPadding()
+    ) {
+        Text(
+            text = stringResource(id = R.string.contributor_top_title),
+            style = MaterialTheme.typography.titleSmall,
+            modifier = Modifier
+                .padding(14.dp)
+                .align(Alignment.Center)
+        )
+        Icon(
+            painter = painterResource(id = R.drawable.close_24px),
+            contentDescription = null,
+            modifier = Modifier
+                .padding(12.dp)
+                .align(Alignment.CenterEnd),
+        )
+    }
+}
+
+@Composable
+internal fun ContributorTitle() {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+        modifier = Modifier
+            .padding(vertical = 37.dp)
+    ) {
+        Text(
+            text = stringResource(id = R.string.contributor_title),
+            style = MaterialTheme.typography.titleLarge,
+            fontWeight = FontWeight.Bold,
+        )
+        Divider(color = Color(0xFF000000), thickness = 2.dp)
+    }
+}
+
+@Composable
+internal fun ContributorList(contributors: List<Contributor>) {
+    LazyColumn(
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        items(contributors.size) { index ->
+            val contributor = contributors[index]
+            ContributorItem(contributor = contributor)
+        }
+    }
+}
+
+@Composable
+internal fun ContributorItem(contributor: Contributor) {
+    Text(
+        text = contributor.name,
+        style = MaterialTheme.typography.titleMedium,
+        fontWeight = FontWeight.Bold,
+        color = Color(0xFF5E5E5E),
+    )
+}
+
+@Preview
+@Composable
+private fun ContributorScreenPreview() {
+    ContributorScreen(
+        uiState = ContributorsUiState.Contributors(
+            listOf(
+                Contributor("Contributor1", "https://avatars.githubusercontent.com/u/25101514"),
+                Contributor("Contributor2", "https://avatars.githubusercontent.com/u/25101514"),
+            )
+        )
+    )
+}

feature/contributor/src/main/res/drawable/close_24px.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+      android:fillColor="#000000"/>
+</vector>

feature/contributor/src/main/res/values/strings.xml

@@ -0,0 +1,4 @@
+<resources>
+    <string name="contributor_top_title">컨트리뷰터</string>
+    <string name="contributor_title">Contributors</string>
+</resources>