[feature/#38] 요정 등장화면 폴드 기기대응

Author: haeti-dev

feature/result/src/commonMain/kotlin/com/nexters/emotia/feature/result/fairy/FairyScreen.kt

@@ -18,6 +18,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -41,6 +42,7 @@ import coil3.compose.SubcomposeAsyncImage
 import coil3.request.ImageRequest
 import coil3.request.crossfade
 import com.nexters.emotia.core.designsystem.component.TypingAnimatedSpeechBubble
+import com.nexters.emotia.core.designsystem.theme.EmotiaTheme.colors
 import com.nexters.emotia.feature.result.fairy.contract.FairyIntent
 import com.nexters.emotia.feature.result.fairy.contract.FairySideEffect
 import emotia.core.designsystem.generated.resources.Res
@@ -98,6 +100,7 @@ fun FairyScreen(
     Box(
         modifier = modifier
             .fillMaxSize()
+            .background(colors.black)
             .navigationBarsPadding()
             .clickable(
                 interactionSource = remember { MutableInteractionSource() },
@@ -112,46 +115,74 @@ fun FairyScreen(
                 }
             }
     ) {
-        Column(modifier = Modifier.fillMaxSize()) {
-            Box(modifier = Modifier.fillMaxWidth()) {
-                Image(
-                    painter = painterResource(Res.drawable.img_letter_background),
-                    contentDescription = "Background Image",
-                    modifier = Modifier.fillMaxWidth(),
-                    contentScale = ContentScale.FillWidth
-                )
+        Box(
+            modifier = Modifier.fillMaxSize(),
+            contentAlignment = Alignment.TopCenter
+        ) {
+            Column(
+                modifier = Modifier
+                    .widthIn(max = 500.dp)
+                    .fillMaxWidth()
+            ) {
+                Box(modifier = Modifier.fillMaxWidth()) {
+                    Image(
+                        painter = painterResource(Res.drawable.img_letter_background),
+                        contentDescription = "Background Image",
+                        modifier = Modifier.fillMaxWidth(),
+                        contentScale = ContentScale.FillWidth
+                    )
 
-                SubcomposeAsyncImage(
-                    model = ImageRequest.Builder(LocalPlatformContext.current)
-                        .data(fairyImage)
-                        .crossfade(true)
-                        .build(),
-                    contentDescription = "$fairyImage image",
-                    contentScale = ContentScale.Inside,
+                    SubcomposeAsyncImage(
+                        model = ImageRequest.Builder(LocalPlatformContext.current)
+                            .data(fairyImage)
+                            .crossfade(true)
+                            .build(),
+                        contentDescription = "$fairyImage image",
+                        contentScale = ContentScale.Inside,
+                        modifier = Modifier
+                            .size(108.dp)
+                            .align(Alignment.BottomCenter)
+                            .offset(y = (-49).dp)
+                            .clip(RoundedCornerShape(16.dp)),
+                        error = {
+                            // TODO : 에러 이미지 처리
+                        },
+                    )
+                }
+
+                Box(
                     modifier = Modifier
-                        .size(108.dp)
-                        .align(Alignment.BottomCenter)
-                        .offset(y = (-49).dp)
-                        .clip(RoundedCornerShape(16.dp)),
-                    error = {
-                        // TODO : 에러 이미지 처리
-                    },
+                        .weight(1f)
+                        .fillMaxWidth()
+                        .background(
+                            brush = Brush.verticalGradient(
+                                colors = listOf(
+                                    Color(0xFF171E2D),
+                                    Color(0xFF1A1A1B)
+                                )
+                            )
+                        )
                 )
             }
 
-            Box(
-                modifier = Modifier
-                    .weight(1f)
-                    .fillMaxWidth()
-                    .background(
-                        brush = Brush.verticalGradient(
-                            colors = listOf(
-                                Color(0xFF171E2D),
-                                Color(0xFF1A1A1B)
-                            )
+            if (stepTexts != null && animatedRadius >= 1800f) {
+                Box(
+                    modifier = Modifier
+                        .widthIn(max = 500.dp)
+                        .align(Alignment.BottomCenter)
+                ) {
+                    AnimatedVisibility(
+                        visible = true,
+                        enter = fadeIn(tween(300)),
+                        exit = fadeOut(tween(300))
+                    ) {
+                        TypingAnimatedSpeechBubble(
+                            fullText = stepTexts,
+                            useAlternativeBackground = false
                         )
-                    )
-            )
+                    }
+                }
+            }
         }
 
         if (animatedRadius < 1800f) {
@@ -181,19 +212,6 @@ fun FairyScreen(
             }
         }
 
-        if (stepTexts != null && animatedRadius >= 1800f) {
-            AnimatedVisibility(
-                visible = true,
-                enter = fadeIn(tween(300)),
-                exit = fadeOut(tween(300)),
-                modifier = Modifier.align(Alignment.BottomCenter)
-            ) {
-                TypingAnimatedSpeechBubble(
-                    fullText = stepTexts,
-                    useAlternativeBackground = false
-                )
-            }
-        }
     }
 }