🔗 :: (#34) 회원가입 성별선택 스크린 퍼블리싱

app/src/main/java/team/retum/jobisandroidv2/navigation/AuthNavigation.kt

@@ -9,6 +9,7 @@ import team.retum.landing.navigation.landing
 import team.retum.signin.navigation.navigateToSignIn
 import team.retum.signin.navigation.signIn
 import team.retum.signup.navigation.navigateToInputEmail
+import team.retum.signup.navigation.navigateToSelectGender
 import team.retum.signup.navigation.navigateToSettingPassword
 import team.retum.signup.navigation.navigateToSignUp
 import team.retum.signup.navigation.signUp
@@ -25,13 +26,14 @@ internal fun NavGraphBuilder.authNavigation(navController: NavController) {
             onSignUpClick = navController::navigateToSignUp,
         )
         signIn(
-            onBackClick = navController::popBackStack,
+            onBackPressed = navController::popBackStack,
             onSignInSuccess = navController::navigateToRoot,
         )
         signUp(
-            onBackClick = navController::popBackStack,
+            onBackPressed = navController::popBackStack,
             onInputEmailClick = navController::navigateToInputEmail,
             onInputPasswordClick = navController::navigateToSettingPassword,
+            onSelectGenderClick = navController::navigateToSelectGender,
         )
     }
 }

core/common/src/main/java/team/retum/common/enums/Gender.kt

@@ -0,0 +1,6 @@
+package team.retum.common.enums
+
+enum class Gender {
+    MAN,
+    WOMAN,
+}

feature/signin/src/main/java/team/retum/signin/navigation/SignInNavigation.kt

@@ -8,12 +8,12 @@ import team.retum.signin.ui.SignIn
 const val NAVIGATION_SIGN_IN = "signIn"
 
 fun NavGraphBuilder.signIn(
-    onBackClick: () -> Unit,
+    onBackPressed: () -> Unit,
     onSignInSuccess: () -> Unit,
 ) {
     composable(route = NAVIGATION_SIGN_IN) {
         SignIn(
-            onBackClick = onBackClick,
+            onBackClick = onBackPressed,
             onSignInSuccess = onSignInSuccess,
         )
     }

feature/signup/build.gradle.kts

@@ -11,3 +11,7 @@ apply<ComposeGradlePlugin>()
 android {
     namespace = "team.retum.signup"
 }
+
+dependencies {
+    implementation(project(":core:common"))
+}

feature/signup/src/main/java/team/retum/signup/navigation/InputEmailNavigation.kt

@@ -5,20 +5,20 @@ import androidx.navigation.NavGraphBuilder
 import androidx.navigation.compose.composable
 import team.retum.signup.ui.InputEmailScreen
 
-const val NAVIGATION_SIGN_UP_INPUT_EMAIL = "signUp/inputEmail"
+const val NAVIGATION_INPUT_EMAIL = "inputEmail"
 
 fun NavGraphBuilder.inputEmail(
-    onBackClick: () -> Unit,
+    onBackPressed: () -> Unit,
     onNextClick: () -> Unit,
 ) {
-    composable(route = NAVIGATION_SIGN_UP_INPUT_EMAIL) {
+    composable(NAVIGATION_INPUT_EMAIL) {
         InputEmailScreen(
+            onBackPressed = onBackPressed,
             onNextClick = onNextClick,
-            onBackClick = onBackClick,
         )
     }
 }
 
 fun NavController.navigateToInputEmail() {
-    navigate(NAVIGATION_SIGN_UP_INPUT_EMAIL)
+    navigate(NAVIGATION_INPUT_EMAIL)
 }

feature/signup/src/main/java/team/retum/signup/navigation/InputPersonalInfoNavigation.kt

@@ -5,20 +5,20 @@ import androidx.navigation.NavGraphBuilder
 import androidx.navigation.compose.composable
 import team.retum.signup.ui.InputPersonalInfoScreen
 
-const val NAVIGATION_SIGN_UP_INPUT_PERSONAL_INFO = "signUp/inputPersonalInfo"
+const val NAVIGATION_INPUT_PERSONAL_INFO = "inputPersonalInfo"
 
 fun NavGraphBuilder.inputPersonalInformation(
-    onBackClick: () -> Unit,
+    onBackPressed: () -> Unit,
     onNextClick: () -> Unit,
 ) {
-    composable(route = NAVIGATION_SIGN_UP_INPUT_PERSONAL_INFO) {
+    composable(NAVIGATION_INPUT_PERSONAL_INFO) {
         InputPersonalInfoScreen(
-            onBackClick = onBackClick,
+            onBackPressed = onBackPressed,
             onNextClick = onNextClick,
         )
     }
 }
 
 fun NavController.navigateToInputPersonalInfo() {
-    navigate(NAVIGATION_SIGN_UP_INPUT_PERSONAL_INFO)
+    navigate(NAVIGATION_INPUT_PERSONAL_INFO)
 }

feature/signup/src/main/java/team/retum/signup/navigation/SelectGenderNavigation.kt

@@ -0,0 +1,24 @@
+package team.retum.signup.navigation
+
+import androidx.navigation.NavController
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.compose.composable
+import team.retum.signup.ui.SelectGender
+
+const val NAVIGATION_SELECT_GENDER = "selectGender"
+
+fun NavGraphBuilder.selectGender(
+    onBackPressed: () -> Unit,
+    onNextClick: () -> Unit,
+) {
+    composable(NAVIGATION_SELECT_GENDER) {
+        SelectGender(
+            onBackPressed = onBackPressed,
+            onNextClick = onNextClick,
+        )
+    }
+}
+
+fun NavController.navigateToSelectGender() {
+    navigate(NAVIGATION_SELECT_GENDER)
+}

feature/signup/src/main/java/team/retum/signup/navigation/SettingPasswordNavigation.kt

@@ -5,18 +5,20 @@ import androidx.navigation.NavGraphBuilder
 import androidx.navigation.compose.composable
 import team.retum.signup.ui.SettingPasswordScreen
 
-const val NAVIGATION_SIGN_UP_SETTING_PASSWORD = "signUp/settingPassword"
+const val NAVIGATION_SETTING_PASSWORD = "settingPassword"
 
 fun NavGraphBuilder.settingPassword(
-    onBackClick: () -> Unit,
+    onBackPressed: () -> Unit,
+    onNextClick: () -> Unit,
 ) {
-    composable(route = NAVIGATION_SIGN_UP_SETTING_PASSWORD) {
+    composable(NAVIGATION_SETTING_PASSWORD) {
         SettingPasswordScreen(
-            onBackClick = onBackClick,
+            onBackPressed = onBackPressed,
+            onNextClick = onNextClick,
         )
     }
 }
 
 fun NavController.navigateToSettingPassword() {
-    navigate(NAVIGATION_SIGN_UP_SETTING_PASSWORD)
+    navigate(NAVIGATION_SETTING_PASSWORD)
 }

feature/signup/src/main/java/team/retum/signup/navigation/SignUpNavigation.kt

@@ -7,24 +7,31 @@ import androidx.navigation.navigation
 const val NAVIGATION_SIGN_UP = "signUp"
 
 fun NavGraphBuilder.signUp(
-    onBackClick: () -> Unit,
+    onBackPressed: () -> Unit,
     onInputEmailClick: () -> Unit,
     onInputPasswordClick: () -> Unit,
+    onSelectGenderClick: () -> Unit,
 ) {
     navigation(
         route = NAVIGATION_SIGN_UP,
-        startDestination = NAVIGATION_SIGN_UP_INPUT_PERSONAL_INFO,
+        startDestination = NAVIGATION_INPUT_PERSONAL_INFO,
     ) {
         inputPersonalInformation(
-            onBackClick = onBackClick,
+            onBackPressed = onBackPressed,
             onNextClick = onInputEmailClick,
         )
         inputEmail(
+            onBackPressed = onBackPressed,
             onNextClick = onInputPasswordClick,
-            onBackClick = onBackClick,
         )
         settingPassword(
-            onBackClick = onBackClick,
+            onBackPressed = onBackPressed,
+            onNextClick = onSelectGenderClick,
+        )
+        // TODO 다음 스크린 작업 시 onNextClick 추가
+        selectGender(
+            onBackPressed = onBackPressed,
+            onNextClick = {},
         )
     }
 }

feature/signup/src/main/java/team/retum/signup/ui/InputEmailScreen.kt

@@ -26,7 +26,7 @@ import team.returm.jobisdesignsystemv2.textfield.JobisTextField
 
 @Composable
 internal fun InputEmailScreen(
-    onBackClick: () -> Unit,
+    onBackPressed: () -> Unit,
     onNextClick: () -> Unit,
 ) {
     // TODO: viewModel로 옮기기
@@ -41,7 +41,7 @@ internal fun InputEmailScreen(
     ) {
         JobisLargeTopAppBar(
             title = stringResource(id = R.string.input_email),
-            onBackPressed = onBackClick,
+            onBackPressed = onBackPressed,
         )
         EmailInputs(
             email = { email },

feature/signup/src/main/java/team/retum/signup/ui/InputPersonalInfoScreen.kt

@@ -23,7 +23,7 @@ import team.returm.jobisdesignsystemv2.textfield.JobisTextField
 
 @Composable
 fun InputPersonalInfoScreen(
-    onBackClick: () -> Unit,
+    onBackPressed: () -> Unit,
     onNextClick: () -> Unit,
 ) {
     var name by remember { mutableStateOf("") }
@@ -37,7 +37,7 @@ fun InputPersonalInfoScreen(
     ) {
         JobisLargeTopAppBar(
             title = stringResource(id = R.string.input_personal_information),
-            onBackPressed = onBackClick,
+            onBackPressed = onBackPressed,
         )
         PersonalInformationInputs(
             name = { name },

feature/signup/src/main/java/team/retum/signup/ui/SelectGenderScreen.kt

@@ -0,0 +1,158 @@
+package team.retum.signup.ui
+
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material3.Icon
+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.draw.clip
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import team.retum.common.enums.Gender
+import team.retum.signup.R
+import team.returm.jobisdesignsystemv2.appbar.JobisLargeTopAppBar
+import team.returm.jobisdesignsystemv2.button.ButtonColor
+import team.returm.jobisdesignsystemv2.button.JobisButton
+import team.returm.jobisdesignsystemv2.foundation.JobisTheme
+import team.returm.jobisdesignsystemv2.foundation.JobisTypography
+
+@Composable
+fun SelectGender(
+    onBackPressed: () -> Unit,
+    onNextClick: () -> Unit,
+) {
+    SelectGenderScreen(
+        onBackPressed = onBackPressed,
+        onNextClick = onNextClick,
+    )
+}
+
+@Composable
+private fun SelectGenderScreen(
+    onBackPressed: () -> Unit,
+    onNextClick: () -> Unit,
+) {
+    // TODO 뷰모델로 옮기기
+    var gender: Gender? by remember { mutableStateOf(null) }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(JobisTheme.colors.background)
+            .padding(horizontal = 24.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        JobisLargeTopAppBar(
+            title = stringResource(id = R.string.select_gender),
+            onBackPressed = onBackPressed,
+        )
+        Genders(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(vertical = 16.dp),
+            gender = gender,
+            onClick = { gender = it },
+        )
+        Spacer(modifier = Modifier.weight(1f))
+        JobisButton(
+            modifier = Modifier.padding(bottom = 24.dp),
+            text = stringResource(id = R.string.next),
+            onClick = onNextClick,
+            color = ButtonColor.Primary,
+        )
+    }
+}
+
+@Composable
+private fun Genders(
+    modifier: Modifier = Modifier,
+    gender: Gender?,
+    onClick: (Gender) -> Unit,
+) {
+    Row(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        GenderCard(
+            selected = gender == Gender.MAN,
+            icon = R.drawable.ic_man,
+            text = stringResource(id = R.string.gender_man),
+            onClick = { onClick(Gender.MAN) },
+        )
+        GenderCard(
+            selected = gender == Gender.WOMAN,
+            icon = R.drawable.ic_woman,
+            text = stringResource(id = R.string.gender_woman),
+            onClick = { onClick(Gender.WOMAN) },
+        )
+    }
+}
+
+@Composable
+private fun RowScope.GenderCard(
+    selected: Boolean,
+    icon: Int,
+    text: String,
+    onClick: () -> Unit,
+) {
+    val backgroundColor by animateColorAsState(
+        targetValue = if (selected) JobisTheme.colors.onPrimary
+        else JobisTheme.colors.inverseSurface,
+        label = "",
+    )
+    val textColor by animateColorAsState(
+        targetValue = if (selected) JobisTheme.colors.background
+        else JobisTheme.colors.onBackground,
+        label = "",
+    )
+    val tint by animateColorAsState(
+        targetValue = if (selected) JobisTheme.colors.background
+        else JobisTheme.colors.onSurfaceVariant,
+        label = "",
+    )
+
+    Column(
+        modifier = Modifier
+            .weight(1f)
+            .clip(RoundedCornerShape(12.dp))
+            .clickable(
+                onClick = onClick,
+                indication = rememberRipple(),
+                interactionSource = remember { MutableInteractionSource() },
+            )
+            .background(backgroundColor)
+            .padding(vertical = 24.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        Icon(
+            painter = painterResource(id = icon),
+            contentDescription = "gender",
+            tint = tint,
+        )
+        Text(
+            text = text,
+            color = textColor,
+            style = JobisTypography.HeadLine,
+        )
+    }
+}