[Feat/#6] AuthViewModel을 스크린에 적용 및 Button의 클릭 이벤트 호이스팅

app/src/main/java/com/sopt/now/compose/presentation/ui/auth/screen/SignInScreen.kt

@@ -1,6 +1,5 @@
 package com.sopt.now.compose.presentation.ui.auth.screen
 
-import android.content.Context
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -17,18 +16,14 @@ import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Text
 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.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.PasswordVisualTransformation
-import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.tooling.preview.Preview
@@ -42,48 +37,57 @@ import com.sopt.now.compose.ui.theme.CustomTheme
 @Composable
 fun SignInRoute(
     authNavigator: AuthNavigator,
-    id: String,
-    password: String,
-    nickname: String,
-    phoneNumber: String
+    authViewModel: AuthViewModel
 ) {
+    val context = LocalContext.current
+
+    fun onClickSignIn() {
+        authViewModel.signInValidation()
+        when (authViewModel.signInState.value) {
+            is SignInState.IdInvalid -> {
+                showToast(context, context.getString(R.string.signin_signin_id_incorrect))
+            }
+
+            is SignInState.PasswordInvalid -> {
+                showToast(context, context.getString(R.string.signin_signin_password_incorrect))
+            }
+
+            is SignInState.Success -> {
+                showToast(context, context.getString(R.string.signin_signin_success_toast))
+                authNavigator.navigateToHome(
+                    authViewModel.user.value?.id,
+                    authViewModel.user.value?.password,
+                    authViewModel.user.value?.nickname,
+                    authViewModel.user.value?.phoneNumber,
+                )
+            }
+
+            else -> {}
+        }
+    }
+
     SignInScreen(
-        onClickSignIn = { id, password, nickname, phoneNumber ->
-            authNavigator.navigateToHome(
-                id, password, nickname, phoneNumber
-            )
-        },
+        authViewModel = authViewModel,
+        onClickSignIn = { onClickSignIn() },
         onClickSignUp = { authNavigator.navigateToSignUp() },
-        id = id,
-        password = password,
-        nickname = nickname,
-        phoneNumber = phoneNumber
     )
 }
 
 @Composable
 fun SignInScreen(
-    onClickSignIn: (String, String, String, String) -> Unit,
+    authViewModel: AuthViewModel,
+    onClickSignIn: () -> Unit,
     onClickSignUp: () -> Unit,
-    id: String,
-    password: String,
-    nickname: String,
-    phoneNumber: String
 ) {
-    val context = LocalContext.current
-    var inputId by remember { mutableStateOf(TextFieldValue("")) }
-    var inputPassword by remember { mutableStateOf(TextFieldValue("")) }
-    var isIdTextFieldFocused by remember { mutableStateOf(false) }
-    var isPasswordTextFieldFocused by remember { mutableStateOf(false) }
-
     val idFocusRequester = remember { FocusRequester() }
     val passwordFocusRequester = remember { FocusRequester() }
 
     Column(
         modifier = Modifier
             .fillMaxSize()
             .background(color = CustomTheme.colors.white)
-            .padding(30.dp), horizontalAlignment = Alignment.CenterHorizontally
+            .padding(30.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
     ) {
         Spacer(modifier = Modifier.height(30.dp))
         Text(
@@ -94,25 +98,25 @@ fun SignInScreen(
         )
         Spacer(modifier = Modifier.height(80.dp))
         AuthTextField(
-            value = inputId,
-            onValueChange = { inputId = it },
+            value = authViewModel.signInId,
+            onValueChange = { authViewModel.onSignInIdChange(it) },
             modifier = Modifier.fillMaxWidth(),
-            isFocused = isIdTextFieldFocused,
-            onFocusChanged = { isIdTextFieldFocused = it },
-            onRemove = { inputId = TextFieldValue("") },
+            isFocused = authViewModel.isSignInIdTextFieldFocused,
+            onFocusChanged = { authViewModel.onSignInIdFocusChange(it) },
+            onRemove = { authViewModel.onSignInIdChange("") },
             hint = stringResource(R.string.signin_id_hint),
             focusRequester = idFocusRequester,
             keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Next),
             keyboardActions = KeyboardActions(onNext = { passwordFocusRequester.requestFocus() })
         )
         Spacer(modifier = Modifier.height(40.dp))
         AuthTextField(
-            value = inputPassword,
-            onValueChange = { inputPassword = it },
+            value = authViewModel.signInPassword,
+            onValueChange = { authViewModel.onSignInPasswordChange(it) },
             modifier = Modifier.fillMaxWidth(),
-            isFocused = isPasswordTextFieldFocused,
-            onFocusChanged = { isPasswordTextFieldFocused = it },
-            onRemove = { inputPassword = TextFieldValue("") },
+            isFocused = authViewModel.isSignInPasswordTextFieldFocused,
+            onFocusChanged = { authViewModel.onSignInPasswordFocusChange(it) },
+            onRemove = { authViewModel.onSignInPasswordChange("") },
             hint = stringResource(R.string.signin_password_hint),
             visualTransformation = PasswordVisualTransformation(),
             focusRequester = passwordFocusRequester,
@@ -134,13 +138,6 @@ fun SignInScreen(
         Spacer(modifier = Modifier.weight(1f))
         SignInButton(
             modifier = Modifier.fillMaxWidth(),
-            context = context,
-            inputId = inputId.text,
-            inputPassword = inputPassword.text,
-            id = id,
-            password = password,
-            nickname = nickname,
-            phoneNumber = phoneNumber,
             onClickSignIn = onClickSignIn
         )
     }
@@ -149,36 +146,10 @@ fun SignInScreen(
 @Composable
 fun SignInButton(
     modifier: Modifier = Modifier,
-    context: Context,
-    inputId: String,
-    inputPassword: String,
-    id: String,
-    password: String,
-    nickname: String,
-    phoneNumber: String,
-    onClickSignIn: (String, String, String, String) -> Unit
+    onClickSignIn: () -> Unit
 ) {
     Button(
-        onClick = {
-            when {
-                inputId.isEmpty() || inputPassword.isEmpty() -> showToast(
-                    context, context.getString(R.string.signin_signin_failure_toast)
-                )
-
-                inputId != id -> showToast(
-                    context, context.getString(R.string.signin_signin_id_incorrect)
-                )
-
-                inputPassword != password -> showToast(
-                    context, context.getString(R.string.signin_signin_password_incorrect)
-                )
-
-                else -> {
-                    showToast(context, context.getString(R.string.signin_signin_success_toast))
-                    onClickSignIn(id, password, nickname, phoneNumber)
-                }
-            }
-        },
+        onClick = onClickSignIn,
         modifier = modifier,
         colors = ButtonDefaults.buttonColors(CustomTheme.colors.mainYellow),
         shape = RoundedCornerShape(10.dp)