[Feat] 매수/매도 버튼 클릭 시 렌더링 되는 모달창 일부 구현

- 주식주문 창의 매수/매도버튼 클릭했을 때 렌더링 되는 모달창 일부 구현 (거래량 0일 때 뜨는 알림문구) - 아직 화면 및 기능 일부만 구현된 상태로, 추후 완성할 예정 Issues #17
codestates-seb · Sep 9, 2023 · 5076a8b · 5076a8b
1 parent 862a0a4
commit 5076a8b
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 9 deletions.
diff --git a/...ts/StockOrderSection/OrderDicisionBtn.tsx → ...ts/StockOrderSection/OrderDecisionBtn.tsx b/...ts/StockOrderSection/OrderDicisionBtn.tsx → ...ts/StockOrderSection/OrderDecisionBtn.tsx
@@ -4,6 +4,7 @@ import { styled } from "styled-components";
 import { StateProps } from "../../models/stateProps";
 import { OrderTypeProps } from "../../models/orderTypeProps";
 import { setStockOrderVolume } from "../../reducer/StockOrderVolume-Reducer";
+import { openDecisionWindow } from "../../reducer/setDecisionWindow-Reducer";
 
 const availableMoneyText01: string = "최대";
 const availableMoneyText02: string = "원";
@@ -13,7 +14,7 @@ const totalAmountUnit: string = "원";
 // dummyData
 const dummyMoney = 10000000;
 
-const OrderDicisionBtn = () => {
+const OrderDecisionBtn = () => {
   const dispatch = useDispatch();
   const orderType = useSelector((state: StateProps) => state.stockOrderType);
   const orderPrice = useSelector((state: StateProps) => state.stockOrderPrice);
@@ -22,6 +23,10 @@ const OrderDicisionBtn = () => {
 
   const orderBtnText: string = orderType ? "매도" : "매수";
 
+  const handleOpenDecisionWindow = () => {
+    dispatch(openDecisionWindow());
+  };
+
   useEffect(() => {
     setTotalOrderAmout(orderPrice * orderVolume);
   }, [orderPrice, orderVolume]);
@@ -43,12 +48,14 @@ const OrderDicisionBtn = () => {
         <div className="totalAmount">{totalOrderAmout.toLocaleString()}</div>
         <div>{totalAmountUnit}</div>
       </TotalAmount>
-      <OrderBtn ordertype={orderType}>{orderBtnText}</OrderBtn>
+      <OrderBtn ordertype={orderType} onClick={handleOpenDecisionWindow}>
+        {orderBtnText}
+      </OrderBtn>
     </div>
   );
 };
 
-export default OrderDicisionBtn;
+export default OrderDecisionBtn;
 
 // component 생성
 const AvailableMoney = styled.div<{ orderType: boolean }>`

diff --git a/client/src/components/StockOrderSection/StockOrder.tsx b/client/src/components/StockOrderSection/StockOrder.tsx
@@ -1,14 +1,51 @@
+import { useSelector, useDispatch } from "react-redux";
+import { closeDecisionWindow } from "../../reducer/setDecisionWindow-Reducer";
 import { styled } from "styled-components";
+import { StateProps } from "../../models/stateProps";
 
 import StockPriceList from "./StockPriceList";
 import StockOrderSetting from "./StockOrderSetting";
 
+const orderFailureMessage01: string = "주문 실패";
+const orderFailureMessage02: string = "주문 수량이 없습니다";
+const orderFailureButtonText: string = "확인";
+
 const StockOrder = () => {
+  const dispatch = useDispatch();
+  const decisionWindow = useSelector((state: StateProps) => state.decisionWindow);
+  const orderVolume = useSelector((state: StateProps) => state.stockOrderVolume);
+
+  const handleCloseDecisionWindow = () => {
+    dispatch(closeDecisionWindow());
+  };
+
   return (
-    <Container>
-      <StockPriceList />
-      <StockOrderSetting />
-    </Container>
+    <>
+      {/* 주문 버튼 클릭 안했을 때 */}
+      <Container>
+        <StockPriceList />
+        <StockOrderSetting />
+      </Container>
+
+      {/* 주문 버튼 클릭 했을 때 */}
+      {decisionWindow ? (
+        orderVolume === 0 ? (
+          <OrderFailed>
+            <div className="Container">
+              <div className="message01">{orderFailureMessage01}</div>
+              <div className="message02">{orderFailureMessage02}</div>
+              <button onClick={handleCloseDecisionWindow}>{orderFailureButtonText}</button>
+            </div>
+          </OrderFailed>
+        ) : (
+          <OrderConfirm>
+            <button onClick={handleCloseDecisionWindow}>임시버튼</button>
+          </OrderConfirm>
+        )
+      ) : (
+        <></>
+      )}
+    </>
   );
 };
 
@@ -20,3 +57,61 @@ const Container = styled.div`
   display: flex;
   flex-direction: row;
 `;
+
+const OrderFailed = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(209, 209, 209, 0.75);
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .Container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+
+    width: 360px;
+    height: 148px;
+    padding: 16px;
+    background-color: white;
+    border-radius: 0.5rem;
+
+    .message01 {
+      font-size: 20px;
+    }
+
+    .message02 {
+      font-size: 18px;
+    }
+
+    & button {
+      width: 100%;
+      height: 36px;
+      border: none;
+      border-radius: 0.5rem;
+      color: white;
+      background-color: #2f4f4f;
+      margin-top: 12px;
+    }
+  }
+`;
+
+const OrderConfirm = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(209, 209, 209, 0.75);
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/client/src/components/StockOrderSection/StockOrderSetting.tsx b/client/src/components/StockOrderSection/StockOrderSetting.tsx
@@ -7,7 +7,7 @@ import { OrderTypeProps } from "../../models/orderTypeProps";
 
 import PriceSetting from "./PriceSetting";
 import VolumeSetting from "./VolumeSetteing";
-import OrderDicisionBtn from "./OrderDicisionBtn";
+import OrderDecisionBtn from "./OrderDecisionBtn";
 
 const orderType01: string = "매수";
 const orderType02: string = "매도";
@@ -47,7 +47,7 @@ const StockOrderSetting = () => {
       <OrderTypeChangeEffetLine />
       <PriceSetting stockInfo={stockInfo.stockAsBiResponseDto} companyId={companyId} />
       <VolumeSetting />
-      <OrderDicisionBtn />
+      <OrderDecisionBtn />
     </Container>
   );
 };

diff --git a/client/src/models/stateProps.ts b/client/src/models/stateProps.ts
@@ -6,4 +6,5 @@ export interface StateProps {
   stockOrderSet: boolean;
   companyId: number;
   stockOrderVolume: number;
+  decisionWindow: boolean;
 }
diff --git a/client/src/reducer/SetDecisionWindow-Reducer.ts b/client/src/reducer/SetDecisionWindow-Reducer.ts
@@ -0,0 +1,15 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState: boolean = false;
+
+const setDecisionWindow = createSlice({
+  name: "stock order decision window",
+  initialState: initialState,
+  reducers: {
+    openDecisionWindow: () => true,
+    closeDecisionWindow: () => false,
+  },
+});
+
+export const { openDecisionWindow, closeDecisionWindow } = setDecisionWindow.actions;
+export const setDecisionWindowReducer = setDecisionWindow.reducer;
diff --git a/client/src/store/config.ts b/client/src/store/config.ts
@@ -6,6 +6,7 @@ import { stockOrderSetReducer } from "../reducer/StockOrderSet-Reducer";
 import { companyIdReducer } from "../reducer/CompanyId-Reducer";
 import memberInfoReducer from "../reducer/member/memberInfoSlice";
 import { stockOrderVolumeReducer } from "../reducer/StockOrderVolume-Reducer";
+import { setDecisionWindowReducer } from "../reducer/setDecisionWindow-Reducer";
 
 const store = configureStore({
   reducer: {
@@ -16,6 +17,7 @@ const store = configureStore({
     companyId: companyIdReducer,
     memberInfo: memberInfoReducer,
     stockOrderVolume: stockOrderVolumeReducer,
+    decisionWindow: setDecisionWindowReducer,
   },
 });