[QA] 디테일 스크린 해상도 대응

feature/detail/src/main/java/team/ppac/detail/DetailRoute.kt

@@ -13,6 +13,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
@@ -36,6 +37,7 @@ import team.ppac.common.android.util.shareOneLink
 import team.ppac.designsystem.R
 import team.ppac.detail.mvi.DetailIntent
 import team.ppac.detail.mvi.DetailSideEffect
+import team.ppac.detail.util.DetailScreenSize
 import kotlin.math.roundToInt
 
 @Composable
@@ -46,7 +48,10 @@ internal fun DetailRoute(
     navigateToBack: () -> Unit,
 ) {
     val context = LocalContext.current
+    val configuration = LocalConfiguration.current
 
+    val currentDetailScreenSize =
+        DetailScreenSize.from(configuration.screenWidthDp.dp, configuration.screenHeightDp.dp)
     val lottieComposition by rememberLottieComposition(
         LottieCompositionSpec.RawRes(R.raw.lol_rising_effect)
     )
@@ -59,7 +64,6 @@ internal fun DetailRoute(
     val saveBitmap: (Bitmap) -> Unit = {
         bitmap = it
     }
-
     BaseComposable(viewModel = viewModel) { uiState ->
         ComposableLifecycle { _, event ->
             when (event) {
@@ -183,7 +187,8 @@ internal fun DetailRoute(
                     },
                     onClickButtonButtons = viewModel::intent,
                     saveBitmap = saveBitmap,
-                    onHashTagsClick = { viewModel.intent(DetailIntent.ClickHashtags) }
+                    onHashTagsClick = { viewModel.intent(DetailIntent.ClickHashtags) },
+                    currentDetailScreenSize = currentDetailScreenSize,
                 )
                 LottieAnimation(
                     modifier = Modifier

feature/detail/src/main/java/team/ppac/detail/DetailScreen.kt

@@ -3,30 +3,35 @@ package team.ppac.detail
 import android.graphics.Bitmap
 import android.os.Build
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.BlurEffect
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
 import coil.request.CachePolicy
 import coil.request.ImageRequest
-import kotlinx.collections.immutable.persistentListOf
 import team.ppac.designsystem.FarmemeTheme
 import team.ppac.designsystem.component.scaffold.FarmemeScaffold
 import team.ppac.designsystem.component.toolbar.FarmemeBackToolBar
+import team.ppac.designsystem.foundation.FarmemeRadius
 import team.ppac.detail.component.DetailBottomBar
 import team.ppac.detail.component.DetailContent
-import team.ppac.detail.model.DetailMemeUiModel
 import team.ppac.detail.mvi.DetailIntent
 import team.ppac.detail.mvi.DetailUiState
+import team.ppac.detail.mvi.DetailUiState.Companion.PREVIEW_STATE
+import team.ppac.detail.util.DetailScreenSize
 
 @Composable
 internal fun DetailScreen(
@@ -38,6 +43,7 @@ internal fun DetailScreen(
     onClickButtonButtons: (DetailIntent.ClickBottomButton) -> Unit,
     saveBitmap: (bitmap: Bitmap) -> Unit,
     onHashTagsClick: () -> Unit,
+    currentDetailScreenSize: DetailScreenSize,
 ) {
     FarmemeScaffold(
         modifier = modifier,
@@ -94,14 +100,47 @@ internal fun DetailScreen(
                 .fillMaxSize(),
             contentAlignment = Alignment.Center
         ) {
-            DetailContent(
-                uiModel = uiState.detailMemeUiModel,
-                isLoading = uiState.isLoading,
-                saveBitmap = saveBitmap,
-                onClickFunnyButton = onClickFunnyButton,
-                onReactionButtonPositioned = onReactionButtonPosition,
-                onHashTagsClick = onHashTagsClick
-            )
+            Box(
+                modifier = modifier
+                    .border(
+                        width = 2.dp,
+                        color = FarmemeTheme.borderColor.primary,
+                        shape = FarmemeRadius.Radius20.shape,
+                    )
+                    .clip(FarmemeRadius.Radius20.shape)
+                    .background(FarmemeTheme.backgroundColor.white),
+            ) {
+                if (currentDetailScreenSize == DetailScreenSize.SMALL) {
+                    Box(
+                        modifier = Modifier.padding(10.dp),
+                        contentAlignment = Alignment.BottomCenter
+                    ) {
+                        DetailContent(
+                            uiModel = uiState.detailMemeUiModel,
+                            isLoading = uiState.isLoading,
+                            saveBitmap = saveBitmap,
+                            onClickFunnyButton = onClickFunnyButton,
+                            onReactionButtonPositioned = onReactionButtonPosition,
+                            onHashTagsClick = onHashTagsClick,
+                            currentDetailScreenSize = currentDetailScreenSize
+                        )
+                    }
+                } else {
+                    Column(
+                        modifier = Modifier.padding(10.dp),
+                    ) {
+                        DetailContent(
+                            uiModel = uiState.detailMemeUiModel,
+                            isLoading = uiState.isLoading,
+                            saveBitmap = saveBitmap,
+                            onClickFunnyButton = onClickFunnyButton,
+                            onReactionButtonPositioned = onReactionButtonPosition,
+                            onHashTagsClick = onHashTagsClick,
+                            currentDetailScreenSize = currentDetailScreenSize
+                        )
+                    }
+                }
+            }
         }
     }
 }
@@ -110,25 +149,13 @@ internal fun DetailScreen(
 @Composable
 fun PreviewDetailScreen() {
     DetailScreen(
-        uiState = DetailUiState(
-            memeId = "",
-            detailMemeUiModel = DetailMemeUiModel(
-                imageUrl = "",
-                name = "나는 공부를 찢어",
-                hashTags = persistentListOf("공부", "학생", "시험기간", "힘듦", "피곤"),
-                sourceDescription = "출처에 대한 내용이 들어갑니다.",
-                isSavedMeme = false,
-                reactionCount = 0,
-                isReaction = false,
-            ),
-            isError = false,
-            isLoading = false,
-        ),
+        uiState = PREVIEW_STATE,
         onClickFunnyButton = {},
         onReactionButtonPosition = { _ -> },
         onClickBackButton = {},
         onClickButtonButtons = {},
         saveBitmap = {},
-        onHashTagsClick = {}
+        onHashTagsClick = {},
+        currentDetailScreenSize = DetailScreenSize.MEDIUM
     )
 }