From f7c4bc159d236affb3b49cd6563f01418db650d0 Mon Sep 17 00:00:00 2001 From: dongree Date: Wed, 4 Dec 2024 15:02:30 +0900 Subject: [PATCH 01/10] =?UTF-8?q?=F0=9F=94=A7=20fix:=20=EB=A7=A4=EC=88=98/?= =?UTF-8?q?=EB=A7=A4=EB=8F=84=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20?= =?UTF-8?q?=EC=8B=9C=20=EB=B0=9C=EC=83=9D=ED=95=98=EB=8A=94=20react426=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/Mypage/Order.tsx | 10 ++++++++-- FE/src/hooks/useOrder.ts | 16 +++------------- 2 files changed, 11 insertions(+), 15 deletions(-) diff --git a/FE/src/components/Mypage/Order.tsx b/FE/src/components/Mypage/Order.tsx index 296cb6c..839d775 100644 --- a/FE/src/components/Mypage/Order.tsx +++ b/FE/src/components/Mypage/Order.tsx @@ -3,11 +3,17 @@ import useOrderCancelAlertModalStore from 'store/useOrderCancleAlertModalStore'; import CancelAlertModal from './CancelAlertModal.tsx'; import { formatTimestamp } from 'utils/format'; import { useNavigate } from 'react-router-dom'; +import { useQuery } from '@tanstack/react-query'; +import { getOrders } from 'service/orders.ts'; export default function Order() { - const { orderQuery, removeOrder } = useOrders(); + const { removeOrder } = useOrders(); + + const { data } = useQuery(['account', 'order'], () => getOrders(), { + staleTime: 1000, + suspense: true, + }); - const { data } = orderQuery; const { isOpen, open } = useOrderCancelAlertModalStore(); const navigation = useNavigate(); diff --git a/FE/src/hooks/useOrder.ts b/FE/src/hooks/useOrder.ts index 3575466..a873977 100644 --- a/FE/src/hooks/useOrder.ts +++ b/FE/src/hooks/useOrder.ts @@ -1,20 +1,10 @@ -import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import Toast from 'components/Toast'; -import { - deleteOrder, - getOrders, - orderBuyStock, - orderSellStock, -} from 'service/orders'; +import { deleteOrder, orderBuyStock, orderSellStock } from 'service/orders'; export default function useOrders() { const queryClient = useQueryClient(); - const orderQuery = useQuery(['account', 'order'], () => getOrders(), { - staleTime: 1000, - suspense: true, - }); - const removeOrder = useMutation((id: number) => deleteOrder(id), { onSuccess: () => queryClient.invalidateQueries(['account', 'order']), }); @@ -47,5 +37,5 @@ export default function useOrders() { }, ); - return { orderQuery, removeOrder, orderBuy, orderSell }; + return { removeOrder, orderBuy, orderSell }; } From 8f58092bd4683bef0aca8d7064731af05745dbd6 Mon Sep 17 00:00:00 2001 From: dongree Date: Wed, 4 Dec 2024 15:12:32 +0900 Subject: [PATCH 02/10] =?UTF-8?q?=F0=9F=92=84=20design=20:=20loading=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/Loading.tsx | 26 +++++++++++++++++++ FE/src/components/StockIndex/index.tsx | 7 ++--- .../StocksDetail/PriceSection/index.tsx | 3 ++- .../StocksDetail/TradeSection/BuySection.tsx | 12 ++++----- .../StocksDetail/TradeSection/SellSection.tsx | 6 ++--- FE/src/page/StocksDetail.tsx | 3 ++- 6 files changed, 40 insertions(+), 17 deletions(-) create mode 100644 FE/src/components/Loading.tsx diff --git a/FE/src/components/Loading.tsx b/FE/src/components/Loading.tsx new file mode 100644 index 0000000..1439e0f --- /dev/null +++ b/FE/src/components/Loading.tsx @@ -0,0 +1,26 @@ +export default function Loading() { + return ( +
+ + Loading... +
+ ); +} diff --git a/FE/src/components/StockIndex/index.tsx b/FE/src/components/StockIndex/index.tsx index 3d8de29..dca7678 100644 --- a/FE/src/components/StockIndex/index.tsx +++ b/FE/src/components/StockIndex/index.tsx @@ -3,7 +3,7 @@ import { Card } from './Card.tsx'; import { useQuery } from '@tanstack/react-query'; export default function StockIndex() { - const { data, isLoading, isError } = useQuery({ + const { data } = useQuery({ queryKey: ['StockIndex'], queryFn: () => getStockIndex(), staleTime: 1000, @@ -11,13 +11,10 @@ export default function StockIndex() { suspense: true, }); - if (isLoading) return
Loading...
; - if (isError) return
Error loading data
; - const { KOSPI, KOSDAQ, KOSPI200, KSQ150 } = data; return ( -
+
diff --git a/FE/src/components/StocksDetail/PriceSection/index.tsx b/FE/src/components/StocksDetail/PriceSection/index.tsx index 6f11d0f..7a48967 100644 --- a/FE/src/components/StocksDetail/PriceSection/index.tsx +++ b/FE/src/components/StocksDetail/PriceSection/index.tsx @@ -8,6 +8,7 @@ import { getTradeHistory } from 'service/tradeHistory.ts'; import { socket } from 'utils/socket.ts'; import { DailyPriceDataType, PriceDataType } from './type.ts'; import { PriceSectionViewType } from 'types.ts'; +import Loading from 'components/Loading.tsx'; export default function PriceSection() { const { id } = useParams(); @@ -109,7 +110,7 @@ export default function PriceSection() { {isLoading ? ( - Loading... + ) : !tradeData ? ( diff --git a/FE/src/components/StocksDetail/TradeSection/BuySection.tsx b/FE/src/components/StocksDetail/TradeSection/BuySection.tsx index 7819307..e6b9754 100644 --- a/FE/src/components/StocksDetail/TradeSection/BuySection.tsx +++ b/FE/src/components/StocksDetail/TradeSection/BuySection.tsx @@ -14,6 +14,7 @@ import useAuthStore from 'store/useAuthStore.ts'; import { useQuery } from '@tanstack/react-query'; import { getCash } from 'service/assets'; import TradeAlertModal from './TradeAlertModal'; +import Loading from 'components/Loading'; type BuySectionProps = { code: string; @@ -23,11 +24,9 @@ type BuySectionProps = { export default function BuySection({ code, detailInfo }: BuySectionProps) { const { stck_prpr, stck_mxpr, stck_llam, hts_kor_isnm } = detailInfo; - const { data, isLoading, isError } = useQuery( - ['detail', 'cash'], - () => getCash(), - { staleTime: 1000 }, - ); + const { data, isLoading } = useQuery(['detail', 'cash'], () => getCash(), { + staleTime: 1000, + }); const [currPrice, setCurrPrice] = useState(stck_prpr); const { isLogin } = useAuthStore(); @@ -57,9 +56,8 @@ export default function BuySection({ code, detailInfo }: BuySectionProps) { setCount(+s); }, []); - if (isLoading) return
loading
; + if (isLoading) return ; if (!data) return
No data
; - if (isError) return
error
; const handlePriceInputBlur = (e: FocusEvent) => { const n = +e.target.value.replace(/,/g, ''); diff --git a/FE/src/components/StocksDetail/TradeSection/SellSection.tsx b/FE/src/components/StocksDetail/TradeSection/SellSection.tsx index b44c30d..befeb69 100644 --- a/FE/src/components/StocksDetail/TradeSection/SellSection.tsx +++ b/FE/src/components/StocksDetail/TradeSection/SellSection.tsx @@ -16,6 +16,7 @@ import useAuthStore from 'store/useAuthStore.ts'; import useTradeAlertModalStore from 'store/useTradeAlertModalStore'; import { calcYield, isNumericString } from 'utils/common'; import TradeAlertModal from './TradeAlertModal'; +import Loading from 'components/Loading'; type SellSectionProps = { code: string; @@ -25,7 +26,7 @@ type SellSectionProps = { export default function SellSection({ code, detailInfo }: SellSectionProps) { const { stck_prpr, stck_mxpr, stck_llam, hts_kor_isnm } = detailInfo; - const { data, isLoading, isError } = useQuery( + const { data, isLoading } = useQuery( ['detail', 'sellPosiible', code], () => getSellInfo(code), { staleTime: 1000 }, @@ -58,9 +59,8 @@ export default function SellSection({ code, detailInfo }: SellSectionProps) { setCount(+s); }, []); - if (isLoading) return
loading
; + if (isLoading) return ; if (!data) return
No data
; - if (isError) return
error
; const quantity = data.quantity; const avg_price = Math.floor(data.avg_price); diff --git a/FE/src/page/StocksDetail.tsx b/FE/src/page/StocksDetail.tsx index c7b49d9..14cc757 100644 --- a/FE/src/page/StocksDetail.tsx +++ b/FE/src/page/StocksDetail.tsx @@ -8,6 +8,7 @@ import { getStocksByCode } from 'service/stocks'; import { Helmet } from 'react-helmet-async'; import { Suspense } from 'react'; import ChartSkeleton from 'components/StocksDetail/ChartSkeleton.tsx'; +import Loading from 'components/Loading'; export default function StocksDetail() { const params = useParams(); @@ -20,7 +21,7 @@ export default function StocksDetail() { ); if (!code) return
Non code
; - if (isLoading) return
Loading...
; + if (isLoading) return ; if (!data) return
Non data
; return ( From 1eef1cff684e7b86c953b596410cb20304658b0b Mon Sep 17 00:00:00 2001 From: dongree Date: Wed, 4 Dec 2024 16:06:40 +0900 Subject: [PATCH 03/10] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=A3=BC=EA=B0=80?= =?UTF-8?q?=EC=A7=80=EC=88=98,=20top5=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/StockIndex/Card.tsx | 2 +- FE/src/components/StockIndex/index.tsx | 2 +- FE/src/components/TopFive/index.tsx | 4 +++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/FE/src/components/StockIndex/Card.tsx b/FE/src/components/StockIndex/Card.tsx index 9b49511..3edfa2f 100644 --- a/FE/src/components/StockIndex/Card.tsx +++ b/FE/src/components/StockIndex/Card.tsx @@ -48,7 +48,7 @@ export function Card({ name, id, initialData }: StockIndexChartProps) { }, [prices]); return ( -
+

{name}

{stockIndexValue.curr_value}

diff --git a/FE/src/components/StockIndex/index.tsx b/FE/src/components/StockIndex/index.tsx index dca7678..faf0a0f 100644 --- a/FE/src/components/StockIndex/index.tsx +++ b/FE/src/components/StockIndex/index.tsx @@ -14,7 +14,7 @@ export default function StockIndex() { const { KOSPI, KOSDAQ, KOSPI200, KSQ150 } = data; return ( -
+
diff --git a/FE/src/components/TopFive/index.tsx b/FE/src/components/TopFive/index.tsx index 1ebd80a..70900b8 100644 --- a/FE/src/components/TopFive/index.tsx +++ b/FE/src/components/TopFive/index.tsx @@ -21,7 +21,9 @@ export default function TopFive() { return (