feat(web): GA4 연동 — Rakuten Affiliate 승인용 트래픽 측정 (#568)

packages/web/.env.local.example

@@ -31,6 +31,9 @@ API_BASE_URL=http://localhost:3100
 # Debug
 # NEXT_PUBLIC_DEBUG=true
 
+# Google Analytics 4 (optional — Rakuten affiliate traffic reporting)
+# NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX
+
 # Sentry (error tracking)
 # NEXT_PUBLIC_SENTRY_DSN=https://xxx@xxx.ingest.sentry.io/xxx
 # SENTRY_DSN=https://xxx@xxx.ingest.sentry.io/xxx

packages/web/app/layout.tsx

@@ -13,6 +13,7 @@ import { ThemeScript } from "@/lib/theme/theme-script";
 import { EventFlushProvider } from "./EventFlushProvider";
 import { JsonLdOrganization } from "@/lib/seo/json-ld";
 import { SessionExpiredBanner } from "@/lib/components/auth/SessionExpiredBanner";
+import { DecodedGoogleAnalytics } from "@/lib/analytics/google-analytics";
 
 const playfairDisplay = Playfair_Display({
   subsets: ["latin"],
@@ -101,6 +102,7 @@ export default function RootLayout({
           {/* <LazyOnboardingSheet /> */}
           <LazyVtonModal />
         </AppProviders>
+        <DecodedGoogleAnalytics />
       </body>
     </html>
   );

packages/web/lib/analytics/google-analytics.tsx

@@ -0,0 +1,8 @@
+import { GoogleAnalytics } from "@next/third-parties/google";
+
+export function DecodedGoogleAnalytics() {
+  const gaId = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;
+  if (!gaId) return null;
+
+  return <GoogleAnalytics gaId={gaId} />;
+}

packages/web/package.json

@@ -20,6 +20,7 @@
     "@chenglou/pretext": "^0.0.4",
     "@decoded/shared": "workspace:*",
     "@gsap/react": "^2.1.2",
+    "@next/third-parties": "^16.2.1",
     "@radix-ui/react-slot": "^1.2.4",
     "@sentry/nextjs": "^10.47.0",
     "@splinetool/react-spline": "^4.1.0",