Merge pull request #261 from mash-up-kr/feat/mypage-tab

[Feat] 마이페이지 탭 스크롤 했을 때 앵커 기능 추가
mash-up-kr · Oct 1, 2024 · 2204d89 · 2204d89
2 parents 93a161b + b6a7f71
commit 2204d89
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/feature/mypage/src/main/java/team/ppac/mypage/MyPageScreen.kt b/feature/mypage/src/main/java/team/ppac/mypage/MyPageScreen.kt
@@ -19,12 +19,16 @@ import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
 import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
 import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridItemSpan
+import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.Text
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -38,6 +42,7 @@ import kotlinx.coroutines.flow.flowOf
 import team.ppac.common.android.component.FarmemeMemeItem
 import team.ppac.common.android.component.error.FarmemeErrorScreen
 import team.ppac.common.android.util.showSkeleton
+import team.ppac.common.android.util.systemBarHeight
 import team.ppac.common.android.util.visibility
 import team.ppac.designsystem.FarmemeTheme
 import team.ppac.designsystem.R
@@ -134,8 +139,16 @@ private fun MyPageContent(
     savedMemes: LazyPagingItems<Meme>,
     registeredMemes: LazyPagingItems<Meme>,
 ) {
+    val staggeredGridState = rememberLazyStaggeredGridState()
+    val showStickyHeader by remember {
+        derivedStateOf {
+            staggeredGridState.firstVisibleItemIndex > 3
+        }
+    }
+
     LazyVerticalStaggeredGrid(
         modifier = modifier.wrapContentHeight(),
+        state = staggeredGridState,
         columns = StaggeredGridCells.Fixed(2),
         horizontalArrangement = Arrangement.spacedBy(space = (-28).dp),
     ) {
@@ -165,8 +178,12 @@ private fun MyPageContent(
                 isLoading = uiState.isLoading,
             )
         }
+        item(span = StaggeredGridItemSpan.FullLine) {
+            Spacer(modifier = Modifier.height(40.dp - systemBarHeight))
+        }
         item(span = StaggeredGridItemSpan.FullLine) {
             MyPageMemesTabBar(
+                modifier = Modifier.padding(top = systemBarHeight),
                 currentTabType = uiState.currentTabType,
                 onClick = { tab ->
                     onIntent(MyPageIntent.ClickMemesTab(currentTabType = tab))
@@ -236,6 +253,26 @@ private fun MyPageContent(
             Spacer(modifier = Modifier.height(30.dp))
         }
     }
+    if (showStickyHeader) {
+        Column(
+            modifier = Modifier
+                .background(color = FarmemeTheme.backgroundColor.white)
+                .padding(top = systemBarHeight),
+        ) {
+            MyPageMemesTabBar(
+                currentTabType = uiState.currentTabType,
+                onClick = { tab ->
+                    onIntent(MyPageIntent.ClickMemesTab(currentTabType = tab))
+                },
+            )
+            Spacer(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(1.dp)
+                    .background(FarmemeTheme.borderColor.tertiary),
+            )
+        }
+    }
 }
 
 @Composable

diff --git a/feature/mypage/src/main/java/team/ppac/mypage/component/RecentMemeContent.kt b/feature/mypage/src/main/java/team/ppac/mypage/component/RecentMemeContent.kt
@@ -61,7 +61,6 @@ internal fun RecentMemeContent(
             } else {
                 RecentMemeEmpty()
             }
-            Spacer(modifier = Modifier.height(46.dp))
         }
     }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -61,7 +61,6 @@ internal fun RecentMemeContent( @@
                 } else {
                     RecentMemeEmpty()
                 }
-                Spacer(modifier = Modifier.height(46.dp))
             }
         }
     }
@@ Expand Down @@