feat: 온보딩-온보딩 UI 구현

app/src/main/java/kr/co/call/callfromai/AppScreen.kt

@@ -3,6 +3,7 @@ package kr.co.call.callfromai
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.lifecycle.viewmodel.navigation3.rememberViewModelStoreNavEntryDecorator
 import androidx.compose.foundation.layout.exclude
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.ime
@@ -20,7 +21,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
-import androidx.lifecycle.viewmodel.navigation3.rememberViewModelStoreNavEntryDecorator
 import androidx.navigation3.runtime.entryProvider
 import androidx.navigation3.runtime.rememberNavBackStack
 import androidx.navigation3.runtime.rememberSaveableStateHolderNavEntryDecorator
@@ -43,8 +43,13 @@ import kr.co.call.api.ManagerChatRoomNayKey
 import kr.co.call.api.MyPageNavKey
 import kr.co.call.api.ProfileNavKey
 import kr.co.call.api.SubscriptionNavKey
+import kr.co.call.api.Onboarding1NavKey
+import kr.co.call.api.Onboarding2NavKey
+import kr.co.call.api.Onboarding3NavKey
+import kr.co.call.api.Onboarding4NavKey
+import kr.co.call.api.Onboarding5NavKey
+import kr.co.call.api.Onboarding6NavKey
 import kr.co.call.api.TermNavKey
-import kr.co.call.api.OnboardingNavKey
 import kr.co.call.callfromai.ui.MainBottomBar
 import kr.co.call.callfromai.ui.MainTab
 import kr.co.call.callfromai.util.toMainTab
@@ -95,7 +100,6 @@ fun AppScreen(modifier: Modifier = Modifier) {
     val bottomBarPadding = remember(bottomBarHeightPx) {
         with(density) { bottomBarHeightPx.toDp() }
     }
-
     Scaffold(
         modifier = modifier.fillMaxSize(),
         bottomBar = {
@@ -108,10 +112,9 @@ fun AppScreen(modifier: Modifier = Modifier) {
                 )
             }
         },
-        contentWindowInsets = WindowInsets.safeDrawing
-            .only(WindowInsetsSides.Bottom + WindowInsetsSides.Horizontal)
-            .exclude(WindowInsets.ime),
-
+        contentWindowInsets = WindowInsets.safeDrawing.only(
+            WindowInsetsSides.Bottom + WindowInsetsSides.Horizontal
+        ).exclude(WindowInsets.ime),
         ) { padding ->
         CompositionLocalProvider(
             LocalBottomBarPadding provides if (showBottomBar) bottomBarPadding else 0.dp,
@@ -126,16 +129,16 @@ fun AppScreen(modifier: Modifier = Modifier) {
                 entryProvider = entryProvider {
                     loginEntry(
                         navigateToLogin={
-                            appNavigator.navigate(LoginNavKey)
+                            appNavigator.replaceAll(LoginNavKey)
                         },
                         navigateToOnboarding = {
-                            appNavigator.navigate(OnboardingNavKey)
+                            appNavigator.replaceAll(Onboarding1NavKey)
                         },
                         navigateToHome = {
-                            appNavigator.navigate(HomeNavKey)
+                            appNavigator.replaceAll(HomeNavKey)
                         },
                         navigateToAgreement={
-                            appNavigator.navigate(AgreementNavKey)
+                            appNavigator.replaceAll(AgreementNavKey)
                         },
                         navigateToAgreementDetail={term ->
                             appNavigator.navigate(
@@ -147,13 +150,48 @@ fun AppScreen(modifier: Modifier = Modifier) {
                             )
                         },
                         navigateAfterAgreement={
-                            appNavigator.navigate(OnboardingNavKey)
+                            appNavigator.navigate(Onboarding1NavKey)
                         },
                         onBack={
                             appNavigator.popBackStack()
                         }
                     )
-                    onboardingEntry()
+                    onboardingEntry(
+                        onOnboarding1Next= {
+                            appNavigator.navigate(Onboarding2NavKey)
+                        },
+                        onBackFromOnboarding2 = {
+                            appNavigator.popBackStack()
+                        },
+                        onOnboarding2Next = {
+                            appNavigator.navigate(Onboarding3NavKey)
+                        },
+                        onBackFromOnboarding3 = {
+                            appNavigator.popBackStack()
+                        },
+                        onOnboarding3Next = {
+                            appNavigator.navigate(Onboarding4NavKey)
+                        },
+                        onBackFromOnboarding4 = {
+                            appNavigator.popBackStack()
+                        },
+                        onOnboarding4Next = {
+                            appNavigator.navigate(Onboarding5NavKey)
+                        },
+                        onBackFromOnboarding5 = {
+                            appNavigator.popBackStack()
+                        },
+                        onOnboarding5Next = {
+                            appNavigator.navigate(Onboarding6NavKey)
+                        },
+                        onOnboarding6CallNow = {
+                            //나중에 전화화면으로 바꾸기
+                            appNavigator.replaceAll(HomeNavKey)
+                        },
+                        onOnboarding6CallLater = {
+                            appNavigator.replaceAll(HomeNavKey)
+                        },
+                    )
                     homeEntry(
                         navigateToCall = { characterId ->
                             appNavigator.navigate(
@@ -163,7 +201,9 @@ fun AppScreen(modifier: Modifier = Modifier) {
                             )
                         },
                         navigateToCallRecord = { callId ->
-                            appNavigator.navigate(CallRecordNavKey(callId = callId))
+                            appNavigator.navigate(
+                                CallRecordNavKey(callId = callId),
+                            )
                         },
                         onCallRecordBack = {
                             appNavigator.popBackStack()

core/designsystem/src/main/java/kr/co/call/designsystem/theme/Color.kt

@@ -24,6 +24,9 @@ val SubGray2 = Color(0xFFF7F3F3)
 val SubRed = Color(0xFFFF0000)
 val SubBlue = Color(0xFF4391FF)
 
+val SubFire=Color(0xFFFF5677)
+val SubSoup=Color(0xFFFFCE91)
+
 val SubYellow=Color(0xFFFDE500)
 
 val SubPressed = Color(0xFFED5988)
@@ -81,6 +84,13 @@ val ChatGradientReverse = Brush.horizontalGradient(
     )
 )
 
+val DragGradient=Brush.horizontalGradient(
+    listOf(
+        Color(0xFFFFD092),
+        Color(0xFFFF4F75)
+    )
+)
+
 // ---------- Design System Colors ----------
 @Immutable
 data class CallColors(

core/designsystem/src/main/java/kr/co/call/designsystem/theme/Type.kt

@@ -59,6 +59,8 @@ data class CallTypography(
     // Others (line height 150%)
     val caption: TextStyle         = pretendard(12, 1.5f, FontWeight.Normal),
     val captionBold: TextStyle     = pretendard(12, 1.5f, FontWeight.SemiBold),
+    val captionSmall: TextStyle    = pretendard(8,1.5f, FontWeight.Normal),
+    val miniMedium: TextStyle      = pretendard(11,1.5f,FontWeight.Normal),
     val captionSmallBold: TextStyle = pretendard(8, 1.5f, FontWeight.SemiBold), // 신규
 )
 

feature/onboarding/api/src/main/java/kr/co/call/api/OnboardingRoute.kt

@@ -4,4 +4,21 @@ import androidx.navigation3.runtime.NavKey
 import kotlinx.serialization.Serializable
 
 @Serializable
-data object OnboardingNavKey : NavKey
+data object Onboarding1NavKey : NavKey
+
+@Serializable
+data object Onboarding2NavKey: NavKey {
+}
+
+@Serializable
+data object Onboarding3NavKey: NavKey
+
+@Serializable
+data object Onboarding4NavKey: NavKey
+
+@Serializable
+data object Onboarding5NavKey: NavKey
+
+@Serializable
+data object Onboarding6NavKey: NavKey
+

feature/onboarding/impl/build.gradle.kts

@@ -39,4 +39,7 @@ dependencies {
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
+
+    //coil 설정
+    implementation(libs.coil.compose)
 }

feature/onboarding/impl/src/main/java/kr/co/call/impl/component/AgeInputField.kt

@@ -0,0 +1,115 @@
+package kr.co.call.impl.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+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.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import kr.co.call.designsystem.theme.CallFromAiTheme
+import kr.co.call.designsystem.theme.CallTheme
+import kr.co.call.designsystem.theme.Gray100
+import kr.co.call.designsystem.theme.Gray600
+import kr.co.call.designsystem.theme.Gray900
+import kr.co.call.designsystem.theme.SubRed
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
+
+@Composable
+fun AgeInputField(
+    age: String,
+    onAgeChange: (String) -> Unit,
+    modifier: Modifier = Modifier,
+){
+    Column(modifier = modifier) {
+        Row {
+            Text(
+                text = "만 나이",
+                style = CallTheme.typography.bodyMedium,
+                color = Gray600,
+            )
+            Text(
+                text = "*",
+                style = CallTheme.typography.bodyMedium,
+                color = SubRed,
+            )
+        }
+
+        Spacer(modifier = Modifier.height(7.dp))
+
+        BasicTextField(
+            value = age,
+            onValueChange = { input ->
+                if (input.all(Char::isDigit)) onAgeChange(input)
+            },
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(51.dp)
+                .background(
+                    color = Gray100,
+                    shape = RoundedCornerShape(10.dp),
+                ),
+            singleLine = true,
+            keyboardOptions = KeyboardOptions(
+                keyboardType = KeyboardType.Number,
+            ),
+            textStyle = CallTheme.typography.bodyMediumMedium.copy(
+                color = Gray900,
+            ),
+            decorationBox = { innerTextField ->
+                Row(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .padding(
+                            start = 19.dp,
+                            top = 16.dp,
+                            end = 15.dp,
+                            bottom = 15.dp,
+                        ),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Box(modifier = Modifier.weight(1f)) {
+                        innerTextField()
+                    }
+                    Text(
+                        text = "(세)",
+                        style = CallTheme.typography.bodyMedium,
+                        color = Gray600,
+                    )
+                }
+            },
+        )
+    }
+}
+
+@Preview(
+    name = "AgeInputField",
+    showBackground = true,
+    widthDp = 393,
+)
+@Composable
+private fun AgeInputFieldPreview() {
+    var age by rememberSaveable { mutableStateOf("25") }
+    CallFromAiTheme {
+        AgeInputField(
+            age = age,
+            onAgeChange = { age = it },
+            modifier = Modifier.padding(16.dp),
+        )
+    }
+}

feature/onboarding/impl/src/main/java/kr/co/call/impl/component/BackStepBar.kt

@@ -0,0 +1,60 @@
+package kr.co.call.impl.component
+
+import androidx.compose.foundation.layout.Row
+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.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import kr.co.call.designsystem.theme.Black
+import kr.co.call.onboarding.impl.R
+
+@Composable
+fun BackStepBar(
+    onBackClick:()->Unit,
+    modifier: Modifier =Modifier,
+){
+    Row(
+        modifier=modifier
+            .fillMaxWidth()
+            .height(58.dp)
+            .padding(
+                start=0.dp,
+                end=8.dp,),
+        verticalAlignment = Alignment.CenterVertically,
+    ){
+        IconButton(
+            onClick=onBackClick,
+        ){
+            Icon(
+                painter= painterResource(R.drawable.ic_back),
+                contentDescription="뒤로가기",
+                tint= Black,
+                modifier=Modifier
+                    .size(
+                        width=8.dp,
+                        height=15.dp
+                    )
+            )
+        }
+    }
+}
+
+@Preview(
+    showBackground = true,
+    widthDp = 393,
+    heightDp=58
+)
+@Composable
+private fun BackTopBarPreview() {
+    BackStepBar(
+        onBackClick = {}
+    )
+}