From fc04b47768ad4dade843833f71f209cb49a3264c Mon Sep 17 00:00:00 2001 From: LEE YOU BIN Date: Thu, 2 Jan 2025 09:20:24 +0900 Subject: [PATCH] =?UTF-8?q?[feature/#1011]=20social=20account=20UI=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../certificate/CertificationScreen.kt | 4 +- .../socialaccount/SocialAccountScreen.kt | 75 ++++++++++++++++--- ..._process.xml => ic_auth_process_first.xml} | 0 .../res/drawable/ic_auth_process_second.xml | 25 +++++++ 4 files changed, 92 insertions(+), 12 deletions(-) rename app/src/main/res/drawable/{ic_auth_process.xml => ic_auth_process_first.xml} (100%) create mode 100644 app/src/main/res/drawable/ic_auth_process_second.xml diff --git a/app/src/main/java/org/sopt/official/feature/auth/feature/certificate/CertificationScreen.kt b/app/src/main/java/org/sopt/official/feature/auth/feature/certificate/CertificationScreen.kt index 8786c08fc..7301b2219 100644 --- a/app/src/main/java/org/sopt/official/feature/auth/feature/certificate/CertificationScreen.kt +++ b/app/src/main/java/org/sopt/official/feature/auth/feature/certificate/CertificationScreen.kt @@ -51,7 +51,7 @@ import androidx.lifecycle.compose.LocalLifecycleOwner import androidx.lifecycle.flowWithLifecycle import org.sopt.official.R import org.sopt.official.R.drawable.ic_auth_memeber_error -import org.sopt.official.R.drawable.ic_auth_process +import org.sopt.official.R.drawable.ic_auth_process_first import org.sopt.official.common.view.toast import org.sopt.official.designsystem.Blue500 import org.sopt.official.designsystem.BlueAlpha100 @@ -192,7 +192,7 @@ private fun TopBar( horizontalAlignment = Alignment.CenterHorizontally ) { Image( - painter = painterResource(id = ic_auth_process), + painter = painterResource(id = ic_auth_process_first), contentDescription = "상단 이미지" ) Spacer(modifier = Modifier.height(11.dp)) diff --git a/app/src/main/java/org/sopt/official/feature/auth/feature/socialaccount/SocialAccountScreen.kt b/app/src/main/java/org/sopt/official/feature/auth/feature/socialaccount/SocialAccountScreen.kt index 70bf97b85..9482b5f26 100644 --- a/app/src/main/java/org/sopt/official/feature/auth/feature/socialaccount/SocialAccountScreen.kt +++ b/app/src/main/java/org/sopt/official/feature/auth/feature/socialaccount/SocialAccountScreen.kt @@ -25,8 +25,10 @@ package org.sopt.official.feature.auth.feature.socialaccount import androidx.compose.foundation.Image +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth @@ -34,33 +36,45 @@ 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.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import org.sopt.official.R +import org.sopt.official.R.drawable.ic_auth_process_second import org.sopt.official.designsystem.Gray10 +import org.sopt.official.designsystem.Gray100 +import org.sopt.official.designsystem.Gray60 import org.sopt.official.designsystem.SoptTheme +import org.sopt.official.designsystem.White import org.sopt.official.feature.auth.component.AuthButton @Composable -fun SocialAccountScreen( +internal fun SocialAccountRoute( + onGoogleLoginCLick: () -> Unit +) { + SocialAccountScreen( + onGoogleLoginCLick = onGoogleLoginCLick + ) +} + +@Composable +private fun SocialAccountScreen( onGoogleLoginCLick: () -> Unit ) { Column( modifier = Modifier .fillMaxSize() - .padding(horizontal = 16.dp) + .padding(horizontal = 16.dp), + horizontalAlignment = Alignment.CenterHorizontally ) { Spacer(modifier = Modifier.height(48.dp)) - Text( - text = "새로 연결할\n소셜 계정을 선택해주세요", - color = Gray10, - style = SoptTheme.typography.title24SB, - ) - Spacer(modifier = Modifier.height(36.dp)) + TopBar() + Spacer(modifier = Modifier.height(66.dp)) AuthButton( - padding = PaddingValues(vertical = 13.dp), + padding = PaddingValues(vertical = 12.dp), onClick = onGoogleLoginCLick, modifier = Modifier.fillMaxWidth() ) { @@ -70,13 +84,54 @@ fun SocialAccountScreen( modifier = Modifier.padding(end = 8.dp) ) Text( - text = "Google 계정 연결하기", + text = "Google로 로그인", style = SoptTheme.typography.label16SB ) } } } +@Composable +private fun TopBar( + modifier: Modifier = Modifier +) { + Column( + modifier = modifier, + horizontalAlignment = Alignment.CenterHorizontally + ) { + Image( + painter = painterResource(id = ic_auth_process_second), + contentDescription = "상단 이미지" + ) + Spacer(modifier = Modifier.height(11.dp)) + Row(horizontalArrangement = Arrangement.spacedBy(66.dp)) { + Text( + text = "SOPT 회원인증", + color = Gray100, + style = SoptTheme.typography.label12SB + ) + Text( + text = "소셜 계정 연동", + color = White, + style = SoptTheme.typography.label12SB + ) + } + Spacer(modifier = Modifier.height(54.dp)) + Text( + text = "소셜 계정연동", + color = Gray10, + style = SoptTheme.typography.heading24B + ) + Spacer(modifier = Modifier.height(14.dp)) + Text( + text = "반갑습니다 ㅇㅇㅇ님\n소셜로그인을 진행하여 회원가입을 완료해주세요", + color = Gray60, + style = SoptTheme.typography.label12SB, + textAlign = TextAlign.Center + ) + } +} + @Preview(showBackground = true) @Composable private fun ChangeAccountPreview() { diff --git a/app/src/main/res/drawable/ic_auth_process.xml b/app/src/main/res/drawable/ic_auth_process_first.xml similarity index 100% rename from app/src/main/res/drawable/ic_auth_process.xml rename to app/src/main/res/drawable/ic_auth_process_first.xml diff --git a/app/src/main/res/drawable/ic_auth_process_second.xml b/app/src/main/res/drawable/ic_auth_process_second.xml new file mode 100644 index 000000000..e644034b2 --- /dev/null +++ b/app/src/main/res/drawable/ic_auth_process_second.xml @@ -0,0 +1,25 @@ + + + + + + +