[FEAT/#304] 온보딩 뷰 / 필터링 건너뛰기 추가

build-logic/src/main/java/terning.android.feature.gradle.kts

@@ -36,4 +36,5 @@ dependencies {
     implementation(libs.findLibrary("lottie").get())
     implementation(libs.findLibrary("accompanist.systemuicontroller").get())
     implementation(libs.findLibrary("androidx.browser").get())
+    implementation(libs.findLibrary("kotlin.collections.immutable").get())
 }

core/designsystem/docs.md

@@ -16,14 +16,17 @@ contentDescription을 사용하지 않는 Image가 담긴 패키지입니다.
 # Package com.terning.core.designsystem.component.item
 여러 화면에서 쓰이는 아이템들이 들어있는 패키지입니다.
 
+# Package com.terning.core.designsystem.component.snackbar
+스낵바가 들어있는 패키지입니다.
+
 # Package com.terning.core.designsystem.component.textfield
 텍스트 필드가 있는 패키지입니다.
 
 # Package com.terning.core.designsystem.component.topappbar
 탑바가 있는 패키지입니다.
 
 # Package com.terning.core.designsystem.theme
-<terning>의 theme가 있는 패키지입니다.
+terning의 theme가 있는 패키지입니다.
 
 # Package com.terning.core.designsystem.type
 여러 가지 타입을 나타내는 패키지입니다.

core/designsystem/src/main/java/com/terning/core/designsystem/component/button/RectangleButton.kt

@@ -44,7 +44,7 @@ fun RectangleButton(
 
 @Preview(showBackground = true)
 @Composable
-fun RectangleButtonPreview() {
+private fun RectangleButtonPreview() {
     TerningPointTheme {
         RectangleButton(
             style = TerningTheme.typography.button0,

core/designsystem/src/main/java/com/terning/core/designsystem/component/button/RoundButton.kt

@@ -46,7 +46,7 @@ fun RoundButton(
 
 @Preview(showBackground = true)
 @Composable
-fun RoundButtonPreview() {
+private fun RoundButtonPreview() {
     TerningPointTheme {
         RoundButton(
             style = TerningTheme.typography.button0,

core/designsystem/src/main/java/com/terning/core/designsystem/component/button/TerningBasicButton.kt

@@ -57,7 +57,7 @@ fun TerningBasicButton(
 
     CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
         Button(
-            contentPadding = PaddingValues(paddingVertical),
+            contentPadding = PaddingValues(vertical = paddingVertical),
             modifier = modifier.fillMaxWidth(),
             interactionSource = interactionSource,
             enabled = isEnabled,
@@ -80,7 +80,7 @@ fun TerningBasicButton(
 
 @Preview(showBackground = true)
 @Composable
-fun TerningBasicButtonPreview() {
+private fun TerningBasicButtonPreview() {
     TerningPointTheme {
         TerningBasicButton(
             text = R.string.button_preview,

feature/filtering/src/main/java/com/terning/feature/filtering/startfiltering/StartFilteringRoute.kt

@@ -3,9 +3,9 @@ package com.terning.feature.filtering.startfiltering
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -21,17 +21,18 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
-import com.airbnb.lottie.compose.LottieCompositionSpec
 import com.airbnb.lottie.compose.LottieConstants
-import com.airbnb.lottie.compose.rememberLottieComposition
 import com.terning.core.analytics.EventType
 import com.terning.core.analytics.LocalTracker
-import com.terning.core.designsystem.component.button.RectangleButton
+import com.terning.core.designsystem.component.button.RoundButton
 import com.terning.core.designsystem.component.item.TerningLottieAnimation
+import com.terning.core.designsystem.extension.noRippleClickable
+import com.terning.core.designsystem.theme.Grey500
 import com.terning.core.designsystem.theme.TerningPointTheme
 import com.terning.core.designsystem.theme.TerningTheme
 import com.terning.core.designsystem.theme.White
@@ -40,7 +41,8 @@ import kotlinx.coroutines.delay
 
 @Composable
 fun StartFilteringRoute(
-    onNextClick: () -> Unit,
+    onButtonClick: () -> Unit,
+    onTextClick: () -> Unit,
     viewModel: StartFilteringViewModel = hiltViewModel()
 ) {
     val state by viewModel.state.collectAsStateWithLifecycle()
@@ -56,69 +58,90 @@ fun StartFilteringRoute(
     }
 
     StartFilteringScreen(
-        onNextClick = {
-            onNextClick()
+        onButtonClick = {
+            onButtonClick()
             amplitudeTracker.track(
                 type = EventType.CLICK,
                 name = "start_service"
             )
         },
+        onTextClick = onTextClick,
         buttonState = state.isButtonVisible,
         screenHeight = screenHeight,
     )
-
 }
 
 @Composable
 fun StartFilteringScreen(
-    onNextClick: () -> Unit,
+    onButtonClick: () -> Unit,
+    onTextClick: () -> Unit,
     buttonState: Boolean,
     screenHeight: Float,
 ) {
-    Box(
+    Column(
         modifier = Modifier
             .fillMaxSize()
             .statusBarsPadding()
             .navigationBarsPadding()
-            .background(White)
+            .background(White),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Spacer(modifier = Modifier.height((138 * screenHeight).dp))
+        Text(
+            text = stringResource(id = R.string.start_filtering_title),
+            style = TerningTheme.typography.title1,
+            textAlign = TextAlign.Center
+        )
+        TerningLottieAnimation(
+            jsonFile = R.raw.terning_onboarding_start,
+            iterations = LottieConstants.IterateForever,
+            modifier = Modifier
+                .fillMaxWidth()
+                .aspectRatio(1f)
+                .padding(horizontal = 24.dp)
+        )
+        Spacer(modifier = Modifier.height((79 * screenHeight).dp))
+        ButtonAnimation(
+            buttonState = buttonState,
+            onButtonClick = onButtonClick,
+            onTextClick = onTextClick
+        )
+        Spacer(modifier = Modifier.height((24 * screenHeight).dp))
+    }
+}
+
+@Composable
+private fun ButtonAnimation(
+    buttonState: Boolean,
+    onButtonClick: () -> Unit,
+    onTextClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    AnimatedVisibility(
+        visible = buttonState,
+        enter = fadeIn(initialAlpha = 0.3f),
     ) {
         Column(
-            modifier = Modifier.fillMaxSize(),
+            modifier = modifier,
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
-            Spacer(modifier = Modifier.height((128 * screenHeight).dp))
-            Text(
-                text = stringResource(id = R.string.start_filtering_title),
-                style = TerningTheme.typography.title1,
-                modifier = Modifier.padding(bottom = 36.dp),
-                textAlign = TextAlign.Center
+            RoundButton(
+                style = TerningTheme.typography.button0,
+                paddingVertical = 17.dp,
+                text = R.string.start_filtering_button,
+                onButtonClick = onButtonClick,
+                cornerRadius = 10.dp,
+                modifier = Modifier.padding(horizontal = 24.dp)
             )
-            TerningLottieAnimation(
-                jsonFile = R.raw.terning_onboarding_start,
-                iterations = LottieConstants.IterateForever,
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .height(372.dp)
-                    .padding(horizontal = 24.dp)
+            Spacer(modifier = Modifier.height(12.dp))
+            Text(
+                text = stringResource(R.string.start_filtering_later),
+                style = TerningTheme.typography.detail3.copy(
+                    textDecoration = TextDecoration.Underline
+                ),
+                color = Grey500,
+                modifier = Modifier.noRippleClickable { onTextClick() }
             )
-            Spacer(modifier = Modifier.weight(2f))
-        }
-        Box(
-            modifier = Modifier
-                .align(Alignment.BottomCenter)
-                .padding(bottom = 12.dp)
-        ) {
-            AnimatedVisibility(
-                visible = buttonState,
-                enter = fadeIn(initialAlpha = 0.3f),
-            ) {
-                RectangleButton(
-                    style = TerningTheme.typography.button0,
-                    paddingVertical = 20.dp,
-                    text = R.string.start_filtering_button,
-                    onButtonClick = onNextClick,
-                )
-            }
         }
     }
 }
@@ -127,10 +150,11 @@ private const val DELAY: Long = 1000
 
 @Preview(showBackground = true)
 @Composable
-fun StartFilteringScreenPreview() {
+private fun StartFilteringScreenPreview() {
     TerningPointTheme {
         StartFilteringScreen(
-            onNextClick = {},
+            onButtonClick = {},
+            onTextClick = {},
             buttonState = true,
             screenHeight = 1f
         )

feature/filtering/src/main/java/com/terning/feature/filtering/startfiltering/navigation/StartFilteringNavigation.kt

@@ -2,12 +2,10 @@ package com.terning.feature.filtering.startfiltering.navigation
 
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
-import androidx.navigation.NavHostController
 import androidx.navigation.NavOptions
 import androidx.navigation.compose.composable
 import androidx.navigation.toRoute
 import com.terning.core.navigation.Route
-import com.terning.feature.filtering.filteringone.navigation.navigateFilteringOne
 import com.terning.feature.filtering.startfiltering.StartFilteringRoute
 import kotlinx.serialization.Serializable
 
@@ -22,14 +20,14 @@ fun NavController.navigateStartFiltering(
 }
 
 fun NavGraphBuilder.startFilteringNavGraph(
-    navHostController: NavHostController
+    onButtonClick: (String) -> Unit,
+    onTextClick: () -> Unit
 ) {
     composable<StartFiltering> {
         val args = it.toRoute<StartFiltering>()
         StartFilteringRoute(
-            onNextClick = {
-                navHostController.navigateFilteringOne(args.name)
-            }
+            onButtonClick = { onButtonClick(args.name) },
+            onTextClick = onTextClick
         )
     }
 }