From 679c2b7ee01560cc8f9128f88e3bc3d764a80c23 Mon Sep 17 00:00:00 2001 From: novice1993 Date: Fri, 1 Sep 2023 02:28:42 +0900 Subject: [PATCH] =?UTF-8?q?[Feat]=20=EC=A3=BC=EC=8B=9D=EC=A3=BC=EB=AC=B8?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=81=EB=8B=A8=20?= =?UTF-8?q?=EC=A2=85=EB=AA=A9=EB=AA=85=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 주식주문 컴포넌트 상단 종목명 관련 레이아웃 구현 Issues #12 --- .../src/asset/CentralSectionMenu-dummyImg.png | Bin 0 -> 4955 bytes client/src/asset/README.md | 0 client/src/components/StockOrder/Index.tsx | 8 ++- .../src/components/StockOrder/StockName.tsx | 58 ++++++++++++++++++ client/src/components/StockOrder/UpperBar.tsx | 2 +- 5 files changed, 66 insertions(+), 2 deletions(-) create mode 100644 client/src/asset/CentralSectionMenu-dummyImg.png delete mode 100644 client/src/asset/README.md create mode 100644 client/src/components/StockOrder/StockName.tsx diff --git a/client/src/asset/CentralSectionMenu-dummyImg.png b/client/src/asset/CentralSectionMenu-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/StockOrder/Index.tsx b/client/src/components/StockOrder/Index.tsx index 9d5657fe..a005fac6 100644 --- a/client/src/components/StockOrder/Index.tsx +++ b/client/src/components/StockOrder/Index.tsx @@ -1,18 +1,24 @@ import { styled } from "styled-components"; import UpperBar from "./UpperBar"; +import StockName from "./StockName"; const StockOrder = () => { return ( + ); }; export default StockOrder; -const Container = styled.div` +const Container = styled.aside` + position: fixed; + right: 0px; + transition: right 0.3s ease-in-out; + flex: 3.3 0 0; min-width: 400px; height: 100%; diff --git a/client/src/components/StockOrder/StockName.tsx b/client/src/components/StockOrder/StockName.tsx new file mode 100644 index 00000000..8b8b75cc --- /dev/null +++ b/client/src/components/StockOrder/StockName.tsx @@ -0,0 +1,58 @@ +import { styled } from "styled-components"; + +// dummyData +import logoImg from "../../asset/CentralSectionMenu-dummyImg.png"; +const corpName: string = "카카오"; +const stockCode: string = "035720"; +const marketType: string = "코스피"; + +const StockName = () => { + return ( + + + + {corpName} + + {stockCode} {marketType} + + + + ); +}; + +export default StockName; + +const Container = styled.section` + width: 100%; + height: 64px; + display: flex; + flex-direction: row; + align-items: center; + padding-top: 16px; + padding-bottom: 8px; + padding-left: 16px; + gap: 9px; + border-bottom: 1px solid black; +`; + +const CorpLogo = styled.img` + width: 28px; + height: 28px; + border-radius: 50%; +`; + +const NameContainer = styled.div` + height: 40px; + display: flex; + flex-direction: column; +`; + +const CorpName = styled.div` + font-size: 16px; + font-weight: 500; + color: #1c1c1c; +`; +const StockCode = styled.div` + font-size: 14px; + color: #999999; +`; diff --git a/client/src/components/StockOrder/UpperBar.tsx b/client/src/components/StockOrder/UpperBar.tsx index afe3e3b4..ece088fc 100644 --- a/client/src/components/StockOrder/UpperBar.tsx +++ b/client/src/components/StockOrder/UpperBar.tsx @@ -24,7 +24,7 @@ const Container = styled.div` border-bottom: 1px solid black; `; -const Title = styled.div` +const Title = styled.h2` font-size: 17px; font-weight: 450; color: #1c1c1c;