From 391940587e1aa32f32c4b8a89dabec14bb765d6a Mon Sep 17 00:00:00 2001 From: novice1993 Date: Tue, 19 Sep 2023 04:21:48 +0900 Subject: [PATCH] =?UTF-8?q?[Feat]=20=EB=AF=B8=EC=B2=B4=EA=B2=B0=20?= =?UTF-8?q?=EA=B1=B0=EB=9E=98=20=EC=B2=B4=EA=B2=B0=20=EC=8B=9C=20=EC=95=8C?= =?UTF-8?q?=EB=A6=BC=20=EC=88=98=EC=8B=A0=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 미체결 거래가 체결 거래로 전환될 시 서버에서 전송하는 데이터 수신하여 알림 메시지 띄우는 기능 구현 Issues #122 --- .../components/StockOrderSection/Index.tsx | 69 +++++------ .../StockOrderSection/OrderResult.tsx | 109 +++++++++--------- .../StockOrderSection/WaitOrderIndicator.tsx | 27 +++++ client/src/hooks/useGetStockChart.tsx | 2 +- .../src/hooks/useGetWaitOrderSuccessInfo.ts | 14 ++- 5 files changed, 129 insertions(+), 92 deletions(-) create mode 100644 client/src/components/StockOrderSection/WaitOrderIndicator.tsx rename "client/src/hooks/\buseGetWaitOrderSuccessInfo.ts" => client/src/hooks/useGetWaitOrderSuccessInfo.ts (77%) diff --git a/client/src/components/StockOrderSection/Index.tsx b/client/src/components/StockOrderSection/Index.tsx index 61fe26c..8969a40 100644 --- 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 ( @@ -130,6 +130,7 @@ const StockOrderSection = () => { + ) : ( diff --git a/client/src/components/StockOrderSection/OrderResult.tsx b/client/src/components/StockOrderSection/OrderResult.tsx index 6172fae..3892cb2 100644 --- 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) => { diff --git a/client/src/components/StockOrderSection/WaitOrderIndicator.tsx b/client/src/components/StockOrderSection/WaitOrderIndicator.tsx new file mode 100644 index 0000000..6e0939b --- /dev/null +++ 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
; +}; + +export default WaitOrderIndicator; diff --git a/client/src/hooks/useGetStockChart.tsx b/client/src/hooks/useGetStockChart.tsx index 9864e8e..c59450e 100644 --- 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/client/src/hooks/\buseGetWaitOrderSuccessInfo.ts" b/client/src/hooks/useGetWaitOrderSuccessInfo.ts similarity index 77% rename from "client/src/hooks/\buseGetWaitOrderSuccessInfo.ts" rename to client/src/hooks/useGetWaitOrderSuccessInfo.ts index 024b7aa..61e8393 100644 --- "a/client/src/hooks/\buseGetWaitOrderSuccessInfo.ts" +++ b/client/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: {