#33 [feat] : 닉네임 입력 뷰 UI 구현

SOPT-all · Jan 17, 2025 · e73de00 · e73de00
1 parent fc12b5c
commit e73de00
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 3 deletions.
diff --git a/app/src/main/java/com/sopt/withsuhyeon/core/navigation/RouteModel.kt b/app/src/main/java/com/sopt/withsuhyeon/core/navigation/RouteModel.kt
@@ -9,6 +9,8 @@ sealed interface Route {
     data object PhoneNumberAuth : Route
     @Serializable
     data object NickNameAuth : Route
+    @Serializable
+    data object SelectYearOfBirth : Route
 }
 
 sealed interface MainTabRoute : Route {

diff --git a/app/src/main/java/com/sopt/withsuhyeon/feature/main/MainNavigator.kt b/app/src/main/java/com/sopt/withsuhyeon/feature/main/MainNavigator.kt
@@ -18,6 +18,7 @@ import com.sopt.withsuhyeon.feature.home.navigation.navigateToHome
 import com.sopt.withsuhyeon.feature.mypage.navigation.navigateToMyPage
 import com.sopt.withsuhyeon.feature.onboarding.navigation.navigateToNickNameAuth
 import com.sopt.withsuhyeon.feature.onboarding.navigation.navigateToPhoneNumberAuth
+import com.sopt.withsuhyeon.feature.onboarding.navigation.navigateToSelectYearOfBirth
 
 
 class MainNavigator(
@@ -27,7 +28,7 @@ class MainNavigator(
         @Composable get() = navController
             .currentBackStackEntryAsState().value?.destination
 
-    val startDestination = Route.PhoneNumberAuth
+    val startDestination = Route.NickNameAuth
 
     val currentTab: MainTab?
         @SuppressLint("RestrictedApi") @Composable get() = MainTab.find { tab ->
@@ -59,6 +60,10 @@ class MainNavigator(
         navController.navigateToNickNameAuth()
     }
 
+    fun navigateToSelectYearOfBirth() {
+        navController.navigateToSelectYearOfBirth()
+    }
+
     fun navigateToHome(navOptions: NavOptions? = null) {
         navController.navigateToHome(
             navOptions ?: navOptions {

diff --git a/app/src/main/java/com/sopt/withsuhyeon/feature/main/component/MainNavHost.kt b/app/src/main/java/com/sopt/withsuhyeon/feature/main/component/MainNavHost.kt
@@ -49,7 +49,8 @@ fun MainNavHost(
             )
             onBoardingNavGraph(
                 onNavigateToPhoneNumberAuth = navigator::navigateToPhoneNumberAuth,
-                onNavigateToNickNameAuth = navigator::navigateToNicknameAuth
+                onNavigateToNickNameAuth = navigator::navigateToNicknameAuth,
+                onNavigateToSelectYearOfBirth = navigator::navigateToSelectYearOfBirth
             )
         }
     }

diff --git a/app/src/main/java/com/sopt/withsuhyeon/feature/onboarding/NicknameAuthentication.kt b/app/src/main/java/com/sopt/withsuhyeon/feature/onboarding/NicknameAuthentication.kt
@@ -1,2 +1,81 @@
 package com.sopt.withsuhyeon.feature.onboarding
 
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+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.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.sopt.withsuhyeon.R
+import com.sopt.withsuhyeon.core.component.button.LargeButton
+import com.sopt.withsuhyeon.core.component.progressbar.AnimatedProgressBar
+import com.sopt.withsuhyeon.core.component.textfield.BasicShortTextField
+import com.sopt.withsuhyeon.core.util.KeyStorage.NEXT_BUTTON_TEXT
+import com.sopt.withsuhyeon.feature.onboarding.components.OnBoardingTitle
+
+@Composable
+fun NickNameAuthenticationRoute(
+    navigateToNext: () -> Unit,
+    viewModel: OnBoardingViewModel = hiltViewModel()
+) {
+    NickNameAuthenticationScreen(
+        onButtonClick = navigateToNext
+    )
+}
+
+@Composable
+fun NickNameAuthenticationScreen(
+    onButtonClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    var nicknameValue by remember { mutableStateOf("") }
+    var isNicknameValid by remember { mutableStateOf(false) }
+    var isNicknameTextFiledFocused by remember { mutableStateOf(false) }
+
+    Column(
+        modifier = modifier
+            .padding(16.dp)
+            .fillMaxWidth()
+            .fillMaxHeight(),
+    ) {
+        AnimatedProgressBar(progress = 0.5f)
+        Spacer(
+            modifier = Modifier.height(16.dp)
+        )
+        OnBoardingTitle(text = stringResource(R.string.onboarding_nickname_screen_title))
+        Spacer(
+            modifier = Modifier.height(32.dp)
+        )
+        BasicShortTextField(
+            value = nicknameValue,
+            title = stringResource(R.string.onboarding_nickname_input_title),
+            hint = stringResource(R.string.onboarding_nickname_input_hint),
+            isValid = isNicknameValid,
+            onFocusChange = {
+                isNicknameTextFiledFocused = it
+            },
+            onValueChange = { input ->
+                isNicknameValid = input.length in 2..12
+                nicknameValue = input
+            },
+            maxLength = 12,
+            errorMessage = stringResource(R.string.onboarding_nickname_max_input_error_message),
+        )
+        // TODO - 특수기호나 각종 에러 케이스 뷰모델 구현
+        Spacer(modifier = Modifier.weight(1f))
+        LargeButton(
+            onClick = onButtonClick,
+            text = NEXT_BUTTON_TEXT,
+            isDisabled = !isNicknameValid,
+        )
+    }
+}
diff --git a/app/src/main/java/com/sopt/withsuhyeon/feature/onboarding/navigation/OnBoardingNavigation.kt b/app/src/main/java/com/sopt/withsuhyeon/feature/onboarding/navigation/OnBoardingNavigation.kt
@@ -3,6 +3,8 @@ package com.sopt.withsuhyeon.feature.onboarding.navigation
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.compose.composable
+import com.sopt.withsuhyeon.core.navigation.Route
+import com.sopt.withsuhyeon.feature.onboarding.NickNameAuthenticationRoute
 import com.sopt.withsuhyeon.feature.onboarding.PhoneNumberAuthenticationRoute
 import com.sopt.withsuhyeon.feature.onboarding.TermsOfUseRoute
 import com.sopt.withsuhyeon.core.navigation.Route.TermsOfUse as TermsOfUseRoute
@@ -12,6 +14,7 @@ import com.sopt.withsuhyeon.core.navigation.Route.NickNameAuth as NickNameAuthRo
 fun NavController.navigateToTermsOfUse() {
     navigate(TermsOfUseRoute)
 }
+
 fun NavController.navigateToPhoneNumberAuth() {
     navigate(PhoneNumberAuthRoute)
 }
@@ -20,9 +23,14 @@ fun NavController.navigateToNickNameAuth() {
     navigate(NickNameAuthRoute)
 }
 
+fun NavController.navigateToSelectYearOfBirth() {
+    navigate(Route.SelectYearOfBirth)
+}
+
 fun NavGraphBuilder.onBoardingNavGraph(
     onNavigateToPhoneNumberAuth: () -> Unit,
-    onNavigateToNickNameAuth: () -> Unit
+    onNavigateToNickNameAuth: () -> Unit,
+    onNavigateToSelectYearOfBirth: () -> Unit
 ) {
     composable<TermsOfUseRoute> {
         TermsOfUseRoute(
@@ -34,4 +42,9 @@ fun NavGraphBuilder.onBoardingNavGraph(
             navigateToNext = onNavigateToNickNameAuth
         )
     }
+    composable<NickNameAuthRoute> {
+        NickNameAuthenticationRoute(
+            navigateToNext = onNavigateToSelectYearOfBirth
+        )
+    }
 }
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -81,4 +81,8 @@
     <string name="onboarding_phone_number_input_hint"> - 를 제외한 휴대폰 번호를 입력해주세요</string>
     <string name="onboarding_phone_number_auth_input_title">인증 번호 (6자리)</string>
     <string name="onboarding_phone_number_auth_input_hint">인증번호 6자리</string>
+    <string name="onboarding_nickname_screen_title">수현이랑에서 사용할\n닉네임을 입력해주세요</string>
+    <string name="onboarding_nickname_input_title">닉네임</string>
+    <string name="onboarding_nickname_input_hint">한글, 영문, 숫자로 조합된 2~12자</string>
+    <string name="onboarding_nickname_max_input_error_message">최대 12글자 이하로 입력해주세요</string>
 </resources>