[Feat] 미체결 거래 체결 시 알림 수신 기능 구현

- 미체결 거래가 체결 거래로 전환될 시 서버에서 전송하는 데이터 수신하여 알림 메시지 띄우는 기능 구현 Issues #122
codestates-seb · Sep 18, 2023 · 3919405 · 3919405
1 parent 0c9f76d
commit 3919405
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 92 deletions.
diff --git a/client/src/components/StockOrderSection/Index.tsx b/client/src/components/StockOrderSection/Index.tsx
@@ -10,6 +10,7 @@ import { stockOrderClose } from "../../reducer/StockOrderSet-Reducer";
 import { StateProps } from "../../models/stateProps";
 import StockOrder from "./StockOrder";
 import OrderResult from "./OrderResult";
+import WaitOrderIndicator from "./WaitOrderIndicator";
 
 const errorMessage: string = "정보를 불러올 수 없습니다";
 const errorButtonText: string = "닫기";
@@ -22,21 +23,20 @@ const marketType: string = "코스피";
 import dummyLogo from "../../asset/CentralSectionMenu-dummyImg.png";
 
 //import company logo
-import kia from '../../asset/logos/기아.svg';
-import dy from '../../asset/logos/디와이.jpeg';
-import logosamsung from '../../asset/logos/삼성전자.svg';
-import celltrion from '../../asset/logos/셀트리온.svg';
-import ecopro from '../../asset/logos/에코프로.jpeg';
-import ecoproBM from '../../asset/logos/에코프로비엠.svg';
-import kakaoBank from '../../asset/logos/카카오뱅크.svg';
-import kuckoo from '../../asset/logos/쿠쿠홀딩스.jpeg';
-import hanse from '../../asset/logos/한세엠케이.jpeg';
-import hyundai from '../../asset/logos/현대차.svg';
-import KG from '../../asset/logos/KG케미칼.png';
-import LGelec from '../../asset/logos/LG전자.svg';
-import LGchem from '../../asset/logos/LG화학.svg';
-import posco from '../../asset/logos/POSCO홀딩스.svg';
-
+import kia from "../../asset/logos/기아.svg";
+import dy from "../../asset/logos/디와이.jpeg";
+import logosamsung from "../../asset/logos/삼성전자.svg";
+import celltrion from "../../asset/logos/셀트리온.svg";
+import ecopro from "../../asset/logos/에코프로.jpeg";
+import ecoproBM from "../../asset/logos/에코프로비엠.svg";
+import kakaoBank from "../../asset/logos/카카오뱅크.svg";
+import kuckoo from "../../asset/logos/쿠쿠홀딩스.jpeg";
+import hanse from "../../asset/logos/한세엠케이.jpeg";
+import hyundai from "../../asset/logos/현대차.svg";
+import KG from "../../asset/logos/KG케미칼.png";
+import LGelec from "../../asset/logos/LG전자.svg";
+import LGchem from "../../asset/logos/LG화학.svg";
+import posco from "../../asset/logos/POSCO홀딩스.svg";
 
 const StockOrderSection = () => {
   const dispatch = useDispatch();
@@ -89,25 +89,25 @@ const StockOrderSection = () => {
   const corpName = stockInfo.korName;
   const stockCode = stockInfo.code;
 
-      // 이미 import된 로고들을 바탕으로 logos 객체 생성
-      const logos: { [key: string]: string } = {
-        '삼성전자': logosamsung,
-        'POSCO홀딩스': posco,
-        '셀트리온': celltrion,
-        '에코프로': ecopro,
-        '에코프로비엠': ecoproBM,
-        '디와이': dy,
-        '쿠쿠홀딩스': kuckoo,
-        '카카오뱅크': kakaoBank,
-        '한세엠케이': hanse,
-        'KG케미칼': KG,
-        'LG화학': LGchem,
-        '현대차': hyundai,
-        'LG전자': LGelec,
-        '기아': kia,
-        };
-         // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다.
-        const companyLogo = logos[corpName] || dummyLogo; // 기본 로고를 대체로 사용
+  // 이미 import된 로고들을 바탕으로 logos 객체 생성
+  const logos: { [key: string]: string } = {
+    삼성전자: logosamsung,
+    POSCO홀딩스: posco,
+    셀트리온: celltrion,
+    에코프로: ecopro,
+    에코프로비엠: ecoproBM,
+    디와이: dy,
+    쿠쿠홀딩스: kuckoo,
+    카카오뱅크: kakaoBank,
+    한세엠케이: hanse,
+    KG케미칼: KG,
+    LG화학: LGchem,
+    현대차: hyundai,
+    LG전자: LGelec,
+    기아: kia,
+  };
+  // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다.
+  const companyLogo = logos[corpName] || dummyLogo; // 기본 로고를 대체로 사용
 
   return (
     <Container orderSet={stockOrderSet}>
@@ -130,6 +130,7 @@ const StockOrderSection = () => {
           </StockName>
           <StockOrder corpName={corpName} />
           <OrderResult />
+          <WaitOrderIndicator />
         </div>
       ) : (
         <LoginRequestIndicator />

diff --git a/client/src/components/StockOrderSection/OrderResult.tsx b/client/src/components/StockOrderSection/OrderResult.tsx
@@ -11,21 +11,20 @@ import { OrderRecordProps } from "../../models/stockProps";
 import dummyImg from "../../asset/CentralSectionMenu-dummyImg.png";
 
 //기업로고 import
-import kia from '../../asset/logos/기아.svg';
-import dy from '../../asset/logos/디와이.jpeg';
-import logosamsung from '../../asset/logos/삼성전자.svg';
-import celltrion from '../../asset/logos/셀트리온.svg';
-import ecopro from '../../asset/logos/에코프로.jpeg';
-import ecoproBM from '../../asset/logos/에코프로비엠.svg';
-import kakaoBank from '../../asset/logos/카카오뱅크.svg';
-import kuckoo from '../../asset/logos/쿠쿠홀딩스.jpeg';
-import hanse from '../../asset/logos/한세엠케이.jpeg';
-import hyundai from '../../asset/logos/현대차.svg';
-import KG from '../../asset/logos/KG케미칼.png';
-import LGelec from '../../asset/logos/LG전자.svg';
-import LGchem from '../../asset/logos/LG화학.svg';
-import posco from '../../asset/logos/POSCO홀딩스.svg';
-
+import kia from "../../asset/logos/기아.svg";
+import dy from "../../asset/logos/디와이.jpeg";
+import logosamsung from "../../asset/logos/삼성전자.svg";
+import celltrion from "../../asset/logos/셀트리온.svg";
+import ecopro from "../../asset/logos/에코프로.jpeg";
+import ecoproBM from "../../asset/logos/에코프로비엠.svg";
+import kakaoBank from "../../asset/logos/카카오뱅크.svg";
+import kuckoo from "../../asset/logos/쿠쿠홀딩스.jpeg";
+import hanse from "../../asset/logos/한세엠케이.jpeg";
+import hyundai from "../../asset/logos/현대차.svg";
+import KG from "../../asset/logos/KG케미칼.png";
+import LGelec from "../../asset/logos/LG전자.svg";
+import LGchem from "../../asset/logos/LG화학.svg";
+import posco from "../../asset/logos/POSCO홀딩스.svg";
 
 const priceUnit: string = "원";
 const volumeUnit: string = "주";
@@ -131,26 +130,26 @@ const OrderedStock = (props: OrderdStockProps) => {
   const corp = companyList.filter((corp: companyProps) => corp.companyId === companyId);
   const corpName = corp[0].korName;
 
-      // 이미 import된 로고들을 바탕으로 logos 객체 생성
-      const logos: { [key: string]: string } = {
-        '삼성전자': logosamsung,
-        'POSCO홀딩스': posco,
-        '셀트리온': celltrion,
-        '에코프로': ecopro,
-        '에코프로비엠': ecoproBM,
-        '디와이': dy,
-        '쿠쿠홀딩스': kuckoo,
-        '카카오뱅크': kakaoBank,
-        '한세엠케이': hanse,
-        'KG케미칼': KG,
-        'LG화학': LGchem,
-        '현대차': hyundai,
-        'LG전자': LGelec,
-        '기아': kia,
-        };
-  
-        // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다.
-      const companyLogo = logos[corpName] || dummyImg; // 기본 로고를 대체로 사용
+  // 이미 import된 로고들을 바탕으로 logos 객체 생성
+  const logos: { [key: string]: string } = {
+    삼성전자: logosamsung,
+    POSCO홀딩스: posco,
+    셀트리온: celltrion,
+    에코프로: ecopro,
+    에코프로비엠: ecoproBM,
+    디와이: dy,
+    쿠쿠홀딩스: kuckoo,
+    카카오뱅크: kakaoBank,
+    한세엠케이: hanse,
+    KG케미칼: KG,
+    LG화학: LGchem,
+    현대차: hyundai,
+    LG전자: LGelec,
+    기아: kia,
+  };
+
+  // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다.
+  const companyLogo = logos[corpName] || dummyImg; // 기본 로고를 대체로 사용
 
   const handleSetOrderCancle = () => {
     setOrderCancle(!orderCancle);
@@ -233,26 +232,26 @@ const CancleConfirm = (props: CancelConfirmProps) => {
     }
   };
 
-    // 이미 import된 로고들을 바탕으로 logos 객체 생성
-    const logos: { [key: string]: string } = {
-      '삼성전자': logosamsung,
-      'POSCO홀딩스': posco,
-      '셀트리온': celltrion,
-      '에코프로': ecopro,
-      '에코프로비엠': ecoproBM,
-      '디와이': dy,
-      '쿠쿠홀딩스': kuckoo,
-      '카카오뱅크': kakaoBank,
-      '한세엠케이': hanse,
-      'KG케미칼': KG,
-      'LG화학': LGchem,
-      '현대차': hyundai,
-      'LG전자': LGelec,
-      '기아': kia,
-      };
-
-      // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다.
-    const companyLogo = logos[corpName] || dummyImg; // 기본 로고를 대체로 사용
+  // 이미 import된 로고들을 바탕으로 logos 객체 생성
+  const logos: { [key: string]: string } = {
+    삼성전자: logosamsung,
+    POSCO홀딩스: posco,
+    셀트리온: celltrion,
+    에코프로: ecopro,
+    에코프로비엠: ecoproBM,
+    디와이: dy,
+    쿠쿠홀딩스: kuckoo,
+    카카오뱅크: kakaoBank,
+    한세엠케이: hanse,
+    KG케미칼: KG,
+    LG화학: LGchem,
+    현대차: hyundai,
+    LG전자: LGelec,
+    기아: kia,
+  };
+
+  // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다.
+  const companyLogo = logos[corpName] || dummyImg; // 기본 로고를 대체로 사용
 
   // 거래량 직접 기입 시
   const handleWriteCancleVolume = (event: React.ChangeEvent<HTMLInputElement>) => {

diff --git a/client/src/components/StockOrderSection/WaitOrderIndicator.tsx b/client/src/components/StockOrderSection/WaitOrderIndicator.tsx
@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { toast } from "react-toastify";
+
+import useGetWaitOrderSuccessInfo from "../../hooks/useGetWaitOrderSuccessInfo";
+
+const WaitOrderIndicator = () => {
+  const { waitOrderSuccessData } = useGetWaitOrderSuccessInfo();
+
+  const toastStyle = {
+    fontSize: "15px",
+    fontWeight: 450,
+    color: "#2679ed",
+  };
+
+  useEffect(() => {
+    if (waitOrderSuccessData) {
+      toast.info(`대기주문이 체결되었습니다`, {
+        style: toastStyle,
+        position: "bottom-left",
+      });
+    }
+  }, [waitOrderSuccessData]);
+
+  return <div></div>;
+};
+
+export default WaitOrderIndicator;
diff --git a/client/src/hooks/useGetStockChart.tsx b/client/src/hooks/useGetStockChart.tsx
@@ -27,7 +27,7 @@ const useGetStockChart = (companyId: number) => {
   const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/companies/charts/";
   const averageDay = 10;
 
-  const getCompareChart = async (compareId: number, compareName: strign) => {
+  const getCompareChart = async (compareId: number, compareName: string) => {
     const response = await axios.get(`${url}${compareId}`);
     const data = await response.data;
 

diff --git a/.../src/hooks/useGetWaitOrderSuccessInfo.ts → ...t/src/hooks/useGetWaitOrderSuccessInfo.ts b/.../src/hooks/useGetWaitOrderSuccessInfo.ts → ...t/src/hooks/useGetWaitOrderSuccessInfo.ts
@@ -7,13 +7,22 @@ const useGetWaitOrderSuccessInfo = () => {
   const queryClient = useQueryClient();
 
   const { data, isLoading, isError, refetch } = useQuery("waitOrderSuccess", getWaitOrderSuccessInfo, {
+    enabled: true,
     onSuccess: (data) => {
+      console.log(new Date());
+      console.log("미체결 거래 알림 성공");
+
       queryClient.invalidateQueries("cash");
       queryClient.invalidateQueries("holdingStock");
       queryClient.invalidateQueries("orderRecord");
-      refetch();
-      console.log("예약주문 처리 테스트");
+
       console.log(data);
+      refetch();
+      console.log("미체결 거래알림 재시작");
+    },
+    onError: () => {
+      console.log("미체결 거래 알림 재요청");
+      refetch();
     },
   });
 
@@ -23,6 +32,7 @@ const useGetWaitOrderSuccessInfo = () => {
 export default useGetWaitOrderSuccessInfo;
 
 const getWaitOrderSuccessInfo = async () => {
+  console.log("미체결 주문 처리대기 실행");
   const accessToken = localStorage.getItem("accessToken");
   const options = {
     headers: {