[Feat] 주식주문 창 에러 발생 시 렌더링 될 화면 구현

- 데이터 fetching에 실패하거나, 받아온 데이터가 비어있는 경우 화면에 띄울 에러문구 화면 구현 Issues #17
codestates-seb · Sep 10, 2023 · 8ecb166 · 8ecb166
1 parent b13dfd6
commit 8ecb166
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 31 deletions.
diff --git 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 <Container orderSet={stockOrderSet}>로딩 중</Container>;
   }
 
-  if (stockInfoError) {
-    return <></>;
+  // 2) 데이터 받아오기 실패 + 성공했으나 빈 데이터일 때
+  if (stockInfoError || stockPriceError || stockPrice.length === 0) {
+    return (
+      <Container orderSet={stockOrderSet}>
+        <div className="ErrorContainer">
+          <div className="ErrorMessage">{errorMessage}</div>
+          <button className="ErrorCloseButton" onClick={handleStockOrderClose}>
+            {errorButtonText}
+          </button>
+        </div>
+      </Container>
+    );
   }
 
+  // 3) 데이터 받아오기 성공
   const corpName = stockInfo.korName;
   const stockCode = stockInfo.code;
 
-  const handleStockOrderClose = () => {
-    dispatch(stockOrderClose());
-  };
-
   return (
     <Container orderSet={stockOrderSet}>
       <UpperBar>
-        <h2 className="Title">{titleText}</h2>
+        <h2 className="Title">{upperbarTitle}</h2>
         <button className="CloseButton" onClick={handleStockOrderClose}>
           &#10005;
         </button>
@@ -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
@@ -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<HTMLInputElement>) => {
-
     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) => {
         <div className="Title">{priceSettingTitle}</div>
       </div>
       <div className="PriceSettingBox">
-        <PriceController defaultValue={orderPrice} value={orderPrice} onChange={handleWriteOrderPrice}/>
+        <PriceController defaultValue={orderPrice} value={orderPrice} onChange={handleWriteOrderPrice} />
         <UnitContent>{unitText}</UnitContent>
         <div className="DirectionBox">
           <button className="PriceUp" onClick={handlePlusOrderPrice}>

diff --git a/client/src/components/StockOrderSection/StockOrder.tsx b/client/src/components/StockOrderSection/StockOrder.tsx
@@ -1,5 +1,5 @@
 import { useSelector, useDispatch } from "react-redux";
-import { closeDecisionWindow } from "../../reducer/setDecisionWindow-Reducer";
+import { closeDecisionWindow } from "../../reducer/SetDecisionWindow-Reducer";
 import { styled } from "styled-components";
 import { StateProps } from "../../models/stateProps";
 

diff --git a/client/src/components/StockOrderSection/StockPrice.tsx b/client/src/components/StockOrderSection/StockPrice.tsx
@@ -32,11 +32,11 @@ const StockPrice = (props: StockPriceProps) => {
   }, [stockPrice]);
 
   if (stockPriceLoading) {
-    return <></>;
+    return;
   }
 
-  if (stockPriceError) {
-    return <></>;
+  if (stockPriceError || stockPrice.length === 0) {
+    return;
   }
 
   // 전날 종가 데이터 -> 1) 일/월 : 금요일 종가로 설정  2) 화~토 : 전날 종가로 설정

diff --git a/client/src/components/StockOrderSection/StockPriceList.tsx b/client/src/components/StockOrderSection/StockPriceList.tsx
@@ -12,11 +12,11 @@ const StockPriceList = () => {
   const { stockInfo, stockInfoLoading, stockInfoError } = useGetStockInfo(companyId);
 
   if (stockInfoLoading) {
-    return <></>;
+    return;
   }
 
   if (stockInfoError) {
-    return <></>;
+    return;
   }
 
   // 1) 당일 매도/매수호가 및 거래량

diff --git a/client/src/reducer/CompanyId-Reducer.ts b/client/src/reducer/CompanyId-Reducer.ts
@@ -1,6 +1,6 @@
 import { createSlice } from "@reduxjs/toolkit";
 
-const initialState: number = 1;
+const initialState: number = 0;
 
 const companyIdSlice = createSlice({
   name: "companyId",