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),