✨ Feat: InviteCodeScreen 스크롤시 gradient 효과 추가

Author: chanho0908

feature/onboarding/src/main/java/com/twix/onboarding/invite/InviteCodeScreen.kt

@@ -21,7 +21,9 @@ import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -31,6 +33,8 @@ import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalClipboard
 import androidx.compose.ui.platform.LocalContext
@@ -134,31 +138,20 @@ private fun InviteCodeScreen(
     onComplete: () -> Unit,
     onCopyInviteCode: () -> Unit,
 ) {
+    val scrollState = rememberScrollState()
+
     Box(
         modifier =
             Modifier
                 .fillMaxSize()
                 .background(CommonColor.White),
     ) {
-        Box(
+        Column(
             modifier =
                 Modifier
-                    .fillMaxWidth()
-                    .height(72.dp)
-                    .padding(horizontal = 10.dp, vertical = 14.dp),
-            contentAlignment = Alignment.CenterStart,
+                    .fillMaxSize()
+                    .verticalScroll(scrollState),
         ) {
-            Image(
-                imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_m_left),
-                contentDescription = null,
-                modifier =
-                    Modifier
-                        .size(44.dp)
-                        .noRippleClickable(onClick = navigateToBack),
-            )
-        }
-
-        Column {
             Spacer(modifier = Modifier.height(8.dp))
 
             AnimatedVisibility(
@@ -255,6 +248,29 @@ private fun InviteCodeScreen(
             )
         }
 
+        Box(
+            modifier =
+                Modifier
+                    .fillMaxWidth()
+                    .height(72.dp)
+                    .padding(horizontal = 10.dp, vertical = 14.dp),
+            contentAlignment = Alignment.CenterStart,
+        ) {
+            Image(
+                imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_m_left),
+                contentDescription = null,
+                modifier =
+                    Modifier
+                        .size(44.dp)
+                        .noRippleClickable(onClick = navigateToBack),
+            )
+        }
+
+        TopGradientOverlay(
+            visible = scrollState.value > 0,
+            modifier = Modifier.align(Alignment.TopCenter),
+        )
+
         AppButton(
             text = stringResource(R.string.onboarding_profile_button_title),
             onClick = { onComplete() },
@@ -272,6 +288,37 @@ private fun InviteCodeScreen(
     }
 }
 
+@Composable
+private fun TopGradientOverlay(
+    visible: Boolean,
+    modifier: Modifier = Modifier,
+) {
+    AnimatedVisibility(
+        visible = visible,
+        enter = fadeIn(),
+        exit = fadeOut(),
+        modifier = modifier,
+    ) {
+        Box(
+            modifier =
+                Modifier
+                    .fillMaxWidth()
+                    .height(96.dp)
+                    .background(
+                        brush =
+                            Brush.verticalGradient(
+                                colors =
+                                    listOf(
+                                        CommonColor.White,
+                                        CommonColor.White.copy(alpha = 0.6f),
+                                        Color.Transparent,
+                                    ),
+                            ),
+                    ),
+        )
+    }
+}
+
 @Preview(showBackground = true)
 @Composable
 private fun InviteCodeScreenPreview() {