diff --git "a/.github/ISSUE_TEMPLATE/\352\270\260\353\263\270-\354\235\264\354\212\210-\355\205\234\355\224\214\353\246\277.md" "b/.github/ISSUE_TEMPLATE/\352\270\260\353\263\270-\354\235\264\354\212\210-\355\205\234\355\224\214\353\246\277.md" index ca94800..f2d3e16 100644 --- "a/.github/ISSUE_TEMPLATE/\352\270\260\353\263\270-\354\235\264\354\212\210-\355\205\234\355\224\214\353\246\277.md" +++ "b/.github/ISSUE_TEMPLATE/\352\270\260\353\263\270-\354\235\264\354\212\210-\355\205\234\355\224\214\353\246\277.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 index 596f0a7..c275f2e 100644 --- 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 index 2a89d91..d74a7d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,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", @@ -38,6 +39,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" } }, @@ -4231,6 +4233,12 @@ "@types/react": "*" } }, + "node_modules/@types/react-gtm-module": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@types/react-gtm-module/-/react-gtm-module-2.0.3.tgz", + "integrity": "sha512-fL2zKdDFN5LckSsVBXEhhm9M4tFTM9oHJfGcfZJzktQkzpOTGtDM8oXIP9d9UBDxO4xLNZhS22dlgRVv6wgK9w==", + "dev": true + }, "node_modules/@types/react-modal": { "version": "3.16.3", "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.16.3.tgz", @@ -14967,6 +14975,11 @@ "react": "^15.6.2 || ^16.0 || ^17 || ^18" } }, + "node_modules/react-gtm-module": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/react-gtm-module/-/react-gtm-module-2.0.11.tgz", + "integrity": "sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw==" + }, "node_modules/react-icon": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/react-icon/-/react-icon-1.0.0.tgz", diff --git a/package.json b/package.json index 65b6840..5f8f7c1 100644 --- 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 index 11361b2..d377687 100644 --- 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 (
diff --git a/src/Pages/stockDetail/stockDetail.tsx b/src/Pages/stockDetail/stockDetail.tsx index 926146b..af379f1 100644 --- 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 index 4a196fc..ca2f1f8 100644 --- 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 ( diff --git a/src/index.tsx b/src/index.tsx index 8d97a1a..3242888 100644 --- 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(