[mod/#66] 여정, 회원가입 2차 QA 반영

app/src/main/java/com/kiero/core/designsystem/component/chip/action/KieroCoinAction.kt

@@ -3,6 +3,7 @@ package com.kiero.core.designsystem.component.chip.action
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -30,7 +31,7 @@ class KieroCoinAction(
 ) : ChipAction {
     @Composable
     override fun invoke(modifier: Modifier) {
-        val coin = painterResource(id = R.drawable.img_kid_coin)
+        val coin = painterResource(id = R.drawable.img_coin)
 
         val targetColor = when {
             !isEnabled -> KieroTheme.colors.gray500
@@ -58,6 +59,7 @@ class KieroCoinAction(
                 painter = coin,
                 contentDescription = null,
                 modifier = Modifier
+                    .size(20.dp)
                     .forcePixelToDp(coin)
             )
 

app/src/main/java/com/kiero/presentation/auth/AuthScreen.kt

@@ -10,6 +10,7 @@ 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.size
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -59,7 +60,7 @@ fun AuthScreen(
     modifier: Modifier = Modifier,
     onEasterEggClick: () -> Unit = {},
 ) {
-    val logoPainter = painterResource(id = R.drawable.img_auth_app_logo)
+    val logoPainter = painterResource(id = R.drawable.ic_logo)
 
     Column(
         modifier = modifier
@@ -86,7 +87,9 @@ fun AuthScreen(
         Image(
             painter = logoPainter,
             contentDescription = null,
-            modifier = Modifier.forcePixelToDp(logoPainter)
+            modifier = Modifier
+                .size(width = 300.dp, height = 63.dp)
+                .forcePixelToDp(logoPainter)
         )
 
         Spacer(modifier = Modifier.weight(1f))

app/src/main/java/com/kiero/presentation/auth/component/AuthButton.kt

@@ -7,6 +7,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.material3.ripple
@@ -50,7 +51,9 @@ fun AuthButton(
         Image(
             painter = painter,
             contentDescription = null,
-            modifier = Modifier.forcePixelToDp(painter)
+            modifier = Modifier
+                .size(50.dp)
+                .forcePixelToDp(painter)
         )
 
         Text(
@@ -69,7 +72,7 @@ private fun AuthButtonPreview() {
     KieroTheme {
         AuthButton(
             text = "부모님으로 시작하기",
-            icon = com.kiero.R.drawable.img_auth_parent_goblin_small,
+            icon = com.kiero.R.drawable.img_auth_parent_goblin,
             onClickButton = {}
         )
     }

app/src/main/java/com/kiero/presentation/auth/kid/AuthKidSignupScreen.kt

@@ -1,6 +1,7 @@
 package com.kiero.presentation.auth.kid
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
@@ -13,7 +14,9 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusDirection
+import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -80,13 +83,22 @@ fun AuthKidSignupScreen(
     onDone: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
+    val focusManager = LocalFocusManager.current
+    val keyboardController = LocalSoftwareKeyboardController.current
+
     with(state.kidSignUpUiModel) {
         Column(
             modifier = modifier
                 .fillMaxSize()
                 .background(
                     color = KieroTheme.colors.black
                 )
+                .pointerInput(Unit) {
+                    detectTapGestures(onTap = {
+                        focusManager.clearFocus()
+                        keyboardController?.hide()
+                    })
+                }
                 .padding(paddingValues),
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {

app/src/main/java/com/kiero/presentation/kid/journey/component/KidJourneyGoblinMessage.kt

@@ -48,7 +48,7 @@ fun KidJourneyGoblinMessage(
                     withStyle(SpanStyle(color = mainColor)) {
                         append(content.scheduleName)
                     }
-                    append(" 야!")
+                    append(" !")
                 },
                 color = defaultColor,
                 style = textStyle
@@ -127,10 +127,10 @@ fun KidJourneyGoblinMessage(
             )
         }
 
-        // "오늘의 여정은 모두 끝났어\n내일도 우리 함께하자!"
+        // "오늘의 여정은 모두 끝났어.\n내일도 우리 함께하자!"
         is KidJourneyContentUiModel.FireLit -> {
             Text(
-                text = "오늘의 여정은 모두 끝났어",
+                text = "오늘의 여정은 모두 끝났어.",
                 color = defaultColor,
                 style = textStyle
             )
@@ -151,7 +151,7 @@ private fun KidJourneyGoblinMessagePreview() {
             name = "꾸비"
         ) {
             KidJourneyGoblinMessage(
-                content = KidJourneyContentUiModel.NowSchedule(
+                content = KidJourneyContentUiModel.FirstSchedule(
                     scheduleDetailId = 1,
                     scheduleName = "피아노 학원 가기",
                     stoneType = StoneUiType.WISDOM,

app/src/main/java/com/kiero/presentation/kid/journey/component/KidJourneyHeader.kt

@@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -24,30 +25,40 @@ fun KidJourneyHeader(
     modifier: Modifier = Modifier,
     isFireLit: Boolean = false
 ) {
-    Row(
-        modifier = modifier.fillMaxWidth(),
-        verticalAlignment = Alignment.CenterVertically
+    Column(
+        modifier = modifier.fillMaxWidth()
     ) {
-        Column {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.Top
+        ) {
             KidProfileChip(kidName = header.kidName)
-            Text(
-                text = header.currentDate,
-                style = KieroTheme.typography.regular.body3,
-                color = KieroTheme.colors.gray500
-            )
-        }
 
-        Spacer(modifier = Modifier.weight(1f))
+            Spacer(modifier = Modifier.weight(1f))
 
-        Column(horizontalAlignment = Alignment.End) {
             KieroChip(
                 action = KieroCoinAction(
                     coinCount = header.coinCount,
                     onClick = {}
-                )
+                ),
+                modifier = Modifier.padding(top = 5.dp),
+                isEnabled = true
+            )
+        }
+
+        Spacer(modifier = Modifier.height(4.dp))
+
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.Top
+        ) {
+            Text(
+                text = header.currentDate,
+                style = KieroTheme.typography.regular.body3,
+                color = KieroTheme.colors.gray500
             )
 
-            Spacer(modifier = Modifier.height(8.dp))
+            Spacer(modifier = Modifier.weight(1f))
 
             KieroChip(
                 action = KieroStoneAction(

app/src/main/java/com/kiero/presentation/kid/mission/KidMissionScreen.kt

@@ -106,7 +106,8 @@ private fun KidMissionScreen(
             stickyHeader {
                 Row(
                     modifier = Modifier
-                        .fillMaxWidth(),
+                        .fillMaxWidth()
+                        .background(color = KieroTheme.colors.black),
                     verticalAlignment = Alignment.CenterVertically
                 ) {
                     KidProfileChip(
@@ -120,7 +121,8 @@ private fun KidMissionScreen(
                             coinCount = 150,
                             isEnabled = true,
                             onClick = {}
-                        )
+                        ),
+                        isEnabled = true
                     )
                 }
             }

app/src/main/java/com/kiero/presentation/kid/onboarding/KidOnboardingScreen.kt

@@ -5,6 +5,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
@@ -19,10 +20,13 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.kiero.core.common.extension.collectSideEffect
 import com.kiero.core.common.extension.noRippleClickable
 import com.kiero.core.designsystem.component.button.KieroButtonMedium
+import com.kiero.core.designsystem.component.indicator.KieroLoadingIndicator
 import com.kiero.core.designsystem.theme.KieroTheme
+import com.kiero.core.model.UiState
 import com.kiero.presentation.kid.component.KidSpeechField
 import com.kiero.presentation.kid.onboarding.component.KidOnboardingMessage
 import com.kiero.presentation.kid.onboarding.model.OnboardingUiModel
@@ -36,23 +40,36 @@ fun KidOnboardingRoute(
     navigateToKid: () -> Unit,
     viewModel: KidOnboardingViewModel = hiltViewModel()
 ) {
+    val state by viewModel.state.collectAsStateWithLifecycle()
+
     viewModel.sideEffect.collectSideEffect {
         when (it) {
             KidOnboardingSideEffect.NavigateToKid -> navigateToKid()
         }
     }
 
-    KidOnboardingScreen(
-        paddingValues = paddingValues,
-        navigateToKid = viewModel::startJourney,
-        onSkipClick = {},
-        onNextClick = {}
-    )
+    when (val uiState = state) {
+        is UiState.Loading -> {
+            KieroLoadingIndicator()
+        }
+        is UiState.Success -> {
+            KidOnboardingScreen(
+                paddingValues = paddingValues,
+                kidName = uiState.data.kidName,
+                navigateToKid = viewModel::startJourney,
+                onSkipClick = {},
+                onNextClick = {}
+            )
+        }
+        is UiState.Failure -> {}
+        UiState.Empty -> {}
+    }
 }
 
 @Composable
 fun KidOnboardingScreen(
     paddingValues: PaddingValues,
+    kidName: String,
     navigateToKid: () -> Unit,
     onNextClick: () -> Unit,
     onSkipClick: () -> Unit,
@@ -77,7 +94,6 @@ fun KidOnboardingScreen(
         modifier = modifier
             .fillMaxSize()
             .background(color = KieroTheme.colors.black)
-            .padding(paddingValues),
     ) {
         Image(
             painter = painterResource(id = currentStep.backImage),
@@ -89,8 +105,10 @@ fun KidOnboardingScreen(
         Column(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(top = 527.dp)
+                .padding(paddingValues),
         ) {
+            Spacer(modifier = Modifier.weight(1f))
+
             if (currentStep == OnboardingUiModel.STORY5) {
                 KidSpeechField(
                     name = "꾸비",
@@ -111,13 +129,14 @@ fun KidOnboardingScreen(
                     buttonText = "다음",
                     isVisibleButton = true,
                     nextButtonColor = KieroTheme.colors.main,
+                    onClick = moveToNextStep
                 ) {
-                    KidOnboardingMessage(step = currentStep)
+                    KidOnboardingMessage(step = currentStep, kidName = kidName)
                 }
             }
 
             KieroButtonMedium(
-                text = "여정 시작하기",
+                text = "시작해보자!",
                 onClick = navigateToKid,
                 modifier = Modifier
                     .alpha(if (currentStep == OnboardingUiModel.STORY5) 1f else 0f)
@@ -128,13 +147,13 @@ fun KidOnboardingScreen(
     }
 }
 
-
 @Preview
 @Composable
 private fun KidOnboardingStoryScreenPreview() {
     KieroTheme {
         KidOnboardingScreen(
             paddingValues = PaddingValues(),
+            kidName = "",
             navigateToKid = {},
             onSkipClick = {},
             onNextClick = {}

app/src/main/java/com/kiero/presentation/kid/onboarding/component/KidOnboardingMessage.kt

@@ -11,7 +11,8 @@ import com.kiero.presentation.kid.onboarding.model.OnboardingUiModel
 
 @Composable
 fun KidOnboardingMessage(
-    step: OnboardingUiModel
+    step: OnboardingUiModel,
+    kidName: String = ""
 ) {
     val mainColor = KieroTheme.colors.main
     val defaultColor = KieroTheme.colors.gray300
@@ -20,7 +21,7 @@ fun KidOnboardingMessage(
     when (step) {
         OnboardingUiModel.STORY1 -> {
             Text(
-                text = "드디어 만났다! 나의 짝궁 근영",
+                text = "드디어 만났다! 나의 짝궁 $kidName",
                 color = defaultColor,
                 style = textStyle
             )

app/src/main/java/com/kiero/presentation/kid/onboarding/state/KidOnboardingContract.kt

@@ -1,5 +1,12 @@
 package com.kiero.presentation.kid.onboarding.state
 
+import androidx.compose.runtime.Immutable
+
+@Immutable
+data class KidOnboardingState(
+    val kidName: String
+)
+
 sealed interface KidOnboardingSideEffect {
     data object NavigateToKid : KidOnboardingSideEffect
 }