Merge pull request #14 from DACOS-SOLUX-Hackathon-Team5/feature/#13-a…

…uth-ui

[Feature/#13] : 스플래시&로그인&회원가입2 페이지 구현

app/src/main/AndroidManifest.xml

@@ -18,9 +18,9 @@
         android:allowBackup="true"
         android:dataExtractionRules="@xml/data_extraction_rules"
         android:fullBackupContent="@xml/backup_rules"
-        android:icon="@mipmap/ic_launcher"
+        android:icon="@mipmap/ic_alddeul_logo_foreground"
         android:label="@string/app_name"
-        android:roundIcon="@mipmap/ic_launcher_round"
+        android:roundIcon="@mipmap/ic_alddeul_logo_round"
         android:supportsRtl="true"
         android:theme="@style/Theme.AlddeulBabsang"
         android:usesCleartextTraffic="true"

app/src/main/java/com/hackathon/alddeul_babsang/core_ui/component/AlddeulButton.kt

@@ -1,31 +1,49 @@
 package com.hackathon.alddeul_babsang.core_ui.component
 
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import com.hackathon.alddeul_babsang.core_ui.theme.Orange900
 import com.hackathon.alddeul_babsang.core_ui.theme.White
 import com.hackathon.alddeul_babsang.core_ui.theme.title4Bold
 
 @Composable
 fun AlddeulButton(
     text: Int,
+    textColor: Color = White,
+    color: Color = Orange900,
+    stroke: Color = Orange900,
     onClick: () -> Unit
 ) {
     Button(
         modifier = Modifier
-            .fillMaxWidth(),
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(40.dp)),
+        border = BorderStroke(
+            width = 1.dp,
+            color = stroke
+        ),
+        colors = ButtonDefaults.buttonColors(
+            containerColor = color
+        ),
         contentPadding = PaddingValues(vertical = 19.dp),
         onClick = { onClick() }
     ) {
         Text(
             text = stringResource(id = text),
             style = title4Bold,
-            color = White
+            color = textColor
         )
     }
 }

app/src/main/java/com/hackathon/alddeul_babsang/core_ui/component/AuthTextField.kt

@@ -1,36 +1,60 @@
 package com.hackathon.alddeul_babsang.core_ui.component
 
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
 import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import com.hackathon.alddeul_babsang.core_ui.theme.Gray300
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.hackathon.alddeul_babsang.core_ui.theme.Gray200
 import com.hackathon.alddeul_babsang.core_ui.theme.Orange900
-import com.hackathon.alddeul_babsang.core_ui.theme.head4Bold
+import com.hackathon.alddeul_babsang.core_ui.theme.Regular
+import com.hackathon.alddeul_babsang.core_ui.theme.body1Regular
 
 @Composable
 fun AuthTextField(
+    modifier: Modifier = Modifier,
     value: String,
     onValueChange: (String) -> Unit,
-    placeholderText: String
+    placeholderText: String,
+    textAlign: TextAlign = TextAlign.Start
 ) {
     TextField(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 18.dp),
         value = value,
         onValueChange = onValueChange,
         placeholder = {
             Text(
+                modifier = Modifier.fillMaxWidth(),
                 text = placeholderText,
-                style = head4Bold,
-                color = Gray300,
+                style = body1Regular,
+                color = Gray200,
+                textAlign = textAlign
             )
         },
+        textStyle = body1Regular.copy(textAlign = textAlign),
         colors = TextFieldDefaults.colors(
-            focusedContainerColor = Color.White, // 포커스된 상태에서 배경색을 흰색으로 설정
-            unfocusedContainerColor = Color.White, // 비포커스 상태에서 배경색을 흰색으로 설정
-            cursorColor = Color.Black,
+            focusedContainerColor = Color.Transparent,
+            unfocusedContainerColor = Color.Transparent,
             focusedIndicatorColor = Orange900,
-            unfocusedIndicatorColor = Gray300
+            unfocusedIndicatorColor = Regular
         )
     )
 }
+
+@Preview(showBackground = true)
+@Composable
+fun AuthTextFieldPreview() {
+    AuthTextField(
+        value = "",
+        onValueChange = {},
+        placeholderText = "아이디",
+    )
+}

app/src/main/java/com/hackathon/alddeul_babsang/core_ui/theme/Color.kt

@@ -39,6 +39,9 @@ val Blue = Color(0xFFFF5A82EA)
 val Yellow = Color(0xFFFAB935)
 val Red = Color(0xFFFF0400)
 val Pink = Color(0xFFFF8886)
+val Peach200 = Color(0xFFFECC90)
+val Peach100 = Color(0xFFFFEFD3)
+val Peach50 = Color(0xFFFFFBF6)
 val White = Color(0xFFFFFFFF)
 
 // Font

app/src/main/java/com/hackathon/alddeul_babsang/core_ui/theme/Type.kt

@@ -23,6 +23,7 @@ val Typography = Typography(
 val pretendardBold = FontFamily(Font(R.font.pretendard_bold, FontWeight.Bold))
 val pretendardSemiBold = FontFamily(Font(R.font.pretendard_semibold, FontWeight.SemiBold))
 val pretendardRegular = FontFamily(Font(R.font.pretendard_regular, FontWeight.Normal))
+val bmDohyeon = FontFamily(Font(R.font.bm_dohyeon, FontWeight.Normal))
 
 // Head1
 val head1Bold =
@@ -345,3 +346,9 @@ val body7Regular =
         fontSize = 9.sp,
         lineHeight = 16.sp,
     )
+
+// BmDohyeon
+val bmDohyeonRegular = TextStyle(
+    fontFamily = bmDohyeon,
+    fontSize = 36.sp,
+)

app/src/main/java/com/hackathon/alddeul_babsang/presentation/auth/navigation/AuthNavGraph.kt

@@ -0,0 +1,31 @@
+package com.hackathon.alddeul_babsang.presentation.auth.navigation
+
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.compose.composable
+import com.hackathon.alddeul_babsang.presentation.auth.screen.LoginRoute
+import com.hackathon.alddeul_babsang.presentation.auth.screen.SignUp1Route
+import com.hackathon.alddeul_babsang.presentation.auth.screen.SignUp2Route
+
+fun NavGraphBuilder.loginNavGraph(
+    navigator: AuthNavigator
+) {
+    composable(route = "login") {
+        LoginRoute(navigator)
+    }
+}
+
+fun NavGraphBuilder.signUp1NavGraph(
+    navigator: AuthNavigator
+) {
+    composable(route = "signUp1") {
+        SignUp1Route(navigator)
+    }
+}
+
+fun NavGraphBuilder.signUp2NavGraph(
+    navigator: AuthNavigator
+) {
+    composable(route = "signUp2") {
+        SignUp2Route(navigator)
+    }
+}

app/src/main/java/com/hackathon/alddeul_babsang/presentation/auth/navigation/AuthNavigator.kt

@@ -0,0 +1,31 @@
+package com.hackathon.alddeul_babsang.presentation.auth.navigation
+
+import androidx.navigation.NavHostController
+
+class AuthNavigator(
+    val navController: NavHostController
+) {
+    fun navigateLogin() {
+        navController.navigate(route = "login")
+    }
+
+    fun navigateBack() {
+        navController.popBackStack()
+    }
+
+    fun navigateMain() {
+        navController.navigate(route = "main") {
+            popUpTo(0) {
+                inclusive = true
+            }
+        }
+    }
+
+    fun navigateSignUp1() {
+        navController.navigate(route = "signup1")
+    }
+
+    fun navigateSignUp2() {
+        navController.navigate(route = "signup2")
+    }
+}

app/src/main/java/com/hackathon/alddeul_babsang/presentation/auth/screen/LoginScreen.kt

@@ -0,0 +1,141 @@
+package com.hackathon.alddeul_babsang.presentation.auth.screen
+
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.SideEffect
+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.graphics.Brush
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
+import com.hackathon.alddeul_babsang.R
+import com.hackathon.alddeul_babsang.core_ui.component.AlddeulButton
+import com.hackathon.alddeul_babsang.core_ui.component.AuthTextField
+import com.hackathon.alddeul_babsang.core_ui.theme.AlddeulBabsangTheme
+import com.hackathon.alddeul_babsang.core_ui.theme.Gray100
+import com.hackathon.alddeul_babsang.core_ui.theme.Gray200
+import com.hackathon.alddeul_babsang.core_ui.theme.Orange900
+import com.hackathon.alddeul_babsang.core_ui.theme.Peach100
+import com.hackathon.alddeul_babsang.core_ui.theme.Peach50
+import com.hackathon.alddeul_babsang.core_ui.theme.White
+import com.hackathon.alddeul_babsang.core_ui.theme.bmDohyeonRegular
+import com.hackathon.alddeul_babsang.presentation.auth.navigation.AuthNavigator
+import com.hackathon.alddeul_babsang.util.toast
+import kotlin.contracts.contract
+
+@Composable
+fun LoginRoute(
+    navigator: AuthNavigator
+) {
+    val systemUiController = rememberSystemUiController()
+    val keyboardController = LocalSoftwareKeyboardController.current
+
+    SideEffect {
+        systemUiController.setStatusBarColor(
+            color = Peach100
+        )
+    }
+
+    LoginScreen(
+        onLoginClick = {
+            keyboardController?.hide()
+            navigator.navigateMain()
+        },
+        onSignUpClick = { navigator.navigateSignUp1() }
+    )
+}
+
+@Composable
+fun LoginScreen(
+    onLoginClick: () -> Unit = {},
+    onSignUpClick: () -> Unit = {}
+) {
+    val verticalGradient = Brush.verticalGradient(
+        colors = listOf(Peach50, White),
+        startY = 0.0f,
+        endY = 9000f,
+    )
+    var id by remember { mutableStateOf("") }
+    var password by remember { mutableStateOf("") }
+    val context = LocalContext.current
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(verticalGradient)
+    ) {
+        Image(
+            modifier = Modifier.fillMaxWidth(),
+            painter = painterResource(id = R.drawable.ic_login_logo),
+            contentDescription = null
+        )
+        Text(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 10.dp),
+            text = stringResource(R.string.tv_login_title),
+            style = bmDohyeonRegular,
+            color = Orange900,
+            textAlign = TextAlign.Center
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(16.dp)
+        ) {
+            AuthTextField(
+                value = id,
+                onValueChange = { id = it },
+                placeholderText = stringResource(R.string.tv_login_id_placeholder)
+            )
+            Spacer(modifier = Modifier.height(16.dp))
+            AuthTextField(
+                value = password,
+                onValueChange = { password = it },
+                placeholderText = stringResource(R.string.tv_login_password_placeholder)
+            )
+            Spacer(modifier = Modifier.weight(1f))
+            AlddeulButton(text = R.string.btn_login) {
+                if (id.isNotBlank() && password.isNotBlank()) {
+                    onLoginClick()
+                } else {
+                    context.toast(context.getString(R.string.toast_login_failure))
+                }
+            }
+            Spacer(modifier = Modifier.height(10.dp))
+            AlddeulButton(
+                text = R.string.btn_login_signup,
+                textColor = Gray200,
+                color = White,
+                stroke = Gray100
+            ) {
+                onSignUpClick()
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun LoginScreenPreview() {
+    AlddeulBabsangTheme {
+        LoginScreen()
+    }
+}