diff --git a/packages/client/src/api/trade.ts b/packages/client/src/api/trade.ts index 0524d4d5..3e4067ca 100644 --- a/packages/client/src/api/trade.ts +++ b/packages/client/src/api/trade.ts @@ -41,11 +41,11 @@ export async function trade(params: TradeAPI): Promise { } export async function checkCoin(coin: string): Promise { - const response = await authInstance.get(`/trade/check-coinData/${coin}`); + const response = await authInstance.get(`/trade/check-coindata?coin=${coin}`); return response.data; } export async function pendingCoin(coin: string): Promise { - const response = await authInstance.get(`/trade/tradeData/${coin}`); + const response = await authInstance.get(`/trade/tradeData?coin=${coin}`); return response.data; } diff --git a/packages/client/src/components/Header.tsx b/packages/client/src/components/Header.tsx index 5d9873df..199674b3 100644 --- a/packages/client/src/components/Header.tsx +++ b/packages/client/src/components/Header.tsx @@ -1,6 +1,6 @@ import { useAuth } from '@/hooks/auth/useAuth'; import { Button, Navbar } from '@material-tailwind/react'; -import { Link, NavLink, useLocation, useMatch } from 'react-router-dom'; +import { Link, NavLink, useLocation } from 'react-router-dom'; import { useAuthStore } from '@/store/authStore'; import { useToast } from '@/hooks/ui/useToast'; import logoImage from '@asset/logo/corineeLogo.png'; @@ -22,65 +22,63 @@ function Header() { const isAccountPage = location.pathname.startsWith('/account'); return ( - <> - -
- - -

Corinee

- -
-
- - `${isActive ? 'text-black font-semibold' : 'text-gray-600'} hover:text-black` - } + +
+ + +

Corinee

+ +
+
+ + `${isActive ? 'text-black font-semibold' : 'text-gray-600'} hover:text-black` + } + > + 홈 + + + 내 계좌 + +
+
+ {isAuthenticated ? ( +
-
- {isAuthenticated ? ( + 로그아웃 + + ) : ( +
- ) : ( -
- - - -
- )} -
- - + + +
+ )} +
+ ); } diff --git a/packages/client/src/hooks/chart/usePeriodChart.ts b/packages/client/src/hooks/chart/usePeriodChart.ts index 398c5f92..5e18e867 100644 --- a/packages/client/src/hooks/chart/usePeriodChart.ts +++ b/packages/client/src/hooks/chart/usePeriodChart.ts @@ -1,5 +1,6 @@ import { getCandleByPeriod } from '@/api/market'; import { Candle, CandlePeriod, InfiniteCandle } from '@/types/chart'; +import { getPeriodMs } from '@/utility/chart/chartTimeUtils'; import { useSuspenseInfiniteQuery } from '@tanstack/react-query'; export function usePeriodChart( @@ -29,6 +30,7 @@ export function usePeriodChart( candles: data.pages.flat(), hasNextPage: data.pages[data.pages.length - 1]?.length === 200, }), + refetchInterval: getPeriodMs(period, minute), }); return { diff --git a/packages/client/src/hooks/chart/useRealTimeCandle.ts b/packages/client/src/hooks/chart/useRealTimeCandle.ts index db47754c..aca6a372 100644 --- a/packages/client/src/hooks/chart/useRealTimeCandle.ts +++ b/packages/client/src/hooks/chart/useRealTimeCandle.ts @@ -1,7 +1,6 @@ import { useEffect, useRef } from 'react'; import { CandleFormat, CandlePeriod } from '@/types/chart'; import { ISeriesApi } from 'lightweight-charts'; -import { getCurrentCandleStartTime } from '@/utility/chart/chartTimeUtils'; type Props = { seriesRef: React.RefObject>; @@ -20,31 +19,22 @@ export function useRealTimeCandle({ const updateRealTimeCandle = () => { if (!seriesRef.current || !currentPrice || !lastCandleRef.current) return; - - const currentCandleStartTime = getCurrentCandleStartTime( - activePeriod, - minute, - ); - if ( - !lastCandleRef.current || - lastCandleRef.current.time !== currentCandleStartTime - ) { - // refetch(); - } else { - const updatedCandle = { - ...lastCandleRef.current, - close: currentPrice, - high: Math.max(lastCandleRef.current.high, currentPrice), - low: Math.min(lastCandleRef.current.low, currentPrice), - }; - lastCandleRef.current = updatedCandle; - seriesRef.current.update(updatedCandle); - } + const updatedCandle = { + ...lastCandleRef.current, + close: currentPrice, + high: Math.max(lastCandleRef.current.high, currentPrice), + low: Math.min(lastCandleRef.current.low, currentPrice), + }; + lastCandleRef.current = updatedCandle; + seriesRef.current.update(updatedCandle); }; useEffect(() => { - if (!seriesRef.current || !currentPrice) return; - updateRealTimeCandle(); + const intervalId = setInterval(() => { + if (!seriesRef.current || !currentPrice) return; + updateRealTimeCandle(); + }, 500); + return () => clearInterval(intervalId); }, [currentPrice, minute, activePeriod]); return { lastCandleRef }; diff --git a/packages/client/src/pages/home/components/Coin.tsx b/packages/client/src/pages/home/components/Coin.tsx index d3f980b2..67349569 100644 --- a/packages/client/src/pages/home/components/Coin.tsx +++ b/packages/client/src/pages/home/components/Coin.tsx @@ -19,7 +19,6 @@ function Coin({ formatters, market, sseData }: CoinProps) { const { addRecentlyViewedMarket } = useRecentlyMarketStore(); const handleClick = () => { addRecentlyViewedMarket(market.market); - console.log(market); navigate(`/trade/KRW-${market.market.split('-')[1]}`); queryClient.invalidateQueries({ queryKey: ['recentlyMarketList'] }); }; diff --git a/packages/client/src/pages/layout/Layout.tsx b/packages/client/src/pages/layout/Layout.tsx index dd4c9605..dfb3c534 100644 --- a/packages/client/src/pages/layout/Layout.tsx +++ b/packages/client/src/pages/layout/Layout.tsx @@ -4,16 +4,15 @@ import { Outlet } from 'react-router-dom'; function Layout() { return ( -
+
-
+
-
diff --git a/packages/client/src/pages/trade/Trade.tsx b/packages/client/src/pages/trade/Trade.tsx index 6e0126f1..0436a24a 100644 --- a/packages/client/src/pages/trade/Trade.tsx +++ b/packages/client/src/pages/trade/Trade.tsx @@ -37,9 +37,9 @@ function Trade() { return ( <> -
+
-
+
}> @@ -50,10 +50,12 @@ function Trade() { />
+
+ + + +
- - - ); } diff --git a/packages/client/src/pages/trade/components/trade_footer/TradeFooter.tsx b/packages/client/src/pages/trade/components/trade_footer/TradeFooter.tsx index 22db83fc..437dcf04 100644 --- a/packages/client/src/pages/trade/components/trade_footer/TradeFooter.tsx +++ b/packages/client/src/pages/trade/components/trade_footer/TradeFooter.tsx @@ -9,17 +9,15 @@ function TradeFooter() { const duplicatedCoins = coins ? [...coins, ...coins, ...coins, ...coins] : []; return ( -
-
-
- {duplicatedCoins?.map((coin, index) => ( - - ))} -
+
+
+ {duplicatedCoins?.map((coin, index) => ( + + ))}
); diff --git a/packages/client/src/utility/chart/chartTimeUtils.ts b/packages/client/src/utility/chart/chartTimeUtils.ts index c070ddc3..7da3bccf 100644 --- a/packages/client/src/utility/chart/chartTimeUtils.ts +++ b/packages/client/src/utility/chart/chartTimeUtils.ts @@ -1,5 +1,4 @@ import { CandlePeriod } from '@/types/chart'; -import { Time } from 'lightweight-charts'; export const getPeriodMs = (activePeriod: CandlePeriod, minute?: number) => { switch (activePeriod) { @@ -15,41 +14,3 @@ export const getPeriodMs = (activePeriod: CandlePeriod, minute?: number) => { return 60 * 1000; } }; - -export const getCurrentCandleStartTime = ( - activePeriod: CandlePeriod, - minute?: number, -) => { - const now = new Date(); - const periodMs = getPeriodMs(activePeriod, minute); - - switch (activePeriod) { - case 'minutes': - return ((Math.floor(now.getTime() / periodMs) * periodMs) / 1000) as Time; - - case 'days': { - const startOfDay = new Date(now); - startOfDay.setUTCHours(0, 0, 0, 0); - return (startOfDay.getTime() / 1000) as Time; - } - - case 'weeks': { - const startOfWeek = new Date(now); - startOfWeek.setUTCHours(0, 0, 0, 0); - const day = startOfWeek.getUTCDay(); - const diff = startOfWeek.getUTCDate() - day + (day === 0 ? -6 : 1); - startOfWeek.setUTCDate(diff); - return (startOfWeek.getTime() / 1000) as Time; - } - - case 'months': { - const startOfMonth = new Date(now); - startOfMonth.setUTCHours(0, 0, 0, 0); - startOfMonth.setUTCDate(1); - return (startOfMonth.getTime() / 1000) as Time; - } - - default: - return ((Math.floor(now.getTime() / periodMs) * periodMs) / 1000) as Time; - } -}; diff --git a/packages/client/tailwind.config.js b/packages/client/tailwind.config.js index 8de44888..89f9b5d3 100644 --- a/packages/client/tailwind.config.js +++ b/packages/client/tailwind.config.js @@ -12,12 +12,12 @@ module.exports = withMT({ sans: ['Pretendard', 'sans-serif'], }, animation: { - infiniteScroll: 'infiniteScroll 250s linear infinite', + infiniteScroll: 'infiniteScroll 500s linear infinite', }, keyframes: { infiniteScroll: { '0%': { transform: 'translateX(0)' }, - '100%': { transform: 'translateX(-50%)' }, + '100%': { transform: 'translateX(-100%)' }, }, }, },