diff --git a/feature/auth/src/main/java/com/wap/wapp/feature/auth/signin/SignInScreen.kt b/feature/auth/src/main/java/com/wap/wapp/feature/auth/signin/SignInScreen.kt new file mode 100644 index 00000000..d559a7bf --- /dev/null +++ b/feature/auth/src/main/java/com/wap/wapp/feature/auth/signin/SignInScreen.kt @@ -0,0 +1,128 @@ +package com.wap.wapp.feature.auth.signin + +import androidx.compose.foundation.Image +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +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.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.Surface +import androidx.compose.material.Text +import androidx.compose.material3.ButtonDefaults +import androidx.compose.material3.ElevatedButton +import androidx.compose.material3.Icon +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import com.wap.designsystem.WappTheme +import com.wap.wapp.core.designresource.R + +@Composable +fun SignInScreen() { + WappTheme { + Surface( + modifier = Modifier.fillMaxSize(), + color = WappTheme.colors.backgroundBlack, + ) { + Column( + modifier = Modifier.fillMaxWidth(), + ) { + Spacer(modifier = Modifier.height(32.dp)) + Image( + modifier = Modifier + .align(Alignment.CenterHorizontally) + .size(width = 230.dp, height = 230.dp), + painter = painterResource(id = R.drawable.ic_white_cat), + contentDescription = "WAPP ICON", + ) + + Row( + modifier = Modifier.align(Alignment.CenterHorizontally), + ) { + Column { + Spacer(modifier = Modifier.height(40.dp)) + Text( + text = "WAPP", + style = WappTheme.typography.titleBold, + fontSize = 48.sp, + color = WappTheme.colors.white, + ) + } + Text( + text = "WAPP", + fontSize = 48.sp, + style = WappTheme.typography.titleBold, + color = WappTheme.colors.yellow, + ) + } + + Spacer(modifier = Modifier.height(32.dp)) + + ElevatedButton( + modifier = Modifier + .align(Alignment.CenterHorizontally) + .fillMaxWidth() + .padding(horizontal = 16.dp), + onClick = { + // TODO + }, + shape = RoundedCornerShape(10.dp), + ) { + Icon( + painter = painterResource(id = R.drawable.ic_github), + contentDescription = "Github SignIn Icon", + modifier = Modifier.size(40.dp), + tint = WappTheme.colors.black, + ) + Spacer(modifier = Modifier.width(16.dp)) + Text( + text = "Github로 로그인 하기", + style = WappTheme.typography.contentMedium, + ) + } + + Spacer(modifier = Modifier.height(12.dp)) + + ElevatedButton( + modifier = Modifier + .align(Alignment.CenterHorizontally) + .fillMaxWidth() + .padding(horizontal = 16.dp), + onClick = {}, + colors = ButtonDefaults.elevatedButtonColors( + containerColor = WappTheme.colors.yellow, + contentColor = WappTheme.colors.white, + ), + shape = RoundedCornerShape(10.dp), + ) { + Icon( + painter = painterResource(id = R.drawable.ic_balloon), + contentDescription = "Github SignIn Icon", + modifier = Modifier.size(40.dp), + ) + Spacer(modifier = Modifier.width(16.dp)) + Text( + text = "비회원으로 둘러보기", + style = WappTheme.typography.contentMedium, + color = WappTheme.colors.white, + ) + } + } + } + } +} + +@Preview +@Composable +fun previewSignInScreen() { + SignInScreen() +} diff --git a/feature/auth/src/main/java/com/wap/wapp/feature/auth/signup/SignUpScreen.kt b/feature/auth/src/main/java/com/wap/wapp/feature/auth/signup/SignUpScreen.kt new file mode 100644 index 00000000..9ffa55a7 --- /dev/null +++ b/feature/auth/src/main/java/com/wap/wapp/feature/auth/signup/SignUpScreen.kt @@ -0,0 +1,110 @@ +package com.wap.wapp.feature.auth.signup + +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Button +import androidx.compose.material3.ButtonDefaults +import androidx.compose.material3.Divider +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.ModalBottomSheet +import androidx.compose.material3.OutlinedTextField +import androidx.compose.material3.Text +import androidx.compose.material3.rememberModalBottomSheetState +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.saveable.rememberSaveable +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.wap.designsystem.WappTheme + +@OptIn(ExperimentalMaterial3Api::class) +@Composable +fun signUpBottomSheet() { + val sheetState = rememberModalBottomSheetState() + var isSheetOpen by rememberSaveable { + mutableStateOf(false) + } + + if (isSheetOpen) { + ModalBottomSheet( + sheetState = sheetState, + onDismissRequest = { isSheetOpen = false }, + ) { + Column( + modifier = Modifier.padding(16.dp), + ) { + Text( + modifier = Modifier.align(Alignment.CenterHorizontally), + text = "로그인", + style = WappTheme.typography.contentMedium, + color = WappTheme.colors.white, + ) + + Spacer(modifier = Modifier.height(16.dp)) + + Text( + text = "이메일", + color = WappTheme.colors.white, + style = WappTheme.typography.labelRegular, + ) + var filledText = "" + OutlinedTextField( + modifier = Modifier.fillMaxWidth(), + value = filledText, + onValueChange = { filledText = it }, + placeholder = { + Text(text = "Github Email") + }, + ) + + Spacer(modifier = Modifier.height(16.dp)) + + Button( + onClick = { }, + modifier = Modifier.fillMaxWidth(), + colors = ButtonDefaults.buttonColors( + contentColor = WappTheme.colors.white, + containerColor = WappTheme.colors.gray1, + ), + shape = RoundedCornerShape(10.dp), + ) { + Text( + text = "완료", + style = WappTheme.typography.contentMedium, + ) + } + + Spacer(modifier = Modifier.height(16.dp)) + + Divider( + color = WappTheme.colors.white, + thickness = 1.dp, + ) + Text( + modifier = Modifier.fillMaxWidth(), + textAlign = TextAlign.Center, + text = "비밀번호를 잊어버리셨나요?", + style = WappTheme.typography.captionMedium, + color = WappTheme.colors.yellow, + ) + } + } + } +} + +@Preview +@Composable +fun previewSignUpScreen() { + WappTheme { + signUpBottomSheet() + } +}