NR-128 힌트 화면을 XML -> Compose로 마이그레이션

gradle/libs.versions.toml

@@ -52,6 +52,8 @@ biometric = "1.1.0"
 flipper = "0.200.0"
 soloader = "0.10.4"
 leak-canary = "2.14"
+compose-bom = "2024.02.00"
+coil = "2.5.0"
 
 [libraries]
 androidx-activity-ktx = { module = "androidx.activity:activity-ktx", version.ref = "activity-ktx" }
@@ -113,6 +115,19 @@ credentials-auth = { module = "androidx.credentials:credentials-play-services-au
 google-identity = { module = "com.google.android.libraries.identity.googleid:googleid", version.ref = "google-identity" }
 leak-canary = { module = "com.squareup.leakcanary:leakcanary-android", version.ref = "leak-canary" }
 
+# Compose
+androidx-compose-bom = { module = "androidx.compose:compose-bom", version.ref = "compose-bom" }
+androidx-compose-ui = { module = "androidx.compose.ui:ui" }
+androidx-compose-ui-graphics = { module = "androidx.compose.ui:ui-graphics" }
+androidx-compose-foundation = { module = "androidx.compose.foundation:foundation" }
+androidx-compose-material3 = { module = "androidx.compose.material3:material3" }
+androidx-compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling" }
+androidx-compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview" }
+androidx-activity-compose = { module = "androidx.activity:activity-compose", version = "1.8.2" }
+androidx-lifecycle-viewmodel-compose = { module = "androidx.lifecycle:lifecycle-viewmodel-compose", version.ref = "lifecycle" }
+androidx-lifecycle-runtime-compose = { module = "androidx.lifecycle:lifecycle-runtime-compose", version.ref = "lifecycle" }
+coil-compose = { module = "io.coil-kt:coil-compose", version.ref = "coil" }
+
 [plugins]
 android-application = { id = "com.android.application", version.ref = "android" }
 android-library = { id = "com.android.library", version.ref = "android" }
@@ -134,3 +149,13 @@ network = ["retrofit", "converter-gson", "logging-interceptor"]
 db = ["androidx-datastore", "androidx-datastore-preferences-core", "androidx-room-runtime", "androidx-room-ktx"]
 firebase = ["firebase-analytics-ktx", "firebase-crashlytics-ktx"]
 flipper = ["flipper", "soloader", "flipper-network-plugin"]
+compose = [
+    "androidx-compose-ui",
+    "androidx-compose-ui-graphics",
+    "androidx-compose-foundation",
+    "androidx-compose-ui-tooling-preview",
+    "androidx-compose-material3",
+    "androidx-activity-compose",
+    "androidx-lifecycle-viewmodel-compose",
+    "androidx-lifecycle-runtime-compose"
+]

presentation/build.gradle.kts

@@ -38,9 +38,10 @@ android {
     buildFeatures {
         viewBinding = true
         buildConfig = true
+        compose = true
     }
     composeOptions {
-        kotlinCompilerExtensionVersion = "1.5.2"
+        kotlinCompilerExtensionVersion = "1.5.3"  // Kotlin 1.9.10과 호환
     }
 }
 
@@ -75,6 +76,12 @@ dependencies {
     implementation(libs.photoview)
     implementation(libs.biometric)
     debugImplementation(libs.leak.canary)
+
+    // Compose
+    implementation(platform(libs.androidx.compose.bom))
+    implementation(libs.bundles.compose)
+    debugImplementation(libs.androidx.compose.ui.tooling)
+    implementation(libs.coil.compose)
 
     implementation(platform(libs.firebase.bom))
     implementation(libs.firebase.analytics.ktx)

presentation/src/main/java/com/nextroom/nextroom/presentation/base/ComposeBaseFragment.kt

@@ -0,0 +1,34 @@
+package com.nextroom.nextroom.presentation.base
+
+import android.os.Bundle
+import android.view.View
+import androidx.core.os.bundleOf
+import androidx.fragment.app.Fragment
+import com.google.firebase.analytics.FirebaseAnalytics
+import com.nextroom.nextroom.presentation.extension.updateSystemPadding
+
+abstract class ComposeBaseFragment : Fragment() {
+    abstract val screenName: String
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+        updateSystemPadding()
+
+        initSubscribe()
+        initObserve()
+        setFragmentResultListeners()
+        initViews()
+    }
+
+    open fun initSubscribe() {}
+    open fun initObserve() {}
+    open fun setFragmentResultListeners() {}
+    open fun initViews() {}
+
+    override fun onResume() {
+        super.onResume()
+
+        FirebaseAnalytics.getInstance(requireContext())
+            .logEvent("screen_view", bundleOf("screen_name" to screenName))
+    }
+}

presentation/src/main/java/com/nextroom/nextroom/presentation/base/ComposeBaseViewModelFragment.kt

@@ -0,0 +1,32 @@
+package com.nextroom.nextroom.presentation.base
+
+import androidx.navigation.fragment.findNavController
+import com.nextroom.nextroom.presentation.NavGraphDirections
+import com.nextroom.nextroom.presentation.R
+import com.nextroom.nextroom.presentation.common.NROneButtonDialog
+import com.nextroom.nextroom.presentation.extension.repeatOnStarted
+import com.nextroom.nextroom.presentation.extension.safeNavigate
+import kotlinx.coroutines.launch
+
+abstract class ComposeBaseViewModelFragment<VM : NewBaseViewModel> : ComposeBaseFragment() {
+    abstract val viewModel: VM
+
+    override fun initObserve() {
+        super.initObserve()
+
+        viewLifecycleOwner.repeatOnStarted {
+            launch {
+                viewModel.errorFlow.collect {
+                    NavGraphDirections.moveToNrOneButtonDialog(
+                        NROneButtonDialog.NROneButtonArgument(
+                            title = getString(R.string.dialog_noti),
+                            message = getString(R.string.error_something),
+                            btnText = getString(R.string.text_confirm),
+                            errorText = it.message,
+                        )
+                    ).also { findNavController().safeNavigate(it) }
+                }
+            }
+        }
+    }
+}

presentation/src/main/java/com/nextroom/nextroom/presentation/common/compose/NRColor.kt

@@ -0,0 +1,53 @@
+package com.nextroom.nextroom.presentation.common.compose
+
+import androidx.compose.ui.graphics.Color
+
+object NRColor {
+    // Basic Colors
+    val White = Color(0xFFFFFFFF)
+    val White5 = Color(0x0DFFFFFF)
+    val White12 = Color(0x1FFFFFFF)
+    val White20 = Color(0x33FFFFFF)
+    val White50 = Color(0x80FFFFFF)
+    val White70 = Color(0xB3FFFFFF)
+
+    val Black = Color(0xFF1D1B20)
+    val Black60 = Color(0x99000000)
+    val OnSurface = Color(0xFF1D1B20)
+    val Surface = Color(0xFFFEF7FF)
+
+    // Material Colors
+    val ColorPrimary = Color(0xFF6750A4)
+    val ColorSurface = Color(0xFFFEF7FF)
+    val ColorSecondarySurface = Color(0x146750A4)
+    val ColorLightPrimary = Color(0x146750A4)
+
+    // Blue
+    val Blue = Color(0xFF378EFF)
+    val Blue15 = Color(0x26378EFF)
+
+    // Gray Scale
+    val Dark01 = Color(0xFF151516)
+    val Gray01 = Color(0xFF9898A0)
+    val Gray02 = Color(0xFF47474E)
+    val Gray03 = Color(0xFF222223)
+    val Gray04 = Color(0xFF999999)
+    val Gray05 = Color(0xFF46454A)
+
+    // Red
+    val Red = Color(0xFFFF5065)
+    val Red02 = Color(0xFFF04438)
+
+    // Sub Colors
+    val Sub1 = Color(0xFF1F2023)
+    val Sub2 = Color(0xFF3A3B3D)
+
+    // Background
+    val BgMain = Color(0xFF131417)
+
+    // Button Colors
+    val PrimaryButtonBackground = Color(0xFFFFFFFF)
+    val DisabledButtonBackground = Color(0xFF2D2D2D)
+    val PrimaryButtonText = Color(0xFF000000)
+    val DisabledButtonText = Color(0xFF555555)
+}

presentation/src/main/java/com/nextroom/nextroom/presentation/common/compose/NRLoading.kt

@@ -0,0 +1,41 @@
+package com.nextroom.nextroom.presentation.common.compose
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.CircularProgressIndicator
+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.input.pointer.pointerInput
+import androidx.compose.ui.tooling.preview.Preview
+
+@Composable
+fun NRLoading(
+    isVisible: Boolean,
+    modifier: Modifier = Modifier
+) {
+    if (!isVisible) return
+
+    Box(
+        modifier = modifier
+            .fillMaxSize()
+            .background(Color.Transparent)
+            .pointerInput(Unit) {
+                detectTapGestures { }
+            },
+        contentAlignment = Alignment.Center
+    ) {
+        CircularProgressIndicator(color = NRColor.White)
+    }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFF151516)
+@Composable
+private fun NRLoadingPreview() {
+    Box(modifier = Modifier.fillMaxSize()) {
+        NRLoading(isVisible = true)
+    }
+}

presentation/src/main/java/com/nextroom/nextroom/presentation/common/compose/NRToolbar.kt

@@ -0,0 +1,83 @@
+package com.nextroom.nextroom.presentation.common.compose
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+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.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+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.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.nextroom.nextroom.presentation.R
+import com.nextroom.nextroom.presentation.extension.throttleClick
+
+@Composable
+fun NRToolbar(
+    title: String,
+    onBackClick: () -> Unit,
+    onRightButtonClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Box(
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = title,
+            style = NRTypo.Poppins.size20,
+            color = NRColor.White,
+            textAlign = TextAlign.Center,
+        )
+
+        Row(
+            modifier = modifier
+                .fillMaxWidth()
+                .height(64.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
+            Image(
+                painter = painterResource(R.drawable.ic_navigate_back_24),
+                modifier = modifier
+                    .size(64.dp)
+                    .throttleClick { onBackClick() }
+                    .padding(20.dp),
+                contentDescription = null,
+            )
+
+            Text(
+                text = stringResource(R.string.memo_button),
+                color = NRColor.Dark01,
+                style = NRTypo.Poppins.size14,
+                modifier = modifier
+                    .padding(end = 20.dp)
+                    .background(
+                        color = NRColor.White,
+                        shape = RoundedCornerShape(size = 50.dp)
+                    )
+                    .padding(vertical = 6.dp, horizontal = 16.dp)
+                    .throttleClick { onRightButtonClick() }
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFF1D1B20)
+@Composable
+private fun NRToolbarPreview() {
+    NRToolbar(
+        title = "01:23:45",
+        onBackClick = {},
+        onRightButtonClick = {}
+    )
+}