✨feat, 🎨design: 차트 컴포넌트 생성(일반 차트, 주식 차트 등)

package.json

@@ -14,6 +14,10 @@
     "@reduxjs/toolkit": "^2.2.5",
     "apexcharts": "^3.49.1",
     "axios": "^1.7.2",
+    "chart.js": "^4.4.3",
+    "react": "^18.2.0",
+    "react-apexcharts": "^1.4.1",
+    "react-chartjs-2": "^5.2.0",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "react": "^18.2.0",

src/components/common/StockInfoDetail.jsx

@@ -0,0 +1,112 @@
+import React from "react";
+import { StyledInfoDetailDiv } from "./StockInfoDetail.style";
+const SeiseInfo = ({ details }) => (
+  <StyledInfoDetailDiv>
+    <h3>시세정보</h3>
+    <div>
+      <p>시가</p>
+      <p>{details.openingPrice}</p>
+    </div>
+    <div>
+      <p>1년 최고</p> <p>{details.oneYearHigh}</p>
+    </div>
+    <div>
+      <p>1년 최저</p> <p>{details.oneYearLow}</p>
+    </div>
+  </StyledInfoDetailDiv>
+);
+
+const StockInfo = ({ details }) => (
+  <StyledInfoDetailDiv>
+    <h3>종목정보</h3>
+    <div>
+      <p>시총</p> <p>{details.marketcome}</p>
+    </div>
+    <div>
+      <p>거래량</p> <p>{details.tradingVolume}</p>
+    </div>
+  </StyledInfoDetailDiv>
+);
+
+const InvestorTrade = ({ details }) => (
+  <StyledInfoDetailDiv>
+    <h3>투자자별 매매동향 24.06.19</h3>
+    <div>
+      <p>외국인보유율</p> <p>{details.foreignOwnershipRate}</p>
+    </div>
+    <div>
+      <p>외국인매매율</p>
+      <p> {details.foreignTrade}</p>
+    </div>
+    <div>
+      <p>기관매매율</p>
+      <p>{details.institutionalTrade}</p>
+    </div>
+  </StyledInfoDetailDiv>
+);
+
+const QuarterResult = ({ details }) => (
+  <StyledInfoDetailDiv>
+    <h3>분기실적 2024.03.</h3>
+    <p>매출액: {details.revenue}</p>
+    <p>영업이익: {details.operatingIncome}</p>
+    <p>당기순이익: {details.netIncome}</p>
+  </StyledInfoDetailDiv>
+);
+
+const StockDataComponent = ({ data }) => {
+  switch (data.section) {
+    case "시세정보":
+      return <SeiseInfo details={data.details} />;
+    case "종목정보":
+      return <StockInfo details={data.details} />;
+    case "투자자별 매매동향 24.06.19":
+      return <InvestorTrade details={data.details} />;
+    case "분기실적 2024.03.":
+      return <QuarterResult details={data.details} />;
+    default:
+      return <div>알 수 없는 데이터</div>;
+  }
+};
+
+// Sample data based on your structure
+const stockData = [
+  {
+    section: "시세정보",
+    details: {
+      openingPrice: "678,000",
+      oneYearHigh: "718,000",
+      oneYearLow: "103,100",
+    },
+  },
+  {
+    section: "종목정보",
+    details: { marketcome: "4조 8,211억", tradingVolume: "193,195" },
+  },
+  {
+    section: "투자자별 매매동향 24.06.19",
+    details: {
+      foreignOwnershipRate: "12.90%",
+      foreignTrade: "-51,338",
+      institutionalTrade: "-12,688",
+    },
+  },
+  {
+    section: "분기실적 2024.03.",
+    details: {
+      revenue: "3,857억",
+      operatingIncome: "801억",
+      netIncome: "665억",
+    },
+  },
+];
+
+const StockInfoDetail = () => (
+  <div style={{ display: "flex", flexDirection: "row", gap: "5px" }}>
+    {stockData.map((data, index) => (
+      <StockDataComponent key={index} data={data} />
+    ))}
+  </div>
+);
+
+export default StockInfoDetail;

src/components/common/StockInfoDetail.style.js

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+export const StyledInfoDetailDiv = styled.div`
+  width: 25%;
+  ascpect-ratio: 1/1;
+  background-color: lightgray;
+  border-radius: 10px;
+  color: black;
+  padding: 10px;
+  h3 {
+    font-size: 18px;
+  }
+  div {
+    display: flex;
+    flex-direction: row;
+  }
+  div p:first-child {
+    color: gray;
+    width: 30%;
+  }
+  span {
+    font-weight: normal;
+    color: gray;
+  }
+`;

src/components/common/graphs/normalGraph/NormalGraph.jsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useRef } from "react";
 import { ReactP5Wrapper } from "react-p5-wrapper";
 import styled from "styled-components";
-
+// import p5 from "p5";
+// window.p5 = p5;
 const ChartContainer = styled.div`
   background: #fff;
   padding: 10px;
@@ -46,7 +47,7 @@ const sketch = (p5) => {
       barIndex = 0;
       isAnimating = true;
       axisProgress = 0;
-      console.log(props);
+      // console.log(props);
     }
     if (props.date) {
       date = props.date;
@@ -134,7 +135,7 @@ const sketch = (p5) => {
         45,
         355 - yAxisLength,
         55,
-        360 - yAxisLength
+        355 - yAxisLength
       );
     } else if (data.length > 1 && isAnimating) {
       // x축과 평행한 보조선 그리기
@@ -174,14 +175,14 @@ const sketch = (p5) => {
         const startY = p5.map(data[drawnLines], 0, 100, 300, 50);
         const endX = p5.map(drawnLines + 1, 0, data.length - 1, 100, 500);
         const endY = p5.map(data[drawnLines + 1], 0, 100, 300, 50);
-        console.log(drawnLines, lineProgress);
+        // console.log(drawnLines, lineProgress);
         if (lineProgress == 1) {
           lineProgress = 0;
         } else if (lineProgress + lineStep >= 1) {
           lineProgress = 1;
           drawnLines++;
           lineStep = lineStep + 0.01;
-          console.log("asdf:", drawnLines);
+          // console.log("asdf:", drawnLines);
         } else {
           lineProgress += lineStep;
         }
@@ -281,7 +282,7 @@ const sketch = (p5) => {
       if (barProgress[data.length - 1] < data.length) {
         for (let ii = 0; ii <= barIndex; ii++) {
           barProgress[ii] += barStep;
-          if (barProgress[ii] >= 1) {
+          if (barProgress[ii] >= 0.5) {
             barProgress[ii] = 1;
             if (barProgress[barIndex] > 0.4) {
               barIndex++;

src/components/common/keywordGraph/googleGraph/GoogleGraph.jsx

@@ -1,21 +1,26 @@
-import React from "react";
+import React, { useEffect } from "react";
 import NormalGraph from "../../graphs/normalGraph/NormalGraph";
 export default function GoogleGraph() {
   return (
-    <div>
-      <span>
-        <strong>"불닭"</strong>이 이만큼 언급됐어요
-      </span>
-
-      <div style={{ marginTop: "20px" }}>
-        <NormalGraph
-          data={[50, 30, 20, 10, 50]}
-          date={["24.06.01", "24.06.02", "24.06.03", "24.06.04", "24.06.05"]}
-          color={[66, 133, 244]}
-          lineSpeed={0.05}
-          barSpeed={0.05}
-        ></NormalGraph>
-      </div>
+    <div style={{ marginTop: "20px" }}>
+      <NormalGraph
+        data={[50, 30, 20, 10, 50, 50, 30, 20, 10, 50]}
+        date={[
+          "24.06.01",
+          "24.06.02",
+          "24.06.03",
+          "24.06.04",
+          "24.06.05",
+          "24.06.01",
+          "24.06.02",
+          "24.06.03",
+          "24.06.04",
+          "24.06.05",
+        ]}
+        color={[66, 133, 244]}
+        lineSpeed={0.1}
+        barSpeed={0.1}
+      ></NormalGraph>
     </div>
   );
 }