diff --git a/client/src/components/StockOrderSection/PriceSetting.tsx b/client/src/components/StockOrderSection/PriceSetting.tsx index c81b5e3f..8d32ddab 100644 --- a/client/src/components/StockOrderSection/PriceSetting.tsx +++ b/client/src/components/StockOrderSection/PriceSetting.tsx @@ -3,7 +3,7 @@ import { useSelector, useDispatch } from "react-redux"; import { styled } from "styled-components"; import { setStockOrderPrice, plusStockOrderPrice, minusStockOrderPrice } from "../../reducer/StockOrderPrice-Reducer"; import { StateProps } from "../../models/stateProps"; -import { StockInfoprops } from "../../models/stockInfoProps"; +import { StockInfoProps } from "../../models/stockInfoProps"; const priceSettingTitle: string = "가격"; const unitText: string = "원"; @@ -14,14 +14,53 @@ const PriceSetting = (props: OwnProps) => { const dispatch = useDispatch(); const orderPrice = useSelector((state: StateProps) => state.stockOrderPrice); + // 가격 조정 관련 타이머 상태 + const [priceChangeTimer, setPriceChangeTimer] = useState(null); + // 초기 설정값 및 가격 변동폭 설정 const { askp1, askp2, askp3, askp4, askp5 } = stockInfo; - const [priceChangeTimer, setPriceChangeTimer] = useState(null); const sellingPrice = [parseInt(askp1), parseInt(askp2), parseInt(askp3), parseInt(askp4), parseInt(askp5)]; const existSellingPrice = sellingPrice.filter((price) => price !== 0); // price 0인 경우 제거 const defaultPrice = existSellingPrice[0]; const priceInterval = existSellingPrice[1] - existSellingPrice[0]; + // 🔴 [TestCode] 거래가능 안내 메세지 테스트 -> 🟢 구현 성공하여 코드 정리할 예정 + const orderType = useSelector((state: StateProps) => state.stockOrderType); + const [orderPossibility, setOrderPossibility] = useState(true); + + const { bidp1, bidp2, bidp3, bidp4, bidp5 } = stockInfo; + const buyingPrice = [parseInt(bidp1), parseInt(bidp2), parseInt(bidp3), parseInt(bidp4), parseInt(bidp5)]; + const existBuyingPrice = buyingPrice.filter((price) => price !== 0); // price 0인 경우 제거 + + // 거래 가능여부 판별 함수 + const handleCheckTradePossibility = () => { + if (orderType) { + // 매수 주문 + if (orderPrice !== 0 && !existBuyingPrice.includes(orderPrice)) { + setOrderPossibility(false); + } else { + setOrderPossibility(true); + } + } else { + // 매도 주문 + if (orderPrice !== 0 && !existSellingPrice.includes(orderPrice)) { + setOrderPossibility(false); + } else { + setOrderPossibility(true); + } + } + }; + + useEffect(() => { + handleCheckTradePossibility(); + }, [orderPrice]); + + // 가격 설정란에서 포커스 제거 -> 안내 메세지 제거 + const handleRemoveNoVolumeNotification = () => { + setOrderPossibility(true); + }; + // 🔴 [TestCode] 거래가능 안내 메세지 테스트 -> 🟢 구현 성공하여 코드 정리할 예정 + // 거래가 증가/감소 const handlePlusOrderPrice = () => { dispatch(plusStockOrderPrice(priceInterval)); @@ -31,7 +70,7 @@ const PriceSetting = (props: OwnProps) => { dispatch(minusStockOrderPrice(priceInterval)); }; - // 방향키 입력 시 + // 위-아래 방향키 입력 시 const handleInputArrowBtn = (event: React.KeyboardEvent) => { if (event.code === "ArrowUp") { handlePlusOrderPrice(); @@ -77,30 +116,43 @@ const PriceSetting = (props: OwnProps) => { }, [companyId]); return ( - -
-
{priceSettingTitle}
-
-
- - {unitText} -
- - + <> + +
+
{priceSettingTitle}
-
- +
+ + {unitText} +
+ + +
+
+ + + {/* 거래 불가 테스트 */} + {!orderPossibility && ( + +
+ 거래 불가하며 예약 거래 됨을 공지 +
+
+
+
+ )} + ); }; export default PriceSetting; interface OwnProps { - stockInfo: StockInfoprops; + stockInfo: StockInfoProps; companyId: number; } @@ -192,3 +244,9 @@ const UnitContent = styled.div` border-bottom: 1px solid darkgray; background-color: #ffffff; `; + +const NoTradingVolume = styled.div` + position: absolute; + top: 222px; + right: 10px; +`; diff --git a/client/src/hooks/useGetStockData.ts b/client/src/hooks/useGetStockData.ts index 54a98140..fb76e8da 100644 --- a/client/src/hooks/useGetStockData.ts +++ b/client/src/hooks/useGetStockData.ts @@ -33,10 +33,10 @@ const useGetStockData = (companyId: number) => { const { data, isLoading, error, refetch } = useQuery(`chartData${companyId} ${queryKey}`, () => getChartData(companyId), { enabled: true, refetchInterval: autoRefetch ? 60000 * 10 : false, // 정각 혹은 30분에 맞춰서 10분 마다 데이터 리패칭 - onSuccess: () => { - console.log(new Date()); - console.log(data); - }, + // onSuccess: () => { + // console.log(new Date()); + // console.log(data); + // }, }); return { stockPrice: data, stockPriceLoading: isLoading, stockPriceError: error }; diff --git a/client/src/hooks/useGetStockInfo.ts b/client/src/hooks/useGetStockInfo.ts index 8daf977a..a2b904ee 100644 --- a/client/src/hooks/useGetStockInfo.ts +++ b/client/src/hooks/useGetStockInfo.ts @@ -33,10 +33,10 @@ const useGetStockInfo = (companyId: number) => { const { data, isLoading, error, refetch } = useQuery(`stockInfo${companyId} ${queryKey}}`, () => getStockInfo(companyId), { enabled: true, refetchInterval: autoRefetch ? 60000 * 10 : false, // 정각 혹은 30분에 맞춰서 10분 마다 데이터 리패칭 - onSuccess: () => { - console.log(new Date()); - console.log(data); - }, + // onSuccess: () => { + // console.log(new Date()); + // console.log(data); + // }, }); return { stockInfo: data, stockInfoLoading: isLoading, stockInfoError: error };