🔗 :: (#24) 비밀번호 설정 스크린 퍼블리싱

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

@@ -12,6 +12,7 @@ import team.retum.signup.navigation.navigateToInputPersonalInfo
 import team.retum.signup.navigation.navigateToSignUp
 import team.retum.signup.navigation.signUp
 
+
 const val NAVIGATION_AUTH = "auth"
 
 internal fun NavGraphBuilder.authNavigation(navController: NavController) {
@@ -25,6 +26,7 @@ internal fun NavGraphBuilder.authNavigation(navController: NavController) {
         )
         signIn(onBackClick = navController::popBackStack)
         signUp(
+            navController = navController,
             onBackClick = navController::popBackStack,
             onNextClick = navController::navigateToInputEmail,
         )

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

@@ -8,10 +8,11 @@ import team.retum.signup.ui.InputEmailScreen
 const val NAVIGATION_SIGN_UP_INPUT_EMAIL = "signUp/inputEmail"
 
 fun NavGraphBuilder.inputEmail(
+    navController: NavController,
     onBackClick: () -> Unit,
 ) {
     composable(route = NAVIGATION_SIGN_UP_INPUT_EMAIL) {
-        InputEmailScreen(onBackClick = onBackClick)
+        InputEmailScreen(navController = navController, onBackClick = onBackClick)
     }
 }
 

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

@@ -0,0 +1,22 @@
+package team.retum.signup.navigation
+
+import androidx.navigation.NavController
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.compose.composable
+import team.retum.signup.ui.SettingPasswordScreen
+
+const val NAVIGATION_SIGN_UP_SETTING_PASSWORD = "signUp/settingPassword"
+
+fun NavGraphBuilder.settingPassword(
+    onBackClick: () -> Unit,
+){
+    composable(route = NAVIGATION_SIGN_UP_SETTING_PASSWORD) {
+        SettingPasswordScreen(
+            onBackClick = onBackClick,
+        )
+    }
+}
+
+fun NavController.navigateToSettingPassword(){
+    navigate(NAVIGATION_SIGN_UP_SETTING_PASSWORD)
+}

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

@@ -7,6 +7,7 @@ import androidx.navigation.navigation
 const val NAVIGATION_SIGN_UP = "signUp"
 
 fun NavGraphBuilder.signUp(
+    navController: NavController,
     onBackClick: () -> Unit,
     onNextClick: () -> Unit,
 ) {
@@ -18,7 +19,8 @@ fun NavGraphBuilder.signUp(
             onBackClick = onBackClick,
             onNextClick = onNextClick,
         )
-        inputEmail(onBackClick = onBackClick)
+        inputEmail( navController = navController, onBackClick = onBackClick)
+        settingPassword(onBackClick = onBackClick)
     }
 }
 

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

@@ -14,7 +14,9 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
 import team.retum.signup.R
+import team.retum.signup.navigation.NAVIGATION_SIGN_UP_SETTING_PASSWORD
 import team.returm.jobisdesignsystemv2.appbar.JobisLargeTopAppBar
 import team.returm.jobisdesignsystemv2.button.ButtonColor
 import team.returm.jobisdesignsystemv2.button.JobisButton
@@ -26,6 +28,7 @@ import team.returm.jobisdesignsystemv2.textfield.JobisTextField
 
 @Composable
 internal fun InputEmailScreen(
+    navController: NavController,
     onBackClick: () -> Unit,
 ) {
     // TODO: viewModel로 옮기기
@@ -53,7 +56,9 @@ internal fun InputEmailScreen(
             modifier = Modifier.padding(bottom = 24.dp),
             text = stringResource(id = R.string.next),
             color = ButtonColor.Primary,
-            onClick = {},
+            onClick = {
+                      navController.navigate(route = NAVIGATION_SIGN_UP_SETTING_PASSWORD)
+            },
         )
     }
 }

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

@@ -0,0 +1,86 @@
+package team.retum.signup.ui
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Icon
+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.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+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.JobisIcon
+import team.returm.jobisdesignsystemv2.foundation.JobisTheme
+import team.returm.jobisdesignsystemv2.textfield.DescriptionType
+import team.returm.jobisdesignsystemv2.textfield.JobisTextField
+
+@Composable
+fun SettingPasswordScreen(
+    onBackClick: () -> Unit,
+) {
+    var password by remember { mutableStateOf("") }
+    var checkPassword by remember { mutableStateOf("") }
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(JobisTheme.colors.background)
+            .padding(horizontal = 24.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        JobisLargeTopAppBar(
+            title = stringResource(id = R.string.setting_password),
+            onBackPressed = onBackClick,
+        )
+        PasswordInputs(
+            password = { password },
+            checkPassword = { checkPassword },
+            onPasswordChange = { password = it },
+            onCheckPassword = { password = it },
+        )
+        Spacer(modifier = Modifier.weight(1f))
+        JobisButton(
+            modifier = Modifier.padding(bottom = 24.dp),
+            text = stringResource(id = R.string.next),
+            color = ButtonColor.Primary,
+            onClick = { },
+        )
+    }
+}
+
+@Composable
+fun PasswordInputs(
+    password: () -> String,
+    checkPassword: () -> String,
+    onPasswordChange: (String) -> Unit,
+    onCheckPassword: (String) -> Unit,
+) {
+    JobisTextField(
+        title = stringResource(id = R.string.password),
+        value = password,
+        onValueChange = onPasswordChange,
+        hint = stringResource(id = R.string.hint_password),
+        showDescription = {true},
+        informationDescription = "8 ~ 16자, 영문자, 숫자, 특수문자 포함",
+        descriptionType = DescriptionType.Information
+        )
+    JobisTextField(
+        title = stringResource(id = R.string.check_password),
+        value = checkPassword,
+        onValueChange = onCheckPassword,
+        hint = stringResource(id = R.string.hint_check_password),
+
+    )
+}
+

feature/signup/src/main/res/values/strings.xml

@@ -3,6 +3,7 @@
 
     <string name="input_personal_information">개인정보를 입력해주세요</string>
     <string name="input_email">이메일을 입력해주세요</string>
+    <string name="setting_password">비밀번호를 설정해주세요</string>
     <string name="name">이름</string>
     <string name="hint_name">홍길동</string>
     <string name="student_number">학번</string>
@@ -12,4 +13,8 @@
     <string name="hint_email">example</string>
     <string name="authentication_code">인증코드</string>
     <string name="hint_authentication_code">이메일로 온 코드를 입력해주세요</string>
+    <string name="password">비밀번호</string>
+    <string name="hint_password">계정의 비밀번호를 설정해주세요.</string>
+    <string name="check_password">비밀번호 확인</string>
+    <string name="hint_check_password">위 비밀번호를 한 번 더 입력해주세요.</string>
 </resources>