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 abeda5e commit 8203e04
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 10 deletions.
20 changes: 20 additions & 0 deletions client/src/components/StockOrder/Index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { styled } from "styled-components";

import UpperBar from "./UpperBar";

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

export default StockOrder;

const Container = styled.div`
flex: 3.3 0 0;
min-width: 400px;
height: 100%;
border-left: 1px solid #2f4f4f;
`;
42 changes: 42 additions & 0 deletions client/src/components/StockOrder/UpperBar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { styled } from "styled-components";

const titleText: string = "주식주문";

const UpperBar = () => {
return (
<Container>
<Title>{titleText}</Title>
<CloseBtn>&#10005;</CloseBtn>
</Container>
);
};

export default UpperBar;

const Container = styled.div`
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 43px;
border-bottom: 1px solid black;
`;

const Title = styled.div`
font-size: 17px;
font-weight: 450;
color: #1c1c1c;
`;

const CloseBtn = styled.button`
position: absolute;
right: 10px;
width: 28px;
height: 100%;
border: none;
font-size: 20px;
color: #525252;
background-color: #ffff;
`;
21 changes: 11 additions & 10 deletions client/src/page/MainPage.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import { styled } from "styled-components";
import LogoutHeader from "../components/Headers/LogoutHeader"
import LoginHeader from "../components/Headers/LoginHeader"

import LoginHeader from "../components/Headers/LoginHeader";
import StockOrder from "../components/StockOrder/Index";

const MainPage = () => {
return (
<Container>
<LoginHeader />
<LogoutHeader />
<Main>
<LeftSection></LeftSection>
<CentralSection></CentralSection>
<RightSection></RightSection>
<StockOrder />
{/* <RightSection></RightSection> */}
</Main>
</Container>
);
Expand Down Expand Up @@ -38,12 +39,12 @@ const LeftSection = styled.section`
border: 1px solid black;
`;

const RightSection = styled.section`
flex: 3.3 0 0;
min-width: 400px;
height: 100%;
border: 1px solid black;
`;
// const RightSection = styled.section`
// flex: 3.3 0 0;
// min-width: 400px;
// height: 100%;
// border: 1px solid black;
// `;

const CentralSection = styled.section`
flex: 6.7 0 0;
Expand Down

0 comments on commit 8203e04

Please sign in to comment.