[Refactor] 컴포넌트 코드 리팩토링

- 좌/우측 컴포넌트 및 중앙 차트 컴포넌트 관련 가독성 떨어지는 코드 리팩토링 - 기능 구현 후 추가적인 리팩토링 예정 Issues #43
codestates-seb · Sep 4, 2023 · deb6d40 · deb6d40
1 parent 377a3c7
commit deb6d40
Show file tree

Hide file tree

Showing 29 changed files with 503 additions and 595 deletions.
diff --git a/.../components/CentralChartSection/Index.tsx → client/src/components/CentralChart/Index.tsx b/.../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;

diff --git a/...onents/CentralChartSection/StockChart.tsx → ...rc/components/CentralChart/StockChart.tsx b/...onents/CentralChartSection/StockChart.tsx → ...rc/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%",

diff --git a/...s/CentralSectionMenu/FLineBookmarkBtn.tsx → ...mponents/CentralChartMenu/BookmarkBtn.tsx b/...s/CentralSectionMenu/FLineBookmarkBtn.tsx → ...mponents/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;
   }

diff --git a/client/src/components/CentralChartMenu/ChangeChartCycleBtn.tsx b/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;
+`;
diff --git a/...ntralSectionMenu/SLineCompareChartBtn.tsx → ...ents/CentralChartMenu/CompareChartBtn.tsx b/...ntralSectionMenu/SLineCompareChartBtn.tsx → ...ents/CentralChartMenu/CompareChartBtn.tsx
diff --git a/...ntralSectionMenu/FLineExpandScreenBtn.tsx → ...ents/CentralChartMenu/ExpandScreenBtn.tsx b/...ntralSectionMenu/FLineExpandScreenBtn.tsx → ...ents/CentralChartMenu/ExpandScreenBtn.tsx
diff --git a/client/src/components/CentralChartMenu/Index.tsx b/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;
+  }
+`;
diff --git a/...ents/CentralSectionMenu/FLineTradeBtn.tsx → ...onents/CentralChartMenu/StockOrderBtn.tsx b/...ents/CentralSectionMenu/FLineTradeBtn.tsx → ...onents/CentralChartMenu/StockOrderBtn.tsx
@@ -1,6 +1,6 @@
 import { styled } from "styled-components";
 
-const TradeBtn = (props: OwnProps) => {
+const StockOrderBtn = (props: OwnProps) => {
   const { type } = props;
   const buttonText: string = type === "buying" ? "매수" : "매도";
 
@@ -11,7 +11,7 @@ const TradeBtn = (props: OwnProps) => {
   );
 };
 
-export default TradeBtn;
+export default StockOrderBtn;
 
 // type 정의
 interface OwnProps {
@@ -36,8 +36,7 @@ const Button = styled.div<OwnProps>`
 
   font-size: 12px;
   color: ${(props) => (props.type === "buying" ? "#cc3c3a" : "#4479c2")};
-  background-color: ${(props) =>
-    props.type === "buying" ? "#fcdddb" : "#dce9fc"};
+  background-color: ${(props) => (props.type === "buying" ? "#fcdddb" : "#dce9fc")};
 
   padding-top: 2px;
   border-radius: 0.2rem;

diff --git a/client/src/components/CentralChartMenu/StockOverview.tsx b/client/src/components/CentralChartMenu/StockOverview.tsx
@@ -0,0 +1,96 @@
+import { styled } from "styled-components";
+
+// dummyData
+import { dummyData } from "./dummyData";
+
+const marketType: string = "코스피";
+const volumeText: string = "거래량";
+const valueText: string = "거래대금";
+
+// styled-component 수정 및 미디어 쿼리 적용
+const StockOverview = () => {
+  return (
+    <Container>
+      <img className="CorpLogo" src={dummyData.corpLogo} />
+      <div className="CorpName">{dummyData.corpName}</div>
+      <div className="StockCode">
+        {dummyData.stockCode} <span>{marketType}</span>
+      </div>
+      <div className="StockPrice">{dummyData.stockPrice}</div>
+      <div className="PriceChangeRate">{dummyData.changeRate}</div>
+      <div className="PriceChangeAmount">{dummyData.changeAmount}</div>
+      <TransactionVolume>
+        <span>{volumeText}</span>
+        {dummyData.totalVolume}
+      </TransactionVolume>
+      <TransactionValue>
+        <span>{valueText}</span>
+        {dummyData.totalValue}
+      </TransactionValue>
+    </Container>
+  );
+};
+
+export default StockOverview;
+
+const Container = styled.div`
+  flex: 7 0 0;
+  overflow-x: scroll;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 12px;
+  padding-right: 12px;
+  gap: 8px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .CorpLogo {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+  }
+
+  .CorpName {
+    white-space: nowrap;
+    min-width: min-content;
+    font-size: 18px;
+    font-weight: 530;
+  }
+
+  .StockCode {
+    white-space: nowrap;
+    min-width: min-content;
+    font-size: 14px;
+    color: #999999;
+  }
+
+  .StockPrice {
+    font-size: 18px;
+    color: #ed2926;
+    font-weight: 530;
+  }
+
+  .PriceChangeRate,
+  .PriceChangeAmount {
+    font-size: 14px;
+    color: #ed2926;
+  }
+`;
+
+const TransactionVolume = styled.div`
+  white-space: nowrap;
+  min-width: min-content;
+  font-size: 14px;
+  color: #525252;
+
+  & span {
+    color: #999999;
+    padding-right: 5px;
+  }
+`;
+
+const TransactionValue = styled(TransactionVolume)``;
diff --git a/client/src/components/CentralChartMenu/dummyData.ts b/client/src/components/CentralChartMenu/dummyData.ts
@@ -0,0 +1,23 @@
+import dummyImg from "../../asset/CentralSectionMenu-dummyImg.png";
+
+export const dummyData: dummyProps = {
+  corpLogo: dummyImg,
+  corpName: "카카오",
+  stockCode: "035720",
+  stockPrice: "48,600",
+  changeRate: "+1.25%",
+  changeAmount: "▲600",
+  totalVolume: "864,728",
+  totalValue: "419억 1,468만",
+};
+
+interface dummyProps {
+  corpLogo: string;
+  corpName: string;
+  stockCode: string;
+  stockPrice: string;
+  changeRate: string;
+  changeAmount: string;
+  totalVolume: string;
+  totalValue: string;
+}
diff --git a/client/src/components/CentralChartSection/TransactionVolumeChart.tsx b/client/src/components/CentralChartSection/TransactionVolumeChart.tsx