[MERGE] #223 -> develop

[UI/#223] 온보딩 그래픽 추가
teamterning · Sep 8, 2024 · 57a5058 · 57a5058
2 parents 8ddef8b + 7768a33
commit 57a5058
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/core/src/main/java/com/terning/core/designsystem/component/item/TerningLottieAnimation.kt b/core/src/main/java/com/terning/core/designsystem/component/item/TerningLottieAnimation.kt
@@ -3,18 +3,23 @@ package com.terning.core.designsystem.component.item
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.RectangleShape
 import com.airbnb.lottie.compose.LottieAnimation
 import com.airbnb.lottie.compose.LottieCompositionSpec
 import com.airbnb.lottie.compose.rememberLottieComposition
 
 @Composable
 fun TerningLottieAnimation(
     jsonString: String,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    iterations: Int = 1,
 ) {
     val lottieComposition by rememberLottieComposition(LottieCompositionSpec.Asset(jsonString))
     LottieAnimation(
-        modifier = modifier,
-        composition = lottieComposition
+        modifier = modifier.clip(RectangleShape),
+        composition = lottieComposition,
+        iterations = iterations,
+        clipToCompositionBounds = false
     )
 }
diff --git a/feature/src/main/assets/terning_onboarding_start.json b/feature/src/main/assets/terning_onboarding_start.json
diff --git a/feature/src/main/java/com/terning/feature/filtering/startfiltering/StartFilteringRoute.kt b/feature/src/main/java/com/terning/feature/filtering/startfiltering/StartFilteringRoute.kt
@@ -26,7 +26,9 @@ 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.LottieConstants
 import com.terning.core.designsystem.component.button.RectangleButton
+import com.terning.core.designsystem.component.item.TerningLottieAnimation
 import com.terning.core.designsystem.theme.TerningPointTheme
 import com.terning.core.designsystem.theme.TerningTheme
 import com.terning.core.designsystem.theme.White
@@ -79,16 +81,19 @@ fun StartFilteringScreen(
             Text(
                 text = stringResource(id = R.string.start_filtering_title),
                 style = TerningTheme.typography.title1,
-                modifier = Modifier.padding(bottom = 35.dp),
+                modifier = Modifier.padding(bottom = 36.dp),
                 textAlign = TextAlign.Center
             )
-            Image(
-                painter = painterResource(id = R.drawable.ic_terning_onboarding),
+
+            TerningLottieAnimation(
+                jsonString = "terning_onboarding_start.json",
+                iterations = LottieConstants.IterateForever,
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(horizontal = 24.dp),
-                contentDescription = "terning image"
+                    .height(372.dp)
+                    .padding(horizontal = 24.dp)
             )
+
             Spacer(modifier = Modifier.weight(2f))
         }
         Box(