[UI] 로그인 화면 ui 구현

composeApp/build.gradle.kts

@@ -57,11 +57,13 @@ kotlin {
             implementation(compose.runtime)
             implementation(compose.foundation)
             implementation(compose.material3)
+            implementation(compose.material)
             implementation(compose.ui)
             implementation(compose.components.resources)
             implementation(compose.components.uiToolingPreview)
             implementation(libs.androidx.lifecycle.viewmodelCompose)
             implementation(libs.androidx.lifecycle.runtimeCompose)
+            implementation(compose.materialIconsExtended)
             // Navigation
             implementation(libs.navigation.compose)
             // Ktor 핵심 클라이언트

composeApp/src/commonMain/composeResources/values/strings.xml

@@ -1,4 +1,45 @@
 <resources>
+    <!--    auth/login    -->
+    <string name="login_title">로그인</string>
+    <string name="email_label">E-mail</string>
+    <string name="password_label">password</string>
+    <string name="email_placeholder">이메일을 입력해주세요</string>
+    <string name="password_placeholder">비밀번호를 입력해주세요</string>
+    <string name="login_button">로그인</string>
+    <string name="signup_button">회원가입</string>
+    <string name="find_password_button">비밀번호 찾기</string>
+
+    <!--    auth/signup    -->
+    <string name="signup_title">이메일을 입력해주세요.</string>
+    <string name="next_button">다음</string>
+    <string name="back_button">뒤로가기</string>
+
+    <!--    auth/password_reset    -->
+    <string name="password_reset_title">비밀번호 찾기</string>
+    <string name="send_email_button">이메일 전송</string>
+
+    <!--    auth/email_verification    -->
+    <string name="email_verification_title">인증번호를 입력해주세요.</string>
+    <string name="confirm_button">확인</string>
+
+    <!--    auth/password_input    -->
+    <string name="password_input_title">비밀번호를 입력해주세요.</string>
+    <string name="password_input_label">비밀번호 입력</string>
+    <string name="password_confirm_label">비밀번호 확인</string>
+    <string name="password_input_placeholder">비밀번호 입력 (8~20자 영문, 숫자)</string>
+    <string name="password_confirm_placeholder">비밀번호 확인 (8~20자 영문, 숫자)</string>
+
+    <!--    auth/nickname_input    -->
+    <string name="nickname_welcome_title">반가워요!</string>
+    <string name="nickname_input_title">닉네임을 입력해주세요.</string>
+    <string name="nickname_input_placeholder">닉네임을 입력해주세요</string>
+
+    <!--    auth/club_code_input    -->
+    <string name="club_code_title_1">동아리/학과의</string>
+    <string name="club_code_title_2">고유 번호를 입력해주세요.</string>
+    <string name="club_code_error_message">고유 번호가 일치하지 않습니다.</string>
+    <string name="club_code_confirm_button">확인하기</string>
+
     <!--    home    -->
     <string name="current_whos_in_top">지금 %1$s의</string>
     <string name="current_whos_in_bottom">재실자는?</string>

composeApp/src/commonMain/kotlin/org/whosin/client/App.kt

@@ -2,14 +2,12 @@ package org.whosin.client
 
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.statusBarsPadding
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.navigation.compose.rememberNavController
 import org.jetbrains.compose.ui.tooling.preview.Preview
 import org.whosin.client.core.navigation.WhosInNavGraph
 import ui.theme.WhosInTheme
-import whosinclient.composeapp.generated.resources.Res
-import whosinclient.composeapp.generated.resources.compose_multiplatform
 
 
 @Composable

composeApp/src/commonMain/kotlin/org/whosin/client/core/navigation/Route.kt

@@ -7,9 +7,30 @@ sealed interface Route {
     @Serializable
     data object AuthGraph: Route
 
+    @Serializable
+    data object Splash: Route
+
     @Serializable
     data object Login: Route
 
+    @Serializable
+    data object FindPassword: Route
+
+    @Serializable
+    data object Signup: Route
+
+    @Serializable
+    data object EmailVerification: Route
+
+    @Serializable
+    data object PasswordInput: Route
+
+    @Serializable
+    data object NicknameInput: Route
+
+    @Serializable
+    data object ClubCodeInput: Route
+
     /* 메인 화면 */
     @Serializable
     data object Home: Route

composeApp/src/commonMain/kotlin/org/whosin/client/core/navigation/WhosInNavGraph.kt

@@ -6,7 +6,14 @@ import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.navigation
-import org.whosin.client.presentation.auth.LoginScreen
+import org.whosin.client.presentation.auth.clubcode.ClubCodeInputScreen
+import org.whosin.client.presentation.auth.login.EmailVerificationScreen
+import org.whosin.client.presentation.auth.login.LoginScreen
+import org.whosin.client.presentation.auth.login.NicknameInputScreen
+import org.whosin.client.presentation.auth.login.FindPasswordScreen
+import org.whosin.client.presentation.auth.login.PasswordInputScreen
+import org.whosin.client.presentation.auth.login.SignupScreen
+import org.whosin.client.presentation.auth.login.SplashScreen
 import org.whosin.client.presentation.home.HomeScreen
 import org.whosin.client.presentation.mypage.MyPageScreen
 
@@ -21,13 +28,95 @@ fun WhosInNavGraph(
     ) {
         /* 인증,인가 화면들을 위한 별도의 graph */
         navigation<Route.AuthGraph>(
-            startDestination = Route.Login,
+            startDestination = Route.Splash,
         ) {
+            composable<Route.Splash> {
+                SplashScreen(
+                    modifier = modifier,
+                    onNavigateToLogin = {
+                        navController.navigate(Route.Login) {
+                            popUpTo(Route.Splash) { inclusive = true }
+                        }
+                    }
+                )
+            }
+
             composable<Route.Login> {
                 LoginScreen(
                     modifier = modifier,
                     onNavigateToHome = {
                         navController.navigate(Route.Home)
+                    },
+                    onNavigateToFindPassword = {
+                        navController.navigate(Route.FindPassword)
+                    },
+                    onNavigateToSignup = {
+                        navController.navigate(Route.Signup)
+                    }
+                )
+            }
+
+            composable<Route.FindPassword> {
+                FindPasswordScreen(
+                    modifier = modifier,
+                    onNavigateBack = { navController.navigateUp() },
+                    onPasswordResetComplete = {
+                        navController.navigate(Route.Login) {
+                            popUpTo(Route.FindPassword) { inclusive = true }
+                        }
+                    }
+                )
+            }
+
+            composable<Route.Signup> {
+                SignupScreen(
+                    modifier = modifier,
+                    onNavigateBack = { navController.navigateUp() },
+                    onNavigateToEmailVerification = { email ->
+                        navController.navigate(Route.EmailVerification)
+                    }
+                )
+            }
+
+            composable<Route.EmailVerification> { backStackEntry ->
+
+                EmailVerificationScreen(
+                    modifier = modifier,
+                    onNavigateBack = { navController.navigateUp() },
+                    onVerificationComplete = {
+                        navController.navigate(Route.PasswordInput)
+                    }
+                )
+            }
+
+            composable<Route.PasswordInput> {
+                PasswordInputScreen(
+                    modifier = modifier,
+                    onNavigateBack = { navController.navigateUp() },
+                    onPasswordComplete = { password, confirmPassword ->
+                        navController.navigate(Route.NicknameInput)
+                    }
+                )
+            }
+
+            composable<Route.NicknameInput> {
+                NicknameInputScreen(
+                    modifier = modifier,
+                    onNavigateBack = { navController.navigateUp() },
+                    onNavigateToClubCode = {
+                        navController.navigate(Route.ClubCodeInput)
+                    }
+                )
+            }
+
+            composable<Route.ClubCodeInput> {
+                ClubCodeInputScreen(
+                    modifier = modifier,
+                    onNavigateBack = { navController.navigateUp() },
+                    onNavigateToHome = {
+                        navController.navigate(Route.Home) {
+                            popUpTo(Route.AuthGraph) { inclusive = true }
+                        }
                     }
                 )
             }

composeApp/src/commonMain/kotlin/org/whosin/client/di/DIModules.kt

@@ -11,7 +11,7 @@ import org.whosin.client.data.repository.DummyRepository
 import org.whosin.client.data.repository.ClubRepository
 import org.whosin.client.data.repository.MemberRepository
 import org.whosin.client.presentation.dummy.DummyViewModel
-import org.whosin.client.presentation.auth.LoginViewModel
+import org.whosin.client.presentation.auth.login.viewmodel.LoginViewModel
 import org.whosin.client.presentation.home.HomeViewModel
 import org.whosin.client.presentation.mypage.MyPageViewModel