Merge pull request #115 from MBTips/dev

5차 배포 Test (Dev -> Main)

Author: Soohyuniii

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: 빌드 자동화 
+name: 빌드 자동화
 
 on:
   push:
@@ -17,24 +17,25 @@ jobs:
       - name: Set up Node.js (언어 환경)
         uses: actions/setup-node@v2
         with:
-          node-version: '20'  
+          node-version: "20"
 
       - name: Install dependencies
         run: |
           npm install
           npm install tailwindcss@latest postcss@latest autoprefixer@latest
           npm install --save-dev @types/node
 
-
       - name: Run build
         run: npm run build --verbose # 프로젝트에 맞는 빌드 명령어
+        env:
+          VITE_GA_MEASUREMENT_ID: ${{ secrets.VITE_GA_MEASUREMENT_ID }} # Google Analytics 환경 변수 사용
 
       - name: Docker build & push
         run: |
           docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
           docker build -t ${{ secrets.DOCKER_USERNAME }}/embitips_front .
           docker push ${{ secrets.DOCKER_USERNAME }}/embitips_front
-      
+
       - name: Deploy to GCP
         uses: appleboy/ssh-action@master
         with:

package-lock.json

@@ -16,6 +16,7 @@
     "axios": "^1.8.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-ga4": "^2.1.0",
     "react-router-dom": "^7.1.5",
     "tailwindcss": "^4.0.3",
     "zustand": "^5.0.3"

package.json

@@ -1,4 +1,10 @@
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { useEffect } from "react";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  useLocation
+} from "react-router-dom";
 import Home from "@/pages/Home";
 import SelectInfo from "@/pages/SelectInfo";
 import Chat from "@/pages/Chat";
@@ -12,10 +18,40 @@ import MbtiTestIntro from "@/pages/MbtiTestIntro";
 import MbtiTestQuestions from "@/pages/MbtiTestQuestions";
 import MbtiTestResult from "@/pages/MbtiTestResult";
 import CenteredLayout from "@/components/CenteredLayout";
+import { initGA, trackPageView } from "@/libs/analytics";
+
+const PageTracker = () => {
+  const location = useLocation();
+
+  const trackedPaths = [
+    { path: "/", label: "home" },
+    { path: "/login", label: "login" },
+    { path: "/contents" }
+  ];
+
+  useEffect(() => {
+    const { pathname } = location;
+
+    trackedPaths.forEach(({ path, label }) => {
+      if (path === "/contents" && pathname.startsWith(path)) {
+        trackPageView(label || pathname);
+      } else if (pathname === path) {
+        trackPageView(label || pathname);
+      }
+    });
+  }, [location.pathname]);
+
+  return null;
+};
 
 const App = () => {
+  useEffect(() => {
+    initGA();
+  }, []);
+
   return (
     <Router>
+      <PageTracker />
       <CenteredLayout>
         <Routes>
           <Route path="/" element={<Home />} />

src/App.tsx

@@ -0,0 +1,29 @@
+import ReactGA from "react-ga4";
+
+const GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID || "";
+
+const isProduction = process.env.NODE_ENV === "production";
+
+const initGA = () => {
+  if (isProduction && GA_MEASUREMENT_ID) {
+    ReactGA.initialize(GA_MEASUREMENT_ID);
+  }
+};
+
+const trackPageView = (path: string) => {
+  if (isProduction && GA_MEASUREMENT_ID) {
+    ReactGA.send({ hitType: "pageview", page: path });
+  }
+};
+
+const trackEvent = (category: string, action: string, label?: string) => {
+  if (isProduction && GA_MEASUREMENT_ID) {
+    ReactGA.event({
+      category,
+      action,
+      label
+    });
+  }
+};
+
+export { initGA, trackPageView, trackEvent };

src/libs/analytics.ts

@@ -1,5 +1,6 @@
 import instance from "@/api/axios";
 import Header from "@/components/Header";
+import { trackEvent } from "@/libs/analytics";
 import React from "react";
 import { useParams } from "react-router-dom";
 
@@ -177,6 +178,8 @@ const Content = () => {
 
   const handleStartChat = async () => {
     try {
+      trackEvent("User", "Clicked Start Chat Button", "Start Chat");
+
       const response = await instance.post("api/fast-friend");
       console.log("Success!!", response.data);
     } catch (error) {

src/pages/Content.tsx

@@ -9,7 +9,8 @@
       "@/store/*": ["store/*"],
       "@/types/*": ["types/*"],
       "@/utils/*": ["utils/*"],
-      "@/constants/*": ["constants/*"]
+      "@/constants/*": ["constants/*"],
+      "@/libs/*": ["libs/*"]
     },
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",

tsconfig.app.json

@@ -18,10 +18,12 @@ export default defineConfig(({ mode }: { mode: string }) => {
       host: true, // 외부에서 접속 가능하도록 설정
       strictPort: true,
       allowedHosts: ["mbtips.kr"],
-      hmr: {
-        host: "mbtips.kr",
-        protocol: "wss"
-      },
+      hmr: isProduction
+        ? false // 배포 환경에서는 HMR 비활성화 (WebSocket 사용 안 함)
+        : {
+            host: "localhost",
+            protocol: "wss"
+          },
       https: isProduction
         ? undefined // 배포 환경에서는 HTTPS를 비활성화 (Nginx가 처리)
         : fs.existsSync(keyPath) && fs.existsSync(certPath)
@@ -52,8 +54,17 @@ export default defineConfig(({ mode }: { mode: string }) => {
         {
           find: "@/store",
           replacement: path.resolve(__dirname, "src/store")
+        },
+        {
+          find: "@/libs",
+          replacement: path.resolve(__dirname, "src/libs")
         }
       ]
+    },
+    define: {
+      "process.env.VITE_GA_MEASUREMENT_ID": JSON.stringify(
+        process.env.VITE_GA_MEASUREMENT_ID
+      )
     }
   };
 });