Merge pull request #48 from codestates-seb/dev-client#43/ComponentCon…

…nect

[FE] #43 컴포넌트 연결 및 코드 리팩토링

client/src/components/CentralChartSection/Index.tsx → client/src/components/CentralChart/Index.tsx

@@ -1,9 +1,9 @@
 import { styled } from "styled-components";
 
-import UpperMenuBar from "../CentralSectionMenu/Index";
+import UpperMenuBar from "../CentralChartMenu/Index";
 import StockChart from "./StockChart";
 
-const CentralChartSection = () => {
+const CentralChart = () => {
   return (
     <Container>
       <UpperMenuBar />
@@ -12,7 +12,7 @@ const CentralChartSection = () => {
   );
 };
 
-export default CentralChartSection;
+export default CentralChart;
 
 const Container = styled.div`
   flex: 6.7 0 0;

client/src/components/CentralChartSection/StockChart.tsx → client/src/components/CentralChart/StockChart.tsx

@@ -12,48 +12,12 @@ const StockChart = () => {
 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", // 오른쪽에 위치
     },
   ],
@@ -107,7 +71,6 @@ const options = {
   ],
 };
 
-// 사이즈 조절을 위한 스타일 설정
 const chartStyle = {
   width: "100%",
   height: "100%",

client/src/components/CentralSectionMenu/FLineBookmarkBtn.tsx → client/src/components/CentralChartMenu/BookmarkBtn.tsx

@@ -9,7 +9,7 @@ const BookmarkBtn = () => {
   return (
     <Container>
       <Button src={bookmarkOffImg} />
-      <div className="BtntextContainer">{buttonText}</div>
+      <div className="BtnTextContainer">{buttonText}</div>
     </Container>
   );
 };
@@ -23,11 +23,10 @@ const Container = styled.div`
   gap: 2px;
   padding-right: 14px;
 
-  .BtntextContainer {
+  .BtnTextContainer {
     display: flex;
     justify-content: center;
     align-items: center;
-
     font-size: 14.5px;
     color: darkgray;
   }

client/src/components/CentralChartMenu/ChangeChartCycleBtn.tsx

@@ -0,0 +1,35 @@
+import { styled } from "styled-components";
+
+const chartCylceText01: string = "30분";
+const chartCylceText02: string = "일";
+const chartCylceText03: string = "주";
+const chartCylceText04: string = "월";
+const chartCylceText05: string = "년";
+
+const ChangeChartCycleBtn = () => {
+  return (
+    <Container>
+      <Button>{chartCylceText01}</Button>
+      <Button>{chartCylceText02}</Button>
+      <Button>{chartCylceText03}</Button>
+      <Button>{chartCylceText04}</Button>
+      <Button>{chartCylceText05}</Button>
+    </Container>
+  );
+};
+
+export default ChangeChartCycleBtn;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+`;
+
+const Button = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-right: 14px;
+  color: #999999;
+`;

client/src/components/CentralChartMenu/ExpandScreenBtn.tsx

@@ -0,0 +1,55 @@
+import { useDispatch } from "react-redux";
+import { styled } from "styled-components";
+import { changeLeftScreen, changeRightScreen } from "../../reducer/ExpandScreen-Reducer";
+
+const expandLeft: string = "<";
+const expandRight: string = ">";
+
+const ExpandScreenBtn = (props: OwnProps) => {
+  const { direction } = props;
+
+  const dispatch = useDispatch();
+
+  const handleChangeLeftScreen = () => {
+    dispatch(changeLeftScreen());
+  };
+
+  const handleChangeRightScreen = () => {
+    dispatch(changeRightScreen());
+  };
+
+  if (direction === "left") {
+    return (
+      <Button direction="left" onClick={handleChangeLeftScreen}>
+        {expandLeft}
+      </Button>
+    );
+  }
+
+  if (direction === "right") {
+    return (
+      <Button direction="right" onClick={handleChangeRightScreen}>
+        {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"};
+`;

client/src/components/CentralChartMenu/Index.tsx

@@ -0,0 +1,52 @@
+import { styled } from "styled-components";
+
+import ExpandScreenBtn from "./ExpandScreenBtn";
+import StockOverview from "./StockOverview";
+import BookmarkBtn from "./BookmarkBtn";
+import StockOrderBtn from "./StockOrderBtn";
+import CompareChartBtn from "./CompareChartBtn";
+import ChangeChartCycleBtn from "./ChangeChartCycleBtn";
+
+const UpperMenuBar = () => {
+  return (
+    <Container>
+      <div className="FirstLine">
+        <ExpandScreenBtn direction="left" />
+        <StockOverview />
+        <BookmarkBtn />
+        <StockOrderBtn type="buying" />
+        <StockOrderBtn type="selling" />
+        <ExpandScreenBtn direction="right" />
+      </div>
+      <div className="SecondLine">
+        <CompareChartBtn />
+        <ChangeChartCycleBtn />
+      </div>
+    </Container>
+  );
+};
+
+export default UpperMenuBar;
+
+const Container = styled.div`
+  width: 100%;
+  text-align: center;
+
+  .FirstLine {
+    width: 100%;
+    height: 44px;
+    display: flex;
+    flex-direction: row;
+    border-bottom: 1px solid darkgray;
+  }
+
+  .SecondLine {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid darkgray;
+  }
+`;

client/src/components/CentralChartMenu/StockOrderBtn.tsx

@@ -0,0 +1,60 @@
+import { useDispatch } from "react-redux";
+import { styled } from "styled-components";
+import { stockOrderOpen } from "../../reducer/StockOrderSet-Reducer";
+import { orderTypeBuying, orderTypeSelling } from "../../reducer/StockOrderType-Reducer";
+
+const StockOrderBtn = (props: OwnProps) => {
+  const { type } = props;
+  const buttonText: string = type === "buying" ? "매수" : "매도";
+
+  const dispatch = useDispatch();
+
+  const handleStockOrderSet = () => {
+    dispatch(stockOrderOpen());
+
+    if (type === "buying") {
+      dispatch(orderTypeBuying());
+    } else {
+      dispatch(orderTypeSelling());
+    }
+  };
+
+  return (
+    <Container>
+      <Button type={type} onClick={handleStockOrderSet}>
+        {buttonText}
+      </Button>
+    </Container>
+  );
+};
+
+export default StockOrderBtn;
+
+// type 정의
+interface OwnProps {
+  type: string;
+}
+
+// component 생성
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-right: 12px;
+`;
+
+const Button = styled.div<OwnProps>`
+  width: 44px;
+  height: 24px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 12px;
+  color: ${(props) => (props.type === "buying" ? "#cc3c3a" : "#4479c2")};
+  background-color: ${(props) => (props.type === "buying" ? "#fcdddb" : "#dce9fc")};
+
+  padding-top: 2px;
+  border-radius: 0.2rem;
+`;