[feature/#928] make Auth Screen UI

sopt-makers · Nov 7, 2024 · 2d63166 · 2d63166
1 parent 4c2c683
commit 2d63166
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 9 deletions.
diff --git a/app/src/main/java/org/sopt/official/feature/auth/AuthActivity.kt b/app/src/main/java/org/sopt/official/feature/auth/AuthActivity.kt
@@ -42,9 +42,16 @@ import androidx.compose.animation.fadeIn
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
 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.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -53,6 +60,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -76,7 +84,11 @@ import org.sopt.official.common.util.setOnAnimationEndListener
 import org.sopt.official.common.util.setOnSingleClickListener
 import org.sopt.official.common.util.viewBinding
 import org.sopt.official.databinding.ActivityAuthBinding
+import org.sopt.official.designsystem.Gray300
+import org.sopt.official.designsystem.Gray700
 import org.sopt.official.designsystem.SoptTheme
+import org.sopt.official.designsystem.White
+import org.sopt.official.feature.auth.component.AuthButton
 import org.sopt.official.feature.auth.component.AuthTextWithButton
 import org.sopt.official.feature.home.HomeActivity
 import org.sopt.official.network.model.response.OAuthToken
@@ -218,17 +230,15 @@ class AuthActivity : AppCompatActivity() {
             showAuthBottom = true
         }
 
-        Box(
-            modifier = Modifier.fillMaxSize()
-        ) {
+        Box(modifier = Modifier.fillMaxSize()) {
             Column(
                 modifier = Modifier.fillMaxSize(),
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
                 Spacer(modifier = Modifier.weight(1f))
                 Image(
                     painter = painterResource(id = R.drawable.img_logo),
-                    contentDescription = "sopt_logo",
+                    contentDescription = "솝트 로고",
                     modifier = Modifier.offset(y = offsetY.value.dp)
                 )
                 Spacer(modifier = Modifier.weight(1f))
@@ -238,11 +248,81 @@ class AuthActivity : AppCompatActivity() {
                 enter = fadeIn(initialAlpha = 0.3f),
                 modifier = Modifier.align(Alignment.BottomCenter)
             ) {
-                Column {
-                    AuthTextWithButton(text = "로그인이 안 되나요?")
-                    AuthTextWithButton(text = "나중에 로그인할래요.")
-                }
+                AuthBottom()
+            }
+        }
+    }
+
+    @Composable
+    private fun AuthBottom() {
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            AuthButton(
+                paddingVertical = 12.dp,
+                onClick = {},
+                shape = RoundedCornerShape(10.dp),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 20.dp)
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.ic_auth_google),
+                    contentDescription = "구글 로고",
+                    modifier = Modifier.padding(end = 4.dp)
+                )
+                Text(
+                    text = "Google로 로그인",
+                    style = SoptTheme.typography.label16SB
+                )
             }
+            Spacer(modifier = Modifier.height(16.dp))
+            AuthTextWithButton(text = "로그인이 안 되나요?")
+            Spacer(modifier = Modifier.height(44.dp))
+            AuthDivider()
+            Spacer(modifier = Modifier.height(16.dp))
+            AuthButton(
+                paddingVertical = 12.dp,
+                onClick = {},
+                shape = RoundedCornerShape(10.dp),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 20.dp),
+                containerColor = Gray700,
+                contentColor = White
+            ) {
+                Text(
+                    text = "SOPT 회원가입",
+                    style = SoptTheme.typography.label16SB
+                )
+            }
+            Spacer(modifier = Modifier.height(16.dp))
+            AuthTextWithButton(text = "나중에 로그인할래요.")
+            Spacer(modifier = Modifier.height(28.dp))
+        }
+    }
+
+    @Composable
+    private fun AuthDivider() {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 20.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            HorizontalDivider(
+                thickness = 0.6.dp,
+                color = Gray300,
+                modifier = Modifier.weight(1f)
+            )
+            Text(
+                text = "또는",
+                color = Gray300,
+                modifier = Modifier.padding(horizontal = 8.dp)
+            )
+            HorizontalDivider(
+                thickness = 0.6.dp,
+                color = Gray300,
+                modifier = Modifier.weight(1f)
+            )
         }
     }
 
@@ -255,7 +335,7 @@ class AuthActivity : AppCompatActivity() {
 
     @Preview(showBackground = true)
     @Composable
-    fun AuthScreenPreview() {
+    private fun AuthScreenPreview() {
         SoptTheme {
             AuthScreen()
         }

diff --git a/app/src/main/res/drawable/ic_auth_google.xml b/app/src/main/res/drawable/ic_auth_google.xml
@@ -0,0 +1,22 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="21dp"
+    android:height="20dp"
+    android:viewportWidth="21"
+    android:viewportHeight="20">
+  <path
+      android:pathData="M18.42,10.188C18.42,9.603 18.368,9.04 18.27,8.5H10.5V11.691H14.94C14.749,12.722 14.168,13.597 13.294,14.182V16.251H15.96C17.52,14.815 18.42,12.7 18.42,10.188Z"
+      android:fillColor="#3D82F0"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M10.5,18.249C12.728,18.249 14.595,17.51 15.96,16.251L13.294,14.18C12.555,14.675 11.61,14.967 10.5,14.967C8.352,14.967 6.533,13.516 5.884,11.566H3.127V13.704C4.485,16.4 7.275,18.249 10.5,18.249Z"
+      android:fillColor="#31A752"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M5.884,11.567C5.719,11.072 5.625,10.543 5.625,9.999C5.625,9.456 5.719,8.927 5.884,8.432V6.294H3.127C2.569,7.408 2.25,8.668 2.25,9.999C2.25,11.33 2.569,12.59 3.127,13.704L5.884,11.567Z"
+      android:fillColor="#F9BA00"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M10.5,5.031C11.711,5.031 12.799,5.447 13.653,6.265L16.02,3.899C14.591,2.567 12.724,1.749 10.5,1.749C7.275,1.749 4.485,3.598 3.127,6.295L5.884,8.432C6.533,6.482 8.352,5.031 10.5,5.031Z"
+      android:fillColor="#E64234"
+      android:fillType="evenOdd"/>
+</vector>