feat(ads): 네이티브 광고 적용 및 디버그 스위치 이동

lib/presentation/widgets/native_ad_placeholder.dart

@@ -1,48 +1,204 @@
+import 'dart:async';
+import 'dart:math';
+
 import 'package:flutter/material.dart';
+import 'package:google_mobile_ads/google_mobile_ads.dart';
 import 'package:lunchpick/core/constants/app_colors.dart';
 import 'package:lunchpick/core/constants/app_typography.dart';
+import 'package:lunchpick/core/utils/ad_helper.dart';
 
-/// 네이티브 광고(Native Ad) 플레이스홀더
-class NativeAdPlaceholder extends StatelessWidget {
+/// 실제 네이티브 광고(Native Ad)를 표시하는 영역.
+/// 광고 미지원 플랫폼이나 로드 실패 시 이전 플레이스홀더 스타일을 유지한다.
+class NativeAdPlaceholder extends StatefulWidget {
   final EdgeInsetsGeometry? margin;
   final double height;
+  final Duration refreshInterval;
 
-  const NativeAdPlaceholder({super.key, this.margin, this.height = 120});
+  const NativeAdPlaceholder({
+    super.key,
+    this.margin,
+    this.height = 200,
+    this.refreshInterval = const Duration(minutes: 2),
+  });
+
+  @override
+  State<NativeAdPlaceholder> createState() => _NativeAdPlaceholderState();
+}
+
+class _NativeAdPlaceholderState extends State<NativeAdPlaceholder> {
+  NativeAd? _nativeAd;
+  Timer? _refreshTimer;
+  bool _isLoading = false;
+  bool _isLoaded = false;
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!mounted) return;
+      _loadAd();
+    });
+  }
+
+  @override
+  void didUpdateWidget(covariant NativeAdPlaceholder oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.refreshInterval != oldWidget.refreshInterval && _isLoaded) {
+      _scheduleRefresh();
+    }
+  }
+
+  @override
+  void dispose() {
+    _refreshTimer?.cancel();
+    _nativeAd?.dispose();
+    super.dispose();
+  }
+
+  void _loadAd() {
+    if (!AdHelper.isMobilePlatform) return;
+    if (!mounted) return;
+
+    _refreshTimer?.cancel();
+    _nativeAd?.dispose();
+
+    setState(() {
+      _isLoading = true;
+      _isLoaded = false;
+    });
+
+    final adUnitId = AdHelper.nativeAdUnitId;
+    _nativeAd = NativeAd(
+      adUnitId: adUnitId,
+      request: const AdRequest(),
+      nativeTemplateStyle: _buildTemplateStyle(),
+      listener: NativeAdListener(
+        onAdLoaded: (ad) {
+          if (!mounted) {
+            ad.dispose();
+            return;
+          }
+          setState(() {
+            _isLoaded = true;
+            _isLoading = false;
+          });
+          _scheduleRefresh();
+        },
+        onAdFailedToLoad: (ad, error) {
+          ad.dispose();
+          if (!mounted) return;
+          setState(() {
+            _isLoading = false;
+            _isLoaded = false;
+          });
+          _scheduleRefresh(retry: true);
+        },
+        onAdClicked: (ad) => _scheduleRefresh(),
+        onAdOpened: (ad) => _scheduleRefresh(),
+      ),
+    )..load();
+  }
+
+  void _scheduleRefresh({bool retry = false}) {
+    _refreshTimer?.cancel();
+    if (!mounted) return;
+    final delay = retry ? const Duration(seconds: 30) : widget.refreshInterval;
+    _refreshTimer = Timer(delay, _loadAd);
+  }
+
+  NativeTemplateStyle _buildTemplateStyle() {
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+    return NativeTemplateStyle(
+      templateType: TemplateType.medium,
+      mainBackgroundColor: isDark ? AppColors.darkSurface : Colors.white,
+      cornerRadius: 12,
+      callToActionTextStyle: NativeTemplateTextStyle(
+        textColor: Colors.white,
+        backgroundColor: AppColors.lightPrimary,
+        style: NativeTemplateFontStyle.bold,
+      ),
+      primaryTextStyle: NativeTemplateTextStyle(
+        textColor: isDark ? Colors.white : Colors.black87,
+        style: NativeTemplateFontStyle.bold,
+      ),
+      secondaryTextStyle: NativeTemplateTextStyle(
+        textColor: isDark ? Colors.white70 : Colors.black54,
+        style: NativeTemplateFontStyle.normal,
+      ),
+    );
+  }
 
   @override
   Widget build(BuildContext context) {
     final isDark = Theme.of(context).brightness == Brightness.dark;
 
+    if (!AdHelper.isMobilePlatform) {
+      return _buildPlaceholder(isDark, isLoading: false);
+    }
+
+    return AnimatedSwitcher(
+      duration: const Duration(milliseconds: 250),
+      child: _isLoaded && _nativeAd != null
+          ? _buildAdView(isDark)
+          : _buildPlaceholder(isDark, isLoading: _isLoading),
+    );
+  }
+
+  Widget _buildAdView(bool isDark) {
+    final containerHeight = max(widget.height, 200.0);
     return Container(
-      margin: margin ?? EdgeInsets.zero,
-      padding: const EdgeInsets.all(16),
-      height: height,
+      key: const ValueKey('nativeAdLoaded'),
+      margin: widget.margin ?? EdgeInsets.zero,
+      height: containerHeight,
       width: double.infinity,
-      decoration: BoxDecoration(
-        color: isDark ? AppColors.darkSurface : Colors.white,
-        borderRadius: BorderRadius.circular(12),
-        border: Border.all(
-          color: isDark ? AppColors.darkDivider : AppColors.lightDivider,
-          width: 2,
-        ),
-        boxShadow: [
-          BoxShadow(
-            color: (isDark ? Colors.black : Colors.grey).withOpacity(0.08),
-            blurRadius: 8,
-            offset: const Offset(0, 4),
-          ),
-        ],
+      decoration: _decoration(isDark),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(10),
+        child: AdWidget(ad: _nativeAd!),
       ),
+    );
+  }
+
+  Widget _buildPlaceholder(bool isDark, {required bool isLoading}) {
+    final containerHeight = max(widget.height, 200.0);
+    return Container(
+      key: const ValueKey('nativeAdPlaceholder'),
+      margin: widget.margin ?? EdgeInsets.zero,
+      padding: const EdgeInsets.all(16),
+      height: containerHeight,
+      width: double.infinity,
+      decoration: _decoration(isDark),
       child: Center(
         child: Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             const Icon(Icons.ad_units, color: AppColors.lightPrimary, size: 24),
             const SizedBox(width: 8),
-            Text('광고 영역', style: AppTypography.heading2(isDark)),
+            Text(
+              isLoading ? '광고 불러오는 중...' : '광고 영역',
+              style: AppTypography.heading2(isDark),
+            ),
           ],
         ),
       ),
     );
   }
+
+  BoxDecoration _decoration(bool isDark) {
+    return BoxDecoration(
+      color: isDark ? AppColors.darkSurface : Colors.white,
+      borderRadius: BorderRadius.circular(12),
+      border: Border.all(
+        color: isDark ? AppColors.darkDivider : AppColors.lightDivider,
+        width: 2,
+      ),
+      boxShadow: [
+        BoxShadow(
+          color: (isDark ? Colors.black : Colors.grey).withOpacity(0.08),
+          blurRadius: 8,
+          offset: const Offset(0, 4),
+        ),
+      ],
+    );
+  }
 }