[refactor] LocalConfiguration BoxWithConstraints 로 대체

medi-jihun-lee · medi-jihun-lee · commit bb203e761a32 · 2025-02-13T14:21:05.000+09:00
KMP/CMP 에선 LocalConfiguration 을 사용할 수 없음
따라서 BoxWithConstraints 를 통해 화면의 세로, 가로 길이를 구하는 방식으로 대체
diff --git a/composeApp/src/commonMain/kotlin/com/nexters/bandalart/BandalartApp.kt b/composeApp/src/commonMain/kotlin/com/nexters/bandalart/BandalartApp.kt
@@ -1,5 +1,6 @@
 package com.nexters.bandalart
 
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
@@ -10,37 +11,38 @@ import androidx.compose.material3.SnackbarResult
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.unit.dp
 import com.nexters.bandalart.navigation.BandalartNavHost
 import com.nexters.bandalart.ui.BandalartSnackbar
 
 @Composable
 fun BandalartApp() {
-    val snackbarHostState = remember { SnackbarHostState() }
-    val height = LocalConfiguration.current.screenHeightDp
+    BoxWithConstraints {
+        val snackbarHostState = remember { SnackbarHostState() }
+        val screenHeight = maxHeight.value
 
-    Scaffold(
-        snackbarHost = {
-            SnackbarHost(
-                modifier = Modifier
-                    .padding(bottom = (height - 96).dp)
-                    .height(36.dp),
-                hostState = snackbarHostState,
-                snackbar = {
-                    BandalartSnackbar(message = it.visuals.message)
+        Scaffold(
+            snackbarHost = {
+                SnackbarHost(
+                    modifier = Modifier
+                        .padding(bottom = (screenHeight - 96).dp)
+                        .height(36.dp),
+                    hostState = snackbarHostState,
+                    snackbar = {
+                        BandalartSnackbar(message = it.visuals.message)
+                    },
+                )
+            },
+        ) { innerPadding ->
+            BandalartNavHost(
+                modifier = Modifier.padding(innerPadding),
+                onShowSnackbar = { message ->
+                    snackbarHostState.showSnackbar(
+                        message = message,
+                        duration = SnackbarDuration.Short,
+                    ) == SnackbarResult.ActionPerformed
                 },
             )
-        },
-    ) { innerPadding ->
-        BandalartNavHost(
-            modifier = Modifier.padding(innerPadding),
-            onShowSnackbar = { message ->
-                snackbarHostState.showSnackbar(
-                    message = message,
-                    duration = SnackbarDuration.Short,
-                ) == SnackbarResult.ActionPerformed
-            },
-        )
+        }
     }
 }
diff --git a/composeApp/src/commonMain/kotlin/com/nexters/bandalart/feature/home/ui/bandalart/BandalartChart.kt b/composeApp/src/commonMain/kotlin/com/nexters/bandalart/feature/home/ui/bandalart/BandalartChart.kt
@@ -2,6 +2,7 @@ package com.nexters.bandalart.feature.home.ui.bandalart
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
@@ -10,8 +11,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.layout.layoutId
-import androidx.compose.ui.platform.LocalConfiguration
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.Constraints
 import androidx.compose.ui.unit.dp
 import bandalart.composeapp.generated.resources.Res
@@ -33,82 +32,81 @@ fun BandalartChart(
     onHomeUiAction: (HomeUiAction) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    val screenWidthDp = LocalConfiguration.current.screenWidthDp.dp
-    val paddedMaxWidth = remember(screenWidthDp) {
-        screenWidthDp - (15.dp * 2)
-    }
+    BoxWithConstraints {
+        val paddedMaxWidth = remember(maxWidth) { maxWidth - (15.dp * 2) }
 
-    val subCellList = persistentListOf(
-        SubCell(2, 3, 1, 1, bandalartCellData.children[0]),
-        SubCell(3, 2, 1, 0, bandalartCellData.children[1]),
-        SubCell(3, 2, 1, 1, bandalartCellData.children[2]),
-        SubCell(2, 3, 0, 1, bandalartCellData.children[3]),
-    )
+        val subCellList = persistentListOf(
+            SubCell(2, 3, 1, 1, bandalartCellData.children[0]),
+            SubCell(3, 2, 1, 0, bandalartCellData.children[1]),
+            SubCell(3, 2, 1, 1, bandalartCellData.children[2]),
+            SubCell(2, 3, 0, 1, bandalartCellData.children[3]),
+        )
 
-    Layout(
-        modifier = modifier
-            .fillMaxWidth()
-            .clip(RoundedCornerShape(8.dp)),
-        content = {
-            for (index in subCellList.indices) {
+        Layout(
+            modifier = modifier
+                .fillMaxWidth()
+                .clip(RoundedCornerShape(8.dp)),
+            content = {
+                for (index in subCellList.indices) {
+                    Box(
+                        modifier = Modifier
+                            .layoutId(stringResource(Res.string.home_layout_id, index + 1))
+                            .clip(RoundedCornerShape(12.dp))
+                            .background(color = Gray300),
+                    ) {
+                        BandalartCellGrid(
+                            bandalartData = bandalartData,
+                            subCell = subCellList[index],
+                            rows = subCellList[index].rowCnt,
+                            cols = subCellList[index].colCnt,
+                            onHomeUiAction = onHomeUiAction,
+                        )
+                    }
+                }
                 Box(
                     modifier = Modifier
-                        .layoutId(stringResource(Res.string.home_layout_id, index + 1))
-                        .clip(RoundedCornerShape(12.dp))
-                        .background(color = Gray300),
+                        .layoutId(stringResource(Res.string.home_main_id))
+                        .clip(RoundedCornerShape(10.dp))
+                        .background(color = bandalartData.mainColor.toColor()),
                 ) {
-                    BandalartCellGrid(
+                    BandalartCell(
+                        cellType = CellType.MAIN,
                         bandalartData = bandalartData,
-                        subCell = subCellList[index],
-                        rows = subCellList[index].rowCnt,
-                        cols = subCellList[index].colCnt,
+                        cellData = bandalartCellData,
                         onHomeUiAction = onHomeUiAction,
                     )
                 }
-            }
-            Box(
-                modifier = Modifier
-                    .layoutId(stringResource(Res.string.home_main_id))
-                    .clip(RoundedCornerShape(10.dp))
-                    .background(color = bandalartData.mainColor.toColor()),
-            ) {
-                BandalartCell(
-                    cellType = CellType.MAIN,
-                    bandalartData = bandalartData,
-                    cellData = bandalartCellData,
-                    onHomeUiAction = onHomeUiAction,
-                )
-            }
-        },
-    ) { measurables, constraints ->
-        val sub1 = measurables.first { it.layoutId == "Sub 1" }
-        val sub2 = measurables.first { it.layoutId == "Sub 2" }
-        val sub3 = measurables.first { it.layoutId == "Sub 3" }
-        val sub4 = measurables.first { it.layoutId == "Sub 4" }
-        val main = measurables.first { it.layoutId == "Main" }
+            },
+        ) { measurables, constraints ->
+            val sub1 = measurables.first { it.layoutId == "Sub 1" }
+            val sub2 = measurables.first { it.layoutId == "Sub 2" }
+            val sub3 = measurables.first { it.layoutId == "Sub 3" }
+            val sub4 = measurables.first { it.layoutId == "Sub 4" }
+            val main = measurables.first { it.layoutId == "Main" }
 
-        val chartWidth = paddedMaxWidth.roundToPx()
-        val mainWidth = chartWidth / 5
-        val padding = 1.dp.roundToPx()
+            val chartWidth = paddedMaxWidth.roundToPx()
+            val mainWidth = chartWidth / 5
+            val padding = 1.dp.roundToPx()
 
-        val mainConstraints = Constraints.fixed(width = mainWidth, height = mainWidth)
-        val sub1Constraints = Constraints.fixed(width = mainWidth * 3 - padding, height = mainWidth * 2 - padding)
-        val sub2Constraints = Constraints.fixed(width = mainWidth * 2 - padding, height = mainWidth * 3 - padding)
-        val sub3Constraints = Constraints.fixed(width = mainWidth * 2 - padding, height = mainWidth * 3 - padding)
-        val sub4Constraints = Constraints.fixed(width = mainWidth * 3 - padding, height = mainWidth * 2 - padding)
+            val mainConstraints = Constraints.fixed(width = mainWidth, height = mainWidth)
+            val sub1Constraints = Constraints.fixed(width = mainWidth * 3 - padding, height = mainWidth * 2 - padding)
+            val sub2Constraints = Constraints.fixed(width = mainWidth * 2 - padding, height = mainWidth * 3 - padding)
+            val sub3Constraints = Constraints.fixed(width = mainWidth * 2 - padding, height = mainWidth * 3 - padding)
+            val sub4Constraints = Constraints.fixed(width = mainWidth * 3 - padding, height = mainWidth * 2 - padding)
 
-        val mainPlaceable = main.measure(mainConstraints)
-        val sub1Placeable = sub1.measure(sub1Constraints)
-        val sub2Placeable = sub2.measure(sub2Constraints)
-        val sub3Placeable = sub3.measure(sub3Constraints)
-        val sub4Placeable = sub4.measure(sub4Constraints)
+            val mainPlaceable = main.measure(mainConstraints)
+            val sub1Placeable = sub1.measure(sub1Constraints)
+            val sub2Placeable = sub2.measure(sub2Constraints)
+            val sub3Placeable = sub3.measure(sub3Constraints)
+            val sub4Placeable = sub4.measure(sub4Constraints)
 
-        layout(width = chartWidth, height = chartWidth) {
-            mainPlaceable.place(x = mainWidth * 2, y = mainWidth * 2)
-            sub1Placeable.place(x = 0, y = 0)
-            sub2Placeable.place(x = mainWidth * 3 + padding, y = 0)
-            sub3Placeable.place(x = 0, y = mainWidth * 2 + padding)
-            sub4Placeable.place(x = mainWidth * 2 + padding, y = mainWidth * 3 + padding)
+            layout(width = chartWidth, height = chartWidth) {
+                mainPlaceable.place(x = mainWidth * 2, y = mainWidth * 2)
+                sub1Placeable.place(x = 0, y = 0)
+                sub2Placeable.place(x = mainWidth * 3 + padding, y = 0)
+                sub3Placeable.place(x = 0, y = mainWidth * 2 + padding)
+                sub4Placeable.place(x = mainWidth * 2 + padding, y = mainWidth * 3 + padding)
+            }
         }
     }
 }
diff --git a/composeApp/src/commonMain/kotlin/com/nexters/bandalart/feature/home/ui/bandalart/BandalartSkeletonScreen.kt b/composeApp/src/commonMain/kotlin/com/nexters/bandalart/feature/home/ui/bandalart/BandalartSkeletonScreen.kt
@@ -3,6 +3,7 @@ package com.nexters.bandalart.feature.home.ui.bandalart
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -32,8 +33,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Color.Companion.White
 import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.layout.layoutId
-import androidx.compose.ui.platform.LocalConfiguration
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.Constraints
 import androidx.compose.ui.unit.Dp
@@ -244,84 +243,82 @@ fun BandalartSkeletonChart(
     mainBrush: Brush,
     modifier: Modifier = Modifier,
 ) {
-    val context = LocalContext.current
-    val screenWidthDp = LocalConfiguration.current.screenWidthDp.dp
-    val paddedMaxWidth = remember(screenWidthDp) {
-        screenWidthDp - (15.dp * 2)
-    }
+    BoxWithConstraints {
+        val paddedMaxWidth = remember(maxWidth) { maxWidth - (15.dp * 2) }
 
-    val subCellList = persistentListOf(
-        SkeletonSubCell(2, 3, 1, 1, null),
-        SkeletonSubCell(3, 2, 1, 0, null),
-        SkeletonSubCell(3, 2, 1, 1, null),
-        SkeletonSubCell(2, 3, 0, 1, null),
-    )
+        val subCellList = persistentListOf(
+            SkeletonSubCell(2, 3, 1, 1, null),
+            SkeletonSubCell(3, 2, 1, 0, null),
+            SkeletonSubCell(3, 2, 1, 1, null),
+            SkeletonSubCell(2, 3, 0, 1, null),
+        )
 
-    Layout(
-        modifier = Modifier
-            .fillMaxWidth()
-            .clip(RoundedCornerShape(8.dp)),
-        content = {
-            for (index in subCellList.indices) {
+        Layout(
+            modifier = Modifier
+                .fillMaxWidth()
+                .clip(RoundedCornerShape(8.dp)),
+            content = {
+                for (index in subCellList.indices) {
+                    Box(
+                        modifier
+                            .layoutId(stringResource(Res.string.home_layout_id, index + 1))
+                            .clip(RoundedCornerShape(12.dp))
+                            .background(color = Gray200),
+                    ) {
+                        SkeletonCellGrid(
+                            rows = subCellList[index].rowCnt,
+                            cols = subCellList[index].colCnt,
+                            subCell = subCellList[index],
+                            taskBrush = taskBrush,
+                            subBrush = subBrush,
+                            mainBrush = mainBrush,
+                        )
+                    }
+                }
                 Box(
                     modifier
-                        .layoutId(stringResource(Res.string.home_layout_id, index + 1))
-                        .clip(RoundedCornerShape(12.dp))
-                        .background(color = Gray200),
+                        .layoutId(stringResource(Res.string.home_main_id))
+                        .clip(RoundedCornerShape(10.dp))
+                        .background(brush = taskBrush),
                 ) {
-                    SkeletonCellGrid(
-                        rows = subCellList[index].rowCnt,
-                        cols = subCellList[index].colCnt,
-                        subCell = subCellList[index],
+                    SkeletonCell(
+                        cellType = CellType.MAIN,
                         taskBrush = taskBrush,
                         subBrush = subBrush,
                         mainBrush = mainBrush,
                     )
                 }
-            }
-            Box(
-                modifier
-                    .layoutId(stringResource(Res.string.home_main_id))
-                    .clip(RoundedCornerShape(10.dp))
-                    .background(brush = taskBrush),
-            ) {
-                SkeletonCell(
-                    cellType = CellType.MAIN,
-                    taskBrush = taskBrush,
-                    subBrush = subBrush,
-                    mainBrush = mainBrush,
-                )
-            }
-        },
-    ) { measurables, constraints ->
-        val sub1 = measurables.first { it.layoutId == "Sub 1" }
-        val sub2 = measurables.first { it.layoutId == "Sub 2" }
-        val sub3 = measurables.first { it.layoutId == "Sub 3" }
-        val sub4 = measurables.first { it.layoutId == "Sub 4" }
-        val main = measurables.first { it.layoutId == "Main" }
+            },
+        ) { measurables, constraints ->
+            val sub1 = measurables.first { it.layoutId == "Sub 1" }
+            val sub2 = measurables.first { it.layoutId == "Sub 2" }
+            val sub3 = measurables.first { it.layoutId == "Sub 3" }
+            val sub4 = measurables.first { it.layoutId == "Sub 4" }
+            val main = measurables.first { it.layoutId == "Main" }
 
-        val chartWidth = paddedMaxWidth.roundToPx()
-        val mainWidth = chartWidth / 5
-        val padding = 1.dp.roundToPx()
+            val chartWidth = paddedMaxWidth.roundToPx()
+            val mainWidth = chartWidth / 5
+            val padding = 1.dp.roundToPx()
 
-        val mainConstraints = Constraints.fixed(width = mainWidth, height = mainWidth)
-        val sub1Constraints = Constraints.fixed(width = mainWidth * 3 - padding, height = mainWidth * 2 - padding)
-        val sub2Constraints = Constraints.fixed(width = mainWidth * 2 - padding, height = mainWidth * 3 - padding)
-        val sub3Constraints = Constraints.fixed(width = mainWidth * 2 - padding, height = mainWidth * 3 - padding)
-        val sub4Constraints = Constraints.fixed(width = mainWidth * 3 - padding, height = mainWidth * 2 - padding)
+            val mainConstraints = Constraints.fixed(width = mainWidth, height = mainWidth)
+            val sub1Constraints = Constraints.fixed(width = mainWidth * 3 - padding, height = mainWidth * 2 - padding)
+            val sub2Constraints = Constraints.fixed(width = mainWidth * 2 - padding, height = mainWidth * 3 - padding)
+            val sub3Constraints = Constraints.fixed(width = mainWidth * 2 - padding, height = mainWidth * 3 - padding)
+            val sub4Constraints = Constraints.fixed(width = mainWidth * 3 - padding, height = mainWidth * 2 - padding)
 
-        val mainPlaceable = main.measure(mainConstraints)
-        val sub1Placeable = sub1.measure(sub1Constraints)
-        val sub2Placeable = sub2.measure(sub2Constraints)
-        val sub3Placeable = sub3.measure(sub3Constraints)
-        val sub4Placeable = sub4.measure(sub4Constraints)
+            val mainPlaceable = main.measure(mainConstraints)
+            val sub1Placeable = sub1.measure(sub1Constraints)
+            val sub2Placeable = sub2.measure(sub2Constraints)
+            val sub3Placeable = sub3.measure(sub3Constraints)
+            val sub4Placeable = sub4.measure(sub4Constraints)
 
-        layout(width = chartWidth, height = chartWidth) {
-            mainPlaceable.place(x = mainWidth * 2, y = mainWidth * 2)
-            sub1Placeable.place(x = 0, y = 0)
-            sub2Placeable.place(x = mainWidth * 3 + padding, y = 0)
-            sub3Placeable.place(x = 0, y = mainWidth * 2 + padding)
-            sub4Placeable.place(x = mainWidth * 2 + padding, y = mainWidth * 3 + padding)
+            layout(width = chartWidth, height = chartWidth) {
+                mainPlaceable.place(x = mainWidth * 2, y = mainWidth * 2)
+                sub1Placeable.place(x = 0, y = 0)
+                sub2Placeable.place(x = mainWidth * 3 + padding, y = 0)
+                sub3Placeable.place(x = 0, y = mainWidth * 2 + padding)
+                sub4Placeable.place(x = mainWidth * 2 + padding, y = mainWidth * 3 + padding)
+            }
         }
     }
 }
