[해나] 회원가입 미션 1, 2단계 제출합니다.

README.md

@@ -1 +1,10 @@
-# android-signup# android-signup
+# android-signup
+
+## 🚀1단계 - 컴포즈 기초 
+- [x] 제시된 학습 테스트 완성
+- [x] Preview 노출
+- [x] Preview의 interactive 모드를 활용하여 버튼 클릭해보기
+
+### 🚀2단계 - 기능 요구 사항
+- [x] 회원가입 뷰 구현
+    - Material3 Button, TextField를 활용

app/.editorConfig

@@ -0,0 +1,2 @@
+[*.{kt,kts}]
+ktlint_function_naming_ignore_when_annotated_with=Composable

app/build.gradle.kts

@@ -25,7 +25,7 @@ android {
             isMinifyEnabled = false
             proguardFiles(
                 getDefaultProguardFile("proguard-android-optimize.txt"),
-                "proguard-rules.pro"
+                "proguard-rules.pro",
             )
         }
     }

app/src/androidTest/java/nextstep/signup/LayoutBasicsTest.kt

@@ -0,0 +1,78 @@
+package nextstep.signup
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.test.assert
+import androidx.compose.ui.test.assertCountEquals
+import androidx.compose.ui.test.assertIsNotEnabled
+import androidx.compose.ui.test.hasText
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onChildren
+import androidx.compose.ui.test.onFirst
+import androidx.compose.ui.test.onNodeWithTag
+import androidx.compose.ui.test.onNodeWithText
+import androidx.compose.ui.test.performClick
+import androidx.compose.ui.tooling.preview.Preview
+import org.junit.Rule
+import org.junit.Test
+
+class LayoutBasicsTest {
+    @get:Rule
+    val composeTestRule = createComposeRule()
+
+    @Test
+    fun text() {
+        val text = "안녕 난 컴포즈야~"
+        composeTestRule.setContent {
+            TextComposable()
+        }
+
+        composeTestRule
+            .onNodeWithText(text)
+            .assertExists()
+    }
+
+    @Test
+    fun column() {
+        composeTestRule.setContent {
+            ColumnComposable()
+        }
+
+        composeTestRule.onNodeWithTag("이름")
+            .onChildren()
+            .assertCountEquals(3)
+            .onFirst()
+            .assert(hasText("깜포즈"))
+    }
+
+    @Test
+    fun button() {
+        composeTestRule.setContent {
+            ButtonComposable()
+        }
+
+        val button =
+            composeTestRule
+                .onNodeWithTag("버튼")
+                .performClick()
+
+        button.assertIsNotEnabled()
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun TextPreview() {
+    TextComposable()
+}
+
+@Preview(showBackground = true)
+@Composable
+fun ColumnPreview() {
+    ColumnComposable()
+}
+
+@Preview(showBackground = true)
+@Composable
+fun ButtonPreview() {
+    ButtonComposable()
+}

app/src/androidTest/java/nextstep/signup/TestComposable.kt

@@ -0,0 +1,54 @@
+package nextstep.signup
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material3.Button
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun TextComposable() {
+    Text(
+        text = "안녕 난 컴포즈야~",
+        color = Color.Blue,
+        style =
+            TextStyle(
+                fontSize = 26.sp,
+                fontWeight = FontWeight.Bold,
+                fontFamily = FontFamily.SansSerif,
+            ),
+    )
+}
+
+@Composable
+fun ColumnComposable() {
+    Column(
+        modifier = Modifier.testTag("이름"),
+    ) {
+        Text(text = "깜포즈", color = Color.Blue)
+        Text(text = "킴포즈", color = Color.Cyan)
+        Text(text = "끔포즈", color = Color.Yellow)
+    }
+}
+
+@Composable
+fun ButtonComposable() {
+    val enabled = remember { mutableStateOf(true) }
+    Button(
+        onClick = {
+            enabled.value = false
+        },
+        enabled = enabled.value,
+        modifier = Modifier.testTag("버튼"),
+    ) {
+        Text("클릭해주세요")
+    }
+}

app/src/main/java/nextstep/signup/MainActivity.kt

@@ -3,44 +3,60 @@ package nextstep.signup
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import nextstep.signup.ui.ButtonView
+import nextstep.signup.ui.TextFieldView
+import nextstep.signup.ui.TextView
 import nextstep.signup.ui.theme.SignupTheme
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+
         setContent {
             SignupTheme {
-                // A surface container using the 'background' color from the theme
                 Surface(
-                    modifier = Modifier.fillMaxSize(),
-                    color = MaterialTheme.colorScheme.background
+                    modifier =
+                        Modifier
+                            .fillMaxSize()
+                            .padding(top = 56.dp, start = 32.dp, end = 32.dp),
+                    color = MaterialTheme.colorScheme.background,
                 ) {
-                    Greeting("Android")
+                    Column(
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                    ) {
+                        TextView(R.string.main_greeting)
+                        TextFieldScreen()
+                        ButtonView(R.string.main_sign_up, paddingTop = 42.dp)
+                    }
                 }
             }
         }
     }
 }
 
 @Composable
-fun Greeting(name: String, modifier: Modifier = Modifier) {
-    Text(
-        text = "Hello $name!",
-        modifier = modifier
-    )
+fun TextFieldScreen() {
+    TextFieldView(paddingTop = 42.dp, label = R.string.main_user_name)
+    TextFieldView(paddingTop = 36.dp, label = R.string.main_email, keyboardType = KeyboardType.Email)
+    TextFieldView(paddingTop = 36.dp, label = R.string.main_password, keyboardType = KeyboardType.Password)
+    TextFieldView(paddingTop = 36.dp, label = R.string.main_password_confirm, keyboardType = KeyboardType.Password)
 }
 
 @Preview(showBackground = true)
 @Composable
 fun GreetingPreview() {
     SignupTheme {
-        Greeting("Android")
+        TextFieldScreen()
     }
 }

app/src/main/java/nextstep/signup/ui/ViewComposable.kt

@@ -0,0 +1,69 @@
+package nextstep.signup.ui
+
+import androidx.annotation.StringRes
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import nextstep.signup.ui.theme.Blue50
+
+@Composable
+fun TextView(
+    @StringRes description: Int,
+) {
+    Text(
+        text = stringResource(id = description),
+        style = MaterialTheme.typography.titleLarge,
+    )
+}
+
+@Composable
+fun TextFieldView(
+    paddingTop: Dp = 0.dp,
+    @StringRes label: Int,
+    keyboardType: KeyboardType = KeyboardType.Text,
+) {
+    var input by remember { mutableStateOf("") }
+    Spacer(modifier = Modifier.padding(top = paddingTop))
+    TextField(
+        value = input,
+        onValueChange = { input = it },
+        modifier = Modifier.fillMaxWidth(),
+        label = { Text(text = stringResource(id = label)) },
+        keyboardOptions = KeyboardOptions(keyboardType = keyboardType),
+        colors = TextFieldDefaults.colors(focusedIndicatorColor = Blue50),
+    )
+}
+
+@Composable
+fun ButtonView(
+    @StringRes description: Int,
+    paddingTop: Dp,
+) {
+    Spacer(modifier = Modifier.padding(top = paddingTop))
+    Button(
+        onClick = {},
+        modifier = Modifier.fillMaxWidth(),
+        colors = ButtonDefaults.buttonColors(containerColor = Blue50),
+        contentPadding = PaddingValues(vertical = 15.dp),
+    ) {
+        Text(text = stringResource(id = description))
+    }
+}

app/src/main/java/nextstep/signup/ui/theme/Color.kt

@@ -8,4 +8,6 @@ val Pink80 = Color(0xFFEFB8C8)
 
 val Purple40 = Color(0xFF6650a4)
 val PurpleGrey40 = Color(0xFF625b71)
-val Pink40 = Color(0xFF7D5260)
+val Pink40 = Color(0xFF7D5260)
+
+val Blue50 = Color(0xFF2196F3)

app/src/main/java/nextstep/signup/ui/theme/Theme.kt

@@ -1,6 +1,5 @@
 package nextstep.signup.ui.theme
 
-import android.app.Activity
 import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.MaterialTheme
@@ -9,23 +8,20 @@ import androidx.compose.material3.dynamicDarkColorScheme
 import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.SideEffect
-import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalView
-import androidx.core.view.WindowCompat
 
-private val DarkColorScheme = darkColorScheme(
-    primary = Purple80,
-    secondary = PurpleGrey80,
-    tertiary = Pink80
-)
-
-private val LightColorScheme = lightColorScheme(
-    primary = Purple40,
-    secondary = PurpleGrey40,
-    tertiary = Pink40
+private val DarkColorScheme =
+    darkColorScheme(
+        primary = Purple80,
+        secondary = PurpleGrey80,
+        tertiary = Pink80,
+    )
 
+private val LightColorScheme =
+    lightColorScheme(
+        primary = Purple40,
+        secondary = PurpleGrey40,
+        tertiary = Pink40,
     /* Other default colors to override
     background = Color(0xFFFFFBFE),
     surface = Color(0xFFFFFBFE),
@@ -34,29 +30,30 @@ private val LightColorScheme = lightColorScheme(
     onTertiary = Color.White,
     onBackground = Color(0xFF1C1B1F),
     onSurface = Color(0xFF1C1B1F),
-    */
-)
+     */
+    )
 
 @Composable
 fun SignupTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),
     // Dynamic color is available on Android 12+
     dynamicColor: Boolean = true,
-    content: @Composable () -> Unit
+    content: @Composable () -> Unit,
 ) {
-    val colorScheme = when {
-        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
-            val context = LocalContext.current
-            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
-        }
+    val colorScheme =
+        when {
+            dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
+                val context = LocalContext.current
+                if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
+            }
 
-        darkTheme -> DarkColorScheme
-        else -> LightColorScheme
-    }
+            darkTheme -> DarkColorScheme
+            else -> LightColorScheme
+        }
 
     MaterialTheme(
         colorScheme = colorScheme,
         typography = Typography,
-        content = content
+        content = content,
     )
 }