[feat] #131 Onboarding UI 변경

Team-Recordy · Oct 7, 2024 · f2ebbe1 · f2ebbe1
1 parent cda43ef
commit f2ebbe1
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 47 deletions.
diff --git a/feature/login/src/main/java/com/record/login/singup/SignUpScreen.kt b/feature/login/src/main/java/com/record/login/singup/SignUpScreen.kt
@@ -6,17 +6,23 @@ import androidx.activity.compose.BackHandler
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 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.imePadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.PagerState
 import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -27,20 +33,21 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 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.graphics.vector.ImageVector
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.record.designsystem.component.button.RecordyButton
 import com.record.designsystem.theme.RecordyTheme
-import com.record.login.R
 import com.record.login.singup.screen.NamingScreen
 import com.record.login.singup.screen.PolicyScreen
 import com.record.login.singup.screen.SignUpSuccessScreen
@@ -115,31 +122,25 @@ fun SignUpRoute(
                 .background(color = Color.Transparent)
                 .fillMaxWidth(),
         ) {
-            Icon(
-                ImageVector.vectorResource(id = com.record.designsystem.R.drawable.ic_angle_left_24),
-                contentDescription = "뒤로가기",
-                tint = RecordyTheme.colors.gray01,
-                modifier = Modifier
-                    .align(Alignment.CenterStart)
-                    .padding(start = 20.dp)
-                    .customClickable {
-                        coroutineScope.launch {
-                            if (pagerState.currentPage > 0) {
-                                val previousPage = pagerState.currentPage - 1
-                                viewModel.navScreen(previousPage)
-                                pagerState.animateScrollToPage(
-                                    previousPage,
-                                    animationSpec = tween(
-                                        durationMillis = 200,
-                                        delayMillis = 100,
-                                    ),
-                                )
-                            } else {
-                                viewModel.navigateToLogin()
+            if (pagerState.currentPage != 2) {
+                Icon(
+                    ImageVector.vectorResource(id = com.record.designsystem.R.drawable.ic_angle_left_24),
+                    contentDescription = "뒤로가기",
+                    tint = RecordyTheme.colors.gray01,
+                    modifier = Modifier
+                        .align(Alignment.CenterStart)
+                        .customClickable {
+                            coroutineScope.launch {
+                                if (pagerState.currentPage > 0) {
+                                    viewModel.navScreen(pagerState.currentPage - 1)
+                                    pagerState.animateScrollToPage(pagerState.currentPage - 1)
+                                } else {
+                                    viewModel.navigateToLogin()
+                                }
                             }
-                        }
-                    },
-            )
+                        },
+                )
+            }
             Text(
                 modifier = Modifier.align(Alignment.Center),
                 text = uiState.title,
@@ -173,15 +174,16 @@ fun SignUpRoute(
                     onInputComplete = viewModel::checkValidateNickName,
                 )
 
-                SignUpScreen.Success -> SignUpSuccessScreen()
+                SignUpScreen.Success -> SignUpSuccessScreen(name = uiState.nicknameText)
             }
         }
     }
 
     Box(modifier = Modifier.fillMaxSize()) {
         Column(modifier = Modifier.align(alignment = Alignment.BottomCenter)) {
+            RecordyHorizontalPagerIndicator(modifier = Modifier.fillMaxWidth(), pagerState = pagerState)
             RecordyButton(
-                text = "완료",
+                text = if (pagerState.currentPage == 3) "완료" else "다음",
                 enabled = uiState.btnEnable,
                 clickable = uiState.btnEnable,
                 onClick = {
@@ -211,11 +213,14 @@ fun SignUpRoute(
 @Composable
 fun PreviewSignUp(
     padding: PaddingValues = PaddingValues(horizontal = 16.dp),
-    viewModel: SignUpViewModel = hiltViewModel(),
 ) {
     RecordyTheme {
-        Box(modifier = Modifier.background(color = RecordyTheme.colors.background)) {
-            SignUpRoute(padding = padding, viewModel = viewModel, navigateToHome = {}, navigateLogin = {})
+        Box(
+            modifier = Modifier
+                .background(color = RecordyTheme.colors.background)
+                .fillMaxSize(),
+        ) {
+//                SignUpRoute(padding = padding, viewModel = viewModel, navigateToHome = {}, navigateLogin = {})
         }
     }
 }
@@ -232,3 +237,42 @@ enum class SignUpScreen(val screenNumber: Int) {
         }
     }
 }
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun RecordyHorizontalPagerIndicator(
+    pagerState: PagerState,
+    pageCount: Int = pagerState.pageCount,
+    modifier: Modifier = Modifier,
+    activeColor: Color = RecordyTheme.colors.viskitYellow500,
+    inactiveColor: Color = RecordyTheme.colors.gray08,
+    indicatorWidth: Dp = 6.dp,
+    indicatorHeight: Dp = indicatorWidth,
+    indicatorNotSelectedWidth: Dp = 6.dp,
+    indicatorNotSelectedHeight: Dp = indicatorNotSelectedWidth,
+    spacing: Dp = indicatorWidth,
+    indicatorShape: RoundedCornerShape = CircleShape,
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(vertical = 10.dp),
+        horizontalArrangement = Arrangement.spacedBy(spacing),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Spacer(modifier = Modifier.weight(1f))
+        repeat(pageCount) { page ->
+            val isSelected = page == pagerState.currentPage
+            Box(
+                modifier = Modifier
+                    .size(
+                        width = if (isSelected) indicatorWidth else indicatorNotSelectedWidth,
+                        height = if (isSelected) indicatorHeight else indicatorNotSelectedHeight,
+                    )
+                    .clip(indicatorShape)
+                    .background(if (isSelected) activeColor else inactiveColor),
+            )
+        }
+        Spacer(modifier = Modifier.weight(1f))
+    }
+}
diff --git a/feature/login/src/main/java/com/record/login/singup/screen/NamingScreen.kt b/feature/login/src/main/java/com/record/login/singup/screen/NamingScreen.kt
@@ -2,8 +2,10 @@ package com.record.login.singup.screen
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 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
@@ -30,8 +32,10 @@ fun NamingScreen(uiState: SignUpState, onTextChangeEvent: (String) -> Unit, onIn
     ) {
         Spacer(modifier = Modifier.height(55.dp))
         Text(
-            text = "당신의 첫 번째 기록, \n닉네임을 설정해주세요.",
-            modifier = Modifier.padding(start = 16.dp),
+            text = "비스킷에서 사용할 \n닉네임을 작성해 주세요.",
+            modifier = Modifier
+                .padding(start = 10.dp)
+                .fillMaxWidth(),
             style = RecordyTheme.typography.title1,
             color = RecordyTheme.colors.gray01,
         )
@@ -42,6 +46,7 @@ fun NamingScreen(uiState: SignUpState, onTextChangeEvent: (String) -> Unit, onIn
                 onTextChangeEvent(text)
                 lastInputTime = System.currentTimeMillis()
             },
+            padding = PaddingValues(),
         )
     }
 

diff --git a/feature/login/src/main/java/com/record/login/singup/screen/PolicyScreen.kt b/feature/login/src/main/java/com/record/login/singup/screen/PolicyScreen.kt
@@ -43,17 +43,16 @@ fun PolicyScreen(
     onMoreClick: (String) -> Unit,
 ) {
     Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Top) {
-        Spacer(modifier = Modifier.height(54.dp))
+        Spacer(modifier = Modifier.height(60.dp))
         Text(
             text = "비스킷 이용을 위해 \n필수 약관에 동의해 주세요.",
             modifier = Modifier
                 .padding(start = 10.dp)
-                .fillMaxWidth()
-                .padding(padding),
+                .fillMaxWidth(),
             style = RecordyTheme.typography.title1,
             color = RecordyTheme.colors.gray01,
         )
-        Spacer(modifier = Modifier.height(33.dp))
+        Spacer(modifier = Modifier.height(30.dp))
         RecordyCheckAllBox(
             "전체 동의",
             padding = padding,

diff --git a/feature/login/src/main/java/com/record/login/singup/screen/SignUpSuccessScreen.kt b/feature/login/src/main/java/com/record/login/singup/screen/SignUpSuccessScreen.kt
@@ -13,15 +13,16 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
 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 com.record.designsystem.R
 import com.record.designsystem.theme.RecordyTheme
 
 @Composable
-fun SignUpSuccessScreen() {
+fun SignUpSuccessScreen(name: String) {
     Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally) {
-        Spacer(modifier = Modifier.height(174.dp))
+        Spacer(modifier = Modifier.height(188.dp))
         Image(
             painter = painterResource(id = R.drawable.img_bubble_checked),
             contentDescription = null,
@@ -30,25 +31,22 @@ fun SignUpSuccessScreen() {
                 .aspectRatio(1f),
             contentScale = ContentScale.Crop,
         )
-        Spacer(modifier = Modifier.height(36.dp))
+        Spacer(modifier = Modifier.height(24.dp))
         Text(
-            "회원가입이 완료되었어요!",
+            "${name}님,\n" +
+                "가입이 완료되었어요!",
             style = RecordyTheme.typography.title1,
             color = RecordyTheme.colors.gray01,
+            textAlign = TextAlign.Center,
         )
-        Spacer(modifier = Modifier.height(8.dp))
-        Text(
-            "지금 영상을 둘러보고 나만의 공간 취향을 발견해 보세요.",
-            style = RecordyTheme.typography.caption2R,
-            color = RecordyTheme.colors.gray03,
-        )
+        Spacer(modifier = Modifier.height(188.dp))
     }
 }
 
 @Preview
 @Composable
 fun PreviewSignUpSuccessScreen() {
     RecordyTheme {
-        SignUpSuccessScreen()
+        SignUpSuccessScreen(name = "test")
     }
 }