[feat #95] :: 회원가입 퍼블리싱

composeApp/src/commonMain/kotlin/team/aliens/dms/kmp/DmsNavigator.kt

@@ -10,6 +10,7 @@ import team.aliens.dms.kmp.feature.signup.navigation.navigateToEnterEmail
 import team.aliens.dms.kmp.feature.signup.navigation.navigateToEnterEmailVerificationCode
 import team.aliens.dms.kmp.feature.signup.navigation.navigateToEnterSchoolVerificationCode
 import team.aliens.dms.kmp.feature.signup.navigation.navigateToEnterSchoolVerificationQuestion
+import team.aliens.dms.kmp.feature.signup.navigation.navigateToEnterStudentNumber
 import team.aliens.dms.kmp.feature.signup.navigation.navigateToSetId
 import team.aliens.dms.kmp.feature.signup.navigation.navigateToSetPassword
 import team.aliens.dms.kmp.feature.signup.navigation.navigateToSignUp
@@ -48,6 +49,10 @@ internal class DmsNavigator(
         navController.navigateToEnterEmailVerificationCode(signUpData = signUpData)
     }
 
+    fun navigateToEnterStudentNumber(signUpData: SignUpData) {
+        navController.navigateToEnterStudentNumber(signUpData = signUpData)
+    }
+
     fun navigateToSetId(signUpData: SignUpData) {
         navController.navigateToSetId(signUpData = signUpData)
     }

composeApp/src/commonMain/kotlin/team/aliens/dms/kmp/navigation/authorized/AuthNavigation.kt

@@ -32,6 +32,7 @@ internal fun NavGraphBuilder.authNavigation(
             navigateToEnterSchoolVerificationQuestion = navigator::navigateToEnterSchoolVerificationQuestion,
             navigateToEnterEmail = navigator::navigateToEnterEmail,
             navigateToEnterEmailVerificationCode = navigator::navigateToEnterEmailVerificationCode,
+            navigateToEnterStudentNumber = navigator::navigateToEnterStudentNumber,
             navigateToSetId = navigator::navigateToSetId,
             navigateToSetPassword = navigator::navigateToSetPassword,
             navigateToTerms = navigator::navigateToTerms,

core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/checkbox/DmsCheckbox.kt

@@ -0,0 +1,50 @@
+package team.aliens.dms.kmp.core.designsystem.checkbox
+
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.material.Checkbox
+import androidx.compose.material.CheckboxColors
+import androidx.compose.material.CheckboxDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import team.aliens.dms.kmp.core.designsystem.foundation.DmsTheme
+
+@Composable
+fun DmsCheckbox(
+    checked: Boolean,
+    onCheckedChange: ((Boolean) -> Unit)?,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    colors: CheckboxColors = DmsCheckboxDefaults.Colors(),
+    interactionSource : MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+    Checkbox(
+        checked = checked,
+        onCheckedChange = onCheckedChange,
+        modifier = modifier,
+        enabled = enabled,
+        colors = colors,
+        interactionSource = interactionSource,
+    )
+}
+
+object DmsCheckboxDefaults {
+
+    private const val DISABLED_CONTAINER_OPACITY = 0.38f
+
+    @Composable
+    fun Colors(
+        checkedColor: Color = DmsTheme.colors.secondary,
+        uncheckedColor: Color = DmsTheme.colors.inverseSurface,
+        checkmarkColor: Color = DmsTheme.colors.surfaceTint,
+        disabledColor: Color = DmsTheme.colors.primaryContainer,
+        disabledIndeterminateColor: Color = checkedColor.copy(alpha = DISABLED_CONTAINER_OPACITY),
+    ): CheckboxColors = CheckboxDefaults.colors(
+        checkedColor = checkedColor,
+        uncheckedColor = uncheckedColor,
+        checkmarkColor = checkmarkColor,
+        disabledColor = disabledColor,
+        disabledIndeterminateColor = disabledIndeterminateColor,
+    )
+}

core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/timer/DmsTimer.kt

@@ -18,6 +18,7 @@ fun DmsTimer(
     modifier: Modifier = Modifier,
     timerTotalSeconds: Long = 180000L,
     timerInterval: Long = 1000L,
+    onTimerFinished: (Boolean) -> Unit,
 ) {
     var time by remember { mutableStateOf(timerTotalSeconds) }
     var timerFinished by remember { mutableStateOf(false) }
@@ -35,6 +36,7 @@ fun DmsTimer(
 
                 override fun onFinish() {
                     timerFinished = true
+                    onTimerFinished(timerFinished)
                 }
             },
         )
@@ -44,12 +46,16 @@ fun DmsTimer(
         modifier = modifier,
         text = formatTime(time / 1000),
         style = DmsTypography.Body1,
-        color = DmsTheme.colors.onSurface,
+        color = DmsTheme.colors.inversePrimary,
     )
 }
 
 fun formatTime(seconds: Long): String {
     val minutes = seconds / 60
     val secs = seconds % 60
-    return "$minutes 분:$secs 초"
+    val time = when {
+        minutes > 0 -> "${minutes}분 ${secs}초"
+        else -> "${secs}초"
+    }
+    return time
 }

feature/signup/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signup/component/SignUpInfoBanner.kt

@@ -0,0 +1,33 @@
+package team.aliens.dms.kmp.feature.signup.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import team.aliens.dms.kmp.core.designsystem.foundation.DmsTheme
+import team.aliens.dms.kmp.core.designsystem.foundation.DmsTypography
+import team.aliens.dms.kmp.core.designsystem.text.DmsText
+
+@Composable
+internal fun SignUpInfoBanner(
+    modifier: Modifier = Modifier,
+    title: String,
+    description: String,
+) {
+    Column(
+        modifier = modifier.fillMaxWidth(),
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        DmsText(
+            text = title,
+            style = DmsTypography.Header3,
+        )
+        DmsText(
+            text = description,
+            style = DmsTypography.Body1,
+            color = DmsTheme.colors.inverseOnSurface,
+        )
+    }
+}

feature/signup/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signup/di/SignIUpModel.kt

@@ -6,6 +6,7 @@ import team.aliens.dms.kmp.feature.signup.viewmodel.EnterEmailVerificationCodeVi
 import team.aliens.dms.kmp.feature.signup.viewmodel.EnterEmailViewModel
 import team.aliens.dms.kmp.feature.signup.viewmodel.EnterSchoolVerificationCodeViewModel
 import team.aliens.dms.kmp.feature.signup.viewmodel.EnterSchoolVerificationQuestionViewModel
+import team.aliens.dms.kmp.feature.signup.viewmodel.EnterStudentNumberViewModel
 import team.aliens.dms.kmp.feature.signup.viewmodel.SetIdViewModel
 import team.aliens.dms.kmp.feature.signup.viewmodel.SetPasswordViewModel
 import team.aliens.dms.kmp.feature.signup.viewmodel.TermsViewModel
@@ -15,6 +16,7 @@ val signUpModule = module {
     viewModelOf(::EnterSchoolVerificationQuestionViewModel)
     viewModelOf(::EnterEmailViewModel)
     viewModelOf(::EnterEmailVerificationCodeViewModel)
+    viewModelOf(::EnterStudentNumberViewModel)
     viewModelOf(::SetIdViewModel)
     viewModelOf(::SetPasswordViewModel)
     viewModelOf(::TermsViewModel)

feature/signup/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signup/navigation/EnterEmailVerificationCodeNavigation.kt

@@ -14,15 +14,15 @@ const val NAVIGATION_ENTER_EMAIL_VERIFICATION_CODE = "enterEmailVerificationCode
 
 fun NavGraphBuilder.enterEmailVerificationCode(
     onBackPressed: () -> Unit,
-    navigateToSetId: (SignUpData) -> Unit,
+    navigateToEnterStudentNumber: (SignUpData) -> Unit,
 ) {
     composable(
         route = "$NAVIGATION_ENTER_EMAIL_VERIFICATION_CODE/{${ResourceKeys.SIGN_UP}}",
         arguments = listOf(navArgument(ResourceKeys.SIGN_UP) { type = NavType.StringType }),
     ) {
         EnterEmailVerificationCode(
             onBackPressed = onBackPressed,
-            navigateToSetId = navigateToSetId,
+            navigateToEnterStudentNumber = navigateToEnterStudentNumber,
             signUpData = it.getSignUpData(),
         )
     }

feature/signup/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signup/navigation/EnterStudentNumberNavigation.kt

@@ -0,0 +1,33 @@
+package team.aliens.dms.kmp.feature.signup.navigation
+
+import androidx.navigation.NavController
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.NavType
+import androidx.navigation.compose.composable
+import androidx.navigation.navArgument
+import team.aliens.dms.kmp.core.common.utils.ResourceKeys
+import team.aliens.dms.kmp.feature.signup.model.SignUpData
+import team.aliens.dms.kmp.feature.signup.model.toJsonString
+import team.aliens.dms.kmp.feature.signup.ui.EnterStudentNumber
+
+const val NAVIGATION_ENTER_STUDENT_NUMBER = "enterStudentNumber"
+
+fun NavGraphBuilder.enterStudentNumber(
+    onBackPressed: () -> Unit,
+    navigateToSetId: (SignUpData) -> Unit,
+) {
+    composable(
+        route = "$NAVIGATION_ENTER_STUDENT_NUMBER/{${ResourceKeys.SIGN_UP}}",
+        arguments = listOf(navArgument(ResourceKeys.SIGN_UP) { type = NavType.StringType }),
+    ) {
+        EnterStudentNumber(
+            onBackPressed = onBackPressed,
+            navigateToSetId = navigateToSetId,
+            signUpData = it.getSignUpData(),
+        )
+    }
+}
+
+fun NavController.navigateToEnterStudentNumber(signUpData: SignUpData) {
+    navigate("$NAVIGATION_ENTER_STUDENT_NUMBER/${signUpData.toJsonString()}")
+}

feature/signup/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signup/navigation/SignUpNavigation.kt

@@ -15,6 +15,7 @@ fun NavGraphBuilder.signUp(
     navigateToEnterSchoolVerificationQuestion: (SignUpData) -> Unit,
     navigateToEnterEmail: (SignUpData) -> Unit,
     navigateToEnterEmailVerificationCode: (SignUpData) -> Unit,
+    navigateToEnterStudentNumber: (SignUpData) -> Unit,
     navigateToSetId: (SignUpData) -> Unit,
     navigateToSetPassword: (SignUpData) -> Unit,
     navigateToTerms: (SignUpData) -> Unit,
@@ -38,6 +39,10 @@ fun NavGraphBuilder.signUp(
             navigateToEnterEmailVerificationCode = navigateToEnterEmailVerificationCode,
         )
         enterEmailVerificationCode(
+            onBackPressed = onBackPressed,
+            navigateToEnterStudentNumber = navigateToEnterStudentNumber,
+        )
+        enterStudentNumber(
             onBackPressed = onBackPressed,
             navigateToSetId = navigateToSetId,
         )

feature/signup/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signup/ui/EnterEmailScreen.kt

@@ -2,14 +2,27 @@ package team.aliens.dms.kmp.feature.signup.ui
 
 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.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import org.koin.compose.koinInject
+import team.aliens.dms.kmp.core.common.ui.horizontalPadding
+import team.aliens.dms.kmp.core.common.ui.startPadding
+import team.aliens.dms.kmp.core.common.ui.topPadding
+import team.aliens.dms.kmp.core.designsystem.appbar.DmsTopAppBar
+import team.aliens.dms.kmp.core.designsystem.button.ButtonColor
+import team.aliens.dms.kmp.core.designsystem.button.ButtonType
+import team.aliens.dms.kmp.core.designsystem.button.DmsButton
 import team.aliens.dms.kmp.core.designsystem.foundation.DmsTheme
+import team.aliens.dms.kmp.core.designsystem.textfield.DmsTextField
+import team.aliens.dms.kmp.feature.signup.component.SignUpInfoBanner
 import team.aliens.dms.kmp.feature.signup.model.SignUpData
 import team.aliens.dms.kmp.feature.signup.viewmodel.EnterEmailSideEffect
 import team.aliens.dms.kmp.feature.signup.viewmodel.EnterEmailState
@@ -54,5 +67,38 @@ private fun EnterEmailScreen(
             .fillMaxSize()
             .background(DmsTheme.colors.background),
     ) {
+        DmsTopAppBar(
+            title = "회원가입",
+            onBackPressed = onBackPressed,
+        )
+        SignUpInfoBanner(
+            modifier = Modifier
+                .fillMaxWidth()
+                .startPadding(24.dp)
+                .topPadding(48.dp),
+            title = "이메일을 입력해주세요",
+            description = "인증 번호를 받을 이메일을 입력해주세요.",
+        )
+        DmsTextField(
+            modifier = Modifier
+                .fillMaxWidth()
+                .horizontalPadding(24.dp)
+                .topPadding(44.dp),
+            value = state.email,
+            onValueChange = onEmailChange,
+            hint = "이메일 주소",
+            showClearIcon = true,
+        )
+        Spacer(modifier = Modifier.weight(1f))
+        DmsButton(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(24.dp),
+            text = "다음",
+            buttonType = ButtonType.Contained,
+            buttonColor = ButtonColor.Primary,
+            onClick = onNextClick,
+            enabled = state.buttonEnabled,
+        )
     }
 }