Merge pull request #74 from 100-hours-a-week/dev

Dev - 각종 설정 추가
100-hours-a-week · Aug 24, 2024 · f7f12dd · f7f12dd
2 parents 1717584 + 1ae7c24
commit f7f12dd
Show file tree

Hide file tree

Showing 9 changed files with 204 additions and 82 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,3 +24,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# 구글애널리틱스 관련
+.env
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,8 @@
     "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
     "react-dom": "^18.3.1",
+    "react-ga": "^3.3.1",
+    "react-icon": "^1.0.0",
     "react-icons": "^5.3.0",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.26.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,12 +1,7 @@
 import "./App.css";
-import React from "react";
 import { GlobalStyle } from "./Styles/GlobalStyles";
 import Router from "./Router";
-import "./App.css";
 import { useAuth } from "./contexts/authContext";
-import GoogleLogin from "./Component/GoogleLogin/login";
-import Header from "./Component/Layout/Header/Header";
-import Profile from "./Component/Layout/Header/Profile";
 
 function App() {
   const { user } = useAuth();

diff --git a/src/Component/List/MyStockItem.tsx b/src/Component/List/MyStockItem.tsx
@@ -23,18 +23,15 @@ const MyStockItem: React.FC<StockProps> = ({
   const [isPlusOpen, setIsPlusOpen] = useState(false);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const [selectedStock, setSelectedStock] = useState<StockProps | null>(null);
-  const [modalAction, setModalAction] = useState<
-    "edit" | "delete" | "plus" | null
-  >(null);
-  const navigate = useNavigate();
 
-  const updateBudget = usePortfolioStore((state) => state.updateBudget);
-  const updatePrincipal = usePortfolioStore((state) => state.updatePrincipal);
-  const updateProfitLoss = usePortfolioStore((state) => state.updateProfitLoss);
-  const calculateROR = usePortfolioStore((state) => state.calculateROR);
+  const [modalAction, setModalAction] = useState<"edit" | "delete" | "plus" | null>(null);
+  const navigate = useNavigate();
 
-  const updateStock = usePortfolioStore((state) => state.updateStock);
+  const addStockToStore = usePortfolioStore((state) => state.addStock);
+  const updateStockInStore = usePortfolioStore((state) => state.updateStock);
   const deleteStockFromStore = usePortfolioStore((state) => state.deleteStock);
+  const calculateROR = usePortfolioStore((state) => state.calculateROR);
+
   const userStocks: PlusProps[] = [
     {
       code,
@@ -46,26 +43,27 @@ const MyStockItem: React.FC<StockProps> = ({
     },
   ];
 
-  const handleConfirm = (quantity: number, price: number) => {
+  const handleConfirm = (newQuantity: number, newPrice: number) => {
     if (modalAction === "plus") {
       axios
         .patch(
           `/https://api.ustock.site/v1/portfolio/${portfolioId}/holding/${code}`,
-          { quantity, price },
+          { quantity: newQuantity, price: newPrice },
           { withCredentials: true }
         )
         .then((res) => {
           if (res.status === 200) {
             const updatedStock: StockProps = {
               code,
               name,
-              quantity,
-              average: price,
+              quantity: newQuantity,
+              average: newPrice,
               ror,
               portfolioId,
               logo,
             };
-            updateStock(updatedStock);
+            addStockToStore(updatedStock);
+            calculateROR();
             swal({
               title: "추가 등록완료!",
               icon: "success",
@@ -89,21 +87,27 @@ const MyStockItem: React.FC<StockProps> = ({
       axios
         .put(
           `https://api.ustock.site/v1/portfolio/${portfolioId}/holding/${code}`,
-          { quantity, price },
+          { quantity: newQuantity, price: newPrice },
           { withCredentials: true }
         )
         .then((res) => {
           if (res.status === 200) {
+            const oldStockValue = quantity * average;
+            const newStockValue = newQuantity * newPrice;
+            const valueDifference = newStockValue - oldStockValue;
+
             const updatedStock: StockProps = {
               code,
               name,
-              quantity,
-              average: price,
+              quantity: newQuantity,
+              average: newPrice,
               ror,
               portfolioId,
               logo,
             };
-            updateStock(updatedStock);
+            updateStockInStore(updatedStock);
+            calculateROR();
+
             swal({
               title: "수정 완료!",
               icon: "success",
@@ -152,16 +156,11 @@ const MyStockItem: React.FC<StockProps> = ({
       )
       .then((res) => {
         if (res.status === 200) {
-          deleteStockFromStore(code);
 
           const deletedStockValue = quantity * average;
-          const deletedProfitLoss =
-            quantity * average * (1 + ror / 100) - deletedStockValue;
 
-          // store 업데이트
-          updateBudget(deletedStockValue);
-          updatePrincipal(deletedStockValue);
-          updateProfitLoss(deletedProfitLoss);
+          deleteStockFromStore(code, deletedStockValue);
+
           calculateROR();
 
           swal({

diff --git a/src/Component/Modal/plusStock.tsx b/src/Component/Modal/plusStock.tsx
@@ -45,7 +45,7 @@ const StockPlusModal: React.FC<StockPlusModalProps> = ({
 
   const calculateTotal = (stock: PlusProps) => {
     const totalQuantity = stock.quantity + quantity;
-    const totalInvestment = stock.average + quantity * price;
+    const totalInvestment = (stock.quantity * stock.average )+ (quantity * price);
     return { totalQuantity, totalInvestment };
   };
 
@@ -118,8 +118,8 @@ const StockPlusModal: React.FC<StockPlusModalProps> = ({
                       <tr>
                         <td>현재</td>
                         <td>{stock.quantity}</td>
-                        <td>{stock.average}</td>
-                        <td>{stock.quantity * stock.average}</td>
+                        <td>{stock.average.toLocaleString()}</td>
+                        <td>{(stock.quantity * stock.average).toLocaleString()}</td>
                       </tr>
                       <tr>
                         <td>추가</td>

diff --git a/src/Component/News/NewsItem.tsx b/src/Component/News/NewsItem.tsx
@@ -1,24 +1,38 @@
 import { NewsProps } from "../../constants/interface";
 
-const NewsItem: React.FC<NewsProps> = ({ id, title, publisher, date, img, url }) => {
-    const handleClick = () => {
-        window.location.href = url;
-    }
-
-    return(
-        <div className="NewsItem" onClick={handleClick}>
-            <div className="news-section">
-                <div className="news-content">{title}</div>
-                <div className="news-info">
-                    <h3>{publisher}</h3>
-                    <p>{date}</p>
-                </div>
-            </div>
-            <div className="img-section">
-                <img src={img}/>
-            </div>
+const NewsItem: React.FC<NewsProps> = ({
+  id,
+  title,
+  publisher,
+  date,
+  img,
+  url,
+}) => {
+  //   const handleClick = () => {
+  //     window.location.href = url;
+  //   };
+
+  return (
+    // noopener, noreferrer, nofollow 설정을 위해서 <a/>으로 변경
+    <a
+      href={url}
+      className="NewsItem"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      // onClick={handleClick}
+    >
+      <div className="news-section">
+        <div className="news-content">{title}</div>
+        <div className="news-info">
+          <h3>{publisher}</h3>
+          <p>{date}</p>
         </div>
-    )
-}
+      </div>
+      <div className="img-section">
+        <img src={img} alt="뉴스 이미지" />
+      </div>
+    </a>
+  );
+};
 
-export default NewsItem;
+export default NewsItem;
diff --git a/src/Router.tsx b/src/Router.tsx
@@ -1,4 +1,4 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 import Home from "./Pages/home";
 import Layout from "./Component/Layout/Layout";
 import SearchStock from "./Pages/searchStock";
@@ -11,9 +11,59 @@ 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";
 
+// 구글 애널리틱스 설정
+const gaTrackingId = process.env.REACT_APP_GA_TRACKING_ID;
+const clarityTrackingId = process.env.REACT_APP_CLARITY_TRACKING_ID;
+
+if (gaTrackingId) {
+  ReactGA.initialize(gaTrackingId, { debug: true }); // react-ga 초기화 및 debug 사용
+} else {
+  console.error("Google Analytics tracking ID is not defined");
+}
+
+const usePageTracking = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    if (gaTrackingId) {
+      ReactGA.pageview(location.pathname + location.search);
+    }
+  }, [location]);
+};
+
+// 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 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);
+}, []);
 const Router = () => {
   const { user } = useAuth();
+  usePageTracking();
+
   return (
     <BrowserRouter>
       <Layout>