[FEAT/#735] Add native ad to bottom navigation (#738)

angryPodo · web-flow · commit 8839aee8f9c8 · 2026-03-18T11:58:02.000+09:00
diff --git a/build-logic/convention/src/main/kotlin/com/hilingual/buildlogic/BuildType.kt b/build-logic/convention/src/main/kotlin/com/hilingual/buildlogic/BuildType.kt
@@ -44,6 +44,11 @@ fun Project.configureBuildTypes(
             "ADMOB_INLINEBANNER_UNIT_ID",
             properties.getQuotedProperty("admob.inlinebanner.$prefix.id")
         )
+        buildConfigField(
+            "String",
+            "ADMOB_NATIVE_UNIT_ID",
+            properties.getQuotedProperty("admob.native.$prefix.id")
+        )
     }
 
     commonExtension.apply {
diff --git a/core/ads/build.gradle.kts b/core/ads/build.gradle.kts
@@ -12,6 +12,7 @@ android {
 
 dependencies {
     implementation(projects.core.common)
+    implementation(projects.core.designsystem)
     implementation(libs.gma.ads)
 
     // Workaround for GMA Next Gen SDK beta03 Cronet namespace bug
diff --git a/core/ads/src/main/java/com/hilingual/core/ads/native/HilingualNativeLineAd.kt b/core/ads/src/main/java/com/hilingual/core/ads/native/HilingualNativeLineAd.kt
@@ -0,0 +1,44 @@
+package com.hilingual.core.ads.native
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalInspectionMode
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.viewinterop.AndroidView
+import com.hilingual.core.ads.native.component.NativeLineAdContent
+import com.hilingual.core.designsystem.theme.HilingualTheme
+
+@Composable
+fun HilingualNativeLineAd(
+    adUnitId: String,
+    modifier: Modifier = Modifier,
+) {
+    val isPreviewMode = LocalInspectionMode.current
+
+    if (isPreviewMode) {
+        NativeLineAdContent(
+            title = "광고 이름",
+            body = "메인 카피",
+            modifier = modifier,
+        )
+    } else {
+        val nativeAd = rememberNativeAd(adUnitId)
+        if (nativeAd != null) {
+            AndroidView(
+                modifier = modifier.fillMaxWidth(),
+                factory = { context ->
+                    createNativeAdView(context, nativeAd)
+                },
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun HilingualNativeLineAdPreview() {
+    HilingualTheme {
+        HilingualNativeLineAd("")
+    }
+}
diff --git a/core/ads/src/main/java/com/hilingual/core/ads/native/RememberNativeAd.kt b/core/ads/src/main/java/com/hilingual/core/ads/native/RememberNativeAd.kt
@@ -0,0 +1,73 @@
+package com.hilingual.core.ads.native
+
+import android.content.Context
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.platform.ComposeView
+import com.google.android.libraries.ads.mobile.sdk.common.LoadAdError
+import com.google.android.libraries.ads.mobile.sdk.nativead.NativeAd
+import com.google.android.libraries.ads.mobile.sdk.nativead.NativeAdLoader
+import com.google.android.libraries.ads.mobile.sdk.nativead.NativeAdLoaderCallback
+import com.google.android.libraries.ads.mobile.sdk.nativead.NativeAdRequest
+import com.google.android.libraries.ads.mobile.sdk.nativead.NativeAdView
+import com.hilingual.core.ads.native.component.NativeLineAdContent
+import timber.log.Timber
+
+@Composable
+internal fun rememberNativeAd(adUnitId: String): NativeAd? {
+    var loadedAdState by remember { mutableStateOf<NativeAd?>(null) }
+
+    DisposableEffect(adUnitId) {
+        var isDisposed = false
+
+        val adRequest = NativeAdRequest.Builder(
+            adUnitId = adUnitId,
+            nativeAdTypes = listOf(NativeAd.NativeAdType.NATIVE),
+        ).build()
+
+        val adCallback = object : NativeAdLoaderCallback {
+            override fun onNativeAdLoaded(nativeAd: NativeAd) {
+                if (isDisposed) nativeAd.destroy() else loadedAdState = nativeAd
+            }
+
+            override fun onAdFailedToLoad(adError: LoadAdError) {
+                Timber.tag("GMA").e("GMA Next Gen 네이티브 광고 로드 실패: %s", adError)
+            }
+        }
+
+        NativeAdLoader.load(adRequest, adCallback)
+
+        onDispose {
+            isDisposed = true
+            loadedAdState?.destroy()
+            loadedAdState = null
+        }
+    }
+
+    return loadedAdState
+}
+
+internal fun createNativeAdView(
+    context: Context,
+    nativeAd: NativeAd,
+): NativeAdView {
+    val composeView = ComposeView(context).apply {
+        setContent {
+            NativeLineAdContent(
+                title = nativeAd.headline ?: "",
+                body = nativeAd.callToAction ?: nativeAd.body ?: "",
+            )
+        }
+    }
+
+    return NativeAdView(context).apply {
+        addView(composeView)
+        headlineView = composeView
+        callToActionView = composeView
+        registerNativeAd(nativeAd, null)
+    }
+}
diff --git a/core/ads/src/main/java/com/hilingual/core/ads/native/component/AdMark.kt b/core/ads/src/main/java/com/hilingual/core/ads/native/component/AdMark.kt
@@ -0,0 +1,45 @@
+package com.hilingual.core.ads.native.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+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.draw.clip
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.hilingual.core.designsystem.theme.HilingualTheme
+
+@Composable
+fun AdMark(
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier = modifier
+            .clip(RoundedCornerShape(10.dp))
+            .background(HilingualTheme.colors.gray400)
+            .padding(vertical = 1.dp, horizontal = 3.dp)
+            .widthIn(min = 24.dp)
+            .heightIn(min = 16.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(
+            text = "AD",
+            color = HilingualTheme.colors.white,
+            style = HilingualTheme.typography.bodyM12,
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun AdMarkPreview() {
+    HilingualTheme {
+        AdMark()
+    }
+}
diff --git a/core/ads/src/main/java/com/hilingual/core/ads/native/component/NativeLineAdContent.kt b/core/ads/src/main/java/com/hilingual/core/ads/native/component/NativeLineAdContent.kt
@@ -0,0 +1,112 @@
+package com.hilingual.core.ads.native.component
+
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.animation.togetherWith
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.TextLayoutResult
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.hilingual.core.designsystem.theme.HilingualTheme
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.isActive
+
+@Composable
+internal fun NativeLineAdContent(
+    title: String,
+    body: String,
+    modifier: Modifier = Modifier,
+) {
+    var chunks by remember(body) { mutableStateOf(listOf(body)) }
+    var currentIndex by remember(body) { mutableIntStateOf(0) }
+
+    LaunchedEffect(body) {
+        while (isActive) {
+            delay(5000L)
+            if (chunks.size > 1) {
+                currentIndex = (currentIndex + 1) % chunks.size
+            }
+        }
+    }
+
+    AnimatedContent(
+        targetState = currentIndex,
+        transitionSpec = {
+            slideInVertically { it } + fadeIn() togetherWith
+                slideOutVertically { -it } + fadeOut()
+        },
+        label = "NativeAdRolling",
+        modifier = modifier
+            .fillMaxWidth()
+            .background(HilingualTheme.colors.white)
+            .heightIn(min = 32.dp)
+            .padding(horizontal = 16.dp, vertical = 4.dp),
+    ) { index ->
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(6.dp),
+        ) {
+            if (index == 0) {
+                AdMark()
+                Text(
+                    text = title,
+                    color = HilingualTheme.colors.gray850,
+                    style = HilingualTheme.typography.bodyM12,
+                    maxLines = 1,
+                )
+            }
+
+            Text(
+                text = chunks[index],
+                color = HilingualTheme.colors.gray850,
+                style = HilingualTheme.typography.captionR12,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                onTextLayout = { result ->
+                    if (result.hasVisualOverflow && chunks.size == index + 1) {
+                        val nextChunk = result.getNextChunk(chunks[index])
+                        if (nextChunk.isNotEmpty()) chunks = chunks + nextChunk
+                    }
+                },
+                modifier = Modifier.weight(1f, fill = false),
+            )
+        }
+    }
+}
+
+private fun TextLayoutResult.getNextChunk(text: String): String {
+    val end = getLineEnd(lineIndex = 0, visibleEnd = true)
+    return if (end > 0) text.substring(end).trim() else ""
+}
+
+@Preview
+@Composable
+private fun NativeLineAdContentPreview() {
+    HilingualTheme {
+        NativeLineAdContent(
+            title = "광고 이름",
+            body = "광고 내용입니다. 내용이 길면 5초 후에 롤링됩니다." +
+                "아주 아주 아주 아주 아주 길어도 롤링됩니다." +
+                "그리고 다시 롤링됩니다. 그래서 설명이 잘리지 않습니다.",
+        )
+    }
+}
diff --git a/presentation/main/src/main/java/com/hilingual/presentation/main/MainScreen.kt b/presentation/main/src/main/java/com/hilingual/presentation/main/MainScreen.kt
@@ -17,9 +17,16 @@ package com.hilingual.presentation.main
 
 import androidx.activity.compose.BackHandler
 import androidx.activity.compose.LocalActivity
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.EnterTransition
 import androidx.compose.animation.ExitTransition
+import androidx.compose.animation.animateContentSize
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideIn
+import androidx.compose.animation.slideOut
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
@@ -36,11 +43,13 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.navigation.compose.NavHost
 import androidx.navigation.navOptions
+import com.hilingual.core.ads.native.HilingualNativeLineAd
 import com.hilingual.core.common.analytics.Tracker
 import com.hilingual.core.common.app.AppRestarter
 import com.hilingual.core.common.model.HilingualMessage
@@ -128,9 +137,8 @@ internal fun MainScreen(
     ) {
         Scaffold(
             bottomBar = {
-                MainBottomBar(
-                    visible = isBottomBarVisible,
-                    tabs = MainTab.entries.toPersistentList(),
+                BottomSection(
+                    isVisible = isBottomBarVisible,
                     currentTab = currentTab,
                     onTabSelected = appState::navigate,
                 )
@@ -143,7 +151,6 @@ internal fun MainScreen(
                 popExitTransition = { ExitTransition.None },
                 navController = appState.navController,
                 startDestination = appState.startDestination,
-
             ) {
                 splashNavGraph(
                     navigateToAuth = appState::navigateToAuth,
@@ -258,7 +265,7 @@ internal fun MainScreen(
                 modifier = Modifier
                     .fillMaxSize()
                     .navigationBarsPadding()
-                    .padding(bottom = 82.dp),
+                    .padding(bottom = 106.dp),
             ) {
                 SnackbarHost(hostState = snackBarHostState) { data ->
                     when (val visuals = data.visuals) {
@@ -301,3 +308,30 @@ private fun HandleBackPressToExit(
         backPressedTime = System.currentTimeMillis()
     }
 }
+
+@Composable
+private fun BottomSection(
+    isVisible: Boolean,
+    currentTab: MainTab?,
+    onTabSelected: (MainTab) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    AnimatedVisibility(
+        visible = isVisible,
+        enter = fadeIn() + slideIn { IntOffset(0, it.height) },
+        exit = fadeOut() + slideOut { IntOffset(0, it.height) },
+    ) {
+        Column(
+            modifier = modifier
+                .animateContentSize()
+                .navigationBarsPadding(),
+        ) {
+            MainBottomBar(
+                tabs = MainTab.entries.toPersistentList(),
+                currentTab = currentTab,
+                onTabSelected = onTabSelected,
+            )
+            HilingualNativeLineAd(adUnitId = BuildConfig.ADMOB_NATIVE_UNIT_ID)
+        }
+    }
+}
diff --git a/presentation/main/src/main/java/com/hilingual/presentation/main/component/MainBottomBar.kt b/presentation/main/src/main/java/com/hilingual/presentation/main/component/MainBottomBar.kt

Original file line number	Diff line number	Diff line change
`@@ -44,6 +44,11 @@ fun Project.configureBuildTypes(`
`44`	`44`	`"ADMOB_INLINEBANNER_UNIT_ID",`
`45`	`45`	`properties.getQuotedProperty("admob.inlinebanner.$prefix.id")`
`46`	`46`	`)`
	`47`	`+ buildConfigField(`
	`48`	`+ "String",`
	`49`	`+ "ADMOB_NATIVE_UNIT_ID",`
	`50`	`+ properties.getQuotedProperty("admob.native.$prefix.id")`
	`51`	`+ )`
`47`	`52`	`}`
`48`	`53`
`49`	`54`	`commonExtension.apply {`