From d65cd1e5b64027bb9375cf6caf0f099888b153d5 Mon Sep 17 00:00:00 2001 From: Jun Hee Jung Date: Wed, 27 Nov 2024 17:00:03 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?= =?UTF-8?q?=EB=82=B4=20=ED=88=AC=EC=9E=90=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 --- .../src/components/sidebar/MyInvestment.tsx | 55 +++++++++++++++++++ .../src/components/sidebar/SidebarCoin.tsx | 4 +- .../src/pages/account/balance/Balance.tsx | 24 +++++--- .../src/pages/account/history/History.tsx | 14 ++++- .../pages/account/history/HistoryOption.tsx | 6 +- .../pages/account/history/HistoryPeriod.tsx | 10 ++-- .../pages/account/waitOrders/WaitOrders.tsx | 16 +++++- 7 files changed, 105 insertions(+), 24 deletions(-) diff --git a/packages/client/src/components/sidebar/MyInvestment.tsx b/packages/client/src/components/sidebar/MyInvestment.tsx index 068786e5..115bf84f 100644 --- a/packages/client/src/components/sidebar/MyInvestment.tsx +++ b/packages/client/src/components/sidebar/MyInvestment.tsx @@ -1,9 +1,64 @@ import NotLogin from '@/components/NotLogin'; +import SidebarCoin from '@/components/sidebar/SidebarCoin'; +import { useSSETicker } from '@/hooks/SSE/useSSETicker'; +import { useMyAccount } from '@/hooks/auth/useMyAccount'; import { useAuthStore } from '@/store/authStore'; +import { formatData } from '@/utility/format/formatSSEData'; +import { useMemo } from 'react'; +import Lottie from 'lottie-react'; +import Wallet from '@asset/lotties/Wallet.json'; + function MyInvestment() { const isAuthenticated = useAuthStore((state) => state.isAuthenticated); + const { data } = useMyAccount(); + const balanceMarketList = useMemo( + () => + data.coins.map((coin) => { + return { + market: `KRW-${coin.market}`, + quantity: Number(coin.quantity), + }; + }), + [data.coins], + ); + const { sseData } = useSSETicker(balanceMarketList); + + const formatters = formatData('KRW'); if (!isAuthenticated) return ; + + return ( +
+
+ 내 투자 +
+
+ {data.coins.length > 0 ? ( + data.coins.map((coin, index) => ( + + )) + ) : ( + <> + +

+ 투자한 종목이 없어요 ! +

+ + )} +
+ ); } export default MyInvestment; diff --git a/packages/client/src/components/sidebar/SidebarCoin.tsx b/packages/client/src/components/sidebar/SidebarCoin.tsx index b72ef178..84002d1b 100644 --- a/packages/client/src/components/sidebar/SidebarCoin.tsx +++ b/packages/client/src/components/sidebar/SidebarCoin.tsx @@ -9,7 +9,7 @@ type SidebarCoinProps = { korean_name: string; listNumber: number; formatters: Formatters; - sseData: SSEDataType; + sseData: SSEDataType | undefined | null; market: string; }; @@ -24,6 +24,8 @@ function SidebarCoin({ const navigate = useNavigate(); const { addRecentlyViewedMarket } = useRecentlyMarketStore(); + if (!sseData) return; + const handleClick = () => { addRecentlyViewedMarket(market); navigate(`/trade/${market}`); diff --git a/packages/client/src/pages/account/balance/Balance.tsx b/packages/client/src/pages/account/balance/Balance.tsx index 5c204741..7232acb8 100644 --- a/packages/client/src/pages/account/balance/Balance.tsx +++ b/packages/client/src/pages/account/balance/Balance.tsx @@ -46,15 +46,21 @@ function Balance() {
손익
- {data.coins.map((coin) => { - return ( - - ); - })} + {data.coins.length > 0 ? ( + data.coins.map((coin) => { + return ( + + ); + }) + ) : ( +
+

보유한 종목이 없습니다.

+
+ )} ); } diff --git a/packages/client/src/pages/account/history/History.tsx b/packages/client/src/pages/account/history/History.tsx index d38fb0cb..63916d42 100644 --- a/packages/client/src/pages/account/history/History.tsx +++ b/packages/client/src/pages/account/history/History.tsx @@ -50,9 +50,17 @@ function History() {
주문시간
- {filteredHistories.reverse().map((history) => ( - - ))} + {filteredHistories.length > 0 ? ( + filteredHistories + .reverse() + .map((history) => ( + + )) + ) : ( +
+

거래 내역이 없습니다.

+
+ )} ); diff --git a/packages/client/src/pages/account/history/HistoryOption.tsx b/packages/client/src/pages/account/history/HistoryOption.tsx index 50eafc5d..8d1f4267 100644 --- a/packages/client/src/pages/account/history/HistoryOption.tsx +++ b/packages/client/src/pages/account/history/HistoryOption.tsx @@ -16,7 +16,7 @@ function HistoryOption({ option, handleOption }: HistoryOptionProps) { className={`py-3 px-4 w-20 border-solid border-gray-400 ${ option === 'TOTAL' - ? 'border-2 border-blue-700 text-blue-800' + ? 'border-2 border-blue-600 text-blue-800' : option === 'BUY' ? 'border-y border-l' : 'border' @@ -31,7 +31,7 @@ function HistoryOption({ option, handleOption }: HistoryOptionProps) { className={`py-3 px-4 w-20 border-solid border-gray-400 ${ option === 'BUY' - ? 'border-2 border-blue-700 text-blue-800' + ? 'border-2 border-blue-600 text-blue-800' : option === 'SELL' ? 'border-y' : 'border-y border-r' @@ -44,7 +44,7 @@ function HistoryOption({ option, handleOption }: HistoryOptionProps) {
{ handleOption('SELL'); }} diff --git a/packages/client/src/pages/account/history/HistoryPeriod.tsx b/packages/client/src/pages/account/history/HistoryPeriod.tsx index f9821e0a..d6e859fe 100644 --- a/packages/client/src/pages/account/history/HistoryPeriod.tsx +++ b/packages/client/src/pages/account/history/HistoryPeriod.tsx @@ -22,7 +22,7 @@ function HistoryPeriod({ period, handlePeriod }: HistoryPeriodProps) { className={`py-3 px-4 w-20 border-solid border-gray-400 ${ period === 'ONE_WEEK' - ? 'border-2 border-blue-700 text-blue-800' + ? 'border-2 border-blue-600 text-blue-800' : period === 'ONE_MONTH' ? 'border-y border-l' : 'border' @@ -37,7 +37,7 @@ function HistoryPeriod({ period, handlePeriod }: HistoryPeriodProps) { className={`py-3 px-4 w-20 border-solid border-gray-400 ${ period === 'ONE_MONTH' - ? 'border-2 border-blue-700 text-blue-800' + ? 'border-2 border-blue-600 text-blue-800' : period === 'THREE_MONTH' ? 'border-y' : 'border-y border-r' @@ -52,7 +52,7 @@ function HistoryPeriod({ period, handlePeriod }: HistoryPeriodProps) { className={`py-3 px-4 w-20 border-solid border-gray-400 ${ period === 'THREE_MONTH' - ? 'border-2 border-blue-700 text-blue-800' + ? 'border-2 border-blue-600 text-blue-800' : period === 'SIX_MONTH' ? 'border-y' : 'border-y border-r' @@ -67,7 +67,7 @@ function HistoryPeriod({ period, handlePeriod }: HistoryPeriodProps) { className={`py-3 px-4 w-20 border-solid border-gray-400 ${ period === 'SIX_MONTH' - ? 'border-2 border-blue-700 text-blue-800' + ? 'border-2 border-blue-600 text-blue-800' : period === 'TOTAL' ? 'border-y' : 'border-y border-r' @@ -80,7 +80,7 @@ function HistoryPeriod({ period, handlePeriod }: HistoryPeriodProps) {
{ handlePeriod('TOTAL'); }} diff --git a/packages/client/src/pages/account/waitOrders/WaitOrders.tsx b/packages/client/src/pages/account/waitOrders/WaitOrders.tsx index b50e8e31..be136a81 100644 --- a/packages/client/src/pages/account/waitOrders/WaitOrders.tsx +++ b/packages/client/src/pages/account/waitOrders/WaitOrders.tsx @@ -17,9 +17,19 @@ function WaitOrders() {
주문취소
- {waitOrders.reverse().map((waitOrder) => ( - - ))} + {waitOrders.length > 0 ? ( + waitOrders + .reverse() + .map((waitOrder) => ( + + )) + ) : ( +
+

+ 미체결 주문이 없습니다. +

+
+ )} );