[feature/#1011] social account UI 구현

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))

app/src/main/java/org/sopt/official/feature/auth/feature/socialaccount/SocialAccountScreen.kt

@@ -25,42 +25,56 @@
 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
 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() {

app/src/main/res/drawable/ic_auth_process_second.xml

@@ -0,0 +1,25 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="161dp"
+    android:height="22dp"
+    android:viewportWidth="161"
+    android:viewportHeight="22">
+  <path
+      android:pathData="M19,11h123v1h-123z"
+      android:fillColor="#346FFA"/>
+  <path
+      android:pathData="M11,11m-11,0a11,11 0,1 1,22 0a11,11 0,1 1,-22 0"
+      android:fillColor="#346FFA"/>
+  <path
+      android:strokeWidth="1"
+      android:pathData="M5.67,11.07L9.22,14.67L16.33,8.67"
+      android:strokeLineJoin="round"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M150,11m-11,0a11,11 0,1 1,22 0a11,11 0,1 1,-22 0"
+      android:fillColor="#346FFA"/>
+  <path
+      android:pathData="M147.29,13.79C149.06,12.1 151.36,10.56 151.36,9.13C151.36,8.2 150.77,7.54 149.93,7.54C149.27,7.54 148.61,8 148.31,8.68L147.07,8.11C147.57,7 148.76,6.2 149.93,6.2C151.63,6.2 152.8,7.42 152.8,9.13C152.8,10.97 150.95,12.47 149.37,13.79H152.93V15.05H147.41L147.29,13.79Z"
+      android:fillColor="#ffffff"/>
+</vector>