Skip to content

Commit

Permalink
[Feat] 주식주문 컴포넌트 상단 종목명 레이아웃 구현
Browse files Browse the repository at this point in the history
- 주식주문 컴포넌트 상단 종목명 관련 레이아웃 구현

Issues #12
  • Loading branch information
novice1993 committed Aug 31, 2023
1 parent 8203e04 commit 679c2b7
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 2 deletions.
Binary file added client/src/asset/CentralSectionMenu-dummyImg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file removed client/src/asset/README.md
Empty file.
8 changes: 7 additions & 1 deletion client/src/components/StockOrder/Index.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,24 @@
import { styled } from "styled-components";

import UpperBar from "./UpperBar";
import StockName from "./StockName";

const StockOrder = () => {
return (
<Container>
<UpperBar />
<StockName />
</Container>
);
};

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%;
Expand Down
58 changes: 58 additions & 0 deletions client/src/components/StockOrder/StockName.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<Container>
<CorpLogo src={logoImg} />
<NameContainer>
<CorpName>{corpName}</CorpName>
<StockCode>
{stockCode} {marketType}
</StockCode>
</NameContainer>
</Container>
);
};

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;
`;
2 changes: 1 addition & 1 deletion client/src/components/StockOrder/UpperBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 679c2b7

Please sign in to comment.