#11 [feat] : sticky header 기능 구현

NOW-SOPT-ANDROID · Apr 19, 2024 · 49790b8 · 49790b8
1 parent b752f02
commit 49790b8
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/app/src/main/java/com/sopt/now/compose/feature/home/HomeScreen.kt b/app/src/main/java/com/sopt/now/compose/feature/home/HomeScreen.kt
@@ -1,19 +1,24 @@
 package com.sopt.now.compose.feature.home
 
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.sopt.now.compose.R
 import com.sopt.now.compose.component.row.BirthRow
@@ -22,6 +27,7 @@ import com.sopt.now.compose.component.row.ProfileRow
 import com.sopt.now.compose.component.text.TitleWithDivider
 import com.sopt.now.compose.ui.theme.NOWSOPTAndroidTheme
 
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun HomeScreen() {
     val viewModel: HomeViewModel = viewModel()
@@ -35,6 +41,7 @@ fun HomeScreen() {
             verticalArrangement = Arrangement.spacedBy(16.dp)
         ) {
             val mockList = viewModel.mockBirthList
+            val groupList = mockList.groupBy { it.date }
 
             item {
                 Spacer(modifier = Modifier.padding(top = 16.dp))
@@ -45,12 +52,27 @@ fun HomeScreen() {
             items(viewModel.filterAndSortBirthList(mockList)) { item ->
                 BirthRow(data = item)
             }
+
             item {
                 TitleWithDivider(title = stringResource(R.string.home_firends))
             }
-            itemsIndexed(mockList) { index, item ->
-                FriendRowOnCard(data = item)
-                if (index == mockList.lastIndex) Spacer(modifier = Modifier.height(16.dp))
+
+            groupList.forEach { (date, lists) ->
+                stickyHeader {
+                    Text(
+                        modifier = Modifier
+                            .background(Color(0xFFE0E0E0))
+                            .padding(horizontal = 6.dp)
+                            .fillMaxWidth(),
+                        text = date.toString(),
+                        textAlign = TextAlign.Start,
+                        fontSize = 14.sp
+                    )
+                }
+
+                items(lists) { currentItem ->
+                    FriendRowOnCard(data = currentItem)
+                }
             }
         }
     }

diff --git a/app/src/main/java/com/sopt/now/compose/feature/home/HomeViewModel.kt b/app/src/main/java/com/sopt/now/compose/feature/home/HomeViewModel.kt
@@ -33,13 +33,13 @@ class HomeViewModel : ViewModel() {
             profileImage = R.drawable.ic_my_page_profile_3x,
             name = "유정현",
             selfDescription = "안녕안녕",
-            date = LocalDate.of(2023, 10, 28)
+            date = LocalDate.of(2024, 10, 28)
         ),
         HomeSealedItem.Friend(
             profileImage = R.drawable.ic_ghost_black_24,
             name = "김언지",
             selfDescription = "ㅁㅁㅁㅁ",
-            date = LocalDate.of(2023, 10, 28)
+            date = LocalDate.of(2024, 4, 20)
         ),
         HomeSealedItem.Friend(
             profileImage = R.drawable.ic_ghost_black_24,
@@ -63,7 +63,7 @@ class HomeViewModel : ViewModel() {
             profileImage = R.drawable.ic_ghost_black_24,
             name = "배로로",
             selfDescription = "안녕 난 케로로야",
-            date = LocalDate.of(2024, 4, 17)
+            date = LocalDate.of(2024, 4, 18)
         ),
         HomeSealedItem.Friend(
             profileImage = R.drawable.ic_ghost_black_24,
@@ -75,7 +75,7 @@ class HomeViewModel : ViewModel() {
             profileImage = R.drawable.ic_ghost_black_24,
             name = "최준서",
             selfDescription = "노래 불러주세요",
-            date = LocalDate.of(2024, 3, 24)
+            date = LocalDate.of(2024, 4, 18)
         )
     )