Feat: 소셜 분석 페이지 요약해서 보여주기

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

@@ -22,7 +22,7 @@ const sketch = (p5) => {
   const lineDelay = 0 * 60; // 0.3초 딜레이 (프레임 단위, 60fps 기준)
   let axisProgress = 0;
   let auxLine1Progress = 0;
-  const axisStep = 0.03;
+  const axisStep = 0.02;
   let auxLine1Length = 0;
   let auxLine2Length = 0;
   let auxLine3Length = 0;
@@ -31,14 +31,19 @@ const sketch = (p5) => {
   let drawnLines = 0;
   let zoom = 1;
   let color = [];
+  let width = 400;
   p5.setup = () => {
     p5.noLoop(); // 초기에는 멈춰 있는 상태로 설정
-    p5.createCanvas(600, 400);
+    p5.createCanvas(width + 200, 400);
   };
 
   p5.updateWithProps = (props) => {
     p5.noLoop(); // 초기에는 멈춰 있는 상태로 설정
-
+    if (props.width) {
+      width = props.width;
+    }
+    //todo 페이지 이동 시 새로고침되게 되면 createCanvas 주석처리 하기!
+    p5.createCanvas(width + 200, 400);
     if (props.data) {
       data = props.data;
       barProgress = Array(data.length).fill(0);
@@ -95,19 +100,19 @@ const sketch = (p5) => {
       for (let i = 1; i <= 4; i++) {
         const y = 350 - i * 62.5;
 
-        if (i == 4) p5.line(40, y, 40 + auxLine1Length, y);
+        if (i == 4) p5.line(40, y, width - 360 + auxLine1Length, y);
         else if (i == 3) {
-          p5.line(40, y, 40 + auxLine2Length, y);
+          p5.line(40, y, width - 360 + auxLine2Length, y);
         } else if (i == 2) {
-          p5.line(40, y, 40 + auxLine3Length, y);
+          p5.line(40, y, width - 360 + auxLine3Length, y);
         } else if (i == 1) {
-          p5.line(40, y, 40 + auxLine4Length, y);
+          p5.line(40, y, width - 360 + auxLine4Length, y);
         }
       }
     }
     if (axisProgress < 1) {
       if (axisProgress < 1) axisProgress += axisStep;
-      const xAxisLength = p5.lerp(0, 500, axisProgress);
+      const xAxisLength = p5.lerp(0, 100 + width, axisProgress);
       const yAxisLength = p5.lerp(0, 300, axisProgress);
       p5.strokeWeight(4);
       p5.stroke(color[0], color[1], color[2]);
@@ -142,10 +147,10 @@ const sketch = (p5) => {
       p5.strokeWeight(4);
       p5.stroke(color[0], color[1], color[2]);
       p5.fill(color[0], color[1], color[2]);
-      p5.line(30, 350, 550, 350);
+      p5.line(30, 350, width + 150, 350);
       p5.line(50, 370, 50, 50);
       p5.triangle(50, 45, 45, 53, 55, 53);
-      p5.triangle(555, 350, 547, 345, 547, 355);
+      p5.triangle(width + 155, 350, width + 147, 345, width + 147, 355);
 
       // 보조선 값 텍스트 표시
       p5.drawingContext.shadowBlur = 0;
@@ -163,17 +168,23 @@ const sketch = (p5) => {
       p5.stroke(color[0], color[1], color[2]);
 
       for (let i = 0; i < drawnLines; i++) {
-        const startX = p5.map(i, 0, data.length - 1, 100, 500);
+        const startX = p5.map(i, 0, data.length - 1, 100, width + 100);
         const startY = p5.map(data[i], 0, 100, 300, 50);
-        const endX = p5.map(i + 1, 0, data.length - 1, 100, 500);
+        const endX = p5.map(i + 1, 0, data.length - 1, 100, width + 100);
         const endY = p5.map(data[i + 1], 0, 100, 300, 50);
         p5.line(startX, startY, endX, endY);
       }
 
       if (drawnLines < data.length) {
-        const startX = p5.map(drawnLines, 0, data.length - 1, 100, 500);
+        const startX = p5.map(drawnLines, 0, data.length - 1, 100, width + 100);
         const startY = p5.map(data[drawnLines], 0, 100, 300, 50);
-        const endX = p5.map(drawnLines + 1, 0, data.length - 1, 100, 500);
+        const endX = p5.map(
+          drawnLines + 1,
+          0,
+          data.length - 1,
+          100,
+          width + 100
+        );
         const endY = p5.map(data[drawnLines + 1], 0, 100, 300, 50);
         // console.log(drawnLines, lineProgress);
         if (lineProgress == 1) {
@@ -196,13 +207,13 @@ const sketch = (p5) => {
 
       // 막대 그래프 그리기
       for (let i = 0; i < data.length; i++) {
-        const barHeight = p5.map(data[i], 0, Math.max(...data), 0, 125);
+        const barHeight = p5.map(data[i], 0, Math.max(...data), 0, 250);
         currentBarHeight[i] = p5.lerp(0, barHeight, barProgress[i]);
         if (
           p5.mouseX >
-            p5.map(i, 0, data.length - 1, 100, 500) - barWidth * 0.5 &&
+            p5.map(i, 0, data.length - 1, 100, width + 100) - barWidth * 0.5 &&
           p5.mouseX <
-            p5.map(i, 0, data.length - 1, 100, 500) + barWidth * 0.5 &&
+            p5.map(i, 0, data.length - 1, 100, width + 100) + barWidth * 0.5 &&
           p5.mouseY > 350 - currentBarHeight[i] &&
           p5.mouseY < 350
         ) {
@@ -214,9 +225,9 @@ const sketch = (p5) => {
         p5.fill(color[0], color[1], color[2], 100);
         if (
           p5.mouseX >
-            p5.map(i, 0, data.length - 1, 100, 500) - barWidth * 0.5 &&
+            p5.map(i, 0, data.length - 1, 100, width + 100) - barWidth * 0.5 &&
           p5.mouseX <
-            p5.map(i, 0, data.length - 1, 100, 500) + barWidth * 0.5 &&
+            p5.map(i, 0, data.length - 1, 100, width + 100) + barWidth * 0.5 &&
           p5.mouseY > 350 - currentBarHeight[i] &&
           p5.mouseY < 350
         ) {
@@ -226,15 +237,15 @@ const sketch = (p5) => {
         }
         if (
           p5.mouseX >
-            p5.map(i, 0, data.length - 1, 100, 500) - barWidth * 0.5 &&
+            p5.map(i, 0, data.length - 1, 100, width + 100) - barWidth * 0.5 &&
           p5.mouseX <
-            p5.map(i, 0, data.length - 1, 100, 500) + barWidth * 0.5 &&
+            p5.map(i, 0, data.length - 1, 100, width + 100) + barWidth * 0.5 &&
           p5.mouseY > 350 - currentBarHeight[i] &&
           p5.mouseY < 350
         ) {
           p5.fill(255, 255, 255, 20);
           p5.rect(
-            p5.map(i, 0, data.length - 1, 100, 500) - 35,
+            p5.map(i, 0, data.length - 1, 100, width + 100) - 35,
             350 - barHeight - 12 - 25,
             70,
             35,
@@ -246,19 +257,19 @@ const sketch = (p5) => {
           if (data[i] == 100)
             p5.text(
               data[i],
-              p5.map(i, 0, data.length - 1, 100, 500) - 9,
+              p5.map(i, 0, data.length - 1, 100, width + 100) - 9,
               350 - barHeight - 18
             );
           else {
             p5.text(
               data[i],
-              p5.map(i, 0, data.length - 1, 100, 500) - 6,
+              p5.map(i, 0, data.length - 1, 100, width + 100) - 6,
               350 - barHeight - 21
             );
             p5.fill(100, 100, 100, 255);
             p5.text(
               date[i],
-              p5.map(i, 0, data.length - 1, 100, 500) - 22,
+              p5.map(i, 0, data.length - 1, 100, width + 100) - 22,
               350 - barHeight - 8
             );
           }
@@ -267,7 +278,7 @@ const sketch = (p5) => {
           p5.fill(color[0], color[1], color[2], 50);
         }
         p5.rect(
-          p5.map(i, 0, data.length - 1, 100, 500) - barWidth * 0.5,
+          p5.map(i, 0, data.length - 1, 100, width + 100) - barWidth * 0.5,
           350 - currentBarHeight[i],
           barWidth,
           currentBarHeight[i],
@@ -350,13 +361,22 @@ const sketch = (p5) => {
   };
 };
 
-const NormalGraph = ({ data, date, lineSpeed, barSpeed, color, zoom }) => {
+const NormalGraph = ({
+  data,
+  date,
+  lineSpeed,
+  barSpeed,
+  color,
+  zoom,
+  width,
+}) => {
   useEffect(() => {
     window.noLoop = false;
     return () => {
       window.noLoop = true;
     };
   }, []);
+  console.log(data);
   return (
     <ChartContainer>
       <ReactP5Wrapper
@@ -367,6 +387,7 @@ const NormalGraph = ({ data, date, lineSpeed, barSpeed, color, zoom }) => {
         barSpeed={barSpeed}
         color={color}
         zoom={zoom}
+        width={width}
       />
     </ChartContainer>
   );

src/components/common/header/Header.jsx

@@ -3,7 +3,7 @@ import { StyledHeaderDiv, StyledHeaderParentDiv } from "./Header.style";
 import Search from "../search/Search";
 import { useSelector } from "react-redux";
 
-export default function Header(props) {
+export default function Header() {
   return (
     <StyledHeaderDiv>
       <StyledHeaderParentDiv>

src/components/common/news/keyword-blog/Keyword.blog.jsx

@@ -18,8 +18,6 @@ function timeAgo(dateString) {
   const minute = parseInt(dateString.slice(10, 12), 10);
   const second = parseInt(dateString.slice(12, 14), 10);
 
-  console.log(`${year}-${month}-${day}`);
-
   const articleDate = new Date(year, month, day, hour, minute, second);
   const differenceInMilliseconds = now - articleDate;
   const differenceInHours = Math.floor(

src/pages/main/Main.jsx

@@ -1,20 +1,23 @@
-import { useState } from "react";
 import Header from "../../components/common/header/Header";
 import Sidebar from "../../components/common/sidebar/Sidebar";
 import { StyledMainDiv, MainBody, MainContent } from "./Main.style";
-import RelatedStock from "./RelatedStock";
+import RelatedStockContent from "./RelatedStockContent";
 import { useSelector } from "react-redux";
+import SearchContent from "./SearchContent";
+import { useState } from "react";
+import ScrollToTopButton from "../../components/common/scroll-top-button/Scroll.top.button";
 
 export default function MainPage() {
-  const keyword= useSelector((state) => state.keyword.keyword);
+  const keyword = useSelector((state) => state.keyword.keyword);
 
   return (
     <StyledMainDiv>
       <Sidebar />
       <MainContent>
         <MainBody>
           <Header />
-          <RelatedStock keyword={keyword}></RelatedStock>
+          <RelatedStockContent keyword={keyword}></RelatedStockContent>
+          <SearchContent keyword={keyword}></SearchContent>
         </MainBody>
       </MainContent>
     </StyledMainDiv>

src/pages/main/Main.style.js

@@ -3,13 +3,12 @@ import styled from "styled-components";
 export const StyledMainDiv = styled.div`
   display: flex;
   width: 100vw;
-  height: 100vh;
+  height: 100%;
 `;
 
 export const MainBody = styled.div`
   display: flex;
   width: 100%;
-  height: 100%;
   flex-direction: column;
   align-items: center;
   justify-contents: center;
@@ -19,7 +18,8 @@ export const MainContent = styled.div`
   display: block;
   flex: 1;
   width: 100vw;
-  height: 100%;
+  height: auto;
+  overflow-y: scroll;
 `;
 
 export const StyledMainContentDiv = styled.div`

src/pages/main/RelatedStock.jsx → src/pages/main/RelatedStockContent.jsx

@@ -1,11 +1,11 @@
 import { useState, useEffect } from "react";
-import { StyledMainContentDiv } from "./RelatedStock.style";
 import ContentHeader from "./contents-item/ContentHeader";
 import StockContent from "./contents-item/StockContent";
 import { Contents, StyledContentsDiv } from "./contents-item/Contents.style";
 import Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import axios from "axios";
+import { StyledMainContentDiv } from "./Main.style";
 
 export default function RelatedStock({ keyword }) {
   const STOCK_SIZE = 6;
@@ -15,6 +15,7 @@ export default function RelatedStock({ keyword }) {
   const [companies, setCompaines] = useState([]);
 
   useEffect(() => {
+    setCompaines([]);
     const fetchData = async () => {
       try {
         const response = await axios.get(`/api/company?word=${keyword}`);
@@ -28,24 +29,26 @@ export default function RelatedStock({ keyword }) {
       }
     };
     fetchData();
-  }, []);
+  }, [keyword]);
 
   return (
     <StyledMainContentDiv>
       <ContentHeader
         imgUrl="/assets/images/hand-with-care.svg"
         keyword={keyword}
-        description="관련도가 높은 주식회사에요."
+        description="와 관련도가 높은 주식회사에요."
+        toLink="/main/stock"
       ></ContentHeader>
       <Contents>
         {/* 내용이 들어오면 변경 */}
         {companies.length === 0
-          ? Array.from({ length: STOCK_SIZE }).map(() => (
+          ? Array.from({ length: STOCK_SIZE }).map((elem, index) => (
               <StyledContentsDiv
                 width={STOCK_CONTENT_WIDTH}
                 height={STOCK_CONTENT_HEIGHT}
               >
                 <Skeleton
+                  key={index}
                   width={140}
                   height={40}
                   style={{ margin: "0.5rem" }}