From 8ecb166fc2397974dd75dcd970228698d42e21dc Mon Sep 17 00:00:00 2001 From: novice1993 Date: Mon, 11 Sep 2023 02:07:09 +0900 Subject: [PATCH] =?UTF-8?q?[Feat]=20=EC=A3=BC=EC=8B=9D=EC=A3=BC=EB=AC=B8?= =?UTF-8?q?=20=EC=B0=BD=20=EC=97=90=EB=9F=AC=20=EB=B0=9C=EC=83=9D=20?= =?UTF-8?q?=EC=8B=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=90=A0=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 데이터 fetching에 실패하거나, 받아온 데이터가 비어있는 경우 화면에 띄울 에러문구 화면 구현 Issues #17 --- .../components/StockOrderSection/Index.tsx | 62 ++++++++++++++++--- .../StockOrderSection/PriceSetting.tsx | 24 +++---- .../StockOrderSection/StockOrder.tsx | 2 +- .../StockOrderSection/StockPrice.tsx | 6 +- .../StockOrderSection/StockPriceList.tsx | 4 +- client/src/reducer/CompanyId-Reducer.ts | 2 +- 6 files changed, 69 insertions(+), 31 deletions(-) diff --git a/client/src/components/StockOrderSection/Index.tsx b/client/src/components/StockOrderSection/Index.tsx index 2aabaa1a..989fdad6 100644 --- a/client/src/components/StockOrderSection/Index.tsx +++ b/client/src/components/StockOrderSection/Index.tsx @@ -1,15 +1,19 @@ import { useSelector, useDispatch } from "react-redux"; import { styled } from "styled-components"; import useGetStockInfo from "../../hooks/useGetStockInfo"; +import useGetStockData from "../../hooks/useGetStockData"; import { stockOrderClose } from "../../reducer/StockOrderSet-Reducer"; import { StateProps } from "../../models/stateProps"; import StockOrder from "./StockOrder"; import OrderResult from "./OrderResult"; +const errorMessage: string = "정보를 불러올 수 없습니다"; +const errorButtonText: string = "닫기"; + const loginRequiredText: string = "로그인이 필요한 서비스입니다"; const loginBtnText: string = "StockHolm 로그인"; -const titleText: string = "주식주문"; +const upperbarTitle: string = "주식주문"; const marketType: string = "코스피"; // dummyData @@ -25,26 +29,40 @@ const StockOrderSection = () => { const stockOrderSet = useSelector((state: StateProps) => state.stockOrderSet); const { stockInfo, stockInfoLoading, stockInfoError } = useGetStockInfo(companyId); + const { stockPrice, stockPriceLoading, stockPriceError } = useGetStockData(companyId); - if (stockInfoLoading) { - return <>; + // 주식주문 창 닫기 + const handleStockOrderClose = () => { + dispatch(stockOrderClose()); + }; + + // 1) 데이터 로딩 중 + if (stockInfoLoading || stockPriceLoading) { + return 로딩 중; } - if (stockInfoError) { - return <>; + // 2) 데이터 받아오기 실패 + 성공했으나 빈 데이터일 때 + if (stockInfoError || stockPriceError || stockPrice.length === 0) { + return ( + +
+
{errorMessage}
+ +
+ + ); } + // 3) 데이터 받아오기 성공 const corpName = stockInfo.korName; const stockCode = stockInfo.code; - const handleStockOrderClose = () => { - dispatch(stockOrderClose()); - }; - return ( -

{titleText}

+

{upperbarTitle}

@@ -96,6 +114,30 @@ const Container = styled.aside<{ orderSet: boolean }>` box-shadow: -1px 0px 10px darkgray; background-color: #ffffff; + + .ErrorContainer { + width: 100%; + height: 75%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 12px; + + .ErrorMessage { + font-size: 20px; + color: #999999; + } + + .ErrorCloseButton { + width: 35%; + height: 32px; + color: white; + background-color: #2f4f4f; + border: none; + border-radius: 0.5rem; + } + } `; const UpperBar = styled.div` diff --git a/client/src/components/StockOrderSection/PriceSetting.tsx b/client/src/components/StockOrderSection/PriceSetting.tsx index 4b77a255..bcfe20e2 100644 --- a/client/src/components/StockOrderSection/PriceSetting.tsx +++ b/client/src/components/StockOrderSection/PriceSetting.tsx @@ -4,7 +4,6 @@ import { styled } from "styled-components"; import { setStockOrderPrice, plusStockOrderPrice, minusStockOrderPrice } from "../../reducer/StockOrderPrice-Reducer"; import { StateProps } from "../../models/stateProps"; import { StockInfoprops } from "../../models/stockInfoProps"; -import { number } from "echarts"; const priceSettingTitle: string = "가격"; const unitText: string = "원"; @@ -33,19 +32,16 @@ const PriceSetting = (props: OwnProps) => { // 거래가 직접 기입 시 1) 음수 => 0으로 재설정 2) priceInteval로 나누어 떨어지지 않으면 => 나누어 떨어지는 수로 변경 const handleWriteOrderPrice = (event: React.ChangeEvent) => { - const inputValue = event.target.value; - const numberInputValue = parseInt(inputValue, 10); + // const numberInputValue = parseInt(inputValue, 10); - if(inputValue === ''){ + if (inputValue === "") { dispatch(setStockOrderPrice(0)); } - - - if(event.target.value !== ''){ - const inputValue = parseInt(event.target.value, 10); - dispatch(setStockOrderPrice(inputValue)); + if (event.target.value !== "") { + const inputValue = parseInt(event.target.value, 10); + dispatch(setStockOrderPrice(inputValue)); } // if(inputValue < 0) { @@ -57,7 +53,7 @@ const PriceSetting = (props: OwnProps) => { // const modifiedInputValue = inputValue - remainder; // dispatch(setStockOrderPrice(modifiedInputValue)); // } - } + }; // 종목이 달리지면 -> 가격도 변경 useEffect(() => { @@ -66,9 +62,9 @@ const PriceSetting = (props: OwnProps) => { // 입력 값 -> event 속성에 담겨 있음 // onChange 이벤트 발생할 때 -> 해당 입력값을 Price 관련 전역 상태로 (전역 상태 관리함수 활용) - // set => 으로 actionPayload를 설정해야하는데,,, - // payload에 넘기기 전에 1) 0보다 큰 값인지, 2) PriceInterval로 나누어 떨어지는지 => 안된다면 - // 전역 상태관리 함수를 2번 사용? 1) 일단 입력값으로 바꾸고 2) 2차로 필터링 해서 바꾸고? + // set => 으로 actionPayload를 설정해야하는데,,, + // payload에 넘기기 전에 1) 0보다 큰 값인지, 2) PriceInterval로 나누어 떨어지는지 => 안된다면 + // 전역 상태관리 함수를 2번 사용? 1) 일단 입력값으로 바꾸고 2) 2차로 필터링 해서 바꾸고? // 2차 변경 때 -> 음수면 0으로 바꾸고,,, Iterval이랑 안맞으면 -> Interval로 나눈 나머지 값 차감 return ( @@ -77,7 +73,7 @@ const PriceSetting = (props: OwnProps) => {
{priceSettingTitle}
- + {unitText}