[PC-292] 로그인 화면, 번호 인증 화면 ui 구현

build-logic/src/main/java/com/puzzle/build/logic/configure/AndroidComposes.kt

@@ -29,6 +29,7 @@ internal fun Project.configureAndroidCompose() {
             add("implementation", libs.findLibrary("androidx.compose.material3").get())
             add("implementation", libs.findLibrary("androidx.compose.ui").get())
             add("implementation", libs.findLibrary("androidx.compose.ui.tooling.preview").get())
+            add("implementation", libs.findLibrary("androidx.compose.foundation").get())
             add("debugImplementation", libs.findLibrary("androidx.compose.ui.tooling").get())
         }
     }

core/data/src/main/java/com/puzzle/data/di/DataModule.kt

@@ -2,8 +2,10 @@ package com.puzzle.data.di
 
 import com.puzzle.data.repository.AuthRepositoryImpl
 import com.puzzle.data.repository.TermsRepositoryImpl
+import com.puzzle.data.repository.VerificationCodeRepositoryImpl
 import com.puzzle.domain.repository.AuthRepository
 import com.puzzle.domain.repository.TermsRepository
+import com.puzzle.domain.repository.VerificationCodeRepository
 import dagger.Binds
 import dagger.Module
 import dagger.hilt.InstallIn
@@ -26,4 +28,10 @@ abstract class DataModule {
     abstract fun bindsTermsRepository(
         termsRepositoryImpl: TermsRepositoryImpl,
     ): TermsRepository
+
+    @Binds
+    @Singleton
+    abstract fun bindsVerificationCodeRepository(
+        verificationCodeRepositoryImpl: VerificationCodeRepositoryImpl,
+    ): VerificationCodeRepository
 }

core/data/src/main/java/com/puzzle/data/repository/VerificationCodeRepositoryImpl.kt

@@ -0,0 +1,14 @@
+package com.puzzle.data.repository
+
+import com.puzzle.domain.repository.VerificationCodeRepository
+import javax.inject.Inject
+
+class VerificationCodeRepositoryImpl @Inject constructor() : VerificationCodeRepository {
+    override suspend fun requestVerificationCode(phoneNumber: String): Boolean {
+        return true
+    }
+
+    override suspend fun verify(code: String): Boolean {
+        return true
+    }
+}

core/designsystem/src/main/java/com/puzzle/designsystem/component/Button.kt

@@ -10,6 +10,7 @@ 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.widthIn
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
@@ -40,7 +41,9 @@ fun PieceSolidButton(
             disabledContainerColor = PieceTheme.colors.light1,
             disabledContentColor = PieceTheme.colors.white,
         ),
-        modifier = modifier.height(52.dp),
+        modifier = modifier
+            .height(52.dp)
+            .widthIn(min = 100.dp),
     ) {
         Text(
             text = label,
@@ -67,7 +70,9 @@ fun PieceOutlinedButton(
             disabledContainerColor = PieceTheme.colors.light1,
             disabledContentColor = PieceTheme.colors.primaryDefault,
         ),
-        modifier = modifier.height(52.dp),
+        modifier = modifier
+            .height(52.dp)
+            .widthIn(min = 100.dp),
     ) {
         Text(
             text = label,
@@ -93,7 +98,9 @@ fun PieceSubButton(
             disabledContainerColor = PieceTheme.colors.light3,
             disabledContentColor = PieceTheme.colors.dark2,
         ),
-        modifier = modifier.height(52.dp),
+        modifier = modifier
+            .height(52.dp)
+            .widthIn(min = 100.dp),
     ) {
         Text(
             text = label,
@@ -120,7 +127,9 @@ fun PieceIconButton(
             disabledContainerColor = PieceTheme.colors.light1,
             disabledContentColor = PieceTheme.colors.white,
         ),
-        modifier = modifier.height(52.dp),
+        modifier = modifier
+            .height(52.dp)
+            .widthIn(min = 100.dp),
     ) {
         Row(
             verticalAlignment = Alignment.CenterVertically,

core/designsystem/src/main/res/drawable/ic_google_login.xml

@@ -0,0 +1,26 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <group>
+    <clip-path
+        android:pathData="M5.722,2L14.61,2A3.556,3.556 0,0 1,18.166 5.556L18.166,14.444A3.556,3.556 0,0 1,14.61 18L5.722,18A3.556,3.556 0,0 1,2.166 14.444L2.166,5.556A3.556,3.556 0,0 1,5.722 2z"/>
+    <path
+        android:pathData="M17.846,10.181C17.846,9.614 17.795,9.069 17.701,8.545H10.166V11.639H14.472C14.286,12.639 13.722,13.487 12.875,14.054V16.061H15.461C16.973,14.669 17.846,12.618 17.846,10.181Z"
+        android:fillColor="#4285F4"
+        android:fillType="evenOdd"/>
+    <path
+        android:pathData="M10.166,18C12.326,18 14.137,17.283 15.46,16.061L12.875,14.054C12.158,14.534 11.242,14.818 10.166,14.818C8.082,14.818 6.318,13.41 5.689,11.519H3.017V13.592C4.333,16.207 7.038,18 10.166,18Z"
+        android:fillColor="#34A853"
+        android:fillType="evenOdd"/>
+    <path
+        android:pathData="M5.69,11.521C5.53,11.041 5.439,10.528 5.439,10.001C5.439,9.474 5.53,8.961 5.69,8.481V6.408H3.017C2.475,7.488 2.166,8.71 2.166,10.001C2.166,11.292 2.475,12.514 3.017,13.594L5.69,11.521Z"
+        android:fillColor="#FBBC05"
+        android:fillType="evenOdd"/>
+    <path
+        android:pathData="M10.166,5.182C11.34,5.182 12.395,5.585 13.224,6.378L15.518,4.084C14.133,2.793 12.322,2 10.166,2C7.038,2 4.333,3.793 3.017,6.407L5.689,8.48C6.318,6.589 8.082,5.182 10.166,5.182Z"
+        android:fillColor="#FF0000"
+        android:fillType="evenOdd"/>
+  </group>
+</vector>

core/designsystem/src/main/res/drawable/ic_kakao_login.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <path
+      android:pathData="M10,15.239C14.418,15.239 18,12.425 18,8.954C18,5.482 14.418,2.668 10,2.668C5.582,2.668 2,5.482 2,8.954C2,11.088 3.354,12.974 5.424,14.11L4.285,17.526L8.199,15.08C8.778,15.184 9.381,15.239 10,15.239Z"
+      android:fillColor="#1B1A2A"
+      android:fillType="evenOdd"/>
+</vector>

core/designsystem/src/main/res/values/strings.xml

@@ -11,6 +11,20 @@
     <string name="same_value_as_me">나와 같은 가치관</string>
     <string name="accept_matching">매칭 수락하기</string>
 
+    <!--Verification-->
+    <string name="verification_subtitle">신뢰도 높은 매칭과 안전한 커뮤니티를 위해\n휴대폰 번호로 인증해 주세요.</string>
+    <string name="verification_submit">확인</string>
+    <string name="verification_next">다음</string>
+    <string name="verification_do_not_share">어떤 경우에도 타인에게 공유하지 마세요</string>
+    <string name="verification_verified">전화번호 인증을 완료했어요</string>
+    <string name="verification_invalid_code">올바른 인증번호가 아니에요</string>
+    <string name="verification_time_expired">유효시간이 지났어요! ‘인증번호 재전송’을 눌러주세요</string>
+    <string name="verification_verifiaction_code">인증번호</string>
+    <string name="verification_resend">인증번호 재전송</string>
+    <string name="verification_request">인증번호 받기</string>
+    <string name="verification_phone_number">휴대폰 번호</string>
+    <string name="verification_invalid_phone_number">올바른 전화번호가 아니에요</string>
+
     <!--Matching Detail-->
     <string name="basicinfo_title" />
     <string name="valuetalk_title">가치관 Talk</string>

core/domain/src/main/java/com/puzzle/domain/repository/VerificationCodeRepository.kt

@@ -0,0 +1,6 @@
+package com.puzzle.domain.repository
+
+interface VerificationCodeRepository {
+    suspend fun requestVerificationCode(phoneNumber: String): Boolean
+    suspend fun verify(code: String): Boolean
+}

feature/auth/src/main/java/com/puzzle/auth/graph/login/LoginScreen.kt

@@ -1,21 +1,42 @@
 package com.puzzle.auth.graph.login
 
 import android.util.Log
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 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.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.runtime.getValue
+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.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.sp
+import androidx.compose.ui.unit.dp
 import com.airbnb.mvrx.compose.collectAsState
 import com.airbnb.mvrx.compose.mavericksViewModel
 import com.kakao.sdk.user.UserApiClient
 import com.puzzle.auth.graph.login.contract.LoginIntent.Navigate
 import com.puzzle.auth.graph.login.contract.LoginState
+import com.puzzle.designsystem.R
+import com.puzzle.designsystem.component.PieceSubCloseTopBar
 import com.puzzle.designsystem.foundation.PieceTheme
 import com.puzzle.navigation.AuthGraph
 import com.puzzle.navigation.AuthGraphDest
@@ -48,29 +69,138 @@ fun LoginScreen(
     state: LoginState,
     loginKakao: () -> Unit,
     navigate: (NavigationEvent) -> Unit,
+    modifier: Modifier = Modifier,
 ) {
     Column(
-        modifier = Modifier
+        modifier = modifier
             .fillMaxSize()
+            .background(PieceTheme.colors.white)
+            .padding(horizontal = 20.dp)
             .clickable {
                 navigate(
                     NavigationEvent.NavigateTo(
-                        route = AuthGraphDest.RegistrationRoute,
+                        route = AuthGraphDest.VerificationRoute,
                         popUpTo = AuthGraph,
                     )
                 )
             },
     ) {
+        PieceSubCloseTopBar(
+            title = "",
+            onCloseClick = { },
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(vertical = 14.dp),
+        )
+
+        Spacer(modifier = Modifier.height(20.dp))
+
         Text(
-            text = "카카오 로그인",
-            fontSize = 30.sp,
-            modifier = Modifier.clickable { loginKakao() },
+            text = buildAnnotatedString {
+                withStyle(style = SpanStyle(color = PieceTheme.colors.primaryDefault)) {
+                    append("Piece")
+                }
+
+                append("에서 마음이 통하는\n이상형을 만나보세요")
+            },
+            style = PieceTheme.typography.headingLSB,
+            color = PieceTheme.colors.black,
+            modifier = Modifier.fillMaxWidth(),
         )
 
+        Spacer(modifier = Modifier.height(12.dp))
+
         Text(
-            text = "AuthRoute",
-            fontSize = 30.sp,
+            text = "서로의 빈 곳을 채우며 맞물리는 퍼즐처럼.\n서로의 가치관과 마음이 연결되는 순간을 만들어갑니다.",
+            style = PieceTheme.typography.bodySM,
+            color = PieceTheme.colors.dark3,
+            modifier = Modifier.fillMaxWidth(),
+        )
+
+        Spacer(modifier = Modifier.height(70.dp))
+
+        Image(
+            painter = painterResource(R.drawable.ic_puzzle1),
+            contentDescription = null,
+            modifier = Modifier
+                .size(240.dp)
+                .align(Alignment.CenterHorizontally),
         )
+
+        Spacer(modifier = Modifier.weight(1f))
+
+        Button(
+            onClick = loginKakao,
+            enabled = true,
+            shape = RoundedCornerShape(8.dp),
+            colors = ButtonDefaults.buttonColors(
+                containerColor = Color(0xFFFFE812),
+                contentColor = PieceTheme.colors.white,
+                disabledContainerColor = PieceTheme.colors.light1,
+                disabledContentColor = PieceTheme.colors.white,
+            ),
+            modifier = Modifier
+                .height(52.dp)
+                .fillMaxWidth(),
+        ) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+                Image(
+                    painter = painterResource(R.drawable.ic_kakao_login),
+                    contentDescription = null,
+                    modifier = Modifier.size(20.dp),
+                )
+
+                Text(
+                    text = "카카오로 시작하기",
+                    style = PieceTheme.typography.bodyMSB,
+                    color = PieceTheme.colors.black,
+                )
+            }
+        }
+
+        Spacer(modifier = Modifier.height(10.dp))
+
+        Button(
+            onClick = loginKakao,
+            enabled = true,
+            shape = RoundedCornerShape(8.dp),
+            colors = ButtonDefaults.buttonColors(
+                containerColor = PieceTheme.colors.white,
+                contentColor = PieceTheme.colors.white,
+                disabledContainerColor = PieceTheme.colors.light1,
+                disabledContentColor = PieceTheme.colors.white,
+            ),
+            modifier = Modifier
+                .height(52.dp)
+                .fillMaxWidth()
+                .border(
+                    width = 1.dp,
+                    color = PieceTheme.colors.light1,
+                    shape = RoundedCornerShape(8.dp)
+                ),
+        ) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+                Image(
+                    painter = painterResource(R.drawable.ic_google_login),
+                    contentDescription = null,
+                    modifier = Modifier.size(20.dp),
+                )
+
+                Text(
+                    text = "구글로 시작하기",
+                    style = PieceTheme.typography.bodyMSB,
+                    color = PieceTheme.colors.black,
+                )
+            }
+        }
+
+        Spacer(modifier = Modifier.height(10.dp))
     }
 }