[Feature/week_1_compose]: 1주차 과제 Compose 구성

app/build.gradle

@@ -15,6 +15,9 @@ android {
         versionName "1.0"
 
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        vectorDrawables {
+            useSupportLibrary true
+        }
     }
 
     buildTypes {
@@ -24,11 +27,17 @@ android {
         }
     }
     compileOptions {
-        sourceCompatibility JavaVersion.VERSION_11
-        targetCompatibility JavaVersion.VERSION_11
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
     }
     kotlinOptions {
-        jvmTarget = '11'
+        jvmTarget = '17'
+    }
+    buildFeatures {
+        compose true
+    }
+    composeOptions {
+        kotlinCompilerExtensionVersion = "1.4.5"
     }
 }
 
@@ -38,7 +47,23 @@ dependencies {
     implementation 'androidx.appcompat:appcompat:1.6.1'
     implementation 'com.google.android.material:material:1.5.0'
     implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
+    implementation 'androidx.activity:activity-compose:1.5.1'
+    implementation platform('androidx.compose:compose-bom:2022.11.00')
+    implementation 'androidx.compose.ui:ui'
+    implementation 'androidx.compose.ui:ui-graphics'
+    implementation 'androidx.compose.ui:ui-tooling-preview'
+    implementation 'androidx.compose.material3:material3'
+
+    // Navigation
+    implementation 'androidx.navigation:navigation-compose:2.5.3'
+
+
     testImplementation 'junit:junit:4.13.2'
     androidTestImplementation 'androidx.test.ext:junit:1.1.5'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
+    androidTestImplementation platform('androidx.compose:compose-bom:2022.10.00')
+    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
+    debugImplementation 'androidx.compose.ui:ui-tooling'
+    debugImplementation 'androidx.compose.ui:ui-test-manifest'
 }

app/src/main/AndroidManifest.xml

@@ -13,8 +13,10 @@
         android:theme="@style/Theme.DoSoptTemplate"
         tools:targetApi="31">
         <activity
-            android:name=".MainActivity"
-            android:exported="true">
+            android:name="org.sopt.dosopttemplate.MainActivity"
+            android:exported="true"
+            android:label="@string/title_activity_main"
+            android:theme="@style/Theme.DoSoptTemplate">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
 

app/src/main/java/org/sopt/dosopttemplate/MainActivity.kt

@@ -1,11 +1,92 @@
 package org.sopt.dosopttemplate
 
-import androidx.appcompat.app.AppCompatActivity
 import android.os.Bundle
+import android.widget.Toast
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.activity.viewModels
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.lifecycle.flowWithLifecycle
+import androidx.lifecycle.lifecycleScope
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import kotlinx.coroutines.flow.launchIn
+import kotlinx.coroutines.flow.onEach
+import org.sopt.dosopttemplate.feature.home.HomeScreen
+import org.sopt.dosopttemplate.feature.login.LoginScreen
+import org.sopt.dosopttemplate.feature.signup.SignUpScreen
+import org.sopt.dosopttemplate.ui.theme.DoEuijinKwakTheme
+
+class MainActivity : ComponentActivity() {
+
+    enum class Screen {
+        LOGIN,
+        SIGNUP,
+        Home,
+    }
+
+    private val viewModel by viewModels<MainViewModel>()
 
-class MainActivity : AppCompatActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        setContentView(R.layout.activity_main)
+        setContent {
+            DoEuijinKwakTheme {
+                val navController = rememberNavController()
+                NavHost(
+                    navController = navController,
+                    startDestination = Screen.LOGIN.name,
+                ) {
+                    composable(Screen.LOGIN.name) {
+                        LoginScreen(
+                            navController = navController,
+                            viewModel = viewModel,
+                        )
+                    }
+                    composable(Screen.SIGNUP.name) {
+                        SignUpScreen(
+                            navController =
+                            navController,
+                            viewModel = viewModel,
+                        )
+                    }
+                    composable(Screen.Home.name) {
+                        HomeScreen(
+                            navController = navController,
+                            viewModel = viewModel,
+                        )
+                    }
+                }
+                collectEvent(navController)
+            }
+        }
     }
-}
+
+    private fun collectEvent(navController: NavHostController) {
+        viewModel.event.flowWithLifecycle(lifecycle).onEach {
+            when (it) {
+                is MainContract.MainSideEffect.ShowToast -> {
+                    Toast.makeText(this, it.message, Toast.LENGTH_SHORT).show()
+                }
+
+                is MainContract.MainSideEffect.LoginSuccess -> {
+                    Toast.makeText(this, "로그인 성공!", Toast.LENGTH_SHORT).show()
+                    navController.navigate(Screen.Home.name)
+                }
+
+                is MainContract.MainSideEffect.RegistrationSuccess -> {
+                    Toast.makeText(this, "회원가입 성공!", Toast.LENGTH_SHORT).show()
+                    navController.popBackStack() // 로그인 화면으로 돌아갑니다.
+                }
+            }
+        }.launchIn(lifecycleScope)
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun GreetingPreview() {
+    DoEuijinKwakTheme {}
+}

app/src/main/java/org/sopt/dosopttemplate/MainContract.kt

@@ -0,0 +1,17 @@
+package org.sopt.dosopttemplate
+
+class MainContract {
+    data class MainState(
+        val id: String = "",
+        val registerId: String = "",
+        val pw: String = "",
+        val registerPw: String = "",
+        val nickname: String = "",
+    )
+
+    sealed interface MainSideEffect {
+        data class ShowToast(val message: String) : MainSideEffect
+        object LoginSuccess : MainSideEffect
+        object RegistrationSuccess : MainSideEffect
+    }
+}

app/src/main/java/org/sopt/dosopttemplate/MainViewModel.kt

@@ -0,0 +1,60 @@
+package org.sopt.dosopttemplate
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asSharedFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+
+class MainViewModel : ViewModel() {
+    private val _state = MutableStateFlow(MainContract.MainState())
+    val state get() = _state.asStateFlow()
+
+    private val _event = MutableSharedFlow<MainContract.MainSideEffect>()
+    val event get() = _event.asSharedFlow()
+
+    private fun emitToast(message: String) {
+        viewModelScope.launch { _event.emit(MainContract.MainSideEffect.ShowToast(message)) }
+    }
+
+    fun updateState(newState: MainContract.MainState) {
+        _state.value = newState
+    }
+
+    fun login() {
+        val state = state.value
+        when {
+            state.id.isEmpty() || state.id != state.registerId -> emitToast("아이디를 확인해주세요.")
+            state.pw.isEmpty() || state.pw != state.registerPw -> emitToast("비밀번호를 확인해주세요.")
+            else -> viewModelScope.launch {
+                _event.emit(MainContract.MainSideEffect.LoginSuccess)
+            }
+        }
+    }
+
+    fun register() {
+        val id = state.value.registerId
+        val pw = state.value.registerPw
+        val nickname = state.value.nickname
+
+        when {
+            id.length !in 6..10 -> emitToast("ID는 6~10 글자로 입력해주세요.")
+            pw.length !in 8..12 -> emitToast("비밀번호는 8~12 글자로 입력해주세요.")
+            nickname.isBlank() -> emitToast("닉네임을 입력해주세요.")
+            else -> completeRegistration(id, pw, nickname)
+        }
+    }
+
+    fun clearRegisterInfo() {
+        updateState(state.value.copy(registerId = "", registerPw = "", nickname = ""))
+    }
+
+    private fun completeRegistration(id: String, pw: String, nickname: String) {
+        viewModelScope.launch {
+            updateState(state.value.copy(id = id, pw = pw, nickname = nickname))
+            _event.emit(MainContract.MainSideEffect.RegistrationSuccess)
+        }
+    }
+}

app/src/main/java/org/sopt/dosopttemplate/feature/home/HomeScreen.kt

@@ -0,0 +1,101 @@
+package org.sopt.dosopttemplate.feature.home
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavController
+import org.sopt.dosopttemplate.MainViewModel
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun HomeScreen(
+    modifier: Modifier = Modifier,
+    navController: NavController,
+    viewModel: MainViewModel,
+) {
+    Scaffold { innerPadding ->
+        HomeContent(
+            modifier = modifier.padding(innerPadding),
+            navController = navController,
+            viewModel = viewModel,
+        )
+    }
+}
+
+@Composable
+fun HomeContent(
+    modifier: Modifier,
+    navController: NavController,
+    viewModel: MainViewModel,
+) {
+    val state = viewModel.state.collectAsState()
+    Column(
+        modifier = modifier
+            .padding(horizontal = 16.dp)
+            .padding(top = 32.dp),
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Icon(
+                imageVector = Icons.Default.Person,
+                contentDescription = "Person Icon",
+            )
+            Spacer(modifier = Modifier.size(8.dp))
+            Text(
+                text = state.value.nickname,
+                style = TextStyle(
+                    fontWeight = FontWeight(700),
+                    fontSize = 20.sp,
+                ),
+                color = Color.Black,
+            )
+            Spacer(modifier = Modifier.size(16.dp))
+            Text(
+                text = "컴포즈 반가워",
+                style = TextStyle(
+                    fontSize = 20.sp,
+                ),
+                color = Color.Black,
+            )
+        }
+        Spacer(modifier = Modifier.height(24.dp))
+        Text(
+            text = "ID",
+            style = TextStyle(
+                fontWeight = FontWeight(700),
+                fontSize = 30.sp,
+            ),
+        )
+        Spacer(modifier = Modifier.height(8.dp))
+        Text(text = state.value.id)
+        Spacer(modifier = Modifier.height(24.dp))
+        Text(
+            text = "PW",
+            style = TextStyle(
+                fontWeight = FontWeight(700),
+                fontSize = 30.sp,
+            ),
+        )
+        Spacer(modifier = Modifier.height(8.dp))
+        Text(text = state.value.pw)
+    }
+}