[FEAT]#30: KakaoLogin UI 만들어요

wespot-bff · Jul 17, 2024 · 68ffea7 · 68ffea7
1 parent ff6a453
commit 68ffea7
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 47 deletions.
diff --git a/feature/auth/src/main/kotlin/com/bff/wespot/auth/AuthScreen.kt b/feature/auth/src/main/kotlin/com/bff/wespot/auth/AuthScreen.kt
diff --git a/feature/auth/src/main/kotlin/com/bff/wespot/auth/screen/AuthScreen.kt b/feature/auth/src/main/kotlin/com/bff/wespot/auth/screen/AuthScreen.kt
@@ -1,24 +1,68 @@
 package com.bff.wespot.auth.screen
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.navigation.NavOptions
-import com.bff.wespot.auth.screen.destinations.AuthScreenDestination
-import com.bff.wespot.auth.screen.destinations.SchoolScreenDestination
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import com.bff.wespot.auth.R
+import com.bff.wespot.auth.state.AuthAction
+import com.bff.wespot.auth.viewmodel.AuthViewModel
+import com.bff.wespot.designsystem.theme.StaticTypeScale
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.annotation.RootNavGraph
-import com.ramcosta.composedestinations.navigation.DestinationsNavigator
 
 @Destination
 @RootNavGraph(start = true)
 @Composable
 fun AuthScreen(
-    navigator: DestinationsNavigator,
+    viewModel: AuthViewModel,
 ) {
-    navigator.navigate(
-        SchoolScreenDestination(edit = false),
-        navOptions = NavOptions
-            .Builder()
-            .setPopUpTo(AuthScreenDestination.route, inclusive = true)
-            .build(),
-    )
+    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
+        Button(
+            onClick = {
+                viewModel.onAction(AuthAction.LoginWithKakao)
+            },
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp, vertical = 60.dp)
+                .clip(RoundedCornerShape(6.dp))
+                .background(Color(0xFFFEE500)),
+            colors = ButtonDefaults.buttonColors(
+                containerColor = Color(0xFFFEE500)
+            ),
+        ) {
+            Icon(
+                painter = painterResource(id = R.drawable.kakao),
+                contentDescription = stringResource(
+                    id = R.string.kakao_icon
+                ),
+                tint = Color.Black
+            )
+
+            Spacer(modifier = Modifier.width(8.dp))
+
+            Text(
+                text = stringResource(id = R.string.continue_with_kakao),
+                style = StaticTypeScale.Default.body4.copy(fontWeight = FontWeight.Bold),
+                color = Color.Black
+            )
+        }
+    }
 }
diff --git a/feature/auth/src/main/kotlin/com/bff/wespot/auth/state/AuthAction.kt b/feature/auth/src/main/kotlin/com/bff/wespot/auth/state/AuthAction.kt
@@ -1,6 +1,6 @@
 package com.bff.wespot.auth.state
 
-import com.bff.wespot.model.auth.School
+import com.bff.wespot.model.auth.response.School
 
 sealed class AuthAction {
     data class OnSchoolSearchChanged(val text: String) : AuthAction()
@@ -17,6 +17,8 @@ sealed class AuthAction {
 
     data class OnNameChanged(val name: String) : AuthAction()
 
+    data object LoginWithKakao : AuthAction()
+
     data class Navigation(val navigate: NavigationAction) : AuthAction()
 }
 

diff --git a/feature/auth/src/main/kotlin/com/bff/wespot/auth/state/AuthUiState.kt b/feature/auth/src/main/kotlin/com/bff/wespot/auth/state/AuthUiState.kt
@@ -1,6 +1,6 @@
 package com.bff.wespot.auth.state
 
-import com.bff.wespot.model.auth.School
+import com.bff.wespot.model.auth.response.School
 
 data class AuthUiState(
     val schoolName: String = "",

diff --git a/feature/auth/src/main/kotlin/com/bff/wespot/auth/viewmodel/AuthViewModel.kt b/feature/auth/src/main/kotlin/com/bff/wespot/auth/viewmodel/AuthViewModel.kt
@@ -8,7 +8,7 @@ import com.bff.wespot.auth.state.AuthUiState
 import com.bff.wespot.auth.state.NavigationAction
 import com.bff.wespot.domain.repository.auth.AuthRepository
 import com.bff.wespot.domain.usecase.KakaoLoginUseCase
-import com.bff.wespot.model.auth.School
+import com.bff.wespot.model.auth.response.School
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.CoroutineDispatcher
 import kotlinx.coroutines.flow.MutableStateFlow
@@ -47,13 +47,22 @@ class AuthViewModel @Inject constructor(
             is AuthAction.OnGenderChanged -> handleGenderChanged(action.gender)
             is AuthAction.OnNameChanged -> handleNameChanged(action.name)
             is AuthAction.Navigation -> handleNavigation(action.navigate)
+            is AuthAction.LoginWithKakao -> loginWithKakao()
             else -> {}
         }
     }
 
-    fun loginWithKakao() {
+    private fun loginWithKakao() = intent {
         viewModelScope.launch {
-            kakaoLoginUseCase.invoke()
+            runCatching {
+                kakaoLoginUseCase.invoke()
+            }
+                .onSuccess {
+                    postSideEffect(AuthSideEffect.NavigateToSchoolScreen(false))
+                }
+                .onFailure {
+                    Timber.e(it)
+                }
         }
     }
 

diff --git a/feature/auth/src/main/res/drawable/kakao.xml b/feature/auth/src/main/res/drawable/kakao.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="18dp"
+    android:height="18dp"
+    android:viewportWidth="18"
+    android:viewportHeight="18">
+  <path
+      android:pathData="M9,0.944C4.29,0.944 0,4.73 0,7.933C0,10.333 1.558,12.45 3.931,13.708L2.933,17.374C2.844,17.699 3.213,17.957 3.496,17.77L7.873,14.865C8.242,14.901 8.618,14.922 9,14.922C13.97,14.922 18,11.793 18,7.933C18,4.73 13.97,0.944 9,0.944Z"
+      android:strokeAlpha="0.902"
+      android:fillColor="#000000"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.902"/>
+</vector>
diff --git a/feature/auth/src/main/res/values/string.xml b/feature/auth/src/main/res/values/string.xml
@@ -44,4 +44,6 @@
     <string name="finish_check_detail">회원가입을 나가면 입력한 정보가 저장되지 않아요</string>
     <string name="ok">확인</string>
     <string name="cancel">취소</string>
+    <string name="kakao_icon">카카오 아이콘</string>
+    <string name="continue_with_kakao">카카오톡으로 계속하기</string>
 </resources>