From 22246578acc499a77952fec649313a7107c6f5d5 Mon Sep 17 00:00:00 2001 From: novice1993 Date: Wed, 30 Aug 2023 09:48:59 +0900 Subject: [PATCH 01/10] =?UTF-8?q?[Feat]=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B0=B0=EC=B9=98=20=EB=B0=8F=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=84=B8=EB=B6=84=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - chart 관련 컴포넌트 생성 및 MainPage에 배치 - 내부 레이아웃 세분화 (상단 메뉴바, 주가 차트, 거래량 차트) - 상단 메뉴 일부 구현 (주가 및 거래량 개요) Issues #11 --- .../asset/CentralChartSection-dummyImg.png | Bin 0 -> 4955 bytes client/src/asset/README.md | 0 .../components/CentralChartSection/Index.tsx | 26 +++++ .../CentralChartSection/StockPriceChart.tsx | 15 +++ .../TransactionVolumeChart.tsx | 15 +++ .../UpperMenu-ExpandScreenBtn.tsx | 36 +++++++ .../UpperMenu-StockInfoOverview.tsx | 101 ++++++++++++++++++ .../CentralChartSection/UpperMenuBar.tsx | 38 +++++++ client/src/page/MainPage.tsx | 10 +- 9 files changed, 234 insertions(+), 7 deletions(-) create mode 100644 client/src/asset/CentralChartSection-dummyImg.png delete mode 100644 client/src/asset/README.md create mode 100644 client/src/components/CentralChartSection/Index.tsx create mode 100644 client/src/components/CentralChartSection/StockPriceChart.tsx create mode 100644 client/src/components/CentralChartSection/TransactionVolumeChart.tsx create mode 100644 client/src/components/CentralChartSection/UpperMenu-ExpandScreenBtn.tsx create mode 100644 client/src/components/CentralChartSection/UpperMenu-StockInfoOverview.tsx create mode 100644 client/src/components/CentralChartSection/UpperMenuBar.tsx diff --git a/client/src/asset/CentralChartSection-dummyImg.png b/client/src/asset/CentralChartSection-dummyImg.png new file mode 100644 index 0000000000000000000000000000000000000000..808ee025441f8840110598e337633b7e2a93fc51 GIT binary patch literal 4955 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 literal 0 HcmV?d00001 diff --git a/client/src/asset/README.md b/client/src/asset/README.md deleted file mode 100644 index e69de29b..00000000 diff --git a/client/src/components/CentralChartSection/Index.tsx b/client/src/components/CentralChartSection/Index.tsx new file mode 100644 index 00000000..732bb71c --- /dev/null +++ b/client/src/components/CentralChartSection/Index.tsx @@ -0,0 +1,26 @@ +import { styled } from "styled-components"; + +import UpperMenuBar from "./UpperMenuBar"; +import StockPriceChart from "./StockPriceChart"; +import TransactionVolumeChart from "./TransactionVolumeChart"; + +const CentralChartSection = () => { + return ( + + + + + + ); +}; + +export default CentralChartSection; + +const Container = styled.div` + flex: 6.7 0 0; + min-width: 630px; + height: 100%; + + display: flex; + flex-direction: column; +`; diff --git a/client/src/components/CentralChartSection/StockPriceChart.tsx b/client/src/components/CentralChartSection/StockPriceChart.tsx new file mode 100644 index 00000000..1c0cbd7d --- /dev/null +++ b/client/src/components/CentralChartSection/StockPriceChart.tsx @@ -0,0 +1,15 @@ +import { styled } from "styled-components"; + +const StockPriceChart = () => { + return StockPriceChart; +}; + +export default StockPriceChart; + +const Container = styled.div` + flex: 2.5 0 0; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid darkgray; +`; diff --git a/client/src/components/CentralChartSection/TransactionVolumeChart.tsx b/client/src/components/CentralChartSection/TransactionVolumeChart.tsx new file mode 100644 index 00000000..8855348a --- /dev/null +++ b/client/src/components/CentralChartSection/TransactionVolumeChart.tsx @@ -0,0 +1,15 @@ +import { styled } from "styled-components"; + +const TransactionVolumeChart = () => { + return TransactionVolumeChart; +}; + +export default TransactionVolumeChart; + +const Container = styled.div` + flex: 1 0 0; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid darkgray; +`; diff --git a/client/src/components/CentralChartSection/UpperMenu-ExpandScreenBtn.tsx b/client/src/components/CentralChartSection/UpperMenu-ExpandScreenBtn.tsx new file mode 100644 index 00000000..f48b9132 --- /dev/null +++ b/client/src/components/CentralChartSection/UpperMenu-ExpandScreenBtn.tsx @@ -0,0 +1,36 @@ +import { styled } from "styled-components"; + +const expandLeft: string = "<"; +const expandRight: string = ">"; + +const ExpandScreenBtn = (props: OwnProps) => { + const { direction } = props; + + if (direction === "left") { + return {expandLeft}; + } + + if (direction === "right") { + return {expandRight}; + } +}; + +export default ExpandScreenBtn; + +// type 정의 +interface OwnProps { + direction: string; +} + +// component 생성 +const ExpandBtn = styled.div` + width: 43px; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + border-right: ${(props) => + props.direction === "left" && "1px solid darkgray"}; + border-left: ${(props) => + props.direction === "right" && "1px solid darkgray"}; +`; diff --git a/client/src/components/CentralChartSection/UpperMenu-StockInfoOverview.tsx b/client/src/components/CentralChartSection/UpperMenu-StockInfoOverview.tsx new file mode 100644 index 00000000..dc82b340 --- /dev/null +++ b/client/src/components/CentralChartSection/UpperMenu-StockInfoOverview.tsx @@ -0,0 +1,101 @@ +import { styled } from "styled-components"; + +// dummyData -> 일부 재활용 예정 (변수명 다시 생각) +import dummyImg from "../../asset/CentralChartSection-dummyImg.png"; +const corpName: string = "카카오"; +const stockCode: string = "035720"; +const stockCodeAdditionalInfo: string = "코스피"; +const stockPrice: string = "48,600"; +const changeRate: string = "+1.25%"; +const chageAmount: string = "▲600"; +const transactionVolume: string = "864,728"; +const volumeAdditionalInfo: string = "거래량"; +const transactionValue: string = "419억 1,468만"; +const valueAdditionalInfo: string = "거래대금"; + +const StockInfoOverview = () => { + return ( + + + {corpName} + + {stockCode} {stockCodeAdditionalInfo} + + {stockPrice} + {changeRate} + {chageAmount} + + {volumeAdditionalInfo} + {transactionVolume} + + + {valueAdditionalInfo} + {transactionValue} + + + ); +}; + +export default StockInfoOverview; + +const Container = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding-left: 12px; + padding-right: 12px; + gap: 8px; +`; + +const CorpLogo = styled.img` + width: 24px; + height: 24px; + border-radius: 50%; +`; + +const CorpName = styled.div` + font-size: 18px; + font-weight: 530; +`; + +const StockCode = styled.div` + font-size: 14px; + color: #999999; +`; + +const StockPrice = styled.div` + font-size: 18px; + color: #ed2926; + font-weight: 530; +`; + +const PriceChangeRate = styled.div` + font-size: 14px; + color: #ed2926; +`; + +const PriceChangeAmount = styled.div` + font-size: 14px; + color: #ed2926; +`; + +const TransactionVolume = styled.div` + font-size: 14px; + color: #525252; + + & span { + color: #999999; + padding-right: 5px; + } +`; + +const TransactionValue = styled.div` + font-size: 14px; + color: #525252; + + & span { + color: #999999; + padding-right: 5px; + } +`; diff --git a/client/src/components/CentralChartSection/UpperMenuBar.tsx b/client/src/components/CentralChartSection/UpperMenuBar.tsx new file mode 100644 index 00000000..2f54b9e5 --- /dev/null +++ b/client/src/components/CentralChartSection/UpperMenuBar.tsx @@ -0,0 +1,38 @@ +import { styled } from "styled-components"; + +import ExpandScreenBtn from "./UpperMenu-ExpandScreenBtn"; +import StockInfoOverview from "./UpperMenu-StockInfoOverview"; + +const UpperMenuBar = () => { + return ( + + + + + + + second + + ); +}; + +export default UpperMenuBar; + +const Container = styled.div` + width: 100%; + text-align: center; +`; + +const FirstLine = styled.div` + width: 100%; + height: 44px; + display: flex; + flex-direction: row; + border-bottom: 1px solid darkgray; +`; + +const SecondLine = styled.div` + width: 100%; + height: 40px; + border-bottom: 1px solid darkgray; +`; diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx index 9fdbbb5e..3c1e062e 100644 --- a/client/src/page/MainPage.tsx +++ b/client/src/page/MainPage.tsx @@ -1,12 +1,14 @@ import { styled } from "styled-components"; +import CentralChartSection from "../components/CentralChartSection/Index"; + const MainPage = () => { return (
- +
@@ -47,9 +49,3 @@ const RightSection = styled.section` height: 100%; border: 1px solid black; `; - -const CentralSection = styled.section` - flex: 6.7 0 0; - min-width: 630px; - height: 100%; -`; From 55d71fd7c24c4c8db6ca1fc89d79fb95b88d9f78 Mon Sep 17 00:00:00 2001 From: novice1993 Date: Wed, 30 Aug 2023 15:31:28 +0900 Subject: [PATCH 02/10] =?UTF-8?q?[Feat]=20=EC=A4=91=EC=95=99=20=EC=84=B9?= =?UTF-8?q?=EC=85=98=20=EC=83=81=EB=8B=A8=20=EB=A9=94=EB=89=B4=EB=B0=94=20?= =?UTF-8?q?=EC=9D=BC=EB=B6=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 중앙 차트섹션 관련 상단 메뉴바 일부 레이아웃 구현 (첫째줄 메뉴) - 해상도 변경에 따른 레이아웃 깨짐 현상은 추후 수정할 예정 Issues #11 --- .../asset/CentralSectionMenu-BookmarkOff.png | Bin 0 -> 1146 bytes .../CentralSectionMenu-BookmarkOn.png.png | Bin 0 -> 1192 bytes .../asset/CentralSectionMenu-compareChart.png | Bin 0 -> 10305 bytes ...mg.png => CentralSectionMenu-dummyImg.png} | Bin .../components/CentralChartSection/Index.tsx | 2 +- .../CentralChartSection/UpperMenuBar.tsx | 38 --------------- .../FirstLineBookmarkBtn.tsx | 39 ++++++++++++++++ .../FirstLineExpandScreenBtn.tsx} | 6 +-- .../CentralSectionMenu/FirstLineMenu.tsx | 29 ++++++++++++ .../FirstLineStockInfoOverview.tsx} | 5 +- .../CentralSectionMenu/FirstLineTradeBtn.tsx | 44 ++++++++++++++++++ .../components/CentralSectionMenu/Index.tsx | 20 ++++++++ .../SecondLineCompareChartBtn.tsx | 15 ++++++ .../CentralSectionMenu/SecondLineMenu.tsx | 13 ++++++ 14 files changed, 167 insertions(+), 44 deletions(-) create mode 100644 client/src/asset/CentralSectionMenu-BookmarkOff.png create mode 100644 client/src/asset/CentralSectionMenu-BookmarkOn.png.png create mode 100644 client/src/asset/CentralSectionMenu-compareChart.png rename client/src/asset/{CentralChartSection-dummyImg.png => CentralSectionMenu-dummyImg.png} (100%) delete mode 100644 client/src/components/CentralChartSection/UpperMenuBar.tsx create mode 100644 client/src/components/CentralSectionMenu/FirstLineBookmarkBtn.tsx rename client/src/components/{CentralChartSection/UpperMenu-ExpandScreenBtn.tsx => CentralSectionMenu/FirstLineExpandScreenBtn.tsx} (79%) create mode 100644 client/src/components/CentralSectionMenu/FirstLineMenu.tsx rename client/src/components/{CentralChartSection/UpperMenu-StockInfoOverview.tsx => CentralSectionMenu/FirstLineStockInfoOverview.tsx} (95%) create mode 100644 client/src/components/CentralSectionMenu/FirstLineTradeBtn.tsx create mode 100644 client/src/components/CentralSectionMenu/Index.tsx create mode 100644 client/src/components/CentralSectionMenu/SecondLineCompareChartBtn.tsx create mode 100644 client/src/components/CentralSectionMenu/SecondLineMenu.tsx diff --git a/client/src/asset/CentralSectionMenu-BookmarkOff.png b/client/src/asset/CentralSectionMenu-BookmarkOff.png new file mode 100644 index 0000000000000000000000000000000000000000..1f3bec98b0b51da7dd7dc28706798c4e52164eef GIT binary patch literal 1146 zcmV-=1cm#FP)K~#7F)mKYM zRa+Qdd+&3OdPF_G5V>-Epo8nRE2x8WFIRDL2W4Ut!{{*#Y+8++NJSDvrwAuKhE39m zNYKzhLa7 zAQ0&6?d{F4tgJMeo100w?llyiLNGf!dmaQz9k+7o>gt-Nr>CFM1xT29F1)~N2+k$m z$j{Heh`|5}eQ0P%>+bIM#2{q?oP3Rm_x*nVzXJmU$A|>&H#s?JSA|Fst^`ypX(U0y zb-Aq#hr`EtFTJm?&mL8Iif@oP^l)r!ER>#}9`gBorG{aIaVy8NtTGTd2@ixtaktAk>3O>1l6omrTYw zL;xASBaRT|<>k4g7$hu^AOf}*;yD28Z;B(r_V)H|@u}nu&XKs`hMMH&=Dw(@sX-X^ z|HMzk#>Pgpwzl?;V2j0P_kZaD)UT+js_Hp7IJhN#5@NB~-KM6ds9=jrN=hW_lIotb z3N*xr%E&)HK7KYkJNv%)0nE?OUu|h=d5Vm;Ha9mv;1-F=qs8(?4hSfxsoB=n_GEE! z@f4Mp@CbSbrF;g;`?j{WBtlAx%(AjFv%bFGWW|TeP+hYZh?p@kF>xs?E9-{vfVH)? zdkqZ@QC9T9A+~Z5v@KV?Ah8olE)kn;W@hF;!Xwhs(*B@*5JF|SQf?C<#m+{Q>@<|z zt!VKv;Sm`b84=opTwhpNDAC{~E01?WCz758bfh8?!)~qjYe4%h>Fn&xM)}E=l@*H( zN~+wI04+u@_iVjFM@L6Q%@Im+x$A-CMnHoljmaKRmMnk6%c(CND3~CQw{l zEJj8~;-_lL1U`98{GE7ze}Df~e}DgpNF?$I@_2A?@H9S5pC+!ur`lg+#M07|UR_-+ zP+6`{&|C;;NS;MZbLbk!@tdissmrMC*C}DE|EZyNZg6 zKQVpJqADRZ4-i{y(o6H*-Q5Sk|4{ytHbHiq1qB7~p~oPlp6qG9YOXKjNxL={Q_y^z$=X6GQ?A`CVmzXK1X%$D0RGQhvTx zXL?+SG_SYUBKZP5S46)HnuACxe?QK@q(q`Wgp@bn64o4F#lJQ_0^hR3-RzMSU;qFB M07*qoM6N<$f-yM|L;wH) literal 0 HcmV?d00001 diff --git a/client/src/asset/CentralSectionMenu-BookmarkOn.png.png b/client/src/asset/CentralSectionMenu-BookmarkOn.png.png new file mode 100644 index 0000000000000000000000000000000000000000..af97fcf38f70378a973b320d8b7e8673b94e9325 GIT binary patch literal 1192 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 kh5DD_d`kB%mxJ5#m%>A8`C|5ge*vC@Y3Qg|0R literal 0 HcmV?d00001 diff --git a/client/src/asset/CentralChartSection-dummyImg.png b/client/src/asset/CentralSectionMenu-dummyImg.png similarity index 100% rename from client/src/asset/CentralChartSection-dummyImg.png rename to client/src/asset/CentralSectionMenu-dummyImg.png diff --git a/client/src/components/CentralChartSection/Index.tsx b/client/src/components/CentralChartSection/Index.tsx index 732bb71c..889e8be2 100644 --- a/client/src/components/CentralChartSection/Index.tsx +++ b/client/src/components/CentralChartSection/Index.tsx @@ -1,6 +1,6 @@ import { styled } from "styled-components"; -import UpperMenuBar from "./UpperMenuBar"; +import UpperMenuBar from "../CentralSectionMenu/Index"; import StockPriceChart from "./StockPriceChart"; import TransactionVolumeChart from "./TransactionVolumeChart"; diff --git a/client/src/components/CentralChartSection/UpperMenuBar.tsx b/client/src/components/CentralChartSection/UpperMenuBar.tsx deleted file mode 100644 index 2f54b9e5..00000000 --- a/client/src/components/CentralChartSection/UpperMenuBar.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { styled } from "styled-components"; - -import ExpandScreenBtn from "./UpperMenu-ExpandScreenBtn"; -import StockInfoOverview from "./UpperMenu-StockInfoOverview"; - -const UpperMenuBar = () => { - return ( - - - - - - - second - - ); -}; - -export default UpperMenuBar; - -const Container = styled.div` - width: 100%; - text-align: center; -`; - -const FirstLine = styled.div` - width: 100%; - height: 44px; - display: flex; - flex-direction: row; - border-bottom: 1px solid darkgray; -`; - -const SecondLine = styled.div` - width: 100%; - height: 40px; - border-bottom: 1px solid darkgray; -`; diff --git a/client/src/components/CentralSectionMenu/FirstLineBookmarkBtn.tsx b/client/src/components/CentralSectionMenu/FirstLineBookmarkBtn.tsx new file mode 100644 index 00000000..9a11936e --- /dev/null +++ b/client/src/components/CentralSectionMenu/FirstLineBookmarkBtn.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 ( + + ; } if (direction === "right") { - return {expandRight}; + return ; } }; @@ -23,7 +23,7 @@ interface OwnProps { } // component 생성 -const ExpandBtn = styled.div` +const Button = styled.div` width: 43px; height: 100%; display: flex; diff --git a/client/src/components/CentralSectionMenu/FirstLineMenu.tsx b/client/src/components/CentralSectionMenu/FirstLineMenu.tsx new file mode 100644 index 00000000..e6461863 --- /dev/null +++ b/client/src/components/CentralSectionMenu/FirstLineMenu.tsx @@ -0,0 +1,29 @@ +import { styled } from "styled-components"; + +import ExpandScreenBtn from "./FirstLineExpandScreenBtn"; +import StockInfoOverview from "./FirstLineStockInfoOverview"; +import BookmarkBtn from "./FirstLineBookmarkBtn"; +import TradeBtn from "./FirstLineTradeBtn"; + +const FirstLineMenu = () => { + return ( + + + + + + + + + ); +}; + +export default FirstLineMenu; + +const Container = styled.div` + width: 100%; + height: 44px; + display: flex; + flex-direction: row; + border-bottom: 1px solid darkgray; +`; diff --git a/client/src/components/CentralChartSection/UpperMenu-StockInfoOverview.tsx b/client/src/components/CentralSectionMenu/FirstLineStockInfoOverview.tsx similarity index 95% rename from client/src/components/CentralChartSection/UpperMenu-StockInfoOverview.tsx rename to client/src/components/CentralSectionMenu/FirstLineStockInfoOverview.tsx index dc82b340..90262124 100644 --- a/client/src/components/CentralChartSection/UpperMenu-StockInfoOverview.tsx +++ b/client/src/components/CentralSectionMenu/FirstLineStockInfoOverview.tsx @@ -1,7 +1,7 @@ import { styled } from "styled-components"; // dummyData -> 일부 재활용 예정 (변수명 다시 생각) -import dummyImg from "../../asset/CentralChartSection-dummyImg.png"; +import dummyImg from "../../asset/CentralSectionMenu-dummyImg.png"; const corpName: string = "카카오"; const stockCode: string = "035720"; const stockCodeAdditionalInfo: string = "코스피"; @@ -39,9 +39,10 @@ const StockInfoOverview = () => { export default StockInfoOverview; const Container = styled.div` + flex: 7 0 0; + display: flex; flex-direction: row; - justify-content: center; align-items: center; padding-left: 12px; padding-right: 12px; diff --git a/client/src/components/CentralSectionMenu/FirstLineTradeBtn.tsx b/client/src/components/CentralSectionMenu/FirstLineTradeBtn.tsx new file mode 100644 index 00000000..b0936391 --- /dev/null +++ b/client/src/components/CentralSectionMenu/FirstLineTradeBtn.tsx @@ -0,0 +1,44 @@ +import { styled } from "styled-components"; + +const TradeBtn = (props: OwnProps) => { + const { type } = props; + const buttonText: string = type === "buying" ? "매수" : "매도"; + + return ( + + + + ); +}; + +export default TradeBtn; + +// 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` + 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; +`; diff --git a/client/src/components/CentralSectionMenu/Index.tsx b/client/src/components/CentralSectionMenu/Index.tsx new file mode 100644 index 00000000..a14acaa0 --- /dev/null +++ b/client/src/components/CentralSectionMenu/Index.tsx @@ -0,0 +1,20 @@ +import { styled } from "styled-components"; + +import FirstLineMenu from "./FirstLineMenu"; +import SecondLineMenu from "./SecondLineMenu"; + +const UpperMenuBar = () => { + return ( + + + + + ); +}; + +export default UpperMenuBar; + +const Container = styled.div` + width: 100%; + text-align: center; +`; diff --git a/client/src/components/CentralSectionMenu/SecondLineCompareChartBtn.tsx b/client/src/components/CentralSectionMenu/SecondLineCompareChartBtn.tsx new file mode 100644 index 00000000..6ae2536e --- /dev/null +++ b/client/src/components/CentralSectionMenu/SecondLineCompareChartBtn.tsx @@ -0,0 +1,15 @@ +import { styled } from "styled-components"; + +const CompareChartBtn = () => { + return ( + + + + ); +}; + +export default CompareChartBtn; + +const Container = styled.div``; + +const Icon = styled.img``; diff --git a/client/src/components/CentralSectionMenu/SecondLineMenu.tsx b/client/src/components/CentralSectionMenu/SecondLineMenu.tsx new file mode 100644 index 00000000..ed696c14 --- /dev/null +++ b/client/src/components/CentralSectionMenu/SecondLineMenu.tsx @@ -0,0 +1,13 @@ +import { styled } from "styled-components"; + +const SecondLineMenu = () => { + return Second; +}; + +export default SecondLineMenu; + +const Container = styled.div` + width: 100%; + height: 40px; + border-bottom: 1px solid darkgray; +`; From 3589a7a265f581bb4b256caf8ae46d379da3cf61 Mon Sep 17 00:00:00 2001 From: novice1993 Date: Wed, 30 Aug 2023 15:35:33 +0900 Subject: [PATCH 03/10] =?UTF-8?q?[Feat]=20=ED=97=A4=EB=8D=94=20=EC=99=84?= =?UTF-8?q?=EC=84=B1=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EB=B8=8C?= =?UTF-8?q?=EB=9E=9C=EC=B9=98=20=EB=B3=91=ED=95=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 메인 페이지 상단에 들어갈 헤더 컴포넌트 완성으로 인한 브랜치 병합 Issues #11 --- client/src/page/MainPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx index ffdbf905..3e37f565 100644 --- a/client/src/page/MainPage.tsx +++ b/client/src/page/MainPage.tsx @@ -1,5 +1,5 @@ import { styled } from "styled-components"; -import Header from "../components/header" +import Header from "../components/header"; import CentralChartSection from "../components/CentralChartSection/Index"; From e81e3f4feedb0e9ed2f7c232738e90f76b8db82c Mon Sep 17 00:00:00 2001 From: novice1993 Date: Wed, 30 Aug 2023 16:37:12 +0900 Subject: [PATCH 04/10] =?UTF-8?q?[Feat]=20=EC=A4=91=EC=95=99=20=EC=84=B9?= =?UTF-8?q?=EC=85=98=20=EC=83=81=EB=8B=A8=20=EB=A9=94=EB=89=B4=EB=B0=94=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 중앙 차트 섹션 관련 상단 메뉴바 레이아웃 완성 - 일부 반응형 및 기능은 차트 레이아웃 및 기능 구현 후 추가 예정 Issues #11 --- .../asset/CentralSectionMenu-compareChart.png | Bin 10305 -> 2426 bytes ...neBookmarkBtn.tsx => FLineBookmarkBtn.tsx} | 4 +- ...ScreenBtn.tsx => FLineExpandScreenBtn.tsx} | 1 + ...verview.tsx => FLineStockInfoOverview.tsx} | 0 ...irstLineTradeBtn.tsx => FLineTradeBtn.tsx} | 0 .../CentralSectionMenu/FirstLineMenu.tsx | 8 ++-- .../SLineChangeChartCycleBox.tsx | 22 +++++++++++ .../SLineChangeChartCycleBtn.tsx | 22 +++++++++++ .../SLineCompareChartBtn.tsx | 37 ++++++++++++++++++ .../SecondLineCompareChartBtn.tsx | 15 ------- .../CentralSectionMenu/SecondLineMenu.tsx | 14 ++++++- client/src/components/header.tsx | 22 +++++------ 12 files changed, 110 insertions(+), 35 deletions(-) rename client/src/components/CentralSectionMenu/{FirstLineBookmarkBtn.tsx => FLineBookmarkBtn.tsx} (89%) rename client/src/components/CentralSectionMenu/{FirstLineExpandScreenBtn.tsx => FLineExpandScreenBtn.tsx} (97%) rename client/src/components/CentralSectionMenu/{FirstLineStockInfoOverview.tsx => FLineStockInfoOverview.tsx} (100%) rename client/src/components/CentralSectionMenu/{FirstLineTradeBtn.tsx => FLineTradeBtn.tsx} (100%) create mode 100644 client/src/components/CentralSectionMenu/SLineChangeChartCycleBox.tsx create mode 100644 client/src/components/CentralSectionMenu/SLineChangeChartCycleBtn.tsx create mode 100644 client/src/components/CentralSectionMenu/SLineCompareChartBtn.tsx delete mode 100644 client/src/components/CentralSectionMenu/SecondLineCompareChartBtn.tsx diff --git a/client/src/asset/CentralSectionMenu-compareChart.png b/client/src/asset/CentralSectionMenu-compareChart.png index 56d6bf0e8345f8e4ce9e886563674572d5bcd5c1..9e3a34e18c84359e8019a0ce6e772a5606391e93 100644 GIT binary patch literal 2426 zcmbu{6v!L(W>= z*1Dw>L7_^MRuqd|A{Mc*OJaoq;mis`k%9=i2=S8A>G4uRNcMR@?DSiwoy~{j$?yHo z|C}?)JSS2m@eXz#b_gK{aYAf5LM#|r$cBWE9S1!RB4isQj*ZDE8a3Q&FWIxrwfn*N z`C*$d&KoO^*_xKrxJll(j`#h@<%Et%Tfqs*a&l*{UGC(lJDU{y5n1-_t>mD8)C%5< zIHTCBY8if2ePplKCuVJxcnlNaKC(vIZuMQYAJBWH0ICdFz*&)&ctb#)0qGE2-qe+8Te=xPWKOE*1W)c zIUe&9XW&vfzNESsb8Q~x$M|tl<<`KZX3V=!q69=|PtE4c zF$YHT3_A@c2b#ubw$#Z7JA_7()t)buX}uJka=}J#v|{|5+o7h{xk!`rF=>MWD!2p- z^&L;4kj~?VGq6MtT<^LD`04Rv3W*$JfcxWnfS+@MfESK!0#3QX0p4~Av)f9{$Hh?M zcGOpdq|3q$S6>e3eO9s2NU!(k&W);q6G->x;)&ur9m^G+ek_z_6RaetK(b1UM9N*$ z0@R)LMuD@-ihyS>d;uJB3-fj(@VRs; zaCb!|aBv)y{FGe<9JK{^e_DaNH*{g%@h$K_H{gGd)34b+oqS4K%dJY~i7y-R21=R2OWqCaLYTg-xhAjB-7?bkn3_qq-oA4@r5@ zmX(B>#Ry|i&uvo*2Q`OULP_c#Z3!T_p^R39diqQP;1G)~Nu8sW9D?h^s1i_5w~6PB znu9IwB$Z7o-3YETqY|T@o2ESAAj=|>@}!k)f@{U(T?{vL3^L#AxAA8$c<?3~db_@X&GV7-`$Y5irqRr^V?`|nvc!`IyvsQ%?wihjd{ zF=f76f0vm4MKgZ*ujVLYZsXG~y%lxvkKV@rZk>A35oSc0iDMbYzeAPj&eUIM)f73on&Cwg zYr0H)5h@8)COT2OY1QlGWCT;Ym?-Ks@ng|)U^ew3t$LfBjAm**iK1>3KLOnjQ6_Sz zVOrHp>P-A3M6155vxceR5R4D~@z`_#(cZnU=}cd4aiHcl$QoM4;72I9YaS_HZL}Hr zKt2KI9ch7R+R<^yj+(paQ^As&e~PU}mBOgae!%fVHo$4Fzy<5gz~{=Nf%B%80KZjb z1sro9IJ-Oy*m-I(u&+CCP+A9Y(rJT$rD$LHT2c7u_K_coqm3;m=YNF%QLii2{?hn_ z$v5QAcj=dYm>aTSH`yno%Xv_9HP;quSP^hhO~T)yCcs4qd@{}v*zO9nYZ9k`>s`Wu zFUR3$vknICkLv_3Lha9a=BtVjW6R^|rt^-{h7Il7C(Nq>!Q!aGaoDxb z=rFvcBk#fv)-B0-6BciKVKqJ&3WJ5L$r|Iq{_Vadf#b&gXAwbFkA>h+YYvM2wF&bO4>;xpPG>&F>5);)*H+#O(A7YTY`2!@%wI-zf%!*ztKYLYek-%l=*^qRduOS(JQ>Ht Magx}^_0psN1z-hdbN~PV literal 10305 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 kh5DD_d`kB%mxJ5#m%>A8`C|5ge*vC@Y3Qg|0R diff --git a/client/src/components/CentralSectionMenu/FirstLineBookmarkBtn.tsx b/client/src/components/CentralSectionMenu/FLineBookmarkBtn.tsx similarity index 89% rename from client/src/components/CentralSectionMenu/FirstLineBookmarkBtn.tsx rename to client/src/components/CentralSectionMenu/FLineBookmarkBtn.tsx index 9a11936e..8eaebd92 100644 --- a/client/src/components/CentralSectionMenu/FirstLineBookmarkBtn.tsx +++ b/client/src/components/CentralSectionMenu/FLineBookmarkBtn.tsx @@ -9,7 +9,7 @@ const BookmarkBtn = () => { return (