[BOOK-183] feat: 온보딩 화면 UI 구현

Author: easyhooon

app/build.gradle.kts

@@ -47,16 +47,17 @@ dependencies {
         projects.core.network,
         projects.core.ui,
 
+        projects.feature.detail,
         projects.feature.home,
         projects.feature.library,
         projects.feature.login,
         projects.feature.main,
+        projects.feature.onboarding,
         projects.feature.record,
         projects.feature.screens,
         projects.feature.search,
         projects.feature.settings,
         projects.feature.webview,
-        projects.feature.detail,
 
         libs.androidx.activity.compose,
         libs.androidx.startup,

core/common/src/main/kotlin/com/ninecraft/booket/core/common/utils/HighlightedText.kt

@@ -0,0 +1,30 @@
+package com.ninecraft.booket.core.common.utils
+
+import android.annotation.SuppressLint
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.withStyle
+
+@SuppressLint("ComposableNaming")
+@Composable
+fun HighlightedText(
+    fullText: String,
+    highlightText: String,
+    highlightColor: Color,
+): AnnotatedString {
+    return buildAnnotatedString {
+        val startIndex = fullText.indexOf(highlightText)
+        if (startIndex != -1) {
+            append(fullText.substring(0, startIndex))
+            withStyle(style = SpanStyle(color = highlightColor)) {
+                append(highlightText)
+            }
+            append(fullText.substring(startIndex + highlightText.length))
+        } else {
+            append(fullText)
+        }
+    }
+}

core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/NetworkImage.kt

@@ -19,7 +19,7 @@ fun NetworkImage(
     imageUrl: String,
     contentDescription: String,
     modifier: Modifier = Modifier,
-    placeholder: Painter? = null,
+    placeholder: Painter? = painterResource(R.drawable.ic_placeholder),
     contentScale: ContentScale = ContentScale.Crop,
 ) {
     CoilImage(

…ooket/core/designsystem/ResourceImage.kt …/designsystem/component/ResourceImage.ktcore/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/ResourceImage.kt renamed to core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/ResourceImage.kt core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/ResourceImage.kt renamed to core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/ResourceImage.kt

@@ -1,11 +1,15 @@
-package com.ninecraft.booket.core.designsystem
+package com.ninecraft.booket.core.designsystem.component
 
 import androidx.annotation.DrawableRes
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import com.ninecraft.booket.core.designsystem.ComponentPreview
+import com.ninecraft.booket.core.designsystem.R
+import com.ninecraft.booket.core.designsystem.theme.ReedTheme
 import com.skydoves.landscapist.ImageOptions
 import com.skydoves.landscapist.coil.CoilImage
 import com.skydoves.landscapist.components.rememberImageComponent
@@ -16,7 +20,7 @@ fun ResourceImage(
     @DrawableRes imageRes: Int,
     contentDescription: String,
     modifier: Modifier = Modifier,
-    placeholder: Painter? = null,
+    placeholder: Painter? = painterResource(R.drawable.ic_placeholder),
     contentScale: ContentScale = ContentScale.Crop,
 ) {
     CoilImage(
@@ -34,3 +38,15 @@ fun ResourceImage(
         previewPlaceholder = placeholder,
     )
 }
+
+@ComponentPreview
+@Composable
+private fun ResourceImagePreview() {
+    ReedTheme {
+        ResourceImage(
+            imageRes = 0,
+            contentDescription = "",
+            placeholder = painterResource(R.drawable.ic_placeholder),
+        )
+    }
+}

feature/login/src/main/kotlin/com/ninecraft/booket/feature/termsagreement/TermsAgreementPresenter.kt

@@ -7,7 +7,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import com.ninecraft.booket.core.common.constants.WebViewConstants
-import com.ninecraft.booket.feature.screens.BottomNavigationScreen
+import com.ninecraft.booket.feature.screens.OnboardingScreen
 import com.ninecraft.booket.feature.screens.TermsAgreementScreen
 import com.ninecraft.booket.feature.screens.WebViewScreen
 import com.slack.circuit.codegen.annotations.CircuitInject
@@ -59,7 +59,9 @@ class TermsAgreementPresenter @AssistedInject constructor(
                 }
 
                 is TermsAgreementUiEvent.OnStartButtonClick -> {
-                    navigator.resetRoot(BottomNavigationScreen)
+                    // TODO 온보딩 완료 여부 확인
+                    // navigator.resetRoot(BottomNavigationScreen)
+                    navigator.resetRoot(OnboardingScreen)
                 }
             }
         }

feature/onboarding/src/main/kotlin/com/ninecraft/booket/feature/onboarding/OnboardingPresenter.kt

@@ -1,8 +1,9 @@
 
+package com.ninecraft.booket.feature.onboarding
+
+import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
-import com.ninecraft.booket.feature.onboarding.OnboardingUiEvent
-import com.ninecraft.booket.feature.onboarding.OnboardingUiState
 import com.ninecraft.booket.feature.screens.HomeScreen
 import com.ninecraft.booket.feature.screens.OnboardingScreen
 import com.slack.circuit.codegen.annotations.CircuitInject
@@ -12,32 +13,44 @@ import dagger.assisted.Assisted
 import dagger.assisted.AssistedFactory
 import dagger.assisted.AssistedInject
 import dagger.hilt.android.components.ActivityRetainedComponent
+import kotlinx.coroutines.launch
+
+const val ONBOARDING_STEPS_COUNT = 3
 
-@Suppress("unused")
-class HomePresenter @AssistedInject constructor(
+class OnboardingPresenter @AssistedInject constructor(
     @Assisted private val navigator: Navigator,
 ) : Presenter<OnboardingUiState> {
 
     @Composable
     override fun present(): OnboardingUiState {
         val scope = rememberCoroutineScope()
+        val pagerState = rememberPagerState(pageCount = { ONBOARDING_STEPS_COUNT })
 
         fun handleEvent(event: OnboardingUiEvent) {
             when (event) {
                 is OnboardingUiEvent.OnNextButtonClick -> {
-                    navigator.resetRoot(HomeScreen)
+                    if (event.currentStep == 2) {
+                        navigator.resetRoot(HomeScreen)
+                    } else {
+                        pagerState.let { state ->
+                            scope.launch {
+                                state.animateScrollToPage(event.currentStep + 1)
+                            }
+                        }
+                    }
                 }
             }
         }
 
         return OnboardingUiState(
+            pagerState = pagerState,
             eventSink = ::handleEvent,
         )
     }
 
     @CircuitInject(OnboardingScreen::class, ActivityRetainedComponent::class)
     @AssistedFactory
     fun interface Factory {
-        fun create(navigator: Navigator): HomePresenter
+        fun create(navigator: Navigator): OnboardingPresenter
     }
 }