Merge pull request #100 from 100-hours-a-week/feature/kevin

Feat: 개발 서버, 운영 서버 분리
100-hours-a-week · Aug 25, 2024 · 6b4cdd5 · 6b4cdd5
2 parents 1ae7c24 + c5fe888
commit 6b4cdd5
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 54 deletions.
diff --git a/.github/ISSUE_TEMPLATE/기본-이슈-템플릿.md b/.github/ISSUE_TEMPLATE/기본-이슈-템플릿.md
@@ -1,7 +1,7 @@
 ---
 name: 기본 이슈 템플릿
 about: qa 이슈 템플릿입니다
-title: "[기기-브라우저-가로사이즈-페이지명] 이슈 내용"
+title: "[PC-Chrome-1920-페이지명] 이슈 내용"
 labels: ''
 assignees: ''
 

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -5,6 +5,7 @@ on:
   push:
     branches:
       - main
+      - dev
 
 jobs:
   build-and-push:
@@ -22,8 +23,13 @@ jobs:
       - name: Install Dependencies
         run: npm install
 
-      - name: Build Project
-        run: npm run build
+      - name: Build Project for Develop
+        if: github.ref == 'refs/heads/dev'
+        run: npm run build:dev
+
+      - name: Build Project for Production
+        if: github.ref == 'refs/heads/main'
+        run: npm run build:prod
 
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v4
@@ -32,8 +38,18 @@ jobs:
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           aws-region: ap-northeast-2
 
-      - name: Deploy to S3
+      - name: Deploy to S3 for Develop
+        if: github.ref == 'refs/heads/dev'
+        run: aws s3 sync build s3://ustock-dev-bucket/react/ --delete
+
+      - name: Deploy to S3 for Production
+        if: github.ref == 'refs/heads/main'
         run: aws s3 sync build s3://ustock-bucket/react/ --delete
 
-      - name: Invalidate CloudFront Cache
-        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/react/*" "/react/static/js/*" "/react/static/css/*" "/react/static/media/*"
+      - name: Invalidate CloudFront Cache for Develop
+        if: github.ref == 'refs/heads/dev'
+        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID_DEV }} --paths "/*"
+
+      - name: Invalidate CloudFront Cache for Production
+        if: github.ref == 'refs/heads/main'
+        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID_PROD }} --paths "/*"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "react-apexcharts": "^1.4.1",
     "react-dom": "^18.3.1",
     "react-ga": "^3.3.1",
+    "react-gtm-module": "^2.0.11",
     "react-icon": "^1.0.0",
     "react-icons": "^5.3.0",
     "react-modal": "^3.16.1",
@@ -57,6 +58,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/react-gtm-module": "^2.0.3",
     "@types/react-modal": "^3.16.3"
   }
 }
diff --git a/src/Component/News/NewsList.tsx b/src/Component/News/NewsList.tsx
@@ -20,6 +20,7 @@ const NewsList: React.FC = () => {
   const [news, setNews] = useState([]);
   const navigate = useNavigate();
 
+
   useEffect(() => {
     axios
       .get(`https://api.ustock.site/v1/news/user`, {
@@ -41,6 +42,7 @@ const NewsList: React.FC = () => {
       });
   }, []);
 
+
   return (
     <div>
       <ListWrapper>

diff --git a/src/Pages/stockDetail/stockDetail.tsx b/src/Pages/stockDetail/stockDetail.tsx
@@ -70,9 +70,12 @@ const StockDetail: React.FC = () => {
   // 상태저장해서 Chart 컴포넌트 Props로 넘겨줘야하는지 확인
   useEffect(() => {
     axios
-      .get(`/v1/stocks/${stockCode}/chart?period=${selectedViewInt}`, {
-        withCredentials: true,
-      })
+      .get(
+        `https://api.ustock.site/v1/stocks/${stockCode}/chart?period=${selectedViewInt}`,
+        {
+          withCredentials: true,
+        }
+      )
       .then((res) => {
         if (res.status === 200) {
           console.log("차트 데이터: ", res.data);

diff --git a/src/Router.tsx b/src/Router.tsx
@@ -11,58 +11,66 @@ import SkrrrGamePage from "./Pages/skrrrGame";
 import { useAuth } from "./contexts/authContext";
 import NoUserPage from "./Pages/404/noUser";
 import LoginPage from "./Pages/404/loginPage";
-import ReactGA from "react-ga";
-import { useEffect } from "react";
+// import TagManager from "react-gtm-module";
+// import { useEffect } from "react";
 
-// 구글 애널리틱스 설정
-const gaTrackingId = process.env.REACT_APP_GA_TRACKING_ID;
-const clarityTrackingId = process.env.REACT_APP_CLARITY_TRACKING_ID;
+const Router = () => {
+  const { user } = useAuth();
 
-if (gaTrackingId) {
-  ReactGA.initialize(gaTrackingId, { debug: true }); // react-ga 초기화 및 debug 사용
-} else {
-  console.error("Google Analytics tracking ID is not defined");
-}
+  // // 구글 애널리틱스 설정
+  // const gaTrackingId = process.env.REACT_APP_GA_TRACKING_ID;
+  // const clarityTrackingId = process.env.REACT_APP_CLARITY_TRACKING_ID;
 
-const usePageTracking = () => {
-  const location = useLocation();
+  // if (gaTrackingId) {
+  //   // Initialize Google Analytics 4
+  //   TagManager.initialize({ gtmId: gaTrackingId });
+  // } else {
+  //   console.error("Google Analytics tracking ID is not defined");
+  // }
 
-  useEffect(() => {
-    if (gaTrackingId) {
-      ReactGA.pageview(location.pathname + location.search);
-    }
-  }, [location]);
-};
+  // const usePageTracking = () => {
+  //   interface Window {
+  //     gtag: (...args: any[]) => void;
+  //   }
 
-// MicroSoft Clarity 설정
-// 타입 에러 때문에,,, c,a,i any로 변경
-useEffect(() => {
-  (function (
-    c: any,
-    l: Document,
-    a: any,
-    r: keyof HTMLElementTagNameMap,
-    i: any
-  ) {
-    c[a] =
-      c[a] ||
-      function () {
-        (c[a].q = c[a].q || []).push(arguments);
-      };
+  //   useEffect(() => {
+  //     if (gaTrackingId) {
+  //       // Send pageview event to GA4
+  //       Window.gtag("config", gaTrackingId, {
+  //         send_page_view: false,
+  //         page_path: window.location.pathname + window.location.search,
+  //       });
+  //     }
+  //   }, [window.location.pathname, window.location.search]);
+  // };
 
-    const t: HTMLScriptElement = l.createElement(r) as HTMLScriptElement;
-    t.async = true;
-    t.src = "https://www.clarity.ms/tag/" + i;
+  // // MicroSoft Clarity 설정
+  // // 타입 에러 때문에,,, c,a,i any로 변경
+  // useEffect(() => {
+  //   (function (
+  //     c: any,
+  //     l: Document,
+  //     a: any,
+  //     r: keyof HTMLElementTagNameMap,
+  //     i: any
+  //   ) {
+  //     c[a] =
+  //       c[a] ||
+  //       function () {
+  //         (c[a].q = c[a].q || []).push(arguments);
+  //       };
 
-    const y = l.getElementsByTagName(r)[0] as HTMLElement; // Explicitly cast to HTMLElement
-    if (y && y.parentNode) {
-      y.parentNode.insertBefore(t, y);
-    }
-  })(window, document, "clarity", "script", clarityTrackingId);
-}, []);
-const Router = () => {
-  const { user } = useAuth();
-  usePageTracking();
+  //     const t: HTMLScriptElement = l.createElement(r) as HTMLScriptElement;
+  //     t.async = true;
+  //     t.src = "https://www.clarity.ms/tag/" + i;
+
+  //     const y = l.getElementsByTagName(r)[0] as HTMLElement; // Explicitly cast to HTMLElement
+  //     if (y && y.parentNode) {
+  //       y.parentNode.insertBefore(t, y);
+  //     }
+  //   })(window, document, "clarity", "script", clarityTrackingId);
+  // }, []);
+  // usePageTracking();
 
   return (
     <BrowserRouter>

diff --git a/src/index.tsx b/src/index.tsx
@@ -9,6 +9,7 @@ import { AuthProvider } from "./contexts/authContext";
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
+
 root.render(
   <AuthProvider>
     <App />