✨feat: StockContents.jsx - 연관 주식 탭의 기업 컴포넌트 구체화

#54

src/pages/main/contents-item/Contents.style.js

@@ -0,0 +1,90 @@
+import styled from "styled-components";
+
+export const StyledContentsDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: ${(props) => props.width || "377px"};
+  height: ${(props) => props.height || "196px"};
+  padding: 15px;
+  align-text: center;
+  border: 2px solid #d3d3d3;
+  border-radius: 20px;
+  background-color: white;
+  margin: 4px;
+
+  &:hover {
+    border-color: #43d2ff;
+  }
+`;
+
+// TitleGroup
+export const StyledContentsTitleGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  font-weight: 800;
+  font-size: 1.5rem;
+`;
+
+export const Contents = styled.div`
+  flex: 1;
+  background-color: white;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  overflow: auto;
+  white-space: nowrap;
+`;
+
+// Title & SubTitle & MiniTitle
+export const StyledContentsTitle = styled.div``;
+export const StyledContentsSubTitle = styled.div``;
+export const StyledContentsMiniTitle = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 9px;
+
+  & p {
+    font-size: 0.9rem !important;
+    font-weight: 500;
+    color: ${(props) =>
+      props.signPerYesterday > 0
+        ? "blue"
+        : props.signPerYesterday < 0
+        ? "orangered"
+        : "black"};
+  }
+
+  & img {
+    height: 10px;
+  }
+`;
+
+// Tag
+export const StyledContentsTag = styled.div`
+  display: flex;
+  gap: 10px;
+  font-size: 0.7rem !important;
+  margin-top: 10px;
+
+  & .price-box {
+    display: flex;
+    gap: 5px;
+    padding: 5px;
+    background-color: rgb(211, 211, 211, 0.3);
+    border: 1px solid rgb(211, 211, 211, 0.3);
+    border-radius: 8px;
+  }
+
+  & p {
+    color: orangered;
+  }
+`;

src/pages/main/contents-item/StockContent.jsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from "react";
+
+import {
+  StyledContentsDiv,
+  StyledContentsTitleGroup,
+  StyledContentsTitle,
+  StyledContentsMiniTitle,
+} from "./Contents.style";
+import axios from "axios";
+
+export default function StockContent(props) {
+  const company = props.company;
+  const companyCode = company.code;
+  const companyName = company.name;
+
+  const [ratePerYesterday, setRatePerYesterday] = useState(0);
+  /*
+  	-2 : 상한
+    -1 : 상승
+    0 : 보합
+    1 : 하한
+    2 : 하락
+  */
+  const [signPerYesterday, setsignPerYesterday] = useState(0);
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await axios.get(
+          `api/current-price?symbol=${companyCode}`
+        );
+        setRatePerYesterday(response.data.output.prdy_ctrt);
+        setsignPerYesterday(response.data.output.prdy_vrss_sign - 3);
+      } catch (error) {
+        console.error("Error fetching the news:", error);
+      }
+    };
+    fetchData();
+  }, []);
+
+  return (
+    // !! div에 key값 붙여주세요. (redux 구현 후)
+    <StyledContentsDiv width={props.width} height={props.height}>
+      <StyledContentsTitleGroup>
+        <div>
+          <StyledContentsTitle>{companyName}</StyledContentsTitle>
+        </div>
+        <StyledContentsMiniTitle signPerYesterday={signPerYesterday}>
+          <p>({ratePerYesterday}%)</p>
+          {signPerYesterday > 0 ? (
+            <p>▼</p>
+          ) : signPerYesterday < 0 ? (
+            <p>▲</p>
+          ) : (
+            <p>-</p>
+          )}
+        </StyledContentsMiniTitle>
+      </StyledContentsTitleGroup>
+    </StyledContentsDiv>
+  );
+}