[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,89 @@
+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.graphics.Color
+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
+import pokitmons.pokit.core.ui.theme.color.Gray200
+import pokitmons.pokit.core.ui.theme.color.Gray700
+import pokitmons.pokit.core.ui.theme.color.Gray900
+
+@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.label3Regular
+ )
+ }
+ }
+}
+
+private fun getLoginResource(loginType: PokitLoginButtonType): PokitLoginResource {
+ return when (loginType) {
+ PokitLoginButtonType.APPLE -> PokitLoginResource(
+ iconResourceId = R.drawable.icon_24_apple,
+ iconTintColor = Color.White,
+ textColor = Color.White,
+ backgroundColor = Gray700,
+ borderColor = Gray700
+ )
+
+ PokitLoginButtonType.GOOGLE -> PokitLoginResource(
+ iconResourceId = R.drawable.icon_24_google,
+ textColor = Gray900,
+ backgroundColor = Color.White,
+ borderColor = Gray200
+ )
+ }
+}

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() }
+ )
+ }
+}