[UI] #8 회원가입, 로그인 프로세스 화면 구현

app/src/main/AndroidManifest.xml

@@ -18,6 +18,7 @@
             android:name=".MainActivity"
             android:exported="true"
             android:label="@string/app_name"
+            android:windowSoftInputMode="adjustResize"
             android:theme="@style/Theme.Pokit">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

app/src/main/java/pokitmons/pokit/MainActivity.kt

@@ -4,14 +4,14 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import pokitmons.pokit.core.ui.theme.PokitTheme
-import pokitmons.pokit.login.LoginScreen
+import pokitmons.pokit.navigation.LoginNavHost
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
             PokitTheme {
-                LoginScreen()
+                LoginNavHost()
             }
         }
     }

core/ui/src/main/java/pokitmons/pokit/core/ui/components/atom/button/attributes/ButtonAttributes.kt

@@ -1,5 +1,7 @@
 package pokitmons.pokit.core.ui.components.atom.button.attributes
 
+import androidx.compose.ui.graphics.Color
+
 enum class PokitButtonShape {
     ROUND, RECTANGLE,
 }
@@ -28,3 +30,15 @@ data class PokitButtonIcon(
 enum class PokitButtonIconPosition {
     RIGHT, LEFT,
 }
+
+enum class PokitLoginButtonType {
+    GOOGLE, APPLE
+}
+
+data class PokitLoginResource(
+    val iconResourceId: Int,
+    val iconTintColor: Color = Color.Unspecified,
+    val textColor: Color,
+    val backgroundColor: Color,
+    val borderColor: Color,
+)

core/ui/src/main/java/pokitmons/pokit/core/ui/components/atom/checkbox/PokitCheckbox.kt

@@ -109,7 +109,7 @@ private fun getStrokeColor(
             Color.Unspecified
         }
 
-        !checked -> {
+        !checked && (style != PokitCheckboxStyle.ICON_ONLY) -> {
             PokitTheme.colors.borderSecondary
         }
 
@@ -134,7 +134,7 @@ private fun getBackgroundColor(
             PokitTheme.colors.backgroundDisable
         }
 
-        !checked -> {
+        !checked && (style != PokitCheckboxStyle.ICON_ONLY) -> {
             PokitTheme.colors.backgroundBase
         }
 

core/ui/src/main/java/pokitmons/pokit/core/ui/components/atom/loginbutton/PokitLoginButton.kt

@@ -0,0 +1,86 @@
+package pokitmons.pokit.core.ui.components.atom.loginbutton
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+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.Icon
+import androidx.compose.material3.Surface
+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.unit.dp
+import pokitmons.pokit.core.ui.R
+import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitLoginButtonType
+import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitLoginResource
+import pokitmons.pokit.core.ui.theme.PokitTheme
+
+@Composable
+fun PokitLoginButton(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+    loginType: PokitLoginButtonType,
+    text: String,
+) {
+    val loginResource: PokitLoginResource = getLoginResource(loginType)
+
+    Surface(
+        modifier = Modifier
+            .height(50.dp)
+            .border(
+                shape = RoundedCornerShape(8.dp),
+                width = 1.dp,
+                color = loginResource.borderColor
+            ),
+        shape = RoundedCornerShape(8.dp),
+        color = loginResource.backgroundColor,
+        onClick = onClick
+    ) {
+        Row(
+            modifier = modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center
+        ) {
+            Icon(
+                modifier = Modifier
+                    .size(24.dp),
+                painter = painterResource(id = loginResource.iconResourceId),
+                tint = loginResource.iconTintColor,
+                contentDescription = null
+            )
+            Text(
+                modifier = Modifier
+                    .padding(start = 12.dp),
+                text = text,
+                color = loginResource.textColor,
+                style = PokitTheme.typography.label1Regular
+            )
+        }
+    }
+}
+
+@Composable
+private fun getLoginResource(loginType: PokitLoginButtonType): PokitLoginResource {
+    return when (loginType) {
+        PokitLoginButtonType.APPLE -> PokitLoginResource(
+            iconResourceId = R.drawable.icon_24_apple,
+            iconTintColor = PokitTheme.colors.inverseWh,
+            textColor = PokitTheme.colors.inverseWh,
+            backgroundColor = PokitTheme.colors.backgroundTertiary,
+            borderColor = PokitTheme.colors.backgroundTertiary
+        )
+
+        PokitLoginButtonType.GOOGLE -> PokitLoginResource(
+            iconResourceId = R.drawable.icon_24_google,
+            textColor = PokitTheme.colors.textPrimary,
+            backgroundColor = PokitTheme.colors.backgroundBase,
+            borderColor = PokitTheme.colors.borderSecondary
+        )
+    }
+}

feature/login/build.gradle.kts

@@ -70,6 +70,7 @@ dependencies {
     implementation(libs.androidx.ui.graphics)
     implementation(libs.androidx.ui.tooling.preview)
     implementation(libs.androidx.material3)
+    implementation(libs.androidx.navigation.compose)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
@@ -81,4 +82,6 @@ dependencies {
     implementation(libs.androidx.credentials)
     implementation(libs.androidx.credentials.play.services.auth)
     implementation(libs.googleid)
+
+    implementation(project(":core:ui"))
 }

feature/login/src/main/java/pokitmons/pokit/keyword/KeywordScreen.kt

@@ -0,0 +1,161 @@
+package pokitmons.pokit.keyword
+
+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.padding
+import androidx.compose.material3.Icon
+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.res.stringResource
+import androidx.compose.ui.unit.dp
+import pokitmons.pokit.core.ui.components.atom.button.PokitButton
+import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitButtonSize
+import pokitmons.pokit.core.ui.components.atom.chip.PokitChip
+import pokitmons.pokit.core.ui.components.atom.chip.attributes.PokitChipSize
+import pokitmons.pokit.core.ui.theme.PokitTheme
+import pokitmons.pokit.core.ui.R as Ui
+import pokitmons.pokit.login.R as Login
+
+@Composable
+fun KeywordScreen(
+    onNavigateToSignUpScreen: () -> Unit,
+    popBackStack: () -> Unit,
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(all = 20.dp)
+            .padding(bottom = 8.dp)
+    ) {
+        Column {
+            Icon(painter = painterResource(id = Ui.drawable.icon_24_arrow_left), contentDescription = null)
+            Spacer(modifier = Modifier.height(32.dp))
+            Text(
+                text = stringResource(id = Login.string.keyword_title),
+                style = PokitTheme.typography.title1
+            )
+            Spacer(modifier = Modifier.height(12.dp))
+            Text(
+                text = stringResource(id = Login.string.select_keyword),
+                style = PokitTheme.typography.title3
+            )
+            Spacer(modifier = Modifier.height(36.dp))
+
+            // TODO FlowRow도 사용해보기
+            Column {
+                val categories: List<List<String>> = listOf(
+                    stringResource(id = Login.string.sports_and_leisure),
+                    stringResource(id = Login.string.phrases_and_office),
+                    stringResource(id = Login.string.fashion),
+                    stringResource(id = Login.string.travel),
+                    stringResource(id = Login.string.economy_and_politics),
+                    stringResource(id = Login.string.movies_and_dramas),
+                    stringResource(id = Login.string.restaurants),
+                    stringResource(id = Login.string.interior),
+                    stringResource(id = Login.string.it),
+                    stringResource(id = Login.string.design),
+                    stringResource(id = Login.string.self_development),
+                    stringResource(id = Login.string.humor),
+                    stringResource(id = Login.string.music),
+                    stringResource(id = Login.string.job_info)
+                ).chunked(3)
+
+                Row {
+                    categories[0].forEach { category ->
+                        PokitChip(
+                            data = null,
+                            size = PokitChipSize.MEDIUM,
+                            text = category,
+                            removeIconPosition = null,
+                            onClickRemove = { },
+                            onClickItem = { }
+                        )
+                        Spacer(modifier = Modifier.padding(start = 12.dp))
+                    }
+                }
+
+                Spacer(modifier = Modifier.height(16.dp))
+
+                Row {
+                    categories[1].forEach { category ->
+                        PokitChip(
+                            data = null,
+                            size = PokitChipSize.MEDIUM,
+                            text = category,
+                            removeIconPosition = null,
+                            onClickRemove = { },
+                            onClickItem = { }
+                        )
+                        Spacer(modifier = Modifier.padding(start = 12.dp))
+                    }
+                }
+
+                Spacer(modifier = Modifier.height(16.dp))
+
+                Row {
+                    categories[2].forEach { category ->
+                        PokitChip(
+                            data = null,
+                            size = PokitChipSize.MEDIUM,
+                            text = category,
+                            removeIconPosition = null,
+                            onClickRemove = { },
+                            onClickItem = { }
+                        )
+                        Spacer(modifier = Modifier.padding(start = 12.dp))
+                    }
+                }
+
+                Spacer(modifier = Modifier.height(16.dp))
+
+                Row {
+                    categories[3].forEach { category ->
+                        PokitChip(
+                            data = null,
+                            size = PokitChipSize.MEDIUM,
+                            text = category,
+                            removeIconPosition = null,
+                            onClickRemove = { },
+                            onClickItem = { }
+                        )
+                        Spacer(modifier = Modifier.padding(start = 12.dp))
+                    }
+                }
+
+                Spacer(modifier = Modifier.height(16.dp))
+
+                Row {
+                    categories[4].forEach { category ->
+                        PokitChip(
+                            data = null,
+                            size = PokitChipSize.MEDIUM,
+                            text = category,
+                            removeIconPosition = null,
+                            onClickRemove = { },
+                            onClickItem = { }
+                        )
+                        Spacer(modifier = Modifier.padding(start = 12.dp))
+                    }
+                }
+            }
+        }
+
+        PokitButton(
+            modifier = Modifier
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            text = stringResource(id = pokitmons.pokit.login.R.string.next),
+            icon = null,
+            size = PokitButtonSize.LARGE,
+            onClick = { onNavigateToSignUpScreen() }
+        )
+    }
+}

feature/login/src/main/java/pokitmons/pokit/login/LoginScreen.kt

@@ -2,22 +2,62 @@ package pokitmons.pokit.login
 
 import android.annotation.SuppressLint
 import android.util.Log
-import androidx.compose.material3.Text
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import androidx.credentials.CredentialManager
 import androidx.credentials.GetCredentialRequest
 import com.google.android.libraries.identity.googleid.GetGoogleIdOption
 import com.google.android.libraries.identity.googleid.GoogleIdTokenCredential
 import kotlinx.coroutines.launch
+import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitLoginButtonType
+import pokitmons.pokit.core.ui.components.atom.loginbutton.PokitLoginButton
 
-@SuppressLint("CoroutineCreationDuringComposition")
 @Composable
-fun LoginScreen() {
+fun LoginScreen(
+    onNavigateToTermsOfServiceScreen: () -> Unit,
+    onNavigateToMainScreen: () -> Unit,
+) {
     // TODO 서버 api 개발완료 후 viewmodel 연동 및 아키텍처 구축
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+    ) {
+        Column(
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .padding(start = 20.dp, end = 20.dp, bottom = 32.dp)
+        ) {
+            PokitLoginButton(
+                loginType = PokitLoginButtonType.APPLE,
+                text = stringResource(id = R.string.apple_login),
+                onClick = { onNavigateToMainScreen() }
+            )
+
+            Spacer(modifier = Modifier.height(8.dp))
+
+            PokitLoginButton(
+                loginType = PokitLoginButtonType.GOOGLE,
+                text = stringResource(id = R.string.google_login),
+                onClick = { onNavigateToTermsOfServiceScreen() }
+            )
+        }
+    }
+}
 
-    Text(text = "로그인 테스트 화면")
+@SuppressLint("CoroutineCreationDuringComposition")
+@Composable
+private fun googleLogin() {
     val coroutineScope = rememberCoroutineScope()
 
     val context = LocalContext.current