From 5076a8b536eee69b454d22597498b96459ebfdc6 Mon Sep 17 00:00:00 2001 From: novice1993 Date: Sun, 10 Sep 2023 03:26:46 +0900 Subject: [PATCH] =?UTF-8?q?[Feat]=20=EB=A7=A4=EC=88=98/=EB=A7=A4=EB=8F=84?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20?= =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=90=98=EB=8A=94=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=EC=B0=BD=20=EC=9D=BC=EB=B6=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 주식주문 창의 매수/매도버튼 클릭했을 때 렌더링 되는 모달창 일부 구현 (거래량 0일 때 뜨는 알림문구) - 아직 화면 및 기능 일부만 구현된 상태로, 추후 완성할 예정 Issues #17 --- ...erDicisionBtn.tsx => OrderDecisionBtn.tsx} | 13 ++- .../StockOrderSection/StockOrder.tsx | 103 +++++++++++++++++- .../StockOrderSection/StockOrderSetting.tsx | 4 +- client/src/models/stateProps.ts | 1 + .../src/reducer/SetDecisionWindow-Reducer.ts | 15 +++ client/src/store/config.ts | 2 + 6 files changed, 129 insertions(+), 9 deletions(-) rename client/src/components/StockOrderSection/{OrderDicisionBtn.tsx => OrderDecisionBtn.tsx} (88%) create mode 100644 client/src/reducer/SetDecisionWindow-Reducer.ts diff --git a/client/src/components/StockOrderSection/OrderDicisionBtn.tsx b/client/src/components/StockOrderSection/OrderDecisionBtn.tsx similarity index 88% rename from client/src/components/StockOrderSection/OrderDicisionBtn.tsx rename to client/src/components/StockOrderSection/OrderDecisionBtn.tsx index b430c235..a3740b55 100644 --- a/client/src/components/StockOrderSection/OrderDicisionBtn.tsx +++ b/client/src/components/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 = () => {
{totalOrderAmout.toLocaleString()}
{totalAmountUnit}
- {orderBtnText} + + {orderBtnText} + ); }; -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 index a0316aff..2183f37f 100644 --- 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 ( - - - - + <> + {/* 주문 버튼 클릭 안했을 때 */} + + + + + + {/* 주문 버튼 클릭 했을 때 */} + {decisionWindow ? ( + orderVolume === 0 ? ( + +
+
{orderFailureMessage01}
+
{orderFailureMessage02}
+ +
+ + ) : ( + + + + ) + ) : ( + <> + )} + ); }; @@ -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 index b4760022..514300cb 100644 --- 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 = () => { - + ); }; diff --git a/client/src/models/stateProps.ts b/client/src/models/stateProps.ts index fac7d932..f9f72121 100644 --- 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 new file mode 100644 index 00000000..b2e634ca --- /dev/null +++ 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 index 62188daa..97a78fae 100644 --- 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, }, });