#223 : 하단 버튼이 붙어 있는 페이지 리팩토링해요

core/ui/src/main/kotlin/com/bff/wespot/ui/component/AutoSizeText.kt

@@ -3,7 +3,6 @@ package com.bff.wespot.ui.component
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.BoxWithConstraintsScope
 import androidx.compose.foundation.text.InlineTextContent
-import androidx.compose.foundation.text.InternalFoundationTextApi
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -128,7 +127,6 @@ fun AutoSizeText(
     }
 }
 
-@OptIn(InternalFoundationTextApi::class)
 @Composable
 private fun BoxWithConstraintsScope.shouldShrink(
     text: AnnotatedString,

core/ui/src/main/kotlin/com/bff/wespot/ui/component/BottomButtonLayout.kt

@@ -0,0 +1,38 @@
+package com.bff.wespot.ui.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.SubcomposeLayout
+
+@Composable
+fun BottomButtonLayout(
+    modifier: Modifier = Modifier,
+    showGradient: Boolean = false,
+    button: @Composable () -> Unit,
+    content: @Composable () -> Unit,
+) {
+    SubcomposeLayout(modifier) { constraints ->
+        val gradientPlaceable = subcompose("gradient") {
+            ListBottomGradient(124)
+        }.first().measure(constraints)
+
+        val buttonPlaceable = subcompose("button") {
+            button()
+        }.first().measure(constraints)
+
+        val contentMaxHeight = constraints.maxHeight - buttonPlaceable.height
+        val contentPlaceable = subcompose("content") {
+            content()
+        }.first().measure(constraints.copy(maxHeight = contentMaxHeight))
+
+        layout(constraints.maxWidth, constraints.maxHeight) {
+            contentPlaceable.placeRelative(0, 0)
+
+            if (showGradient) {
+                gradientPlaceable.placeRelative(0, constraints.maxHeight - gradientPlaceable.height)
+            }
+
+            buttonPlaceable.placeRelative(0, contentMaxHeight)
+        }
+    }
+}

core/ui/src/main/kotlin/com/bff/wespot/ui/component/DotIndicators.kt

@@ -1,6 +1,5 @@
 package com.bff.wespot.ui.component
 
-import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -17,7 +16,6 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun DotIndicators(
     pagerState: PagerState,

core/ui/src/main/kotlin/com/bff/wespot/ui/component/WSCarousel.kt

@@ -1,6 +1,5 @@
 package com.bff.wespot.ui.component
 
-import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -22,7 +21,6 @@ import com.bff.wespot.designsystem.theme.WeSpotTheme
 import com.bff.wespot.designsystem.util.OrientationPreviews
 import com.bff.wespot.ui.util.carouselTransition
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun WSCarousel(
     pageCount: Int = 10,
@@ -47,7 +45,6 @@ fun WSCarousel(
     }
 }
 
-@OptIn(ExperimentalFoundationApi::class)
 @OrientationPreviews
 @Composable
 private fun PreviewWSCarousel() {

core/ui/src/main/kotlin/com/bff/wespot/ui/util/ModifierUtil.kt

@@ -1,6 +1,5 @@
 package com.bff.wespot.ui.util
 
-import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.LocalIndication
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -14,7 +13,6 @@ import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.util.lerp
 import kotlin.math.absoluteValue
 
-@OptIn(ExperimentalFoundationApi::class)
 fun Modifier.carouselTransition(pagerState: PagerState, page: Int) =
     graphicsLayer {
         val pageOffset =

feature/entire/src/main/java/com/bff/wespot/entire/screen/edit/ProfileEditScreen.kt

@@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -64,6 +63,7 @@ import com.bff.wespot.entire.state.edit.EntireEditAction
 import com.bff.wespot.entire.state.edit.EntireEditSideEffect
 import com.bff.wespot.entire.viewmodel.EntireEditViewModel
 import com.bff.wespot.navigation.Navigator
+import com.bff.wespot.ui.component.BottomButtonLayout
 import com.bff.wespot.ui.component.LetterCountIndicator
 import com.bff.wespot.ui.component.LoadingAnimation
 import com.bff.wespot.ui.component.TopToast
@@ -141,110 +141,104 @@ fun ProfileEditScreen(
             )
         },
     ) {
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(it)
-                .padding(horizontal = 20.dp)
-                .verticalScroll(scrollState),
-            horizontalAlignment = Alignment.CenterHorizontally,
+        BottomButtonLayout(
+            modifier = Modifier.padding(it),
+            button = {
+                val isEdited = state.profile.introduction != state.introductionInput ||
+                    state.profilePath != state.profile.profileCharacter.iconUrl
+                WSButton(
+                    onClick = {
+                        action(EntireEditAction.OnProfileEditDoneButtonClicked)
+                    },
+                    enabled =
+                        isEdited &&
+                            state.hasProfanity.not() &&
+                            state.introductionInput.length in 0..20,
+                    text = stringResource(id = R.string.edit_done),
+                    content = { it() },
+                )
+            },
         ) {
-            Box(
+            Column(
                 modifier = Modifier
-                    .padding(top = 16.dp)
-                    .clickableSingle {
-                        if (state.profilePath.isNullOrEmpty()) {
-                            action(EntireEditAction.OpenPicker)
-                        } else {
-                            action(EntireEditAction.ChangeBottomSheetState(true))
-                        }
-                    },
+                    .padding(horizontal = 20.dp)
+                    .verticalScroll(scrollState),
+                horizontalAlignment = Alignment.CenterHorizontally,
             ) {
-                AsyncImage(
+                Box(
                     modifier = Modifier
-                        .size(90.dp)
-                        .clip(CircleShape),
-                    model = ImageRequest.Builder(LocalContext.current)
-                        .data(state.profilePath)
-                        .error(com.bff.wespot.designsystem.R.drawable.default_image)
-                        .fallback(com.bff.wespot.designsystem.R.drawable.default_image)
-                        .placeholder(com.bff.wespot.designsystem.R.drawable.default_image)
-                        .crossfade(true)
-                        .build(),
-                    contentDescription = stringResource(
-                        com.bff.wespot.ui.R.string.user_character_image,
-                    ),
-                )
+                        .padding(top = 16.dp)
+                        .clickableSingle {
+                            if (state.profilePath.isNullOrEmpty()) {
+                                action(EntireEditAction.OpenPicker)
+                            } else {
+                                action(EntireEditAction.ChangeBottomSheetState(true))
+                            }
+                        },
+                ) {
+                    AsyncImage(
+                        modifier = Modifier
+                            .size(90.dp)
+                            .clip(CircleShape),
+                        model = ImageRequest.Builder(LocalContext.current)
+                            .data(state.profilePath)
+                            .error(com.bff.wespot.designsystem.R.drawable.default_image)
+                            .fallback(com.bff.wespot.designsystem.R.drawable.default_image)
+                            .placeholder(com.bff.wespot.designsystem.R.drawable.default_image)
+                            .crossfade(true)
+                            .build(),
+                        contentDescription = stringResource(
+                            com.bff.wespot.ui.R.string.user_character_image,
+                        ),
+                    )
+
+                    Image(
+                        modifier = Modifier
+                            .size(24.dp)
+                            .align(Alignment.BottomEnd)
+                            .zIndex(1f),
+                        painter = painterResource(id = R.drawable.edit),
+                        contentDescription = stringResource(R.string.edit_icon),
+                    )
+                }
 
-                Image(
-                    modifier = Modifier
-                        .size(24.dp)
-                        .align(Alignment.BottomEnd)
-                        .zIndex(1f),
-                    painter = painterResource(id = R.drawable.edit),
-                    contentDescription = stringResource(R.string.edit_icon),
+                ProfileEditLockedItem(
+                    title = stringResource(R.string.name),
+                    content = state.profile.name,
+                    onClick = {
+                        focusManager.clearFocus()
+                        action(EntireEditAction.OnRequestDialogShown)
+                    },
                 )
-            }
-
-            ProfileEditLockedItem(
-                title = stringResource(R.string.name),
-                content = state.profile.name,
-                onClick = {
-                    focusManager.clearFocus()
-                    action(EntireEditAction.OnRequestDialogShown)
-                },
-            )
-
-            ProfileEditLockedItem(
-                title = stringResource(R.string.gender),
-                content = state.profile.toGenderKorean(),
-                onClick = {
-                    focusManager.clearFocus()
-                    action(EntireEditAction.OnRequestDialogShown)
-                },
-            )
-
-            ProfileEditLockedItem(
-                title = stringResource(R.string.school_info),
-                content = state.profile.toSchoolInfo(),
-                onClick = {
-                    focusManager.clearFocus()
-                    action(EntireEditAction.OnRequestDialogShown)
-                },
-            )
 
-            ProfileIntroductionItem(
-                title = stringResource(com.bff.wespot.ui.R.string.introduction),
-                content = state.introductionInput,
-                hasProfanity = state.hasProfanity,
-                onValueChange = { value -> action(EntireEditAction.OnIntroductionChanged(value)) },
-                onFocusChanged = { focusState ->
-                    action(EntireEditAction.OnProfileEditTextFieldFocused(focusState.isFocused))
-                },
-            )
+                ProfileEditLockedItem(
+                    title = stringResource(R.string.gender),
+                    content = state.profile.toGenderKorean(),
+                    onClick = {
+                        focusManager.clearFocus()
+                        action(EntireEditAction.OnRequestDialogShown)
+                    },
+                )
 
-            Spacer(modifier = Modifier.height(72.dp))
-        }
+                ProfileEditLockedItem(
+                    title = stringResource(R.string.school_info),
+                    content = state.profile.toSchoolInfo(),
+                    onClick = {
+                        focusManager.clearFocus()
+                        action(EntireEditAction.OnRequestDialogShown)
+                    },
+                )
 
-        Box(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(top = 10.dp),
-            contentAlignment = Alignment.BottomCenter,
-        ) {
-            val isEdited = state.profile.introduction != state.introductionInput ||
-                state.profilePath != state.profile.profileCharacter.iconUrl
-            WSButton(
-                onClick = {
-                    action(EntireEditAction.OnProfileEditDoneButtonClicked)
-                },
-                enabled =
-                    isEdited &&
-                        state.hasProfanity.not() &&
-                        state.introductionInput.length in 0..20,
-                text = stringResource(id = R.string.edit_done),
-                content = { it() },
-            )
+                ProfileIntroductionItem(
+                    title = stringResource(com.bff.wespot.ui.R.string.introduction),
+                    content = state.introductionInput,
+                    hasProfanity = state.hasProfanity,
+                    onValueChange = { value -> action(EntireEditAction.OnIntroductionChanged(value)) },
+                    onFocusChanged = { focusState ->
+                        action(EntireEditAction.OnProfileEditTextFieldFocused(focusState.isFocused))
+                    },
+                )
+            }
         }
     }