Merge pull request #36 from codestates-seb/dev-client#11/chartComponent

[FE] #11 중앙 차트 컴포넌트 레이아웃 구현

client/package.json

@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "axios": "^1.5.0",
+    "echarts": "^5.4.3",
+    "echarts-for-react": "^3.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.0.7"

client/src/components/CentralChartSection/Index.tsx

@@ -0,0 +1,24 @@
+import { styled } from "styled-components";
+
+import UpperMenuBar from "../CentralSectionMenu/Index";
+import StockChart from "./StockChart";
+
+const CentralChartSection = () => {
+  return (
+    <Container>
+      <UpperMenuBar />
+      <StockChart />
+    </Container>
+  );
+};
+
+export default CentralChartSection;
+
+const Container = styled.div`
+  flex: 6.7 0 0;
+  min-width: 630px;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+`;

client/src/components/CentralChartSection/StockChart.tsx

@@ -0,0 +1,122 @@
+import { styled } from "styled-components";
+import EChartsReact from "echarts-for-react";
+
+const StockChart = () => {
+  return (
+    <Container>
+      <EChartsReact option={options} style={chartStyle} />
+    </Container>
+  );
+};
+
+export default StockChart;
+
+const options = {
+  // title: {
+  //   text: "Stock Chart with Separate Y Axes on the Right Side",
+  // },
+  xAxis: {
+    type: "category",
+    data: [
+      new Date("2023-08-31 14:00").toLocaleDateString(),
+      "2023-08-31 14:00",
+      "Day 1",
+      "Day 2",
+      "Day 3",
+      "Day 4",
+      "Day 5",
+      "Day 6",
+      "Day 7",
+      "Day 8",
+      "Day 9",
+      "Day 10",
+      "Day 11",
+      "Day 12",
+      "Day 13",
+      "Day 14",
+      "Day 15",
+      "Day 16",
+      "Day 17",
+      "Day 18",
+      "Day 19",
+      "Day 20",
+      "Day 21",
+      "Day 22",
+      "Day 23",
+      "Day 24",
+      "Day 25",
+      "Day 26",
+      "Day 27",
+      "Day 28",
+    ], // X 축 라벨
+  },
+  yAxis: [
+    {
+      type: "value",
+      // name: "Price", // 주가 Y 축 라벨
+      position: "right", // 오른쪽에 위치
+    },
+  ],
+  dataZoom: [
+    {
+      type: "inside", // 마우스 스크롤을 통한 줌 인/아웃 지원
+    },
+  ],
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "cross", // 마우스 위치에 눈금 표시
+    },
+  },
+  series: [
+    {
+      name: "주가",
+      type: "candlestick", // 캔들스틱 시리즈
+      data: [
+        [100, 120, 80, 90], // 시가, 종가, 저가, 주가
+        [110, 130, 100, 120],
+        [90, 110, 70, 100],
+        [95, 105, 85, 110],
+        [105, 125, 95, 120],
+        [110, 120, 100, 130],
+        [120, 140, 110, 150],
+        [130, 150, 120, 160],
+        [140, 160, 130, 170],
+        [150, 170, 140, 180],
+        [150, 170, 140, 180],
+        [160, 180, 150, 190],
+        [170, 190, 160, 200],
+        [170, 200, 170, 210],
+        [170, 140, 130, 130],
+        [150, 160, 120, 160],
+        [140, 160, 130, 170],
+        [150, 170, 140, 180],
+        [140, 125, 95, 120],
+        [110, 120, 100, 130],
+        [120, 140, 110, 150],
+        [130, 150, 120, 160],
+        [140, 160, 130, 170],
+        [150, 170, 140, 180],
+        [160, 180, 150, 190],
+        [170, 190, 160, 200],
+        [180, 200, 170, 210],
+        [190, 210, 180, 220],
+      ],
+      yAxisIndex: 0, // 첫 번째 Y 축 사용
+    },
+  ],
+};
+
+// 사이즈 조절을 위한 스타일 설정
+const chartStyle = {
+  width: "100%",
+  height: "100%",
+};
+
+const Container = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;

client/src/components/CentralChartSection/TransactionVolumeChart.tsx

@@ -0,0 +1,15 @@
+import { styled } from "styled-components";
+
+const TransactionVolumeChart = () => {
+  return <Container>TransactionVolumeChart</Container>;
+};
+
+export default TransactionVolumeChart;
+
+const Container = styled.div`
+  flex: 1 0 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid darkgray;
+`;

client/src/components/CentralSectionMenu/FLineBookmarkBtn.tsx

@@ -0,0 +1,39 @@
+import { styled } from "styled-components";
+
+import bookmarkOffImg from "../../asset/CentralSectionMenu-BookmarkOff.png";
+// import bookmarkOnImg from "../../asset/CentralSectionMenu-BookmarkOn.png.png";
+
+const buttonText: string = "관심";
+
+const BookmarkBtn = () => {
+  return (
+    <Container>
+      <Button src={bookmarkOffImg} />
+      <div className="BtntextContainer">{buttonText}</div>
+    </Container>
+  );
+};
+
+export default BookmarkBtn;
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+  padding-right: 14px;
+
+  .BtntextContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 14.5px;
+    color: darkgray;
+  }
+`;
+
+const Button = styled.img`
+  width: 28px;
+  height: 28px;
+`;

client/src/components/CentralSectionMenu/FLineExpandScreenBtn.tsx

@@ -0,0 +1,37 @@
+import { styled } from "styled-components";
+
+const expandLeft: string = "<";
+const expandRight: string = ">";
+
+const ExpandScreenBtn = (props: OwnProps) => {
+  const { direction } = props;
+
+  if (direction === "left") {
+    return <Button direction="left">{expandLeft}</Button>;
+  }
+
+  if (direction === "right") {
+    return <Button direction="right">{expandRight}</Button>;
+  }
+};
+
+export default ExpandScreenBtn;
+
+// type 정의
+interface OwnProps {
+  direction: string;
+}
+
+// component 생성
+const Button = styled.div<OwnProps>`
+  width: 43px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 22px;
+  border-right: ${(props) =>
+    props.direction === "left" && "1px solid darkgray"};
+  border-left: ${(props) =>
+    props.direction === "right" && "1px solid darkgray"};
+`;