[Feat] 주식주문 컴포넌트 전체 레이아웃 틀 구현

- 주식주문 컴포넌트 전체 레이아웃 틀 구현 완료 - 세부적인 요소 및 디자인 추가 예정 Issues #12
codestates-seb · Sep 1, 2023 · 323b525 · 323b525
1 parent 2e77a51
commit 323b525
Show file tree

Hide file tree

Showing 10 changed files with 357 additions and 20 deletions.
diff --git a/client/src/components/StockOrderSection/Index.tsx b/client/src/components/StockOrderSection/Index.tsx
@@ -5,6 +5,8 @@ import StockName from "./StockName";
 import OrderRequest from "./OrderRequest";
 import OrderResult from "./OrderResult";
 
+// test
+
 const StockOrderSection = () => {
   return (
     <Container>
@@ -28,7 +30,7 @@ const Container = styled.aside`
   display: flex;
   flex-direction: column;
 
-  flex: 3.3 0 0;
+  width: 26%;
   min-width: 400px;
   height: 100%;
   border-left: 1px solid #2f4f4f;

diff --git a/client/src/components/StockOrderSection/OrderRequest.tsx b/client/src/components/StockOrderSection/OrderRequest.tsx
@@ -1,12 +1,12 @@
 import { styled } from "styled-components";
 
-import StockPriceInfo from "./StockPriceInfo";
+import StockPrice from "./StockPrice";
 import StockOrderSetting from "./StockOrderSetting";
 
 const OrderRequest = () => {
   return (
     <Container>
-      <StockPriceInfo />
+      <StockPrice />
       <StockOrderSetting />
     </Container>
   );

diff --git a/client/src/components/StockOrderSection/OrderResult.tsx b/client/src/components/StockOrderSection/OrderResult.tsx
@@ -1,12 +1,52 @@
 import { styled } from "styled-components";
 
+const titleText: string = "주문내역";
+const orderPendingTitle: string = "미체결";
+const orderPendingEmptyMessage: string = "미체결 내역이 없습니다";
+
 const OrderResult = () => {
-  return <Container></Container>;
+  return (
+    <Container>
+      <Title>{titleText}</Title>
+      <OrderPending>
+        <div className="orderPendingTitle">{orderPendingTitle}</div>
+        <div className="emptyIndicator">{orderPendingEmptyMessage}</div>
+      </OrderPending>
+    </Container>
+  );
 };
 
 export default OrderResult;
 
 const Container = styled.div`
   flex: 1 0 0;
-  border-bottom: 1px solid black;
+  padding-top: 16px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const Title = styled.div`
+  font-size: 16px;
+  font-weight: 500;
+  padding-left: 16px;
+  padding-bottom: 16px;
+  /* border-bottom: 1px solid black; */
+`;
+
+const OrderPending = styled.div`
+  .orderPendingTitle {
+    padding-left: 16px;
+    margin-bottom: 8px;
+  }
+
+  .emptyIndicator {
+    width: 100%;
+    height: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 350;
+    color: #999999;
+  }
 `;
diff --git a/client/src/components/StockOrderSection/PriceSetting.tsx b/client/src/components/StockOrderSection/PriceSetting.tsx
@@ -0,0 +1,93 @@
+import { styled } from "styled-components";
+
+const priceSettingTitle: string = "가격";
+const specifiedPriceBtnText: string = "지정가";
+const marketPriceBtnText: string = "시장가";
+
+const PriceSetting = () => {
+  return (
+    <Container>
+      <PriceCategoryBox>
+        <Title>{priceSettingTitle}</Title>
+        <ButtonContainer>
+          <SepcifiedPriceBtn>{specifiedPriceBtnText}</SepcifiedPriceBtn>
+          <MarketPriceBtn>{marketPriceBtnText}</MarketPriceBtn>
+        </ButtonContainer>
+      </PriceCategoryBox>
+      <PriceSettingBox>
+        <PriceController />
+        <DirectionBox>
+          <button className="PriceUp">&#8896;</button>
+          <button className="PriceDown">&#8897;</button>
+        </DirectionBox>
+      </PriceSettingBox>
+    </Container>
+  );
+};
+
+export default PriceSetting;
+
+const Container = styled.div`
+  width: 100%;
+  margin-top: 16px;
+  margin-bottom: 32px;
+`;
+
+const PriceCategoryBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 8px;
+`;
+
+const Title = styled.div`
+  padding-left: 5px;
+  font-size: 13px;
+  color: #999999;
+`;
+
+const ButtonContainer = styled.div`
+  width: 105px;
+  height: 27px;
+  background-color: #ded9d9;
+  border-radius: 0.3rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`;
+
+const SepcifiedPriceBtn = styled.button`
+  width: 50px;
+  height: 23px;
+  padding: 4px;
+  border: none;
+  background-color: #ded9d9;
+  font-size: 13px;
+`;
+
+const MarketPriceBtn = styled(SepcifiedPriceBtn)``;
+
+const PriceSettingBox = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const PriceController = styled.input`
+  flex: 1 0 0;
+  height: 30px;
+`;
+
+const DirectionBox = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  & button {
+    width: 31px;
+    height: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
+  }
+`;
diff --git a/client/src/components/StockOrderSection/StockOrderBtn.tsx b/client/src/components/StockOrderSection/StockOrderBtn.tsx
@@ -0,0 +1,83 @@
+import { styled } from "styled-components";
+
+const availableMoneyText01: string = "최대";
+const availableMoneyText02: string = "원";
+const totalAmountText01: string = "주문총액";
+const totalAmountText02: string = "원";
+const orderBtnText: string = "매수";
+
+// dummyData
+const dummyMoney: string = "9,990,086";
+const dummyAmount: string = "0";
+
+const StockOrderBtn = () => {
+  return (
+    <Container>
+      <AvailableMoney>
+        <span>{availableMoneyText01}</span>
+        <span className="availableMoney">{dummyMoney}</span>
+        <span>{availableMoneyText02}</span>
+      </AvailableMoney>
+      <TotalAmount>
+        <div className="totalAmountText01">{totalAmountText01}</div>
+        <div className="totalAmount">{dummyAmount}</div>
+        <div>{totalAmountText02}</div>
+      </TotalAmount>
+      <OrderBtn>{orderBtnText}</OrderBtn>
+    </Container>
+  );
+};
+
+export default StockOrderBtn;
+
+const Container = styled.div``;
+
+const AvailableMoney = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 4px;
+
+  & span {
+    font-size: 14px;
+    color: #999999;
+  }
+
+  .availableMoney {
+    color: #ed2926;
+  }
+`;
+
+const TotalAmount = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-top: 4px;
+  gap: 4px;
+
+  & div {
+    font-size: 13px;
+    color: #999999;
+    display: flex;
+    align-items: center;
+  }
+
+  .totalAmountText01 {
+    flex: 8 0 0;
+  }
+
+  .totalAmount {
+    color: black;
+    font-size: 15.5px;
+  }
+`;
+
+const OrderBtn = styled.button`
+  width: 100%;
+  height: 32px;
+  margin-top: 16px;
+  border: none;
+  border-radius: 0.25rem;
+  background-color: #ed2926;
+  color: #ffffff;
+  font-weight: 400;
+`;
diff --git a/client/src/components/StockOrderSection/StockOrderSetting.tsx b/client/src/components/StockOrderSection/StockOrderSetting.tsx
@@ -1,4 +1,7 @@
 import { styled } from "styled-components";
+import PriceSetting from "./PriceSetting";
+import VolumeSetting from "./VolumeSetteing";
+import StockOrderBtn from "./StockOrderBtn";
 
 const orderType01: string = "매수";
 const orderType02: string = "매도";
@@ -10,17 +13,18 @@ const StockOrderSetting = () => {
         <div className="buying">{orderType01}</div>
         <div className="selling">{orderType02}</div>
       </OrderType>
+      <PriceSetting />
+      <VolumeSetting />
+      <StockOrderBtn />
     </Container>
   );
 };
 
 export default StockOrderSetting;
 
 const Container = styled.div`
-  width: 208px;
+  width: 51%;
   height: 100%;
-  border-left: 1px solid black;
-  border-right: 1px solid black;
 `;
 
 const OrderType = styled.div`

diff --git a/...ents/StockOrderSection/StockPriceInfo.tsx → ...mponents/StockOrderSection/StockPrice.tsx b/...ents/StockOrderSection/StockPriceInfo.tsx → ...mponents/StockOrderSection/StockPrice.tsx
@@ -1,6 +1,6 @@
 import { styled } from "styled-components";
 
-const StockPriceInfo = () => {
+const StockPrice = () => {
   return (
     <Container>
       <HighFigure></HighFigure>
@@ -10,10 +10,10 @@ const StockPriceInfo = () => {
   );
 };
 
-export default StockPriceInfo;
+export default StockPrice;
 
 const Container = styled.div`
-  width: 160px;
+  width: 40%;
   height: 100%;
   margin-right: 16px;
   border-right: 1px solid black;

diff --git a/client/src/components/StockOrderSection/UpperBar.tsx b/client/src/components/StockOrderSection/UpperBar.tsx
@@ -20,7 +20,7 @@ const Container = styled.div`
   justify-content: center;
   align-items: center;
   width: 100%;
-  height: 43px;
+  min-height: 43px;
   border-bottom: 1px solid black;
 `;
 
@@ -34,7 +34,7 @@ const CloseBtn = styled.button`
   position: absolute;
   right: 10px;
   width: 28px;
-  height: 100%;
+  height: 95%;
   border: none;
   font-size: 20px;
   color: #525252;