[Add] 주식 거래량 관련 전역 상태 생성

- 주식 거래량(Volume) 관련 전역 상태 생성 - 기존에 지역 상태로 관리하였으나, 다수의 컴포넌트에서 활용되는 경우가 많아서 편의성 및 코드 간결화를 위해 전역 상태로 변경 Issues #17
codestates-seb · Sep 9, 2023 · 862a0a4 · 862a0a4
1 parent d2adb6b
commit 862a0a4
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 63 deletions.
diff --git a/client/src/components/StockOrderSection/Index.tsx b/client/src/components/StockOrderSection/Index.tsx
@@ -3,7 +3,6 @@ import { styled } from "styled-components";
 import useGetStockInfo from "../../hooks/useGetStockInfo";
 import { stockOrderClose } from "../../reducer/StockOrderSet-Reducer";
 import { StateProps } from "../../models/stateProps";
-
 import StockOrder from "./StockOrder";
 import OrderResult from "./OrderResult";
 
@@ -21,9 +20,9 @@ const StockOrderSection = () => {
   // 🔴 로그인 구현될 때까지 임시
   const [login, setLogin] = useState(true);
 
+  const dispatch = useDispatch();
   const companyId = useSelector((state: StateProps) => state.companyId);
   const stockOrderSet = useSelector((state: StateProps) => state.stockOrderSet);
-  const dispatch = useDispatch();
 
   const { stockInfo, stockInfoLoading, stockInfoError } = useGetStockInfo(companyId);
 
@@ -83,6 +82,7 @@ const LoginRequestIndicator = () => {
   );
 };
 
+// component 생성
 const Container = styled.aside<{ orderSet: boolean }>`
   position: fixed;
   z-index: 1;

diff --git a/client/src/components/StockOrderSection/OrderDicisionBtn.tsx b/client/src/components/StockOrderSection/OrderDicisionBtn.tsx
@@ -1,8 +1,9 @@
 import { useState, useEffect } from "react";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { styled } from "styled-components";
 import { StateProps } from "../../models/stateProps";
 import { OrderTypeProps } from "../../models/orderTypeProps";
+import { setStockOrderVolume } from "../../reducer/StockOrderVolume-Reducer";
 
 const availableMoneyText01: string = "최대";
 const availableMoneyText02: string = "원";
@@ -12,26 +13,27 @@ const totalAmountUnit: string = "원";
 // dummyData
 const dummyMoney = 10000000;
 
-const OrderDicisionBtn = (props: OwnProps) => {
-  const { orderVolume, setOrderVolume } = props;
-
-  const stockOrderType = useSelector((state: StateProps) => state.stockOrderType);
+const OrderDicisionBtn = () => {
+  const dispatch = useDispatch();
+  const orderType = useSelector((state: StateProps) => state.stockOrderType);
   const orderPrice = useSelector((state: StateProps) => state.stockOrderPrice);
+  const orderVolume = useSelector((state: StateProps) => state.stockOrderVolume);
   const [totalOrderAmout, setTotalOrderAmout] = useState(0);
-  const orderBtnText: string = stockOrderType ? "매도" : "매수";
+
+  const orderBtnText: string = orderType ? "매도" : "매수";
 
   useEffect(() => {
     setTotalOrderAmout(orderPrice * orderVolume);
   }, [orderPrice, orderVolume]);
 
   useEffect(() => {
-    setOrderVolume(0);
+    dispatch(setStockOrderVolume(0));
     setTotalOrderAmout(0);
-  }, [stockOrderType]);
+  }, [orderType]);
 
   return (
     <div className="container">
-      <AvailableMoney orderType={stockOrderType}>
+      <AvailableMoney orderType={orderType}>
         <span>{availableMoneyText01}</span>
         <span className="availableMoney">{dummyMoney.toLocaleString()}</span>
         <span>{availableMoneyText02}</span>
@@ -41,19 +43,13 @@ const OrderDicisionBtn = (props: OwnProps) => {
         <div className="totalAmount">{totalOrderAmout.toLocaleString()}</div>
         <div>{totalAmountUnit}</div>
       </TotalAmount>
-      <OrderBtn ordertype={stockOrderType}>{orderBtnText}</OrderBtn>
+      <OrderBtn ordertype={orderType}>{orderBtnText}</OrderBtn>
     </div>
   );
 };
 
 export default OrderDicisionBtn;
 
-// type 선언
-interface OwnProps {
-  orderVolume: number;
-  setOrderVolume: (orderVolume: number) => void;
-}
-
 // component 생성
 const AvailableMoney = styled.div<{ orderType: boolean }>`
   display: flex;

diff --git a/client/src/components/StockOrderSection/PriceSetting.tsx b/client/src/components/StockOrderSection/PriceSetting.tsx
@@ -11,17 +11,15 @@ const unitText: string = "원";
 const PriceSetting = (props: OwnProps) => {
   const { stockInfo, companyId } = props;
 
-  const orderPrice = useSelector((state: StateProps) => state.stockOrderPrice);
   const dispatch = useDispatch();
+  const orderPrice = useSelector((state: StateProps) => state.stockOrderPrice);
 
   // 초기 설정값 및 가격 변동폭 설정
   const { askp1, askp2, askp3, askp4, askp5 } = stockInfo;
   const sellingPrice = [parseInt(askp1), parseInt(askp2), parseInt(askp3), parseInt(askp4), parseInt(askp5)];
-  const existSellingPrice = sellingPrice.filter((price) => price !== 0);
+  const existSellingPrice = sellingPrice.filter((price) => price !== 0); // price 0인 경우 제거
   const defaultPrice = existSellingPrice[0];
-  const priceChangeVariation = existSellingPrice[1] - existSellingPrice[0];
-
-  console.log(typeof priceChangeVariation);
+  const priceInterval = existSellingPrice[1] - existSellingPrice[0];
 
   // 초기 설정값 세팅
   useEffect(() => {
@@ -30,11 +28,11 @@ const PriceSetting = (props: OwnProps) => {
 
   // 거래가 증가/감소
   const handlePlusOrderPrice = () => {
-    dispatch(plusStockOrderPrice(priceChangeVariation));
+    dispatch(plusStockOrderPrice(priceInterval));
   };
 
   const handleMinusOrderPrice = () => {
-    dispatch(minusStockOrderPrice(priceChangeVariation));
+    dispatch(minusStockOrderPrice(priceInterval));
   };
 
   return (

diff --git a/client/src/components/StockOrderSection/StockOrderSetting.tsx b/client/src/components/StockOrderSection/StockOrderSetting.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import useGetStockInfo from "../../hooks/useGetStockInfo";
 import { orderTypeBuying, orderTypeSelling } from "../../reducer/StockOrderType-Reducer";
@@ -14,14 +13,11 @@ const orderType01: string = "매수";
 const orderType02: string = "매도";
 
 const StockOrderSetting = () => {
-  const stockOrderType = useSelector((state: StateProps) => state.stockOrderType);
   const dispatch = useDispatch();
-
+  const orderType = useSelector((state: StateProps) => state.stockOrderType);
   const companyId = useSelector((state: StateProps) => state.companyId);
   const { stockInfo, stockInfoLoading, stockInfoError } = useGetStockInfo(companyId);
 
-  const [orderVolume, setOrderVolume] = useState(0);
-
   if (stockInfoLoading) {
     return <></>;
   }
@@ -41,17 +37,17 @@ const StockOrderSetting = () => {
   return (
     <Container>
       <div className="OrderType">
-        <Buying onClick={handleSetBuying} ordertype={stockOrderType}>
+        <Buying onClick={handleSetBuying} ordertype={orderType}>
           {orderType01}
         </Buying>
-        <Selling onClick={handleSetSelling} ordertype={stockOrderType}>
+        <Selling onClick={handleSetSelling} ordertype={orderType}>
           {orderType02}
         </Selling>
       </div>
       <OrderTypeChangeEffetLine />
       <PriceSetting stockInfo={stockInfo.stockAsBiResponseDto} companyId={companyId} />
-      <VolumeSetting orderVolume={orderVolume} setOrderVolume={setOrderVolume} />
-      <OrderDicisionBtn orderVolume={orderVolume} setOrderVolume={setOrderVolume} />
+      <VolumeSetting />
+      <OrderDicisionBtn />
     </Container>
   );
 };
@@ -60,12 +56,12 @@ export default StockOrderSetting;
 
 // 매수/매도 탭 전환 시 하단에 시각화 되는 선
 const OrderTypeChangeEffetLine = () => {
-  const stockOrderType = useSelector((state: StateProps) => state.stockOrderType);
+  const orderType = useSelector((state: StateProps) => state.stockOrderType);
 
   return (
-    <DividingContainer ordertype={stockOrderType}>
-      <DefaultLine ordertype={stockOrderType}>
-        <DivdingLine ordertype={stockOrderType} />
+    <DividingContainer ordertype={orderType}>
+      <DefaultLine ordertype={orderType}>
+        <DivdingLine ordertype={orderType} />
       </DefaultLine>
     </DividingContainer>
   );

diff --git a/client/src/components/StockOrderSection/StockPriceList.tsx b/client/src/components/StockOrderSection/StockPriceList.tsx
@@ -7,8 +7,8 @@ import { StateProps } from "../../models/stateProps";
 import StockPrice from "./StockPrice";
 
 const StockPriceList = () => {
-  const stockOrderType = useSelector((state: StateProps) => state.stockOrderType);
   const companyId = useSelector((state: StateProps) => state.companyId);
+  const stockOrderType = useSelector((state: StateProps) => state.stockOrderType);
   const { stockInfo, stockInfoLoading, stockInfoError } = useGetStockInfo(companyId);
 
   if (stockInfoLoading) {

diff --git a/client/src/components/StockOrderSection/VolumeSetteing.tsx b/client/src/components/StockOrderSection/VolumeSetteing.tsx
@@ -1,7 +1,8 @@
 import { useEffect } from "react";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { styled } from "styled-components";
 import { StateProps } from "../../models/stateProps";
+import { setStockOrderVolume, plusStockOrderVolume, minusStockOrderVolume } from "../../reducer/StockOrderVolume-Reducer";
 
 const volumeSettingTitle: string = "수량";
 const maximumVolumeText01: string = "최대";
@@ -17,56 +18,50 @@ const percentageUnit: string = "%";
 const dummyMoney: number = 10000000;
 const dummyholdingStock = 10;
 
-const VolumeSetting = (props: OwnProps) => {
-  const { orderVolume, setOrderVolume } = props;
+const VolumeSetting = () => {
+  const dispatch = useDispatch();
   const orderType = useSelector((state: StateProps) => state.stockOrderType);
   const orderPrice = useSelector((state: StateProps) => state.stockOrderPrice);
+  const orderVolume = useSelector((state: StateProps) => state.stockOrderVolume);
+
   const maximumBuyingVolume = Math.trunc(dummyMoney / orderPrice);
 
   const handlePlusOrderVolume = () => {
     // 매수 -> 증가 버튼 클릭 시, 최대 구매수량 보다 낮으면 개수 1증가
     if (!orderType) {
-      orderVolume < maximumBuyingVolume && setOrderVolume((previousState: number) => previousState + 1);
+      orderVolume < maximumBuyingVolume && dispatch(plusStockOrderVolume());
     }
     // 매도 -> 증가 버튼 클릭 시, 보유 주식수량 보다 낮으면 개수 1증가
     if (orderType) {
-      orderVolume < dummyholdingStock && setOrderVolume((previousState: number) => previousState + 1);
+      orderVolume < dummyholdingStock && dispatch(plusStockOrderVolume());
     }
   };
 
   const handleMinusOrderVolume = () => {
     if (0 < orderVolume) {
-      setOrderVolume((previousState: number) => previousState - 1);
+      // setOrderVolume((previousState: number) => previousState - 1);
+      dispatch(minusStockOrderVolume());
     }
   };
 
   const handleSetVolumePercentage = (volumePerentage: number) => {
     // 매수 -> percentage 버튼 클릭 시, 최대 구매수량 내에서 계산
     if (!orderType) {
       const orderVolume = Math.trunc(maximumBuyingVolume * (volumePerentage / 100));
-      setOrderVolume((previousState) => {
-        previousState = orderVolume;
-        return previousState;
-      });
+      dispatch(setStockOrderVolume(orderVolume));
     }
 
     // 매도 -> percentage 버튼 클릭 시, 보유 주식수량 내에서 계산
     if (orderType) {
       const orderVolume = Math.trunc(dummyholdingStock * (volumePerentage / 100));
-      setOrderVolume((previousState) => {
-        previousState = orderVolume;
-        return previousState;
-      });
+      dispatch(setStockOrderVolume(orderVolume));
     }
   };
 
   // 지정가 증가 -> (현재 주문수량 > 최대 주문가능 수량)일 경우 -> 현재 주문수량을 최대 주문수량으로 변경
   useEffect(() => {
     if (maximumBuyingVolume < orderVolume) {
-      setOrderVolume((previousState) => {
-        previousState = maximumBuyingVolume;
-        return previousState;
-      });
+      dispatch(setStockOrderVolume(maximumBuyingVolume));
     }
   }, [maximumBuyingVolume]);
 
@@ -116,12 +111,6 @@ const VolumeSetting = (props: OwnProps) => {
 
 export default VolumeSetting;
 
-// type 정의
-interface OwnProps {
-  orderVolume: number;
-  setOrderVolume: (updateFunction: (previousState: number) => number) => void;
-}
-
 // component 생성
 const Container = styled.div`
   width: 100%;

diff --git a/client/src/models/stateProps.ts b/client/src/models/stateProps.ts
@@ -5,4 +5,5 @@ export interface StateProps {
   expandScreen: { left: boolean; right: boolean };
   stockOrderSet: boolean;
   companyId: number;
+  stockOrderVolume: number;
 }
diff --git a/client/src/reducer/StockOrderVolume-Reducer.ts b/client/src/reducer/StockOrderVolume-Reducer.ts
@@ -0,0 +1,16 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState: number = 0;
+
+const stockOrderVolumeSlice = createSlice({
+  name: "stockOrderVolume",
+  initialState: initialState,
+  reducers: {
+    setStockOrderVolume: (_, action) => action.payload,
+    plusStockOrderVolume: (state) => state + 1,
+    minusStockOrderVolume: (state) => state - 1,
+  },
+});
+
+export const { setStockOrderVolume, plusStockOrderVolume, minusStockOrderVolume } = stockOrderVolumeSlice.actions;
+export const stockOrderVolumeReducer = stockOrderVolumeSlice.reducer;
diff --git a/client/src/store/config.ts b/client/src/store/config.ts
@@ -5,6 +5,7 @@ import { expandScreenReducer } from "../reducer/ExpandScreen-Reducer";
 import { stockOrderSetReducer } from "../reducer/StockOrderSet-Reducer";
 import { companyIdReducer } from "../reducer/CompanyId-Reducer";
 import memberInfoReducer from "../reducer/member/memberInfoSlice";
+import { stockOrderVolumeReducer } from "../reducer/StockOrderVolume-Reducer";
 
 const store = configureStore({
   reducer: {
@@ -14,6 +15,7 @@ const store = configureStore({
     stockOrderSet: stockOrderSetReducer,
     companyId: companyIdReducer,
     memberInfo: memberInfoReducer,
+    stockOrderVolume: stockOrderVolumeReducer,
   },
 });