[feat] : #8 SignUpScreen MVI 적용

AND-SOPT-ANDROID · Nov 6, 2024 · 75304bf · 75304bf
1 parent 1159e91
commit 75304bf
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 47 deletions.
diff --git a/app/src/main/java/org/sopt/and/presentation/navigation/Navigation.kt b/app/src/main/java/org/sopt/and/presentation/navigation/Navigation.kt
@@ -17,6 +17,7 @@ import org.sopt.and.presentation.ui.home.HomeScreen
 import org.sopt.and.presentation.ui.mypage.MyPageScreen
 import org.sopt.and.presentation.ui.search.SearchScreen
 import org.sopt.and.presentation.ui.signin.SignInScreen
+import org.sopt.and.presentation.ui.signup.SignUpRoute
 import org.sopt.and.presentation.ui.signup.SignUpScreen
 import org.sopt.and.presentation.viewmodel.SignInViewModel
 import org.sopt.and.presentation.viewmodel.SignUpViewModel
@@ -54,18 +55,8 @@ fun Navigation(
            }
 
            composable(Routes.SignUpScreen.route) {
-               val signUpViewModel: SignUpViewModel = viewModel()
-               SignUpScreen(
-                   navigateUp = { navController.popBackStack() },
-                   navigateSignIn = { navController.navigate(Routes.SignInScreen.route) },
-                   signUpEmail = signUpViewModel.signUpState.collectAsState().value.email,
-                   signUpPwd = signUpViewModel.signUpState.collectAsState().value.password,
-                   onEmailChange = { signUpViewModel.setSignUpEmail(it) },
-                   onPwdChange  = { signUpViewModel.setSignUpPwd(it) },
-                   isPwdVisibility = signUpViewModel.signUpState.collectAsState().value.isPassWordVisibility,
-                   isPwdVisible = { signUpViewModel.togglePasswordVisibility() },
-                   isSignUp = { signUpEmail, signUpPwd -> signUpViewModel.signUp() },
-                   signUpSuccess = signUpViewModel.isSignUpSuccess.collectAsState().value
+               SignUpRoute(
+                   navigateSignIn = { navController.navigate(Routes.SignInScreen.route) }
                )
            }
 

diff --git a/app/src/main/java/org/sopt/and/presentation/ui/signup/SignUpRoute.kt b/app/src/main/java/org/sopt/and/presentation/ui/signup/SignUpRoute.kt
@@ -0,0 +1,59 @@
+package org.sopt.and.presentation.ui.signup
+
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Scaffold
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import org.sopt.and.presentation.viewmodel.SignUpViewModel
+import androidx.hilt.navigation.compose.hiltViewModel
+import org.sopt.and.presentation.utils.contract.SignUpContract
+import org.sopt.and.utils.showToastMsg
+
+@Composable
+fun SignUpRoute(
+    navigateSignIn: () -> Unit,
+    viewModel: SignUpViewModel = hiltViewModel()
+) {
+    val signUpState by viewModel.uiState.collectAsStateWithLifecycle()
+    val signupEffect = viewModel.effect
+    val context = LocalContext.current
+
+    LaunchedEffect(signupEffect) {
+        signupEffect.collect {
+            when(it) {
+                is SignUpContract.Effect.ShowToast -> {
+                    context.showToastMsg(it.message)
+                }
+            }
+        }
+    }
+
+    LaunchedEffect(signUpState.status) {
+        if (signUpState.status == SignUpContract.SignUpStatus.SUCCESS) {
+            navigateSignIn()
+        }
+    }
+
+    Scaffold(
+        modifier = Modifier
+            .fillMaxSize()
+    ) { innerPadding ->
+        SignUpScreen(
+        signUpName = signUpState.username,
+        signUpPwd = signUpState.password,
+        signUpHobby = signUpState.hobby,
+        onNameChange = { viewModel.setEvent(SignUpContract.Event.OnUsernameChanged(it)) },
+        onPwdChange = { viewModel.setEvent(SignUpContract.Event.OnPasswordChanged(it)) },
+        onHobbyChange = { viewModel.setEvent(SignUpContract.Event.OnHobbyChanged(it)) },
+        isPwdVisibility = signUpState.isPassWordVisibility,
+        onSignUpBtnClick = { viewModel.setEvent(SignUpContract.Event.OnSignUpButtonClicked) },
+        modifier = Modifier.padding(innerPadding)
+        )
+    }
+
+}
diff --git a/app/src/main/java/org/sopt/and/presentation/ui/signup/SignUpScreen.kt b/app/src/main/java/org/sopt/and/presentation/ui/signup/SignUpScreen.kt
@@ -1,6 +1,5 @@
 package org.sopt.and.presentation.ui.signup
 
-import android.util.Log
 import androidx.annotation.StringRes
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
@@ -13,20 +12,19 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
-import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Close
 import androidx.compose.material.icons.outlined.Info
-import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -40,46 +38,41 @@ import org.sopt.and.presentation.component.SocialLoginRow
 import org.sopt.and.presentation.component.SocialLoginTextDriver
 import org.sopt.and.ui.theme.Black
 import org.sopt.and.ui.theme.DoubleDarkGray
-import org.sopt.and.ui.theme.Explain
 import org.sopt.and.ui.theme.Gray100
-import org.sopt.and.ui.theme.Gray200
-import org.sopt.and.ui.theme.MoreDarkGray
-import org.sopt.and.ui.theme.PlayerGray
 import org.sopt.and.ui.theme.White
 
 @Composable
 fun SignUpScreen(
-    navigateUp: () -> Unit,
-    navigateSignIn: () -> Unit,
-    signUpEmail: String,
+    signUpName: String,
     signUpPwd: String,
-    onEmailChange: (String) -> Unit,
+    signUpHobby: String,
+    onNameChange: (String) -> Unit,
     onPwdChange: (String) -> Unit,
+    onHobbyChange: (String) -> Unit,
     isPwdVisibility: Boolean,
-    isPwdVisible: () -> Unit,
-    isSignUp: (String, String) -> Unit,
-    signUpSuccess: Boolean
+    //isPwdVisible: () -> Unit,
+    onSignUpBtnClick:() -> Unit,
+    modifier: Modifier = Modifier
 ) {
     Column(
-        modifier = Modifier
+        modifier = modifier
             .fillMaxSize()
+            .verticalScroll(rememberScrollState())
             .background(Black)
-            .statusBarsPadding()
             .imePadding(),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.SpaceBetween
     ) {
 
         Column(
             modifier = Modifier
-                .fillMaxWidth()
-                .weight(1f),
+                .fillMaxWidth(),
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
             SignUpToolbar(
                 content = stringResource(R.string.signup),
                 trailingIcon = {
-                    IconButton(onClick = navigateUp) {
+                    IconButton({}) {
                         Icon(
                             imageVector = Icons.Outlined.Close,
                             contentDescription = null,
@@ -91,7 +84,6 @@ fun SignUpScreen(
                 }
             )
 
-            // Title Text
             Spacer(Modifier.height(28.dp))
             Text(
                 color = White,
@@ -103,11 +95,10 @@ fun SignUpScreen(
                     .padding(horizontal = 16.dp)
             )
 
-            // Email 입력 TextField
             Spacer(Modifier.height(24.dp))
             AuthTextField(
-                value = signUpEmail,
-                onValueChange = onEmailChange,
+                value = signUpName,
+                onValueChange = onNameChange,
                 isPwdVisible = true,
                 placeholder = R.string.signup_id_placeholder,
                 modifier = Modifier
@@ -125,11 +116,24 @@ fun SignUpScreen(
                 modifier = Modifier
                     .padding(horizontal = 12.dp),
                 isPwdVisible = isPwdVisibility,
-                onPwdVisibilityChange = isPwdVisible
+                //onPwdVisibilityChange = isPwdVisible
             )
             Spacer(Modifier.height(8.dp))
             WarningTextGuide(R.string.signup_pwd_warning)
 
+            Spacer(Modifier.height(8.dp))
+            AuthTextField(
+                value = signUpHobby,
+                onValueChange = onHobbyChange,
+                isPwdVisible = true,
+                placeholder = R.string.signup_hobby_placeholder,
+                modifier = Modifier
+                    .padding(horizontal = 12.dp)
+            )
+            Spacer(Modifier.height(8.dp))
+            WarningTextGuide(R.string.signup_hobby_warning)
+            Spacer(Modifier.height(8.dp))
+
             // 소셜 로그인 Title
             Spacer(modifier = Modifier.height(32.dp))
             SocialLoginTextDriver(R.string.sign_social)
@@ -151,17 +155,9 @@ fun SignUpScreen(
         SignupButton(
             R.string.signup_btn_name,
             onClick = {
-                isSignUp(signUpEmail, signUpPwd)
+                onSignUpBtnClick()
             }
         )
-
-
-        if (signUpSuccess) {
-            LaunchedEffect(Unit) {
-                navigateSignIn() // 회원가입 성공 시 navigateSignIn 호출
-                Log.d("로그", "LaunchedEffect navigateSignIn")
-            }
-        }
     }
 }
 
@@ -210,4 +206,22 @@ fun SignupButton(
             textAlign = TextAlign.Center
         )
     }
-}
+}
+
+//@Preview(showBackground = true)
+//@Composable
+//fun PreviewSignUpScreen() {
+//    SignUpScreen(
+//        navigateUp = {},
+//        navigateSignIn = {},
+//        signUpEmail = stringResource(R.string.signup_id_placeholder),
+//        signUpPwd = stringResource(R.string.signup_pwd_placeholder),
+//        signUpHobby = stringResource(R.string.signup_hobby_placeholder),
+//        onEmailChange = {},
+//        onPwdChange = {},
+//        isPwdVisibility = false,
+//        isPwdVisible = {},
+//        isSignUp = { _, _ -> },
+//        signUpSuccess = false
+//    )
+//}