Feat/#112 filter modal nestedscroll 적용

app/build.gradle.kts

@@ -10,7 +10,7 @@ android {
     defaultConfig {
         applicationId = "com.withpeace.withpeace"
         targetSdk = 34
-        versionCode = 4
+        versionCode = 5
         versionName = "1.0.0"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"

app/release/output-metadata.json

@@ -11,7 +11,7 @@
       "type": "SINGLE",
       "filters": [],
       "attributes": [],
-      "versionCode": 3,
+      "versionCode": 5,
       "versionName": "1.0.0",
       "outputFile": "app-release.apk"
     }

feature/home/src/main/java/com/withpeace/withpeace/feature/home/HomeScreen.kt

@@ -1,22 +1,22 @@
 package com.withpeace.withpeace.feature.home
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.MutatePriority
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.stopScroll
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.BottomSheetDefaults
 import androidx.compose.material3.Card
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -25,6 +25,7 @@ import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.Text
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -188,15 +189,28 @@ private fun HomeHeader(
     onCloseFilter: () -> Unit,
 ) {
     var showBottomSheet by remember { mutableStateOf(false) }
-    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+    val bottomSheetChildScrollState = rememberScrollState()
+
+    val sheetState = rememberModalBottomSheetState(
+        skipPartiallyExpanded = true,
+    )
     val scope = rememberCoroutineScope()
+
+    LaunchedEffect(bottomSheetChildScrollState.canScrollBackward) {
+        if (bottomSheetChildScrollState.value == 0) {
+            bottomSheetChildScrollState.stopScroll(MutatePriority.PreventUserInput)
+        }
+    }
+
     Box(
         modifier = modifier
             .fillMaxWidth()
-            .padding(horizontal = 24.dp).padding(bottom = 16.dp),
+            .padding(horizontal = 24.dp)
+            .padding(bottom = 16.dp),
     ) {
         Image(
-            modifier = modifier.align(Alignment.BottomCenter)
+            modifier = modifier
+                .align(Alignment.BottomCenter)
                 .size(47.dp),
             painter = painterResource(id = R.drawable.ic_home_logo),
             contentDescription = stringResource(R.string.cheongha_logo),
@@ -214,16 +228,17 @@ private fun HomeHeader(
     }
     if (showBottomSheet) {
         ModalBottomSheet(
+            modifier = modifier,
             dragHandle = null,
             onDismissRequest = {
                 onDismissRequest()
                 showBottomSheet = false
             },
             sheetState = sheetState,
-            windowInsets = BottomSheetDefaults.windowInsets.only(WindowInsetsSides.Bottom), // 바텀시트시 상태바의 색깔도 ScopeOut 색으로 바꾸기 위함
         ) {
             FilterBottomSheet(
                 modifier = modifier,
+                scrollState = bottomSheetChildScrollState,
                 selectedFilterUiState = selectedFilterUiState,
                 onClassificationCheckChanged = onClassificationCheckChanged,
                 onRegionCheckChanged = onRegionCheckChanged,
@@ -379,6 +394,4 @@ fun HomePreview() {
     WithpeaceTheme {
         // HomeScreen()
     }
-}
-// TODO(바텀 시트 스크롤 고려)
-//
+}

feature/home/src/main/java/com/withpeace/withpeace/feature/home/filtersetting/FilterBottomSheet.kt

@@ -18,7 +18,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
-import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ButtonColors
@@ -28,27 +27,28 @@ import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.withpeace.withpeace.core.designsystem.theme.WithpeaceTheme
-import com.withpeace.withpeace.feature.home.R
 import com.withpeace.withpeace.core.ui.policy.ClassificationUiModel
-import com.withpeace.withpeace.feature.home.filtersetting.uistate.FilterListUiState
 import com.withpeace.withpeace.core.ui.policy.RegionUiModel
+import com.withpeace.withpeace.feature.home.R
+import com.withpeace.withpeace.feature.home.filtersetting.uistate.FilterListUiState
 import com.withpeace.withpeace.feature.home.uistate.PolicyFiltersUiModel
 
 @Composable
 fun FilterBottomSheet(
+    scrollState: ScrollState,
     modifier: Modifier,
     selectedFilterUiState: PolicyFiltersUiModel,
     onClassificationCheckChanged: (ClassificationUiModel) -> Unit,
@@ -57,26 +57,30 @@ fun FilterBottomSheet(
     onSearchWithFilter: () -> Unit,
     onCloseFilter: () -> Unit,
 ) {
-    val filterListUiState= remember { mutableStateOf(FilterListUiState().getStateByFilterState(selectedFilterUiState)) }
-    val scrollState = rememberScrollState()
+    val filterListUiState =
+        remember { mutableStateOf(FilterListUiState().getStateByFilterState(selectedFilterUiState)) }
     val configuration = LocalConfiguration.current
     val screenHeight = configuration.screenHeightDp.dp
-    var footerHeight by remember { mutableStateOf(0.dp) }
+    val footerHeight = remember { mutableStateOf(0.dp) }
     val localDensity = LocalDensity.current
-    Box(modifier = modifier.heightIn(0.dp, screenHeight).background(WithpeaceTheme.colors.SystemWhite)) {
+    Box(
+        modifier = modifier
+            .heightIn(0.dp, screenHeight)
+            .background(WithpeaceTheme.colors.SystemWhite),
+    ) {
         FilterFooter(
             modifier = modifier
                 .align(Alignment.BottomCenter)
                 .onSizeChanged {
-                    footerHeight = with(localDensity) { it.height.toDp() }
+                    footerHeight.value = with(localDensity) { it.height.toDp() }
                 },
             onFilterAllOff = onFilterAllOff,
             onSearchWithFilter = onSearchWithFilter,
         )
         Column(
             modifier = modifier
                 .align(Alignment.TopCenter)
-                .padding(bottom = footerHeight),
+                .padding(bottom = footerHeight.value),
         ) {
             FilterHeader(
                 modifier = modifier,
@@ -142,10 +146,22 @@ private fun ScrollableFilterSection(
     onRegionMoreViewClick: () -> Unit,
     scrollState: ScrollState,
 ) {
+    val scrollSectionHeight = remember { mutableStateOf(0.dp) }
+    val localDensity = LocalDensity.current
+    val columnModifier = modifier.padding(horizontal = 24.dp)
+
     Column(
-        modifier = modifier
+        modifier =
+        if (scrollSectionHeight.value == 0.dp) columnModifier
+            .onSizeChanged {
+                if (!filterListUiState.isRegionExpanded && !filterListUiState.isClassificationExpanded) {
+                    scrollSectionHeight.value = with(localDensity) { it.height.toDp() }
+                }
+            }
+            .verticalScroll(scrollState)
+        else columnModifier
+            .height(scrollSectionHeight.value)
             .verticalScroll(scrollState)
-            .padding(horizontal = 24.dp),
     ) {
         Spacer(modifier = modifier.height(16.dp))
         Text(
@@ -325,3 +341,5 @@ private fun FilterFooter(
         }
     }
 }
+
+//TODO("최상단 스크롤 이벤트 완료 후 시트 닫히도록")

feature/login/src/main/res/values/strings.xml

@@ -4,5 +4,5 @@
     <string name="welcome_to_withpeace">청하에 오신 것을 환영합니다</string>
     <string name="image_google_logo">image_google_logo</string>
     <string name="login_to_google">Google로 로그인하기</string>
-    <string name="welcome_introduction">1인 가구의 모든 것\n 유용한 정보를 함께 공유해보세요!</string>
+    <string name="welcome_introduction">청년을 위한 모든 것\n 유익한 정보를 함께 공유해 보세요!</string>
 </resources>

feature/registerpost/src/main/java/com/withpeace/withpeace/feature/registerpost/RegisterPostScreen.kt

@@ -337,9 +337,6 @@ fun RegisterPostTopic(
             containerColor = WithpeaceTheme.colors.SystemWhite,
             sheetState = bottomSheetState,
             onDismissRequest = { onShowBottomSheetChanged(false) },
-            windowInsets = WindowInsets(
-                bottom = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding(),
-            ),
             shape = RoundedCornerShape(topStart = 20.dp,topEnd = 20.dp),
         ) {
             TopicBottomSheetContent(

gradle/libs.versions.toml

@@ -53,9 +53,9 @@ ossLicensesPlugin = "0.10.6"
 androidxGlance = "1.0.0-beta01"
 glanceExperimentalTools = "0.2.2"
 junit = "1.1.5"
-material = "1.11.0"
-material3Android = "1.2.0"
-material3 = "1.2.1"
+material = "1.12.0"
+material3Android = "1.3.0-beta03"
+material3 = "1.3.0-beta03"
 multidex = "2.0.1"
 
 google-login = "1.1.0"