CompleteScreen 가로모드, 태블릿 대응 (#154)

* CompleteScreen 가로 모드, 태블릿 대응

가로모드일때 이모지가 ide 에서 보이는 이미지와 다르게 보이는 것은 유감

* 가로 모드 판단 로직 간략화

* DevicePreview Portrait, Landscape 로 분리

Galaxy 23, Galaxy 23 Ultra 두 기종의 크기가 유의미하게 다르지 않으므로, 디바이스의 세로모드, 가로모드 확인용 preview 로 devicePreview annotation class 를 변경

core/ui/src/main/kotlin/com/nexters/bandalart/android/core/ui/DevicePreview.kt

@@ -3,13 +3,13 @@ package com.nexters.bandalart.android.core.ui
 import androidx.compose.ui.tooling.preview.Preview
 
 @Preview(
-  name = "Galaxy S23 Ultra",
+  name = "Portrait",
   showBackground = true,
-  device = "spec:width=360dp,height=772dp,dpi=411",
+  device = "spec:width=360dp,height=800dp,dpi=411",
 )
 @Preview(
-  name = "Galaxy S23",
+  name = "Landscape",
   showBackground = true,
-  device = "spec:width=360dp,height=800dp,dpi=500",
+  device = "spec:width=800dp,height=360dp,dpi=411",
 )
 annotation class DevicePreview

feature/complete/src/main/kotlin/com/nexters/bandalart/android/feature/complete/CompleteScreen.kt

@@ -1,6 +1,7 @@
 package com.nexters.bandalart.android.feature.complete
 
 import android.content.Intent
+import android.content.res.Configuration
 import android.widget.Toast
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -9,14 +10,19 @@ 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.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.airbnb.lottie.compose.LottieAnimation
@@ -29,6 +35,7 @@ import com.nexters.bandalart.android.core.ui.DevicePreview
 import com.nexters.bandalart.android.core.ui.ObserveAsEvents
 import com.nexters.bandalart.android.core.ui.R
 import com.nexters.bandalart.android.core.ui.component.BandalartButton
+import com.nexters.bandalart.android.core.ui.component.EmojiText
 import com.nexters.bandalart.android.core.ui.component.TitleText
 import com.nexters.bandalart.android.feature.complete.ui.CompleteBandalart
 import com.nexters.bandalart.android.feature.complete.ui.CompleteTopBar
@@ -72,6 +79,8 @@ internal fun CompleteScreen(
   modifier: Modifier = Modifier,
 ) {
   val context = LocalContext.current
+  val configuration = LocalConfiguration.current
+
   val composition by rememberLottieComposition(
     spec = LottieCompositionSpec.RawRes(
       com.nexters.bandalart.android.core.designsystem.R.raw.lottie_finish,
@@ -102,38 +111,71 @@ internal fun CompleteScreen(
     modifier = modifier.fillMaxSize(),
     color = Gray50,
   ) {
-    Box {
-      LottieAnimation(
-        composition = composition,
-        progress = { progress },
-        modifier = Modifier.align(Alignment.TopCenter),
-      )
-      Column(
-        Modifier.fillMaxSize(),
-        horizontalAlignment = Alignment.CenterHorizontally,
-      ) {
-        Spacer(modifier = Modifier.height(16.dp))
-        CompleteTopBar(onNavigateBack = navigateToHome)
-        Spacer(modifier = Modifier.height(40.dp))
-        TitleText(text = context.getString(R.string.complete_title))
-        Box(modifier = Modifier.fillMaxSize()) {
+    if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
+      Box {
+        Column(
+          modifier = Modifier
+            .fillMaxSize()
+            .verticalScroll(rememberScrollState()),
+          horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+          Spacer(modifier = Modifier.height(16.dp))
+          CompleteTopBar(onNavigateBack = navigateToHome)
+          TitleText(text = context.getString(R.string.complete_title))
+          Spacer(modifier = Modifier.height(32.dp))
+          EmojiText(emojiText = "🥳", fontSize = 100.sp)
+          Spacer(modifier = Modifier.height(32.dp))
           CompleteBandalart(
             profileEmoji = uiState.profileEmoji,
             title = uiState.title,
-            modifier = Modifier.align(Alignment.Center),
+            modifier = Modifier.width(328.dp),
           )
+          Spacer(modifier = Modifier.height(32.dp))
           // MVP 제외
           // SaveImageButton(modifier = Modifier.align(Alignment.BottomCenter))
           BandalartButton(
             onClick = shareBandalart,
             text = context.getString(R.string.complete_share),
             modifier = Modifier
-              .fillMaxWidth()
-              .align(Alignment.BottomCenter)
+              .width(328.dp)
               .padding(bottom = 32.dp),
           )
         }
       }
+    } else {
+      Box {
+        LottieAnimation(
+          composition = composition,
+          progress = { progress },
+          modifier = Modifier.align(Alignment.TopCenter),
+        )
+        Column(
+          modifier = Modifier.fillMaxSize(),
+          horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+          Spacer(modifier = Modifier.height(16.dp))
+          CompleteTopBar(onNavigateBack = navigateToHome)
+          Spacer(modifier = Modifier.height(40.dp))
+          TitleText(text = context.getString(R.string.complete_title))
+          Box(modifier = Modifier.fillMaxSize()) {
+            CompleteBandalart(
+              profileEmoji = uiState.profileEmoji,
+              title = uiState.title,
+              modifier = Modifier.align(Alignment.Center),
+            )
+            // MVP 제외
+            // SaveImageButton(modifier = Modifier.align(Alignment.BottomCenter))
+            BandalartButton(
+              onClick = shareBandalart,
+              text = context.getString(R.string.complete_share),
+              modifier = Modifier
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter)
+                .padding(bottom = 32.dp),
+            )
+          }
+        }
+      }
     }
   }
 }

feature/onboarding/src/main/kotlin/com/nexters/bandalart/android/feature/onboarding/OnBoardingScreen.kt

@@ -2,6 +2,7 @@
 
 package com.nexters.bandalart.android.feature.onboarding
 
+import android.content.res.Configuration
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
@@ -78,9 +79,6 @@ internal fun OnBoardingScreen(
   val context = LocalContext.current
   val currentLocale = context.getCurrentLocale()
   val configuration = LocalConfiguration.current
-  val screenWidth = configuration.screenWidthDp.dp
-  val screenHeight = configuration.screenHeightDp.dp
-  val isLandscape = screenWidth > screenHeight
 
   val composition by rememberLottieComposition(
     spec = LottieCompositionSpec.RawRes(
@@ -207,7 +205,7 @@ internal fun OnBoardingScreen(
                   }
                 }
               }
-              if (isLandscape) {
+              if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
                 BandalartButton(
                   onClick = { setOnboardingCompletedStatus(true) },
                   text = context.getString(R.string.onboarding_start),