Feat: 인트로 화면 캐릭터 그래픽 추가

Author: wjdrjs00

core/designsystem/src/main/res/drawable-hdpi/intro_character.png

@@ -1,23 +1,28 @@
 package com.threegap.bitnagil.presentation.intro
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 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.material3.Button
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalWindowInfo
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
+import com.threegap.bitnagil.designsystem.BitnagilTheme
+import com.threegap.bitnagil.designsystem.R
+import com.threegap.bitnagil.designsystem.component.atom.BitnagilTextButton
 import com.threegap.bitnagil.presentation.intro.model.IntroIntent
 import com.threegap.bitnagil.presentation.intro.model.IntroSideEffect
 import org.orbitmvi.orbit.compose.collectSideEffect
@@ -45,47 +50,46 @@ private fun IntroScreen(
     onStartButtonClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
+    val windowInfo = LocalWindowInfo.current
+    val screenHeight = with(LocalDensity.current) {
+        windowInfo.containerSize.height.toDp()
+    }
+
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
-        modifier = modifier
-            .fillMaxSize()
-            .padding(horizontal = 16.dp),
+        modifier = modifier.fillMaxSize(),
     ) {
+        Spacer(modifier = Modifier.height(screenHeight * 0.0748f))
+
         Text(
             text = "당신의 하루 리듬을 이해하고,\n작은 변화를 함께 시작해볼게요.",
+            color = BitnagilTheme.colors.navy500,
+            style = BitnagilTheme.typography.title2Bold,
             textAlign = TextAlign.Center,
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(top = 48.dp),
+            modifier = Modifier.fillMaxWidth(),
         )
 
-        Spacer(
-            modifier = Modifier.height(38.dp),
-        )
+        Spacer(modifier = Modifier.height(screenHeight * 0.151f))
 
-        Box(
+        Image(
+            painter = painterResource(R.drawable.intro_character),
+            contentDescription = null,
+            contentScale = ContentScale.Fit,
             modifier = Modifier
-                .background(Color.Gray)
-                .fillMaxWidth()
-                .height(458.dp),
-        ) {
-            Text(
-                text = "빛나길 로고",
-            )
-        }
-
-        Spacer(
-            modifier = Modifier.height(38.dp),
+                .padding(50.dp)
+                .aspectRatio(260f / 295f),
         )
 
-        Button(
+        Spacer(modifier = Modifier.weight(1f))
+
+        BitnagilTextButton(
+            text = "시작하기",
             onClick = onStartButtonClick,
             modifier = Modifier
                 .fillMaxWidth()
+                .padding(horizontal = 16.dp)
                 .padding(bottom = 20.dp),
-        ) {
-            Text("시작하기")
-        }
+        )
     }
 }