Component, Screen Preview 구성

app/src/main/kotlin/com/nexters/bandalart/android/ui/BandalartApp.kt

@@ -52,11 +52,11 @@ fun BandalartApp(
             Box(Modifier.fillMaxSize()) {
               FixedSizeText(
                 text = it.visuals.message,
-                fontWeight = FontWeight.W600,
                 color = Gray700,
                 fontSize = 12.sp,
-                letterSpacing = -(0.24).sp,
+                fontWeight = FontWeight.W600,
                 modifier = Modifier.align(Alignment.Center),
+                letterSpacing = -(0.24).sp,
               )
             }
           }

core/ui/build.gradle.kts

@@ -14,6 +14,7 @@ android {
 }
 
 dependencies {
+  coreLibraryDesugaring(libs.desugar.jdk)
   implementations(
     projects.core.designsystem,
     projects.core.util,

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

@@ -0,0 +1,6 @@
+package com.nexters.bandalart.android.core.ui
+
+import androidx.compose.ui.tooling.preview.Preview
+
+@Preview(showBackground = true)
+annotation class ComponentPreview

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

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

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

@@ -1,11 +1,8 @@
 package com.nexters.bandalart.android.core.ui
 
-import android.app.Activity
-import android.graphics.Rect
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -23,19 +20,6 @@ val StatusBarAndActionBarHeightDp
     WindowInsets.systemBars.getTop(this).toDp()
   }
 
-val StatusBarHeightDp
-  @Composable
-  get() = with(LocalContext.current) {
-    val activity = this as Activity
-
-    val rectangle = Rect()
-    activity.window.decorView.getWindowVisibleDisplayFrame(rectangle)
-
-    with(LocalDensity.current) {
-      rectangle.top.toDp()
-    }
-  }
-
 // https://stackoverflow.com/questions/75123079/how-do-i-detect-which-type-of-navigation-bar-is-active
 @Composable
 fun getNavigationBarPadding(): Dp {

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

@@ -9,6 +9,7 @@ import androidx.compose.ui.unit.sp
 import com.nexters.bandalart.android.core.designsystem.theme.Gray900
 import com.nexters.bandalart.android.core.designsystem.theme.koronaOneRegular
 import com.nexters.bandalart.android.core.designsystem.theme.neurimboGothicRegular
+import com.nexters.bandalart.android.core.ui.ComponentPreview
 import com.nexters.bandalart.android.core.ui.R
 import com.nexters.bandalart.android.core.util.extension.getCurrentLocale
 import java.util.Locale
@@ -17,8 +18,7 @@ import java.util.Locale
 fun AppTitle(
   modifier: Modifier = Modifier,
 ) {
-  val context = LocalContext.current
-  val currentLocale = context.getCurrentLocale()
+  val currentLocale = LocalContext.current.getCurrentLocale()
 
   when (currentLocale.language) {
     Locale.KOREAN.language -> {
@@ -41,10 +41,10 @@ fun AppKoreanTitle(
 ) {
   FixedSizeText(
     text = stringResource(R.string.bandalart),
-    modifier = modifier,
     color = Gray900,
     fontSize = 28.sp,
     fontWeight = FontWeight.W400,
+    modifier = modifier,
     fontFamily = neurimboGothicRegular,
     lineHeight = 20.sp,
     letterSpacing = (-0.56).sp,
@@ -56,13 +56,31 @@ fun AppEnglishTitle(
   modifier: Modifier = Modifier,
 ) {
   FixedSizeText(
-    modifier = modifier,
     text = stringResource(R.string.bandalart),
     color = Gray900,
     fontSize = 18.sp,
     fontWeight = FontWeight.W400,
+    modifier = modifier,
     fontFamily = koronaOneRegular,
     lineHeight = 20.sp,
     letterSpacing = (-0.36).sp,
   )
 }
+
+@ComponentPreview
+@Composable
+fun AppTitlePreview() {
+  AppTitle()
+}
+
+@ComponentPreview
+@Composable
+fun AppKoreanTitlePreview() {
+  AppKoreanTitle()
+}
+
+@ComponentPreview
+@Composable
+fun AppEnglishTitlePreview() {
+  AppEnglishTitle()
+}

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

@@ -2,6 +2,7 @@ package com.nexters.bandalart.android.core.ui.component
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -15,6 +16,7 @@ import androidx.compose.ui.unit.sp
 import com.nexters.bandalart.android.core.designsystem.theme.Gray900
 import com.nexters.bandalart.android.core.designsystem.theme.White
 import com.nexters.bandalart.android.core.designsystem.theme.pretendard
+import com.nexters.bandalart.android.core.ui.ComponentPreview
 import com.nexters.bandalart.android.core.ui.extension.clickableSingle
 
 @Composable
@@ -34,12 +36,22 @@ fun BandalartButton(
   ) {
     FixedSizeText(
       text = text,
-      fontFamily = pretendard,
+      color = White,
+      fontSize = 16.sp,
       fontWeight = FontWeight.W700,
       modifier = Modifier.padding(horizontal = 32.dp),
-      fontSize = 16.sp,
-      color = White,
+      fontFamily = pretendard,
       letterSpacing = (-0.32).sp,
     )
   }
 }
+
+@ComponentPreview
+@Composable
+fun BandalartButtonPreview() {
+  BandalartButton(
+    onClick = {},
+    text = "시작하기",
+    modifier = Modifier.fillMaxWidth(),
+  )
+}

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

@@ -28,6 +28,7 @@ import com.nexters.bandalart.android.core.designsystem.theme.Gray200
 import com.nexters.bandalart.android.core.designsystem.theme.Gray400
 import com.nexters.bandalart.android.core.designsystem.theme.Gray900
 import com.nexters.bandalart.android.core.designsystem.theme.White
+import com.nexters.bandalart.android.core.ui.ComponentPreview
 import com.nexters.bandalart.android.core.ui.R
 
 @Composable
@@ -60,23 +61,23 @@ fun BandalartDeleteAlertDialog(
         )
         Spacer(modifier = Modifier.height(18.dp))
         FixedSizeText(
-          modifier = Modifier.align(Alignment.CenterHorizontally),
           text = title,
           color = Gray900,
           fontSize = 20.sp,
           fontWeight = FontWeight.W700,
+          modifier = Modifier.align(Alignment.CenterHorizontally),
           textAlign = TextAlign.Center,
           lineHeight = 30.sp,
           letterSpacing = (-0.4).sp,
         )
         if (message != null) {
           Spacer(modifier = Modifier.height(8.dp))
           FixedSizeText(
-            modifier = Modifier.align(Alignment.CenterHorizontally),
             text = message,
             color = Gray400,
             fontSize = 14.sp,
             fontWeight = FontWeight.W500,
+            modifier = Modifier.align(Alignment.CenterHorizontally),
             textAlign = TextAlign.Center,
             letterSpacing = (-0.28).sp,
           )
@@ -124,9 +125,9 @@ fun BandalartDeleteAlertDialog(
           ) {
             FixedSizeText(
               text = context.getString(R.string.delete_bandalart_delete),
+              color = White,
               fontSize = 16.sp,
               fontWeight = FontWeight.W600,
-              color = White,
             )
           }
         }
@@ -135,3 +136,14 @@ fun BandalartDeleteAlertDialog(
     }
   }
 }
+
+@ComponentPreview
+@Composable
+fun BandalartDeleteAlertDialogPreview() {
+  BandalartDeleteAlertDialog(
+    title = "반다라트를 삭제하시겠어요?",
+    message = "삭제한 반다라트는 다시 복구할 수 없어요.",
+    onDeleteClicked = {},
+    onCancelClicked = {},
+  )
+}