[REFACTOR/#215] ConstraintLayout 사용을 제거하고 UI 리팩토링을 실시합니다.

app/src/main/java/com/sopt/clody/presentation/ui/auth/component/timepicker/BottomSheetTimePicker.kt

@@ -76,7 +76,7 @@ fun BottomSheetTimePicker(
                 }
             }
 
-            val amPmItems = remember { listOf("오전", "오후") }
+            val amPmItems = remember { listOf("오후", "오전") }
             val hourItems = remember { (1..12).map { it.toString() } }
             val minuteItems = remember { listOf("00", "10", "20", "30", "40", "50") }
 

app/src/main/java/com/sopt/clody/presentation/ui/auth/screen/GuideScreen.kt

@@ -1,5 +1,8 @@
 package com.sopt.clody.presentation.ui.auth.screen
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
@@ -10,15 +13,20 @@ 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
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 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
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -28,12 +36,12 @@ 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.constraintlayout.compose.ConstraintLayout
-import androidx.constraintlayout.compose.Dimension
 import com.sopt.clody.R
 import com.sopt.clody.presentation.ui.auth.navigation.AuthNavigator
 import com.sopt.clody.presentation.ui.component.button.ClodyButton
+import com.sopt.clody.presentation.utils.extension.heightForScreenPercentage
 import com.sopt.clody.ui.theme.ClodyTheme
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 
 @Composable
@@ -76,100 +84,111 @@ fun GuideScreen(
     )
 
     val pagerState = rememberPagerState(pageCount = { pages.size })
+    val coroutineScope = rememberCoroutineScope()
+    var isExiting by remember { mutableStateOf(false) }
 
-    ConstraintLayout(
-        modifier = Modifier
-            .fillMaxSize()
-            .background(color = ClodyTheme.colors.white)
-            .padding(24.dp)
-    ) {
-        val (pager, indicator, nextButton) = createRefs()
-        val topGuideline = createGuidelineFromTop(0.161f)
-        HorizontalPager(
-            state = pagerState,
-            modifier = Modifier.constrainAs(pager) {
-                top.linkTo(topGuideline)
-                start.linkTo(parent.start)
-                end.linkTo(parent.end)
-                height = Dimension.fillToConstraints
-            }
-        ) { page ->
-            Column(
-                horizontalAlignment = Alignment.CenterHorizontally,
-                modifier = Modifier.fillMaxWidth()
+    Scaffold(
+        bottomBar = {
+            ClodyButton(
+                onClick = {
+                    coroutineScope.launch {
+                        if (pagerState.currentPage < pages.size - 1) {
+                            pagerState.animateScrollToPage(pagerState.currentPage + 1)
+                        } else {
+                            isExiting = true
+                        }
+                    }
+                },
+                text = if (pagerState.currentPage < pages.size - 1) {
+                    stringResource(id = R.string.guide_next)
+                } else {
+                    stringResource(id = R.string.guide_start)
+                },
+                enabled = true,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 24.dp)
+                    .padding(bottom = 28.dp)
+            )
+        },
+        content = { innerPadding ->
+            AnimatedVisibility(
+                visible = !isExiting,
+                exit = fadeOut(animationSpec = tween(1000)), // 1초 페이드 아웃
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(innerPadding)
             ) {
-                Text(
-                    text = pages[page].title,
-                    style = ClodyTheme.typography.head1,
-                    color = ClodyTheme.colors.gray01,
-                    textAlign = TextAlign.Center
-                )
-                Text(
-                    text = pages[page].subtitle,
-                    style = ClodyTheme.typography.head1,
-                    color = ClodyTheme.colors.gray01,
-                    textAlign = TextAlign.Center
-                )
-                Spacer(modifier = Modifier.height(16.dp))
-                Text(
-                    text = pages[page].description,
-                    style = ClodyTheme.typography.body1Medium,
-                    color = ClodyTheme.colors.gray05,
-                    textAlign = TextAlign.Center
-                )
-                Spacer(modifier = Modifier.height(66.dp))
-                Image(
-                    painter = painterResource(id = pages[page].imageRes),
-                    contentDescription = null,
+                Column(
                     modifier = Modifier
-                        .fillMaxWidth(),
-                    contentScale = ContentScale.Fit
-                )
-            }
-        }
+                        .fillMaxSize()
+                        .background(color = ClodyTheme.colors.white),
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    Spacer(modifier = Modifier.heightForScreenPercentage(0.21f))
+                    HorizontalPager(
+                        state = pagerState,
+                    ) { page ->
+                        Column(
+                            horizontalAlignment = Alignment.CenterHorizontally,
+                            modifier = Modifier.fillMaxWidth()
+                        ) {
+                            Text(
+                                text = pages[page].title,
+                                style = ClodyTheme.typography.head1,
+                                color = ClodyTheme.colors.gray01,
+                                textAlign = TextAlign.Center
+                            )
+                            Text(
+                                text = pages[page].subtitle,
+                                style = ClodyTheme.typography.head1,
+                                color = ClodyTheme.colors.gray01,
+                                textAlign = TextAlign.Center
+                            )
+                            Spacer(modifier = Modifier.heightForScreenPercentage(0.02f))
+                            Text(
+                                text = pages[page].description,
+                                style = ClodyTheme.typography.body1Medium,
+                                color = ClodyTheme.colors.gray05,
+                                textAlign = TextAlign.Center
+                            )
+                            Spacer(modifier = Modifier.heightForScreenPercentage(0.04f))
+                            Image(
+                                painter = painterResource(id = pages[page].imageRes),
+                                contentDescription = null,
+                                modifier = Modifier
+                                    .fillMaxWidth(),
+                                contentScale = ContentScale.Fit
+                            )
+                        }
+                    }
 
-        Row(
-            modifier = Modifier
-                .constrainAs(indicator) {
-                    bottom.linkTo(nextButton.top, margin = 50.dp)
-                    start.linkTo(parent.start)
-                    end.linkTo(parent.end)
-                },
-            horizontalArrangement = Arrangement.Center
-        ) {
-            repeat(pagerState.pageCount) { iteration ->
-                val color = if (pagerState.currentPage == iteration) ClodyTheme.colors.gray03 else ClodyTheme.colors.gray07
-                Box(
-                    modifier = Modifier
-                        .padding(4.dp)
-                        .clip(CircleShape)
-                        .background(color)
-                        .size(6.dp)
-                )
+                    Spacer(modifier = Modifier.heightForScreenPercentage(0.2f))
+                    Row(
+                        horizontalArrangement = Arrangement.Center
+                    ) {
+                        repeat(pagerState.pageCount) { iteration ->
+                            val color = if (pagerState.currentPage == iteration) ClodyTheme.colors.gray03 else ClodyTheme.colors.gray07
+                            Box(
+                                modifier = Modifier
+                                    .padding(4.dp)
+                                    .clip(CircleShape)
+                                    .background(color)
+                                    .size(6.dp)
+                            )
+                        }
+                    }
+                }
             }
-        }
 
-        val coroutineScope = rememberCoroutineScope()
-        ClodyButton(
-            onClick = {
-                coroutineScope.launch {
-                    if (pagerState.currentPage < pages.size - 1) {
-                        pagerState.animateScrollToPage(pagerState.currentPage + 1)
-                    } else {
-                        onNextButtonClick()
-                    }
+            if (isExiting) {
+                LaunchedEffect(Unit) {
+                    delay(1000)
+                    onNextButtonClick()
                 }
-            },
-            text = if (pagerState.currentPage < pages.size - 1) "다음" else "시작하기",
-            enabled = true,
-            modifier = Modifier.constrainAs(nextButton) {
-                bottom.linkTo(parent.bottom, margin = 26.dp)
-                start.linkTo(parent.start)
-                end.linkTo(parent.end)
-                width = Dimension.fillToConstraints
             }
-        )
-    }
+        }
+    )
 }
 
 data class BoardingPage(